/* EMP UI/UX Next – global mobile-first enhancement layer */
:root{
  --emp-red:#c62828;--emp-red-2:#e53935;--emp-ink:#101828;--emp-muted:#667085;
  --emp-line:rgba(15,23,42,.09);--emp-surface:rgba(255,255,255,.92);--emp-bg:#f4f6f9;
  --emp-r-sm:14px;--emp-r:20px;--emp-r-lg:28px;--emp-shadow:0 16px 46px rgba(15,23,42,.09);
  --emp-header:68px;--emp-bottom:82px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
} 
*{box-sizing:border-box}html{background:var(--emp-bg);text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:linear-gradient(180deg,#fff 0,#f7f8fb 20%,#eef1f6 100%);color:var(--emp-ink);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:260px;pointer-events:none;background:radial-gradient(circle at 12% -15%,rgba(198,40,40,.14),transparent 48%),radial-gradient(circle at 88% -20%,rgba(37,99,235,.10),transparent 45%);z-index:-1}
:focus-visible{outline:3px solid rgba(198,40,40,.28)!important;outline-offset:2px!important}
button,a,input,select,textarea{min-width:0}button{cursor:pointer}button:disabled{cursor:not-allowed;filter:saturate(.6)}
input,select,textarea{font-size:16px!important} /* prevents iOS zoom */
#mainApp{height:100dvh!important;min-height:100dvh;overflow:hidden;background:transparent!important}
#mainApp>div{min-width:0;height:100%}
#sidebar{background:rgba(255,255,255,.94)!important;box-shadow:18px 0 50px rgba(15,23,42,.06)!important;border-right:1px solid var(--emp-line)!important}
#sidebar nav{padding:8px!important;display:grid;gap:4px}
#sidebar nav button,#sidebar nav a{min-height:46px;border-radius:14px!important;font-weight:650;color:#475467;transition:.18s ease}
#sidebar nav button:hover,#sidebar nav a:hover{background:#f5f6f8!important;color:var(--emp-ink);transform:translateX(2px)}
#sidebar nav .active,#sidebar nav [aria-current="page"]{background:linear-gradient(135deg,#fff1f1,#fde8e8)!important;color:var(--emp-red)!important;box-shadow:inset 3px 0 0 var(--emp-red)}
#mainApp header{min-height:var(--emp-header);background:rgba(255,255,255,.86)!important;border-bottom:1px solid var(--emp-line)!important;box-shadow:none!important;backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25)}
#pageTitle{font-weight:850;letter-spacing:-.02em;color:var(--emp-ink)}
#mainApp main{height:calc(100dvh - var(--emp-header));overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:clamp(12px,2vw,24px)!important;scroll-padding-bottom:calc(var(--emp-bottom) + var(--sab) + 24px)}
.page-section{width:100%;max-width:1560px;margin-inline:auto;padding-bottom:24px;animation:empPage .22s ease-out}
@keyframes empPage{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.bg-white,.app-card,.app-surface,.sales-card,.rounded-2xl.bg-white,.rounded-3xl.bg-white{border-color:var(--emp-line)!important}
.app-card,.app-surface,.modal-panel,.sales-card{border-radius:var(--emp-r-lg)!important;box-shadow:var(--emp-shadow)!important}
.app-card{background:var(--emp-surface)!important}
.app-hero{border-radius:var(--emp-r-lg)!important;background:linear-gradient(135deg,#a91018 0%,#d52b32 55%,#ee5a3d 100%)!important;box-shadow:0 22px 55px rgba(198,40,40,.22)!important}
button[class*="bg-blue-600"],.app-btn-primary{background:linear-gradient(135deg,var(--emp-red),var(--emp-red-2))!important;border-color:transparent!important;box-shadow:0 10px 24px rgba(198,40,40,.18)!important}
button[class*="bg-blue-600"]:hover,.app-btn-primary:hover{filter:brightness(.96)}
.app-btn,button[class*="rounded-xl"],button[class*="rounded-2xl"]{min-height:44px}
.app-input,.task-input,input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea{border-radius:14px!important;border:1px solid #d0d5dd!important;background:rgba(255,255,255,.96)!important;color:var(--emp-ink)!important;box-shadow:0 1px 2px rgba(16,24,40,.03);transition:border-color .16s,box-shadow .16s,background .16s}
.app-input:focus,.task-input:focus,input:focus,select:focus,textarea:focus{border-color:#d74a4f!important;box-shadow:0 0 0 4px rgba(198,40,40,.10)!important;outline:0!important}
label{color:#344054}table{border-collapse:separate;border-spacing:0;width:100%}thead{position:sticky;top:0;z-index:2}th{background:#475467;color:#475467!important;font-size:12px!important;letter-spacing:.04em}td,th{border-color:#eaecf0!important}tbody tr{transition:background .14s}tbody tr:hover{background:#fafafa}
.overflow-x-auto{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-radius:inherit}
.modal-panel{background:#fff!important;border:1px solid rgba(255,255,255,.65);max-width:min(720px,calc(100vw - 24px));max-height:min(92dvh,900px)!important}
[role="dialog"]>.absolute.inset-0,.fixed.inset-0.bg-black\/40,.fixed.inset-0.bg-black\/50{background:rgba(16,24,40,.52)!important;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
#toastContainer{top:calc(12px + var(--sat))!important;right:12px!important;left:auto;max-width:min(390px,calc(100vw - 24px))}
.toast{border-radius:16px!important;box-shadow:0 18px 50px rgba(15,23,42,.20)!important}
#bottomNav{height:calc(var(--emp-bottom) + var(--sab));padding-bottom:var(--sab)!important;background:rgba(255,255,255,.94)!important;border-color:var(--emp-line)!important;backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);box-shadow:0 -18px 45px rgba(15,23,42,.10)!important}
#bottomNav>div{height:var(--emp-bottom);align-items:center}#bottomNav .nav-btn{height:100%;padding:10px 4px 8px!important;border-radius:14px;color:#667085;position:relative}
#bottomNav .nav-btn .material-icons{font-size:24px;transition:.18s}#bottomNav .nav-btn.active{color:var(--emp-red)!important;font-weight:800;background:linear-gradient(180deg,rgba(198,40,40,.08),transparent)}
#bottomNav .nav-btn.active .material-icons{transform:translateY(-2px)}
#fabLogo{width:64px!important;height:64px!important;border:5px solid #fff!important;box-shadow:0 13px 32px rgba(15,23,42,.20)!important;background:#fff!important}
#loginPage{padding:calc(18px + var(--sat)) 16px calc(18px + var(--sab))!important;background:radial-gradient(circle at 50% 0,rgba(198,40,40,.18),transparent 36%),linear-gradient(160deg,#fff,#f2f4f7)}
#loginPage>.app-card{max-width:450px!important;padding:clamp(22px,5vw,38px)!important;border:1px solid rgba(255,255,255,.86)!important;box-shadow:0 30px 90px rgba(15,23,42,.16)!important}
#loginPage h2{color:var(--emp-red)!important;font-size:clamp(25px,5vw,34px)!important;letter-spacing:-.04em}
.no-scrollbar{scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}
@media(max-width:767px){
  :root{--emp-header:60px;--emp-bottom:76px;--emp-r-lg:22px}
  #mainApp header{padding:8px 12px!important;padding-top:calc(8px + var(--sat))!important;min-height:calc(var(--emp-header) + var(--sat));position:sticky;top:0;z-index:45}
  #mainApp main{height:calc(100dvh - var(--emp-header) - var(--sat));padding:12px!important;padding-bottom:calc(var(--emp-bottom) + var(--sab) + 22px)!important}
  .page-section{padding-left:0!important;padding-right:0!important}
  .page-section>.sticky{top:0!important;margin-left:-12px!important;margin-right:-12px!important;padding-left:12px!important;padding-right:12px!important;background:rgba(247,248,251,.94)!important;backdrop-filter:blur(18px)}
  .grid-cols-2{column-gap:10px}.gap-4{gap:12px!important}
  .modal-panel{width:100%!important;max-width:none!important;border-radius:24px 24px 0 0!important;max-height:calc(94dvh - var(--sat))!important;margin-top:auto}
  [role="dialog"]>.relative.h-full{padding:0!important;display:flex;align-items:flex-end}
  [role="dialog"] .min-h-full{width:100%;align-items:flex-end!important}
  .modal-panel>div:first-child{padding-top:14px!important}.modal-panel>div:last-child{padding-bottom:calc(12px + var(--sab))!important}
  table{min-width:680px}.responsive-table{min-width:0!important}
  .app-hero{padding:20px!important}
  #toastContainer{left:12px!important;right:12px!important;max-width:none!important}
}
@media(min-width:768px){#sidebar{padding-top:var(--sat)}#mainApp main{padding-bottom:32px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.dark{--emp-ink:#f8fafc;--emp-muted:#98a2b3;--emp-line:rgba(255,255,255,.10);--emp-surface:rgba(17,24,39,.92);--emp-bg:#0b101b}
.dark body,.dark #mainApp{background:linear-gradient(180deg,#101624,#090d16)!important}.dark #sidebar,.dark #mainApp header,.dark #bottomNav{background:rgba(15,23,42,.92)!important}.dark .app-input,.dark input,.dark select,.dark textarea,.dark .modal-panel{background:#151d2c!important;border-color:#344054!important;color:#f8fafc!important}.dark th{background:#182131!important;color:#d0d5dd!important}


/* Header quick actions – overlap-safe desktop/tablet layout */
#mainApp header{gap:16px}
#pageTitle{flex:1 1 auto;min-width:120px}
#topHeaderActions{flex:0 1 auto;min-width:0;max-width:calc(100% - 150px);display:flex;align-items:center;justify-content:flex-end;gap:6px!important;white-space:nowrap}
#topHeaderActions>button{flex:0 0 auto;width:auto!important;min-width:42px;min-height:42px;padding:8px 10px!important;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:12px!important}
#topHeaderActions>button .material-icons,#topHeaderActions>button .material-symbols-outlined{font-size:21px;line-height:1;flex:0 0 auto}
#topHeaderActions>button span:not(.material-icons):not(.material-symbols-outlined){overflow:hidden;text-overflow:ellipsis}
#topLogoutBtn{width:42px!important;padding:8px!important}
@media(max-width:1180px){
  #topHeaderActions>button span:not(.material-icons):not(.material-symbols-outlined){display:none!important}
  #topHeaderActions>button{width:42px!important;padding:8px!important}
}
@media(max-width:900px){
  #topHeaderActions{gap:3px!important;max-width:calc(100% - 110px)}
  #topHeaderActions>button{width:38px!important;min-width:38px;min-height:38px;padding:7px!important}
}
@media(max-width:767px){
  #topHeaderActions{max-width:calc(100% - 105px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  #topHeaderActions::-webkit-scrollbar{display:none}
  #topHeaderActions>button{width:38px!important;min-width:38px}
}