@layer legacy {
  /* ==========================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================================================== */

  :root {
    /* ========================================================================
     TRADINGVIEW-INSPIRED DESIGN SYSTEM
     Minimal, flat, compact, futuristic light theme
     ======================================================================== */

    /* System Grays - Cool blue-gray foundation */
    --gray-1: #f0f3fa;
    --gray-2: #e0e3eb;
    --gray-3: #d1d4dc;
    --gray-4: #e0e3eb;
    --gray-5: #9598a1;
    --gray-6: #787b86;

    /* Semantic Colors - TradingView palette */
    --blue: #2962ff;
    --blue-hover: #1e53e5;
    --blue-light: #e3ecff;

    --green: #089981;
    --green-light: #e6f4ef;

    --red: #f23645;
    --red-light: #fde8ea;

    --orange: #ff9800;
    --orange-light: #fff4e6;

    --purple: #7b61ff;
    --purple-light: #f0edff;

    /* Brand Colors */
    --brand-dark: #131722;
    --brand-accent: #2962ff;

    /* Brand Accents */
    --accent-bronze: #b08968;
    --accent-gold: #d4af37;

    /* Legacy aliases */
    --primary-color: var(--blue);
    --primary-hover: var(--blue-hover);
    --primary-light: var(--blue-light);
    --primary-dark: #1e53e5;
    --primary-gradient: linear-gradient(135deg, var(--blue) 0%, var(--primary-dark) 100%);
    --secondary-color: var(--gray-6);
    --secondary-hover: var(--gray-4);
    --secondary-light: var(--gray-2);
    --success-color: var(--green);
    --success-light: var(--green-light);
    --danger-color: var(--red);
    --danger-light: var(--red-light);
    --warning-color: var(--orange);
    --warning-light: var(--orange-light);
    --info-color: var(--purple);
    --info-light: var(--purple-light);
    --hover-color: rgba(41, 98, 255, 0.04);

    /* Background System - Flat, no blur */
    --bg-primary: #ffffff;
    --bg-secondary: #f0f3fa;
    --bg-tertiary: #e0e3eb;
    --bg-cream: #f8f9fd;
    --bg-glass: rgba(255, 255, 255, 0.95);
    --bg-blur: none;

    /* Text Colors - TradingView signature */
    --text-primary: #131722;
    --text-secondary: #787b86;
    --text-tertiary: #9598a1;
    --text-quaternary: #b2b5be;
    --text-muted: #9598a1;
    --text-on-color: #ffffff;

    /* Border System - Subtle, light */
    --border-color: #e0e3eb;
    --border-light: #e0e3eb;
    --border-strong: #d1d4dc;
    --border-hover: var(--blue);

    /* Shadow System - Flat design, no shadows */
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
    --shadow-4: none;
    --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Focus Ring - Minimal */
    --focus-ring: 0 0 0 1px #2962ff;

    /* Legacy shadow aliases */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;

    /* Border Radius - Sharp, minimal */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-round: 999px;

    /* Spacing System - 8pt Grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Legacy spacing aliases */
    --spacing-xs: var(--space-1);
    --spacing-sm: var(--space-2);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-8);
    --spacing-2xl: var(--space-12);

    /* Animation System - Crisp, no bounce */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

    --duration-instant: 80ms;
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;

    /* Legacy transition aliases */
    --transition: all var(--duration-normal) var(--ease-in-out);
    --transition-fast: all var(--duration-fast) var(--ease-in-out);
    --transition-slow: all var(--duration-slow) var(--ease-in-out);

    /* Layout */
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 48px;
    --header-height: 48px;
    --max-content-width: 1400px;

    /* Typography */
    --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  /* ==========================================================================
   BASE STYLES
   ========================================================================== */

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: var(--font-family);
    font-size: 13px;
    line-height: 1.4;
    background: var(--bg-secondary);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.01em;
  }

  /* Scrollbar - Thin, minimal */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--gray-3);
    border-radius: var(--radius-round);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-5);
  }

  /* Selection styling */
  ::selection {
    background: var(--info-tint);
    color: var(--text-primary);
  }

  ::-moz-selection {
    background: var(--blue-light);
    color: var(--text-primary);
  }

  /* Focus visible for keyboard navigation */
  *:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .app-container {
    display: flex;
    min-height: 100vh;
  }

  /* ==========================================================================
   SIDEBAR
   ========================================================================== */

  .sidebar {
    width: var(--sidebar-width);
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1000;
    transition: width var(--duration-normal) var(--ease-in-out);
  }

  .sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
  }

  .sidebar-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
  }

  .app-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
  }

  .app-logo i {
    font-size: 18px;
    color: var(--blue);
  }

  .logo-text {
    color: var(--text-primary);
    /* Dark text for readability */
  }

  .sidebar.collapsed .logo-text {
    display: none;
  }

  .sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar-toggle:hover {
    background: var(--gray-2);
    color: var(--text-primary);
  }

  .sidebar-toggle:active {
    transform: scale(0.95);
    /* Subtle press effect */
  }

  .sidebar-nav {
    flex: 1;
    padding: var(--space-4) var(--space-3);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .nav-section {
    margin-bottom: var(--space-8);
  }

  .nav-section-title {
    font-size: 13px;
    /* Apple's secondary size */
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
    padding: 0 var(--space-3);
  }

  .sidebar.collapsed .nav-section-title {
    display: none;
  }

  .nav-list {
    list-style: none;
  }

  .nav-item {
    margin-bottom: var(--space-1);
    /* Tighter spacing */
  }

  .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 0;
    transition: var(--transition-fast);
    position: relative;
    font-size: 13px;
    font-weight: 400;
    min-height: 32px;
    border-left: 2px solid transparent;
  }

  .nav-link i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
    opacity: 1;
    /* Ensure icons are visible */
  }

  .nav-link:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-left-color: var(--gray-3);
  }

  .nav-link.active {
    background: var(--bg-secondary);
    color: var(--blue);
    font-weight: 500;
    border-left-color: var(--blue);
  }

  .nav-link.active:hover {
    background: var(--bg-tertiary);
  }

  .sidebar.collapsed .nav-text {
    display: none;
  }

  .nav-badge {
    background: var(--red);
    /* Red notification badge */
    color: var(--text-on-color);
    font-size: 11px;
    /* Smaller, more refined */
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-round);
    margin-left: auto;
    min-width: 20px;
    text-align: center;
    box-shadow: var(--shadow-1);
    /* Subtle float */
    display: none;
    /* Hidden by default, shown by JS when count > 0 */
  }

  .sidebar.collapsed .nav-badge {
    position: absolute;
    right: -4px;
    /* Floating dot */
    top: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0;
    font-size: 10px;
    line-height: 18px;
    border: 2px solid var(--bg-glass);
    /* Halo effect */
  }

  .sidebar-footer {
    padding: var(--space-4) var(--space-3);
    border-top: 1px solid var(--border-light);
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
  }

  .user-info:hover {
    background: var(--gray-2);
  }

  .user-avatar {
    width: 36px;
    /* Slightly smaller */
    height: 36px;
    border-radius: 50%;
    background: var(--blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0;
  }

  .user-details {
    flex: 1;
    min-width: 0;
  }

  .sidebar.collapsed .user-details {
    display: none;
  }

  .user-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
  }

  .user-email {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

  .main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--duration-slow) var(--ease-spring);
  }

  .sidebar.collapsed + .main-content {
    margin-left: var(--sidebar-collapsed-width);
  }

  .content-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-2) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: var(--header-height);
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .mobile-sidebar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    width: 36px;
    height: 36px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
  }

  .mobile-sidebar-toggle:hover {
    background: var(--gray-2);
    color: var(--text-primary);
  }

  .page-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
    margin: 0;
  }

  .header-center {
    flex: 1;
    max-width: 480px;
  }

  .search-container {
    position: relative;
  }

  .search-input {
    width: 100%;
    padding: 6px 12px 6px 32px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 13px;
    background: var(--bg-secondary);
    transition: var(--transition-fast);
    height: 32px;
    font-family: inherit;
    color: var(--text-primary);
  }

  .search-input::placeholder {
    color: var(--gray-5);
  }

  .search-input:hover {
    border-color: var(--gray-5);
  }

  .search-input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: var(--focus-ring);
    background: var(--bg-primary);
  }

  .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-5);
    pointer-events: none;
    font-size: 16px;
  }

  /* Search Dropdown */
  .search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    /* Larger radius for dropdown */
    box-shadow: var(--shadow-4);
    /* More elevation */
    max-height: 320px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    animation: dropdown-appear 0.2s var(--ease-smooth);
  }

  @keyframes dropdown-appear {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .search-dropdown.show {
    display: block;
  }

  .search-dropdown-item {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-3);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-in-out);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .search-dropdown-item:last-child {
    border-bottom: none;
  }

  .search-dropdown-item:hover {
    background: var(--gray-1);
  }

  .search-dropdown-item.focused {
    background: var(--blue-light);
  }

  .search-dropdown-item-content {
    flex: 1;
    min-width: 0;
  }

  .search-dropdown-item-title {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 15px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-dropdown-item-meta {
    font-size: 13px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .search-dropdown-item-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
  }

  .search-dropdown-item-status.todo {
    background: var(--gray-2);
    color: var(--gray-6);
  }

  .search-dropdown-item-status.in-progress {
    background: var(--orange-light);
    color: var(--orange);
  }

  .search-dropdown-item-status.in-review {
    background: var(--purple-light);
    color: var(--purple);
  }

  .search-dropdown-item-status.done {
    background: var(--green-light);
    color: var(--green);
  }

  .search-dropdown-empty {
    padding: var(--space-8);
    text-align: center;
    color: var(--text-tertiary);
    font-size: 15px;
  }

  .search-dropdown-loading {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
  }

  .search-dropdown-loading i {
    animation: spin 1s linear infinite;
    margin-right: var(--spacing-xs);
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  /* Clickable metric cards */
  .clickable-metric {
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-smooth);
  }

  .clickable-metric:hover {
    box-shadow: var(--shadow-3);
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .notification-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-smooth);
    min-width: 36px;
    min-height: 36px;
  }

  .notification-btn:hover {
    background: var(--gray-1);
    color: var(--text-primary);
  }

  .notification-btn:active {
    background: var(--gray-2);
  }

  .notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--red);
    color: var(--text-on-color);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: var(--radius-md);
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.3s ease;
  }

  .notification-badge.high-priority {
    background: var(--bad);
    animation: badgePulse 2s ease-in-out infinite;
  }

  @keyframes badgePulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.3);
      transform: scale(1.05);
    }
  }

  /* ==========================================================================
   BUTTONS
   ========================================================================== */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 0 var(--space-3);
    min-height: 28px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: none;
    position: relative;
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  .btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Primary button - Filled blue */
  .btn-primary {
    background: var(--blue);
    color: var(--text-on-color);
  }

  .btn-primary:hover:not(:disabled) {
    background: var(--blue-hover);
  }

  .btn-primary:active:not(:disabled) {
    background: var(--blue-hover);
  }

  /* Secondary button - Tinted gray */
  .btn-secondary {
    background: var(--gray-2);
    color: var(--text-primary);
  }

  .btn-secondary:hover:not(:disabled) {
    background: var(--gray-3);
  }

  .btn-secondary:active:not(:disabled) {
    background: var(--gray-4);
  }

  /* Outline button - Bordered */
  .btn-outline {
    background: transparent;
    color: var(--blue);
    border: 1px solid var(--border-color);
  }

  .btn-outline:hover:not(:disabled) {
    background: var(--gray-1);
    border-color: var(--gray-4);
  }

  .btn-outline:active:not(:disabled) {
    background: var(--gray-2);
  }

  /* Danger button - Filled red */
  .btn-danger {
    background: var(--red);
    color: var(--text-on-color);
  }

  .btn-danger:hover:not(:disabled) {
    background: #e0311d;
  }

  .btn-danger:active:not(:disabled) {
    background: #d12b1a;
  }

  /* Warning button - Filled orange */
  .btn-warning {
    background: var(--orange);
    color: var(--text-on-color);
  }

  .btn-warning:hover:not(:disabled) {
    background: #e68900;
  }

  .btn-warning:active:not(:disabled) {
    background: #cc7a00;
  }

  /* Success button - Filled green */
  .btn-success {
    background: var(--green);
    color: var(--text-on-color);
  }

  .btn-success:hover:not(:disabled) {
    background: #2db04c;
  }

  .btn-success:active:not(:disabled) {
    background: #289f44;
  }

  /* Button sizes */
  .btn-small {
    padding: 0 var(--space-3);
    min-height: 28px;
    font-size: 13px;
  }

  .btn-large {
    padding: 0 var(--space-6);
    min-height: 44px;
    font-size: 17px;
  }

  /* ==========================================================================
   CONTENT VIEWS
   ========================================================================== */

  .content-container {
    flex: 1;
    position: relative;
  }

  .content-view {
    display: none;
    padding: var(--spacing-xl);
    height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .content-view.active {
    display: block;
  }

  /* ==========================================================================
   DASHBOARD
   ========================================================================== */

  .dashboard-grid {
    display: grid;
    gap: var(--spacing-xl);
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
  }

  .stat-card {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    transition: all var(--duration-fast) var(--ease-in-out);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
  }

  .stat-card:hover {
    border-color: var(--gray-3);
  }

  .stat-card.urgent {
    background: var(--red-light);
    border-color: var(--red);
  }

  .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--blue);
    background: var(--blue-light);
    flex-shrink: 0;
  }

  .stat-card.urgent .stat-icon {
    color: var(--red);
    background: rgba(255, 59, 48, 0.15);
  }

  .stat-content {
    flex: 1;
    min-width: 0;
  }

  .stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: 0;
  }

  .stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: var(--space-1);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .stat-sublabel {
    font-size: 11px;
    color: var(--green);
    margin-top: var(--space-1);
    font-weight: 500;
  }

  .dashboard-section {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
  }

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
  }

  .section-header h2 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .section-header h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .section-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: var(--transition);
  }

  .section-link:hover {
    color: var(--primary-hover);
  }

  /* ==========================================================================
   TASKS
   ========================================================================== */

  .view-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
    gap: var(--spacing-md);
  }

  .view-controls-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
  }

  .view-controls-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
  }

  .filter-controls {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
    align-items: center;
  }

  .filter-select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-width: 150px;
  }

  .filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.1);
  }

  /* Multi-select dropdown styles */
  .multi-select-dropdown {
    position: relative;
    min-width: 150px;
    user-select: none;
  }

  .multi-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    gap: var(--spacing-sm);
  }

  .multi-select-trigger:hover {
    border-color: var(--primary-color);
  }

  .multi-select-dropdown.open .multi-select-trigger {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.1);
  }

  .multi-select-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .multi-select-trigger i {
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
  }

  .multi-select-dropdown.open .multi-select-trigger i {
    transform: rotate(180deg);
  }

  .multi-select-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
  }

  .multi-select-dropdown.open .multi-select-options {
    display: block;
  }

  .multi-select-options label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: 0.875rem;
  }

  .multi-select-options label:hover {
    background-color: var(--bg-secondary);
  }

  .multi-select-options input[type='checkbox'] {
    cursor: pointer;
  }

  .filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .filter-checkbox-label:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
  }

  .filter-checkbox-label input[type='checkbox'] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color);
  }

  .filter-checkbox-label input[type='checkbox']:checked + span {
    color: var(--primary-color);
    font-weight: 500;
  }

  /* Archived project card styling */
  .project-card.archived {
    opacity: 0.7;
    border-style: dashed;
    background: var(--bg-secondary);
  }

  .project-card.archived .project-title {
    color: var(--text-secondary);
  }

  .project-card.archived .project-title i {
    color: var(--text-tertiary);
    margin-right: var(--spacing-xs);
  }

  /* Work date filter indicator (from statistics chart click) */
  .work-date-filter-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--primary-color);
    color: white;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    margin-left: var(--spacing-md);
    animation: fadeIn 0.2s ease;
  }

  .work-date-filter-indicator .filter-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .work-date-filter-indicator .filter-label i {
    font-size: 0.875rem;
  }

  .work-date-filter-indicator .clear-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .work-date-filter-indicator .clear-filter-btn:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  .work-date-filter-indicator .clear-filter-btn i {
    font-size: 0.625rem;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .date-interval-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
  }

  .date-interval-container input[type='date'] {
    min-width: 150px;
  }

  .custom-period-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
  }

  .custom-period-controls .date-interval-container {
    margin-left: 0;
  }

  .tasks-container {
    display: grid;
    gap: var(--spacing-md);
  }

  .task-card {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    transition: all var(--duration-fast) var(--ease-in-out);
    cursor: pointer;
    position: relative;
  }

  .task-card:hover {
    border-color: var(--gray-3);
  }

  .task-card:active {
    background: var(--bg-secondary);
  }

  .task-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-3);
  }

  .task-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    letter-spacing: 0.01em;
    line-height: 1.4;
  }

  .task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .task-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 16px);
    border: none;
  }

  .task-tag.priority-high {
    background: var(--red-light);
    color: var(--red);
  }

  .task-tag.priority-medium {
    background: var(--orange-light);
    color: var(--orange);
  }

  .task-tag.priority-low {
    background: var(--green-light);
    color: var(--green);
  }

  .task-tag.status-todo {
    background: var(--gray-2);
    color: var(--gray-6);
  }

  .task-tag.status-in-progress {
    background: var(--blue-light);
    color: var(--blue);
  }

  .task-tag.status-in-review {
    background: var(--purple-light);
    color: var(--purple);
  }

  .task-tag.status-done {
    background: var(--green-light);
    color: var(--green);
  }

  .task-tag.status-waiting {
    background: var(--warn-tint);
    color: var(--warn);
  }

  .task-tag.status-escalated {
    background: var(--bad-tint);
    color: var(--bad);
  }

  .task-tag.status-rejected {
    background: var(--red-light);
    color: var(--red);
  }

  .task-tag.project {
    background: var(--purple-light);
    color: var(--purple);
  }

  .task-tag.project i {
    font-size: 10px;
  }

  .no-project {
    color: var(--text-tertiary);
    font-size: 0.875rem;
  }

  .task-description {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.47;
    margin-bottom: var(--space-3);
  }

  .task-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-tertiary);
  }

  .task-assignee {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .task-deadline {
    font-weight: 500;
  }

  .task-deadline.overdue {
    color: var(--red);
  }

  /* ==========================================================================
   SUBTASKS
   ========================================================================== */

  .subtask-item {
    background: var(--gray-1);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    border: 1px solid var(--border-light);
    transition: all var(--duration-fast) var(--ease-smooth);
  }

  .subtask-item:hover {
    border-color: var(--gray-4);
    background: var(--bg-primary);
  }

  .subtask-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-2);
    gap: var(--space-3);
  }

  .subtask-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 15px;
    flex: 1;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }

  .subtask-actions {
    display: flex;
    gap: var(--space-1);
  }

  .subtask-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .subtask-status {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--space-2);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: none;
  }

  .subtask-status.status-todo {
    background: var(--gray-2);
    color: var(--gray-6);
  }

  .subtask-status.status-in-progress {
    background: var(--blue-light);
    color: var(--blue);
  }

  .subtask-status.status-in-review {
    background: var(--purple-light);
    color: var(--purple);
  }

  .subtask-status.status-done {
    background: var(--green-light);
    color: var(--green);
  }

  .subtask-status.status-waiting {
    background: var(--warn-tint);
    color: var(--warn);
  }

  .subtask-status.status-rejected {
    background: var(--red-light);
    color: var(--red);
  }

  .subtask-priority {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--space-2);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: none;
  }

  .subtask-priority.priority-high {
    background: var(--red-light);
    color: var(--red);
  }

  .subtask-priority.priority-medium {
    background: var(--orange-light);
    color: var(--orange);
  }

  .subtask-priority.priority-low {
    background: var(--green-light);
    color: var(--green);
  }

  .subtask-assignee {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: var(--radius-round);
    font-size: 0.75rem;
    font-weight: 500;
  }

  .subtask-assignee::before {
    content: '\f007';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: var(--spacing-xs);
  }

  .subtask-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-top: var(--spacing-xs);
  }

  /* ==========================================================================
   MODALS
   ========================================================================== */

  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-normal) var(--ease-smooth);
  }

  .modal-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  .modal {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    max-width: 90vw;
    max-height: 90vh;
    width: 600px;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
    border: 1px solid var(--border-color);
  }

  .modal-overlay.show .modal {
    opacity: 1;
  }

  .task-modal {
    width: 800px;
  }

  .modal-small {
    width: 400px;
    max-width: 90vw;
  }

  .modal-large {
    width: 1200px;
    max-width: 95vw;
  }

  .modal-header {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-primary);
  }

  .modal-header-content {
    flex: 1;
  }

  .modal-header h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
  }

  .modal-header h2 i {
    color: var(--primary-color);
  }

  .modal-subtitle {
    margin: var(--spacing-xs) 0 0 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 400;
  }

  .modal-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-smooth);
    font-size: 20px;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-close:hover {
    background: var(--gray-2);
    color: var(--text-primary);
  }

  .modal-body {
    padding: var(--space-4) var(--space-5);
    max-height: 75vh;
    overflow-y: auto;
  }

  /* Ticket Details Layout */
  .ticket-details-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--spacing-xl);
  }

  .ticket-details-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .ticket-details-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  /* Info Cards */
  .info-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-3);
  }

  .info-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
  }

  .info-card-title i {
    color: var(--primary-color);
    font-size: 0.875rem;
  }

  /* Info Grid */
  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
  }

  .info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .info-item.full-width {
    grid-column: 1 / -1;
  }

  .info-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .info-value {
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-weight: 400;
  }

  /* Ticket Description */
  .ticket-description {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
  }

  /* Work Entries */
  .work-entries-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
  }

  .work-entry {
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary-color);
    width: 100%;
    box-sizing: border-box;
  }

  .work-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  .work-entry-date,
  .work-entry-time {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
  }

  .work-entry-time {
    color: var(--primary-color);
    font-weight: 600;
  }

  .work-entry-description {
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .work-entry-user {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Work Entry with Actions */
  .work-entry {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .work-entry-info {
    flex: 1;
    min-width: 0;
  }

  .work-entry-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
  }

  .work-entry-actions .btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
  }

  /* Work Time Total */
  .work-time-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--primary-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    border-left: 3px solid var(--primary-color);
  }

  .work-time-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
  }

  .work-time-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-color);
  }

  /* Time Input Group */
  .work-duration-inputs {
    display: flex;
    gap: var(--spacing-sm);
  }

  .time-input-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex: 1;
  }

  .time-input-group input {
    width: 70px;
  }

  .time-input-group span {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  .modal-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    background: var(--gray-1);
  }

  /* Responsive Ticket Modal */
  @media (max-width: 1024px) {
    .ticket-details-layout {
      grid-template-columns: 1fr;
    }

    .modal-large {
      width: 90vw;
    }
  }

  /* ==========================================================================
   FORMS
   ========================================================================== */

  .form-group {
    margin-bottom: var(--space-4);
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .form-row .form-group {
    margin-bottom: 0;
  }

  .form-label {
    display: block;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .form-help {
    display: block;
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: var(--space-2);
  }

  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.4;
    transition: all var(--duration-fast) var(--ease-in-out);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-family);
    letter-spacing: 0.01em;
    min-height: 30px;
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--gray-5);
  }

  /* Specific styling for number inputs to show values properly */
  input[type='number'].form-input {
    text-align: center;
    padding: var(--space-2);
    -moz-appearance: textfield;
  }

  input[type='number'].form-input::-webkit-outer-spin-button,
  input[type='number'].form-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: var(--focus-ring);
  }

  .form-textarea {
    resize: vertical;
    min-height: 80px;
    padding: var(--space-3);
  }

  /* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */

  .toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
  }

  .toast {
    background: var(--bg-glass);
    backdrop-filter: var(--bg-blur);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    padding: var(--space-4);
    min-width: 300px;
    max-width: 400px;
    border: 1px solid var(--border-light);
    transform: translateX(calc(100% + var(--space-4)));
    transition: transform var(--duration-normal) var(--ease-spring);
    pointer-events: auto;
  }

  .toast.show {
    transform: translateX(0);
  }

  .toast.success {
    background: rgba(52, 199, 89, 0.1);
    border-color: var(--green);
  }

  .toast.error {
    background: rgba(255, 59, 48, 0.1);
    border-color: var(--red);
  }

  .toast.warning {
    background: rgba(255, 149, 0, 0.1);
    border-color: var(--orange);
  }

  .toast.info {
    background: rgba(0, 122, 255, 0.1);
    border-color: var(--blue);
  }

  .toast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
  }

  .toast-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }

  .toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 0;
    font-size: 20px;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all var(--duration-fast) var(--ease-smooth);
  }

  .toast-close:hover {
    background: var(--gray-2);
    color: var(--text-primary);
  }

  .toast-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  /* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

  @media (max-width: 1024px) {
    :root {
      --sidebar-width: 250px;
    }

    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .sidebar,
    .sidebar.collapsed {
      transform: translateX(-100%);
      width: var(--sidebar-width);
    }

    .sidebar.open {
      transform: translateX(0);
      z-index: 1001;
    }

    .sidebar-overlay {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 1000;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .sidebar-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .sidebar-toggle {
      display: none;
    }

    .main-content,
    .sidebar.collapsed + .main-content {
      margin-left: 0;
      min-width: 0;
      max-width: 100vw;
    }

    .mobile-sidebar-toggle {
      display: block;
    }

    #importTasksBtn {
      display: none;
    }

    .content-header {
      padding: var(--spacing-md);
    }

    .header-center {
      display: none;
    }

    .page-title {
      font-size: 1.25rem;
    }

    .content-view {
      padding: var(--spacing-md);
      overflow-x: hidden;
    }

    .stats-grid {
      grid-template-columns: 1fr;
    }

    .form-row {
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
    }

    .modal {
      width: 95vw;
      margin: var(--spacing-md);
    }

    .task-modal {
      width: 95vw;
    }

    .view-controls {
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-md);
    }

    .filter-controls {
      flex-direction: column;
    }
  }

  @media (max-width: 480px) {
    .content-header {
      flex-direction: column;
      gap: var(--spacing-md);
      align-items: stretch;
    }

    .header-left,
    .header-right {
      justify-content: space-between;
    }

    .btn .btn-text {
      display: none;
    }

    .modal-header {
      padding: var(--spacing-md);
    }

    .modal-body {
      padding: var(--spacing-md);
    }

    .modal-footer {
      padding: var(--spacing-md);
      flex-direction: column;
    }
  }

  /* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .mb-0 {
    margin-bottom: 0 !important;
  }

  .loading {
    opacity: 0.6;
    pointer-events: none;
  }

  /* ==========================================================================
   IMPORT MODAL
   ========================================================================== */

  .import-modal {
    width: 800px;
    max-height: 80vh;
  }

  .import-steps {
    min-height: 400px;
  }

  .import-step {
    display: none;
  }

  .import-step.active {
    display: block;
  }

  .import-step h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-lg);
    font-size: 1.25rem;
    font-weight: 600;
  }

  .file-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-secondary);
  }

  .file-upload-area:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
  }

  .file-upload-area.dragover {
    border-color: var(--primary-color);
    background: var(--primary-light);
  }

  .upload-content i {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
  }

  .upload-content p {
    font-size: 1.125rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
  }

  .upload-content small {
    color: var(--text-muted);
  }

  .file-info {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-md);
  }

  .file-details {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .file-details i {
    color: var(--success-color);
    font-size: 1.25rem;
  }

  .import-summary {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .summary-stat {
    text-align: center;
  }

  .summary-stat .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
  }

  .summary-stat .stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  .import-options {
    margin-bottom: var(--spacing-lg);
  }

  .preview-table {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
  }

  .preview-table table {
    width: 100%;
    border-collapse: collapse;
  }

  .preview-table th,
  .preview-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    font-size: 15px;
  }

  .preview-table th {
    background: var(--gray-1);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    font-size: 13px;
    text-transform: uppercase;
  }

  .preview-table tr:hover {
    background: var(--gray-1);
  }

  .import-results {
    text-align: center;
  }

  .import-results.success {
    color: var(--success-color);
  }

  .import-results.error {
    color: var(--danger-color);
  }

  .import-results i {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
  }

  .import-results h4 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
  }

  .import-results p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
  }

  .results-summary {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
  }

  .results-summary h5 {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
  }

  .results-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .results-list li {
    padding: var(--spacing-xs) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .results-list li i {
    font-size: 1rem;
    margin-right: var(--spacing-xs);
  }

  .results-list li.success i {
    color: var(--success-color);
  }

  .results-list li.error i {
    color: var(--danger-color);
  }

  .results-list li.warning i {
    color: var(--warning-color);
  }

  @media (max-width: 768px) {
    .import-modal {
      width: 95vw;
      max-height: 90vh;
    }

    .summary-stats {
      grid-template-columns: repeat(2, 1fr);
    }

    .preview-table {
      font-size: 0.75rem;
    }

    .preview-table th,
    .preview-table td {
      padding: var(--spacing-xs) var(--spacing-sm);
    }
  }

  .giver-mapping-section,
  .project-assignment-section {
    max-height: 400px;
    overflow-y: auto;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
  }

  .project-group-item {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
  }

  .project-group-item h4 {
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
  }

  .new-project-name {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
  }

  /* ==========================================================================
   AUTOCOMPLETE
   ========================================================================== */

  .autocomplete-items {
    position: absolute;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
  }

  .autocomplete-items div {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
  }

  .autocomplete-items div:hover {
    background-color: var(--bg-secondary);
  }

  .autocomplete-items div:last-child {
    border-bottom: none;
  }

  .autocomplete-active {
    background-color: var(--primary-light) !important;
    color: var(--primary-color);
  }

  .form-group {
    position: relative;
  }

  /* ==========================================================================
   STATISTICS PAGE
   ========================================================================== */

  /* Statistics View Tabs */
  .stats-view-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 4px;
    border: 1px solid var(--border-color);
    width: fit-content;
  }

  .stats-tab {
    padding: 8px 20px;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .stats-tab:hover {
    color: var(--text-primary);
    background: var(--gray-1);
  }

  .stats-tab.active {
    background: var(--bg-primary);
    color: var(--blue);
    box-shadow: var(--shadow-sm);
  }

  .statistics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
  }

  .week-navigation {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
  }

  .week-navigation h2 {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 260px;
    text-align: center;
    margin: 0;
  }

  .week-actions {
    display: flex;
    gap: var(--spacing-md);
  }

  .statistics-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
  }

  .completion-rate {
    margin-top: var(--spacing-xs);
  }

  .completion-rate-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
  }

  .completion-rate-fill {
    height: 100%;
    border-radius: 3px;
    transition: var(--transition);
  }

  .completion-rate-fill.success {
    background: var(--success-color);
  }

  .completion-rate-fill.warning {
    background: var(--warning-color);
  }

  .completion-rate-fill.danger {
    background: var(--danger-color);
  }

  .charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
  }

  .chart-container {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    height: 400px;
    position: relative;
  }

  .chart-container.wide {
    grid-column: span 2;
  }

  .chart-container canvas {
    max-height: 100%;
  }

  .statistics-tables {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  .statistics-section {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
  }

  .statistics-section h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .statistics-section h4 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
  }

  .tables-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
  }

  .table-container {
    flex: 1;
  }

  .table-container.full-width {
    grid-column: span 2;
  }

  .stats-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  .stats-table th,
  .stats-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    font-size: 15px;
  }

  .stats-table th {
    background: var(--gray-1);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    font-size: 13px;
    text-transform: uppercase;
  }

  .stats-table tr:hover {
    background: var(--gray-1);
  }

  .stats-table tr:last-child td {
    border-bottom: none;
  }

  .project-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .progress-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-2);
    border-radius: 3px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background: var(--blue);
    border-radius: 3px;
    transition: width var(--duration-normal) var(--ease-smooth);
  }

  /* ==========================================================================
   STATISTICS RESPONSIVE DESIGN
   ========================================================================== */

  @media (max-width: 1024px) {
    .charts-grid {
      grid-template-columns: 1fr;
    }

    .chart-container.wide {
      grid-column: span 1;
    }

    .tables-row {
      grid-template-columns: 1fr;
    }

    .table-container.full-width {
      grid-column: span 1;
    }

    .statistics-summary {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .statistics-header {
      flex-direction: column;
      gap: var(--spacing-md);
      text-align: center;
    }

    .week-navigation {
      flex-direction: column;
      gap: var(--spacing-md);
    }

    .week-navigation h2 {
      min-width: auto;
      font-size: 1.25rem;
    }

    .week-actions {
      flex-direction: column;
      width: 100%;
    }

    .statistics-summary {
      grid-template-columns: 1fr;
    }

    .chart-container {
      height: 300px;
    }

    .statistics-section {
      padding: var(--spacing-md);
    }
  }

  @media (max-width: 480px) {
    .week-navigation {
      gap: var(--spacing-sm);
    }

    .week-navigation .btn {
      padding: var(--spacing-xs) var(--spacing-sm);
      font-size: 0.75rem;
    }

    .week-navigation h2 {
      font-size: 1rem;
    }

    .chart-container {
      height: 250px;
      padding: var(--spacing-md);
    }

    .stats-table th,
    .stats-table td {
      padding: var(--spacing-sm);
      font-size: 0.75rem;
    }
  }

  /* ==========================================================================
   MODERN STATISTICS DASHBOARD
   ========================================================================== */

  .modern-stats-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    overflow-x: auto;
  }

  .modern-stats-grid .metric-card {
    flex: 1 1 0;
    min-width: 180px;
  }

  .metric-card {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-in-out);
  }

  .metric-card:hover {
    border-color: var(--gray-3);
  }

  .metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--blue);
  }

  .metric-card.success::before {
    background: var(--green);
  }

  .metric-card.warning::before {
    background: var(--orange);
  }

  .metric-card.info::before {
    background: var(--purple);
  }

  .metric-card.purple::before {
    background: var(--accent-gold);
  }

  .metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
  }

  .metric-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--blue-light);
    color: var(--blue);
  }

  .metric-card.success .metric-icon {
    background: var(--success-light);
    color: var(--success-color);
  }

  .metric-card.warning .metric-icon {
    background: var(--warning-light);
    color: var(--warning-color);
  }

  .metric-card.info .metric-icon {
    background: var(--info-light);
    color: var(--info-color);
  }

  .metric-card.purple .metric-icon {
    background: var(--orange-light);
    color: var(--accent-gold);
  }

  .metric-card.teal::before {
    background: var(--ok);
  }

  .metric-card.teal .metric-icon {
    background: var(--green-light);
    color: var(--green);
  }

  .metric-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    margin-top: 6px;
    line-height: 1.3;
  }

  .metric-delta.positive {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success-color);
  }

  .metric-delta.negative {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger-color);
  }

  .metric-delta.neutral {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-secondary);
  }

  .metric-delta i {
    font-size: 0.6rem;
  }

  .metric-subtext {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
  }

  .metric-trend {
    font-size: 0.875rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
  }

  .metric-trend.down {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
  }

  .metric-content {
    position: relative;
  }

  .metric-content:has(.metric-progress) {
    padding-right: 68px;
  }

  .metric-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
    background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .metric-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .metric-sparkline {
    margin-top: var(--spacing-md);
    height: 40px;
    position: relative;
  }

  .metric-progress {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
  }

  .progress-ring {
    position: relative;
    width: 60px;
    height: 60px;
  }

  .progress-ring svg {
    transform: rotate(-90deg);
  }

  .progress-ring-bg {
    fill: none;
    stroke: var(--bg-secondary);
    stroke-width: 4;
  }

  .progress-ring-fill {
    fill: none;
    stroke: var(--success-color);
    stroke-width: 4;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    transition: stroke-dashoffset 0.5s ease;
    stroke-linecap: round;
  }

  .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .metric-bar-mini {
    margin-top: var(--spacing-md);
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }

  .metric-bar-mini::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--warning-color), var(--danger-color));
    border-radius: 4px;
    animation: barLoad 1s ease;
  }

  @keyframes barLoad {
    from {
      width: 0;
    }
  }

  .metric-dots {
    display: flex;
    gap: 6px;
    margin-top: var(--spacing-md);
  }

  .metric-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    opacity: 0.3;
    animation: pulse 2s infinite;
  }

  .metric-dots span.active {
    opacity: 1;
  }

  .metric-dots span:nth-child(2) {
    animation-delay: 0.2s;
  }

  .metric-dots span:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes pulse {
    0%,
    100% {
      opacity: 0.3;
      transform: scale(1);
    }

    50% {
      opacity: 1;
      transform: scale(1.2);
    }
  }

  /* Modern Charts Dashboard */
  .modern-charts-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
  }

  .chart-panel {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    min-height: 400px;
    /* Changed from height to min-height */
    position: relative;
  }

  .chart-panel:hover {
    box-shadow: var(--shadow-md);
  }

  .chart-panel.full-width {
    width: 100%;
  }

  .chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
  }

  .chart-panel.half-width {
    width: 100%;
  }

  .panel-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
  }

  .panel-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }

  .panel-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .panel-controls {
    display: flex;
    gap: var(--spacing-sm);
  }

  .view-switch {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
  }

  .view-switch:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
  }

  .view-switch.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
  }

  .chart-filter {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  .panel-body {
    padding: var(--spacing-lg);
    min-height: 300px;
    position: relative;
    overflow: visible;
    /* Allow content to expand */
  }

  .chart-view {
    display: none;
    width: 100%;
    height: 100%;
  }

  .chart-view.active {
    display: block;
  }

  .chart-view.table-view {
    overflow-x: auto;
  }

  /* Treemap Styles */
  #categoryTreemap {
    height: 400px;
    position: relative;
  }

  .treemap-cell {
    position: absolute;
    overflow: hidden;
    text-align: center;
    border: 2px solid var(--bg-primary);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xs);
    box-sizing: border-box;
    font-size: 0.875rem;
  }

  .treemap-cell:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
    z-index: 10;
    border-color: var(--primary-color);
  }

  .treemap-label {
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: var(--spacing-xs);
    font-size: 0.875rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .treemap-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1;
  }

  /* Responsive treemap cell text sizing */
  .treemap-cell-small .treemap-label {
    font-size: 0.6rem;
    line-height: 1;
    margin-bottom: 1px;
  }

  .treemap-cell-small .treemap-value {
    font-size: 0.75rem;
    line-height: 1;
  }

  .treemap-cell-small .treemap-percentage {
    font-size: 0.6rem;
  }

  .treemap-cell-medium .treemap-label {
    font-size: 0.75rem;
    line-height: 1.1;
    margin-bottom: 2px;
  }

  .treemap-cell-medium .treemap-value {
    font-size: 1rem;
    line-height: 1;
  }

  .treemap-cell-medium .treemap-percentage {
    font-size: 0.65rem;
  }

  .treemap-cell-large .treemap-label {
    font-size: 0.875rem;
    line-height: 1.2;
  }

  .treemap-cell-large .treemap-value {
    font-size: 1.25rem;
  }

  .treemap-cell-large .treemap-percentage {
    font-size: 0.75rem;
  }

  .treemap-percentage {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
  }

  /* Horizontal Bar Chart */
  #giverHorizontalBars {
    height: 400px;
    position: relative;
  }

  .horizontal-bar {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    position: relative;
  }

  .bar-label {
    min-width: 120px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: right;
    padding-right: var(--spacing-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bar-container {
    flex: 1;
    height: 28px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
  }

  .bar-fill {
    height: 100%;
    border-radius: var(--radius-md);
    transition: width 0.5s ease;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm);
  }

  .bar-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    position: absolute;
    right: var(--spacing-sm);
  }

  /* Heatmap */
  #activityHeatmap {
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .heatmap-grid {
    display: grid;
    grid-template-columns: auto repeat(7, 1fr);
    gap: 4px;
    margin-top: var(--spacing-md);
  }

  .heatmap-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    padding-right: var(--spacing-sm);
    font-weight: 500;
  }

  .heatmap-cell {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
  }

  .heatmap-cell:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
    z-index: 10;
  }

  .heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    font-size: 0.75rem;
    color: var(--text-secondary);
  }

  .heatmap-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .heatmap-legend-box {
    width: 16px;
    height: 16px;
    border-radius: 3px;
  }

  /* ===== Period contribution heatmap ===== */
  .period-subtabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
  }

  .period-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .period-subtab:hover {
    color: var(--text-primary);
  }

  .period-subtab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--accent-on);
  }

  .period-subview {
    display: none;
  }

  .period-subview.active {
    display: block;
  }

  .heatmap-metric-toggle {
    display: inline-flex;
    gap: var(--spacing-sm);
  }

  .heatmap-metric-btn {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .heatmap-metric-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--accent-on);
  }

  .calendar-heatmap {
    --ch-cell: 14px;
    --ch-gap: 3px;
  }

  .calendar-heatmap-body {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
  }

  .calendar-heatmap-gutter {
    display: grid;
    grid-template-rows: repeat(7, var(--ch-cell));
    gap: var(--ch-gap);
    margin-top: calc(var(--ch-cell) + var(--ch-gap));
    font-size: 0.65rem;
    color: var(--text-secondary);
  }

  .calendar-heatmap-gutter span {
    display: flex;
    align-items: center;
    height: var(--ch-cell);
    line-height: 1;
  }

  .calendar-heatmap-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .calendar-heatmap-months {
    display: grid;
    grid-auto-flow: column;
    gap: var(--ch-gap);
    height: var(--ch-cell);
    margin-bottom: var(--ch-gap);
  }

  .calendar-heatmap-months span {
    font-size: 0.65rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: visible;
  }

  .calendar-heatmap-grid {
    display: grid;
    grid-template-rows: repeat(7, var(--ch-cell));
    grid-auto-flow: column;
    grid-auto-columns: var(--ch-cell);
    gap: var(--ch-gap);
  }

  .calendar-heatmap-cell {
    width: var(--ch-cell);
    height: var(--ch-cell);
    border-radius: 3px;
    transition: transform 0.1s ease;
  }

  .calendar-heatmap-cell:not(.placeholder):hover {
    transform: scale(1.25);
    outline: 1px solid var(--text-secondary);
  }

  .calendar-heatmap-cell.placeholder {
    background: transparent;
  }

  .calendar-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: var(--spacing-md);
    font-size: 0.7rem;
    color: var(--text-secondary);
  }

  .calendar-heatmap-legend .legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
  }

  .calendar-heatmap-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
  }

  /* Giver and Project view toggles */
  .giver-view,
  .project-view {
    display: none;
  }

  .giver-view.active,
  .project-view.active {
    display: block;
  }

  .giver-view.table-view.active,
  .project-view.table-view.active {
    display: block;
  }

  /* Project Progress */
  #projectProgress {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
  }

  .project-card-mini {
    padding: var(--space-3);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-smooth);
  }

  .project-card-mini:hover {
    background: var(--gray-1);
    border-color: var(--gray-4);
  }

  .project-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    font-size: 15px;
    letter-spacing: -0.01em;
  }

  .project-stats-mini {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
  }

  .project-progress-bar {
    height: 6px;
    background: var(--gray-2);
    border-radius: 3px;
    overflow: hidden;
  }

  .project-progress-fill {
    height: 100%;
    background: var(--blue);
    border-radius: 3px;
    transition: width var(--duration-normal) var(--ease-smooth);
  }

  /* Project Closures */
  .project-closure-card {
    padding: var(--space-4);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--success-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
  }

  .project-closure-card:last-child {
    margin-bottom: 0;
  }

  .project-closure-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
  }

  .project-closure-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
    letter-spacing: -0.01em;
  }

  .project-closure-date {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--text-secondary);
  }

  .project-closure-stats {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
  }

  .project-closure-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .project-closure-stat .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .project-closure-stat .stat-value {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
  }

  /* Responsive adjustments */
  @media (max-width: 1024px) {
    .modern-stats-grid .metric-card {
      min-width: 160px;
    }

    .chart-row {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .modern-stats-grid {
      flex-wrap: wrap;
    }

    .modern-stats-grid .metric-card {
      min-width: calc(50% - var(--spacing-lg));
      flex: 1 1 calc(50% - var(--spacing-lg));
    }

    .metric-value {
      font-size: 1.75rem;
    }

    .metric-content:has(.metric-progress) {
      padding-right: 56px;
    }

    .progress-ring {
      width: 48px;
      height: 48px;
    }

    .progress-ring svg {
      width: 48px;
      height: 48px;
    }

    .progress-text {
      font-size: 0.75rem;
    }

    .bar-label {
      min-width: 80px;
      font-size: 0.75rem;
    }

    .heatmap-grid {
      gap: 2px;
    }
  }

  @media (max-width: 480px) {
    .modern-stats-grid .metric-card {
      min-width: 100%;
      flex: 1 1 100%;
    }

    .metric-value {
      font-size: 1.5rem;
    }
  }

  /* Loading animations */
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }

    100% {
      background-position: 200% 0;
    }
  }

  .loading-shimmer {
    background: linear-gradient(
      90deg,
      var(--bg-secondary) 25%,
      var(--bg-tertiary) 50%,
      var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  /* Tooltips for charts */
  .chart-tooltip {
    position: absolute;
    background: var(--brand-dark);
    color: var(--text-on-color);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: var(--shadow-lg);
  }

  .chart-tooltip.show {
    opacity: 1;
  }

  .chart-tooltip::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--brand-dark);
  }

  /* ==========================================================================
   TASK COMPLETION STYLES
   ========================================================================== */

  .task-completion {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
  }

  .task-completion i {
    color: var(--success-color);
    margin-right: var(--spacing-xs);
  }

  .completion-status.on-time {
    color: var(--success-color);
    font-weight: 500;
  }

  .completion-status.late {
    color: var(--danger-color);
    font-weight: 500;
  }

  #completedAtGroup,
  #ticketCompletedAtGroup {
    transition: var(--transition);
  }

  /* ==========================================================================
   PROFILE STYLES
   ========================================================================== */

  .profile-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  .profile-section {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
  }

  .profile-form,
  .contractor-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .form-section {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
  }

  .form-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
  }

  .form-section-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
  }

  .form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
  }

  /* Category wage overrides */
  .category-override-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
  }

  .category-override-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
  }

  .category-override-wage {
    width: 120px;
    flex-shrink: 0;
  }

  .category-override-wage input {
    width: 100%;
  }

  .category-override-wage-suffix {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-left: var(--spacing-xs);
  }

  .category-override-categories {
    flex: 1;
    min-width: 200px;
  }

  .category-override-categories .multi-select-dropdown {
    width: 100%;
  }

  .category-override-delete {
    flex-shrink: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
  }

  .category-override-delete:hover {
    background: var(--danger-color);
    color: white;
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
  }

  .invoicing-date-settings,
  .invoicing-accumulated-settings {
    margin-top: var(--spacing-md);
  }

  .stats-overview {
    margin-bottom: var(--spacing-xl);
  }

  .stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
  }

  .progress-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
  }

  .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
  }

  .progress-header h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }

  .progress-percentage {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
  }

  .progress-details {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  .weekly-breakdown-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
  }

  .weekly-breakdown-section h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
  }

  .weekly-breakdown-table {
    overflow-x: auto;
  }

  .total-row {
    background: var(--bg-tertiary);
    border-top: 2px solid var(--primary-color);
  }

  .total-row td {
    font-weight: 600;
    color: var(--text-primary);
  }

  /* ==========================================================================
   PROFILE RESPONSIVE DESIGN
   ========================================================================== */

  @media (max-width: 768px) {
    .profile-container {
      gap: var(--spacing-lg);
    }

    .profile-section {
      padding: var(--spacing-md);
    }

    .stats-cards {
      grid-template-columns: repeat(2, 1fr);
    }

    .form-actions {
      flex-direction: column;
    }

    .progress-header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--spacing-sm);
    }

    .progress-details {
      flex-direction: column;
      gap: var(--spacing-xs);
    }
  }

  @media (max-width: 480px) {
    .stats-cards {
      grid-template-columns: 1fr;
    }

    .weekly-breakdown-table {
      font-size: 0.75rem;
    }

    .weekly-breakdown-table th,
    .weekly-breakdown-table td {
      padding: var(--spacing-xs) var(--spacing-sm);
    }
  }

  /* ==========================================================================
   PROJECTS
   ========================================================================== */

  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
  }

  .project-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-1);
    border: 1px solid var(--border-light);
    transition: all var(--duration-normal) var(--ease-smooth);
    cursor: pointer;
    position: relative;
    min-width: 0;
    overflow: hidden;
  }

  .project-card * {
    min-width: 0;
  }

  .project-card:hover {
    box-shadow: var(--shadow-2);
    border-color: var(--gray-4);
  }

  .project-card:active {
    box-shadow: var(--shadow-1);
    transform: scale(0.99);
  }

  .project-card.overdue {
    border-color: var(--red);
    background: var(--red-light);
  }

  .project-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-3);
  }

  .project-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-smooth);
    letter-spacing: -0.01em;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .project-title:hover {
    color: var(--blue);
  }

  .project-actions {
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-smooth);
  }

  .project-card:hover .project-actions {
    opacity: 1;
  }

  .project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .project-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px var(--space-2);
    background: var(--gray-2);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .project-tag.status {
    color: var(--text-on-color);
  }

  .project-tag.size {
    background: var(--blue-light);
    color: var(--blue);
  }

  .project-tag.category {
    background: var(--gray-2);
    color: var(--gray-6);
  }

  .project-tag.project {
    background: var(--orange-light);
    color: var(--orange);
  }

  .project-description {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.47;
    margin-bottom: var(--spacing-md);
  }

  .project-dates {
    margin-bottom: var(--spacing-md);
  }

  .project-date {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
  }

  .project-date.overdue {
    color: var(--danger-color);
    font-weight: 500;
  }

  .project-date.completed {
    color: var(--success-color);
    font-weight: 500;
  }

  .project-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .project-creator {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .project-summary {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
  }

  .project-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    text-align: center;
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
  }

  .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .project-tasks-list {
    max-height: 400px;
    overflow-y: auto;
  }

  .task-item {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: var(--transition);
  }

  .task-item:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
  }

  .task-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
  }

  .task-meta {
    display: flex;
    gap: var(--spacing-sm);
    font-size: 0.75rem;
  }

  .task-status {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-weight: 500;
  }

  .task-assignee {
    color: var(--text-muted);
  }

  .empty-message {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: var(--spacing-xl);
  }

  /* Project-specific responsive design */
  @media (max-width: 768px) {
    .projects-grid {
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
    }

    .project-stats {
      grid-template-columns: repeat(2, 1fr);
    }

    .project-meta {
      flex-direction: column;
      gap: var(--spacing-xs);
    }
  }

  /* ==========================================================================
   PROJECT DASHBOARD
   ========================================================================== */

  .project-dashboard-modal {
    max-width: 900px;
    width: 95%;
  }

  .project-dashboard-modal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }

  .dashboard-header-info h2 {
    margin: 0 0 var(--spacing-xs) 0;
  }

  .dashboard-header-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
  }

  .dashboard-date-range {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .dashboard-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }

  .dashboard-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    border: 1px solid var(--border-color);
  }

  .dashboard-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
  }

  .dashboard-card-percent {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--success-color);
  }

  .dashboard-card-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--spacing-xs);
  }

  .dashboard-section {
    margin-bottom: var(--spacing-lg);
  }

  .dashboard-section h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .dashboard-section h3 i {
    color: var(--blue);
    font-size: 12px;
  }

  /* Gantt Timeline */
  .gantt-container {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
  }

  .gantt-header {
    display: flex;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
  }

  .gantt-header-label {
    width: 180px;
    flex-shrink: 0;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .gantt-months {
    flex: 1;
    position: relative;
    height: 32px;
  }

  .gantt-month {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border-color);
    font-size: 0.7rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gantt-body {
    max-height: 300px;
    overflow-y: auto;
  }

  .gantt-giver-header {
    background: var(--bg-tertiary);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .gantt-row {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    min-height: 32px;
  }

  .gantt-row:last-child {
    border-bottom: none;
  }

  .gantt-task-name {
    width: 180px;
    flex-shrink: 0;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.8rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
  }

  .gantt-bar-container {
    flex: 1;
    position: relative;
    background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 49px,
      var(--border-color) 49px,
      var(--border-color) 50px
    );
  }

  .gantt-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    border-radius: var(--radius-sm);
    min-width: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  .gantt-bar:hover {
    opacity: 0.8;
  }

  .gantt-bar.todo {
    background: var(--text-muted);
  }

  .gantt-bar.in-progress {
    background: var(--primary-color);
  }

  .gantt-bar.done {
    background: var(--success-color);
  }

  /* Task Givers Table */
  .task-givers-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
  }

  .task-givers-table th,
  .task-givers-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
  }

  .task-givers-table th {
    background: var(--bg-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
  }

  .task-givers-table td {
    font-size: 0.85rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
  }

  .task-givers-table tr:last-child td {
    border-bottom: none;
  }

  .task-givers-table .text-center {
    text-align: center;
  }

  /* Dashboard responsive */
  @media (max-width: 768px) {
    .dashboard-summary-cards {
      grid-template-columns: repeat(2, 1fr);
    }

    .gantt-task-name {
      width: 120px;
    }

    .gantt-header-label {
      width: 120px;
    }
  }

  @media (max-width: 480px) {
    .dashboard-summary-cards {
      grid-template-columns: 1fr;
    }

    .gantt-task-name,
    .gantt-header-label {
      width: 100px;
      font-size: 0.7rem;
    }
  }

  /* Project Size Suggestion Modal */
  .size-suggestion-content {
    padding: var(--spacing-sm) 0;
  }

  .size-suggestion-info {
    background: var(--background-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .size-suggestion-info .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
  }

  .size-suggestion-info .info-row:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
  }

  .size-suggestion-info .info-label {
    color: var(--text-secondary);
    font-weight: 500;
  }

  .size-suggestion-info .info-value {
    font-weight: 600;
    color: var(--primary);
    font-size: 1.1rem;
  }

  .size-suggestion-warning {
    background: var(--warning-light, #fff3cd);
    border: 1px solid var(--warning, #ffc107);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    color: var(--warning-dark, #856404);
  }

  .size-suggestion-warning i {
    color: var(--warning, #ffc107);
    flex-shrink: 0;
    margin-top: 2px;
  }

  /* Category Breakdown & Expandable Weekly Rows */
  .category-breakdown-section {
    margin-top: var(--spacing-xl);
  }

  .category-breakdown-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .category-breakdown-section h4 i {
    color: var(--primary);
  }

  .percent-bar-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 100px;
    position: relative;
    height: 8px;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 4px;
    flex: 1;
  }

  .percent-bar {
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
    transition: width 0.3s ease;
    position: absolute;
    left: 0;
    top: 0;
  }

  .percent-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .percent-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
  }

  /* Expandable table rows */
  .expandable-table .week-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .expandable-table .week-row:hover {
    background: var(--background-hover, rgba(0, 0, 0, 0.02));
  }

  .expandable-table .week-row.expanded {
    background: var(--background-secondary);
  }

  .expand-cell {
    width: 30px;
    text-align: center;
  }

  .expand-icon {
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
  }

  .week-row.expanded .expand-icon {
    color: var(--primary);
  }

  .week-details-row td {
    padding: 0 !important;
    background: var(--background-secondary);
  }

  .week-category-details {
    padding: var(--spacing-md) var(--spacing-lg);
    padding-left: calc(var(--spacing-lg) + 30px);
    border-left: 3px solid var(--primary);
    margin-left: var(--spacing-md);
  }

  .week-category-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    font-size: 0.9rem;
  }

  .week-category-row:not(:last-child) {
    border-bottom: 1px dashed var(--border-color);
  }

  .week-category-row .category-name {
    font-weight: 600;
    min-width: 120px;
    color: var(--text-primary);
  }

  .week-category-row .category-hours {
    min-width: 50px;
    text-align: right;
  }

  .week-category-row .category-rate {
    color: var(--text-muted);
    min-width: 90px;
  }

  .week-category-row .category-equals {
    color: var(--text-muted);
  }

  .week-category-row .category-total {
    font-weight: 600;
    color: var(--success);
    min-width: 100px;
    text-align: right;
  }

  .week-category-row .category-items {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-left: var(--spacing-sm);
  }

  /* Empty state styles */
  .empty-state {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    color: var(--text-muted);
  }

  .empty-state i {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
    color: var(--text-muted);
  }

  .empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
  }

  .empty-state p {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* ==========================================================================
   TASKS TABLE VIEW
   ========================================================================== */

  .tasks-table-container {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
  }

  .tasks-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 120px 120px 100px 100px 150px 120px 80px;
    gap: var(--spacing-md);
    background: var(--bg-secondary);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
  }

  .tasks-table-body {
    display: flex;
    flex-direction: column;
  }

  .task-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 120px 120px 100px 100px 150px 120px 80px;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
    cursor: pointer;
  }

  .task-row:hover {
    background: var(--bg-secondary);
  }

  .task-row:last-child {
    border-bottom: none;
  }

  .task-row.overdue {
    border-left: 4px solid var(--danger-color);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
  }

  .task-col {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    position: relative;
    overflow: visible;
    text-overflow: ellipsis;
  }

  .task-col-name {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Column Resizer */
  .column-resizer {
    position: absolute;
    right: -6px;
    top: 0;
    bottom: 0;
    width: 12px;
    cursor: col-resize;
    background: transparent;
    z-index: 100;
    user-select: none;
    pointer-events: auto;
  }

  .column-resizer::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 60%;
    background: var(--border-color);
    transition: all 0.2s ease;
    pointer-events: none;
  }

  .column-resizer:hover::before {
    background: var(--primary-color);
    width: 3px;
  }

  .sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    padding-right: 16px;
    position: relative;
  }

  .sortable:hover {
    background: var(--hover-color);
  }

  .sortable i.fas {
    pointer-events: none;
  }

  .task-info {
    width: 100%;
  }

  .task-name {
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: var(--spacing-xs);
  }

  .task-name:hover {
    color: var(--primary-color);
  }

  .task-description {
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .assignee-info,
  .giver-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
    padding-right: 4px;
    max-width: calc(100% - 16px);
  }

  .assignee-info span,
  .giver-info span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .assignee-info i,
  .giver-info i {
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .task-deadline {
    font-size: 0.75rem;
    color: var(--text-secondary);
  }

  .task-deadline.overdue {
    color: var(--danger-color);
    font-weight: 500;
  }

  .no-deadline {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.75rem;
  }

  .task-completed {
    font-size: 0.75rem;
    color: var(--text-secondary);
  }

  .task-completed.late-completed {
    color: var(--danger-color);
    font-weight: 500;
  }

  .late-completed-icon {
    color: var(--danger-color);
    margin-right: 2px;
  }

  .not-completed {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.75rem;
  }

  .task-actions {
    display: flex;
    gap: var(--spacing-xs);
    opacity: 0;
    transition: var(--transition);
  }

  .task-row:hover .task-actions {
    opacity: 1;
  }

  /* Task Grouping */
  .task-group {
    margin-bottom: var(--spacing-md);
  }

  .task-group:last-child {
    margin-bottom: 0;
  }

  .task-group-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .task-group-title {
    margin: 0;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .task-group-title i {
    font-size: 0.875rem;
    opacity: 0.9;
  }

  .task-group-count {
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0.9;
    margin-left: var(--spacing-xs);
  }

  .task-group-body {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: hidden;
  }

  .task-group-body .task-row:first-child {
    border-top: none;
  }

  .task-group-body .task-row:last-child {
    border-bottom: none;
  }

  /* Pagination Styles */
  .pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
  }

  .pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--spacing-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination-btn:hover:not(:disabled) {
    background: var(--primary-color);
    color: var(--text-on-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  .pagination-btn:active:not(:disabled) {
    transform: translateY(0);
  }

  .pagination-btn.active {
    background: var(--primary-color);
    color: var(--text-on-color);
    border-color: var(--primary-color);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
  }

  .pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--bg-tertiary);
  }

  .pagination-ellipsis {
    padding: 0 var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.875rem;
  }

  /* Responsive adjustments for task table */
  @media (max-width: 1024px) {
    .tasks-table-header,
    .task-row {
      grid-template-columns: 2fr 1fr 1fr 100px 100px 80px 80px 120px 100px 60px;
      gap: var(--spacing-sm);
    }
  }

  @media (max-width: 768px) {
    .tasks-table-header {
      display: none;
    }

    .task-row {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
      padding: var(--spacing-md);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      margin-bottom: var(--spacing-sm);
    }

    .task-row:last-child {
      margin-bottom: 0;
    }

    .task-col {
      display: flex;
      align-items: center;
      padding: var(--spacing-xs) 0;
      border-bottom: 1px solid var(--border-light);
    }

    .task-col:last-child {
      border-bottom: none;
    }

    .task-col::before {
      content: attr(data-label);
      font-weight: 600;
      color: var(--text-secondary);
      margin-right: var(--spacing-sm);
      min-width: 90px;
      font-size: 0.8125rem;
      flex-shrink: 0;
    }

    .task-col-name {
      flex-direction: column;
      align-items: flex-start;
    }

    .task-col-name::before {
      display: none;
    }

    .task-col-name .task-name {
      font-weight: 600;
      font-size: 1rem;
    }

    .task-col-actions {
      justify-content: flex-end;
    }

    .task-col-actions::before {
      display: none;
    }

    .pagination-container {
      flex-direction: column;
      gap: var(--spacing-md);
      padding: var(--spacing-md);
    }

    .pagination-controls {
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }

    .pagination-btn {
      min-width: 32px;
      height: 32px;
      font-size: 0.8125rem;
    }
  }

  /* Work Time Modal Styles */
  .work-entries-section {
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-lg);
  }

  .work-entries-section h4 {
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .work-entries-list {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: var(--spacing-md);
  }

  .work-entries-list .work-entry {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
    font-size: 0.875rem;
  }

  .work-entries-list .work-entry-info {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: var(--spacing-xs) var(--spacing-sm);
    align-items: center;
  }

  .work-entries-list .work-entry-date {
    font-weight: 500;
    color: var(--text-primary);
  }

  .work-entries-list .work-entry-time {
    font-weight: 600;
    color: var(--primary-color);
  }

  .work-entries-list .work-entry-description {
    color: var(--text-secondary);
  }

  .work-entries-list .work-entry-user {
    color: var(--text-muted);
    font-size: 0.75rem;
  }

  .work-entries-list .work-entry-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
  }

  .work-entries-list .work-entry-actions .btn {
    padding: 4px 8px;
    font-size: 0.75rem;
  }

  .work-total {
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-color);
    text-align: right;
    padding: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
  }

  .no-work-entries {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-lg);
  }

  .sortable {
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
  }

  .sortable:hover {
    background-color: var(--bg-secondary);
    color: var(--primary-color);
  }

  .sortable i {
    margin-left: var(--spacing-xs);
    opacity: 0.5;
  }

  .sortable:hover i {
    opacity: 1;
  }

  /* ==========================================================================
   PROJECT TASK SELECTION
   ========================================================================== */

  .task-selection-item:hover {
    background-color: var(--bg-secondary);
  }

  .task-selection-item:last-child {
    border-bottom: none !important;
  }

  .task-selection-list:empty::after {
    content: 'Nincsenek feladatok';
    display: block;
    text-align: center;
    color: var(--text-muted);
    padding: var(--spacing-lg);
  }

  #projectTaskList {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }

  #projectTaskList::-webkit-scrollbar {
    width: 6px;
  }

  #projectTaskList::-webkit-scrollbar-track {
    background: transparent;
  }

  #projectTaskList::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
  }

  #projectTaskList::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-hover);
  }

  /* ==========================================================================
   DUPLICATE REMOVER STYLES
   ========================================================================== */

  .duplicate-group {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .duplicate-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--primary-color);
  }

  .duplicate-group-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .duplicate-count {
    background: var(--warning-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
  }

  .duplicate-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .duplicate-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: var(--transition);
    position: relative;
  }

  .duplicate-item:hover {
    box-shadow: var(--shadow-sm);
  }

  .duplicate-item.selected-to-keep {
    border-color: var(--success-color);
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  }

  .duplicate-item.selected-to-remove {
    border-color: var(--danger-color);
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
    opacity: 0.7;
  }

  .duplicate-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
  }

  .duplicate-item-selection {
    display: flex;
    gap: var(--spacing-sm);
  }

  .keep-radio {
    accent-color: var(--success-color);
  }

  .duplicate-item-info {
    flex: 1;
  }

  .duplicate-item-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
  }

  .duplicate-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
  }

  .duplicate-item-meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .duplicate-stats {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }

  .duplicate-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
  }

  .duplicate-stat {
    text-align: center;
  }

  .duplicate-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--warning-color);
  }

  .duplicate-stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  .no-duplicates {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
  }

  .no-duplicates i {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    color: var(--success-color);
  }

  /* Work Duration Entries */
  .work-duration-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    margin-bottom: 8px;
    background: var(--bg-surface);
  }

  .work-duration-info {
    flex: 1;
  }

  .work-duration-time {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  .work-duration-date {
    color: var(--ink-muted);
    font-size: 0.875rem;
  }

  .work-duration-description {
    color: var(--ink-primary);
    font-size: 0.875rem;
    margin-bottom: 8px;
  }

  .work-duration-user {
    color: var(--ink-muted);
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .work-duration-actions {
    margin-left: 12px;
  }

  /* Weekly Work Hours Chart Styles */
  .weekly-chart-container {
    font-family: var(--font-family);
  }

  .weekly-chart-container .chart-tooltip {
    position: absolute;
    background: var(--brand-dark);
    color: var(--text-on-color);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: 1.4;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-5px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
    max-width: 200px;
    text-align: left;
    box-shadow: var(--shadow-lg);
  }

  .weekly-chart-container .chart-tooltip.show {
    opacity: 1;
    transform: translateY(0);
  }

  .weekly-chart-container .chart-tooltip strong {
    color: var(--brand-accent);
  }

  /* ==========================================================================
   TICKETS
   ========================================================================== */

  /* View Header */
  .view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--brand-dark) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
  }

  .view-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    pointer-events: none;
  }

  .view-title {
    position: relative;
    z-index: 1;
  }

  .view-title h2 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-on-color);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .view-title h2 i {
    font-size: 1.5rem;
    opacity: 0.9;
  }

  .view-title p {
    margin: 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  .view-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
  }

  .view-actions .btn-outline {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-on-color);
    backdrop-filter: blur(10px);
    font-weight: 500;
  }

  .view-actions .btn-outline:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
  }

  .view-actions .btn-outline i {
    margin-right: var(--spacing-xs);
  }

  /* Responsive view header */
  @media (max-width: 768px) {
    .view-header {
      flex-direction: column;
      gap: var(--spacing-md);
      padding: var(--spacing-md);
      max-width: 100%;
      box-sizing: border-box;
    }

    .view-title h2 {
      font-size: 1.25rem;
    }

    .view-title p {
      font-size: 0.8125rem;
    }

    .view-actions {
      width: 100%;
      flex-wrap: wrap;
      gap: var(--spacing-xs);
    }

    .view-actions .btn {
      flex: 1 1 auto;
      min-width: 0;
      justify-content: center;
      padding: var(--spacing-xs) var(--spacing-sm);
      font-size: 0.8125rem;
    }
  }

  @media (max-width: 480px) {
    .view-actions .btn span:not(.badge) {
      display: none;
    }

    .view-actions .btn i {
      margin-right: 0;
    }

    .view-actions .btn {
      padding: var(--spacing-xs) var(--spacing-sm);
      flex: 0 1 auto;
    }
  }

  /* Filters Section */
  .filters-section {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .filter-group {
    flex: 1;
    min-width: 200px;
  }

  .filter-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
  }

  .filter-group label.toggle-label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
  }

  .filter-group.toggle-filter {
    flex: 0 0 auto;
    min-width: auto;
  }

  .filter-group .form-select,
  .filter-group .form-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition);
  }

  .filter-group .form-select:focus,
  .filter-group .form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(197, 94, 76, 0.1);
  }

  /* Multi-select Dropdown */
  .multi-select-dropdown {
    position: relative;
    width: 100%;
  }

  .multi-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: var(--transition);
  }

  .multi-select-trigger:hover {
    border-color: var(--primary-color);
  }

  .multi-select-trigger i {
    color: var(--text-secondary);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
  }

  .multi-select-dropdown.open .multi-select-trigger i {
    transform: rotate(180deg);
  }

  .multi-select-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .multi-select-options {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
  }

  .multi-select-dropdown.open .multi-select-options {
    display: block;
  }

  .multi-select-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: background 0.15s ease;
  }

  .multi-select-options label:hover {
    background: var(--bg-secondary);
  }

  .multi-select-options label:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .multi-select-options label:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }

  .multi-select-options input[type='checkbox'] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
  }

  /* Ticket Badges */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--space-2);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  .badge-category {
    background: var(--purple-light);
    color: var(--purple);
  }

  .badge-urgency {
    font-weight: 600;
  }

  .urgency-low {
    background: var(--blue-light);
    color: var(--blue);
  }

  .urgency-normal {
    background: var(--gray-2);
    color: var(--gray-6);
  }

  .urgency-high {
    background: var(--orange-light);
    color: var(--orange);
  }

  .urgency-emergency {
    background: var(--red-light);
    color: var(--red);
    animation: pulse-subtle 2s infinite;
  }

  @keyframes pulse-subtle {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.7;
    }
  }

  /* Ticket Status Badges */
  .badge-status {
    font-weight: 500;
  }

  .badge-status.status-todo {
    background: var(--gray-2);
    color: var(--gray-6);
  }

  .badge-status.status-in-progress {
    background: var(--blue-light);
    color: var(--blue);
  }

  .badge-status.status-in-review {
    background: var(--purple-light);
    color: var(--purple);
  }

  .badge-status.status-waiting {
    background: var(--warn-tint);
    color: var(--warn);
  }

  .badge-status.status-escalated {
    background: var(--bad-tint);
    color: var(--bad);
  }

  .badge-status.status-done {
    background: var(--green-light);
    color: var(--green);
  }

  .badge-status.status-rejected {
    background: var(--red-light);
    color: var(--red);
  }

  /* Unread Replies Badge */
  .unread-replies-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--red);
    color: var(--accent-on);
    white-space: nowrap;
    vertical-align: middle;
    animation: pulse-subtle 2s infinite;
  }

  .unread-replies-badge i {
    font-size: 10px;
  }

  /* Status Select in Table */
  .status-select {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
  }

  .status-select:hover {
    border-color: var(--primary-color);
  }

  .status-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(197, 94, 76, 0.1);
  }

  /* Actions Cell */
  .actions-cell {
    white-space: nowrap;
  }

  .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    margin-right: 0.25rem;
  }

  .btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--primary-color);
    border-color: var(--primary-color);
  }

  .btn-icon i {
    font-size: 0.875rem;
  }

  /* Emergency Row Highlighting */
  .urgency-emergency {
    background-color: var(--bad-tint) !important;
  }

  /* Tickets Container */
  .tickets-container {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    border: 1px solid var(--border-light);
    transition: all var(--duration-normal) var(--ease-smooth);
  }

  .tickets-table-header {
    display: grid;
    grid-template-columns: 120px 110px 2fr 90px 90px 110px 110px 90px 95px 95px 75px 90px;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 2px solid var(--primary-dark);
  }

  .tickets-table-header .ticket-col {
    color: white;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.1);
  }

  .tickets-table-header .ticket-col.sortable {
    cursor: pointer;
    user-select: none;
    transition: all var(--duration-fast) var(--ease-smooth);
  }

  .tickets-table-header .ticket-col.sortable:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }

  .tickets-table-header .ticket-col.sortable i {
    margin-left: var(--spacing-xs);
    opacity: 0.7;
    font-size: 0.75rem;
  }

  .tickets-list {
    background: var(--bg-primary);
  }

  .ticket-row {
    display: grid;
    grid-template-columns: 120px 110px 2fr 90px 90px 110px 110px 90px 95px 95px 75px 90px;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
    transition: all var(--duration-normal) var(--ease-smooth);
    align-items: center;
  }

  .ticket-row:hover {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-2);
    border-color: var(--gray-4);
    transform: translateY(-1px);
  }

  .ticket-row:active {
    transform: translateY(0);
    box-shadow: var(--shadow-1);
  }

  .ticket-row:last-child {
    border-bottom: none;
  }

  .ticket-row.urgency-emergency {
    border-left: 4px solid var(--danger-color);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
  }

  .ticket-col {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--transition);
  }

  .ticket-row .ticket-col {
    color: var(--text-primary);
  }

  /* Inline select for ticket table quick-edit cells */
  .ticket-inline-select {
    width: 100%;
    padding: 2px 4px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    appearance: auto;
  }

  .ticket-inline-select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -1px;
  }

  .ticket-inline-select.saving {
    opacity: 0.5;
    pointer-events: none;
  }

  /* Project Picker - searchable dropdown */
  .project-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2px 4px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    min-height: 24px;
    gap: 4px;
  }

  .project-picker-trigger:hover {
    border-color: var(--primary-color);
  }

  .project-picker-trigger:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -1px;
  }

  .project-picker-trigger.saving {
    opacity: 0.5;
    pointer-events: none;
  }

  .project-picker-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
  }

  .project-picker-arrow {
    font-size: 0.6rem;
    color: var(--text-secondary);
    flex-shrink: 0;
  }

  .project-picker-dropdown {
    position: absolute;
    z-index: 9999;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    max-width: 320px;
  }

  .project-picker-dropdown.show {
    display: block;
  }

  .project-picker-search {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.8rem;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
  }

  .project-picker-options {
    max-height: 240px;
    overflow-y: auto;
  }

  .project-picker-option {
    padding: 5px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .project-picker-option:hover,
  .project-picker-option.focused {
    background: var(--bg-hover);
  }

  .project-picker-option.selected {
    background: var(--primary-light, rgba(59, 130, 246, 0.1));
    font-weight: 600;
  }

  .project-picker-option.inactive {
    color: var(--text-secondary);
    font-style: italic;
  }

  .project-picker-status {
    font-size: 0.65rem;
    color: var(--text-muted);
  }

  /* Mobile-only submitter name inside ticket number cell */
  .ticket-mobile-submitter {
    display: none;
  }

  .loading-state,
  .empty-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
  }

  /* Category Fields Section */
  .category-fields-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
  }

  .category-fields-section h4 {
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .info-row {
    display: flex;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-light);
  }

  .info-row:last-child {
    border-bottom: none;
  }

  .info-label {
    font-weight: 500;
    color: var(--text-secondary);
  }

  .info-value {
    flex: 1;
    color: var(--text-primary);
  }

  /* Responsive Tickets View */
  @media (max-width: 1024px) {
    .tickets-table-header,
    .ticket-row {
      grid-template-columns: 95px 90px 2fr 75px 75px 90px 90px 80px 80px 80px 60px 75px;
      gap: var(--spacing-sm);
      padding: var(--spacing-sm) var(--spacing-md);
    }

    .tickets-table-header {
      font-size: 0.8125rem;
    }
  }

  @media (max-width: 768px) {
    .tickets-container {
      border: none;
      box-shadow: none;
      background: transparent;
    }

    .tickets-table-header {
      display: none;
    }

    .ticket-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      padding: 0;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      margin-bottom: var(--spacing-md);
      overflow: hidden;
      background: var(--bg-primary);
      box-shadow: var(--shadow-1);
    }

    .ticket-row:hover {
      transform: none;
    }

    .ticket-row:last-child {
      margin-bottom: 0;
    }

    .ticket-row.urgency-emergency {
      border-left: 4px solid var(--danger-color);
    }

    /* Reset all ticket-col defaults for mobile */
    .ticket-row .ticket-col {
      padding: 0;
      overflow: visible;
      text-overflow: unset;
      font-size: 0.8125rem;
      border-bottom: none;
    }

    .ticket-col::before {
      display: none;
    }

    /* --- Card header: ticket number + submitter --- */
    .ticket-col-number {
      width: 100%;
      background: var(--bg-secondary);
      padding: var(--spacing-sm) var(--spacing-md) !important;
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-light) !important;
      font-size: 0.8125rem;
    }

    .ticket-col-number strong {
      color: var(--primary-color);
      font-size: 0.8125rem;
    }

    /* --- Submitter: hidden as separate row, shown inside number cell --- */
    .ticket-col-submitter {
      display: none !important;
    }

    .ticket-mobile-submitter {
      display: inline;
      font-weight: 400;
      color: var(--text-secondary);
      font-size: 0.75rem;
    }

    /* --- Subject: full width, prominent --- */
    .ticket-col-subject {
      width: 100%;
      padding: var(--spacing-sm) var(--spacing-md) !important;
      font-weight: 500;
      font-size: 0.875rem !important;
      color: var(--text-primary);
      line-height: 1.3;
      white-space: normal;
      word-break: break-word;
      border-bottom: 1px solid var(--border-light) !important;
    }

    /* --- Badges: flow as inline tags, fill the row so next items wrap --- */
    .ticket-col-badge {
      display: inline-flex !important;
      padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-sm) !important;
      flex: 0 0 auto;
    }

    .ticket-col-badge:nth-child(4) {
      padding-left: var(--spacing-md) !important;
    }

    /* Status badge (6th child) fills remaining row space to force line break */
    .ticket-col-badge:nth-child(6) {
      flex: 1 0 auto !important;
      padding-right: var(--spacing-md) !important;
      border-bottom: 1px solid var(--border-light) !important;
      padding-bottom: var(--spacing-sm) !important;
    }

    /* --- Detail rows: label + value pairs --- */
    .ticket-col-project,
    .ticket-col-wage,
    .ticket-col-date {
      width: 50%;
      box-sizing: border-box;
      padding: var(--spacing-xs) var(--spacing-md) !important;
      display: flex !important;
      flex-direction: column;
      gap: 2px;
      min-height: 0;
    }

    .ticket-col-project::before,
    .ticket-col-wage::before,
    .ticket-col-date::before {
      content: attr(data-label);
      display: block !important;
      font-weight: 600;
      color: var(--text-secondary);
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .ticket-col-date[data-label='Létrehozva'] {
      border-top: 1px solid var(--border-light) !important;
    }

    /* Hide rating and empty closed-date on mobile */
    .ticket-col-rating,
    .ticket-col-empty {
      display: none !important;
    }

    /* When lezárva is hidden, létrehozva takes full width */
    .ticket-col-empty + .ticket-col-actions {
      /* Actions still full width - no change needed */
    }

    /* --- Actions: bottom bar --- */
    .ticket-col-actions {
      width: 100%;
      display: flex !important;
      justify-content: flex-end;
      gap: var(--spacing-sm);
      padding: var(--spacing-sm) var(--spacing-md) !important;
      background: var(--bg-secondary);
      border-top: 1px solid var(--border-light) !important;
    }

    .ticket-col-actions .btn-icon {
      width: 36px;
      height: 36px;
      font-size: 1rem;
    }

    /* --- Filter section compact --- */
    .filters-section {
      gap: var(--spacing-sm);
    }

    .filter-group {
      min-width: calc(50% - var(--spacing-sm));
      flex: 0 0 calc(50% - var(--spacing-sm));
    }

    .filter-group label {
      font-size: 0.75rem;
    }

    .filter-group .form-select,
    .filter-group .form-input {
      padding: 0.5rem 0.625rem;
      font-size: 0.8125rem;
    }

    .multi-select-trigger {
      padding: 0.5rem 0.625rem;
      font-size: 0.8125rem;
    }

    /* --- Ticket detail modal: full screen --- */
    .modal-xlarge {
      width: 100%;
      max-width: 100%;
      margin: 0;
      border-radius: 0;
      max-height: 100vh;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .modal-xlarge .modal-header {
      flex-shrink: 0;
    }

    .modal-xlarge .modal-body {
      flex: 1;
      max-height: none;
      min-height: 0;
      overflow-y: auto;
    }

    .modal-xlarge .modal-footer {
      flex-shrink: 0;
      position: sticky;
      bottom: 0;
      background: var(--bg-primary);
      border-top: 1px solid var(--border-light);
      z-index: 10;
    }

    .ticket-details-layout-3col {
      grid-template-columns: 1fr;
    }

    .ticket-details-sidebar {
      position: static;
    }
  }

  /* ==========================================================================
   AI CHAT & TICKET CHAIN STYLES
   ========================================================================== */

  /* Extra Large Modal for 3-column layout */
  .modal-xlarge {
    max-width: 1400px;
    width: 95%;
  }

  /* Three-column ticket details layout */
  .ticket-details-layout-3col {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--spacing-md);
  }

  .ticket-details-main {
    min-width: 0;
  }

  .ticket-details-sidebar {
    position: sticky;
    top: 0;
    height: fit-content;
  }

  /* Compact ticket modal info cards */
  .ticket-details-layout-3col .info-card {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .ticket-details-layout-3col .info-card-title {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 0.9rem;
  }

  .ticket-details-layout-3col .info-grid {
    gap: var(--spacing-sm);
  }

  .ticket-details-sidebar .info-card {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Chain Badge in Header */
  .chain-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--purple-light);
    color: var(--purple);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: var(--spacing-md);
  }

  .chain-badge i {
    font-size: 0.875rem;
  }

  .chain-badge .btn-icon {
    padding: 2px 6px;
    margin: 0;
  }

  /* Chain Management Modals */
  .chain-option-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
  }

  .chain-ticket-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
  }

  .chain-ticket-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .chain-ticket-item:last-child {
    border-bottom: none;
  }

  .chain-ticket-item:hover {
    background: var(--bg-secondary);
  }

  .chain-ticket-item input[type='checkbox'] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  .chain-ticket-item .ticket-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .chain-ticket-item .ticket-info small {
    color: var(--text-secondary);
    font-size: 0.8125rem;
  }

  /* Chain List */
  .chain-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-height: 500px;
    overflow-y: auto;
  }

  .chain-item {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    background: white;
    transition: box-shadow 0.2s;
  }

  .chain-item:hover {
    box-shadow: var(--shadow-md);
  }

  .chain-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-light);
  }

  .chain-tickets {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
  }

  .chain-tickets div {
    padding: var(--spacing-xs) 0;
  }

  /* Chain Timeline View */
  .chain-timeline {
    position: relative;
    padding-left: var(--spacing-xl);
  }

  .chain-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--purple);
  }

  .chain-timeline-item {
    position: relative;
    padding-bottom: var(--spacing-xl);
  }

  .chain-timeline-item:last-child {
    padding-bottom: 0;
  }

  .chain-timeline-marker {
    position: absolute;
    left: -30px;
    top: 0;
    width: 40px;
    height: 40px;
    background: var(--purple);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    z-index: 1;
  }

  .chain-timeline-content {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
  }

  .chain-ticket-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
  }

  .chain-ticket-subject {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
  }

  .chain-ticket-meta {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-md);
  }

  .chain-ticket-resolution {
    background: var(--green-light);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--green);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: 0.9375rem;
  }

  /* Comments Section Styles */
  .comments-container {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--background-light, #f8f9fa);
    border-radius: var(--border-radius);
  }

  .comment-item {
    background: white;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    border-left: 3px solid var(--border-color, #e9ecef);
    transition: all 0.2s ease;
  }

  .comment-item:hover {
    transform: translateX(2px);
  }

  .comment-item.comment-admin {
    border-left-color: var(--primary-color, #007bff);
    background: linear-gradient(to right, rgba(0, 123, 255, 0.05), white);
  }

  .comment-item.comment-user {
    border-left-color: var(--success-color, #28a745);
    background: linear-gradient(to right, rgba(40, 167, 69, 0.05), white);
  }

  .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
  }

  .comment-author {
    font-weight: 600;
    color: var(--text-dark, #2c3e50);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .comment-author i {
    color: var(--primary-color, #007bff);
  }

  .comment-item.comment-user .comment-author i {
    color: var(--success-color, #28a745);
  }

  .admin-badge {
    background: var(--primary-color, #007bff);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 0.25rem;
  }

  .comment-time {
    font-size: 0.8rem;
    color: var(--text-muted, #6c757d);
  }

  .comment-text {
    line-height: 1.6;
    color: var(--text-dark, #2c3e50);
    white-space: pre-wrap;
    font-size: 0.9rem;
  }

  .comment-reply-form {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color, #e9ecef);
  }

  .comment-reply-form .form-textarea {
    margin-bottom: var(--spacing-sm);
    resize: vertical;
  }

  .comment-reply-form .btn {
    width: 100%;
  }

  /* Notification Modal Styles */
  .notification-section {
    margin-bottom: var(--spacing-lg);
  }

  .notification-section h3 {
    font-size: 1rem;
    color: var(--text-dark, #2c3e50);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color, #e9ecef);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .notification-section h3 i {
    color: var(--primary-color, #007bff);
  }

  .notification-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .notification-item {
    background: var(--background-light, #f8f9fa);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--border-color, #e9ecef);
    transition: all 0.2s ease;
  }

  .notification-item:hover {
    background: var(--bg-secondary);
    border-left-color: var(--primary-color, #007bff);
  }

  .notification-item.clickable {
    cursor: pointer;
  }

  .notification-item.clickable:hover {
    background: var(--primary-color, #3b82f6);
    border-left-color: var(--primary-color, #3b82f6);
  }

  .notification-item.clickable:hover .notification-title,
  .notification-item.clickable:hover .notification-meta {
    color: white;
  }

  /* Urgency indicators for ticket notifications */
  .urgency-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
  }

  .urgency-indicator.urgency-low {
    background: var(--ink-muted);
  }

  .urgency-indicator.urgency-normal {
    background: var(--accent-solid);
  }

  .urgency-indicator.urgency-high {
    background: var(--warn);
  }

  .urgency-indicator.urgency-emergency {
    background: var(--bad);
  }

  .notification-title {
    font-weight: 600;
    color: var(--text-dark, #2c3e50);
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
  }

  .notification-meta {
    font-size: 0.8rem;
    color: var(--text-muted, #6c757d);
  }

  /* Responsive adjustments for 2-column ticket layout */
  @media (max-width: 1200px) {
    .ticket-details-layout-3col {
      grid-template-columns: 1fr 340px;
    }
  }

  @media (max-width: 900px) {
    .ticket-details-layout-3col {
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
    }

    .ticket-details-sidebar {
      position: static;
    }
  }

  @media (max-width: 768px) {
    .modal-xlarge {
      width: 100%;
      max-width: 100%;
      margin: 0;
      border-radius: 0;
    }

    .chain-badge {
      display: flex;
      margin-left: 0;
      margin-top: var(--spacing-sm);
    }

    .chain-timeline {
      padding-left: var(--spacing-lg);
    }

    .chain-timeline::before {
      left: 10px;
    }

    .chain-timeline-marker {
      left: -20px;
      width: 32px;
      height: 32px;
      font-size: 0.875rem;
    }
  }

  /* ==========================================================================
   COLLEAGUES VIEW SPECIFIC STYLES
   ========================================================================== */

  #colleaguesView .modern-charts-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
  }

  #colleaguesView .chart-panel.full-width {
    grid-column: 1 / -1;
  }

  #colleaguesView .chart-panel {
    height: 350px;
    min-height: auto;
  }

  #colleaguesView .chart-panel .panel-body {
    height: calc(100% - 80px);
    padding: var(--spacing-md);
  }

  #colleaguesView .chart-panel canvas {
    max-height: 100%;
  }

  /* Responsive: stack charts on smaller screens */
  @media (max-width: 1024px) {
    #colleaguesView .modern-charts-dashboard {
      grid-template-columns: 1fr;
    }

    #colleaguesView .chart-panel {
      height: 300px;
    }
  }

  /* ==========================================================================
   TABLE CONTROLS & DATA TABLE STYLES (Colleagues View)
   ========================================================================== */

  #colleaguesView .table-controls {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--spacing-md) !important;
    margin-bottom: var(--spacing-lg) !important;
    flex-wrap: wrap !important;
  }

  #colleaguesView .search-box {
    position: relative !important;
    flex: 1 !important;
    min-width: 250px !important;
    max-width: 400px !important;
  }

  #colleaguesView .search-box i {
    position: absolute !important;
    left: var(--spacing-md) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--text-secondary) !important;
    font-size: 0.875rem !important;
  }

  #colleaguesView .search-box input {
    width: 100% !important;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 2.5rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.875rem !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: all var(--duration-fast) var(--ease-smooth) !important;
  }

  #colleaguesView .search-box input:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.1) !important;
  }

  #colleaguesView .search-box input::placeholder {
    color: var(--text-secondary) !important;
  }

  #colleaguesView .data-table-container {
    overflow-x: auto !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
  }

  #colleaguesView .data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.875rem !important;
  }

  #colleaguesView .data-table thead {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  #colleaguesView .data-table th {
    padding: var(--space-2) var(--space-3) !important;
    text-align: left !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  #colleaguesView .data-table tbody tr {
    border-bottom: 1px solid var(--border-light) !important;
    transition: background-color var(--duration-fast) var(--ease-smooth) !important;
  }

  #colleaguesView .data-table tbody tr:last-child {
    border-bottom: none !important;
  }

  #colleaguesView .data-table tbody tr:hover {
    background: var(--bg-secondary) !important;
  }

  #colleaguesView .data-table td {
    padding: var(--space-2) var(--space-3) !important;
    color: var(--text-primary) !important;
    vertical-align: middle !important;
    font-size: 12px !important;
  }

  #colleaguesView .data-table td strong {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
  }

  /* Responsive table */
  @media (max-width: 768px) {
    .table-controls {
      flex-direction: column;
      align-items: stretch;
    }

    .search-box {
      max-width: none;
    }

    .filter-controls {
      width: 100%;
    }

    .filter-select {
      width: 100%;
    }

    .data-table-container {
      overflow-x: scroll;
    }
  }

  /* ==========================================================================
   REPLY ATTACHMENT AREA
   Dropzone styles for admin reply file attachments
   ========================================================================== */

  .reply-attachment-area,
  .comment-reply-form .reply-attachment-area {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }

  .attachment-dropzone,
  .comment-reply-form .attachment-dropzone,
  #replyDropzone {
    border: 2px dashed var(--border-soft) !important;
    border-radius: var(--radius-md) !important;
    padding: 20px 24px !important;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-page) !important;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    min-height: 90px;
  }

  .attachment-dropzone::before,
  #replyDropzone::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-md);
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.25s ease;
  }

  .attachment-dropzone:hover,
  #replyDropzone:hover {
    border-color: var(--primary-color) !important;
    background: var(--blue-light) !important;
  }

  .attachment-dropzone:hover::before,
  #replyDropzone:hover::before {
    border-color: var(--primary-color);
    opacity: 0.4;
  }

  .attachment-dropzone.dragover,
  #replyDropzone.dragover {
    border-color: var(--primary-color) !important;
    border-style: solid !important;
    background: var(--blue-light) !important;
    box-shadow:
      0 0 0 4px rgba(33, 71, 111, 0.15),
      0 8px 20px rgba(33, 71, 111, 0.15);
    transform: scale(1.02);
  }

  .attachment-dropzone.dragover::before,
  #replyDropzone.dragover::before {
    border-style: solid;
    border-color: var(--primary-color);
    opacity: 0.5;
  }

  .attachment-dropzone.paste-highlight,
  #replyDropzone.paste-highlight {
    border-color: var(--success-color) !important;
    border-style: solid !important;
    background: var(--success-light) !important;
    animation: paste-pulse 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .attachment-dropzone.paste-highlight::before,
  #replyDropzone.paste-highlight::before {
    border-color: var(--success-color);
    border-style: solid;
  }

  @keyframes paste-pulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5);
    }

    50% {
      transform: scale(1.03);
      box-shadow: 0 0 0 8px rgba(52, 199, 89, 0);
    }

    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
    }
  }

  .attachment-dropzone i.fa-cloud-upload-alt,
  #replyDropzone i.fa-cloud-upload-alt {
    font-size: 1.75rem !important;
    color: var(--ink-faint) !important;
    margin: 0 !important;
    display: block;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .attachment-dropzone:hover i.fa-cloud-upload-alt,
  #replyDropzone:hover i.fa-cloud-upload-alt {
    color: var(--primary-color) !important;
    transform: translateY(-3px) scale(1.1);
  }

  .attachment-dropzone p,
  #replyDropzone p {
    font-size: 13px !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
    line-height: 1.5;
  }

  .attachment-dropzone .browse-link,
  #replyDropzone .browse-link {
    color: var(--primary-color) !important;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    cursor: pointer;
  }

  .attachment-dropzone .browse-link::after,
  #replyDropzone .browse-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }

  .attachment-dropzone .browse-link:hover::after,
  #replyDropzone .browse-link:hover::after {
    transform: scaleX(1);
  }

  .attachment-dropzone .attachment-hint,
  #replyDropzone .attachment-hint {
    font-size: 11px !important;
    color: var(--ink-faint) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.04);
    padding: 3px 10px;
    border-radius: var(--radius-md);
    margin-top: 2px;
  }

  .attachment-dropzone .attachment-hint::before,
  #replyDropzone .attachment-hint::before {
    content: 'Ctrl+V';
    font-family:
      system-ui,
      -apple-system,
      sans-serif;
    font-size: 10px;
    font-weight: 600;
    background: white;
    padding: 2px 5px;
    border-radius: 4px;
  }

  /* Attachment preview list */
  .attachment-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
  }

  .attachment-preview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--gray-3);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 12px;
    max-width: 220px;
    transition: all 0.15s ease;
  }

  .attachment-preview-item:hover {
    border-color: var(--gray-4);
  }

  .attachment-preview-item i {
    flex-shrink: 0;
    font-size: 14px;
    width: 18px;
    text-align: center;
  }

  .attachment-preview-item i.fa-file-image {
    color: var(--purple);
  }

  .attachment-preview-item i.fa-file-pdf {
    color: #e53935;
  }

  .attachment-preview-item i.fa-file-word {
    color: #1976d2;
  }

  .attachment-preview-item i.fa-file-excel {
    color: #388e3c;
  }

  .attachment-preview-item i.fa-file-alt {
    color: var(--gray-5);
  }

  .attachment-file-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .attachment-file-info .filename {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.3;
  }

  .attachment-file-info .filesize {
    display: block;
    font-size: 10px;
    color: var(--gray-5);
    margin-top: 1px;
  }

  .attachment-remove-btn {
    background: none;
    border: none;
    color: var(--gray-5);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: all 0.15s ease;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .attachment-remove-btn:hover {
    color: var(--red);
    background: var(--red-light);
  }

  /* Compact dropzone when files are added */
  .attachment-dropzone.has-files,
  #replyDropzone.has-files {
    padding: 12px 16px !important;
    min-height: auto !important;
    flex-direction: row !important;
    gap: 8px;
    border-radius: var(--radius-md) !important;
  }

  .attachment-dropzone.has-files::before,
  #replyDropzone.has-files::before {
    inset: 4px;
    border-radius: 8px;
  }

  .attachment-dropzone.has-files i.fa-cloud-upload-alt,
  #replyDropzone.has-files i.fa-cloud-upload-alt {
    font-size: 1.1rem !important;
  }

  .attachment-dropzone.has-files p,
  #replyDropzone.has-files p {
    font-size: 12px !important;
  }

  .attachment-dropzone.has-files .attachment-hint,
  #replyDropzone.has-files .attachment-hint {
    display: none !important;
  }

  /* Comment reply form layout */
  .comment-reply-form {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--gray-3);
  }

  .comment-reply-form .form-textarea {
    margin-bottom: var(--spacing-sm);
  }

  .comment-reply-form .btn {
    margin-top: var(--spacing-sm);
  }

  /* ============================================
   Task Form Improvements
   ============================================ */

  /* Quick Duration Preset Buttons */
  #taskForm .quick-duration-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  #taskForm .preset-btn {
    padding: 8px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--bg-surface);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink-muted);
    transition: all 0.15s ease;
  }

  #taskForm .preset-btn:hover {
    background: var(--bg-page);
    border-color: var(--border-strong);
    transform: translateY(-1px);
  }

  #taskForm .preset-btn.active {
    background: var(--accent-solid) !important;
    color: white !important;
    border-color: var(--accent-solid) !important;
  }

  /* Work Time Card - highlighted for prominence */
  #taskForm .work-time-card {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%) !important;
    border: 2px solid var(--accent-solid) !important;
    border-radius: var(--radius-md) !important;
    padding: 20px !important;
    margin: 16px 0 !important;
  }

  #taskForm .work-time-card .form-label {
    color: var(--accent-solid) !important;
    font-weight: 600;
  }

  #taskForm .work-time-card .form-label i {
    color: var(--accent-solid);
  }

  #taskForm .work-time-card .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }

  #taskForm .work-time-card .form-row:last-child {
    grid-template-columns: 1fr;
    margin-top: 12px;
  }

  /* Collapsible Sections */
  #taskForm .collapsible-section {
    margin: 20px 0;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  #taskForm .collapsible-section[data-collapsed='true'] .collapsible-content {
    display: none;
  }

  #taskForm .collapsible-section[data-collapsed='false'] .collapsible-icon {
    transform: rotate(90deg);
  }

  #taskForm .collapsible-header {
    width: 100%;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: none;
    padding: 14px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink-muted);
    transition: background 0.15s ease;
  }

  #taskForm .collapsible-header:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  }

  #taskForm .collapsible-icon {
    font-size: 0.7rem;
    color: var(--ink-faint);
    transition: transform 0.2s ease;
  }

  #taskForm .collapsible-content {
    padding: 20px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-soft);
  }

  /* AI Suggestion Badge */
  .ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--purple, #7c3aed);
    background: var(--purple-light, #f3e8ff);
    padding: 2px 8px;
    border-radius: var(--radius-md);
    margin-left: var(--spacing-xs);
    font-weight: 500;
  }

  .ai-badge i {
    font-size: 0.65rem;
  }

  /* AI Loading indicator */
  .ai-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--gray-6);
    margin-left: var(--spacing-xs);
  }

  .ai-loading .spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--gray-3);
    border-top-color: var(--purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Input with Button Layout */
  #taskForm .input-with-button {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    align-items: stretch;
  }

  #taskForm .input-with-button .form-input {
    flex: 1;
    min-width: 0;
  }

  /* AI Suggest Button */
  .btn-ai {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white !important;
    border: none !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 70px;
    height: auto;
  }

  .btn-ai:hover:not(:disabled) {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  }

  .btn-ai:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
  }

  .btn-ai.loading .fa-magic,
  .btn-ai.loading .btn-text {
    display: none;
  }

  .btn-ai .ai-loading {
    margin-left: 0;
  }

  .btn-ai .ai-loading .spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
  }

  /* Improved Task Modal Styling */
  .modal.task-modal {
    width: 700px !important;
    max-width: 95vw;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  }

  .task-modal .modal-header {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    padding: 18px 24px !important;
  }

  .task-modal .modal-header h2 {
    font-size: 1.2rem !important;
    font-weight: 600;
    color: var(--ink-primary) !important;
    margin: 0;
  }

  .task-modal .modal-body {
    padding: 24px !important;
    max-height: 65vh;
    overflow-y: auto;
    background: var(--bg-surface);
  }

  .task-modal .modal-footer {
    background: var(--bg-page) !important;
    border-top: 1px solid var(--border-soft) !important;
    padding: 16px 24px !important;
  }

  /* Task Form - General Improvements */
  #taskForm .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }

  #taskForm .form-row:first-child {
    grid-template-columns: 1fr;
  }

  #taskForm .form-group {
    display: flex;
    flex-direction: column;
  }

  #taskForm .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  #taskForm .form-input,
  #taskForm .form-select,
  #taskForm .form-textarea {
    font-size: 0.9rem;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    color: var(--ink-primary);
    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  #taskForm .form-input:focus,
  #taskForm .form-select:focus,
  #taskForm .form-textarea:focus {
    border-color: var(--accent-solid);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
  }

  #taskForm .form-input::placeholder {
    color: var(--ink-faint);
  }

  /* Section Dividers in Task Form */
  #taskForm .form-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-soft);
  }

  #taskForm .form-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  #taskForm .form-section .section-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-primary);
    margin: 0;
  }

  /* Mobile Responsiveness for Task Form */
  @media (max-width: 768px) {
    #taskForm .form-row {
      grid-template-columns: 1fr !important;
      gap: 12px;
    }

    #taskForm .quick-duration-presets {
      gap: 6px;
    }

    #taskForm .preset-btn {
      flex: 1 1 calc(33% - 6px);
      min-height: 44px;
      font-size: 0.9rem;
      justify-content: center;
      display: flex;
      align-items: center;
    }

    #taskForm .work-time-card {
      padding: 16px !important;
    }

    #taskForm .work-time-card .form-row {
      grid-template-columns: 1fr !important;
    }

    #taskForm .collapsible-header {
      min-height: 48px;
    }

    #taskForm .work-duration-inputs input[type='number'] {
      font-size: 16px;
      /* Prevent zoom on iOS */
    }

    .modal.task-modal {
      max-width: 95vw !important;
      margin: 8px !important;
    }

    .task-modal .modal-body {
      padding: 16px !important;
      max-height: 60vh;
    }

    #taskForm .input-with-button {
      flex-direction: column !important;
    }

    #taskForm .btn-ai {
      width: 100%;
      justify-content: center;
      min-height: 44px;
    }

    #taskForm .btn-ai .btn-text {
      display: inline;
    }

    #taskForm .work-time-card {
      padding: 16px !important;
    }

    #taskForm .work-time-card .form-row {
      display: block !important;
    }

    #taskForm .work-time-card .form-group {
      margin-bottom: 12px;
    }
  }

  /* ==========================================================================
   BATTLEPLAN (BATTLE PLAN) MODAL
   ========================================================================== */

  #battleplanModal .battleplan-modal {
    width: 1100px;
    max-width: 95vw;
  }

  /* Legend/Info Panel */
  #battleplanModal .battleplan-legend {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #bae6fd !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
  }

  #battleplanModal .legend-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px !important;
    background: rgba(59, 130, 246, 0.1) !important;
    cursor: pointer !important;
    user-select: none !important;
  }

  #battleplanModal .legend-header > i:first-child {
    color: var(--accent-solid) !important;
  }

  #battleplanModal .legend-header > span {
    flex: 1 !important;
    font-weight: 600 !important;
    color: var(--accent-solid) !important;
  }

  #battleplanModal .legend-toggle {
    background: none !important;
    border: none !important;
    color: var(--accent-solid) !important;
    cursor: pointer !important;
    padding: 4px !important;
    transition: transform 0.2s ease !important;
  }

  #battleplanModal .legend-toggle.collapsed i {
    transform: rotate(-90deg) !important;
  }

  #battleplanModal .legend-content {
    padding: 12px !important;
  }

  #battleplanModal .legend-content.collapsed {
    display: none !important;
  }

  #battleplanModal .legend-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  #battleplanModal .legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    background: white !important;
    border-radius: 6px !important;
  }

  #battleplanModal .legend-item code {
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace !important;
    font-size: 0.8rem !important;
    background: #1e293b !important;
    color: #22d3ee !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
  }

  #battleplanModal .legend-item > span {
    font-size: 0.85rem !important;
    color: var(--ink-primary) !important;
  }

  #battleplanModal .legend-example {
    background: white !important;
    border-radius: 8px !important;
    padding: 12px !important;
  }

  #battleplanModal .legend-example strong {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--ink-primary) !important;
  }

  #battleplanModal .legend-example pre {
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace !important;
    font-size: 0.75rem !important;
    background: #1e293b !important;
    color: #e2e8f0 !important;
    padding: 10px !important;
    border-radius: 6px !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    margin: 0 !important;
    line-height: 1.5 !important;
  }

  /* Main Textarea Area */
  #battleplanModal .battleplan-input-area {
    position: relative !important;
    margin-bottom: 16px !important;
  }

  #battleplanModal .battleplan-textarea {
    width: 100% !important;
    min-height: 280px !important;
    padding: 12px !important;
    padding-left: 50px !important;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    border: 2px solid var(--border-soft) !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-page) !important;
    resize: vertical !important;
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
  }

  #battleplanModal .battleplan-textarea:focus {
    border-color: var(--accent-solid) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
  }

  #battleplanModal .battleplan-textarea::placeholder {
    color: var(--ink-faint) !important;
  }

  #battleplanModal .textarea-line-numbers {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 38px !important;
    padding: 12px 4px !important;
    text-align: right !important;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: var(--ink-faint) !important;
    background: var(--bg-sunken) !important;
    border-radius: 10px 0 0 10px !important;
    border-right: 1px solid var(--border-soft) !important;
    pointer-events: none !important;
    user-select: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Validation Panel */
  #battleplanModal .battleplan-validation {
    margin-bottom: 16px;
  }

  #battleplanModal .validation-summary {
    display: flex;
    gap: 24px;
    padding: 12px;
    background: var(--bg-page);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
  }

  #battleplanModal .validation-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
  }

  #battleplanModal .validation-count.valid {
    color: var(--ok);
  }

  #battleplanModal .validation-count.valid i {
    color: var(--ok);
  }

  #battleplanModal .validation-count.errors {
    color: var(--bad);
  }

  #battleplanModal .validation-count.errors i {
    color: var(--bad);
  }

  #battleplanModal .validation-errors {
    max-height: 150px;
    overflow-y: auto;
  }

  #battleplanModal .validation-error-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    background: rgba(239, 68, 68, 0.05);
    border-left: 3px solid var(--bad);
    border-radius: 0 6px 6px 0;
    margin-bottom: 4px;
    font-size: 0.875rem;
  }

  #battleplanModal .validation-error-item .line-num {
    font-weight: 600;
    color: var(--bad);
    min-width: 60px;
  }

  #battleplanModal .validation-error-item .error-msg {
    color: var(--ink-primary);
  }

  #battleplanModal .preview-header h4 {
    margin: 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-primary);
  }

  #battleplanModal .preview-task-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  #battleplanModal .preview-subtask i {
    color: var(--accent-solid);
    margin-right: 6px;
  }

  /* Mobile Responsiveness */
  @media (max-width: 768px) {
    #battleplanModal .battleplan-modal {
      max-width: 98vw;
      margin: 8px;
    }

    #battleplanModal .legend-grid {
      grid-template-columns: 1fr;
    }

    #battleplanModal .battleplan-textarea {
      min-height: 200px;
      padding-left: 40px;
    }

    #battleplanModal .textarea-line-numbers {
      width: 32px;
      font-size: 0.8rem;
    }
  }

  /* ==========================================================================
   BATTLEPLAN AUTOCOMPLETE DROPDOWN
   ========================================================================== */

  .battleplan-autocomplete-dropdown {
    position: absolute !important;
    top: 0 !important;
    left: 50px !important;
    min-width: 300px;
    max-width: 450px;
    max-height: 280px;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-md) !important;
    box-shadow:
      0 10px 40px rgba(0, 0, 0, 0.2),
      0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 9999 !important;
    display: none;
    overflow: hidden;
    animation: battleplan-dropdown-appear 0.15s ease-out;
  }

  .battleplan-autocomplete-dropdown.show {
    display: block !important;
  }

  @keyframes battleplan-dropdown-appear {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .battleplan-autocomplete-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--border-soft);
    font-size: 11px;
  }

  .autocomplete-type-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .autocomplete-type-label::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
  }

  .autocomplete-hint {
    color: var(--ink-faint);
    font-size: 10px;
  }

  .battleplan-autocomplete-items {
    max-height: 220px;
    overflow-y: auto;
  }

  .battleplan-autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-soft);
    transition: all 0.1s ease;
  }

  .battleplan-autocomplete-item:last-child {
    border-bottom: none;
  }

  .battleplan-autocomplete-item:hover {
    background: var(--bg-page);
  }

  .battleplan-autocomplete-item.selected {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-left: 3px solid var(--accent-solid);
    padding-left: 11px;
  }

  .battleplan-autocomplete-item-primary {
    font-weight: 500;
    color: var(--ink-primary);
    font-size: 14px;
  }

  .battleplan-autocomplete-item-primary .match {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e; /* fixed dark amber — readable on the fixed yellow highlight in both themes */
    border-radius: 3px;
    padding: 1px 4px;
    font-weight: 600;
  }

  .battleplan-autocomplete-item-secondary {
    font-size: 12px;
    color: var(--ink-faint);
    margin-left: 12px;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .battleplan-autocomplete-empty {
    padding: 20px;
    text-align: center;
    color: var(--ink-faint);
    font-size: 13px;
  }

  .battleplan-autocomplete-empty i {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.5;
  }

  /* Type-specific colors */
  .battleplan-autocomplete-dropdown[data-type='category'] .autocomplete-type-label {
    color: var(--purple);
  }

  .battleplan-autocomplete-dropdown[data-type='category'] .battleplan-autocomplete-item.selected {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-left-color: var(--purple);
  }

  .battleplan-autocomplete-dropdown[data-type='employee'] .autocomplete-type-label {
    color: var(--accent-solid);
  }

  .battleplan-autocomplete-dropdown[data-type='employee'] .battleplan-autocomplete-item.selected {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-left-color: var(--accent-solid);
  }

  .battleplan-autocomplete-dropdown[data-type='project'] .autocomplete-type-label {
    color: var(--ok);
  }

  .battleplan-autocomplete-dropdown[data-type='project'] .battleplan-autocomplete-item.selected {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: var(--ok);
  }

  .battleplan-autocomplete-dropdown[data-type='deadline'] .autocomplete-type-label {
    color: var(--warn);
  }

  .battleplan-autocomplete-dropdown[data-type='deadline'] .battleplan-autocomplete-item.selected {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-left-color: var(--warn);
  }
  /* =================================================
   INVENTORY MANAGEMENT STYLES
   ================================================= */

  /* Mobile Allowance Widget (inventory header) */
  .mobile-allowance-widget {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    border-radius: var(--radius-md, 8px);
    background: rgba(255, 255, 255, 0.92);
    color: var(--gray-7, #1a1a1a);
    min-width: 280px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));
  }

  .mobile-allowance-widget .widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 13px;
    gap: 8px;
  }

  .mobile-allowance-widget .widget-header i {
    margin-right: 4px;
    color: var(--primary-color);
  }

  .mobile-allowance-widget .progress-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--gray-2, #e0e0e0);
    overflow: hidden;
  }

  .mobile-allowance-widget .progress-fill {
    height: 100%;
    transition: width 200ms ease;
  }

  .mobile-allowance-widget .progress-fill.green {
    background: var(--success-color, #2e7d32);
  }

  .mobile-allowance-widget .progress-fill.amber {
    background: var(--warning-color, #ed6c02);
  }

  .mobile-allowance-widget .progress-fill.red {
    background: var(--danger-color, #c62828);
  }

  .mobile-allowance-widget .meta {
    font-size: 12px;
    color: var(--gray-6, #555);
  }

  /* Override the dark-header .view-actions .btn-outline cascade so the
   widget's "Kezelés" button is readable on the widget's light background. */
  .mobile-allowance-widget .btn-outline {
    background: transparent;
    border-color: var(--border-color, #d0d0d0);
    color: var(--blue, #1976d2);
    backdrop-filter: none;
  }
  .mobile-allowance-widget .btn-outline:hover {
    background: var(--gray-1, #f5f5f5);
    border-color: var(--gray-4, #bdbdbd);
  }

  .device-allowance-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 11px;
    background: var(--info-tint);
    color: var(--purple);
    margin-left: 4px;
    vertical-align: middle;
    cursor: help;
  }

  /* Inventory Tabs */
  .inventory-tabs-container {
    margin-bottom: var(--space-4);
  }

  .inventory-tabs {
    display: flex;
    gap: var(--space-2);
    background: var(--gray-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
  }

  .inventory-tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
  }

  .inventory-tab:hover {
    background: var(--gray-3);
  }

  .inventory-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-1);
  }

  .inventory-tab i {
    font-size: 14px;
  }

  .inventory-tab.anomaly-tab {
    position: relative;
  }

  .anomaly-count {
    background: var(--red);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-round);
    margin-left: var(--space-1);
  }

  /* Inventory Filters */
  .inventory-filters {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
  }

  .inventory-filters .search-group {
    flex: 1;
    min-width: 200px;
  }

  .inventory-filters .search-group .form-input {
    width: 100%;
  }

  /* Inventory Table */
  .inventory-container {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
  }

  .inventory-table-wrapper {
    overflow-x: auto;
  }

  .inventory-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }

  .inventory-table th {
    background: var(--gray-2);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
    position: relative;
  }

  .inventory-table th.sortable {
    cursor: pointer;
    user-select: none;
  }

  .inventory-table th.sortable:hover {
    background: var(--gray-3);
  }

  .inventory-table th .sort-icon {
    margin-left: var(--space-1);
    font-size: 10px;
    opacity: 0.5;
  }

  .inventory-table th.sortable:hover .sort-icon {
    opacity: 1;
  }

  .inventory-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
  }

  .inventory-table tbody tr {
    transition: background var(--duration-fast);
  }

  .inventory-table tbody tr:hover {
    background: var(--gray-1);
  }

  /* Inventory Row Styles */
  .inventory-row.has-anomaly {
    border-left: 4px solid var(--red);
    background: linear-gradient(90deg, rgba(255, 59, 48, 0.05) 0%, transparent 20%);
  }

  .inventory-row.has-anomaly:hover {
    background: linear-gradient(90deg, rgba(255, 59, 48, 0.08) 0%, var(--gray-1) 20%);
  }

  /* Mass Edit */
  .mass-select-col {
    width: 32px;
    text-align: center;
    padding: 4px !important;
  }

  .mass-select-col input[type='checkbox'] {
    cursor: pointer;
    width: 16px;
    height: 16px;
  }

  .inventory-row.mass-selected {
    background: rgba(59, 130, 246, 0.08);
  }

  .mass-edit-bar {
    position: fixed;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    transition: bottom 0.25s ease;
    flex-wrap: wrap;
    max-width: 95vw;
  }

  .mass-edit-bar.show {
    bottom: 24px;
  }

  .mass-edit-count {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--primary-color);
    white-space: nowrap;
  }

  .mass-edit-group {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
  }

  .mass-edit-group label {
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
  }

  .mass-edit-input {
    padding: 3px 6px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    width: 160px;
  }

  .mass-edit-select {
    padding: 3px 6px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  .mass-edit-delete {
    margin-left: auto;
  }

  /* Mass Delete Confirmation */
  .mass-delete-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mass-delete-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-lg, 12px);
    padding: 24px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  }

  .mass-delete-modal h3 {
    margin: 0 0 12px;
    color: var(--red, #ef4444);
  }

  .mass-delete-warning {
    background: rgba(239, 68, 68, 0.1);
    color: var(--red, #ef4444);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
  }

  .mass-delete-device-list {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    font-size: 0.8rem;
  }

  .mass-delete-device-item {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
  }

  .mass-delete-device-item:last-child {
    border-bottom: none;
  }

  .mass-delete-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    margin-bottom: 16px;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 700;
    box-sizing: border-box;
  }

  .mass-delete-input:focus {
    outline: none;
    border-color: var(--red, #ef4444);
  }

  .mass-delete-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  /* Anomaly Table */
  .anomaly-controls {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    background: var(--gray-1);
  }

  .anomaly-toggle-dismissed {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    user-select: none;
  }

  .anomaly-toggle-dismissed input[type='checkbox'] {
    accent-color: var(--blue);
  }

  .anomaly-table-row {
    cursor: pointer;
    transition: background var(--duration-fast);
  }

  .anomaly-table-row:hover {
    background: var(--gray-1);
  }

  .anomaly-table-row.expanded {
    background: var(--blue-light);
  }

  .anomaly-table-row.expanded:hover {
    background: var(--blue-light);
  }

  .anomaly-table-row.dismissed {
    opacity: 0.5;
  }

  .anomaly-table-row.dismissed:hover {
    opacity: 0.7;
  }

  .expand-icon {
    transition: transform var(--duration-fast);
    font-size: 12px;
    color: var(--text-secondary);
  }

  .expand-icon.rotated {
    transform: rotate(90deg);
  }

  .anomaly-severity {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-round);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }

  .anomaly-severity.error {
    background: var(--red-light);
    color: var(--red);
  }

  .anomaly-severity.warning {
    background: var(--orange-light);
    color: var(--orange);
  }

  .anomaly-severity.info {
    background: var(--blue-light);
    color: var(--blue);
  }

  .anomaly-affected-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--radius-round);
    background: var(--gray-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .anomaly-dismiss-btn {
    background: var(--green-light, #e8f5e9);
    color: var(--green, #4caf50);
    border: 1px solid var(--green, #4caf50);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
  }

  .anomaly-dismiss-btn:hover {
    background: var(--green, #4caf50);
    color: white;
  }

  .anomaly-restore-btn {
    font-size: 12px;
    padding: 4px 10px;
  }

  .anomaly-details-row {
    background: var(--gray-1);
  }

  .anomaly-details-row td {
    padding: 0 !important;
  }

  .anomaly-details-content {
    padding: var(--space-3) var(--space-4) var(--space-3) 40px;
  }

  .anomaly-affected-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .anomaly-affected-table th {
    background: var(--gray-2);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .anomaly-affected-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-light);
  }

  .anomaly-affected-table tbody tr:hover {
    background: var(--bg-primary);
  }

  .inventory-id {
    font-weight: 600;
    color: var(--blue);
  }

  .pending-sync {
    color: var(--orange);
    margin-left: var(--space-1);
  }

  /* Device Type Badge */
  .device-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: 14px;
  }

  .device-type-badge.computer {
    background: rgba(33, 71, 111, 0.1);
    color: var(--blue);
  }

  .device-type-badge.phone {
    background: rgba(52, 199, 89, 0.1);
    color: var(--green);
  }

  .device-type-badge.printer {
    background: rgba(175, 82, 222, 0.1);
    color: var(--purple);
  }

  .device-type-badge.other {
    background: var(--gray-2);
    color: var(--gray-6);
  }

  .device-type-badge.unknown {
    background: var(--gray-2);
    color: var(--gray-5);
  }

  /* Availability Badge */
  .availability-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
  }

  .availability-badge.available {
    background: rgba(52, 199, 89, 0.1);
    color: var(--green);
  }

  .availability-badge.unavailable {
    background: rgba(33, 71, 111, 0.1);
    color: var(--blue);
  }

  .availability-badge.decommissioned {
    background: var(--gray-2);
    color: var(--gray-6);
  }

  .availability-badge.needs-repair {
    background: rgba(255, 149, 0, 0.1);
    color: var(--orange);
  }

  .availability-badge.destroyed,
  .availability-badge.lost,
  .availability-badge.stolen {
    background: rgba(255, 59, 48, 0.1);
    color: var(--red);
  }

  /* Empty State */
  .inventory-table .empty-state {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-tertiary);
  }

  .inventory-table .empty-state i {
    font-size: 48px;
    margin-bottom: var(--space-4);
    opacity: 0.3;
  }

  .inventory-table .empty-state p {
    font-size: 14px;
  }

  /* Loading State */
  .loading-row td {
    text-align: center;
    padding: var(--space-8);
  }

  .loading-state {
    color: var(--text-tertiary);
  }

  .loading-state i {
    margin-right: var(--space-2);
  }

  /* Pagination */
  .inventory-pagination {
    padding: var(--space-4);
    border-top: 1px solid var(--border-light);
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  }

  .pagination-btn {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--duration-fast);
  }

  .pagination-btn:hover:not(:disabled) {
    background: var(--gray-2);
  }

  .pagination-btn.active {
    background: var(--blue);
    color: white;
    border-color: var(--blue);
  }

  .pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .pagination-ellipsis {
    padding: 0 var(--space-2);
    color: var(--text-tertiary);
  }

  .pagination-info {
    margin-left: var(--space-4);
    color: var(--text-tertiary);
    font-size: 14px;
  }

  /* Device Modal Styles */
  .device-form-tabs {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--space-3);
  }

  .device-tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast);
  }

  .device-tab:hover {
    background: var(--gray-2);
  }

  .device-tab.active {
    background: var(--blue);
    color: white;
  }

  .device-tab-content {
    display: none;
  }

  .device-tab-content.active {
    display: block;
  }

  /* Tech Fields */
  .tech-fields {
    display: none;
    margin-top: var(--space-4);
  }

  .tech-fields h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-light);
  }

  /* Assignment Actions */
  .assignment-actions {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
  }

  /* Event Log Styles */
  .event-log-container {
    max-height: 400px;
    overflow-y: auto;
  }

  .event-log-entry {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-light);
  }

  .event-log-entry:last-child {
    border-bottom: none;
  }

  .event-log-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
  }

  .event-log-icon.info {
    background: rgba(33, 71, 111, 0.1);
    color: var(--blue);
  }

  .event-log-icon.warning {
    background: rgba(255, 149, 0, 0.1);
    color: var(--orange);
  }

  .event-log-icon.critical {
    background: rgba(255, 59, 48, 0.1);
    color: var(--red);
  }

  .event-log-content {
    flex: 1;
    min-width: 0;
  }

  .event-log-timestamp {
    font-size: 12px;
    color: var(--text-tertiary);
  }

  .event-log-description {
    font-size: 14px;
    color: var(--text-primary);
    margin-top: var(--space-1);
  }

  .event-log-user {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: var(--space-1);
  }

  .event-log-user i {
    margin-right: var(--space-1);
  }

  /* Anomaly Badge in Nav */
  .nav-badge.anomaly-badge {
    background: var(--red);
    color: white;
  }

  /* ================================
   AI Audit Styles
   ================================ */

  /* AI Audit Button */
  .btn-ai-audit {
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    color: white;
    border: none;
  }

  .btn-ai-audit:hover:not(:disabled) {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    transform: translateY(-1px);
  }

  .btn-ai-audit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  /* AI Audit Modal */
  #aiAuditModal .modal-content {
    max-width: 900px;
    max-height: 90vh;
  }

  #aiAuditModal .modal-body {
    padding: var(--space-4);
    overflow-y: auto;
    max-height: calc(90vh - 140px);
  }

  /* Summary Cards Grid */
  .audit-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .audit-summary-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    text-align: center;
    border: 1px solid var(--border-color);
  }

  .audit-summary-card .card-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .audit-summary-card .card-value {
    font-size: 28px;
    font-weight: 700;
  }

  .audit-summary-card.total .card-value {
    color: var(--text-primary);
  }
  .audit-summary-card.critical .card-value {
    color: var(--bad);
  }
  .audit-summary-card.high .card-value {
    color: var(--orange);
  }
  .audit-summary-card.medium .card-value {
    color: var(--warn);
  }
  .audit-summary-card.low .card-value {
    color: var(--green);
  }
  .audit-summary-card.ok .card-value {
    color: var(--ok);
  }

  /* Budget Estimate Section */
  .audit-budget-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--border-color);
  }

  .audit-budget-section h4 {
    margin: 0 0 var(--space-3) 0;
    color: var(--text-primary);
    font-size: 14px;
  }

  .budget-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
  }

  .budget-item:last-child {
    border-bottom: none;
  }

  .budget-label {
    color: var(--text-secondary);
  }

  .budget-value {
    font-weight: 600;
  }

  .budget-value.critical {
    color: var(--bad);
  }
  .budget-value.high {
    color: var(--orange);
  }
  .budget-value.medium {
    color: var(--warn);
  }

  /* Recommendations List */
  .audit-recommendations-section h4 {
    margin: 0 0 var(--space-3) 0;
    color: var(--text-primary);
    font-size: 14px;
  }

  .audit-recommendations-list {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .audit-recommendation-card {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    border-left: 4px solid var(--border-color);
    cursor: pointer;
    transition:
      transform 0.15s,
      box-shadow 0.15s;
  }

  .audit-recommendation-card:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
  }

  .audit-recommendation-card.priority-critical {
    border-left-color: var(--bad);
    background: var(--bad-tint);
  }
  .audit-recommendation-card.priority-high {
    border-left-color: var(--orange);
    background: var(--warn-tint);
  }
  .audit-recommendation-card.priority-medium {
    border-left-color: var(--warn);
    background: var(--warn-tint);
  }
  .audit-recommendation-card.priority-low {
    border-left-color: var(--green);
    background: var(--ok-tint);
  }
  .audit-recommendation-card.priority-ok {
    border-left-color: var(--ok);
  }

  .recommendation-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .recommendation-id {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
  }

  .recommendation-priority {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .recommendation-priority.priority-critical {
    background: var(--bad);
    color: white;
  }
  .recommendation-priority.priority-high {
    background: var(--orange);
    color: white;
  }
  .recommendation-priority.priority-medium {
    background: var(--warn);
    color: white;
  }
  .recommendation-priority.priority-low {
    background: var(--green);
    color: white;
  }
  .recommendation-priority.priority-ok {
    background: var(--ok);
    color: white;
  }

  .recommendation-score {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .recommendation-reasons {
    margin-bottom: var(--space-2);
  }

  .recommendation-reasons ul {
    margin: 0;
    padding-left: var(--space-4);
    color: var(--text-secondary);
    font-size: 13px;
  }

  .recommendation-reasons li {
    margin-bottom: var(--space-1);
  }

  .recommendation-action {
    font-size: 13px;
    color: var(--text-primary);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-color);
  }

  .recommendation-action i {
    color: var(--warn);
    margin-right: var(--space-1);
  }

  /* AI Recommendation Badge in Table */
  .ai-recommendation-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    margin-left: var(--space-1);
    white-space: nowrap;
  }

  .ai-recommendation-badge i {
    font-size: 9px;
  }

  .ai-recommendation-badge.priority-critical {
    background: var(--bad-tint);
    color: var(--bad);
    border: 1px solid var(--bad-tint);
  }

  .ai-recommendation-badge.priority-high {
    background: var(--warn-tint);
    color: var(--orange);
    border: 1px solid var(--warn-tint);
  }

  .ai-recommendation-badge.priority-medium {
    background: var(--warn-tint);
    color: var(--warn);
    border: 1px solid var(--warn-tint);
  }

  .ai-recommendation-badge.priority-low {
    background: var(--ok-tint);
    color: var(--green);
    border: 1px solid var(--ok-tint);
  }

  /* AI Audit Modal Footer */
  .audit-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
    margin-top: var(--space-4);
  }

  /* Dark mode adjustments */
  [data-theme='dark'] .audit-recommendation-card.priority-critical {
    background: rgba(220, 38, 38, 0.1);
  }
  [data-theme='dark'] .audit-recommendation-card.priority-high {
    background: rgba(249, 115, 22, 0.1);
  }
  [data-theme='dark'] .audit-recommendation-card.priority-medium {
    background: rgba(202, 138, 4, 0.1);
  }
  [data-theme='dark'] .audit-recommendation-card.priority-low {
    background: rgba(34, 197, 94, 0.1);
  }

  [data-theme='dark'] .ai-recommendation-badge.priority-critical {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
  }
  [data-theme='dark'] .ai-recommendation-badge.priority-high {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.3);
  }
  [data-theme='dark'] .ai-recommendation-badge.priority-medium {
    background: rgba(202, 138, 4, 0.15);
    border-color: rgba(202, 138, 4, 0.3);
  }
  [data-theme='dark'] .ai-recommendation-badge.priority-low {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
  }

  /* Responsive AI Audit */
  @media (max-width: 768px) {
    .audit-summary-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .audit-summary-card .card-value {
      font-size: 22px;
    }

    #aiAuditModal .modal-content {
      max-width: 100%;
      margin: var(--space-2);
    }

    .recommendation-header {
      flex-wrap: wrap;
    }

    .recommendation-score {
      margin-left: 0;
      width: 100%;
      margin-top: var(--space-1);
    }
  }

  /* ================================
   AI Audit History Styles
   ================================ */

  /* History Modal */
  #aiAuditHistoryModal .modal-content {
    max-width: 600px;
  }

  #aiAuditHistoryModal .modal-body {
    max-height: 500px;
    overflow-y: auto;
  }

  /* History List */
  .audit-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .audit-history-item {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    transition:
      border-color 0.15s,
      box-shadow 0.15s;
  }

  .audit-history-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
  }

  .audit-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
  }

  .audit-history-date {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
  }

  .audit-history-date i {
    color: var(--primary);
    margin-right: var(--space-1);
  }

  .audit-history-user {
    font-size: 12px;
    color: var(--text-secondary);
  }

  .audit-history-user i {
    margin-right: var(--space-1);
  }

  .audit-history-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .audit-stat {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
  }

  .audit-stat.total {
    background: var(--bg-tertiary);
    color: var(--text-primary);
  }

  .audit-stat.critical {
    background: var(--bad-tint);
    color: var(--bad);
  }

  .audit-stat.high {
    background: var(--warn-tint);
    color: var(--orange);
  }

  .audit-stat.medium {
    background: var(--warn-tint);
    color: var(--warn);
  }

  .audit-history-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
  }

  .btn-danger-outline {
    border: 1px solid var(--bad);
    color: var(--bad);
    background: transparent;
  }

  .btn-danger-outline:hover {
    background: var(--bad-tint);
  }

  .btn-small {
    padding: var(--space-1) var(--space-2);
    font-size: 12px;
  }

  /* Dark mode */
  [data-theme='dark'] .audit-stat.critical {
    background: rgba(220, 38, 38, 0.15);
  }

  [data-theme='dark'] .audit-stat.high {
    background: rgba(249, 115, 22, 0.15);
  }

  [data-theme='dark'] .audit-stat.medium {
    background: rgba(202, 138, 4, 0.15);
  }

  [data-theme='dark'] .btn-danger-outline:hover {
    background: rgba(220, 38, 38, 0.1);
  }

  /* Responsive */
  @media (max-width: 768px) {
    .inventory-tabs {
      gap: var(--space-1);
      padding: var(--space-1);
    }

    .inventory-tab {
      padding: var(--space-2);
      font-size: 12px;
    }

    .inventory-tab span:not(.anomaly-count) {
      display: none;
    }

    .inventory-filters {
      flex-direction: column;
      align-items: stretch;
    }

    .inventory-filters .filter-group {
      width: 100%;
    }

    .device-form-tabs {
      flex-wrap: wrap;
    }

    .device-tab span {
      display: none;
    }
  }

  /* Settings List Styles */
  .settings-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
  }

  .settings-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
  }

  .settings-list-item:last-child {
    border-bottom: none;
  }

  .settings-list-item:hover {
    background: var(--background-secondary);
  }

  .settings-list-item span:first-child {
    flex: 1;
  }

  /* Timer Display */
  .timer-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-xl);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 0.75rem;
    vertical-align: middle;
    animation: timerPulse 2s infinite;
  }

  .timer-display i {
    font-size: 0.8rem;
  }

  @keyframes timerPulse {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
      box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
  }

  /* ==========================================================================
   LIGHTBOX STYLES
   ========================================================================== */

  .lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .lightbox-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      background 0.2s ease,
      transform 0.2s ease;
    z-index: 10001;
  }

  .lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
  }

  .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      background 0.2s ease,
      transform 0.2s ease;
    z-index: 10001;
  }

  .lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.1);
  }

  .lightbox-prev {
    left: 20px;
  }

  .lightbox-next {
    right: 20px;
  }

  .lightbox-content {
    max-width: 90%;
    max-height: 85%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s ease;
  }

  .lightbox-loader {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
  }

  .lightbox-footer {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: white;
    text-align: center;
    z-index: 10001;
  }

  .lightbox-filename {
    font-size: 14px;
    font-weight: 500;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lightbox-counter {
    font-size: 12px;
    opacity: 0.7;
  }

  /* ==========================================================================
   ATTACHMENT GRID STYLES
   ========================================================================== */

  .attachments-card {
    margin-top: 1rem;
  }

  .attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 12px;
  }

  .attachment-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .attachment-item:hover {
    border-color: var(--blue);
  }

  .attachment-thumbnail {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    background: var(--background-tertiary, #f5f5f5);
  }

  .attachment-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .attachment-thumbnail .file-icon {
    font-size: 2rem;
    color: var(--text-tertiary, #8e8e93);
  }

  .attachment-info {
    padding: 8px;
    border-top: 1px solid var(--border-color);
  }

  .attachment-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-bottom: 4px;
  }

  .attachment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .attachment-size {
    font-size: 10px;
    color: var(--text-tertiary, #8e8e93);
  }

  .attachment-download {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-color, #21476f);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.2s ease;
  }

  .attachment-download:hover {
    background: var(--primary-hover, #1a3a5c);
  }

  /* Responsive lightbox */
  @media (max-width: 768px) {
    .lightbox-nav {
      width: 40px;
      height: 40px;
      font-size: 16px;
    }

    .lightbox-prev {
      left: 10px;
    }

    .lightbox-next {
      right: 10px;
    }

    .lightbox-close {
      top: 10px;
      right: 10px;
      width: 36px;
      height: 36px;
      font-size: 16px;
    }

    .lightbox-footer {
      bottom: 10px;
    }

    .attachments-grid {
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 8px;
    }
  }

  /* ==========================================================================
   DEVICE WIZARD STYLES
   ========================================================================== */

  /* Wizard Modal */
  .wizard-modal {
    max-width: 800px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }

  .wizard-header {
    border-bottom: 1px solid var(--gray-3);
  }

  .wizard-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
  }

  /* Wizard Progress Bar */
  .wizard-progress {
    padding: 16px 24px;
    background: var(--gray-1);
    border-bottom: 1px solid var(--gray-3);
  }

  .wizard-progress-bar {
    height: 4px;
    background: var(--gray-3);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 16px;
  }

  .wizard-progress-fill {
    height: 100%;
    background: var(--blue);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 16.67%;
  }

  .wizard-steps-indicators {
    display: flex;
    justify-content: space-between;
  }

  .wizard-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }

  .wizard-step-indicator.active,
  .wizard-step-indicator.completed {
    opacity: 1;
  }

  .wizard-step-indicator .step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gray-4);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .wizard-step-indicator.active .step-number {
    background: var(--blue);
    color: white;
  }

  .wizard-step-indicator.completed .step-number {
    background: var(--green);
    color: white;
  }

  .wizard-step-indicator .step-label {
    font-size: 11px;
    color: var(--text-secondary);
  }

  /* Wizard Steps */
  .wizard-step {
    display: none;
  }

  .wizard-step.active {
    display: block;
  }

  .wizard-step h3 {
    margin: 0 0 24px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
  }

  /* Choice Cards (Step 1) */
  .wizard-choice-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .wizard-choice-card {
    background: white;
    border: 2px solid var(--gray-3);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .wizard-choice-card:hover {
    border-color: var(--blue);
  }

  .wizard-choice-card .choice-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--blue-light);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px;
  }

  .wizard-choice-card h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
  }

  .wizard-choice-card p {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  .wizard-choice-card .choice-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
  }

  /* OCR Status */
  .wizard-ocr-status {
    margin-top: 24px;
    padding: 16px;
    background: var(--blue-light);
    border-radius: 8px;
    text-align: center;
  }

  .ocr-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--blue);
  }

  .ocr-loading i {
    font-size: 20px;
  }

  /* Category Selector (Step 2) */
  .wizard-category-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }

  .category-option {
    cursor: pointer;
  }

  .category-option input {
    display: none;
  }

  .category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: white;
    border: 2px solid var(--gray-3);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
  }

  .category-card i {
    font-size: 24px;
    color: var(--gray-6);
  }

  .category-card span {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
  }

  .category-option input:checked + .category-card {
    border-color: var(--blue);
    background: var(--blue-light);
  }

  .category-option input:checked + .category-card i {
    color: var(--blue);
  }

  .category-option input:checked + .category-card span {
    color: var(--blue);
    font-weight: 600;
  }

  /* Form Styles */
  .wizard-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .wizard-form .form-group {
    margin-bottom: 16px;
  }

  .wizard-form .form-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
  }

  /* Info Box */
  .wizard-info-box {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--blue-light);
    border-radius: 8px;
    margin-top: 16px;
  }

  .wizard-info-box.info {
    background: var(--blue-light);
  }

  .wizard-info-box.warning {
    background: var(--warning-light);
    border-left: 4px solid var(--warning-color);
    color: var(--warn);
  }

  .wizard-info-box.warning i {
    color: var(--warning-color);
  }

  .wizard-info-box i {
    color: var(--blue);
    font-size: 18px;
    flex-shrink: 0;
  }

  .wizard-info-box ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
  }

  .wizard-info-box li {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
  }

  /* AI Note */
  .wizard-ai-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--purple-light);
    border: 1px solid var(--purple);
    border-radius: 8px;
    margin-bottom: 20px;
    color: var(--purple);
    font-size: 13px;
  }

  .wizard-ai-note i {
    font-size: 16px;
  }

  /* Spec Loading Overlay */
  .spec-loading-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    align-items: center;
    justify-content: center;
  }

  .spec-loading-overlay.active {
    display: flex;
  }

  .spec-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--blue);
  }

  .spec-loading-content i {
    font-size: 32px;
  }

  /* No Category Warning */
  .wizard-no-category {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--orange-light);
    border-radius: 8px;
    color: var(--orange);
  }

  .wizard-no-category i {
    font-size: 24px;
  }

  /* User Info (Step 5) */
  .wizard-user-info {
    background: var(--gray-1);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
  }

  .user-info-row {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-3);
  }

  .user-info-row:last-child {
    border-bottom: none;
  }

  .user-info-row .label {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 80px;
  }

  .user-info-row .value {
    color: var(--text-primary);
  }

  /* Swap Warning */
  .wizard-swap-warning {
    margin-top: 20px;
    border: 2px solid var(--orange);
    border-radius: 8px;
    overflow: hidden;
  }

  .swap-warning-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--orange);
    color: white;
    font-weight: 600;
  }

  .swap-warning-content {
    padding: 16px;
    background: var(--orange-light);
  }

  .swap-warning-content p {
    margin: 0 0 12px 0;
    font-size: 14px;
  }

  .swap-old-device {
    background: white;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-secondary);
  }

  .swap-phone-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    background: var(--blue-light);
    border-radius: 6px;
    font-size: 13px;
    color: var(--blue);
  }

  /* Review Section (Step 6) */
  .wizard-review {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .review-section {
    background: var(--gray-1);
    border-radius: 8px;
    padding: 16px;
  }

  .review-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .review-section dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
    margin: 0;
  }

  .review-section dt {
    font-size: 13px;
    color: var(--text-secondary);
  }

  .review-section dd {
    font-size: 13px;
    color: var(--text-primary);
    margin: 0;
    font-weight: 500;
  }

  /* Wizard Footer */
  .wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--gray-3);
  }

  /* Loading Overlay */
  .wizard-loading-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 100;
    align-items: center;
    justify-content: center;
  }

  .wizard-loading-overlay.active {
    display: flex;
  }

  .wizard-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--blue);
  }

  .wizard-loading-content i {
    font-size: 48px;
  }

  .wizard-loading-content .loading-message {
    font-size: 16px;
    font-weight: 500;
  }

  /* AI-suggested field styling */
  .form-input.ai-suggested {
    border-color: var(--purple);
    background: var(--purple-light);
  }

  /* Button Success variant */
  .btn-success {
    background: var(--green);
    color: white;
  }

  .btn-success:hover {
    background: #2db54e;
  }

  /* Small button variant */
  .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .wizard-choice-cards {
      grid-template-columns: 1fr;
    }

    .wizard-category-selector {
      grid-template-columns: repeat(2, 1fr);
    }

    .wizard-form .form-row {
      grid-template-columns: 1fr;
    }

    .wizard-steps-indicators {
      display: none;
    }

    .review-section dl {
      grid-template-columns: 1fr;
    }

    .review-section dt {
      margin-top: 8px;
      font-weight: 600;
    }
  }

  /* ===========================
   CC Recipients Display (Admin Modal)
   =========================== */

  .ticket-cc-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .cc-recipient-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    background: var(--bg-light, #f8f9fa);
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  .cc-recipient-item:hover {
    background: var(--bg-page);
    border-color: var(--primary-color, #007bff);
  }

  .cc-recipient-email {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color, #333);
  }

  .cc-recipient-notifs {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .cc-recipient-notifs i {
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
    padding: 0.25rem;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }

  .cc-recipient-notifs i.fa-reply {
    color: var(--primary-color, #007bff);
  }

  .cc-recipient-notifs i.fa-comments {
    color: var(--green, #28a745);
  }

  .cc-recipient-notifs i.fa-exchange-alt {
    color: var(--orange, #fd7e14);
  }

  .cc-recipient-notifs i.fa-check-circle {
    color: var(--purple, #6f42c1);
  }

  .no-cc-message {
    text-align: center;
    color: var(--text-muted, #6c757d);
    font-size: 0.875rem;
    padding: 1rem;
    background: var(--bg-light, #f8f9fa);
    border-radius: 8px;
    border: 1px dashed var(--border-color, #e9ecef);
  }

  /* CC Management Actions */
  .cc-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .cc-add-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .cc-add-form input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 6px;
    font-size: 0.875rem;
  }

  .cc-add-form input:focus {
    outline: none;
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  }

  .cc-recipient-item .btn-remove-cc {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--red, #dc3545);
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .cc-recipient-item:hover .btn-remove-cc {
    opacity: 1;
  }

  .cc-recipient-item .btn-remove-cc:hover {
    background: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
  }

  /* ==========================================================================
   COST ALERT STYLES (OpenAI API Cost Warning)
   ========================================================================== */

  .cost-alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
    border: 2px solid var(--danger-color);
    border-radius: var(--radius-md);
    animation: slideDown 0.3s ease-out;
    position: relative;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .cost-alert.alert-danger {
    border-color: var(--danger-color);
  }

  .cost-alert .alert-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--danger-color);
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
  }

  .cost-alert .alert-content {
    flex: 1;
  }

  .cost-alert .alert-content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--danger-color);
  }

  .cost-alert .alert-content p {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--text-primary);
  }

  .cost-alert .alert-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .cost-alert .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border-left: 3px solid var(--gray-4);
  }

  .cost-alert .stat-item.stat-savings {
    border-left-color: var(--success-color);
    background: rgba(52, 199, 89, 0.1);
  }

  .cost-alert .stat-item.stat-loss {
    border-left-color: var(--danger-color);
    background: rgba(255, 59, 48, 0.1);
  }

  .cost-alert .stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .cost-alert .stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
  }

  .cost-alert .stat-item.stat-savings .stat-value {
    color: var(--success-color);
  }

  .cost-alert .stat-item.stat-loss .stat-value {
    color: var(--danger-color);
  }

  .cost-alert .alert-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
  }

  .cost-alert .alert-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
  }

  /* Add metric-subtext styling if not present */
  .metric-subtext {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
  }

  /* Responsive adjustments for cost alert */
  @media (max-width: 768px) {
    .cost-alert {
      flex-direction: column;
      gap: 1rem;
    }

    .cost-alert .alert-icon {
      width: 2.5rem;
      height: 2.5rem;
      font-size: 1.25rem;
    }

    .cost-alert .alert-stats {
      gap: 0.5rem;
    }

    .cost-alert .stat-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.25rem;
    }

    .cost-alert .alert-close {
      position: static;
      align-self: flex-end;
    }
  }

  /* ============================================================================
   Impersonation (View-As) Widget
   ============================================================================ */

  .impersonation-bar {
    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 1999;
    background: var(--accent-solid);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .impersonation-label {
    font-weight: 600;
  }

  .impersonation-select {
    padding: 4px 8px;
    border: 1px solid #93c5fd;
    border-radius: 4px;
    font-size: 11px;
    max-width: 220px;
    background: white;
    color: var(--ink-primary);
  }

  @media (max-width: 768px) {
    .impersonation-bar {
      bottom: 0;
      right: 0;
      left: 0;
      border-radius: 0;
      justify-content: center;
      padding: 6px 12px;
      font-size: 11px;
    }

    .impersonation-select {
      flex: 1;
      max-width: none;
    }

    /* Add bottom padding so impersonation bar doesn't overlap content */
    .content-view {
      padding-bottom: 44px;
    }
  }

  .project-slug {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--text-muted, #6c757d);
    font-size: 0.7em;
    margin-top: 2px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.2;
  }

  /* === Spacestation theme overrides for Battleplan modal ===
     The legacy #battleplanModal rules above (and the inline <style> block
     in index.html) use !important. Per CSS @layer cascade, @layer legacy
     !important is the highest-priority bucket — so component-layer
     overrides cannot reach this modal. Spacestation overrides live HERE
     inside @layer legacy with higher specificity ([data-theme] adds a
     class-equivalent), matching !important, and later source order. */

  /* Generic .task-modal frame overrides — applies to all 3 task modals
     (battleplan, task editor, etc) that share the .task-modal class. */
  [data-theme^='spacestation'] .task-modal .modal-header {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  [data-theme^='spacestation'] .task-modal .modal-header h2 {
    color: var(--text-primary) !important;
  }

  [data-theme^='spacestation'] .task-modal .modal-body {
    background-color: var(--bg-primary) !important;
  }

  [data-theme^='spacestation'] .task-modal .modal-footer {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
    border-top: 1px solid var(--border-color) !important;
  }

  [data-theme^='spacestation'] #battleplanModal .battleplan-legend {
    background-color: var(--bg-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--border-color) !important;
  }

  [data-theme^='spacestation'] #battleplanModal .legend-header {
    background-color: transparent !important;
    background-image: none !important;
  }

  [data-theme^='spacestation'] #battleplanModal .legend-header > span {
    color: var(--text-primary) !important;
  }

  [data-theme^='spacestation'] #battleplanModal .legend-item {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
  }

  [data-theme^='spacestation'] #battleplanModal .legend-item code {
    background-color: var(--text-primary) !important;
    color: var(--text-on-color) !important;
  }

  [data-theme^='spacestation'] #battleplanModal .legend-item > span {
    color: var(--text-primary) !important;
  }

  [data-theme^='spacestation'] #battleplanModal .legend-example {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
    border: 1px solid var(--border-color) !important;
  }

  [data-theme^='spacestation'] #battleplanModal .legend-example pre {
    background-color: var(--text-primary) !important;
    background-image: none !important;
    color: var(--text-on-color) !important;
  }

  [data-theme^='spacestation'] #battleplanModal .battleplan-textarea {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
  }

  [data-theme^='spacestation'] #battleplanModal .battleplan-textarea:focus {
    border-color: var(--text-primary) !important;
    outline: none !important;
  }

  [data-theme^='spacestation'] #battleplanModal .textarea-line-numbers {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-tertiary) !important;
  }

  [data-theme^='spacestation'] #battleplanModal .validation-summary {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
  }

  [data-theme^='spacestation'] #battleplanModal .validation-count.valid {
    color: var(--success-color) !important;
  }

  [data-theme^='spacestation'] #battleplanModal .validation-count.errors {
    color: var(--danger-color) !important;
  }

  [data-theme^='spacestation'] #battleplanAutocompleteDropdown {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
    border: 1px solid var(--border-strong) !important;
  }

  [data-theme^='spacestation'] #battleplanAutocompleteDropdown .battleplan-autocomplete-header {
    background-color: var(--bg-tertiary) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
  }

  [data-theme^='spacestation']
    #battleplanAutocompleteDropdown
    .battleplan-autocomplete-item-primary {
    color: var(--text-primary) !important;
  }

  [data-theme^='spacestation']
    #battleplanAutocompleteDropdown
    .battleplan-autocomplete-item-secondary {
    color: var(--text-secondary) !important;
  }

  [data-theme^='spacestation'] #battleplanAutocompleteDropdown .battleplan-autocomplete-empty {
    color: var(--text-tertiary) !important;
  }

  /* === Task editor modal — input fields + work-time card + AI button ===
     Inline rules in index.html (lines 30-310) hardcode bright blue/purple
     and white. Same cascade strategy: append spacestation overrides here
     in @layer legacy with higher specificity + !important. */
  [data-theme^='spacestation'] #taskForm .form-input,
  [data-theme^='spacestation'] #taskForm .form-select,
  [data-theme^='spacestation'] #taskForm .form-textarea {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
  }

  [data-theme^='spacestation'] #taskForm .form-input:focus,
  [data-theme^='spacestation'] #taskForm .form-select:focus,
  [data-theme^='spacestation'] #taskForm .form-textarea:focus {
    border-color: var(--text-primary) !important;
    box-shadow: var(--focus-ring-form, 0 0 0 3px rgba(26, 23, 20, 0.08)) !important;
  }

  [data-theme^='spacestation'] #taskForm .work-time-card {
    background-color: var(--bg-tertiary) !important;
    background-image: none !important;
    border: 1px solid var(--border-color) !important;
  }

  [data-theme^='spacestation'] #taskForm .work-time-card .form-label {
    color: var(--text-primary) !important;
  }

  [data-theme^='spacestation'] #taskForm .work-time-card .form-label i {
    color: var(--text-secondary) !important;
  }

  [data-theme^='spacestation'] .preset-btn {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
  }

  [data-theme^='spacestation'] .preset-btn:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-strong) !important;
  }

  [data-theme^='spacestation'] .preset-btn.active {
    background-color: var(--text-primary) !important;
    color: var(--text-on-color) !important;
    border-color: var(--text-primary) !important;
    box-shadow: none !important;
  }

  [data-theme^='spacestation'] .btn-ai {
    background-color: var(--text-primary) !important;
    background-image: none !important;
    color: var(--text-on-color) !important;
    border: 1px solid var(--text-primary) !important;
  }

  [data-theme^='spacestation'] .btn-ai:hover:not(:disabled) {
    background-color: var(--text-secondary) !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  [data-theme^='spacestation'] .ai-badge {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
  }

  [data-theme^='spacestation'] .timer-display {
    background-color: var(--bg-tertiary) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
  }

  [data-theme^='spacestation'] .btn-outline-primary {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-strong) !important;
  }

  [data-theme^='spacestation'] .btn-outline-primary:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
  }

  [data-theme^='spacestation'] .btn-outline-primary i {
    color: var(--text-secondary) !important;
  }

  /* === Submit page — phone number summary input ===
     Created in submit.js with inline style.cssText (border #ddd, no bg).
     Inline styles have very high specificity — !important required. */
  [data-theme^='spacestation'] #submitterPhone {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
  }

  /* === Inventory mobile allowance widget ===
     Legacy uses semi-transparent white bg over inventory header gradient. */
  [data-theme^='spacestation'] .mobile-allowance-widget {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
  }

  /* === Password vault PIN modal ===
     Inline <style> in passwords.html (lines 827-876). The styles.css
     overrides come BEFORE passwords.html inline <style> in source order
     within @layer legacy, so we need higher specificity + !important to
     beat the inline rules' source-order win. */
  [data-theme^='spacestation'] .pin-modal {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
  }

  [data-theme^='spacestation'] .pin-modal h2 {
    color: var(--text-primary) !important;
  }

  [data-theme^='spacestation'] .pin-modal .subtitle {
    color: var(--text-secondary) !important;
  }

  [data-theme^='spacestation'] .pin-inputs input {
    background-color: var(--bg-secondary) !important;
    border: 2px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
  }

  [data-theme^='spacestation'] .pin-inputs input:focus {
    border-color: var(--text-primary) !important;
    box-shadow: var(--focus-ring-form, 0 0 0 3px rgba(26, 23, 20, 0.08)) !important;
  }

  [data-theme^='spacestation'] .pin-inputs input.error {
    border-color: var(--danger-color) !important;
  }

  /* === Tasks view date-group band ===
     Legacy uses linear-gradient(--primary-color → --primary-dark) which
     Strategy A flattens to solid ink in spacestation (looking like a black
     band with invisible white title text). Replace with cream-sunken band
     and mono-caps eyebrow title for visual integration with the rest of
     the cream UI. */
  [data-theme^='spacestation'] .task-group-header {
    background-color: var(--bg-tertiary) !important;
    background-image: none !important;
    border: 1px solid var(--border-color) !important;
    border-bottom: none !important;
  }

  [data-theme^='spacestation'] .task-group-title {
    color: var(--text-secondary) !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  [data-theme^='spacestation'] .task-group-title i {
    color: var(--text-tertiary) !important;
    opacity: 1 !important;
  }

  [data-theme^='spacestation'] .task-group-count {
    color: var(--text-tertiary) !important;
    opacity: 1 !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
  }

  /* === Statistics dayActivityModal Gantt polish ===
     The Gantt is built in JS (statistics.js renderDayTimeline) with inline
     styles applying bright saturated linear-gradients per category. The
     blocks now carry data-category and .day-activity-block — override the
     inline gradient with a single muted accent under spacestation themes.
     Category info stays accessible via the hover tooltip and the session
     list below the Gantt. */
  [data-theme^='spacestation'] .day-activity-block {
    background-color: var(--bap-ok-deep) !important;
    background-image: none !important;
  }

  [data-theme^='spacestation'] .day-activity-block[data-category='Helpdesk'] {
    background-color: var(--bap-bad-deep) !important;
  }

  [data-theme^='spacestation'] .day-activity-block[data-category='Programozás'] {
    background-color: var(--ink-primary) !important;
  }

  [data-theme^='spacestation'] .day-activity-block[data-category='Admin'] {
    background-color: var(--ink-muted) !important;
  }

  [data-theme^='spacestation'] .day-activity-block[data-category='IT feladat'] {
    background-color: var(--bap-slate-500) !important;
  }

  [data-theme^='spacestation'] .day-activity-block[data-category='Tesztelés'] {
    background-color: var(--bap-warn-deep) !important;
  }

  [data-theme^='spacestation'] .day-activity-block[data-category='Meeting'],
  [data-theme^='spacestation'] .day-activity-block[data-category='Hírlevélküldés'],
  [data-theme^='spacestation'] .day-activity-block[data-category='Jelöltkezelő'],
  [data-theme^='spacestation'] .day-activity-block[data-category='Fizikai/Egyéb'],
  [data-theme^='spacestation'] .day-activity-block[data-category='General'] {
    background-color: var(--bap-slate-700) !important;
  }

  [data-theme^='spacestation'] .day-activity-block:hover {
    filter: brightness(1.15) !important;
  }

  /* Block label — white-on-deep stays readable against all variants */
  [data-theme^='spacestation'] .day-activity-block > span {
    color: white !important;
    text-shadow: none !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-weight: 500 !important;
  }

  /* === Collapsed sidebar overflow fixes ===
     The legacy .sidebar.collapsed rules hide .nav-text, .logo-text etc
     but miss the sidebar-footer logout button (icon + "Kijelentkezés"
     text + arrow icon, overflows the 48px sidebar by ~85px), and don't
     center the toggle button or user avatar within the narrow column.
     Apply theme-agnostic so legacy theme also benefits. */
  .sidebar.collapsed {
    overflow-x: hidden;
  }

  .sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .sidebar.collapsed .sidebar-footer {
    align-items: center;
    padding-left: 0;
    padding-right: 0;
  }

  .sidebar.collapsed .user-info {
    justify-content: center;
  }

  .sidebar.collapsed .user-details {
    display: none;
  }

  .sidebar.collapsed #logoutBtn {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    font-size: 0 !important;
    gap: 0 !important;
  }

  .sidebar.collapsed #logoutBtn i {
    font-size: 13px !important;
    margin: 0 !important;
  }
} /* end @layer legacy */