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

    body {
      font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #f6f7fb;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* ── BOOT LOADER: hides the app until main.js has applied the role, so
       the default user My Status view never flashes on refresh ── */
    #boot-loader { display: none; }
    html.app-booting body > *:not(#boot-loader) { visibility: hidden !important; }
    html.app-booting #boot-loader {
      display: flex;
      position: fixed;
      inset: 0;
      z-index: 99999;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      background: #f6f7fb;
      color: #64748b;
      font-size: 13px;
      font-weight: 500;
    }
    #boot-loader img { height: 72px; width: auto; }
    .boot-spinner {
      width: 34px; height: 34px;
      border-radius: 50%;
      border: 3px solid #e4e0ff;
      border-top-color: #6a5ce0;
      animation: boot-spin .8s linear infinite;
    }
    @keyframes boot-spin { to { transform: rotate(360deg); } }

    /* ── APP HEADER: logo cell + topbar as one continuous full-width strip ── */
    .app-header {
      display: flex;
      align-items: stretch;
      background: #fff;
      border-bottom: 1px solid #e8edf5;
      flex-shrink: 0;
    }
    .app-header-logo {
      width: auto;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 24px;
      border-right: 1px solid #eef1f8;
    }
    .app-header-logo img { display: block; height: 52px; width: auto; object-fit: contain; }

    /* ── APP BODY: icon rail + page content, below the header ── */
    .app-body {
      display: flex;
      flex: 1;
      min-height: 0;
    }

    /* ── SIDEBAR (icon rail — opened/closed only by the header's sidebar
       button, which docks it open: html.sidebar-docked + .sidebar-pinned;
       there's no hover expand any more) ──
       .sidebar keeps a fixed 76px footprint in the flex layout so the page
       content never reflows; .sidebar-inner is absolutely positioned inside
       it and is what actually grows to 240px on hover, overlaying the page
       content rather than pushing it (a real ancestor/descendant hover, so
       staying on the expanded drawer — including the flown-out dropdown —
       keeps it open). */
    .sidebar {
      width: 76px;
      flex-shrink: 0;
      position: relative;
      min-height: 0;
      z-index: 40;
      transition: width .18s ease;
    }
    /* Docked (the header's menu button): the sidebar stays open at full width
       and takes that room in the layout, so the page content moves right and
       narrows to fit beside it instead of being covered. JS also keeps
       .sidebar-pinned on, which turns on all the expanded styles below. */
    html.sidebar-docked:not(.is-mobile) .sidebar { width: 200px; }
    html.sidebar-docked:not(.is-mobile) .sidebar .sidebar-inner { width: 200px; box-shadow: none; }
    /* Profile menu open on the closed rail: show it beside the rail without
       widening the sidebar (only the hamburger opens the sidebar). */
    .sidebar.menu-open .sidebar-inner { overflow: visible; }
    /* Top row of the sidebar: the hamburger (centred on the closed rail)
       opens it; while open only the ✕ shows, and closes it. */
    .sidebar-top { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 10px 0; flex-shrink: 0; }
    /* Open: the hamburger hides and only the ✕ (right) closes it. */
    html.sidebar-docked:not(.is-mobile) .sidebar-top { justify-content: flex-end; padding: 12px 12px 0; }
    html.sidebar-docked:not(.is-mobile) .sidebar-dock-btn { display: none; }
    html.is-mobile .sidebar-top { display: none; } /* phones use the header's menu button */
    .sidebar-dock-btn {
      display: flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; flex-shrink: 0;
      border: none; border-radius: 12px; background: #f4f5fa; color: #0f172a;
      font-size: 21px; cursor: pointer; transition: background .15s, color .15s;
    }
    .sidebar-dock-btn:hover { background: #e9ecf5; }
    html.sidebar-docked .sidebar-dock-btn { background: #eef2ff; color: #1a50a0; }
    /* Hamburger: three bold rounded bars in the app's blue */
    .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 20px; }
    .hamburger span { display: block; height: 2.5px; border-radius: 3px; background: #1a50a0; }
    .hamburger span:nth-child(2) { width: 75%; }
    /* ✕ in the open sidebar's top row, right */
    .sidebar-close-btn {
      display: none; flex-shrink: 0;
      width: 32px; height: 32px; align-items: center; justify-content: center;
      border: none; border-radius: 9px; background: #f4f5fa; color: #64748b;
      font-size: 14px; cursor: pointer; transition: background .15s, color .15s;
    }
    .sidebar-close-btn:hover { background: #fee2e2; color: #dc2626; }
    html.sidebar-docked:not(.is-mobile) .sidebar-close-btn { display: flex; }

    html.is-mobile .sidebar-dock-btn { display: none; } /* phones keep their own menu */
    .sidebar-inner {
      position: absolute;
      inset: 0;
      width: 76px;
      background: #fff;
      border-right: 1px solid #eef1f8;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      overflow: hidden;
      transition: width .18s ease, box-shadow .18s ease;
    }
    .sidebar.sidebar-pinned .sidebar-inner {
      width: 200px;
      box-shadow: 10px 0 30px rgba(15,23,42,.14);
      /* Expanded: let the user-menu dropdown (flies out to the right of the
         rail) escape this box instead of being clipped by the collapsed
         state's overflow:hidden. .sidebar-pinned (toggled in JS while the
         dropdown is open) keeps this applied even if the mouse briefly
         leaves :hover crossing the gap to the flown-out menu. */
      overflow: visible;
    }

    .sidebar nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      width: 100%;
      padding: 16px 10px 4px;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
    }
    .sidebar.sidebar-pinned .sidebar-inner nav { align-items: stretch; padding: 16px 12px 4px; }

    .rail-divider {
      width: 28px;
      height: 1px;
      background: #eef1f8;
      margin: 8px 0;
      flex-shrink: 0;
      transition: width .18s ease;
    }
    .rail-divider.admin-only { display: none; }
    .sidebar.sidebar-pinned .rail-divider { width: 100%; }

    .nav-section-label { display: none; }

    .nav-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: 52px;
      height: 46px;
      flex-shrink: 0;
      color: #94a3b8;
      text-decoration: none;
      border-radius: 13px;
      transition: background .15s, color .15s;
      cursor: pointer;
      position: relative;
      white-space: nowrap;
    }
    .sidebar.sidebar-pinned .nav-link {
      flex-direction: row;
      justify-content: flex-start;
      width: 100%;
      height: 44px;
      gap: 14px;
      padding: 0 14px;
    }
    .nav-link .nav-icon { font-size: 18px; flex-shrink: 0; }
    .nav-link .nav-label { display: none; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
    .sidebar.sidebar-pinned .nav-link .nav-label { display: inline-block; }
    .nav-link:hover  { background: #f8faff; color: #6a5ce0; }
    .nav-link.active {
      background: #f0ecff;
      color: #6a5ce0;
    }
    .nav-link.admin-only { display: none; }
    .nav-link.hod-only, .nav-link.mgr-hod-only { display: none; }
    /* Sub-items under a parent link (e.g. Resource Allocation) */
    .nav-link.nav-sub { height: 38px; }
    .nav-link.nav-sub .nav-icon { font-size: 14px; }
    .sidebar.sidebar-pinned .nav-link.nav-sub { height: 36px; padding-left: 34px; }
    .nav-link.nav-sub .nav-label { font-size: 12px; font-weight: 500; }
    .nav-link.superadmin-only { display: none; }

    .sidebar-footer {
      margin-top: auto;
      width: 100%;
      padding: 10px 12px 18px;
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 10;
    }
    .sidebar-user-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: transform .15s, background .15s;
      border-radius: 12px;
      position: relative;
    }
    .sidebar-user-btn:hover { transform: scale(1.06); }
    .sidebar.sidebar-pinned .sidebar-user-btn { justify-content: flex-start; padding: 6px 8px; }
    .sidebar.sidebar-pinned .sidebar-user-btn:hover { background: #f8faff; transform: none; }
    .sidebar-avatar {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, #8175f0, #6a5ce0);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 800; color: #fff;
      flex-shrink: 0;
      box-shadow: 0 0 0 3px #f0ecff;
    }
    .sidebar-user-info { display: none; flex-direction: column; text-align: left; min-width: 0; flex: 1; }
    .sidebar.sidebar-pinned .sidebar-user-info { display: flex; }
    .user-name { color: #1e293b; font-size: 13px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .user-role { color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
    .sidebar-chevron { display: none; flex-shrink: 0; color: #94a3b8; font-size: 12px; }
    .sidebar.sidebar-pinned .sidebar-chevron { display: inline-block; }

    /* Dropdown menu — flies out to the right of the narrow rail */
    .user-dropdown {
      display: none;
      position: absolute;
      bottom: 0;
      left: calc(100% + 12px);
      width: 200px;
      background: #fff;
      border: 1px solid #eef1f8;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 12px 32px rgba(30,20,90,0.16);
      z-index: 100;
    }
    .user-dropdown.open { display: block; }
    .dropdown-header {
      padding: 10px 14px 8px;
      border-bottom: 1px solid #f1f4fa;
    }
    .dropdown-header .dh-name  { font-size: 13px; font-weight: 700; color: #1e293b; }
    .dropdown-header .dh-role  { font-size: 10.5px; color: #94a3b8; text-transform: uppercase; }
    .dropdown-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 14px;
      font-size: 13px;
      color: #475569;
      cursor: pointer;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      transition: background .12s;
    }
    .dropdown-item:hover { background: #f8faff; color: #1e293b; }
    .dropdown-item.danger { color: #dc2626; }
    .dropdown-item.danger:hover { background: #fef2f2; }
    .dropdown-divider { height: 1px; background: #f1f4fa; margin: 2px 0; }

    .btn-logout { display: none; } /* hidden — replaced by dropdown */

    /* ── MAIN ── */
    .main {
      flex: 1;
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: #f6f7fb;
      min-height: 0;
    }

    /* Top topbar */
    .topbar {
      flex: 1;
      min-width: 0;
      padding: 14px 28px;
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      gap: 16px;
      flex-wrap: wrap;
    }
    .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .topbar-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* Pill quick-nav in the topbar (reuses .nav-link, overridden for row layout) */
    .tb-pills {
      display: flex;
      align-items: center;
      gap: 4px;
      background: #f4f5fa;
      border-radius: 16px;
      padding: 5px;
    }
    .tb-pills .nav-link {
      flex-direction: row;
      width: auto;
      height: auto;
      gap: 7px;
      padding: 8px 16px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }
    .tb-pills .nav-link .nav-icon,
    .tb-pills .nav-link > i:first-child { font-size: 14px; }
    .tb-pills .nav-link:hover { background: rgba(255,255,255,.7); color: #334155; }
    .tb-pills .nav-link.active {
      background: #fff;
      color: #0f172a;
      box-shadow: 0 2px 8px rgba(17,24,39,0.08);
    }

    /* Live team avatar stack */
    .tb-avatar-stack {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .tb-stack-av {
      width: 30px; height: 30px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800; color: #fff;
      border: 2px solid #fff;
      margin-left: -10px;
      flex-shrink: 0;
    }
    .tb-avatar-stack .tb-stack-av:first-child { margin-left: 0; }
    .tb-stack-more { background: #e2e8f0; color: #64748b; }
    .tb-stack-av.av-working, .tb-stack-av.av-break, .tb-stack-av.av-offline { box-shadow: none; }

    /* Role-gated quick action button */
    .tb-add-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #0f172a;
      color: #fff;
      border: none;
      border-radius: 20px;
      padding: 9px 16px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      transition: background .15s;
      white-space: nowrap;
    }
    .tb-add-btn:hover { background: #1e293b; }

    /* Collapse topbar labels to icon-only as the window narrows, so the
       header stays on one row instead of wrapping to two. */
    @media (max-width: 980px) {
      .tb-pill-label { display: none; }
      .tb-pills .nav-link { padding: 8px 12px; }
    }
    @media (max-width: 820px) {
      .tb-add-btn-label { display: none; }
      .tb-add-btn { padding: 9px; border-radius: 50%; }
      .app-header-logo { padding: 8px 14px; }
    }

    /* Notification bell */
    .tb-bell {
      position: relative;
      width: 38px; height: 38px;
      border-radius: 50%;
      background: #f4f5fa;
      border: none;
      color: #64748b;
      font-size: 15px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background .15s;
      flex-shrink: 0;
    }
    .tb-bell:hover { background: #ecebf7; color: #334155; }
    .tb-bell-badge {
      position: absolute;
      top: -2px; right: -2px;
      min-width: 16px; height: 16px;
      padding: 0 3px;
      border-radius: 8px;
      background: #ef4444;
      color: #fff;
      font-size: 9.5px;
      font-weight: 800;
      align-items: center;
      justify-content: center;
      border: 2px solid #fff;
    }

    /* Topbar profile dropdown */
    .tb-profile-wrap {
      position: relative;
    }
    .tb-profile-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: all .15s;
    }
    .tb-profile-btn:hover { transform: scale(1.06); }
    .tb-avatar {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, #1a50a0, #2563eb);
      color: #fff;
      font-size: 13px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .tb-uname  { display: none; }
    .tb-chevron { display: none; }
    .tb-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 190px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.12);
      z-index: 500;
      overflow: hidden;
    }
    .tb-dropdown.open { display: block; }
    .tb-dd-header {
      padding: 12px 14px 10px;
      border-bottom: 1px solid #f1f5f9;
      background: #f8fafc;
    }
    .tb-dd-name { font-size: 13px; font-weight: 700; color: #1e293b; }
    .tb-dd-role { font-size: 11px; color: #94a3b8; margin-top: 1px; }
    .tb-dd-item {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 10px 14px;
      border: none;
      background: none;
      font-size: 13px;
      color: #334155;
      cursor: pointer;
      text-align: left;
      transition: background .12s;
    }
    .tb-dd-item:hover { background: #f8fafc; }
    .tb-dd-item.danger { color: #dc2626; }
    .tb-dd-item.danger:hover { background: #fef2f2; }
    .tb-dd-divider { height: 1px; background: #f1f5f9; }

    /* Notification bell dropdown */
    .notif-dropdown { width: 340px; max-width: 90vw; }
    .notif-dd-header { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: #1e293b; }
    .notif-mark-all { background: none; border: none; color: #1a50a0; font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; }
    .notif-mark-all:hover { text-decoration: underline; }
    .notif-list { max-height: 380px; overflow-y: auto; }
    .notif-empty { padding: 28px 14px; text-align: center; color: #94a3b8; font-size: 12.5px; }
    .notif-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      width: 100%;
      padding: 11px 14px;
      border: none;
      border-bottom: 1px solid #f1f5f9;
      background: none;
      text-align: left;
      cursor: pointer;
      transition: background .12s;
    }
    .notif-item:last-child { border-bottom: none; }
    .notif-item:hover { background: #f8fafc; }
    .notif-item.unread { background: #eff6ff; }
    .notif-item.unread:hover { background: #e0edff; }
    .notif-icon {
      width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 14px;
    }
    .notif-icon-break_alert { background: #ffedd5; color: #d97706; }
    .notif-icon-target_achieved { background: #dcfce7; color: #16a34a; }
    .notif-icon-day_off { background: #e0e7ff; color: #3730a3; }
    .notif-icon-project_status { background: #dbeafe; color: #2563eb; }
    .notif-icon-project_allocated { background: #ede9fe; color: #7c3aed; }
    .notif-icon-resources_pending { background: #fef3c7; color: #b45309; }
    .notif-icon-resources_approved { background: #dcfce7; color: #16a34a; }
    .notif-icon-resources_rejected { background: #fee2e2; color: #dc2626; }
    .notif-icon-project_assigned { background: #ede9fe; color: #7c3aed; }
    .notif-icon-project_released { background: #f1f5f9; color: #475569; }
    .notif-icon-log_edited { background: #fef3c7; color: #b45309; }
    .notif-icon-project_complete { background: #dcfce7; color: #15803d; }
    .fr-done-edit:hover { outline: 1.5px dashed #1a50a0; outline-offset: -3px; background: #eff6ff; }
    .fr-edit-icon { font-size: 10px; color: #94a3b8; margin-left: 2px; }
    .fr-done-edit:hover .fr-edit-icon { color: #1a50a0; }
    .notif-body { flex: 1; min-width: 0; }
    .notif-title { font-size: 12.5px; font-weight: 700; color: #0f172a; }
    .notif-msg { font-size: 11.5px; color: #64748b; margin-top: 2px; line-height: 1.4; }
    .notif-time { font-size: 10.5px; color: #94a3b8; margin-top: 4px; }
    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #1a50a0; flex-shrink: 0; margin-top: 4px; }
    .topbar-date {
      font-size: 12px;
      color: #94a3b8;
      background: #f1f5f9;
      border-radius: 8px;
      padding: 5px 12px;
      font-weight: 500;
    }
    .topbar-status-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
    }

    .page-body {
      flex: 1;
      padding: 28px 32px;
      overflow-y: auto;
      min-height: 0;
      min-width: 0;
    }

    .page { display: none; }
    .page.active { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }

    /* ── Toast notifications ── */
    .toast {
      display:flex; align-items:center; gap:10px;
      padding:13px 18px; border-radius:12px;
      font-size:13.5px; font-weight:600; color:#fff;
      box-shadow:0 8px 30px rgba(0,0,0,.18);
      pointer-events:all; min-width:240px; max-width:340px;
      animation:toast-in .28s cubic-bezier(.34,1.56,.64,1);
    }
    .toast.removing { animation:toast-out .22s ease forwards; }
    .toast-success { background:linear-gradient(135deg,#22c55e,#16a34a); }
    .toast-error   { background:linear-gradient(135deg,#ef4444,#dc2626); }
    .toast-warning { background:linear-gradient(135deg,#f59e0b,#d97706); }
    .toast-info    { background:linear-gradient(135deg,#3b82f6,#1d4ed8); }
    .toast-icon    { font-size:18px; flex-shrink:0; }
    .toast-close   { margin-left:auto; cursor:pointer; opacity:.75; font-size:16px; flex-shrink:0; }
    .toast-close:hover { opacity:1; }
    @keyframes toast-in  { from { opacity:0; transform:translateX(40px) scale(.92); } to { opacity:1; transform:none; } }
    @keyframes toast-out { to   { opacity:0; transform:translateX(40px) scale(.92); } }

    /* ── Skeleton shimmer ── */
    .skeleton { background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:6px; }
    @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

    /* Legacy page-header kept for sub-pages */
    .page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 2px solid #f1f5f9;
    }
    .page-header h1 { font-size: 22px; font-weight: 800; color: #0f172a; }

    /* ── USER HOME ──
       Stacked vertically: status card on top, timers row below it,
       then break history — always a single column, not a side-by-side split. */
    .user-home-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .status-card {
      --sc-accent: #1a50a0;
      --sc-tint: #eef2ff;
      background: #fff;
      border-radius: 22px;
      padding: 18px 24px;
      box-shadow: 0 8px 24px rgba(17,24,39,0.08);
      border-top: 4px solid var(--sc-accent);
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .status-card.sc-working { --sc-accent: #059669; --sc-tint: #d1fae5; }
    .status-card.sc-break   { --sc-accent: #d97706; --sc-tint: #ffedd5; }

    .status-hero-illustration { flex-shrink: 0; width: 190px; }
    .desk-illo { display: block; width: 100%; height: auto; }

    .status-hero-main { flex: 1; min-width: 220px; text-align: center; }

    .status-hero-side {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 210px;
    }
    .status-hero-side .today-summary { margin-top: 0; justify-content: flex-end; }
    .status-quote {
      background: #eff6ff;
      border: 1px solid #dbeafe;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 12px;
      font-style: italic;
      color: #1e40af;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.4;
    }
    .status-quote i { color: #f59e0b; margin-top: 1px; flex-shrink: 0; }

    @media (max-width: 900px) {
      .status-card { justify-content: center; text-align: center; }
      .status-hero-side { width: 100%; }
      .status-hero-side .today-summary { justify-content: center; }
      .status-actions-row { justify-content: center; }
    }
    .status-greeting {
      font-size: 14px;
      font-weight: 700;
      color: var(--sc-accent);
      margin-bottom: 12px;
    }
    .status-icon {
      width: 46px; height: 46px;
      margin: 0 auto 8px;
      border-radius: 50%;
      background: var(--sc-tint);
      color: var(--sc-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
    }
    .status-card h2 { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 3px; }
    .status-card p  { font-size: 12px; color: #64748b; margin-bottom: 8px; }

    .status-since {
      font-size: 11px;
      color: #94a3b8;
      margin-bottom: 10px;
      margin-top: -6px;
    }

    .status-actions-row { display: flex; justify-content: flex-end; }
    .status-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
    .status-btns-xl { gap: 14px; }
    .status-btns-xl .btn-working,
    .status-btns-xl .btn-break {
      padding: 18px 38px;
      font-size: 18px;
      border-radius: 16px;
    }

    .btn-working {
      padding: 8px 18px;
      background: linear-gradient(135deg, #10b981, #059669);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(16,185,129,0.35);
      transition: all .18s;
    }
    .btn-working:hover { transform: translateY(-2px); }

    .btn-break {
      padding: 8px 18px;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(245,158,11,0.35);
      transition: all .18s;
    }
    .btn-break:hover { transform: translateY(-2px); }

    .today-summary {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      justify-content: center;
    }
    .today-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      border-radius: 12px;
      padding: 6px 12px;
      font-size: 11.5px;
      color: #64748b;
      font-weight: 600;
      text-align: left;
    }
    .today-chip-icon {
      width: 32px; height: 32px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }
    .today-chip-icon-work  { background: #d1fae5; color: #059669; }
    .today-chip-icon-break { background: #ffedd5; color: #d97706; }
    .today-chip strong { display: block; font-size: 15px; font-weight: 800; color: #0f172a; }

    /* ── 9-HOUR TIMER ── */
    .timers-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }

    .timer-card {
      border-radius: 22px;
      overflow: hidden;
      text-align: center;
      box-shadow: 0 8px 24px rgba(17,24,39,0.08);
    }
    .tc-blue   { --tc-accent: #2563eb; --tc-tint: #dbeafe; }
    .tc-green  { --tc-accent: #059669; --tc-tint: #d1fae5; }
    .tc-orange { --tc-accent: #d97706; --tc-tint: #ffedd5; }
    .tc-blue   .tc-top { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
    .tc-green  .tc-top { background: linear-gradient(135deg, #10b981, #047857); }
    .tc-orange .tc-top { background: linear-gradient(135deg, #f59e0b, #b45309); }

    /* Header zone: icon badge, title, play/stop status indicator */
    .tc-top {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 14px;
      color: #fff;
    }
    .tc-icon-badge {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: #fff;
      color: var(--tc-accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }
    .tc-title {
      flex: 1;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      text-align: left;
    }
    .tc-status-dot {
      width: 26px; height: 26px;
      border-radius: 50%;
      background: rgba(255,255,255,0.25);
      display: flex; align-items: center; justify-content: center;
      font-size: 12px;
      flex-shrink: 0;
    }
    .tc-status-dot.active { background: #fff; color: var(--tc-accent); }

    /* Body zone: decorative reels + progress bar */
    .tc-body {
      background: var(--tc-tint);
      padding: 14px 16px 12px;
    }
    .tc-reels {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    .tc-reel {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: #fff;
      display: flex; align-items: center; justify-content: center;
      position: relative;
      box-shadow: 0 2px 6px rgba(17,24,39,0.1);
    }
    .tc-reel::before {
      content: '';
      position: absolute;
      inset: 5px;
      border-radius: 50%;
      background: conic-gradient(var(--tc-accent) 0 25%, transparent 0 50%, var(--tc-accent) 0 75%, transparent 0 100%);
      opacity: .8;
    }
    .tc-reel-hub { width: 7px; height: 7px; border-radius: 50%; background: #0f172a; position: relative; z-index: 1; }
    .tc-reel-belt { width: 28px; height: 10px; background: #fff; border-radius: 6px; margin: 0 -4px; box-shadow: 0 2px 4px rgba(17,24,39,0.08); }
    .tc-progress-bar { background: rgba(255,255,255,0.7); border-radius: 5px; height: 6px; overflow: hidden; }
    .tc-progress-fill { height: 100%; border-radius: 5px; background: var(--tc-accent); transition: width 1s linear; }
    .tc-ticks { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 10.5px; font-weight: 600; color: var(--tc-accent); opacity: .75; }
    .tc-tick-sep { opacity: .5; }

    /* Readout zone: status word + big elapsed time — a faint wash of the
       card's own accent color instead of flat white, so the color from the
       header carries all the way through the card instead of stopping dead
       partway down. */
    .tc-readout {
      background: color-mix(in srgb, var(--tc-tint) 35%, white);
      padding: 14px 16px 16px;
    }
    .tc-readout-status {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1px;
      color: var(--tc-accent);
      margin-bottom: 4px;
    }
    .timer-display {
      font-size: 26px;
      font-weight: 800;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
      letter-spacing: 1px;
      font-family: monospace;
    }
    .timer-display.urgent { color: #dc2626; }
    .timer-subtext { font-size: 10.5px; color: #94a3b8; margin-top: 6px; }

    /* ── RECENT ACTIVITY ROWS (reused by the Recent Activity insight panel) ── */
    .bh-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 8px;
      border-bottom: 1px solid #f1f5f9;
      border-radius: 10px;
      transition: background .12s;
    }
    .bh-item:last-child { border-bottom: none; }
    .bh-item:hover { background: #f8faff; }
    .bh-type  { flex: 0.9; min-width: 0; font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bh-time  { flex: 1.7; min-width: 0; font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bh-plan  { flex: 0.6; min-width: 0; font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bh-plan.active { color: #6366f1; font-weight: 600; }
    .bh-dur   { width: 56px; flex-shrink: 0; font-size: 13px; font-weight: 800; color: #0f172a; text-align: right; }
    .bh-dur.active { color: #6366f1; }
    .bh-icon {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }
    .bh-empty { text-align: center; color: #94a3b8; font-size: 13px; padding: 16px 0; }

    /* Edit Time modal (admin/manager session correction) */
    .edit-session-btn {
      width: 28px; height: 28px; flex-shrink: 0;
      border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
      color: #64748b; cursor: pointer; font-size: 12px;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }
    .edit-session-btn:hover { background: #eff6ff; color: #1a50a0; border-color: #bfdbfe; }
    .edited-badge { color: #d97706; font-size: 10px; margin-left: 4px; }
    .edit-session-form {
      padding: 12px; border: 1.5px solid #bfdbfe; background: #f8faff;
      border-radius: 12px; margin-bottom: 4px;
    }
    .edit-session-form select,
    .edit-session-form input {
      padding: 7px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px;
      font-size: 12.5px; outline: none; color: #0f172a; background: #fff;
      box-sizing: border-box; width: 100%;
    }
    .edit-session-form label {
      display: block; font-size: 10.5px; font-weight: 700; color: #94a3b8;
      text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
    }

    /* Report Preview modal */
    .report-preview-sheet-title { font-size: 13px; font-weight: 800; color: #0f172a; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
    .report-preview-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    .report-preview-table th { text-align: left; padding: 8px 10px; background: #f8fafc; color: #475569; font-weight: 700; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
    .report-preview-table td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; color: #334155; white-space: nowrap; }
    .report-preview-table tr:last-child td { border-bottom: none; }

    /* Recent Activity panel — two clickable summary rows (Working / Breaks) */
    .activity-summary { display: flex; flex-direction: column; gap: 10px; }
    .activity-summary-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border-radius: 14px;
      background: #f8fafc;
      cursor: pointer;
      transition: background .12s, transform .12s;
    }
    .activity-summary-row:hover { background: #f1f5f9; transform: translateY(-1px); }
    .activity-summary-icon {
      width: 38px; height: 38px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .activity-summary-info { flex: 1; min-width: 0; }
    .activity-summary-title { font-size: 13px; font-weight: 700; color: #0f172a; }
    .activity-summary-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }
    .activity-summary-val { font-size: 15px; font-weight: 800; color: #0f172a; margin-right: 2px; }
    .activity-summary-arrow { color: #cbd5e1; font-size: 13px; }

    /* ── INSIGHTS ROW: Today's Overview / Work Pattern / Recent Activity ── */
    .insights-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    @media (max-width: 1100px) {
      .insights-row { grid-template-columns: 1fr; }
    }
    .insight-panel { display: flex; flex-direction: column; }
    .insight-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 16px;
      gap: 8px;
    }
    .insight-header .chart-legend {
      font-size: 10.5px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    /* Donut (Today's Overview) */
    .donut-wrap { position: relative; width: 140px; height: 140px; margin: 0 auto 16px; }
    .donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
    .donut-track { fill: none; stroke: #f1f5f9; stroke-width: 14; }
    .donut-seg {
      fill: none;
      stroke-width: 14;
      stroke-linecap: round;
      stroke-dasharray: 0 999;
      transition: stroke-dasharray .6s ease, stroke-dashoffset .6s ease;
    }
    .donut-seg-work  { stroke: #059669; }
    .donut-seg-break { stroke: #d97706; }
    .donut-center {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .donut-center-num { font-size: 24px; font-weight: 800; color: #0f172a; }
    .donut-center-label { font-size: 10px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
    .donut-legend { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
    .donut-legend-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #475569; }
    .donut-legend-row strong { margin-left: auto; color: #0f172a; font-weight: 700; }
    .donut-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .donut-dot-work   { background: #059669; }
    .donut-dot-break  { background: #d97706; }
    .donut-dot-remain { background: #e2e8f0; }
    .insight-tip {
      margin-top: auto;
      background: #eff6ff;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 11.5px;
      color: #1e40af;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Bar chart (Work Pattern) */
    .bar-chart { flex: 1; display: flex; flex-direction: column; }
    .bar-chart-bars {
      flex: 1;
      display: flex;
      align-items: flex-end;
      gap: 4px;
      min-height: 140px;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 2px;
    }
    .bar-chart-col { flex: 1; display: flex; justify-content: center; height: 100%; align-items: flex-end; }
    .bar-chart-bar {
      width: 100%;
      max-width: 16px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      border-radius: 3px 3px 0 0;
      overflow: hidden;
      background: #f8fafc;
    }
    .bar-seg-work  { background: #059669; }
    .bar-seg-break { background: #d97706; }
    .bar-chart-axis {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      font-size: 9.5px;
      color: #94a3b8;
    }

    /* ── ADMIN LIVE DASHBOARD ── */

    /* Summary stat chips */
    .live-summary { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
    .ls-chip { display:flex; align-items:center; gap:7px; padding:8px 16px; border-radius:12px; font-size:13px; font-weight:700; }
    .ls-chip-all     { background:#f1f5f9; color:#334155; }
    .ls-chip-working { background:#ecfdf5; color:#065f46; }
    .ls-chip-break   { background:#fffbeb; color:#92400e; }
    .ls-chip-offline { background:#f8fafc; color:#94a3b8; }
    .ls-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
    .ls-dot-all     { background:#94a3b8; }
    .ls-dot-working { background:#10b981; animation:pulse-dot 1.8s infinite; }
    .ls-dot-break   { background:#f59e0b; animation:pulse-dot 1.8s infinite; }
    .ls-dot-offline { background:#cbd5e1; }

    /* Grid view */
    .live-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 24px;
    }
    .live-card {
      background: #fff;
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 6px 20px rgba(17,24,39,0.06);
      border-top: 4px solid #e2e8f0;
      transition: transform .15s;
      min-width: 0; /* let the grid track actually shrink to its minmax() floor instead of growing to fit the card-top row's content */
    }
    .live-card:hover { transform: translateY(-2px); }
    .live-card.status-working { border-top-color: #10b981; }
    .live-card.status-break   { border-top-color: #f59e0b; }
    .live-card.status-offline { border-top-color: #cbd5e1; opacity: .7; }

    .live-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .live-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 800; flex-shrink: 0; color: #fff;
    }
    .av-working { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 0 0 3px #d1fae5; }
    .av-break   { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 0 0 3px #fef3c7; }
    .av-offline { background: #cbd5e1; box-shadow: 0 0 0 3px #f1f5f9; }

    .live-name  { font-size: 14px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .live-uname { font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Status row rendered as a soft colored pill, matching each card's status */
    .live-status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 10px; border-radius: 20px; }
    .live-card.status-working .live-status-row { background: #ecfdf5; }
    .live-card.status-break   .live-status-row { background: #fffbeb; }
    .live-card.status-offline .live-status-row { background: #f8fafc; }
    .live-status-icon { font-size: 20px; }
    .live-status-text { font-size: 13px; font-weight: 700; }
    .text-working { color: #059669; }
    .text-break   { color: #d97706; }
    .text-offline { color: #94a3b8; }
    .live-since   { font-size: 11px; color: #94a3b8; margin-bottom: 10px; }

    .live-bars { display: flex; flex-direction: column; gap: 6px; }
    .live-bar-row { display: flex; align-items: center; gap: 6px; }
    .live-bar-label { font-size: 10px; color: #94a3b8; width: 48px; flex-shrink: 0; }
    .live-bar-bg { flex: 1; background: #f1f5f9; border-radius: 4px; height: 6px; overflow: hidden; }
    .live-bar-fill { height: 100%; border-radius: 4px; }
    .fill-working { background: #10b981; }
    .fill-break   { background: #f59e0b; }
    .live-bar-val { font-size: 10px; font-weight: 700; color: #475569; min-width: 32px; text-align: right; }

    /* List view */
    .live-list { display:flex; flex-direction:column; gap:12px; }
    .live-list-row {
      display:flex; align-items:center; gap:12px;
      background:#fff; padding:11px 18px;
      border-radius:14px;
      box-shadow:0 3px 12px rgba(17,24,39,0.06);
      transition:background .12s, transform .12s;
    }
    .live-list-row:hover { background:#f8faff; transform:translateY(-1px); }
    .live-list-row.status-working { border-left:4px solid #10b981; }
    .live-list-row.status-break   { border-left:4px solid #f59e0b; }
    .live-list-row.status-offline { border-left:4px solid #e2e8f0; opacity:.75; }
    .live-list-row.alert          { border-left:4px solid #ef4444; animation:alert-pulse 2s infinite; }

    .ll-av { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,0.15); }

    /* view toggle */
    .view-toggle { display:flex; gap:4px; }
    .view-btn { padding:6px 14px; border-radius:9px; border:1.5px solid #e2e8f0; background:#fff; cursor:pointer; font-size:12px; font-weight:600; color:#64748b; transition:all .15s; }
    .view-btn.active { background:#1a50a0; color:#fff; border-color:#1a50a0; box-shadow:0 2px 8px rgba(26,80,160,0.25); }
    .view-btn:hover:not(.active) { background:#f8faff; border-color:#c7d7f0; }
    #live-refresh-btn:disabled { opacity:.7; cursor:default; }
    #live-refresh-btn.loading .bi { display:inline-block; animation:boot-spin .7s linear infinite; }

    .live-refresh-note { font-size:11px; color:#94a3b8; }

    /* Dashboard two-column layout: live team grid + side panel */
    .dash-columns { display: flex; gap: 20px; align-items: flex-start; flex: 1; min-height: 0; }
    .dash-main-col { flex: 1; min-width: 0; }
    .dash-side-col {
      flex: 0 0 280px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .dash-panel {
      background: #fff;
      border: 1.5px solid #eef1f8;
      border-radius: 20px;
      padding: 18px 20px;
      box-shadow: 0 6px 20px rgba(17,24,39,0.05);
    }

    /* Today's Overview / Work Pattern / Recent Activity — a shared blue top
       accent so this row of white cards reads as one "Insights" family,
       instead of three flat white boxes with no color of their own
       (comes after .dash-panel's own border shorthand so it isn't
       overridden by it). */
    .insight-panel { border-top: 4px solid #1a50a0; }

    /* Profile page: paired rows of cards. Each row is a flex row, so the two
       cards share a height, and when one is hidden (inline display:none, by
       role) its partner simply takes the full width. Security is a slim
       full-width strip at the bottom rather than a tall card. */
    .profile-layout { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
    .profile-row { display: flex; gap: 16px; align-items: stretch; }
    .profile-row > .dash-panel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
    .profile-row:not(:has(> .dash-panel:not([style*="none"]))) { display: none; }
    .profile-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
    .profile-detail-grid .dash-stat-row { border-top: none; border-bottom: 1px solid #f1f5f9; padding: 10px 0; }
    .profile-detail-grid .dash-stat-text { min-width: 0; }
    .profile-detail-grid .dash-stat-text > div:last-child { overflow-wrap: anywhere; }
    .profile-projects-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
    }
    /* A settings-style row: the curved role-accent top border used on the
       taller panels looks like a bracket on a card this short, so this one
       carries the accent in its icon tile instead. */
    #page-profile .dash-panel.profile-security-strip {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
      border-top: 1.5px solid #eef1f8;
      padding: 16px 20px;
    }
    .profile-security-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .profile-security-icon {
      width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--role-tint); color: var(--role-accent); font-size: 18px;
    }
    .profile-security-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .profile-security-actions .btn-sm {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      height: 40px; padding: 0 18px; font-size: 13px; border-radius: 10px;
      box-sizing: border-box; box-shadow: none;
    }
    /* Half Day & Leave: controls grouped in one tinted bar at a shared 40px
       height; the Upcoming list fills the rest of the (row-stretched) card. */
    .dayoff-form {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      padding: 12px; background: #f8fafc; border: 1px solid #eef1f8; border-radius: 12px;
    }
    .dayoff-form > * { height: 40px; box-sizing: border-box; }
    .dayoff-form input[type="date"] {
      width: 170px; padding: 0 12px; border: 1.5px solid #e2e8f0; border-radius: 10px;
      font-size: 13px; font-family: inherit; color: #0f172a; background: #fff;
    }
    .dayoff-seg {
      display: inline-flex; padding: 3px; gap: 3px;
      background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px;
    }
    .dayoff-seg label { display: flex; cursor: pointer; margin: 0; }
    .dayoff-seg input { position: absolute; opacity: 0; pointer-events: none; }
    .dayoff-seg span {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 0 14px; border-radius: 7px; font-size: 13px; font-weight: 600; color: #64748b;
      transition: background .15s, color .15s;
    }
    .dayoff-seg input:checked + span { background: var(--role-tint); color: var(--role-accent); }
    .dayoff-seg input:focus-visible + span { outline: 2px solid var(--role-accent); outline-offset: 1px; }
    .dayoff-form #dayoff-save {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 0 22px; border-radius: 10px; margin-left: auto;
    }
    .dayoff-list { flex: 1; display: flex; flex-direction: column; gap: 6px; }
    .dayoff-empty {
      flex: 1; min-height: 96px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
      border: 1.5px dashed #e2e8f0; border-radius: 12px; font-size: 12px; color: #94a3b8; text-align: center;
    }
    .dayoff-empty i { font-size: 22px; color: #cbd5e1; margin-bottom: 4px; }
    @media (max-width: 900px) {
      .profile-row { flex-direction: column; }
      .profile-detail-grid { grid-template-columns: 1fr; }
    }
    .dash-panel-title {
      font-size: 12.5px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .dash-stat-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 0;
    }
    .dash-stat-row + .dash-stat-row { border-top: 1px solid #f1f5f9; }
    .dash-stat-icon {
      width: 38px; height: 38px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      flex-shrink: 0;
    }
    .dash-stat-icon-total   { background: #eef2ff; }
    .dash-stat-icon-working { background: #ecfdf5; }
    .dash-stat-icon-break   { background: #fffbeb; }
    .dash-stat-icon-offline { background: #f8fafc; }
    .dash-stat-num { font-size: 19px; font-weight: 800; color: #0f172a; line-height: 1.2; }
    .dash-stat-label { font-size: 11.5px; color: #94a3b8; font-weight: 600; }

    @media (max-width: 1100px) {
      .dash-columns { flex-direction: column; }
      .dash-side-col { flex: 1 1 auto; flex-direction: row; width: 100%; }
      .dash-side-col .dash-panel { flex: 1; }
    }

    /* ── MY PROFILE PAGE ──
       --role-accent/--role-tint are set on #page-profile itself (by
       profile.page.js) so both the hero AND the panels below share one
       role-driven theme instead of the hero being an island. */
    #page-profile { --role-accent: #1a50a0; --role-tint: #eef2ff; }

    .profile-hero {
      position: relative;
      overflow: hidden;
      background: #fff;
      border-radius: 22px;
      box-shadow: 0 8px 24px rgba(17,24,39,0.08);
      padding: 0 28px 22px;
    }
    /* Gradient cover band the avatar overlaps, tinted per role. */
    .profile-hero::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 84px;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.18) 1.5px, transparent 1.5px),
        linear-gradient(120deg, var(--role-accent), color-mix(in srgb, var(--role-accent) 45%, white) 85%);
      background-size: 16px 16px, 100% 100%;
    }
    /* Large, faint role-icon watermark in the band -- ties to identity
       (which icon shows is set per-role in profile.page.js) rather than
       being purely generic decoration. */
    .profile-hero-watermark {
      position: absolute;
      top: 12px; right: 24px;
      font-size: 60px;
      color: rgba(255,255,255,0.16);
      line-height: 1;
      pointer-events: none;
    }
    /* Avatar overlaps the 84px band; name block sits beside it below the
       band; live status pill on the far right. */
    .profile-hero-body {
      position: relative; z-index: 1;
      display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
      padding-top: 40px;
    }
    .profile-hero-avatar-wrap { position: relative; z-index: 1; width: 92px; flex-shrink: 0; }
    .profile-hero-id { flex: 1; min-width: 200px; padding-top: 52px; } /* clears the 84px band */
    .profile-hero-status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 56px; }
    .profile-hero-status-sub { font-size: 11.5px; color: #94a3b8; }
    .profile-hero-status-sub:empty { display: none; }
    .profile-status-pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 700;
      background: #f1f5f9; color: #64748b;
    }
    .profile-status-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
    .profile-status-pill.working { background: #dcfce7; color: #166534; }
    .profile-status-pill.working .profile-status-pill-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
    .profile-status-pill.break { background: #fef3c7; color: #92400e; }
    .profile-status-pill.break .profile-status-pill-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
    @media (max-width: 700px) {
      .profile-hero-body { flex-direction: column; align-items: center; text-align: center; }
      .profile-hero-id { min-width: 0; padding-top: 0; }
      .profile-hero-status { align-items: center; padding-top: 0; }
      .profile-hero .profile-username, .profile-hero .profile-badges { justify-content: center; }
    }
    .profile-hero-avatar {
      width: 92px; height: 92px;
      border-radius: 50%;
      background: var(--role-accent);
      color: #fff;
      font-size: 33px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 6px #fff, 0 10px 22px rgba(17,24,39,.18);
    }
    /* Live working/break indicator, Slack-style -- more useful at a glance
       than a purely decorative badge. */
    .profile-status-dot {
      position: absolute;
      bottom: 2px; right: 2px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: #94a3b8;
      box-shadow: 0 0 0 3px #fff;
    }
    .profile-status-dot.working { background: #22c55e; }
    .profile-status-dot.break   { background: #f59e0b; }

    .profile-name { position: relative; z-index: 1; font-size: 21px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
    .profile-username {
      display: flex; align-items: center; gap: 4px;
      font-size: 13px; color: #94a3b8; margin-bottom: 10px;
    }
    .profile-username i { font-size: 11px; }

    .profile-badges { display: flex; gap: 8px; flex-wrap: wrap; }
    .profile-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      background: #f1f5f9;
      color: #64748b;
    }
    /* At-a-glance strip filling the lower part of the hero card -- a quick
       highlight row (email/department/manager), separate from the full,
       structured Account Details panel below. Hidden entirely when there's
       nothing to show, rather than leaving a dividing line over empty space. */
    .profile-meta-strip {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid #f1f5f9;
    }
    .profile-meta-strip:empty { display: none; }
    .profile-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      color: #64748b;
    }
    .profile-meta-item i { font-size: 12px; color: var(--role-accent); }
    .profile-meta-divider { width: 1px; height: 12px; background: #e2e8f0; }
    /* Panels below the hero pick up the same role accent as a top border,
       matching .insight-panel's convention elsewhere, so the whole page
       reads as one themed unit instead of a colorful header over flat cards. */
    #page-profile .dash-panel { border-top: 3px solid var(--role-accent); }

    /* Today's Activity: a timeline of today's sessions
       (profile.page.js renderTimeline), and clickable My Team project cards. */
    #page-profile .today-summary { flex-wrap: wrap; }
    .profile-timeline { display: flex; gap: 3px; height: 12px; margin-top: 16px; }
    .profile-timeline:empty { display: none; }
    .profile-timeline:empty + .profile-timeline-axis { display: none; }
    .tl-seg { flex: 1 1 0; min-width: 4px; border-radius: 4px; }
    .tl-seg:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
    .tl-seg:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
    .tl-work { background: #22c55e; }
    .tl-break { background: #f59e0b; }
    .tl-off { background: repeating-linear-gradient(135deg, #e2e8f0 0 4px, #f1f5f9 4px 8px); }
    .profile-timeline-axis {
      display: flex; justify-content: space-between; align-items: center; gap: 8px;
      margin-top: 6px; font-size: 11px; color: #94a3b8;
    }
    .profile-timeline-legend { display: inline-flex; align-items: center; gap: 6px; }
    .profile-timeline-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: 6px; }
    .profile-timeline-legend .lg-work { background: #22c55e; }
    .profile-timeline-legend .lg-break { background: #f59e0b; }
    .profile-timeline-legend .lg-off { background: repeating-linear-gradient(135deg, #cbd5e1 0 2px, #f1f5f9 2px 4px); }
    .profile-proj-card {
      border: 1px solid #eef1f8; border-radius: 12px; padding: 12px 14px; cursor: pointer;
      transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .profile-proj-card:hover, .profile-proj-card:focus-visible {
      border-color: var(--role-accent); box-shadow: 0 6px 16px rgba(17,24,39,.08);
      transform: translateY(-1px); outline: none;
    }

    /* ── BREAK POPUP OVERLAY ── */
    #break-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 12, 41, 0.88);
      z-index: 9999;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
      padding: 16px; /* the popup never touches the screen edges */
    }
    #break-overlay.show { display: flex; }

    .break-popup {
      background: #fff;
      border-radius: 24px;
      padding: 60px 44px 56px;
      max-width: 500px;
      width: 92%;
      text-align: center;
      box-shadow: 0 32px 100px rgba(0,0,0,0.5);
      animation: popIn .3s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      /* Always fits the screen: with many break types (or a short / zoomed
         window) the popup scrolls inside itself instead of running off the
         top and bottom, where its buttons couldn't be reached. */
      max-height: calc(100vh - 32px);
      max-height: calc(100dvh - 32px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .popup-close-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #f1f5f9;
      border: none;
      color: #64748b;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .15s;
    }
    .popup-close-btn:hover { background: #e2e8f0; color: #334155; }

    @keyframes popIn {
      from { transform: scale(0.8); opacity: 0; }
      to   { transform: scale(1);   opacity: 1; }
    }

    .break-popup .popup-icon { font-size: 64px; display: block; margin-bottom: 22px; }
    .break-popup h2 { font-size: 24px; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
    .break-popup p  { font-size: 15px; color: #64748b; margin-bottom: 34px; line-height: 1.6; }

    .popup-btns { display: flex; flex-direction: column; gap: 12px; }

    .popup-btn-working {
      padding: 18px;
      background: linear-gradient(135deg, #10b981, #059669);
      color: #fff;
      border: none;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(16,185,129,0.4);
      transition: all .18s;
    }
    .popup-btn-working:hover { transform: translateY(-2px); }

    .popup-btn-break {
      padding: 12px;
      background: #f1f5f9;
      color: #64748b;
      border: none;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
    }
    .popup-btn-break:hover { background: #e2e8f0; }

    .popup-divider {
      font-size: 11px;
      color: #94a3b8;
      text-align: center;
      margin: 24px 0 18px;
      font-weight: 600;
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    .break-type-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 6px;
    }

    .bt-card {
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 22px 12px;
      text-align: center;
      cursor: pointer;
      transition: all .15s;
      background: #fff;
    }
    .bt-card:hover   { border-color: #f59e0b; background: #fffbeb; transform: translateY(-1px); }
    .bt-card:active  { transform: scale(.97); }

    .bt-card-icon {
      width: 48px; height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin: 0 auto 8px;
    }
    .bt-card-name  { font-size: 13.5px; font-weight: 700; color: #374151; }
    .bt-card-dur   { font-size: 11px; color: #94a3b8; margin-top: 2px; }

    /* Short or narrow windows: tighter spacing so more of it shows at once. */
    @media (max-height: 760px), (max-width: 480px) {
      .break-popup { padding: 28px 24px; border-radius: 18px; }
      .break-popup .popup-icon { font-size: 40px; margin-bottom: 10px; }
      .break-popup h2 { font-size: 19px; }
      .break-popup p { margin-bottom: 16px; }
      .popup-btn-working { padding: 12px; font-size: 15px; }
      .popup-divider { margin: 12px 0 10px; }
      .bt-card { padding: 9px 8px; }
      .bt-card-icon { width: 34px; height: 34px; font-size: 15px; margin-bottom: 4px; }
    }
    @media (max-height: 560px) {
      .break-popup .popup-icon { display: none; }
      .break-type-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 340px) {
      .break-type-grid { grid-template-columns: 1fr; }
    }

    .btype-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #fef3c7;
      color: #92400e;
      border-radius: 20px;
      padding: 5px 14px;
      font-size: 13px;
      font-weight: 700;
    }

    /* Admin break types grid */
    /* Project Management */
    .proj-tab {
      padding: 7px 16px; border: 1.5px solid #e2e8f0; border-radius: 20px;
      background: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer;
      color: #64748b; transition: all .15s;
    }
    .proj-tab.active { background: #1a50a0; border-color: #1a50a0; color: #fff; box-shadow: 0 4px 14px rgba(26,80,160,0.28); }

    /* Resource Allocation: admin's Manager-scheduling vs Project-assignment mode switch */
    .alloc-mode-tab {
      padding: 8px 18px; border: 1.5px solid #e2e8f0; border-radius: 20px;
      background: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer;
      color: #64748b; transition: all .15s; display: inline-flex; align-items: center; gap: 6px;
    }
    .alloc-mode-tab.active { background: #1a50a0; border-color: #1a50a0; color: #fff; box-shadow: 0 4px 14px rgba(26,80,160,0.28); }
    .proj-stat-card {
      background: #fff; border-radius: 16px;
      padding: 14px 20px; min-width: 150px;
      box-shadow: 0 8px 24px rgba(17,24,39,0.08);
      display: flex; align-items: center; gap: 12px;
      transition: transform .15s, box-shadow .15s;
    }
    .proj-stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17,24,39,0.12); }
    .proj-stat-icon {
      width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 17px;
    }
    .proj-stat-icon-all        { background: #e0e7ff; color: #1a50a0; }
    .proj-stat-icon-open       { background: #dcfce7; color: #16a34a; }
    .proj-stat-icon-inprogress { background: #dbeafe; color: #2563eb; }
    .proj-stat-icon-paused     { background: #fef3c7; color: #d97706; }
    .proj-stat-icon-closed     { background: #f1f5f9; color: #64748b; }
    .proj-stat-num   { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.15; }
    .proj-stat-label { font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing:.04em; }
    .proj-card {
      background: #fff; border: 1px solid #eef1f8; border-radius: 20px;
      padding: 18px; box-shadow: 0 6px 20px rgba(17,24,39,0.06);
      display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s;
    }
    .proj-card:hover { box-shadow: 0 8px 24px rgba(17,24,39,0.1); }
    .proj-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .proj-card-name { font-size: 14.5px; font-weight: 700; color: #0f172a; line-height: 1.3; }
    .proj-card-desc { font-size: 12.5px; color: #64748b; line-height: 1.5; min-height: 18px; }
    .proj-card-meta { font-size: 11px; color: #94a3b8; }
    /* The same button area on every card: three equal columns, three rows
       tall, whatever the project's status. Cards with fewer buttons (closed,
       in progress) leave the spare cells empty, so the "By ... Updated" line
       and the first row of buttons sit level right across the grid, and the
       delete button is always in the bottom-right corner. */
    .proj-card-actions {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: 36px; gap: 8px; margin-top: 8px;
      min-height: 124px; /* 3 rows of 36px + 2 gaps */
      align-content: start;
    }
    .proj-card-actions .proj-card-btn {
      justify-content: center; padding: 0 6px; font-size: 12.5px;
      white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    }
    .proj-card-actions .proj-card-delete { grid-column: 3; grid-row: 3; justify-self: end; width: 44px; }
    /* Project card buttons: the app's standard small-button size and shape
       (.btn-sm), with a soft neutral default -- each button's own colour
       (inline) still wins. */
    .proj-card-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 15px; font-size: 13px; font-weight: 700; border-radius: 10px;
      background: #eef2f7; color: #334155;
      box-shadow: 0 1px 2px rgba(15,23,42,0.06);
    }
    .proj-card-btn i { font-size: 13px; }
    .proj-card-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,0.10); filter: brightness(0.97); }
    .proj-card-btn.btn-primary { color: #fff; }
    /* Overrides the global, unscoped `table`/`td` rules above (meant for the
       Sessions detail table) which otherwise leak into this table too --
       giving it its own nested rounded-corner shadow ("card inside a card")
       and mismatched padding/border. */
    .proj-card-table { width: 100%; font-size: 12px; border-collapse: collapse; background: none; border-radius: 0; box-shadow: none; overflow: visible; }
    .proj-card-table td { padding: 8px 4px; border-top: none; border-bottom: 1px solid #f1f5f9; color: #94a3b8; font-size: 12px; }
    .proj-card-table td:last-child { font-weight: 600; color: #0f172a; }
    .proj-card-table td:first-child { width: 42%; }
    .proj-card-table tr:last-child td { border-bottom: none; }
    .proj-card-table tr:hover td { background: none; }
    .proj-badge { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700; }
    .proj-badge-open       { background:#dcfce7;color:#166534; }
    .proj-badge-inprogress { background:#dbeafe;color:#1e40af; }
    .proj-badge-paused     { background:#fef3c7;color:#92400e; }

    .proj-badge-closed     { background:#f1f5f9;color:#64748b; }
    .proj-status-opt { display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;padding:6px 12px;border:1.5px solid #e2e8f0;border-radius:8px; }
    .proj-status-opt:has(input:checked) { border-color:#1a50a0;background:#eff6ff; }
    .my-proj-card { background:#fff;border:1.5px solid #eef1f8;border-radius:20px;padding:16px;box-shadow:0 6px 20px rgba(17,24,39,0.06);transition:box-shadow .2s; }
    .my-proj-card:hover { box-shadow:0 8px 24px rgba(17,24,39,0.1); }
    .my-task-chip { display:inline-flex;align-items:center;gap:6px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600; }
    .task-log-entry { padding:10px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:8px; }
    .alloc-user-row { display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:background .12s; }
    .alloc-user-row:last-child { border-bottom:none; }
    .alloc-user-row:hover { background:#f8fafc; }
    .alloc-user-row input[type=checkbox] { width:16px;height:16px;accent-color:#1a50a0;cursor:pointer;flex-shrink:0; }
    .alloc-user-row:has(input:checked) { background:#eff6ff; }

    .bt-admin-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
    }

    .bt-admin-card {
      background: #fff;
      border-radius: 20px;
      padding: 22px 18px 16px;
      box-shadow: 0 8px 24px rgba(17,24,39,0.08);
      text-align: center;
      position: relative;
      border: 2px solid transparent;
      transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .bt-admin-card:hover { border-color: #fbbf24; box-shadow:0 6px 24px rgba(0,0,0,.1); transform:translateY(-2px); }

    .bt-admin-icon {
      width: 60px; height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      margin: 0 auto 12px;
    }

    /* Icon picker in the Add/Edit Break Type modal */
    .bt-icon-picker {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 6px;
      margin-bottom: 8px;
    }
    .bt-icon-opt {
      width: 100%;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      border: 1.5px solid transparent;
      border-radius: 10px;
      cursor: pointer;
      opacity: .7;
      transition: all .12s;
    }
    .bt-icon-opt:hover { opacity: 1; }
    .bt-icon-opt.selected { opacity: 1; border-color: #1a50a0; box-shadow: 0 0 0 2px rgba(26,80,160,0.15); }
    .bt-admin-name  { font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 5px; }
    .bt-admin-dur   { font-size: 12px; color: #94a3b8; background:#f8fafc; padding:3px 10px; border-radius:20px; display:inline-block; }

    .bt-admin-actions {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-top: 16px;
    }
    .bt-admin-actions .uact-btn { font-size:11.5px; padding:5px 12px; }

    .popup-timer {
      font-size: 12px;
      color: #94a3b8;
      margin-top: 16px;
    }
    .popup-timer span { color: #f59e0b; font-weight: 700; }

    /* ── ADMIN REPORT PAGE ── */
    /* Report tabs */
    .report-tabs {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 20px;
      border-bottom: 2px solid #e8edf5;
      padding-bottom: 0;
    }
    .rtab {
      padding: 9px 18px;
      border: none;
      background: none;
      font-size: 13.5px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      border-radius: 0;
      transition: all .15s;
    }
    .rtab:hover  { color: #1a50a0; }
    .rtab.active { color: #1a50a0; border-bottom-color: #1a50a0; }
    .rtab-spacer { flex: 1; }
    .btn-excel {
      padding: 8px 16px;
      background: linear-gradient(135deg, #16a34a, #15803d);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(22,163,74,0.3);
      transition: all .15s;
    }
    .btn-excel:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(22,163,74,0.4); }
    .btn-preview {
      padding: 8px 16px;
      background: #fff;
      color: #1a50a0;
      border: 1.5px solid #1a50a0;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
    }
    .btn-preview:hover { background: #eff6ff; transform: translateY(-1px); }

    /* Filter row */
    .report-filter-row {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      background: #fff;
      border: 1.5px solid #eef1f8;
      border-radius: 18px;
      padding: 14px 18px;
      margin-bottom: 22px;
      box-shadow: 0 6px 20px rgba(17,24,39,0.04);
    }
    .report-filter-row label { font-size: 12px; color: #64748b; font-weight: 600; }
    .report-filter-row input,
    .report-filter-row select {
      padding: 8px 12px;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      font-size: 13px;
      outline: none;
      background: #f8faff;
      color: #0f172a;
    }
    .report-filter-row input:focus,
    .report-filter-row select:focus { border-color: #1a50a0; }

    /* Legacy compat */
    .report-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
    .report-filters label { font-size: 12px; color: #64748b; font-weight: 600; }
    .report-filters input { padding: 8px 12px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 13px; outline: none; background: #fff; color: #0f172a; }
    .report-filters input:focus { border-color: #1a50a0; }

    /* Monthly day table -- explicit, always-visible horizontal scrollbar
       (not just the OS default, which auto-hides on Windows/thin-scrollbar
       setups and is easy to miss) since this table only gets wider as more
       users are added, each contributing their own Working/Break columns. */
    .monthly-day-table {
      background: #fff;
      border-radius: 20px;
      overflow-x: scroll;
      box-shadow: 0 8px 24px rgba(17,24,39,0.08);
      margin-bottom: 28px;
      min-width: 0;
      scrollbar-width: auto;
      scrollbar-color: #94a3b8 #eef1f8;
    }
    .monthly-day-table::-webkit-scrollbar { height: 12px; }
    .monthly-day-table::-webkit-scrollbar-track { background: #eef1f8; border-radius: 0 0 20px 20px; }
    .monthly-day-table::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 6px; border: 2.5px solid #eef1f8; }
    .monthly-day-table::-webkit-scrollbar-thumb:hover { background: #64748b; }
    .monthly-day-table table { width: auto; min-width: 100%; border-collapse: collapse; }
    .monthly-day-table th {
      padding: 10px 14px;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: .5px;
      background: #f8faff;
      text-align: left;
      border-bottom: 1px solid #e8edf5;
    }
    .monthly-day-table td {
      padding: 9px 14px;
      font-size: 12.5px;
      color: #0f172a;
      border-top: 1px solid #f1f5f9;
    }
    .monthly-day-table tr:hover td { background: #f8faff; }
    .day-work { color: #059669; font-weight: 700; }
    .day-break { color: #d97706; font-weight: 700; }
    .day-zero  { color: #cbd5e1; }

    /* Break Alert Banner — used as a side-panel section (see .dash-panel) */
    .break-alert-banner {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: linear-gradient(135deg, #fff9ec, #fffdf7);
      border-color: #fde3a7;
    }
    .alert-icon { font-size: 15px; flex-shrink: 0; }
    .alert-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
    .alert-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      border: 1.5px solid #fbbf24;
      border-radius: 12px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #92400e;
      line-height: 1.4;
    }
    .alert-chip .pulse {
      width: 7px; height: 7px;
      background: #ef4444;
      border-radius: 50%;
      animation: pulse-red 1.2s infinite;
    }
    @keyframes pulse-red {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: .5; transform: scale(1.4); }
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: .6; transform: scale(1.35); }
    }

    /* Live dashboard header row */
    .live-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      flex-wrap: wrap;
      gap: 10px;
    }
    .alert-threshold-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      color: #64748b;
    }
    .alert-threshold-row input {
      width: 60px;
      padding: 5px 8px;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      font-size: 13px;
      outline: none;
      background: #fff;
      text-align: center;
    }
    .alert-threshold-row input:focus { border-color: #1a50a0; }

    /* Live card alert highlight */
    .live-card.alert { border-top-color: #ef4444; animation: alert-pulse 2s infinite; }
    @keyframes alert-pulse {
      0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
      50%       { box-shadow: 0 4px 20px rgba(239,68,68,0.22); }
    }

    .btn-sm {
      padding: 8px 16px;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
    }
    .btn-primary { background: linear-gradient(135deg, #1a50a0, #2563eb); color: #fff; box-shadow: 0 2px 10px rgba(26,80,160,0.3); }
    .btn-primary:hover { background: linear-gradient(135deg, #1a4490, #1d4ed8); }
    .btn-secondary { background: #e2e8f0; color: #475569; }
    .btn-secondary:hover { background: #cbd5e1; }

    .user-report-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 18px;
      margin-bottom: 32px;
    }

    /* Break Reports user cards -- same language as the Live Dashboard
       cards (.live-card): status-coloured top border, initials avatar. */
    .user-card {
      background: #fff;
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 6px 20px rgba(17,24,39,0.06);
      border-top: 4px solid #6a5ce0;
      transition: transform .15s;
      min-width: 0;
    }
    .user-card:hover { transform: translateY(-2px); }
    .user-card.uc-working { border-top-color: #10b981; }
    .user-card.uc-break   { border-top-color: #f59e0b; }
    .user-card.uc-offline { border-top-color: #cbd5e1; }

    .user-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .user-avatar-lg {
      width: 40px; height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px; font-weight: 800; color: #fff;
      flex-shrink: 0;
      background: linear-gradient(135deg, #8175f0, #6a5ce0);
      box-shadow: 0 0 0 3px #ede9fe;
    }
    .uc-av-working { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 0 0 3px #d1fae5; }
    .uc-av-break   { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 0 0 3px #fef3c7; }
    .uc-av-offline { background: #cbd5e1; box-shadow: 0 0 0 3px #f1f5f9; }

    .user-card-name { font-size: 14px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .user-card-role { font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Total-time pill, tinted to the card's status like .live-status-row */
    .uc-total {
      display: flex; align-items: center; justify-content: space-between;
      padding: 7px 12px; border-radius: 20px; margin-bottom: 12px;
      background: #f5f3ff;
    }
    .user-card.uc-working .uc-total { background: #ecfdf5; }
    .user-card.uc-break   .uc-total { background: #fffbeb; }
    .user-card.uc-offline .uc-total { background: #f8fafc; }
    .uc-total-label { font-size: 11.5px; font-weight: 600; color: #64748b; }
    .uc-total-val   { font-size: 14px; font-weight: 800; color: #0f172a; }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      margin-left: auto;
    }
    .badge-working { background: #d1fae5; color: #065f46; }
    .badge-break   { background: #fef3c7; color: #92400e; }
    .badge-offline { background: #f1f5f9; color: #64748b; }

    .time-bars { display: flex; flex-direction: column; gap: 9px; }

    .time-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .time-label { font-size: 11.5px; color: #64748b; width: 74px; flex-shrink: 0; white-space: nowrap; }
    .time-bar-wrap {
      flex: 1;
      background: #f1f5f9;
      border-radius: 4px;
      height: 6px;
      overflow: hidden;
    }
    .time-bar { height: 100%; border-radius: 4px; transition: width .5s; }
    .bar-working { background: #10b981; }
    .bar-break   { background: #f59e0b; }
    .time-val { font-size: 11.5px; font-weight: 700; color: #475569; min-width: 40px; text-align: right; }

    /* Sessions detail table */
    .sessions-section { margin-top: 32px; }
    .sessions-section h3 { font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 14px; }

    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(17,24,39,0.08);
    }
    th {
      padding: 11px 14px;
      text-align: left;
      font-size: 11px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: .5px;
      background: #f8faff;
    }
    td {
      padding: 11px 14px;
      font-size: 13px;
      color: #0f172a;
      border-top: 1px solid #f1f5f9;
    }
    tr:hover td { background: #f8faff; }

    .pill {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
    }
    .pill-working { background: #d1fae5; color: #065f46; }
    .pill-break   { background: #fef3c7; color: #92400e; }
    .pill-open    { background: #dbeafe; color: #1e3a8a; }

    /* User management page */
    .users-table-wrap { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 24px rgba(17,24,39,0.08); }

    /* ── NOTES PAGE ── */
    .notes-layout {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 20px;
      align-items: start;
    }
    @media (max-width: 900px) {
      .notes-layout { grid-template-columns: 1fr; }
    }

    .note-editor-card {
      background: #fff;
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 8px 24px rgba(17,24,39,0.08);
    }

    .note-editor-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .note-editor-header h3 {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    .note-date-badge {
      font-size: 12px;
      color: #1a50a0;
      font-weight: 700;
      background: #dbeafe;
      padding: 4px 10px;
      border-radius: 20px;
    }

    .note-textarea {
      width: 100%;
      min-height: 280px;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px;
      font-size: 14px;
      font-family: inherit;
      color: #0f172a;
      resize: vertical;
      outline: none;
      line-height: 1.7;
      background: #f8faff;
      transition: border .15s, box-shadow .15s;
    }

    .note-textarea:focus {
      border-color: #1a50a0;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(26,80,160,0.1);
    }

    .note-textarea::placeholder { color: #cbd5e1; }

    .note-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
    }

    .save-status {
      font-size: 12px;
      color: #94a3b8;
    }

    .save-status.saved  { color: #10b981; }
    .save-status.saving { color: #f59e0b; }

    .btn-save-note {
      padding: 10px 24px;
      background: linear-gradient(135deg, #1a50a0, #2563eb);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(26,80,160,0.35);
      transition: all .15s;
    }
    .btn-save-note:hover { transform: translateY(-1px); }
    .btn-save-note:disabled { opacity: .5; cursor: not-allowed; transform: none; }

    /* Past notes list */
    .past-notes-card {
      background: #fff;
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 8px 24px rgba(17,24,39,0.08);
      max-height: 600px;
      overflow-y: auto;
    }

    .past-notes-card h3 {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 14px;
    }

    .past-note-item {
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all .15s;
    }

    .past-note-item:hover { border-color: #1a50a0; background: #eff6ff; }
    .past-note-item.active { border-color: #1a50a0; background: #dbeafe; }

    .past-note-date {
      font-size: 12px;
      font-weight: 700;
      color: #6366f1;
      margin-bottom: 4px;
    }

    .past-note-preview {
      font-size: 12px;
      color: #64748b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .no-notes-msg {
      text-align: center;
      color: #94a3b8;
      font-size: 13px;
      padding: 20px 0;
    }

    /* Admin notes page */
    .admin-notes-filters {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .admin-note-card {
      background: #fff;
      border-radius: 20px;
      padding: 20px 22px;
      box-shadow: 0 8px 24px rgba(17,24,39,0.08);
      margin-bottom: 14px;
    }

    .admin-note-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .admin-note-user {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }

    .admin-note-user span {
      font-size: 12px;
      color: #94a3b8;
      font-weight: 400;
      margin-left: 6px;
    }

    .admin-note-date {
      font-size: 12px;
      background: #e0e7ff;
      color: #3730a3;
      padding: 3px 10px;
      border-radius: 20px;
      font-weight: 700;
    }

    .admin-note-content {
      font-size: 13px;
      color: #334155;
      line-height: 1.7;
      white-space: pre-wrap;
      background: #f8faff;
      border-radius: 8px;
      padding: 10px 12px;
      border-left: 3px solid #6366f1;
    }

    /* Notes: Excel data shown as a table */
    .note-rendered {
      font-size: 13px;
      color: #334155;
      line-height: 1.7;
      white-space: pre-wrap;
      background: #f8faff;
      border-radius: 8px;
      padding: 10px 12px;
      border: 1.5px solid #e2e8f0;
    }
    .note-preview-label {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      margin: 12px 0 6px;
    }
    .note-table-wrap {
      overflow-x: auto;
      margin: 6px 0;
      white-space: normal;
    }
    .note-table {
      border-collapse: collapse;
      font-size: 12px;
      background: #fff;
      min-width: 50%;
    }
    .note-table th,
    .note-table td {
      border: 1px solid #cbd5e1;
      padding: 5px 10px;
      text-align: left;
      vertical-align: top;
      white-space: pre-wrap;
      line-height: 1.5;
    }
    .note-table th {
      background: #eff6ff;
      color: #1e3a8a;
      font-weight: 700;
    }
    .note-table tbody tr:nth-child(even) td { background: #f8fafc; }
    .note-paste-bar {
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
      padding: 8px 12px;
      font-size: 12px;
      color: #1e40af;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
    }
    .note-paste-bar button {
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #93c5fd;
      border-radius: 6px;
      background: #fff;
      color: #1e40af;
      cursor: pointer;
    }
    .note-paste-bar button:hover { background: #dbeafe; }

    /* ── Employee Management Page ── */
    .emp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
    .emp-header h2 { font-size:20px; font-weight:800; color:#0f172a; }
    .emp-grid { display:grid; grid-template-columns:340px 1fr; gap:18px; margin-bottom:18px; }
    @media(max-width:900px) { .emp-grid { grid-template-columns:1fr; } }
    .emp-card {
      background:#fff; border-radius:20px; border:1px solid #eef1f8;
      box-shadow:0 8px 24px rgba(17,24,39,0.06); overflow:hidden;
    }
    .emp-card-head {
      padding:14px 18px; border-bottom:1px solid #f1f5f9;
      display:flex; align-items:center; justify-content:space-between;
      background:#f8faff;
    }
    .emp-card-head h3 { font-size:13.5px; font-weight:700; color:#1e293b; margin:0; }
    .emp-card-body { padding:18px; }
    .emp-label {
      display:block; font-size:10.5px; font-weight:700; color:#64748b;
      text-transform:uppercase; letter-spacing:.7px; margin-bottom:6px; margin-top:12px;
    }
    .emp-label:first-child { margin-top:0; }
    .emp-textarea {
      width:100%; border:1.5px solid #e2e8f0; border-radius:10px; padding:10px 12px;
      font-size:13px; color:#0f172a; font-family:inherit; resize:vertical;
      background:#f8faff; outline:none; transition:border .15s;
    }
    .emp-textarea:focus { border-color:#1a50a0; background:#fff; box-shadow:0 0 0 3px rgba(26,80,160,0.08); }
    .emp-select, .emp-input {
      width:100%; border:1.5px solid #e2e8f0; border-radius:10px; padding:9px 12px;
      font-size:13px; color:#0f172a; background:#f8faff; outline:none; transition:border .15s;
    }
    .emp-select:focus, .emp-input:focus { border-color:#1a50a0; background:#fff; }
    .emp-pw-row { display:flex; gap:8px; }
    .emp-pw-row .emp-input { flex:1; }
    .emp-btn-gen {
      padding:9px 14px; background:#f1f5f9; border:1.5px solid #e2e8f0;
      border-radius:10px; font-size:12px; font-weight:600; cursor:pointer; color:#475569;
      white-space:nowrap; transition:background .15s;
    }
    .emp-btn-gen:hover { background:#e2e8f0; }
    .emp-btn-primary {
      width:100%; margin-top:14px; padding:11px; background:linear-gradient(135deg,#1a50a0,#2563eb);
      color:#fff; border:none; border-radius:10px; font-size:13.5px; font-weight:700;
      cursor:pointer; transition:all .18s; box-shadow:0 4px 14px rgba(26,80,160,0.3);
    }
    .emp-btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(26,80,160,0.4); }
    .emp-btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }
    .emp-results {
      margin-top:14px; border-radius:10px; overflow:hidden;
      border:1px solid #dcfce7; background:#f0fdf4;
    }
    .emp-results-head {
      padding:10px 14px; background:#dcfce7; font-size:12px; font-weight:700;
      color:#15803d; display:flex; align-items:center; justify-content:space-between;
    }
    .emp-results-table { width:100%; border-collapse:collapse; font-size:12px; }
    .emp-results-table th { padding:7px 12px; background:#bbf7d0; color:#166534; font-size:11px; text-align:left; }
    .emp-results-table td { padding:7px 12px; border-top:1px solid #dcfce7; color:#1e293b; font-family:monospace; }
    .emp-copy-btn {
      padding:5px 10px; background:#15803d; color:#fff; border:none; border-radius:6px;
      font-size:11px; font-weight:600; cursor:pointer;
    }
    .emp-copy-btn:hover { background:#166534; }
    .emp-errors { margin-top:10px; padding:10px 14px; background:#fef2f2; border:1px solid #fecaca; border-radius:10px; }
    .emp-errors p { font-size:12px; color:#dc2626; margin:2px 0; }
    .emp-table { width:auto; min-width:100%; border-collapse:collapse; font-size:13px; }
    .emp-table th {
      padding:11px 14px; background:#f8faff;
      border-bottom:2px solid #e8edf5;
      font-size:11.5px; font-weight:700; color:#64748b;
      text-align:left; letter-spacing:.2px;
    }
    .emp-table td { padding:11px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
    .emp-table tbody tr:nth-child(even) td { background:#fafbff; }
    .emp-table tr:last-child td { border-bottom:none; }
    .emp-table tbody tr:hover td { background:#f0f4ff !important; transition:background .12s; }
    .emp-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:700; }
    .emp-badge.mgr { background:#e0e7ff; color:#3730a3; }
    .emp-badge.emp { background:#f0fdf4; color:#15803d; }
    .emp-act-btn {
      padding:4px 10px; border-radius:7px; font-size:11.5px; font-weight:600;
      cursor:pointer; border:1.5px solid; transition:all .15s;
    }
    .emp-act-btn.mgr-on  { background:#e0e7ff; color:#3730a3; border-color:#c7d2fe; }
    .emp-act-btn.mgr-on:hover  { background:#c7d2fe; }
    .emp-act-btn.mgr-off { background:#fef2f2; color:#dc2626; border-color:#fecaca; }
    .emp-act-btn.mgr-off:hover { background:#fecaca; }
    .emp-table-empty { text-align:center; padding:36px; color:#94a3b8; font-size:13px; }
    /* action buttons in user table */
    .uact-btn { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; border:1.5px solid; transition:all .15s; white-space:nowrap; }
    .uact-edit   { background:#f8faff; color:#1a50a0; border-color:#c7d7f0; }
    .uact-edit:hover   { background:#e0eaff; }
    .uact-del    { background:#fff5f5; color:#dc2626; border-color:#fecaca; }
    .uact-del:hover    { background:#fee2e2; }
    .uact-admin  { background:#fefce8; color:#854d0e; border-color:#fde68a; }
    .uact-admin:hover  { background:#fef08a; }
    .uact-demote { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }
    .uact-demote:hover { background:#ede9fe; }
    .mgr-section-head {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid #f1f5f9;
    }
    .mgr-section-head h3 { font-size:14px; font-weight:700; color:#1e293b; margin:0; }
    .mgr-card {
      display:flex; align-items:center; gap:12px; padding:12px 14px;
      background:#f8faff; border:1px solid #e2e8f0; border-radius:10px; margin-bottom:8px;
    }
    .mgr-avatar { width:36px; height:36px; border-radius:50%; background:#1a50a0; color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; }
    .mgr-info { flex:1; }
    .mgr-info .mgr-name { font-size:13.5px; font-weight:600; color:#1e293b; }
    .mgr-info .mgr-sub  { font-size:11px; color:#94a3b8; }
    .emp-refresh-btn {
      padding:5px 12px; background:#fff; border:1.5px solid #e2e8f0; border-radius:8px;
      font-size:12px; font-weight:600; cursor:pointer; color:#475569; transition:all .15s;
    }
    .emp-refresh-btn:hover { border-color:#1a50a0; color:#1a50a0; }

    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    .modal-overlay.open { display: flex; }
    .modal {
      background: #fff;
      border-radius: 20px;
      padding: 0;
      width: 560px;
      max-width: 96vw;
      box-shadow: 0 24px 80px rgba(0,0,0,0.3);
      overflow: hidden;
    }
    .modal-topbar {
      display: flex; align-items: center; gap: 12px;
      background: #1a50a0; padding: 14px 20px;
    }
    .modal-back-btn {
      width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.15);
      border: none; color: #fff; font-size: 16px; cursor: pointer; display: flex;
      align-items: center; justify-content: center; flex-shrink: 0;
      transition: background .15s;
    }
    .modal-back-btn:hover { background: rgba(255,255,255,0.25); }
    .modal-topbar h3 { font-size: 16px; font-weight: 800; color: #fff; margin: 0; flex: 1; text-align: center; }
    .modal-body { padding: 22px 24px 18px; }
    .mode-row {
      display: flex; align-items: center; gap: 6px; margin-bottom: 18px;
      padding: 10px 14px; background: #f8faff; border-radius: 10px; border: 1px solid #e2e8f0;
      font-size: 13px; color: #475569; font-weight: 600;
    }
    .mode-row label { display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 4px 12px; border-radius: 7px; transition: background .15s; }
    .mode-row label:hover { background: #e2e8f0; }
    .mode-row input[type=radio] { accent-color: #1a50a0; width: 14px; height: 14px; cursor: pointer; }
    .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @media(max-width:520px) { .form-row-2 { grid-template-columns: 1fr; } }
    /* Multi-input sub-tabs */
    .mit-tabs { display:flex; gap:6px; margin-bottom:14px; background:#f1f5f9; border-radius:10px; padding:4px; }
    .mit-btn { flex:1; padding:7px 10px; border:none; border-radius:7px; font-size:12.5px; font-weight:600; cursor:pointer; color:#64748b; background:transparent; transition:all .15s; }
    .mit-btn.active { background:#fff; color:#1a50a0; box-shadow:0 1px 4px rgba(0,0,0,.12); }
    .mit-btn:hover:not(.active) { background:#e2e8f0; }
    /* Excel upload */
    .excel-tmpl-bar { display:flex; align-items:center; justify-content:space-between; background:#f8faff; border:1px solid #e2e8f0; border-radius:8px; padding:8px 12px; margin-bottom:10px; }
    .excel-tmpl-btn { padding:5px 12px; background:#1a50a0; color:#fff; border:none; border-radius:7px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
    .excel-tmpl-btn:hover { background:#1e40af; }
    .excel-dropzone { border:2px dashed #cbd5e1; border-radius:10px; padding:24px 16px; text-align:center; cursor:pointer; transition:border-color .15s,background .15s; }
    .excel-dropzone:hover { border-color:#1a50a0; background:#f0f5ff; }
    .excel-prev-table { width:auto; min-width:100%; border-collapse:collapse; font-size:12px; }
    .excel-prev-table th { background:#f1f5f9; padding:6px 10px; text-align:left; font-size:11px; color:#64748b; font-weight:700; position:sticky;top:0; }
    .excel-prev-table td { padding:5px 10px; border-bottom:1px solid #f1f5f9; color:#334155; }
    .modal h3 { font-size: 17px; font-weight: 800; color: #0f172a; margin-bottom: 20px; }
    .modal .form-group { margin-bottom: 14px; }
    .modal .form-group label { display: block; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
    .modal .form-group input,
    .modal .form-group select {
      width: 100%;
      padding: 10px 12px;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      font-size: 14px;
      outline: none;
      background: #f8faff;
    }
    .modal .form-group input:focus,
    .modal .form-group select:focus { border-color: #6366f1; background: #fff; }
    .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
    .modal-footer button { padding: 10px 20px; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
    .btn-save { background: #6366f1; color: #fff; }
    .btn-cancel { background: #e2e8f0; color: #475569; }