@keenmate/pure-admin-core 1.0.0 → 1.1.1

package/src/scss/core-components/_tabs.scss

@@ -1,493 +1,493 @@
-/* ========================================
-   Tabs Component
-   Standalone tabs for organizing content into separate sections
-   ======================================== */
-@use '../variables' as *;
-
-// Tabs container
-.pa-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  border-bottom: $border-width-base solid var(--pa-border-color);
-  gap: $spacing-sm;
-  margin-bottom: $tabs-margin-bottom;
-
-  // Tab items
-  &__item {
-    padding: $btn-padding-v $btn-padding-h;
-    border: none;
-    background: none;
-    color: var(--pa-text-secondary);
-    cursor: pointer;
-    transition: all $transition-fast $easing-snappy;
-    border-bottom: $border-width-medium solid transparent;
-    display: flex;
-    align-items: center;
-    gap: $spacing-sm;
-    font-size: $font-size-sm;
-    white-space: nowrap;
-
-    &:hover {
-      color: var(--pa-text-primary);
-      background-color: rgba($accent-color, $card-tab-hover-opacity);
-    }
-
-    &--active {
-      color: $accent-color;
-      border-bottom-color: $accent-color;
-      font-weight: $font-weight-semibold;
-    }
-
-    // Icons in tabs
-    i {
-      font-size: $font-size-sm;
-    }
-  }
-
-  // Tab content container
-  &__content {
-    // No specific styling needed, just a wrapper
-  }
-
-  // Tab panels
-  &__panel {
-    display: none;
-    padding-top: $tabs-panel-padding-top;
-
-    &--active {
-      display: block;
-    }
-
-    // Remove top margin from first heading
-    h4 {
-      margin-top: 0;
-    }
-  }
-
-  // Pills variant
-  &--pills {
-    border-bottom: none;
-    gap: $spacing-sm;
-
-    .pa-tabs__item {
-      border-radius: $border-radius-lg;
-      border: $border-width-base solid transparent;
-      background-color: var(--pa-primary-bg);
-
-      &:hover {
-        background-color: rgba($accent-color, $tabs-pill-hover-opacity);
-        border-color: rgba($accent-color, $tabs-pill-border-opacity);
-        color: var(--pa-text-primary);
-      }
-
-      &--active {
-        background-color: var(--pa-accent);
-        color: white;
-        border-color: var(--pa-accent);
-      }
-    }
-  }
-
-  // Boxed variant
-  &--boxed {
-    border: $border-width-base solid var(--pa-border-color);
-    border-radius: $border-radius-lg;
-    padding: $spacing-xs;
-    background-color: var(--pa-primary-bg);
-    gap: $spacing-xs;
-
-    .pa-tabs__item {
-      border-radius: $border-radius;
-      border: none;
-      border-bottom: none;
-      padding: $spacing-sm $spacing-md;
-
-      &:hover {
-        background-color: rgba($accent-color, $tabs-boxed-hover-opacity);
-        color: var(--pa-text-primary);
-      }
-
-      &--active {
-        background-color: var(--pa-card-bg);
-        color: var(--pa-text-primary);
-        box-shadow: $shadow-sm;
-      }
-    }
-  }
-
-  // Vertical tabs
-  &--vertical {
-    flex-direction: column;
-    border-bottom: none;
-    border-right: $border-width-base solid var(--pa-border-color);
-    gap: 0;
-    margin-bottom: 0;
-    padding-right: 0;
-    width: fit-content;
-    min-width: max-content;
-
-    .pa-tabs__item {
-      justify-content: flex-start;
-      border-bottom: none;
-      border-right: $border-width-medium solid transparent;
-      padding: $spacing-sm;
-      border-radius: $border-radius 0 0 $border-radius;
-      gap: $tabs-vertical-item-gap;
-      white-space: nowrap;
-      min-height: 4rem; // Default height for vertical tabs
-
-      &:hover {
-        background-color: rgba($accent-color, $tabs-vertical-hover-opacity);
-      }
-
-      &--active {
-        border-right-color: $accent-color;
-        background-color: rgba($accent-color, $tabs-vertical-active-opacity);
-      }
-
-      // Icon with fixed width (follows sidebar pattern)
-      i {
-        width: $tabs-vertical-icon-size;
-        min-width: $tabs-vertical-icon-size;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-      }
-
-      // Text with ellipsis overflow (follows sidebar pattern)
-      span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  // Centered tabs
-  &--centered {
-    justify-content: center;
-
-    // For vertical tabs, center the content within each item
-    &.pa-tabs--vertical {
-      .pa-tabs__item {
-        display: flex !important;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-  }
-
-  // No-wrap tabs - prevent wrapping (opt-out of default behavior)
-  &--nowrap {
-    flex-wrap: nowrap;
-  }
-
-  // Scrollable tabs - horizontal scroll with arrow navigation
-  &--scrollable {
-    position: relative;
-    overflow: hidden;
-    flex-wrap: nowrap; // Force no-wrap for scrolling to work
-
-    // Inner scrollable container
-    .pa-tabs__scroll-container {
-      display: flex;
-      overflow-x: auto;
-      scroll-behavior: smooth;
-      scrollbar-width: none; // Firefox
-      gap: $spacing-sm;
-
-      &::-webkit-scrollbar {
-        display: none; // Chrome, Safari
-      }
-    }
-
-    // Scroll arrows
-    .pa-tabs__scroll-btn {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: $tabs-scroll-btn-width;
-      border: none;
-      background: linear-gradient(to right, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
-      color: var(--pa-text-primary);
-      cursor: pointer;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: opacity $transition-fast;
-      opacity: 0;
-      pointer-events: none;
-
-      &:hover {
-        background: linear-gradient(to right, var(--pa-primary-bg), color-mix(in srgb, var(--pa-primary-bg) 80%, transparent));
-      }
-
-      &--left {
-        left: 0;
-        background: linear-gradient(to right, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
-      }
-
-      &--right {
-        right: 0;
-        background: linear-gradient(to left, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
-      }
-
-      &--visible {
-        opacity: 1;
-        pointer-events: auto;
-      }
-
-      i {
-        font-size: $font-size-lg;
-      }
-    }
-  }
-
-  // Collapse tabs - show only icons when constrained, active tab shows full title
-  &--collapse {
-    flex-wrap: nowrap; // Don't wrap collapsed tabs
-
-    // Hide text spans by default (only show icons)
-    .pa-tabs__item {
-      span {
-        display: none;
-      }
-
-      // Active tab shows both icon and text
-      &--active {
-        span {
-          display: inline;
-        }
-      }
-
-      // Tooltips on collapsed tabs
-      position: relative;
-    }
-  }
-
-  // Full width tabs
-  &--full {
-    .pa-tabs__item {
-      flex: 1;
-      justify-content: center;
-    }
-  }
-
-  // Border top variant - active indicator on top instead of bottom
-  &--border-top {
-    border-bottom: none;
-    border-top: $border-width-base solid var(--pa-border-color);
-
-    .pa-tabs__item {
-      border-bottom: none;
-      border-top: $border-width-medium solid transparent;
-
-      &--active {
-        border-top-color: $accent-color;
-        border-bottom-color: transparent;
-      }
-    }
-  }
-
-  // Size variants
-  &--sm {
-    .pa-tabs__item {
-      padding: $btn-padding-sm-v $btn-padding-sm-h;
-      font-size: $font-size-xs;
-
-      i {
-        font-size: $font-size-xs;
-      }
-    }
-  }
-
-  &--lg {
-    .pa-tabs__item {
-      padding: $btn-padding-lg-v $btn-padding-lg-h;
-      font-size: $font-size-lg;
-
-      i {
-        font-size: $font-size-lg;
-      }
-    }
-  }
-
-  // Horizontal tabs container (for wrapping tabs + content)
-  &__container {
-    // Bordered variant - wraps entire tabs system in card-like border
-    &--bordered {
-      border: $border-width-base solid var(--pa-border-color);
-      border-radius: $border-radius-lg;
-      padding: $card-body-padding-v $card-body-padding-h;
-      background-color: var(--pa-card-bg);
-      margin-bottom: $spacing-base; // Match pa-card margin
-
-      // Remove bottom border from tabs since wrapper has border
-      .pa-tabs {
-        border-bottom: none;
-        padding-bottom: $spacing-md;
-        margin-bottom: 0;
-        border-bottom: $border-width-base solid var(--pa-border-color); // Divider between tabs and content
-      }
-
-      // Remove top padding from content since wrapper provides spacing
-      .pa-tabs__content {
-        padding-top: $spacing-md;
-      }
-    }
-
-    // Card variant - tabs act as card header (same height as pa-card__header)
-    &--card {
-      position: relative; // For dropdown positioning
-      border: $card-border-width solid var(--pa-border-color);
-      border-radius: $card-border-radius;
-      background-color: var(--pa-card-bg);
-      box-shadow: $shadow-sm;
-      margin-bottom: $spacing-base; // Match pa-card margin
-
-      .pa-tabs {
-        height: $card-header-min-height;
-        padding: $card-header-padding-v $card-header-padding-h;
-        background: var(--pa-card-header-bg);
-        border-bottom: $border-width-base solid var(--pa-border-color);
-        box-sizing: border-box;
-        border-top-left-radius: $card-border-radius;
-        border-top-right-radius: $card-border-radius;
-        margin-bottom: 0;
-        align-items: center;
-        gap: $spacing-xs;
-        flex-wrap: nowrap;
-        overflow: visible; // Allow dropdown to overflow
-      }
-
-      .pa-tabs__content {
-        padding: $card-body-padding-v $card-body-padding-h;
-      }
-
-      .pa-tabs__panel {
-        padding-top: 0;
-      }
-
-      // Overflow toggle for tabs that don't fit
-      .pa-tabs__overflow {
-        position: relative;
-        margin-left: auto;
-        flex-shrink: 0;
-      }
-
-      .pa-tabs__overflow-toggle {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: $card-header-min-height;
-        height: 100%;
-        padding: 0;
-        border: none;
-        background: transparent;
-        color: var(--pa-text-secondary);
-        cursor: pointer;
-        transition: all $transition-fast $easing-snappy;
-        border-left: $border-width-base solid var(--pa-border-color);
-        margin: (-$card-header-padding-v) (-$card-header-padding-h) (-$card-header-padding-v) 0;
-        box-sizing: content-box;
-        height: $card-header-min-height;
-
-        &:hover {
-          background-color: rgba($accent-color, $card-tab-hover-opacity);
-          color: var(--pa-text-primary);
-        }
-
-        // When overflow contains the active tab
-        &--has-active {
-          color: var(--pa-accent);
-
-          &::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            height: $border-width-medium;
-            background: var(--pa-accent);
-          }
-        }
-
-        i {
-          font-size: $font-size-sm;
-        }
-      }
-
-      .pa-tabs__overflow-menu {
-        position: absolute;
-        top: $card-header-min-height;
-        right: 0;
-        min-width: 15rem;
-        background: var(--pa-card-bg);
-        border: $card-border-width solid var(--pa-border-color);
-        border-radius: $border-radius;
-        box-shadow: $shadow-lg;
-        z-index: $z-index-dropdown;
-        display: none;
-        flex-direction: column;
-        padding: $spacing-xs 0;
-
-        &--open {
-          display: flex;
-        }
-
-        .pa-tabs__item {
-          padding: $spacing-sm $spacing-base;
-          border: none;
-          border-bottom: none;
-          border-radius: 0;
-          text-align: left;
-          white-space: nowrap;
-
-          &:hover {
-            background-color: rgba($accent-color, $card-tab-hover-opacity);
-          }
-
-          &--active {
-            background-color: rgba($accent-color, 0.1);
-            border-bottom: none;
-          }
-        }
-      }
-    }
-  }
-
-  // Vertical tabs layout wrapper (for proper spacing with content)
-  &__vertical-layout {
-    display: flex;
-    gap: $spacing-base;
-    align-items: flex-start;
-
-    // All panels in vertical layout should have no top padding (aligned horizontally with tabs)
-    .pa-tabs__content .pa-tabs__panel {
-      padding-top: 0;
-    }
-
-    // Bordered variant - wraps entire tabs system in card-like border
-    &--bordered {
-      border: $border-width-base solid var(--pa-border-color);
-      border-radius: $border-radius-lg;
-      padding: $card-body-padding-v $card-body-padding-h;
-      background-color: var(--pa-card-bg);
-      margin-bottom: $spacing-base; // Match pa-card margin
-
-      // Add divider between tabs and content (gap already provides spacing)
-      .pa-tabs--vertical {
-        border-right: $border-width-base solid var(--pa-border-color);
-
-        // Make tab items full width so active border reaches divider
-        .pa-tabs__item {
-          width: 100%;
-        }
-      }
-    }
-  }
-
-}
+/* ========================================
+   Tabs Component
+   Standalone tabs for organizing content into separate sections
+   ======================================== */
+@use '../variables' as *;
+
+// Tabs container
+.pa-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom: $border-width-base solid var(--pa-border-color);
+  gap: $spacing-sm;
+  margin-bottom: $tabs-margin-bottom;
+
+  // Tab items
+  &__item {
+    padding: $btn-padding-v $btn-padding-h;
+    border: none;
+    background: none;
+    color: var(--pa-text-color-2);
+    cursor: pointer;
+    transition: all $transition-fast $easing-snappy;
+    border-bottom: $border-width-medium solid transparent;
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    font-size: $font-size-sm;
+    white-space: nowrap;
+
+    &:hover {
+      color: var(--pa-text-color-1);
+      background-color: rgba($accent-color, $card-tab-hover-opacity);
+    }
+
+    &--active {
+      color: $accent-color;
+      border-bottom-color: $accent-color;
+      font-weight: $font-weight-semibold;
+    }
+
+    // Icons in tabs
+    i {
+      font-size: $font-size-sm;
+    }
+  }
+
+  // Tab content container
+  &__content {
+    // No specific styling needed, just a wrapper
+  }
+
+  // Tab panels
+  &__panel {
+    display: none;
+    padding-top: $tabs-panel-padding-top;
+
+    &--active {
+      display: block;
+    }
+
+    // Remove top margin from first heading
+    h4 {
+      margin-top: 0;
+    }
+  }
+
+  // Pills variant
+  &--pills {
+    border-bottom: none;
+    gap: $spacing-sm;
+
+    .pa-tabs__item {
+      border-radius: $border-radius-lg;
+      border: $border-width-base solid transparent;
+      background-color: var(--pa-main-bg);
+
+      &:hover {
+        background-color: rgba($accent-color, $tabs-pill-hover-opacity);
+        border-color: rgba($accent-color, $tabs-pill-border-opacity);
+        color: var(--pa-text-color-1);
+      }
+
+      &--active {
+        background-color: var(--pa-accent);
+        color: white;
+        border-color: var(--pa-accent);
+      }
+    }
+  }
+
+  // Boxed variant
+  &--boxed {
+    border: $border-width-base solid var(--pa-border-color);
+    border-radius: $border-radius-lg;
+    padding: $spacing-xs;
+    background-color: var(--pa-main-bg);
+    gap: $spacing-xs;
+
+    .pa-tabs__item {
+      border-radius: $border-radius;
+      border: none;
+      border-bottom: none;
+      padding: $spacing-sm $spacing-md;
+
+      &:hover {
+        background-color: rgba($accent-color, $tabs-boxed-hover-opacity);
+        color: var(--pa-text-color-1);
+      }
+
+      &--active {
+        background-color: var(--pa-card-bg);
+        color: var(--pa-text-color-1);
+        box-shadow: $shadow-sm;
+      }
+    }
+  }
+
+  // Vertical tabs
+  &--vertical {
+    flex-direction: column;
+    border-bottom: none;
+    border-right: $border-width-base solid var(--pa-border-color);
+    gap: 0;
+    margin-bottom: 0;
+    padding-right: 0;
+    width: fit-content;
+    min-width: max-content;
+
+    .pa-tabs__item {
+      justify-content: flex-start;
+      border-bottom: none;
+      border-right: $border-width-medium solid transparent;
+      padding: $spacing-sm;
+      border-radius: $border-radius 0 0 $border-radius;
+      gap: $tabs-vertical-item-gap;
+      white-space: nowrap;
+      min-height: 4rem; // Default height for vertical tabs
+
+      &:hover {
+        background-color: rgba($accent-color, $tabs-vertical-hover-opacity);
+      }
+
+      &--active {
+        border-right-color: $accent-color;
+        background-color: rgba($accent-color, $tabs-vertical-active-opacity);
+      }
+
+      // Icon with fixed width (follows sidebar pattern)
+      i {
+        width: $tabs-vertical-icon-size;
+        min-width: $tabs-vertical-icon-size;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      // Text with ellipsis overflow (follows sidebar pattern)
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  // Centered tabs
+  &--centered {
+    justify-content: center;
+
+    // For vertical tabs, center the content within each item
+    &.pa-tabs--vertical {
+      .pa-tabs__item {
+        display: flex !important;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+
+  // No-wrap tabs - prevent wrapping (opt-out of default behavior)
+  &--nowrap {
+    flex-wrap: nowrap;
+  }
+
+  // Scrollable tabs - horizontal scroll with arrow navigation
+  &--scrollable {
+    position: relative;
+    overflow: hidden;
+    flex-wrap: nowrap; // Force no-wrap for scrolling to work
+
+    // Inner scrollable container
+    .pa-tabs__scroll-container {
+      display: flex;
+      overflow-x: auto;
+      scroll-behavior: smooth;
+      scrollbar-width: none; // Firefox
+      gap: $spacing-sm;
+
+      &::-webkit-scrollbar {
+        display: none; // Chrome, Safari
+      }
+    }
+
+    // Scroll arrows
+    .pa-tabs__scroll-btn {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: $tabs-scroll-btn-width;
+      border: none;
+      background: linear-gradient(to right, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
+      color: var(--pa-text-color-1);
+      cursor: pointer;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity $transition-fast;
+      opacity: 0;
+      pointer-events: none;
+
+      &:hover {
+        background: linear-gradient(to right, var(--pa-main-bg), color-mix(in srgb, var(--pa-main-bg) 80%, transparent));
+      }
+
+      &--left {
+        left: 0;
+        background: linear-gradient(to right, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
+      }
+
+      &--right {
+        right: 0;
+        background: linear-gradient(to left, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
+      }
+
+      &--visible {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      i {
+        font-size: $font-size-lg;
+      }
+    }
+  }
+
+  // Collapse tabs - show only icons when constrained, active tab shows full title
+  &--collapse {
+    flex-wrap: nowrap; // Don't wrap collapsed tabs
+
+    // Hide text spans by default (only show icons)
+    .pa-tabs__item {
+      span {
+        display: none;
+      }
+
+      // Active tab shows both icon and text
+      &--active {
+        span {
+          display: inline;
+        }
+      }
+
+      // Tooltips on collapsed tabs
+      position: relative;
+    }
+  }
+
+  // Full width tabs
+  &--full {
+    .pa-tabs__item {
+      flex: 1;
+      justify-content: center;
+    }
+  }
+
+  // Border top variant - active indicator on top instead of bottom
+  &--border-top {
+    border-bottom: none;
+    border-top: $border-width-base solid var(--pa-border-color);
+
+    .pa-tabs__item {
+      border-bottom: none;
+      border-top: $border-width-medium solid transparent;
+
+      &--active {
+        border-top-color: $accent-color;
+        border-bottom-color: transparent;
+      }
+    }
+  }
+
+  // Size variants
+  &--sm {
+    .pa-tabs__item {
+      padding: $btn-padding-sm-v $btn-padding-sm-h;
+      font-size: $font-size-xs;
+
+      i {
+        font-size: $font-size-xs;
+      }
+    }
+  }
+
+  &--lg {
+    .pa-tabs__item {
+      padding: $btn-padding-lg-v $btn-padding-lg-h;
+      font-size: $font-size-lg;
+
+      i {
+        font-size: $font-size-lg;
+      }
+    }
+  }
+
+  // Horizontal tabs container (for wrapping tabs + content)
+  &__container {
+    // Bordered variant - wraps entire tabs system in card-like border
+    &--bordered {
+      border: $border-width-base solid var(--pa-border-color);
+      border-radius: $border-radius-lg;
+      padding: $card-body-padding-v $card-body-padding-h;
+      background-color: var(--pa-card-bg);
+      margin-bottom: $spacing-base; // Match pa-card margin
+
+      // Remove bottom border from tabs since wrapper has border
+      .pa-tabs {
+        border-bottom: none;
+        padding-bottom: $spacing-md;
+        margin-bottom: 0;
+        border-bottom: $border-width-base solid var(--pa-border-color); // Divider between tabs and content
+      }
+
+      // Remove top padding from content since wrapper provides spacing
+      .pa-tabs__content {
+        padding-top: $spacing-md;
+      }
+    }
+
+    // Card variant - tabs act as card header (same height as pa-card__header)
+    &--card {
+      position: relative; // For dropdown positioning
+      border: $card-border-width solid var(--pa-border-color);
+      border-radius: $card-border-radius;
+      background-color: var(--pa-card-bg);
+      box-shadow: $shadow-sm;
+      margin-bottom: $spacing-base; // Match pa-card margin
+
+      .pa-tabs {
+        height: $card-header-min-height;
+        padding: $card-header-padding-v $card-header-padding-h;
+        background: var(--pa-card-header-bg);
+        border-bottom: $border-width-base solid var(--pa-border-color);
+        box-sizing: border-box;
+        border-top-left-radius: $card-border-radius;
+        border-top-right-radius: $card-border-radius;
+        margin-bottom: 0;
+        align-items: center;
+        gap: $spacing-xs;
+        flex-wrap: nowrap;
+        overflow: visible; // Allow dropdown to overflow
+      }
+
+      .pa-tabs__content {
+        padding: $card-body-padding-v $card-body-padding-h;
+      }
+
+      .pa-tabs__panel {
+        padding-top: 0;
+      }
+
+      // Overflow toggle for tabs that don't fit
+      .pa-tabs__overflow {
+        position: relative;
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      .pa-tabs__overflow-toggle {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $card-header-min-height;
+        height: 100%;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: var(--pa-text-color-2);
+        cursor: pointer;
+        transition: all $transition-fast $easing-snappy;
+        border-left: $border-width-base solid var(--pa-border-color);
+        margin: (-$card-header-padding-v) (-$card-header-padding-h) (-$card-header-padding-v) 0;
+        box-sizing: content-box;
+        height: $card-header-min-height;
+
+        &:hover {
+          background-color: rgba($accent-color, $card-tab-hover-opacity);
+          color: var(--pa-text-color-1);
+        }
+
+        // When overflow contains the active tab
+        &--has-active {
+          color: var(--pa-accent);
+
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: $border-width-medium;
+            background: var(--pa-accent);
+          }
+        }
+
+        i {
+          font-size: $font-size-sm;
+        }
+      }
+
+      .pa-tabs__overflow-menu {
+        position: absolute;
+        top: $card-header-min-height;
+        right: 0;
+        min-width: 15rem;
+        background: var(--pa-card-bg);
+        border: $card-border-width solid var(--pa-border-color);
+        border-radius: $border-radius;
+        box-shadow: $shadow-lg;
+        z-index: $z-index-dropdown;
+        display: none;
+        flex-direction: column;
+        padding: $spacing-xs 0;
+
+        &--open {
+          display: flex;
+        }
+
+        .pa-tabs__item {
+          padding: $spacing-sm $spacing-base;
+          border: none;
+          border-bottom: none;
+          border-radius: 0;
+          text-align: left;
+          white-space: nowrap;
+
+          &:hover {
+            background-color: rgba($accent-color, $card-tab-hover-opacity);
+          }
+
+          &--active {
+            background-color: rgba($accent-color, 0.1);
+            border-bottom: none;
+          }
+        }
+      }
+    }
+  }
+
+  // Vertical tabs layout wrapper (for proper spacing with content)
+  &__vertical-layout {
+    display: flex;
+    gap: $spacing-base;
+    align-items: flex-start;
+
+    // All panels in vertical layout should have no top padding (aligned horizontally with tabs)
+    .pa-tabs__content .pa-tabs__panel {
+      padding-top: 0;
+    }
+
+    // Bordered variant - wraps entire tabs system in card-like border
+    &--bordered {
+      border: $border-width-base solid var(--pa-border-color);
+      border-radius: $border-radius-lg;
+      padding: $card-body-padding-v $card-body-padding-h;
+      background-color: var(--pa-card-bg);
+      margin-bottom: $spacing-base; // Match pa-card margin
+
+      // Add divider between tabs and content (gap already provides spacing)
+      .pa-tabs--vertical {
+        border-right: $border-width-base solid var(--pa-border-color);
+
+        // Make tab items full width so active border reaches divider
+        .pa-tabs__item {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+}