/* =====================================================================
   v14.4 Screenshot-driven UI/UX correction layer
   Fixes marked screenshots: summary card zoom, empty stats row, dashboard
   right-panel clipping, rough filter controls, user export button, audit
   icon scale, workload trend clipping, and kanban command-panel density.

   Loaded last. This file intentionally uses high-specificity selectors
   because the legacy app.css contains many older !important overrides.
   ===================================================================== */

:root{
  --wb-page-x: clamp(18px, 1.65vw, 30px);
  --wb-page-y: clamp(16px, 1.35vw, 24px);
  --wb-gap: clamp(10px, .85vw, 16px);
  --wb-card-pad: clamp(12px, 1vw, 18px);
  --wb-card-radius: 18px;
  --wb-control-h: 42px;
  --wb-compact-shadow: 0 10px 28px rgba(15,23,42,.065);
}

html,body,.app,main{max-width:100%!important;min-width:0!important;}
body{overflow-x:hidden!important;}
main{background:linear-gradient(180deg,#f6faff 0%,#f3f7fc 100%)!important;}

/* ---------------------------------------------------------------------
   1) Fix the exact marked issue: stats cards must not become 6 + 1 rows
      on 90%/100% desktop zoom. Desktop gets one clean 7-card row.
   --------------------------------------------------------------------- */
main section.stats.kanban-summary-stats.it-summary-stats,
main section.stats.it-summary-stats{
  width:100%!important;
  display:grid!important;
  gap:var(--wb-gap)!important;
  padding:0 var(--wb-page-x) clamp(12px,1vw,18px)!important;
  margin:0!important;
  overflow:visible!important;
  align-items:stretch!important;
}

@media (min-width: 1281px){
  main section.stats.kanban-summary-stats.it-summary-stats,
  main section.stats.it-summary-stats{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
  }
}
@media (min-width: 1041px) and (max-width:1280px){
  main section.stats.kanban-summary-stats.it-summary-stats,
  main section.stats.it-summary-stats{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}
@media (min-width: 721px) and (max-width:1040px){
  main section.stats.kanban-summary-stats.it-summary-stats,
  main section.stats.it-summary-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:720px){
  main section.stats.kanban-summary-stats.it-summary-stats,
  main section.stats.it-summary-stats{
    grid-template-columns:1fr!important;
  }
}

main section.stats.kanban-summary-stats.it-summary-stats > div,
main section.stats.it-summary-stats > div{
  min-width:0!important;
  max-width:100%!important;
  min-height:clamp(76px,5vw,92px)!important;
  height:auto!important;
  padding:clamp(10px,.85vw,14px)!important;
  border-radius:var(--wb-card-radius)!important;
  display:grid!important;
  grid-template-columns:clamp(30px,2vw,38px) minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;
  column-gap:clamp(8px,.65vw,12px)!important;
  row-gap:2px!important;
  align-items:center!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#ffffff 0%,#fbfdff 100%)!important;
  border:1px solid #dbe5f1!important;
  box-shadow:var(--wb-compact-shadow)!important;
}
main section.stats.kanban-summary-stats.it-summary-stats > div > i,
main section.stats.it-summary-stats > div > i{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  width:clamp(30px,2vw,38px)!important;
  height:clamp(30px,2vw,38px)!important;
  min-width:clamp(30px,2vw,38px)!important;
  min-height:clamp(30px,2vw,38px)!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  font-size:clamp(12px,.8vw,15px)!important;
  line-height:1!important;
  background:#eef6ff!important;
  color:#0b63f6!important;
}
main section.stats.kanban-summary-stats.it-summary-stats > div > span,
main section.stats.it-summary-stats > div > span{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  display:block!important;
  margin:0!important;
  color:#667085!important;
  font-size:clamp(10px,.62vw,12px)!important;
  line-height:1.08!important;
  font-weight:950!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:normal!important;
  max-height:2.25em!important;
}
main section.stats.kanban-summary-stats.it-summary-stats > div > b,
main section.stats.it-summary-stats > div > b{
  grid-column:3!important;
  grid-row:1 / span 2!important;
  justify-self:end!important;
  margin:0!important;
  color:#071936!important;
  font-size:clamp(24px,1.45vw,34px)!important;
  line-height:.95!important;
  letter-spacing:-.06em!important;
  white-space:nowrap!important;
}
main section.stats.kanban-summary-stats.it-summary-stats > div > small,
main section.stats.it-summary-stats > div > small{
  grid-column:2!important;
  grid-row:2!important;
  min-width:0!important;
  display:block!important;
  margin:0!important;
  color:#475467!important;
  font-size:clamp(10px,.58vw,12px)!important;
  line-height:1.18!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Make the cards even tighter when viewport height is short or browser zoom is high. */
@media (max-height:760px) and (min-width:901px){
  main section.stats.kanban-summary-stats.it-summary-stats > div,
  main section.stats.it-summary-stats > div{min-height:70px!important;padding:9px 10px!important;}
  main section.stats.kanban-summary-stats.it-summary-stats > div > small,
  main section.stats.it-summary-stats > div > small{display:none!important;}
}

/* ---------------------------------------------------------------------
   2) User statistics and generic metric cards: compact, balanced, no icon
      exaggeration on Audit/Workload/Dashboard pages.
   --------------------------------------------------------------------- */
main section.userstats{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:var(--wb-gap)!important;
  padding:0 var(--wb-page-x) clamp(14px,1vw,20px)!important;
}
main section.userstats > div{
  min-height:clamp(72px,4.8vw,92px)!important;
  padding:clamp(12px,.9vw,16px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  border-radius:var(--wb-card-radius)!important;
  overflow:hidden!important;
}
main section.userstats > div > span{font-size:clamp(11px,.65vw,13px)!important;font-weight:950!important;letter-spacing:.055em!important;text-transform:uppercase!important;line-height:1.12!important;color:#667085!important;}
main section.userstats > div > b{font-size:clamp(25px,1.45vw,36px)!important;line-height:1!important;color:#071936!important;letter-spacing:-.06em!important;}
@media (max-width:1180px){main section.userstats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media (max-width:640px){main section.userstats{grid-template-columns:1fr!important;}}

main section.metrics.audit-metrics,
main section.metrics.live-metrics,
main section.metrics.v60-metrics{
  gap:var(--wb-gap)!important;
  padding:0 var(--wb-page-x) clamp(14px,1vw,20px)!important;
}
@media (min-width:1281px){
  main section.metrics.audit-metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  main section.metrics.live-metrics.v60-metrics{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
}
main section.metrics.audit-metrics .metric-card,
main section.metrics.live-metrics.v60-metrics .metric-card{
  min-height:clamp(76px,5.1vw,96px)!important;
  padding:clamp(12px,.95vw,16px)!important;
  gap:10px!important;
  overflow:hidden!important;
}
main section.metrics.audit-metrics .circle,
main section.metrics.live-metrics.v60-metrics .circle,
main .metric-card .circle{
  width:clamp(32px,2.2vw,42px)!important;
  height:clamp(32px,2.2vw,42px)!important;
  min-width:clamp(32px,2.2vw,42px)!important;
  min-height:clamp(32px,2.2vw,42px)!important;
  border-radius:13px!important;
  font-size:clamp(13px,.85vw,16px)!important;
}
main section.metrics.audit-metrics .metric-card h2,
main section.metrics.live-metrics.v60-metrics .metric-card h2{
  font-size:clamp(24px,1.4vw,34px)!important;
  line-height:1!important;
}
main section.metrics.audit-metrics .metric-card p,
main section.metrics.live-metrics.v60-metrics .metric-card p{font-size:clamp(11px,.65vw,13px)!important;line-height:1.25!important;margin:.15rem 0!important;}

/* ---------------------------------------------------------------------
   3) Page headings and action buttons: reduce dead space and prevent the
      Add Task button from floating awkwardly into the empty stats area.
   --------------------------------------------------------------------- */
main .title,main .formtitle,main .page-head,main .dashboard-live-head{
  padding:clamp(20px,1.5vw,28px) var(--wb-page-x) clamp(14px,1vw,20px)!important;
  align-items:center!important;
}
main .title h1,main .formtitle h1,main .page-head h1,main .dashboard-live-head h1{
  font-size:clamp(28px,1.75vw,40px)!important;
  letter-spacing:-.055em!important;
}
main .title p,main .formtitle p,main .page-head p,main .dashboard-live-head p{
  max-width:78ch!important;
  font-size:clamp(14px,.8vw,17px)!important;
}
main .primary, main a.primary, main .top-btn, main .qa, main .mini-link,
main .filteractions button, main .filteractions a, main .buttons a{
  border:0!important;
  border-radius:999px!important;
  min-height:var(--wb-control-h)!important;
  padding:10px 16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  font-size:clamp(12px,.7vw,14px)!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  box-shadow:0 10px 22px rgba(11,99,246,.20)!important;
}
main .primary, main a.primary, main .top-btn, main .filteractions button{
  background:linear-gradient(135deg,#0b63f6,#0956d6)!important;
  color:#fff!important;
}

/* ---------------------------------------------------------------------
   4) Filter panel redesign: compact executive panel instead of tall empty
      blocks. Fixes All Tasks, Today, This Week, Pending, Closed, Reports.
   --------------------------------------------------------------------- */
main section.filtercard{
  margin:0 var(--wb-page-x) clamp(16px,1vw,22px)!important;
  padding:clamp(16px,1vw,20px)!important;
  border-radius:22px!important;
  overflow:hidden!important;
}
main section.filtercard form{display:block!important;margin:0!important;}
main section.filtercard .quickrow{
  display:grid!important;
  grid-template-columns:minmax(0,2fr) minmax(260px,.8fr)!important;
  gap:clamp(16px,1.2vw,28px)!important;
  align-items:start!important;
}
main section.filtercard label{
  display:block!important;
  margin:0 0 7px!important;
  color:#0f172a!important;
  font-size:clamp(12px,.68vw,14px)!important;
  font-weight:900!important;
  line-height:1.15!important;
}
main section.filtercard .buttons{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  align-items:center!important;
}
main section.filtercard .buttons a{
  min-height:34px!important;
  padding:8px 13px!important;
  color:#0b63f6!important;
  background:#f8fbff!important;
  border:1px solid #dbe5f1!important;
  box-shadow:none!important;
}
main section.filtercard .buttons a:hover{background:#eef6ff!important;transform:translateY(-1px)!important;}
main section.filtercard .daterow{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
}
main section.filtercard .daterow span{display:none!important;}
main section.filtercard input,
main section.filtercard select,
main .formcard input,
main .formcard select,
main .formcard textarea,
main .reportbox input,
main .page-card input,
main .page-card select{
  width:100%!important;
  min-width:0!important;
  min-height:var(--wb-control-h)!important;
  margin:0!important;
  padding:9px 13px!important;
  border:1px solid #dbe5f1!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#111827!important;
  font-size:clamp(13px,.74vw,15px)!important;
  box-shadow:0 1px 0 rgba(15,23,42,.02)!important;
}
main section.filtercard .gridfilters{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:clamp(12px,.85vw,16px)!important;
  margin-top:clamp(16px,1vw,20px)!important;
}
main section.filtercard .filteractions{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:10px!important;
  margin-top:clamp(16px,1vw,20px)!important;
  text-align:right!important;
}
main section.filtercard .filteractions a{
  color:#344054!important;
  background:#fff!important;
  border:1px solid #dbe5f1!important;
  box-shadow:none!important;
  margin:0!important;
}
@media (max-width:1280px){
  main section.filtercard .quickrow{grid-template-columns:1fr!important;}
  main section.filtercard .gridfilters{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media (max-width:760px){
  main section.filtercard .gridfilters{grid-template-columns:1fr!important;}
  main section.filtercard .filteractions{justify-content:stretch!important;flex-direction:column!important;align-items:stretch!important;}
}

/* ---------------------------------------------------------------------
   5) My Tasks page: remove browser-default controls and align the table.
   --------------------------------------------------------------------- */
main .page-card{
  margin:0 var(--wb-page-x) clamp(16px,1vw,22px)!important;
  padding:clamp(16px,1vw,20px)!important;
  border-radius:22px!important;
  overflow:hidden!important;
}
main .page-card form.filters{
  display:grid!important;
  grid-template-columns:minmax(260px,1.6fr) repeat(3,minmax(140px,.75fr)) auto auto!important;
  gap:10px!important;
  align-items:center!important;
  margin:0 0 12px!important;
}
main .page-card form.filters button,
main .page-card form.filters a{
  min-height:var(--wb-control-h)!important;
  border-radius:999px!important;
  border:1px solid #dbe5f1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:9px 14px!important;
  font-size:13px!important;
  font-weight:900!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
main .page-card form.filters button{background:#0b63f6!important;color:#fff!important;border-color:#0b63f6!important;box-shadow:0 10px 22px rgba(11,99,246,.18)!important;}
main .page-card form.filters a{background:#fff!important;color:#344054!important;}
main .page-card > .tablecard{margin:0!important;padding:0!important;border-radius:16px!important;box-shadow:none!important;border-color:#e7edf5!important;}
main .page-card .pagination{margin-top:10px!important;color:#475467!important;font-weight:800!important;}
@media(max-width:1180px){main .page-card form.filters{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:640px){main .page-card form.filters{grid-template-columns:1fr!important;}}

/* ---------------------------------------------------------------------
   6) Users / Assignees: fix the native Export/Print button and filter bar.
   --------------------------------------------------------------------- */
main section.user-filterbar.compact,
main section.filtercard.compact.user-filterbar{
  display:grid!important;
  grid-template-columns:minmax(260px,1.4fr) minmax(180px,.75fr) minmax(180px,.75fr) minmax(170px,.55fr)!important;
  align-items:center!important;
  gap:clamp(12px,.85vw,16px)!important;
  margin:0 var(--wb-page-x) clamp(16px,1vw,22px)!important;
  padding:clamp(16px,1vw,20px)!important;
}
main section.user-filterbar button{
  min-height:var(--wb-control-h)!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#0b63f6,#0956d6)!important;
  color:#fff!important;
  font-size:clamp(13px,.74vw,15px)!important;
  font-weight:950!important;
  box-shadow:0 10px 22px rgba(11,99,246,.20)!important;
  cursor:pointer!important;
}
main section.user-filterbar button:hover{transform:translateY(-1px)!important;box-shadow:0 14px 30px rgba(11,99,246,.26)!important;}
@media(max-width:1100px){main section.user-filterbar.compact,main section.filtercard.compact.user-filterbar{grid-template-columns:1fr 1fr!important;}}
@media(max-width:640px){main section.user-filterbar.compact,main section.filtercard.compact.user-filterbar{grid-template-columns:1fr!important;}}

/* ---------------------------------------------------------------------
   7) Dashboard right column: stop Task Summary from being squeezed/clipped.
   --------------------------------------------------------------------- */
body:has(.ops-grid-main) main .ops-grid-main{
  width:100%!important;
  min-width:0!important;
  align-items:start!important;
  gap:var(--wb-gap)!important;
  padding:0 var(--wb-page-x) clamp(16px,1vw,22px)!important;
}
@media (min-width:1551px){
  body:has(.ops-grid-main) main .ops-grid-main{
    grid-template-columns:minmax(0,1fr) minmax(310px,360px)!important;
  }
  body:has(.ops-grid-main) main .ops-right-column{grid-template-columns:1fr!important;}
}
@media (max-width:1550px){
  body:has(.ops-grid-main) main .ops-grid-main{grid-template-columns:1fr!important;}
  body:has(.ops-grid-main) main .ops-right-column{grid-template-columns:repeat(2,minmax(280px,1fr))!important;}
}
@media (max-width:860px){
  body:has(.ops-grid-main) main .ops-right-column{grid-template-columns:1fr!important;}
}
body:has(.ops-grid-main) main .ops-right-column{
  min-width:0!important;
  width:100%!important;
  display:grid!important;
  gap:var(--wb-gap)!important;
  align-content:start!important;
}
body:has(.ops-grid-main) main .ops-right-column > .card{
  min-width:0!important;
  width:100%!important;
  overflow:hidden!important;
}
body:has(.ops-grid-main) main .summary-row{
  min-width:0!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  padding:10px 0!important;
  font-size:clamp(13px,.74vw,15px)!important;
}
body:has(.ops-grid-main) main .summary-row b{font-size:clamp(14px,.85vw,17px)!important;}
body:has(.ops-grid-main) main #recentTasksTable table{
  min-width:min(760px,96vw)!important;
}
body:has(.ops-grid-main) main .ops-table-wrap{overflow:auto!important;max-width:100%!important;}

/* ---------------------------------------------------------------------
   8) Workload page: chart cards and trend preview should not be clipped.
   --------------------------------------------------------------------- */
main section.charts{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:var(--wb-gap)!important;
  padding:0 var(--wb-page-x) clamp(16px,1vw,22px)!important;
}
main section.charts .chartbox{
  min-width:0!important;
  min-height:clamp(180px,15vw,240px)!important;
  padding:clamp(18px,1vw,22px)!important;
  overflow:hidden!important;
  border-radius:22px!important;
}
main section.charts .chartbox h3{font-size:clamp(17px,.9vw,21px)!important;margin:0 0 14px!important;}
main section.charts .trend{
  max-width:100%!important;
  margin:8px 0 10px!important;
  color:#0b63f6!important;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;
  font-size:clamp(42px,3.2vw,58px)!important;
  line-height:.75!important;
  letter-spacing:-.08em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  transform:scaleY(.72)!important;
  transform-origin:left center!important;
}
main section.charts .bar{height:10px!important;border-radius:999px!important;overflow:hidden!important;}
@media(max-width:1100px){main section.charts{grid-template-columns:1fr!important;}}

/* ---------------------------------------------------------------------
   9) Audit logs: compact metric cards and activity rows.
   --------------------------------------------------------------------- */
main .audit-card{margin:0 var(--wb-page-x) clamp(16px,1vw,22px)!important;padding:clamp(18px,1vw,22px)!important;border-radius:22px!important;}
main .audit-list{display:grid!important;gap:10px!important;}
main .audit-row{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) max-content!important;
  gap:14px!important;
  align-items:center!important;
  padding:14px!important;
  border:1px solid #e7edf5!important;
  border-radius:16px!important;
  background:#fff!important;
  overflow:hidden!important;
}
main .audit-icon{
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
  border-radius:14px!important;display:grid!important;place-items:center!important;
  font-size:15px!important;background:linear-gradient(135deg,#0b63f6,#06b6d4)!important;color:#fff!important;
}
main .audit-main{min-width:0!important;}
main .audit-main b, main .audit-main span, main .audit-main small{overflow:hidden!important;text-overflow:ellipsis!important;}
main .audit-main b{display:block!important;font-size:14px!important;}
main .audit-main span{display:block!important;color:#475467!important;font-size:13px!important;white-space:nowrap!important;}
main .audit-meta{text-align:right!important;min-width:max-content!important;}
@media(max-width:760px){main .audit-row{grid-template-columns:38px minmax(0,1fr)!important;}main .audit-meta{grid-column:2!important;text-align:left!important;}}

/* ---------------------------------------------------------------------
   10) Kanban command panel and lanes: compact top area, no bloated empty
       space before the board.
   --------------------------------------------------------------------- */
main .kanban-command-panel.it-kanban-command-panel{
  margin:0 var(--wb-page-x) clamp(16px,1vw,22px)!important;
  padding:clamp(14px,.95vw,18px)!important;
  border-radius:22px!important;
  background:#fff!important;
  border:1px solid #dbe5f1!important;
  box-shadow:var(--wb-compact-shadow)!important;
  overflow:hidden!important;
}
main .kanban-filter-bar.it-kanban-filter-bar{
  display:grid!important;
  grid-template-columns:minmax(260px,1.6fr) repeat(5,minmax(120px,1fr)) auto auto!important;
  gap:10px!important;
  align-items:center!important;
  margin:0!important;
}
main .kanban-filter-bar.it-kanban-filter-bar input,
main .kanban-filter-bar.it-kanban-filter-bar select{
  min-width:0!important;
  width:100%!important;
  min-height:var(--wb-control-h)!important;
  border:1px solid #dbe5f1!important;
  border-radius:14px!important;
  padding:9px 12px!important;
  background:#fff!important;
  font-size:13px!important;
}
main .kanban-saved-views.it-saved-views,
main .enterprise-kanban-toolbar.it-kanban-toolbar,
main .kanban-policy-strip.it-policy-strip{
  margin-top:12px!important;
  padding:12px!important;
  border-radius:16px!important;
}
main .kanban.real-kanban.it-ops-kanban{
  padding:0 var(--wb-page-x) clamp(16px,1vw,22px)!important;
  gap:var(--wb-gap)!important;
}
main .enterprise-kanban .kanban-lane{
  min-height:calc(100dvh - 360px)!important;
  border-radius:20px!important;
}
@media(max-width:1380px){main .kanban-filter-bar.it-kanban-filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))!important;}main .kanban-filter-bar.it-kanban-filter-bar input{grid-column:1 / -1!important;}}
@media(max-width:760px){main .kanban-filter-bar.it-kanban-filter-bar{grid-template-columns:1fr!important;}}

/* ---------------------------------------------------------------------
   11) Reports cards: avoid bottom/right clipping and keep export filters
       scannable.
   --------------------------------------------------------------------- */
main section.reportgrid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:var(--wb-gap)!important;
  padding:0 var(--wb-page-x) clamp(16px,1vw,22px)!important;
}
main section.reportgrid .reportbox{margin:0!important;min-width:0!important;border-radius:22px!important;}
@media(max-width:1100px){main section.reportgrid{grid-template-columns:1fr!important;}}

/* ---------------------------------------------------------------------
   12) Tables: table scroll stays inside card, not the whole page.
   --------------------------------------------------------------------- */
main .tablecard, main .table-card{overflow:auto!important;max-width:calc(100% - (var(--wb-page-x) * 2))!important;}
main table{font-size:clamp(12.5px,.72vw,14px)!important;}
main th,main td{padding:clamp(9px,.65vw,12px) clamp(10px,.75vw,14px)!important;}
main td b,main th{overflow-wrap:anywhere!important;}

/* ---------------------------------------------------------------------
   13) Browser zoom edge cases: when effective CSS width is smaller, switch
       to fewer columns deliberately, not by accidental overflow.
   --------------------------------------------------------------------- */
@media(max-width:1180px){
  body{overflow-x:hidden!important;}
  main .title,main .page-head,main .formtitle{display:block!important;}
  main .title .primary,main .page-head .top-btn{margin-top:12px!important;}
  main section.metrics.live-metrics.v60-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:640px){
  main section.metrics.live-metrics.v60-metrics{grid-template-columns:1fr!important;}
}

/* ---------------------------------------------------------------------
   14) Sidebar collapse/expand button: keep it outside the logo block.
       User screenshot shows the floating button overlapping the brand logo
       in collapsed mode. Move it slightly more to the outside edge and,
       on desktop collapsed state, a touch lower so it clears the logo card.
   --------------------------------------------------------------------- */
@media (min-width: 981px){
  body:not(.sidebar-collapsed) #sidebarToggle.floating-sidebar-toggle,
  body:not(.sidebar-collapsed) .hamb.floating-sidebar-toggle{
    left:calc(var(--sidebar-open) - 8px)!important;
    top:20px!important;
  }

  body.sidebar-collapsed #sidebarToggle.floating-sidebar-toggle,
  body.sidebar-collapsed .hamb.floating-sidebar-toggle{
    left:calc(var(--sidebar-closed) - 8px)!important;
    top:28px!important;
  }
}

/* Optional visual polish: button stays visually detached from the brand. */
#sidebarToggle.floating-sidebar-toggle,
.hamb.floating-sidebar-toggle{
  box-shadow:0 12px 28px rgba(15,23,42,.16)!important;
}

/* ---------------------------------------------------------------------
   15) Quick filters heading overlap fix.
       Above 100% zoom, the first quick-filter chip was sliding under the
       "ADMIN QUICK FILTERS" heading because older CSS made the heading
       sticky inside a small scroll region. Reset that behavior and stack
       the quick links cleanly.
   --------------------------------------------------------------------- */
.sidebar .quick{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:4px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:12px!important;
}

.sidebar .quick p{
  position:static!important;
  top:auto!important;
  z-index:auto!important;
  display:block!important;
  flex:0 0 auto!important;
  margin:0 0 8px!important;
  padding:0 0 2px!important;
  line-height:1.2!important;
  background:transparent!important;
}

.sidebar .quick a{
  display:flex!important;
  width:100%!important;
  flex:0 0 auto!important;
  margin:0!important;
  min-height:30px!important;
  justify-content:flex-start!important;
}


/* ---------------------------------------------------------------------
   16) v14.7 REAL STRUCTURAL FIX: Admin Quick Filters panel.
       Problem: legacy CSS styled .quick p and .quick a directly with
       multiple sticky/absolute-like behaviours. At zoom >100%, the first
       item ("My Tasks") visually overlaps the title.
       Fix: base.html now separates title and list:
         .quick-filter-title
         .quick-filter-list
       This makes the quick filters behave like a proper contained panel.
   --------------------------------------------------------------------- */

.sidebar .quick.quick-filter-panel{
  position:relative!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  max-height:min(32dvh,260px)!important;
  padding:10px 10px 12px!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.072)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}

.sidebar .quick.quick-filter-panel > p{
  display:none!important;
}

.sidebar .quick-filter-title{
  position:relative!important;
  inset:auto!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-height:22px!important;
  padding:0 2px 2px!important;
  margin:0!important;
  background:transparent!important;
  color:#a9bbd4!important;
  font-size:clamp(10px,.58vw,12px)!important;
  font-weight:950!important;
  line-height:1.15!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.sidebar .quick-filter-list{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:4px!important;
  width:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 0 2px!important;
  margin:0!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(255,255,255,.22) transparent!important;
}

.sidebar .quick-filter-list::-webkit-scrollbar{width:5px!important;}
.sidebar .quick-filter-list::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22)!important;
  border-radius:999px!important;
}

.sidebar .quick-filter-panel .quick-filter-list a,
.sidebar .quick.quick-filter-panel a{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:30px!important;
  margin:0!important;
  padding:6px 13px!important;
  border-radius:999px!important;
  color:#e4eefb!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  font-size:clamp(12px,.68vw,14px)!important;
  font-weight:850!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-decoration:none!important;
}

.sidebar .quick-filter-panel .quick-filter-list a:first-child{
  margin-top:0!important;
}

.sidebar .quick-filter-panel .quick-filter-list a:hover{
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
}

@media (min-width:981px) and (max-height:760px){
  .sidebar .quick.quick-filter-panel{
    max-height:min(28dvh,220px)!important;
    padding:9px!important;
    gap:7px!important;
  }
  .sidebar .quick-filter-title{
    min-height:20px!important;
    font-size:10px!important;
  }
  .sidebar .quick-filter-panel .quick-filter-list a{
    min-height:27px!important;
    padding:5px 11px!important;
    font-size:12px!important;
  }
}

body.sidebar-collapsed .sidebar .quick.quick-filter-panel{
  display:none!important;
}


/* ---------------------------------------------------------------------
   17) v14.8 Sidebar beauty refresh.
   Goal: make the left navigation feel premium, polished, elegant,
   and modern instead of plain/raw. This replaces the rough list look
   with a refined glass-gradient navigation system.
   --------------------------------------------------------------------- */
.sidebar{
  background:
    radial-gradient(1200px 420px at -10% -5%, rgba(86,156,255,.26) 0%, rgba(86,156,255,0) 42%),
    radial-gradient(520px 340px at 110% 20%, rgba(138,92,246,.20) 0%, rgba(138,92,246,0) 48%),
    linear-gradient(180deg, #071a37 0%, #06224a 26%, #041932 58%, #020d1d 100%)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:14px 0 44px rgba(2,10,24,.20)!important;
  gap:12px!important;
}
.sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
  pointer-events:none;
}
.sidebar > *{position:relative;z-index:1;}

.sidebar .brand{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  min-height:74px!important;
  margin:0!important;
  padding:10px 12px!important;
  border-radius:22px!important;
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.sidebar .brand-logo{
  width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;
  padding:10px!important;border-radius:18px!important;
  background:linear-gradient(180deg, #ffffff, #f2f6ff)!important;
  box-shadow:0 14px 26px rgba(6,14,30,.18)!important;
}
.sidebar .brand-title b{
  display:block!important;
  margin:0!important;
  color:#f8fbff!important;
  font-size:1.42rem!important;
  font-weight:950!important;
  letter-spacing:-.038em!important;
  line-height:1.02!important;
}
.sidebar .brand-title small{
  display:block!important;
  margin-top:4px!important;
  color:#d1def4!important;
  font-size:.86rem!important;
  font-weight:700!important;
  line-height:1.1!important;
}

.sidebar nav.sidebar-nav{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  padding:2px 0 0!important;
  border:0!important;
}
.sidebar nav.sidebar-nav a,
.sidebar nav a{
  position:relative!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  min-height:46px!important;
  padding:7px 12px!important;
  margin:0!important;
  border-radius:16px!important;
  color:#eaf2ff!important;
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  transform:none!important;
  overflow:hidden!important;
  text-decoration:none!important;
}
.sidebar nav.sidebar-nav a::after,
.sidebar nav a::after{display:none!important;}
.sidebar nav.sidebar-nav a::before,
.sidebar nav a::before{
  content:attr(data-icon)!important;
  display:grid!important;
  place-items:center!important;
  width:38px!important;height:38px!important;
  border-radius:13px!important;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:#d9e7fb!important;
  font-size:15px!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.sidebar nav.sidebar-nav a .nav-label,
.sidebar nav a .nav-label{
  display:block!important;
  min-width:0!important;
  color:inherit!important;
  font-size:1rem!important;
  font-weight:850!important;
  line-height:1.15!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.sidebar nav.sidebar-nav a:hover,
.sidebar nav a:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04))!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:0 10px 22px rgba(3,9,24,.16)!important;
}
.sidebar nav.sidebar-nav a:hover::before,
.sidebar nav a:hover::before{
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.07))!important;
  color:#ffffff!important;
}
.sidebar nav.sidebar-nav a.active,
.sidebar nav a.active{
  background:linear-gradient(135deg, #1f6fff 0%, #2d7dff 55%, #5b96ff 100%)!important;
  border-color:rgba(132,187,255,.58)!important;
  color:#fff!important;
  box-shadow:0 16px 34px rgba(22,96,255,.36)!important, inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.sidebar nav.sidebar-nav a.active::before,
.sidebar nav a.active::before{
  background:linear-gradient(180deg, rgba(255,255,255,.23), rgba(255,255,255,.10))!important;
  border-color:rgba(255,255,255,.20)!important;
  color:#ffffff!important;
}
.sidebar nav.sidebar-nav a.active .nav-label,
.sidebar nav a.active .nav-label{font-weight:900!important;}

/* Refine quick filters so the nav and filter areas feel part of one system. */
.sidebar .quick.quick-filter-panel{
  margin-top:8px!important;
  padding:12px!important;
  border-radius:22px!important;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.14)!important;
}
.sidebar .quick-filter-title{
  color:#c8d8f1!important;
  font-size:.74rem!important;
  letter-spacing:.10em!important;
}
.sidebar .quick-filter-panel .quick-filter-list a{
  min-height:34px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:#e7f0fc!important;
  font-size:.92rem!important;
}
.sidebar .quick-filter-panel .quick-filter-list a:hover{
  background:rgba(255,255,255,.13)!important;
}

.sidebar-bottom footer{
  color:#c0d0e8!important;
  opacity:.92!important;
}

/* Collapsed state stays elegant and centered. */
body.sidebar-collapsed .sidebar .brand{
  grid-template-columns:1fr!important;
  justify-items:center!important;
  min-height:72px!important;
  padding:10px!important;
}
body.sidebar-collapsed .sidebar .brand-title{display:none!important;}
body.sidebar-collapsed .sidebar .brand-logo{
  width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;
}
body.sidebar-collapsed .sidebar nav.sidebar-nav a,
body.sidebar-collapsed .sidebar nav a{
  grid-template-columns:1fr!important;
  justify-items:center!important;
  min-height:48px!important;
  padding:6px!important;
}
body.sidebar-collapsed .sidebar nav.sidebar-nav a .nav-label,
body.sidebar-collapsed .sidebar nav a .nav-label{display:none!important;}
body.sidebar-collapsed .sidebar nav.sidebar-nav a::before,
body.sidebar-collapsed .sidebar nav a::before{margin:0 auto!important;}

/* Small-desktop scaling so the polished look still fits. */
@media (max-width: 1366px){
  .sidebar .brand-title b{font-size:1.24rem!important;}
  .sidebar .brand-title small{font-size:.79rem!important;}
  .sidebar nav.sidebar-nav a::before,
  .sidebar nav a::before{width:36px!important;height:36px!important;}
  .sidebar nav.sidebar-nav a .nav-label,
  .sidebar nav a .nav-label{font-size:.95rem!important;}
}

/* =====================================================================
   v14.9 SIDEBAR DAMAGE-CONTROL FIX
   Fixes v14.8 problems reported by screenshot:
   - icon bubbles overlapping the text
   - too-large / too-bold sidebar labels
   - active blue item visually colliding with icon column
   - older CSS pseudo-icons fighting new markup
   Design goal: clean, modern, readable, no gimmicks.
   ===================================================================== */

/* Clean sidebar width and rhythm */
.sidebar{
  width:285px!important;
  min-width:285px!important;
  max-width:285px!important;
  padding:16px 14px 12px!important;
  gap:12px!important;
  background:linear-gradient(180deg,#08224a 0%,#061936 46%,#020d1f 100%)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  overflow:visible!important;
}

/* Brand should look premium but not consume the nav area */
.sidebar .brand{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  min-height:62px!important;
  height:62px!important;
  padding:8px 10px!important;
  margin:0 0 8px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 12px 26px rgba(2,8,23,.18)!important;
}
.sidebar .brand-logo{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  padding:8px!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 10px 20px rgba(0,0,0,.14)!important;
}
.sidebar .brand-title{
  min-width:0!important;
  overflow:hidden!important;
}
.sidebar .brand-title b{
  display:block!important;
  color:#f8fbff!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.1!important;
  letter-spacing:-.015em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.sidebar .brand-title small{
  display:block!important;
  margin-top:3px!important;
  color:#c7d7ef!important;
  font-size:11px!important;
  font-weight:650!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Final reset for nav: no grid tricks, no separate vertical icon rail */
.sidebar nav,
.sidebar nav.sidebar-nav{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:visible!important;
}

/* The key fix: one icon + one label in one row. No overlap. */
.sidebar nav a,
.sidebar nav.sidebar-nav a{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:36px!important;
  height:36px!important;
  margin:0!important;
  padding:0 10px!important;
  border-radius:12px!important;
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  transform:none!important;
  color:#e7eefb!important;
  font-size:0!important;
  line-height:1!important;
  text-decoration:none!important;
  overflow:hidden!important;
}

/* Destroy all old decorative pseudo rules first */
.sidebar nav a::after,
.sidebar nav.sidebar-nav a::after{
  content:none!important;
  display:none!important;
}

/* Rebuild only one icon, small and stable */
.sidebar nav a::before,
.sidebar nav.sidebar-nav a::before{
  content:attr(data-icon)!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  flex:0 0 27px!important;
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:#dbeafe!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1!important;
  box-shadow:none!important;
}

/* Label: readable, not cartoon-bold */
.sidebar nav a .nav-label,
.sidebar nav.sidebar-nav a .nav-label{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
  color:inherit!important;
  font-size:13.25px!important;
  font-weight:720!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Hover: soft only, not aggressive */
.sidebar nav a:hover,
.sidebar nav.sidebar-nav a:hover{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#ffffff!important;
}

/* Active item: contained blue pill, icon and label both inside */
.sidebar nav a.active,
.sidebar nav.sidebar-nav a.active{
  background:linear-gradient(135deg,#1769f5,#287cff)!important;
  border-color:rgba(147,197,253,.45)!important;
  color:#ffffff!important;
  box-shadow:0 10px 22px rgba(23,105,245,.24)!important;
}
.sidebar nav a.active::before,
.sidebar nav.sidebar-nav a.active::before{
  background:rgba(255,255,255,.18)!important;
  border-color:rgba(255,255,255,.18)!important;
  color:#ffffff!important;
}
.sidebar nav a.active .nav-label,
.sidebar nav.sidebar-nav a.active .nav-label{
  font-weight:780!important;
}

/* Quick filters keep the corrected internal panel style */
.sidebar .quick.quick-filter-panel{
  margin-top:10px!important;
  padding:10px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:none!important;
}
.sidebar .quick-filter-title{
  font-size:10px!important;
  font-weight:850!important;
  color:#aebfda!important;
  letter-spacing:.08em!important;
}
.sidebar .quick-filter-panel .quick-filter-list a{
  min-height:28px!important;
  height:28px!important;
  padding:0 11px!important;
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:680!important;
  background:rgba(255,255,255,.07)!important;
}

/* Floating collapse button should not cover brand text */
#sidebarToggle.floating-sidebar-toggle,
.hamb.floating-sidebar-toggle{
  top:31px!important;
  left:calc(285px - 10px)!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  z-index:85!important;
}
body.sidebar-collapsed #sidebarToggle.floating-sidebar-toggle,
body.sidebar-collapsed .hamb.floating-sidebar-toggle{
  left:calc(var(--sidebar-closed,96px) - 10px)!important;
}

/* Collapsed mode: icon-only, centered, clean */
body.sidebar-collapsed .sidebar{
  width:96px!important;
  min-width:96px!important;
  max-width:96px!important;
  padding:16px 12px 12px!important;
}
body.sidebar-collapsed .sidebar .brand{
  justify-content:center!important;
  height:62px!important;
  min-height:62px!important;
  padding:8px!important;
}
body.sidebar-collapsed .sidebar .brand-title{
  display:none!important;
}
body.sidebar-collapsed .sidebar .brand-logo{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
}
body.sidebar-collapsed .sidebar nav a,
body.sidebar-collapsed .sidebar nav.sidebar-nav a{
  justify-content:center!important;
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  padding:0!important;
}
body.sidebar-collapsed .sidebar nav a::before,
body.sidebar-collapsed .sidebar nav.sidebar-nav a::before{
  flex-basis:30px!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
}
body.sidebar-collapsed .sidebar nav a .nav-label,
body.sidebar-collapsed .sidebar nav.sidebar-nav a .nav-label{
  display:none!important;
}

/* Keep content aligned with the real sidebar width */
main{
  margin-left:285px!important;
  width:calc(100% - 285px)!important;
}
body.sidebar-collapsed main{
  margin-left:96px!important;
  width:calc(100% - 96px)!important;
}

/* Small height / high zoom: reduce vertical size safely */
@media (min-width:981px) and (max-height:760px){
  .sidebar{padding-top:12px!important;gap:8px!important;}
  .sidebar .brand{height:56px!important;min-height:56px!important;}
  .sidebar .brand-logo{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;}
  .sidebar nav a,.sidebar nav.sidebar-nav a{height:32px!important;min-height:32px!important;}
  .sidebar nav a::before,.sidebar nav.sidebar-nav a::before{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;font-size:11px!important;}
  .sidebar nav a .nav-label,.sidebar nav.sidebar-nav a .nav-label{font-size:12.5px!important;}
}

/* Mobile keeps previous drawer behavior */
@media (max-width:980px){
  .sidebar{
    width:280px!important;
    min-width:280px!important;
    max-width:280px!important;
  }
  main,body.sidebar-collapsed main{
    margin-left:0!important;
    width:100%!important;
  }
  #sidebarToggle.floating-sidebar-toggle,
  body.sidebar-collapsed #sidebarToggle.floating-sidebar-toggle{
    left:14px!important;
    top:14px!important;
  }
}

/* =====================================================================
   v15.0 Modern sidebar icons refresh
   Replaces weak unicode-like icons with cleaner, modern line-style icons.
   Goal: higher visibility, better attractiveness, and cleaner collapsed view.
   ===================================================================== */

/* Kill legacy pseudo-icon pipeline on the new nav-link items */
.sidebar nav a.nav-link::before,
.sidebar nav.sidebar-nav a.nav-link::before,
.sidebar nav a.nav-link::after,
.sidebar nav.sidebar-nav a.nav-link::after{
  content:none!important;
  display:none!important;
}

.sidebar nav a.nav-link,
.sidebar nav.sidebar-nav a.nav-link{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  font-size:inherit!important;
}

.sidebar nav a.nav-link .nav-ico,
.sidebar nav.sidebar-nav a.nav-link .nav-ico{
  flex:0 0 28px!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  display:block!important;
  border-radius:10px!important;
  background-color:#dce8fb!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20)!important;
  opacity:.95!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-position:center!important;
  mask-position:center!important;
  -webkit-mask-size:16px 16px!important;
  mask-size:16px 16px!important;
}

.sidebar nav a.nav-link.active .nav-ico,
.sidebar nav.sidebar-nav a.nav-link.active .nav-ico,
.sidebar nav a.nav-link:hover .nav-ico,
.sidebar nav.sidebar-nav a.nav-link:hover .nav-ico{
  background-color:#ffffff!important;
}

/* Icon shapes */
.nav-dashboard .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.5V21h14V9.5'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.5V21h14V9.5'/></svg>")!important;
}
.nav-tasks .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><rect x='3' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='3' width='7' height='7' rx='1.5'/><rect x='3' y='14' width='7' height='7' rx='1.5'/><rect x='14' y='14' width='7' height='7' rx='1.5'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><rect x='3' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='3' width='7' height='7' rx='1.5'/><rect x='3' y='14' width='7' height='7' rx='1.5'/><rect x='14' y='14' width='7' height='7' rx='1.5'/></svg>")!important;
}
.nav-kanban .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><rect x='3' y='4' width='5' height='16' rx='1.5'/><rect x='10' y='4' width='5' height='16' rx='1.5'/><rect x='17' y='4' width='4' height='16' rx='1.5'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><rect x='3' y='4' width='5' height='16' rx='1.5'/><rect x='10' y='4' width='5' height='16' rx='1.5'/><rect x='17' y='4' width='4' height='16' rx='1.5'/></svg>")!important;
}
.nav-workload .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/><path d='M12 12V4'/><path d='M12 12l5.5 3.2'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/><path d='M12 12V4'/><path d='M12 12l5.5 3.2'/></svg>")!important;
}
.nav-calendar .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18'/><path d='M8 3v4'/><path d='M16 3v4'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18'/><path d='M8 3v4'/><path d='M16 3v4'/></svg>")!important;
}
.nav-assistant .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2l2.2 5.8L20 10l-5.8 2.2L12 18l-2.2-5.8L4 10l5.8-2.2L12 2z'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2l2.2 5.8L20 10l-5.8 2.2L12 18l-2.2-5.8L4 10l5.8-2.2L12 2z'/></svg>")!important;
}
.nav-add .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='8'/><path d='M12 8v8'/><path d='M8 12h8'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='8'/><path d='M12 8v8'/><path d='M8 12h8'/></svg>")!important;
}
.nav-users .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3'/><path d='M4 19c0-3 2.5-5 5-5s5 2 5 5'/><circle cx='17' cy='9' r='2.5'/><path d='M15 19c.4-1.9 1.8-3.3 4-4'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3'/><path d='M4 19c0-3 2.5-5 5-5s5 2 5 5'/><circle cx='17' cy='9' r='2.5'/><path d='M15 19c.4-1.9 1.8-3.3 4-4'/></svg>")!important;
}
.nav-reports .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v11'/><path d='m8 10 4 4 4-4'/><path d='M4 18h16'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v11'/><path d='m8 10 4 4 4-4'/><path d='M4 18h16'/></svg>")!important;
}
.nav-audit .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6l7-3z'/><path d='m9.5 12 1.7 1.7 3.8-3.8'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6l7-3z'/><path d='m9.5 12 1.7 1.7 3.8-3.8'/></svg>")!important;
}

/* Better label readability */
.sidebar nav a.nav-link .nav-label,
.sidebar nav.sidebar-nav a.nav-link .nav-label{
  font-size:13px!important;
  font-weight:700!important;
  color:#e8f0fb!important;
}
.sidebar nav a.nav-link.active .nav-label,
.sidebar nav.sidebar-nav a.nav-link.active .nav-label{
  color:#ffffff!important;
  font-weight:780!important;
}

/* Collapsed state visibility */
body.sidebar-collapsed .sidebar nav a.nav-link,
body.sidebar-collapsed .sidebar nav.sidebar-nav a.nav-link{
  justify-content:center!important;
  gap:0!important;
}
body.sidebar-collapsed .sidebar nav a.nav-link .nav-ico,
body.sidebar-collapsed .sidebar nav.sidebar-nav a.nav-link .nav-ico{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  border-radius:10px!important;
  -webkit-mask-size:17px 17px!important;
  mask-size:17px 17px!important;
}
body.sidebar-collapsed .sidebar nav a.nav-link .nav-label,
body.sidebar-collapsed .sidebar nav.sidebar-nav a.nav-link .nav-label{
  display:none!important;
}

/* =====================================================================
   v15.1 Quick Filters visual polish
   Match the cleaner modern card style shown in the user reference.
   ===================================================================== */
.sidebar .quick.quick-filter-panel{
  margin-top:12px!important;
  padding:10px 10px 12px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.04))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 20px rgba(0,0,0,.10)!important;
  gap:8px!important;
  max-height:min(34dvh,270px)!important;
}

.sidebar .quick-filter-title{
  display:block!important;
  margin:0 0 2px!important;
  padding:0 2px!important;
  color:#c8d5ea!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1.2!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

.sidebar .quick-filter-list{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  padding-right:2px!important;
}

.sidebar .quick-filter-panel .quick-filter-list a,
.sidebar .quick.quick-filter-panel .quick-filter-list a{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-height:31px!important;
  height:31px!important;
  padding:0 13px!important;
  border-radius:12px!important;
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  color:#eef4ff!important;
  font-size:12.5px!important;
  font-weight:740!important;
  line-height:1!important;
  text-decoration:none!important;
}

.sidebar .quick-filter-panel .quick-filter-list a:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.08))!important;
  border-color:rgba(255,255,255,.16)!important;
  color:#ffffff!important;
  transform:none!important;
}

.sidebar .quick-filter-list::-webkit-scrollbar{width:4px!important;}
.sidebar .quick-filter-list::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16)!important;
  border-radius:999px!important;
}

/* =====================================================================
   v15.2 Quick Filters zoom-stability fix
   Problem: at 67%, 75%, 80%, 90%, 100%, 110% zoom, the quick-filter card
   clipped items inconsistently. Root cause was fixed max-heights and a
   panel that was not truly participating in the sidebar's vertical layout.
   Fix: make the sidebar a full-height flex column and let the quick-filter
   card consume remaining space with internal scrolling only.
   ===================================================================== */

@media (min-width: 981px){
  .sidebar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }

  .sidebar nav,
  .sidebar nav.sidebar-nav{
    flex:0 0 auto!important;
  }

  .sidebar .quick.quick-filter-panel{
    flex:1 1 auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    min-height:160px!important;
    max-height:none!important;
    height:auto!important;
    overflow:hidden!important;
    margin-top:10px!important;
    margin-bottom:8px!important;
  }

  .sidebar .quick-filter-title{
    flex:0 0 auto!important;
    margin:0 0 6px!important;
    padding:0 4px!important;
  }

  .sidebar .quick-filter-list{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:0 2px 2px 0!important;
    margin:0!important;
  }

  .sidebar .quick-filter-panel .quick-filter-list a,
  .sidebar .quick.quick-filter-panel .quick-filter-list a{
    flex:0 0 auto!important;
    min-height:31px!important;
    height:31px!important;
  }

  .sidebar-bottom{
    flex:0 0 auto!important;
    margin-top:0!important;
  }

  .sidebar footer{
    padding-top:2px!important;
  }
}

/* Slightly tighter vertical rhythm for high zoom / short viewport cases. */
@media (min-width: 981px) and (max-height: 860px){
  .sidebar{
    gap:9px!important;
  }

  .sidebar nav a.nav-link,
  .sidebar nav.sidebar-nav a.nav-link{
    min-height:34px!important;
    height:34px!important;
  }

  .sidebar nav a.nav-link .nav-label,
  .sidebar nav.sidebar-nav a.nav-label,
  .sidebar nav.sidebar-nav a .nav-label{
    font-size:12.5px!important;
  }

  .sidebar .quick.quick-filter-panel{
    min-height:140px!important;
    padding:9px 9px 10px!important;
  }

  .sidebar .quick-filter-title{
    font-size:10.5px!important;
    margin-bottom:5px!important;
  }

  .sidebar .quick-filter-panel .quick-filter-list{
    gap:6px!important;
  }

  .sidebar .quick-filter-panel .quick-filter-list a,
  .sidebar .quick.quick-filter-panel .quick-filter-list a{
    min-height:29px!important;
    height:29px!important;
    font-size:12px!important;
  }
}

/* =====================================================================
   v15.3 Quick Filters match sidebar nav style
   User requested the Admin Quick Filters to look like the provided nav
   screenshot: same row style, same icon treatment, same active-state look,
   while keeping the internal scrolling/zoom-stability behavior.
   ===================================================================== */

/* Panel shell stays stable, but flatter and closer to sidebar system */
@media (min-width:981px){
  .sidebar .quick.quick-filter-panel{
    margin-top:10px!important;
    padding:8px 0 8px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.04)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    box-shadow:none!important;
  }
}

.sidebar .quick-filter-title{
  padding:0 14px 6px!important;
  margin:0!important;
  color:#c7d5e9!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1.15!important;
  letter-spacing:.08em!important;
}

.sidebar .quick-filter-list{
  gap:4px!important;
  padding:0 8px 2px!important;
}

/* Use the same link anatomy as the sidebar nav */
.sidebar .quick-filter-list .quick-link{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  min-height:36px!important;
  height:36px!important;
  margin:0!important;
  padding:0 10px!important;
  border-radius:12px!important;
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  color:#e7eefb!important;
  text-decoration:none!important;
  overflow:hidden!important;
}

.sidebar .quick-filter-list .quick-link .nav-ico{
  flex:0 0 27px!important;
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  display:block!important;
  border-radius:9px!important;
  background-color:#dce8fb!important;
  opacity:.95!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-position:center!important;
  mask-position:center!important;
  -webkit-mask-size:16px 16px!important;
  mask-size:16px 16px!important;
}

.sidebar .quick-filter-list .quick-link .nav-label{
  display:block!important;
  min-width:0!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.1!important;
  color:inherit!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.sidebar .quick-filter-list .quick-link:hover{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#ffffff!important;
}

.sidebar .quick-filter-list .quick-link.active{
  background:linear-gradient(135deg,#1769f5,#287cff)!important;
  border-color:rgba(147,197,253,.45)!important;
  color:#ffffff!important;
  box-shadow:0 10px 22px rgba(23,105,245,.22)!important;
}
.sidebar .quick-filter-list .quick-link:hover .nav-ico,
.sidebar .quick-filter-list .quick-link.active .nav-ico{
  background-color:#ffffff!important;
}
.sidebar .quick-filter-list .quick-link.active .nav-label{font-weight:780!important;}

/* Quick filter icons */
.quick-my-tasks .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11l2 2 4-4'/><rect x='4' y='4' width='16' height='16' rx='2'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11l2 2 4-4'/><rect x='4' y='4' width='16' height='16' rx='2'/></svg>")!important;
}
.quick-open .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7'/><path d='M3 3v6h6'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7'/><path d='M3 3v6h6'/></svg>")!important;
}
.quick-today .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4'/><path d='M16 3v4'/><path d='M3 10h18'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4'/><path d='M16 3v4'/><path d='M3 10h18'/></svg>")!important;
}
.quick-this-week .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4'/><path d='M16 3v4'/><path d='M3 10h18'/><path d='M8 14h.01'/><path d='M12 14h.01'/><path d='M16 14h.01'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4'/><path d='M16 3v4'/><path d='M3 10h18'/><path d='M8 14h.01'/><path d='M12 14h.01'/><path d='M16 14h.01'/></svg>")!important;
}
.quick-overdue .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v6'/><path d='M12 16h.01'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v6'/><path d='M12 16h.01'/></svg>")!important;
}
.quick-pending .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>")!important;
}
.quick-closed .nav-ico{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 12l2.5 2.5L16 9'/><circle cx='12' cy='12' r='9'/></svg>")!important;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 12l2.5 2.5L16 9'/><circle cx='12' cy='12' r='9'/></svg>")!important;
}

/* collapsed sidebar: quick filter panel hidden as before */
body.sidebar-collapsed .sidebar .quick.quick-filter-panel{display:none!important;}

/* =====================================================================
   v15.4 Stable Admin Quick Filters header
   Requirement:
   - "ADMIN QUICK FILTERS" must NOT move.
   - Only the quick-filter items should scroll/move inside the panel.
   - Header must stay clean and visible at all zoom levels.
   ===================================================================== */

.sidebar .quick.quick-filter-panel{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  overflow:hidden!important;
  min-height:150px!important;
  max-height:none!important;
  height:auto!important;
  padding:0!important;
  gap:0!important;
}

.sidebar .quick.quick-filter-panel .quick-filter-title{
  position:sticky!important;
  top:0!important;
  z-index:20!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-height:30px!important;
  height:30px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 14px!important;
  margin:0!important;
  color:#c9d7ea!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  background:linear-gradient(180deg,#102846 0%,#0d233e 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  border-radius:18px 18px 0 0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:0 6px 12px rgba(0,0,0,.10)!important;
}

.sidebar .quick.quick-filter-panel .quick-filter-list{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  padding:8px 8px 10px!important;
  margin:0!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(255,255,255,.22) transparent!important;
}

.sidebar .quick.quick-filter-panel .quick-filter-list .quick-link{
  position:relative!important;
  top:auto!important;
  transform:none!important;
  flex:0 0 auto!important;
  margin:0!important;
  min-height:36px!important;
  height:36px!important;
}

.sidebar .quick.quick-filter-panel{
  scrollbar-width:none!important;
}
.sidebar .quick.quick-filter-panel::-webkit-scrollbar{
  display:none!important;
}
.sidebar .quick.quick-filter-panel .quick-filter-list::-webkit-scrollbar{
  width:5px!important;
}
.sidebar .quick.quick-filter-panel .quick-filter-list::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22)!important;
  border-radius:999px!important;
}

@media (min-width:981px) and (max-height:760px){
  .sidebar .quick.quick-filter-panel .quick-filter-title{
    min-height:28px!important;
    height:28px!important;
    font-size:10.5px!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-list{
    padding:7px 7px 9px!important;
    gap:4px!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-list .quick-link{
    min-height:33px!important;
    height:33px!important;
  }
}

/* =====================================================================
   v15.5 Hide Quick Filters scrollbar
   Requirement: scrollbar should not be visible, but internal scrolling
   must still work with mouse wheel / touchpad / touch.
   ===================================================================== */
.sidebar .quick.quick-filter-panel,
.sidebar .quick.quick-filter-panel .quick-filter-list{
  -ms-overflow-style:none!important;   /* IE / old Edge */
  scrollbar-width:none!important;      /* Firefox */
}

.sidebar .quick.quick-filter-panel::-webkit-scrollbar,
.sidebar .quick.quick-filter-panel .quick-filter-list::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;              /* Chrome / Edge / Safari */
}

.sidebar .quick.quick-filter-panel .quick-filter-list{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:0!important;
}

/* =====================================================================
   v15.6 Quick Filters full-view until normal zoom
   Requirement:
   - From about 67% to 100% zoom, show all quick-filter items from
     My Tasks through Closed with no internal scrollbar.
   - Only on tighter / effectively >100% zoom viewports should the
     quick-filter list start scrolling.
   ===================================================================== */

/* Default desktop behavior: show the full set of quick filters. */
@media (min-width:981px) and (min-height:821px){
  .sidebar .quick.quick-filter-panel{
    flex:0 0 auto!important;
    min-height:328px!important;
    height:328px!important;
    max-height:328px!important;
    overflow:hidden!important;
  }

  .sidebar .quick.quick-filter-panel .quick-filter-title{
    min-height:30px!important;
    height:30px!important;
  }

  .sidebar .quick.quick-filter-panel .quick-filter-list{
    overflow-y:hidden!important;
    overflow-x:hidden!important;
    padding:8px 8px 10px!important;
    gap:4px!important;
  }

  .sidebar .quick.quick-filter-panel .quick-filter-list .quick-link{
    min-height:36px!important;
    height:36px!important;
  }

  /* Hide scrollbar because it should not appear in the full-view range. */
  .sidebar .quick.quick-filter-panel .quick-filter-list{
    scrollbar-width:none!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-list::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }
}

/* Tighter viewport / effective high zoom: now internal scrolling is allowed. */
@media (min-width:981px) and (max-height:820px){
  .sidebar .quick.quick-filter-panel{
    flex:1 1 auto!important;
    min-height:150px!important;
    height:auto!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  .sidebar .quick.quick-filter-panel .quick-filter-title{
    min-height:28px!important;
    height:28px!important;
  }

  .sidebar .quick.quick-filter-panel .quick-filter-list{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:7px 7px 9px!important;
    gap:4px!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-list::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }

  .sidebar .quick.quick-filter-panel .quick-filter-list .quick-link{
    min-height:33px!important;
    height:33px!important;
  }
}

/* =====================================================================
   v15.7 Final sidebar compactness + Quick Filters full visibility fix
   User requirement:
   - At 67% to 100% zoom: Admin Quick Filters must show full list
     from My Tasks to Closed without internal scrolling.
   - Above 100% / tighter viewport: scrolling can apply.
   - Scrollbar must remain hidden.
   - Main nav must still look clean and readable.
   ===================================================================== */

@media (min-width:981px){
  /* Make the full sidebar a deterministic vertical system. */
  .sidebar{
    display:flex!important;
    flex-direction:column!important;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
    padding:14px 14px 10px!important;
    gap:8px!important;
  }

  /* Slightly compact brand and nav to give quick filters enough room. */
  .sidebar .brand{
    flex:0 0 58px!important;
    height:58px!important;
    min-height:58px!important;
    margin:0 0 5px!important;
    padding:7px 10px!important;
  }
  .sidebar .brand-logo{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    padding:7px!important;
  }
  .sidebar .brand-title b{font-size:13px!important;font-weight:820!important;}
  .sidebar .brand-title small{font-size:10px!important;font-weight:650!important;}

  .sidebar nav,
  .sidebar nav.sidebar-nav{
    flex:0 0 auto!important;
    gap:2px!important;
    margin:0!important;
    padding:0!important;
  }
  .sidebar nav a.nav-link,
  .sidebar nav.sidebar-nav a.nav-link{
    min-height:31px!important;
    height:31px!important;
    padding:0 9px!important;
    border-radius:11px!important;
  }
  .sidebar nav a.nav-link .nav-ico,
  .sidebar nav.sidebar-nav a.nav-link .nav-ico{
    flex-basis:24px!important;
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    border-radius:8px!important;
    -webkit-mask-size:14px 14px!important;
    mask-size:14px 14px!important;
  }
  .sidebar nav a.nav-link .nav-label,
  .sidebar nav.sidebar-nav a.nav-link .nav-label{
    font-size:12.25px!important;
    font-weight:680!important;
  }

  /* Full-view quick filter panel for normal desktop/zoom range. */
  .sidebar .quick.quick-filter-panel{
    flex:0 0 304px!important;
    min-height:304px!important;
    height:304px!important;
    max-height:304px!important;
    margin-top:8px!important;
    margin-bottom:4px!important;
    padding:0!important;
    gap:0!important;
    overflow:hidden!important;
    border-radius:18px!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-title{
    position:relative!important;
    top:auto!important;
    flex:0 0 28px!important;
    min-height:28px!important;
    height:28px!important;
    padding:0 13px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    background:linear-gradient(180deg,#102846 0%,#0d233e 100%)!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    border-radius:18px 18px 0 0!important;
    font-size:10.5px!important;
    line-height:1!important;
    z-index:2!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-list{
    flex:0 0 auto!important;
    min-height:auto!important;
    height:auto!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    padding:7px 8px 8px!important;
    margin:0!important;
    overflow:hidden!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-list::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-list .quick-link{
    flex:0 0 33px!important;
    min-height:33px!important;
    height:33px!important;
    padding:0 10px!important;
    border-radius:11px!important;
    margin:0!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-list .quick-link .nav-ico{
    flex-basis:24px!important;
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    border-radius:8px!important;
    -webkit-mask-size:14px 14px!important;
    mask-size:14px 14px!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-list .quick-link .nav-label{
    font-size:12px!important;
    font-weight:680!important;
  }

  .sidebar-bottom{
    flex:0 0 auto!important;
    margin-top:auto!important;
  }
  .sidebar footer{
    padding:3px 6px 0!important;
    font-size:10px!important;
    line-height:1.15!important;
  }
}

/* High zoom / short viewport: now scrolling is allowed, but hidden. */
@media (min-width:981px) and (max-height:760px){
  .sidebar .brand{
    flex-basis:52px!important;
    height:52px!important;
    min-height:52px!important;
  }
  .sidebar nav a.nav-link,
  .sidebar nav.sidebar-nav a.nav-link{
    min-height:29px!important;
    height:29px!important;
  }
  .sidebar .quick.quick-filter-panel{
    flex:1 1 auto!important;
    min-height:150px!important;
    height:auto!important;
    max-height:none!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-title{
    flex-basis:27px!important;
    height:27px!important;
    min-height:27px!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-list{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-list::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
  .sidebar .quick.quick-filter-panel .quick-filter-list .quick-link{
    flex-basis:31px!important;
    height:31px!important;
    min-height:31px!important;
  }
}

/* =====================================================================
   v16.2 EXACT FIX ONLY: ADMIN QUICK FILTERS title must not move
   The title is now outside the scrollable .quick-filter-list. It is a
   fixed header row in .quick-fixed-shell. Only the items below can move.
   ===================================================================== */
@media (min-width:981px){
  .sidebar .quick-fixed-shell{
    flex:0 0 304px!important;
    min-height:304px!important;
    height:304px!important;
    max-height:304px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    margin-top:8px!important;
    margin-bottom:4px!important;
    padding:0!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.04)!important;
    border:1px solid rgba(255,255,255,.08)!important;
  }

  .sidebar .quick-fixed-shell .quick-filter-title-fixed{
    flex:0 0 30px!important;
    height:30px!important;
    min-height:30px!important;
    position:relative!important;
    z-index:50!important;
    display:flex!important;
    align-items:center!important;
    padding:0 13px!important;
    margin:0!important;
    color:#c9d7ea!important;
    font-size:10.5px!important;
    font-weight:850!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    background:linear-gradient(180deg,#102846 0%,#0d233e 100%)!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    border-radius:18px 18px 0 0!important;
    transform:none!important;
  }

  .sidebar .quick-fixed-shell .quick.quick-filter-panel{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0 0 18px 18px!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:hidden!important;
    display:block!important;
  }

  .sidebar .quick-fixed-shell .quick-filter-list{
    height:100%!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    padding:7px 8px 8px!important;
    margin:0!important;
    overflow:hidden!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }

  .sidebar .quick-fixed-shell .quick-filter-list::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }

  .sidebar .quick-fixed-shell .quick-filter-list .quick-link{
    flex:0 0 33px!important;
    min-height:33px!important;
    height:33px!important;
    margin:0!important;
    padding:0 10px!important;
    border-radius:11px!important;
  }

  /* Hide any old title left by older CSS/markup, but not the new fixed title. */
  .sidebar .quick.quick-filter-panel > .quick-filter-title:not(.quick-filter-title-fixed){
    display:none!important;
  }
}

@media (min-width:981px) and (max-height:760px){
  .sidebar .quick-fixed-shell{
    flex:1 1 auto!important;
    min-height:150px!important;
    height:auto!important;
    max-height:none!important;
  }
  .sidebar .quick-fixed-shell .quick-filter-title-fixed{
    flex-basis:28px!important;
    height:28px!important;
    min-height:28px!important;
  }
  .sidebar .quick-fixed-shell .quick-filter-list{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  .sidebar .quick-fixed-shell .quick-filter-list::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
  .sidebar .quick-fixed-shell .quick-filter-list .quick-link{
    flex-basis:31px!important;
    height:31px!important;
    min-height:31px!important;
  }
}

body.sidebar-collapsed .sidebar .quick-fixed-shell{display:none!important;}

/* =====================================================================
   v16.3 QUICK FILTERS: LOCKED TITLE + WHEEL SCROLL, NO SCROLLBAR
   Requirements:
   1. "ADMIN QUICK FILTERS" title NEVER moves (fixed header inside shell).
   2. Items (My Tasks / Open / Today / This Week / Overdue / Pending /
      Closed) scroll smoothly with the mouse wheel, snapping per item.
   3. No visible scrollbar in any browser.
   4. Top/bottom fade hints so users know more items exist.
   This block is LAST in the file, so it wins over v15.x / v16.2 rules.
   ===================================================================== */
@media (min-width:981px){

  /* Shell: fixed-size card, title on top, list below. Nothing overflows. */
  .sidebar .quick-fixed-shell{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  /* Title: locked. It is OUTSIDE the scroll container, so it cannot move. */
  .sidebar .quick-fixed-shell .quick-filter-title-fixed{
    flex:0 0 30px!important;
    position:relative!important;
    z-index:60!important;
    transform:none!important;
  }

  /* Panel wrapper: pure passthrough. */
  .sidebar .quick-fixed-shell .quick.quick-filter-panel{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }

  /* The ONLY scrolling element: the item list.
     Wheel-friendly: smooth scrolling + per-item snap = "wheel" feel. */
  .sidebar .quick-fixed-shell .quick-filter-list{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scroll-behavior:smooth!important;
    scroll-snap-type:y proximity!important;
    scroll-padding-top:6px!important;
    /* Hide scrollbar: Firefox + IE/Edge legacy */
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    /* Soft fade at top & bottom edges as a scroll hint */
    -webkit-mask-image:linear-gradient(to bottom,
        transparent 0, #000 10px, #000 calc(100% - 12px), transparent 100%)!important;
    mask-image:linear-gradient(to bottom,
        transparent 0, #000 10px, #000 calc(100% - 12px), transparent 100%)!important;
    padding:7px 8px 10px!important;
  }

  /* Hide scrollbar: Chrome / Edge / Safari */
  .sidebar .quick-fixed-shell .quick-filter-list::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }

  /* Each item snaps into place as you wheel-scroll. */
  .sidebar .quick-fixed-shell .quick-filter-list .quick-link{
    flex:0 0 33px!important;
    scroll-snap-align:start!important;
  }
}

/* Short viewports / high zoom: same behavior, shell flexes but title
   still never moves because it is outside the scroller. */
@media (min-width:981px) and (max-height:760px){
  .sidebar .quick-fixed-shell .quick-filter-list{
    overflow-y:auto!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  .sidebar .quick-fixed-shell .quick-filter-list::-webkit-scrollbar{
    display:none!important;
  }
}

/* =====================================================================
   v16.4 SCREENSHOT FIXES BUNDLE
   1. Collapse/expand button must never cover the Anblicks logo.
   2. Brand block polish: logo tile size + typography aligned to app.
   3. Recent Tasks table: stable alignment at 75% / 80% zoom.
   4. Header AI ask box beside search (dashboard only).
   5. Reports page: schedule form, format chips, flash banners.
   6. Workload trend SVG chart.
   7. Collapsed sidebar: stylish icon tiles + refreshed background.
   LAST BLOCK IN FILE => wins the cascade.
   ===================================================================== */

/* ---------- 1) Toggle button clear of the logo ---------- */
@media (min-width:981px){
  #sidebarToggle.floating-sidebar-toggle,
  .hamb.floating-sidebar-toggle,
  #sidebarToggle{
    position:fixed!important;
    top:104px!important;                      /* below the brand card */
    transform:none!important;
    left:calc(var(--sidebar-open,285px) - 16px)!important;
    width:32px!important;height:32px!important;
    min-width:32px!important;min-height:32px!important;
    border-radius:50%!important;
    background:#ffffff!important;
    border:1px solid rgba(203,213,225,.95)!important;
    box-shadow:0 8px 20px rgba(15,23,42,.18)!important;
    z-index:130!important;
  }
  #sidebarToggle:hover{transform:translateX(2px)!important;}
  #sidebarToggle::after{top:50%!important;transform:translateY(-50%)!important;}
  body.sidebar-collapsed #sidebarToggle.floating-sidebar-toggle,
  body.sidebar-collapsed .hamb.floating-sidebar-toggle,
  body.sidebar-collapsed #sidebarToggle{
    top:104px!important;                      /* below the collapsed logo too */
    left:calc(var(--sidebar-closed,96px) - 16px)!important;
  }
  #sidebarToggle::before{font-size:15px!important;}
}

/* ---------- 2) Brand block: match app typography ---------- */
.sidebar .brand{min-height:70px!important;padding:9px 12px!important;}
.sidebar .brand-logo{
  width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;
  padding:8px!important;border-radius:15px!important;
  background:linear-gradient(180deg,#ffffff,#f2f6ff)!important;   /* white tile: correct contrast for the red mark */
}
.sidebar .brand-title b{
  font-size:1.16rem!important;
  font-weight:850!important;
  letter-spacing:-.015em!important;
  line-height:1.08!important;
}
.sidebar .brand-title small{
  margin-top:3px!important;
  font-size:.78rem!important;
  font-weight:650!important;
  letter-spacing:.01em!important;
  color:#c3d3ec!important;
}

/* ---------- 3) Tables stable at 75% / 80% zoom ---------- */
.ops-table-wrap table,
.tablecard table,
main .table-card table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.ops-table-wrap th, .tablecard th, main .table-card th{
  white-space:nowrap!important;              /* no more "ACTI ON" / "ASSIGNED TO" wraps */
  text-align:left!important;
  vertical-align:middle!important;
}
.ops-table-wrap td, .tablecard td, main .table-card td{
  vertical-align:middle!important;
  line-height:1.35!important;
}
/* ID, dates, action cells never wrap */
.ops-table-wrap td:first-child, .tablecard td:first-child,
.ops-table-wrap td:nth-child(7), .ops-table-wrap td:nth-child(8),
.tablecard td:nth-child(7), .tablecard td:nth-child(8),
.ops-table-wrap td:last-child, .tablecard td:last-child{
  white-space:nowrap!important;
}
/* task name may wrap but cleanly */
.ops-table-wrap td:nth-child(2), .tablecard td:nth-child(2){
  min-width:170px!important;
  overflow-wrap:break-word!important;
}
.ops-table-wrap{overflow-x:auto!important;}
.ops-table-wrap table{min-width:820px!important;}   /* below this, scroll instead of squash */

/* ---------- 4) Header AI ask box (dashboard) ---------- */
.searchbar-area{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;}
.searchbar-area .topsearch{flex:1 1 auto!important;min-width:0!important;}
.header-ai-ask{
  flex:0 0 auto;
  display:flex;align-items:center;gap:7px;
  width:clamp(190px,18vw,260px);
  height:44px;
  padding:0 6px 0 12px;
  border-radius:999px;
  background:linear-gradient(#ffffff,#ffffff) padding-box,
             linear-gradient(120deg,#1769f5,#8b5cf6,#ec4899) border-box;
  border:1.6px solid transparent;
  box-shadow:0 8px 22px rgba(99,102,241,.14);
  transition:box-shadow .2s ease, width .25s ease;
}
.header-ai-ask:focus-within{box-shadow:0 10px 28px rgba(99,102,241,.28);width:clamp(230px,24vw,330px);}
.header-ai-ask .ai-spark{
  font-size:15px;line-height:1;
  background:linear-gradient(120deg,#1769f5,#8b5cf6,#ec4899);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.header-ai-ask input{
  flex:1 1 auto;min-width:0;border:0!important;outline:0!important;background:transparent!important;
  font-size:13.5px;font-weight:600;color:#0f172a;
}
.header-ai-ask input::placeholder{color:#8b93a7;font-weight:600;}
.header-ai-ask .ai-go{
  flex:0 0 32px;width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:13px;color:#fff;
  background:linear-gradient(120deg,#1769f5,#7c3aed);
  box-shadow:0 6px 14px rgba(23,105,245,.30);
  transition:transform .15s ease;
}
.header-ai-ask .ai-go:hover{transform:scale(1.06);}
body.dark-mode .header-ai-ask{
  background:linear-gradient(#0f1b2d,#0f1b2d) padding-box,
             linear-gradient(120deg,#1769f5,#8b5cf6,#ec4899) border-box;
}
body.dark-mode .header-ai-ask input{color:#e8effc;}
@media (max-width:1180px){.header-ai-ask{display:none;}}

/* ---------- 5) Reports page: scheduling UI ---------- */
.flash-banner{margin:14px 0 4px;padding:11px 16px;border-radius:14px;font-size:13.5px;font-weight:700;}
.flash-banner.ok{background:#e9f9ef;color:#137a3d;border:1px solid #b9ecce;}
.flash-banner.warn{background:#fff4e5;color:#9a5b00;border:1px solid #ffdfae;}
.flash-banner.info{background:#eaf2ff;color:#1c4fa8;border:1px solid #c7dcff;}
.reportgrid{align-items:start!important;}
.reporthint{color:#64748b;font-size:12.5px;margin:2px 0 12px;}
.report-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed #e6ecf5;}
.report-row:last-child{border-bottom:0;}
.report-row > span:first-child{font-weight:700;color:#0f172a;font-size:13.5px;}
.report-dl{display:flex;gap:6px;}
.fmt-chip{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;font-size:11px;font-weight:850;letter-spacing:.03em;text-decoration:none;transition:transform .15s ease;}
.fmt-chip:hover{transform:translateY(-1px);}
.fmt-chip.xlsx{background:#e9f9ef;color:#137a3d;border:1px solid #b9ecce;}
.fmt-chip.pdf{background:#feecec;color:#b42323;border:1px solid #f8c7c7;}
.fmt-chip.csv{background:#eaf2ff;color:#1c4fa8;border:1px solid #c7dcff;}
.schedule-form input[type=email]{width:100%;height:42px;padding:0 14px;border-radius:12px;border:1px solid #dbe4f0;font-size:13.5px;margin-bottom:10px;}
.schedule-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px;}
.schedule-grid select{height:40px;padding:0 12px;border-radius:12px;border:1px solid #dbe4f0;font-size:13px;font-weight:600;background:#fff;}
.schedule-actions{display:flex;gap:8px;flex-wrap:wrap;}
.schedule-actions .primary{height:40px;border-radius:12px;padding:0 16px;}
.ghost-btn{height:40px;padding:0 16px;border-radius:12px;border:1px solid #c7dcff;background:#f4f8ff;color:#1c4fa8;font-weight:800;font-size:13px;cursor:pointer;transition:background .15s ease;}
.ghost-btn:hover{background:#e8f1ff;}
.schedule-list{display:flex;flex-direction:column;gap:9px;}
.schedule-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:#f7faff;border:1px solid #e3ecf9;}
.schedule-item b{display:block;font-size:13px;color:#0f172a;}
.schedule-item small{display:block;color:#5b6b84;font-size:11.5px;margin-top:2px;}
.schedule-item small.muted{color:#93a1b8;}
.icon-btn.danger{color:#b42323!important;background:#feecec!important;border:1px solid #f8c7c7!important;border-radius:9px;width:28px;height:28px;cursor:pointer;}

/* ---------- 6) Workload trend chart ---------- */
.trend-box small{color:#64748b;display:block;margin-top:6px;}
.trend-svg{width:100%;height:auto;display:block;margin-top:4px;}
.trend-legend{display:flex;gap:16px;margin-top:8px;font-size:12px;font-weight:700;color:#334155;}
.trend-legend span{display:inline-flex;align-items:center;gap:6px;}
.dotline{display:inline-block;width:18px;height:3px;border-radius:99px;}
.dotline.blue{background:#1769f5;}
.dotline.green{background:#16a34a;}

/* ---------- 7) Collapsed sidebar: stylish icon tiles + background ---------- */
.sidebar{
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(59,130,246,.22), transparent 55%),
    radial-gradient(90% 50% at 100% 100%, rgba(124,58,237,.16), transparent 60%),
    linear-gradient(180deg,#0a1c36 0%,#0b2244 52%,#0a1a33 100%)!important;
}
body.sidebar-collapsed .sidebar nav a.nav-link{
  width:52px!important;height:44px!important;min-height:44px!important;
  margin:0 auto!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.08)!important;
  transition:background .18s ease, border-color .18s ease, transform .15s ease!important;
}
body.sidebar-collapsed .sidebar nav a.nav-link:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07))!important;
  border-color:rgba(147,197,253,.35)!important;
  transform:translateY(-1px)!important;
}
body.sidebar-collapsed .sidebar nav a.nav-link.active{
  background:linear-gradient(135deg,#1769f5,#287cff)!important;
  border-color:rgba(147,197,253,.55)!important;
  box-shadow:0 10px 22px rgba(23,105,245,.32)!important;
}
body.sidebar-collapsed .sidebar nav a.nav-link .nav-ico{
  background-color:#dce8fb!important;
}
body.sidebar-collapsed .sidebar nav a.nav-link.active .nav-ico,
body.sidebar-collapsed .sidebar nav a.nav-link:hover .nav-ico{
  background-color:#ffffff!important;
}
body.sidebar-collapsed .sidebar nav.sidebar-nav{gap:8px!important;}

/* =====================================================================
   v16.5 POLISH BUNDLE
   1. Recent Tasks action buttons: clean uniform icon buttons.
   2. Quick Actions: modern soft-tint tiles instead of heavy color bars.
   3. Header AI: inline glass results panel (no redirect) + spacing.
   4. Task Summary: live sync pulse indicator.
   5. Sidebar footer: centered brand + v1.0 badge.
   6. Collapsed toggle: sits beside the logo on the edge (ash-mark spot).
   ===================================================================== */

/* ---------- 1) Action buttons ---------- */
.ops-table-wrap td:last-child, .tablecard td:last-child{
  white-space:nowrap!important;
}
.icon-btn, .icon-btn.light{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:30px!important;height:30px!important;
  border-radius:9px!important;
  font-size:13px!important;line-height:1!important;
  text-decoration:none!important;cursor:pointer!important;
  border:1px solid #dbe4f0!important;
  background:#f4f8ff!important;color:#1c4fa8!important;
  vertical-align:middle!important;
  transition:transform .13s ease, box-shadow .13s ease, background .13s ease!important;
  margin:0!important;
}
.icon-btn:hover{transform:translateY(-1px)!important;box-shadow:0 6px 14px rgba(28,79,168,.18)!important;background:#e8f1ff!important;}
.inline-form{display:inline-flex!important;margin:0 0 0 6px!important;vertical-align:middle!important;}
.inline-form .icon-btn, td form button.icon-btn{margin:0!important;}
/* delete/close button */
td .icon-btn[type="submit"]:not(.light), .icon-btn.danger{
  background:#fdf1f1!important;color:#c03636!important;border-color:#f3d4d4!important;
}
td .icon-btn[type="submit"]:not(.light):hover{background:#fbe4e4!important;box-shadow:0 6px 14px rgba(192,54,54,.16)!important;}
.icon-btn.light{background:#eefaf1!important;color:#188a4b!important;border-color:#cdeeda!important;}
.icon-btn.light:hover{background:#e0f5e8!important;}
body.dark-mode .icon-btn{background:#12233c!important;border-color:#2a405f!important;color:#9ec2f5!important;}

/* ---------- 2) Quick Actions: modern tiles ---------- */
.ops-right-column .card.quick h3{margin-bottom:12px!important;}
.ops-right-column .card.quick .qa{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;
  height:42px!important;margin:0 0 8px!important;padding:0 14px!important;
  border-radius:13px!important;
  font-size:13px!important;font-weight:800!important;letter-spacing:.01em!important;
  text-decoration:none!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease!important;
  position:relative!important;
}
.ops-right-column .card.quick .qa::before{
  content:'';width:7px;height:7px;border-radius:50%;flex:0 0 7px;
  background:currentColor;opacity:.85;
}
.ops-right-column .card.quick .qa:hover{transform:translateY(-1px)!important;box-shadow:0 8px 18px rgba(15,23,42,.10)!important;}
.ops-right-column .card.quick .qa.blue-btn  {background:#eaf2ff!important;color:#1c4fa8!important;border-color:#d3e3fb!important;}
.ops-right-column .card.quick .qa.green-btn {background:#e9f9ef!important;color:#137a3d!important;border-color:#c8ecd7!important;}
.ops-right-column .card.quick .qa.purple-btn{background:#f3edff!important;color:#6d33c9!important;border-color:#e2d5f9!important;}
.ops-right-column .card.quick .qa.orange-btn{background:#fff2e7!important;color:#b45309!important;border-color:#fbdec2!important;}
.ops-right-column .card.quick .qa.cyan-btn  {background:#e6f7fa!important;color:#0e7490!important;border-color:#c6ebf2!important;}
body.dark-mode .ops-right-column .card.quick .qa{filter:brightness(.92) saturate(1.05);}

/* ---------- 3) Header AI wrap + inline results panel ---------- */
.header-ai-wrap{position:relative;flex:0 0 auto;}
.header-ai-panel{
  position:absolute;top:calc(100% + 10px);right:0;
  width:min(430px,80vw);max-height:420px;overflow:auto;
  padding:0;border-radius:18px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 24px 60px rgba(15,23,42,.22);
  z-index:220;
  opacity:0;transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease;
}
.header-ai-panel.show{opacity:1;transform:translateY(0);}
.ai-panel-head{
  position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid rgba(148,163,184,.25);
  background:linear-gradient(120deg,rgba(23,105,245,.10),rgba(139,92,246,.10));
  border-radius:18px 18px 0 0;
  font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#4c3ed9;
}
.ai-panel-head button{border:0;background:transparent;font-size:13px;color:#64748b;cursor:pointer;border-radius:8px;width:24px;height:24px;}
.ai-panel-head button:hover{background:rgba(100,116,139,.14);}
.ai-panel-body{padding:14px 16px 16px;}
.ai-answer{font-size:13.5px;line-height:1.55;color:#0f172a;font-weight:600;}
.ai-loading{display:flex;align-items:center;gap:6px;color:#64748b;font-size:13px;font-weight:700;}
.ai-dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(120deg,#1769f5,#8b5cf6);animation:aiB 1s infinite alternate;}
.ai-dot:nth-child(2){animation-delay:.18s}.ai-dot:nth-child(3){animation-delay:.36s}
@keyframes aiB{from{opacity:.25;transform:translateY(0)}to{opacity:1;transform:translateY(-3px)}}
.ai-matches-title{margin:14px 0 8px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#64748b;}
.ai-matches{display:flex;flex-direction:column;gap:7px;}
.ai-match{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 12px;border-radius:12px;text-decoration:none;
  background:rgba(244,248,255,.9);border:1px solid rgba(211,227,251,.9);
  transition:transform .13s ease, box-shadow .13s ease;
}
.ai-match:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(28,79,168,.14);}
.ai-match b{font-size:12.8px;color:#12315f;flex:1 1 100%;}
.ai-chip{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;font-size:10.5px;font-weight:850;letter-spacing:.03em;}
.ai-chip.red{background:#feecec;color:#b42323;}
.ai-chip.orange{background:#fff2e0;color:#b45309;}
.ai-chip.green{background:#e9f9ef;color:#137a3d;}
.ai-chip.blue{background:#eaf2ff;color:#1c4fa8;}
body.dark-mode .header-ai-panel{background:rgba(13,25,44,.88);border-color:#2a405f;}
body.dark-mode .ai-answer{color:#e8effc;}
body.dark-mode .ai-match{background:rgba(18,35,60,.9);border-color:#2a405f;}
body.dark-mode .ai-match b{color:#cfe1fb;}

/* ---------- 4) Live sync pulse ---------- */
.sync-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#16a34a;margin-right:5px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(22,163,74,.5);
}
.sync-dot.pulse{animation:syncPulse 1.1s ease-out 1;}
@keyframes syncPulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}100%{box-shadow:0 0 0 9px rgba(22,163,74,0)}}
.last-sync{display:flex!important;align-items:center!important;}

/* ---------- 5) Sidebar footer: centered + version badge ---------- */
.sidebar .sidebar-bottom{padding:8px 12px 12px!important;}
.sidebar footer.app-footer{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  padding:9px 10px!important;margin:0!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
.sidebar footer.app-footer .foot-brand{
  font-size:10.8px!important;font-weight:750!important;color:#b9c9e4!important;letter-spacing:.02em!important;
}
.sidebar footer.app-footer .version-badge{
  display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:999px;
  background:linear-gradient(135deg,#1769f5,#7c3aed);color:#fff;
  font-size:9.6px;font-weight:900;letter-spacing:.05em;
}
body.sidebar-collapsed .sidebar footer.app-footer .foot-brand{display:none!important;}
body.sidebar-collapsed .sidebar footer.app-footer{padding:7px 4px!important;}

/* ---------- 6) Toggle beside the logo (ash-mark spot), both states ---------- */
@media (min-width:981px){
  #sidebarToggle.floating-sidebar-toggle,
  .hamb.floating-sidebar-toggle,
  #sidebarToggle{
    top:36px!important;                                   /* logo row */
    left:calc(var(--sidebar-open,285px) - 15px)!important; /* half outside the edge */
    width:30px!important;height:30px!important;
    min-width:30px!important;min-height:30px!important;
    border-radius:50%!important;
    transform:none!important;
  }
  body.sidebar-collapsed #sidebarToggle.floating-sidebar-toggle,
  body.sidebar-collapsed .hamb.floating-sidebar-toggle,
  body.sidebar-collapsed #sidebarToggle{
    top:36px!important;                                    /* beside collapsed logo, NOT on nav icons */
    left:calc(var(--sidebar-closed,96px) - 15px)!important;
  }
  #sidebarToggle::before{font-size:14px!important;}
  #sidebarToggle:hover{transform:scale(1.08)!important;}
}


/* ===== v16.6 live dashboard clock polish: only marked date/time box ===== */
.dashboard-live-head .dashboard-live-clock{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:255px !important;
  justify-content:flex-start !important;
  white-space:nowrap !important;
}
.dashboard-live-clock .live-clock-dot{
  width:8px !important;
  height:8px !important;
  border-radius:999px !important;
  background:#22c55e !important;
  box-shadow:0 0 0 4px rgba(34,197,94,.12), 0 0 12px rgba(34,197,94,.55) !important;
  flex:0 0 auto !important;
  animation:liveClockPulse 1.6s ease-in-out infinite !important;
}
.dashboard-live-clock .live-clock-label{
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#0d6efd !important;
  opacity:.9 !important;
  flex:0 0 auto !important;
}
.dashboard-live-clock #serverTime{
  font-weight:800 !important;
  color:#334155 !important;
  font-variant-numeric:tabular-nums !important;
  min-width:178px !important;
  display:inline-block !important;
}
.dashboard-live-clock button{
  margin-left:auto !important;
  flex:0 0 auto !important;
}
@keyframes liveClockPulse{
  0%,100%{ transform:scale(1); opacity:.92; }
  50%{ transform:scale(1.25); opacity:1; }
}
@media (max-width: 1100px){
  .dashboard-live-head .dashboard-live-clock{
    min-width:230px !important;
    gap:6px !important;
  }
  .dashboard-live-clock .live-clock-label{
    display:none !important;
  }
}