/* block 1 */
    /* ══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Light mode defaults
   Prefix key: P=Primary, G=Green, R=Red, O=Orange, V=Violet,
               T=Teal, I=Info, A=Accent, l=light bg version
══════════════════════════════════════════════════════════════════════ */
    :root {
      /* ── Prompt-inspired design system + Joolry brand ── */
      /* Primary: deep ink (Joolry) with soft blue interactive accent */
      --P: #1E293B;
      --Pd: #0F172A;
      --Pl: rgba(30, 41, 59, .08);
      --Pm: rgba(30, 41, 59, .16);
      --accent: #3B82F6;
      --accent-d: #2563EB;
      --accent-l: rgba(59, 130, 246, .12);

      --G: #10B981;
      --Gl: rgba(16, 185, 129, .12);
      --R: #EF4444;
      --Rl: rgba(239, 68, 68, .12);
      --O: #F59E0B;
      --Ol: rgba(245, 158, 11, .12);
      --V: #8B5CF6;
      --Vl: rgba(139, 92, 246, .12);
      --T: #06B6D4;
      --Tl: rgba(6, 182, 212, .12);
      --I: #3B82F6;
      --Il: rgba(59, 130, 246, .12);
      --A: #94A3B8;
      --Al: rgba(148, 163, 184, .12);

      /* Surfaces — Prompt soft slate */
      --bg: #F1F5F9;
      --sur: #FFFFFF;
      --sur2: #F8FAFC;
      --sur3: #F1F5F9;
      --bdr: #E2E8F0;
      --bdr2: #CBD5E1;

      /* Text — slate scale */
      --tx: #0F172A;
      --tx2: #475569;
      --tx3: #94A3B8;
      --tx4: #CBD5E1;

      /* Sidebar */
      --sb: #FFFFFF;
      --sb2: #F8FAFC;
      --sbt: #0F172A;
      --sbt2: #64748B;

      /* Layout */
      --sbw: 260px;
      --tbh: 64px;
      --r: 16px;
      --r2: 12px;
      --r3: 8px;

      /* Shadows — Prompt soft elevation */
      --shad: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
      --shad2: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
      --shad3: 0 12px 32px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .06);

      /* Z-layers */
      --z-drop: 200;
      --z-modal: 900;
      --z-toast: 9000;
      --z-ntf: 800;
      --z-sb: 100;
    }

    body.dark {
      --bg: #0B1220;
      --sur: #111827;
      --sur2: #1E293B;
      --sur3: #273344;
      --bdr: #1E293B;
      --bdr2: #334155;
      --tx: #F8FAFC;
      --tx2: #CBD5E1;
      --tx3: #64748B;
      --tx4: #475569;
      --sb: #0B1220;
      --sb2: #111827;
      --sbt: #F1F5F9;
      --sbt2: #94A3B8;
      --P: #E2E8F0;
      --Pd: #F8FAFC;
      --Pl: rgba(226, 232, 240, .08);
      --accent: #60A5FA;
      --accent-d: #3B82F6;
      --accent-l: rgba(96, 165, 250, .15);
      --shad: 0 1px 3px rgba(0, 0, 0, .4);
      --shad2: 0 8px 24px rgba(0, 0, 0, .45);
      --shad3: 0 20px 48px rgba(0, 0, 0, .55);
    }


    /* ══════════════════════════════════════════════════════════════════════
       PROMPT-STYLE COMPONENT LAYER (alignment + surfaces)
    ══════════════════════════════════════════════════════════════════════ */
    body {
      letter-spacing: -0.01em;
      -webkit-font-smoothing: antialiased;
    }

    /* Cards — soft elevation, generous radius */
    .card, .chart-wrap, .kpi, .att-punch-card, .mod-panel,
    .lbox, .pr-card-grid > .card {
      background: var(--sur) !important;
      border: 1px solid var(--bdr) !important;
      border-radius: var(--r) !important;
      box-shadow: var(--shad) !important;
    }
    .card:hover, .pr-card-grid > .card:hover {
      box-shadow: var(--shad2) !important;
    }

    /* KPI — Prompt style: soft icon chip + clean numbers */
    .kpi {
      padding: 20px 18px !important;
      position: relative;
      overflow: hidden;
    }
    .kpi-ico {
      width: 42px !important;
      height: 42px !important;
      border-radius: 12px !important;
      background: var(--kib, var(--Pl)) !important;
      color: var(--kc, var(--P)) !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      font-size: 16px !important;
      margin-bottom: 14px !important;
    }
    .kpi-val {
      font-size: 28px !important;
      font-weight: 700 !important;
      letter-spacing: -0.03em !important;
      color: var(--tx) !important;
      line-height: 1.1 !important;
    }
    .kpi-lbl {
      font-size: 12px !important;
      font-weight: 500 !important;
      color: var(--tx3) !important;
      margin-top: 6px !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }

    /* Primary buttons — Prompt blue accent for actions */
    .btn:not(.btn-outline):not(.btn-ghost):not(.l-btn) {
      background: var(--accent) !important;
      color: #fff !important;
      border: none !important;
      border-radius: 10px !important;
      font-weight: 600 !important;
      box-shadow: 0 1px 2px rgba(37, 99, 235, .2) !important;
      transition: background .15s, transform .1s, box-shadow .15s !important;
    }
    .btn:not(.btn-outline):not(.btn-ghost):not(.l-btn):hover {
      background: var(--accent-d) !important;
      box-shadow: 0 4px 12px rgba(37, 99, 235, .25) !important;
    }
    .btn-outline, .btn.btn-outline {
      background: var(--sur) !important;
      color: var(--tx2) !important;
      border: 1.5px solid var(--bdr) !important;
      border-radius: 10px !important;
      font-weight: 600 !important;
    }
    .btn-outline:hover {
      border-color: var(--accent) !important;
      color: var(--accent) !important;
      background: var(--accent-l) !important;
    }

    /* Login button keeps brand gradient feel */
    .l-btn {
      background: linear-gradient(135deg, var(--Pd), var(--P)) !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 14px rgba(15, 23, 42, .2) !important;
    }

    /* Sidebar — clean white, soft active state */
    .sb, #sb {
      background: var(--sb) !important;
      border-right: 1px solid var(--bdr) !important;
      box-shadow: none !important;
    }
    .nv {
      border-radius: 10px !important;
      margin: 2px 10px !important;
      font-weight: 500 !important;
      color: var(--sbt2) !important;
      transition: background .15s, color .15s !important;
    }
    .nv:hover {
      background: var(--sur3) !important;
      color: var(--sbt) !important;
    }
    .nv.on, .nv.active {
      background: var(--accent-l) !important;
      color: var(--accent-d) !important;
      font-weight: 600 !important;
    }
    .nv.on i, .nv.active i {
      color: var(--accent) !important;
    }

    /* Topbar */
    .tb, #tb, .topbar {
      background: var(--sur) !important;
      border-bottom: 1px solid var(--bdr) !important;
      height: var(--tbh) !important;
      box-shadow: none !important;
    }

    /* Content padding — Prompt generous spacing */
    #content, .content {
      padding: 24px 28px !important;
      max-width: 1400px;
    }
    @media (max-width: 768px) {
      #content, .content {
        padding: 14px 14px 90px !important;
      }
    }

    /* Quick action tiles — softer */
    .qa-tile {
      background: var(--sur) !important;
      border: 1px solid var(--bdr) !important;
      border-radius: 14px !important;
      box-shadow: var(--shad) !important;
      padding: 14px 8px !important;
      transition: transform .15s, box-shadow .15s !important;
    }
    .qa-tile:hover {
      transform: translateY(-2px);
      box-shadow: var(--shad2) !important;
    }
    .qa-icon {
      width: 44px !important;
      height: 44px !important;
      border-radius: 12px !important;
      margin: 0 auto 8px !important;
    }
    .qa-lbl {
      font-size: 12px !important;
      font-weight: 600 !important;
      color: var(--tx2) !important;
    }

    /* Module headers */
    .mod-title {
      font-size: 20px !important;
      font-weight: 700 !important;
      letter-spacing: -0.02em !important;
      color: var(--tx) !important;
    }
    .mod-sub {
      font-size: 13px !important;
      color: var(--tx3) !important;
      font-weight: 400 !important;
    }

    /* Inputs — Prompt clean */
    input, select, textarea {
      border-radius: 10px !important;
      border: 1.5px solid var(--bdr) !important;
      background: var(--sur) !important;
      transition: border-color .15s, box-shadow .15s !important;
    }
    input:focus, select:focus, textarea:focus {
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 3px var(--accent-l) !important;
      outline: none !important;
    }

    /* Tables */
    table {
      border-collapse: separate !important;
      border-spacing: 0 !important;
    }
    thead th {
      background: var(--sur2) !important;
      font-weight: 600 !important;
      font-size: 12px !important;
      color: var(--tx3) !important;
      text-transform: uppercase !important;
      letter-spacing: .04em !important;
      border-bottom: 1px solid var(--bdr) !important;
    }
    tbody td {
      border-bottom: 1px solid var(--bdr) !important;
      padding: 12px 14px !important;
    }
    tbody tr:hover {
      background: var(--sur2) !important;
    }

    /* Progress bars soft */
    .progress, [class*="progress-bar"] {
      border-radius: 999px !important;
      height: 6px !important;
      background: var(--sur3) !important;
    }

    /* Mobile bottom nav — Prompt clean */
    .mob-nav {
      background: var(--sur) !important;
      border-top: 1px solid var(--bdr) !important;
      box-shadow: 0 -4px 20px rgba(15, 23, 42, .06) !important;
    }
    .mob-nav-item.active {
      color: var(--accent) !important;
    }
    .mob-nav-item.active .mob-nav-pill {
      background: var(--accent-l) !important;
    }


    .btn-checkin {
      background: var(--accent) !important;
      color: #fff !important;
      border-radius: 12px !important;
      font-weight: 650 !important;
      box-shadow: 0 4px 14px rgba(37, 99, 235, .3) !important;
    }
    .btn-checkin:hover:not(:disabled) {
      background: var(--accent-d) !important;
    }
    .btn-checkin.out {
      background: var(--O) !important;
      box-shadow: 0 4px 14px rgba(245, 158, 11, .3) !important;
    }

    /* Chart wrappers */
    
    /* ── Dashboard quick actions — even grid all devices ── */
    .dash-qa-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
      gap: 14px !important;
      margin-bottom: 24px !important;
    }
    @media (max-width: 480px) {
      .dash-qa-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
      }
    }
    @media (min-width: 1100px) {
      .dash-qa-grid {
        grid-template-columns: repeat(5, 1fr) !important;
      }
    }
    .dash-qa-grid .qa-tile {
      min-height: 96px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* ── Richer KPI row ── */
    .krow {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 16px !important;
      margin-bottom: 22px !important;
    }
    @media (max-width: 900px) {
      .krow { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 480px) {
      .krow { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    }
    .kpi {
      min-height: 128px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
    }
    .kpi-val {
      font-size: 32px !important;
      font-weight: 800 !important;
      letter-spacing: -0.04em !important;
    }

    /* Skeleton shimmer richer */
    .kpi.kpi-skel, .skel {
      background: linear-gradient(90deg, var(--sur2) 25%, var(--sur3) 50%, var(--sur2) 75%) !important;
      background-size: 200% 100% !important;
      animation: skelShimmer 1.2s ease-in-out infinite !important;
      border: 1px solid var(--bdr) !important;
    }
    @keyframes skelShimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* Chart cards min height so not empty-looking */
    .chart-wrap {
      min-height: 280px !important;
      display: flex;
      flex-direction: column;
    }
    .chart-inner {
      flex: 1;
      min-height: 200px;
      position: relative;
    }

    /* Section cards bottom row */
    #content .sec-card, .lower-card {
      min-height: 140px;
    }

    /* Attendance punch — richer */
    .att-punch-card {
      padding: 20px 24px !important;
      gap: 20px !important;
      align-items: center !important;
    }
    .att-punch-title {
      font-size: 11px !important;
      letter-spacing: .06em !important;
      color: var(--tx3) !important;
    }
    .att-punch-status {
      font-size: 16px !important;
      font-weight: 700 !important;
    }

    /* Greeting richer */
    .dash-greet h1, .dash-hello, #content h1 {
      font-weight: 800 !important;
      letter-spacing: -0.03em !important;
    }

.chart-wrap {
      padding: 20px !important;
    }
    .chart-title {
      font-size: 15px !important;
      font-weight: 650 !important;
      color: var(--tx) !important;
    }
    .chart-sub {
      font-size: 12px !important;
      color: var(--tx3) !important;
    }

    /* Grid gaps consistent */
    .krow {
      gap: 16px !important;
    }

    /* Badge / chips soft */
    .badge, .chip, [class*="badge"] {
      border-radius: 8px !important;
      font-weight: 600 !important;
    }


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

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: 'Be Vietnam Pro', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--tx);
      overflow: hidden;
      max-width: 100vw;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a {
      color: var(--P);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button {
      font-family: inherit;
    }

    input,
    select,
    textarea {
      font-family: inherit;
    }

    ::selection {
      background: var(--Pl);
      color: var(--P);
    }

    :focus-visible {
      outline: 2px solid var(--Pd);
      outline-offset: 2px;
    }

    /* ══════════════════════════════════════════════════════════════════════
   SCREENS (view management)
══════════════════════════════════════════════════════════════════════ */
    .scr {
      display: none;
      position: fixed;
      inset: 0;
      width: 100%;
      max-width: 100vw;
      height: 100vh;
      height: 100svh;
      overflow: hidden;
      z-index: 0;
    }

    .scr.on {
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    /* App shell must NOT be centered — sidebar + main side-by-side */
    #sApp.on {
      display: flex !important;
      flex-direction: row !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
      z-index: 1;
    }

    #sLogin.on {
      z-index: 10;
      /* login always on top when shown */
    }

    #sApp.on {
      z-index: 1;
    }

    /* Hide bottom nav, overlays when login screen is active */
    body:has(#sLogin.on) #mobNav,
    body:has(#sLogin.on) .mob-nav,
    body:has(#sLogin.on) #mobOv,
    body:has(#sLogin.on) #sbOverlay,
    body:has(#sLogin.on) #soOv,
    body:has(#sLogin.on) #mOv,
    body:has(#sLogin.on) #ntfPanel,
    body:has(#sLogin.on) #fkSplash {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /* Suppress login screen flash when valid session detected early */
    html.has-session #sLogin {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    @keyframes fadein {
      from {
        opacity: .85;
        transform: translateY(4px);
      }

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

    @keyframes fadein-fast {
      from {
        opacity: .1;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes slideup {
      from {
        opacity: .1;
        transform: translateY(16px);
      }

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

    /* shimmer keyframe superseded — see skelShimmer */

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

    @keyframes pop {
      0% {
        transform: scale(.92);
        opacity: .1;
      }

      60% {
        transform: scale(1.02);
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes bounce-in {
      0% {
        transform: translate(-50%, -50%) scale(.8);
        opacity: .1;
      }

      60% {
        transform: translate(-50%, -50%) scale(1.04);
      }

      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
    }

    /* ══════════════════════════════════════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════════════════════════════════════ */
    #sLogin {
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(ellipse at 80% 10%, rgba(59, 130, 246, .25) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 90%, rgba(17, 17, 17, .5) 0%, transparent 60%),
        linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #334155 100%);
      overflow: hidden;
    }

    /* Animated background circles */
    #sLogin::before,
    #sLogin::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    #sLogin::before {
      width: 550px;
      height: 550px;
      background: radial-gradient(circle, rgba(10, 147, 150, .16) 0%, transparent 70%);
      top: -180px;
      right: -180px;
      animation: float1 9s ease-in-out infinite;
    }

    #sLogin::after {
      width: 380px;
      height: 380px;
      background: radial-gradient(circle, rgba(148, 210, 189, .14) 0%, transparent 70%);
      bottom: -100px;
      left: -100px;
      animation: float2 12s ease-in-out infinite;
    }

    @keyframes float1 {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(-30px) rotate(5deg);
      }
    }

    @keyframes float2 {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(20px) rotate(-3deg);
      }
    }

    /* Decorative grid pattern overlay */
    .login-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
      z-index: 0;
    }

    .lbox {
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(32px) saturate(1.8);
      -webkit-backdrop-filter: blur(32px) saturate(1.8);
      border-radius: 28px;
      padding: 52px 48px;
      width: 100%;
      max-width: 448px;
      box-shadow:
        0 4px 24px rgba(0, 0, 0, .12),
        0 40px 100px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 rgba(0, 0, 0, .04);
      position: relative;
      z-index: 10;
      animation: pop .45s cubic-bezier(.34, 1.2, .64, 1) forwards;
      border: 1px solid rgba(255, 255, 255, .6);
    }

    /* Subtle glow ring behind login box */
    .lbox::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 30px;
      background: linear-gradient(135deg, rgba(183, 110, 121, .25) 0%, rgba(17, 17, 17, .15) 100%);
      z-index: -1;
      filter: blur(16px);
      opacity: .6;
    }

    body.dark .lbox {
      background: rgba(30, 41, 59, .98);
      border-color: rgba(255, 255, 255, .07);
    }

    .l-logo-wrap {
      text-align: center;
      margin-bottom: 24px;
    }

    .l-logo-wrap img {
      height: 58px;
      object-fit: contain;
      margin: 0 auto;
    }

    .l-logo-wrap .l-logo-fallback {
      width: 58px;
      height: 58px;
      background: var(--P);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 900;
      color: #fff;
      margin: 0 auto;
      letter-spacing: -1px;
    }

    .l-title {
      text-align: center;
      font-size: 24px;
      font-weight: 900;
      margin-bottom: 6px;
      letter-spacing: -.5px;
    }

    .l-sub {
      text-align: center;
      color: var(--tx2);
      font-size: 13.5px;
      margin-bottom: 34px;
      font-weight: 500;
    }

    .l-field {
      margin-bottom: 18px;
      position: relative;
    }

    .l-field label {
      display: block;
      font-size: 11px;
      font-weight: 800;
      color: var(--tx2);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: .8px;
    }

    .l-field input {
      width: 100%;
      padding: 12px 14px 12px 42px;
      border: 1.5px solid var(--bdr);
      border-radius: 11px;
      font-size: 14px;
      background: var(--bg);
      color: var(--tx);
      transition: all .2s;
      outline: none;
    }

    /* Password field extra right padding for eye icon */
    #fpass {
      padding-right: 44px;
    }

    .l-field input:focus {
      border-color: var(--P);
      box-shadow: 0 0 0 4px var(--Pl);
      background: var(--sur);
    }

    .l-field .l-ico {
      position: absolute;
      left: 14px;
      bottom: 0;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      color: var(--tx3);
      font-size: 14px;
      pointer-events: none;
      transition: color .2s;
    }

    .l-field input:focus~.l-ico,
    .l-field input:focus+.l-ico {
      color: var(--P);
    }

    /* Eye toggle button for password */
    .l-eye {
      position: absolute;
      right: 12px;
      bottom: 0;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--tx3);
      font-size: 14px;
      padding: 0;
      transition: color .2s;
      -webkit-tap-highlight-color: transparent;
    }

    .l-eye:hover {
      color: var(--P);
    }

    .l-btn {
      width: 100%;
      padding: 14px;
      font-size: 15px;
      font-weight: 700;
      border: none;
      border-radius: 11px;
      background: linear-gradient(135deg, var(--P), var(--Pd));
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      margin-top: 6px;
      box-shadow: 0 4px 16px rgba(17, 17, 17, .25);
      transition: all .2s;
      font-family: inherit;
    }

    .l-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(17, 17, 17, .35);
    }

    .l-btn:active {
      transform: none;
      box-shadow: none;
    }

    .l-err {
      margin-top: 14px;
      padding: 10px 14px;
      border-radius: 9px;
      background: var(--Rl);
      border: 1px solid rgba(224, 49, 49, .2);
      color: var(--R);
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      display: none;
      animation: fadein-fast .2s ease;
    }

    .l-err.on {
      display: block;
    }

    .l-footer {
      text-align: center;
      font-size: 11px;
      color: var(--tx3);
      margin-top: 24px;
      font-weight: 600;
    }

    .l-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 22px 0;
      color: var(--tx3);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
    }

    .l-divider::before,
    .l-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--bdr);
    }

    /* ══════════════════════════════════════════════════════════════════════
   APP SHELL LAYOUT
══════════════════════════════════════════════════════════════════════ */
    #sApp {
      flex-direction: row;
    }

    /* Desktop: collapse sidebar to icon rail (ERP desk) */
    .sb-toggle {
      display: none;
    }

    .csetup-grid {
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 20px;
      align-items: start;
      /* both cols independent height */
    }

    /* Right col: fixed height scroll so expand/collapse doesn't affect left */
    .csetup-grid>div:last-child {
      position: sticky;
      top: 0;
      max-height: calc(100vh - 160px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 960px) {
      .csetup-grid {
        grid-template-columns: 1fr !important;
      }

      .csetup-grid>div:last-child {
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
      }
    }

    /* Task Setup stability */
    #setupTaskList {
      contain: layout;
    }

    .csetup-grid .fgrp {
      scroll-margin-top: 80px;
    }

    /* ── Muster Table ─────────────────────────────────────── */
    .muster-tbl {
      border-collapse: collapse;
      font-size: 12px;
      min-width: 100%;
    }

    .muster-tbl thead th {
      background: var(--sur2);
      font-weight: 700;
      padding: 8px 4px;
      border-bottom: 2px solid var(--bor);
      white-space: nowrap;
    }

    .muster-tbl tbody tr:hover {
      background: var(--sur2);
    }

    .muster-tbl tbody tr {
      border-bottom: 1px solid var(--bor);
    }

    .mst-emp {
      position: sticky;
      left: 0;
      background: var(--sur);
      z-index: 2;
      min-width: 160px;
      padding: 8px 12px !important;
      text-align: left !important;
    }

    .muster-tbl thead .mst-emp,
    .muster-tbl thead .mst-pct {
      background: var(--sur2) !important;
    }

    .mst-pct {
      position: sticky;
      left: 160px;
      background: var(--sur);
      z-index: 2;
      font-weight: 800;
      min-width: 44px;
      text-align: center;
      padding: 8px 4px;
    }

    .mst-day {
      text-align: center;
      min-width: 28px;
      padding: 4px 2px;
      font-size: 11px;
    }

    .mst-cell {
      text-align: center;
      font-weight: 800;
      font-size: 11px;
      padding: 6px 2px;
    }

    /* ── Employee Directory ─────────────────────────────────────────────────── */
    .ed-toolbar {
      background: var(--sur2);
      border: 1.5px solid var(--bdr);
      border-radius: 14px;
      padding: 14px 18px;
      margin-bottom: 4px;
    }

    .ed-search-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border: 1.5px solid var(--bdr);
      border-radius: 9px;
      background: var(--bg);
      color: var(--tx3);
      min-width: 260px;
    }

    .ed-search-wrap input {
      border: none;
      background: transparent;
      outline: none;
      font-size: 13px;
      color: var(--tx);
      flex: 1;
      min-width: 0;
    }

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

    .ed-card {
      background: var(--sur2);
      border: 1.5px solid var(--bdr);
      border-radius: 14px;
      overflow: hidden;
      cursor: pointer;
      transition: transform .15s, box-shadow .15s;
    }

    .ed-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
    }

    .ed-card-alert {
      border-color: var(--R) !important;
    }

    .ed-card-top {
      height: 68px;
      background: linear-gradient(135deg, var(--Pl) 0%, var(--bg) 100%);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 10px;
      position: relative;
    }

    .ed-avatar {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      border: 3px solid var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 18px;
      flex-shrink: 0;
      position: absolute;
      bottom: -16px;
      left: 14px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    }

    .ed-role-bdg {
      position: absolute;
      top: 8px;
      right: 8px;
    }

    .ed-alert-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--R);
      position: absolute;
      top: 8px;
      left: 8px;
      border: 2px solid var(--sur2);
    }

    .ed-card-body {
      padding: 22px 14px 10px;
    }

    .ed-name {
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ed-dept {
      font-size: 11px;
      color: var(--tx3);
      margin-bottom: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ed-email {
      font-size: 11px;
      color: var(--tx3);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ed-overdue-tag {
      margin-top: 8px;
      font-size: 10.5px;
      font-weight: 700;
      color: var(--R);
      background: var(--Rl);
      padding: 3px 8px;
      border-radius: 6px;
      display: inline-block;
    }

    .ed-card-foot {
      padding: 10px 14px;
      border-top: 1px solid var(--bdr);
      display: flex;
      gap: 7px;
    }

    .ed-tr {
      cursor: pointer;
    }

    .ed-tr:hover {
      background: var(--sur2) !important;
    }

    .ed-detail-head {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--bdr);
      margin-bottom: 16px;
    }

    /* ── Delegation Analytics ────────────────────────────────────────────────── */
    .da-kpi-strip {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }

    @media (max-width:1100px) {
      .da-kpi-strip {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width:650px) {
      .da-kpi-strip {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .da-kpi {
      background: var(--sur2);
      border: 1.5px solid var(--bdr);
      border-radius: 12px;
      padding: 13px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      transition: transform .15s, box-shadow .15s;
    }

    .da-kpi:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 18px rgba(0, 0, 0, .09);
    }

    .da-kpi-row1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }

    .da-kpi-ico {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      flex-shrink: 0;
      background: color-mix(in srgb, var(--kc, var(--V)) 15%, transparent);
      color: var(--kc, var(--V));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }

    .da-kpi-val {
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .da-kpi-lbl {
      font-size: 10px;
      font-weight: 800;
      color: var(--tx2);
      text-transform: uppercase;
      letter-spacing: .4px;
      overflow-wrap: break-word;
    }

    .da-kpi-sub {
      font-size: 10px;
      color: var(--tx3);
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .da-banner {
      background: linear-gradient(135deg, var(--sur2) 0%, var(--bg) 100%);
      border: 1.5px solid var(--bdr);
      border-radius: 14px;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 16px;
    }

    .da-banner-ring {
      position: relative;
      width: 72px;
      height: 72px;
      flex-shrink: 0;
    }

    .da-ring-svg {
      width: 72px;
      height: 72px;
      transform: rotate(-90deg);
    }

    .da-ring-lbl {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
    }

    .da-grid3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 16px;
    }

    @media (max-width:1000px) {
      .da-grid3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width:650px) {
      .da-grid3 {
        grid-template-columns: 1fr;
      }
    }

    .da-grid2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    @media (max-width:750px) {
      .da-grid2 {
        grid-template-columns: 1fr;
      }
    }

    .da-chart-card {
      background: var(--sur2);
      border: 1.5px solid var(--bdr);
      border-radius: 12px;
      padding: 14px;
      overflow: hidden;
    }

    .da-chart-ttl {
      font-size: 12px;
      font-weight: 800;
      color: var(--tx2);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .da-emp-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--bdr);
      min-width: 0;
    }

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

    .da-emp-rank {
      font-size: 18px;
      flex-shrink: 0;
      width: 28px;
      text-align: center;
    }

    .da-emp-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--Vl);
      color: var(--V);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 14px;
      flex-shrink: 0;
    }

    .da-emp-alert {
      background: var(--Rl) !important;
      color: var(--R) !important;
    }

    .da-emp-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 14px;
      margin-top: 12px;
    }

    .da-emp-card {
      background: var(--sur2);
      border: 1.5px solid var(--bdr);
      border-radius: 14px;
      padding: 16px;
      transition: transform .15s, box-shadow .15s;
    }

    .da-emp-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 22px rgba(0, 0, 0, .1);
    }

    .da-emp-card-alert {
      border-color: var(--R) !important;
    }

    .da-emp-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .da-stat-row {
      display: flex;
      justify-content: space-around;
      margin: 8px 0;
    }

    .da-stat-cell {
      text-align: center;
      flex: 1;
    }

    .da-grid-dept {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
      margin-bottom: 16px;
    }

    .da-dept-card {
      background: var(--sur2);
      border: 1.5px solid var(--bdr);
      border-radius: 12px;
      padding: 16px;
      transition: transform .15s;
      cursor: default;
    }

    .da-dept-card:hover {
      transform: translateY(-2px);
    }

    .da-emp-search-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 4px;
      flex-wrap: wrap;
    }

    /* ── Attendance Analytics ─────────────────────────────────────────────── */
    .ana-toolbar {
      background: var(--sur2);
      border: 1.5px solid var(--bdr);
      border-radius: 14px;
      padding: 14px 18px;
      margin-bottom: 4px;
    }

    .ana-filter-grp {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .ana-lbl {
      font-size: 10px;
      font-weight: 800;
      color: var(--tx3);
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .ana-sel {
      padding: 7px 10px;
      border: 1.5px solid var(--bdr);
      border-radius: 8px;
      font-size: 12px;
      background: var(--bg);
      color: var(--tx);
      outline: none;
      transition: border-color .15s;
      font-family: inherit;
      appearance: none;
      -webkit-appearance: none;
    }

    .ana-sel:focus {
      border-color: var(--P);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
    }

    .ana-kpi-row {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 10px;
      margin-bottom: 14px;
    }

    @media (max-width: 1100px) {
      .ana-kpi-row {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width: 700px) {
      .ana-kpi-row {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .ana-kpi {
      background: var(--sur2);
      border: 1.5px solid var(--bdr);
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      transition: transform .15s, box-shadow .15s;
    }

    .ana-kpi:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    }

    .ana-kpi-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }

    .ana-kpi-ico {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: color-mix(in srgb, var(--kc, var(--P)) 15%, transparent);
      color: var(--kc, var(--P));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }

    .ana-kpi-val {
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
    }

    .ana-kpi-lbl {
      font-size: 10px;
      font-weight: 800;
      color: var(--tx2);
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    .ana-kpi-sub {
      font-size: 10px;
      color: var(--tx3);
    }

    .ana-ctx-bar {
      padding: 9px 14px;
      background: var(--sur2);
      border: 1px solid var(--bdr);
      border-radius: 9px;
      font-size: 12px;
      color: var(--tx2);
      margin-bottom: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .ana-charts-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 16px;
    }

    .ana-chart-wide {
      grid-column: span 3;
    }

    @media (max-width: 1000px) {
      .ana-charts-grid {
        grid-template-columns: repeat(2, 1fr);
      }

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

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

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

    .ana-chart-card {
      background: var(--sur2);
      border: 1.5px solid var(--bdr);
      border-radius: 12px;
      padding: 14px;
      overflow: hidden;
    }

    .ana-chart-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--tx2);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    @media (min-width: 768px) {
      .sb-toggle {
        display: inline-flex !important;
      }
      .ham { display: none !important; }

      #sApp.sb-collapsed .sb {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
      }

      #sApp.sb-collapsed .sb-brand {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
      }

      #sApp.sb-collapsed .sb-brand > div:not(:first-child),
      #sApp.sb-collapsed .sb-brand .sb-brand-text {
        display: none !important;
      }

      #sApp.sb-collapsed .sb-brand img {
        padding: 4px 6px !important;
      }

      #sApp.sb-collapsed .sb-prof {
        justify-content: center !important;
        padding: 8px 6px !important;
      }

      #sApp.sb-collapsed .sb-prof > i.fa-chevron-right {
        display: none !important;
      }

      #sApp.sb-collapsed .sb-prof-info {
        display: none !important;
      }

      #sApp.sb-collapsed .nv-section-label {
        display: none !important;
      }

      #sApp.sb-collapsed .nv {
        justify-content: center !important;
        gap: 0 !important;
        padding: 10px 8px !important;
        font-size: 0 !important;
        position: relative !important;
      }

      #sApp.sb-collapsed .nv span:not(.nv-badge):not(.nv-tag) {
        display: none !important;
      }

      #sApp.sb-collapsed .nv i {
        font-size: 15px !important;
      }

      #sApp.sb-collapsed .nv-tag,
      #sApp.sb-collapsed .nv-badge {
        position: absolute !important;
        top: 4px !important;
        right: 2px !important;
        font-size: 8px !important;
        padding: 1px 5px !important;
        margin: 0 !important;
      }

      #sApp.sb-collapsed .nv-sep {
        margin: 8px 6px !important;
      }

      #sApp.sb-collapsed .sb-ft {
        display: none !important;
      }
    }

    /* ──────────────────── SIDEBAR ──────────────────── */
    .sb {
      width: var(--sbw);
      min-width: var(--sbw);
      background: var(--sb);
      border-right: 1px solid var(--bdr);
      box-shadow: 2px 0 16px rgba(13, 27, 42, .04);
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      z-index: var(--z-sb);
      transition: width .25s cubic-bezier(.4, 0, .2, 1),
        transform .25s cubic-bezier(.4, 0, .2, 1);
      scrollbar-width: thin;
      scrollbar-color: rgba(15, 23, 42, .1) transparent;
    }

    .sb::-webkit-scrollbar-thumb {
      background: rgba(15, 23, 42, .12);
      border-radius: 2px;
    }

    body.dark .sb {
      scrollbar-color: rgba(255, 255, 255, .08) transparent;
      border-right-color: rgba(255, 255, 255, .06);
    }

    body.dark .sb::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .08);
    }

    .sb::-webkit-scrollbar {
      width: 4px;
    }

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

    /* Sidebar Header */
    .sb-hd {
      padding: 16px 14px 14px;
      border-bottom: 1px solid var(--bdr);
      flex-shrink: 0;
    }

    .sb-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }

    .sb-brand img {
      height: 34px;
      object-fit: contain;
      background: #fff;
      padding: 5px 10px;
      border-radius: 9px;
    }

    .sb-brand-txt {
      font-size: 15px;
      font-weight: 800;
      color: var(--tx);
      letter-spacing: -.3px;
    }

    .sb-brand-ver {
      font-size: 9px;
      font-weight: 700;
      color: var(--Pd);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-top: 1px;
    }

    /* Sidebar user profile */
    .sb-prof {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 10px 12px;
      border-radius: var(--r2);
      background: var(--sur);
      cursor: pointer;
      transition: all .15s;
      border: 1px solid var(--bdr);
    }

    .sb-prof:hover {
      background: var(--sur2);
      border-color: var(--bdr2);
    }

    body.dark .sb-prof {
      background: rgba(255, 255, 255, .04);
      border-color: rgba(255, 255, 255, .06);
    }

    body.dark .sb-prof:hover {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .1);
    }

    .sb-ava {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--P) 0%, var(--Pd) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 14px;
      color: #fff;
      flex-shrink: 0;
      box-shadow: 0 2px 10px rgba(0, 95, 115, .45);
      overflow: hidden;
      position: relative;
    }

    .sb-ava img {
      width: 38px;
      height: 38px;
      object-fit: cover;
      border-radius: 50%;
    }

    .sb-ava .online-dot {
      position: absolute;
      bottom: 1px;
      right: 1px;
      width: 9px;
      height: 9px;
      background: var(--G);
      border: 2px solid var(--sb);
      border-radius: 50%;
    }

    .sb-prof-info {
      flex: 1;
      min-width: 0;
    }

    .sb-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--tx);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }

    .sb-role {
      font-size: 10px;
      color: var(--tx2);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 600;
      margin-top: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Sidebar navigation */
    .sb-nav {
      padding: 10px 8px;
      flex: 1;
    }

    .nv-section {
      margin-bottom: 4px;
    }

    .nv-section-label {
      font-size: 9.5px;
      font-weight: 800;
      color: var(--tx3);
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 8px 12px 4px;
      user-select: none;
    }

    .nv {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: var(--r2);
      color: var(--tx2);
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 1px;
      transition: all .12s;
      position: relative;
      white-space: nowrap;
      user-select: none;
    }

    .nv:hover {
      background: rgba(0, 95, 115, .08);
      color: var(--tx);
    }

    .nv.on {
      background: rgba(0, 95, 115, .12);
      color: var(--P);
      font-weight: 700;
    }

    .nv.on::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 20px;
      background: var(--Pd);
      border-radius: 0 3px 3px 0;
    }

    .nv i {
      width: 18px;
      text-align: center;
      font-size: 14px;
      flex-shrink: 0;
      transition: all .12s;
    }

    .nv.on i {
      color: var(--Pd);
    }

    .nv-badge {
      margin-left: auto;
      background: var(--R);
      color: #fff;
      font-size: 9.5px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 999px;
      line-height: 1.5;
      flex-shrink: 0;
    }

    .nv-tag {
      margin-left: auto;
      font-size: 9px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 5px;
      background: rgba(10, 147, 150, .25);
      color: var(--Pd);
      text-transform: uppercase;
      letter-spacing: .3px;
    }

    .nv-sep {
      border: none;
      border-top: 1px solid var(--bdr);
      margin: 6px 10px;
    }

    .nv-danger {
      color: #f87171 !important;
    }

    .nv-danger:hover {
      background: rgba(239, 68, 68, .1) !important;
      color: #fca5a5 !important;
    }

    /* Sidebar footer */
    .sb-ft {
      padding: 12px 16px;
      border-top: 1px solid var(--bdr);
      flex-shrink: 0;
    }

    .sb-ft-txt {
      font-size: 10px;
      color: var(--tx3);
      font-weight: 600;
    }

    .sb-ft-copy {
      font-size: 9px;
      color: var(--tx4);
      margin-top: 2px;
    }

    body.dark .nv {
      color: #94a3b8;
    }

    body.dark .nv:hover {
      background: rgba(255, 255, 255, .07);
      color: #cbd5e1;
    }

    body.dark .nv.on {
      background: rgba(0, 95, 115, .22);
      color: #7dd3fc;
    }

    body.dark .nv-section-label {
      color: #64748b;
    }

    body.dark .nv-sep {
      border-top-color: rgba(255, 255, 255, .06);
    }

    body.dark .sb-hd {
      border-bottom-color: rgba(255, 255, 255, .06);
    }

    body.dark .sb-brand-txt {
      color: #e2e8f0;
    }

    body.dark .sb-name {
      color: #e2e8f0;
    }

    body.dark .sb-role {
      color: #94a3b8;
    }

    body.dark .sb-ft {
      border-top-color: rgba(255, 255, 255, .06);
    }

    body.dark .sb-ft-txt {
      color: #64748b;
    }

    body.dark .sb-ft-copy {
      color: #475569;
    }

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

    /* Top Bar */
    .topbar {
      height: var(--tbh);
      background: rgba(255, 255, 255, .9);
      backdrop-filter: blur(16px) saturate(1.6);
      -webkit-backdrop-filter: blur(16px) saturate(1.6);
      border-bottom: 1px solid rgba(227, 233, 241, .9);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 22px;
      flex-shrink: 0;
      gap: 12px;
      position: relative;
      z-index: 50;
      box-shadow: 0 1px 0 rgba(13, 27, 42, .04), 0 4px 20px rgba(13, 27, 42, .04);
    }

    .tb-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .tb-title-wrap {}

    .tb-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--tx);
      line-height: 1.2;
      letter-spacing: -.2px;
    }

    .tb-breadcrumb {
      font-size: 11px;
      color: var(--tx3);
      font-weight: 500;
      margin-top: 2px;
    }

    .tb-right {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .tb-divider {
      width: 1px;
      height: 20px;
      background: var(--bdr);
    }

    /* Icon Button */
    .ico-btn {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      border: 1.5px solid var(--bdr);
      background: var(--sur);
      color: var(--tx2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: all .15s;
      flex-shrink: 0;
      position: relative;
    }

    .ico-btn:hover {
      background: var(--bg);
      color: var(--P);
      border-color: var(--P);
    }

    .ico-btn .ntf-dot {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 8px;
      height: 8px;
      background: var(--R);
      border-radius: 50%;
      border: 2px solid var(--sur);
    }

    /* Hamburger */
    .ham {
      display: none;
    }

    /* Content area */
    #content {
      flex: 1;
      overflow-y: auto;
      padding: 20px 22px 28px;
      background: var(--bg);
    }

    #content::-webkit-scrollbar {
      width: 6px;
    }

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

    #content::-webkit-scrollbar-thumb {
      background: var(--bdr);
      border-radius: 3px;
    }

    #content::-webkit-scrollbar-thumb:hover {
      background: var(--bdr2);
    }

    /* ══════════════════════════════════════════════════════════════════════
   COMMON COMPONENTS
══════════════════════════════════════════════════════════════════════ */

    /* ── Buttons ── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 9px 17px;
      border: none;
      border-radius: 9px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s cubic-bezier(.4, 0, .2, 1);
      background: var(--P);
      color: #fff;
      font-family: inherit;
      white-space: nowrap;
      letter-spacing: -.1px;
      position: relative;
      overflow: hidden;
    }

    .btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0);
      transition: background .15s;
    }

    .btn:hover::after {
      background: rgba(255, 255, 255, .08);
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--shad2);
    }

    .btn:active {
      transform: none;
      box-shadow: none;
    }

    .btn:disabled {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* Size variants */
    .btn-sm {
      padding: 6px 12px;
      font-size: 12px;
      border-radius: 7px;
    }

    .btn-xs {
      padding: 4px 10px;
      font-size: 11px;
      border-radius: 6px;
    }

    .btn-lg {
      padding: 12px 24px;
      font-size: 14.5px;
      border-radius: 11px;
    }

    .btn-wide {
      width: 100%;
    }

    .btn-ico {
      width: 36px;
      height: 36px;
      padding: 0;
      border-radius: 9px;
    }

    .btn-ico.sm {
      width: 30px;
      height: 30px;
      border-radius: 7px;
    }

    /* Color variants */
    .btn-outline {
      background: transparent;
      border: 1.5px solid var(--bdr);
      color: var(--tx2);
    }

    .btn-outline:hover {
      background: var(--bg);
      color: var(--tx);
      border-color: var(--bdr2);
    }

    .btn-ghost {
      background: transparent;
      border: none;
      color: var(--tx2);
    }

    .btn-ghost:hover {
      background: var(--bg);
      color: var(--tx);
    }

    .btn-green {
      background: var(--G);
    }

    .btn-red {
      background: var(--R);
    }

    .btn-orange {
      background: var(--O);
    }

    .btn-violet {
      background: var(--V);
    }

    .btn-teal {
      background: var(--T);
    }

    .btn-info {
      background: var(--I);
    }

    .btn-dark {
      background: var(--sb);
    }

    .btn-light {
      background: var(--bg);
      color: var(--tx);
      border: 1.5px solid var(--bdr);
    }

    .btn-light:hover {
      background: var(--bdr);
    }

    /* Backwards compat aliases for old code */
    .btnS {
      padding: 6px 12px !important;
      font-size: 12px !important;
      border-radius: 7px !important;
    }

    .btnXS {
      padding: 4px 10px !important;
      font-size: 11px !important;
      border-radius: 6px !important;
    }

    .btnO {
      background: transparent !important;
      border: 1.5px solid var(--bdr) !important;
      color: var(--tx2) !important;
    }

    .btnO:hover {
      background: var(--bg) !important;
      color: var(--tx) !important;
    }

    .btnG {
      background: var(--G) !important;
    }

    .btnR {
      background: var(--R) !important;
    }

    .btnO2 {
      background: var(--O) !important;
    }

    .btnV {
      background: var(--V) !important;
    }

    .btnT {
      background: var(--T) !important;
    }

    /* ── Cards ── */
    .card {
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 22px;
      box-shadow: var(--shad);
      transition: box-shadow .2s, transform .2s;
      overflow-wrap: break-word;
    }

    .card:hover {
      box-shadow: var(--shad2);
      transform: translateY(-1px);
    }

    .card-sm {
      padding: 16px;
    }

    .card-xs {
      padding: 12px;
    }

    .card-lg {
      padding: 28px;
    }

    .card-flat {
      box-shadow: none;
    }

    .card-flat:hover {
      box-shadow: none;
      transform: none;
    }

    .card-nohover:hover {
      box-shadow: var(--shad);
      transform: none;
    }

    /* ── Module header ── */
    .mod-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 22px;
      gap: 14px;
      flex-wrap: wrap;
    }

    .mod-head-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .mod-title {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.5px;
      line-height: 1.2;
    }

    .mod-sub {
      font-size: 13px;
      color: var(--tx2);
      margin-top: 3px;
      font-weight: 500;
      overflow-wrap: break-word;
    }

    /* ── KPI grid ── */
    .krow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 20px;
    }

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

    .krow-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .krow-5 {
      grid-template-columns: repeat(5, 1fr);
    }

    .krow-6 {
      grid-template-columns: repeat(6, 1fr);
    }

    .kpi {
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 18px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shad);
      transition: box-shadow .18s, border-color .18s;
      cursor: default;
    }

    .kpi:hover {
      box-shadow: var(--shad2);
      border-color: var(--bdr2);
    }

    .kpi::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--kc, var(--P));
      border-radius: var(--r) var(--r) 0 0;
    }

    .kpi-ico {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--kib, var(--Pl));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: var(--kc, var(--P));
      margin-bottom: 14px;
    }

    .kpi-val {
      font-size: 30px;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 5px;
      letter-spacing: -1.5px;
      color: var(--tx);
    }

    .kpi-lbl {
      font-size: 12px;
      font-weight: 700;
      color: var(--tx2);
      text-transform: uppercase;
      letter-spacing: .3px;
    }

    .kpi-trend {
      font-size: 11px;
      font-weight: 700;
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .kpi-trend.up {
      color: var(--G);
    }

    .kpi-trend.dn {
      color: var(--R);
    }

    .kpi-trend.same {
      color: var(--tx3);
    }

    .kpi-bar-wrap {
      background: var(--bdr);
      border-radius: 999px;
      height: 6px;
      margin-top: 10px;
      overflow: hidden;
    }

    .kpi-bar {
      height: 6px;
      border-radius: 999px;
      background: var(--kc, var(--P));
      transition: width .6s cubic-bezier(.4, 0, .2, 1);
    }

    /* ── Tabs ── */
    .tabbar {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--bdr);
      margin-bottom: 24px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .tabbar::-webkit-scrollbar {
      display: none;
    }

    .tab {
      padding: 10px 17px;
      color: var(--tx2);
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      border-bottom: 2.5px solid transparent;
      white-space: nowrap;
      transition: all .15s;
      display: flex;
      align-items: center;
      gap: 7px;
      user-select: none;
    }

    .tab:hover {
      color: var(--P);
      background: var(--Pl);
    }

    .tab.on {
      color: var(--P);
      border-bottom-color: var(--P);
      font-weight: 800;
    }

    /* Live _mkTabs() outputs .tabs + .tab.active (second impl) — ERP desk strip */
    .tabs {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 0;
      border: 1px solid var(--bdr);
      border-bottom: 2px solid var(--bdr);
      border-radius: var(--r2);
      margin-bottom: 20px;
      overflow-x: auto;
      scrollbar-width: none;
      background: var(--sur);
      box-shadow: var(--shad);
    }

    .tabs::-webkit-scrollbar {
      display: none;
    }

    .tabs .tab {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 16px;
      margin: 0;
      border: none;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      background: transparent;
      color: var(--tx2);
      font-weight: 600;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      transition: color .12s, background .12s, border-color .12s;
    }

    .tabs .tab:hover {
      color: var(--P);
      background: var(--Pl);
    }

    .tabs .tab.active {
      color: var(--P);
      border-bottom-color: var(--P);
      font-weight: 800;
      background: var(--sur2);
    }

    .tab-panes {
      min-height: 120px;
    }

    .tab-pane {
      display: none;
      animation: fadein .2s ease forwards;
    }

    .tab-pane.active {
      display: block;
    }

    .tabpane {
      display: none;
    }

    .tabpane.on {
      display: block;
      animation: fadein .2s ease forwards;
    }

    /* ── Tables ── */
    .tw {
      width: 100%;
      max-height: min(72vh, 720px);
      overflow: auto;
      border: 1px solid var(--bdr);
      border-radius: var(--r2);
      background: var(--sur);
    }

    .tw::-webkit-scrollbar {
      height: 4px;
    }

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

    .tw::-webkit-scrollbar-thumb {
      background: var(--bdr2);
      border-radius: 2px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      min-width: 480px;
      border: none;
    }

    thead th {
      padding: 8px 10px;
      background: var(--sur2);
      color: var(--tx2);
      font-weight: 700;
      font-size: 11px;
      text-align: left;
      border-bottom: 1px solid var(--bdr);
      border-right: 1px solid var(--bdr);
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: .4px;
      user-select: none;
      position: sticky;
      top: 0;
      z-index: 2;
      box-shadow: 0 1px 0 var(--bdr);
    }

    thead th:last-child {
      border-right: none;
    }

    tbody td {
      padding: 8px 10px;
      border-bottom: 1px solid var(--bdr);
      border-right: 1px solid var(--bdr);
      color: var(--tx);
      vertical-align: middle;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    tbody td:last-child {
      border-right: none;
    }

    tbody tr:last-child td {
      border-bottom: none;
    }

    tbody tr:hover td {
      background: var(--Pl);
    }

    tbody tr:hover td:first-child {
      border-radius: 0;
    }

    tbody tr:hover td:last-child {
      border-radius: 0;
    }

    tfoot td {
      padding: 8px 10px;
      background: var(--sur2);
      font-weight: 700;
      font-size: 12px;
      border-top: 1px solid var(--bdr);
      border-right: 1px solid var(--bdr);
    }

    tfoot td:last-child {
      border-right: none;
    }

    /* Table wrapper with built-in card */
    .table-card {
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      overflow: hidden;
      box-shadow: var(--shad);
    }

    .table-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid var(--bdr);
    }

    .table-card-title {
      font-size: 14px;
      font-weight: 800;
    }

    /* Empty states */
    .te {
      text-align: center;
      color: var(--tx3);
      padding: 48px 20px;
      font-size: 13px;
      font-weight: 600;
    }

    .te i {
      display: block;
      font-size: 36px;
      margin-bottom: 14px;
      opacity: .5;
    }

    .empty-state {
      text-align: center;
      padding: 60px 24px;
    }

    .empty-state i {
      font-size: 48px;
      color: var(--tx3);
      margin-bottom: 16px;
      display: block;
    }

    .empty-state h4 {
      font-size: 17px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .empty-state p {
      font-size: 13px;
      color: var(--tx2);
      max-width: 320px;
      margin: 0 auto;
    }

    .empty-state .btn {
      margin-top: 20px;
    }

    /* ── Badges ── */
    .bdg {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .4px;
      flex-shrink: 0;
      white-space: nowrap;
    }

    /* Named color classes */
    .bd-green {
      background: var(--Gl);
      color: var(--G);
    }

    .bd-red {
      background: var(--Rl);
      color: var(--R);
    }

    .bd-orange {
      background: var(--Ol);
      color: var(--O);
    }

    .bd-violet {
      background: var(--Vl);
      color: var(--V);
    }

    .bd-blue {
      background: #e0e7ff;
      color: #4338ca;
    }

    .bd-teal {
      background: var(--Tl);
      color: var(--T);
    }

    .bd-info {
      background: var(--Il);
      color: var(--I);
    }

    .bd-gray {
      background: var(--sur2);
      color: var(--tx2);
      border: 1px solid var(--bdr);
    }

    /* Old class compat */
    .bdone {
      background: var(--Gl);
      color: var(--G);
    }

    .bpend {
      background: var(--Ol);
      color: var(--O);
    }

    .bovr {
      background: var(--Rl);
      color: var(--R);
    }

    .bshft {
      background: var(--Vl);
      color: var(--V);
    }

    .bhol {
      background: #e0e7ff;
      color: #4338ca;
    }

    .bwo {
      background: var(--sur2);
      color: var(--tx2);
      border: 1px solid var(--bdr);
    }

    .bfd {
      background: var(--Gl);
      color: var(--G);
    }

    .bhd {
      background: var(--Ol);
      color: var(--O);
    }

    .babs {
      background: var(--Rl);
      color: var(--R);
    }

    .baprv {
      background: var(--Gl);
      color: var(--G);
    }

    .brej {
      background: var(--Rl);
      color: var(--R);
    }

    .bpend-lvr {
      background: var(--Ol);
      color: var(--O);
    }

    .freq-d {
      background: #e0f2fe;
      color: #0369a1;
    }

    .freq-w {
      background: #fdf4ff;
      color: #7e22ce;
    }

    .freq-m {
      background: #fef3c7;
      color: #92400e;
    }

    .prio-high {
      background: var(--Rl);
      color: var(--R);
    }

    .prio-normal {
      background: var(--Pl);
      color: var(--P);
    }

    .prio-low {
      background: var(--sur3);
      color: var(--tx2);
    }

    /* ── Pills / Tags / Chips ── */
    .tag {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      background: var(--bg);
      color: var(--tx2);
      border: 1px solid var(--bdr);
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 11px;
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 700;
      background: var(--Pl);
      color: var(--P);
    }

    /* ── Forms ── */
    .fgrp {
      margin-bottom: 16px;
    }

    .fgrp label {
      display: block;
      font-size: 11px;
      font-weight: 800;
      color: var(--tx2);
      margin-bottom: 7px;
      text-transform: uppercase;
      letter-spacing: .6px;
    }

    .fgrp input,
    .fgrp select,
    .fgrp textarea {
      width: 100%;
      padding: 10px 13px;
      border: 1.5px solid var(--bdr);
      border-radius: 9px;
      font-size: 13px;
      background: var(--sur);
      color: var(--tx);
      transition: all .2s;
      font-family: inherit;
      appearance: none;
      -webkit-appearance: none;
    }

    .fgrp select {
      background-image: ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 11px center;
      padding-right: 32px;
    }

    .fgrp input:focus,
    .fgrp select:focus,
    .fgrp textarea:focus {
      outline: none;
      border-color: var(--P);
      box-shadow: 0 0 0 3.5px var(--Pl);
      background: var(--sur);
    }

    .fgrp textarea {
      resize: vertical;
      min-height: 90px;
      line-height: 1.6;
    }

    .fgrp input[type="color"] {
      padding: 4px 8px;
      height: 38px;
    }

    .fgrp input[type="range"] {
      padding: 0;
    }

    .frow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .frow-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
    }

    .frow-4 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 14px;
    }

    .req {
      color: var(--R);
    }

    .tip {
      font-size: 11px;
      color: var(--tx3);
      font-style: italic;
      margin-top: 4px;
      font-weight: 500;
    }

    .fgrp .char-count {
      font-size: 10px;
      color: var(--tx3);
      text-align: right;
      margin-top: 3px;
      font-weight: 600;
    }

    /* ── Filter Bar ── */
    .fbar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 14px;
      padding: 10px 14px;
      background: var(--sur2);
      border: 1px solid var(--bdr);
      border-radius: 12px;
    }

    .fbar input,
    .fbar select {
      padding: 7px 10px;
      border: 1.5px solid var(--bdr);
      border-radius: 8px;
      font-size: 12px;
      background: var(--bg);
      color: var(--tx);
      outline: none;
      transition: border-color .15s;
      font-family: inherit;
    }

    .fbar input:focus,
    .fbar select:focus {
      border-color: var(--P);
    }

    .fbar select {
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 28px;
    }

    ng: 7px 11px;
    border: 1.5px solid var(--bdr);
    border-radius: 8px;
    font-size: 12px;
    background: var(--bg);
    color: var(--tx);
    font-family: inherit;
    transition: border .15s;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    }

    .fbar select {
      background-image: ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 9px center;
      padding-right: 28px;
    }

    .fbar input:focus,
    .fbar select:focus {
      border-color: var(--P);
    }

    .fbar label {
      font-size: 10px;
      color: var(--tx3);
      font-weight: 800;
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    .fbar-spacer {
      flex: 1;
    }

    .search-inp {
      position: relative;
      display: flex;
      align-items: center;
    }

    .search-inp i {
      position: absolute;
      left: 10px;
      color: var(--tx3);
      font-size: 12px;
      pointer-events: none;
    }

    .search-inp input {
      padding-left: 32px !important;
      width: 100%;
    }

    /* ── Progress bar ── */
    .pbar-wrap {
      background: var(--bdr);
      border-radius: 999px;
      height: 6px;
      overflow: hidden;
    }

    .pbar {
      border-radius: 999px;
      height: 6px;
      background: var(--G);
      transition: width .6s cubic-bezier(.4, 0, .2, 1);
    }

    /* ── Skeleton loaders ── */
    .sk {
      background: linear-gradient(90deg,
          var(--sur2) 25%,
          color-mix(in srgb, var(--bdr) 80%, var(--sur2)) 50%,
          var(--sur2) 75%);
      background-size: 300%;
      animation: skelShimmer 1.8s ease-in-out infinite;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

    /* Shimmer glow overlay on skeletons */
    .sk::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .18) 50%, transparent 60%);
      background-size: 200% 100%;
      animation: skelGlow 1.6s ease-in-out infinite;
    }

    @keyframes skelGlow {
      0% {
        background-position: 200% 0;
      }

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

    body.dark .sk::after {
      background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%);
      background-size: 200% 100%;
    }

    /* Stagger animation for list items appearing */
    @keyframes fadeSlideUp {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .anim-item:nth-child(1) {
      animation-delay: .00s;
    }

    .anim-item:nth-child(2) {
      animation-delay: .06s;
    }

    .anim-item:nth-child(3) {
      animation-delay: .12s;
    }

    .anim-item:nth-child(4) {
      animation-delay: .18s;
    }

    .anim-item:nth-child(5) {
      animation-delay: .24s;
    }

    .anim-item:nth-child(n+6) {
      animation-delay: .28s;
    }

    /* KPI counter count-up glow on first load */
    @keyframes kpiPop {
      0% {
        transform: scale(.82) translateY(8px);
      }

      65% {
        transform: scale(1.04) translateY(-1px);
      }

      100% {
        transform: scale(1) translateY(0);
      }
    }

    .kpi-anim {
      animation: kpiPop .4s cubic-bezier(.34, 1.56, .64, 1) forwards;
    }

    /* ── Content section entrance animation ── */
    @keyframes contentIn {
      from {
        opacity: .1;
        transform: translateY(12px);
      }

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

    .content-section {
      animation: contentIn .35s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    /* Grid item stagger for cards */
    @keyframes cardPop {
      from {
        opacity: .1;
        transform: scale(.95) translateY(10px);
      }

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

    .card-anim {
      animation: cardPop .3s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .card-anim:nth-child(1) {
      animation-delay: .00s;
    }

    .card-anim:nth-child(2) {
      animation-delay: .06s;
    }

    .card-anim:nth-child(3) {
      animation-delay: .12s;
    }

    .card-anim:nth-child(4) {
      animation-delay: .18s;
    }

    .card-anim:nth-child(5) {
      animation-delay: .22s;
    }

    .card-anim:nth-child(n+6) {
      animation-delay: .26s;
    }

    /* ── KPI number count-up highlight ── */
    @keyframes numFlash {
      0% {
        color: var(--kc, var(--P));
        filter: brightness(1.4);
      }

      100% {
        color: inherit;
        filter: brightness(1);
      }
    }

    .num-loaded {
      animation: numFlash .5s ease forwards;
    }

    /* ── Table row entrance ── */
    @keyframes rowIn {
      from {
        opacity: .1;
        transform: translateX(-8px);
      }

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

    tbody tr {
      animation: rowIn .2s ease forwards;
    }

    tbody tr:nth-child(1) {
      animation-delay: .00s;
    }

    tbody tr:nth-child(2) {
      animation-delay: .04s;
    }

    tbody tr:nth-child(3) {
      animation-delay: .07s;
    }

    tbody tr:nth-child(4) {
      animation-delay: .10s;
    }

    tbody tr:nth-child(5) {
      animation-delay: .13s;
    }

    tbody tr:nth-child(6) {
      animation-delay: .16s;
    }

    tbody tr:nth-child(7) {
      animation-delay: .18s;
    }

    tbody tr:nth-child(n+8) {
      animation-delay: .20s;
    }

    /* ── Toast enhanced slide-in ── */
    @keyframes toastIn {
      from {
        opacity: .1;
        transform: translateX(100%) scale(.9);
      }

      to {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }

    @keyframes toastOut {
      from {
        opacity: 1;
        transform: translateX(0) scale(1);
      }

      to {
        opacity: 0;
        transform: translateX(60%) scale(.95);
      }
    }

    /* ── Button ripple on click ── */
    @keyframes ripple {
      from {
        transform: scale(0);
        opacity: .4;
      }

      to {
        transform: scale(3);
        opacity: 0;
      }
    }

    .btn-ripple {
      position: absolute;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      margin-top: -30px;
      margin-left: -30px;
      background: rgba(255, 255, 255, .35);
      animation: ripple .45s linear forwards;
      pointer-events: none;
    }

    /* ── Module header slide-in ── */
    @keyframes modHeadIn {
      from {
        opacity: .1;
        transform: translateY(-10px);
      }

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

    .mod-head {
      animation: modHeadIn .28s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    /* ── Feed item stagger ── */
    .feed-item {
      animation: fadeSlideUp .28s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    .feed-item:nth-child(1) {
      animation-delay: .00s;
    }

    .feed-item:nth-child(2) {
      animation-delay: .05s;
    }

    .feed-item:nth-child(3) {
      animation-delay: .10s;
    }

    .feed-item:nth-child(4) {
      animation-delay: .15s;
    }

    .feed-item:nth-child(n+5) {
      animation-delay: .18s;
    }

    /* ── Announcement card entrance ── */
    .ann-card {
      animation: fadeSlideUp .3s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    .ann-card:nth-child(1) {
      animation-delay: .00s;
    }

    .ann-card:nth-child(2) {
      animation-delay: .07s;
    }

    .ann-card:nth-child(3) {
      animation-delay: .13s;
    }

    .ann-card:nth-child(n+4) {
      animation-delay: .17s;
    }

    /* ── KPI bar animated fill — handled via JS _animateBars ── */

    /* ── Weekly grid day entrance ── */
    .wkday {
      animation: cardPop .28s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .wkday:nth-child(1) {
      animation-delay: .00s;
    }

    .wkday:nth-child(2) {
      animation-delay: .05s;
    }

    .wkday:nth-child(3) {
      animation-delay: .09s;
    }

    .wkday:nth-child(4) {
      animation-delay: .13s;
    }

    .wkday:nth-child(5) {
      animation-delay: .17s;
    }

    .wkday:nth-child(6) {
      animation-delay: .20s;
    }

    .wkday:nth-child(7) {
      animation-delay: .23s;
    }

    /* ── Employee card entrance ── */
    .emp-card {
      animation: cardPop .3s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .emp-card:nth-child(1) {
      animation-delay: .00s;
    }

    .emp-card:nth-child(2) {
      animation-delay: .05s;
    }

    .emp-card:nth-child(3) {
      animation-delay: .10s;
    }

    .emp-card:nth-child(4) {
      animation-delay: .14s;
    }

    .emp-card:nth-child(5) {
      animation-delay: .18s;
    }

    .emp-card:nth-child(n+6) {
      animation-delay: .21s;
    }

    /* ── Delegation card entrance ── */
    .dcard {
      animation: fadeSlideUp .28s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    .dcard:nth-child(1) {
      animation-delay: .00s;
    }

    .dcard:nth-child(2) {
      animation-delay: .07s;
    }

    .dcard:nth-child(3) {
      animation-delay: .13s;
    }

    .dcard:nth-child(n+4) {
      animation-delay: .17s;
    }

    /* ── Task card entrance ── */
    .tcard {
      animation: fadeSlideUp .26s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    .tcard:nth-child(1) {
      animation-delay: .00s;
    }

    .tcard:nth-child(2) {
      animation-delay: .05s;
    }

    .tcard:nth-child(3) {
      animation-delay: .10s;
    }

    .tcard:nth-child(4) {
      animation-delay: .14s;
    }

    .tcard:nth-child(n+5) {
      animation-delay: .18s;
    }

    /* ── Attendance KPI entrance ── */
    .att-kpi {
      animation: cardPop .3s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .att-kpi:nth-child(1) {
      animation-delay: .00s;
    }

    .att-kpi:nth-child(2) {
      animation-delay: .06s;
    }

    .att-kpi:nth-child(3) {
      animation-delay: .12s;
    }

    .att-kpi:nth-child(4) {
      animation-delay: .17s;
    }

    .att-kpi:nth-child(5) {
      animation-delay: .22s;
    }

    /* ── Loading spinner overlay for content refresh ── */
    .content-loading-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 2.5px;
      z-index: 9999;
      background: linear-gradient(90deg, var(--P), var(--Pd), var(--T), var(--G));
      background-size: 300% 100%;
      animation: loadBar 1.2s ease-in-out infinite;
      opacity: 0;
      transition: opacity .15s;
    }

    .content-loading-bar.on {
      opacity: 1;
    }

    @keyframes loadBar {
      0% {
        background-position: 200% 0;
      }

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

    .sk-h1 {
      height: 12px;
    }

    .sk-h2 {
      height: 20px;
    }

    .sk-h3 {
      height: 32px;
    }

    .sk-h4 {
      height: 48px;
    }

    .sk-h5 {
      height: 64px;
    }

    .sk-h6 {
      height: 80px;
    }

    .sk-h7 {
      height: 96px;
    }

    .sk-h8 {
      height: 128px;
    }

    .sk-full {
      height: 100%;
    }

    .sk-row {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* ── Section headings ── */
    .sec-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .sec-title {
      font-size: 14px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      overflow-wrap: break-word;
    }

    .sec-title i {
      font-size: 15px;
    }

    /* ── Info row ── */
    .info-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--tx2);
      font-weight: 600;
    }

    .info-row i {
      font-size: 11px;
      width: 14px;
      text-align: center;
    }

    /* ══════════════════════════════════════════════════════════════════════
   TASK LIST STYLES
══════════════════════════════════════════════════════════════════════ */
    .tlist {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .tcard {
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: 12px;
      padding: 13px 16px;
      display: flex;
      align-items: center;
      gap: 13px;
      border-left: 3.5px solid var(--P);
      transition: all .2s;
    }

    .tcard:hover {
      box-shadow: var(--shad2);
      transform: translateX(2px);
    }

    .tcard.done {
      border-left-color: var(--G);
      opacity: .75;
    }

    .tcard.holiday {
      border-left-color: #818cf8;
      background: #fafafe;
    }

    .tcard.pending {
      border-left-color: var(--O);
    }

    .tcard.overdue {
      border-left-color: var(--R);
      background: rgba(224, 49, 49, .02);
    }

    body.dark .tcard.holiday {
      background: rgba(129, 140, 248, .05);
    }

    .tc-ico {
      width: 38px;
      height: 38px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }

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

    .tc-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--tx);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 3px;
    }

    .tc-meta {
      font-size: 11px;
      color: var(--tx3);
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .tc-act {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════════════════════════════════════
   DELEGATION CARD STYLES
══════════════════════════════════════════════════════════════════════ */
    .dcards {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dcard {
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 16px 18px;
      border-left: 3.5px solid var(--P);
      transition: all .2s;
    }

    .dcard:hover {
      box-shadow: var(--shad2);
    }

    .dcard.overdue {
      border-left-color: var(--R);
    }

    .dcard.done,
    .dcard.completed {
      border-left-color: var(--G);
      opacity: .82;
    }

    .dcard.shifted {
      border-left-color: var(--V);
    }

    .dcard.cancelled {
      border-left-color: var(--tx3);
      opacity: .7;
    }

    .dc-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .dc-desc {
      font-size: 14px;
      font-weight: 700;
      color: var(--tx);
      flex: 1;
      line-height: 1.5;
    }

    .dc-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 12px;
      color: var(--tx2);
      margin-bottom: 11px;
    }

    .dc-meta span {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .dc-act {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    /* ══════════════════════════════════════════════════════════════════════
   ATTENDANCE SUMMARY
══════════════════════════════════════════════════════════════════════ */
    .att-sum {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }

    .att-kpi {
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      box-shadow: var(--shad);
      transition: all .2s;
    }

    .att-kpi:hover {
      transform: translateY(-2px);
      box-shadow: var(--shad2);
    }

    .att-kpi .val {
      font-size: 26px;
      font-weight: 900;
      letter-spacing: -1px;
      margin-bottom: 5px;
    }

    .att-kpi .lbl {
      font-size: 11px;
      color: var(--tx2);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    /* ══════════════════════════════════════════════════════════════════════
   WEEKLY CALENDAR GRID
══════════════════════════════════════════════════════════════════════ */
    .wkgrid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
    }

    .wkday {
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: 11px;
      padding: 10px;
      min-height: 90px;
      transition: all .15s;
    }

    .wkday:hover {
      box-shadow: var(--shad);
    }

    .wkday.today {
      border-color: var(--P);
      box-shadow: 0 0 0 2px var(--Pl);
    }

    .wkday.weekend {
      background: var(--sur2);
    }

    .wkday-hd {
      font-size: 11px;
      font-weight: 800;
      color: var(--tx2);
      text-align: center;
      margin-bottom: 6px;
      border-bottom: 1px solid var(--bdr);
      padding-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    .wkday.today .wkday-hd {
      color: var(--P);
    }

    .wkday-tasks {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .wkt {
      font-size: 9.5px;
      padding: 3px 6px;
      border-radius: 5px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: default;
    }

    .wkt-d {
      background: var(--Gl);
      color: var(--G);
    }

    .wkt-p {
      background: var(--Ol);
      color: var(--O);
    }

    .wkt-h {
      background: #e0e7ff;
      color: #4338ca;
    }

    .wkt-pl {
      background: var(--Il);
      color: var(--I);
      font-style: italic;
      opacity: 0.85;
    }

    .wkt-more {
      background: var(--bg);
      color: var(--tx3);
      border: 1px dashed var(--bdr);
    }

    /* ══════════════════════════════════════════════════════════════════════
   CHART CONTAINERS
══════════════════════════════════════════════════════════════════════ */
    .chart-wrap {
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 20px;
      box-shadow: var(--shad);
    }

    .chart-head {
      margin-bottom: 16px;
    }

    .chart-title {
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 3px;
    }

    .chart-sub {
      font-size: 12px;
      color: var(--tx2);
      font-weight: 500;
    }

    .chart-inner {
      position: relative;
      height: 220px;
    }

    .chart-inner-sm {
      position: relative;
      height: 160px;
    }

    .chart-inner-md {
      position: relative;
      height: 260px;
    }

    .chart-inner-lg {
      position: relative;
      height: 300px;
    }

    .chart-inner-xl {
      position: relative;
      height: 360px;
    }

    .chart-legend {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    .chart-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--tx2);
    }

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

    /* ══════════════════════════════════════════════════════════════════════
   EMPLOYEE DIRECTORY
══════════════════════════════════════════════════════════════════════ */
    .dir-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 14px;
    }

    .emp-card {
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 22px 18px;
      text-align: center;
      cursor: pointer;
      transition: all .22s;
    }

    .emp-card:hover {
      box-shadow: var(--shad2);
      transform: translateY(-4px);
      border-color: var(--P);
    }

    .emp-card .ec-ava {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin: 0 auto 14px;
      background: linear-gradient(135deg, var(--P), var(--Pd));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 900;
      color: #fff;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(0, 95, 115, .3);
    }

    .emp-card .ec-ava img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 50%;
    }

    .emp-card .ec-name {
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .emp-card .ec-dept {
      font-size: 11px;
      color: var(--tx2);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 6px;
    }

    .emp-card .ec-role {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      background: var(--Pl);
      color: var(--P);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    .emp-card .ec-email {
      font-size: 10.5px;
      color: var(--tx3);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 8px;
    }

    .emp-card .ec-ovr {
      font-size: 11px;
      color: var(--R);
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    /* Employee Detail Header */
    .emp-detail-hd {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 28px;
      margin-bottom: 18px;
      box-shadow: var(--shad);
    }

    .ed-ava-lg {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--P), var(--Pd));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 900;
      color: #fff;
      flex-shrink: 0;
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(0, 95, 115, .35);
    }

    .ed-ava-lg img {
      width: 76px;
      height: 76px;
      object-fit: cover;
      border-radius: 50%;
    }

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

    .ed-name {
      font-size: 24px;
      font-weight: 900;
      letter-spacing: -.5px;
      margin-bottom: 6px;
    }

    .ed-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 10px;
    }

    .ed-meta span {
      font-size: 12px;
      color: var(--tx2);
      display: flex;
      align-items: center;
      gap: 5px;
      font-weight: 700;
    }

    .ed-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════════════════════════════════════
   ANNOUNCEMENTS
══════════════════════════════════════════════════════════════════════ */
    .ann-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .ann-card {
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: var(--r);
      padding: 18px 22px;
      border-left: 4px solid var(--P);
      transition: all .2s;
    }

    .ann-card:hover {
      box-shadow: var(--shad2);
      transform: translateX(2px);
    }

    .ann-card.high {
      border-left-color: var(--R);
      background: rgba(224, 49, 49, .01);
    }

    .ann-card.low {
      border-left-color: var(--tx3);
    }

    .ann-card.normal {
      border-left-color: var(--P);
    }

    .ann-text {
      font-size: 14px;
      font-weight: 500;
      color: var(--tx);
      line-height: 1.65;
      margin-bottom: 12px;
    }

    .ann-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }

    .ann-info {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      font-size: 11px;
      color: var(--tx3);
      font-weight: 700;
    }

    .ann-info span {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* ══════════════════════════════════════════════════════════════════════
   PROFILE MODULE
══════════════════════════════════════════════════════════════════════ */
    .prof-hero {
      background: linear-gradient(135deg, var(--P) 0%, var(--Pd) 100%);
      border-radius: var(--r);
      padding: 32px 36px;
      margin-bottom: 20px;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .prof-hero::before {
      content: '';
      position: absolute;
      right: -60px;
      top: -60px;
      width: 220px;
      height: 220px;
      background: rgba(255, 255, 255, .07);
      border-radius: 50%;
    }

    .prof-hero::after {
      content: '';
      position: absolute;
      right: 80px;
      bottom: -80px;
      width: 160px;
      height: 160px;
      background: rgba(255, 255, 255, .04);
      border-radius: 50%;
    }

    .prof-inner {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .prof-ava {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .2);
      border: 3px solid rgba(255, 255, 255, .5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 900;
      flex-shrink: 0;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    }

    .prof-ava img {
      width: 76px;
      height: 76px;
      object-fit: cover;
      border-radius: 50%;
    }

    .prof-name {
      font-size: 26px;
      font-weight: 900;
      letter-spacing: -.5px;
      margin-bottom: 5px;
    }

    .prof-meta {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      font-size: 13px;
      opacity: .88;
      font-weight: 600;
    }

    .prof-meta span {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .prof-stats {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }

    .ps-kpi {
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      box-shadow: var(--shad);
      transition: all .2s;
    }

    .ps-kpi:hover {
      transform: translateY(-2px);
      box-shadow: var(--shad2);
    }

    .ps-val {
      font-size: 26px;
      font-weight: 900;
      margin-bottom: 4px;
      letter-spacing: -1px;
    }

    .ps-lbl {
      font-size: 11px;
      color: var(--tx2);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    .ps-period {
      font-size: 9px;
      color: var(--tx3);
      margin-top: 2px;
      font-weight: 600;
    }

    /* ══════════════════════════════════════════════════════════════════════
   PERFORMANCE REPORT
══════════════════════════════════════════════════════════════════════ */
    .rank-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .rank-item {
      display: flex;
      align-items: center;
      gap: 13px;
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: 11px;
      padding: 12px 16px;
      transition: all .2s;
    }

    .rank-item:hover {
      box-shadow: var(--shad2);
      transform: translateX(4px);
    }

    .rank-num {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 900;
      color: var(--tx2);
      flex-shrink: 0;
      border: 1.5px solid var(--bdr);
    }

    .rank-num.gold {
      background: #fef3c7;
      color: #92400e;
      border-color: #fcd34d;
    }

    .rank-num.silver {
      background: #f1f5f9;
      color: #334155;
      border-color: #94a3b8;
    }

    .rank-num.bronze {
      background: #fdf4ff;
      color: #7c3aed;
      border-color: #c4b5fd;
    }

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

    .rank-name {
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 2px;
    }

    .rank-dept {
      font-size: 11px;
      color: var(--tx2);
      font-weight: 600;
    }

    .rank-val {
      font-size: 18px;
      font-weight: 900;
      color: var(--P);
    }

    /* ══════════════════════════════════════════════════════════════════════
   HOLIDAY CALENDAR
══════════════════════════════════════════════════════════════════════ */
    .cal-nav {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .cal-month-lbl {
      font-size: 16px;
      font-weight: 800;
      min-width: 160px;
      text-align: center;
    }

    .cal-hdr {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      margin-bottom: 6px;
    }

    .cal-hdr-day {
      text-align: center;
      font-size: 10.5px;
      font-weight: 800;
      color: var(--tx2);
      padding: 6px 0;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }

    .cal-cell {
      min-height: 58px;
      border-radius: 9px;
      padding: 7px 8px;
      background: var(--sur2);
      border: 1px solid var(--bdr);
      transition: all .15s;
      position: relative;
    }

    .cal-cell.today {
      background: var(--Pl);
      border-color: var(--P);
    }

    .cal-cell.holiday {
      background: #eef0ff;
      border-color: #a5b4fc;
      cursor: pointer;
    }

    body.dark .cal-cell.holiday {
      background: rgba(129, 140, 248, .12);
      border-color: rgba(129, 140, 248, .35);
    }

    .cal-cell.holiday:hover {
      background: #e0e7ff;
    }

    .cal-cell.other-month {
      opacity: .3;
    }

    .cal-cell.weekend {
      background: var(--sur3);
    }

    .cal-day-num {
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .cal-cell.today .cal-day-num {
      color: var(--P);
      background: var(--P);
      color: #fff;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
    }

    .cal-hol-lbl {
      font-size: 9px;
      font-weight: 800;
      color: #4338ca;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      line-height: 1.3;
    }

    /* ══════════════════════════════════════════════════════════════════════
   ACTIVITY FEED
══════════════════════════════════════════════════════════════════════ */
    .feed-list {
      display: flex;
      flex-direction: column;
    }

    .feed-item {
      display: flex;
      gap: 14px;
      padding: 13px 0;
      border-bottom: 1px solid var(--bdr);
      animation: fadein .2s ease forwards;
    }

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

    .feed-ico {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .feed-body {
      flex: 1;
      min-width: 0;
    }

    .feed-text {
      font-size: 13px;
      font-weight: 500;
      color: var(--tx);
      line-height: 1.55;
    }

    .feed-text strong {
      font-weight: 800;
    }

    .feed-time {
      font-size: 11px;
      color: var(--tx3);
      margin-top: 4px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* ══════════════════════════════════════════════════════════════════════
   NOTIFICATION PANEL
══════════════════════════════════════════════════════════════════════ */
    .ntf-panel {
      position: fixed;
      top: calc(var(--tbh) + 8px);
      right: 14px;
      width: 350px;
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: 16px;
      box-shadow: var(--shad3);
      z-index: var(--z-ntf);
      display: none;
      overflow: hidden;
    }

    .ntf-panel.on {
      display: block;
      animation: slideup .2s ease forwards;
    }

    .ntf-hd {
      padding: 14px 18px 12px;
      border-bottom: 1px solid var(--bdr);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ntf-hd-title {
      font-size: 15px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ntf-count {
      background: var(--R);
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 999px;
    }

    .ntf-list {
      max-height: 380px;
      overflow-y: auto;
    }

    .ntf-list::-webkit-scrollbar {
      width: 4px;
    }

    .ntf-list::-webkit-scrollbar-thumb {
      background: var(--bdr);
      border-radius: 2px;
    }

    .ntf-item {
      display: flex;
      gap: 11px;
      padding: 12px 18px;
      border-bottom: 1px solid var(--bdr);
      cursor: pointer;
      transition: background .12s;
      align-items: flex-start;
    }

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

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

    .ntf-item.unread {
      background: var(--Pl);
    }

    .ntf-item.unread:hover {
      background: var(--Pm);
    }

    .ni-ico {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }

    .ni-body {
      flex: 1;
      min-width: 0;
    }

    .ni-text {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--tx);
      line-height: 1.45;
    }

    .ni-time {
      font-size: 10px;
      color: var(--tx3);
      margin-top: 3px;
      font-weight: 600;
    }

    .ntf-empty {
      text-align: center;
      padding: 32px;
      color: var(--tx3);
      font-size: 13px;
      font-weight: 600;
    }

    .ntf-ft {
      padding: 10px 18px;
      border-top: 1px solid var(--bdr);
      text-align: center;
    }

    /* ══════════════════════════════════════════════════════════════════════
   GLOBAL SEARCH DIALOG
══════════════════════════════════════════════════════════════════════ */
    .gs-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 950;
      align-items: flex-start;
      justify-content: center;
      padding-top: 80px;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .gs-overlay.on {
      display: flex;
      animation: fadein-fast .15s ease;
    }

    .gs-dialog {
      background: var(--sur);
      border-radius: 18px;
      width: 90%;
      max-width: 580px;
      box-shadow: var(--shad3);
      overflow: hidden;
      animation: pop .2s ease forwards;
    }

    .gs-inp-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--bdr);
    }

    .gs-inp-wrap i {
      font-size: 16px;
      color: var(--tx3);
      flex-shrink: 0;
    }

    .gs-inp {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 15px;
      color: var(--tx);
      outline: none;
      font-family: inherit;
      font-weight: 500;
    }

    .gs-inp::placeholder {
      color: var(--tx3);
    }

    .gs-esc {
      background: var(--bg);
      border: 1px solid var(--bdr);
      border-radius: 6px;
      padding: 3px 8px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
      color: var(--tx2);
      flex-shrink: 0;
      font-family: inherit;
    }

    .gs-results {
      max-height: 420px;
      overflow-y: auto;
    }

    .gs-results::-webkit-scrollbar {
      width: 4px;
    }

    .gs-results::-webkit-scrollbar-thumb {
      background: var(--bdr);
      border-radius: 2px;
    }

    .gs-empty {
      text-align: center;
      padding: 32px;
      color: var(--tx3);
      font-size: 13px;
      font-weight: 600;
    }

    .gs-empty i {
      font-size: 24px;
      display: block;
      margin-bottom: 10px;
    }

    .gs-group {
      padding: 8px 16px 4px;
      font-size: 10px;
      font-weight: 800;
      color: var(--tx3);
      text-transform: uppercase;
      letter-spacing: .7px;
    }

    .gs-item {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px 18px;
      cursor: pointer;
      transition: background .1s;
      border-left: 3px solid transparent;
    }

    .gs-item:hover {
      background: var(--bg);
      border-left-color: var(--P);
    }

    .gs-item.focused {
      background: var(--Pl);
      border-left-color: var(--P);
    }

    .gs-ico {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }

    .gs-body {
      flex: 1;
      min-width: 0;
    }

    .gs-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--tx);
    }

    .gs-meta {
      font-size: 11px;
      color: var(--tx3);
      margin-top: 1px;
    }

    .gs-arrow {
      font-size: 11px;
      color: var(--tx3);
      flex-shrink: 0;
    }

    .gs-kbd {
      font-size: 10px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 5px;
      background: var(--bg);
      border: 1px solid var(--bdr);
      color: var(--tx2);
      flex-shrink: 0;
    }

    .gs-ft {
      padding: 10px 18px;
      border-top: 1px solid var(--bdr);
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .gs-hint {
      font-size: 11px;
      color: var(--tx3);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* ══════════════════════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════════════════════ */
    .modal-ov {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .48);
      z-index: var(--z-modal);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .modal-ov.on {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: fadein-fast .15s ease;
    }

    /* Modal hidden by default */
    .modal-box {
      display: none;
    }

    /* Desktop center modal when open */
    .modal-box.open {
      background: var(--sur);
      border-radius: 20px;
      padding: 0;
      width: 92%;
      max-width: 580px;
      max-height: 88svh;
      box-shadow: 0 8px 40px rgba(0, 0, 0, .25);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: safePop .22s cubic-bezier(.34, 1.2, .64, 1);
      position: relative;
      z-index: calc(var(--z-modal) + 1);
      flex-shrink: 0;
    }

    .modal-box.wide {
      max-width: 700px;
    }

    .modal-box.xl {
      max-width: 900px;
    }

    .modal-title {
      font-size: 18px;
      font-weight: 900;
      padding: 24px 28px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: -.3px;
      flex-shrink: 0;
      border-bottom: 1px solid var(--bdr);
    }

    .modal-body {
      color: var(--tx);
      padding: 20px 24px;
      overflow-y: auto;
      overflow-x: hidden;
      flex: 1;
      min-height: 0;
    }

    .modal-foot {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 16px 28px;
      border-top: 1px solid var(--bdr);
      flex-shrink: 0;
      background: var(--sur);
    }

    /* Sign-out confirm */
    .so-ov {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 810;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(5px);
    }

    .so-ov.on {
      display: flex;
      animation: fadein-fast .2s ease;
    }

    .so-box {
      background: var(--sur);
      border-radius: 20px;
      padding: 40px 36px;
      text-align: center;
      max-width: 360px;
      width: 94%;
      animation: pop .25s ease forwards;
    }

    .so-box h3 {
      font-size: 22px;
      font-weight: 900;
      margin-bottom: 8px;
      letter-spacing: -.4px;
    }

    .so-box p {
      font-size: 13.5px;
      color: var(--tx2);
      margin-bottom: 26px;
      line-height: 1.6;
    }

    .so-btns {
      display: flex;
      gap: 12px;
      justify-content: center;
    }

    /* ══════════════════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════════════════ */
    #toast {
      position: fixed;
      bottom: -80px;
      left: 50%;
      transform: translateX(-50%);
      background: #1e293b;
      color: #f1f5f9;
      padding: 12px 24px 12px 18px;
      border-radius: 40px;
      font-size: 13.5px;
      font-weight: 700;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
      transition: bottom .35s cubic-bezier(.68, -.55, .265, 1.55);
      z-index: var(--z-toast);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 9px;
      max-width: 90vw;
      border: 1px solid rgba(255, 255, 255, .07);
    }

    #toast.on {
      bottom: 28px;
    }

    #toast.ok {
      border-left: 3px solid var(--G);
    }

    #toast.err {
      border-left: 3px solid var(--R);
    }

    #toast.warn {
      border-left: 3px solid var(--O);
    }

    /* ══════════════════════════════════════════════════════════════════════
   ANALYTICS BARS
══════════════════════════════════════════════════════════════════════ */
    .dept-bar {
      margin-bottom: 14px;
    }

    .dept-bar-hd {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }

    .dept-bar-name {
      font-size: 13px;
      font-weight: 700;
    }

    .dept-bar-pct {
      font-size: 13px;
      font-weight: 900;
      color: var(--P);
    }

    /* ══════════════════════════════════════════════════════════════════════
   MISC UTILITY CLASSES
══════════════════════════════════════════════════════════════════════ */
    .divider {
      border: none;
      border-top: 1px solid var(--bdr);
      margin: 18px 0;
    }

    .no-wrap {
      white-space: nowrap;
    }

    .mono {
      font-family: 'Courier New', monospace;
    }

    .bold {
      font-weight: 800;
    }

    .light {
      color: var(--tx2);
    }

    .muted {
      color: var(--tx3);
    }

    .danger {
      color: var(--R);
    }

    .success {
      color: var(--G);
    }

    .warning {
      color: var(--O);
    }

    .primary {
      color: var(--P);
    }

    .txt-sm {
      font-size: 12px;
    }

    .txt-xs {
      font-size: 11px;
    }

    .txt-lg {
      font-size: 16px;
    }

    .fw-7 {
      font-weight: 700;
    }

    .fw-8 {
      font-weight: 800;
    }

    .fw-9 {
      font-weight: 900;
    }

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

    .mb-8 {
      margin-bottom: 8px;
    }

    .mb-12 {
      margin-bottom: 12px;
    }

    .mb-16 {
      margin-bottom: 16px;
    }

    .mb-20 {
      margin-bottom: 20px;
    }

    .mt-8 {
      margin-top: 8px;
    }

    .mt-12 {
      margin-top: 12px;
    }

    .mt-16 {
      margin-top: 16px;
    }

    .flex {
      display: flex;
    }

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

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

    .justify-between {
      justify-content: space-between;
    }

    .gap-8 {
      gap: 8px;
    }

    .gap-12 {
      gap: 12px;
    }

    .gap-16 {
      gap: 16px;
    }

    .gap-20 {
      gap: 20px;
    }

    .flex-1 {
      flex: 1;
    }

    .min-w-0 {
      min-width: 0;
    }

    .relative {
      position: relative;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }

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

    /* Export bar */
    .export-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--Il);
      border: 1px solid rgba(14, 165, 233, .2);
      border-radius: 9px;
      padding: 8px 14px;
      margin-bottom: 14px;
      font-size: 12px;
      font-weight: 700;
      color: var(--I);
    }

    .export-bar i {
      font-size: 13px;
    }

    .export-bar span {
      flex: 1;
    }

    /* Mobile overlay */
    .mob-ov, .sb-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(13, 27, 42, .45);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: calc(var(--z-sb) - 1);
      opacity: 0;
      transition: opacity .25s ease;
    }

    .mob-ov.on, .sb-overlay.on {
      display: block;
      opacity: 1;
      animation: fadein-fast .25s ease forwards;
    }

    /* Quick search bar in topbar */
    .tb-search {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg);
      border: 1.5px solid var(--bdr);
      border-radius: 9px;
      padding: 6px 12px;
      cursor: pointer;
      min-width: 190px;
      max-width: 260px;
      transition: border .15s;
    }

    .tb-search:hover {
      border-color: var(--P);
    }

    .tb-search i {
      font-size: 12px;
      color: var(--tx3);
    }

    .tb-search span {
      font-size: 12px;
      color: var(--tx3);
      font-weight: 500;
      flex: 1;
    }

    .tb-search kbd {
      font-size: 10px;
      font-weight: 800;
      color: var(--tx3);
      background: var(--sur);
      border: 1px solid var(--bdr);
      border-radius: 4px;
      padding: 1px 5px;
    }

    /* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════ */
    @media (max-width: 1200px) {
      .krow {
        grid-template-columns: repeat(2, 1fr);
      }

      .krow-5,
      .krow-6 {
        grid-template-columns: repeat(3, 1fr);
      }

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

    @media (max-width: 960px) {
      .att-sum {
        grid-template-columns: repeat(3, 1fr);
      }

      .wkgrid {
        grid-template-columns: repeat(4, 1fr);
      }

      .frow,
      .frow-3 {
        grid-template-columns: 1fr 1fr;
      }

      .dir-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      }

      .emp-detail-hd {
        flex-direction: column;
        gap: 16px;
      }

      .grid-2,
      .grid-3 {
        grid-template-columns: 1fr;
      }

      .ntf-panel {
        width: 320px;
      }
    }

    @media (max-width: 640px) {

      /* ══════════════════════════════════════════════════════════════
         MOBILE SHELL & LAYOUT
      ══════════════════════════════════════════════════════════════ */
      :root {
        --sbw: 264px;
      }

      .sb {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100svh;
        z-index: var(--z-sb);
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.4, 0, .2, 1);
        box-shadow: none;
      }

      .sb.mob-open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(0, 0, 0, .18);
      }

      .ham {
        display: flex !important;
      }

      /* Shell: fixed topbar + scrolling content + fixed bottom nav */
      .scr#sApp {
        position: fixed;
        inset: 0;
        height: 100svh;
        overflow: hidden;
        display: flex;
        flex-direction: row;
      }

      .main {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
        height: 100svh;
        overflow: hidden;
      }

      .topbar {
        flex-shrink: 0;
        height: 56px;
        padding: 0 14px;
        padding-top: env(safe-area-inset-top, 0px);
        z-index: 50;
      }

      #content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 14px 12px calc(72px + env(safe-area-inset-bottom, 0px));
        scrollbar-width: none;
      }

      #content::-webkit-scrollbar {
        display: none;
      }

      .mob-nav {
        display: block;
      }

      /* Topbar */
      .tb-search,
      .tb-divider,
      .sb-toggle {
        display: none !important;
      }

      .tb-breadcrumb {
        display: none;
      }

      .tb-title {
        font-size: 16px;
        font-weight: 800;
      }

      .tb-right {
        gap: 2px;
      }

      .ico-btn {
        width: 40px;
        height: 40px;
        font-size: 15px;
        border-radius: 12px;
      }

      /* ══════════════════════════════════════════════════════════════
         TOUCH TARGETS & TYPOGRAPHY
      ══════════════════════════════════════════════════════════════ */
      .btn {
        min-height: 48px;
        padding: 12px 18px;
        font-size: 14px;
        border-radius: 14px;
      }

      .btn-sm {
        min-height: 40px;
        padding: 8px 14px;
        font-size: 13px;
      }

      .btn-xs {
        min-height: 36px;
        font-size: 12px;
      }

      .nv {
        min-height: 52px;
        padding: 13px 18px;
        font-size: 14px;
      }

      input,
      select,
      textarea {
        font-size: 16px !important;
      }

      select,
      input[type="text"],
      input[type="month"],
      input[type="date"],
      input[type="time"],
      input[type="email"],
      input[type="password"] {
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
      }

      /* Active feedback: opacity only (transform shifts tap area on mobile!) */
      .btn:active {
        opacity: .75 !important;
      }

      .card:active {
        opacity: .92 !important;
      }

      .mob-nav-item:active i {
        transform: scale(.85) !important;
      }

      .card {
        border-radius: 18px !important;
        padding: 14px !important;
      }

      /* ══════════════════════════════════════════════════════════════
         BOTTOM SHEET MODALS — Premium feel
      ══════════════════════════════════════════════════════════════ */
      .modal-ov {
        align-items: flex-end !important;
        padding: 0 !important;
      }

      /* Modal hidden by default — JS controls visibility via .open class */
      /* Drag handle pill — ONLY when modal is actually open */
      /* All text inside modal wraps cleanly */
      /* Form labels in modals: stack label above input */
      /* All inputs/selects in modal: full width */
      /* Inline flex rows inside modal: stack vertically */
      /* Modal footer buttons: full-width stacked */

      /* ══════════════════════════════════════════════════════════════
         PULL-TO-REFRESH
      ══════════════════════════════════════════════════════════════ */
      #fkPtr {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        height: 3px;
        background: linear-gradient(90deg, var(--P), var(--T), var(--G));
        animation: ptrSlide 1.4s linear infinite;
      }

      @keyframes ptrSlide {
        from {
          transform: translateX(-100%);
        }

        to {
          transform: translateX(100%);
        }
      }

      /* ══════════════════════════════════════════════════════════════
         MOD HEAD & TABS
      ══════════════════════════════════════════════════════════════ */
      .mod-head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
      }

      .mod-head-right {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
      }

      .mod-title {
        font-size: 17px;
      }

      .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
      }

      .tabs::-webkit-scrollbar {
        display: none;
      }

      .tab {
        font-size: 11.5px;
        padding: 9px 10px;
        white-space: nowrap;
        flex-shrink: 0;
      }

      /* ══════════════════════════════════════════════════════════════
         KPI STRIPS
      ══════════════════════════════════════════════════════════════ */
      .krow {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
      }

      .krow-3 {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .krow-5,
      .krow-6 {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .kpi {
        padding: 14px 12px;
        border-radius: 12px;
      }

      .kpi-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
        border-radius: 10px;
      }

      .kpi-val {
        font-size: 22px;
      }

      .kpi-lbl {
        font-size: 10px;
      }

      /* ══════════════════════════════════════════════════════════════
         FILTER BARS
      ══════════════════════════════════════════════════════════════ */
      .ana-sel {
        font-size: 14px !important;
        min-height: 44px;
        border-radius: 12px;
      }

      /* Mark team filter bars */
      #tamFilters,
      #cmtFilters {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px !important;
      }

      #tamFilters input[type="date"],
      #cmtFilters input[type="date"],
      #tamFilters button:last-child,
      #cmtFilters button:last-child {
        grid-column: 1 / -1;
      }

      /* ══════════════════════════════════════════════════════════════
         TABLES
      ══════════════════════════════════════════════════════════════ */
      .tw {
        border-radius: var(--r2);
      }

      .tw table {
        min-width: 420px;
      }

      .tw thead th {
        font-size: 9.5px;
        padding: 8px 10px;
      }

      .tw tbody td {
        font-size: 12px;
        padding: 8px 10px;
      }

      .table-card {
        border-radius: var(--r);
        overflow: hidden;
        border: 1px solid var(--bdr);
      }

      /* ══════════════════════════════════════════════════════════════
         EM DASHBOARD
      ══════════════════════════════════════════════════════════════ */
      .em-heat-col {
        display: none !important;
      }

      #emTableWrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .em-table th,
      .em-table td {
        font-size: 11px;
        padding: 7px 8px;
        white-space: nowrap;
      }

      /* ══════════════════════════════════════════════════════════════
         CARDS & DELEGATION
      ══════════════════════════════════════════════════════════════ */
      .dcard {
        border-radius: 12px !important;
      }

      .dc-act {
        flex-wrap: wrap !important;
      }

      .dc-act .btn-sm {
        flex: 1;
        min-width: 120px;
        justify-content: center;
        text-align: center;
      }

      /* ══════════════════════════════════════════════════════════════
         ATTENDANCE PUNCH CARD
      ══════════════════════════════════════════════════════════════ */
      .att-punch-card {
        border-radius: 20px !important;
        padding: 18px !important;
      }

      .btn-checkin {
        font-size: 15px !important;
        min-height: 52px !important;
        border-radius: 14px !important;
      }

      /* ══════════════════════════════════════════════════════════════
         ANALYTICS
      ══════════════════════════════════════════════════════════════ */
      .att-sum {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .wkgrid {
        grid-template-columns: repeat(3, 1fr) !important;
      }

      .ana-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .da-kpi-strip {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .ana-charts-grid {
        grid-template-columns: 1fr !important;
      }

      .da-grid3 {
        grid-template-columns: 1fr !important;
      }

      .ana-chart-wide {
        grid-column: span 1 !important;
      }

      /* ══════════════════════════════════════════════════════════════
         EMPLOYEE DIRECTORY & PROFILE
      ══════════════════════════════════════════════════════════════ */
      .emp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
      }

      .emp-card {
        padding: 14px 10px !important;
      }

      #edModules>div {
        grid-template-columns: 1fr !important;
      }

      #edModules>div+div {
        grid-template-columns: 1fr !important;
      }

      /* ══════════════════════════════════════════════════════════════
         MARK TEAM ATTENDANCE — card rows
      ══════════════════════════════════════════════════════════════ */
      #tamList .adm-body>div {
        flex-wrap: wrap !important;
        align-items: flex-start;
      }

      #tamList input[type="time"] {
        flex: 1;
        min-width: 90px;
      }

      /* ══════════════════════════════════════════════════════════════
         MISC
      ══════════════════════════════════════════════════════════════ */
      .hol-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
      }

      .muster-table th,
      .muster-table td {
        font-size: 10px !important;
        padding: 5px 6px !important;
      }

      .sec-title {
        font-size: 13px !important;
      }

      /* Global text wrap for mobile — prevents any content from overflowing */
      #content * {
        max-width: 100%;
        box-sizing: border-box;
      }

      #content p,
      #content span:not(.badge):not(.pill),
      #content .card>div,
      #content li {
        word-break: break-word;
        overflow-wrap: break-word;
      }
    }

    /* end @media 640px */

    /* ══ MODAL: Always centered on ALL screen sizes ══ */
    @media (max-width: 640px) {

      /* Overlay: flex center */
      .modal-ov.on {
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
      }

      /* Box: centered, max 95% width */
      .modal-box.open {
        width: 95% !important;
        max-width: 400px !important;
        max-height: 85svh !important;
        border-radius: 20px !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        animation: safePop .22s cubic-bezier(.34, 1.2, .64, 1) !important;
      }

      .modal-box.open::before {
        display: none !important;
      }

      .modal-title {
        font-size: 16px !important;
        padding: 18px 18px 12px !important;
      }

      .modal-body {
        padding: 0 18px 16px !important;
      }

      .modal-foot {
        padding: 12px 18px 16px !important;
      }

      .modal-foot .btn {
        width: 100% !important;
      }
    }

    /* ══ FINAL MOBILE POLISH ══════════════════════════════════════════ */
    @media (max-width: 640px) {

      /* Dashboard — content cards no overflow */
      #content {
        overflow-x: hidden !important;
      }

      #content .card,
      #content>div {
        max-width: 100% !important;
        overflow-x: hidden !important;
      }

      /* Dashboard — ann/del/thisMonth cards */
      #dashAnnList,
      #dashDelList,
      #dashAttSum {
        max-width: 100% !important;
      }

      #dashAnnList>div,
      #dashDelList>div {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      /* This Month — 3 cards fit properly */
      #dashAttSum>div {
        gap: 6px !important;
      }

      #dashAttSum>div>div {
        padding: 8px 4px !important;
        min-width: 0 !important;
      }

      #dashAttSum>div>div>div:first-child {
        font-size: 18px !important;
      }

      #dashAttSum>div>div>div:last-child {
        font-size: 8.5px !important;
        letter-spacing: 0 !important;
        word-break: break-word !important;
        white-space: normal !important;
      }

      /* My Delegations — text no overflow */
      #dashDelList .del-title,
      #dashDelList div div:first-child {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
      }

      /* Checklist — filter bar */
      #ckEmp,
      #ckDate {
        max-width: 100% !important;
      }

      /* Delegation view */
      .deleg-card {
        padding: 12px !important;
      }

      .del-meta {
        flex-wrap: wrap !important;
        gap: 4px !important;
      }

      /* Attendance cards */
      .att-punch-card {
        padding: 14px 16px !important;
      }

      .att-punch-card .btn-checkin {
        width: 100% !important;
        margin-top: 10px !important;
      }

      /* Sec-head wrapping */
      .sec-head {
        flex-wrap: wrap !important;
        gap: 6px !important;
      }

      .sec-title {
        font-size: 14px !important;
      }

      /* Tab bar overflow scroll */
      .tabs-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
      }

      .tabs-bar::-webkit-scrollbar {
        display: none !important;
      }

      .tab-btn {
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 7px 12px !important;
      }

      /* KPI row */
      .krow {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
      }

      .krow>.card {
        padding: 12px !important;
      }

      /* Quick action tiles */
      #dashQuickAct {
        gap: 8px !important;
      }

      .qa-tile {
        padding: 10px 6px !important;
        border-radius: 14px !important;
      }

      .qa-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
      }

      .qa-lbl {
        font-size: 10.5px !important;
        margin-top: 5px !important;
      }

      /* Topbar icons */
      .tb-actions {
        gap: 4px !important;
      }

      .tb-ico {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
      }
    }


    /* ══════════════════════════════════════════════════════════════════════
   CHECK IN / CHECK OUT BUTTON — Dashboard Widget
══════════════════════════════════════════════════════════════════════ */
    .att-punch-card {
      background: var(--sur);
      border: 1.5px solid var(--bdr);
      border-radius: var(--r);
      padding: 18px 20px;
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 18px;
      box-shadow: var(--shad);
      flex-wrap: wrap;
    }

    .att-punch-info {
      flex: 1;
      min-width: 160px;
    }

    .att-punch-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--tx2);
      letter-spacing: .3px;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .att-punch-status {
      font-size: 15px;
      font-weight: 800;
      color: var(--tx);
      line-height: 1.3;
    }

    .att-punch-times {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .att-punch-time-item {
      font-size: 12px;
      color: var(--tx2);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .att-punch-time-item i {
      font-size: 11px;
      color: var(--tx3);
    }

    .btn-checkin {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 12px 28px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 800;
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: all .18s cubic-bezier(.4, 0, .2, 1);
      white-space: nowrap;
      flex-shrink: 0;
      letter-spacing: .2px;
      min-width: 150px;
      justify-content: center;
    }

    .btn-checkin.checkin-in {
      background: linear-gradient(135deg, #2F9E44, #37B24D);
      color: #fff;
      box-shadow: 0 4px 14px rgba(47, 158, 68, .35);
    }

    .btn-checkin.checkin-in:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(47, 158, 68, .45);
    }

    .btn-checkin.checkin-in:active {
      transform: translateY(0);
    }

    .btn-checkin.checkin-out {
      background: linear-gradient(135deg, #D97706, #F59E0B);
      color: #fff;
      box-shadow: 0 4px 14px rgba(217, 119, 6, .35);
    }

    .btn-checkin.checkin-out:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(217, 119, 6, .45);
    }

    .btn-checkin.checkin-done {
      background: var(--sur3);
      color: var(--tx3);
      cursor: not-allowed;
      box-shadow: none;
      pointer-events: none;
    }

    .btn-checkin:disabled {
      opacity: .6;
      pointer-events: none;
    }

    .btn-checkin .ci-spinner {
      animation: spin .7s linear infinite;
    }

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

    /* ── Additional Responsive Fixes (TASK 3) ───────────────────────────── */
    @media (max-width: 1024px) {

      /* Dashboard lower grid: stack to 1 col on tablet */
      #content [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      /* Chart row: stack on tablet */
      #content [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
    }

    /* ══════════════════════════════════════════════════════════
       MOBILE / TABLET / PWA — Native app-like layout
       Mobile:  ≤768px  → full native app feel
       Tablet:  769–1024px → collapsible sidebar
       Desktop: >1024px → full sidebar
    ══════════════════════════════════════════════════════════ */

    /* ════════════════════════════════════════════════════════════════════
       MOBILE ≤640px — Premium Native App Experience
    ════════════════════════════════════════════════════════════════════ */

    /* Bottom Nav */
    .mob-nav {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 90;
      background: var(--sur);
      border-top: 1px solid var(--bdr);
      box-shadow: 0 -4px 24px rgba(0, 0, 0, .07);
      padding-bottom: env(safe-area-inset-bottom, 0px);
      transition: transform .3s cubic-bezier(.4, 0, .2, 1);
      will-change: transform;
    }

    .mob-nav.nav-hidden {
      transform: translateY(105%);
    }

    .mob-nav-inner {
      height: 56px;
      display: flex;
      align-items: stretch;
    }

    .mob-nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      border: none;
      background: none;
      cursor: pointer;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .3px;
      color: var(--tx3);
      text-transform: uppercase;
      -webkit-tap-highlight-color: transparent;
      transition: color .15s;
      padding: 6px 4px 4px;
      position: relative;
      min-height: 44px;
    }

    .mob-nav-item i {
      font-size: 20px;
      transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
    }

    .mob-nav-item.active {
      color: var(--P);
    }

    .mob-nav-item.active i {
      transform: translateY(-3px) scale(1.1);
    }

    .mob-nav-item.active::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 3px;
      border-radius: 0 0 3px 3px;
      background: var(--P);
    }

    .safe-bot {
      display: block;
      height: env(safe-area-inset-bottom, 0px);
    }

    /* ── Splash screen ── */
    @keyframes splashPop {
      from {
        opacity: .1;
        transform: scale(.85) translateY(20px);
      }

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

    @keyframes splashHide {
      to {
        opacity: 0;
        transform: scale(1.04);
      }
    }

    @keyframes fkLogoSpin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes fkBarSlide {
      0% {
        transform: translateX(-100%)
      }

      50% {
        transform: translateX(0%)
      }

      100% {
        transform: translateX(110%)
      }
    }

    @keyframes lbBrandIn {
      from {
        opacity: .5;
        transform: translateY(-10px)
      }

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

    @keyframes lbSheetUp {
      from {
        transform: translateY(48px);
        opacity: .7
      }

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

    /* ── NATIVE PERF ── */
    * {
      touch-action: manipulation;
    }

    a,
    button,
    [onclick] {
      -webkit-tap-highlight-color: transparent;
    }

    .mob-nav,
    .tb,
    .sb {
      will-change: transform;
      transform: translateZ(0);
    }

    #content {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
    }

    @media(max-width:640px) {
      .card {
        transition: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important;
      }

      .modal-ov,
      .so-ov {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .mob-page {
        animation-duration: .12s !important;
      }

      /* Mobile: disable scr transition to prevent blank flash on slow devices */
      .scr.on {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }

    /* ── LOGIN MOBILE ── */
    .l-mob-brand {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 48px 24px 20px;
      flex: 1;
      animation: lbBrandIn .6s cubic-bezier(.34, 1.1, .64, 1) both;
    }

    @media(max-width:640px) {
      #sLogin {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        height: 100svh !important;
        min-height: -webkit-fill-available;
        background: linear-gradient(160deg, #0A0A0A 0%, #1A1A1A 45%, #2A2A2A 72%, #3D3D3D 100%) !important;
      }

      .l-mob-brand {
        display: flex !important;
      }

      #lDeskLogo {
        display: none !important;
      }

      .lbox {
        border-radius: 28px 28px 0 0 !important;
        padding: 8px 22px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        animation: lbSheetUp .44s cubic-bezier(.34, 1.1, .64, 1) both !important;
        box-shadow: 0 -4px 32px rgba(0, 0, 0, .18) !important;
        backdrop-filter: none !important;
        background: var(--sur) !important;
      }

      .lbox::before {
        content: '' !important;
        display: block !important;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--bdr2);
        margin: 0 auto 16px;
      }

      .lbox .l-logo-wrap {
        display: none !important;
      }

      .l-title {
        font-size: 19px !important;
        margin-bottom: 3px !important;
      }

      .l-sub {
        font-size: 13px !important;
        margin-bottom: 18px !important;
      }

      .l-field {
        margin-bottom: 11px !important;
      }

      .l-field input {
        font-size: 16px !important;
        min-height: 52px !important;
        border-radius: 14px !important;
      }

      .l-field .l-ico {
        height: 52px !important;
      }

      .l-eye {
        height: 52px !important;
      }

      .l-btn {
        min-height: 54px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
      }
    }

    @media(min-width:641px) {
      .l-mob-brand {
        display: none !important;
      }

      #lDeskLogo {
        display: block !important;
      }
    }

    .fk-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .9);
      animation: dotWave .9s ease-in-out infinite 1.2s ease-in-out infinite;
    }

    @keyframes fkPulse {

      0%,
      100% {
        opacity: .25;
        transform: scale(.65);
        filter: blur(1px);
      }

      50% {
        opacity: 1;
        transform: scale(1.15);
        filter: blur(0);
      }
    }

    /* ── Submit button success state ── */
    @keyframes btnCheck {
      0% {
        transform: scale(.6);
        opacity: .1;
      }

      60% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .btn-success {
      background: var(--G) !important;
      color: #fff !important;
      pointer-events: none;
    }

    /* ── Mobile card hover / press ── */
    @keyframes mobFadeUp {
      from {
        opacity: .9;
        transform: translateY(5px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .mob-page {
      animation: mobFadeUp .15s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    @keyframes sheetUp {
      from {
        transform: translateY(100%);
        opacity: .1;
      }

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

    /* end @media 640px */

    /* ── Tablet 641-1024px (unchanged) ── */
    @media (min-width: 641px) and (max-width: 1024px) {
      :root {
        --sbw: 210px;
      }

      .tb-search {
        max-width: 200px;
      }

      .ana-kpi-row {
        grid-template-columns: repeat(4, 1fr) !important;
      }

      .da-kpi-strip {
        grid-template-columns: repeat(3, 1fr);
      }

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

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

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

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

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

      #content {
        padding: 18px 22px;
      }
    }

    /* ── Very small ≤380px ── */
    @media (max-width: 380px) {

      .krow,
      .krow-3,
      .ana-kpi-row,
      .da-kpi-strip {
        grid-template-columns: 1fr !important;
      }

      .kpi-val {
        font-size: 22px;
      }

      .mod-title {
        font-size: 19px !important;
      }

      #content {
        padding: 10px 10px calc(72px + env(safe-area-inset-bottom, 0px));
      }
    }

    /* ── Searchable Select ── */
    .ss-wrap {
      position: relative;
      display: inline-block;
      min-width: 120px;
      max-width: 260px;
      vertical-align: middle
    }

    .ss-inp {
      width: 100%;
      cursor: pointer;
      background: var(--sur) !important;
      caret-color: transparent;
      user-select: none
    }

    .ss-inp.ss-open {
      border-color: var(--P) !important;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, .15)
    }

    .ss-arr {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--tx3);
      pointer-events: none;
      font-size: 11px;
      transition: transform .2s
    }

    .ss-list {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      min-width: 180px;
      z-index: 9999;
      background: var(--sur);
      border: 1px solid var(--bdr2);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
      display: none;
      flex-direction: column;
      max-height: 280px;
      overflow: hidden
    }

    .ss-list.ss-open {
      display: flex
    }

    .ss-sw {
      padding: 8px;
      border-bottom: 1px solid var(--bdr);
      flex-shrink: 0
    }

    .ss-si {
      width: 100%;
      padding: 7px 10px;
      border: 1px solid var(--bdr);
      border-radius: 8px;
      background: var(--bg);
      font-size: 13px;
      color: var(--tx);
      outline: none
    }

    .ss-opts {
      overflow-y: auto;
      max-height: 195px
    }

    .ss-opt {
      padding: 9px 14px;
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
      color: var(--tx);
      transition: background .1s
    }

    .ss-opt:hover,
    .ss-opt.ss-hl {
      background: var(--Pl);
      color: var(--P)
    }

    .ss-opt.ss-hi {
      display: none
    }

    .ss-none {
      padding: 10px 14px;
      font-size: 12px;
      color: var(--tx3);
      text-align: center
    }

    /* Attendance detail expand/collapse */
    .adm-hd {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      background: var(--sur2);
      border-radius: 10px;
      cursor: pointer;
      border: 1px solid var(--bdr);
      margin-bottom: 4px;
      user-select: none;
      transition: background .15s
    }

    .adm-hd:hover {
      background: var(--Pl)
    }

    .adm-body {
      display: none
    }

    .adm-body.adm-open {
      display: block
    }

    /* ═══════════════════════════════════════════════════════════════
       ✦  PREMIUM UI UPGRADE  ✦
       Sidebar glow, topbar glass, skeleton fun, card depth
    ═══════════════════════════════════════════════════════════════ */

    /* ── Global micro-refinements ── */
    * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ── App background — subtle diagonal texture ── */
    body {
      background: var(--bg);
    }

    #content {
      background: var(--bg);
      background-image:
        radial-gradient(circle at 20% 50%, rgba(0, 95, 115, .028) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(13, 148, 136, .022) 0%, transparent 50%);
    }

    /* ══════════════════════════════════════════
       SIDEBAR — glowing left accent, hover aura
    ══════════════════════════════════════════ */
    .sb {
      border-right: 1px solid var(--bdr);
      box-shadow: 2px 0 16px rgba(13, 27, 42, .04);
    }

    .sb-hd {
      border-bottom-color: var(--bdr);
    }

    /* Nav item — smooth hover with left-glow */
    .nv {
      border-radius: 10px;
      transition: all .16s cubic-bezier(.4, 0, .2, 1);
    }

    .nv:hover {
      background: linear-gradient(90deg, rgba(0, 95, 115, .07) 0%, transparent 100%);
      color: var(--P);
      transform: translateX(2px);
    }

    .nv.on {
      background: linear-gradient(90deg, rgba(0, 95, 115, .12) 0%, rgba(0, 95, 115, .04) 100%);
      color: var(--P);
      box-shadow: inset 0 0 0 1px rgba(0, 95, 115, .12);
    }

    .nv.on::before {
      width: 3.5px;
      height: 22px;
      border-radius: 0 4px 4px 0;
      background: linear-gradient(180deg, var(--Pd) 0%, var(--P) 100%);
      box-shadow: 2px 0 8px rgba(0, 95, 115, .3);
    }

    /* Nav icon glow on active */
    .nv.on i {
      color: var(--Pd);
      filter: drop-shadow(0 0 4px rgba(10, 147, 150, .4));
    }

    /* User profile card in sidebar */
    .sb-prof {
      border-radius: 12px;
      border: 1px solid var(--bdr);
      transition: all .2s cubic-bezier(.4, 0, .2, 1);
      background: linear-gradient(135deg, var(--sur) 0%, var(--sur2) 100%);
    }

    .sb-prof:hover {
      border-color: var(--Pd);
      box-shadow: 0 4px 16px rgba(0, 95, 115, .1), 0 0 0 1px rgba(0, 95, 115, .08);
      transform: translateY(-1px);
    }

    /* Online dot pulse */
    .online-dot {
      animation: onlinePulse 2.5s ease-in-out infinite;
    }

    @keyframes onlinePulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(47, 158, 68, .5);
      }

      50% {
        box-shadow: 0 0 0 4px rgba(47, 158, 68, .0);
      }
    }

    /* ══════════════════════════════════════════
       TOPBAR — glass + gradient shimmer
    ══════════════════════════════════════════ */
    .topbar {
      background: rgba(255, 255, 255, .9);
      backdrop-filter: blur(16px) saturate(1.6);
      -webkit-backdrop-filter: blur(16px) saturate(1.6);
      border-bottom: 1px solid rgba(227, 233, 241, .9);
      box-shadow: 0 1px 0 rgba(13, 27, 42, .04), 0 4px 20px rgba(13, 27, 42, .04);
    }

    body.dark .topbar {
      background: rgba(30, 41, 59, .88);
      border-bottom-color: rgba(51, 65, 85, .8);
    }

    .ico-btn {
      border-radius: 11px;
      transition: all .16s cubic-bezier(.4, 0, .2, 1);
    }

    .ico-btn:hover {
      background: linear-gradient(135deg, var(--Pl) 0%, rgba(13, 148, 136, .08) 100%);
      border-color: var(--Pd);
      color: var(--P);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 95, 115, .12);
    }

    /* ══════════════════════════════════════════
       CARDS — elevated depth + hover 3D
    ══════════════════════════════════════════ */
    .card {
      border-radius: var(--r);
      border-color: var(--bdr);
      background: var(--sur);
      box-shadow: var(--shad);
      transition: box-shadow .22s cubic-bezier(.4, 0, .2, 1),
        transform .22s cubic-bezier(.4, 0, .2, 1),
        border-color .22s;
    }

    .card:hover {
      box-shadow: var(--shad2);
      transform: translateY(-2px);
      border-color: rgba(10, 147, 150, .15);
    }

    /* ══════════════════════════════════════════
       KPI CARDS — gradient mesh + glow hover
    ══════════════════════════════════════════ */
    .kpi {
      border-radius: var(--r);
      border: 1px solid var(--bdr);
      background: var(--sur);
      box-shadow: var(--shad);
      position: relative;
      overflow: hidden;
      transition: all .22s cubic-bezier(.4, 0, .2, 1);
    }

    /* Subtle mesh gradient inside KPI */
    .kpi::before {
      content: '';
      position: absolute;
      top: -30px;
      right: -30px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: var(--kib, var(--Pl));
      opacity: .6;
      pointer-events: none;
      transition: transform .3s;
    }

    .kpi:hover {
      box-shadow: var(--shad2), 0 0 0 1.5px rgba(10, 147, 150, .12);
      transform: translateY(-3px) scale(1.015);
      border-color: rgba(10, 147, 150, .2);
    }

    .kpi:hover::before {
      transform: scale(1.3);
    }

    /* Top accent bar — gradient */
    .kpi::after {
      height: 3.5px;
      background: linear-gradient(90deg, var(--kc, var(--P)) 0%, color-mix(in srgb, var(--kc, var(--P)) 60%, var(--Pd)) 100%);
      box-shadow: 0 2px 8px color-mix(in srgb, var(--kc, var(--P)) 40%, transparent);
    }

    .kpi-val {
      font-size: 32px;
      letter-spacing: -2px;
      font-feature-settings: 'tnum';
    }

    .kpi-ico {
      border-radius: 14px;
      background: var(--kib, var(--Pl));
      box-shadow: 0 2px 8px color-mix(in srgb, var(--kib, var(--Pl)) 80%, transparent);
    }

    /* ══════════════════════════════════════════
       BUTTONS — gradient, glow, spring
    ══════════════════════════════════════════ */
    .btn {
      background: linear-gradient(135deg, var(--P) 0%, var(--Pd) 100%);
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 95, 115, .22);
      transition: all .18s cubic-bezier(.34, 1.2, .64, 1);
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 95, 115, .3);
    }

    .btn-outline {
      background: transparent;
      box-shadow: none;
      border: 1.5px solid var(--bdr2);
    }

    .btn-outline:hover {
      background: var(--sur2);
      border-color: var(--Pd);
      color: var(--P);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 95, 115, .1);
    }

    .btn-green {
      background: linear-gradient(135deg, #2F9E44, #37B24D);
      box-shadow: 0 2px 8px rgba(47, 158, 68, .25);
    }

    .btn-red {
      background: linear-gradient(135deg, #E03131, #F03E3E);
      box-shadow: 0 2px 8px rgba(224, 49, 49, .25);
    }

    .btn-orange {
      background: linear-gradient(135deg, #D97706, #F59E0B);
      box-shadow: 0 2px 8px rgba(217, 119, 6, .25);
    }

    .btn-violet {
      background: linear-gradient(135deg, #7048E8, #9061F9);
      box-shadow: 0 2px 8px rgba(112, 72, 232, .25);
    }

    .btn-teal {
      background: linear-gradient(135deg, #0D9488, #14B8A6);
      box-shadow: 0 2px 8px rgba(13, 148, 136, .25);
    }

    /* Login button */
    .l-btn {
      background: linear-gradient(135deg, var(--P) 0%, var(--Pd) 100%);
      box-shadow: 0 4px 20px rgba(0, 95, 115, .35);
      transition: all .22s cubic-bezier(.34, 1.2, .64, 1);
    }

    .l-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(0, 95, 115, .45);
    }

    /* ══════════════════════════════════════════
       TABLE — refined hover, sticky head
    ══════════════════════════════════════════ */
    tbody tr {
      transition: background .12s;
    }

    tbody tr:hover td {
      background: rgba(0, 95, 115, .04);
    }

    thead th {
      background: linear-gradient(180deg, var(--sur2) 0%, var(--sur3) 100%);
      font-size: 10.5px;
      letter-spacing: .5px;
    }

    /* ══════════════════════════════════════════
       TABS — pill style active
    ══════════════════════════════════════════ */
    .tab.on,
    .tabs .tab.active {
      color: var(--P);
      border-bottom-color: var(--Pd);
      font-weight: 800;
    }

    .tab:hover {
      background: rgba(0, 95, 115, .05);
    }

    /* ══════════════════════════════════════════
       BADGES — softer pill
    ══════════════════════════════════════════ */
    .bdg {
      letter-spacing: .3px;
    }

    /* ══════════════════════════════════════════
       TOAST — pill style, icon ring
    ══════════════════════════════════════════ */
    #toast {
      border-radius: 14px !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .12) !important;
      font-weight: 700 !important;
      font-size: 13.5px !important;
      letter-spacing: -.1px !important;
      padding: 14px 20px !important;
      backdrop-filter: blur(8px);
    }

    /* ══════════════════════════════════════════
       MODAL — spring entrance, frosted
    ══════════════════════════════════════════ */
    .modal-box.open {
      border-radius: 20px !important;
      box-shadow: 0 24px 72px rgba(13, 27, 42, .2), 0 4px 16px rgba(13, 27, 42, .1) !important;
    }

    .modal-ov {
      backdrop-filter: blur(6px);
    }

    /* ══════════════════════════════════════════
       FORM INPUTS — glow focus
    ══════════════════════════════════════════ */
    .fgrp input:focus,
    .fgrp select:focus,
    .fgrp textarea:focus {
      border-color: var(--Pd);
      box-shadow: 0 0 0 3px rgba(10, 147, 150, .15), 0 2px 8px rgba(0, 95, 115, .08);
    }

    .l-field input:focus {
      border-color: var(--Pd);
      box-shadow: 0 0 0 4px rgba(10, 147, 150, .15), 0 4px 12px rgba(0, 95, 115, .1);
    }

    /* ══════════════════════════════════════════
       ✦  SKELETON LOADERS — PREMIUM ANIMATIONS  ✦
    ══════════════════════════════════════════ */

    /* Base skeleton — richer shimmer */
    .sk {
      background: linear-gradient(105deg,
          var(--sur2) 25%,
          rgba(200, 214, 227, .55) 45%,
          rgba(255, 255, 255, .85) 50%,
          rgba(200, 214, 227, .55) 55%,
          var(--sur2) 75%);
      background-size: 400% 100%;
      animation: skelShimmer 1.8s ease-in-out infinite;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

    body.dark .sk {
      background: linear-gradient(105deg,
          var(--sur2) 25%,
          rgba(71, 85, 105, .6) 45%,
          rgba(100, 116, 139, .35) 50%,
          rgba(71, 85, 105, .6) 55%,
          var(--sur2) 75%);
      background-size: 400% 100%;
    }

    @keyframes skelShimmer {
      0% {
        background-position: 120% 0;
      }

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

    /* ── Floating dot ornaments inside skeleton ── */
    .sk::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 18%;
      transform: translateY(-50%);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(10, 147, 150, .18);
      animation: skelDotFloat 2.4s ease-in-out infinite;
      pointer-events: none;
    }

    .sk::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 52%;
      transform: translateY(-50%);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(0, 95, 115, .12);
      animation: skelDotFloat 2.4s ease-in-out infinite .6s;
      pointer-events: none;
    }

    @keyframes skelDotFloat {

      0%,
      100% {
        transform: translateY(-50%) scale(1);
        opacity: .4;
      }

      50% {
        transform: translateY(calc(-50% - 4px)) scale(1.4);
        opacity: .9;
      }
    }

    /* ── Skeleton "breathing" — subtle scale pulse ── */
    .sk-row {
      gap: 10px;
    }

    .sk-row .sk:nth-child(1) {
      animation-delay: 0s;
    }

    .sk-row .sk:nth-child(2) {
      animation-delay: .15s;
      width: 85%;
      animation-delay: .15s;
    }

    .sk-row .sk:nth-child(3) {
      animation-delay: .3s;
      width: 70%;
    }

    .sk-row .sk:nth-child(4) {
      animation-delay: .45s;
      width: 90%;
    }

    /* ── KPI skeleton — placeholder with icon ghost ── */
    .krow .sk {
      border-radius: var(--r);
    }

    .krow .sk::before {
      top: 18px;
      left: 18px;
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: rgba(0, 95, 115, .08);
      animation: skelIconPulse 1.8s ease-in-out infinite;
    }

    .krow .sk::after {
      top: 70px;
      left: 18px;
      width: 60px;
      height: 8px;
      border-radius: 4px;
      background: rgba(0, 95, 115, .06);
      animation: skelIconPulse 1.8s ease-in-out infinite .3s;
    }

    @keyframes skelIconPulse {

      0%,
      100% {
        opacity: .4;
      }

      50% {
        opacity: .85;
      }
    }

    /* ── Skeleton "wave" — sequential fade across row ── */
    @keyframes skelWave {

      0%,
      100% {
        opacity: .5;
      }

      50% {
        opacity: 1;
      }
    }

    .sk-h1 {
      animation: skelShimmer 1.8s ease-in-out infinite, skelWave 2.4s ease-in-out infinite;
    }

    .sk-h2 {
      animation: skelShimmer 1.8s ease-in-out infinite, skelWave 2.4s ease-in-out infinite .2s;
    }

    .sk-h3 {
      animation: skelShimmer 1.8s ease-in-out infinite, skelWave 2.4s ease-in-out infinite .1s;
    }

    .sk-h4 {
      animation: skelShimmer 1.8s ease-in-out infinite, skelWave 2.4s ease-in-out infinite .3s;
    }

    .sk-h5 {
      animation: skelShimmer 1.8s ease-in-out infinite, skelWave 2.4s ease-in-out infinite .15s;
    }

    .sk-h6 {
      animation: skelShimmer 1.8s ease-in-out infinite, skelWave 2.4s ease-in-out infinite .25s;
    }

    .sk-h7 {
      animation: skelShimmer 1.8s ease-in-out infinite;
    }

    .sk-h8 {
      animation: skelShimmer 1.8s ease-in-out infinite;
    }

    /* ── Playful loading dots inside skeleton (fun mini-loader) ── */
    .sk-row::after {
      content: '';
      display: block;
      margin: 6px auto 0;
      width: 28px;
      height: 3px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--P), var(--Pd), var(--T));
      background-size: 200% 100%;
      animation: skelBarPulse 1.4s ease-in-out infinite;
      opacity: .35;
    }

    @keyframes skelBarPulse {

      0%,
      100% {
        background-position: 0% 0;
        opacity: .25;
      }

      50% {
        background-position: 100% 0;
        opacity: .5;
      }
    }

    /* ── "Content Loading" message hint (ultra-subtle) ── */
    .sk-row::before {
      content: 'Loading…';
      display: block;
      font-size: 10px;
      font-weight: 700;
      color: var(--tx4);
      text-align: center;
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-bottom: 8px;
      animation: skelFadeHint 1.2s ease-in-out infinite;
    }

    @keyframes skelFadeHint {

      0%,
      100% {
        opacity: .4;
      }

      50% {
        opacity: .7;
      }
    }

    /* ══════════════════════════════════════════
       CHECKIN BUTTON — glow pulse
    ══════════════════════════════════════════ */
    .btn-checkin.checkin-in {
      background: linear-gradient(135deg, #1d8c38, #2F9E44);
      animation: checkinGlow 2.4s ease-in-out infinite;
    }

    @keyframes checkinGlow {

      0%,
      100% {
        box-shadow: 0 4px 14px rgba(47, 158, 68, .35);
      }

      50% {
        box-shadow: 0 4px 28px rgba(47, 158, 68, .55), 0 0 0 4px rgba(47, 158, 68, .1);
      }
    }

    .btn-checkin.checkin-out {
      background: linear-gradient(135deg, #b45309, #D97706);
      animation: checkoutGlow 2.4s ease-in-out infinite;
    }

    @keyframes checkoutGlow {

      0%,
      100% {
        box-shadow: 0 4px 14px rgba(217, 119, 6, .35);
      }

      50% {
        box-shadow: 0 4px 28px rgba(217, 119, 6, .55), 0 0 0 4px rgba(217, 119, 6, .1);
      }
    }

    /* ══════════════════════════════════════════
       MOBILE NAV — refined pill
    ══════════════════════════════════════════ */
    .mob-nav {
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(20px) saturate(1.5);
      -webkit-backdrop-filter: blur(20px) saturate(1.5);
      border-top: 1px solid rgba(227, 233, 241, .85);
      box-shadow: 0 -4px 30px rgba(13, 27, 42, .08);
    }

    body.dark .mob-nav {
      background: rgba(30, 41, 59, .92);
      border-top-color: rgba(51, 65, 85, .8);
    }

    .mob-nav-pill {
      width: 42px;
      height: 32px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s cubic-bezier(.34, 1.4, .64, 1);
    }

    .mob-nav-item.active .mob-nav-pill {
      background: linear-gradient(135deg, var(--Pl), rgba(10, 147, 150, .12));
      box-shadow: 0 2px 10px rgba(0, 95, 115, .15);
    }

    .mob-nav-item.active i {
      color: var(--P);
    }

    /* ══════════════════════════════════════════
       CONTENT LOADING BAR — iridescent
    ══════════════════════════════════════════ */
    .content-loading-bar {
      background: linear-gradient(90deg, var(--P), var(--Pd), var(--T), var(--G), var(--Pd), var(--P));
      background-size: 400% 100%;
      height: 3px;
      animation: loadBarSweep 1.4s linear infinite;
    }

    .content-loading-bar.on {
      opacity: 1;
    }

    @keyframes loadBarSweep {
      0% {
        background-position: 100% 0;
      }

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

    /* ══════════════════════════════════════════
       DARK MODE — extra depth
    ══════════════════════════════════════════ */
    body.dark .sb {
      box-shadow: 2px 0 20px rgba(0, 0, 0, .25);
    }

    body.dark .card {
      border-color: rgba(51, 65, 85, .7);
    }

    body.dark .card:hover {
      border-color: rgba(10, 147, 150, .2);
    }

    body.dark .kpi {
      border-color: rgba(51, 65, 85, .6);
    }

    body.dark .topbar {
      box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 4px 20px rgba(0, 0, 0, .2);
    }

    body.dark .nv:hover {
      background: linear-gradient(90deg, rgba(0, 95, 115, .15) 0%, transparent 100%);
    }

    body.dark .nv.on {
      background: linear-gradient(90deg, rgba(0, 95, 115, .22) 0%, rgba(0, 95, 115, .06) 100%);
    }

    body.dark #toast {
      box-shadow: 0 8px 40px rgba(0, 0, 0, .4) !important;
    }

    /* ── Topbar title transition ── */
    @keyframes tbTitleIn {
      from {
        opacity: .1;
        transform: translateY(-6px);
      }

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

    #tbTitle {
      display: inline-block;
    }

    /* ── Notification dot — pulse ring ── */
    .ntf-dot {
      animation: ntfPulse 2s ease-in-out infinite;
    }

    @keyframes ntfPulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(224, 49, 49, .5);
      }

      50% {
        box-shadow: 0 0 0 3px rgba(224, 49, 49, .0);
      }
    }

    /* ── Section headers — refined underline ── */
    .sec-title i {
      filter: drop-shadow(0 1px 3px rgba(0, 95, 115, .15));
    }

    /* ── Empty states — icon float ── */
    .empty-state i,
    .te i {
      animation: emptyFloat 3s ease-in-out infinite;
      display: block;
    }

    @keyframes emptyFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-6px);
      }
    }

    /* ── Profile hero — animated mesh ── */
    .prof-hero {
      background: linear-gradient(145deg, var(--P) 0%, var(--Pd) 60%, #0d7a7a 100%);
      position: relative;
      overflow: hidden;
    }

    .prof-hero::before {
      animation: heroMesh 8s ease-in-out infinite;
    }

    @keyframes heroMesh {

      0%,
      100% {
        transform: scale(1) rotate(0deg);
      }

      50% {
        transform: scale(1.2) rotate(15deg);
      }
    }

    /* ── Announcement card — left border pulse on high priority ── */
    .ann-card.high::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(180deg, var(--R), rgba(224, 49, 49, .4));
      border-radius: 4px 0 0 4px;
      animation: urgentBlink 2s ease-in-out infinite;
    }

    @keyframes urgentBlink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .5;
      }
    }

    /* ── Bottom nav pill hover spring ── */
    .mob-nav-item:hover .mob-nav-pill {
      background: rgba(0, 95, 115, .06);
      transform: scale(1.08);
    }

    /* ── Splash dots upgrade ── */
    .fk-dot {
      width: 9px;
      height: 9px;
      background: rgba(255, 255, 255, .95);
      box-shadow: 0 0 8px rgba(255, 255, 255, .5);
    }

    /* ── reduce-motion: kill all animations ── */
    /* ════════════════════════════════════════════════════════════════════════
       RESPONSIVE OVERHAUL v2 — Joolry Daily
       Three breakpoints:
         Desktop  : > 1024px  — default styles
         Tablet   : 641-1024px — already handled above
         Mobile   : ≤ 640px   — comprehensive fixes below
       ════════════════════════════════════════════════════════════════════ */

    /* ── Universal: scrollable table wrapper ─────────────────────────────── */
    .tw {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 0 0 var(--r) var(--r);
    }

    .tw table {
      min-width: 480px;
      border-collapse: collapse;
      width: 100%;
    }

    .tw thead th {
      background: var(--sur2);
      color: var(--tx2);
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .4px;
      padding: 9px 12px;
      border-bottom: 2px solid var(--bdr2);
      white-space: nowrap;
    }

    .tw tbody td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--bdr);
      font-size: 13px;
    }

    .tw tbody tr:last-child td {
      border-bottom: none;
    }

    .tw tbody tr:hover {
      background: var(--sur2);
    }

    .tw::-webkit-scrollbar {
      height: 4px;
    }

    .tw::-webkit-scrollbar-thumb {
      background: var(--bdr2);
      border-radius: 2px;
    }

    /* ── Universal: filter bar responsive ───────────────────────────────── */
    .filter-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 10px 14px;
      background: var(--sur2);
      border-radius: 12px;
      border: 1px solid var(--bdr);
      margin-bottom: 14px;
    }

    .filter-bar .fb-sep {
      width: 1px;
      height: 22px;
      background: var(--bdr);
      flex-shrink: 0;
    }

    .filter-bar .fb-spacer {
      flex: 1;
    }

    .ana-sel {
      padding: 7px 10px;
      border: 1.5px solid var(--bdr);
      border-radius: 8px;
      font-size: 12.5px;
      background: var(--bg);
      color: var(--tx);
      outline: none;
      transition: border-color .15s;
      cursor: pointer;
    }

    .ana-sel:focus {
      border-color: var(--P);
    }

    /* ── Universal: sort button strip ───────────────────────────────────── */
    .sort-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .sort-bar .sort-lbl {
      font-size: 10.5px;
      font-weight: 800;
      color: var(--tx3);
      text-transform: uppercase;
      letter-spacing: .4px;
      white-space: nowrap;
    }

    .sort-btn {
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 700;
      cursor: pointer;
      border: 1.5px solid var(--bdr);
      background: var(--bg);
      color: var(--tx2);
      white-space: nowrap;
      transition: all .15s;
    }

    .sort-btn.active {
      border-color: var(--P);
      background: var(--Pl);
      color: var(--P);
    }

    .sort-btn:active {
      transform: scale(.96);
    }

    /* ── Universal: stat strip (3-col) ──────────────────────────────────── */
    .stat-strip {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }

    .stat-pill {
      flex: 1;
      padding: 10px;
      border-radius: 10px;
      text-align: center;
    }

    .stat-pill .val {
      font-size: 20px;
      font-weight: 900;
    }

    .stat-pill .lbl {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      margin-top: 2px;
    }

    /* ── Universal: group/dept collapse row ─────────────────────────────── */
    .grp-hdr {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      background: var(--sur2);
      cursor: pointer;
      user-select: none;
      border-bottom: 1px solid var(--bdr);
    }

    .grp-hdr:hover {
      background: var(--Pl);
    }

    .adm-body {
      display: none;
    }

    .adm-body.adm-open {
      display: block;
    }

    /* ── Universal: empty state ──────────────────────────────────────────── */
    .empty-state {
      padding: 40px 20px;
      text-align: center;
    }

    .empty-state i {
      font-size: 36px;
      opacity: .14;
      color: var(--P);
    }

    .empty-state .msg {
      margin-top: 12px;
      font-size: 14px;
      color: var(--tx3);
      font-weight: 600;
    }

    /* ── mod-head responsive ────────────────────────────────────────────── */
    .mod-title {
      font-size: 20px;
      font-weight: 900;
      line-height: 1.2;
    }

    .mod-sub {
      font-size: 12px;
      color: var(--tx3);
      margin-top: 2px;
      font-weight: 500;
    }

    /* ── Delegation card mobile ─────────────────────────────────────────── */
    .dc-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }

    .dc-act {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }

    /* ════════════════════════════════════════════════════════════════════
       TABLET — 641px to 1024px
       ════════════════════════════════════════════════════════════════ */
    @media (min-width: 641px) and (max-width: 1024px) {
      :root {
        --sbw: 200px;
      }

      .mod-title {
        font-size: 18px;
      }

      .krow {
        grid-template-columns: repeat(3, 1fr);
      }

      .krow-5,
      .krow-6 {
        grid-template-columns: repeat(3, 1fr);
      }

      .filter-bar {
        gap: 6px;
        padding: 8px 12px;
      }

      .ana-sel {
        font-size: 12px;
        padding: 6px 9px;
      }

      .card {
        padding: 16px;
      }

      /* EM dashboard: allow table scroll */
      #emTableWrap {
        overflow-x: auto;
      }

      /* Analytics: 3-col grids → 2-col */
      .ana-charts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .da-grid3 {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      /* Profile grid */
      #edModules>div {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE — ≤ 640px
       All views: stack, full-width, touch-friendly
       ════════════════════════════════════════════════════════════════ */


    /* ── Tiny phones (≤380px) ── */
    @media (max-width: 380px) {
      .tab {
        font-size: 10.5px;
        padding: 8px 7px;
      }

      .krow,
      .krow-3,
      .ana-kpi-row {
        grid-template-columns: 1fr !important;
      }

      .kpi {
        padding: 12px;
      }

      .stat-strip {
        flex-direction: column;
      }

      .stat-pill {
        padding: 8px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
      }

      .stat-pill .val {
        font-size: 20px;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
      }
    }

    /* ══════════════════════════════════════════════════════════════════════
       ANIMATION SYSTEM v2 — Joolry Daily
       Principles: spring physics, stagger, purpose-driven motion
    ══════════════════════════════════════════════════════════════════════ */

    /* ── New keyframes ───────────────────────────────────────────────────── */
    @keyframes slideInUp {
      from {
        transform: translateY(22px) scale(.98);
      }

      to {
        transform: none;
      }
    }

    @keyframes slideInLeft {
      from {
        opacity: .4;
        transform: translateX(-22px);
      }

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

    @keyframes slideInRight {
      from {
        opacity: .4;
        transform: translateX(22px);
      }

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

    @keyframes zoomSpring {
      0% {
        opacity: .1;
        transform: scale(.82)
      }

      60% {
        transform: scale(1.04)
      }

      80% {
        transform: scale(.98)
      }

      100% {
        opacity: 1;
        transform: scale(1)
      }
    }

    @keyframes checkDraw {
      from {
        stroke-dashoffset: 40
      }

      to {
        stroke-dashoffset: 0
      }
    }

    @keyframes progressFill {
      from {
        width: 0;
        opacity: .5
      }

      to {
        opacity: 1
      }
    }

    @keyframes badgePulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(var(--R-rgb, .8, .2, .2), .45)
      }

      50% {
        box-shadow: 0 0 0 6px rgba(var(--R-rgb), 0)
      }
    }

    @keyframes pendingShimmer {
      0% {
        background-position: 200% center
      }

      100% {
        background-position: -200% center
      }
    }

    @keyframes navSlideIn {
      from {
        opacity: .1;
        transform: translateX(-14px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes dotWave {

      0%,
      100% {
        transform: translateY(0)
      }

      40% {
        transform: translateY(-7px)
      }

      60% {
        transform: translateY(-4px)
      }
    }

    @keyframes heroFloat {

      0%,
      100% {
        transform: translateY(0) rotate(-1deg)
      }

      50% {
        transform: translateY(-8px) rotate(1deg)
      }
    }

    @keyframes loginUp {
      from {
        opacity: .1;
        transform: translateY(40px) scale(.95)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes logoSpin {
      0% {
        opacity: .1;
        transform: rotate(-15deg) scale(.7)
      }

      60% {
        transform: rotate(5deg) scale(1.08)
      }

      100% {
        opacity: 1;
        transform: none
      }
    }

    @keyframes countUp {
      from {
        opacity: .1;
        transform: translateY(6px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes tabSlide {
      from {
        opacity: .1
      }

      to {
        opacity: 1
      }
    }

    @keyframes rippleOut {
      from {
        transform: scale(0);
        opacity: .5
      }

      to {
        transform: scale(3.5);
        opacity: 0
      }
    }

    @keyframes pulseRing {
      0% {
        box-shadow: 0 0 0 0 var(--Pl)
      }

      70% {
        box-shadow: 0 0 0 8px transparent
      }

      100% {
        box-shadow: 0 0 0 0 transparent
      }
    }

    /* ── Login screen orchestrated entrance ──────────────────────────────── */
    .login-logo {
      animation: logoSpin .7s cubic-bezier(.34, 1.4, .64, 1) forwards;
    }

    .login-title {
      animation: loginUp .5s .15s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .login-sub {
      animation: loginUp .5s .22s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .login-field {
      animation: loginUp .45s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .login-field:nth-child(1) {
      animation-delay: .28s;
    }

    .login-field:nth-child(2) {
      animation-delay: .36s;
    }

    .login-submit {
      animation: loginUp .45s .44s cubic-bezier(.34, 1.2, .64, 1) forwards;
      display: block !important;
      width: 100% !important;
    }

    /* ── Sidebar nav item stagger on load ───────────────────────────────── */
    .nav-item,
    .nv {
      animation: navSlideIn .4s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .nav-item:nth-child(1),
    .nv:nth-child(1) {
      animation-delay: .08s
    }

    .nav-item:nth-child(2),
    .nv:nth-child(2) {
      animation-delay: .12s
    }

    .nav-item:nth-child(3),
    .nv:nth-child(3) {
      animation-delay: .16s
    }

    .nav-item:nth-child(4),
    .nv:nth-child(4) {
      animation-delay: .20s
    }

    .nav-item:nth-child(5),
    .nv:nth-child(5) {
      animation-delay: .24s
    }

    .nav-item:nth-child(6),
    .nv:nth-child(6) {
      animation-delay: .28s
    }

    .nav-item:nth-child(7),
    .nv:nth-child(7) {
      animation-delay: .32s
    }

    .nav-item:nth-child(8),
    .nv:nth-child(8) {
      animation-delay: .36s
    }

    .nav-item:nth-child(9),
    .nv:nth-child(9) {
      animation-delay: .40s
    }

    /* ── View / tab content entrance ─────────────────────────────────────── */
    .view-enter {
      animation: slideInUp .38s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .tab-enter {
      animation: tabSlide .28s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    /* ═══════════════ FILTER BAR UNIFIED DESIGN ═══════════════ */
    .fbar-card {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 10px 14px;
      background: var(--sur2);
      border: 1px solid var(--bdr);
      border-radius: 12px;
      margin-bottom: 12px;
    }

    .fbar-label {
      font-size: 10px;
      font-weight: 800;
      color: var(--tx3);
      text-transform: uppercase;
      letter-spacing: .4px;
      white-space: nowrap;
    }

    .fbar-divider {
      width: 1px;
      height: 24px;
      background: var(--bdr);
      flex-shrink: 0;
    }

    .fbar-hint {
      font-size: 10px;
      color: var(--tx3);
      margin: -6px 2px 10px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* Modal body scrollable on small screens */
    #modalBody {
      max-height: 75vh;
      overflow-y: auto;
    }

    @media (max-width: 640px) {
      #modalBody {
        max-height: 80vh;
      }

      #modal {
        border-radius: 16px 16px 0 0 !important;
      }
    }

    /* Salary sheet card grid responsive */
    .pr-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px;
    }

    @media (max-width: 600px) {
      .pr-card-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
    }

    @media (max-width: 400px) {
      .pr-card-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Summary strip responsive */
    .pr-summary-strip {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    /* Task setup filter */
    .ts-filter-bar {
      background: var(--sur2);
      border: 1px solid var(--bdr);
      border-radius: 10px;
      padding: 10px 12px;
      margin-bottom: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    @media (max-width: 768px) {

      /* Disable tab slide animation on mobile — causes scroll jump */
      .tab-enter {
        animation: none !important;
      }

      .tab-pane {
        animation: none !important;
      }

      .tabpane.on {
        animation: none !important;
      }
    }

    /* ── Staggered card list ─────────────────────────────────────────────── */
    .stagger>*,
    .stagger-list>* {
      animation: slideInUp .42s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .stagger>*:nth-child(1) {
      animation-delay: .04s
    }

    .stagger>*:nth-child(2) {
      animation-delay: .09s
    }

    .stagger>*:nth-child(3) {
      animation-delay: .13s
    }

    .stagger>*:nth-child(4) {
      animation-delay: .17s
    }

    .stagger>*:nth-child(5) {
      animation-delay: .21s
    }

    .stagger>*:nth-child(6) {
      animation-delay: .25s
    }

    .stagger>*:nth-child(7) {
      animation-delay: .28s
    }

    .stagger>*:nth-child(8) {
      animation-delay: .31s
    }

    .stagger>*:nth-child(9) {
      animation-delay: .33s
    }

    .stagger>*:nth-child(n+10) {
      animation-delay: .35s
    }

    /* ── Card micro-interactions ─────────────────────────────────────────── */
    .card,
    .kpi,
    .dcard,
    .ck-card {
      transition: transform .18s cubic-bezier(.34, 1.4, .64, 1),
        box-shadow .18s ease !important;
    }

    .card:hover,
    .kpi:hover,
    .dcard:hover {
      transform: translateY(-3px) scale(1.008);
      box-shadow: 0 8px 28px rgba(0, 0, 0, .10) !important;
    }

    .card:active,
    .kpi:active {
      transform: scale(.97) !important;
    }

    /* ── KPI counter animation helper ───────────────────────────────────── */
    .kpi-counting {
      animation: countUp .4s cubic-bezier(.34, 1.4, .64, 1) forwards;
    }

    /* ── Progress bar animated fill ─────────────────────────────────────── */
    .prog-fill-anim {
      animation: progressFill .8s cubic-bezier(.4, 0, .2, 1) forwards !important;
    }

    /* ── Pending badge shimmer ──────────────────────────────────────────── */
    .badge-pending,
    span[style*="var(--R)"],
    span[style*="Pending"] {
      animation: badgePulse 2.4s ease infinite;
    }

    /* ── Done button ripple ─────────────────────────────────────────────── */
    .btn-ripple {
      position: relative;
      overflow: hidden;
    }

    .btn-ripple::after {
      content: '';
      position: absolute;
      inset: 50%;
      border-radius: 50%;
      background: rgba(255, 255, 255, .45);
      transform: scale(0);
      opacity: .5;
    }

    .btn-ripple:active::after {
      animation: rippleOut .5s cubic-bezier(0, 0, .2, 1) forwards;
    }


    /* ── Modal zoom spring ──────────────────────────────────────────────── */
    .modal-box.open {
      animation: zoomSpring .35s cubic-bezier(.34, 1.3, .64, 1) forwards !important;
    }

    @media (max-width:640px) {
      .modal-box.open {
        animation: sheetUp .32s cubic-bezier(.34, 1.2, .64, 1) forwards !important;
      }
    }

    /* ── Topbar slide down on load ──────────────────────────────────────── */
    .topbar {
      animation: slideInUp .4s .05s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    /* ── mob-nav bounce up ──────────────────────────────────────────────── */
    .mob-nav {
      animation: slideInUp .42s .1s cubic-bezier(.34, 1.4, .64, 1) forwards;
    }

    /* ── Anim-item (existing class used in lists) — enhanced ────────────── */


    /* ── Dot wave loader ────────────────────────────────────────────────── */
    .dot-wave {
      display: inline-flex;
      gap: 4px;
      align-items: center;
    }

    .dot-wave span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--P);
      display: inline-block;
      animation: dotWave .9s ease-in-out infinite;
    }

    .dot-wave span:nth-child(2) {
      animation-delay: .15s
    }

    .dot-wave span:nth-child(3) {
      animation-delay: .30s
    }

    /* ── Greeting typewriter cursor ─────────────────────────────────────── */
    .typing-cursor::after {
      content: '|';
      animation: fadein .7s ease infinite alternate;
      font-weight: 300;
      margin-left: 1px;
      color: var(--P);
    }

    /* ── Success checkmark SVG animation ────────────────────────────────── */
    .check-svg path {
      stroke-dasharray: 40;
      stroke-dashoffset: 40;
      animation: checkDraw .4s .1s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    /* ── Button press feedback ──────────────────────────────────────────── */
    .btn {
      transition: transform .1s, box-shadow .1s;
    }

    /* .btn:active: handled by mobile media block */
    .btn-sm:active {
      transform: scale(.93) !important;
    }

    /* ── Input focus glow ──────────────────────────────────────────────── */
    input:focus,
    select:focus,
    textarea:focus {
      transition: border-color .2s, box-shadow .2s !important;
      box-shadow: 0 0 0 3px var(--Pl) !important;
    }

    /* ── Attendance punch card glow on hover ─────────────────────────────── */
    .att-punch-card:hover,
    #dashPunchBtn:hover {
      animation: pulseRing 1.8s ease infinite;
    }

    /* ── Section headers slide in ────────────────────────────────────────── */
    .mod-head {
      animation: slideInUp .3s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .sec-title {
      animation: slideInLeft .3s .05s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    /* ── Empty state enhanced float ─────────────────────────────────────── */
    .empty-state i {
      animation: heroFloat 3.5s ease-in-out infinite;
    }

    .empty-state .msg {
      animation: slideInUp .5s .2s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    /* ── Reduced motion: respect system preference ───────────────────────── */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }


    /* ══════════════════════════════════════════════════════════════════════
       PERFORMANCE — Layout containment + compositor hints
    ══════════════════════════════════════════════════════════════════════ */
    /* contain: layout style REMOVED — caused blank mobile dashboard */
    #content {
      /* no containment */
    }

    /* Sidebar: promote to own compositor layer (avoid repaint during slide) */
    .sb {
      will-change: transform;
    }

    /* Modals: own layer (only when open) */

    .modal-box.open {
      will-change: transform, opacity;
    }

    /* Cards: hint GPU for hover transform */

    /* Only animate opacity+transform — no layout-triggering properties */

    /* Scrollable areas: smooth momentum */
    #content,
    .tw,
    .tabs {
      -webkit-overflow-scrolling: touch;
    }

    /* Image rendering: crisp on retina */
    img {
      image-rendering: -webkit-optimize-contrast;
    }

    /* ── Responsive Typography — fluid scale ────────────────────────────── */
    :root {
      --fs-xs: 11px;
      --fs-sm: 12.5px;
      --fs-md: 14px;
      --fs-lg: 16px;
      --fs-xl: 20px;
      --fs-2xl: 24px;
      --fs-3xl: 30px;
    }

    @media (min-width: 1200px) {
      :root {
        --fs-md: 14.5px;
        --fs-xl: 22px;
        --fs-2xl: 28px;
      }
    }

    /* ── Desktop (>1280px): wider content, better use of space ─────────── */
    @media (min-width: 1280px) {
      :root {
        --sbw: 240px;
      }

      .card {
        padding: 22px;
      }

      .kpi {
        padding: 20px 18px;
      }

      .kpi-val {
        font-size: 32px;
      }

      .mod-title {
        font-size: 22px;
      }

      .krow {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
      }

      .krow-3 {
        grid-template-columns: repeat(3, 1fr);
      }

      .krow-5 {
        grid-template-columns: repeat(5, 1fr);
      }

      .krow-6 {
        grid-template-columns: repeat(6, 1fr);
      }

      #content {
        padding: 24px 28px;
      }

      .tw thead th {
        font-size: 11px;
      }

      .tw tbody td {
        font-size: 13.5px;
      }
    }

    /* ── Tablet (641-1024px): optimized density ─────────────────────────── */
    @media (min-width: 641px) and (max-width: 1024px) {
      :root {
        --sbw: 210px;
      }

      .card {
        padding: 16px;
      }

      .kpi {
        padding: 15px 14px;
      }

      .kpi-val {
        font-size: 26px;
      }

      .krow {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }

      .krow-5,
      .krow-6 {
        grid-template-columns: repeat(3, 1fr);
      }

      #content {
        padding: 16px 18px;
      }

      /* Sidebar text: tighter */
      .sb-label {
        font-size: 11.5px;
      }

      .nv {
        padding: 9px 14px;
        font-size: 13px;
      }

      /* Tabs: allow horizontal scroll */
      .tabs {
        overflow-x: auto;
      }
    }

    /* ── Mobile (≤640px): touch-first, full-width ───────────────────────── */
    @media (max-width: 640px) {

      /* Better card spacing on mobile */
      .card {
        padding: 14px 14px;
        border-radius: 16px;
      }

      .kpi {
        padding: 14px 12px;
        border-radius: 14px;
      }

      .kpi-val {
        font-size: 24px;
      }

      .kpi-icon {
        width: 36px;
        height: 36px;
      }

      /* Tables: horizontal scroll with momentum */
      .tw {
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
      }

      /* Mod-head: tighter on mobile */
      .mod-head {
        gap: 8px;
        margin-bottom: 12px;
      }

      .mod-title {
        font-size: 17px;
        line-height: 1.25;
      }

      /* Filter bars: 2-col grid */
      .filter-bar {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
      }

      /* Better touch targets */
      .btn {
        min-height: 46px;
      }

      .btn-sm {
        min-height: 40px;
      }

      /* Content padding */
      #content {
        padding: 12px 12px 80px;
      }

      /* ANA selects: full width */
      .ana-sel {
        width: 100% !important;
        min-height: 46px;
        font-size: 15px;
      }

      /* Modal: full bottom sheet */
      .modal-title {
        font-size: 16px;
        font-weight: 800;
      }

      .modal-body {
        font-size: 14px;
        line-height: 1.6;
      }

      /* KPI row: 2 columns max */
      .krow,
      .krow-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
      }

      .krow-5,
      .krow-6 {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      /* Section headers */
      .sec-title {
        font-size: 13px;
      }

      /* Dashboard quick stats */
      .dash-sum-grid {
        grid-template-columns: 1fr !important;
      }

      /* Employee directory: 2-col */
      .emp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      /* Tab bar scrollable */
      .tabs {
        padding-bottom: 2px;
      }

      .tab {
        font-size: 11.5px;
        padding: 9px 11px;
        min-width: max-content;
      }
    }

    /* ── Tiny phone (≤375px): even tighter ──────────────────────────────── */
    @media (max-width: 375px) {
      .krow {
        grid-template-columns: 1fr !important;
      }

      .card {
        padding: 12px;
        border-radius: 14px;
      }

      .kpi-val {
        font-size: 22px;
      }

      .tab {
        font-size: 10.5px;
        padding: 8px 9px;
      }

      #content {
        padding: 10px 10px 76px;
      }
    }

    /* ── Focus accessibility ─────────────────────────────────────────────── */
    :focus-visible {
      outline: 2px solid var(--P);
      outline-offset: 2px;
      border-radius: 4px;
    }

    button:focus-visible,
    a:focus-visible {
      outline-offset: 3px;
    }


    /* ══════════════════════════════════════════════════════════════════════
       MOBILE PAYTM-STYLE POLISH + CROSS-DEVICE FIXES
    ══════════════════════════════════════════════════════════════════════ */

    /* ── Quick action tiles: consistent across all screens ─────────────── */
    #dashQuickAct button:active {
      transform: scale(.90) !important;
    }

    @media (max-width: 640px) {
      #dashQuickAct {
        grid-template-columns: repeat(4, 1fr) !important;
      }
    }

    /* ── Filter bars: proper 2-col wrap on mobile ────────────────────────── */
    @media (max-width: 640px) {

      /* All inline filter divs */
      [id$="Root"]>div[style*="display:flex"],
      [id$="Root"]>div[style*="display: flex"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        flex-wrap: unset !important;
      }

      /* Filter selects + inputs always full cell */
      .ana-sel,
      select,
      input[type="date"],
      input[type="month"] {
        width: 100% !important;
        box-sizing: border-box;
      }

      /* Sort/filter bars: horizontal scroll */
      div[style*="display:flex"][style*="gap:6px"],
      div[style*="display:flex"][style*="gap: 6px"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 4px;
        scrollbar-width: none;
      }
    }

    /* ── Checklist Today filter: clean card on mobile ────────────────────── */
    @media (max-width: 640px) {
      #ckFiltersWrap {
        background: var(--sur);
        border-radius: 16px;
        border: 1px solid var(--bdr);
        padding: 14px;
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      #ckFiltersWrap label {
        font-size: 12px;
        font-weight: 800;
        color: var(--tx3);
      }

      #ckFiltersWrap select,
      #ckFiltersWrap input {
        width: 100%;
      }
    }

    /* ── EM Dashboard filter: vertical stack on mobile ───────────────────── */
    @media (max-width: 640px) {

      #emRoot>div:first-child,
      [id$="AnaRoot"]>div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
      }

      #emRoot .ana-sel,
      [id$="AnaRoot"] .ana-sel {
        width: 100% !important;
        min-height: 46px;
      }
    }

    /* ── Dashboard mobile: full-width cards, better spacing ─────────────── */
    @media (max-width: 640px) {

      /* Hero greeting */
      .dash-hero {
        border-radius: 20px !important;
        padding: 20px 18px !important;
      }

      /* Punch card */
      #dashPunchCard {
        border-radius: 18px !important;
      }

      /* Lower card grid */
      #dashLower {
        grid-template-columns: 1fr !important;
      }

      /* Progress bar */
      #dashProgBar {
        height: 6px !important;
        border-radius: 3px;
      }

      /* Today's progress section */
      #dashTodayProg {
        padding: 14px 16px !important;
        border-radius: 16px !important;
      }
    }

    /* ── Attendance/leave forms: better mobile ───────────────────────────── */
    @media (max-width: 640px) {
      .att-form-grid {
        grid-template-columns: 1fr !important;
      }

      .leave-form-row {
        flex-direction: column !important;
        gap: 10px !important;
      }
    }

    /* ── Delegation cards: full-width on mobile ──────────────────────────── */
    @media (max-width: 640px) {
      .del-card-grid {
        grid-template-columns: 1fr !important;
      }

      .dcard .dc-act {
        flex-wrap: wrap !important;
      }

      .dcard .dc-act .btn {
        flex: 1 1 calc(50% - 6px) !important;
        text-align: center;
      }
    }

    /* ── Employee Directory: 2-col on mobile ─────────────────────────────── */
    @media (max-width: 640px) {
      .emp-dir-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
      }

      .emp-card .emp-name {
        font-size: 12px !important;
      }

      .emp-card .emp-role {
        font-size: 10.5px !important;
      }
    }

    
    /* ── Tablet (768–1024): hybrid desk layout ─────────────────────────── */
    @media (min-width: 768px) and (max-width: 1024px) {
      :root { --sbw: 72px; }
      .krow { grid-template-columns: repeat(2, 1fr) !important; }
      #dashQuickAct { grid-template-columns: repeat(4, 1fr) !important; }
      .chart-wrap { min-height: 220px; }
      .mod-head { flex-wrap: wrap; gap: 10px; }
      .pr-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }

    /* ── Large mobile / small tablet ───────────────────────────────────── */
    @media (max-width: 767px) {
      #dashQuickAct { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
      .qa-tile { padding: 12px 4px !important; min-height: 72px; }
      .qa-lbl { font-size: 10px !important; line-height: 1.2; }
      .krow { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
      .att-punch-card { flex-direction: column; align-items: stretch !important; }
      .att-punch-card .btn-checkin { width: 100%; justify-content: center; }
    }

    /* ── Analytics: single column on mobile ──────────────────────────────── */
    @media (max-width: 640px) {
      .ana-charts-grid {
        grid-template-columns: 1fr !important;
      }

      .chart-wrap {
        margin-bottom: 12px;
      }
    }

    /* ── Modal improvements for mobile ──────────────────────────────────── */
    @media (max-width: 640px) {
      .modal-box.open {
        max-height: 85svh !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
      }

      .modal-title {
        font-size: 16px !important;
        font-weight: 800 !important;
        padding: 16px 20px 14px !important;
        flex-shrink: 0;
        border-bottom: 1px solid var(--bdr);
      }

      .modal-body {
        overflow-y: auto !important;
        flex: 1;
        padding: 16px 20px !important;
        -webkit-overflow-scrolling: touch;
      }

      .modal-foot {
        flex-shrink: 0;
        padding: 12px 20px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
        border-top: 1px solid var(--bdr);
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
      }

      .modal-foot .btn {
        width: 100% !important;
        min-height: 48px !important;
      }

      .modal-foot select,
      .modal-foot input {
        width: 100% !important;
      }
    }

    /* ── Topbar: better mobile ───────────────────────────────────────────── */
    @media (max-width: 640px) {
      .topbar {
        padding: 0 14px;
        height: 54px;
      }

      .tb-title {
        font-size: 16px;
        font-weight: 800;
      }
    }

    /* ── Mobile nav: elevated with safe area ─────────────────────────────── */
    @media (max-width: 640px) {
      .mob-nav {
        padding-bottom: env(safe-area-inset-bottom, 8px);
        box-shadow: 0 -2px 20px rgba(0, 0, 0, .08);
        border-top: 1px solid var(--bdr);
      }

      .mob-nav-item {
        gap: 3px;
      }

      .mob-nav-label {
        font-size: 9.5px;
        font-weight: 700;
      }

      .mob-nav-icon {
        font-size: 20px;
      }
    }

    /* ── Tablet (641-1024px): balanced layout ────────────────────────────── */
    @media (min-width: 641px) and (max-width: 1024px) {
      #dashQuickAct {
        grid-template-columns: repeat(8, 1fr) !important;
      }

      .krow {
        grid-template-columns: repeat(3, 1fr) !important;
      }

      .krow-6 {
        grid-template-columns: repeat(4, 1fr) !important;
      }
    }

    /* ── Paytm-style touch feedback ─────────────────────────────────────── */
    @media (max-width: 640px) {

      .btn,
      button,
      .nv,
      .mob-nav-item {
        -webkit-tap-highlight-color: transparent;
      }

      .btn:active {
        transform: scale(.94) !important;
      }

      .nv:active {
        opacity: .7;
      }
    }

    /* ── Week view calendar: proper mobile layout ──────────────────────── */
    @media (max-width: 640px) {
      .week-cols {
        grid-template-columns: 1fr !important;
      }

      .week-day {
        border-radius: 14px !important;
        margin-bottom: 10px;
      }
    }


    /* ══════════════════════════════════════════════════════════════════════
       SAFE ANIMATIONS — Work on ALL devices, never hide content
       Rule: never use opacity:0 as starting point on critical containers
       Use transform only for entrance effects, opacity only for card items
    ══════════════════════════════════════════════════════════════════════ */

    /* ── Login screen: smooth orchestrated entrance ─────────────────────── */
    @keyframes loginBoxIn {
      from {
        opacity: .8;
        transform: translateY(12px) scale(.98)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes loginFieldIn {
      from {
        opacity: .2;
        transform: translateX(-10px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes loginBtnIn {
      from {
        opacity: .2;
        transform: translateY(8px) scale(.96)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .lbox {
      animation: loginBoxIn .55s cubic-bezier(.34, 1.15, .64, 1) .05s forwards;
    }

    .login-field {
      animation: loginFieldIn .4s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .login-field:nth-child(1) {
      animation-delay: .3s
    }

    .login-field:nth-child(2) {
      animation-delay: .4s
    }

    .login-submit {
      animation: loginBtnIn .4s cubic-bezier(.34, 1.2, .64, 1) .5s forwards;
    }

    /* ── Safe card entrance — translateY only, starts VISIBLE ───────────── */
    @keyframes cardSlideUp {
      from {
        transform: translateY(20px)
      }

      to {
        transform: none
      }
    }

    /* ── Stagger for .anim-item — opacity goes 0→1 FAST then slide ─────── */

    /* Max stagger: first 8 items get delay, rest show immediately */
    .anim-item:nth-child(1) {
      animation-delay: .03s
    }

    .anim-item:nth-child(2) {
      animation-delay: .07s
    }

    .anim-item:nth-child(3) {
      animation-delay: .11s
    }

    .anim-item:nth-child(4) {
      animation-delay: .15s
    }

    .anim-item:nth-child(5) {
      animation-delay: .18s
    }

    .anim-item:nth-child(6) {
      animation-delay: .21s
    }

    .anim-item:nth-child(7) {
      animation-delay: .24s
    }

    .anim-item:nth-child(n+8) {
      animation-delay: .26s
    }

    /* ── KPI cards: pop in from below ───────────────────────────────────── */
    .kpi {
      animation: kpiPop .4s cubic-bezier(.34, 1.3, .64, 1) forwards;
    }

    .krow>.kpi:nth-child(1) {
      animation-delay: .05s
    }

    .krow>.kpi:nth-child(2) {
      animation-delay: .10s
    }

    .krow>.kpi:nth-child(3) {
      animation-delay: .15s
    }

    .krow>.kpi:nth-child(4) {
      animation-delay: .20s
    }

    /* Quick tile animation via .qa-tile in CSS — uses kpiPop without opacity:0 */
    .qa-tile:nth-child(1) {
      animation-delay: .05s
    }

    .qa-tile:nth-child(2) {
      animation-delay: .10s
    }

    .qa-tile:nth-child(3) {
      animation-delay: .15s
    }

    .qa-tile:nth-child(4) {
      animation-delay: .19s
    }

    .qa-tile:nth-child(5) {
      animation-delay: .23s
    }

    .qa-tile:nth-child(6) {
      animation-delay: .27s
    }

    .qa-tile:nth-child(7) {
      animation-delay: .30s
    }

    .qa-tile:nth-child(8) {
      animation-delay: .33s
    }

    /* ── Cards slide up (transform only, never opacity:0 on containers) ── */
    .card {
      animation: cardSlideUp .35s cubic-bezier(.34, 1.2, .64, 1);
    }

    /* ── Sidebar: items slide in from left ──────────────────────────────── */
    .nv:nth-child(1) {
      animation-delay: .06s
    }

    .nv:nth-child(2) {
      animation-delay: .10s
    }

    .nv:nth-child(3) {
      animation-delay: .14s
    }

    .nv:nth-child(4) {
      animation-delay: .18s
    }

    .nv:nth-child(5) {
      animation-delay: .22s
    }

    .nv:nth-child(6) {
      animation-delay: .26s
    }

    .nv:nth-child(7) {
      animation-delay: .29s
    }

    .nv:nth-child(8) {
      animation-delay: .32s
    }

    /* ── Topbar: slide down ─────────────────────────────────────────────── */
    .topbar {
      animation: slideInUp .35s .02s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .mob-nav {
      animation: slideInUp .38s .08s cubic-bezier(.34, 1.4, .64, 1) forwards;
    }

    /* ── Mobile card touch interactions ─────────────────────────────────── */
    @media (max-width: 640px) {
      .card:active {
        transform: scale(.97) !important;
        transition: transform .1s;
      }

      .kpi:active {
        transform: scale(.94) !important;
      }

      .btn:active {
        transform: scale(.93) !important;
      }

      .dcard:active {
        transform: scale(.97) !important;
      }

      #dashQuickAct>button:active {
        transform: scale(.88) !important;
      }
    }

    /* ── Hover effects: desktop only (no hover on touch) ───────────────── */
    @media (hover: hover) {
      .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .10) !important;
      }

      .kpi:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, .08) !important;
      }

      .dcard:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, .08) !important;
      }

      .nv:hover {
        padding-left: 20px !important;
      }

      .btn:hover {
        filter: brightness(1.06);
      }
    }

    .card,
    .kpi,
    .dcard,
    .nv,
    .btn {
      transition: transform .18s cubic-bezier(.34, 1.3, .64, 1), box-shadow .18s ease,
        padding .15s ease, filter .15s ease;
    }

    /* ── Tab switch: subtle slide (safe — not on #content) ─────────────── */
    /* .tab-pane.active animation removed — was hiding content on mobile */

    /* ── Modal: slide up on open ────────────────────────────────────────── */
    @media (max-width: 640px) {
      .modal-box.open {
        animation: sheetUp .32s cubic-bezier(.34, 1.2, .64, 1);
      }
    }

    @media (min-width: 641px) {
      .modal-box.open {
        animation: zoomSpring .3s cubic-bezier(.34, 1.3, .64, 1);
      }
    }

    /* ── Dashboard hero: float ──────────────────────────────────────────── */
    .dash-hero {
      animation: fadeSlideUp .5s cubic-bezier(.34, 1.15, .64, 1) .1s forwards;
    }

    /* ── Toast: always animated ─────────────────────────────────────────── */
    .toast {
      animation: toastIn .35s cubic-bezier(.34, 1.3, .64, 1) forwards;
    }


    /* ══════════════════════════════════════════════════════════════════════
       FINAL ANIMATION SYSTEM — Safe on ALL devices
       Rule: opacity NEVER starts at 0 for content containers
    ══════════════════════════════════════════════════════════════════════ */

    /* anim-item: ONLY transform slide, opacity stays at 1 — always visible */
    .anim-item {
      animation: slideInUp .35s cubic-bezier(.34, 1.2, .64, 1) forwards;
      /* No opacity change — content is always readable even if animation skipped */
    }

    /* Stagger delays for .anim-item */
    .anim-item:nth-child(1) {
      animation-delay: .04s
    }

    .anim-item:nth-child(2) {
      animation-delay: .08s
    }

    .anim-item:nth-child(3) {
      animation-delay: .12s
    }

    .anim-item:nth-child(4) {
      animation-delay: .15s
    }

    .anim-item:nth-child(5) {
      animation-delay: .18s
    }

    .anim-item:nth-child(6) {
      animation-delay: .20s
    }

    .anim-item:nth-child(7) {
      animation-delay: .22s
    }

    .anim-item:nth-child(n+8) {
      animation-delay: .24s
    }



    /* ── Quick Action Tiles: Paytm-style, pure CSS animations, no JS handlers ── */
    .qa-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 14px 6px;
      background: var(--sur);
      border: none;
      border-radius: 18px;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
      transition: transform .18s cubic-bezier(.34, 1.4, .64, 1), box-shadow .18s;
      -webkit-tap-highlight-color: transparent;
      /* NO will-change — causes blank on low-end mobile */
    }

    .qa-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #fff;
      flex-shrink: 0;
    }

    .qa-lbl {
      font-size: 10.5px;
      font-weight: 800;
      color: var(--tx2);
      text-align: center;
      line-height: 1.2;
      word-break: break-word;
    }

    /* Hover — desktop only */
    @media (hover: hover) {
      .qa-tile:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
      }
    }

    /* Touch feedback */
    .qa-tile:active {
      transform: scale(.88) !important;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .08) !important;
    }

    /* Larger on desktop */
    @media (min-width: 641px) {
      .qa-tile {
        padding: 18px 10px;
        border-radius: 20px;
      }

      .qa-icon {
        width: 52px;
        height: 52px;
        font-size: 24px;
        border-radius: 16px;
      }

      .qa-lbl {
        font-size: 12px;
      }

      #dashQuickAct {
        grid-template-columns: repeat(8, 1fr) !important;
      }
    }


    /* ═══════════════════════════════════════════════════════════════
       MOBILE — Final clean responsive system
       All devices ≤640px get this treatment
    ═══════════════════════════════════════════════════════════════ */
    @media (max-width:640px) {

      /* Layout */
      #content {
        padding: 12px 12px 80px !important;
        overflow-x: hidden !important;
      }

      .topbar {
        height: 54px !important;
      }

      .mob-nav {
        padding-bottom: env(safe-area-inset-bottom, 8px) !important;
      }

      /* Cards */
      .card {
        padding: 14px !important;
        border-radius: 16px !important;
        margin-bottom: 10px;
      }

      .kpi {
        padding: 13px 11px !important;
        border-radius: 14px !important;
      }

      .kpi-val {
        font-size: 23px !important;
      }

      .kpi-lbl {
        font-size: 10px !important;
      }

      .kpi-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
      }

      /* KPI grid: 2-col */
      .krow,
      .krow-3,
      .krow-5,
      .krow-6 {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
      }

      /* Quick action tiles */
      #dashQuickAct {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
      }

      .qa-tile {
        padding: 11px 4px !important;
        border-radius: 13px !important;
      }

      .qa-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        border-radius: 12px !important;
      }

      .qa-lbl {
        font-size: 10px !important;
      }

      /* Hero + attendance */
      .dash-hero {
        border-radius: 18px !important;
        padding: 16px !important;
      }

      .btn-checkin {
        min-height: 48px !important;
        font-size: 14px !important;
      }

      /* Typography */
      .mod-title {
        font-size: 16px !important;
      }

      .sec-title {
        font-size: 12.5px !important;
      }

      h2,
      h3 {
        font-size: 17px !important;
      }

      /* Tabs: horizontal scroll */
      .tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
      }

      .tab {
        font-size: 11px !important;
        padding: 8px 10px !important;
        white-space: nowrap;
        flex-shrink: 0;
      }

      /* Tables */
      .tw {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }

      .tw table {
        min-width: 380px;
      }

      .tw thead th {
        font-size: 10px !important;
        padding: 6px 7px !important;
      }

      .tw tbody td {
        font-size: 11.5px !important;
        padding: 7px 7px !important;
      }

      /* Buttons */
      .btn {
        min-height: 44px;
        font-size: 13px !important;
      }

      .btn-sm {
        min-height: 38px;
        font-size: 12px !important;
      }

      .btn-xs {
        padding: 5px 10px !important;
        font-size: 11px !important;
      }

      /* Selects + inputs: prevent iOS zoom */
      input,
      select,
      textarea {
        font-size: 16px !important;
      }

      .ana-sel {
        min-height: 42px !important;
        width: 100% !important;
      }

      /* Section headers */
      .mod-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
      }

      /* Delegation cards */
      .dcard {
        border-radius: 14px !important;
      }

      .dcard .dc-act {
        flex-wrap: wrap !important;
      }

      /* Employee directory: 2-col */
      .emp-dir-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
      }

      /* Modal */
      .modal-title {
        font-size: 15px !important;
        font-weight: 800 !important;
      }

      .modal-body {
        font-size: 13.5px !important;
        line-height: 1.6;
      }

      .modal-foot .btn {
        width: 100% !important;
      }

      /* Touch feedback */
      .btn:active,
      .card:active {
        transform: scale(.97) !important;
        transition: transform .1s;
      }

      .qa-tile:active {
        transform: scale(.88) !important;
      }

      /* Week view */
      .wk-grid {
        grid-template-columns: 1fr !important;
      }

      /* Progress */
      .prog-bar {
        height: 6px !important;
      }

      /* Skeleton */
      .sk {
        border-radius: 8px !important;
      }
    }

    /* Tiny phones ≤375px */
    @media (max-width:375px) {
      #content {
        padding: 10px 10px 76px !important;
      }

      .qa-tile {
        padding: 9px 3px !important;
      }

      .qa-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
      }

      .qa-lbl {
        font-size: 9px !important;
      }

      .tab {
        font-size: 10px !important;
        padding: 7px 8px !important;
      }
    }

    /* Desktop enhancements */
    @media (min-width:1280px) {
      #content {
        padding: 24px 28px !important;
      }

      .krow {
        grid-template-columns: repeat(4, 1fr);
      }

      .card {
        padding: 22px;
      }

      #dashQuickAct {
        grid-template-columns: repeat(8, 1fr) !important;
      }
    }



    /* Safe keyframes — transform only, NEVER opacity:0 */
    @keyframes mobSlideUp {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes mobSlideIn {
      from {
        transform: translateX(-14px)
      }

      to {
        transform: none
      }
    }

    @keyframes mobPop {
      from {
        transform: scale(.88) translateY(6px)
      }

      60% {
        transform: scale(1.03)
      }

      to {
        transform: none
      }
    }

    @keyframes mobFadeIn {
      from {
        opacity: .2
      }

      to {
        opacity: 1
      }
    }

    @keyframes mobHeroPop {
      from {
        transform: translateY(-10px) scale(.97)
      }

      to {
        transform: none
      }
    }

    /* ── Dashboard hero ── */
    .dash-hero {
      animation: mobHeroPop .4s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    /* ── KPI cards: stagger pop ── */
    .kpi:nth-child(1) {
      animation: mobPop .35s .04s cubic-bezier(.34, 1.3, .64, 1) forwards;
    }

    .kpi:nth-child(2) {
      animation: mobPop .35s .09s cubic-bezier(.34, 1.3, .64, 1) forwards;
    }

    .kpi:nth-child(3) {
      animation: mobPop .35s .14s cubic-bezier(.34, 1.3, .64, 1) forwards;
    }

    .kpi:nth-child(4) {
      animation: mobPop .35s .18s cubic-bezier(.34, 1.3, .64, 1) forwards;
    }

    .kpi:nth-child(5) {
      animation: mobPop .35s .22s cubic-bezier(.34, 1.3, .64, 1) forwards;
    }

    .kpi:nth-child(6) {
      animation: mobPop .35s .25s cubic-bezier(.34, 1.3, .64, 1) forwards;
    }

    /* ── Cards: slide up ── */
    .card {
      animation: mobSlideUp .38s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .dcard {
      animation: mobSlideUp .38s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    /* ── Quick tiles: stagger pop ── */
    .qa-tile:nth-child(1) {
      animation-delay: .05s
    }

    .qa-tile:nth-child(2) {
      animation-delay: .10s
    }

    .qa-tile:nth-child(3) {
      animation-delay: .14s
    }

    .qa-tile:nth-child(4) {
      animation-delay: .18s
    }

    .qa-tile:nth-child(5) {
      animation-delay: .22s
    }

    .qa-tile:nth-child(6) {
      animation-delay: .26s
    }

    .qa-tile:nth-child(7) {
      animation-delay: .29s
    }

    .qa-tile:nth-child(8) {
      animation-delay: .32s
    }

    /* ── anim-item: slide up stagger ── */
    .anim-item {
      animation: mobSlideUp .35s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .anim-item:nth-child(1) {
      animation-delay: .03s
    }

    .anim-item:nth-child(2) {
      animation-delay: .07s
    }

    .anim-item:nth-child(3) {
      animation-delay: .10s
    }

    .anim-item:nth-child(4) {
      animation-delay: .14s
    }

    .anim-item:nth-child(5) {
      animation-delay: .17s
    }

    .anim-item:nth-child(6) {
      animation-delay: .20s
    }

    .anim-item:nth-child(n+7) {
      animation-delay: .22s
    }

    /* ── Sidebar nav: slide in stagger ── */
    .nv:nth-child(1) {
      animation-delay: .05s
    }

    .nv:nth-child(2) {
      animation-delay: .09s
    }

    .nv:nth-child(3) {
      animation-delay: .13s
    }

    .nv:nth-child(4) {
      animation-delay: .17s
    }

    .nv:nth-child(5) {
      animation-delay: .20s
    }

    .nv:nth-child(6) {
      animation-delay: .23s
    }

    .nv:nth-child(7) {
      animation-delay: .25s
    }

    .nv:nth-child(n+8) {
      animation-delay: .27s
    }

    /* ── Login box ── */
    .lbox {
      animation: mobSlideUp .5s cubic-bezier(.34, 1.15, .64, 1) forwards;
    }

    /* ── Login form fields: stagger ── */
    .l-field:nth-child(1) {
      animation: mobSlideIn .4s .25s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .l-field:nth-child(2) {
      animation: mobSlideIn .4s .35s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    /* ── Topbar: slide down ── */
    .topbar {
      animation: mobHeroPop .35s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    /* ── Mobile bottom nav: slide up ── */
    .mob-nav {
      animation: mobSlideUp .4s .1s cubic-bezier(.34, 1.4, .64, 1) forwards;
    }

    /* ── Splash dots: wave animation ── */
    @keyframes dotWave {

      0%,
      100% {
        transform: translateY(0)
      }

      40% {
        transform: translateY(-8px)
      }
    }

    .fk-dot {
      animation: dotWave .9s ease-in-out infinite !important;
    }

    .fk-dot:nth-child(2) {
      animation-delay: .15s !important;
    }

    .fk-dot:nth-child(3) {
      animation-delay: .30s !important;
    }

    /* ── Transition: smooth interactions ── */
    .card,
    .kpi,
    .dcard,
    .qa-tile,
    .btn,
    .nv {
      transition: transform .18s cubic-bezier(.34, 1.4, .64, 1) !important;
    }

    @media (hover:hover) {
      .card:hover {
        transform: translateY(-2px);
      }

      .kpi:hover {
        transform: translateY(-2px);
      }

      .qa-tile:hover {
        transform: translateY(-3px);
      }
    }

    .card:active {
      transform: scale(.97) !important;
    }

    .kpi:active {
      transform: scale(.95) !important;
    }

    .qa-tile:active {
      transform: scale(.88) !important;
    }

    .btn:active {
      transform: scale(.94) !important;
    }

    /* ── Tab switch: subtle slide ── */
    .tab-pane.active>* {
      animation: mobSlideUp .28s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    /* ── Reduce motion: respect system pref ── */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
      }
    }


    /* ═══════════════════════════════════════════════════════════════════
       ANIMATION SYSTEM — Safe on all devices
       KEY RULE: Interactive elements (buttons/nav/tiles) NEVER use
       transform-based animations — it shifts their tap area on mobile.
       Only non-interactive containers use transform animations.
    ═══════════════════════════════════════════════════════════════════ */

    /* ── Safe keyframes — only opacity (never shifts tap area) ── */
    @keyframes safeIn {
      from {
        opacity: .05
      }

      to {
        opacity: 1
      }
    }

    @keyframes safeSlide {
      from {
        opacity: .05;
        transform: translateY(12px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes safePop {
      from {
        opacity: .05;
        transform: scale(.94) translateY(8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes dotWave {

      0%,
      100% {
        transform: translateY(0)
      }

      45% {
        transform: translateY(-9px)
      }
    }

    /* ── Splash dots ── */
    .fk-dot {
      animation: dotWave .9s ease-in-out infinite !important;
    }

    .fk-dot:nth-child(2) {
      animation-delay: .18s !important;
    }

    .fk-dot:nth-child(3) {
      animation-delay: .36s !important;
    }

    /* ── Login box (non-interactive container — safe to animate) ── */
    .lbox {
      animation: safeSlide .5s cubic-bezier(.34, 1.1, .64, 1) forwards;
    }

    .l-title {
      animation: safeIn .4s .2s forwards;
    }

    .l-sub {
      animation: safeIn .4s .3s forwards;
    }

    /* Login fields: fade only — NO translateX that shifts tap area */
    .l-field {
      animation: safeIn .4s forwards;
    }

    .l-field:nth-child(1) {
      animation-delay: .3s
    }

    .l-field:nth-child(2) {
      animation-delay: .4s
    }

    /* Login button: NO animation — always tappable immediately */
    /* .l-btn - intentionally NO animation */

    /* ── Dashboard hero (non-interactive) ── */
    .dash-hero {
      animation: safeSlide .45s cubic-bezier(.34, 1.1, .64, 1) forwards;
    }

    /* ── Cards: fade + slide up (card bodies are not buttons) ── */
    .kpi {
      animation: safePop .4s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    .card {
      animation: safeSlide .38s cubic-bezier(.34, 1.1, .64, 1) forwards;
    }

    .dcard {
      animation: safeSlide .38s cubic-bezier(.34, 1.1, .64, 1) forwards;
    }

    /* Stagger for KPI cards */
    .krow .kpi:nth-child(1) {
      animation-delay: .04s
    }

    .krow .kpi:nth-child(2) {
      animation-delay: .09s
    }

    .krow .kpi:nth-child(3) {
      animation-delay: .13s
    }

    .krow .kpi:nth-child(4) {
      animation-delay: .17s
    }

    .krow .kpi:nth-child(5) {
      animation-delay: .21s
    }

    .krow .kpi:nth-child(6) {
      animation-delay: .24s
    }

    /* ── Quick tiles: ONLY opacity — transform would shift tap area ── */
    .qa-tile {
      animation: safeIn .35s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    .qa-tile:nth-child(1) {
      animation-delay: .05s
    }

    .qa-tile:nth-child(2) {
      animation-delay: .10s
    }

    .qa-tile:nth-child(3) {
      animation-delay: .14s
    }

    .qa-tile:nth-child(4) {
      animation-delay: .18s
    }

    .qa-tile:nth-child(5) {
      animation-delay: .22s
    }

    .qa-tile:nth-child(6) {
      animation-delay: .26s
    }

    .qa-tile:nth-child(7) {
      animation-delay: .29s
    }

    .qa-tile:nth-child(8) {
      animation-delay: .32s
    }

    /* ── Sidebar nav: ONLY opacity — transform shifts tap area ── */
    .nv {
      animation: safeIn .3s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    .nv:nth-child(1) {
      animation-delay: .05s
    }

    .nv:nth-child(2) {
      animation-delay: .08s
    }

    .nv:nth-child(3) {
      animation-delay: .11s
    }

    .nv:nth-child(4) {
      animation-delay: .14s
    }

    .nv:nth-child(5) {
      animation-delay: .17s
    }

    .nv:nth-child(6) {
      animation-delay: .20s
    }

    .nv:nth-child(7) {
      animation-delay: .22s
    }

    .nv:nth-child(n+8) {
      animation-delay: .24s
    }

    /* ── Topbar: fade only ── */
    .topbar {
      animation: safeIn .3s forwards;
    }

    .mob-nav {
      animation: safeIn .4s .1s forwards;
    }

    /* ── List items ── */
    .anim-item {
      animation: safeSlide .35s cubic-bezier(.34, 1.1, .64, 1) forwards;
    }

    .anim-item:nth-child(1) {
      animation-delay: .03s
    }

    .anim-item:nth-child(2) {
      animation-delay: .07s
    }

    .anim-item:nth-child(3) {
      animation-delay: .10s
    }

    .anim-item:nth-child(4) {
      animation-delay: .13s
    }

    .anim-item:nth-child(5) {
      animation-delay: .16s
    }

    .anim-item:nth-child(n+6) {
      animation-delay: .19s
    }

    /* ── Touch feedback — CSS transitions (fire on tap, not on load) ── */
    .btn {
      transition: background .15s, transform .1s, opacity .1s;
    }

    .qa-tile {
      transition: opacity .15s, transform .12s;
    }

    .nv {
      transition: background .15s, color .15s;
    }

    .card,
    .kpi {
      transition: box-shadow .15s, transform .15s;
    }

    @media (hover:hover) {
      .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
      }

      .kpi:hover {
        transform: translateY(-2px);
      }

      .qa-tile:hover {
        transform: translateY(-3px);
      }
    }

    /* Mobile tap: only opacity change — NEVER transform (would shift layout) */
    @media (max-width:640px) {
      .btn:active {
        opacity: .7 !important;
      }

      .qa-tile:active {
        opacity: .6 !important;
      }

      .nv:active {
        opacity: .6 !important;
      }
    }

    /* ── Tab switch: content area fade ── */
    .tab-pane.active {
      animation: safeIn .25s forwards;
    }

    /* ── Reduce motion ── */
    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
      }
    }


    /* ══════════════════════════════════════════════════════════════════════
       MOBILE BOTTOM NAV — ISE-style, Joolry brand colors
    ══════════════════════════════════════════════════════════════════════ */
    .mob-nav {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 90;
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(20px) saturate(1.5);
      -webkit-backdrop-filter: blur(20px) saturate(1.5);
      border-top: 1px solid rgba(0, 95, 115, .12);
      box-shadow: 0 -4px 24px rgba(0, 0, 0, .08);
      transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    }

    body.dark .mob-nav {
      background: rgba(14, 30, 50, .92);
      border-top-color: rgba(255, 255, 255, .08);
    }

    .mob-nav.nav-hidden {
      transform: translateY(105%);
    }

    .mob-nav-inner {
      height: 58px;
      display: flex;
      align-items: stretch;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mob-nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      border: none;
      background: none;
      cursor: pointer;
      font-size: 10px;
      font-weight: 700;
      color: var(--tx3);
      position: relative;
      -webkit-tap-highlight-color: transparent;
      transition: color .2s;
    }

    .mob-nav-item i {
      font-size: 20px;
      transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
    }

    .mob-nav-item.active {
      color: var(--P);
    }

    .mob-nav-item.active i {
      transform: translateY(-2px) scale(1.08);
      color: var(--P);
    }

    .mob-nav-item.active::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 3px;
      border-radius: 0 0 4px 4px;
      background: var(--P);
    }

    .mob-nav-pill {
      width: 44px;
      height: 30px;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s cubic-bezier(.34, 1.4, .64, 1);
    }

    .mob-nav-item.active .mob-nav-pill {
      background: var(--Pl);
      box-shadow: 0 2px 10px rgba(0, 95, 115, .18);
    }

    .mob-nav-item:hover .mob-nav-pill {
      background: var(--Pl);
    }

    .mob-nav-item:active i {
      transform: scale(.85) !important;
    }

    /* ── Mobile pull-to-refresh indicator ── */
    #fkPtr {
      display: none;
      position: fixed;
      top: 60px;
      left: 50%;
      transform: translateX(-50%) translateY(-10px);
      background: var(--sur);
      border-radius: 50%;
      width: 38px;
      height: 38px;
      box-shadow: var(--shad2);
      z-index: 99;
      align-items: center;
      justify-content: center;
    }

    #fkPtr.show {
      display: flex;
      animation: safeIn .2s forwards;
    }

    /* ── Mobile page transition ── */
    @keyframes mobFadeUp {
      from {
        opacity: .9;
        transform: translateY(5px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    /* mob-page animation kept but starts near-opaque so no blank flash */

    /* ══════════════════════════════════════════════════════════════════════
       @media (max-width: 640px) — Full mobile shell
    ══════════════════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {

      /* Shell layout — fixed topbar + scroll content + fixed bottom nav */
      .scr#sApp {
        position: fixed;
        inset: 0;
        height: 100svh;
        overflow: hidden;
        display: flex;
        flex-direction: row;
      }

      .main {
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100svh;
        overflow: hidden;
      }

      .topbar {
        flex-shrink: 0;
        height: 56px;
        padding: 0 14px;
        padding-top: env(safe-area-inset-top, 0px);
        z-index: 50;
      }

      #content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 14px 12px calc(74px + env(safe-area-inset-bottom, 0px)) !important;
        scrollbar-width: none;
      }

      #content::-webkit-scrollbar {
        display: none;
      }

      /* Show bottom nav on mobile */
      .mob-nav {
        display: block !important;
      }

      .safe-bot {
        display: block;
        height: env(safe-area-inset-bottom, 0px);
      }

      /* Sidebar: slide in from left */
      .sb {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100svh;
        z-index: var(--z-sb, 100);
        transform: translateX(-100%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
        box-shadow: none;
        width: 276px !important;
      }

      .sb.mob-open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(0, 0, 0, .18);
      }

      .ham {
        display: flex !important;
      }

      /* Hide sidebar toggle on mobile (use ham button) */
      .sb-toggle,
      .tb-divider,
      .tb-search {
        display: none !important;
      }

      .tb-breadcrumb {
        display: none;
      }

      .tb-title {
        font-size: 16px;
        font-weight: 800;
      }

      /* Touch targets */
      .btn {
        min-height: 48px;
        padding: 12px 18px;
        font-size: 14px;
        border-radius: 14px;
      }

      .btn-sm {
        min-height: 40px;
        padding: 8px 14px;
        font-size: 13px;
      }

      .btn-xs {
        min-height: 36px;
        font-size: 12px;
      }

      .nv {
        min-height: 52px;
        padding: 13px 18px;
        font-size: 14px;
      }

      /* Prevent iOS zoom on inputs */
      input,
      select,
      textarea {
        font-size: 16px !important;
      }

      select,
      input[type="text"],
      input[type="date"],
      input[type="month"],
      input[type="email"],
      input[type="password"],
      input[type="time"] {
        min-height: 48px;
        border-radius: 14px;
      }

      /* Cards */
      .card {
        border-radius: 18px !important;
        padding: 14px !important;
      }

      .kpi {
        border-radius: 14px !important;
        padding: 13px 11px !important;
      }

      .kpi-val {
        font-size: 24px !important;
      }

      /* KPI grid: 2-col */
      .krow,
      .krow-3,
      .krow-5,
      .krow-6 {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
      }

      /* Quick tiles: 4-col */
      #dashQuickAct {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
      }

      .qa-tile {
        padding: 12px 4px !important;
        border-radius: 14px !important;
      }

      .qa-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        border-radius: 12px !important;
      }

      .qa-lbl {
        font-size: 10px !important;
      }

      /* Tabs: horizontal scroll */
      .tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
      }

      .tab {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 11px !important;
        padding: 8px 10px !important;
      }

      /* Tables */
      .tw {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }

      .tw table {
        min-width: 380px;
      }

      .tw thead th {
        font-size: 10px !important;
        padding: 6px 7px !important;
      }

      .tw tbody td {
        font-size: 11.5px !important;
        padding: 7px 7px !important;
      }

      .modal-box::before {
        display: none !important;
      }

      .modal-title {
        font-size: 16px !important;
        font-weight: 800 !important;
      }

      .modal-foot .btn {
        width: 100% !important;
      }

      /* Active feedback: opacity (never transform — shifts tap area) */
      .btn:active {
        opacity: .75;
        transition: opacity .08s;
      }

      .card:active {
        opacity: .92;
        transition: opacity .1s;
      }

      .qa-tile:active {
        opacity: .65;
        transition: opacity .08s;
      }

      .mob-nav-item:active i {
        transform: scale(.85) !important;
      }

      /* Mod-head: stack on mobile */
      .mod-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
      }

      /* Hero card */
      .dash-hero {
        border-radius: 20px !important;
        padding: 18px 16px !important;
      }
    }

    @media (max-width: 375px) {
      #content {
        padding: 12px 10px calc(72px + env(safe-area-inset-bottom, 0px)) !important;
      }

      .qa-tile {
        padding: 10px 3px !important;
      }

      .qa-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
      }

      .qa-lbl {
        font-size: 9px !important;
      }
    }


    /* ── Splash: always fullscreen, same on mobile + desktop ── */
    #fkSplash {
      position: fixed !important;
      inset: 0 !important;
      z-index: 9999 !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
    }

    #fkSplash .splash-logo {
      animation: splashPop .5s cubic-bezier(.34, 1.56, .64, 1) both;
    }

    #fkSplash .splash-title {
      animation: safeIn .4s .3s forwards;
    }

    #fkSplash .splash-msg {
      animation: safeIn .4s .5s forwards;
      color: rgba(255, 255, 255, .75);
      font-size: 13px;
      font-weight: 600;
      margin-top: 4px;
    }

    #fkSplash .fk-dots {
      display: flex;
      gap: 7px;
      margin-top: 20px;
    }

    .fk-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .9);
      animation: dotWave .9s ease-in-out infinite !important;
    }

    .fk-dot:nth-child(2) {
      animation-delay: .18s !important;
    }

    .fk-dot:nth-child(3) {
      animation-delay: .36s !important;
    }

    @keyframes dotWave {

      0%,
      100% {
        transform: translateY(0);
        opacity: .5;
      }

      45% {
        transform: translateY(-10px);
        opacity: 1;
      }
    }


    /* ── Sign Out overlay — mobile fix ── */
    .so-ov {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(4px);
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .so-ov.on {
      display: flex !important;
    }

    .so-box {
      background: var(--sur);
      border-radius: 24px;
      padding: 32px 24px 24px;
      text-align: center;
      max-width: 320px;
      width: 100%;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
      animation: safePop .3s cubic-bezier(.34, 1.3, .64, 1) forwards;
    }

    .so-box h3 {
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 8px;
      color: var(--tx);
    }

    .so-box p {
      font-size: 13.5px;
      color: var(--tx3);
      margin-bottom: 24px;
      line-height: 1.5;
    }

    .so-btns {
      display: flex;
      gap: 10px;
    }

    .so-btns .btn {
      flex: 1;
      min-height: 48px !important;
    }

    @media (max-width:640px) {
      .so-box {
        padding: 28px 20px 20px;
      }

      .so-btns {
        flex-direction: column;
      }

      .so-btns .btn {
        width: 100%;
      }
    }
  
/* ═══════════════════════════════════════════════════════════════════════════
   JOOLRY DAILY — DEFINITIVE RESPONSIVE + RICH UI LAYER (v1.2)
   Loads last → wins over older rules. Devices: phone / tablet / desktop
═══════════════════════════════════════════════════════════════════════════ */

/* ── App shell ─────────────────────────────────────────────────────────── */
#sApp {
  display: flex !important;
  flex-direction: row !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100% !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}
.sb {
  width: var(--sbw, 260px) !important;
  min-width: var(--sbw, 260px) !important;
  max-width: var(--sbw, 260px) !important;
  flex-shrink: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--sb) !important;
  border-right: 1px solid var(--bdr) !important;
  z-index: var(--z-sb, 100) !important;
}
.main-area, .app-main, #mainWrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}
#content {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 24px 28px 32px !important;
  background: var(--bg) !important;
  max-width: 100% !important;
}

/* ── Dashboard grids ───────────────────────────────────────────────────── */
.dash-qa-grid,
#dashQuickAct {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
  width: 100% !important;
}
.dash-qa-grid .qa-tile,
#dashQuickAct .qa-tile {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100px !important;
  padding: 16px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--sur) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 14px !important;
  box-shadow: var(--shad) !important;
  cursor: pointer !important;
}
.dash-qa-grid .qa-icon,
#dashQuickAct .qa-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 18px !important;
  margin: 0 auto 10px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .12) !important;
}
.dash-qa-grid .qa-lbl,
#dashQuickAct .qa-lbl {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--tx2) !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

.krow,
#dashKrow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 22px !important;
  width: 100% !important;
}
.krow .kpi,
#dashKrow .kpi {
  min-width: 0 !important;
  min-height: 132px !important;
  padding: 20px 18px !important;
  background: var(--sur) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 16px !important;
  box-shadow: var(--shad) !important;
}

/* Charts row — force 2 col desktop */
#content > div[style*="grid-template-columns:1fr 1fr"],
.dash-charts-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
  width: 100% !important;
}
.chart-wrap {
  min-width: 0 !important;
  min-height: 300px !important;
  padding: 20px !important;
  background: var(--sur) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 16px !important;
  box-shadow: var(--shad) !important;
}

/* Bottom 3 cards */
#content > div[style*="grid-template-columns:1fr 1fr 1fr"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Punch card full width */
.att-punch-card {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── TABLET (768–1099) ─────────────────────────────────────────────────── */
@media (max-width: 1099px) and (min-width: 768px) {
  :root { --sbw: 220px; }
  #content { padding: 18px 18px 28px !important; }
  .dash-qa-grid, #dashQuickAct {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .krow, #dashKrow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #content > div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── MOBILE (≤767) ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #sApp { flex-direction: row !important; }

  /* Sidebar off-canvas */
  .sb {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(280px, 86vw) !important;
    min-width: 0 !important;
    max-width: min(280px, 86vw) !important;
    transform: translateX(-105%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: var(--shad3) !important;
    z-index: 400 !important;
  }
  .sb.mob-open {
    transform: translateX(0) !important;
    box-shadow: 8px 0 40px rgba(15, 23, 42, .25) !important;
  }

  #content {
    padding: 12px 12px 96px !important;
    width: 100% !important;
  }

  .dash-qa-grid, #dashQuickAct {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .dash-qa-grid .qa-tile, #dashQuickAct .qa-tile {
    min-height: 88px !important;
    padding: 12px 6px !important;
  }
  .dash-qa-grid .qa-icon, #dashQuickAct .qa-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }
  .dash-qa-grid .qa-lbl, #dashQuickAct .qa-lbl {
    font-size: 11px !important;
  }

  .krow, #dashKrow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .krow .kpi, #dashKrow .kpi {
    min-height: 110px !important;
    padding: 14px 12px !important;
  }
  .kpi-val { font-size: 24px !important; }

  /* Stack charts */
  #content > div[style*="grid-template-columns:1fr 1fr"],
  .dash-charts-row {
    grid-template-columns: 1fr !important;
  }
  .chart-wrap { min-height: 240px !important; }

  #content > div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .att-punch-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .att-punch-card .btn-checkin,
  .att-punch-card button {
    width: 100% !important;
    justify-content: center !important;
  }

  .mod-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Hide desktop-only chrome bits if needed */
  .tb-search { max-width: 140px !important; }
}

/* ── SMALL PHONE (≤400) ────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .dash-qa-grid, #dashQuickAct {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #content { padding: 10px 10px 96px !important; }
}

/* ── Tables horizontal scroll on small screens ─────────────────────────── */
@media (max-width: 900px) {
  .tbl-wrap, .table-scroll, .muster-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── Rich visual polish ────────────────────────────────────────────────── */
.qa-tile:active { transform: scale(.97) !important; }
.kpi-ico {
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06) !important;
}
.btn-checkin {
  min-height: 44px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
}
.card, .chart-wrap, .kpi {
  transition: box-shadow .2s ease, transform .15s ease !important;
}



/* ═══════════════════════════════════════════════════════════════════════════
   NATIVE APP MOBILE LOOK — Prompt home-app inspired (≤767px)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Safe areas (notch / home indicator) */
  #sApp {
    padding-top: env(safe-area-inset-top, 0) !important;
  }

  /* ── Topbar = native app header ── */
  .tb, #tb, .topbar {
    height: auto !important;
    min-height: 56px !important;
    padding: 10px 14px 12px !important;
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    background: #fff !important;
    border-bottom: none !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .06) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }
  .tb-left {
    gap: 10px !important;
    align-items: center !important;
  }
  .tb-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #0F172A !important;
    line-height: 1.2 !important;
  }
  .tb-breadcrumb, #tbDate {
    font-size: 11px !important;
    color: #94A3B8 !important;
    font-weight: 500 !important;
  }
  .ico-btn.ham, #hamBtn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #F1F5F9 !important;
    border: none !important;
    color: #334155 !important;
    font-size: 16px !important;
  }
  .tb-actions {
    gap: 6px !important;
  }
  .tb-ico, .tb-actions .ico-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #F1F5F9 !important;
    border: none !important;
  }
  /* Search as pill (Prompt style) */
  .tb-search, .search-wrap, #globalSearch, input[type="search"] {
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    border: none !important;
    height: 40px !important;
    font-size: 13px !important;
    padding: 0 14px 0 36px !important;
  }

  /* Content — airy native */
  #content {
    padding: 16px 16px calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    background: #F8FAFC !important;
  }

  /* Greeting — big native title */
  #content h1, .dash-greet h1, .dash-hello {
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    color: #0F172A !important;
    margin-bottom: 4px !important;
  }

  /* ── Punch card — premium floating ── */
  .att-punch-card {
    background: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 24px rgba(15, 23, 42, .08) !important;
    padding: 18px 18px !important;
    margin-bottom: 16px !important;
  }
  .btn-checkin {
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, .35) !important;
  }

  /* ── KPI — soft app cards ── */
  .krow, #dashKrow {
    gap: 12px !important;
  }
  .krow .kpi, #dashKrow .kpi {
    background: #fff !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .06) !important;
    padding: 16px 14px !important;
    min-height: 118px !important;
  }
  .kpi-val {
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
  }
  .kpi-lbl {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #94A3B8 !important;
  }
  .kpi-ico {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  /* ── Quick tiles — app icon grid ── */
  .dash-qa-grid, #dashQuickAct {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .dash-qa-grid .qa-tile, #dashQuickAct .qa-tile {
    background: #fff !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .06) !important;
    min-height: 96px !important;
    padding: 14px 8px !important;
  }
  .dash-qa-grid .qa-icon, #dashQuickAct .qa-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .15) !important;
  }
  .dash-qa-grid .qa-lbl, #dashQuickAct .qa-lbl {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
  }

  /* Cards list style */
  .card, .chart-wrap {
    background: #fff !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .06) !important;
  }

  /* ── Pill chips / filters (Prompt tabs) ── */
  .chip, .badge, .tab-btn, .ana-sel,
  .filter-pill, [class*="pill"] {
    border-radius: 999px !important;
  }
  .tab-btn, .filter-chip {
    background: #F1F5F9 !important;
    border: none !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #64748B !important;
  }
  .tab-btn.active, .filter-chip.active, .tab-btn.on {
    background: #3B82F6 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, .3) !important;
  }

  /* Module title */
  .mod-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
  }
  .mod-sub {
    font-size: 13px !important;
    color: #94A3B8 !important;
  }

  /* ── Bottom nav — iOS / Prompt native ── */
  .mob-nav {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 200 !important;
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-top: 1px solid rgba(226, 232, 240, .8) !important;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, .06) !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
  }
  .mob-nav-inner {
    display: flex !important;
    width: 100% !important;
    justify-content: space-around !important;
    align-items: center !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
  .mob-nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    color: #94A3B8 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 4px 0 !important;
    min-width: 0 !important;
  }
  .mob-nav-pill {
    width: 48px !important;
    height: 32px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    transition: background .2s, color .2s, transform .15s !important;
  }
  .mob-nav-item.active {
    color: #3B82F6 !important;
  }
  .mob-nav-item.active .mob-nav-pill {
    background: rgba(59, 130, 246, .12) !important;
    color: #2563EB !important;
    transform: scale(1.05);
  }

  /* Buttons full-width friendly */
  .btn-wide, .l-btn {
    border-radius: 14px !important;
    height: 48px !important;
    font-weight: 700 !important;
  }

  /* List rows — native list */
  .list-row, .task-row, .del-row, .ann-card {
    background: #fff !important;
    border: none !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05) !important;
    padding: 14px 16px !important;
  }

  /* Hide breadcrumb noise on tiny screens */
  .tb-breadcrumb { display: none !important; }
}

/* Extra small */
@media (max-width: 380px) {
  .dash-qa-grid, #dashQuickAct {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #content { padding-left: 12px !important; padding-right: 12px !important; }
  .tb-title { font-size: 18px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   JOOLRY MOBILE — ALL VIEWS ALIGNED (Uizard-style + luxury brand)
   Scope: ≤767px — every module, list, form, modal, table
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Brand tokens on mobile ── */
  :root {
    --j-ink: #111111;
    --j-cream: #F8F6F3;
    --j-soft: #F1F5F9;
    --j-card: #FFFFFF;
    --j-line: rgba(17, 17, 17, .06);
    --j-blue: #3B82F6;
  }

  body, #sApp, #content {
    background: var(--j-soft) !important;
  }

  /* ── Universal content rhythm ── */
  #content {
    padding: 14px 14px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #content > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Headers / mod-head — every view ── */
  .mod-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
  }
  .mod-head > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .mod-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--j-ink) !important;
    line-height: 1.2 !important;
  }
  .mod-title i {
    margin-right: 8px !important;
    opacity: .85 !important;
  }
  .mod-sub {
    font-size: 12.5px !important;
    color: #94A3B8 !important;
    margin-top: 2px !important;
  }

  /* ── Cards — Uizard soft elevation ── */
  .card, .chart-wrap, .kpi, .att-punch-card,
  .lbox, .ann-card, .del-card, .task-card,
  .pr-card-grid > .card, .emp-card, .leave-card {
    background: var(--j-card) !important;
    border: 1px solid var(--j-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(17, 17, 17, .04) !important;
  }

  /* ── Grids collapse to 1 col ── */
  .krow, #dashKrow {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .dash-qa-grid, #dashQuickAct {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .dash-charts-row,
  #content div[style*="grid-template-columns:1fr 1fr"],
  #content div[style*="grid-template-columns:1fr 1fr 1fr"],
  .pr-card-grid,
  .emp-grid, .dir-grid,
  .ana-grid, .stats-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .pr-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Tables → horizontal scroll + compact ── */
  table {
    min-width: 520px !important;
    font-size: 12px !important;
  }
  .tbl-wrap, .table-scroll, .muster-wrap, .data-table-wrap,
  div:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -14px !important;
    padding: 0 14px !important;
    width: calc(100% + 28px) !important;
    max-width: none !important;
  }
  thead th {
    font-size: 10px !important;
    padding: 10px 8px !important;
    white-space: nowrap !important;
  }
  tbody td {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  /* ── Forms — full width native ── */
  input, select, textarea, .ana-sel {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important; /* prevents iOS zoom */
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748B !important;
    margin-bottom: 6px !important;
    display: block !important;
  }
  .form-row, .field-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  .form-row > *, .field-row > * {
    width: 100% !important;
  }

  /* ── Buttons — touch targets ── */
  .btn, button.btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 650 !important;
  }
  .btn-sm {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12.5px !important;
  }
  .btn-wide, .l-btn {
    width: 100% !important;
    min-height: 48px !important;
  }
  .btn-checkin {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
  }

  /* ── Filter / tab pills ── */
  .tabs, .filter-row, .chip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .tabs::-webkit-scrollbar, .filter-row::-webkit-scrollbar { display: none !important; }
  .tab-btn, .filter-chip, .chip {
    flex-shrink: 0 !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #fff !important;
    border: 1px solid var(--j-line) !important;
    color: #64748B !important;
  }
  .tab-btn.active, .tab-btn.on, .filter-chip.active {
    background: var(--j-ink) !important;
    color: #fff !important;
    border-color: var(--j-ink) !important;
  }

  /* ── List rows (checklist, delegation, leave, ann) ── */
  .task-row, .del-row, .list-row, .leave-row, .ann-card,
  .check-item, .feed-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
    background: #fff !important;
    border: 1px solid var(--j-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 6px rgba(17, 17, 17, .03) !important;
  }
  .task-row > div, .del-row > div {
    min-width: 0 !important;
  }

  /* ── Attendance calendar / muster ── */
  .cal-grid, .muster-grid {
    overflow-x: auto !important;
  }

  /* ── Analytics cards ── */
  .ana-card, .stat-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* ── Modal / dialogs — centered mobile sheet ── */
  .modal, .dlg, [class*="modal"], .overlay-box {
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    margin: 16px !important;
    border-radius: 20px !important;
    padding: 20px !important;
  }
  .modal-actions, .dlg-actions {
    display: flex !important;
    gap: 10px !important;
  }
  .modal-actions .btn, .dlg-actions .btn {
    flex: 1 !important;
  }

  /* ── Sign-out / confirm dialog polish ── */
  .confirm-box, .logout-dlg {
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(17, 17, 17, .2) !important;
  }

  /* ── Sidebar drawer ── */
  .sb {
    border-radius: 0 20px 20px 0 !important;
  }

  /* ── Section titles ── */
  .sec-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--j-ink) !important;
    margin-bottom: 12px !important;
  }

  /* ── Empty states ── */
  .empty-state {
    padding: 40px 20px !important;
    text-align: center !important;
  }
  .empty-state i {
    font-size: 40px !important;
    color: #CBD5E1 !important;
  }

  /* ── Profile / header chips ── */
  .sb-prof {
    border-radius: 14px !important;
  }

  /* ── Joolry accent on primary CTAs ── */
  .btn:not(.btn-outline):not(.btn-ghost):not(.l-btn) {
    background: var(--j-ink) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(17, 17, 17, .2) !important;
  }
  .btn:not(.btn-outline):not(.btn-ghost):not(.l-btn):hover {
    background: #000 !important;
  }
  .btn-checkin {
    background: var(--j-blue) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, .35) !important;
  }
  .btn-checkin.out {
    background: #F59E0B !important;
  }

  /* ── Bottom nav brand ── */
  .mob-nav-item.active {
    color: var(--j-ink) !important;
  }
  .mob-nav-item.active .mob-nav-pill {
    background: rgba(17, 17, 17, .08) !important;
    color: var(--j-ink) !important;
  }

  /* ── Sticky action bars inside modules ── */
  .sticky-actions {
    position: sticky !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(12px) !important;
    padding: 10px 0 !important;
    z-index: 20 !important;
  }

  /* Prevent horizontal page scroll */
  html, body, #sApp, #content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}


    .so-ov {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9500;
      background: rgba(15, 23, 42, .55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .so-ov.on {
      display: flex !important;
    }
    .so-box {
      background: #fff;
      border-radius: 20px;
      padding: 24px 22px;
      width: 100%;
      max-width: 360px;
      box-shadow: 0 24px 64px rgba(15, 23, 42, .25);
      animation: soPop .22s ease;
    }
    @keyframes soPop {
      from { opacity: 0; transform: scale(.94) translateY(8px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .so-btns {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }
    .so-btns .btn {
      flex: 1;
      min-height: 44px;
      border-radius: 12px;
      font-weight: 700;
    }
    body.dark .so-box { background: #1E293B; }


/* ── MOBILE MENU + CUTOFF FIX (critical) ── */
@media (max-width: 767px) {
  .sb {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    height: 100dvh !important;
    width: min(300px, 88vw) !important;
    min-width: 0 !important;
    max-width: min(300px, 88vw) !important;
    transform: translateX(-110%) !important;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1) !important;
    z-index: 500 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
    border-right: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }
  .sb.mob-open {
    transform: translateX(0) !important;
    box-shadow: 12px 0 48px rgba(15, 23, 42, .28) !important;
  }

  .mob-ov {
    z-index: 450 !important;
  }
  .mob-ov.on {
    display: block !important;
    opacity: 1 !important;
  }

  /* Main area full width — no sidebar space reserved */
  .main-area, .app-main, #mainWrap, #sApp > :not(.sb):not(.mob-ov) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  #sApp {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
  }
  /* Topbar + content take full width */
  .tb, #tb, .topbar, #content {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Prevent content cut-off — soft rules only */
  #content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 12px 12px calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #content img, #content canvas {
    max-width: 100% !important;
  }
  .krow, #dashKrow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .dash-qa-grid, #dashQuickAct {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  /* Forms: stack fields */
  .form-g, .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .form-g .fgrp, .fgrp {
    width: 100% !important;
  }
  /* Leave / setup date+time row can stay flex */
  .fgrp > div[style*="display:flex"] {
    flex-wrap: wrap !important;
  }
  input[type="date"], input[type="time"], input[type="text"], input[type="email"],
  input[type="password"], select, textarea {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Tables scroll inside wrapper only */
  .tbl-wrap, .table-scroll, .muster-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }


  /* Tables stay scrollable without page cut */
  .tbl-wrap, .table-scroll, .muster-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  table {
    max-width: none !important; /* allow internal scroll */
  }

  /* Ham button always visible */
  .ham, #hamBtn, .ico-btn.ham {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 60 !important;
  }

  /* Bottom nav above content, below sidebar */
  .mob-nav {
    z-index: 300 !important;
  }
}


.sb-brand-ver, .app-version, .portal-ver, [data-version] { display: none !important; }
.l-sub { letter-spacing: .18em !important; text-transform: uppercase !important; }


/* ═══ MOBILE ALIGNMENT FIX v3 — modals, forms, dashboard ═══ */
@media (max-width: 767px) {
  /* Modal = bottom sheet style, full width, no cut-off */
  .modal-ov.on {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .modal-box.open {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92svh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
  }
  .modal-title {
    padding: 16px 16px 12px !important;
    font-size: 16px !important;
  }
  .modal-body {
    padding: 14px 16px !important;
    overflow-x: hidden !important;
  }
  .modal-foot {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .modal-foot .btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  /* All form rows stack */
  .frow, .frow-3, .frow-4 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .fgrp {
    width: 100% !important;
    min-width: 0 !important;
  }
  .fgrp input, .fgrp select, .fgrp textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* Dashboard spacing — content not hidden under bottom nav */
  #content {
    padding: 12px 14px calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .krow, #dashKrow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .krow .kpi, #dashKrow .kpi, #dashKrow .sk {
    min-height: 100px !important;
    border-radius: 16px !important;
  }
  .dash-qa-grid, #dashQuickAct {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .att-punch-card {
    margin-bottom: 14px !important;
  }

  /* Sign-out box */
  .so-box {
    max-width: calc(100vw - 32px) !important;
  }

  /* ── Mobile layout alignment fixes (dashboard / leave / checklist / headers) ── */
  .mod-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .mod-head .mod-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }
  .mod-head .mod-sub {
    font-size: 12px !important;
  }
  .mod-head .btn,
  .mod-head-right {
    width: 100% !important;
  }
  .mod-head .btn {
    justify-content: center !important;
    min-height: 42px !important;
  }
  .mod-head-right {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  /* Critical: forms must stack on mobile (matches working Fresko sportal) */
  .frow,
  .frow-3,
  .frow-4 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .frow .fgrp,
  .frow-3 .fgrp,
  .frow-4 .fgrp {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  /* Section titles / checklist headers */
  .sec-title {
    font-size: 14px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .card .sec-title {
    padding: 0 !important;
  }

  /* Task setup grid — single column, full width */
  .csetup-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .csetup-grid > .card {
    width: 100% !important;
    max-width: 100% !important;
  }
  .csetup-grid .fgrp {
    width: 100% !important;
  }
  .csetup-grid input[type="date"],
  .csetup-grid input[type="time"],
  .csetup-grid select,
  .csetup-grid input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }
  /* Start date + time stack on mobile */
  .csetup-grid .cs-dt-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .csetup-grid .cs-dt-wrap input[type="date"],
  .csetup-grid .cs-dt-wrap input[type="time"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Leave request modal form */
  .leave-req-form {
    width: 100% !important;
  }
  .leave-req-form .fgrp label {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  .leave-req-form select,
  .leave-req-form input,
  .leave-req-form textarea {
    border-radius: 10px !important;
  }
  /* Stack From/To dates on narrow phones */
  .leave-req-form > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Tabs bar — horizontal scroll, no overflow */
  .tabs, .tab-bar, .mtabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
  }
  .tabs .tab, .tab-bar .tab, .mtabs .tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  /* Checklist / task rows */
  .task-row, .list-row, .leave-row {
    padding: 12px !important;
  }
  .task-row .tr-title, .list-row .lr-title {
    font-size: 13px !important;
  }

  /* Filter bars */
  .fbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .fbar label {
    font-size: 12px !important;
  }
  .fbar input, .fbar select {
    min-height: 40px !important;
    font-size: 15px !important;
  }

  /* Prevent horizontal scroll from wide content */
  .card, .chart-wrap, .table-card, .tw {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  table {
    min-width: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FINAL MOBILE FORCE-ALIGN — recoveryapp-inspired (highest priority)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  #sApp, #sApp.on, .scr#sApp, .main {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Content — edge padding + space for bottom nav */
  #content, .content {
    padding: 12px 12px calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #content .card, #content > div, .kpi, .att-punch-card, .sec-card, .lower-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Page / module headers stack like recovery .page-hd */
  .mod-head, .page-hd, .sec-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .mod-head > div:first-child,
  .mod-head-right { width: 100% !important; }
  .mod-head .btn, .mod-head button,
  .page-actions .btn {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }
  .sec-title { font-size: 14px !important; flex-wrap: wrap !important; }

  /* Forms — single column (recovery .form-row → 1fr) */
  .frow, .frow-3, .frow-4, .form-g, .form-row, .form-row-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .fgrp, .frow .fgrp, .form-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
  .fgrp input, .fgrp select, .fgrp textarea,
  .form-input,
  input[type="date"], input[type="time"], input[type="text"],
  input[type="email"], input[type="password"], input[type="number"],
  select, textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important; /* no iOS zoom */
    box-sizing: border-box !important;
  }

  /* Leave + task setup forms */
  .leave-req-form, .csetup-grid {
    width: 100% !important;
    max-width: 100% !important;
  }
  .leave-req-form .frow,
  .leave-req-form .fgrp { width: 100% !important; flex-direction: column !important; }
  .leave-req-form .tip {
    font-size: 11px !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  .csetup-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .csetup-grid > * { width: 100% !important; max-width: 100% !important; }
  .cs-dt-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .cs-dt-wrap input { width: 100% !important; }

  /* Dashboard KPI grid */
  .krow, #dashKrow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .kpi {
    padding: 14px !important;
    min-width: 0 !important;
  }
  .kpi-val { font-size: 22px !important; }
  .kpi-lbl { font-size: 11px !important; }

  /* Cards */
  .card, .card-sm, .att-punch-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* Tables — horizontal scroll (recovery style) */
  .tbl-wrap, .table-wrap, .tbl-scroll {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 10px !important;
  }
  table.tbl, table.data-table, .tbl {
    min-width: 560px !important;
    font-size: 12px !important;
  }
  .tbl td, .tbl th,
  table.tbl td, table.tbl th {
    padding: 9px 10px !important;
  }

  /* Filter pills — horizontal scroll */
  .filter-row, .pills, .chip-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  .filter-row::-webkit-scrollbar,
  .pills::-webkit-scrollbar { display: none !important; }

  /* Modals = bottom sheet (recovery .modal-overlay / .modal-box) */
  .modal-ov.on, .modal-overlay.on, .modal-overlay.open {
    align-items: flex-end !important;
    justify-content: flex-end !important;
    padding: 0 !important;
  }
  .modal-box.open, .modal-box.wide.open, .modal-box.xl.open {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92svh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    animation: joolryModalUp .28s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
  }
  @keyframes joolryModalUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .modal-title, .modal-hd {
    font-size: 16px !important;
    padding: 14px 18px !important;
  }
  .modal-body {
    padding: 16px 18px !important;
    overflow-x: hidden !important;
  }
  .modal-foot, .modal-ft {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .modal-foot .btn, .modal-ft .btn {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    flex: 1 !important;
  }

  /* Bottom nav — native app tab bar */
  .mob-nav {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 200 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-top: 1px solid rgba(0,0,0,.06) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,.06) !important;
  }
  body.dark .mob-nav, [data-theme="dark"] .mob-nav {
    background: rgba(20,22,28,.92) !important;
    border-top-color: rgba(255,255,255,.08) !important;
  }
  .mob-nav-inner {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    height: 56px !important;
    max-width: 100% !important;
    padding: 0 4px !important;
  }
  .mob-nav-item {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 6px 2px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }
  .mob-nav-item i, .mob-nav-pill i {
    font-size: 18px !important;
  }
  .mob-nav-pill {
    width: 40px !important;
    height: 28px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Sidebar — off-canvas drawer on mobile */
  .sb {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100svh !important;
    width: min(86vw, 300px) !important;
    min-width: 0 !important;
    max-width: 300px !important;
    transform: translateX(-105%) !important;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1) !important;
    z-index: 400 !important;
    box-shadow: none !important;
  }
  .sb.mob-open {
    transform: translateX(0) !important;
    box-shadow: 8px 0 40px rgba(0,0,0,.22) !important;
  }
  #mobOv.on, #sbOverlay.on, .mob-ov.on, .sb-overlay.on {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 350 !important;
  }
  .main {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .sb-toggle { display: none !important; }
  .ham, #hamBtn { display: inline-flex !important; }

  /* Native-feel cards */
  .card, .card-sm, .att-punch-card, .sec-card {
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04) !important;
  }
  .card:hover, .kpi:hover {
    transform: none !important;
  }

  /* Dashboard greeting full bleed feel */
  .dash-greet, .dash-hello-card {
    width: 100% !important;
    border-radius: 16px !important;
  }

  /* Any inline multi-column grids → stack */
  #content [style*="grid-template-columns:1fr 1fr 1fr"],
  #content [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #content [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }

  /* ── Mark Team Attendance — native card rows on mobile ── */
  #tamStats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #tamStats > div {
    padding: 12px 8px !important;
  }
  #tamBulkBar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #tamBulkBar input[type="time"],
  #tamBulkBar button {
    flex: 1 1 auto !important;
    min-height: 40px !important;
  }
  #tamList > div {
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }
  #tamList [id^="tamh_"] {
    padding: 12px 14px !important;
  }
  /* Each staff row stacks: name on top, actions full width below */
  #tamList .adm-body > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  #tamList .tam-actions {
    width: 100% !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }
  #tamList .tam-actions .tam-time,
  #tamList .tam-actions .tam-sel {
    flex: 1 1 42% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    font-size: 16px !important;
  }
  #tamList .tam-actions .tam-btn {
    flex: 1 1 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }
  #tamSortBar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }
  #tamSortBar .tsb {
    flex-shrink: 0 !important;
  }
  /* Filters row */
  .ana-sel, input.ana-sel, select.ana-sel {
    min-height: 42px !important;
    font-size: 15px !important;
  }

  /* Attendance tabs scroll */
  .tabs, .tab-row, [class*="tab-bar"] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Punch / check-in cards full width */
  .att-punch-card, .punch-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Checklist task cards */
  .task-card, .cmt-card, .cl-card {
    border-radius: 14px !important;
    padding: 12px !important;
  }

  /* Larger tap targets for icon buttons */
  .ico-btn, .act-btn {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Hide desktop-only bits */
  .hide-sm, .hide-mobile { display: none !important; }
}

/* ═══ Desktop sidebar collapse / expand — highest priority ═══ */
@media (min-width: 768px) {
  #sApp.on {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  .sb {
    position: relative !important;
    transform: none !important;
    height: 100vh !important;
    width: var(--sbw, 260px) !important;
    min-width: var(--sbw, 260px) !important;
    max-width: var(--sbw, 260px) !important;
    z-index: 20 !important;
    overflow-x: hidden !important;
    transition: width .25s cubic-bezier(.4, 0, .2, 1),
                min-width .25s cubic-bezier(.4, 0, .2, 1),
                max-width .25s cubic-bezier(.4, 0, .2, 1) !important;
  }

  /* ── EXPANDED (default) ── */
  #sApp:not(.sb-collapsed) .sb {
    width: var(--sbw, 260px) !important;
    min-width: var(--sbw, 260px) !important;
    max-width: var(--sbw, 260px) !important;
  }
  #sApp:not(.sb-collapsed) .nv {
    font-size: 13px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 9px 14px !important;
  }
  #sApp:not(.sb-collapsed) .nv i {
    font-size: 14px !important;
  }
  #sApp:not(.sb-collapsed) .sb-brand > div,
  #sApp:not(.sb-collapsed) .sb-brand-txt,
  #sApp:not(.sb-collapsed) .sb-prof-info,
  #sApp:not(.sb-collapsed) .nv-section-label,
  #sApp:not(.sb-collapsed) .sb-ft {
    display: block !important;
  }
  #sApp:not(.sb-collapsed) .sb-prof > i.fa-chevron-right {
    display: inline-block !important;
  }
  #sApp:not(.sb-collapsed) .nv-tag,
  #sApp:not(.sb-collapsed) .nv-badge {
    display: inline-flex !important;
    position: static !important;
  }

  /* ── COLLAPSED (icon rail) ── */
  #sApp.sb-collapsed .sb {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
  }
  #sApp.sb-collapsed .sb-brand > div,
  #sApp.sb-collapsed .sb-brand-txt,
  #sApp.sb-collapsed .sb-brand-text,
  #sApp.sb-collapsed .sb-prof-info,
  #sApp.sb-collapsed .nv-section-label,
  #sApp.sb-collapsed .sb-ft {
    display: none !important;
  }
  #sApp.sb-collapsed .sb-prof > i.fa-chevron-right {
    display: none !important;
  }
  #sApp.sb-collapsed .nv {
    justify-content: center !important;
    font-size: 0 !important;
    padding: 10px 8px !important;
    gap: 0 !important;
  }
  #sApp.sb-collapsed .nv i {
    font-size: 15px !important;
  }
  #sApp.sb-collapsed .nv-tag,
  #sApp.sb-collapsed .nv-badge {
    position: absolute !important;
    top: 4px !important;
    right: 2px !important;
    font-size: 8px !important;
    padding: 1px 5px !important;
    margin: 0 !important;
  }

  .sb-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .ham, #hamBtn { display: none !important; }
  #mobOv, #sbOverlay, .mob-ov, .sb-overlay {
    display: none !important;
  }
}

/* Tablet polish (recovery 769–1024 range simplified) */
@media (min-width: 641px) and (max-width: 900px) {
  #content, .content {
    padding: 16px 16px 24px !important;
  }
  .krow, #dashKrow {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .frow-3, .frow-4 {
    flex-wrap: wrap !important;
  }
  .frow-3 .fgrp, .frow-4 .fgrp {
    flex: 1 1 45% !important;
    min-width: 140px !important;
  }
}

/* ═══ Mobile-first polish v20 ═══ */
@media (max-width: 768px) {
  body { -webkit-tap-highlight-color: transparent; }
  #content, .content, .main-area {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mod-head {
    padding: 12px 14px !important;
    position: sticky; top: 0; z-index: 20;
    background: var(--bg);
  }
  .mod-title { font-size: 18px !important; }
  .tabs, .tab-row, .ck-tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important; gap: 6px !important;
    padding-bottom: 4px;
  }
  .tabs button, .tab-btn, .ck-tab {
    flex-shrink: 0; min-height: 40px; padding: 8px 14px !important;
    font-size: 12.5px !important;
  }
  .card, .table-card {
    border-radius: 14px !important;
    margin-left: 0; margin-right: 0;
  }
  input, select, textarea, .ana-sel, .tam-sel {
    font-size: 16px !important; /* prevents iOS zoom */
    min-height: 44px;
  }
  .btn, button.btn, .btn-sm {
    min-height: 44px; padding: 10px 16px !important;
  }
  .sb { display: none !important; }
  .mob-nav {
    display: flex !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mob-nav-item {
    min-height: 52px;
  }
  .mob-nav-item span:not(.mob-nav-pill) {
    font-size: 10px; font-weight: 700;
  }
  /* Forms full width */
  .fgrp, .form-card, .lbox {
    max-width: 100% !important;
  }
  /* Delegation / checklist cards denser */
  .del-card, .task-card {
    padding: 12px !important;
  }
}
@media (max-width: 480px) {
  .mod-sub { display: none; }
  .dash-qa-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   MOBILE FIXES — sidebar drawer, overflow, tables, forms (≤767px)
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Hamburger always visible on mobile/tablet portrait */
  .ham {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .sb-toggle {
    display: none !important;
  }

  /* Sidebar as drawer */
  .sb {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100svh !important;
    width: min(86vw, 300px) !important;
    max-width: 300px !important;
    min-width: 0 !important;
    z-index: 200 !important;
    transform: translateX(-105%) !important;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .sb.mob-open {
    transform: translateX(0) !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, .22) !important;
  }

  /* Overlays above content, below sidebar */
  .mob-ov,
  .sb-overlay {
    z-index: 150 !important;
  }
  .mob-ov.on,
  .sb-overlay.on {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Content / main never clipped horizontally */
  #content,
  .content,
  .main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Filter bars stack cleanly */
  .fbar,
  [id$="Filters"],
  #cmtFilters,
  #tamFilters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .fbar > *,
  [id$="Filters"] > *,
  #cmtFilters > *,
  #tamFilters > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .fbar input[type="date"],
  .fbar select,
  .ana-sel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Tables: allow horizontal scroll inside card, no page cut-off */
  .tw,
  .table-card,
  [class*="table-wrap"],
  #emTableWrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  .tw table {
    min-width: 480px;
  }

  /* Cards / forms full width */
  .card,
  .mod-panel,
  .lbox {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Delegation cards actions wrap */
  .dc-act {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .dc-act .btn,
  .dc-act .btn-sm {
    flex: 1 1 auto !important;
    min-width: 110px !important;
  }

  /* Modals full-width bottom sheet feel */
  .modal-box,
  #modal {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-sizing: border-box !important;
  }
  .modal-body input,
  .modal-body select,
  .modal-body textarea,
  .fgrp input,
  .fgrp select,
  .fgrp textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent long text overflow */
  .dc-desc,
  .mod-title,
  .task-name,
  .anim-item {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* KPI / grids */
  .krow {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   MODULE MOBILE POLISH — Checklist / Delegation / Attendance / History
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* History: cards on mobile, table on desktop */
  .hist-desk { display: none !important; }
  .hist-mob { display: block !important; }

  /* Checklist today rows */
  #ckList .anim-item,
  #ckList > div {
    flex-wrap: wrap !important;
  }
  #ckList .ck-btn,
  #ckList .btn-xs {
    min-height: 36px !important;
  }

  /* Checklist filter bar */
  #ctodayPane .fbar,
  #chistPane > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #ctodayPane .fbar label,
  #chistPane label {
    margin-top: 4px;
  }
  #ctodayPane .fbar input,
  #ctodayPane .fbar select,
  #chistPane input,
  #chistPane select {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Task setup */
  #csetupPane .card,
  #setupTaskList {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  #tsFilterBar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Delegation cards */
  .dcard {
    overflow: hidden !important;
  }
  .dcard .dc-top {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .dcard .dc-desc {
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  .dcard .dc-act {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  .dcard .dc-act .btn {
    flex: 1 1 45% !important;
    min-width: 120px !important;
    justify-content: center !important;
  }

  /* Delegation filter bars */
  #dminePane > div:first-child,
  #doutPane > div:first-child,
  #dallPane > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #dminePane input[type="date"],
  #doutPane input[type="date"],
  #dallPane input[type="date"],
  #dminePane select,
  #doutPane select,
  #dallPane select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Attendance punch + forms */
  .att-punch-card {
    padding: 16px !important;
  }
  #aregPane .fbar,
  #amyPane .fbar,
  .fbar {
    flex-wrap: wrap !important;
  }
  .frow,
  .frow-2,
  .frow-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .fgrp {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Tabs scroll */
  .tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .tab {
    flex-shrink: 0 !important;
  }

  /* Tables always scroll container */
  .table-card,
  .tw {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}

@media (min-width: 768px) {
  .hist-desk { display: block !important; }
  .hist-mob { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD + EXPAND MOBILE POLISH
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Dashboard spacing */
  #content .krow {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  #content .kpi {
    min-height: 100px !important;
    padding: 14px 12px !important;
  }
  #content .kpi-val {
    font-size: 22px !important;
  }
  #content .kpi-lbl {
    font-size: 10px !important;
  }
  .dash-qa-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .dash-qa-grid .qa-tile {
    min-height: 78px !important;
    padding: 10px 4px !important;
  }
  .qa-lbl {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  .qa-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  /* Hide desktop-only chart shells if any leak */
  .dash-charts-row {
    display: none !important;
  }
  /* Lower cards stack */
  #content .card {
    margin-bottom: 0 !important;
  }
}

/* Expand/collapse touch targets */
.ts-dept-hd,
.ts-task-hd,
.dcard .dc-top,
[onclick*="Toggle"],
[onclick*="toggle"] {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ts-deact-btn {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
}