/* =====================================================================
   v14.2 Principal UI/UX Architecture Layer
   Purpose: loaded LAST to neutralize old fixed-width/zoom conflicts and
   provide a responsive, modern, enterprise-grade visual system.
   ===================================================================== */

:root{
  --px-sidebar-open: 288px;
  --px-sidebar-closed: 76px;
  --px-header-min: 72px;
  --px-page-x: clamp(16px, 2.1vw, 32px);
  --px-page-y: clamp(16px, 1.7vw, 28px);
  --px-gap: clamp(12px, 1.25vw, 20px);
  --px-card-pad: clamp(14px, 1.35vw, 22px);
  --px-radius-sm: 10px;
  --px-radius-md: 14px;
  --px-radius-lg: 20px;
  --px-radius-xl: 28px;
  --px-bg: #f5f8fc;
  --px-surface: #ffffff;
  --px-surface-soft: #f8fbff;
  --px-text: #0b1220;
  --px-muted: #667085;
  --px-line: #dce5f2;
  --px-brand: #0b63f6;
  --px-brand-2: #174ea6;
  --px-success: #16a34a;
  --px-warning: #ea580c;
  --px-danger: #e11d48;
  --px-shadow-soft: 0 10px 28px rgba(15,23,42,.055);
  --px-shadow-card: 0 18px 46px rgba(15,23,42,.085);
  --px-shadow-pop: 0 24px 70px rgba(15,23,42,.15);
  --px-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --px-ease: cubic-bezier(.2,.8,.2,1);
}

/* Zoom-safe base: never fight browser zoom; make the layout fluid instead. */
html{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  font-size: clamp(14px, .18vw + 13.4px, 16px)!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
  scroll-behavior:smooth;
}
body{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  overflow-x:hidden!important;
  background:
    radial-gradient(circle at 15% 0%, rgba(11,99,246,.08), transparent 34rem),
    linear-gradient(180deg,#f8fbff 0%, var(--px-bg) 48%, #f3f6fb 100%)!important;
  color:var(--px-text)!important;
  font-family:var(--px-font)!important;
  font-feature-settings:"kern" 1, "liga" 1;
  text-rendering:optimizeLegibility;
}
*,*::before,*::after{box-sizing:border-box!important;}
img,svg,video,canvas{max-width:100%!important;height:auto;}
button,input,select,textarea{font:inherit!important;}
a{color:inherit;}

.app{
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  align-items:stretch!important;
}
main{
  min-width:0!important;
  width:calc(100% - var(--sidebar-open, var(--px-sidebar-open)))!important;
  max-width:none!important;
  margin-left:var(--sidebar-open, var(--px-sidebar-open))!important;
  transition:margin-left .22s var(--px-ease), width .22s var(--px-ease)!important;
}
body.sidebar-collapsed main{
  margin-left:var(--sidebar-closed, var(--px-sidebar-closed))!important;
  width:calc(100% - var(--sidebar-closed, var(--px-sidebar-closed)))!important;
}

/* Sidebar: stable at browser zoom, scrolls internally, footer never overlaps. */
.sidebar{
  position:fixed!important;
  inset:0 auto 0 0!important;
  width:var(--sidebar-open, var(--px-sidebar-open))!important;
  min-width:0!important;
  height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto auto!important;
  gap:clamp(7px, .8vh, 14px)!important;
  padding:clamp(10px, 1.1vw, 18px)!important;
  background:
    radial-gradient(circle at 25% 0%,rgba(85,142,255,.25),transparent 18rem),
    linear-gradient(180deg,#08224b 0%,#051932 54%,#03101f 100%)!important;
  box-shadow:18px 0 54px rgba(3,16,31,.22)!important;
  z-index:40!important;
}
body.sidebar-collapsed .sidebar{
  width:var(--sidebar-closed, var(--px-sidebar-closed))!important;
  padding-inline:10px!important;
}
.sidebar .brand{
  min-height:48px!important;
  margin:0!important;
  gap:10px!important;
  padding:8px 8px 10px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  min-width:0!important;
}
.brand-logo{
  width:clamp(34px, 2.6vw, 42px)!important;
  height:clamp(34px, 2.6vw, 42px)!important;
  min-width:clamp(34px, 2.6vw, 42px)!important;
  min-height:clamp(34px, 2.6vw, 42px)!important;
  object-fit:contain!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.95)!important;
  padding:5px!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18)!important;
}
.brand-title{min-width:0!important;overflow:hidden!important;}
.brand b{
  display:block!important;
  margin:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:clamp(.82rem, .2vw + .74rem, .95rem)!important;
  line-height:1.15!important;
  letter-spacing:-.01em!important;
}
.brand small{
  display:block!important;
  margin-top:3px!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#bfd0e7!important;
  font-size:clamp(.64rem, .16vw + .58rem, .74rem)!important;
  line-height:1.2!important;
}
body.sidebar-collapsed .brand-title,
body.sidebar-collapsed .sidebar .quick,
body.sidebar-collapsed .sidebar footer{display:none!important;}
.sidebar nav{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:2px 2px 6px!important;
  margin:0!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.32) transparent;
}
.sidebar nav::-webkit-scrollbar{width:7px;}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:999px;}
.sidebar nav a{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:clamp(32px, 4vh, 42px)!important;
  width:100%!important;
  margin:clamp(2px, .34vh, 5px) 0!important;
  padding:clamp(7px, .85vh, 11px) 11px!important;
  border-radius:14px!important;
  color:#f8fbff!important;
  font-size:clamp(.78rem, .16vw + .72rem, .9rem)!important;
  font-weight:800!important;
  line-height:1.14!important;
  text-decoration:none!important;
  letter-spacing:-.005em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  border:1px solid transparent!important;
  background:transparent!important;
  transition:background .18s var(--px-ease), transform .18s var(--px-ease), border-color .18s var(--px-ease)!important;
}
.sidebar nav a:hover,
.sidebar nav a.active{
  background:linear-gradient(135deg,rgba(11,99,246,.95),rgba(57,123,255,.88))!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 12px 28px rgba(11,99,246,.26)!important;
  transform:translateX(1px)!important;
}
body.sidebar-collapsed .sidebar nav a{
  justify-content:center!important;
  padding-inline:0!important;
  font-size:0!important;
}
body.sidebar-collapsed .sidebar nav a::before{
  content:attr(data-icon)!important;
  font-size:1.05rem!important;
  line-height:1!important;
}
.sidebar .quick{
  min-height:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:10px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.11)!important;
}
.sidebar .quick p{
  margin:0 0 7px!important;
  padding:0!important;
  color:#9fb5d2!important;
  font-size:clamp(.58rem, .12vw + .54rem, .68rem)!important;
  line-height:1.1!important;
  font-weight:900!important;
  letter-spacing:.07em!important;
}
.sidebar .quick a{
  display:inline-flex!important;
  align-items:center!important;
  min-height:26px!important;
  margin:2px 2px 0 0!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  font-size:clamp(.68rem, .12vw + .62rem, .78rem)!important;
  line-height:1!important;
  color:#dbeafe!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.1)!important;
}
.sidebar-bottom{min-height:0!important;}
.sidebar footer{
  position:static!important;
  margin:0!important;
  padding:8px 8px 2px!important;
  color:#a9bdd6!important;
  font-size:clamp(.61rem, .12vw + .56rem, .72rem)!important;
  line-height:1.35!important;
}

/* Toggle button: visible but not covering menu text. */
#sidebarToggle.floating-sidebar-toggle,
.hamb.floating-sidebar-toggle{
  position:fixed!important;
  left:calc(var(--sidebar-open, var(--px-sidebar-open)) - 17px)!important;
  top:18px!important;
  z-index:75!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  border:1px solid rgba(11,99,246,.22)!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  background:rgba(255,255,255,.94)!important;
  color:#0b63f6!important;
  font-size:1.1rem!important;
  font-weight:1000!important;
  line-height:1!important;
  box-shadow:0 14px 34px rgba(15,23,42,.18)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  cursor:pointer!important;
}
body.sidebar-collapsed #sidebarToggle.floating-sidebar-toggle,
body.sidebar-collapsed .hamb.floating-sidebar-toggle{left:calc(var(--sidebar-closed, var(--px-sidebar-closed)) - 17px)!important;}

/* Header: zoom-safe flex wrapping and no clipped user controls. */
header{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  min-height:var(--px-header-min)!important;
  height:auto!important;
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:var(--px-gap)!important;
  padding:12px var(--px-page-x)!important;
  background:rgba(255,255,255,.82)!important;
  border-bottom:1px solid rgba(220,229,242,.92)!important;
  backdrop-filter:blur(18px) saturate(155%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(155%)!important;
  box-shadow:0 8px 28px rgba(15,23,42,.04)!important;
}
.searchbar-area{flex:1 1 420px!important;min-width:min(100%,220px)!important;}
.topsearch{
  width:min(100%, 720px)!important;
  max-width:100%!important;
  height:auto!important;
  min-height:44px!important;
  margin:0!important;
  padding:4px!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  border:1px solid var(--px-line)!important;
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:0 10px 24px rgba(15,23,42,.05)!important;
}
.topsearch input{
  min-width:0!important;
  width:100%!important;
  flex:1 1 auto!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  padding:8px 12px!important;
  font-size:.9rem!important;
  color:var(--px-text)!important;
}
.topsearch button,.primary,.formbuttons button,.filteractions button,
.approved-login-card button,.qa,.mini-link,.buttons a,.filteractions a,.formbuttons a{
  min-height:38px!important;
  border-radius:999px!important;
  font-size:.84rem!important;
  font-weight:900!important;
  line-height:1.1!important;
  padding:9px 16px!important;
  white-space:nowrap!important;
}
.icons{
  flex:0 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
}
.theme-toggle,.notify-bell,.avatar{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  border:1px solid var(--px-line)!important;
  background:#fff!important;
  box-shadow:0 9px 22px rgba(15,23,42,.05)!important;
  padding:0!important;
}
.avatar{border:0!important;background:linear-gradient(135deg,#7c3aed,#0b63f6)!important;color:#fff!important;font-size:.78rem!important;font-weight:1000!important;}
.usertext{max-width:clamp(100px, 12vw, 190px)!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.86rem!important;font-weight:850!important;line-height:1.1!important;}
.usertext small{display:block!important;margin-top:2px!important;font-size:.68rem!important;color:#718198!important;font-weight:750!important;}
.logout{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:36px!important;padding:8px 12px!important;border-radius:999px!important;border:1px solid var(--px-line)!important;background:#fff!important;color:#344054!important;text-decoration:none!important;font-size:.78rem!important;font-weight:850!important;white-space:nowrap!important;}

/* Page structure and typography. */
.title,.formtitle,.page-head,.dashboard-live-head{
  width:100%!important;
  min-width:0!important;
  padding:var(--px-page-y) var(--px-page-x)!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:var(--px-gap)!important;
}
.title h1,.formtitle h1,.page-head h1,.dashboard-live-head h1{
  margin:0!important;
  max-width:100%!important;
  font-size:clamp(1.45rem, 1.15vw + 1rem, 2.2rem)!important;
  line-height:1.08!important;
  letter-spacing:-.04em!important;
  color:var(--px-text)!important;
}
.title p,.formtitle p,.page-head p,.dashboard-live-head p{
  margin:.45rem 0 0!important;
  max-width:74ch!important;
  color:var(--px-muted)!important;
  font-size:clamp(.86rem, .15vw + .8rem, .98rem)!important;
  line-height:1.45!important;
}
.eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  width:max-content!important;
  max-width:100%!important;
  margin-bottom:8px!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:#eaf3ff!important;
  color:#0b63f6!important;
  font-size:.68rem!important;
  font-weight:1000!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

/* Cards and grids: remove fixed columns that break at browser zoom. */
.card,.metric-card,.stats div,.userstats div,.tablecard,.table-card,.formcard,.filtercard,.reportbox,.chartbox,
.calendar-card,.year-overview-card,.timeline-card,.lane,.ticket,.ops-card{
  min-width:0!important;
  border:1px solid var(--px-line)!important;
  border-radius:var(--px-radius-lg)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:var(--px-shadow-soft)!important;
  transition:box-shadow .18s var(--px-ease), transform .18s var(--px-ease), border-color .18s var(--px-ease)!important;
}
.card:hover,.metric-card:hover,.stats div:hover,.userstats div:hover,.tablecard:hover,.table-card:hover,.filtercard:hover,.chartbox:hover,.lane:hover,.ticket:hover{
  box-shadow:var(--px-shadow-card)!important;
  border-color:#cfe0f8!important;
}
.metrics,.live-metrics,.v60-metrics,.stats,.userstats,.report-metrics{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit, minmax(min(178px, 100%), 1fr))!important;
  gap:var(--px-gap)!important;
  padding:0 var(--px-page-x) var(--px-page-y)!important;
}
.metric-card,.stats div,.userstats div{
  min-height:116px!important;
  padding:var(--px-card-pad)!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  text-decoration:none!important;
  color:inherit!important;
}
.metric-card h2,.stats b,.userstats b{
  margin:0!important;
  font-size:clamp(1.55rem, 1.4vw + .8rem, 2.45rem)!important;
  line-height:.95!important;
  letter-spacing:-.05em!important;
  color:var(--px-text)!important;
}
.metric-card small,.stats span,.userstats span{
  color:var(--px-muted)!important;
  font-size:.72rem!important;
  font-weight:950!important;
  line-height:1.15!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
}
.dashboard-grid,.ops-grid,.charts,.reportgrid,.ops-grid-top,.ops-grid-main,.ops-grid-2,.dashboard-live-grid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr))!important;
  gap:var(--px-gap)!important;
  padding:0 var(--px-page-x) var(--px-page-y)!important;
}
.ops-grid-main{
  grid-template-columns:minmax(0, 1fr) minmax(260px, 340px)!important;
  align-items:start!important;
}
.ops-right-column{min-width:0!important;display:grid!important;gap:var(--px-gap)!important;}
.ai-results-horizontal-section{padding:0 var(--px-page-x) var(--px-page-y)!important;min-width:0!important;}
.ai-horizontal-card{margin:0!important;width:100%!important;}
.tablecard,.table-card,.formcard,.filtercard,.reportbox,.chartbox,.card{
  margin-left:var(--px-page-x)!important;
  margin-right:var(--px-page-x)!important;
  padding:var(--px-card-pad)!important;
}
.ops-grid-top .card,.ops-grid-main .card,.dashboard-grid .card,.charts .card,.reportgrid .card,
.ai-results-horizontal-section .card{
  margin-left:0!important;
  margin-right:0!important;
}

/* Tables: contain wide content instead of expanding the whole page. */
.tablecard,.table-card,.ops-table-wrap,#recentTasksTable{
  overflow:auto!important;
  max-width:100%!important;
  -webkit-overflow-scrolling:touch!important;
}
table{
  width:100%!important;
  min-width:min(820px, 96vw)!important;
  max-width:none!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  font-size:.86rem!important;
}
th,td{
  padding:11px 13px!important;
  line-height:1.32!important;
  vertical-align:middle!important;
  border-bottom:1px solid rgba(220,229,242,.82)!important;
}
th{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  background:#f8fafc!important;
  color:#475467!important;
  font-size:.72rem!important;
  font-weight:950!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
td small{color:var(--px-muted)!important;font-size:.76rem!important;line-height:1.25!important;}
.tag,.st,.type,.live-chip{
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:24px!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  font-size:.68rem!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* Forms and filters: larger touch targets, fluid grid. */
.gridfilters,.formgrid,.user-form-grid,.compact{
  display:grid!important;
  grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr))!important;
  gap:14px!important;
  min-width:0!important;
}
.span2{grid-column:1 / -1!important;}
.filtercard input,.filtercard select,.formcard input,.formcard select,.formcard textarea,.reportbox input,.approved-input{
  width:100%!important;
  min-height:42px!important;
  border:1px solid var(--px-line)!important;
  border-radius:13px!important;
  background:#fff!important;
  padding:10px 12px!important;
  font-size:.9rem!important;
  outline:none!important;
  transition:border-color .16s var(--px-ease), box-shadow .16s var(--px-ease)!important;
}
.filtercard input:focus,.filtercard select:focus,.formcard input:focus,.formcard select:focus,.formcard textarea:focus,.reportbox input:focus{
  border-color:rgba(11,99,246,.55)!important;
  box-shadow:0 0 0 4px rgba(11,99,246,.1)!important;
}
.quickrow,.daterow,.form-action-row{min-width:0!important;gap:12px!important;flex-wrap:wrap!important;}
.buttons{display:flex!important;gap:8px!important;flex-wrap:wrap!important;}

/* Kanban: fit more screens without squeezing cards. */
.kanban{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit, minmax(min(255px, 100%), 1fr))!important;
  gap:var(--px-gap)!important;
  padding:0 var(--px-page-x) var(--px-page-y)!important;
  overflow:visible!important;
}
.lane{
  min-width:0!important;
  max-width:100%!important;
  padding:14px!important;
  background:linear-gradient(180deg,#f8fbff,#f3f7fd)!important;
}
.ticket{padding:13px!important;margin-bottom:10px!important;}
.ticket p{font-size:.84rem!important;line-height:1.4!important;color:#475467!important;}
.move{gap:5px!important;}
.move a,.addlane{min-height:24px!important;border-radius:999px!important;font-size:.66rem!important;font-weight:900!important;}

/* Login: no clipping at 90/100/110/125/150 zoom; allow vertical scroll. */
.loginbody{overflow:auto!important;background:#0b3b8a!important;}
.approved-login-page{
  min-height:100dvh!important;
  width:100%!important;
  overflow:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0, 1.12fr) minmax(360px, .88fr)!important;
  background:linear-gradient(135deg,#082a63 0%,#0b63f6 54%,#fff 54%,#fff 100%)!important;
}
.approved-left,.approved-right{min-width:0!important;}
.approved-left{padding:clamp(24px, 4vw, 58px)!important;display:flex!important;flex-direction:column!important;}
.approved-right{padding:clamp(18px, 3vw, 38px)!important;display:grid!important;place-items:center!important;}
.approved-login-card{
  width:min(430px, 94vw)!important;
  max-width:100%!important;
  padding:clamp(22px, 2.6vw, 34px)!important;
  border-radius:var(--px-radius-xl)!important;
  box-shadow:var(--px-shadow-pop)!important;
}
.approved-card-logo strong{font-size:clamp(1.65rem, 1.2vw + 1rem, 2.35rem)!important;line-height:1!important;}
.approved-headline h1{font-size:clamp(2rem, 3.2vw, 4.4rem)!important;line-height:.98!important;letter-spacing:-.06em!important;}
.approved-headline p{font-size:clamp(.95rem, .35vw + .85rem, 1.15rem)!important;line-height:1.5!important;}
.approved-illustration{max-height:min(39vh, 330px)!important;min-height:180px!important;}

/* Notification panel: keep inside viewport. */
.notify-wrap{position:relative!important;}
.notify-panel{
  right:0!important;
  left:auto!important;
  width:min(360px, calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  border-radius:18px!important;
  box-shadow:var(--px-shadow-pop)!important;
}

/* Dark mode correction for the final layer. */
body.dark-mode{
  --px-bg:#07111f;
  --px-surface:#0b1628;
  --px-surface-soft:#0f1d33;
  --px-text:#e5edf8;
  --px-muted:#9fb0c6;
  --px-line:#1c2d45;
  background:#07111f!important;
  color:var(--px-text)!important;
}
body.dark-mode header{background:rgba(8,18,34,.84)!important;border-color:#1c2d45!important;}
body.dark-mode .card,body.dark-mode .metric-card,body.dark-mode .stats div,body.dark-mode .userstats div,
body.dark-mode .tablecard,body.dark-mode .table-card,body.dark-mode .formcard,body.dark-mode .filtercard,body.dark-mode .reportbox,body.dark-mode .chartbox,
body.dark-mode .calendar-card,body.dark-mode .year-overview-card,body.dark-mode .timeline-card,body.dark-mode .lane,body.dark-mode .ticket,body.dark-mode .ops-card{
  background:rgba(11,22,40,.96)!important;
  border-color:#1c2d45!important;
  color:#e5edf8!important;
}
body.dark-mode .topsearch,body.dark-mode .theme-toggle,body.dark-mode .notify-bell,body.dark-mode .logout,
body.dark-mode .filtercard input,body.dark-mode .filtercard select,body.dark-mode .formcard input,body.dark-mode .formcard select,body.dark-mode .formcard textarea,body.dark-mode .reportbox input{
  background:#0b1628!important;
  color:#e5edf8!important;
  border-color:#1c2d45!important;
}
body.dark-mode th{background:#0f1d33!important;color:#b7c5d8!important;}
body.dark-mode td{border-color:#1c2d45!important;}
body.dark-mode .title h1,body.dark-mode .formtitle h1,body.dark-mode .page-head h1,body.dark-mode .dashboard-live-head h1,
body.dark-mode .metric-card h2,body.dark-mode .stats b,body.dark-mode .userstats b{color:#e5edf8!important;}

/* Desktop zoom-specific height safety. */
@media (max-height:760px) and (min-width:901px){
  .sidebar{gap:6px!important;padding-top:8px!important;padding-bottom:8px!important;}
  .sidebar .brand{min-height:42px!important;padding:6px!important;}
  .brand-logo{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;}
  .brand b{font-size:.76rem!important;}.brand small{font-size:.6rem!important;}
  .sidebar nav a{min-height:28px!important;padding:5px 8px!important;margin:1px 0!important;font-size:.72rem!important;}
  .sidebar .quick{padding:7px!important;}
  .sidebar .quick p{font-size:.56rem!important;margin-bottom:5px!important;}
  .sidebar .quick a{min-height:22px!important;padding:4px 7px!important;font-size:.62rem!important;}
  .sidebar footer{font-size:.58rem!important;padding-top:5px!important;}
  header{min-height:62px!important;padding-top:9px!important;padding-bottom:9px!important;}
}

/* Tablet and high zoom: keep desktop usable longer; only switch when truly narrow. */
@media (max-width:900px){
  :root{--sidebar-open:0px!important;--sidebar-closed:0px!important;}
  main,body.sidebar-collapsed main{margin-left:0!important;width:100%!important;}
  .sidebar{
    width:min(288px, 88vw)!important;
    transform:translateX(-104%)!important;
    transition:transform .22s var(--px-ease)!important;
    box-shadow:24px 0 70px rgba(3,16,31,.34)!important;
  }
  body:not(.sidebar-collapsed) .sidebar{transform:translateX(0)!important;}
  body.sidebar-collapsed .sidebar{width:min(288px, 88vw)!important;}
  body.sidebar-collapsed .brand-title,body.sidebar-collapsed .sidebar .quick,body.sidebar-collapsed .sidebar footer{display:block!important;}
  body.sidebar-collapsed .sidebar nav a{justify-content:flex-start!important;padding:clamp(7px,.85vh,11px) 11px!important;font-size:clamp(.78rem,.16vw + .72rem,.9rem)!important;}
  body.sidebar-collapsed .sidebar nav a::before{content:none!important;}
  #sidebarToggle.floating-sidebar-toggle,
  body.sidebar-collapsed #sidebarToggle.floating-sidebar-toggle,
  .hamb.floating-sidebar-toggle,
  body.sidebar-collapsed .hamb.floating-sidebar-toggle{left:14px!important;top:14px!important;}
  header{padding-left:60px!important;flex-wrap:wrap!important;}
  .searchbar-area{order:2!important;flex-basis:100%!important;}
  .topsearch{width:100%!important;}
  .usertext,.logout[href="/change-password"]{display:none!important;}
  .ops-grid-main{grid-template-columns:1fr!important;}
  .tablecard,.table-card,.formcard,.filtercard,.reportbox,.chartbox,.card{margin-left:var(--px-page-x)!important;margin-right:var(--px-page-x)!important;}
  .ops-grid-top .card,.ops-grid-main .card,.dashboard-grid .card,.charts .card,.reportgrid .card,.ai-results-horizontal-section .card{margin-left:0!important;margin-right:0!important;}
  .approved-login-page{grid-template-columns:1fr!important;background:linear-gradient(135deg,#082a63,#0b63f6)!important;}
  .approved-left{display:none!important;}
  .approved-right{min-height:100dvh!important;}
}

@media (max-width:640px){
  html{font-size:14px!important;}
  header{gap:10px!important;}
  .logout{display:none!important;}
  .title,.formtitle,.page-head,.dashboard-live-head{display:block!important;}
  .date-box{margin-top:12px!important;width:max-content!important;max-width:100%!important;}
  .metrics,.live-metrics,.v60-metrics,.stats,.userstats,.dashboard-grid,.ops-grid,.charts,.reportgrid,.ops-grid-top,.ops-grid-main,.kanban{
    grid-template-columns:1fr!important;
  }
  .metric-card,.stats div,.userstats div{min-height:96px!important;}
  .topsearch button{padding-inline:12px!important;}
  .icons{gap:6px!important;}
  .theme-toggle,.notify-bell,.avatar{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;}
  .ai-horizontal-head,.card-head{align-items:flex-start!important;gap:10px!important;flex-wrap:wrap!important;}
  .ai-controls{width:100%!important;display:flex!important;gap:8px!important;flex-wrap:wrap!important;}
}

/* Print and accessibility. */
@media print{
  .sidebar,#sidebarToggle,header,.page-loader{display:none!important;}
  main{margin:0!important;width:100%!important;}
  body{background:#fff!important;}
  .card,.tablecard,.table-card{box-shadow:none!important;break-inside:avoid;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}
}