/* =========================================================================
    GOVOPS Design System
    Token-driven, dark/light aware. Every color, radius, shadow and spacing
    value used below flows from the custom properties defined here so that
    toggling [data-theme] on <html> re-themes the entire application.
    ========================================================================= */

  :root {
    /* Brand / accent — LGU Solano theme: blue, yellow, white, black */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-soft: #eaf1fd;
    --color-primary-strong: #1e40af;
    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);

    --color-accent-yellow: #facc15;
    --color-accent-yellow-soft: #fef9e7;

    --color-secondary: #64748b;
    --color-secondary-soft: #eef1f4;

    --color-success: #16a34a;
    --color-success-soft: #e5f7ec;
    --color-warning: #b45309;
    --color-warning-soft: #fef3e2;
    --color-danger: #dc2626;
    --color-danger-soft: #fdecea;
    --color-info: #0369a1;
    --color-info-soft: #e0f2fe;

    --color-light: #f8fafc;
    --color-dark: #111827;

    /* Surfaces */
    --bg-body: #f4f5fb;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f8fafc;
    --bg-sidebar: #f7fafc;
    --sidebar-border: rgba(15, 23, 42, 0.08);
    --bg-hover: #eaf2ff;
    --bg-input: #f8fafc;

    /* Borders */
    --border-color: #e7e9f2;
    --border-color-strong: #d8dce6;

    /* Text */
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #8a93a2;
    --text-on-primary: #ffffff;

    /* Typography */
    --font-sans: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Poppins', 'Sora', 'Manrope', var(--font-sans);
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --text-xs: 0.72rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.05rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.55rem;
    --text-3xl: 1.9rem;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* Radius scale */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.07), 0 1px 3px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.10), 0 3px 8px rgba(16, 24, 40, 0.05);
    --shadow-glow: 0 10px 26px rgba(37, 99, 235, 0.28);

    /* Motion */
    --transition-fast: 120ms ease;
    --transition-base: 190ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --sidebar-width: 252px;
    --sidebar-width-collapsed: 80px;
    --semi-sidebar-width: 224px;
    --topbar-height: 68px;
  }

  :root[data-theme='dark'] {
    --color-primary: #4da3ff;
    --color-primary-hover: #7cc0ff;
    --color-primary-soft: rgba(77, 163, 255, 0.16);
    --color-primary-strong: #bfe0ff;
    --gradient-primary: linear-gradient(135deg, #5eb0ff 0%, #2563eb 100%);

    --color-secondary: #94a3b8;
    --color-secondary-soft: rgba(148, 163, 184, 0.14);

    --color-success: #34d399;
    --color-success-soft: rgba(52, 211, 153, 0.14);
    --color-warning: #fbbf24;
    --color-warning-soft: rgba(251, 191, 36, 0.14);
    --color-danger: #f87171;
    --color-danger-soft: rgba(248, 113, 113, 0.14);
    --color-info: #38bdf8;
    --color-info-soft: rgba(56, 189, 248, 0.14);

    --color-light: #1b1b26;
    --color-dark: #f4f4f6;

    --bg-body: #0c0c13;
    --bg-surface: #15151f;
    --bg-surface-alt: #1a1a26;
    --bg-sidebar: #0f172a;
    --sidebar-border: #2d3748;
    --bg-hover: rgba(77, 163, 255, 0.10);
    --bg-input: #1a1a26;

    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-strong: rgba(255, 255, 255, 0.14);

    --text-primary: #f5f5f8;
    --text-secondary: #c7c9db;
    --text-muted: #94a3b8;
    --text-on-primary: #ffffff;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 22px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 10px 30px rgba(77, 163, 255, 0.38);
  }

  /* Respect the OS preference the first time a visitor arrives, before any
    explicit choice is saved. theme-init.js promotes this to an explicit
    data-theme attribute (and localStorage) on the very first paint. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']):not([data-theme='dark']) {
      color-scheme: dark;
    }
  }

  * {
    box-sizing: border-box;
  }

  [hidden] {
    display: none !important;
  }

  html {
    color-scheme: light;
    /* overflow-x: hidden (not clip) on the viewport still counts fixed-position
      descendants — e.g. .sidebar/.profile-drawer's closed-state
      translateX(±100%) — toward the document's scrollable overflow per the
      CSS Overflow spec. clip has no such carve-out, so it actually prevents
      the horizontal scrollbar/overflow those off-canvas panels would
      otherwise cause on narrow viewports. overflow-y is left alone (defaults
      to visible->auto) so normal page scrolling is unaffected. */
    overflow-x: clip;
  }

  html[data-theme='dark'] {
    color-scheme: dark;
  }

  body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg-body);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition-slow), color var(--transition-slow);
    overflow-x: clip;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-sans);
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  a {
    color: var(--color-primary);
  }

  ::selection {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: var(--border-color-strong);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-body);
  }

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

  /* =========================================================================
    Form controls (global) — one consistent look everywhere, no per-page CSS
    ========================================================================= */

  label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
  }

  input:not([type='checkbox']):not([type='radio']):not([type='file']),
  select,
  textarea {
    width: 100%;
    padding: 0.72rem 0.9rem;
    margin-bottom: 1.1rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: inherit;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  }

  textarea {
    resize: vertical;
    min-height: 5.5rem;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--text-muted);
  }

  input:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--bg-surface);
    box-shadow: 0 0 0 4px var(--color-primary-soft);
  }

  select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a93a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.5rem;
  }

  input[type='date'],
  input[type='time'] {
    color-scheme: light;
  }

  :root[data-theme='dark'] input[type='date'],
  :root[data-theme='dark'] input[type='time'] {
    color-scheme: dark;
  }

  input[type='checkbox'],
  input[type='radio'] {
    accent-color: var(--color-primary);
    width: 17px;
    height: 17px;
    cursor: pointer;
    flex-shrink: 0;
  }

  input[type='file'] {
    width: 100%;
    padding: 0.65rem 0.8rem;
    margin-bottom: 1.1rem;
    border: 1.5px dashed var(--border-color-strong);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: var(--text-sm);
  }

  input[type='file']::file-selector-button {
    padding: 0.45rem 0.9rem;
    margin-right: 0.85rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast);
  }

  input[type='file']::file-selector-button:hover {
    background: var(--color-primary);
    color: var(--text-on-primary);
  }

  .field-hint {
    margin: -0.65rem 0 1.1rem;
    color: var(--text-muted);
    font-size: var(--text-xs);
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
  }

  @media (max-width: 520px) {
    .form-row {
      grid-template-columns: 1fr;
      gap: 0;
    }
  }

  .link-back {
    display: inline-block;
    margin-top: 1rem;
    color: var(--color-primary);
    font-size: var(--text-sm);
    text-decoration: none;
  }

  .link-back:hover {
    text-decoration: underline;
  }

  .link-button {
    background: none;
    border: none;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--text-sm);
    font-family: inherit;
    padding: 0.5rem 0;
  }

  /* =========================================================================
    Alerts
    ========================================================================= */

  .form-warning {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: 1.1rem;
    border: 1px solid transparent;
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 25%, transparent);
  }

  /* =========================================================================
    Buttons — one reusable system
    ========================================================================= */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.68rem 1.25rem;
    background: var(--gradient-primary);
    color: var(--text-on-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-glow);
    transition: filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
  }

  .btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(0);
    filter: brightness(0.97);
  }

  .btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .btn:disabled,
  .btn[aria-disabled='true'] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    filter: none;
    box-shadow: none;
  }

  .btn.is-loading {
    color: transparent;
    pointer-events: none;
    position: relative;
  }

  .btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: btn-spin 0.6s linear infinite;
  }

  @keyframes btn-spin {
    to { transform: rotate(360deg); }
  }

  .btn-secondary {
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    border-color: var(--border-color);
    box-shadow: none;
  }

  .btn-secondary:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    filter: none;
    transform: translateY(-1px);
  }

  .btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    box-shadow: none;
  }

  .btn-outline:hover {
    background: var(--color-primary-soft);
    filter: none;
    transform: translateY(-1px);
  }

  .btn-danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    box-shadow: none;
  }

  .btn-danger:hover {
    background: var(--color-danger);
    color: #fff;
    filter: none;
    transform: translateY(-1px);
  }

  .btn-success {
    background: var(--color-success-soft);
    color: var(--color-success);
    box-shadow: none;
  }

  .btn-success:hover {
    background: var(--color-success);
    color: #fff;
    filter: none;
    transform: translateY(-1px);
  }

  .btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
    border-color: transparent;
  }

  .btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    filter: none;
  }

  .btn-block {
    width: 100%;
    justify-content: center;
  }

  .btn-small {
    padding: 0.4rem 0.85rem;
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
  }

  .table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  /* =========================================================================
    App shell — sidebar + topbar
    ========================================================================= */

  .admin-body {
    background: var(--bg-body);
  }

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

  .sidebar-overlay {
    display: none;
  }

  .sidebar {
    --nav-label-opacity: 1;
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    z-index: 40;
    transition: width var(--transition-slow);
  }

  .sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.35rem 1.75rem;
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
  }

  .sidebar-brand-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  .sidebar-brand-icon:hover {
    opacity: 0.85;
    transform: scale(1.04);
  }

  .sidebar-brand-icon:active {
    transform: scale(0.96);
  }

  .sidebar-brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
  }

  .sidebar-brand-name {
    white-space: nowrap;
    opacity: var(--nav-label-opacity);
    transition: opacity var(--transition-fast);
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .sidebar-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.68rem 0.85rem;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .sidebar-nav a svg,
  .sidebar-logout svg {
    flex-shrink: 0;
  }

  .sidebar-nav a .nav-label {
    opacity: var(--nav-label-opacity);
    transition: opacity var(--transition-fast);
  }

  .sidebar-nav a:hover {
    background: var(--bg-hover);
    color: var(--color-primary);
  }

  .sidebar-nav a.active {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: var(--shadow-glow);
  }

  .sidebar-footer {
    margin-top: auto;
    padding-top: 0.75rem;
  }

  .sidebar-logout {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.68rem 0.85rem;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .sidebar-logout:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }

  .sidebar-logout .nav-label {
    opacity: var(--nav-label-opacity);
  }

  /* Collapsed desktop sidebar: icons only, with a JS-positioned tooltip on
    hover (assets/js/theme.js). Not a CSS ::after: .sidebar has
    overflow-y: auto, and per the CSS overflow spec that forces overflow-x to
    compute as clipped too, so any tooltip drawn *inside* the sidebar box gets
    cut off at its right edge. The tooltip element lives in <body> instead. */
  .sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
    --nav-label-opacity: 0;
  }

  .sidebar.collapsed .sidebar-brand-row {
    flex-direction: column;
    gap: 0.75rem;
  }

  .sidebar.collapsed .sidebar-brand-name,
  .sidebar.collapsed .nav-label {
    width: 0;
    overflow: hidden;
  }

  .sidebar.collapsed .sidebar-nav a,
  .sidebar.collapsed .sidebar-logout {
    justify-content: center;
  }

  /* Fixed-position tooltip element (single shared node, moved/shown by
    theme.js) so it renders in <body>'s stacking context and is never clipped
    by .sidebar's overflow-y: auto. */
  .sidebar-tooltip {
    position: fixed;
    background: var(--text-primary);
    color: var(--bg-surface);
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: 200;
    box-shadow: var(--shadow-md);
  }

  .sidebar-tooltip.visible {
    opacity: 1;
  }

  /* Semi-sidebar (units list) */
  .semi-sidebar {
    width: var(--semi-sidebar-width);
    flex-shrink: 0;
    background: var(--bg-surface-alt);
    border-right: 1px solid var(--border-color);
    padding: 1.35rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }

  .semi-sidebar-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .semi-sidebar-head h2 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
  }

  .semi-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .semi-sidebar-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text-muted);
    transition: background var(--transition-fast), color var(--transition-fast),
      border-color var(--transition-fast), transform var(--transition-fast);
  }

  .semi-sidebar-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .semi-sidebar-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform var(--transition-fast), color var(--transition-fast);
  }

  .semi-sidebar-list a:hover {
    background: var(--bg-hover);
    border-color: var(--color-primary);
    color: var(--text-primary);
    transform: translateX(2px);
  }

  .semi-sidebar-list a:hover .semi-sidebar-chevron {
    color: var(--color-primary);
    transform: translateX(2px);
  }

  .semi-sidebar-list a.active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .semi-sidebar-list a.active .semi-sidebar-chevron {
    color: var(--color-primary);
  }

  .semi-sidebar-name {
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .semi-sidebar-code {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .semi-sidebar-list a.active .semi-sidebar-code {
    color: var(--color-primary);
  }

  .semi-sidebar-empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
  }

  /* Date filter (admin/units/_task_filter_sidebar.php), relocated into the
    semi-sidebar instead of a horizontal bar above the task table. Same
    .task-filter-bar/.date-filter-group markup and data attributes that
    assets/js/task_board_filter.js already targets — just stacked vertically
    here instead of the row layout those classes use elsewhere (e.g. the
    archived-tasks page). */
  .semi-sidebar .task-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    margin-bottom: 0;
  }

  .semi-sidebar .date-filter-group {
    flex-direction: column;
    align-items: stretch;
  }

  .semi-sidebar .date-range-select,
  .semi-sidebar .date-picker-input {
    width: 100%;
  }

  /* Task status subnav (admin/units/_status_subnav.php): nested under the
    "Units" link in the main sidebar, indented to sit like a subfolder under
    it. Reuses .filter-chip for the active/hover states and data-status hook
    that assets/js/task_board_filter.js already reads — just restyled flat
    and indented instead of the pill-chip look used in the semi-sidebar. */
  .sidebar-subnav {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.15rem 0 0.4rem 2.15rem;
  }

  .sidebar-subnav .filter-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    padding: 0.4rem 0.6rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
  }

  .sidebar-subnav .filter-chip:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }

  .sidebar-subnav .filter-chip.active {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
  }

  .sidebar-subnav .filter-chip-count {
    opacity: 0.7;
    font-weight: 700;
  }

  /* Collapsed desktop sidebar is icon-only — a text subfolder list has
    nowhere to go, so hide it (re-shown below for the mobile drawer, which
    ignores the collapsed state entirely). */
  .sidebar.collapsed .sidebar-subnav {
    display: none;
  }

  /* Main content column */
  .main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    padding: 0.9rem 2rem;
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--topbar-height);
  }

  .topbar-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 1 1 auto;
  }

  .mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
  }

  .topbar-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 340px;
  }

  .topbar-search form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 40px;
    padding: 0 0.9rem;
    border-radius: 999px;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
  }

  .topbar-search form:focus-within {
    border-color: var(--color-primary);
    color: var(--text-primary);
  }

  .topbar-search svg {
    flex-shrink: 0;
  }

  /* Overriding the global `input:not([type="checkbox"])...` form-field reset
    (assets/css/style.css ~line 237), whose triple :not([type="..."]) chain
    outweighs a single class selector — its own width/margin/padding/border/
    background/radius would otherwise draw a second boxed input nested inside
    this pill, which is what read as a "floating" textbox. */
  .topbar-search input {
    flex: 1;
    min-width: 0;
    width: auto !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    font-size: var(--text-sm);
    font-family: inherit;
    color: var(--text-primary);
  }

  .topbar-search input::placeholder {
    color: var(--text-muted);
  }

  .topbar-search input::-webkit-search-decoration,
  .topbar-search input::-webkit-search-cancel-button,
  .topbar-search input::-webkit-search-results-button,
  .topbar-search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
  }

  .topbar-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 420px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.4rem;
  }

  .topbar-search-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
  }

  .topbar-search-item:hover,
  .topbar-search-item.is-active {
    background: var(--bg-hover);
  }

  .topbar-search-item-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
  }

  .topbar-search-item-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .topbar-search-empty,
  .topbar-search-loading {
    margin: 0;
    padding: 0.9rem 0.7rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
  }

  .topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }

  .topbar-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
  }

  .topbar-user {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }

  .topbar-user-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
  }

  .topbar-user-role {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .topbar-profile-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    border-radius: var(--radius-md);
  }

  .topbar-profile-btn:hover .topbar-avatar {
    box-shadow: 0 0 0 3px var(--color-primary-soft);
  }

  .topbar-avatar-img {
    object-fit: cover;
  }

  /* =========================================================================
    Profile off-canvas drawer
    ========================================================================= */

  .profile-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 18, 0.45);
    z-index: 70;
  }

  body.profile-drawer-open .profile-drawer-overlay {
    display: block;
  }

  .profile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 71;
    width: 380px;
    max-width: 92vw;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
  }

  body.profile-drawer-open .profile-drawer {
    transform: translateX(0);
  }

  .profile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 1.6rem;
    border-bottom: 1px solid var(--border-color);
  }

  .profile-drawer-head h2 {
    margin: 0;
    font-size: var(--text-lg);
  }

  .profile-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
  }

  .profile-drawer-body {
    padding: 1.6rem;
  }

  .profile-avatar-form {
    display: flex;
    justify-content: center;
    margin-bottom: 1.6rem;
  }

  .profile-avatar-upload {
    position: relative;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    background: var(--gradient-primary);
  }

  .profile-avatar-upload img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .profile-avatar-fallback {
    color: #fff;
    font-size: var(--text-xl);
    font-weight: 700;
  }

  .profile-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: 2px solid var(--bg-surface);
  }

  .profile-field-form label {
    margin-top: 0.9rem;
  }

  .profile-field-form label:first-of-type {
    margin-top: 0;
  }

  .profile-field-static {
    margin-top: 0.9rem;
  }

  .profile-field-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
  }

  .profile-field-value {
    display: block;
    font-size: var(--text-base);
    color: var(--text-muted);
    padding: 0.72rem 0.9rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
  }

  .profile-field-form .btn {
    margin-top: 1.3rem;
  }

  .profile-drawer-divider {
    height: 1px;
    background: var(--border-color);
    margin: 1.6rem 0;
  }

  .profile-password-form h3 {
    margin: 0 0 1rem;
    font-size: var(--text-base);
  }

  /* Browser-notification preference row (profile drawer) */
  .push-pref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .push-pref-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .push-pref-status {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
  }

  .switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .switch-track {
    display: inline-flex;
    align-items: center;
    width: 46px;
    height: 26px;
    padding: 3px;
    border-radius: 999px;
    background: var(--border-color);
    transition: background var(--transition-base);
  }

  .switch-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform var(--transition-base);
  }

  .switch input:checked + .switch-track {
    background: var(--color-primary);
  }

  .switch input:checked + .switch-track .switch-thumb {
    transform: translateX(20px);
  }

  .switch input:disabled + .switch-track {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .switch input:focus-visible + .switch-track {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .field-error {
    margin: -0.65rem 0 1.1rem;
    color: var(--color-danger);
    font-size: var(--text-xs);
  }

  .content-area {
    padding: 1.85rem 2rem 3rem;
    animation: content-fade-in var(--transition-slow);
  }

  @keyframes content-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Theme toggle switch */
  .theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 52px;
    height: 30px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-surface-alt);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-base);
  }

  .theme-toggle-knob {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
    transform: translateX(0);
    transition: transform var(--transition-base);
  }

  :root[data-theme='dark'] .theme-toggle-knob {
    transform: translateX(22px);
  }

  .theme-toggle-knob svg {
    width: 13px;
    height: 13px;
  }

  .theme-toggle .icon-moon {
    display: none;
  }

  :root[data-theme='dark'] .theme-toggle .icon-sun {
    display: none;
  }

  :root[data-theme='dark'] .theme-toggle .icon-moon {
    display: block;
  }

  /* =========================================================================
    Cards & stats
    ========================================================================= */

  .card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
  }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    position: relative;
    overflow: hidden;
  }

  .stat-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }

  .stat-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
  }

  .stat-icon-blue { background: var(--color-info-soft); color: var(--color-info); }
  .stat-icon-green { background: var(--color-success-soft); color: var(--color-success); }
  .stat-icon-purple { background: var(--color-primary-soft); color: var(--color-primary); }

  .stat-value {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
  }

  .stat-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .section-card {
    padding: 1.6rem 1.85rem;
    margin-bottom: 1.5rem;
  }

  .section-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
  }

  .section-card-head h2 {
    margin: 0 0 0.25rem;
    font-size: var(--text-lg);
  }

  .section-card-head p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .section-card-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
  }

  /* =========================================================================
    Tables
    ========================================================================= */

  .table-card {
    overflow: hidden;
    margin-bottom: 1.5rem;
  }

  .table-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3rem 1.6rem;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .table-card-head h2 {
    margin: 0;
    font-size: var(--text-lg);
  }

  .table-card-head p {
    margin: 0.25rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .table-card > .filter-tabs {
    margin: 0 1.6rem 1rem;
  }

  .filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 1.6rem 1.4rem;
  }

  .filter-pill {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    height: 42px;
    padding: 0 0.95rem;
    border-radius: var(--radius-full);
    background: var(--bg-surface-alt);
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  }

  .filter-pill:focus-within {
    border-color: var(--color-primary);
    background: var(--bg-surface);
    box-shadow: 0 0 0 4px var(--color-primary-soft);
  }

  .filter-pill svg {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color var(--transition-base);
  }

  .filter-pill:focus-within svg {
    color: var(--color-primary);
  }

  .filter-pill input,
  .filter-pill select {
    width: auto;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: var(--text-sm);
    color: var(--text-primary);
  }

  .filter-pill select {
    padding-right: 1.35rem !important;
    background-position: right 0 center !important;
  }

  .filter-pill--search {
    flex: 1 1 240px;
    min-width: 200px;
  }

  .filter-pill--search input {
    flex: 1;
    width: 100% !important;
  }

  .filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.4rem;
    height: 42px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast);
  }

  .filter-clear:hover {
    color: var(--color-danger);
  }

  @media (max-width: 640px) {
    .filter-pill--search {
      flex: 1 1 100%;
    }
  }

  .table-scroll {
    overflow-x: auto;
  }

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

  .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--bg-surface-alt);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .data-table td {
    padding: 0.9rem 1rem;
    border-top: 1px solid var(--border-color);
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .data-table th:first-child,
  .data-table td:first-child {
    padding-left: 1.6rem;
  }

  .data-table th:last-child,
  .data-table td:last-child {
    padding-right: 1.6rem;
  }

  .data-table tbody tr {
    transition: background var(--transition-fast);
  }

  .data-table tbody tr:hover td {
    background: var(--bg-hover);
  }

  /* .data-table--cards: stack rows as label/value cards on mobile instead of
     forcing a horizontal scroll. Each <td> needs a data-label attribute (use
     data-label="" for the actions cell so no label prints). */
  @media (max-width: 640px) {
    .data-table--cards,
    .data-table--cards tbody,
    .data-table--cards tr,
    .data-table--cards td {
      display: block;
      width: 100%;
    }

    .data-table--cards thead {
      display: none;
    }

    .data-table--cards tbody tr {
      margin-top: 0.75rem;
      padding: 0.35rem 0.25rem;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md, 12px);
      background: var(--bg-surface-alt);
    }

    .data-table--cards tbody tr:first-child {
      margin-top: 0;
    }

    .data-table--cards td {
      border-top: none;
      padding: 0.5rem 0.85rem;
      font-size: var(--text-sm);
    }

    .data-table--cards th:first-child,
    .data-table--cards td:first-child,
    .data-table--cards th:last-child,
    .data-table--cards td:last-child {
      padding-left: 0.85rem;
      padding-right: 0.85rem;
    }

    .data-table--cards td[data-label]::before {
      content: attr(data-label);
      display: block;
      margin-bottom: 0.3rem;
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }

    .data-table--cards td[data-label='']::before {
      display: none;
    }

    .data-table--cards td[data-label=''] .btn {
      display: block;
      text-align: center;
    }

    .data-table--cards tr[hidden] {
      display: none;
    }

    /* Columns tagged .col-mobile-hide drop out of the stacked card view so a
      narrow screen shows only the essentials (event title, date/time, action).
      Higher specificity than the `.data-table--cards td { display: block }`
      rule above, so no !important needed. */
    .data-table .col-mobile-hide {
      display: none;
    }
  }

  /* =========================================================================
    Pager — reusable pagination bar (Previous · "N of M" · Next)
    Markup: wrap the list/table in an element with [data-pager] and the
    optional data-pager-desktop / data-pager-mobile page sizes; tag each
    paginated row with [data-pager-item]. pager.js builds the bar and keeps
    it pinned at the bottom, visible even when there is no data (shows
    "1 of 1", both buttons disabled).
    ========================================================================= */

  .pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
  }

  .pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .pager-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
  }

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

  .pager-status {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 640px) {
    .pager {
      gap: 0.6rem;
      padding: 0.85rem;
    }

    .pager-btn {
      flex: 1;
    }
  }

  /* =========================================================================
    Work suspensions — table on desktop, cards on mobile, paginated
    ========================================================================= */

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

  .ws-table thead th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--bg-surface-alt);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .ws-table td {
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--border-color);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    vertical-align: top;
  }

  .ws-table tbody tr:hover td {
    background: var(--bg-hover);
  }

  .ws-table input[type='date'],
  .ws-table .category-select,
  .ws-table .reason-input {
    width: 100%;
    max-width: 260px;
  }

  .ws-reason-empty {
    color: var(--text-muted);
  }

  .ws-reason-cell .reason-wrap:not([hidden]) + .ws-reason-empty {
    display: none;
  }

  .ws-actions {
    white-space: nowrap;
  }

  .ws-actions .btn {
    margin-right: 0.4rem;
  }

  @media (max-width: 640px) {
    .ws-table,
    .ws-table tbody,
    .ws-table tr,
    .ws-table td {
      display: block;
      width: 100%;
    }

    .ws-table thead {
      display: none;
    }

    .ws-table tr.ws-row {
      margin-top: 0.75rem;
      padding: 0.35rem 0.25rem;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md, 12px);
      background: var(--bg-surface-alt);
    }

    .ws-table tr.ws-row:first-of-type {
      margin-top: 0;
    }

    .ws-table td {
      border-top: none;
      padding: 0.5rem 0.85rem;
    }

    .ws-table td[data-label]::before {
      content: attr(data-label);
      display: block;
      margin-bottom: 0.3rem;
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }

    .ws-table td[data-label='']::before {
      display: none;
    }

    .ws-table input[type='date'],
    .ws-table .category-select,
    .ws-table .reason-input {
      max-width: none;
    }

    .ws-table tr[hidden] {
      display: none;
    }

    .ws-actions {
      display: flex;
      gap: 0.5rem;
    }

    .ws-actions .btn {
      flex: 1;
      margin-right: 0;
    }
  }

  .user-cell {
    display: flex;
    align-items: center;
    gap: 0.7rem;
  }

  .user-cell-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
  }

  .user-cell-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
  }

  .user-cell-username {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .table-card-flush {
    margin: 0 -1.85rem -1.6rem;
  }

  /* Generic multi-select bulk action bar — appears above a table/list once
     at least one row is checked. Reused by the Request Forms list
     (assets/js/request_forms_select.js); not feature-specific like
     .drive-ws-bulk-bar. */
  .list-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    font-size: var(--text-sm);
  }

  .list-bulk-actions {
    display: flex;
    gap: 0.5rem;
  }

  /* =========================================================================
    User management: filter bar, view toggle, card grid
    ========================================================================= */

  .table-card-head-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem;
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
  }

  .view-toggle-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .view-toggle-btn:hover {
    color: var(--text-primary);
  }

  .view-toggle-btn.active {
    background: var(--color-primary);
    color: #fff;
  }

  .user-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0 1.6rem 1.1rem;
  }

  .filter-tabs,
  .filter-chips {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .filter-tabs {
    padding: 0.25rem;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    width: fit-content;
  }

  .filter-tab {
    padding: 0.45rem 1.05rem;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .filter-tab:hover {
    color: var(--text-primary);
  }

  .filter-tab.active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
  }

  .filter-chips {
    padding-top: 0.3rem;
    border-top: 1px dashed var(--border-color);
  }

  .filter-chip {
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  }

  .filter-chip:hover {
    color: var(--text-primary);
  }

  .filter-chip.active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
  }

  .filter-chip-count {
    opacity: 0.7;
    font-weight: 700;
  }

  .task-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
  }

  .archived-filter-bar {
    justify-content: flex-start;
  }

  .task-status-filter {
    margin-bottom: 0;
  }

  .reassign-row.highlighted {
    background: var(--bg-hover);
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  .date-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .date-range-select,
  .date-picker-input {
    width: auto;
    margin-bottom: 0;
    padding: 0.45rem 2rem 0.45rem 0.8rem;
    font-size: var(--text-sm);
  }

  .date-picker-input {
    padding-right: 0.8rem;
  }

  /* Archived / History filter bar: keep the range select and the date picker
    on one row (the shared .date-filter-group wraps by default for the narrow
    task-filter sidebar). */
  .archived-filter-bar .date-filter-group {
    flex-wrap: nowrap;
  }

  .archived-filter-bar .date-range-select,
  .archived-filter-bar .date-picker-input {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 36px;
  }

  .archived-filter-bar .date-range-select {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Date field: show only the calendar icon, as a compact square button the
    same height as the range select — collapse the mm/dd/yyyy text field.
    Selector must out-specify the global `input:not([type=...])` reset
    (0,0,3,1) that otherwise forces width:100%. */
  .archived-filter-bar input[type='date'].date-picker-input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 0;
    padding: 0;
  }

  .archived-filter-bar .date-picker-input::-webkit-datetime-edit,
  .archived-filter-bar .date-picker-input::-webkit-inner-spin-button,
  .archived-filter-bar .date-picker-input::-webkit-clear-button {
    display: none;
  }

  .archived-filter-bar .date-picker-input::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
  }

  /* Request Forms filter bar (admin/units/request_forms.php): each filter is
    an icon-led "chip" — a bordered pill grouping an icon with its
    select/date input — instead of bare form controls loose on the page, so
    the date-range/date-picker/employee filters read as one organized
    toolbar rather than 2-3 unrelated fields. */
  .request-forms-filter-bar {
    padding: 0.7rem 0.85rem;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    gap: 0.65rem;
  }

  .rf-filter-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    padding: 0 0.65rem;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
  }

  .rf-filter-field:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-soft);
  }

  .rf-filter-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--text-muted);
  }

  .rf-filter-sep {
    width: 1px;
    height: 1.3rem;
    flex-shrink: 0;
    background: var(--border-color);
  }

  .request-forms-filter-bar .date-range-select,
  .request-forms-filter-bar .date-picker-input {
    border: none;
    background-color: transparent;
    margin-bottom: 0;
    padding: 0.55rem 1.9rem 0.55rem 0.15rem;
    background-position: right 0 center;
    box-shadow: none;
  }

  .request-forms-filter-bar .date-picker-input {
    padding: 0.55rem 0.1rem 0.55rem 0.15rem;
  }

  .request-forms-filter-bar .date-range-select:focus,
  .request-forms-filter-bar .date-picker-input:focus {
    outline: none;
    background-color: transparent;
    box-shadow: none;
  }

  @media (max-width: 640px) {
    .rf-filter-field,
    .rf-filter-field--date {
      flex: 1 1 100%;
    }

    .rf-filter-field select,
    .rf-filter-field .date-picker-input {
      flex: 1 1 auto;
    }
  }

  /* Custom date-span picker (start + end): a separate class from
    .date-picker-input on purpose, so it doesn't inherit the icon-only
    collapse above — both dates need to stay visible. */
  .date-range-span {
    display: none;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .date-range-span.is-visible {
    display: inline-flex;
  }

  .date-range-span-sep {
    color: var(--text-secondary);
    font-size: var(--text-sm);
  }

  .archived-filter-bar .date-span-input {
    width: auto;
    min-width: 9.5rem;
    margin-bottom: 0;
    box-sizing: border-box;
    height: 36px;
    padding: 0.45rem 0.6rem;
    font-size: var(--text-sm);
  }

  .pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.1rem 0 0.2rem;
  }

  .pagination-info {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .user-filter-empty {
    margin: 0 1.6rem 1.1rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
  }

  .user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    padding: 0 1.6rem 1.6rem;
  }

  .user-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1.2rem 0.8rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-surface-alt);
  }

  .user-card-avatar {
    width: 48px;
    height: 48px;
    font-size: var(--text-base);
  }

  .user-card-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--text-sm);
  }

  .user-card-username {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .user-card-badges {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.2rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Empty states */
  .empty-state,
  .section-card > p:only-child {
    color: var(--text-muted);
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
  }

  .empty-state-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-surface-alt);
    color: var(--text-muted);
    margin-bottom: 0.5rem;
  }

  .empty-state h3 {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-primary);
  }

  .empty-state p {
    margin: 0;
    font-size: var(--text-sm);
    max-width: 32ch;
  }

  /* Skeleton loading */
  .skeleton {
    position: relative;
    overflow: hidden;
    background: var(--bg-surface-alt);
    border-radius: var(--radius-sm);
    color: transparent !important;
  }

  .skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--bg-hover), transparent);
    animation: skeleton-shimmer 1.4s infinite;
  }

  @keyframes skeleton-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
  }

  /* =========================================================================
    Badges
    ========================================================================= */

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
  }

  .badge-admin { background: var(--color-info-soft); color: var(--color-info); }
  .badge-employee { background: var(--color-secondary-soft); color: var(--color-secondary); }
  .badge-super_admin { background: var(--color-primary-soft); color: var(--color-primary); }
  .badge-active,
  .badge-published { background: var(--color-success-soft); color: var(--color-success); }
  .badge-inactive,
  .badge-suspended { background: var(--color-danger-soft); color: var(--color-danger); }
  .badge-draft { background: var(--color-warning-soft); color: var(--color-warning); }

  .badge-st-pending { background: var(--color-warning-soft); color: var(--color-warning); }
  .badge-st-accepted { background: var(--color-info-soft); color: var(--color-info); }
  .badge-st-progress { background: var(--color-info-soft); color: var(--color-info); }
  .badge-st-review { background: var(--color-primary-soft); color: var(--color-primary); }
  .badge-st-archived { background: var(--color-secondary-soft); color: var(--color-secondary); }
  .badge-st-completed { background: var(--color-success-soft); color: var(--color-success); }
  .badge-st-unassigned { background: var(--color-secondary-soft); color: var(--color-secondary); }
  .badge-st-cancelled { background: var(--color-danger-soft); color: var(--color-danger); }

  /* =========================================================================
    Modal / stepper
    ========================================================================= */

  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 10, 18, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: modal-fade-in var(--transition-slow);
  }

  @keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .modal {
    width: 100%;
    max-width: 580px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    animation: modal-pop-in var(--transition-slow);
  }

  @keyframes modal-pop-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
  }

  .modal-head h2 {
    margin: 0;
    font-size: var(--text-xl);
  }

  .modal-head-sub {
    margin: 0.2rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .modal-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-surface-alt);
    color: var(--text-muted);
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

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

  .modal-body {
    padding: 1.85rem 2rem;
  }

  .modal-note {
    margin: 0 0 1.25rem;
    font-size: var(--text-base);
    color: var(--text-secondary);
  }

  .modal-foot {
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid var(--border-color);
  }

  .modal-foot .link-back {
    margin-top: 0;
  }

  .confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
  }

  .modal--wide {
    max-width: 760px;
  }

  .modal--mini {
    max-width: 420px;
  }

  /* WAR Preview page (admin/war_preview.php, employee/war_preview.php):
     renders the real generated .docx via docx-preview (assets/js/war_preview.js).
     The WAR is a landscape document, so the page scrolls horizontally rather
     than shrinking the rendered pages. */
  #warPreviewDoc {
    margin-top: 1.5rem;
    min-height: 60vh;
    padding: 24px;
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: #5b5b5b;
  }

  #warPreviewDoc .docx-wrapper {
    padding: 0;
    background: transparent;
  }

  #warPreviewDoc .docx-wrapper > section.docx {
    margin: 0 auto 24px;
    box-shadow: var(--shadow-lg);
  }

  #warPreviewDoc .docx-wrapper > section.docx:last-child {
    margin-bottom: 0;
  }

  .war-preview-status {
    margin: 0;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-on-primary);
    font-size: var(--text-sm);
  }

  .war-preview-status--error {
    color: var(--color-danger-soft);
  }

  /* Request Form Preview page (employee/request_form_preview.php): renders
     the actual REQUEST FORM TEMPLATE.docx via docx-preview
     (assets/js/request_form_preview.js), portrait so no horizontal scroll
     shrink is needed like the landscape WAR. */
  #requestFormPreviewDoc {
    margin-top: 1.5rem;
    min-height: 60vh;
    padding: 24px;
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: #5b5b5b;
  }

  #requestFormPreviewDoc .docx-wrapper {
    padding: 0;
    background: transparent;
  }

  #requestFormPreviewDoc .docx-wrapper > section.docx {
    margin: 0 auto 24px;
    box-shadow: var(--shadow-lg);
  }

  #requestFormPreviewDoc .docx-wrapper > section.docx:last-child {
    margin-bottom: 0;
  }

  /* Signature pad modal (Request Form Preview's "Add/Edit Signature") */
  .modal.signature-modal {
    max-width: 640px;
  }

  .modal.signature-modal.fullscreen {
    position: fixed;
    inset: 0.75rem;
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .modal.signature-modal.fullscreen .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .signature-pad-wrap {
    width: 100%;
  }

  .signature-pad-canvas {
    display: block;
    width: 100%;
    height: 220px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    touch-action: none;
    cursor: crosshair;
  }

  .modal.signature-modal.fullscreen .signature-pad-wrap {
    flex: 1;
  }

  .modal.signature-modal.fullscreen .signature-pad-canvas {
    height: 100%;
    min-height: 260px;
  }

  .signature-status {
    min-height: 1.2em;
    margin: 0.5rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .signature-status--error {
    color: var(--color-danger-soft);
  }

  .signature-pad-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.85rem;
  }

  @media (max-width: 640px) {
    .signature-pad-canvas {
      height: 280px;
    }
  }

  /* Request Form Preview's Print button — only the rendered document
     prints; app chrome, action buttons and the signature modal don't. */
  @media print {
    body.request-form-print-page .sidebar,
    body.request-form-print-page .topbar,
    body.request-form-print-page .section-card-head,
    body.request-form-print-page .stage-stamp,
    body.request-form-print-page #signatureModalBackdrop {
      display: none !important;
    }

    body.request-form-print-page #requestFormPreviewDoc {
      margin: 0;
      padding: 0;
      background: none;
      overflow: visible;
    }
  }

  .stepper {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    gap: 0.6rem;
  }

  .stepper li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
  }

  .stepper li:not(:last-child) {
    flex: 1;
  }

  .stepper li:not(:last-child)::after {
    content: '';
    flex: 1;
    min-width: 24px;
    height: 3px;
    border-radius: 3px;
    background: var(--border-color);
    margin-left: 0.6rem;
    transition: background var(--transition-base);
  }

  .stepper li.done:not(:last-child)::after {
    background: var(--color-primary);
  }

  .step-dot {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-surface-alt);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 700;
    flex-shrink: 0;
    transition: background var(--transition-base), color var(--transition-base);
  }

  .stepper li.active {
    color: var(--text-primary);
  }

  .stepper li.active .step-dot {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: var(--shadow-glow);
  }

  .stepper li.done .step-dot {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .modal-body button[type='submit'] {
    width: 100%;
    padding: 0.85rem;
    margin-top: 0.25rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--gradient-primary);
    color: #fff;
    font-size: var(--text-base);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-glow);
    transition: filter var(--transition-fast), transform var(--transition-fast);
  }

  .modal-body button[type='submit']:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
  }

  .modal-body button[type='submit']:active {
    transform: translateY(0);
  }

  .topbar-notif-head .link-button {
    padding: 0;
    font-size: var(--text-xs);
    font-weight: 600;
  }

  /* =========================================================================
    Notifications dropdown
    ========================================================================= */

  .topbar-notif {
    position: relative;
  }

  .topbar-bell {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .topbar-bell::-webkit-details-marker {
    display: none;
  }

  .topbar-bell:hover {
    background: var(--bg-hover);
    color: var(--color-primary);
  }

  .topbar-notif[open] .topbar-bell {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: transparent;
  }

  .topbar-notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: 340px;
    max-width: calc(100vw - 2rem);
    max-height: 420px;
    overflow-y: auto;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    animation: modal-pop-in var(--transition-base);
  }

  .topbar-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
  }

  .topbar-notif-head a {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
  }

  .topbar-notif-head a:hover {
    text-decoration: underline;
  }

  .topbar-notif-empty {
    margin: 0;
    padding: 1.5rem 1.1rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
  }

  .topbar-notif-panel .notif-item {
    padding: 0.75rem 1.1rem;
  }

  .bell-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--color-danger);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--bg-surface);
  }

  .notif-list {
    display: flex;
    flex-direction: column;
  }

  .notif-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.5rem;
    border-top: 1px solid var(--border-color);
    text-decoration: none;
    transition: background var(--transition-fast);
  }

  .notif-item:hover {
    background: var(--bg-hover);
  }

  .notif-item-message {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .notif-item.unread .notif-item-message {
    font-weight: 600;
    color: var(--text-primary);
  }

  .notif-item-time {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
  }

  .notif-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    margin-right: 0.5rem;
    flex-shrink: 0;
    margin-top: 0.4rem;
  }

  /* =========================================================================
    Task workflow (media coverage)
    ========================================================================= */

  .task-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0 0;
  }

  .task-meta-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
  }

  .task-meta-value {
    display: block;
    font-size: var(--text-base);
    color: var(--text-primary);
    font-weight: 600;
  }

  .task-meta-sub {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-muted);
  }

  .task-description {
    margin: 1rem 0 0;
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.6;
  }

  .stage-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.4rem;
    margin-top: 1rem;
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  }

  .stage-panel.locked {
    opacity: 0.55;
    background: var(--bg-surface-alt);
  }

  .stage-panel.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
  }

  .stage-panel.done {
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
    background: var(--color-success-soft);
  }

  .stage-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .stage-panel-head h3 {
    margin: 0;
    font-size: var(--text-base);
  }

  .stage-timer {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
  }

  .stage-timer.is-paused {
    color: var(--text-muted);
  }

  .stage-timer.is-paused::after {
    content: " PAUSED";
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  .stage-duration {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-success);
  }

  .stage-stamp {
    margin: 0.5rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .stage-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
  }

  .stage-checkbox {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.75rem 0;
    font-size: var(--text-base);
    color: var(--text-secondary);
  }

  .stage-checkbox input {
    margin: 0;
  }

  .stage-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
  }

  .stage-checkbox-group .stage-checkbox {
    margin: 0.35rem 0;
  }

  /* =========================================================================
    Employee calendar
    ========================================================================= */

  .cal-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .cal-nav-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    min-width: 160px;
    text-align: center;
  }

  .calendar-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .calendar-grid th {
    padding: 0.6rem 0.4rem;
    background: var(--bg-surface-alt);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
  }

  .cal-day {
    vertical-align: top;
    height: 96px;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--border-color);
    font-size: var(--text-sm);
    transition: background var(--transition-fast);
  }

  .cal-day-num {
    display: block;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
  }

  .cal-day.other-month {
    background: var(--bg-surface-alt);
  }

  .cal-day.other-month .cal-day-num {
    color: var(--text-muted);
    opacity: 0.6;
  }

  .cal-day.today {
    background: var(--color-primary-soft);
  }

  .cal-day.today .cal-day-num {
    color: var(--color-primary);
  }

  .cal-day.suspended {
    background: var(--color-danger-soft);
  }

  .cal-suspension-badge {
    display: block;
    padding: 0.15rem 0.4rem;
    margin-bottom: 0.25rem;
    border-radius: var(--radius-sm);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Clickable variant (employee calendar) — opens the detail mini modal. */
  button.cal-suspension-badge {
    width: 100%;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: filter var(--transition-fast);
  }

  button.cal-suspension-badge:hover {
    filter: brightness(0.97);
  }

  :root[data-theme='dark'] button.cal-suspension-badge:hover {
    filter: brightness(1.15);
  }

  .cal-suspension-detail {
    margin: 0;
    display: grid;
    gap: 1.1rem;
  }

  .cal-suspension-detail dt {
    margin-bottom: 0.25rem;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
  }

  .cal-suspension-detail dd {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-primary);
  }

  .cal-task {
    display: block;
    padding: 0.2rem 0.45rem;
    margin-bottom: 0.25rem;
    border-radius: var(--radius-sm);
    background: var(--color-info-soft);
    color: var(--color-info);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: filter var(--transition-fast);
  }

  .cal-task:hover {
    filter: brightness(0.95);
  }

  :root[data-theme='dark'] .cal-task:hover {
    filter: brightness(1.2);
  }

  .cal-task.st-pending {
    background: var(--color-warning-soft);
    color: var(--color-warning);
  }

  .cal-task.st-progress {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .cal-task.st-done {
    background: var(--color-success-soft);
    color: var(--color-success);
  }

  .cal-task.st-cancelled {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    text-decoration: line-through;
    opacity: 0.7;
  }

  .cal-task-assignee {
    opacity: 0.75;
    font-weight: 500;
  }

  .cal-legend {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin: 0 0 1.1rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .cal-legend-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  .cal-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .cal-legend-dot.st-pending { background: var(--color-warning); }
  .cal-legend-dot.st-progress { background: var(--color-primary); }
  .cal-legend-dot.st-done { background: var(--color-success); }
  .cal-legend-dot.st-cancelled { background: var(--color-danger); }
  .cal-legend-dot-suspension { background: var(--color-danger); }

  /* Weekday label per cell — only surfaced in the stacked mobile view below. */
  .cal-day-dow {
    display: none;
  }

  @media (max-width: 640px) {
    /* A 7-column month grid collapses to ~40px cells on a phone, so the task
      pills truncate to nothing. Restack the table into a single-column
      agenda: one block per in-month day, with wrapping task text. */
    .calendar-grid,
    .calendar-grid tbody,
    .calendar-grid tr,
    .calendar-grid td {
      display: block;
      width: 100%;
    }

    .calendar-grid {
      padding: 0.25rem 0.9rem 0.9rem;
    }

    .calendar-grid thead {
      display: none;
    }

    .cal-day.other-month {
      display: none;
    }

    .cal-day {
      height: auto;
      min-height: 0;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      margin-bottom: 0.5rem;
      padding: 0.6rem 0.8rem;
    }

    .cal-day-num {
      display: inline;
      margin: 0 0.45rem 0 0;
      font-size: var(--text-base);
      color: var(--text-primary);
    }

    .cal-day-dow {
      display: inline;
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }

    .cal-day.today .cal-day-num,
    .cal-day.today .cal-day-dow {
      color: var(--color-primary);
    }

    .cal-task,
    .cal-suspension-badge {
      white-space: normal;
      margin: 0.4rem 0 0;
      padding: 0.45rem 0.6rem;
      line-height: 1.35;
    }

    /* Days with nothing on them stay in the list for context but recede. */
    .cal-day:not(.today):not(.suspended):not(:has(.cal-task)) {
      opacity: 0.5;
      padding: 0.4rem 0.8rem;
      margin-bottom: 0.3rem;
    }

    .cal-nav {
      width: 100%;
    }

    .cal-nav-title {
      order: -1;
      flex: 1 1 100%;
      min-width: 0;
    }
  }

  /* =========================================================================
    Event list upload review
    ========================================================================= */

  .review-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.3rem;
    margin-top: 1rem;
    transition: border-color var(--transition-base);
  }

  .review-item:hover {
    border-color: var(--border-color-strong);
  }

  .review-item-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
  }

  .review-item-head label {
    margin: 0;
    font-weight: 700;
    color: var(--text-primary);
  }

  .review-raw {
    margin: 0.6rem 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
    word-break: break-word;
  }

  .review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 1rem;
  }

  .form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
  }

  /* =========================================================================
    Login page
    ========================================================================= */

  .login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.35), transparent 45%),
                radial-gradient(circle at 85% 80%, rgba(29, 78, 216, 0.3), transparent 45%),
                #0c0c13;
  }

  .login-card {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 980px;
    min-height: 520px;
    background: #12121c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
    overflow: hidden;
  }

  .login-showcase {
    flex: 1.2;
    align-self: stretch;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 30% 25%, rgba(59, 130, 246, 0.28), transparent 55%),
      radial-gradient(circle at 75% 75%, rgba(29, 78, 216, 0.24), transparent 50%),
      #0e0e17;
  }

  .login-showcase::before {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.22), transparent 70%);
    filter: blur(10px);
    animation: showcase-glow-pulse 5s ease-in-out infinite;
  }

  @keyframes showcase-glow-pulse {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
  }


  /* Orbit rings + a revolving dot around the centered GOVOPS logo.
    Outer ring radius is a fixed 80px (160px box, inset: 0). */
  .logo-orbit {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
  }

  .orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(147, 197, 253, 0.35);
    animation: orbit-spin 22s linear infinite;
  }

  .orbit-ring--outer {
    inset: 0;
  }

  .orbit-ring--inner {
    inset: 18px;
    border-style: solid;
    border-color: rgba(59, 130, 246, 0.22);
    animation-name: orbit-spin-reverse;
    animation-duration: 16s;
  }

  .orbit-dot {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: var(--gradient-primary);
    box-shadow: 0 0 12px 2px rgba(59, 130, 246, 0.75);
  }

  .orbit-dot--a {
    transform-origin: 4px 84px;
    animation: orbit-spin 22s linear infinite;
  }

  .orbit-dot--b {
    top: 14px;
    transform-origin: 4px 66px;
    animation: orbit-spin-reverse 16s linear infinite;
    opacity: 0.8;
  }

  @keyframes orbit-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes orbit-spin-reverse {
    to { transform: rotate(-360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .orbit-ring,
    .orbit-dot,
    .login-showcase::before,
    .login-form-logo,
    .logo-cluster-img {
      animation: none !important;
    }
  }

  .logo-cluster {
    position: relative;
    width: 148px;
    height: 148px;
    display: grid;
    place-items: center;
  }

  .logo-cluster-img {
    width: 148px;
    height: 148px;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
    animation: logo-float 5.5s ease-in-out infinite;
  }

  @keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  .login-showcase-text {
    position: relative;
    text-align: center;
  }

  .login-showcase-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: showcase-text-in 0.7s ease both;
  }

  .login-showcase-sub {
    margin: 0.5rem 0 0;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a8abc2;
    animation: showcase-text-in 0.7s ease 0.15s both;
  }

  .login-showcase-notice {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1.1rem 0 0;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a8abc2;
    animation: showcase-text-in 0.7s ease 0.25s both;
  }

  @keyframes showcase-text-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .login-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2.75rem;
  }

  .login-form {
    width: 100%;
    max-width: 320px;
  }

  .login-form-logo {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.1rem;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
    animation: showcase-text-in 0.7s ease both;
  }

  .login-form h1 {
    font-size: var(--text-2xl);
    margin: 0 0 1.4rem;
    text-align: center;
    color: #f5f5f8;
    font-weight: 800;
  }

  .login-form label {
    color: #c7c9db;
  }

  .login-form input[type='text'],
  .login-form input[type='password'] {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    color: #f5f5f8;
  }

  .login-form input[type='text']:focus,
  .login-form input[type='password']:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--color-primary);
  }

  .login-form .modal-note {
    color: #a8abc2;
  }

  .login-form .field-hint {
    color: #6c6f84;
  }

  .auth-flip-back-content > h1 {
    font-size: var(--text-2xl);
    margin: 0 0 1.4rem;
    text-align: center;
    color: #f5f5f8;
    font-weight: 800;
  }

  .login-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
    font-size: var(--text-sm);
    color: #9497ad;
  }

  .login-form button {
    width: 100%;
    padding: 0.8rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 700;
    font-size: var(--text-base);
    cursor: pointer;
    box-shadow: var(--shadow-glow);
    transition: filter var(--transition-fast), transform var(--transition-fast);
  }

  .login-form button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }

  .login-form button:active {
    transform: translateY(0);
  }

  .login-form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  .login-form button.forgot-password-link,
  .login-form button.link-button {
    width: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    color: #a8abc2;
    font-weight: 600;
    font-size: var(--text-sm);
  }

  .login-form button.link-button {
    margin-top: 0.85rem;
    text-decoration: underline;
    color: var(--color-primary);
  }

  .login-form button.forgot-password-link:hover,
  .login-form button.link-button:hover {
    filter: none;
    transform: none;
    color: #f5f5f8;
  }

  .google-signin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    text-align: center;
    padding: 0.75rem;
    margin-bottom: 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    color: #f5f5f8;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background var(--transition-fast);
  }

  .google-signin-btn:hover {
    background: rgba(255, 255, 255, 0.09);
  }

  .divider {
    text-align: center;
    color: #6c6f84;
    margin: 1rem 0;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .login-help {
    margin: 1.4rem 0 0;
    text-align: center;
    color: #8b8fa3;
    font-size: var(--text-sm);
  }

  .login-credit {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
  }

  .login-credit-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(20, 22, 34, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    list-style: none;
    overflow: hidden;
    transition: transform var(--transition-fast, 0.15s ease), background var(--transition-fast, 0.15s ease);
  }

  .login-credit-toggle::-webkit-details-marker {
    display: none;
  }

  .login-credit-toggle:hover {
    background: rgba(30, 33, 48, 0.6);
    transform: translateY(-1px);
  }

  .login-credit-toggle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .login-credit[open] .login-credit-toggle {
    background: rgba(37, 99, 235, 0.35);
  }

  .login-credit-panel {
    position: absolute;
    right: calc(100% + 10px);
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: max-content;
    max-width: min(92vw, 460px);
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius-md, 12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(20, 22, 34, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    font-size: var(--text-xs);
    line-height: 1.4;
    animation: modal-pop-in var(--transition-base, 0.2s ease);
  }

  .login-credit-col {
    display: flex;
    flex-direction: column;
  }

  .login-credit-col--right {
    text-align: right;
  }

  .login-credit-line {
    color: #c7cadd;
    white-space: nowrap;
  }

  .login-credit-line strong {
    color: #e6e8f2;
    font-weight: 600;
  }

  .login-credit-muted {
    color: #8b8fa3;
  }

  .login-credit-sep {
    align-self: stretch;
    width: 1px;
    background: rgba(255, 255, 255, 0.16);
  }

  @media (max-width: 560px) {
    .login-credit-panel {
      max-width: calc(100vw - 5.5rem);
      flex-direction: column;
      align-items: flex-start;
      gap: 0.35rem;
    }

    .login-credit-col--right {
      text-align: left;
    }

    .login-credit-sep {
      width: 100%;
      height: 1px;
    }

    .login-credit-line {
      white-space: normal;
    }
  }

  .forgot-password-link {
    background: none;
    border: none;
    padding: 0;
    color: #a8abc2;
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
  }

  .forgot-password-link:hover {
    color: #f5f5f8;
    text-decoration: underline;
  }

  /* Login <-> forgot-password flip transition */
  .auth-flip {
    perspective: 1600px;
    width: 100%;
  }

  .auth-flip-inner {
    position: relative;
    width: 100%;
    min-height: 480px;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s ease;
  }

  .auth-flip.is-flipped .auth-flip-inner {
    transform: rotateY(180deg);
  }

  .auth-flip-face {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .auth-flip-face.auth-flip-front {
    position: relative;
  }

  .auth-flip-face.auth-flip-back {
    transform: rotateY(180deg);
  }

  .auth-flip-back-content {
    width: 100%;
    max-width: 320px;
  }

  .auth-flip:not(.is-flipped) .auth-flip-back {
    visibility: hidden;
    pointer-events: none;
  }

  .auth-flip.is-flipped .auth-flip-front {
    visibility: hidden;
    pointer-events: none;
  }

  .fp-stepper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
  }

  .fp-stepper li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: #6c6f84;
  }

  .fp-stepper li:not(:last-child) {
    flex: 1;
  }

  .fp-stepper li:not(:last-child)::after {
    content: '';
    flex: 1;
    min-width: 12px;
    height: 2px;
    margin-left: 0.4rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    transition: background var(--transition-base);
  }

  .fp-stepper li.done:not(:last-child)::after {
    background: var(--color-primary);
  }

  .fp-step-dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #8b8fa3;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: background var(--transition-base), color var(--transition-base);
  }

  .fp-stepper li.active {
    color: #f5f5f8;
  }

  .fp-stepper li.active .fp-step-dot {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: var(--shadow-glow);
  }

  .fp-stepper li.done .fp-step-dot {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .wizard-phase {
    animation: content-fade-in 0.35s ease;
  }

  .fp-back-link {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 0;
    border: none;
    background: none;
    text-align: center;
    color: #8b8fa3;
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
  }

  .fp-back-link:hover {
    color: #c7c9db;
  }

  @media (max-width: 760px) {
    .login-card {
      flex-direction: column;
      min-height: 0;
    }

    .login-showcase {
      display: none;
    }

    .login-panel {
      padding: 2.5rem 1.5rem;
    }
  }

  /* =========================================================================
    Maintenance page — standalone, theme-aware, modal-style card
    ========================================================================= */
  .maintenance-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background:
      radial-gradient(circle at 15% 15%, var(--color-primary-soft), transparent 45%),
      radial-gradient(circle at 85% 85%, var(--color-primary-soft), transparent 45%),
      var(--bg-body);
  }

  .maintenance-card {
    width: 100%;
    max-width: 720px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 3rem 3.5rem;
    text-align: center;
    animation: modal-pop-in var(--transition-slow);
  }

  .maintenance-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
  }

  .maintenance-logo {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .maintenance-brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-base);
    letter-spacing: 0.04em;
    color: var(--text-muted);
  }

  .maintenance-banner {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
  }

  .maintenance-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--color-primary-soft);
    font-size: 1.9rem;
    line-height: 1;
  }

  .maintenance-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
  }

  .maintenance-message {
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0 0 1.5rem;
  }

  .maintenance-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .maintenance-meta-item {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .maintenance-contact {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin: 0 0 1.5rem;
  }

  .maintenance-logout-form {
    margin-bottom: 1rem;
  }

  .maintenance-admin-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-decoration: none;
    border-top: 1px solid var(--border-color);
    padding-top: 1.25rem;
    width: 100%;
  }

  .maintenance-admin-link:hover {
    color: var(--text-secondary);
    text-decoration: underline;
  }

  @media (max-width: 560px) {
    .maintenance-card {
      padding: 2rem 1.5rem;
    }
  }

  /* =========================================================================
    Responsive
    ========================================================================= */

  @media (max-width: 820px) {
    .mobile-menu-btn {
      display: inline-flex;
    }

    .app-shell {
      display: flex;
      flex-direction: column;
    }

    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      height: 100dvh;
      width: min(280px, 82vw);
      transform: translateX(-100%);
      box-shadow: var(--shadow-lg);
      z-index: 70;
    }

    body.sidebar-open .sidebar {
      transform: translateX(0);
    }

    body.sidebar-open .sidebar-overlay {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(10, 10, 18, 0.5);
      z-index: 60;
    }

    /* The icon-only collapse is a desktop-only affordance (toggled by
      clicking the logo, see theme.js). On mobile the sidebar is already a
      full off-canvas drawer, so a leftover "collapsed" class/cookie from a
      prior desktop visit must not carry over — fully undo every
      .sidebar.collapsed rule above rather than just the width/opacity, since
      e.g. the brand row and nav-label width:0 rules were otherwise left
      leaking through into a "sort of collapsed" mobile drawer. */
    .sidebar.collapsed {
      width: min(280px, 82vw);
      --nav-label-opacity: 1;
    }

    .sidebar.collapsed .sidebar-brand-row {
      flex-direction: row;
      gap: 0.65rem;
    }

    .sidebar.collapsed .sidebar-brand-name,
    .sidebar.collapsed .nav-label {
      width: auto;
      overflow: visible;
    }

    .sidebar.collapsed .sidebar-nav a,
    .sidebar.collapsed .sidebar-logout {
      justify-content: flex-start;
    }

    .sidebar.collapsed .sidebar-nav a::after {
      content: none;
    }

    .sidebar.collapsed .sidebar-subnav {
      display: flex;
    }

    /* .sidebar is position:fixed (off-canvas) so its order doesn't matter.
      The only thing that renders in .semi-sidebar now is the "Filter by Date"
      strip on the unit task board, and admins want it directly below the
      sticky topbar and above the page content on mobile. .semi-sidebar is a
      sibling of .main-area while the topbar/content-area are nested one level
      inside it, so flatten .main-area with display:contents — that lifts the
      topbar and content-area up to be direct flex items of .app-shell
      alongside .semi-sidebar, and then plain flex order slots the strip
      between them. */
    .main-area {
      display: contents;
    }

    .topbar {
      order: 1;
    }

    .semi-sidebar {
      order: 2;
      width: 100%;
      height: auto;
      position: static;
      /* No container: blend into the page, line up with .content-area's
        horizontal padding, and drop the "Filter by Date" heading. */
      background: none;
      border: none;
      padding: 1rem 1rem 0;
    }

    .content-area {
      order: 3;
    }

    .semi-sidebar .semi-sidebar-head {
      display: none;
    }

    /* Mirror the archived / history filter bar on mobile: range select and the
      date picker share one row, and the date field collapses to just its
      calendar icon as a 36px square button (see .archived-filter-bar rules). */
    .semi-sidebar .task-filter-bar {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 0;
    }

    .semi-sidebar .date-filter-group {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.6rem;
      width: 100%;
    }

    .semi-sidebar .date-range-select {
      flex: 1 1 auto;
      width: auto;
      height: 36px;
      padding-top: 0;
      padding-bottom: 0;
    }

    .semi-sidebar input[type='date'].date-picker-input {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      min-width: 0;
      padding: 0;
    }

    .semi-sidebar .date-picker-input::-webkit-datetime-edit,
    .semi-sidebar .date-picker-input::-webkit-inner-spin-button,
    .semi-sidebar .date-picker-input::-webkit-clear-button {
      display: none;
    }

    .semi-sidebar .date-picker-input::-webkit-calendar-picker-indicator {
      margin: 0;
      padding: 0;
    }

    .topbar,
    .content-area {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .topbar-title {
      font-size: var(--text-lg);
    }

    .topbar-search {
      max-width: none;
    }

    .topbar-user {
      display: none;
    }

    .stat-strip.employee-stat-strip {
      display: none;
    }

    /* The notification dropdown is normally an absolutely-positioned panel
      anchored to the bell (right: 0 within .topbar-notif). On a narrow
      screen the bell sits mid-topbar (avatar to its right), so that anchor
      pushes a 340px panel off the left edge of the viewport and leaves it
      partly unreachable. Detach it from the bell and pin it across the
      viewport under the sticky topbar instead. */
    .topbar-notif-panel {
      position: fixed;
      top: calc(var(--topbar-height) + 6px);
      left: 1rem;
      right: 1rem;
      width: auto;
      max-width: none;
      max-height: calc(100dvh - var(--topbar-height) - 1.5rem);
    }
  }

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

    .section-card,
    .modal-body {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
  }

  /* =========================================================================
    Upload loading overlay + toast notifications
    ========================================================================= */

  .upload-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.1rem;
    background: rgba(10, 10, 18, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-align: center;
    padding: 1.5rem;
  }

  .upload-loading-overlay.is-visible {
    display: flex;
  }

  .upload-loading-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    animation: btn-spin 0.8s linear infinite;
  }

  .upload-loading-title {
    color: #fff;
    font-size: var(--text-lg);
    font-weight: 700;
  }

  .upload-loading-sub {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--text-sm);
    max-width: 32ch;
  }

  .toast-stack {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: calc(100vw - 2rem);
  }

  .toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem 1.15rem;
    min-width: 260px;
    max-width: 360px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    color: var(--text-primary);
    overflow: hidden;
    cursor: pointer;
    animation: toast-in var(--transition-slow);
  }

  .toast.is-leaving {
    animation: toast-out var(--transition-slow) forwards;
  }

  .toast-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .toast-message {
    flex: 1;
    padding-top: 0.1rem;
    color: var(--text-primary);
  }

  .toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    transform-origin: left;
    animation-name: toast-progress-shrink;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  .toast-success { color: var(--color-success); }
  .toast-error { color: var(--color-danger); }
  .toast-warning { color: var(--color-warning); }
  .toast-info { color: var(--color-info); }

  .toast-success .toast-icon { background: var(--color-success-soft); }
  .toast-error .toast-icon { background: var(--color-danger-soft); }
  .toast-warning .toast-icon { background: var(--color-warning-soft); }
  .toast-info .toast-icon { background: var(--color-info-soft); }

  @keyframes toast-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
  }

  @keyframes toast-progress-shrink {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .upload-loading-spinner,
    .toast,
    .toast-progress {
      animation: none !important;
    }
  }

  .dar-row-form {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .dar-row-form textarea {
    flex: 1;
    min-width: 140px;
    min-height: 2.4rem;
    resize: vertical;
  }

  .photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0;
  }

  .photo-grid-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
  }

  .photo-grid-item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 4px;
  }

  .photo-grid-item p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0.4rem 0;
  }

  /* Section IV: a heading run sitting above the image row it labels. Its
    column span is set inline (grid-column: span N) so it can cover just the
    cells that belong to one upload, letting the next upload's images fill the
    rest of the same row. */
  .photo-grid > .photo-group-caption {
    align-self: end;
    text-align: center;
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--text-primary);
    margin: 0.5rem 0 0.15rem;
  }

  .photo-grid > .photo-grid-gap {
    display: block;
  }

  /* =========================================================================
    Dashboard: pipeline ramp variables
    ========================================================================= */

  :root {
    --pipe-1: #dbeafe;
    --pipe-2: #bfdbfe;
    --pipe-3: #93c5fd;
    --pipe-4: #60a5fa;
    --pipe-5: #3b82f6;
    --pipe-6: #1d4ed8;
  }

  :root[data-theme='dark'] {
    --pipe-1: #1e3a6e;
    --pipe-2: #1d4ed8;
    --pipe-3: #3b82f6;
    --pipe-4: #60a5fa;
    --pipe-5: #93c5fd;
    --pipe-6: #dbeafe;
  }

  /* =========================================================================
    Dashboard: KPI tiles
    ========================================================================= */

  /* Minimal stat strip: one bordered bar, thin dividers between segments, no
    icon badges/shadows/hover-lift — a deliberate departure from the generic
    icon-plus-card "stat card" pattern. flex-wrap handles narrow screens on
    its own (segments drop to additional rows), no column-count breakpoints
    needed the way the old CSS-grid version required. */
  .stat-strip {
    display: flex;
    flex-wrap: wrap;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
  }

  .stat-strip-item {
    flex: 1 1 160px;
    min-width: 140px;
    padding: 1.25rem 1.5rem;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
  }

  a.stat-strip-item:hover {
    background: var(--bg-hover);
  }

  .stat-strip-label {
    margin-bottom: 0.5rem;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }

  .stat-strip-value {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
  }

  .stat-strip-sub {
    margin-top: 0.25rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  /* =========================================================================
    Dashboard: pipeline overview bar
    ========================================================================= */

  .pipeline-card {
    padding: 1.6rem 1.85rem;
    margin-bottom: 1.5rem;
  }

  .pipeline-bar {
    display: flex;
    column-gap: 3px;
    height: 34px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 1rem 0 1.1rem;
    background: var(--bg-surface-alt);
  }

  .pipeline-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    text-decoration: none;
    transition: filter var(--transition-base);
  }

  .pipeline-seg:hover {
    filter: brightness(1.08);
  }

  .pipeline-seg[data-seg='1'] { background: var(--pipe-1); color: var(--text-primary); }
  .pipeline-seg[data-seg='2'] { background: var(--pipe-2); color: var(--text-primary); }
  .pipeline-seg[data-seg='3'] { background: var(--pipe-3); }
  .pipeline-seg[data-seg='4'] { background: var(--pipe-4); }
  .pipeline-seg[data-seg='5'] { background: var(--pipe-5); }
  .pipeline-seg[data-seg='6'] { background: var(--pipe-6); }

  .pipeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    align-items: center;
  }

  .pipeline-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
  }

  .pipeline-chip:hover {
    color: var(--text-primary);
  }

  .pipeline-chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .pipeline-chip-dot[data-seg='1'] { background: var(--pipe-1); }
  .pipeline-chip-dot[data-seg='2'] { background: var(--pipe-2); }
  .pipeline-chip-dot[data-seg='3'] { background: var(--pipe-3); }
  .pipeline-chip-dot[data-seg='4'] { background: var(--pipe-4); }
  .pipeline-chip-dot[data-seg='5'] { background: var(--pipe-5); }
  .pipeline-chip-dot[data-seg='6'] { background: var(--pipe-6); }

  .pipeline-chip strong {
    color: var(--text-primary);
  }

  .pipeline-archived-link {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
  }

  .pipeline-archived-link:hover {
    color: var(--text-primary);
  }

  /* =========================================================================
    Dashboard: stage stepper (employee task rows)
    ========================================================================= */

  .stepper-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .stepper {
    display: flex;
    align-items: center;
  }

  .stepper-step {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--bg-surface-alt);
    color: var(--text-muted);
    border: 2px solid var(--border-color-strong);
  }

  .stepper-step.is-done {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
  }

  .stepper-step.is-active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .stepper-bar {
    flex: 1;
    height: 2px;
    min-width: 14px;
    background: var(--border-color-strong);
  }

  .stepper-bar.is-done {
    background: var(--color-primary);
  }

  .stepper-caption {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  /* =========================================================================
    Dashboard: 7-day upcoming strip
    ========================================================================= */

  .week-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.75rem;
    margin: 1rem 0 0.25rem;
  }

  .week-day {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.55rem;
    min-height: 5.5rem;
    background: var(--bg-surface-alt);
  }

  .week-day--today {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
  }

  .week-day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.4rem;
  }

  .week-day-dow {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
  }

  .week-day-num {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
  }

  .week-event {
    display: block;
    font-size: var(--text-xs);
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    margin-bottom: 0.3rem;
    text-decoration: none;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
  }

  .week-event:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);
  }

  .week-event.st-pending { border-left: 3px solid var(--color-warning); }
  .week-event.st-progress { border-left: 3px solid var(--color-info); }
  .week-event.st-done { border-left: 3px solid var(--color-success); }

  .week-empty {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  /* =========================================================================
    Dashboard: activity feed
    ========================================================================= */

  .activity-feed {
    display: flex;
    flex-direction: column;
  }

  .activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
  }

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

  .activity-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 0.4rem;
    flex-shrink: 0;
    background: var(--color-info);
  }

  .activity-dot[data-event='released'],
  .activity-dot[data-event='caption_approved'] {
    background: var(--color-success);
  }

  .activity-dot[data-event='archived'] {
    background: var(--color-secondary);
  }

  .activity-title {
    font-size: var(--text-sm);
    color: var(--text-primary);
    display: block;
  }

  .activity-title strong {
    font-weight: 600;
  }

  .activity-time {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: auto;
  }

  /* =========================================================================
    Dashboard: charts
    ========================================================================= */

  .chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
  }

  .chart-card {
    padding: 1.4rem 1.6rem;
  }

  .chart-wrap {
    position: relative;
    height: 260px;
    margin-top: 0.75rem;
  }

  .chart-empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 0.75rem;
  }

  /* =========================================================================
    Units overview: per-unit card grid
    ========================================================================= */

  .unit-overview-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: stretch;
  }

  .unit-overview-leaderboard {
    margin-bottom: 0;
  }

  @media (max-width: 900px) {
    .unit-overview-row {
      grid-template-columns: 1fr;
    }
  }

  .unit-overview-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.4rem 1.6rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
  }

  .unit-overview-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-soft);
    transform: translateY(-2px);
  }

  .unit-overview-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .unit-health-ring {
    --pct: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: conic-gradient(var(--color-primary) calc(var(--pct) * 3.6deg), var(--border-color) 0deg);
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }

  .unit-health-ring-inner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-surface);
    display: grid;
    place-items: center;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-primary);
  }

  .unit-overview-card-head h3 {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-primary);
  }

  .unit-overview-code {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
  }

  .unit-overview-stats {
    display: flex;
    gap: 1.5rem;
  }

  .unit-overview-stats > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .unit-overview-stat-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
  }

  .unit-overview-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .unit-overview-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .unit-overview-empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .unit-overview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: var(--text-xs);
  }

  .unit-overview-last-activity {
    color: var(--text-muted);
  }

  .unit-overview-view {
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
  }

  /* =========================================================================
    Units overview: needs-attention list & top-contributors leaderboard
    ========================================================================= */

  .attention-list {
    display: flex;
    flex-direction: column;
  }

  .attention-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
  }

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

  .attention-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-danger);
  }

  .attention-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
  }

  .attention-body strong {
    font-size: var(--text-sm);
    color: var(--text-primary);
  }

  .attention-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .attention-days {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-danger);
    white-space: nowrap;
  }

  .leaderboard {
    display: flex;
    flex-direction: column;
  }

  .leaderboard-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-color);
  }

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

  .leaderboard-rank {
    width: 1.8rem;
    flex-shrink: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-muted);
  }

  .leaderboard-name {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
  }

  .leaderboard-count {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
  }

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

  @media (max-width: 760px) {
    .week-strip {
      grid-template-columns: repeat(7, minmax(6.5rem, 1fr));
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 0.25rem;
    }

    .week-day {
      scroll-snap-align: start;
    }
  }

  /* =========================================================================
    Photo picker preview (Stage II upload, client-side, pre-submit)
    ========================================================================= */

  .photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 0.25rem;
  }

  .photo-preview-item {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface-alt);
  }

  .photo-preview-item img {
    display: block;
    width: 100%;
    height: 90px;
    object-fit: cover;
  }

  .photo-preview-remove,
  .photo-preview-view {
    position: absolute;
    top: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    line-height: 1;
  }

  .photo-preview-view {
    left: 6px;
    background: rgba(17, 24, 39, 0.55);
    color: #fff;
  }

  .photo-preview-view:hover {
    background: rgba(17, 24, 39, 0.75);
  }

  .photo-preview-remove {
    right: 6px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
  }

  .photo-preview-remove:hover {
    background: var(--color-danger);
    filter: brightness(0.9);
  }

  .photo-preview-meta {
    padding: 0.35rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .photo-preview-name {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .photo-preview-size {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .photo-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
  }

  .photo-lightbox.is-visible {
    display: flex;
  }

  .photo-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }

  .photo-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: rgba(17, 24, 39, 0.55);
    color: #fff;
    z-index: 1;
  }

  .photo-lightbox-nav:hover {
    background: rgba(17, 24, 39, 0.75);
  }

  .photo-lightbox-prev {
    left: 1.5rem;
  }

  .photo-lightbox-next {
    right: 1.5rem;
  }

  @media (max-width: 600px) {
    .photo-lightbox-prev {
      left: 0.5rem;
    }

    .photo-lightbox-next {
      right: 0.5rem;
    }
  }

  /* =========================================================================
    Stage II queued upload (assets/js/stage2_upload_queue.js + _grid.js)
    ========================================================================= */

  .stage2-upload-summary {
    margin: 0.75rem 0;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .stage2-upload-pager {
    margin-top: 0.25rem;
  }

  .stage2-upload-grid {
    margin-top: 0;
  }

  .stage2-upload-item {
    display: flex;
    flex-direction: column;
  }

  .stage2-upload-thumb {
    display: block;
    width: 100%;
    height: 90px;
    padding: 0;
    border: none;
    background: var(--bg-surface-alt);
    cursor: zoom-in;
  }

  .stage2-upload-thumb:disabled {
    cursor: default;
  }

  .stage2-upload-thumb img {
    display: block;
    width: 100%;
    height: 90px;
    object-fit: cover;
  }

  .stage2-upload-thumb {
    position: relative;
  }

  .stage2-upload-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .stage2-upload-pct {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    pointer-events: none;
  }

  .stage2-upload-item.is-done .stage2-upload-pct {
    background: var(--color-success);
  }

  .progress-bar {
    height: 6px;
    background: var(--border-color);
    overflow: hidden;
    border-radius: 999px;
  }

  .progress-bar-fill {
    position: relative;
    height: 100%;
    width: 0;
    background: var(--color-info);
    transition: width 0.25s ease;
    overflow: hidden;
  }

  .progress-bar-stripes {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.35) 0,
      rgba(255, 255, 255, 0.35) 8px,
      transparent 8px,
      transparent 16px
    );
    background-size: 32px 32px;
    opacity: 0;
  }

  .stage2-upload-item.is-uploading .progress-bar-stripes {
    opacity: 1;
    animation: stage2-upload-stripes 0.9s linear infinite;
  }

  @keyframes stage2-upload-stripes {
    from { background-position: 0 0; }
    to { background-position: 32px 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .stage2-upload-item.is-uploading .progress-bar-stripes {
      animation: none;
      opacity: 0.6;
    }
  }

  .stage2-upload-item.is-done .progress-bar-fill {
    background: var(--color-success);
  }

  .stage2-upload-item.is-failed .progress-bar-fill,
  .stage2-upload-item.is-interrupted .progress-bar-fill {
    background: var(--color-danger);
  }

  .stage2-upload-meta {
    gap: 0.25rem;
  }

  .stage2-upload-status {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .stage2-upload-item.is-failed .stage2-upload-status,
  .stage2-upload-item.is-interrupted .stage2-upload-status {
    color: var(--color-danger);
  }

  .stage2-upload-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.15rem;
  }

  .stage2-upload-lightbox-caption {
    position: absolute;
    bottom: 1.25rem;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: var(--text-sm);
  }

/* Archived list: inline "Post" assignee picker */
.post-assign { display: inline-block; margin-left: 6px; vertical-align: top; }
.post-assign > summary { list-style: none; cursor: pointer; display: inline-block; }
.post-assign > summary::-webkit-details-marker { display: none; }

/* =========================================================================
   Google Drive Workspace — new, self-contained styles. Prefixed .drive-ws-*
   so nothing here can collide with the existing .stage2-* upload grid CSS
   above (the two features are visually independent by design).
   ========================================================================= */

.drive-ws-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.drive-ws-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.drive-ws-breadcrumb-item {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--text-secondary, var(--text-muted));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.drive-ws-breadcrumb-item.is-current {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  cursor: default;
}

.drive-ws-breadcrumb-sep {
  color: var(--text-muted);
}

.drive-ws-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 220px;
}

.drive-ws-search svg {
  position: absolute;
  left: 0.65rem;
  color: var(--text-muted);
  pointer-events: none;
}

.drive-ws-search input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface-alt);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.drive-ws-state {
  padding: 1.25rem;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.drive-ws-state-error {
  color: var(--color-danger);
}

.drive-ws-folders {
  display: grid;
  /* One folder per row (not a multi-column tile grid) so a long folder
     name has the full card width to show in rather than being clipped. */
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.drive-ws-folder-card {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface-alt);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.drive-ws-folder-card:hover {
  background: var(--bg-hover);
  border-color: var(--color-primary);
}

.drive-ws-file-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  word-break: break-word;
}

.drive-ws-modal {
  max-width: 640px;
}

.drive-ws-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  background: var(--bg-surface-alt);
  overflow: hidden;
}

.drive-ws-preview-img {
  max-width: 100%;
  max-height: 360px;
  display: block;
}

.drive-ws-preview-video {
  width: 100%;
  max-height: 360px;
}

.drive-ws-preview-generic {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
}

.drive-ws-preview-generic span {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* Positioned against #driveFileInfoBackdrop (.modal-backdrop, which is
   `position: fixed; inset: 0`) rather than the modal itself, so these sit
   outside the modal box — on the dimmed backdrop, either side of it —
   instead of overlapping the preview/image inside it. */
.drive-ws-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.55);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}

.drive-ws-preview-nav:hover:not(:disabled) {
  background: rgba(17, 24, 39, 0.8);
}

.drive-ws-preview-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.drive-ws-preview-nav-prev {
  left: 0.75rem;
}

.drive-ws-preview-nav-next {
  right: 0.75rem;
}

@media (max-width: 720px) {
  /* Not enough room beside the modal on narrow screens to sit fully
     outside it without touching the viewport edge — pull them in over the
     backdrop's own edge padding instead of overlapping the modal card. */
  .drive-ws-preview-nav {
    width: 34px;
    height: 34px;
  }

  .drive-ws-preview-nav-prev {
    left: 0.25rem;
  }

  .drive-ws-preview-nav-next {
    right: 0.25rem;
  }
}

.drive-ws-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  font-size: var(--text-sm);
  margin: 0 0 1rem;
}

.drive-ws-meta dt {
  color: var(--text-muted);
}

.drive-ws-meta dd {
  margin: 0;
  color: var(--text-primary);
}

.drive-ws-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.drive-ws-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.drive-ws-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* ---- "Select all" row (appears above the bulk bar whenever the folder has
   at least one selectable file) ---- */

.drive-ws-select-all-row {
  margin-bottom: 0.75rem;
}

.drive-ws-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: var(--text-secondary, var(--text-muted));
  cursor: pointer;
}

.drive-ws-select-all input {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* ---- Multi-select bulk action bar (appears above the file grid once a
   checkbox is checked) ---- */

.drive-ws-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface-alt);
  font-size: var(--text-sm);
}

.drive-ws-bulk-actions {
  display: flex;
  gap: 0.5rem;
}

/* ---- File grid (Google-Drive-style thumbnail cards) ---- */

.drive-ws-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.drive-ws-file-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface-alt);
  overflow: visible;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.drive-ws-file-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
}

/* Multi-select checkbox overlaid on the thumbnail (see drive_workspace.js —
   it's a sibling of the thumb button, not nested inside it). */
.drive-ws-file-select {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(17, 24, 39, 0.55);
  cursor: pointer;
}

.drive-ws-file-select input {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.drive-ws-file-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--bg-surface);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}

.drive-ws-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.drive-ws-file-thumb-icon {
  font-size: 2.25rem;
  color: var(--text-muted);
}

.drive-ws-file-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
}

.drive-ws-file-name {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

/* ---- Per-item "⋮" dropdown menu (files and folders) ---- */

.drive-ws-dotmenu {
  position: relative;
  flex-shrink: 0;
}

.drive-ws-dots-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.drive-ws-dots-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.drive-ws-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 150px;
  padding: 0.35rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.18));
}

/* Folder rows put the "⋮" button on the left (see drive-ws-dotmenu-vertical
   below), so its dropdown opens toward the right instead — anchoring it
   right:0 there would push it off the left edge of the row/screen. */
.drive-ws-dotmenu-vertical .drive-ws-dropdown {
  left: 0;
  right: auto;
}

.drive-ws-dropdown button {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: none;
  background: none;
  border-radius: var(--radius-md, 8px);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
}

.drive-ws-dropdown button:hover {
  background: var(--bg-hover);
}

.drive-ws-dropdown button.is-danger {
  color: var(--color-danger);
}

.drive-ws-folder-card-body {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.5rem;
}

.drive-ws-folder-open {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
}

.drive-ws-folder-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.drive-ws-folder-name {
  font-size: var(--text-sm);
  /* Full row width is available now that folders list one per row, so the
     whole name can wrap into view instead of being ellipsis-clipped. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---- Bottom-right upload queue (Google-Drive-style widget) ---- */

.drive-ws-queue {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: min(360px, calc(100vw - 2rem));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.22));
  overflow: hidden;
}

.drive-ws-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-surface-alt);
  font-size: var(--text-sm);
  font-weight: 600;
}

.drive-ws-queue-head-actions {
  display: flex;
  gap: 0.25rem;
}

.drive-ws-queue-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
}

.drive-ws-queue-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.drive-ws-queue-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.4rem;
}

.drive-ws-queue.is-collapsed .drive-ws-queue-list {
  display: none;
}

.drive-ws-queue-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0.65rem;
  border-radius: var(--radius-md);
}

.drive-ws-queue-item:hover {
  background: var(--bg-surface-alt);
}

.drive-ws-queue-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--text-sm);
}

.drive-ws-queue-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.drive-ws-queue-item-status {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: var(--text-xs, 0.75rem);
}

.drive-ws-queue-item.is-done .drive-ws-queue-item-status { color: var(--color-success); }
.drive-ws-queue-item.is-error .drive-ws-queue-item-status { color: var(--color-danger); }
.post-assign form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: 220px; }

/* "Download as ZIP" progress modal — stays inside the Drive Workspace while
   an async zip job (see drive_workspace.js / DriveWorkspace zip job flow)
   runs, instead of navigating to a raw streaming endpoint. */
.drive-ws-zip-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 0.5rem 0 1rem;
}

.drive-ws-zip-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-info);
  animation: btn-spin 0.8s linear infinite;
}

.drive-ws-zip-check {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-success);
  color: #fff;
  font-size: var(--text-lg);
}

.drive-ws-zip-progress {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.drive-ws-zip-progress-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Delete modal progress (folders / single / multi-select file delete) */
.drive-ws-delete-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.drive-ws-delete-progress[hidden] {
  display: none;
}

.drive-ws-delete-progress-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.drive-ws-delete-spinner {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 3px solid var(--border-color, rgba(128, 128, 128, 0.3));
  border-top-color: var(--color-danger, #dc2626);
  animation: gh-btn-spin 0.7s linear infinite;
}

.drive-ws-delete-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-surface-alt, rgba(128, 128, 128, 0.2));
  overflow: hidden;
}

.drive-ws-delete-bar-fill {
  height: 100%;
  width: 0;
  background: var(--color-danger, #dc2626);
  transition: width 0.25s ease;
}

/* =========================================================================
  Newly-added-row highlight (WAR Section I / Section IV, etc.)
  Applied by assets/js/highlight_target.js after a redirect back to a row
  that was just created, then removed after ~3s.
  ========================================================================= */

@keyframes highlight-flash-row {
  0%, 70% { box-shadow: inset 0 0 0 9999px var(--color-primary-soft); }
  100% { box-shadow: inset 0 0 0 9999px transparent; }
}

@keyframes highlight-flash-ring {
  0%, 70% { box-shadow: 0 0 0 3px var(--color-primary); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

tr.highlight-flash td {
  animation: highlight-flash-row 3s ease-out;
}

.photo-grid-item.highlight-flash {
  animation: highlight-flash-ring 3s ease-out;
  border-radius: var(--radius-sm);
}

/* ---- Public legal pages (terms-of-service.php, privacy-policy.php) ---- */
.legal-body { background: var(--bg-body); color: var(--text-secondary); font-family: var(--font-sans); line-height: 1.7; margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.legal-wrap { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 1rem; box-sizing: border-box; }
.legal-body main { flex: 1; padding: 1.5rem 0 2.5rem; }
.legal-header { background: var(--bg-surface); border-bottom: 1px solid var(--border-color); }
.legal-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .75rem; padding-bottom: .75rem; }
.legal-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text-primary); font-family: var(--font-display); font-weight: 700; }
.legal-brand span { display: flex; flex-direction: column; line-height: 1.2; }
.legal-brand small { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); }
.legal-nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.legal-nav a { padding: .4rem .75rem; border-radius: var(--radius-full); text-decoration: none; color: var(--text-secondary); font-size: var(--text-sm); }
.legal-nav a:hover, .legal-nav a[aria-current='page'] { background: var(--color-primary-soft); color: var(--color-primary); }
.legal-nav .legal-nav-cta { background: var(--color-primary); color: var(--text-on-primary); }
.legal-nav .legal-nav-cta:hover { background: var(--color-primary-hover); color: var(--text-on-primary); }
.legal-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 2rem 2.25rem; }
.legal-card h1 { font-family: var(--font-display); color: var(--text-primary); font-size: 1.9rem; margin: 0 0 .25rem; }
.legal-card h2 { font-family: var(--font-display); color: var(--text-primary); font-size: var(--text-xl); margin: 1.9rem 0 .5rem; }
.legal-card p, .legal-card li { font-size: var(--text-base); }
.legal-card ul { padding-left: 1.3rem; }
.legal-card li { margin-bottom: .35rem; }
.legal-card a { color: var(--color-primary); }
.legal-meta { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
.legal-placeholder { background: var(--color-accent-yellow-soft); color: var(--color-warning); border-radius: 4px; padding: 0 .3rem; font-weight: 600; }
.legal-footer { border-top: 1px solid var(--border-color); background: var(--bg-surface); padding: 1.1rem 0; text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
.legal-footer nav { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: .4rem; }
.legal-footer a { color: var(--color-primary); text-decoration: none; }
.legal-footer p { margin: 0; }
.login-legal { margin: .6rem 0 0; text-align: center; font-size: var(--text-xs); color: #8b8fa3; }
.login-legal a { color: inherit; text-decoration: underline; }
@media (max-width: 640px) {
  .legal-card { padding: 1.25rem 1.1rem; border-radius: var(--radius-md); }
  .legal-card h1 { font-size: 1.5rem; }
  .legal-header-inner { justify-content: center; }
}

/* ---- Public landing page (index.php, logged-out) — reuses .legal-* shell ---- */
.landing-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.landing-card { max-width: 520px; width: 100%; text-align: center; }
.landing-card .landing-logo { display: block; margin: 0 auto 1rem; height: auto; max-width: 96px; }
.landing-card h1 { letter-spacing: .04em; }
.landing-sub { color: var(--text-muted); margin: 0 0 1.1rem; font-size: var(--text-base); }
.landing-text { margin: 0 0 1.5rem; }
.landing-card a.landing-btn { display: inline-block; background: var(--color-primary); color: var(--text-on-primary); padding: .7rem 2.2rem; border-radius: var(--radius-full); text-decoration: none; font-weight: 600; }
.landing-card a.landing-btn:hover { background: var(--color-primary-hover); }


/* ---- Notifications with a headline + detail (ICCU) ---- */
.notif-item-message .notif-headline { display: block; font-weight: 700; color: var(--text-primary); }
.notif-item-message .notif-detail { display: block; margin-top: 0.15rem; font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; }
/* ---- WAR "Populate from GitHub" button: logo + loading spinner ---- */
.github-repos { border: 0; margin: 0.75rem 0; padding: 0; }
.github-repos legend { font-weight: 600; margin-bottom: 0.35rem; padding: 0; }
.btn-github { display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-github .gh-icon { flex: none; }
.btn-loading .btn-spinner { display: none; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gh-btn-spin 0.7s linear infinite; }
.btn-loading.is-loading { display: inline-flex; align-items: center; gap: 0.5rem; opacity: 0.85; cursor: progress; }
.btn-loading.is-loading .btn-spinner { display: inline-block; }
.btn-loading.is-loading .gh-icon { display: none; }
@keyframes gh-btn-spin { to { transform: rotate(360deg); } }
#github-populate .field-error { color: var(--danger, #b42318); margin: 0.5rem 0; font-weight: 600; }
#github-populate .field-error[hidden] { display: none; }
#github-populate textarea { width: 100%; }

/* Loading state on non-primary buttons: the base .btn.is-loading spinner is
   white, which would vanish on light secondary/outline buttons. */
.btn-secondary.is-loading::after,
.btn-outline.is-loading::after {
  border-color: var(--border-color);
  border-top-color: var(--color-primary);
}

.btn:disabled.is-loading { opacity: 0.85; cursor: progress; }