/* No visibility:hidden needed — #app-loading (position:fixed) covers FOUC */
body{overflow-x:hidden}
/* Prevent text jumping during font swap */
body{font-synthesis:none}
/* Prevent scrollbar-caused layout shift */
/* scrollbar-gutter replaced with overflow-y:scroll on html above */
/* ── DCM Shriram Brand Palette ──────────────────────────────────────────────
   Primary Blue  : #0090C9  (from dcmshriram.com theme-color)
   Dark Navy     : #003865  (header/footer dark blue)
   Light Blue    : #E6F5FB  (tints)
   Accent Orange : #F47920  (DCM Shriram orange accent)
   Green         : #4CAF50  (success)
   Text Dark     : #1A1A1A
   Text Mid      : #555555
   Border        : #D6E4EC
   Background    : #F4F8FB  (very light blue-tint background)
────────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{touch-action:manipulation;}
:root{
  --brand-blue:#0090C9;
  --brand-dark:#003865;
  --brand-orange:#F47920;
  --brand-light:#E6F5FB;
  --brand-border:#D6E4EC;
  --brand-bg:#F4F8FB;
  --brand-bg2:#EAF4FA;
  --text-dark:#1A1A1A;
  --text-mid:#555555;
  --text-light:#888888;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',system-ui,sans-serif}
body{background:var(--brand-bg);color:var(--text-dark);line-height:1.5}
button{cursor:pointer;font-family:inherit;transition:all 0.15s}
select,input,textarea{font-family:inherit;font-size:13px;border:1.5px solid var(--brand-border);border-radius:8px;padding:0 10px;height:36px;background:#fff;color:var(--text-dark);outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(0,144,201,0.12)}
textarea{height:auto;padding:8px 10px;resize:vertical}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
.fade{animation:fadeIn 0.3s ease forwards}
.modal-bg{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,56,101,0.55);display:flex;align-items:center;justify-content:center;z-index:999;padding:1rem}
.mbox{background:#fff;border-radius:16px;padding:0;width:100%;max-width:900px;max-height:96vh;overflow:hidden;animation:pop 0.2s ease;border-top:4px solid var(--brand-blue);display:flex;flex-direction:column}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:9px 12px;font-size:11px;font-weight:700;color:#fff;background:var(--brand-dark);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--brand-bg2);font-size:12px}
tr:nth-child(even) td{background:#FAFCFE}
.nav-tab{padding:9px 14px;background:transparent;border:none;border-bottom:3px solid transparent;font-size:12px;color:var(--text-mid);cursor:pointer;white-space:nowrap;font-weight:600;margin-bottom:-1px;transition:all 0.15s}
.nav-tab:hover{color:var(--brand-blue);border-bottom-color:var(--brand-light)}
.nav-tab.active{border-bottom-color:var(--brand-blue);color:var(--brand-blue)}
.nav-tab.locked{opacity:0.35;cursor:not-allowed}
.card{background:#fff;border:1.5px solid var(--brand-border);border-radius:12px;padding:1rem;contain:layout style}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--brand-bg)}
::-webkit-scrollbar-thumb{background:#B0CDD9;border-radius:3px}
.kpi-card{display:block!important;min-width:0;text-align:left}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)!important}
.kpi-card:active{transform:translateY(0)}

/* ── Safe area (iPhone notch / home indicator) ───────────────────── */
:root{
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* ── iOS input zoom fix: force 16px on focus so Safari doesn't zoom ─ */
@media(max-width:768px){
  input,select,textarea{font-size:16px!important}
}

/* ── Touch & scroll behaviour ────────────────────────────────────── */
html{overscroll-behavior:none}
body{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
button,a,[data-fn]{touch-action:manipulation}
*{-webkit-tap-highlight-color:transparent}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ── Sticky header respects notch ────────────────────────────────── */
.app-topbar{
  padding-top:calc(var(--sat) + 0px)!important;
  padding-left:calc(var(--sal) + 1rem)!important;
  padding-right:calc(var(--sar) + 1rem)!important;
}

/* ── Bottom padding for home-bar (iPhone) ────────────────────────── */
.app-content{
  padding-bottom:calc(var(--sab) + 3rem)!important;
}

/* ── Minimum touch target 44×44px (WCAG 2.5.5) ──────────────────── */
.nav-tab{min-height:44px;display:flex!important;align-items:center;justify-content:center}
button[data-fn]{min-height:36px}
/* Checkbox assignee widget hover */
.chk-list label:hover{background:#f0f7ff}
.chk-list label{display:flex;align-items:center;gap:8px;padding:5px 10px;cursor:pointer;font-size:12px;transition:background 0.1s}

/* ── PWA + Mobile responsive ─────────────────────────────────────── */
@media(max-width:768px){
  .card{padding:12px!important}
.kpi-card{min-height:88px;contain:layout style}
.kpi-val{min-height:30px;display:block}
.kpi-label{min-height:16px;display:block}
  /* iOS: prevent zoom on input focus — must be >=16px */
  input,select,textarea{ font-size:16px!important }
  /* Tighter modal on mobile */
  #mbox{ max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch }
  /* Hide desktop header items on mobile */
  .topbar-logo,.topbar-role,.topbar-name,.topbar-btn{ display:none!important }
  /* Show hamburger on mobile — use !important to override inline styles */
  #hbg-btn{ display:flex!important; align-items:center!important; justify-content:center!important }
  #hbg-menu{ position:relative; z-index:999 }
}
@media(min-width:769px){
  /* Hide hamburger menu on desktop */
  #hbg-btn{ display:none!important }
  #hbg-menu{ display:none!important }
}
/* ── Additional mobile fixes ──────────────────────────── */
@media(max-width:600px){
  /* Task table: hide less-critical columns on small screens */
  .hide-mobile{ display:none!important }
  /* Modals: full-width on small screens */
  #mbox{ width:calc(100vw - 24px)!important; max-width:none!important; margin:12px!important; border-radius:16px!important }
  /* Filter bar: stack vertically */
  .filter-bar{ flex-direction:column!important }
  /* KPI cards: single column on very small screens */
  [style*="grid-template-columns:repeat(2"]:not(.keep-grid){ grid-template-columns:1fr 1fr!important }
  /* Page headers: smaller text */
  .page-hdr-title{ font-size:18px!important }
  /* Bottom nav labels: smaller */
  .bnav-icon{ font-size:20px!important }
}
@media(max-width:400px){
  /* Very small phones (SE, etc) */
  [style*="grid-template-columns:repeat(2"]:not(.keep-grid){ grid-template-columns:1fr 1fr!important }
  .topbar-right .topbar-role{ display:none!important }
}
@media(max-width:768px){
  /* KPI grid: 2 columns on tablet */
  [style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
  /* Side-by-side → stacked on mobile */
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(6"]{grid-template-columns:repeat(3,1fr)!important}
  /* 3-col modal grids collapse to 1 col */
  [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr 1fr!important}
  [style*="max-width:1200px"]{padding:0.75rem 0.5rem!important}
  td,th{padding:6px 8px!important}
  /* Calendar tables scroll horizontally */
  .cal-scroll-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Page header: stack title + actions */
  .page-hdr-row{flex-direction:column!important;align-items:flex-start!important}
  .page-hdr-actions{width:100%}
  .page-hdr-actions button{width:100%!important;justify-content:center}
  /* Modal full-width on phone */
  .mbox{max-width:100vw!important;border-radius:16px 16px 0 0!important;position:fixed!important;bottom:0!important;left:0!important;right:0!important;top:auto!important;margin:0!important;max-height:92dvh!important}
  .mbox>div:nth-child(2){padding:12px!important}
  /* Stack 4-col and 2-col grids on mobile */
  .mbox [style*="grid-template-columns:2fr"]{grid-template-columns:1fr 1fr!important}
  .mbox [style*="grid-template-columns:1fr 1fr;gap:12px"]{grid-template-columns:1fr!important}
  .modal-bg{align-items:flex-end!important}
  /* Nav tab text truncation */
  .nav-tab{font-size:11px!important;padding:8px 10px!important}
  /* Topbar user info hidden on tiny screens */
  .topbar-email{display:none!important}
  /* Notification: from/to date pickers stack */
  #cal-from,#cal-to{width:100%}
}
@media(max-width:480px){
  /* KPI: 2 cols on phone */
  [style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr 1fr!important}
  [style*="grid-template-columns:repeat(2"]{grid-template-columns:1fr!important}
  h2,h3{font-size:15px!important}
  /* Toast full-width on phone */
  .toast-el{left:12px!important;right:12px!important;bottom:calc(var(--sab, 0px) + 12px)!important;max-width:none!important}
  /* Topbar: hide role badge text, keep pill */
  .topbar-name{font-size:12px!important}
  .nav-tab span.tab-icon{font-size:14px}
}

/* ── Bottom nav for PWA standalone mode ──────────────────────────── */
@media(display-mode:standalone),(display-mode:fullscreen){
  #bottom-nav{display:flex!important;height:56px;contain:layout style}
  #nav{display:none!important}
  .app-content{padding-bottom:calc(var(--sab) + 60px)!important}
}
#bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:calc(56px + var(--sab));
  padding-bottom:var(--sab);
  background:#003865;
  border-top:1px solid rgba(255,255,255,0.15);
  z-index:200;
  align-items:stretch;
  justify-content:space-around;
}
.bnav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;background:transparent;border:none;
  color:rgba(255,255,255,0.6);font-size:9px;font-weight:700;
  padding:8px 4px;cursor:pointer;min-height:56px;
  transition:color 0.15s,background 0.15s;
  text-transform:uppercase;letter-spacing:0.3px;
}
.bnav-btn.bnav-active{color:#fff;background:rgba(255,255,255,0.1)}
.bnav-btn .bnav-icon{font-size:18px;line-height:1}
/* PWA install banner */
#pwa-install{
  display:none;position:fixed;bottom:calc(var(--sab) + 8px);left:12px;right:12px;
  background:#003865;color:#fff;border-radius:12px;padding:12px 16px;
  z-index:300;align-items:center;gap:10px;
  box-shadow:0 4px 20px rgba(0,56,101,0.4);
}
#pwa-install.show{display:flex}
#pwa-install p{flex:1;font-size:13px;font-weight:600;margin:0}
#pwa-install button{padding:7px 14px;border-radius:8px;border:none;font-size:12px;font-weight:700;cursor:pointer}