// =============================================================================
// AMETHYST THEME
// =============================================================================
// A modern SaaS admin dashboard theme inspired by Amethyst's design language.
// Features a vibrant purple/indigo palette with clean, contemporary aesthetics.
// Supports both light and dark mode variants.
// =============================================================================

@import 'theme-base';

// =============================================================================
// AMETHYST LIGHT MODE PALETTE
// =============================================================================

$amethyst-light: (
  // Primary palette - Amethyst signature indigo/purple
  'primary': #6366F1,
  'primary-hover': #4F46E5,
  'primary-light': #E0E7FF,
  'secondary': #64748B,

  // Status colors
  'success': #10B981,
  'success-light': #D1FAE5,
  'warning': #F59E0B,
  'warning-light': #FEF3C7,
  'danger': #EF4444,
  'danger-light': #FEE2E2,
  'info': #06B6D4,
  'info-light': #CFFAFE,

  // Backgrounds
  'bg-body': #F8FAFC,
  'bg-card': #FFFFFF,
  'bg-secondary': #F1F5F9,
  'bg-muted': #E2E8F0,
  'bg-input': #FFFFFF,

  // Text colors
  'text-primary': #1E293B,
  'text-secondary': #64748B,
  'text-muted': #94A3B8,
  'text-heading': #0F172A,

  // Borders
  'border-color': #E2E8F0,
  'border-light': #F1F5F9,

  // Links
  'link-color': #6366F1,
  'link-hover': #4F46E5,

  // Shadows
  'shadow-sm': 0 1px 2px rgba(0, 0, 0, 0.05),
  'shadow-md': 0 4px 6px -1px rgba(0, 0, 0, 0.1),
  'shadow-lg': 0 10px 15px -3px rgba(0, 0, 0, 0.1),

  // Navigation
  'nav-bg': #1E293B,
  'nav-text': #94A3B8,
  'nav-active': #FFFFFF,

  // Labels/Badges
  'label-success-bg': #D1FAE5,
  'label-success-color': #065F46,
  'label-warning-bg': #FEF3C7,
  'label-warning-color': #92400E,
  'label-danger-bg': #FEE2E2,
  'label-danger-color': #991B1B,
  'label-primary-bg': #E0E7FF,
  'label-primary-color': #4338CA,
  'label-secondary-bg': #F1F5F9,
  'label-secondary-color': #64748B
);

// =============================================================================
// AMETHYST DARK MODE PALETTE
// =============================================================================

$amethyst-dark: (
  // Primary palette
  'primary': #818CF8,
  'primary-hover': #A5B4FC,
  'primary-light': #312E81,
  'secondary': #94A3B8,

  // Status colors - adjusted for dark mode
  'success': #34D399,
  'success-light': #064E3B,
  'warning': #FBBF24,
  'warning-light': #78350F,
  'danger': #F87171,
  'danger-light': #7F1D1D,
  'info': #22D3EE,
  'info-light': #164E63,

  // Backgrounds - Deep slate palette
  'bg-body': #0F172A,
  'bg-card': #1E293B,
  'bg-secondary': #334155,
  'bg-muted': #475569,
  'bg-input': #334155,

  // Text colors
  'text-primary': #F1F5F9,
  'text-secondary': #CBD5E1,
  'text-muted': #94A3B8,
  'text-heading': #FFFFFF,

  // Borders
  'border-color': #334155,
  'border-light': #475569,

  // Links
  'link-color': #A5B4FC,
  'link-hover': #C7D2FE,

  // Shadows
  'shadow-sm': 0 1px 2px rgba(0, 0, 0, 0.3),
  'shadow-md': 0 4px 6px -1px rgba(0, 0, 0, 0.4),
  'shadow-lg': 0 10px 15px -3px rgba(0, 0, 0, 0.5),

  // Navigation
  'nav-bg': #0F172A,
  'nav-text': #94A3B8,
  'nav-active': #FFFFFF,

  // Labels/Badges
  'label-success-bg': #064E3B,
  'label-success-color': #34D399,
  'label-warning-bg': #78350F,
  'label-warning-color': #FBBF24,
  'label-danger-bg': #7F1D1D,
  'label-danger-color': #F87171,
  'label-primary-bg': #312E81,
  'label-primary-color': #A5B4FC,
  'label-secondary-bg': #475569,
  'label-secondary-color': #CBD5E1
);

// =============================================================================
// REGISTER AMETHYST THEME
// =============================================================================

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

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

// =============================================================================
// AMETHYST THEME SELECTOR STYLES
// =============================================================================

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

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

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

  // Headings - Amethyst 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: 600;
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
  }

  h1, .uk-h1 { font-size: 1.875rem; }
  h2, .uk-h2 { font-size: 1.5rem; }
  h3, .uk-h3 { font-size: 1.25rem; }
  h4, .uk-h4 { font-size: 1.125rem; }
  h5, .uk-h5 { font-size: 1rem; }
  h6, .uk-h6 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }

  // 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);

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

    .uk-logo {
      font-weight: 700;
      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 - Amethyst modern style
  // ==========================================================================

  .uk-card {
    background: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    border-radius: 0.75rem;
    box-shadow: var(--theme-shadow-sm);
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;

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

  .uk-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--theme-border-color);
    background: transparent;

    .uk-card-title {
      font-size: 1rem;
      font-weight: 600;
      margin: 0;
    }
  }

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

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

  // ==========================================================================
  // BUTTONS - Amethyst style
  // ==========================================================================

  .uk-button {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    transition: all 0.15s ease-in-out;
    text-transform: none;
    letter-spacing: normal;
  }

  .uk-button-primary {
    background-color: var(--theme-primary);
    color: #fff;
    border: none;

    &:hover,
    &:focus {
      background-color: var(--theme-primary-hover);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    }
  }

  .uk-button-default {
    background-color: var(--theme-bg-card);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-color);

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

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

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

  .uk-button-danger {
    background-color: var(--theme-danger);
    color: #fff;
    border: none;

    &:hover,
    &:focus {
      background-color: #DC2626;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }
  }

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

  .uk-button-large {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }

  // ==========================================================================
  // FORM INPUTS - Amethyst style
  // ==========================================================================

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

    &:focus {
      border-color: var(--theme-primary);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
      outline: none;
    }

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

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

  .uk-form-label {
    color: var(--theme-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
  }

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

  // ==========================================================================
  // TABLES - Amethyst style
  // ==========================================================================

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

    th {
      color: var(--theme-text-secondary);
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 0.75rem 1rem;
      border-bottom: 2px solid var(--theme-border-color);
      background: transparent;
    }

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

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

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

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

  // ==========================================================================
  // TABS - Amethyst 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.875rem 0;
        margin-right: 1.5rem;
        border: none;
        border-bottom: 2px solid transparent;
        background: transparent;
        border-radius: 0;
        transition: all 0.15s ease;

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

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

  // ==========================================================================
  // SUBNAV - Amethyst 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.15s ease;

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

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

  // Subnav Pill - Amethyst style
  .uk-subnav-pill {
    > li > a {
      background: transparent;
      border-radius: 0.5rem;
      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 4px 12px rgba(99, 102, 241, 0.3);
    }
  }

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

  // ==========================================================================
  // LABELS/BADGES - Amethyst style
  // ==========================================================================

  .uk-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
  }

  .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.6875rem;
    font-weight: 600;
    padding: 0.25rem 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.15s 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.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    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: 0.75rem;
    box-shadow: var(--theme-shadow-lg);
    padding: 0.5rem 0;
    min-width: 12rem;
  }

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

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

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

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

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

  .uk-modal-dialog {
    background: var(--theme-bg-card);
    border-radius: 0.75rem;
    box-shadow: var(--theme-shadow-lg);
  }

  .uk-modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--theme-border-color);
    border-radius: 0.75rem 0.75rem 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 0.75rem 0.75rem;
  }

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

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

  .uk-alert {
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    border: none;
  }

  .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);
  }

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

  .uk-progress {
    height: 0.5rem;
    border-radius: 0.25rem;
    background: var(--theme-bg-secondary);

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

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

  // ==========================================================================
  // 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: 600;
    letter-spacing: -0.025em;
  }
}

// =============================================================================
// AMETHYST DARK MODE
// =============================================================================

[data-skin="amethyst"][data-theme="dark"] {
  @include apply-theme-variables('amethyst', '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);
  }

  // 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 4px 12px rgba(129, 140, 248, 0.4);
    }
  }

  .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 0 0 3px rgba(129, 140, 248, 0.2);
    }

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

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

    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-border-color);
    }
  }

  // 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);
    }
  }
}

// =============================================================================
// AMETHYST COMPONENT ENHANCEMENTS
// =============================================================================

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

    .stat-label {
      color: var(--theme-text-muted);
      text-transform: uppercase;
      font-size: 0.6875rem;
      letter-spacing: 0.05em;
      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.5rem;
  }

  // Gradient accent for special elements
  .gradient-primary {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  }
}

// =============================================================================
// AMETHYST RESPONSIVE STYLES
// =============================================================================

[data-skin="amethyst"] {
  // ==========================================================================
  // 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.5rem;
    }

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

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

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

    // 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.5625rem;
      padding: 0.1875rem 0.5rem;
    }

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

    .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.375rem;
    }

    // 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;
    }
  }
}