/* =====================================================================
   v14.3 Principal UI/UX Architect Layer
   Last-loaded corrective system for browser zoom, font scale, responsive
   layout, enterprise visual polish, and high-density IT operations screens.

   Design rule: do not fight browser zoom. Make containers fluid, isolate
   horizontal overflow inside cards/tables, and keep typography predictable.
   ===================================================================== */

:root{
  color-scheme: light;
  --wb-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --wb-sidebar-open: clamp(248px, 18vw, 292px);
  --wb-sidebar-closed: 76px;
  --wb-page-x: clamp(16px, 2vw, 32px);
  --wb-page-y: clamp(16px, 1.55vw, 28px);
  --wb-gap: clamp(12px, 1.2vw, 20px);
  --wb-card-pad: clamp(14px, 1.35vw, 22px);
  --wb-radius-sm: 10px;
  --wb-radius-md: 14px;
  --wb-radius-lg: 20px;
  --wb-radius-xl: 28px;
  --wb-bg: #f5f8fc;
  --wb-bg-2: #eef4fb;
  --wb-surface: rgba(255,255,255,.96);
  --wb-surface-solid: #ffffff;
  --wb-surface-soft: #f8fbff;
  --wb-text: #0b1220;
  --wb-text-2: #344054;
  --wb-muted: #667085;
  --wb-line: #dbe5f1;
  --wb-brand: #0b63f6;
  --wb-brand-2: #174ea6;
  --wb-brand-soft: #eaf3ff;
  --wb-success: #16a34a;
  --wb-warning: #f97316;
  --wb-danger: #e11d48;
  --wb-purple: #7c3aed;
  --wb-shadow-xs: 0 2px 8px rgba(15,23,42,.045);
  --wb-shadow-sm: 0 10px 28px rgba(15,23,42,.065);
  --wb-shadow-md: 0 18px 48px rgba(15,23,42,.095);
  --wb-shadow-lg: 0 28px 78px rgba(15,23,42,.16);
  --wb-ease: cubic-bezier(.2,.8,.2,1);
}

@media (max-width: 1280px){:root{--wb-sidebar-open: 264px;}}
@media (max-width: 1080px){:root{--wb-sidebar-open: 244px;--wb-sidebar-closed:70px;}}

/* 1) Browser zoom foundation ------------------------------------------------ */
html{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  font-size:16px!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
  overflow-x:hidden!important;
  scroll-behavior:smooth;
}
body{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  overflow-x:hidden!important;
  font-family:var(--wb-font-sans)!important;
  line-height:1.45!important;
  color:var(--wb-text)!important;
  background:
    radial-gradient(circle at 16% -6%, rgba(11,99,246,.11), transparent 31rem),
    radial-gradient(circle at 92% 12%, rgba(124,58,237,.07), transparent 27rem),
    linear-gradient(180deg,#f8fbff 0%,var(--wb-bg) 48%,var(--wb-bg-2) 100%)!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{text-decoration-thickness:.08em;text-underline-offset:.16em;}
:focus-visible{outline:3px solid rgba(11,99,246,.25)!important;outline-offset:3px!important;border-radius:10px;}

/* 2) App shell -------------------------------------------------------------- */
.app{
  width:100%!important;
  min-width:0!important;
  min-height:100dvh!important;
  display:block!important;
}
main{
  min-width:0!important;
  max-width:none!important;
  width:calc(100% - var(--sidebar-open, var(--wb-sidebar-open)))!important;
  margin-left:var(--sidebar-open, var(--wb-sidebar-open))!important;
  overflow-x:clip!important;
  padding-bottom:28px!important;
  transition:margin-left .22s var(--wb-ease), width .22s var(--wb-ease)!important;
}
body.sidebar-collapsed main{
  width:calc(100% - var(--sidebar-closed, var(--wb-sidebar-closed)))!important;
  margin-left:var(--sidebar-closed, var(--wb-sidebar-closed))!important;
}
main > *{min-width:0!important;}

/* 3) Sidebar: fixed, zoom-safe, internal scroll only ----------------------- */
.sidebar{
  position:fixed!important;
  inset:0 auto 0 0!important;
  width:var(--sidebar-open, var(--wb-sidebar-open))!important;
  height:100dvh!important;
  min-height:0!important;
  min-width:0!important;
  z-index:50!important;
  padding:clamp(10px,1vw,16px)!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  overflow:hidden!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(96,165,250,.24),transparent 17rem),
    linear-gradient(180deg,#08224b 0%,#051a34 54%,#030f1f 100%)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:18px 0 54px rgba(3,16,31,.24)!important;
}
body.sidebar-collapsed .sidebar{
  width:var(--sidebar-closed, var(--wb-sidebar-closed))!important;
  padding-inline:10px!important;
}
.sidebar .brand{
  flex:0 0 auto!important;
  min-width:0!important;
  min-height:48px!important;
  margin:0!important;
  padding:8px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.105)!important;
}
.brand-logo{
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
  object-fit:contain!important;border-radius:13px!important;background:#fff!important;padding:5px!important;
  box-shadow:0 10px 26px rgba(0,0,0,.2)!important;
}
.brand-title{min-width:0!important;overflow:hidden!important;}
.brand b{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.9rem!important;line-height:1.12!important;letter-spacing:-.01em!important;}
.brand small{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;margin-top:3px!important;color:#bfd0e7!important;font-size:.7rem!important;line-height:1.2!important;}
.sidebar nav{
  flex:1 1 auto!important;
  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,.34) transparent;
}
.sidebar nav::-webkit-scrollbar{width:7px;}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:999px;}
.sidebar nav a{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  min-height:clamp(32px,4.1vh,42px)!important;
  margin:2px 0!important;
  padding:clamp(7px,.78vh,11px) 11px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  border-radius:14px!important;
  border:1px solid transparent!important;
  color:#edf6ff!important;
  background:transparent!important;
  font-size:clamp(.76rem,.12vw + .72rem,.88rem)!important;
  font-weight:820!important;
  line-height:1.16!important;
  letter-spacing:-.005em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-decoration:none!important;
  transition:transform .18s var(--wb-ease),background .18s var(--wb-ease),box-shadow .18s var(--wb-ease)!important;
}
.sidebar nav a::after{
  content:"";position:absolute;left:7px;top:50%;width:3px;height:0;border-radius:999px;background:#93c5fd;transform:translateY(-50%);transition:height .18s var(--wb-ease);
}
.sidebar nav a:hover,.sidebar nav a.active{
  background:linear-gradient(135deg,rgba(11,99,246,.97),rgba(57,123,255,.88))!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 12px 28px rgba(11,99,246,.27)!important;
  transform:translateX(1px)!important;
}
.sidebar nav a:hover::after,.sidebar nav a.active::after{height:54%;}
.sidebar .quick{
  flex:0 1 auto!important;
  max-height:min(30dvh,230px)!important;
  min-height:0!important;
  overflow:auto!important;
  margin:0!important;
  padding:10px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.072)!important;
  border:1px solid rgba(255,255,255,.105)!important;
  scrollbar-width:thin;
}
.sidebar .quick p{margin:0 0 7px!important;padding:0!important;color:#9fb5d2!important;font-size:.62rem!important;font-weight:950!important;letter-spacing:.075em!important;line-height:1.1!important;}
.sidebar .quick a{display:inline-flex!important;align-items:center!important;min-height:24px!important;margin:2px 2px 0 0!important;padding:5px 8px!important;border-radius:999px!important;color:#dbeafe!important;background:rgba(255,255,255,.085)!important;border:1px solid rgba(255,255,255,.1)!important;font-size:.69rem!important;line-height:1!important;white-space:nowrap!important;text-decoration:none!important;}
.sidebar-bottom{flex:0 0 auto!important;min-height:0!important;}
.sidebar footer{position:static!important;margin:0!important;padding:4px 8px 2px!important;color:#a9bdd6!important;font-size:.66rem!important;line-height:1.3!important;}
body.sidebar-collapsed .brand-title,body.sidebar-collapsed .sidebar .quick,body.sidebar-collapsed .sidebar footer{display:none!important;}
body.sidebar-collapsed .sidebar .brand{justify-content:center!important;padding-inline:4px!important;}
body.sidebar-collapsed .brand-logo{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!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;}
body.sidebar-collapsed .sidebar nav a::after{display:none!important;}

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

/* 4) Header: high zoom should wrap gracefully, not clip -------------------- */
header{
  position:sticky!important;top:0!important;z-index:35!important;
  min-width:0!important;width:100%!important;min-height:68px!important;height:auto!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:var(--wb-gap)!important;
  padding:12px var(--wb-page-x)!important;
  background:rgba(255,255,255,.84)!important;
  border-bottom:1px solid rgba(219,229,241,.9)!important;
  box-shadow:0 8px 26px rgba(15,23,42,.045)!important;
  backdrop-filter:blur(18px) saturate(160%)!important;-webkit-backdrop-filter:blur(18px) saturate(160%)!important;
}
.searchbar-area{flex:1 1 420px!important;min-width:200px!important;max-width:760px!important;}
.topsearch{width:100%!important;max-width:100%!important;min-width:0!important;min-height:42px!important;height:auto!important;margin:0!important;padding:4px!important;display:flex!important;align-items:center!important;gap:6px!important;border:1px solid var(--wb-line)!important;border-radius:999px!important;background:#fff!important;box-shadow:var(--wb-shadow-xs)!important;}
.topsearch input{flex:1 1 auto!important;min-width:0!important;width:100%!important;border:0!important;outline:0!important;background:transparent!important;color:var(--wb-text)!important;padding:8px 12px!important;font-size:.9rem!important;}
.topsearch button,.primary,.formbuttons button,.filteractions button,.approved-login-card button,.qa,.mini-link,.buttons a,.filteractions a,.formbuttons a,.ai-refresh-now{
  min-height:36px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;border-radius:999px!important;padding:8px 14px!important;font-size:.82rem!important;font-weight:900!important;line-height:1.1!important;white-space:nowrap!important;text-decoration:none!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;padding:0!important;border:1px solid var(--wb-line)!important;background:#fff!important;box-shadow:var(--wb-shadow-xs)!important;}
.avatar{border:0!important;background:linear-gradient(135deg,var(--wb-purple),var(--wb-brand))!important;color:#fff!important;font-size:.78rem!important;font-weight:1000!important;}
.usertext{max-width:clamp(90px,11vw,180px)!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.84rem!important;font-weight:850!important;line-height:1.08!important;color:var(--wb-text-2)!important;}
.usertext small{display:block!important;margin-top:2px!important;font-size:.68rem!important;color:var(--wb-muted)!important;font-weight:750!important;}
.logout{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:34px!important;padding:7px 11px!important;border-radius:999px!important;border:1px solid var(--wb-line)!important;background:#fff!important;color:var(--wb-text-2)!important;font-size:.77rem!important;font-weight:850!important;text-decoration:none!important;white-space:nowrap!important;}
.notify-wrap{position:relative!important;}
.notify-panel{right:0!important;left:auto!important;width:min(370px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;border-radius:18px!important;box-shadow:var(--wb-shadow-lg)!important;}

/* 5) Typography and page sections ----------------------------------------- */
.title,.formtitle,.page-head,.dashboard-live-head{
  width:100%!important;min-width:0!important;padding:var(--wb-page-y) var(--wb-page-x)!important;
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:var(--wb-gap)!important;
}
.title h1,.formtitle h1,.page-head h1,.dashboard-live-head h1{margin:0!important;color:var(--wb-text)!important;font-size:clamp(1.45rem,1.1vw + 1rem,2.15rem)!important;line-height:1.08!important;letter-spacing:-.04em!important;}
.title p,.formtitle p,.page-head p,.dashboard-live-head p{margin:.45rem 0 0!important;color:var(--wb-muted)!important;font-size:clamp(.86rem,.14vw + .8rem,.98rem)!important;line-height:1.48!important;max-width:76ch!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:var(--wb-brand-soft)!important;color:var(--wb-brand)!important;font-size:.68rem!important;font-weight:1000!important;letter-spacing:.08em!important;text-transform:uppercase!important;}
.date-box{flex:0 0 auto!important;max-width:100%!important;border-radius:16px!important;box-shadow:var(--wb-shadow-xs)!important;}

/* 6) Enterprise cards, grids, dashboard ------------------------------------ */
.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;max-width:100%!important;border:1px solid var(--wb-line)!important;border-radius:var(--wb-radius-lg)!important;background:var(--wb-surface)!important;box-shadow:var(--wb-shadow-sm)!important;transition:box-shadow .18s var(--wb-ease),transform .18s var(--wb-ease),border-color .18s var(--wb-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(--wb-shadow-md)!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(176px,100%),1fr))!important;gap:var(--wb-gap)!important;padding:0 var(--wb-page-x) var(--wb-page-y)!important;}
.metric-card,.stats div,.userstats div{min-height:114px!important;padding:var(--wb-card-pad)!important;display:flex!important;align-items:center!important;gap:12px!important;color:inherit!important;text-decoration:none!important;overflow:hidden!important;}
.metric-card h2,.stats b,.userstats b{margin:0!important;color:var(--wb-text)!important;font-size:clamp(1.55rem,1.35vw + .82rem,2.4rem)!important;line-height:.95!important;letter-spacing:-.05em!important;}
.metric-card small,.stats span,.userstats span{display:block!important;color:var(--wb-muted)!important;font-size:.72rem!important;font-weight:950!important;letter-spacing:.05em!important;line-height:1.15!important;text-transform:uppercase!important;}
.metric-card p,.muted{color:var(--wb-muted)!important;font-size:.8rem!important;line-height:1.35!important;}
.circle{width:44px!important;height:44px!important;min-width:44px!important;border-radius:16px!important;display:grid!important;place-items:center!important;font-size:1rem!important;}
.ops-status-strip{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:10px!important;padding:0 var(--wb-page-x) var(--wb-page-y)!important;}
.ops-mini{min-width:0!important;min-height:56px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:12px 14px!important;border-radius:18px!important;border:1px solid var(--wb-line)!important;background:rgba(255,255,255,.86)!important;box-shadow:var(--wb-shadow-xs)!important;text-decoration:none!important;color:var(--wb-text)!important;}
.ops-mini b{font-size:.82rem!important;letter-spacing:.03em!important;}.ops-mini span{font-size:.75rem!important;font-weight:850!important;color:var(--wb-muted)!important;white-space:nowrap!important;}
.ops-mini.ok{border-color:rgba(22,163,74,.22)!important;background:linear-gradient(180deg,#ffffff,#f0fdf4)!important;}.ops-mini.warn{border-color:rgba(249,115,22,.25)!important;background:linear-gradient(180deg,#ffffff,#fff7ed)!important;}.ops-mini.danger{border-color:rgba(225,29,72,.25)!important;background:linear-gradient(180deg,#ffffff,#fff1f2)!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(--wb-gap)!important;padding:0 var(--wb-page-x) var(--wb-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(--wb-gap)!important;}
.card-head,.ai-horizontal-head{min-width:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
.card-head h3,.card h3{margin:0!important;color:var(--wb-text)!important;font-size:clamp(1rem,.32vw + .92rem,1.18rem)!important;line-height:1.2!important;letter-spacing:-.015em!important;}
.tablecard,.table-card,.formcard,.filtercard,.reportbox,.chartbox,.card{margin-left:var(--wb-page-x)!important;margin-right:var(--wb-page-x)!important;padding:var(--wb-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;}

/* 7) AI widget: compact executive pattern ---------------------------------- */
.ai-results-horizontal-section{padding:0 var(--wb-page-x) var(--wb-page-y)!important;min-width:0!important;}
.ai-horizontal-card{margin:0!important;width:100%!important;overflow:hidden!important;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,251,255,.94))!important;}
.ai-horizontal-head{align-items:flex-start!important;flex-wrap:wrap!important;}
.ai-controls{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;}
.ai-controls label{color:var(--wb-muted)!important;font-size:.75rem!important;font-weight:850!important;}.ai-controls select{min-height:34px!important;border-radius:999px!important;border:1px solid var(--wb-line)!important;background:#fff!important;padding:6px 10px!important;font-size:.78rem!important;font-weight:850!important;}
.ai-smart-results-horizontal{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))!important;gap:10px!important;min-height:0!important;margin:14px 0!important;}
.ai-smart-item{min-width:0!important;display:grid!important;grid-template-columns:38px minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;padding:11px 12px!important;border:1px solid #e4ecf7!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--wb-shadow-xs)!important;text-decoration:none!important;color:var(--wb-text)!important;}
.ai-smart-icon{width:36px!important;height:36px!important;min-width:36px!important;border-radius:14px!important;display:grid!important;place-items:center!important;background:#eef6ff!important;color:var(--wb-brand)!important;font-weight:900!important;}.ai-smart-copy{min-width:0!important;}.ai-smart-copy b{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.82rem!important;line-height:1.2!important;}.ai-smart-copy small{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;color:var(--wb-muted)!important;font-size:.73rem!important;line-height:1.3!important;}.ai-smart-item em{font-style:normal!important;font-size:.68rem!important;font-weight:950!important;color:var(--wb-brand)!important;background:#eef6ff!important;border-radius:999px!important;padding:6px 8px!important;white-space:nowrap!important;}
.ai-inline-form,.ai-horizontal-form{display:flex!important;gap:8px!important;align-items:center!important;}.ai-inline-form input{flex:1 1 auto!important;min-width:0!important;min-height:40px!important;border:1px solid var(--wb-line)!important;border-radius:999px!important;padding:9px 13px!important;background:#fff!important;}.ai-inline-form button{width:40px!important;height:40px!important;min-width:40px!important;border-radius:999px!important;display:grid!important;place-items:center!important;}

/* 8) Tables: overflow belongs inside card, never body ---------------------- */
.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(860px,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(219,229,241,.84)!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{display:block!important;color:var(--wb-muted)!important;font-size:.75rem!important;line-height:1.25!important;}.task-name-link{font-weight:850!important;color:var(--wb-brand-2)!important;text-decoration:none!important;}.tag,.st,.type,.live-chip,.badge,.status{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;}

/* 9) Forms, filters, actions ----------------------------------------------- */
.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(--wb-line)!important;border-radius:13px!important;background:#fff!important;color:var(--wb-text)!important;padding:10px 12px!important;font-size:.9rem!important;outline:none!important;transition:border-color .16s var(--wb-ease),box-shadow .16s var(--wb-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;}

/* 10) Kanban: adaptive lanes instead of forced six columns ----------------- */
.kanban{width:100%!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))!important;gap:var(--wb-gap)!important;padding:0 var(--wb-page-x) var(--wb-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;}.lane h3{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-top:0!important;}.ticket{padding:13px!important;margin-bottom:10px!important;}.ticket p{color:var(--wb-muted)!important;font-size:.84rem!important;line-height:1.4!important;}.move{gap:5px!important;}.move a,.addlane{min-height:24px!important;border-radius:999px!important;font-size:.66rem!important;font-weight:900!important;}

/* 11) Login: premium look, no zoom clipping -------------------------------- */
.loginbody{min-height:100dvh!important;overflow:auto!important;background:#0b3b8a!important;}.approved-login-page{width:100%!important;min-height:100dvh!important;overflow:auto!important;display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!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{position:relative!important;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(--wb-radius-xl)!important;box-shadow:var(--wb-shadow-lg)!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.1vw,4.3rem)!important;line-height:.99!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(38vh,330px)!important;min-height:170px!important;}.approved-options{gap:10px!important;flex-wrap:wrap!important;}.approved-ms{min-height:42px!important;border-radius:999px!important;}

/* 12) Dark mode ------------------------------------------------------------- */
body.dark-mode{color-scheme:dark;--wb-bg:#07111f;--wb-bg-2:#091629;--wb-surface:rgba(11,22,40,.96);--wb-surface-solid:#0b1628;--wb-surface-soft:#0f1d33;--wb-text:#e5edf8;--wb-text-2:#d6e2f1;--wb-muted:#9fb0c6;--wb-line:#1c2d45;--wb-brand-soft:#102c52;background:#07111f!important;color:var(--wb-text)!important;}body.dark-mode header{background:rgba(8,18,34,.86)!important;border-color:#1c2d45!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,body.dark-mode .ai-controls select,body.dark-mode .ai-inline-form input{background:#0b1628!important;color:#e5edf8!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,body.dark-mode .ai-smart-item,body.dark-mode .ops-mini{background:rgba(11,22,40,.96)!important;border-color:#1c2d45!important;color:#e5edf8!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,body.dark-mode .card-head h3,body.dark-mode .card h3{color:#e5edf8!important;}body.dark-mode .ops-mini.ok,body.dark-mode .ops-mini.warn,body.dark-mode .ops-mini.danger{background:rgba(11,22,40,.96)!important;}

/* 13) High zoom / low height desktop --------------------------------------- */
@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;max-height:25dvh!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:60px!important;padding-top:9px!important;padding-bottom:9px!important;}.metric-card,.stats div,.userstats div{min-height:94px!important;}.approved-left{padding-top:22px!important;padding-bottom:22px!important;}.approved-illustration{display:none!important;}
}

/* 14) Tablet / browser zoom fallback --------------------------------------- */
@media (max-width:1180px){.usertext{display:none!important;}.logout[href="/change-password"]{display:none!important;}.ops-grid-main{grid-template-columns:1fr!important;}.ops-right-column{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))!important;}.chart-layout{grid-template-columns:1fr!important;}.chart-layout canvas{margin-inline:auto!important;}}
@media (max-width:900px){
  :root{--wb-sidebar-open:0px!important;--wb-sidebar-closed:0px!important;}
  main,body.sidebar-collapsed main{margin-left:0!important;width:100%!important;}
  .sidebar{width:min(292px,88vw)!important;transform:translateX(-104%)!important;transition:transform .22s var(--wb-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(292px,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,.78vh,11px) 11px!important;font-size:clamp(.76rem,.12vw + .72rem,.88rem)!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;align-items:stretch!important;flex-wrap:wrap!important;}.searchbar-area{order:2!important;flex:1 1 100%!important;max-width:none!important;}.topsearch{width:100%!important;}.tablecard,.table-card,.formcard,.filtercard,.reportbox,.chartbox,.card{margin-left:var(--wb-page-x)!important;margin-right:var(--wb-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:15px!important;}body{overflow-x:hidden!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,.ops-status-strip{grid-template-columns:1fr!important;}.metric-card,.stats div,.userstats div{min-height:94px!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-controls{width:100%!important;justify-content:flex-start!important;}.ai-smart-item{grid-template-columns:36px minmax(0,1fr)!important;}.ai-smart-item em{grid-column:2!important;width:max-content!important;margin-top:3px!important;}.ai-inline-form{align-items:stretch!important;}.approved-login-card{width:min(430px,92vw)!important;}.approved-login-note,.approved-divider,.approved-contact{font-size:.78rem!important;}
}

/* 15) 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;}}