active_s95 1.0.0

data/app/assets/stylesheets/arctic_admin/components/_select2.scss

@@ -0,0 +1,50 @@
+.select2-container--default .select2-selection--single .select2-selection__rendered{
+  line-height: $input-height; 
+  color: $text-color; 
+  font-size: $font-size;
+}
+
+.select2-container .select2-selection--single{ 
+  height: $input-height;
+  outline: 0;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__arrow{ 
+  height: $input-height;
+}
+
+.select2-container--default .select2-selection--single { 
+  border-color: $border-color;
+}
+
+.select2-container .select2-selection--single .select2-selection__rendered{ 
+  padding-left: 12px;
+}
+
+.select2-dropdown{
+  border-color: $border-color; 
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected]{
+  background-color: $primary_color;
+}
+
+.select2-container--default .select2-search--dropdown .select2-search__field{
+  border-color: $border-color;
+}
+
+.select2-container--default .select2-results__option[aria-selected=true]{
+  background-color: $body-background;
+}
+
+.select2-search--dropdown .select2-search__field{
+  padding-left: 12px;
+}
+
+.select2-results{
+  font-size: $font-size;
+}
+
+.select2-results__option{
+  padding-left: 12px;
+}

data/app/assets/stylesheets/arctic_admin/components/_status_tag.scss

@@ -0,0 +1,41 @@
+.status_tag {
+  background: $status-tag-background-color;
+  color: $status-tag-text-color;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 6px 12px;
+  font-size: 0.75em;
+  font-weight: 700;
+  border-radius: $border-radius-badge;
+  display: inline-block;
+  transition: all 0.2s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba($indigo, 0.2);
+  }
+
+  &.ok,
+  &.published,
+  &.complete,
+  &.completed,
+  &.green,
+  &.yes {
+    background-color: $status-tag-background-valid-color;
+    color: darken($teal, 20%);
+  }
+
+  &.cancel,
+  &.red,
+  &.no {
+    background-color: $status-tag-background-error-color;
+    color: darken($coral, 15%);
+  }
+
+  &.warning,
+  &.pending,
+  &.yellow {
+    background-color: rgba(#f2a654, 0.15);
+    color: darken(#f2a654, 25%);
+  }
+}

data/app/assets/stylesheets/arctic_admin/components/_tables.scss

@@ -0,0 +1,434 @@
+table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 8px;
+
+  &:not(.index_table) {
+    border-radius: $border-radius;
+    margin-bottom: 10px;
+  }
+
+  // MOBILE CARD VIEW: Transform table to cards on small screens
+  @media screen and (max-width: $md-tablet) {
+    display: block;
+    border-spacing: 0;
+
+    &.index_table {
+      @include table-to-cards;
+    }
+  }
+
+  // TABLET: Horizontal scroll with momentum for medium screens
+  @media screen and (min-width: #{$md-tablet + 1}) and (max-width: $md-width) {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    border-spacing: 0 6px;
+  }
+}
+
+thead tr {
+  border: none;
+  background: linear-gradient(135deg, rgba($indigo, 0.08) 0%, rgba($indigo, 0.04) 100%);
+  box-shadow: $box-shadow-card;
+
+  @media screen and (max-width: $sm-width) {
+    font-size: 11px;
+  }
+}
+
+thead th {
+  font-size: 12px;
+  text-align: left;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: $indigo-dark;
+
+  a {
+    color: $indigo-dark;
+    font-weight: 700;
+    width: 100%;
+    display: inline-block;
+    padding: 12px 20px 12px 12px;
+
+    @media screen and (min-width: $md-width) {
+      padding: 14px 20px 14px 14px;
+    }
+
+    @media screen and (max-width: $sm-width) {
+      padding: 10px 14px 10px 10px;
+      font-size: 12px;
+    }
+  }
+
+  // Smart column hiding on tablets
+  @media screen and (min-width: $md-tablet) and (max-width: #{$md-width - 1}) {
+    &.col-less-important {
+      display: none;
+    }
+  }
+
+  &:first-child {
+    border-radius: $border-radius-small 0 0 $border-radius-small;
+  }
+
+  &:last-child {
+    border-radius: 0 $border-radius-small $border-radius-small 0;
+  }
+
+  &.col-selectable {
+    padding-left: 12px;
+
+    @media screen and (min-width: $md-width) {
+      padding-left: 14px;
+    }
+
+    @media screen and (max-width: $sm-width) {
+      padding-left: 8px;
+    }
+  }
+}
+
+tbody tr {
+  background-color: #fff;
+  box-shadow: $box-shadow-card;
+  transition: all 0.3s ease;
+  border-left: 4px solid transparent;
+
+  &:hover {
+    background-color: rgba($indigo, 0.08);
+    box-shadow: $box-shadow-hover;
+    transform: translateY(-2px);
+
+    @media screen and (max-width: $md-width) {
+      transform: none;
+    }
+  }
+
+  // TOP 3 RESULTS - GOLD, SILVER, BRONZE
+  &:nth-child(1) {
+    border-left-color: #FFD700;
+  }
+
+  &:nth-child(2) {
+    border-left-color: #C0C0C0;
+  }
+
+  &:nth-child(3) {
+    border-left-color: #CD7F32;
+  }
+
+  th {
+    font-size: $font-size;
+
+    @media screen and (max-width: $sm-width) {
+      font-size: 12px;
+    }
+  }
+
+  td {
+    padding: 12px;
+    vertical-align: middle;
+    color: $text-color;
+    font-size: 13px;
+
+    @media screen and (max-width: $sm-width) {
+      padding: 10px;
+      font-size: 13px;
+    }
+
+    // Smart column hiding on tablets (sync with thead)
+    @media screen and (min-width: $md-tablet) and (max-width: #{$md-width - 1}) {
+      &.col-less-important {
+        display: none;
+      }
+    }
+
+    &:first-child {
+      border-radius: $border-radius-small 0 0 $border-radius-small;
+    }
+
+    &:last-child {
+      border-radius: 0 $border-radius-small $border-radius-small 0;
+    }
+
+    &.col-actions {
+      padding: 8px 12px;
+
+      @media screen and (max-width: $sm-width) {
+        padding: 8px 10px;
+      }
+
+      // Touch-friendly action buttons
+      a,
+      .button,
+      .member_link {
+        @include touch-button(44px);
+        margin: 2px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        @media screen and (max-width: $sm-width) {
+          padding: 8px 12px;
+          font-size: 13px;
+        }
+      }
+    }
+
+    // MONOSPACE FOR TIME AND TEMPO COLUMNS
+    &.col-time,
+    &.col-pace,
+    &.col-tempo,
+    &.col-duration,
+    &.col-result {
+      font-family: $font-family-mono;
+      font-weight: 600;
+      color: $indigo-dark;
+
+      @media screen and (max-width: $sm-width) {
+        font-size: 11px;
+      }
+    }
+
+    @media screen and (min-width: $md-width) {
+      padding: 14px;
+    }
+  }
+}
+
+// style only for table
+.index_as_table {
+  tbody tr {
+    border: none;
+
+    &:hover {
+      background-color: rgba($indigo, 0.08);
+    }
+  }
+}
+
+// INLINE TIME EDITOR
+.time-editable {
+  position: relative;
+  cursor: pointer;
+  font-family: $font-family-mono;
+  font-weight: 600;
+  color: $indigo-dark;
+  transition: all 0.2s ease;
+  padding-right: 28px !important;
+
+  &::after {
+    content: '✎';
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0;
+    color: $indigo;
+    font-size: 14px;
+    transition: opacity 0.2s ease;
+  }
+
+  &:hover {
+    background: rgba($indigo, 0.05);
+    color: $indigo;
+
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  &.editing {
+    padding: 0 !important;
+    background: rgba($indigo, 0.08);
+
+    &::after {
+      display: none;
+    }
+
+    input.time-input {
+      width: 100%;
+      height: 100%;
+      border: 2px solid $indigo;
+      border-radius: $border-radius-small;
+      padding: 8px 12px;
+      font-family: $font-family-mono;
+      font-size: 14px;
+      font-weight: 600;
+      color: $indigo-dark;
+      background: #fff;
+      text-align: center;
+      box-shadow: 0 0 0 4px rgba($indigo, 0.15);
+      outline: none;
+
+      @media screen and (max-width: $sm-width) {
+        font-size: 13px;
+        padding: 6px 10px;
+      }
+
+      &::placeholder {
+        color: rgba($indigo, 0.4);
+        font-style: italic;
+      }
+
+      &:focus {
+        border-color: $indigo-dark;
+        box-shadow: 0 0 0 4px rgba($indigo, 0.25);
+      }
+    }
+  }
+
+  // Specific columns that support inline editing
+  &.col-gun-time,
+  &.col-chip-time,
+  &.col-result-time,
+  &.col-time {
+    @media screen and (max-width: $sm-width) {
+      padding-right: 24px !important;
+
+      &::after {
+        font-size: 12px;
+        right: 6px;
+      }
+    }
+  }
+}
+
+// Time input validation states
+.time-input {
+  &.valid {
+    border-color: $teal;
+    box-shadow: 0 0 0 4px rgba($teal, 0.15);
+  }
+
+  &.invalid {
+    border-color: $coral;
+    box-shadow: 0 0 0 4px rgba($coral, 0.15);
+    animation: shake 0.3s;
+  }
+}
+
+@keyframes shake {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  25% {
+    transform: translateX(-4px);
+  }
+
+  75% {
+    transform: translateX(4px);
+  }
+}
+
+
+.drag-handle {
+  cursor: grab;
+  color: #adb5bd;
+  padding: 10px;
+  font-size: 1.2rem;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  @include no-tap-highlight;
+
+  // Touch-friendly sizing
+  min-width: 44px;
+  min-height: 44px;
+
+  &:hover {
+    color: $indigo;
+    transform: scale(1.1);
+  }
+
+  &:active {
+    cursor: grabbing;
+    color: $indigo-dark;
+  }
+
+  @media screen and (max-width: $sm-width) {
+    padding: 12px;
+    font-size: 1.3rem;
+    min-width: 48px;
+    min-height: 48px;
+
+    // Larger touch target on mobile
+    &::before {
+      content: '';
+      position: absolute;
+      width: 48px;
+      height: 48px;
+      min-width: 48px;
+      min-height: 48px;
+    }
+  }
+}
+
+
+.sortable-ghost {
+  background-color: rgba($indigo, 0.05) !important;
+  border: 2px dashed $indigo !important;
+  opacity: 0.5;
+
+  td {
+    color: transparent !important;
+  }
+}
+
+// Строка, которую тащим
+.sortable-drag {
+  background: #fff !important;
+  opacity: 1 !important;
+  box-shadow: 0 15px 30px rgba($indigo, 0.3) !important;
+  transform: scale(1.02) rotate(1deg) !important;
+  cursor: grabbing !important;
+  z-index: 9999 !important;
+  border-left: 4px solid $indigo !important;
+
+  td {
+    border-top: 2px solid $indigo !important;
+    border-bottom: 2px solid $indigo !important;
+  }
+
+  @media screen and (max-width: $md-width) {
+    transform: scale(1.01) !important;
+    box-shadow: 0 10px 20px rgba($indigo, 0.25) !important;
+  }
+
+  @media screen and (max-width: $sm-width) {
+    transform: scale(1.005) !important;
+    box-shadow: 0 8px 16px rgba($indigo, 0.2) !important;
+  }
+}
+
+
+.sortable-chosen {
+  background: rgba($indigo, 0.08) !important;
+
+  .drag-handle {
+    color: $indigo;
+  }
+}
+
+
+.sortable-table {
+  tbody tr {
+    transition: all 0.2s ease;
+
+    &:hover {
+      .drag-handle {
+        opacity: 1;
+      }
+    }
+  }
+
+  .drag-handle {
+    opacity: 0.5;
+  }
+}

data/app/assets/stylesheets/arctic_admin/components/_tabs.scss

@@ -0,0 +1,51 @@
+.tabs.ui-tabs {
+  border: 1px solid $border-color;
+
+  .nav {
+    border-bottom: 1px solid $border-color;
+
+    li {
+      display: inline-block;
+      text-align: center;
+      @include outline();
+
+      a {
+        color: $text-color;
+        display: inline-block;
+        padding: 15px 25px;
+        @include outline();
+        @include transition-button();
+      }
+
+      &.ui-tabs-active {
+        border-bottom: 2px solid $link-primary-color;
+
+        a {
+          color: $link-primary-color;
+        }
+      }
+    }
+  }
+
+  .tab-content {
+    padding: 10px 20px;
+  }
+}
+
+.scopes {
+  .scope {
+    border-radius: $border-radius-button;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba($indigo, 0.08);
+      transform: translateY(-1px);
+    }
+
+    &.selected {
+      background: linear-gradient(135deg, $indigo 0%, $indigo-dark 100%);
+      color: #fff;
+      font-weight: 700;
+    }
+  }
+}

data/app/assets/stylesheets/arctic_admin/components/_toggle.scss

@@ -0,0 +1,77 @@
+$toggle-width: 40px !default;
+$toggle-height: 20px !default;
+$toggle-offset: 3px !default;
+
+$toggle-outer-default: #ddd !default;
+$toggle-outer-active: $link-primary-color !default;
+$toggle-inner-default: #fff !default;
+$toggle-inner-active: #fff !default;
+
+$toggle-transition: 200ms ease-out !default;
+
+.toggle-bool-switches-container {
+  display: flex;
+  text-align: left;
+
+  span {
+    line-height: 0;
+  }
+
+  .toggle-bool-switch {
+    // reset style
+    background-image: none;
+    box-shadow: none;
+    //
+
+    cursor: pointer;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: $toggle-width;
+    height: $toggle-height;
+    background-color: $toggle-outer-default;
+    border-radius: 100vw;
+    cursor: pointer;
+    transition: $toggle-transition;
+
+    &::before {
+      // reset style
+      height: auto;
+      width: auto;
+      background-image: none;
+      //
+
+
+      content: "";
+      position: absolute;
+      top: $toggle-offset;
+      left: $toggle-offset;
+      bottom: $toggle-offset;
+      
+      aspect-ratio: 1 / 1;
+      
+      background-color: $toggle-inner-default;
+      border-radius: 50%;
+      box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
+      transition: $toggle-transition;
+    }
+
+    &.on {
+      // reset style
+      background-image: none;
+      //
+      background: $link-primary-color;
+
+      &::before {
+        // reset style
+        left: $toggle-offset;
+        //
+
+        background-color: $toggle-inner-active;
+        $toggle-translate-x: calc(( #{$toggle-width} - #{$toggle-height} ));
+        transform: translateX($toggle-translate-x);
+      }
+    }
+  }
+}