// =============================================================================
// VIOLET THEME
// =============================================================================
// A modern admin dashboard theme inspired by Violet's design language.
// Features a vibrant purple/violet palette with bordered cards and clean aesthetics.
// Supports both light and dark mode variants.
// =============================================================================

@import 'theme-base';

// =============================================================================
// VIOLET LIGHT MODE PALETTE
// =============================================================================

$violet-light: (
  // Primary palette - Violet signature purple/violet
  'primary': #7367F0,
  'primary-hover': #5E50EE,
  'primary-light': #EEEDFD,
  'secondary': #82868B,

  // Status colors
  'success': #28C76F,
  'success-light': #D4F4E2,
  'warning': #FF9F43,
  'warning-light': #FFECD9,
  'danger': #EA5455,
  'danger-light': #FCDEDE,
  'info': #00CFE8,
  'info-light': #D0F5FA,

  // Backgrounds
  'bg-body': #F8F8F8,
  'bg-card': #FFFFFF,
  'bg-secondary': #F3F2F7,
  'bg-muted': #EEEEF0,
  'bg-input': #FFFFFF,

  // Text colors
  'text-primary': #5E5873,
  'text-secondary': #6E6B7B,
  'text-muted': #B9B9C3,
  'text-heading': #5E5873,

  // Borders
  'border-color': #EBE9F1,
  'border-light': #F3F2F7,

  // Links
  'link-color': #7367F0,
  'link-hover': #5E50EE,

  // Shadows - Bordered variant uses minimal shadows
  'shadow-sm': 0 2px 4px rgba(165, 163, 174, 0.1),
  'shadow-md': 0 4px 8px rgba(165, 163, 174, 0.12),
  'shadow-lg': 0 8px 16px rgba(165, 163, 174, 0.14),

  // Navigation
  'nav-bg': #283046,
  'nav-text': #B4B7BD,
  'nav-active': #FFFFFF,

  // Labels/Badges
  'label-success-bg': #D4F4E2,
  'label-success-color': #1F9D57,
  'label-warning-bg': #FFECD9,
  'label-warning-color': #CC7A30,
  'label-danger-bg': #FCDEDE,
  'label-danger-color': #C93B3B,
  'label-primary-bg': #EEEDFD,
  'label-primary-color': #5E50EE,
  'label-secondary-bg': #F3F2F7,
  'label-secondary-color': #6E6B7B
);

// =============================================================================
// VIOLET DARK MODE PALETTE
// =============================================================================

$violet-dark: (
  // Primary palette
  'primary': #7367F0,
  'primary-hover': #8B80F3,
  'primary-light': #343A57,
  'secondary': #B4B7BD,

  // Status colors - adjusted for dark mode
  'success': #28C76F,
  'success-light': #1B4332,
  'warning': #FF9F43,
  'warning-light': #4A3019,
  'danger': #EA5455,
  'danger-light': #4A1D1E,
  'info': #00CFE8,
  'info-light': #0F3D44,

  // Backgrounds - Deep blue-gray palette
  'bg-body': #161D31,
  'bg-card': #283046,
  'bg-secondary': #3B4253,
  'bg-muted': #4A5168,
  'bg-input': #283046,

  // Text colors
  'text-primary': #D0D2D6,
  'text-secondary': #B4B7BD,
  'text-muted': #676D7D,
  'text-heading': #D0D2D6,

  // Borders
  'border-color': #3B4253,
  'border-light': #4A5168,

  // Links
  'link-color': #7367F0,
  'link-hover': #8B80F3,

  // Shadows
  'shadow-sm': 0 2px 8px rgba(0, 0, 0, 0.3),
  'shadow-md': 0 4px 24px rgba(0, 0, 0, 0.4),
  'shadow-lg': 0 8px 32px rgba(0, 0, 0, 0.5),

  // Navigation
  'nav-bg': #10163A,
  'nav-text': #676D7D,
  'nav-active': #FFFFFF,

  // Labels/Badges
  'label-success-bg': #1B4332,
  'label-success-color': #28C76F,
  'label-warning-bg': #4A3019,
  'label-warning-color': #FF9F43,
  'label-danger-bg': #4A1D1E,
  'label-danger-color': #EA5455,
  'label-primary-bg': #343A57,
  'label-primary-color': #7367F0,
  'label-secondary-bg': #4A5168,
  'label-secondary-color': #B4B7BD
);

// =============================================================================
// REGISTER VIOLET THEME
// =============================================================================

$violet-theme: (
  'light': $violet-light,
  'dark': $violet-dark
);

@include register-theme('violet', $violet-theme);

// =============================================================================
// VIOLET THEME SELECTOR STYLES
// =============================================================================

[data-skin="violet"] {
  // Light mode (default)
  @include apply-theme-variables('violet', 'light');

  // ==========================================================================
  // TYPOGRAPHY & BASE
  // ==========================================================================

  body {
    background-color: var(--theme-bg-body);
    color: var(--theme-text-primary);
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  // Headings - Violet style
  h1, h2, h3, h4, h5, h6,
  .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
    color: var(--theme-text-heading);
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
    line-height: 1.3;
  }

  h1, .uk-h1 { font-size: 1.625rem; font-weight: 500; }
  h2, .uk-h2 { font-size: 1.375rem; font-weight: 500; }
  h3, .uk-h3 { font-size: 1.125rem; }
  h4, .uk-h4 { font-size: 0.9375rem; }
  h5, .uk-h5 { font-size: 0.8125rem; }
  h6, .uk-h6 { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.4px; }

  // Small/muted text
  small, .small, .uk-text-small {
    font-size: 0.75rem;
  }

  // ==========================================================================
  // HEADER / NAVBAR
  // ==========================================================================

  header {
    background: var(--theme-bg-card) !important;
    border-bottom: 1px solid var(--theme-border-color);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);

    .uk-navbar {
      min-height: 62px;
    }

    .uk-logo {
      font-weight: 600;
      color: var(--theme-text-heading);
    }

    .uk-navbar-item {
      padding: 0 0.75rem;
    }

    .uk-icon-link {
      color: var(--theme-text-secondary);

      &:hover {
        color: var(--theme-primary);
      }
    }
  }

  // ==========================================================================
  // CARDS - Violet bordered style
  // ==========================================================================

  .uk-card {
    background: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    border-radius: 6px;
    box-shadow: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;

    &:hover {
      border-color: var(--theme-primary);
      box-shadow: var(--theme-shadow-sm);
    }
  }

  .uk-card-header {
    padding: 1.5rem 1.5rem 0;
    border-bottom: none;
    background: transparent;

    .uk-card-title {
      font-size: 1.125rem;
      font-weight: 500;
      margin: 0;
      color: var(--theme-text-heading);
    }
  }

  .uk-card-body {
    padding: 1.5rem;
  }

  .uk-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--theme-border-color);
    background: transparent;
    border-radius: 0 0 6px 6px;
  }

  // ==========================================================================
  // BUTTONS - Violet style
  // ==========================================================================

  .uk-button {
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    transition: all 0.25s ease;
    text-transform: none;
    letter-spacing: 0.43px;
    line-height: 1.2;
  }

  .uk-button-primary {
    background-color: var(--theme-primary);
    color: #fff;
    border: none;
    box-shadow: 0 2px 4px rgba(115, 103, 240, 0.4);

    &:hover,
    &:focus {
      background-color: var(--theme-primary-hover);
      color: #fff;
      box-shadow: 0 4px 8px rgba(115, 103, 240, 0.5);
    }
  }

  .uk-button-default {
    background-color: transparent;
    color: var(--theme-secondary);
    border: 1px solid var(--theme-border-color);

    &:hover,
    &:focus {
      background-color: rgba(130, 134, 139, 0.08);
      border-color: var(--theme-secondary);
      color: var(--theme-secondary);
    }
  }

  .uk-button-secondary {
    background-color: rgba(130, 134, 139, 0.16);
    color: var(--theme-secondary);
    border: none;

    &:hover,
    &:focus {
      background-color: rgba(130, 134, 139, 0.24);
    }
  }

  .uk-button-danger {
    background-color: var(--theme-danger);
    color: #fff;
    border: none;
    box-shadow: 0 2px 4px rgba(234, 84, 85, 0.4);

    &:hover,
    &:focus {
      background-color: #D94344;
      box-shadow: 0 4px 8px rgba(234, 84, 85, 0.5);
    }
  }

  .uk-button-small {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
  }

  .uk-button-large {
    padding: 0.625rem 1.5rem;
    font-size: 1.0625rem;
  }

  // ==========================================================================
  // FORM INPUTS - Violet style
  // ==========================================================================

  .uk-input,
  .uk-select,
  .uk-textarea {
    background-color: var(--theme-bg-input);
    border: 1px solid var(--theme-border-color);
    border-radius: 6px;
    color: var(--theme-text-primary);
    font-size: 0.9375rem;
    padding: 0.5rem 1rem;
    height: auto;
    min-height: 2.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    &:focus {
      border-color: var(--theme-primary);
      box-shadow: 0 3px 10px rgba(115, 103, 240, 0.1);
      outline: none;
    }

    &::placeholder {
      color: var(--theme-text-muted);
    }
  }

  .uk-textarea {
    min-height: 5rem;
  }

  .uk-form-label {
    color: var(--theme-text-heading);
    font-size: 0.8125rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
  }

  .uk-form-help,
  .uk-form-stacked .uk-form-help {
    color: var(--theme-text-muted);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
  }

  // ==========================================================================
  // TABLES - Violet style
  // ==========================================================================

  .uk-table {
    font-size: 0.857rem;

    th {
      color: var(--theme-text-secondary);
      font-size: 0.857rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 0.72rem 1.5rem;
      border-bottom: 1px solid var(--theme-border-color);
      background: var(--theme-bg-secondary);
    }

    td {
      padding: 0.72rem 1.5rem;
      border-top: 1px solid var(--theme-border-color);
      vertical-align: middle;
    }

    tbody tr {
      transition: background-color 0.2s ease;

      &:hover {
        background-color: var(--theme-bg-secondary);
      }
    }
  }

  .uk-table-striped tbody tr:nth-of-type(odd) {
    background: var(--theme-bg-secondary);
  }

  // ==========================================================================
  // TABS - Violet style
  // ==========================================================================

  .uk-tab {
    border-bottom: 1px solid var(--theme-border-color);

    &::before {
      display: none;
    }

    > li {
      margin-bottom: -1px;

      > a {
        color: var(--theme-text-muted);
        font-size: 0.875rem;
        font-weight: 500;
        padding: 0.786rem 0;
        margin-right: 1.5rem;
        border: none;
        border-bottom: 2px solid transparent;
        background: transparent;
        border-radius: 0;
        transition: all 0.2s ease;

        &:hover {
          color: var(--theme-primary);
          border-bottom-color: var(--theme-primary);
        }
      }

      &.uk-active > a {
        color: var(--theme-primary);
        border-bottom-color: var(--theme-primary);
        background: transparent;
      }
    }
  }

  // ==========================================================================
  // SUBNAV - Violet style
  // ==========================================================================

  .uk-subnav {
    margin-left: -1rem;

    > * {
      padding-left: 1rem;
    }

    > li > a {
      color: var(--theme-text-muted);
      font-size: 0.875rem;
      font-weight: 500;
      padding: 0.5rem 0.75rem;
      transition: color 0.2s ease;

      &:hover {
        color: var(--theme-text-primary);
      }
    }

    > li.uk-active > a {
      color: var(--theme-primary);
    }
  }

  // Subnav Pill - Violet style
  .uk-subnav-pill {
    > li > a {
      background: transparent;
      border-radius: 6px;
      padding: 0.5rem 1rem;

      &:hover {
        background: var(--theme-bg-secondary);
        color: var(--theme-text-primary);
      }
    }

    > li.uk-active > a {
      background: var(--theme-primary);
      color: #fff;
      box-shadow: 0 2px 4px rgba(115, 103, 240, 0.4);
    }
  }

  // Subnav Divider
  .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
    border-left-color: var(--theme-border-color);
  }

  // ==========================================================================
  // LABELS/BADGES - Violet style
  // ==========================================================================

  .uk-label {
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
  }

  .uk-label-success,
  .label-success {
    background-color: var(--theme-label-success-bg) !important;
    color: var(--theme-label-success-color) !important;
  }

  .uk-label-warning,
  .label-warning {
    background-color: var(--theme-label-warning-bg) !important;
    color: var(--theme-label-warning-color) !important;
  }

  .uk-label-danger,
  .label-danger {
    background-color: var(--theme-label-danger-bg) !important;
    color: var(--theme-label-danger-color) !important;
  }

  .uk-label-primary,
  .label-primary {
    background-color: var(--theme-label-primary-bg) !important;
    color: var(--theme-label-primary-color) !important;
  }

  // Badge (circular count)
  .uk-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    border-radius: 10rem;
    background-color: var(--theme-primary);
  }

  // ==========================================================================
  // LINKS
  // ==========================================================================

  a:not(.uk-button) {
    color: var(--theme-link-color);
    text-decoration: none;
    transition: color 0.2s ease;

    &:hover {
      color: var(--theme-link-hover);
      text-decoration: none;
    }
  }

  // ==========================================================================
  // NAVIGATION
  // ==========================================================================

  .uk-nav-default > li > a {
    color: var(--theme-text-secondary);
    padding: 0.625rem 0;
    font-size: 0.875rem;

    &:hover,
    &:focus {
      color: var(--theme-primary);
    }
  }

  .uk-nav-default > li.uk-active > a {
    color: var(--theme-primary);
  }

  .uk-nav-header {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.625rem 0;
  }

  .uk-nav-divider {
    border-top-color: var(--theme-border-color);
    margin: 0.5rem 0;
  }

  // ==========================================================================
  // DROPDOWNS
  // ==========================================================================

  .uk-dropdown {
    background: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    border-radius: 6px;
    box-shadow: var(--theme-shadow-md);
    padding: 0.5rem 0;
    min-width: 12rem;
  }

  .uk-dropdown-nav > li > a {
    color: var(--theme-text-primary);
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;

    &:hover {
      background: var(--theme-bg-secondary);
      color: var(--theme-primary);
    }
  }

  .uk-dropdown-nav .uk-nav-header {
    padding: 0.5rem 1.25rem;
  }

  .uk-dropdown-nav .uk-nav-divider {
    margin: 0.5rem 0;
  }

  // ==========================================================================
  // MODALS
  // ==========================================================================

  .uk-modal-dialog {
    background: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    border-radius: 6px;
    box-shadow: var(--theme-shadow-md);
  }

  .uk-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--theme-border-color);
    border-radius: 6px 6px 0 0;
  }

  .uk-modal-body {
    padding: 1.5rem;
  }

  .uk-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--theme-border-color);
    border-radius: 0 0 6px 6px;
  }

  .uk-modal-title {
    font-size: 1.125rem;
    font-weight: 500;
  }

  // ==========================================================================
  // ALERTS
  // ==========================================================================

  .uk-alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.9375rem;
    border: 1px solid transparent;
  }

  .uk-alert-primary {
    background: var(--theme-label-primary-bg);
    color: var(--theme-label-primary-color);
    border-color: rgba(115, 103, 240, 0.2);
  }

  .uk-alert-success {
    background: var(--theme-label-success-bg);
    color: var(--theme-label-success-color);
    border-color: rgba(40, 199, 111, 0.2);
  }

  .uk-alert-warning {
    background: var(--theme-label-warning-bg);
    color: var(--theme-label-warning-color);
    border-color: rgba(255, 159, 67, 0.2);
  }

  .uk-alert-danger {
    background: var(--theme-label-danger-bg);
    color: var(--theme-label-danger-color);
    border-color: rgba(234, 84, 85, 0.2);
  }

  // ==========================================================================
  // PROGRESS BARS
  // ==========================================================================

  .uk-progress {
    height: 6px;
    border-radius: 6px;
    background: var(--theme-bg-secondary);

    &::-webkit-progress-value {
      background: var(--theme-primary);
      border-radius: 6px;
    }

    &::-moz-progress-bar {
      background: var(--theme-primary);
      border-radius: 6px;
    }
  }

  // ==========================================================================
  // UTILITIES
  // ==========================================================================

  .text-muted {
    color: var(--theme-text-muted) !important;
  }

  .text-secondary {
    color: var(--theme-text-secondary) !important;
  }

  .uk-text-meta {
    color: var(--theme-text-muted);
    font-size: 0.75rem;
  }

  // Status colors
  .status-success,
  .uk-text-success {
    color: var(--theme-success) !important;
  }

  .status-warning,
  .uk-text-warning {
    color: var(--theme-warning) !important;
  }

  .status-danger,
  .uk-text-danger {
    color: var(--theme-danger) !important;
  }

  .status-info,
  .uk-text-primary {
    color: var(--theme-primary) !important;
  }

  // ==========================================================================
  // AVATARS
  // ==========================================================================

  .avatar,
  [class*="uk-border-circle"] {
    border: 2px solid var(--theme-bg-card);
    box-shadow: var(--theme-shadow-sm);
  }

  // ==========================================================================
  // LISTS
  // ==========================================================================

  .uk-list > li {
    margin-top: 0.75rem;
  }

  .uk-list-divider > li:nth-child(n+2) {
    border-top-color: var(--theme-border-color);
    padding-top: 0.75rem;
  }

  // ==========================================================================
  // CONTAINER ADJUSTMENTS
  // ==========================================================================

  .uk-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  // Page title area
  .uk-heading-small {
    font-size: 1.5rem;
    font-weight: 500;
  }
}

// =============================================================================
// VIOLET DARK MODE
// =============================================================================

[data-skin="violet"][data-theme="dark"] {
  @include apply-theme-variables('violet', 'dark');

  // Body
  body {
    background-color: var(--theme-bg-body);
    color: var(--theme-text-primary);
  }

  // Headings
  h1, h2, h3, h4, h5, h6,
  .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
    color: var(--theme-text-heading);
  }

  // Header
  header {
    background: var(--theme-bg-card) !important;
    border-bottom-color: var(--theme-border-color);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  }

  // Cards
  .uk-card {
    background: var(--theme-bg-card);
    border-color: var(--theme-border-color);
    box-shadow: var(--theme-shadow-sm);

    &:hover {
      box-shadow: var(--theme-shadow-md);
    }
  }

  .uk-card-header {
    border-bottom-color: var(--theme-border-color);
  }

  .uk-card-footer {
    border-top-color: var(--theme-border-color);
    background: var(--theme-bg-secondary);
  }

  // Buttons
  .uk-button-primary {
    &:hover,
    &:focus {
      box-shadow: 0 8px 25px rgba(115, 103, 240, 0.45);
    }
  }

  .uk-button-default {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);

    &:hover,
    &:focus {
      background-color: var(--theme-bg-muted);
      border-color: var(--theme-primary);
      color: var(--theme-primary);
    }
  }

  .uk-button-secondary {
    background-color: var(--theme-bg-muted);

    &:hover,
    &:focus {
      background-color: var(--theme-border-color);
    }
  }

  // Form elements
  .uk-input,
  .uk-select,
  .uk-textarea {
    background-color: var(--theme-bg-input);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);

    &:focus {
      border-color: var(--theme-primary);
      box-shadow: 0 3px 10px rgba(115, 103, 240, 0.2);
    }

    &::placeholder {
      color: var(--theme-text-muted);
    }
  }

  // Tables
  .uk-table {
    th {
      border-bottom-color: var(--theme-border-color);
      background: var(--theme-bg-secondary);
    }

    td {
      border-top-color: var(--theme-border-color);
    }

    tbody tr:hover {
      background-color: var(--theme-bg-secondary);
    }
  }

  .uk-table-striped tbody tr:nth-of-type(odd) {
    background: var(--theme-bg-secondary);
  }

  // Tabs
  .uk-tab {
    border-bottom-color: var(--theme-border-color);

    > li > a:hover {
      border-bottom-color: var(--theme-primary);
    }
  }

  // Dropdowns
  .uk-dropdown {
    background: var(--theme-bg-card);
    border-color: var(--theme-border-color);
    box-shadow: var(--theme-shadow-lg);
  }

  .uk-dropdown-nav > li > a:hover {
    background: var(--theme-bg-secondary);
  }

  // Modals
  .uk-modal-dialog {
    background: var(--theme-bg-card);
    box-shadow: var(--theme-shadow-lg);
  }

  .uk-modal-header {
    border-bottom-color: var(--theme-border-color);
  }

  .uk-modal-footer {
    border-top-color: var(--theme-border-color);
  }

  // Alerts
  .uk-alert-primary {
    background: var(--theme-label-primary-bg);
    color: var(--theme-label-primary-color);
  }

  .uk-alert-success {
    background: var(--theme-label-success-bg);
    color: var(--theme-label-success-color);
  }

  .uk-alert-warning {
    background: var(--theme-label-warning-bg);
    color: var(--theme-label-warning-color);
  }

  .uk-alert-danger {
    background: var(--theme-label-danger-bg);
    color: var(--theme-label-danger-color);
  }

  // Code blocks
  code,
  pre {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
  }

  // Progress bars
  .uk-progress {
    background: var(--theme-bg-secondary);

    &::-webkit-progress-value {
      background: var(--theme-primary);
    }

    &::-moz-progress-bar {
      background: var(--theme-primary);
    }
  }

  // Tooltips
  .uk-tooltip {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
  }

  // Offcanvas
  .uk-offcanvas-bar {
    background: var(--theme-bg-card);
  }

  // Navigation
  .uk-nav-divider {
    border-top-color: var(--theme-border-color);
  }

  // Lists
  .uk-list-divider > li:nth-child(n+2) {
    border-top-color: var(--theme-border-color);
  }

  // Avatars
  .avatar,
  [class*="uk-border-circle"] {
    border-color: var(--theme-bg-card);
    box-shadow: var(--theme-shadow-sm);
  }

  // Scrollbars for webkit browsers
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--theme-bg-body);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--theme-border-color);
    border-radius: 4px;

    &:hover {
      background: var(--theme-text-muted);
    }
  }
}

// =============================================================================
// VIOLET COMPONENT ENHANCEMENTS
// =============================================================================

[data-skin="violet"] {
  // Violet-style stat cards
  .stat-card {
    .stat-value {
      color: var(--theme-text-heading);
      font-weight: 600;
      font-size: 1.5rem;
    }

    .stat-label {
      color: var(--theme-text-muted);
      text-transform: uppercase;
      font-size: 0.75rem;
      letter-spacing: 0.5px;
      font-weight: 500;
    }

    &.stat-primary .stat-icon {
      background: var(--theme-primary-light);
      color: var(--theme-primary);
    }

    &.stat-success .stat-icon {
      background: var(--theme-success-light);
      color: var(--theme-success);
    }

    &.stat-warning .stat-icon {
      background: var(--theme-warning-light);
      color: var(--theme-warning);
    }

    &.stat-danger .stat-icon {
      background: var(--theme-danger-light);
      color: var(--theme-danger);
    }
  }

  // Avatar styling
  .avatar {
    border: 2px solid var(--theme-bg-card);
    box-shadow: var(--theme-shadow-sm);
  }

  // Activity feed
  .activity-feed {
    .activity-item {
      border-left: 2px solid var(--theme-border-color);

      &::before {
        background: var(--theme-primary);
        border: 2px solid var(--theme-bg-card);
      }
    }
  }

  // Chart placeholder backgrounds
  .chart-container {
    background: var(--theme-bg-secondary);
    border-radius: 0.358rem;
  }

  // Gradient accent for special elements
  .gradient-primary {
    background: linear-gradient(118deg, #7367F0, rgba(115, 103, 240, 0.7));
  }
}

// =============================================================================
// VIOLET RESPONSIVE STYLES
// =============================================================================

[data-skin="violet"] {
  // ==========================================================================
  // TABLET BREAKPOINT (max-width: 959px)
  // ==========================================================================

  @media (max-width: 959px) {
    // Header adjustments
    header {
      .uk-navbar {
        min-height: 56px;
      }

      .uk-navbar-item {
        padding: 0 0.5rem;
      }

      .uk-logo {
        font-size: 0.875rem;

        span:first-child {
          width: 28px !important;
          height: 28px !important;
          font-size: 10px !important;
        }
      }

      .uk-visible\@m {
        display: none !important;
      }
    }

    // Cards
    .uk-card-body {
      padding: 1.25rem;
    }

    .uk-card-header,
    .uk-card-footer {
      padding: 1rem 1.25rem;
    }

    // Modals
    .uk-modal-body {
      padding: 1.25rem;
    }

    .uk-modal-header,
    .uk-modal-footer {
      padding: 1rem 1.25rem;
    }

    // Tables - make scrollable
    .uk-table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    // Tabs
    .uk-tab {
      overflow-x: auto;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;

      > li > a {
        white-space: nowrap;
        padding: 0.75rem 0;
        margin-right: 1rem;
      }
    }

    // Subnav
    .uk-subnav {
      overflow-x: auto;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;

      > li > a {
        white-space: nowrap;
      }
    }

    // Container padding
    .uk-container {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    // Typography adjustments
    h1, .uk-h1 { font-size: 1.5rem; }
    h2, .uk-h2 { font-size: 1.25rem; }

    .uk-heading-small {
      font-size: 1.25rem;
    }

    // Dropdowns
    .uk-dropdown {
      min-width: 10rem;
    }
  }

  // ==========================================================================
  // MOBILE BREAKPOINT (max-width: 639px)
  // ==========================================================================

  @media (max-width: 639px) {
    // Body font size
    body {
      font-size: 0.8125rem;
    }

    // Header
    header {
      .uk-navbar {
        min-height: 52px;
        padding: 0;
      }

      .uk-navbar-left {
        padding-left: 0.5rem;
      }

      .uk-navbar-right {
        padding-right: 0.5rem;
      }

      .uk-navbar-item {
        padding: 0 0.375rem;
      }

      .uk-logo {
        font-size: 0.75rem;

        .uk-margin-small-left {
          display: none;
        }
      }

      .uk-icon-link [uk-icon] {
        width: 18px;
        height: 18px;
      }

      .uk-badge {
        font-size: 9px;
        padding: 1px 4px;
      }
    }

    // Cards
    .uk-card {
      border-radius: 0.358rem;
    }

    .uk-card-body {
      padding: 1rem;
    }

    .uk-card-header,
    .uk-card-footer {
      padding: 0.75rem 1rem;
    }

    .uk-card-header .uk-card-title {
      font-size: 1rem;
    }

    // Buttons
    .uk-button {
      padding: 0.5rem 1rem;
      font-size: 0.8125rem;
    }

    .uk-button-small {
      padding: 0.375rem 0.75rem;
      font-size: 0.75rem;
    }

    // Forms
    .uk-input,
    .uk-select,
    .uk-textarea {
      font-size: 0.8125rem;
      padding: 0.5rem 0.75rem;
      min-height: 2.25rem;
    }

    .uk-form-label {
      font-size: 0.8125rem;
    }

    // Tables
    .uk-table {
      font-size: 0.75rem;

      th {
        font-size: 0.625rem;
        padding: 0.5rem 0.75rem;
      }

      td {
        padding: 0.75rem;
      }
    }

    // Tabs
    .uk-tab {
      > li > a {
        font-size: 0.75rem;
        padding: 0.625rem 0;
        margin-right: 0.75rem;
      }
    }

    // Subnav
    .uk-subnav > li > a {
      font-size: 0.75rem;
      padding: 0.375rem 0.5rem;
    }

    .uk-subnav-pill > li > a {
      padding: 0.375rem 0.75rem;
    }

    // Labels/Badges
    .uk-label {
      font-size: 0.625rem;
      padding: 0.2rem 0.5rem;
    }

    // Modals
    .uk-modal-dialog {
      margin: 0.5rem;
      border-radius: 0.358rem;
    }

    .uk-modal-body {
      padding: 1rem;
    }

    .uk-modal-header,
    .uk-modal-footer {
      padding: 0.75rem 1rem;
    }

    .uk-modal-title {
      font-size: 1rem;
    }

    // Alerts
    .uk-alert {
      padding: 0.75rem 1rem;
      font-size: 0.75rem;
    }

    // Dropdowns
    .uk-dropdown {
      min-width: 100%;
      left: 0 !important;
      right: 0 !important;
      margin: 0;
      border-radius: 0;
    }

    .uk-dropdown-nav > li > a {
      padding: 0.5rem 1rem;
      font-size: 0.8125rem;
    }

    // Container
    .uk-container {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    // Typography
    h1, .uk-h1 { font-size: 1.25rem; }
    h2, .uk-h2 { font-size: 1.125rem; }
    h3, .uk-h3 { font-size: 1rem; }
    h4, .uk-h4 { font-size: 0.875rem; }

    .uk-heading-small {
      font-size: 1.125rem;
    }

    .uk-text-meta {
      font-size: 0.6875rem;
    }

    small, .small, .uk-text-small {
      font-size: 0.6875rem;
    }

    // Lists
    .uk-list > li {
      margin-top: 0.5rem;
    }

    .uk-list-divider > li:nth-child(n+2) {
      padding-top: 0.5rem;
    }

    // Navigation
    .uk-nav-default > li > a {
      padding: 0.5rem 0;
      font-size: 0.8125rem;
    }

    .uk-nav-header {
      font-size: 0.625rem;
      padding: 0.5rem 0;
    }

    // Progress
    .uk-progress {
      height: 0.25rem;
    }

    // Avatars
    .avatar,
    [class*="uk-border-circle"] {
      border-width: 1px;
    }
  }

  // ==========================================================================
  // TOUCH DEVICE OPTIMIZATIONS
  // ==========================================================================

  @media (hover: none) and (pointer: coarse) {
    // Larger touch targets
    .uk-button {
      min-height: 44px;
    }

    .uk-input,
    .uk-select,
    .uk-textarea {
      min-height: 44px;
    }

    .uk-dropdown-nav > li > a {
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    .uk-nav-default > li > a {
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    .uk-tab > li > a {
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    // Remove hover effects on touch
    .uk-card:hover {
      box-shadow: var(--theme-shadow-sm);
      transform: none;
    }

    .uk-table tbody tr:hover {
      background-color: transparent;
    }

    .uk-button-primary:hover,
    .uk-button-primary:focus {
      transform: none;
    }
  }
}