/*
Theme Name: Grey Expedite Logistics Portal v15
Theme URI: https://ditechsolutions.com
Description: Professional Grey Expedite Logistics HR Portal for Grey Expedite Logistics
Version: 6.0.0
Author: Grey Expedite Logistics
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,800&family=JetBrains+Mono:wght@400;600&display=swap');

/* Performance */
*,*::before,*::after{box-sizing:border-box}

/* ── PAGE SWITCHING ─────────────────────────────────────── */
.dit-page {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    will-change: opacity, transform;
    contain: layout style;
}
.dit-page.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: pageIn 0.22s ease forwards;
}
/* ──────────────────────────────────────────────────────── */
img,svg{display:block;max-width:100%}

.sidebar{will-change:transform}
.dit-modal{will-change:opacity}

/* ================================================
   DI TECH PORTAL v11 — #D44A00 + BLACK ONLY
   Dark mode: pure black family
   Light mode: white/grey with black sidebar
================================================ */

:root {
  /* Pure black backgrounds */
  --bg-base:     #0a0a0a;
  --bg-surface:  #101010;
  --bg-card:     #161616;
  --bg-card-h:   #1c1c1c;
  --bg-input:    #1e1e1e;
  --border:      #2a2a2a;
  --border-l:    #383838;

  /* ONE accent — #D44A00 orange */
  --accent:      #6b7280;
  --accent-dim:  rgba(107,114,128,0.14);
  --accent-h:    #4b5563;
  --accent-glow: rgba(107,114,128,0.30);
  --accent-soft: rgba(107,114,128,0.07);

  /* Functional status colours (subtle) */
  --green:       #22c55e;
  --green-dim:   rgba(34,197,94,0.12);
  --red:         #f43f5e;
  --red-dim:     rgba(244,63,94,0.12);
  --yellow:      #f59e0b;
  --yellow-dim:  rgba(245,158,11,0.12);
  --blue:        #60a5fa;
  --blue-dim:    rgba(96,165,250,0.12);

  /* Text — improved contrast for clarity */
  --text-1: #f5f5f5;
  --text-2: #a0a0a0;
  --text-3: #666666;

  /* Layout */
  --sw:  256px;
  --th:  60px;
  --r:   12px;
  --rs:  8px;
  --rl:  14px;
  --tr:  0.15s cubic-bezier(0.4,0,0.2,1);
}

/* ================================================
   LIGHT MODE — white body, black sidebar
================================================ */
html[data-theme="light"] {
  --bg-base:     #f4f4f4;
  --bg-surface:  #eeeeee;
  --bg-card:     #ffffff;
  --bg-card-h:   #f9f9f9;
  --bg-input:    #efefef;
  --border:      #e0e0e0;
  --border-l:    #c8c8c8;
  --accent:      #6b7280;
  --accent-dim:  rgba(107,114,128,0.10);
  --accent-h:    #4b5563;
  --accent-glow: rgba(107,114,128,0.20);
  --accent-soft: rgba(107,114,128,0.05);
  --green:       #16a34a;
  --green-dim:   rgba(22,163,74,0.10);
  --red:         #dc2626;
  --red-dim:     rgba(220,38,38,0.10);
  --yellow:      #d97706;
  --yellow-dim:  rgba(217,119,6,0.10);
  --blue:        #2563eb;
  --blue-dim:    rgba(37,99,235,0.10);
  --text-1: #0d0d0d;
  --text-2: #444444;
  --text-3: #777777;
}

/* ================================================
   LIGHT MODE ELEMENT OVERRIDES
================================================ */
html[data-theme="light"] body{background:var(--bg-base)!important;color:var(--text-1)!important}
html[data-theme="light"] .dit-layout{background:var(--bg-base)!important}
html[data-theme="light"] .login-wrap{background:var(--bg-base)!important}

/* Sidebar stays BLACK in light mode */
html[data-theme="light"] .dit-sidebar{background:#0f0f0f!important;border-right:2px solid #2a2a2a!important;box-shadow:none!important}
html[data-theme="light"] .dit-main{background:var(--bg-base)!important;}

/* Topbar */
html[data-theme="light"] .dit-topbar{background:rgba(244,244,244,0.94)!important;backdrop-filter:blur(20px)!important;border-bottom:1px solid var(--border)!important}
html[data-theme="light"] .topbar-title{color:var(--text-1)!important}

/* Cards */
html[data-theme="light"] .card{background:#fff!important;border-color:var(--border)!important;box-shadow:0 2px 12px rgba(0,0,0,0.05)!important}
html[data-theme="light"] .card:hover{box-shadow:0 6px 28px rgba(0,0,0,0.09)!important}
html[data-theme="light"] .stat-card{background:#fff!important;border-color:var(--border)!important;box-shadow:0 2px 10px rgba(0,0,0,0.05)!important}
html[data-theme="light"] .stat-card:hover{box-shadow:0 6px 24px rgba(0,0,0,0.09)!important}
html[data-theme="light"] .card-header{background:#fafafa!important;border-bottom-color:var(--border)!important}
html[data-theme="light"] .card-title{color:var(--text-1)!important}
html[data-theme="light"] .punch-card{background:#fff!important;border-color:var(--border)!important}
html[data-theme="light"] .login-box{background:#fff!important;border-color:var(--border)!important}

/* Forms */
html[data-theme="light"] .form-control,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{background:var(--bg-input)!important;border-color:var(--border)!important;color:var(--text-1)!important;color-scheme:light}
html[data-theme="light"] .form-control::placeholder{color:var(--text-3)!important}
html[data-theme="light"] label{color:var(--text-2)!important}

/* Nav — white-on-black (sidebar is dark) */
html[data-theme="light"] .nav-item{color:rgba(255,255,255,0.60)!important}
html[data-theme="light"] .nav-item:hover{background:rgba(255,255,255,0.07)!important;color:rgba(255,255,255,0.88)!important}
html[data-theme="light"] .nav-item.active{background:rgba(107,114,128,0.22)!important;color:#fff!important;font-weight:600}
html[data-theme="light"] .nav-item.active .nav-badge{background:var(--accent)!important;color:#fff!important}
html[data-theme="light"] .nav-badge{background:var(--accent)!important;color:#fff!important}
html[data-theme="light"] .nav-badge.zero{background:rgba(255,255,255,0.08)!important;color:rgba(255,255,255,0.28)!important;box-shadow:none!important}
html[data-theme="light"] .sb-section-label{color:rgba(255,255,255,0.45)!important}
html[data-theme="light"] .sb-brand-text h3{color:#fff!important}
html[data-theme="light"] .sb-brand-text span{color:rgba(255,255,255,0.36)!important}
html[data-theme="light"] .sb-user{border-top-color:rgba(255,255,255,0.07)!important;background:rgba(0,0,0,0.25)!important}
html[data-theme="light"] .u-info strong{color:#fff!important}
html[data-theme="light"] .u-info span{color:rgba(255,255,255,0.36)!important}
html[data-theme="light"] .logout-btn{background:rgba(244,63,94,0.12)!important;color:#f43f5e!important}
html[data-theme="light"] .logout-btn:hover{background:#f43f5e!important;color:#fff!important}

/* Tables */
html[data-theme="light"] table th{background:#f5f5f5!important;color:var(--text-2)!important}
html[data-theme="light"] table td{border-bottom-color:var(--border)!important;color:var(--text-1)!important}
html[data-theme="light"] tbody tr:hover td{background:#fafafa!important}

/* Modals */
html[data-theme="light"] .dit-modal .modal-box{background:#fff!important;border-color:var(--border)!important}
html[data-theme="light"] .modal-header{border-bottom-color:var(--border)!important}
html[data-theme="light"] .modal-header h3{color:var(--text-1)!important}

/* Misc */
html[data-theme="light"] .notif-dropdown{background:#fff!important;border-color:var(--border)!important;box-shadow:0 8px 32px rgba(0,0,0,0.10)!important}
html[data-theme="light"] .notif-head{color:var(--text-1)!important;border-bottom-color:var(--border)!important}
html[data-theme="light"] .notif-item{border-bottom-color:var(--border)!important;color:var(--text-1)!important}
html[data-theme="light"] .stat-info h3{color:var(--text-1)!important}
html[data-theme="light"] .stat-info p{color:var(--text-2)!important}
html[data-theme="light"] .punch-time{color:var(--text-1)!important}
html[data-theme="light"] .punch-date{color:var(--text-2)!important}
html[data-theme="light"] .ann-item h4{color:var(--text-1)!important}
html[data-theme="light"] .ann-item p{color:var(--text-2)!important}
html[data-theme="light"] .ann-item{border-bottom-color:var(--border)!important}
html[data-theme="light"] .ann-meta{color:var(--text-3)!important}
html[data-theme="light"] .toast.success{background:#f0fdf4!important;border-color:rgba(22,163,74,.2)!important;color:#16a34a!important}
html[data-theme="light"] .toast.error{background:#fff1f2!important;border-color:rgba(220,38,38,.2)!important;color:#dc2626!important}
html[data-theme="light"] .dit-alert.success{background:rgba(22,163,74,.08)!important;color:var(--green)!important}
html[data-theme="light"] .dit-alert.error{background:rgba(220,38,38,.08)!important;color:var(--red)!important}
html[data-theme="light"] .l-orb1,html[data-theme="light"] .l-orb2{opacity:0.06!important}
html[data-theme="light"] h3,html[data-theme="light"] h4{color:var(--text-1)}
html[data-theme="light"] .prof-label{color:var(--text-3)!important}
html[data-theme="light"] .prof-val{color:var(--text-1)!important}
html[data-theme="light"] .profile-info-grid .prof-field{border-bottom-color:var(--border)!important}
.page-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:0;margin-bottom:16px}
.page-tabs .tab-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px 8px 0 0;border:1px solid transparent;border-bottom:2px solid transparent;background:transparent;color:var(--text-2);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;position:relative;bottom:-1px}
.page-tabs .tab-btn:hover{color:var(--text-1);background:var(--bg-card-h)}
.page-tabs .tab-btn.active{color:var(--accent);border-color:var(--border) var(--border) transparent var(--border);border-bottom-color:var(--accent);background:var(--bg-card)}
.page-tabs .tab-btn svg{width:13px;height:13px;flex-shrink:0}

html[data-theme="light"] .page-tabs .tab-btn{color:var(--text-2)!important}
html[data-theme="light"] .page-tabs .tab-btn.active{color:var(--accent)!important;border-color:var(--accent)!important}
html[data-theme="light"] .empty p{color:var(--text-3)!important}
html[data-theme="light"] .tc-meta span{color:var(--text-2)!important}
html[data-theme="light"] .empty svg{color:var(--text-3)!important}
html[data-theme="light"] .login-heading{color:var(--text-1)!important}
html[data-theme="light"] .login-sub{color:var(--text-2)!important}
html[data-theme="light"] .qc-icon{background:var(--bg-input)!important}
html[data-theme="light"] .wa-setup-card{background:rgba(37,211,102,0.05)!important}

/* ---- LIGHT MODE: SVG / ICON VISIBILITY ---- */
html[data-theme="light"] svg{color:inherit}
html[data-theme="light"] table svg{color:var(--text-2)!important}
html[data-theme="light"] .card-title svg{color:var(--accent)!important}
html[data-theme="light"] .modal-header h3 svg{color:var(--accent)!important}
html[data-theme="light"] .search-wrap svg{color:var(--text-2)!important}
html[data-theme="light"] .inp-icon{color:var(--text-2)!important}
html[data-theme="light"] .tc-meta svg{color:var(--text-2)!important}
html[data-theme="light"] .nav-item svg{color:currentColor!important}
html[data-theme="light"] .topbar-action svg{color:var(--text-2)!important}
html[data-theme="light"] .topbar-action:hover svg{color:var(--text-1)!important}
html[data-theme="light"] .notif-item svg{color:var(--text-2)!important}
html[data-theme="light"] .quick-card .qc-icon svg{stroke:currentColor!important}
html[data-theme="light"] .head-info-banner svg{color:var(--accent)!important}
html[data-theme="light"] .dit-alert svg{color:currentColor!important}
html[data-theme="light"] .confirm-icon svg{color:currentColor!important}
html[data-theme="light"] .page-tabs .tab-btn svg{color:currentColor!important}
html[data-theme="light"] .btn svg{color:currentColor!important}
html[data-theme="light"] .stat-icon svg{stroke:currentColor!important;fill:none!important}

/* ---- LIGHT MODE: STAT ICON COLORS (ensure visible on white cards) ---- */
html[data-theme="light"] .stat-icon{box-shadow:0 0 0 1px rgba(0,0,0,0.06)!important}
html[data-theme="light"] .stat-icon.orange,
html[data-theme="light"] .stat-icon.purple,
html[data-theme="light"] .stat-icon.teal{background:rgba(107,114,128,0.10)!important;color:#6b7280!important}
html[data-theme="light"] .stat-icon.green{background:rgba(22,163,74,0.10)!important;color:#16a34a!important}
html[data-theme="light"] .stat-icon.red{background:rgba(220,38,38,0.10)!important;color:#dc2626!important}
html[data-theme="light"] .stat-icon.yellow{background:rgba(217,119,6,0.10)!important;color:#d97706!important}
html[data-theme="light"] .stat-icon.blue{background:rgba(37,99,235,0.10)!important;color:#2563eb!important}

/* ---- LIGHT MODE: QUICK CARD ICONS ---- */
html[data-theme="light"] .quick-card{background:#fff!important;border-color:var(--border)!important;color:var(--text-1)!important}
html[data-theme="light"] .quick-card:hover{border-color:var(--accent)!important;background:rgba(107,114,128,0.05)!important;box-shadow:0 8px 24px rgba(107,114,128,0.1)!important}
html[data-theme="light"] .qc-icon{background:rgba(107,114,128,0.1)!important;color:var(--accent)!important}
html[data-theme="light"] .qc-icon svg{color:var(--accent)!important;stroke:var(--accent)!important}
html[data-theme="light"] .quick-card .qc-icon svg{color:var(--accent)!important;stroke:var(--accent)!important}

/* ---- LIGHT MODE: MISC TEXT CLARITY ---- */
html[data-theme="light"] .stat-info h3{color:var(--text-1)!important;font-weight:700!important}
html[data-theme="light"] .mini-stat h4{color:var(--text-1)!important}
html[data-theme="light"] .mini-stat p{color:var(--text-2)!important}
html[data-theme="light"] .quick-card h4{color:var(--text-1)!important}
html[data-theme="light"] .quick-card p{color:var(--text-2)!important}
html[data-theme="light"] .tc-title{color:var(--text-1)!important}
html[data-theme="light"] .tc-meta span{color:var(--text-2)!important}
html[data-theme="light"] .emp-cell strong{color:var(--text-1)!important}
html[data-theme="light"] .emp-cell small{color:var(--text-2)!important}
html[data-theme="light"] tbody td{color:var(--text-1)!important}
html[data-theme="light"] .b-muted{background:rgba(0,0,0,0.06)!important;color:var(--text-2)!important}
html[data-theme="light"] .ll-text h2{color:var(--text-1)!important}
html[data-theme="light"] .ll-text p{color:var(--text-2)!important}
html[data-theme="light"] .form-section-label{color:var(--text-2)!important}
html[data-theme="light"] .notif-item{color:var(--text-1)!important}
html[data-theme="light"] .card-header .card-title{color:var(--text-1)!important}
html[data-theme="light"] p{color:var(--text-2)}

/* ---- DARK MODE: ICON CLARITY BOOST ---- */
html:not([data-theme="light"]) table svg{color:var(--text-2)}
html:not([data-theme="light"]) .topbar-action svg{color:var(--text-2)}
html:not([data-theme="light"]) .topbar-action:hover svg{color:var(--text-1)}

/* ================================================
   ICON FIXES — both modes
================================================ */
.stat-icon svg{stroke:currentColor;fill:none}
.stat-icon.orange,.stat-icon.purple,.stat-icon.teal{background:var(--accent-dim);color:var(--accent)}
.stat-icon.green{background:var(--green-dim);color:var(--green)}
.stat-icon.red{background:var(--red-dim);color:var(--red)}
.stat-icon.yellow{background:var(--yellow-dim);color:var(--yellow)}
.stat-icon.blue{background:var(--blue-dim);color:var(--blue)}
.nav-item svg{color:currentColor}
.qc-icon svg{stroke:currentColor;fill:none}
.tc-meta span,.tc-meta svg{color:var(--text-2)!important}
.tc-meta svg{width:12px!important;height:12px!important}
table svg{color:var(--text-2)}
.card-title svg{color:var(--accent)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg-base);color:var(--text-1);font-size:14px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-surface)}
::-webkit-scrollbar-thumb{background:var(--border-l);border-radius:3px}

/* LAYOUT */
.dit-layout{display:flex;height:100vh;max-height:100vh;overflow:hidden}

/* SIDEBAR */
.dit-sidebar{
  width:var(--sw);height:100vh;
  background:#0f0f0f;
  border-right:1px solid #1c1c1c;
  box-shadow:none;
  display:flex;flex-direction:column;
  position:fixed;left:0;top:0;z-index:100;
}
.sb-brand{
  padding:20px 18px 16px;
  background:linear-gradient(135deg, rgba(107,114,128,0.18) 0%, rgba(107,114,128,0.1) 100%);
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:center;gap:12px;
  position:relative;overflow:hidden;
}
.sb-brand::before{
  content:'';position:absolute;top:-30px;right:-30px;
  width:100px;height:100px;
  background:radial-gradient(circle, rgba(107,114,128,0.2) 0%, transparent 70%);
  pointer-events:none;
}
.sb-logo{
  width:40px;height:40px;
  background:linear-gradient(135deg, var(--accent), #9ca3af);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;color:#fff;flex-shrink:0;
  box-shadow:0 4px 16px var(--accent-glow), 0 0 0 1px rgba(255,255,255,0.1);
}
.sb-brand-text h3{font-size:14px;font-weight:800;line-height:1.2;letter-spacing:-0.01em;color:var(--text-1)}
.sb-brand-text span{font-size:9.5px;color:rgba(255,255,255,0.55);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
html[data-theme="light"] .sb-brand-text span{color:rgba(255,255,255,0.55)!important}
html[data-theme="light"] .sb-brand-text h3{color:#fff!important}
html[data-theme="light"] .sb-logo{box-shadow:0 4px 16px rgba(107,114,128,0.4)!important}

.sb-nav{flex:1;padding:14px 10px;overflow-y:auto}
.sb-section{margin-bottom:20px}
.sb-section-label{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,0.40);padding:0 8px;margin-bottom:6px}
html[data-theme="light"] .sb-section-label{color:rgba(255,255,255,0.35)!important}

.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:var(--rs);
  color:rgba(255,255,255,0.62);font-size:13px;font-weight:500;
  cursor:pointer;transition:all var(--tr);
  position:relative;border:none;background:none;
  width:100%;text-align:left;margin-bottom:1px;
}
.nav-item:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.85)}
.nav-item.active{background:linear-gradient(135deg, rgba(107,114,128,0.25), rgba(107,114,128,0.12));color:#fff}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:60%;background:var(--accent);border-radius:0 3px 3px 0;
  box-shadow:0 0 8px var(--accent);
}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.6}
.nav-item:hover svg{opacity:.85}
.nav-item.active svg{opacity:1}
.nav-badge{
  margin-left:auto;background:var(--accent);color:#fff;
  font-size:10px;font-weight:700;padding:2px 6px;
  border-radius:20px;min-width:18px;text-align:center;
  font-family:'JetBrains Mono',monospace;
  box-shadow:0 2px 6px rgba(107,114,128,0.4);
}
.nav-badge:empty{display:none}
.nav-badge.zero{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.3);box-shadow:none}

.sb-user{
  padding:14px 18px;border-top:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;gap:10px;
  background:rgba(0,0,0,0.15);
}
.u-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg, var(--accent), #9ca3af);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
  box-shadow:0 2px 8px var(--accent-glow);
}
.u-info{flex:1;min-width:0}
.u-info strong{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.u-info span{font-size:10px;color:rgba(255,255,255,0.52)}
.logout-btn{
  width:28px;height:28px;border-radius:7px;
  background:rgba(239,68,68,0.15);color:var(--red);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--tr);flex-shrink:0;
}
.logout-btn:hover{background:var(--red);color:#fff}
.logout-btn svg{width:14px;height:14px}

/* MAIN */
.dit-main{flex:1;margin-left:var(--sw);height:100vh;max-height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* TOPBAR */
.dit-topbar{
  height:var(--th);background:rgba(10,10,10,0.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;position:sticky;top:0;z-index:90;
}
html[data-theme="light"] .dit-topbar{
  background:rgba(244,244,244,0.94)!important;
  backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;
}
.topbar-title{font-size:16px;font-weight:800;letter-spacing:-0.025em;color:var(--text-1)}
.topbar-right{display:flex;align-items:center;gap:10px}
.search-wrap{position:relative}
.search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-3);width:15px;height:15px}
.search-input{
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--rs);
  padding:8px 12px 8px 34px;color:var(--text-1);font-size:13px;width:220px;
  transition:all var(--tr);outline:none;
}
.search-input:focus{border-color:var(--accent);width:260px;box-shadow:0 0 0 3px var(--accent-dim)}
.search-input::placeholder{color:var(--text-3)}

.notif-wrap{position:relative}
.notif-btn{
  width:36px;height:36px;border-radius:var(--rs);
  background:var(--bg-input);border:1px solid var(--border);
  color:var(--text-2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--tr);
}
.notif-btn:hover{border-color:var(--accent);color:var(--accent)}
.notif-btn svg{width:16px;height:16px}
.notif-dot{
  position:absolute;top:7px;right:7px;width:7px;height:7px;
  background:var(--accent);border-radius:50%;border:2px solid var(--bg-surface);display:none;
}
.notif-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;width:300px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);
  box-shadow:0 8px 40px rgba(0,0,0,.5);z-index:200;display:none;overflow:hidden;
}
.notif-dropdown.open{display:block;animation:fadeIn .2s ease}
.notif-head{padding:14px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700}
.notif-item{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04);font-size:12.5px;color:var(--text-2)}
.notif-item:last-child{border-bottom:none}

/* CONTENT */
.dit-content{flex:1;padding:24px;overflow-y:auto;min-height:0}


@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ============================================================
   CARDS
============================================================ */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:visible;
  margin-bottom:18px;
  transition:border-color 0.15s ease,box-shadow 0.15s ease,transform 0.15s ease;
  box-shadow:0 2px 20px rgba(0,0,0,0.28);
}
.card:hover{
  border-color:var(--border-l);
  box-shadow:0 6px 36px rgba(0,0,0,0.38);
  transform:translateY(-1px);
}
.card-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,0.012);
}
.card-title{
  font-size:13.5px;font-weight:700;letter-spacing:-0.01em;color:var(--text-1);
  display:flex;align-items:center;gap:8px;
}
.card-body{padding:18px 20px}

/* ============================================================
   STAT CARDS
============================================================ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 16px;
  display:flex;align-items:center;gap:14px;
  transition:transform 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease;
  box-shadow:0 2px 14px rgba(0,0,0,0.22);
  position:relative;overflow:hidden;cursor:default;
}
.stat-card::before{
  content:'';position:absolute;top:-20px;right:-20px;
  width:80px;height:80px;border-radius:50%;
  background:var(--stat-glow,rgba(255,255,255,0.01));
  pointer-events:none;
}
.stat-card:hover{
  border-color:var(--border-l);
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(0,0,0,0.32);
}
.stat-icon{
  width:44px;height:44px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.stat-icon svg{width:20px;height:20px}
.stat-icon.orange,.stat-icon.purple{
  background:rgba(107,114,128,0.18);color:var(--accent);
  --stat-glow:rgba(107,114,128,0.10);
  box-shadow:0 0 0 1px rgba(107,114,128,0.15);
}
.stat-icon.green{background:rgba(34,197,94,0.15);color:var(--green);--stat-glow:rgba(34,197,94,0.09);box-shadow:0 0 0 1px rgba(34,197,94,0.12)}
.stat-icon.yellow{background:rgba(245,158,11,0.15);color:var(--yellow);--stat-glow:rgba(245,158,11,0.09);box-shadow:0 0 0 1px rgba(245,158,11,0.12)}
.stat-icon.blue,.stat-icon.teal{background:rgba(96,165,250,0.15);color:var(--blue);--stat-glow:rgba(96,165,250,0.09);box-shadow:0 0 0 1px rgba(96,165,250,0.12)}
.stat-icon.red{background:rgba(244,63,94,0.15);color:var(--red);--stat-glow:rgba(244,63,94,0.09);box-shadow:0 0 0 1px rgba(244,63,94,0.12)}
.stat-info h3{
  font-family:'JetBrains Mono',monospace;
  font-size:24px;font-weight:700;line-height:1;
  margin-bottom:5px;letter-spacing:-0.03em;color:var(--text-1);
}
.stat-info p{font-size:10.5px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* GRID */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* TABLE */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:0}
thead tr{border-bottom:1px solid var(--border)}
thead th{
  font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);
  padding:10px 14px;text-align:left;white-space:nowrap;
  background:rgba(255,255,255,0.01);
}
tbody tr{border-bottom:1px solid rgba(255,255,255,.03);transition:background var(--tr)}
tbody tr:hover{background:rgba(107,114,128,0.04)}
tbody tr:last-child{border-bottom:none}
tbody td{padding:12px 14px;font-size:13px;color:var(--text-2);vertical-align:middle}
.emp-cell{display:flex;align-items:center;gap:9px}
.e-av{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace;
  flex-shrink:0;color:#fff;
}
.emp-cell strong{display:block;font-size:13px;font-weight:600;color:var(--text-1)}
.emp-cell small{font-size:11px;color:var(--text-3)}

/* BADGES */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;
}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.b-green{background:var(--green-dim);color:var(--green)}
.b-red{background:var(--red-dim);color:var(--red)}
.b-yellow{background:var(--yellow-dim);color:var(--yellow)}
.b-blue{background:var(--blue-dim);color:var(--blue)}
.b-orange{background:var(--accent-dim);color:var(--accent)}
.b-purple{background:var(--accent-dim);color:var(--accent)}
.b-teal{background:var(--blue-dim);color:var(--blue)}
.b-muted{background:rgba(255,255,255,.06);color:var(--text-3)}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--rs);
  font-size:12.5px;font-weight:600;cursor:pointer;
  transition:all var(--tr);border:1px solid transparent;
  white-space:nowrap;font-family:inherit;
  position:relative;
}
.btn svg{width:14px;height:14px}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-h);border-color:var(--accent-h);transform:translateY(-1px);box-shadow:0 4px 16px rgba(107,114,128,0.35)}
.btn-outline{background:transparent;color:var(--text-2);border-color:var(--border)}
.btn-outline:hover{border-color:var(--border-l);color:var(--text-1);background:var(--bg-card-h)}
.btn-success{background:var(--green-dim);color:var(--green);border-color:transparent}
.btn-success:hover{background:var(--green);color:#fff}
.btn-danger{background:var(--red-dim);color:var(--red);border-color:transparent}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-sm{padding:6px 11px;font-size:11.5px}
.btn-xs{padding:4px 8px;font-size:11px}

/* BUTTON LOADING STATE */
.btn.loading{pointer-events:none;opacity:0.75}
.btn.loading .btn-label{visibility:hidden}
.btn.loading::after{
  content:'';position:absolute;left:50%;top:50%;
  width:14px;height:14px;margin:-7px 0 0 -7px;
  border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:btn-spin 0.6s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* LOGIN BUTTON LOADING */
.btn-login.loading{pointer-events:none;opacity:0.8}
.btn-login.loading::after{
  content:'';display:inline-block;
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;
  border-radius:50%;animation:btn-spin 0.6s linear infinite;
  margin-left:8px;vertical-align:middle;
}

/* ACTION BUTTON GROUP */
.action-btns{display:flex;gap:4px;align-items:center}

/* FORMS */
.form-group{margin-bottom:14px}
.form-group label{
  display:block;font-size:11px;font-weight:600;
  color:var(--text-3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;
}
.form-control{
  width:100%;background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--rs);padding:9px 12px;color:var(--text-1);
  font-size:13px;transition:all var(--tr);outline:none;appearance:none;
}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.form-control::placeholder{color:var(--text-3)}
.form-control:disabled{opacity:.5;cursor:not-allowed}
select.form-control{cursor:pointer}

/* ── SEARCHABLE SELECT (DIT.enhanceSearchSelect) ─────────────── */
.dit-ss-wrap { position: relative; width: 100%; min-width: 0; }
.bh-toolbar .dit-ss-wrap { flex: 1; }
.dit-ss-trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; cursor: pointer; text-align: left; font-family: inherit;
}
.dit-ss-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1);
}
.dit-ss-arrow { color: var(--text-3); flex-shrink: 0; transition: transform 0.15s; }
.dit-ss-wrap.dit-ss-open .dit-ss-arrow { transform: rotate(180deg); }
.dit-ss-panel {
  position: fixed; z-index: 100000; /* JS sets left/top/width/bottom on open.
       Lives directly in <body> (see js/main.js) so it can never be trapped
       inside .dit-page's isolated stacking context or clipped by any
       parent card/modal — regardless of overflow settings or browser support */
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--rs);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
  overflow: hidden;
  pointer-events: none;
}
.dit-ss-panel.dit-ss-open {
  opacity: 1; visibility: visible; transform: translateY(0);
  pointer-events: auto;
}
.dit-ss-search {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--border); color: var(--text-3);
}
.dit-ss-input {
  flex: 1; border: none; background: transparent; outline: none;
  color: var(--text-1); font-size: 13px; font-family: inherit;
}
.dit-ss-input::placeholder { color: var(--text-3); }
.dit-ss-options { max-height: 220px; overflow-y: auto; }
.dit-ss-option {
  padding: 8px 12px; font-size: 13px; color: var(--text-1); cursor: pointer;
  transition: background 0.1s;
}
.dit-ss-option:hover { background: var(--accent-dim); }
.dit-ss-option.dit-ss-active { background: var(--accent-dim); font-weight: 600; }
.dit-ss-empty { padding: 14px 12px; font-size: 12.5px; color: var(--text-3); text-align: center; }

/* FIX: search-select dropdown panel (.dit-ss-panel) was being clipped/cut off
   because ".card" and ".modal-box" elsewhere in this stylesheet force
   "overflow:hidden/auto !important" (for rounded corners / scroll).
   While a dropdown is actually open inside one of these containers, let the
   container temporarily allow overflow so the panel can render in full
   instead of being cut off. This fixes the broken layout on every
   "Search employee..." dropdown (Add Fine, Break History, Add Historical
   Sale, Assign Task, etc.) across the whole portal. */
.card:has(.dit-ss-wrap.dit-ss-open),
.modal-box:has(.dit-ss-wrap.dit-ss-open) {
  overflow: visible !important;
  transform: none !important;
}
textarea.form-control{resize:vertical;min-height:80px}

/* MODAL */
.dit-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:1000;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.dit-modal.open{display:flex;animation:fadeIn .18s ease}
.modal-box{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);
  width:100%;max-width:540px;max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.6);animation:slideUp .22s ease;
}
.modal-header{
  padding:18px 22px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-header h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px}
.modal-header h3 svg{width:17px;height:17px;color:var(--accent)}
.modal-close{
  width:30px;height:30px;border-radius:7px;background:var(--bg-input);
  border:1px solid var(--border);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--tr);
}
.modal-close:hover{background:var(--red-dim);color:var(--red);border-color:transparent}
.modal-close svg{width:13px;height:13px}
.modal-body{padding:22px}
.modal-footer{
  padding:14px 22px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:8px;
}

/* CONFIRM MODAL (small) */
.modal-box.modal-sm{max-width:400px}
.confirm-icon{
  width:56px;height:56px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
}
.confirm-icon.danger{background:var(--red-dim);color:var(--red)}
.confirm-icon svg{width:26px;height:26px}
.confirm-text{text-align:center;margin-bottom:6px;font-size:16px;font-weight:700}
.confirm-sub{text-align:center;font-size:13px;color:var(--text-2);margin-bottom:20px;line-height:1.6}
.confirm-actions{display:flex;gap:8px;justify-content:center}

/* ALERT */
.dit-alert{
  display:flex;align-items:center;gap:9px;padding:11px 14px;
  border-radius:var(--rs);font-size:12.5px;font-weight:500;margin-bottom:14px;
}
.dit-alert svg{width:15px;height:15px;flex-shrink:0}
.dit-alert.success{background:var(--green-dim);color:var(--green);border:1px solid rgba(16,185,129,.15)}
.dit-alert.error{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.15)}
.dit-alert.info{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(59,130,246,.15)}

/* TOAST */
.toast{
  position:fixed;top:20px;right:20px;z-index:9999;
  min-width:280px;max-width:400px;padding:13px 16px;border-radius:var(--r);
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:500;
  box-shadow:0 8px 40px rgba(0,0,0,.5);animation:slideUp .25s ease;
}
.toast svg{width:17px;height:17px;flex-shrink:0}
.toast.success{background:#061a12;border:1px solid rgba(16,185,129,.25);color:var(--green)}
.toast.error{background:#1a0608;border:1px solid rgba(239,68,68,.25);color:var(--red)}
.toast.info{background:#060f1a;border:1px solid rgba(59,130,246,.25);color:var(--blue)}

/* QUICK ACTIONS */
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-card{
  background:var(--bg-input);border:1px solid var(--border);border-radius:14px;
  padding:26px 18px 22px;cursor:pointer;transition:all var(--tr);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;min-height:120px;
}
.quick-card:hover{border-color:var(--accent);background:var(--accent-dim);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.qc-icon{
  width:60px;height:60px;background:rgba(107,114,128,0.18);border-radius:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--accent);
}
.qc-icon svg{width:28px;height:28px;stroke:var(--accent)}
.qc-text{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:4px}
.quick-card h4{font-size:14px;font-weight:700;margin:0;color:var(--text-1)}
.quick-card p{font-size:11.5px;color:var(--text-3);margin:0;line-height:1.4}

/* PUNCH CARD */
.punch-card{
  background:linear-gradient(135deg,#0e0e18 0%,#151524 100%);
  border:1px solid var(--border);border-radius:var(--rl);
  padding:26px;text-align:center;position:relative;overflow:hidden;
}
.punch-card::after{
  content:'';position:absolute;top:-50px;right:-50px;
  width:140px;height:140px;
  background:radial-gradient(circle,rgba(107,114,128,.12) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.punch-time{font-family:'JetBrains Mono',monospace;font-size:38px;font-weight:700;letter-spacing:-0.02em;margin-bottom:3px}
.punch-date{font-size:12px;color:var(--text-3);margin-bottom:20px}
.punch-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.punch-btn{
  padding:11px 24px;border-radius:9px;font-size:13px;font-weight:700;
  cursor:pointer;transition:all var(--tr);
  border:none;display:flex;align-items:center;gap:7px;
}
.punch-btn svg{width:16px;height:16px}
.punch-in{background:var(--green);color:#fff}
.punch-in:hover{background:#12d48f;transform:translateY(-2px);box-shadow:0 5px 18px rgba(16,185,129,.35)}
.punch-out{background:var(--red);color:#fff}
.punch-out:hover{background:#f05555;transform:translateY(-2px);box-shadow:0 5px 18px rgba(239,68,68,.35)}
.punch-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* MINI STATS */
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.mini-stat{background:rgba(255,255,255,.03);border-radius:var(--rs);padding:12px;text-align:center}
.mini-stat h4{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;margin-bottom:2px}
.mini-stat p{font-size:11px;color:var(--text-3)}

/* TASK CARD */
.task-card{
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r);
  padding:14px;margin-bottom:8px;transition:all var(--tr);
}
.task-card:hover{border-color:var(--border-l)}
.tc-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:7px}
.tc-title{font-size:13px;font-weight:600;color:var(--text-1)}
.tc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tc-meta span{font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:3px}
.tc-meta svg{width:11px;height:11px}

/* ATT STATUS SELECT */
.att-sel{
  padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;
  border:1px solid transparent;cursor:pointer;outline:none;
  transition:all var(--tr);font-family:inherit;
}
.att-sel.present{background:var(--green-dim);color:var(--green);border-color:rgba(16,185,129,.2)}
.att-sel.absent{background:var(--red-dim);color:var(--red);border-color:rgba(239,68,68,.2)}
.att-sel.late{background:var(--yellow-dim);color:var(--yellow);border-color:rgba(245,158,11,.2)}
.att-sel.leave{background:var(--blue-dim);color:var(--blue);border-color:rgba(59,130,246,.2)}

/* LOGIN */
.login-wrap{
  min-height:100vh;background:var(--bg-base);
  display:flex;align-items:center;justify-content:center;
  padding:20px;position:relative;overflow:hidden;
}
.l-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.l-orb1{width:350px;height:350px;background:rgba(107,114,128,.08);top:-100px;left:-100px}
.l-orb2{width:280px;height:280px;background:rgba(59,130,246,.05);bottom:-80px;right:-80px}
.login-box{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);
  padding:32px 28px;width:100%;max-width:380px;position:relative;z-index:1;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.login-logo{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.ll-mark{
  width:44px;height:44px;
  background:linear-gradient(135deg, var(--accent), #4b5563);
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:700;color:#fff;
  box-shadow:0 4px 16px var(--accent-glow);
  flex-shrink:0;
}
.ll-text h2{font-size:15px;font-weight:800;letter-spacing:-0.01em;line-height:1.2}
.ll-text p{font-size:10.5px;color:var(--text-3);margin-top:2px}
.login-heading{font-size:20px;font-weight:800;margin-bottom:3px;letter-spacing:-0.02em}
.login-sub{font-size:12px;color:var(--text-3);margin-bottom:18px}
.login-error{
  background:var(--red-dim);border:1px solid rgba(239,68,68,.2);color:var(--red);
  border-radius:var(--rs);padding:10px 12px;font-size:12.5px;margin-bottom:12px;display:none;
}
.inp-wrap{position:relative;margin-bottom:12px}
.inp-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-3);width:15px;height:15px;pointer-events:none;flex-shrink:0}
.inp-wrap .form-control{padding-left:38px}
.btn-login{
  width:100%;padding:11px;background:linear-gradient(135deg, var(--accent), #4b5563);color:#fff;border:none;
  border-radius:var(--rs);font-size:14px;font-weight:700;
  cursor:pointer;transition:all var(--tr);margin-top:4px;
  box-shadow:0 4px 16px var(--accent-glow);
}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--accent-glow)}

/* ACTIVITY */
.activity-list{display:flex;flex-direction:column}
.a-item{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.a-item:last-child{border-bottom:none}
.a-dot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0}
.a-dot.orange{background:var(--accent)}
.a-dot.green{background:var(--green)}
.a-dot.blue{background:var(--blue)}
.a-dot.red{background:var(--red)}
.a-text{font-size:12.5px;color:var(--text-2)}
.a-time{font-size:11px;color:var(--text-3);margin-top:1px}

/* EMPTY STATE */
.empty{text-align:center;padding:40px 20px;color:var(--text-3)}
.empty svg{width:44px;height:44px;margin-bottom:10px;opacity:.25}
.empty p{font-size:12.5px}

/* ANN ITEM */
.ann-item{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.04);position:relative}
.ann-item:last-child{border-bottom:none}
.ann-item h4{font-size:13px;font-weight:600;margin-bottom:4px}
.ann-item p{font-size:12.5px;color:var(--text-2);margin-bottom:6px}
.ann-meta{font-size:11px;color:var(--text-3)}
.ann-delete{position:absolute;top:14px;right:0}

/* EMP ID */
.eid{font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--accent-dim);color:var(--accent);padding:2px 7px;border-radius:5px;letter-spacing:.04em}

/* SIDEBAR OVERLAY + HAMBURGER */
.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:999}
.menu-toggle{display:none;background:none;border:none;color:var(--text-1);cursor:pointer;padding:8px}

/* ABSENCE WARNING */
@keyframes warningPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.3)}50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}
.abs-warning-pulse{animation:warningPulse 2s infinite}
.abs-mini-warn{color:var(--red)!important;font-weight:800!important}

/* GRID UTILITIES */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* TABLE RESPONSIVE */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}



/* ===== PROFILE INFO GRID ===== */
.profile-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.prof-field{display:flex;flex-direction:column;gap:4px}
.prof-label{
  font-size:10px;font-weight:700;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.prof-val{font-size:13px;color:var(--text-1);word-break:break-word}

/* ===== QUICK CARDS ===== */
.quick-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

/* ===== PROFILE IMAGE — square with rounded corners ===== */
.profile-avatar-img{
  width:88px;height:88px;
  border-radius:14px;
  border:3px solid var(--accent);
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;color:#fff;
  flex-shrink:0;overflow:hidden;
  object-fit:cover;
}
.profile-avatar-img img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:11px;
}

/* ===== EMPLOYEE DASHBOARD GRID ===== */
.emp-dash-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}

/* ===== EXPENSE/SALARY TABS ===== */
.month-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.month-tab{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;
  cursor:pointer;border:1px solid var(--border);
  background:var(--bg-input);color:var(--text-2);
  transition:all var(--tr);white-space:nowrap;
}
.month-tab:hover{border-color:var(--accent);color:var(--accent)}
.month-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.exp-tab-content{display:none}
.exp-tab-content.active{display:block}

/* ===== PROFILE EDIT STYLES ===== */
.profile-edit-form{margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.profile-avatar-wrap{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.avatar-upload-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--rs);
  background:var(--bg-input);border:1px solid var(--border);
  color:var(--text-2);font-size:12px;font-weight:500;
  cursor:pointer;transition:all var(--tr);
}
.avatar-upload-btn:hover{border-color:var(--accent);color:var(--accent)}
.avatar-upload-btn svg{width:14px;height:14px}
#profileImageInput{display:none}

/* ============================================================
   TABLET 1100px
============================================================ */
@media(max-width:1100px){
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .quick-cards{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   MOBILE 768px — COMPLETE RESPONSIVE RESET
   DI TECH PORTAL VERSION 4.0
============================================================ */
@media(max-width:768px){

  /* 1. GLOBAL — KILL ALL HORIZONTAL OVERFLOW */
  *,*::before,*::after{box-sizing:border-box !important}
  html{
    overflow-x:hidden !important;
    width:100% !important;
    max-width:100vw !important;
  }
  body{
    overflow-x:hidden !important;
    width:100% !important;
    max-width:100vw !important;
    min-height:100vh;
  }
  .dit-layout{
    overflow-x:hidden !important;
    width:100% !important;
    max-width:100vw !important;
    position:relative;
  }

  /* 2. SIDEBAR — hidden off-screen, slides in on toggle */
  .dit-sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    height:100vh !important;
    width:260px !important;
    z-index:1000 !important;
    transform:translateX(-100%) !important;
    transition:transform 0.28s ease !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  .dit-sidebar.open{
    transform:translateX(0) !important;
    box-shadow:4px 0 30px rgba(0,0,0,.6) !important;
  }
  .sidebar-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:999;
  }
  .sidebar-overlay.open{display:block}

  /* 3. MAIN AREA — full width, no left offset */
  .dit-main{
    margin-left:0 !important;
    width:100% !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
    height:100vh;max-height:100vh;overflow:hidden;
  }

  /* 4. HAMBURGER BUTTON — show it */
  .menu-toggle{
    display:flex !important;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    color:var(--text-1);
    padding:6px;
    cursor:pointer;
    flex-shrink:0;
  }

  /* 5. TOPBAR — compact */
  .dit-topbar{
    height:52px !important;
    padding:0 12px !important;
    position:sticky !important;
    top:0 !important;
    z-index:90 !important;
    width:100% !important;
    max-width:100vw !important;
  }
  .topbar-title{
    font-size:15px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:160px;
  }
  .search-wrap{display:none !important}
  .topbar-right{gap:6px !important}

  /* 6. CONTENT AREA */
  .dit-content{
    padding:10px !important;
    overflow-x:hidden !important;
    width:100% !important;
    max-width:100vw !important;
    min-height:0 !important;
  }
  

  /* 7. CARDS */
  .card{
    width:100% !important;
    max-width:100% !important;
    margin-bottom:10px !important;
    overflow:hidden !important;
  }
  .card-header{
    padding:11px 12px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }
  .card-header > *:last-child{
    width:100% !important;
  }
  .card-title{font-size:13px !important}
  .card-body{
    padding:10px 12px !important;
    overflow-x:hidden !important;
  }

  /* 8. STAT CARDS — 2 columns on mobile */
  .stats-row,
  #overviewStats,
  #attStats,
  [id$="Stats"]{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .stat-card{
    padding:11px 10px !important;
    gap:8px !important;
    min-width:0 !important;
  }
  .stat-icon{
    width:34px !important;
    height:34px !important;
    border-radius:8px !important;
    flex-shrink:0 !important;
  }
  .stat-icon svg{width:16px !important;height:16px !important}
  .stat-info{min-width:0 !important;overflow:hidden}
  .stat-info h3{font-size:18px !important;white-space:nowrap}
  .stat-info p{font-size:10px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* 9. ALL GRID LAYOUTS — single column */
  .grid-2,.grid-3,.grid-4{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  /* 10. QUICK ACTION CARDS — 2 columns, column layout */
  .quick-grid,.quick-cards{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .quick-grid,.quick-cards{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .quick-card{
    padding:18px 12px !important;
    min-width:0 !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:10px !important;
    min-height:100px !important;
  }
  .qc-icon{
    width:48px !important;
    height:48px !important;
    border-radius:13px !important;
    flex-shrink:0 !important;
  }
  .qc-icon svg{width:22px !important;height:22px !important}
  .qc-text{min-width:0 !important;width:100% !important;align-items:center !important}
  .quick-card h4{font-size:12px !important;white-space:normal !important;line-height:1.3 !important}
  .quick-card p{font-size:10.5px !important;white-space:normal !important;line-height:1.4 !important}

  /* 11. TABLES — horizontal scroll inside wrapper ONLY */
  .table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    display:block !important;
    border-radius:var(--rs);
  }
  .table-wrap table{
    min-width:480px !important;
    width:max-content !important;
    max-width:none !important;
  }
  .table-wrap td,
  .table-wrap th{
    padding:7px 8px !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }
  .table-wrap .btn{
    font-size:10px !important;
    padding:3px 7px !important;
  }
  .table-wrap .action-btns{
    flex-wrap:nowrap !important;
    gap:3px !important;
  }

  /* 12. FILTER / ACTION BUTTON ROWS */
  .action-btns{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    width:100% !important;
  }
  .action-btns .btn{
    font-size:11px !important;
    padding:7px 9px !important;
  }
  .action-btns select,
  .action-btns input[type="month"],
  .action-btns input[type="date"],
  .action-btns input[type="text"],
  .action-btns input[type="number"]{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:13px !important;
  }

  /* 13. MODALS — bottom sheet on mobile */
  .dit-modal{
    align-items:flex-end !important;
    padding:0 !important;
  }
  .modal-box{
    width:100% !important;
    max-width:100% !important;
    max-height:90vh !important;
    border-radius:18px 18px 0 0 !important;
    margin:0 !important;
    overflow-y:auto !important;
  }
  .modal-box.modal-sm{
    max-width:100% !important;
    border-radius:18px 18px 0 0 !important;
  }
  .modal-header{padding:13px 14px !important}
  .modal-body{
    padding:13px 14px !important;
    overflow-x:hidden !important;
  }
  .modal-footer{
    padding:11px 14px !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  .modal-footer .btn{
    flex:1 !important;
    justify-content:center !important;
    min-width:0 !important;
  }

  /* 14. FORMS */
  .form-group{margin-bottom:10px !important}
  .form-group label{font-size:11px !important}
  .form-control{
    font-size:14px !important;
    padding:9px 11px !important;
    width:100% !important;
    min-width:0 !important;
  }
  .form-row{grid-template-columns:1fr !important}

  /* 15. EMPLOYEE DASHBOARD — punch + info stacked */
  .emp-dash-grid,
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .punch-card{
    padding:18px 14px !important;
    text-align:center !important;
  }
  .punch-time{font-size:30px !important;letter-spacing:-0.01em !important}
  .punch-date{font-size:12px !important;margin-bottom:14px !important}
  .punch-btns{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    justify-content:center !important;
  }
  .punch-btn{
    width:100% !important;
    justify-content:center !important;
    font-size:12px !important;
    padding:11px 8px !important;
  }
  .mini-stats{
    grid-template-columns:repeat(3,1fr) !important;
    gap:6px !important;
    margin-top:12px !important;
  }
  .mini-stat{padding:8px 6px !important}
  .mini-stat h4{font-size:15px !important}
  .mini-stat p{font-size:10px !important}

  /* 16. EMPLOYEE PROFILE — FIXED profile image size */
  .profile-avatar-wrap{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:14px !important;
    flex-wrap:nowrap !important;
    margin-bottom:16px !important;
  }
  .profile-avatar-img{
    width:68px !important;
    height:68px !important;
    min-width:68px !important;
    min-height:68px !important;
    max-width:68px !important;
    max-height:68px !important;
    border-radius:12px !important;
    flex-shrink:0 !important;
    font-size:22px !important;
    overflow:hidden !important;
    object-fit:cover !important;
  }
  .profile-avatar-img img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:9px !important;
    display:block !important;
  }
  .profile-info-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .prof-val{font-size:12px !important;word-break:break-word !important}
  .avatar-upload-btn{font-size:11px !important;padding:6px 10px !important}

  /* 17. BADGES */
  .badge{font-size:10px !important;padding:2px 7px !important}
  .eid{font-size:10px !important;padding:2px 6px !important}

  /* 18. EMPLOYEE CELL IN TABLE */
  .emp-cell{
    flex-direction:row !important;
    align-items:center !important;
    gap:6px !important;
    min-width:0 !important;
  }
  .e-av{
    width:24px !important;
    height:24px !important;
    font-size:9px !important;
    flex-shrink:0 !important;
    border-radius:50% !important;
  }
  .emp-cell strong{font-size:11px !important;white-space:nowrap !important}
  .emp-cell small{font-size:9px !important;display:block !important}

  /* 19. MONTH TABS — horizontal scroll */
  .month-tabs{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    gap:5px !important;
    padding-bottom:4px !important;
    margin-bottom:12px !important;
  }
  .month-tabs::-webkit-scrollbar{display:none !important}
  .month-tab{
    flex-shrink:0 !important;
    padding:5px 11px !important;
    font-size:11px !important;
  }

  /* 20. NOTIFICATIONS */
  .notif-dropdown{
    width:calc(100vw - 24px) !important;
    right:0 !important;
    max-width:300px !important;
  }

  /* 21. BUTTON SIZES */
  .btn-sm{padding:6px 9px !important;font-size:11px !important}
  .btn-xs{padding:3px 7px !important;font-size:10px !important}

  /* 22. SALARY / EXPENSE SECTIONS */
  [style*="font-size:36px"]{font-size:26px !important}
  [style*="font-size:28px"]{font-size:22px !important}

  /* 23. LEAVE SECTION — grid layout fix */
  .leave-stats,
  [class*="leave-"]{max-width:100% !important;overflow:hidden !important}

  /* 24. ABSENCE WARNING GRID */
  #absenceWarningBanner [style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr !important;
    gap:6px !important;
  }

  /* 25. TOAST — full width on small screens */
  .toast{
    right:10px !important;
    left:10px !important;
    min-width:0 !important;
    max-width:none !important;
    width:calc(100% - 20px) !important;
  }

  /* 26. INLINE STYLE GRID OVERRIDES */
  [style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr 1fr !important;
  }
  [style*="grid-template-columns:repeat(3"]{
    grid-template-columns:1fr 1fr !important;
  }
  [style*="grid-template-columns:repeat(4"]{
    grid-template-columns:1fr 1fr !important;
  }
}

/* ============================================================
   SMALL MOBILE 480px
============================================================ */
@media(max-width:480px){
  .dit-content{padding:8px !important}

  .stats-row,
  #overviewStats,
  #attStats,
  [id$="Stats"]{
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
  }
  .stat-card{padding:9px 8px !important}
  .stat-info h3{font-size:16px !important}
  .stat-info p{font-size:9.5px !important}

  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important}
  .quick-grid,.quick-cards{grid-template-columns:1fr 1fr !important}

  .punch-btns{grid-template-columns:1fr !important}
  .punch-time{font-size:24px !important}

  .profile-info-grid{grid-template-columns:1fr !important}
  .profile-avatar-img{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    max-width:56px !important;
    max-height:56px !important;
    border-radius:10px !important;
    font-size:18px !important;
  }

  .topbar-title{max-width:120px !important;font-size:14px !important}

  .login-box{
    padding:22px 16px !important;
    margin:8px !important;
    border-radius:14px !important;
  }

  .mini-stats{grid-template-columns:repeat(3,1fr) !important}
  .mini-stat h4{font-size:14px !important}

  .table-wrap table{min-width:380px !important}
  .table-wrap td,.table-wrap th{
    padding:6px 7px !important;
    font-size:10px !important;
  }

  /* Salary big number */
  [style*="font-size:36px"]{font-size:22px !important}
  [style*="font-size:28px"]{font-size:18px !important}

  .month-tab{font-size:10px !important;padding:4px 9px !important}

  .card-header{padding:9px 10px !important}
  .card-body{padding:8px 10px !important}
}

/* ============================================================
   SMOOTH PAGE TRANSITIONS + REAL-TIME UX POLISH
   Grey Expedite Logistics Portal v4.1 — Smooth Update
   ============================================================ */

/* Page fade-in transitions */


@keyframes pageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stat cards — smooth number updates */
.stat-card h3 {
    transition: color 0.3s ease;
}
.stat-card h3.updating {
    opacity: 0.5;
}

/* Real-time indicator — pulse dot */
@keyframes realtimePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.realtime-dot {
    animation: realtimePulse 2s infinite;
}

/* Smooth table row updates */
.dit-table-row-new {
    animation: rowFlash 0.6s ease;
}
@keyframes rowFlash {
    from { background: rgba(107,114,128,0.15); }
    to   { background: transparent; }
}

/* Toast improvements */
.toast {
    animation: toastIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal smooth open */
.dit-modal.open .modal-box {
    animation: modalIn 0.22s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Button loading state */
.btn.loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}
.btn.loading::after {
    content: '';
    position: absolute;
    inset: 50% 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-color: rgba(255,255,255,0.3) rgba(255,255,255,0.3) #fff #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    color: #fff;
}
.btn.loading svg { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Sidebar smooth open/close on mobile */
.dit-sidebar {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card hover lift */
.stat-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* Quick card hover */
.quick-card {
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.quick-card:hover {
    transform: translateY(-2px);
}

/* Nav item transitions */
.nav-item {
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

/* Form inputs focus */
.form-control {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-control:focus {
    box-shadow: 0 0 0 3px rgba(107,114,128,0.15);
}

/* Announcement items */
.ann-item {
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Task cards */
.task-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.task-card:hover {
    transform: translateY(-1px);
}

/* Badge transitions */
.badge {
    transition: background 0.2s ease, color 0.2s ease;
}

/* ============================================================
   IMPROVED RESPONSIVE LAYOUT
   ============================================================ */

/* Desktop: show sidebar inline */
@media (min-width: 769px) {
    .dit-sidebar {
        transform: none !important;
    }
}

/* Mobile layout fixes */
@media (max-width: 900px) {
    .stats-row {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 768px) {
    /* Layout */
    .dit-layout {
        flex-direction: column;
    }
    .dit-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 260px;
        transform: translateX(-100%);
        z-index: 1000;
    }
    .dit-sidebar.open {
        transform: translateX(0);
    }
    .dit-main {
        width: 100%;
        min-width: 0;
    }
    .menu-toggle {
        display: flex !important;
    }

    /* Stats: 2 columns on tablet, responsive */
    .stats-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Grid-2 becomes single column on mobile */
    .grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* Topbar */
    .dit-topbar {
        padding: 10px 14px;
    }
    .topbar-right {
        gap: 6px !important;
    }

    /* Tables: horizontal scroll */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-wrap table {
        min-width: 560px;
    }

    /* Cards */
    .card-body {
        padding: 14px !important;
    }
    .card-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Attendance window grid */
    #attAdminGrid {
        grid-template-columns: 1fr !important;
    }

    /* Employee check-in buttons */
    #empBtnCheckIn, #empBtnCheckOut {
        min-width: 120px !important;
        font-size: 13px !important;
        padding: 10px 14px !important;
    }

    /* Salary grid */
    .grid-2.salary-grid {
        grid-template-columns: 1fr !important;
    }

    /* Action buttons wrap */
    .action-btns {
        flex-wrap: wrap;
    }

    /* Quick grid */
    .quick-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Modal box */
    .modal-box {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Content padding */
    .dit-content {
        padding: 12px !important;
    }

    /* Timezone page */
    #emp-page-timezone > div {
        grid-template-columns: 1fr !important;
    }

    /* Expense tab buttons */
    .month-tab {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 480px) {
    /* Stats: single column on small phones */
    .stats-row {
        grid-template-columns: 1fr !important;
    }

    /* Quick actions: 2 col */
    .quick-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Font adjustments */
    .stat-info h3 {
        font-size: 20px !important;
    }
    .sb-brand h3 {
        font-size: 13px !important;
    }

    /* Absence warning grid */
    #absenceWarningBanner [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Smooth scrolling everywhere */
* {
    scroll-behavior: smooth;
}

/* Live time display pulse when window opens */
@keyframes windowOpen {
    0%   { background: rgba(34,197,94,0.3); }
    100% { background: transparent; }
}
.window-just-opened {
    animation: windowOpen 1s ease forwards;
}

/* Data loading shimmer */
.loading-shimmer {
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--border) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    color: transparent !important;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   REAL-TIME UPDATE FLASH — when admin pushes data
   ============================================================ */
@keyframes dataRefreshed {
    0%   { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(107,114,128,0.2); }
    100% { border-color: var(--border); box-shadow: none; }
}
.data-refreshed {
    animation: dataRefreshed 0.8s ease forwards;
}

/* Topbar clock — mobile responsive */
.topbar-clock-wrap { flex-shrink: 0; }
@media (max-width: 768px) {
  .topbar-clock-wrap {
    padding: 4px 8px !important;
    gap: 4px !important;
  }
  .topbar-clock-date { display: none !important; }
  #adminLiveClock { font-size: 11px !important; }
}
@media (max-width: 400px) {
  .topbar-clock-wrap { display: none !important; }
}

/* Topbar clock update flash */
@keyframes clockFlash {
    0%   { color: var(--accent); }
    100% { color: var(--text-2); }
}


/* ============================================================
   V10 PREMIUM ADDITIONS
   ============================================================ */

/* Gradient text utility */
.text-gradient {
  background: linear-gradient(135deg, var(--accent), #ff7a30);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Premium page header */
.page-hero {
  padding: 28px 28px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-hero-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-1);
  line-height: 1.2;
  margin: 0 0 4px;
}
.page-hero-sub {
  font-size: 12px;
  color: var(--text-3);
  margin: 0;
}

/* WhatsApp button style */
.btn-wa {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff !important;
  border: none;
  box-shadow: 0 4px 12px rgba(37,211,102,0.3);
}
.btn-wa:hover {
  background: linear-gradient(135deg, #2be37a, #1aa370);
  box-shadow: 0 6px 18px rgba(37,211,102,0.4);
  transform: translateY(-1px);
}

/* WA setup card in employee portal */
.wa-setup-card {
  background: linear-gradient(135deg, rgba(37,211,102,0.08), rgba(18,140,126,0.05));
  border: 1px solid rgba(37,211,102,0.2);
  border-radius: var(--rl);
  padding: 20px;
  margin-bottom: 16px;
}
.wa-setup-card .wa-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(37,211,102,0.3);
  font-size: 22px;
}
html[data-theme="light"] .wa-setup-card {
  background: linear-gradient(135deg, rgba(37,211,102,0.06), rgba(18,140,126,0.03)) !important;
}

/* Head role badge */
.role-badge-head {
  background: linear-gradient(135deg, rgba(107,114,128,0.2), rgba(107,114,128,0.1));
  color: var(--accent);
  border: 1px solid rgba(107,114,128,0.25);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.role-badge-ceo {
  background: linear-gradient(135deg, rgba(107,114,128,0.2), rgba(107,114,128,0.1));
  color: var(--accent);
  border: 1px solid rgba(107,114,128,0.25);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Dashboard welcome strip */
.dash-welcome {
  background: linear-gradient(135deg, rgba(107,114,128,0.12) 0%, rgba(107,114,128,0.08) 100%);
  border: 1px solid rgba(107,114,128,0.15);
  border-radius: var(--rl);
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.dash-welcome::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(107,114,128,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.dash-welcome-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--text-1);
}
.dash-welcome-sub {
  font-size: 12px;
  color: var(--text-3);
  margin: 0;
}

/* Premium quick action cards */
.qc-card {
  background:var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.qc-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25), 0 0 0 1px var(--accent-dim);
}
.qc-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 24px;
}

/* Notification dot pulse */
@keyframes notifPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}
.notif-dot-live {
  animation: notifPulse 1.5s ease infinite;
}

/* Premium input focus ring */
.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(107,114,128,0.12) !important;
  outline: none;
}

/* Attendance window open glow */
.window-open-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(34,197,94,0.12);
  color: var(--green);
  border: 1px solid rgba(16,185,129,0.2);
}
.window-open-indicator::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: notifPulse 1.5s ease infinite;
}

/* Table action buttons */
.tbl-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Light mode overrides for v10 */
html[data-theme="light"] .card {
  background: var(--bg-card) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] .card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
html[data-theme="light"] .stat-card {
  background: var(--bg-card) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] .stat-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
}
html[data-theme="light"] .dit-sidebar {
  background:#0f0f0f!important;
  border-right:2px solid #2a2a2a!important;
  box-shadow:none!important;
}
html[data-theme="light"] .nav-item {
  color: rgba(255,255,255,0.55) !important;
}
html[data-theme="light"] .nav-item:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
html[data-theme="light"] .nav-item.active {
  background: rgba(107,114,128,0.25) !important;
  color: #fff !important;
}
html[data-theme="light"] .nav-badge {
  background: var(--accent) !important;
  color: #fff !important;
}
html[data-theme="light"] .nav-badge.zero {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.35) !important;
}
html[data-theme="light"] .sb-section-label {
  color: rgba(255,255,255,0.45) !important;
}
html[data-theme="light"] .sb-user {
  border-top-color: rgba(255,255,255,0.08) !important;
  background: rgba(0,0,0,0.2) !important;
}
html[data-theme="light"] tbody tr:hover { background: rgba(107,114,128,0.04) !important; }
html[data-theme="light"] .dash-welcome {
  background: linear-gradient(135deg, rgba(107,114,128,0.08) 0%, rgba(107,114,128,0.05) 100%) !important;
}
html[data-theme="light"] .qc-card {
  background: var(--bg-card) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}

/* Version 10 - PWA notif banner */
.wa-notif-banner {
  background: linear-gradient(135deg, rgba(37,211,102,0.15), rgba(18,140,126,0.08));
  border: 1px solid rgba(37,211,102,0.25);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--green);
  margin-bottom: 14px;
}

/* ============================================================
   PREMIUM VISUAL POLISH v10.1
   Extra attractiveness — #D44A00 + Black only
============================================================ */

/* Accent highlight on active row */
tbody tr.active-row td{background:rgba(107,114,128,0.04)!important}

/* Better card header */
.card-header .card-title svg{color:var(--accent)}

/* Glowing badge */
.nav-badge{
  box-shadow:0 0 8px rgba(107,114,128,0.4);
  animation:none;
}

/* Stat card number */
.stat-info h3{
  color:var(--text-1);
}

/* Punch / Attendance card premium */
.punch-card{
  border-radius:14px!important;
  overflow:hidden;
}

/* Page section header with accent line */
.page-section-title{
  font-size:15px;font-weight:800;letter-spacing:-0.02em;
  color:var(--text-1);margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.page-section-title::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* Better empty state */
.empty{
  padding:48px 20px;text-align:center;
}
.empty svg{
  width:40px;height:40px;color:var(--border-l);margin:0 auto 12px;display:block;
}
.empty p{color:var(--text-3);font-size:13px}

/* Action buttons in table — tighter */
.tbl-actions{display:flex;gap:6px;align-items:center}

/* Form group spacing */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px;letter-spacing:.02em}

/* Input focus — orange ring */
.form-control:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(107,114,128,0.12)!important;
  outline:none!important;
}

/* Topbar search focus */
.search-input:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(107,114,128,0.10)!important;
  width:260px!important;
}

/* Table th left border accent */
thead th:first-child{padding-left:18px}
tbody td:first-child{padding-left:18px}

/* Better modal */
.dit-modal .modal-box{
  border-radius:16px!important;
  box-shadow:0 24px 80px rgba(0,0,0,0.6)!important;
}
.modal-header{
  padding:18px 22px!important;
}
.modal-header h3{
  font-size:15px!important;font-weight:800!important;letter-spacing:-0.02em!important;
}

/* Premium page header */
.page-hero{
  margin-bottom:22px;padding-bottom:18px;
  border-bottom:1px solid var(--border);
}
.page-hero h1,.page-hero h2{
  font-size:20px;font-weight:800;letter-spacing:-0.03em;color:var(--text-1);line-height:1.2;
}
.page-hero p{font-size:13px;color:var(--text-2);margin-top:4px}

/* Toasts — sharper */
.toast{
  border-radius:10px!important;
  backdrop-filter:blur(12px);
}

/* Announcement item */
.ann-item{padding:16px 0;border-bottom:1px solid var(--border)}
.ann-item:last-child{border-bottom:none}
.ann-item h4{font-size:13.5px;font-weight:700;color:var(--text-1);margin-bottom:4px}
.ann-item p{font-size:12.5px;color:var(--text-2);line-height:1.55}
.ann-meta{font-size:11px;color:var(--text-3);margin-top:6px;display:flex;gap:12px}

/* Employee avatar ring */
.e-av{
  box-shadow:0 0 0 2px rgba(107,114,128,0.2);
}

/* Scrollbar — orange thumb */
::-webkit-scrollbar-thumb{background:var(--border-l)}
::-webkit-scrollbar-thumb:hover{background:rgba(107,114,128,0.4)}

/* Light mode stat number */
html[data-theme="light"] .stat-info h3{
  color:var(--text-1)!important;
  background:none!important;
  -webkit-background-clip:unset!important;
  -webkit-text-fill-color:unset!important;
  background-clip:unset!important;
}

/* Light mode punch card */
html[data-theme="light"] .punch-card{box-shadow:0 2px 14px rgba(0,0,0,0.06)!important}

/* Light mode modal */
html[data-theme="light"] .dit-modal .modal-box{box-shadow:0 24px 80px rgba(0,0,0,0.2)!important}

/* Login page orb — orange only */
.l-orb1{background:radial-gradient(circle, rgba(107,114,128,0.18) 0%, transparent 70%)!important}
.l-orb2{background:radial-gradient(circle, rgba(232,90,16,0.12) 0%, transparent 70%)!important}

/* Department head info banner */
.head-info-banner{
  background:rgba(107,114,128,0.07);
  border:1px solid rgba(107,114,128,0.18);
  border-radius:10px;
  padding:12px 16px;
  margin-bottom:18px;
  font-size:12.5px;
  color:var(--text-2);
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.head-info-banner svg{color:var(--accent);flex-shrink:0;margin-top:1px}

/* Responsive: stack stats 2-col on tablet */
@media(max-width:1100px){.stats-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.stats-row{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.stats-row{grid-template-columns:1fr}}


/* ================================================
   LIGHT MODE — COMPREHENSIVE FIX v11
   All missing overrides for full visibility
================================================ */

/* Activity list item borders (were rgba(255,255,255,.04) = invisible) */
html[data-theme="light"] .a-item {
  border-bottom-color: var(--border) !important;
}
html[data-theme="light"] .a-text { color: var(--text-2) !important; }
html[data-theme="light"] .a-time { color: var(--text-3) !important; }

/* Annotation / announcement item borders */
html[data-theme="light"] .ann-item {
  border-bottom-color: var(--border) !important;
}

/* Notification item borders */
html[data-theme="light"] .notif-item {
  border-bottom-color: var(--border) !important;
}

/* Punch card — was dark gradient, needs white in light mode */
html[data-theme="light"] .punch-card {
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] .punch-time { color: var(--text-1) !important; }

/* Mini stats (inside punch card) — was rgba(255,255,255,.03) = invisible */
html[data-theme="light"] .mini-stat {
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid var(--border);
}
html[data-theme="light"] .mini-stat h4 { color: var(--text-1) !important; }
html[data-theme="light"] .mini-stat p  { color: var(--text-2) !important; }

/* Toasts — were dark backgrounds */
html[data-theme="light"] .toast.success {
  background: #f0fdf4 !important;
  border-color: rgba(22,163,74,.25) !important;
  color: #16a34a !important;
}
html[data-theme="light"] .toast.error {
  background: #fff1f2 !important;
  border-color: rgba(220,38,38,.25) !important;
  color: #dc2626 !important;
}
html[data-theme="light"] .toast.info {
  background: #eff6ff !important;
  border-color: rgba(37,99,235,.25) !important;
  color: #2563eb !important;
}

/* Month tabs */
html[data-theme="light"] .month-tab {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
html[data-theme="light"] .month-tab:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
html[data-theme="light"] .month-tab.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* Absence warning banner — was #1a0808 (very dark red) */
html[data-theme="light"] .abs-warning-pulse {
  background: #fff5f5 !important;
  border-color: rgba(220,38,38,0.35) !important;
}

/* EID badge */
html[data-theme="light"] .eid {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
}

/* Avatar upload btn */
html[data-theme="light"] .avatar-upload-btn {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

/* Search input in topbar */
html[data-theme="light"] .search-input {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}
html[data-theme="light"] .search-input::placeholder {
  color: var(--text-3) !important;
}

/* Notif button */
html[data-theme="light"] .notif-btn {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

/* Role badges */
html[data-theme="light"] .role-badge-head,
html[data-theme="light"] .role-badge-ceo {
  color: var(--text-1) !important;
}

/* WA setup card text */
html[data-theme="light"] .wa-setup-card * {
  color: var(--text-2);
}

/* Head info banner */
html[data-theme="light"] .head-info-banner {
  background: rgba(107,114,128,0.06) !important;
  border-color: rgba(107,114,128,0.15) !important;
  color: var(--text-2) !important;
}

/* Profile edit form border */
html[data-theme="light"] .profile-edit-form {
  border-top-color: var(--border) !important;
}

/* Confirm modal */
html[data-theme="light"] .confirm-text { color: var(--text-1) !important; }
html[data-theme="light"] .confirm-sub  { color: var(--text-2) !important; }

/* Free day span — JS-generated spans for absence dates use rgba(255,255,255,.05) = invisible */
/* We override via the parent container color context */
html[data-theme="light"] #abs-dates-list span,
html[data-theme="light"] #mySalaryBody span[style*="rgba(255,255,255"] {
  background: rgba(0,0,0,0.04) !important;
  border-color: var(--border) !important;
}

/* Salary deduction dark box (#1a0808) override via parent targeting */
html[data-theme="light"] #mySalaryBody > div[style*="#1a0808"],
html[data-theme="light"] #absenceWarningBanner .abs-warning-pulse > div[style*="#1a0808"] {
  background: #fff5f5 !important;
}

/* Table header sort icons / filter rows */
html[data-theme="light"] thead th {
  background: #f0f0f0 !important;
  color: var(--text-2) !important;
}
html[data-theme="light"] tbody tr:hover td {
  background: rgba(107,114,128,0.04) !important;
}

/* Input group icon */
html[data-theme="light"] .inp-icon svg,
html[data-theme="light"] .inp-icon      { color: var(--text-3) !important; }

/* Scrollbar in light mode */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #e8e8e8; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c0c0c0; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(107,114,128,0.4); }

/* Page hero border */
html[data-theme="light"] .page-hero {
  border-bottom-color: var(--border) !important;
}
html[data-theme="light"] .page-hero h1,
html[data-theme="light"] .page-hero h2 { color: var(--text-1) !important; }
html[data-theme="light"] .page-hero p   { color: var(--text-2) !important; }

/* Dash welcome strip */
html[data-theme="light"] .dash-welcome {
  background: linear-gradient(135deg, rgba(107,114,128,0.07) 0%, rgba(107,114,128,0.04) 100%) !important;
  border-color: rgba(107,114,128,0.12) !important;
}
html[data-theme="light"] .dash-welcome h2,
html[data-theme="light"] .dash-welcome h3,
html[data-theme="light"] .dash-welcome p { color: var(--text-1) !important; }

/* Section title divider line */
html[data-theme="light"] .page-section-title { color: var(--text-1) !important; }
html[data-theme="light"] .page-section-title::after { background: var(--border) !important; }

/* Misc missing text fixes */
html[data-theme="light"] span { color: inherit; }
html[data-theme="light"] strong { color: var(--text-1); }
html[data-theme="light"] small  { color: var(--text-2); }
html[data-theme="light"] h1, html[data-theme="light"] h2 { color: var(--text-1) !important; }
html[data-theme="light"] .form-section-label { color: var(--text-2) !important; }
html[data-theme="light"] .ll-text h2 { color: var(--text-1) !important; }
html[data-theme="light"] .ll-text p  { color: var(--text-2) !important; }

/* Absence warning dynamic variable */
:root { --abs-warn-bg: #1a0808; }
html[data-theme="light"] { --abs-warn-bg: #fff5f5; }

/* ================================================================
   DI TECH v12 — LIGHT MODE COMPREHENSIVE ICON & FONT FIXES
   All icons, badges, nav items, topbar buttons fully visible
================================================================ */

/* --- NAV ICONS in light mode (sidebar is dark, so white icons) --- */
html[data-theme="light"] .nav-item svg { color: rgba(255,255,255,0.65) !important; opacity: 1 !important; }
html[data-theme="light"] .nav-item:hover svg { color: rgba(255,255,255,0.9) !important; }
html[data-theme="light"] .nav-item.active svg { color: #fff !important; }

/* --- TOPBAR ICONS --- */
html[data-theme="light"] .topbar-action { color: var(--text-2) !important; }
html[data-theme="light"] .topbar-action svg { color: var(--text-2) !important; fill: none !important; stroke: currentColor !important; }
html[data-theme="light"] .topbar-action:hover svg { color: var(--text-1) !important; }

/* --- PUNCH CARD ICONS + STATUS --- */
html[data-theme="light"] .punch-btn { color: #fff !important; }
html[data-theme="light"] .punch-status { color: var(--text-2) !important; }

/* --- TABLE ACTION BUTTONS --- */
html[data-theme="light"] .btn.btn-sm svg { color: currentColor !important; stroke: currentColor !important; }
html[data-theme="light"] .btn-ghost { color: var(--text-2) !important; background: transparent !important; }
html[data-theme="light"] .btn-ghost:hover { color: var(--text-1) !important; background: rgba(0,0,0,0.05) !important; }
html[data-theme="light"] .btn-outline { border-color: var(--border) !important; color: var(--text-2) !important; }
html[data-theme="light"] .btn-outline:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* --- BADGE / STATUS PILLS --- */
html[data-theme="light"] .badge { font-weight: 600 !important; }
html[data-theme="light"] .badge.pending  { background: rgba(217,119,6,0.12) !important; color: #b45309 !important; border: 1px solid rgba(217,119,6,0.25) !important; }
html[data-theme="light"] .badge.approved { background: rgba(22,163,74,0.10) !important; color: #15803d !important; border: 1px solid rgba(22,163,74,0.25) !important; }
html[data-theme="light"] .badge.rejected { background: rgba(220,38,38,0.10) !important; color: #b91c1c !important; border: 1px solid rgba(220,38,38,0.25) !important; }
html[data-theme="light"] .badge.present  { background: rgba(22,163,74,0.10) !important; color: #15803d !important; border: 1px solid rgba(22,163,74,0.25) !important; }
html[data-theme="light"] .badge.absent   { background: rgba(220,38,38,0.10) !important; color: #b91c1c !important; border: 1px solid rgba(220,38,38,0.25) !important; }
html[data-theme="light"] .badge.late     { background: rgba(217,119,6,0.10) !important; color: #b45309 !important; border: 1px solid rgba(217,119,6,0.25) !important; }

/* --- SEARCH INPUT --- */
html[data-theme="light"] .search-wrap input { background: #fff !important; border-color: var(--border) !important; color: var(--text-1) !important; }
html[data-theme="light"] .search-wrap svg   { color: var(--text-3) !important; }

/* --- MODAL CLOSE BUTTON --- */
html[data-theme="light"] .modal-close { color: var(--text-2) !important; background: rgba(0,0,0,0.05) !important; }
html[data-theme="light"] .modal-close:hover { color: var(--text-1) !important; background: rgba(0,0,0,0.10) !important; }
html[data-theme="light"] .modal-close svg { color: currentColor !important; }

/* --- NOTIFICATION BADGE ON TOPBAR --- */
html[data-theme="light"] .notif-count { background: var(--accent) !important; color: #fff !important; }

/* --- FONT WEIGHT BOOST for headings in light mode --- */
html[data-theme="light"] .card-title { font-weight: 700 !important; color: var(--text-1) !important; }
html[data-theme="light"] .page-title { color: var(--text-1) !important; font-weight: 800 !important; }
html[data-theme="light"] .section-title { color: var(--text-1) !important; }

/* --- PROFILE AVATAR UPLOAD AREA --- */
html[data-theme="light"] .avatar-upload-btn { background: rgba(0,0,0,0.06) !important; color: var(--text-2) !important; border-color: var(--border) !important; }
html[data-theme="light"] .avatar-upload-btn:hover { background: rgba(107,114,128,0.08) !important; color: var(--accent) !important; }

/* --- SELECT DROPDOWN ARROW visible in light --- */
html[data-theme="light"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; padding-right: 30px !important; }

/* --- EMPTY STATE ICON in light --- */
html[data-theme="light"] .empty svg { color: var(--text-3) !important; opacity: 0.45 !important; }

/* --- FONT SMOOTHING for light mode --- */
html[data-theme="light"] body { -webkit-font-smoothing: antialiased !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }

/* ================================================================
   SESSION SECURITY: Smooth nonce-expired UI handler
   (CSS side — JS handles the actual refresh logic)
================================================================ */
.session-expired-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #f43f5e;
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  z-index: 99999;
  animation: slideDown 0.3s ease;
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ================================================================
   DI TECH v12 — PERFORMANCE & SMOOTH ANIMATION OPTIMIZATIONS
================================================================ */

/* GPU-accelerate sidebar and topbar for smooth scrolling */
.dit-sidebar  { will-change: transform; transform: translateZ(0); }
.dit-topbar   { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }

/* Smooth card hover — use transform not box-shadow for GPU */
.card, .stat-card {
  transition: transform var(--tr), box-shadow var(--tr);
  will-change: transform;
}

/* Modal animation — GPU accelerated */
.dit-modal.open .modal-box {
  will-change: transform, opacity;
}

/* Prevent layout thrashing on table renders */
.table-wrap table { table-layout: fixed; }
.table-wrap table th:last-child,
.table-wrap table td:last-child { width: 220px; }

/* Smooth page transitions */


/* Font rendering optimization */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

/* Reduce paint areas for badge counters */
.nav-badge { contain: layout style; }

/* ================================================================
   EDIT EMPLOYEE MODAL — proper styling for tabs
================================================================ */
#modal-edit-employee .page-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
#modal-edit-employee .tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  border-radius: 6px 6px 0 0;
}
#modal-edit-employee .tab-btn:hover {
  color: var(--text-1);
  background: var(--bg-card-h);
}
#modal-edit-employee .tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--accent-soft);
}
#modal-edit-employee .tab-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Light mode tab fix */
html[data-theme="light"] #modal-edit-employee .tab-btn { color: var(--text-2) !important; }
html[data-theme="light"] #modal-edit-employee .tab-btn.active { color: var(--accent) !important; background: rgba(107,114,128,0.06) !important; }


/* ================================================================
   GREY EXPEDITE LOGISTICS — CHAT SYSTEM v5.0
   Modern, refined, fully responsive
   ================================================================ */

/* ── FAB ──────────────────────────────────────────────────────── */
#ditChatToggle {
  position: fixed;
  bottom: 28px;
  right: 28px;
  /* Keep below panel so mobile full-screen panel covers it */
  z-index: 99985;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.gc-fab {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 20px var(--accent-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.gc-fab:hover {
  background: var(--accent-h);
  transform: scale(1.08);
  box-shadow: 0 6px 28px var(--accent-glow);
}
/* Hide FAB when chat panel is open — prevents overlap with compose area */
#ditChatToggle.gc-fab-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.7) !important;
  visibility: hidden !important;
}
.gc-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-base);
  line-height: 1;
}

/* ── FLOATING PANEL WRAPPER ──────────────────────────────────── */
#ditChatPanel {
  position: fixed;
  bottom: 96px;
  right: 28px;
  width: 380px;
  height: 580px;
  z-index: 99989;
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 0.22s ease, transform 0.22s ease;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.25);
}
#ditChatPanel.gc-panel-open {
  pointer-events: all;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── PANEL SHELL ─────────────────────────────────────────────── */
.gc-panel {
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--bg-card);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.gc-panel--float {
  flex-direction: row;
}
.gc-panel--full {
  flex-direction: row;
  border-radius: 12px;
}

/* ── FULLPAGE CONTAINER ───────────────────────────────────────── */
.dit-fullpage-chat-container {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Chat page fill height — keyboard-safe */
#page-chat.active,
#emp-page-emp-chat.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  animation: none !important;
  /* Prevent page from shifting when keyboard opens on mobile */
  height: 100%;
  max-height: 100%;
  position: relative;
}
#page-chat.active .dit-fullpage-chat-container,
#emp-page-emp-chat.active .dit-fullpage-chat-container {
  flex: 1;
  min-height: 0;
}
#page-chat.active .gc-panel--full,
#emp-page-emp-chat.active .gc-panel--full {
  flex: 1;
  min-height: 0;
}
#page-chat.active .gc-window,
#emp-page-emp-chat.active .gc-window {
  flex: 1;
  min-height: 0;
}
#page-chat.active .gc-messages,
#emp-page-emp-chat.active .gc-messages {
  flex: 1;
  min-height: 0;
}
#page-chat .gc-panel--full,
#emp-page-emp-chat .gc-panel--full {
  height: 100%;
}
.gc-panel--full .gc-window { min-height: 0; overflow: hidden; }

.dit-chat-page-wrap {
  display: contents;
}
.dit-chat-page-wrap.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  animation: none !important;
}

/* ── SIDEBAR ──────────────────────────────────────────────────── */
.gc-sidebar {
  width: 280px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  overflow: hidden;
  transition: width 0.2s ease;
}
.gc-panel--float .gc-sidebar { width: 100%; min-width: unset; border-right: none; }
.gc-panel--float.gc-chat-open .gc-sidebar { display: none !important; }
.gc-panel--float.gc-chat-open .gc-window { display: flex !important; }

.gc-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  min-height: 56px;
}
.gc-sidebar-header-left,
.gc-sidebar-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gc-sidebar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

/* ── SEARCH ───────────────────────────────────────────────────── */
.gc-search-wrap {
  padding: 10px 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.gc-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 12px;
  transition: border-color 0.15s;
}
.gc-search-box:focus-within {
  border-color: var(--accent);
}
.gc-search-icon { color: var(--text-3); flex-shrink: 0; }
.gc-search-inp {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-1);
  font-size: 13px;
  outline: none;
}
.gc-search-inp::placeholder { color: var(--text-3); }

.gc-filter-chips {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gc-filter-chips::-webkit-scrollbar { display: none; }
.gc-chip {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.gc-chip:hover { color: var(--text-1); border-color: var(--accent); }
.gc-chip-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.gc-chip-active:hover { color: #fff; }

/* ── USER LIST ────────────────────────────────────────────────── */
.gc-user-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gc-user-list::-webkit-scrollbar { width: 4px; }
.gc-user-list::-webkit-scrollbar-track { background: transparent; }
.gc-user-list::-webkit-scrollbar-thumb { background: var(--border-l); border-radius: 2px; }

.gc-user-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.gc-user-item:hover { background: var(--bg-card-h); }
.gc-user-item.gc-active { background: var(--accent-dim); }
.gc-user-item:last-child { border-bottom: none; }

.gc-user-av {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1.5px solid var(--border-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  flex-shrink: 0;
  overflow: visible;
}
.gc-user-av img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.gc-user-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg-card);
}
.gc-user-info { flex: 1; min-width: 0; }
.gc-user-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.gc-user-sub {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin-top: 2px;
}
.gc-typing-text { color: var(--green) !important; font-style: italic; }
.gc-online-text { color: var(--green) !important; }
.gc-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.gc-user-time {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.gc-badge {
  background: var(--green);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1.4;
  min-width: 18px;
  text-align: center;
}

/* ── WELCOME SCREEN ───────────────────────────────────────────── */
.gc-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg-base);
  color: var(--text-3);
  padding: 32px;
}
.gc-welcome-icon { color: var(--border-l); opacity: 0.7; }
.gc-welcome-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}
.gc-welcome-sub {
  font-size: 13px;
  color: var(--text-3);
  margin: 0;
  text-align: center;
}

/* ── CHAT WINDOW ──────────────────────────────────────────────── */
.gc-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  min-width: 0;
  overflow: hidden;
  /* Ensure window never overflows viewport */
  max-height: 100%;
  height: 100%;
}

.gc-win-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  min-height: 56px;
  flex-shrink: 0;
}
.gc-win-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1.5px solid var(--border-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}
.gc-win-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.gc-win-av-initials {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.gc-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg-surface);
}
.gc-win-info { flex: 1; min-width: 0; }
.gc-win-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gc-win-status {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 1px;
}
.gc-win-status.gc-online { color: var(--green); }
.gc-win-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* ── MESSAGES AREA ────────────────────────────────────────────── */
.gc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.gc-messages::-webkit-scrollbar { width: 4px; }
.gc-messages::-webkit-scrollbar-track { background: transparent; }
.gc-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Date separator */
.gc-date-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}
.gc-date-sep span {
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}

/* ── MESSAGE ROWS ─────────────────────────────────────────────── */
.gc-msg {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-bottom: 3px;
  max-width: 100%;
}
.gc-mine { justify-content: flex-end; }
.gc-theirs { justify-content: flex-start; }

.gc-msg-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--border-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  flex-shrink: 0;
  margin-bottom: 2px;
}
.gc-msg-body { display: flex; flex-direction: column; max-width: 78%; }
.gc-mine .gc-msg-body { align-items: flex-end; }
.gc-theirs .gc-msg-body { align-items: flex-start; }

.gc-bubble {
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.45;
  word-break: break-word;
  cursor: default;
  position: relative;
}
.gc-mine .gc-bubble {
  background: var(--green);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.gc-theirs .gc-bubble {
  background: var(--bg-card);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.gc-msg-text { white-space: pre-wrap; }
.gc-msg-caption {
  margin-top: 6px;
  font-size: 12.5px;
  opacity: 0.9;
}
.gc-msg-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  padding: 0 2px;
}
.gc-msg-time {
  font-size: 10.5px;
  color: var(--text-3);
}
.gc-tick { opacity: 0.8; }
.gc-tick.gc-seen { opacity: 1; }

/* ── TYPING INDICATOR ─────────────────────────────────────────── */
.gc-typing-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.gc-typing-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}
.gc-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  animation: gc-dot-bounce 1.4s ease-in-out infinite;
}
.gc-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.gc-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes gc-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.gc-typing-label { font-size: 11.5px; color: var(--text-3); font-style: italic; }

/* ── COMPOSE BAR ──────────────────────────────────────────────── */
.gc-compose {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
  /* Stick to bottom so keyboard never covers it */
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.gc-input-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.gc-input-wrap:focus-within { border-color: var(--accent); }
.gc-file-preview {
  padding: 6px 10px 0;
}
.gc-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-dim);
  border: 1px solid var(--border-l);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-2);
  max-width: 200px;
}
.gc-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.gc-chip-rm {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  padding: 0;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.1s;
}
.gc-chip-rm:hover { color: #ef4444; }

.gc-text-inp {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-1);
  font-size: 13.5px;
  line-height: 1.45;
  outline: none;
  resize: none;
  padding: 8px 12px;
  max-height: 120px;
  font-family: inherit;
}
.gc-text-inp::placeholder { color: var(--text-3); }

/* ── ICON BUTTONS ─────────────────────────────────────────────── */
.gc-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  padding: 0;
}
.gc-icon-btn:hover {
  background: var(--accent-dim);
  color: var(--text-1);
}
.gc-attach-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  align-self: center;
  margin: 0;
  line-height: 0;
}
.gc-mic-btn.gc-recording { color: #ef4444; animation: gc-pulse-red 1s ease infinite; }
@keyframes gc-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* Send button */
.gc-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 10px rgba(34,197,94,0.3);
}
.gc-send-btn:hover { transform: scale(1.07); box-shadow: 0 4px 14px rgba(34,197,94,0.45); }
.gc-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.gc-send-btn.gc-sending { opacity: 0.7; }

/* Recording bar */
.gc-rec-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 4px 6px;
}
.gc-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: gc-blink 1s ease infinite;
}
@keyframes gc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.gc-rec-time { font-size: 13px; color: var(--text-1); font-variant-numeric: tabular-nums; }
.gc-rec-cancel {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background 0.1s, color 0.1s;
}
.gc-rec-cancel:hover { background: var(--accent-dim); color: #ef4444; }

/* ── MEDIA IN MESSAGES ────────────────────────────────────────── */
.gc-msg-img {
  max-width: 220px;
  max-height: 220px;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  cursor: pointer;
}
.gc-img-link { display: inline-block; }
.gc-msg-video {
  max-width: 220px;
  border-radius: 10px;
  display: block;
}

/* File attachment */
.gc-file-attach {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 2px 0;
}
.gc-file-icon-wrap { flex-shrink: 0; }
.gc-file-info { flex: 1; min-width: 0; }
.gc-file-name {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.gc-mine .gc-file-name { color: rgba(255,255,255,0.95); }
.gc-theirs .gc-file-name { color: var(--text-1); }
.gc-file-ext {
  font-size: 11px;
  display: block;
  margin-top: 2px;
}
.gc-mine .gc-file-ext { color: rgba(255,255,255,0.65); }
.gc-theirs .gc-file-ext { color: var(--text-3); }
.gc-file-dl { flex-shrink: 0; }
.gc-mine .gc-file-dl { color: rgba(255,255,255,0.75); }
.gc-theirs .gc-file-dl { color: var(--text-3); }

/* ── AUDIO PLAYER ─────────────────────────────────────────────── */
.gc-audio-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  max-width: 220px;
}
.gc-audio-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.gc-mine .gc-audio-play { background: rgba(255,255,255,0.2); color: #fff; }
.gc-theirs .gc-audio-play { background: var(--accent-dim); color: var(--text-1); }
.gc-audio-play:hover { transform: scale(1.1); }
.gc-audio-body { flex: 1; min-width: 0; }
.gc-audio-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  margin-bottom: 4px;
}
.gc-audio-wave span {
  flex: 1;
  min-width: 2px;
  border-radius: 1px;
  transition: height 0.1s;
}
.gc-mine .gc-audio-wave span { background: rgba(255,255,255,0.5); }
.gc-theirs .gc-audio-wave span { background: var(--border-l); }
.gc-audio-prog {
  height: 2px;
  background: rgba(255,255,255,0.2);
  border-radius: 1px;
  overflow: hidden;
}
.gc-mine .gc-audio-prog { background: rgba(255,255,255,0.2); }
.gc-theirs .gc-audio-prog { background: var(--border-l); }
.gc-audio-bar {
  height: 100%;
  border-radius: 1px;
  width: 0%;
  transition: width 0.1s linear;
}
.gc-mine .gc-audio-bar { background: #fff; }
.gc-theirs .gc-audio-bar { background: var(--green); }
.gc-audio-dur {
  font-size: 10.5px;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.gc-mine .gc-audio-dur { color: rgba(255,255,255,0.7); }
.gc-theirs .gc-audio-dur { color: var(--text-3); }

/* ── LIST STATES (loading / empty) ───────────────────────────── */
.gc-list-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}
.gc-empty-icon { opacity: 0.4; }
.gc-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-l);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: gc-spin 0.7s linear infinite;
}
@keyframes gc-spin { to { transform: rotate(360deg); } }

/* ── CONTEXT MENUS ────────────────────────────────────────────── */
.gc-ctx-menu {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  overflow: hidden;
  min-width: 180px;
  animation: gc-ctx-in 0.12s ease;
}
@keyframes gc-ctx-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.gc-ctx-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: var(--text-1);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.gc-ctx-menu button:hover { background: var(--accent-dim); }
.gc-menu-danger { color: #ef4444 !important; }
.gc-menu-danger:hover { background: rgba(239,68,68,0.08) !important; }

/* ── ADMIN MONITOR MODAL ──────────────────────────────────────── */
.gc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  animation: gc-fade-in 0.18s ease;
}
@keyframes gc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.gc-modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: gc-slide-up 0.2s ease;
}
@keyframes gc-slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.gc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.gc-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
}
.gc-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.gc-monitor-row {
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.gc-monitor-row:hover { background: var(--bg-card-h); }
.gc-monitor-row:last-child { border-bottom: none; }
.gc-monitor-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gc-monitor-names {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
}
.gc-monitor-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gc-monitor-del-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.gc-monitor-del-btn:hover { background: rgba(239,68,68,0.1); color: #ef4444; border-color: rgba(239,68,68,0.3); }
.gc-monitor-preview {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gc-monitor-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 20px;
  color: var(--text-3);
  text-align: center;
  opacity: 0.6;
}

/* ── TOAST NOTIFICATIONS ──────────────────────────────────────── */
.gc-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--bg-card);
  border: 1px solid var(--border-l);
  color: var(--text-1);
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999999;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}
.gc-toast.gc-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.gc-toast-error { border-color: rgba(239,68,68,0.4); color: #f87171; }
.gc-toast-success { border-color: rgba(34,197,94,0.4); color: var(--green); }

/* ── LIGHT THEME OVERRIDES ────────────────────────────────────── */
html[data-theme="light"] .gc-fab { background: var(--accent) !important; color: #fff !important; box-shadow: 0 4px 20px var(--accent-glow) !important; }
html[data-theme="light"] .gc-fab-badge { background: #ef4444 !important; }
html[data-theme="light"] #ditChatPanel { box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.1) !important; }
html[data-theme="light"] .gc-panel { border-color: var(--border) !important; }
html[data-theme="light"] .gc-sidebar { background: #fff !important; border-right-color: var(--border) !important; }
html[data-theme="light"] .gc-sidebar-header { background: #fafafa !important; border-bottom-color: var(--border) !important; }
html[data-theme="light"] .gc-search-wrap { background: #fafafa !important; border-bottom-color: var(--border) !important; }
html[data-theme="light"] .gc-search-box { background: #f0f0f0 !important; border-color: var(--border) !important; }
html[data-theme="light"] .gc-user-item:hover { background: #f5f5f5 !important; }
html[data-theme="light"] .gc-user-item.gc-active { background: var(--accent-dim) !important; }
html[data-theme="light"] .gc-user-av { background: var(--accent-dim) !important; border-color: var(--border) !important; }
html[data-theme="light"] .gc-user-online-dot { border-color: #fff !important; }
html[data-theme="light"] .gc-win-header { background: #fafafa !important; border-bottom-color: var(--border) !important; }
html[data-theme="light"] .gc-win-avatar { background: var(--accent-dim) !important; border-color: var(--border) !important; }
html[data-theme="light"] .gc-online-dot { border-color: #fafafa !important; }
html[data-theme="light"] .gc-messages { background: #f8f8f8 !important; }
html[data-theme="light"] .gc-theirs .gc-bubble { background: #fff !important; border-color: var(--border) !important; }
html[data-theme="light"] .gc-compose { background: #fafafa !important; border-top-color: var(--border) !important; }
html[data-theme="light"] .gc-input-wrap { background: #f0f0f0 !important; border-color: var(--border) !important; }
html[data-theme="light"] .gc-welcome { background: #f4f4f4 !important; }
html[data-theme="light"] .gc-messages::-webkit-scrollbar-thumb { background: var(--border-l) !important; }
html[data-theme="light"] .gc-user-list::-webkit-scrollbar-thumb { background: var(--border-l) !important; }
html[data-theme="light"] .gc-typing-bar { background: #fafafa !important; border-top-color: var(--border) !important; }
html[data-theme="light"] .gc-ctx-menu { background: #fff !important; border-color: var(--border-l) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important; }
html[data-theme="light"] .gc-ctx-menu button { color: var(--text-1) !important; }
html[data-theme="light"] .gc-ctx-menu button:hover { background: var(--accent-dim) !important; }
html[data-theme="light"] .gc-modal-box { background: #fff !important; border-color: var(--border) !important; }
html[data-theme="light"] .gc-modal-overlay { background: rgba(0,0,0,0.4) !important; }
html[data-theme="light"] .gc-toast { background: #fff !important; border-color: var(--border) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important; }
html[data-theme="light"] .gc-date-sep span { background: #ebebeb !important; border-color: var(--border) !important; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — WhatsApp-accurate sizing
   Mobile: 375px viewport (iPhone standard)
   Desktop: sidebar 360px, bubble max 65%
   ══════════════════════════════════════════════════════════════ */

/* ── MOBILE KEYBOARD FIX ─────────────────────────────────────── */
/* Use dvh so the panel never overflows behind the keyboard       */
.gc-panel--float,
#ditChatPanel {
  --gc-kb-offset: 0px;
}

/* ── DESKTOP (≥ 768px) ────────────────────────────────────────── */
@media (min-width: 768px) {
  /* Sidebar: 360px like WhatsApp Web */
  .gc-panel--full .gc-sidebar { width: 360px; min-width: 300px; }
  .gc-panel--float .gc-sidebar { width: 100%; }
  .gc-panel--full .gc-window { display: flex !important; }
  .gc-panel--full .gc-welcome { display: flex; }
  .gc-panel--float .gc-back-btn { display: flex !important; }
  .gc-panel--full .gc-back-btn { display: none; }

  /* Sidebar header height: 59px like WhatsApp Web */
  .gc-sidebar-header { min-height: 59px; padding: 0 16px; }
  /* Chat window header: 59px */
  .gc-win-header { min-height: 59px; padding: 0 16px; gap: 12px; }

  /* Message bubbles: max 65% width like WhatsApp */
  .gc-msg-body { max-width: 65%; }

  /* User item: WhatsApp row height */
  .gc-user-item { padding: 13px 16px; }

  /* Compose bar desktop */
  .gc-compose { padding: 10px 16px; gap: 8px; }
}

/* ── MOBILE (≤ 767px) ─────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Float panel: full screen, keyboard-aware */
  #ditChatPanel {
    bottom: var(--gc-kb-offset, 0px);
    right: 0;
    left: 0;
    top: 0;
    width: 100dvw !important;
    /* Use svh for stable height — keyboard won't shift the layout */
    height: calc(100dvh - var(--gc-kb-offset, 0px)) !important;
    border-radius: 0;
    /* Above FAB (99985) so panel fully covers it when open */
    z-index: 99992 !important;
  }
  #ditChatToggle { bottom: 20px; right: 16px; }

  /* Panel shell */
  .gc-panel { border-radius: 0; height: 100%; }

  /* Sidebar full width on mobile */
  .gc-panel--float .gc-sidebar { width: 100%; }
  .gc-panel--float.gc-chat-open .gc-sidebar { display: none; }
  .gc-panel--float.gc-chat-open .gc-window { display: flex !important; }

  /* Full page on mobile: hide sidebar when chat open */
  .gc-panel--full.gc-chat-open .gc-sidebar { display: none !important; }
  .gc-panel--full.gc-chat-open .gc-window { display: flex !important; flex: 1; }
  .gc-panel--full .gc-sidebar { width: 100%; border-right: none; }
  .gc-panel--full .gc-window { display: none; }

  /* WhatsApp mobile header: 56px */
  .gc-sidebar-header { min-height: 56px; padding: 0 12px; }
  .gc-win-header { min-height: 56px; padding: 0 10px; gap: 10px; }

  /* Avatar size: 40px like WhatsApp mobile */
  .gc-user-av { width: 40px; height: 40px; }
  .gc-win-avatar { width: 36px; height: 36px; }

  /* Message bubbles: max 78% like WhatsApp mobile */
  .gc-msg-body { max-width: 78%; }

  /* Message images */
  .gc-msg-img { max-width: 220px; max-height: 220px; }
  .gc-audio-wrap { min-width: 160px; }

  /* Compose bar: safe area aware */
  .gc-compose {
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }

  /* Messages area: don't let it scroll under the keyboard */
  .gc-messages {
    padding: 12px 10px 6px;
    /* Ensure it scrolls only within its own area */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Modal: bottom sheet */
  .gc-modal-box { max-height: 90dvh; border-radius: 16px 16px 0 0; }
  .gc-modal-overlay { align-items: flex-end; padding: 0; }

  /* Back button always visible on mobile */
  .gc-back-btn { display: flex !important; }

  /* User list row height: WhatsApp mobile ~72px */
  .gc-user-item { padding: 10px 12px; }

  /* Hide video call btn on very small screens to save space */
  @media (max-width: 360px) {
    .gc-video-btn { display: none; }
  }
}

/* ── PROFILE CARD ─────────────────────────────────────────────── */
.gc-profile-card-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.gc-profile-card-overlay.gc-profile-card-overlay--in { opacity: 1; }

.gc-profile-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 320px;
  max-width: 92vw;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  overflow: hidden;
  transform: scale(0.92) translateY(16px);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
}
.gc-profile-card-overlay--in .gc-profile-card {
  transform: scale(1) translateY(0);
}
.gc-pc-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  z-index: 2;
  transition: background 0.15s, color 0.15s;
}
.gc-pc-close:hover { background: rgba(239,68,68,0.12); color: #ef4444; }

/* Header — avatar + name + status */
.gc-pc-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 24px 20px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.gc-pc-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 3px solid var(--accent);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gc-pc-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gc-pc-avatar-initials {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-1);
}
.gc-pc-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  text-align: center;
  letter-spacing: -0.02em;
}
.gc-pc-online-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-dim);
  padding: 3px 10px;
  border-radius: 20px;
}
.gc-pc-offline-badge {
  font-size: 12px;
  color: var(--text-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 20px;
}

/* Body rows */
.gc-pc-body {
  padding: 16px 0;
}
.gc-pc-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
.gc-pc-row:last-child { border-bottom: none; }
.gc-pc-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 90px;
  flex-shrink: 0;
  padding-top: 1px;
}
.gc-pc-val {
  font-size: 13.5px;
  color: var(--text-1);
  flex: 1;
  word-break: break-word;
}
.gc-pc-val a {
  color: var(--accent);
  text-decoration: none;
}
.gc-pc-val a:hover { text-decoration: underline; }
.gc-pc-empty {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  padding: 20px;
}

/* Profile button in header */
.gc-profile-btn { color: var(--text-2); }
.gc-profile-btn:hover { color: var(--accent); background: var(--accent-dim); }

/* ── CLOSE PANEL BUTTON FIX ────────────────────────────────────── */
[data-action="close-panel"] {
  /* Ensure the X button is always visible and tappable */
  min-width: 36px;
  min-height: 36px;
  color: var(--text-2) !important;
}
[data-action="close-panel"]:hover {
  background: rgba(239,68,68,0.12) !important;
  color: #ef4444 !important;
}
@media (max-width: 767px) {
  [data-action="close-panel"] {
    /* Larger touch target on mobile */
    width: 40px !important;
    height: 40px !important;
  }
  /* Call buttons: compact on mobile to fit header */
  .gc-call-btn, .gc-video-btn {
    width: 34px;
    height: 34px;
  }
  .gc-win-actions {
    gap: 2px;
  }
  .gc-sidebar-title {
    font-size: 16px;
    font-weight: 700;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE: Hide entire chat system — desktop only feature
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Hide floating FAB button */
  #ditChatToggle { display: none !important; }

  /* Hide floating chat panel */
  #ditChatPanel  { display: none !important; }

  /* Hide Messages nav item in sidebar */
  .nav-item[data-page="chat"],
  .nav-item[data-page="emp-chat"] { display: none !important; }

  /* Hide full-page chat pages */
  #page-chat,
  #emp-page-emp-chat { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   SALES PIPELINE — Missing Classes Fix
   ══════════════════════════════════════════════════════════════ */

/* Page header: title + action buttons row */
.dit-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.dit-page-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
}
.dit-page-header p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-3);
}

/* Stat cards: label + value inside stat-card (used in sales pipeline) */
.stat-card .stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.stat-card .stat-value {
  font-size: 26px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-1);
  line-height: 1;
}

/* Responsive: sales pipeline stats row on mobile */
@media (max-width: 768px) {
  .dit-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .dit-page-header > div:last-child {
    width: 100%;
  }
  #sp-stats-row {
    grid-template-columns: 1fr 1fr !important;
  }
  #sp-cards-wrap > div {
    padding: 14px !important;
  }
}
@media (max-width: 480px) {
  #sp-stats-row {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   REAL PHONE FIXES — v20
   Safe area insets, iOS home bar, touch improvements
============================================================ */

/* Safe area for topbar (notch phones) */
.dit-topbar {
  padding-top: max(0px, env(safe-area-inset-top, 0px)) !important;
}

/* Safe area for chat FAB (iPhone home bar) */
#ditChatToggle {
  bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Safe area for sidebar bottom */
.dit-sidebar {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Modal safe area bottom padding on real phones */
.modal-box {
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
}

/* Prevent accidental text selection on touch */
.nav-item, .btn, .stat-card, .quick-card {
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Better touch targets - min 44px for all interactive */
@media (max-width: 768px) {
  .btn {
    min-height: 38px !important;
    padding: 8px 14px !important;
  }
  .btn-xs {
    min-height: 30px !important;
    padding: 5px 10px !important;
  }
  
  /* Fix modal on real iPhone - prevent bounce scrolling behind modal */
  body.modal-open {
    overflow: hidden !important;
  }
  
  /* Table horizontal scroll indicator */
  .table-wrap {
    position: relative !important;
  }
  .table-wrap::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 20px !important;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.06)) !important;
    pointer-events: none !important;
    border-radius: 0 var(--r) var(--r) 0 !important;
  }

  /* Fix sidebar nav items - larger tap targets */
  .nav-item {
    min-height: 44px !important;
    padding: 10px 16px !important;
    -webkit-tap-highlight-color: rgba(107,114,128,0.1) !important;
  }

  /* Prevent zoom on input focus (iOS) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
  
  /* Fix for iOS rubber-band scroll in modals */
  .dit-modal {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  
  /* Chat panel: full height on real phone accounting for browser chrome */
  .gc-panel--float {
    height: calc(100dvh - 60px) !important;
    max-height: calc(100dvh - 60px) !important;
  }
  
  /* Chat compose safe area */
  .gc-compose {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Fix overflow on cards with long content */
  .card {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Topbar title - prevent overflow */
  .topbar-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 45vw !important;
  }
}

@media (max-width: 480px) {
  /* Input font-size 16px prevents iOS zoom */
  input, textarea, select {
    font-size: 16px !important;
  }
  
  /* Chat FAB: move up more on small screens */
  #ditChatToggle {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
  
  /* Make stat cards readable on small phone */
  .stat-info h3 {
    font-size: 15px !important;
  }
}

/* ============================================================
   CHAT MISSING FEATURES: Message Reply & Status UI
============================================================ */

/* Reply quote preview in compose */
.gc-reply-preview {
  background: rgba(107,114,128,0.08);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gc-reply-preview .gc-reply-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.gc-reply-cancel {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
}

/* Message read receipt ticks */
.gc-tick {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  opacity: 0.5;
  font-size: 10px;
  margin-left: 3px;
}
.gc-tick.seen {
  opacity: 1;
  color: #3b82f6;
}

/* Group chat badge */
.gc-group-badge {
  font-size: 9px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Message search highlight */
.gc-msg-highlight {
  background: rgba(234,179,8,0.25);
  border-radius: 3px;
  padding: 0 2px;
}


/* ============================================================
   CHAT ENHANCEMENTS — Reply, Edit, Read Receipts
============================================================ */

/* Reply quote inside message bubble */
.gc-reply-quote {
  background: rgba(107,114,128,0.1);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
}
.gc-reply-quote strong {
  display: block;
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 2px;
}

/* Edited message label */
.gc-edited-label {
  font-size: 10px;
  opacity: 0.5;
  font-style: italic;
  margin-left: 4px;
}

/* Read receipt ticks */
.gc-ticks {
  display: inline-flex;
  align-items: center;
  margin-left: 3px;
  opacity: 0.5;
}
.gc-ticks svg {
  width: 12px;
  height: 12px;
}
.gc-ticks.gc-seen {
  opacity: 1;
  color: #3b82f6;
}

/* Message search result highlight */
.gc-search-highlight {
  background: rgba(234,179,8,0.3);
  border-radius: 2px;
  padding: 0 1px;
}


/* ============================================================
   VERY SMALL PHONE TOPBAR FIX (< 400px)
============================================================ */
@media (max-width: 390px) {
  /* Hide clock on very small phones */
  .topbar-clock-wrap { display: none !important; }
  
  /* Shrink theme toggle */
  .dit-theme-btn { width: 42px !important; height: 24px !important; }
  
  /* Topbar right gap smaller */
  .topbar-right { gap: 4px !important; }
  
  /* Notification button size */
  .notif-btn { padding: 6px !important; }
  .notif-btn svg { width: 18px !important; height: 18px !important; }
}

/* ============================================================
   TOUCH ACTION IMPROVEMENTS
============================================================ */
/* Prevent double-tap zoom on buttons and nav items */
.btn, .nav-item, .quick-card, .stat-card, .punch-btn,
.notif-btn, .topbar-action, .gc-user-item, .gc-bubble,
.modal-close {
  touch-action: manipulation !important;
}

/* Smooth scroll for all scrollable containers */
.dit-content, .sb-nav, .gc-messages, .table-wrap, .modal-box {
  scroll-behavior: smooth !important;
}


/* ============================================================
   COMPREHENSIVE ALIGNMENT FIXES — v20.1
   Sales Pipeline, Forms, Cards, Mobile
============================================================ */

/* ── SALES PIPELINE ──────────────────────────────────────────── */
#page-sales-pipeline .dit-page-header {
  flex-wrap: wrap !important;
  gap: 12px !important;
}
#page-sales-pipeline .dit-page-header > div:last-child {
  flex-wrap: wrap !important;
  gap: 8px !important;
}
#sp-search {
  width: 100% !important;
  max-width: 220px !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  #sp-search { max-width: 100% !important; }
  #page-sales-pipeline .dit-page-header > div:last-child {
    width: 100% !important;
  }
  #sp-filter, #sp-category {
    flex: 1 !important;
    min-width: 120px !important;
  }
  #sp-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}
@media (max-width: 480px) {
  #sp-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #sp-search { max-width: 100% !important; }
}

/* ── PAGE HEADER GLOBAL ────────────────────────────────────────── */
.dit-page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}
@media (max-width: 768px) {
  .dit-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .dit-page-header > div:last-child {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
}

/* ── STAT CARDS ALIGNMENT ──────────────────────────────────────── */
.stat-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}
.stat-icon {
  flex-shrink: 0 !important;
}
.stat-info {
  min-width: 0 !important;
  flex: 1 !important;
}
.stat-info h3 {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.stat-info p {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── CARDS GLOBAL ──────────────────────────────────────────────── */
.card {
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.card-header {
  box-sizing: border-box !important;
}
.card-body {
  box-sizing: border-box !important;
}

/* ── MODALS ALIGNMENT ──────────────────────────────────────────── */
.dit-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.dit-modal.open {
  display: flex !important;
}
.modal-box {
  width: 100% !important;
  max-width: 520px !important;
  box-sizing: border-box !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}
@media (max-width: 768px) {
  .dit-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-box {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
  }
}

/* ── FORM INPUTS ALIGNMENT ─────────────────────────────────────── */
.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
label {
  display: block !important;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ── TABLE ALIGNMENT ───────────────────────────────────────────── */
.table-wrap table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}
.table-wrap th {
  text-align: left !important;
  white-space: nowrap !important;
}
.table-wrap td {
  vertical-align: middle !important;
}

/* ── NAV BADGES ALIGNMENT ──────────────────────────────────────── */
.nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
}
.nav-badge {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* ── TOPBAR ALIGNMENT ──────────────────────────────────────────── */
.dit-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* ── SIDEBAR ALIGNMENT ─────────────────────────────────────────── */
.dit-sidebar {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}
.sb-nav {
  flex: 1 !important;
  overflow-y: auto !important;
}

/* ── EMPLOYEE SUBMIT SALE FORM ─────────────────────────────────── */
#emp-page-submit-sale .card-body > div {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
@media (max-width: 600px) {
  #emp-page-submit-sale .card-body > div {
    grid-template-columns: 1fr !important;
  }
}

/* ── QUICK CARDS ALIGNMENT ─────────────────────────────────────── */
.quick-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}
.qc-icon {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.qc-text {
  min-width: 0 !important;
  flex: 1 !important;
}
.qc-text h4 {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── ASSIGN DISPATCHER MODAL ───────────────────────────────────── */
#modal-assign-dispatcher > div {
  box-sizing: border-box !important;
}

/* ── LOADING SPINNER SVG ANIMATION ────────────────────────────── */
.btn svg[style*="animation:spin"],
svg.spin-icon {
  animation: spin 0.9s linear infinite !important;
}

/* ── CHAT COMPOSE ALIGNMENT ────────────────────────────────────── */
.gc-compose {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.gc-text-inp {
  flex: 1 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ── LOGIN PAGE ALIGNMENT ──────────────────────────────────────── */
.login-box {
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ── EMPLOYEE DASHBOARD CARDS ──────────────────────────────────── */
.emp-dash-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 480px) {
  .emp-dash-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ── SALES PIPELINE SEARCH INPUT ──────────────────────────────── */
#sp-search-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
#sp-search-wrap svg {
  position: absolute !important;
  left: 10px !important;
  pointer-events: none !important;
  color: var(--text-3) !important;
  z-index: 1 !important;
}

/* ============================================================
   SUCCESS CELEBRATION ANIMATIONS
============================================================ */
@keyframes ditFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ditBounce {
  0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
  80%  { transform: scale(0.95) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes ditPopIn {
  0%   { transform: scale(0.7) translateY(20px); opacity: 0; }
  70%  { transform: scale(1.04) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes ditConfettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* Upload zone hover */
#sale-drop-zone:hover,
#sale-drop-zone.drag-over {
  border-color: var(--accent) !important;
  background: rgba(var(--accent-rgb), 0.04) !important;
}

/* File type buttons */
.upload-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.upload-type-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Spin animation class */
.spin-icon {
  animation: spin 0.9s linear infinite !important;
}


/* ── SUBMIT-SALE 2-COLUMN LAYOUT ───────────────────────────────── */
/* Main 2-col: form left, history right */
#emp-page-submit-sale > div[style*="grid-template-columns:1fr 400px"],
#emp-page-submit-sale > div[style*="grid-template-columns: 1fr 400px"] {
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  gap: 24px !important;
  align-items: start !important;
}
/* History panel scroll */
#emp-page-submit-sale #my-past-sales {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  scrollbar-width: thin;
}
/* Responsive: stack on tablet/mobile */
@media (max-width: 900px) {
  #emp-page-submit-sale > div[style*="grid-template-columns:1fr 400px"],
  #emp-page-submit-sale > div[style*="grid-template-columns: 1fr 400px"] {
    grid-template-columns: 1fr !important;
  }
  #emp-page-submit-sale #my-past-sales {
    max-height: 420px !important;
  }
}