/* ═══════════════════════════════════════════
       CSS CUSTOM PROPERTIES & THEME SYSTEM
       ═══════════════════════════════════════════ */
    :root {
      /* Soft blend: Nimbus (#80ADE9) + Sky (#8CC2EE) */
      --primary-color: #86b8eb;
      --primary-hover: #5d96e2;
      --primary-light: #eaf4ff;
      --sidebar-width: 280px;
      --sidebar-collapsed-width: 80px;
      --border-color: #dadce0;
      --hover-bg: #eaf4ff;
      --surface: #ffffff;
      --surface-elevated: #ffffff;
      --background: #f8f9fa;
      --text-primary: #202124;
      --text-secondary: #5f6368;
      --text-tertiary: #80868b;
      --danger-color: #c62828;
      --danger-bg: #fce8e8;
      --success-color: #388e3c;
      --warning-color: #f57c00;
      --top-nav-height: 64px;
      --top-nav-height-mobile: 56px;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
      --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 24px;
      --transition-fast: 0.15s ease;
      --transition-base: 0.2s ease;
      --transition-slow: 0.3s ease;
      --theme-transition-duration: 250ms;
      --theme-transition-timing: ease;
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    }

    /* Dark mode overrides */
    [data-bs-theme="dark"] {
      --primary-color: #8cc2ee;
      --primary-hover: #80ade9;
      --primary-light: rgba(140,194,238,0.14);
      --primary-blend: #5b6fd4;
      --border-color: #3c4043;
      --hover-bg: rgba(140,194,238,0.10);
      --surface: #1e1e1e;
      --surface-elevated: #2d2d2d;
      --background: #121212;
      --text-primary: #e8eaed;
      --text-secondary: #9aa0a6;
      --text-tertiary: #5f6368;
      --danger-color: #ef5350;
      --danger-bg: #3c1e1e;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
      --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    }

    /* Smooth theme transitions (light <-> dark) */
    @media (prefers-reduced-motion: no-preference) {
      :where(
        body,
        .app-shell,
        .sidebar,
        .top-nav,
        .content-area,
        .modal-content,
        .dropdown-menu,
        .file-card,
        .file-row,
        .file-row-list,
        .shared-item-row,
        .cd-row,
        .card,
        .list-group-item,
        .btn,
        .form-control,
        .form-select,
        .pagination .page-link,
        .nav-link,
        .theme-toggle,
        .action-btn
      ) {
        transition-property: background-color, color, border-color, box-shadow, outline-color, fill, stroke;
        transition-duration: var(--theme-transition-duration);
        transition-timing-function: var(--theme-transition-timing);
      }
    }

    /* ═══════════════════════════════════════════
       RESET & BASE STYLES
       ═══════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    * { font-family: var(--font-sans); }
    html { font-size: clamp(14px, 0.9vw + 12px, 16px); -webkit-text-size-adjust: 100%; }
    body {
      background-color: var(--background);
      color: var(--text-primary);
      font-size: 0.9375rem;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overscroll-behavior-y: none;
    }

    /* Reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Focus visible styles */
    :focus-visible {
      outline: 2px solid var(--primary-color);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* ═══════════════════════════════════════════
       SKIP LINK (Accessibility)
       ═══════════════════════════════════════════ */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10000;
      background: var(--primary-color);
      color: white;
      padding: 8px 16px;
      border-radius: 0 0 var(--radius-sm) var(--radius-sm);
      font-weight: 500;
      font-size: 0.875rem;
      text-decoration: none;
      transition: top var(--transition-fast);
    }
    .skip-link:focus { top: 0; }

    /* ═══════════════════════════════════════════
       APP SHELL LAYOUT
       ═══════════════════════════════════════════ */
    .app-shell {
      display: flex;
      height: 100dvh;
      height: 100vh;
      overflow: hidden;
      background: var(--background);
    }

    /* ═══════════════════════════════════════════
       SIDEBAR
       ═══════════════════════════════════════════ */
    .sidebar {
      width: var(--sidebar-width);
      height: 100dvh;
      height: 100vh;
      flex-shrink: 0;
      background: var(--surface);
      border-right: 1px solid var(--border-color);
      z-index: 1000;
      transition: transform var(--transition-slow), width var(--transition-slow);
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: var(--border-color) transparent;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .sidebar::-webkit-scrollbar { width: 6px; }
    .sidebar::-webkit-scrollbar-track { background: transparent; }
    .sidebar::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 3px; }

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

    /* Mobile sidebar as overlay drawer */
    @media (max-width: 991.98px) {
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
        z-index: 1050;
      }
      .sidebar.mobile-open {
        transform: translateX(0);
      }
      .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(2px);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-slow), visibility var(--transition-slow);
      }
      .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
      }
      .sidebar.collapsed {
        width: var(--sidebar-width);
        transform: translateX(-100%);
      }
      .sidebar.collapsed.mobile-open {
        transform: translateX(0);
      }
    }

    @media (min-width: 992px) {
      .sidebar-overlay { display: none !important; }
    }

    .sidebar-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding-bottom: clamp(120px, 20vh, 160px);
    }

    /* ═══════════════════════════════════════════
       BRAND / LOGO
       ═══════════════════════════════════════════ */
    .brand-section {
      padding: clamp(12px, 2vw, 20px);
      border-bottom: 1px solid var(--border-color);
      height: var(--top-nav-height);
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    @media (max-width: 991.98px) {
      .brand-section { height: var(--top-nav-height-mobile); }
    }
    .brand-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--text-primary);
      font-weight: 700;
      font-size: clamp(1.1rem, 1.5vw, 1.25rem);
      white-space: nowrap;
    }
    .brand-logo i { color: var(--primary-color); font-size: clamp(1.4rem, 2vw, 1.75rem); }
    .brand-text { transition: opacity var(--transition-base); }
    .sidebar.collapsed .brand-text { opacity: 0; display: none; }

    /* ═══════════════════════════════════════════
       NEW BUTTON
       ═══════════════════════════════════════════ */
    .new-btn {
      margin: 16px clamp(12px, 2vw, 20px);
      width: calc(100% - clamp(24px, 4vw, 40px));
      padding: clamp(8px, 1.2vw, 10px) clamp(16px, 2vw, 24px);
      border-radius: var(--radius-lg);
      background: var(--surface);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
      font-weight: 500;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all var(--transition-slow);
      color: var(--text-primary);
      cursor: pointer;
      min-height: 44px;
    }
    .new-btn:hover {
      box-shadow: var(--shadow-md);
      background: var(--hover-bg);
      border-color: var(--primary-color);
    }
    .new-btn:active { transform: scale(0.98); }
    /* Medium-sized primary sidebar actions */
    .new-btn--medium {
      min-height: 38px;
      padding: 6px 16px;
      font-size: 0.875rem;
      border-radius: var(--radius-md);
    }
    .nav-link--medium {
      min-height: 40px;
      padding: 8px 14px;
      font-size: 0.875rem;
    }
    .sidebar.collapsed .new-btn {
      width: 48px;
      height: 48px;
      padding: 0;
      margin: 16px auto;
      border-radius: 50%;
    }
    .new-btn-text { transition: opacity var(--transition-base); }
    .sidebar.collapsed .new-btn-text { display: none; }
    @media (max-width: 991.98px) {
      .sidebar.collapsed .new-btn {
        width: calc(100% - 40px);
        height: auto;
        padding: 10px 24px;
        margin: 16px 20px;
        border-radius: var(--radius-lg);
      }
      .sidebar.collapsed .new-btn-text { display: inline; }
    }
    /* Only hide dropdown menu text in desktop collapsed mode */
    @media (min-width: 992px) {
      .sidebar.collapsed .dropdown-menu { display: none !important; }
    }

    /* "New" dropdown menu */
    .new-dropdown {
      border-radius: 12px;
      min-width: 200px;
      margin-left: 20px;
    }
    .new-dropdown .dropdown-item {
      font-size: 0.875rem;
      padding: 0.45rem 1rem;
    }

    /* Nav divider */
    .nav-divider {
      margin: 8px 12px;
      border-color: var(--border-color);
    }

    /* Chevron icon sizing */
    .chevron-sm { font-size: 0.75rem; }

    /* Timestamp text */
    .timestamp { font-size: 0.7rem; }

    /* ═══════════════════════════════════════════
       NAVIGATION MENU
       ═══════════════════════════════════════════ */
    .nav-menu { padding: clamp(8px, 1.2vw, 12px); }
    .nav-link {
      display: flex;
      align-items: center;
      gap: clamp(12px, 1.5vw, 16px);
      padding: clamp(8px, 1vw, 10px) clamp(12px, 1.5vw, 16px);
      border-radius: var(--radius-lg);
      color: var(--text-secondary);
      text-decoration: none;
      transition: all var(--transition-base);
      font-weight: 500;
      font-size: clamp(0.82rem, 1vw, 0.9rem);
      margin-bottom: 4px;
      min-height: 44px;
      position: relative;
    }
    .nav-link:hover, .nav-link.active {
      background: var(--hover-bg);
      color: var(--primary-color);
    }
    .nav-link:active { transform: scale(0.98); }
    .nav-link i { font-size: clamp(1rem, 1.2vw, 1.15rem); min-width: 24px; text-align: center; flex-shrink: 0; }
    .nav-text { transition: opacity var(--transition-base); white-space: nowrap; }
    .sidebar.collapsed .nav-text { display: none; }
    @media (max-width: 991.98px) {
      .sidebar.collapsed .nav-text { display: inline; }
    }

    /* Active indicator */
    .nav-link.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 60%;
      background: var(--primary-color);
      border-radius: 0 3px 3px 0;
    }

    /* ═══════════════════════════════════════════
       ADMIN NAVIGATION
       ═══════════════════════════════════════════ */
    .admin-nav-btn {
      display: flex;
      align-items: center;
      gap: clamp(12px, 1.5vw, 16px);
      padding: clamp(8px, 1vw, 10px) clamp(12px, 1.5vw, 16px);
      border-radius: var(--radius-lg);
      color: var(--danger-color);
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      transition: all var(--transition-base);
      font-weight: 600;
      font-size: clamp(0.82rem, 1vw, 0.9rem);
      margin-bottom: 4px;
      min-height: 44px;
    }
    .admin-nav-btn:hover { background: var(--danger-bg); }
    .admin-nav-btn i { font-size: clamp(1rem, 1.2vw, 1.15rem); min-width: 24px; text-align: center; flex-shrink: 0; }
    .sidebar.collapsed .admin-nav-btn .nav-text,
    .sidebar.collapsed .admin-nav-btn .chevron { display: none; }
    @media (max-width: 991.98px) {
      .sidebar.collapsed .admin-nav-btn .nav-text,
      .sidebar.collapsed .admin-nav-btn .chevron { display: inline; }
    }
    .admin-sub-link {
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.2vw, 14px);
      padding: 8px 16px 8px 28px;
      border-radius: 20px;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: 500;
      transition: all var(--transition-base);
      margin-bottom: 2px;
      min-height: 40px;
    }
    .admin-sub-link:hover { background: var(--hover-bg); color: var(--primary-color); }
    .admin-sub-link i { font-size: 1rem; min-width: 20px; text-align: center; flex-shrink: 0; }
    .sidebar.collapsed .admin-sub-link .nav-text { display: none; }
    @media (max-width: 991.98px) {
      .sidebar.collapsed .admin-sub-link .nav-text { display: inline; }
    }

    /* ═══════════════════════════════════════════
       STORAGE SECTION
       ═══════════════════════════════════════════ */
    .storage-section {
      position: sticky;
      bottom: 0;
      padding: clamp(12px, 1.5vw, 16px) clamp(16px, 2vw, 20px);
      border-top: 1px solid var(--border-color);
      background: var(--surface);
      flex-shrink: 0;
    }
    .sidebar.collapsed .storage-text,
    .sidebar.collapsed .storage-btn { display: none; }
    @media (max-width: 991.98px) {
      .sidebar.collapsed .storage-text,
      .sidebar.collapsed .storage-btn { display: block; }
    }
    .storage-label { font-size: 0.8rem; color: var(--text-secondary); }
    .storage-percent { font-size: 0.8rem; font-weight: 500; }
    .storage-bar { height: 4px; }
    .storage-detail { font-size: 0.72rem; color: var(--text-secondary); margin-top: 6px; }
    .storage-buy-btn {
      border-radius: 20px;
      font-size: 0.8rem;
      min-height: 36px;
    }
    /* Embedded storage panel (e.g. profile) — same look as sidebar, not sticky */
    .storage-section--panel {
      position: relative;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      background: var(--surface);
      margin-top: 0;
    }

    /* ═══════════════════════════════════════════
       MAIN CONTENT AREA
       ═══════════════════════════════════════════ */
    .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100dvh;
      height: 100vh;
      overflow: hidden;
      min-width: 0;
    }

    /* ═══════════════════════════════════════════
       TOP NAVIGATION
       ═══════════════════════════════════════════ */
    .top-nav {
      height: var(--top-nav-height);
      flex-shrink: 0;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 clamp(12px, 2vw, 24px);
      background: var(--surface);
      z-index: 100;
      gap: clamp(8px, 1.5vw, 16px);
    }
    @media (max-width: 991.98px) {
      .top-nav {
        height: var(--top-nav-height-mobile);
        padding: 0 12px;
      }
    }
    @media (max-width: 575.98px) {
      .top-nav {
        padding: 0 8px;
        gap: 6px;
      }
    }

    /* Nav left section */
    .nav-left {
      display: flex;
      align-items: center;
      gap: clamp(8px, 1.2vw, 16px);
      flex: 1;
      min-width: 0;
    }
    @media (max-width: 767.98px) {
      .nav-left { gap: 8px; }
    }

    /* Sidebar toggle */
    .sidebar-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--text-primary);
      cursor: pointer;
      transition: background var(--transition-base);
      flex-shrink: 0;
      touch-action: manipulation;
    }
    .sidebar-toggle:hover { background: var(--hover-bg); }
    .sidebar-toggle i { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }

    /* Back button */
    .back-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--text-primary);
      cursor: pointer;
      transition: background var(--transition-base);
      flex-shrink: 0;
      touch-action: manipulation;
    }
    .back-btn:hover { background: var(--hover-bg); }
    @media (max-width: 575.98px) {
      .back-btn { display: none !important; }
    }

    /* ═══════════════════════════════════════════
       SEARCH BOX (Responsive)
       ═══════════════════════════════════════════ */
    .search-form {
      position: relative;
      width: min(400px, 35vw);
      max-width: 400px;
      flex-shrink: 1;
    }
    @media (max-width: 991.98px) {
      .search-form {
        width: auto;
        flex: 1;
        max-width: none;
      }
    }
    .search-box {
      position: relative;
      width: 100%;
    }
    .search-box input {
      width: 100%;
      padding: clamp(7px, 1vw, 9px) 16px clamp(7px, 1vw, 9px) 40px;
      border-radius: var(--radius-lg);
      border: 1px solid transparent;
      background: var(--background);
      transition: all var(--transition-base);
      font-size: clamp(0.8rem, 1vw, 0.9rem);
      color: var(--text-primary);
      min-height: 40px;
    }
    .search-box input:focus {
      outline: none;
      background: var(--surface);
      border-color: var(--border-color);
      box-shadow: 0 0 0 3px var(--primary-light);
    }
    .search-box input::placeholder { color: var(--text-tertiary); }
    .search-box i {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-tertiary);
      font-size: 0.9rem;
      pointer-events: none;
    }

    /* Search close button - hidden by default */
    .search-close-btn { display: none; }

    /* Collapsible search for mobile */
    @media (max-width: 767.98px) {
      .search-form:not(.search-expanded) .search-box input {
        width: 40px;
        padding-left: 36px;
        padding-right: 0;
        cursor: pointer;
        background: transparent;
      }
      .search-form:not(.search-expanded) .search-box input::placeholder { color: transparent; }
      .search-form.search-expanded {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        z-index: 10;
        background: var(--surface);
        padding: 8px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .search-form.search-expanded .search-box input {
        width: 100%;
        padding-left: 40px;
        padding-right: 16px;
        cursor: text;
      }
      .search-close-btn {
        display: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: var(--text-primary);
        cursor: pointer;
        flex-shrink: 0;
      }
      .search-form.search-expanded .search-close-btn { display: flex; align-items: center; justify-content: center; }
    }

    /* ═══════════════════════════════════════════
       NAV RIGHT SECTION
       ═══════════════════════════════════════════ */
    .nav-right {
      display: flex;
      align-items: center;
      gap: clamp(6px, 1vw, 12px);
      flex-shrink: 0;
    }

    /* ═══════════════════════════════════════════
       NOTIFICATION BELL
       ═══════════════════════════════════════════ */
    .notif-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--text-primary);
      cursor: pointer;
      transition: background var(--transition-base);
      position: relative;
      touch-action: manipulation;
    }
    .notif-btn:hover { background: var(--hover-bg); }
    .notif-btn i { font-size: clamp(1.1rem, 1.4vw, 1.25rem); }
    .notif-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 9px;
      background: #dc3545;
      color: white;
      font-size: 0.65rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--surface);
    }

    /* Notification dropdown */
    .notif-dropdown {
      width: min(360px, calc(100vw - 32px));
      max-height: 480px;
      overflow-y: auto !important;
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-lg);
      background: var(--surface);
    }
    /* Visible scrollbar for notifications (overrides generic dropdown-menu rules) */
    .notif-dropdown {
      scrollbar-width: thin;
      scrollbar-color: var(--border-color) transparent;
    }
    .notif-dropdown::-webkit-scrollbar { width: 8px; }
    .notif-dropdown::-webkit-scrollbar-track { background: transparent; }
    .notif-dropdown::-webkit-scrollbar-thumb {
      background-color: var(--border-color);
      border-radius: 8px;
    }
    .notif-dropdown::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--border-color) 70%, var(--text-secondary)); }

    .notif-dropdown .dropdown-item {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-color);
      white-space: normal;
      color: var(--text-primary);
    }
    .notif-dropdown .dropdown-item:hover { background: var(--hover-bg); }
    .notif-dropdown .dropdown-item:last-child { border-bottom: none; }

    @media (max-width: 575.98px) {
      .notif-dropdown {
        position: fixed !important;
        top: var(--top-nav-height-mobile) !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        transform: none !important;
      }
    }

    /* ═══════════════════════════════════════════
       USER AVATAR / DROPDOWN
       ═══════════════════════════════════════════ */
    .user-menu-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 8px 4px 4px;
      border-radius: var(--radius-lg);
      border: none;
      background: transparent;
      cursor: pointer;
      transition: background var(--transition-base);
      touch-action: manipulation;
    }
    .user-menu-btn:hover { background: var(--hover-bg); }
    .user-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--primary-color);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 0.8rem;
      overflow: hidden;
      flex-shrink: 0;
    }
    .user-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .user-name {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-primary);
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    @media (max-width: 767.98px) {
      .user-name { display: none; }
      .user-menu-btn { padding: 4px; }
    }

    /* User dropdown */
    .user-dropdown {
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-lg);
      background: var(--surface);
      min-width: 200px;
      padding: 8px 0;
    }
    .user-dropdown .dropdown-item {
      padding: 10px 16px;
      color: var(--text-primary);
      font-size: 0.875rem;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .user-dropdown .dropdown-item:hover { background: var(--hover-bg); }
    .user-dropdown .dropdown-item i { font-size: 1rem; }
    .user-dropdown .dropdown-divider { border-color: var(--border-color); margin: 8px 16px; }

    @media (max-width: 575.98px) {
      .user-dropdown {
        position: fixed !important;
        top: var(--top-nav-height-mobile) !important;
        right: 8px !important;
        left: auto !important;
        transform: none !important;
      }
    }

    /* ═══════════════════════════════════════════
       THEME TOGGLE
       ═══════════════════════════════════════════ */
    .theme-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all var(--transition-base);
      flex-shrink: 0;
      touch-action: manipulation;
    }
    .theme-toggle:hover { background: var(--hover-bg); color: var(--primary-color); }
    @media (max-width: 575.98px) {
      .theme-toggle { display: none; }
    }

    /* ═══════════════════════════════════════════
       CONTENT AREA
       ═══════════════════════════════════════════ */
    .content-area {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: clamp(12px, 2vw, 24px);
      scrollbar-width: thin;
      scrollbar-color: var(--border-color) transparent;
    }
    .content-area::-webkit-scrollbar { width: 8px; }
    .content-area::-webkit-scrollbar-track { background: transparent; }
    .content-area::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 4px; }

    /* ═══════════════════════════════════════════
       BREADCRUMB
       ═══════════════════════════════════════════ */
    .breadcrumb-item { color: var(--text-secondary); text-decoration: none; font-size: clamp(0.8rem, 1vw, 0.875rem); }
    .breadcrumb-item.active { color: var(--text-primary); font-weight: 500; }
    .breadcrumb-item:hover { color: var(--primary-color); }

    /* ═══════════════════════════════════════════
       FILE CARDS (Responsive Grid)
       ═══════════════════════════════════════════ */
    .file-card {
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      padding: clamp(10px, 1.5vw, 14px);
      cursor: pointer;
      transition: all var(--transition-base);
      touch-action: manipulation;
    }
    .file-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--primary-color);
      transform: translateY(-2px);
    }
    .file-card:active { transform: translateY(0) scale(0.99); }

    .file-icon {
      width: clamp(36px, 4vw, 44px);
      height: clamp(36px, 4vw, 44px);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(1.1rem, 1.5vw, 1.35rem);
      margin-bottom: 10px;
    }
    .file-icon.doc   { background: var(--primary-light); color: var(--primary-color); }
    .file-icon.sheet { background: #e8f5e9; color: #388e3c; }
    .file-icon.pdf   { background: #ffebee; color: #d32f2f; }
    .file-icon.image { background: #f3e5f5; color: #7b1fa2; }
    .file-icon.video { background: #fff3e0; color: #f57c00; }

    /* Dark mode: soften icon backgrounds */
    [data-bs-theme="dark"] .file-icon.sheet { background: rgba(56,142,60,0.15); }
    [data-bs-theme="dark"] .file-icon.pdf   { background: rgba(211,47,47,0.15); }
    [data-bs-theme="dark"] .file-icon.image { background: rgba(123,31,162,0.15); }
    [data-bs-theme="dark"] .file-icon.video { background: rgba(245,124,0,0.15); }

    /* ═══════════════════════════════════════════
       FILE LIST ROW (horizontal list view)
       ═══════════════════════════════════════════ */
    .file-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: clamp(10px, 1.5vw, 14px) clamp(12px, 2vw, 16px);
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      color: var(--text-primary);
      cursor: pointer;
      transition: all var(--transition-base);
      margin-bottom: 8px;
      min-height: 52px;
      text-decoration: none;
    }
    .file-row:hover {
      border-color: var(--primary-color);
      box-shadow: var(--shadow-sm);
    }
    .file-row .file-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.9rem;
      color: var(--text-primary);
    }
    .file-row .file-meta {
      font-size: 0.8rem;
      color: var(--text-secondary);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .file-row .file-actions {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .file-list-name { max-width: min(220px, 50vw); }

    /* ═══════════════════════════════════════════
       FILE ROW LIST (list view variant used in dashboard)
       ═══════════════════════════════════════════ */
    .file-row-list {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 12px 16px;
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all var(--transition-base);
      margin-bottom: 8px;
      min-height: 52px;
      flex-wrap: nowrap;
    }
    .file-row-list:hover {
      border-color: var(--primary-color);
      box-shadow: var(--shadow-sm);
    }
    .file-row-list .file-row-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      flex-shrink: 0;
      color: var(--primary-color);
      background: var(--primary-light);
    }
    .file-row-list .file-row-icon i { font-size: 1.25rem; }
    .file-row-list .file-row-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    .file-row-list .file-row-meta {
      font-size: 0.8rem;
      color: var(--text-secondary);
      white-space: nowrap;
      flex-shrink: 0;
    }
    /* Push dropdown to far right */
    .file-row-list .dropdown { margin-left: auto; flex-shrink: 0; }

    /* Responsive list view: hide timestamp on tablet, hide size too on mobile */
    @media (max-width: 767.98px) {
      .file-row-list .file-row-meta:last-of-type { display: none; }
    }
    @media (max-width: 575.98px) {
      .file-row-list { gap: 10px; padding: 10px 12px; }
      .file-row-list .file-row-meta { display: none; }
      .file-row-list .file-row-icon {
        width: 32px;
        height: 32px;
      }
      .file-row-list .file-row-icon i { font-size: 1rem; }
    }

    /* Grid view file name */
    .file-name-text {
      font-size: 0.9rem;
    }

    /* Empty state icon */
    .empty-icon {
      font-size: clamp(2.5rem, 5vw, 4rem);
      margin-bottom: 16px;
      color: var(--text-tertiary);
    }

    /* ═══════════════════════════════════════════
       DARK MODE: Override child template Bootstrap classes
       (bg-white, borders, etc. used in list views)
       ═══════════════════════════════════════════ */

    /* Override hardcoded white backgrounds in dark mode */
    [data-bs-theme="dark"] .content-area .bg-white,
    [data-bs-theme="dark"] .content-area [class*="bg-white"] {
      background: var(--surface) !important;
    }
    [data-bs-theme="dark"] .content-area .bg-light,
    [data-bs-theme="dark"] .content-area [class*="bg-light"] {
      background: var(--background) !important;
    }

    /* Force borders to use theme colors */
    [data-bs-theme="dark"] .content-area .border,
    [data-bs-theme="dark"] .content-area .border-bottom,
    [data-bs-theme="dark"] .content-area .border-top,
    [data-bs-theme="dark"] .content-area .border-start,
    [data-bs-theme="dark"] .content-area .border-end {
      border-color: var(--border-color) !important;
    }

    /* Content cards / rows that use generic Bootstrap */
    [data-bs-theme="dark"] .content-area .card {
      background: var(--surface);
      border-color: var(--border-color);
    }
    [data-bs-theme="dark"] .content-area .card-body { color: var(--text-primary); }

    /* Generic list-row pattern (catches most child template list items) */
    [data-bs-theme="dark"] .content-area .list-group-item-action {
      color: var(--text-primary);
    }
    [data-bs-theme="dark"] .content-area .list-group-item-action:hover {
      background: var(--hover-bg);
    }

    /* ═══════════════════════════════════════════
       SHARED WITH ME / SHARED ITEMS LIST
       (catches hardcoded bg-white from child templates)
       ═══════════════════════════════════════════ */
    .shared-item-row {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 20px;
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      margin-bottom: 10px;
      cursor: pointer;
      transition: all var(--transition-base);
      text-decoration: none;
      color: var(--text-primary);
      min-height: 56px;
    }
    .shared-item-row:hover {
      border-color: var(--primary-color);
      box-shadow: var(--shadow-sm);
      color: var(--text-primary);
    }
    .shared-item-row .shared-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      font-size: 1.25rem;
      flex-shrink: 0;
    }
    .shared-item-row .shared-icon.folder {
      background: #fff3e0;
      color: #f57c00;
    }
    [data-bs-theme="dark"] .shared-item-row .shared-icon.folder {
      background: rgba(245,124,0,0.15);
    }
    .shared-item-row .shared-icon.file {
      background: var(--primary-light);
      color: var(--primary-color);
    }
    .shared-item-row .shared-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
      font-size: 0.9rem;
      color: var(--text-primary);
    }
    .shared-item-row .shared-meta {
      font-size: 0.8rem;
      color: var(--text-secondary);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .shared-item-row .shared-perm-badge {
      flex-shrink: 0;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 12px;
      white-space: nowrap;
    }
    .shared-perm-badge.download {
      background: var(--primary-light);
      color: var(--primary-color);
    }
    .shared-perm-badge.edit {
      background: #fff3e0;
      color: #f57c00;
    }
    [data-bs-theme="dark"] .shared-perm-badge.edit {
      background: rgba(245,124,0,0.15);
    }
    .shared-item-row .shared-time {
      font-size: 0.8rem;
      color: var(--text-secondary);
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* Responsive shared items */
    @media (max-width: 767.98px) {
      .shared-item-row { gap: 10px; padding: 10px 14px; }
      .shared-item-row .shared-time { display: none; }
    }
    @media (max-width: 575.98px) {
      .shared-item-row { gap: 8px; padding: 8px 12px; margin-bottom: 6px; }
      .shared-item-row .shared-meta { display: none; }
      .shared-item-row .shared-icon { width: 32px; height: 32px; font-size: 1rem; }
    }

    /* Override: force themed list rows in content area */
    [data-bs-theme="dark"] .content-area .shared-item-row {
      background: var(--surface) !important;
      border-color: var(--border-color) !important;
    }

    /* Aggressive overrides for hardcoded Bootstrap classes in list views */
    [data-bs-theme="dark"] .content-area .list-group-item {
      background: var(--surface) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    [data-bs-theme="dark"] .content-area .list-group-item .fw-medium,
    [data-bs-theme="dark"] .content-area .list-group-item .fw-bold {
      color: var(--text-primary) !important;
    }

    /* Dark mode: Bootstrap bg-opacity classes used in share settings */
    [data-bs-theme="dark"] .content-area .bg-warning.bg-opacity-10 {
      background: rgba(245,124,0,0.15) !important;
    }
    [data-bs-theme="dark"] .content-area .bg-info.bg-opacity-10 {
      background: rgba(13,202,240,0.15) !important;
    }

    /* Dark mode: card and card-body overrides */
    [data-bs-theme="dark"] .content-area .card {
      background: var(--surface) !important;
      border-color: var(--border-color) !important;
    }
    [data-bs-theme="dark"] .content-area .card-body {
      background: var(--surface) !important;
      color: var(--text-primary) !important;
    }
    [data-bs-theme="dark"] .content-area .card-body h5,
    [data-bs-theme="dark"] .content-area .card-body h6 {
      color: var(--text-primary) !important;
    }

    /* Dark mode: btn-outline-secondary in content */
    [data-bs-theme="dark"] .content-area .btn-outline-secondary {
      color: var(--text-secondary);
      border-color: var(--border-color);
    }
    [data-bs-theme="dark"] .content-area .btn-outline-secondary:hover {
      background: var(--hover-bg);
      color: var(--text-primary);
    }

    /* Dark mode: text-warning stays visible */
    [data-bs-theme="dark"] .content-area .text-warning {
      color: #f4a61d !important;
    }

    /* Dark mode: dropdown menus in content area */
    [data-bs-theme="dark"] .content-area .dropdown-menu .dropdown-header {
      color: var(--text-secondary);
    }
    [data-bs-theme="dark"] .content-area .dropdown-menu .dropdown-item.active {
      background: var(--primary-color);
      color: white;
    }
    [data-bs-theme="dark"] .content-area .dropdown-menu .dropdown-item.active small {
      color: rgba(255,255,255,0.7);
    }

    /* Dark mode: badge overrides */
    [data-bs-theme="dark"] .content-area .badge.bg-dark {
      background: var(--text-secondary) !important;
      color: var(--surface);
    }

    /* Dark mode: form switch */
    [data-bs-theme="dark"] .content-area .form-check-input {
      background-color: var(--border-color);
      border-color: var(--border-color);
    }
    [data-bs-theme="dark"] .content-area .form-check-input:checked {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
    }

    /* ═══════════════════════════════════════════
       UNIVERSAL CD-ROW: One class for ALL pages
       Use: <div class="cd-row"> or <tr class="cd-row">
       Works for: Shared with Me, Manage Profiles,
       Manage Users, and any future list/table views
       ═══════════════════════════════════════════ */
    .cd-row {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 20px;
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      margin-bottom: 10px;
      color: var(--text-primary);
      text-decoration: none;
      transition: all var(--transition-base);
      min-height: 56px;
    }
    .cd-row:hover {
      border-color: var(--primary-color);
      box-shadow: var(--shadow-sm);
      color: var(--text-primary);
      text-decoration: none;
    }
    .cd-row .cd-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      font-size: 1.25rem;
      flex-shrink: 0;
    }
    .cd-row .cd-icon.file {
      background: var(--primary-light);
      color: var(--primary-color);
    }
    .cd-row .cd-icon.folder {
      background: #fff3e0;
      color: #f57c00;
    }
    .cd-row .cd-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
      font-size: 0.9rem;
      color: var(--text-primary);
    }
    .cd-row .cd-meta {
      font-size: 0.8rem;
      color: var(--text-secondary);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .cd-row .cd-badge {
      font-size: 0.75rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 12px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .cd-row .cd-badge.download {
      background: var(--primary-light);
      color: var(--primary-color);
    }
    .cd-row .cd-badge.edit {
      background: #fff3e0;
      color: #f57c00;
    }
    .cd-row .cd-badge.view {
      background: #e8f5e9;
      color: #388e3c;
    }
    .cd-row .cd-time {
      font-size: 0.8rem;
      color: var(--text-secondary);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .cd-row .cd-action {
      margin-left: auto;
      flex-shrink: 0;
    }

    /* Dark mode cd-row icon softening */
    [data-bs-theme="dark"] .cd-row .cd-icon.folder {
      background: rgba(245,124,0,0.15);
    }
    [data-bs-theme="dark"] .cd-row .cd-badge.edit {
      background: rgba(245,124,0,0.15);
    }
    [data-bs-theme="dark"] .cd-row .cd-badge.view {
      background: rgba(56,142,60,0.15);
    }

    /* cd-avatar for image-based icons (user avatars in share lists) */
    .cd-row .cd-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }
    @media (max-width: 575.98px) {
      .cd-row .cd-avatar { width: 32px; height: 32px; }
    }

    /* Responsive cd-row */
    @media (max-width: 767.98px) {
      .cd-row { gap: 10px; padding: 10px 14px; }
      .cd-row .cd-time { display: none; }
      .cd-row .cd-meta { display: none; }
    }
    @media (max-width: 575.98px) {
      .cd-row { gap: 8px; padding: 8px 12px; margin-bottom: 6px; }
      .cd-row .cd-icon { width: 32px; height: 32px; font-size: 1rem; }
    }

    /* ═══════════════════════════════════════════
       UNIVERSAL CD-TABLE: One class for ALL tables
       Use: <table class="table cd-table">
       ═══════════════════════════════════════════ */
    .cd-table {
      color: var(--text-primary);
      --bs-table-color: var(--text-primary);
      --bs-table-bg: transparent;
      --bs-table-border-color: var(--border-color);
      --bs-table-striped-bg: rgba(0,0,0,0.02);
      --bs-table-hover-bg: var(--hover-bg);
      --bs-table-hover-color: var(--text-primary);
    }
    .cd-table thead th {
      background: var(--background);
      color: var(--text-secondary);
      border-bottom: 2px solid var(--border-color);
      font-weight: 600;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 12px 16px;
      white-space: nowrap;
    }
    .cd-table tbody td {
      padding: 14px 16px;
      vertical-align: middle;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-primary);
      font-size: 0.875rem;
    }
    .cd-table tbody tr:hover td {
      color: var(--text-primary);
    }

    /* Dark mode cd-table */
    [data-bs-theme="dark"] .cd-table {
      --bs-table-striped-bg: rgba(255,255,255,0.02);
    }
    [data-bs-theme="dark"] .cd-table thead th {
      background: var(--surface-elevated);
      color: var(--text-secondary);
      border-bottom-color: var(--border-color);
    }
    [data-bs-theme="dark"] .cd-table tbody td {
      color: var(--text-primary);
      border-bottom-color: var(--border-color);
    }

    /* ═══════════════════════════════════════════
       AGGRESSIVE: Catch ALL Bootstrap table defaults
       in dark mode without needing template changes
       ═══════════════════════════════════════════ */

    /* Force ALL tables in content area to theme */
    [data-bs-theme="dark"] .content-area .table {
      --bs-table-color: var(--text-primary) !important;
      --bs-table-border-color: var(--border-color) !important;
      --bs-table-bg: transparent !important;
      color: var(--text-primary) !important;
    }
    [data-bs-theme="dark"] .content-area .table thead th,
    [data-bs-theme="dark"] .content-area .table thead td {
      background: var(--surface-elevated) !important;
      color: var(--text-secondary) !important;
      border-color: var(--border-color) !important;
    }
    [data-bs-theme="dark"] .content-area .table tbody td,
    [data-bs-theme="dark"] .content-area .table tbody th {
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    [data-bs-theme="dark"] .content-area .table tbody tr {
      background: transparent !important;
    }
    [data-bs-theme="dark"] .content-area .table-hover tbody tr:hover {
      background: var(--hover-bg) !important;
    }

    /* Catch table-light / table-dark headers */
    [data-bs-theme="dark"] .content-area .table-light thead th,
    [data-bs-theme="dark"] .content-area .table-light tbody td {
      --bs-table-bg: var(--surface-elevated) !important;
      background: var(--surface-elevated) !important;
      color: var(--text-primary) !important;
    }

    /* ═══════════════════════════════════════════
       AGGRESSIVE: Catch ALL Bootstrap list-group
       defaults in dark mode
       ═══════════════════════════════════════════ */
    [data-bs-theme="dark"] .content-area .list-group-item {
      background: var(--surface) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    [data-bs-theme="dark"] .content-area .list-group-item * {
      color: inherit;
    }
    [data-bs-theme="dark"] .content-area .list-group-item .fw-medium,
    [data-bs-theme="dark"] .content-area .list-group-item .fw-bold,
    [data-bs-theme="dark"] .content-area .list-group-item strong {
      color: var(--text-primary) !important;
    }
    [data-bs-theme="dark"] .content-area .list-group-item .text-muted,
    [data-bs-theme="dark"] .content-area .list-group-item small {
      color: var(--text-secondary) !important;
    }
    [data-bs-theme="dark"] .content-area .list-group-item:hover {
      background: var(--hover-bg) !important;
    }
    [data-bs-theme="dark"] .content-area .list-group-flush .list-group-item {
      border-color: var(--border-color) !important;
    }

    /* ═══════════════════════════════════════════
       NUCLEAR: Override Bootstrap defaults with
       maximum specificity for ALL content elements
       ═══════════════════════════════════════════ */

    /* Force EVERYTHING in content-area to use themed colors */
    [data-bs-theme="dark"] .content-area * {
      border-color: var(--border-color);
    }

    /* Override Bootstrap's .list-group-item hardcoded colors */
    [data-bs-theme="dark"] .content-area .list-group-item,
    [data-bs-theme="dark"] .content-area :is(.list-group-item) {
      background-color: var(--surface) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }

    /* Override ANY element with inline white background */
    [data-bs-theme="dark"] .content-area [style*="white" i],
    [data-bs-theme="dark"] .content-area [style*="#fff" i] {
      background: var(--surface) !important;
    }

    /* ═══════════════════════════════════════════
       AGGRESSIVE: Catch ALL hardcoded backgrounds
       ═══════════════════════════════════════════ */
    [data-bs-theme="dark"] .content-area [class*="bg-white"],
    [data-bs-theme="dark"] .content-area [class*="bg-light"] {
      background: var(--surface) !important;
    }
    [data-bs-theme="dark"] .content-area [class*="bg-dark"] {
      background: var(--text-secondary) !important;
    }

    /* ═══════════════════════════════════════════
       AGGRESSIVE: Catch ALL text-dark / text-body
       ═══════════════════════════════════════════ */
    [data-bs-theme="dark"] .content-area .text-dark,
    [data-bs-theme="dark"] .content-area .text-body {
      color: var(--text-primary) !important;
    }
    [data-bs-theme="dark"] .content-area .text-black-50 {
      color: var(--text-secondary) !important;
    }

    /* ═══════════════════════════════════════════
       PROFILE PAGE STYLES
       ═══════════════════════════════════════════ */

    /* Profile hero section */
    .profile-hero {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 24px;
      align-items: flex-start;
    }
    @media (min-width: 768px) {
      .profile-hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }

    /* Profile avatar */
    .profile-avatar {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }
    .profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .profile-avatar-initials {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: var(--primary-color);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* Stat pill (replaces bg-white stat cards) */
    .stat-pill {
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      padding: 20px 16px;
      text-align: center;
      transition: all var(--transition-base);
    }
    .stat-pill:hover {
      box-shadow: var(--shadow-sm);
      border-color: var(--primary-color);
    }
    .stat-icon { margin-bottom: 8px; }
    .stat-num {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.2;
    }
    .stat-label {
      font-size: 0.8rem;
      color: var(--text-secondary);
    }

    /* Profile details table */
    .profile-details-table tbody tr {
      border-bottom: 1px solid var(--border-color);
    }
    .profile-details-table tbody tr:last-child {
      border-bottom: none;
    }
    .profile-details-table td {
      padding: 14px 20px;
      color: var(--text-primary);
      font-size: 0.9rem;
    }
    .profile-label {
      color: var(--text-secondary);
      width: 140px;
      white-space: nowrap;
    }
    .profile-value {
      font-weight: 500;
    }

    /* Storage progress bar */
    .storage-progress-bar {
      height: 10px;
      background: var(--background);
      border-radius: 5px;
      margin-bottom: 12px;
    }
    .storage-progress-bar .progress-bar {
      background: var(--primary-color);
      border-radius: 5px;
    }

    /* Storage detail text */
    .storage-detail {
      font-size: 0.85rem;
      color: var(--text-secondary);
    }
    .storage-detail strong {
      color: var(--text-primary);
    }

    /* Activity row (uses cd-row base) */
    .activity-row {
      padding: 12px 20px;
      min-height: 48px;
    }
    .activity-row .cd-name {
      font-weight: 400;
      font-size: 0.85rem;
      white-space: normal;
    }

    /* ── SHARE SETTINGS PAGE STYLES ── */

    /* Back button link */
    .back-btn-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--text-primary);
      text-decoration: none;
      transition: background var(--transition-base);
      margin-right: 12px;
      flex-shrink: 0;
    }
    .back-btn-link:hover { background: var(--hover-bg); }
    .back-btn-link i { font-size: 1.5rem; }

    /* Share file icon */
    .share-file-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Card header themed */
    .card-header-themed {
      background: var(--surface);
      border-bottom: 1px solid var(--border-color);
      color: var(--text-primary);
    }
    [data-bs-theme="dark"] .card-header-themed {
      background: var(--surface);
    }

    /* Themed list group */
    .list-group-themed .list-group-item {
      background: var(--surface) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    .list-group-themed .list-group-item:hover {
      background: var(--hover-bg) !important;
    }
    .list-group-themed .list-group-item .fw-medium,
    .list-group-themed .list-group-item .fw-bold {
      color: var(--text-primary);
    }

    /* Share avatar */
    .share-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    /* Owner badge */
    .owner-badge {
      background: var(--text-secondary) !important;
      color: var(--surface);
    }

    /* Large form switch */
    .form-switch-lg {
      width: 3em !important;
      height: 1.5em !important;
      cursor: pointer;
    }

    /* Override text colors */
    [data-bs-theme="dark"] .content-area .text-dark {
      color: var(--text-primary) !important;
    }
    [data-bs-theme="dark"] .content-area .text-body {
      color: var(--text-primary) !important;
    }
    [data-bs-theme="dark"] .content-area .text-black-50 {
      color: var(--text-secondary) !important;
    }

    /* Override link colors in content */
    [data-bs-theme="dark"] .content-area a.text-dark:hover,
    [data-bs-theme="dark"] .content-area a:not(.btn):hover {
      color: var(--primary-color) !important;
    }

    /* ═══════════════════════════════════════════
       ACTION BUTTONS (3-dot menus, etc.)
       ═══════════════════════════════════════════ */
    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all var(--transition-base);
      touch-action: manipulation;
    }
    .action-btn:hover { background: var(--hover-bg); color: var(--primary-color); }
    .action-btn:active { transform: scale(0.95); }

    /* ═══════════════════════════════════════════
       VIEW TOGGLE (Grid/List switcher)
       ═══════════════════════════════════════════ */
    .view-toggle {
      display: inline-flex;
      align-items: center;
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }
    .view-toggle-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 32px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all var(--transition-base);
      font-size: 0.875rem;
    }
    .view-toggle-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
    .view-toggle-btn.active {
      background: var(--primary-light);
      color: var(--primary-color);
    }

    /* ═══════════════════════════════════════════
       LIST GROUP (used in content areas)
       ═══════════════════════════════════════════ */
    .content-area .list-group-item {
      background: var(--surface);
      color: var(--text-primary);
      border-color: var(--border-color);
    }
    .content-area .list-group-item:hover { background: var(--hover-bg); }

    /* ═══════════════════════════════════════════
       TABLES
       ═══════════════════════════════════════════ */
    .content-area .table {
      color: var(--text-primary);
      --bs-table-color: var(--text-primary);
      --bs-table-bg: transparent;
      --bs-table-border-color: var(--border-color);
      --bs-table-striped-bg: rgba(0,0,0,0.02);
    }
    [data-bs-theme="dark"] .content-area .table {
      --bs-table-striped-bg: rgba(255,255,255,0.03);
    }
    .content-area .table thead th {
      color: var(--text-secondary);
      border-bottom-color: var(--border-color);
      font-weight: 600;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    /* ═══════════════════════════════════════════
       SECTION HEADERS
       ═══════════════════════════════════════════ */
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: clamp(16px, 2.5vw, 24px);
    }
    .section-title {
      font-size: clamp(1.1rem, 1.8vw, 1.35rem);
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }
    .section-subtitle {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-top: 4px;
    }

    /* ═══════════════════════════════════════════
       EMPTY STATE
       ═══════════════════════════════════════════ */
    .empty-state {
      text-align: center;
      padding: clamp(40px, 10vw, 80px) clamp(20px, 5vw, 40px);
      color: var(--text-secondary);
    }
    .empty-state > i { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 16px; color: var(--text-tertiary); }
    .empty-state h5 { color: var(--text-primary); margin-bottom: 8px; }
    .empty-state p { font-size: 0.9rem; max-width: 400px; margin: 0 auto; }
    .btn-medium {
      padding: 0.4rem 1rem;
      font-size: 0.82rem;
      line-height: 1.3;
      min-height: 36px;
      border-radius: var(--radius-sm);
    }

    /* ═══════════════════════════════════════════
       DIVIDERS IN CONTENT
       ═══════════════════════════════════════════ */
    .content-divider {
      border: none;
      border-top: 1px solid var(--border-color);
      margin: clamp(16px, 2.5vw, 24px) 0;
    }

    /* ═══════════════════════════════════════════
       CONTEXT MENU (right-click / more options)
       ═══════════════════════════════════════════ */
    .context-menu {
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-lg);
      padding: 6px 0;
      min-width: 180px;
    }
    .context-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      color: var(--text-primary);
      font-size: 0.875rem;
      cursor: pointer;
      transition: background var(--transition-base);
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }
    .context-menu-item:hover { background: var(--hover-bg); }
    .context-menu-item.danger { color: var(--danger-color); }
    .context-menu-item.danger:hover { background: var(--danger-bg); }
    .context-menu-divider {
      border: none;
      border-top: 1px solid var(--border-color);
      margin: 6px 12px;
    }

    /* ═══════════════════════════════════════════
       BUTTONS (general dark mode fixes)
       ═══════════════════════════════════════════ */
    .btn-outline-secondary {
      color: var(--text-secondary);
      border-color: var(--border-color);
    }
    .btn-outline-secondary:hover {
      background: var(--hover-bg);
      color: var(--text-primary);
      border-color: var(--border-color);
    }

    /* ═══════════════════════════════════════════
       TEXT MUTED (Bootstrap compatibility)
       ═══════════════════════════════════════════ */
    .text-muted { color: var(--text-secondary) !important; }

    /* ═══════════════════════════════════════════
       FORM ELEMENTS (in content area)
       ═══════════════════════════════════════════ */
    .content-area .form-control,
    .content-area .form-select {
      background: var(--surface);
      color: var(--text-primary);
      border-color: var(--border-color);
    }
    .content-area .form-control:focus,
    .content-area .form-select:focus {
      background: var(--surface);
      color: var(--text-primary);
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem var(--primary-light);
    }
    .content-area .form-control::placeholder { color: var(--text-tertiary); }
    .content-area .form-label { color: var(--text-primary); }

    /* ═══════════════════════════════════════════
       PAGINATION
       ═══════════════════════════════════════════ */
    .content-area .pagination .page-link {
      background: var(--surface);
      color: var(--text-primary);
      border-color: var(--border-color);
    }
    .content-area .pagination .page-link:hover {
      background: var(--hover-bg);
      color: var(--primary-color);
      border-color: var(--border-color);
    }
    .content-area .pagination .page-item.active .page-link {
      background: var(--primary-color);
      border-color: var(--primary-color);
      color: white;
    }

    /* ═══════════════════════════════════════════
       BADGES
       ═══════════════════════════════════════════ */
    .badge.bg-secondary { background: var(--text-tertiary) !important; }

    /* ═══════════════════════════════════════════
       QUICK FOLDERS
       ═══════════════════════════════════════════ */
    .quick-folder {
      min-width: clamp(100px, 12vw, 120px);
      height: clamp(80px, 10vw, 96px);
      border-radius: var(--radius-md);
      padding: clamp(10px, 1.5vw, 14px);
      color: white;
      cursor: pointer;
      transition: transform var(--transition-base);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: clamp(0.8rem, 1vw, 0.875rem);
      touch-action: manipulation;
    }
    .quick-folder:hover { transform: translateY(-4px); }
    .quick-folder:active { transform: translateY(-2px); }

    .quick-folder-card {
      position: relative;
      flex-shrink: 0;
      z-index: 1;
    }
    .quick-folder-card .quick-folder-link { display: block; }
    .quick-folder-card.dropdown-open {
      z-index: 40;
    }

    /* Shared with me — action row + theme-aware list rows */
    .shared-item-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border-color);
    }
    .shared-item-actions .btn {
      font-size: 0.75rem;
      padding: 4px 10px;
    }
    .shared-list-row {
      cursor: default;
      border: 1px solid var(--border-color) !important;
      background: var(--surface) !important;
      color: var(--text-primary);
    }
    .shared-list-row .shared-list-primary {
      cursor: pointer;
      border-radius: var(--radius-sm);
    }
    .shared-list-row .shared-list-primary:hover {
      background: var(--hover-bg);
    }
    .shared-list-row .shared-item-actions {
      border-top: none;
      margin-top: 0;
      padding-top: 0;
      margin-left: auto;
      flex-shrink: 0;
    }
    @media (min-width: 768px) {
      .shared-list-row { flex-wrap: nowrap; }
    }

    /* ═══════════════════════════════════════════
       FOLDER TREE
       ═══════════════════════════════════════════ */
    .folder-tree-item { margin: 2px 0; }
    .folder-tree-row {
      display: flex;
      align-items: center;
      padding: 7px 12px;
      border-radius: 4px;
      cursor: pointer;
      transition: background var(--transition-base);
      font-size: 0.875rem;
      color: var(--text-primary);
      min-height: 36px;
    }
    .folder-tree-row:hover, .folder-tree-row.active { background: var(--hover-bg); }
    .folder-tree-row a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
    .folder-toggle {
      background: none;
      border: none;
      padding: 4px;
      margin-right: 4px;
      cursor: pointer;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 4px;
      flex-shrink: 0;
    }
    .folder-toggle:hover { background: rgba(0,0,0,0.05); }
    .folder-children { margin-left: clamp(12px, 2vw, 20px); }

    /* ═══════════════════════════════════════════
       DROP ZONES (File & Folder upload)
       ═══════════════════════════════════════════ */
    .drop-zone {
      display: block;
      border: 2px dashed var(--primary-color);
      border-radius: 12px;
      padding: clamp(24px, 5vw, 40px);
      text-align: center;
      background: var(--background);
      cursor: pointer;
      margin-bottom: 16px;
      transition: background 0.2s;
    }
    .drop-zone:hover { background: var(--hover-bg); }
    .drop-zone-folder {
      display: block;
      border: 2px dashed #f4a61d;
      border-radius: 12px;
      padding: clamp(24px, 5vw, 40px);
      text-align: center;
      background: #fffbf0;
      cursor: pointer;
      margin-bottom: 16px;
      transition: background 0.2s;
    }
    [data-bs-theme="dark"] .drop-zone-folder { background: #2a2010; }
    .drop-zone-folder:hover { background: #fff3cd; }
    [data-bs-theme="dark"] .drop-zone-folder:hover { background: #3a3018; }
    .file-input-hidden { display: none; }

    /* Unauth container */
    .unauth-container {
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      background: var(--background);
      isolation: isolate;
    }

    /* Keep unauth content above the animated backdrop */
    .unauth-container > * {
      position: relative;
      z-index: 1;
    }

    /* Waterfall backdrop: triggered when switching to dark mode */
    .unauth-container::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-10%);
      background-image:
        radial-gradient(1200px 800px at 20% -10%, rgba(73,197,239,0.35), transparent 60%),
        radial-gradient(1000px 700px at 90% 0%, rgba(91,111,212,0.28), transparent 55%),
        linear-gradient(180deg, rgba(73,197,239,0.22) 0%, rgba(91,111,212,0.22) 55%, rgba(18,18,18,0.92) 100%);
      background-size: 100% 200%;
      background-position: 50% 0%;
      transition: opacity 650ms ease, transform 950ms cubic-bezier(0.2, 0.8, 0.2, 1);
      will-change: opacity, transform, background-position;
    }

    @keyframes cd-waterfall-sweep {
      0% { background-position: 50% 0%; }
      100% { background-position: 50% 100%; }
    }

    @keyframes cd-waterfall-rise {
      0% { opacity: 0; transform: translateY(18px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Only run the waterfall when dark-mode is being turned on */
    @media (prefers-reduced-motion: no-preference) {
      html.theme-waterfall[data-bs-theme="dark"] .unauth-container::before {
        opacity: 1;
        transform: translateY(0);
        animation: cd-waterfall-sweep 900ms ease-out both;
      }

      html.theme-waterfall[data-bs-theme="dark"] .unauth-container .card,
      html.theme-waterfall[data-bs-theme="dark"] .unauth-container .card * {
        animation: cd-waterfall-rise 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
      }
      html.theme-waterfall[data-bs-theme="dark"] .unauth-container .card {
        animation-delay: 120ms;
      }
      html.theme-waterfall[data-bs-theme="dark"] .unauth-container .card .card-body {
        animation-delay: 180ms;
      }
    }

    /* ═══════════════════════════════════════════
       OFFLINE INDICATOR
       ═══════════════════════════════════════════ */
    .offline-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      background: #f57c00;
      color: white;
      text-align: center;
      padding: 6px 16px;
      font-size: 0.8125rem;
      font-weight: 500;
      transform: translateY(-100%);
      transition: transform var(--transition-base);
    }
    .offline-bar.visible { transform: translateY(0); }

    /* ═══════════════════════════════════════════
       ALERTS
       ═══════════════════════════════════════════ */
    .alert {
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
      font-size: 0.875rem;
    }
    .alert-dismissible .btn-close {
      padding: 0.5rem;
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
    }

    /* ═══════════════════════════════════════════
       MODAL IMPROVEMENTS
       ═══════════════════════════════════════════ */
    .modal-content {
      background: var(--surface);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
    }
    .modal-header { border-bottom-color: var(--border-color); }
    .modal-footer { border-top-color: var(--border-color); }
    .btn-close {
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      border-radius: 50%;
      opacity: 0.6;
      transition: opacity var(--transition-base);
    }
    .btn-close:hover { opacity: 1; }

    @media (max-width: 575.98px) {
      .modal-dialog {
        margin: 0.5rem;
        max-width: none;
      }
      .modal-content {
        border-radius: var(--radius-sm);
      }
    }

    /* ═══════════════════════════════════════════
       DROPDOWN MENU
       ═══════════════════════════════════════════ */
    .dropdown-menu {
      background: var(--surface);
      border-color: var(--border-color);
      box-shadow: var(--shadow-lg);
      border-radius: var(--radius-sm);
      overflow-y: visible !important;
      max-height: none !important;
      z-index: 2100;
    }
    /* Keep notifications dropdown scrollable (shows scrollbar) */
    .dropdown-menu.notif-dropdown {
      overflow-y: auto !important;
      max-height: 480px !important;
    }
    .dropdown-item {
      color: var(--text-primary);
      min-height: 40px;
      display: flex;
      align-items: center;
    }
    .dropdown-item:hover, .dropdown-item:focus { background: var(--hover-bg); color: var(--primary-color); }
    .dropdown-divider { border-color: var(--border-color); }

    .file-card,
    .file-row-list {
      position: relative;
      z-index: 1;
    }
    .file-card.dropdown-open,
    .file-row-list.dropdown-open {
      z-index: 30;
    }

    /* ═══════════════════════════════════════════
       PROGRESS BAR
       ═══════════════════════════════════════════ */
    .progress {
      background-color: var(--background);
      border-radius: 2px;
      overflow: hidden;
    }
    .progress-bar { transition: width 0.3s ease; }

    /* ═══════════════════════════════════════════
       SCROLL TO TOP FAB
       ═══════════════════════════════════════════ */
    .scroll-top-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--primary-color);
      color: white;
      border: none;
      box-shadow: var(--shadow-md);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all var(--transition-base);
      z-index: 500;
      touch-action: manipulation;
    }
    .scroll-top-btn.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .scroll-top-btn:hover { background: var(--primary-hover); transform: translateY(-2px); }
    .scroll-top-btn:active { transform: translateY(0); }

    /* ═══════════════════════════════════════════
       UTILITY CLASSES
       ═══════════════════════════════════════════ */
    .text-truncate-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* ═══════════════════════════════════════════
       RESPONSIVE QUICK FOLDERS
       ═══════════════════════════════════════════ */
    .quick-folders-scroll {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(8px, 1.5vw, 16px);
      overflow: visible;
      padding-bottom: 8px;
    }
    .quick-folders-scroll::-webkit-scrollbar { display: none; }
    .quick-folders-scroll > * { flex-shrink: 0; }

    /* ═══════════════════════════════════════════
       TOAST NOTIFICATIONS
       ═══════════════════════════════════════════ */
    .toast-container {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 1060;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: min(400px, calc(100vw - 32px));
    }
    @media (max-width: 575.98px) {
      .toast-container {
        left: 16px;
        right: 16px;
        max-width: none;
      }
    }
    .toast-item {
      background: var(--surface-elevated);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      box-shadow: var(--shadow-lg);
      display: flex;
      align-items: center;
      gap: 12px;
      animation: slideIn 0.3s ease;
      font-size: 0.875rem;
    }
    @keyframes slideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideOut {
      from { transform: translateX(0); opacity: 1; }
      to { transform: translateX(100%); opacity: 0; }
    }
    .toast-item.toast-out { animation: slideOut 0.3s ease forwards; }

    /* ═══════════════════════════════════════════
       PRINT STYLES
       ═══════════════════════════════════════════ */
    @media print {
      .sidebar, .top-nav, .scroll-top-btn, .sidebar-overlay, .offline-bar { display: none !important; }
      .main-content { height: auto; overflow: visible; }
      .content-area { overflow: visible; padding: 0; }
      body { background: white; }
    }

    /* ═══════════════════════════════════════════
       SELECTION COLOR
       ═══════════════════════════════════════════ */
    ::selection {
      background: var(--primary-light);
      color: var(--primary-color);
    }

     /* ── New-button dropdown: escape sidebar overflow when collapsed ── */
    .new-dropdown-wrapper { position: relative; }
    .new-dropdown         { min-width: 200px; }
    .sidebar--collapsed .new-dropdown.show,
    .sidebar.collapsed  .new-dropdown.show {
      position: fixed !important;
      z-index: 9999 !important;
    }

    /* ══════════════════════════════════════════════════════════
       FIX 1 — User dropdown: identity header (avatar + name/email)
       ══════════════════════════════════════════════════════════ */
    .user-dropdown-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px 10px;
    }
    .user-dropdown-avatar {
      flex-shrink: 0;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--bs-primary, #1a73e8);
      color: #fff;
      font-size: 0.85rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .user-dropdown-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .user-dropdown-info {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .user-dropdown-name {
      font-size: 0.875rem;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }
    .user-dropdown-email {
      font-size: 0.75rem;
      color: var(--bs-secondary-color, #6c757d);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }

    /* ══════════════════════════════════════════════════════════
       FIX 2 — Top nav-right: center items vertically & keep
       them flush-right without any accidental left drift
       ══════════════════════════════════════════════════════════ */
    .nav-right {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      gap: 4px;
    }
    /* Make every direct child of nav-right sit on the same baseline */
    .nav-right > *,
    .nav-right > .dropdown {
      display: flex !important;
      align-items: center !important;
    }

    /* ══════════════════════════════════════════════════════════
       FIX 3 — Collapsed sidebar: centre every nav icon
       ══════════════════════════════════════════════════════════
       When the sidebar collapses to icon-only mode the nav-links
       lose their text but the icon is still rendered inside the
       anchor.  We need every link/button to:
         • fill the full sidebar width
         • centre its icon horizontally
         • have no residual left padding that shifts it off-centre
    */

    /* Collapsed state — covers common class-name conventions */
    .sidebar.collapsed        .nav-link,
    .sidebar--collapsed       .nav-link,
    .sidebar-collapsed        .nav-link,
    .sidebar.collapsed        .admin-nav-btn,
    .sidebar--collapsed       .admin-nav-btn,
    .sidebar-collapsed        .admin-nav-btn {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      width: 100% !important;
    }

    /* Also centre the brand logo icon when collapsed */
    .sidebar.collapsed        .brand-logo,
    .sidebar--collapsed       .brand-logo,
    .sidebar-collapsed        .brand-logo {
      justify-content: center !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Centre the New button when collapsed */
    .sidebar.collapsed        .new-dropdown-wrapper,
    .sidebar--collapsed       .new-dropdown-wrapper,
    .sidebar-collapsed        .new-dropdown-wrapper {
      display: flex !important;
      justify-content: center !important;
      width: 100% !important;
    }
    .sidebar.collapsed        .new-btn,
    .sidebar--collapsed       .new-btn,
    .sidebar-collapsed        .new-btn {
      padding-left: 0 !important;
      padding-right: 0 !important;
      justify-content: center !important;
      width: 44px !important;       /* icon-only circle */
      min-width: unset !important;
    }

    /* Hide text labels when collapsed */
    .sidebar.collapsed        .nav-text,
    .sidebar--collapsed       .nav-text,
    .sidebar-collapsed        .nav-text,
    .sidebar.collapsed        .new-btn-text,
    .sidebar--collapsed       .new-btn-text,
    .sidebar-collapsed        .new-btn-text,
    .sidebar.collapsed        .brand-text,
    .sidebar--collapsed       .brand-text,
    .sidebar-collapsed        .brand-text,
    .sidebar.collapsed        .chevron,
    .sidebar--collapsed       .chevron,
    .sidebar-collapsed        .chevron {
      display: none !important;
    }

/* ═══════════════════════════════════════════════════════════
   SECTION: ADMIN USER MANAGEMENT
   ═══════════════════════════════════════════════════════════ */

/* ── Search & Filter Bar ── */
.admin-search-form {
  max-width: 600px;
}
.admin-search-form .search-box {
  max-width: 320px;
}
.admin-search-form .form-select {
  max-width: 160px;
  font-size: 0.8rem;
  padding: 0.35rem 2rem 0.35rem 0.6rem;
  min-height: 36px;
}
.admin-search-form .form-control {
  font-size: 0.82rem;
  min-height: 36px;
}

/* ── Compact Avatar ── */
.user-avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.65rem;
  overflow: hidden;
  flex-shrink: 0;
}
.user-avatar-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Compact User Info ── */
.user-info-name {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
}
.user-info-email {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* ── Compact Department Badge ── */
.dept-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.3;
}
.dept-code {
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dept-name {
  font-weight: 500;
}

/* ── Compact Profile Badges ── */
.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  line-height: 1.2;
}
.profile-badge i {
  font-size: 0.6rem;
}
.profile-approved {
  background: rgba(56, 142, 60, 0.12);
  color: #388e3c;
}
.profile-pending {
  background: rgba(245, 124, 0, 0.12);
  color: #c77700;
}
.profile-inactive {
  background: var(--danger-bg);
  color: var(--danger-color);
  margin-left: 3px;
}
.profile-missing {
  background: rgba(128, 134, 139, 0.12);
  color: var(--text-tertiary);
}

/* Dark mode */
[data-bs-theme="dark"] .profile-approved {
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
}
[data-bs-theme="dark"] .profile-pending {
  background: rgba(255, 167, 38, 0.2);
  color: #ffb74d;
}
[data-bs-theme="dark"] .profile-missing {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-tertiary);
}

/* ── Compact Role Badges ── */
.role-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.2;
}
.role-badge-admin {
  background: rgba(245, 124, 0, 0.12);
  color: #c77700;
}
.role-badge-staff {
  background: rgba(56, 142, 60, 0.12);
  color: #388e3c;
}
.role-badge-user {
  background: var(--primary-light);
  color: var(--primary-color);
}
[data-bs-theme="dark"] .role-badge-admin {
  background: rgba(255, 167, 38, 0.2);
  color: #ffb74d;
}
[data-bs-theme="dark"] .role-badge-staff {
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
}

/* ── Compact Status Badges ── */
.status-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
}
.status-badge-active {
  background: rgba(56, 142, 60, 0.12);
  color: #388e3c;
}
.status-badge-inactive {
  background: var(--danger-bg);
  color: var(--danger-color);
}
.status-badge i {
  font-size: 0.6rem;
}
[data-bs-theme="dark"] .status-badge-active {
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
}

/* ── Compact Storage Cell ── */
.storage-cell {
  min-width: 110px;
}
.storage-cell-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  margin-bottom: 3px;
  color: var(--text-secondary);
}
.storage-cell .progress {
  height: 3px;
}

/* ── Compact Date Cell ── */
.date-cell {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Pagination ── */
.pagination-justified {
  justify-content: center;
}

/* ═══════════════════════════════════════════
   COMPACT TABLE OVERRIDES
   ═══════════════════════════════════════════ */

/* Tighten the cd-table from style.css */
.cd-table {
  font-size: 0.78rem;
}
.cd-table thead th {
  padding: 8px 10px;
  font-size: 0.65rem;
}
.cd-table tbody td {
  padding: 8px 10px;
}

/* Reduce name column gap */
.cd-table td .d-flex.align-items-center.gap-3 {
  gap: 8px !important;
}

/* ═══════════════════════════════════════════
   COMPACT EDIT USER MODAL
   ═══════════════════════════════════════════ */

/* Modal sizing */
#editUserModal .modal-dialog {
  max-width: 420px;
}

/* Compact header */
#editUserModal .modal-header {
  padding: 12px 16px;
}
#editUserModal .modal-header .modal-title {
  font-size: 0.95rem;
  font-weight: 600;
}
#editUserModal .modal-header .btn-close {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

/* Compact body with scrollbar */
#editUserModal .modal-body {
  padding: 16px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
#editUserModal .modal-body::-webkit-scrollbar {
  width: 6px;
}
#editUserModal .modal-body::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}
#editUserModal .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 3px;
}
#editUserModal .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-tertiary);
}

/* Dark mode scrollbar */
[data-bs-theme="dark"] #editUserModal .modal-body {
  scrollbar-color: var(--border-color) transparent;
}
[data-bs-theme="dark"] #editUserModal .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
}

/* Compact section title */
.modal-section-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 2px;
}

/* Compact toggle row */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.toggle-row-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}
.toggle-row-help {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Compact switch */
.form-switch-lg {
  width: 2.6em !important;
  height: 1.3em !important;
  cursor: pointer;
  margin-top: 2px;
}

/* Compact divider */
.modal-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 14px 0;
  opacity: 0.6;
}

/* Compact quota */
.quota-input {
  max-width: 160px;
}
.quota-input .form-control {
  font-size: 0.82rem;
  min-height: 34px;
  padding: 0.3rem 0.6rem;
}
.quota-help {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Compact footer */
#editUserModal .modal-footer {
  padding: 10px 16px;
}
#editUserModal .modal-footer .btn {
  font-size: 0.82rem;
  padding: 0.375rem 0.875rem;
  min-height: 34px;
}

/* Button colors */
.btn-modal-primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-modal-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* Mobile modal */
@media (max-width: 575.98px) {
  #editUserModal .modal-dialog {
    margin: 0.4rem;
    max-width: none;
  }
  #editUserModal .modal-body {
    max-height: calc(100vh - 130px);
    padding: 12px;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE COLUMN HIDING
   ═══════════════════════════════════════════ */

@media (max-width: 1199.98px) {
  .cd-table thead th:nth-child(3),
  .cd-table tbody td:nth-child(3) {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .cd-table thead th:nth-child(6),
  .cd-table tbody td:nth-child(6) {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .cd-table thead th:nth-child(2),
  .cd-table tbody td:nth-child(2) {
    display: none;
  }
  .cd-table thead th:nth-child(5),
  .cd-table tbody td:nth-child(5) {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .cd-table thead th:nth-child(4),
  .cd-table tbody td:nth-child(4) {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   SECTION: ADMIN PROFILE MANAGEMENT
   ═══════════════════════════════════════════════════════════ */

/* ── Search & Filter Bar ── */
.admin-search-form {
  max-width: 720px;
}
.admin-search-form .search-box {
  max-width: 320px;
}
.admin-search-form .form-select {
  max-width: 140px;
  font-size: 0.8rem;
  padding: 0.35rem 2rem 0.35rem 0.6rem;
  min-height: 36px;
}
.admin-search-form .form-control {
  font-size: 0.82rem;
  min-height: 36px;
}

/* ── Compact Avatar ── */
.profile-avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.65rem;
  overflow: hidden;
  flex-shrink: 0;
}
.profile-avatar-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Compact Name + Email ── */
.profile-name {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
}
.profile-email {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* ── Compact Employee ID ── */
.empid-code {
  font-size: 0.7rem;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--background);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

/* ── Compact Department Badge ── */
.dept-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.3;
}
.dept-code {
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dept-name {
  font-weight: 500;
}

/* ── Compact Profile Badges ── */
.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  line-height: 1.2;
}
.profile-badge i {
  font-size: 0.6rem;
}
.profile-approved {
  background: rgba(56, 142, 60, 0.12);
  color: #388e3c;
}
.profile-pending {
  background: rgba(245, 124, 0, 0.12);
  color: #c77700;
}
.profile-linked {
  background: var(--primary-light);
  color: var(--primary-color);
}
.profile-unlinked {
  background: rgba(128, 134, 139, 0.1);
  color: var(--text-tertiary);
}
.profile-inactive {
  background: var(--danger-bg);
  color: var(--danger-color);
}

/* Dark mode */
[data-bs-theme="dark"] .profile-approved {
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
}
[data-bs-theme="dark"] .profile-pending {
  background: rgba(255, 167, 38, 0.2);
  color: #ffb74d;
}
[data-bs-theme="dark"] .profile-linked {
  background: rgba(74, 158, 255, 0.15);
  color: var(--primary-color);
}
[data-bs-theme="dark"] .profile-unlinked {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-tertiary);
}

/* ── Compact Date Cell ── */
.date-cell {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
  line-height: 1.3;
}
.date-cell-by {
  font-size: 0.65rem;
  color: var(--text-tertiary);
}

/* ── Action buttons ── */
.action-success:hover {
  background: rgba(56, 142, 60, 0.12);
  color: #388e3c;
}
.action-warn:hover {
  background: rgba(245, 124, 0, 0.12);
  color: #c77700;
}
.action-danger:hover {
  background: var(--danger-bg);
  color: var(--danger-color);
}

/* ── Pagination ── */
.pagination-justified {
  justify-content: center;
}

/* ═══════════════════════════════════════════
   COMPACT TABLE STYLES
   ═══════════════════════════════════════════ */

/* Tighten Bootstrap table defaults */
.profile-table.cd-table {
  font-size: 0.8rem;
}
.profile-table.cd-table thead th {
  padding: 8px 10px;
  font-size: 0.65rem;
}
.profile-table.cd-table tbody td {
  padding: 8px 10px;
  font-size: 0.78rem;
}

/* Reduce row hover padding shifts */
.profile-table.cd-table tbody tr {
  transition: none;
}

/* ── Compact cell content ── */
.profile-table .col-name .d-flex {
  gap: 8px !important;
}
.profile-table .col-job,
.profile-table .col-phone {
  font-size: 0.75rem;
}

/* ═══════════════════════════════════════════
   TABLE / CARD VIEW TOGGLE
   ═══════════════════════════════════════════ */

.profile-cards {
  display: none;
}
.profile-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.profile-table-wrap::-webkit-scrollbar {
  height: 5px;
}
.profile-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.profile-table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

/* Column hiding breakpoints */
@media (max-width: 1399.98px) {
  .profile-table .col-date { display: none; }
}
@media (max-width: 1199.98px) {
  .profile-table .col-phone { display: none; }
}
@media (max-width: 991.98px) {
  .profile-table .col-job { display: none; }
}
@media (max-width: 767.98px) {
  .profile-table .col-empid,
  .profile-table .col-dept { display: none; }
}
@media (max-width: 575.98px) {
  .profile-table-wrap { display: none; }
  .profile-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════
   COMPACT PROFILE CARDS (mobile)
   ═══════════════════════════════════════════ */

.profile-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 12px;
  transition: all 0.2s ease;
}
.profile-card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.profile-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.profile-card-info {
  flex: 1;
  min-width: 0;
}
.profile-card-name {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-card-email {
  font-size: 0.72rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 8px;
}
.profile-meta-item {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.profile-card-status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.profile-card-phone {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.profile-card-phone i {
  font-size: 0.7rem;
  margin-right: 3px;
}

.profile-card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-color);
  padding-top: 6px;
}

/* ═══════════════════════════════════════════
   COMPACT MODAL STYLES
   ═══════════════════════════════════════════ */

/* Modal dialog sizing */
.modal-dialog.modal-lg {
  max-width: 640px;
}
@media (min-width: 992px) {
  .modal-dialog.modal-lg {
    max-width: 680px;
  }
}

/* Compact header */
.modal-header {
  padding: 12px 16px;
}
.modal-header .modal-title {
  font-size: 0.95rem;
  font-weight: 600;
}
.modal-header .btn-close {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
}

/* Compact body with scrollbar */
.modal-dialog-scrollable .modal-body {
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
  max-height: calc(100vh - 160px);
  padding: 16px;
}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 3px;
}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-tertiary);
}

/* Dark mode scrollbar */
[data-bs-theme="dark"] .modal-dialog-scrollable .modal-body {
  scrollbar-color: var(--border-color) transparent;
}
[data-bs-theme="dark"] .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
}
[data-bs-theme="dark"] .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-secondary);
}

/* Compact form elements in modal */
.modal-body .form-label {
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.modal-body .form-control,
.modal-body .form-select {
  font-size: 0.82rem;
  min-height: 34px;
  padding: 0.3rem 0.6rem;
}
.modal-body textarea.form-control {
  min-height: auto;
}

/* Tighten row gaps */
.modal-body .row.g-3 {
  --bs-gutter-y: 10px;
}
.modal-body .row.g-3.mt-0 {
  margin-top: 0 !important;
}

/* Compact section title */
.modal-section-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 4px;
}

/* Compact divider */
.modal-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 14px 0;
  opacity: 0.6;
}

/* Compact toggle row */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.toggle-row-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}
.toggle-row-help {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Smaller switches */
.form-switch-lg {
  width: 2.6em !important;
  height: 1.3em !important;
  cursor: pointer;
  margin-top: 2px;
}

/* Compact quota input */
.quota-input {
  max-width: 160px;
}
.quota-help {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Compact footer */
.modal-footer {
  padding: 10px 16px;
}
.modal-footer .btn {
  font-size: 0.82rem;
  padding: 0.375rem 0.875rem;
  min-height: 34px;
}

/* Button colors */
.btn-modal-primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-modal-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* Modal viewport limits */
.modal-dialog-scrollable.modal-lg {
  max-height: 92vh;
}
.modal-dialog-scrollable.modal-lg .modal-content {
  max-height: 92vh;
}

/* Mobile modal */
@media (max-width: 575.98px) {
  .modal-dialog.modal-lg {
    margin: 0.4rem;
    max-width: none;
  }
  .modal-dialog-scrollable .modal-body {
    max-height: calc(100vh - 130px);
    padding: 12px;
  }
  .modal-dialog-scrollable.modal-lg,
  .modal-dialog-scrollable.modal-lg .modal-content {
    max-height: calc(100vh - 0.8rem);
  }
  .modal-body .form-control,
  .modal-body .form-select {
    font-size: 16px; /* Prevent iOS zoom */
  }
}

/* ═══════════════════════════════════════════
   COMPACT TABLE CELL WIDTHS
   ═══════════════════════════════════════════ */

.profile-table .col-name {
  min-width: 160px;
}
.profile-table .col-empid {
  min-width: 60px;
}
.profile-table .col-dept {
  min-width: 100px;
}
.profile-table .col-job {
  min-width: 110px;
}
.profile-table .col-phone {
  min-width: 90px;
}
.profile-table .col-status {
  min-width: 110px;
}
.profile-table .col-date {
  min-width: 90px;
}
.profile-table .col-actions {
  min-width: 90px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   SCROLL HINT
   ═══════════════════════════════════════════ */

.profile-table-wrap {
  position: relative;
}
.profile-table-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(to right, transparent, var(--surface));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.profile-table-wrap.can-scroll-right::after {
  opacity: 1;
}
[data-bs-theme="dark"] .profile-table-wrap::after {
  background: linear-gradient(to right, transparent, var(--surface));
}

/* ═══════════════════════════════════════════════════════════
   SECTION: SHARE DETAIL
   ═══════════════════════════════════════════════════════════ */

/* ── Back button ── */
.back-btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.back-btn-link:hover {
  background: var(--hover-bg);
}
.back-btn-link i {
  font-size: 1.25rem;
}

/* ── Share permission badge ── */
.share-perm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.3;
}
.share-perm-badge i {
  font-size: 0.65rem;
}

.share-perm-view {
  background: var(--primary-light);
  color: var(--primary-color);
}
.share-perm-download {
  background: #e8f5e9;
  color: #388e3c;
}
.share-perm-comment {
  background: #fff3e0;
  color: #c77700;
}
.share-perm-edit {
  background: #ffebee;
  color: #c62828;
}

[data-bs-theme="dark"] .share-perm-download {
  background: rgba(56, 142, 60, 0.15);
}
[data-bs-theme="dark"] .share-perm-comment {
  background: rgba(245, 124, 0, 0.15);
}
[data-bs-theme="dark"] .share-perm-edit {
  background: rgba(198, 40, 40, 0.15);
}

/* ── Section title (compact) ── */
.modal-section-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 10px;
}

/* ── Shared item row (reused cd-row pattern) ── */
.shared-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 6px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s ease;
  min-height: 48px;
}
.shared-item-row:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
}

.shared-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm, 8px);
  font-size: 1rem;
  flex-shrink: 0;
}
.shared-icon.folder {
  background: #fff3e0;
  color: #f57c00;
}
.shared-icon.file {
  background: var(--primary-light);
  color: var(--primary-color);
}

[data-bs-theme="dark"] .shared-icon.folder {
  background: rgba(245, 124, 0, 0.15);
}

.shared-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.85rem;
}

.shared-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.shared-time {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.shared-perm-badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.shared-perm-badge.download {
  background: var(--primary-light);
  color: var(--primary-color);
}
.shared-perm-badge.view {
  background: #e8f5e9;
  color: #388e3c;
}
.shared-perm-badge.edit {
  background: #fff3e0;
  color: #c77700;
}

[data-bs-theme="dark"] .shared-perm-badge.view {
  background: rgba(56, 142, 60, 0.15);
}
[data-bs-theme="dark"] .shared-perm-badge.edit {
  background: rgba(245, 124, 0, 0.15);
}

/* ── Card header (compact) ── */
.card-header-themed {
  background: var(--surface);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 10px 16px;
}
[data-bs-theme="dark"] .card-header-themed {
  background: var(--surface);
}

/* ── Info table (compact reuse of profile table style) ── */
.profile-details-table tbody tr {
  border-bottom: 1px solid var(--border-color);
}
.profile-details-table tbody tr:last-child {
  border-bottom: none;
}
.profile-details-table td {
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 0.82rem;
}
.profile-label {
  color: var(--text-secondary);
  width: 100px;
  white-space: nowrap;
  font-size: 0.78rem;
}
.profile-value {
  font-weight: 500;
  font-size: 0.82rem;
}

/* ── Document preview container ── */
.doc-preview-container {
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}
.doc-preview-image {
  max-height: 600px;
  object-fit: contain;
  width: 100%;
}

/* ── File icon large (empty state) ── */
.file-icon-large {
  font-size: 3.5rem;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

/* ── Empty state (compact) ── */
.empty-state {
  text-align: center;
  padding: clamp(30px, 8vw, 60px) clamp(16px, 4vw, 32px);
  color: var(--text-secondary);
}
.empty-state i {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 12px;
  color: var(--text-tertiary);
}
.empty-state h5, .empty-state h6 {
  color: var(--text-primary);
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.empty-state p {
  font-size: 0.82rem;
  max-width: 320px;
  margin: 0 auto;
}

/* ── Employee ID code style (reused for share link etc) ── */
.empid-code {
  font-size: 0.7rem;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--background);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

/* ── Action button (compact) ── */
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.action-btn:hover {
  background: var(--hover-bg);
  color: var(--primary-color);
}

/* ── Dropdown action alignment ── */
.cd-action {
  margin-left: auto;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 767.98px) {
  .shared-item-row {
    gap: 8px;
    padding: 8px 12px;
  }
  .shared-time {
    display: none;
  }
  .doc-preview-image {
    max-height: 400px;
  }
}

@media (max-width: 575.98px) {
  .shared-item-row {
    gap: 6px;
    padding: 8px 10px;
    margin-bottom: 4px;
  }
  .shared-icon {
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
  }
  .shared-meta {
    display: none;
  }
  .section-title {
    font-size: 1rem;
  }
}