/* =====================================================================
   WAAREE ENTERPRISE PORTAL — Design System
   Brand: Waaree Energies. Built on Bootstrap 5.3, mobile-first.
   ===================================================================== */

:root{
  /* Brand */
  --wa-green:#00793F;        /* primary / dark green */
  --wa-green-600:#026B39;
  --wa-green-700:#015C31;
  --wa-accent:#37B34B;       /* bright brand green */
  --wa-accent-soft:#E8F6EC;
  --wa-teal:#1FACDC;         /* gradient partner */
  --wa-ink:#4C4D4F;          /* body text */
  --wa-ink-soft:#7A7D80;
  --wa-line:#E9EFEB;
  --wa-line-soft:#F1F5F2;
  --wa-bg:#F3F7F4;
  --wa-surface:#FFFFFF;
  --wa-sidebar:#083826;
  --wa-sidebar-hover:rgba(55,179,75,.16);
  /* Semantic */
  --wa-success:#37B34B; --wa-info:#1FACDC; --wa-warning:#E8A33D; --wa-danger:#DC3545;
  /* System — layered shadows: a 1px contact edge plus a wide, soft, mostly
     transparent ambient. A single mid-opacity blur reads as grey haze. */
  --wa-radius:16px; --wa-radius-sm:10px; --wa-radius-lg:22px;
  --wa-shadow:0 1px 2px rgba(16,40,28,.04), 0 10px 28px -12px rgba(16,40,28,.20);
  --wa-shadow-lg:0 2px 4px rgba(16,40,28,.05), 0 20px 48px -18px rgba(16,40,28,.34);
  --wa-shadow-brand:0 8px 20px -8px rgba(0,121,63,.45);
  --wa-sidebar-w:228px;          /* compact: nav is 5-9 items, not a file tree */
  --bs-primary:#00793F;
  /* Typography — Inter with tabular figures so KPI numbers do not jitter */
  --wa-font:"Inter","Segoe UI",Roboto,Arial,sans-serif;
  /* Auth background — overridden per page by auth_header.php */
  --wa-auth-image:none;
}

*{ -webkit-tap-highlight-color:transparent; }
body{
  background:var(--wa-bg); color:var(--wa-ink);
  font-family:var(--wa-font);
  font-size:.9375rem; line-height:1.55; letter-spacing:-.005em;
  font-feature-settings:"cv11","ss01"; -webkit-font-smoothing:antialiased;
  /* No overflow-x:hidden band-aid (Task 21): measured in headless Chrome at 1440/768/375 with the task panel
     closed, open and closed again, and on every main page, the document has no horizontal overflow; the
     offcanvas is position:fixed + visibility:hidden off-screen, which does not add scrollable overflow. */
}
h1,h2,h3,h4,h5,.wa-stat__value,.wa-kpi__value{ letter-spacing:-.02em; }
.fw-500{ font-weight:500; }
.wa-num{ font-variant-numeric:tabular-nums; }
a{ color:var(--wa-green); text-decoration:none; }
a:hover{ color:var(--wa-accent); }
/* Keyboard focus stays visible everywhere; mouse clicks do not draw a ring. */
:focus-visible{ outline:2px solid var(--wa-accent); outline-offset:2px; border-radius:4px; }
.btn:focus-visible{ box-shadow:0 0 0 .2rem rgba(55,179,75,.28); }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#c8d3cd; border-radius:8px; }

/* ------------------------------ Sidebar ------------------------------
   Compact by default. The nav scrolls; the logout foot never does.
   -------------------------------------------------------------------- */
.wa-sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--wa-sidebar-w); z-index:1045;
  background:linear-gradient(180deg,var(--wa-sidebar) 0%, #04251A 100%);
  display:flex; flex-direction:column; transition:transform .25s ease;
}
.wa-sidebar__brand{
  height:60px; flex:0 0 60px; display:flex; align-items:center; justify-content:center;
  padding:0 14px; background:#fff; border-bottom:1px solid var(--wa-line);
}
/* Square, never rounded — the mark carries its own lockup. */
.wa-sidebar__brand img{ height:38px; width:auto; max-width:100%; border-radius:0; }
.wa-sidebar__nav{ overflow-y:auto; padding:10px 10px 14px; flex:1 1 auto; min-height:0; }
.wa-sidebar__label{
  font-size:.64rem; letter-spacing:.10em; text-transform:uppercase;
  color:rgba(255,255,255,.40); padding:12px 10px 5px; font-weight:650;
}
.wa-nav-link{
  display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:1px;
  border-radius:var(--wa-radius-sm); color:rgba(255,255,255,.80);
  font-weight:500; font-size:.855rem; transition:.15s; position:relative;
}
.wa-nav-link i{ width:18px; text-align:center; font-size:.95rem; opacity:.9; }
.wa-nav-link:hover{ background:var(--wa-sidebar-hover); color:#fff; }
.wa-nav-link.active{
  background:linear-gradient(135deg,var(--wa-accent) 0%, #22A03D 100%); color:#fff;
  box-shadow:0 8px 18px -8px rgba(55,179,75,.75), inset 0 1px 0 rgba(255,255,255,.20);
}
.wa-nav-link .badge{ margin-left:auto; }

/* Pinned logout: outside the scroll area, so it is reachable at any nav length */
.wa-sidebar__foot{
  flex:0 0 auto; padding:8px 10px 12px;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.16);
}
.wa-nav-link--out{ color:#FFC9C9; font-weight:550; }
.wa-nav-link--out:hover{ background:rgba(220,53,69,.22); color:#fff; }
/* Logout is a POST form button styled as a nav link (no inline JS: CSP). */
.wa-nav-btn{ background:none; border:0; width:100%; text-align:left; font-family:inherit; cursor:pointer; }

/* Collapsed (full-width content) — desktop only; below xl the sidebar is off-canvas anyway */
@media (min-width:1200px){
  body.wa-nav-collapsed .wa-sidebar{ transform:translateX(-100%); }
  body.wa-nav-collapsed .wa-main{ margin-left:0; }
}

/* ------------------------------ Topbar ------------------------------- */
.wa-main{ margin-left:var(--wa-sidebar-w); min-height:100vh; transition:margin .25s ease; }
/* Translucent + blurred: content scrolling under the bar stays legible without a
   hard shadow line. Falls back to the solid colour where backdrop-filter is absent. */
.wa-topbar{
  height:60px; background:rgba(255,255,255,.86); border-bottom:1px solid var(--wa-line);
  backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%);
  position:sticky; top:0; z-index:1030; display:flex; align-items:center;
  gap:12px; padding:0 20px;
}
@supports not (backdrop-filter: blur(2px)){ .wa-topbar{ background:var(--wa-surface); } }
.wa-topbar__title{ font-weight:670; font-size:1.02rem; color:var(--wa-green); margin:0; letter-spacing:-.01em; }
.wa-topbar .btn-icon{ border:1px solid var(--wa-line); background:#fff; color:var(--wa-ink); }
.wa-topbar .btn-icon:hover{ background:var(--wa-accent-soft); color:var(--wa-green); border-color:#CDEBD6; }
.wa-avatar{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(145deg,#E8F6EC,#D3EEDB);
  color:var(--wa-green); font-weight:750; display:flex; align-items:center; justify-content:center;
  font-size:.84rem; box-shadow:inset 0 0 0 1px rgba(0,121,63,.10);
}
.wa-content{ padding:24px; }
@media (max-width:1199.98px){
  .wa-sidebar{ transform:translateX(-100%); }
  .wa-sidebar.show{ transform:translateX(0); box-shadow:var(--wa-shadow-lg); }
  .wa-main{ margin-left:0; }
  .wa-content{ padding:16px 14px; }
}
.wa-backdrop{ position:fixed; inset:0; background:rgba(8,32,22,.5); z-index:1040; display:none; }
.wa-backdrop.show{ display:block; }

/* ------------------------------ Cards -------------------------------- */
.wa-card{
  background:linear-gradient(180deg,#FFFFFF 0%, #FCFEFD 100%);
  border:1px solid var(--wa-line);
  border-radius:var(--wa-radius); box-shadow:var(--wa-shadow); margin-bottom:20px;
  transition:box-shadow .2s ease;
}
.wa-card__head{
  padding:18px 22px; border-bottom:1px solid var(--wa-line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.wa-card__title{
  font-size:1rem; font-weight:680; color:var(--wa-green); margin:0;
  display:flex; align-items:center; gap:2px; letter-spacing:-.01em;
}
.wa-card__body{ padding:22px; }

/* ----------------------------- KPI tiles -----------------------------
   Value first and largest, label above it, trend and sparkline below.
   The accent colour is carried by the icon chip and the trend pill only —
   the number itself stays ink-dark so it is never the weakest contrast.
   --------------------------------------------------------------------- */
.wa-kpi{
  position:relative; height:100%; padding:20px 22px 18px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,#FFFFFF 0%, #FAFDFB 100%);
  border:1px solid var(--wa-line);
  border-radius:var(--wa-radius); box-shadow:var(--wa-shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Brand-tinted corner glow. Purely decorative, so it must never take pointer
   events and must stay far below text contrast — it tints, it does not colour. */
.wa-kpi::before{
  content:""; position:absolute; inset:-48px -46px auto auto; width:168px; height:168px;
  border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle, rgba(55,179,75,.13) 0%, rgba(55,179,75,0) 68%);
}
.wa-kpi--teal::before  { background:radial-gradient(circle, rgba(31,172,220,.14) 0%, rgba(31,172,220,0) 68%); }
.wa-kpi--amber::before { background:radial-gradient(circle, rgba(232,163,61,.16) 0%, rgba(232,163,61,0) 68%); }
.wa-kpi--slate::before { background:radial-gradient(circle, rgba(75,108,121,.13) 0%, rgba(75,108,121,0) 68%); }
.wa-kpi:hover{ transform:translateY(-3px); box-shadow:var(--wa-shadow-lg); border-color:#DCE7E0; }
.wa-kpi__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.wa-kpi__label{
  font-size:.72rem; font-weight:650; text-transform:uppercase; letter-spacing:.08em;
  color:var(--wa-ink-soft); margin:0;
}
.wa-kpi__value{
  font-size:2.2rem; font-weight:800; line-height:1.05; margin:8px 0 0;
  color:#102E21; font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
/* Inset highlight on the chip reads as a lit surface rather than a flat swatch. */
.wa-kpi__icon{
  width:46px; height:46px; flex:0 0 46px; border-radius:14px; display:grid; place-items:center;
  font-size:1.05rem; color:#fff; background:linear-gradient(145deg,var(--wa-accent),var(--wa-green));
  box-shadow:var(--wa-shadow-brand), inset 0 1px 0 rgba(255,255,255,.30);
}
.wa-kpi--teal  .wa-kpi__icon{ background:linear-gradient(145deg,#5CC8EC,var(--wa-teal)); box-shadow:0 8px 20px -8px rgba(31,172,220,.55), inset 0 1px 0 rgba(255,255,255,.30); }
.wa-kpi--amber .wa-kpi__icon{ background:linear-gradient(145deg,#F2BC5C,#D98A1F); box-shadow:0 8px 20px -8px rgba(217,138,31,.55), inset 0 1px 0 rgba(255,255,255,.30); }
.wa-kpi--slate .wa-kpi__icon{ background:linear-gradient(145deg,#8FAFBB,#4B6C79); box-shadow:0 8px 20px -8px rgba(75,108,121,.55), inset 0 1px 0 rgba(255,255,255,.30); }
.wa-kpi__foot{
  display:flex; align-items:center; gap:10px; margin-top:14px; min-height:26px;
  padding-top:12px; border-top:1px solid var(--wa-line-soft);
}
.wa-trend{
  display:inline-flex; align-items:center; gap:5px; font-size:.73rem; font-weight:700;
  padding:.24rem .55rem; border-radius:999px; white-space:nowrap;
  border:1px solid transparent;
}
.wa-trend--up{ background:var(--wa-accent-soft); color:#12662F; border-color:#CDEBD6; }
.wa-trend--down{ background:#FDECEC; color:#A32020; border-color:#F5D2D2; }
.wa-trend--flat{ background:#EEF2F0; color:var(--wa-ink-soft); border-color:#E2E9E5; }
.wa-kpi__note{ font-size:.72rem; color:var(--wa-ink-soft); }
/* Sized PARENT for the sparkline canvas. Chart.js writes width/height attributes
   onto the canvas itself, so a bare absolutely-positioned canvas ignores its CSS
   height and stretches to the whole tile. */
.wa-kpi__spark{
  position:absolute; right:0; bottom:0; left:0; height:40px;
  z-index:-1; opacity:.95; pointer-events:none;
}
.wa-kpi__spark canvas{ width:100%!important; height:100%!important; }
.wa-kpi--spark{ padding-bottom:44px; }

/* --------------------------- Stat tiles ------------------------------ */
.wa-stat{
  background:var(--wa-surface); border:1px solid var(--wa-line); border-radius:var(--wa-radius);
  padding:18px 20px; height:100%; position:relative; overflow:hidden; box-shadow:var(--wa-shadow);
  transition:transform .18s, box-shadow .18s;
}
.wa-stat:hover{ transform:translateY(-2px); box-shadow:var(--wa-shadow-lg); }
.wa-stat::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--wa-accent); }
.wa-stat--teal::after{ background:var(--wa-teal); }
.wa-stat--amber::after{ background:var(--wa-warning); }
.wa-stat--red::after{ background:var(--wa-danger); }
.wa-stat__label{ font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--wa-ink-soft); font-weight:600; }
.wa-stat__value{ font-size:1.7rem; font-weight:700; color:var(--wa-green); line-height:1.2; margin-top:4px; }
.wa-stat__icon{
  position:absolute; right:16px; top:16px; width:42px; height:42px; border-radius:11px;
  background:var(--wa-accent-soft); color:var(--wa-green); display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}

/* ------------------------------ Buttons ------------------------------ */
.btn{
  border-radius:var(--wa-radius-sm); font-weight:600; font-size:.875rem; padding:.5rem 1rem;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-wa{
  background:linear-gradient(180deg,#00874648,#0000), var(--wa-green);
  border-color:var(--wa-green); color:#fff; box-shadow:var(--wa-shadow-brand);
}
.btn-wa:hover,.btn-wa:focus{ background:var(--wa-green-700); border-color:var(--wa-green-700); color:#fff; }
.btn-wa-accent{ background:var(--wa-accent); border-color:var(--wa-accent); color:#fff; box-shadow:0 8px 20px -8px rgba(55,179,75,.55); }
.btn-wa-accent:hover{ background:#2E9C40; border-color:#2E9C40; color:#fff; }
.btn-wa-outline{ border:1px solid var(--wa-green); color:var(--wa-green); background:#fff; }
.btn-wa-outline:hover{ background:var(--wa-green); color:#fff; }
.btn-icon{ width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; }

/* ------------------------------ Forms -------------------------------- */
.form-label{ font-size:.82rem; font-weight:600; color:var(--wa-ink); margin-bottom:.35rem; }
.form-label .req{ color:var(--wa-danger); }
.form-control,.form-select{
  border-radius:var(--wa-radius-sm); border:1px solid #D9E0DC; font-size:.9rem; padding:.55rem .8rem;
}
.form-control:focus,.form-select:focus{ border-color:var(--wa-accent); box-shadow:0 0 0 .2rem rgba(55,179,75,.16); }
.input-group-text{ background:#F6F9F7; border-color:#D9E0DC; color:var(--wa-ink-soft); }

/* ---------------------------- Filter bars -----------------------------
   Bootstrap sets .form-select/.form-control to width:100%. Dropped into a
   wrapping flex row that makes every control claim its own full-width line,
   which is why a filter row must never be a bare `d-flex flex-wrap`.
   --------------------------------------------------------------------- */
.wa-filters{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.wa-filters .form-control{ width:auto; min-width:0; }
/* width:auto sizes a select to its selected option, which leaves no room for the
   caret Bootstrap paints on the right — the last glyph ends up under it. Give
   every select a floor and explicit caret room rather than fixing one per page. */
.wa-filters .form-select{ width:auto; min-width:140px; padding-right:2.2rem; }
.wa-filters__group{ display:flex; flex-direction:column; gap:3px; }
.wa-filters__group > label{
  font-size:.66rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
  color:var(--wa-ink-soft); line-height:1;
}
.wa-filters__group--sel .form-select{ min-width:158px; }   /* longer option text */
.wa-filters__actions{ display:flex; align-items:center; gap:8px; }
/* Below md the bar owns its own row and the controls share it two-up. */
@media (max-width:767.98px){
  .wa-filters{ width:100%; }
  .wa-filters__group{ flex:1 1 44%; }
  .wa-filters .form-select,
  .wa-filters .form-control{ width:100%; }
  .wa-filters__actions{ flex:1 1 100%; }
}

/* ------------------------------ Tables ------------------------------- */
table.dataTable thead th{
  background:linear-gradient(180deg,#F7FAF8,#F2F7F4); color:var(--wa-green);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  border-bottom:1px solid var(--wa-line)!important; white-space:nowrap; padding-top:.85rem; padding-bottom:.85rem;
}
table.dataTable tbody td{ font-size:.875rem; vertical-align:middle; padding-top:.72rem; padding-bottom:.72rem; }
table.dataTable tbody tr{ transition:background .12s ease; }
table.dataTable tbody tr:hover{ background:#F6FBF8; }
table.dataTable tbody tr td{ border-top-color:var(--wa-line-soft); }
.dt-buttons .btn{ margin-right:6px; }

/* Long free-text cells (audit descriptions) wrap instead of stretching the table */
.wa-cell-wrap{ white-space:normal; min-width:220px; max-width:420px; }

.wa-cell-id{ color:var(--wa-ink-soft); font-variant-numeric:tabular-nums; }

/* ------------------------------ Badges ------------------------------- */
.wa-badge{ font-size:.72rem; font-weight:600; padding:.3rem .6rem; border-radius:999px; display:inline-block; }

.wa-badge--on{ background:var(--wa-accent-soft); color:#12662F; }

.wa-badge--off{ background:#FDECEC; color:#A32020; }

.wa-badge--role{ background:#EAF3FA; color:#0C5C86; }

/* Audit actions — tone carries the meaning so a denial is visible while scanning */
.wa-badge--act{ background:#EEF2F0; color:#4C5A53; font-weight:550; }

.wa-badge--act-ok{ background:var(--wa-accent-soft); color:#12662F; }

.wa-badge--act-warn{ background:#FDF3E3; color:#8A5A11; }

.wa-badge--act-bad{ background:#FDECEC; color:#A32020; }

/* --------------------------- Auth screens ----------------------------
   Photographic background + a green scrim. The scrim is not decoration:
   the image is uncontrolled artwork, and white text on it is only legible
   because the gradient guarantees contrast.
   --------------------------------------------------------------------- */
.wa-auth-body{ background:#04251A; }

.wa-auth{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:24px 16px;
  /* Two layers over the photo: a soft directional tint for brand, plus a wide
     radial vignette that darkens the edges and lifts the centre where the card
     sits. A single flat gradient washes the photograph out to a green sheet. */
  background-image:
    radial-gradient(120% 95% at 50% 45%, rgba(2,26,18,.10) 0%, rgba(2,26,18,.52) 62%, rgba(1,18,12,.78) 100%),
    linear-gradient(118deg, rgba(3,34,23,.72) 0%, rgba(0,96,50,.46) 48%, rgba(31,172,220,.30) 100%),
    var(--wa-auth-image);
  background-size:cover, cover, cover;
  background-position:center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-attachment:fixed, fixed, fixed;
}

.wa-auth__shell{
  width:100%; max-width:940px; display:grid; grid-template-columns:1fr;
  border-radius:var(--wa-radius-lg); overflow:hidden;
  box-shadow:0 30px 80px rgba(2,20,13,.45);
}

@media (min-width:992px) {
  .wa-auth__shell{ grid-template-columns:1.05fr .95fr; }
}

/* Left: frosted brand panel over the photo */
.wa-auth__brand{
  flex-direction:column; padding:44px 40px; color:#fff;
  /* Dark enough for white body text at 0.86rem over an unknown photo, whatever
     the scrim above the image happens to let through. */
  background:linear-gradient(160deg, rgba(2,26,17,.80), rgba(4,52,34,.62));
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  border-right:1px solid rgba(255,255,255,.10);
}

/* Square white plate, never rounded. The plate stays because the logo is dark
   green on transparent and would vanish against the panel; only the radius goes. */
.wa-auth__brand-logo{
  height:58px; width:auto; align-self:flex-start; margin-bottom:34px;
  background:#fff; border-radius:0; padding:10px 16px;
}

.wa-auth__brand-title{ font-size:1.42rem; font-weight:700; line-height:1.3; margin:0 0 10px; }

.wa-auth__brand-text{ font-size:.9rem; color:rgba(255,255,255,.82); margin:0 0 26px; max-width:34ch; }

.wa-auth__points{ list-style:none; padding:0; margin:0 0 auto; }

.wa-auth__points li{
  display:flex; align-items:center; gap:12px; font-size:.86rem;
  color:rgba(255,255,255,.90); padding:9px 0;
}

.wa-auth__points i{
  width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#9BE7AE; font-size:.82rem;
}

.wa-auth__brand-foot{ font-size:.74rem; color:rgba(255,255,255,.6); margin:34px 0 0; }

/* Right: the form panel — near-opaque, because forms must stay readable */
.wa-auth__panel{ background:rgba(255,255,255,.97); padding:40px 36px; }

@media (max-width:575.98px) {
  .wa-auth__panel{ padding:30px 22px; }
}

/* Small-screen logo sits on the white form panel, so no plate and no radius. */
.wa-auth__logo{ display:block; height:52px; width:auto; margin:0 auto 22px; border-radius:0; }

.wa-auth__title{ font-size:1.44rem; font-weight:750; color:var(--wa-green); margin:0 0 6px; }

.wa-auth__sub{ font-size:.875rem; color:var(--wa-ink-soft); margin:0 0 26px; }

.wa-auth__notice{
  font-size:.72rem; color:var(--wa-ink-soft); text-align:center;
  margin:26px 0 0; padding-top:16px; border-top:1px solid var(--wa-line);
}

.wa-auth__foot{ text-align:center; font-size:.76rem; color:rgba(255,255,255,.72); margin:18px 0 0; }

@media (max-width:991.98px) {
  .wa-auth__shell{ max-width:460px; }
  .wa-auth__title,.wa-auth__sub{ text-align:center; }
}

/* Confirmation / dead-end states (link expired, check your inbox) */
.wa-auth__done{ text-align:center; }

.wa-auth__done-icon{
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center; margin:4px auto 18px;
  background:var(--wa-accent-soft); color:var(--wa-green); font-size:1.4rem;
}

.wa-auth__done-icon--ok{ background:var(--wa-accent); color:#fff; }

.wa-auth__done-icon--bad{ background:#FDECEC; color:#A32020; }

.wa-auth__done-text{ font-size:.88rem; color:var(--wa-ink); margin:0 0 24px; }

/* Inputs on auth screens */
/* Icon prefix owns the left border; the input keeps real padding so the
   placeholder is not clipped against the icon cell. */
.wa-field .form-control{ border-left:0; padding-left:.7rem; }

.wa-field .input-group-text:first-child{ background:#fff; border-right:0; color:var(--wa-ink-soft); }

.wa-field:focus-within .input-group-text{ border-color:var(--wa-accent); }

.wa-check .form-check-input{ width:1.05em; height:1.05em; margin-top:.15em; border-color:#C6D2CB; }

.wa-check .form-check-input:checked{ background-color:var(--wa-green); border-color:var(--wa-green); }

.wa-check .form-check-label{ font-size:.86rem; font-weight:500; color:var(--wa-ink); cursor:pointer; }

.wa-check__hint{ display:block; font-size:.72rem; font-weight:400; color:var(--wa-ink-soft); }

.btn-wa-ghost{ color:var(--wa-ink-soft); background:transparent; border:1px solid var(--wa-line); }

.btn-wa-ghost:hover{ color:var(--wa-green); border-color:var(--wa-green); background:#F6FAF7; }

.pw-toggle{ cursor:pointer; }

.pw-meter{ height:5px; border-radius:4px; background:#E9EDEB; overflow:hidden; margin-top:8px; }

.pw-meter span{ display:block; height:100%; width:0; transition:width .25s, background .25s; }

/* ------------------------- Email test mode ---------------------------- */
.wa-chip-test{
  display:inline-flex; align-items:center; gap:7px; padding:.32rem .7rem;
  border-radius:999px; font-size:.74rem; font-weight:650; white-space:nowrap;
  background:#FDF3E3; color:#8A5A11; border:1px solid #EBC98A;
}

.wa-chip-test:hover{ background:#FBE9CB; color:#6E470D; }

.wa-testmode{ border:1px solid var(--wa-line); border-radius:var(--wa-radius-sm); padding:14px 16px; }

.wa-testmode--on{ background:#FFF9EE; border-color:#EBC98A; }

.wa-testmode--on .form-check-label{ color:#7A4A00; }

.wa-testmode--off{ background:#F8FBF9; }

/* ------------------- Branding previews & email preview ---------------- */
.wa-brand-prev{
  display:grid; place-items:center; border:1px dashed var(--wa-line);
  border-radius:var(--wa-radius-sm); background:#F8FBF9; padding:10px; min-height:74px; overflow:hidden;
}

.wa-brand-prev img{ max-width:100%; max-height:54px; width:auto; border-radius:0; }

.wa-brand-prev--icon img{ max-height:34px; }

/* Background is wide artwork: show the crop, not a letterboxed thumbnail. */
.wa-brand-prev--bg{ padding:0; min-height:96px; background:#04251A; }

.wa-brand-prev--bg img{ width:100%; max-height:96px; object-fit:cover; }

/* Email preview — a real iframe so the email's own CSS cannot touch the portal */
.wa-mail-preview{ background:#EEF2F0; }

.wa-mail-preview iframe{
  display:block; width:100%; height:62vh; min-height:380px; border:0; background:#fff;
}

/* ------------------------------ Misc --------------------------------- */
.wa-empty{ text-align:center; padding:48px 20px; color:var(--wa-ink-soft); }

.wa-empty i{ font-size:2.4rem; color:#C9D5CE; margin-bottom:12px; display:block; }

.wa-chart-box{ position:relative; height:286px; }

.wa-chart-box--sm{ height:242px; }

@media (max-width:575.98px) {
  .wa-chart-box,.wa-chart-box--sm{ height:240px; }
}

/* Doughnut centre readout — the total belongs inside the hole, not in a legend */
.wa-donut{ position:relative; }

.wa-donut__mid{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; pointer-events:none;
}

.wa-donut__mid b{ display:block; font-size:1.5rem; font-weight:780; color:#123024; line-height:1; }

.wa-donut__mid span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--wa-ink-soft); }

/* Activity feed — a timeline reads faster than a five-column table */
.wa-feed{ list-style:none; margin:0; padding:6px 4px; }

.wa-feed li{ display:flex; gap:14px; padding:11px 16px; border-radius:var(--wa-radius-sm); }

.wa-feed li:hover{ background:#F8FBF9; }

.wa-feed__dot{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center;
  background:var(--wa-accent-soft); color:var(--wa-green); font-size:.76rem;
  box-shadow:inset 0 0 0 1px rgba(0,121,63,.10);
}

.wa-feed__dot--warn{ background:#FDF3E3; color:#8A5A11; }

.wa-feed__dot--bad{ background:#FDECEC; color:#A32020; }

.wa-feed__body{ min-width:0; flex:1; }

.wa-feed__line{ font-size:.86rem; color:var(--wa-ink); margin:0; }

.wa-feed__line b{ font-weight:600; color:#123024; }

.wa-feed__meta{ font-size:.72rem; color:var(--wa-ink-soft); }

.table-responsive{ border-radius:var(--wa-radius-sm); }

.wa-loading{ opacity:.55; pointer-events:none; }

@media print {
  .wa-sidebar,.wa-topbar,.no-print{ display:none!important; }
  .wa-main{ margin:0; }
}

/* ------------------------------ Projects page ------------------------------ */
.wa-kpi--tile{ display:block; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.wa-kpi--static{ cursor:default; }
.wa-kpi--static:hover{ transform:none; }
.wa-kpi--tile.is-active{ border-color:var(--wa-green); box-shadow:0 0 0 2px var(--wa-green), var(--wa-shadow-lg); }
.wa-kpi--red::before{ background:radial-gradient(circle, rgba(200,40,40,.14) 0%, rgba(200,40,40,0) 68%); }
.wa-kpi--red .wa-kpi__icon{ background:linear-gradient(145deg,#E76A6A,#C82828); box-shadow:0 8px 20px -8px rgba(200,40,40,.55), inset 0 1px 0 rgba(255,255,255,.30); }
.wa-health{ display:inline-flex; align-items:center; gap:5px; font-size:.73rem; font-weight:700; padding:.24rem .55rem; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.wa-health--green{ background:var(--wa-accent-soft); color:#12662F; border-color:#CDEBD6; }
.wa-health--amber{ background:#FDF3E1; color:#8A5A0B; border-color:#F3DDB0; }
.wa-health--red{ background:#FDECEC; color:#A32020; border-color:#F5D2D2; }
.wa-pj-group > th{ background:#F3F8F5; font-weight:700; }
.wa-pj-group a{ color:inherit; text-decoration:none; }
.wa-pj-group a:hover{ text-decoration:underline; }
.wa-pj-desc{ font-size:.78rem; color:var(--wa-ink-soft); max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-pj-prog{ display:flex; align-items:center; gap:8px; min-width:120px; }
.wa-pj-prog progress{ width:70px; height:8px; accent-color:var(--wa-green); }
.wa-pj-archived td{ opacity:.7; }


/* ======================================================================
   Task 12 - navigation, topbar search, task lists, task panel
   BRD NFR: the page is never wider than the screen; tables scroll sideways
   inside their own wrapper; Task column min 220px (180px on phones);
   Portfolio column shows the code only at <=1280px (full name in title).
   ====================================================================== */

/* ---- Sidebar: portfolios with the open portfolio's active projects ---- */
.wa-sidebar__label--link{ display:flex; align-items:center; justify-content:space-between; }
.wa-sidebar__more{ font-size:.66rem; letter-spacing:.04em; text-transform:none; color:rgba(255,255,255,.62); font-weight:600; }
.wa-sidebar__more:hover{ color:#fff; text-decoration:underline; }
.wa-nav-empty{ display:block; padding:4px 10px 8px; font-size:.78rem; color:rgba(255,255,255,.45); }
.wa-nav-pf{ min-width:0; }
.wa-nav-pf__code{
  flex:0 0 auto; min-width:40px; text-align:center; font-size:.66rem; font-weight:750; letter-spacing:.04em;
  padding:.16rem .36rem; border-radius:6px; background:rgba(255,255,255,.10); color:#D7F2DE;
}
.wa-nav-pf.active .wa-nav-pf__code{ background:rgba(255,255,255,.24); color:#fff; }
.wa-nav-pf__name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-nav-sub{ margin:2px 0 6px 26px; padding-left:10px; border-left:1px solid rgba(255,255,255,.14); }
.wa-nav-sublink{
  display:block; padding:5px 8px; border-radius:8px; font-size:.79rem; color:rgba(255,255,255,.70);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wa-nav-sublink:hover{ background:var(--wa-sidebar-hover); color:#fff; }

/* ---- Topbar: title, search, New task, bell, user ---- */
.wa-topbar__title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; }
.wa-topbar__role{ font-size:.72rem; }
.wa-topbar__actions{ margin-left:auto; display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.wa-search{ position:relative; flex:0 1 340px; min-width:0; margin-left:8px; }
.wa-search__icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--wa-ink-soft); font-size:.8rem; pointer-events:none; }
.wa-search__input{ padding-left:32px; border-radius:999px; background:#F5F8F6; border-color:var(--wa-line); height:36px; }
.wa-search__input:focus{ background:#fff; }
.wa-search__menu{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; min-width:280px; max-height:60vh; overflow-y:auto;
  background:#fff; border:1px solid var(--wa-line); border-radius:var(--wa-radius-sm); box-shadow:var(--wa-shadow-lg);
  padding:6px; z-index:1060;
}
.wa-search__menu.show{ display:block; }
.wa-search__item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:var(--wa-ink); min-width:0;
}
.wa-search__item:hover,.wa-search__item:focus{ background:var(--wa-accent-soft); color:#123024; outline:none; }
.wa-search__code{ flex:0 0 auto; font-weight:700; font-size:.78rem; color:var(--wa-green); font-variant-numeric:tabular-nums; }
.wa-search__title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.86rem; }
.wa-search__flag{ margin-left:auto; flex:0 0 auto; font-size:.68rem; font-weight:700; color:#A32020; background:#FDECEC; border-radius:999px; padding:.1rem .45rem; }
.wa-search__none{ padding:10px; font-size:.84rem; color:var(--wa-ink-soft); }
.wa-newtask{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:999px; box-shadow:var(--wa-shadow-brand); white-space:nowrap; }
.wa-bell{ border-radius:50%!important; }
/* Small screens: New task becomes an icon; below sm the page title gives way to search. */
@media (max-width:991.98px){
  .wa-newtask{ width:36px; padding:0; justify-content:center; }
  .wa-newtask__label{ display:none; }
}
@media (max-width:575.98px){
  .wa-topbar{ gap:8px; padding:0 10px; }
  .wa-topbar__title{ display:none; }
  .wa-search{ flex:1 1 auto; margin-left:0; }
  .wa-search__menu{ position:fixed; top:62px; left:8px; right:8px; min-width:0; }
  .wa-topbar__actions{ gap:6px; }
  .wa-topbar .wa-avatar{ width:34px; height:34px; }
}

/* ---- List page head: count + view switch ---- */
.wa-card__head{ flex-wrap:wrap; gap:10px; }
.wa-count{
  display:inline-block; margin-left:8px; font-size:.72rem; font-weight:650; vertical-align:middle;
  color:var(--wa-green); background:var(--wa-accent-soft); border:1px solid #CDEBD6; border-radius:999px; padding:.14rem .55rem;
}
.wa-count:empty{ display:none; }
.wa-seg{ display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; background:#EEF3F0; border-radius:999px; max-width:100%; }
.wa-seg__btn{
  border:0; background:transparent; color:var(--wa-ink-soft); font:inherit; font-size:.8rem; font-weight:600;
  padding:.36rem .85rem; border-radius:999px; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s;
}
.wa-seg__btn:hover{ color:var(--wa-green); }
.wa-seg__btn.is-active{ background:#fff; color:var(--wa-green); box-shadow:0 1px 2px rgba(16,40,28,.10), 0 4px 10px -6px rgba(16,40,28,.25); }
.wa-filters__group--grow{ flex:1 1 220px; }
.wa-filters__group--grow .form-control{ width:100%; }

/* ---- Task table ---- */
.wa-tasks .wa-card__body{ min-width:0; }
.wa-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--wa-line-soft); border-radius:var(--wa-radius-sm); }
.wa-tasktable{ width:100%!important; margin:0!important; }
.wa-tasktable thead th{ white-space:nowrap; }
.wa-tasktable td.wa-col-task, .wa-tasktable th.wa-col-task{ min-width:220px; white-space:normal; }
@media (max-width:767.98px){ .wa-tasktable td.wa-col-task, .wa-tasktable th.wa-col-task{ min-width:180px; } }
.wa-col-project{ max-width:200px; }
.wa-cell-clip{ display:inline-block; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.wa-pf{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.wa-pf__code{
  font-size:.7rem; font-weight:750; letter-spacing:.04em; padding:.2rem .45rem; border-radius:6px;
  background:#E6F3EC; color:var(--wa-green);
}
.wa-pf__name{ max-width:180px; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:1280px){ .wa-pf__name{ display:none; } }
.wa-adhoc{ font-style:italic; color:var(--wa-ink-soft); }
.wa-task-code{ font-weight:700; font-size:.8rem; font-variant-numeric:tabular-nums; color:var(--wa-green); }
.wa-task-link{ font-weight:600; color:#1E2B24; overflow-wrap:anywhere; }
.wa-task-link:hover{ color:var(--wa-green); text-decoration:underline; }
.wa-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.wa-tag{
  display:inline-block; font-size:.68rem; font-weight:600; line-height:1.4; padding:.08rem .45rem; border-radius:999px;
  background:#EAF6FB; color:#0B5B7A; border:1px solid #CBE8F4; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Status / priority chips (text colours >= 4.5:1 on their backgrounds) */
.wa-st,.wa-pr{ display:inline-flex; align-items:center; font-size:.72rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.wa-st--todo{ background:#EEF2F0; color:#47524C; border-color:#E0E7E3; }
.wa-st--in_progress{ background:#E4F4FB; color:#0B5B7A; border-color:#C8E7F4; }
.wa-st--on_hold{ background:#FDF3E1; color:#7D500A; border-color:#F3DDB0; }
.wa-st--done{ background:var(--wa-accent-soft); color:#12662F; border-color:#CDEBD6; }
.wa-st--cancelled{ background:#F2F2F3; color:#5E6164; border-color:#E2E3E5; text-decoration:line-through; }
.wa-pr--low{ background:#F2F4F3; color:#56605B; }
.wa-pr--medium{ background:#EAF3FA; color:#0C5C86; }
.wa-pr--high{ background:#FDF0E0; color:#8A4B06; }
.wa-pr--critical{ background:#FDECEC; color:#A32020; border-color:#F5D2D2; }
.wa-due{ font-variant-numeric:tabular-nums; }
.wa-due--over{ color:#B42318; font-weight:700; }
.wa-mini{ display:flex; align-items:center; gap:8px; min-width:104px; }
.wa-mini progress{ width:60px; height:7px; accent-color:var(--wa-green); }
.wa-mini span{ font-size:.8rem; }
/* FR-TK-05: overdue rows red (left rule + tint; text stays dark for contrast) */
table.dataTable tbody tr.wa-row-overdue{ background:#FEF3F2; }
table.dataTable tbody tr.wa-row-overdue:hover{ background:#FDE8E6; }
table.dataTable tbody tr.wa-row-overdue > td:first-child{ box-shadow:inset 4px 0 0 #D92D20; }
.wa-dt-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-top:14px; }
.wa-dt-foot__pages{ margin-left:auto; }
.wa-dt-foot .pagination{ margin:0; flex-wrap:wrap; }
@media (max-width:575.98px){ .wa-dt-foot__pages{ margin-left:0; width:100%; } .wa-dt-foot .pagination{ justify-content:flex-start!important; } }

/* ---- Task panel (offcanvas) ---- */
.wa-tp{ --bs-offcanvas-width:min(640px, 100vw); border-left:0!important; box-shadow:-24px 0 60px -30px rgba(16,40,28,.45); }
.wa-tp__head{
  display:flex; align-items:flex-start; gap:12px; padding:18px 20px 12px;
  background:linear-gradient(180deg,#F5FAF7,#FFFFFF); border-bottom:1px solid var(--wa-line-soft);
}
.wa-tp__headmain{ min-width:0; flex:1; }
.wa-tp__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:4px; }
.wa-tp__code{ font-weight:800; font-size:.8rem; color:var(--wa-green); letter-spacing:.02em; margin-right:4px; }
.wa-tp__chips{ display:inline-flex; flex-wrap:wrap; gap:6px; }
.wa-tp__title{ font-size:1.12rem; font-weight:700; color:#123024; margin:0; overflow-wrap:anywhere; }
.wa-tp__crumb{ font-size:.76rem; color:var(--wa-ink-soft); margin-top:2px; overflow-wrap:anywhere; }
.wa-overdue-badge{ display:inline-flex; align-items:center; font-size:.72rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; background:#C4320A; color:#fff; }
.wa-tp__notice{ margin:10px 20px 0; padding:9px 12px; border-radius:var(--wa-radius-sm); font-size:.82rem; background:#FDF3E1; color:#7D500A; border:1px solid #F3DDB0; }
.wa-tp__tabs{
  display:flex; flex-wrap:nowrap; overflow-x:auto; gap:2px; padding:10px 16px 0; border-bottom:1px solid var(--wa-line);
  scrollbar-width:thin;
}
.wa-tp__tabs .nav-link{
  white-space:nowrap; font-size:.84rem; font-weight:600; color:var(--wa-ink-soft); border:0; background:none;
  padding:.5rem .8rem; border-bottom:2px solid transparent; border-radius:0;
}
.wa-tp__tabs .nav-link:hover{ color:var(--wa-green); }
.wa-tp__tabs .nav-link.active{ color:var(--wa-green); border-bottom-color:var(--wa-accent); }
.wa-tp__count{ font-size:.7rem; font-weight:700; color:var(--wa-ink-soft); background:#EEF3F0; border-radius:999px; padding:.05rem .4rem; margin-left:2px; }
.wa-tp__count:empty{ display:none; }
.wa-tp__body{ flex:1 1 auto; overflow-y:auto; padding:18px 20px; }
.wa-tp--loading .wa-tp__body .tab-content{ opacity:.35; pointer-events:none; }
.wa-tp__loading{ font-size:.86rem; color:var(--wa-ink-soft); margin-bottom:10px; }
.wa-tp__foot{
  display:flex; align-items:center; gap:8px; padding:12px 20px; border-top:1px solid var(--wa-line);
  background:#FBFDFC;
}
.wa-tp__info{ font-size:.75rem; color:var(--wa-ink-soft); border-top:1px dashed var(--wa-line); padding-top:10px; }
.wa-tp .form-control:disabled,.wa-tp .form-select:disabled{ background-color:#F6F8F7; color:#3F4542; opacity:1; }
.wa-tp__tags{ display:flex; flex-wrap:wrap; gap:6px; min-height:32px; align-items:center; }
.wa-tp__tags--ro .wa-tag{ font-size:.74rem; padding:.18rem .55rem; }
.wa-tagpick{ position:relative; display:inline-flex; cursor:pointer; margin:0; }
.wa-tagpick__in{ position:absolute; opacity:0; width:1px; height:1px; }
.wa-tagpick span{
  display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:600; padding:.3rem .7rem;
  border-radius:999px; border:1px solid #D9E0DC; background:#fff; color:var(--wa-ink); transition:.12s;
}
.wa-tagpick span:hover{ border-color:var(--wa-accent); }
.wa-tagpick__in:checked + span{ background:var(--wa-green); border-color:var(--wa-green); color:#fff; }
.wa-tagpick__in:checked + span::before{ content:"\2713"; font-weight:800; }
.wa-tagpick__in:focus-visible + span{ outline:2px solid var(--wa-accent); outline-offset:2px; }
.wa-tagpick__in:disabled + span{ opacity:.6; cursor:not-allowed; }
.wa-tp__addrow{ display:flex; gap:8px; align-items:center; margin-top:12px; }
.wa-tp__addrow .form-control{ min-width:0; flex:1 1 auto; }
.wa-tp__addrow .btn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:575.98px){ .wa-tp__addrow--link{ flex-wrap:wrap; } .wa-tp__addrow--link .form-control{ flex:1 1 100%; } }
.wa-progress-bar{ background:linear-gradient(90deg,var(--wa-accent),var(--wa-green)); }
.wa-tp__progress .progress{ height:7px; border-radius:999px; background:#EAF0EC; }
.wa-tp__progress{ margin-bottom:10px; }
/* Checklist */
.wa-cl{ list-style:none; margin:0; padding:0; }
.wa-cl__item{ display:flex; align-items:center; gap:10px; padding:8px 6px; border-bottom:1px solid var(--wa-line-soft); }
.wa-cl__item:hover{ background:#F8FBF9; }
.wa-cl__check{ flex:0 0 auto; margin:0; width:1.15em; height:1.15em; cursor:pointer; }
.wa-cl__check:checked{ background-color:var(--wa-green); border-color:var(--wa-green); }
.wa-cl__body{ flex:1 1 auto; min-width:0; font-size:.87rem; overflow-wrap:anywhere; cursor:pointer; margin:0; }
.wa-cl__item.is-done .wa-cl__body{ color:var(--wa-ink-soft); text-decoration:line-through; }
.wa-cl__edit{ flex:1 1 auto; min-width:0; }
.wa-cl__acts{ display:flex; gap:2px; flex:0 0 auto; }
.wa-cl__acts .btn-icon{ width:28px; height:28px; font-size:.74rem; }
/* Attachments */
.wa-att{ list-style:none; margin:0 0 6px; padding:0; }
.wa-att__item{ display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px solid var(--wa-line-soft); }
.wa-att__icon{ flex:0 0 34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#EAF6FB; color:#0B5B7A; }
.wa-att__main{ flex:1 1 auto; min-width:0; }
.wa-att__name{ display:block; font-weight:600; font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-att__meta{ font-size:.72rem; color:var(--wa-ink-soft); }
/* Comments */
.wa-cm__item{ padding:12px 0; border-bottom:1px solid var(--wa-line-soft); }
.wa-cm__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.78rem; margin-bottom:6px; }
.wa-cm__meta strong{ color:#123024; }
.wa-cm__edited{ font-size:.72rem; font-style:italic; color:var(--wa-ink-soft); }
.wa-cm__body{ font-size:.87rem; overflow-wrap:anywhere; padding-left:38px; }
.wa-avatar--sm{ width:30px; height:30px; font-size:.68rem; }
.wa-tp__cmform{ margin-top:14px; }
.wa-tp__feed{ padding:0; }
.wa-tp__feed li{ padding:9px 6px; }
.wa-tp__feed .wa-feed__line{ overflow-wrap:anywhere; }

/* DataTables 2 (Bootstrap 5 renderer) paging + length controls in brand colours */
.wa-dt-foot .page-link{ color:var(--wa-green); }

.wa-dt-foot .page-item.active .page-link{ background:var(--wa-green); border-color:var(--wa-green); color:#fff; }

.wa-dt-foot .page-link:focus{ box-shadow:0 0 0 .2rem rgba(55,179,75,.25); }

.wa-dt-foot .dt-info{ font-size:.8rem; color:var(--wa-ink-soft); }

.wa-dt-foot .dt-length label{ font-size:.82rem; color:var(--wa-ink-soft); margin-left:6px; }

.wa-dt-foot select.form-select{ width:auto; min-width:84px; padding-right:2.1rem; display:inline-block; }

/* Roles page (read-only matrix) */
.wa-role-active{ background:var(--wa-green); border-color:var(--wa-green); }
.wa-text-green{ color:var(--wa-green); }
.wa-matrix__module{ color:var(--wa-green); letter-spacing:.05em; }
.wa-matrix__key{ font-size:.7rem; }

/* === DataTables 2 skin === (bundled DataTables is 2.1.8 + Bootstrap 5 renderer: .dt-container, .dt-search, .dt-length, .dt-info, .dt-paging)
   One set of rules for every table (tasks, users, audit, requests...). */
.dt-container .dt-search,
.dt-container .dt-length{ font-size:.82rem; color:var(--wa-ink-soft); font-weight:500; }
.dt-container .dt-search label,
.dt-container .dt-length label{ margin:0; }
.dt-container .dt-length select,
.dt-container .dt-search input{
  border-radius:var(--wa-radius-sm); border:1px solid #D9E0DC; font-size:.84rem; background-color:#fff;
}
.dt-container .dt-length select{ width:auto; min-width:84px; padding:.3rem 2.1rem .3rem .6rem; display:inline-block; margin-right:6px; }
.dt-container .dt-search input{ min-width:210px; padding:.35rem .7rem; margin-left:8px; }
.dt-container .dt-length select:focus,
.dt-container .dt-search input:focus{ border-color:var(--wa-green-2, #37B34B); box-shadow:0 0 0 .2rem rgba(55,179,75,.25); outline:0; }
.dt-container .dt-info{ font-size:.8rem; color:var(--wa-ink-soft); padding-top:0; }
.dt-container .dt-paging{ padding-top:0; }
.dt-container .dt-paging .pagination{ margin:0; flex-wrap:wrap; }
.dt-container .dt-paging .page-link,
.dt-container .dt-paging-button{ color:var(--wa-green); border-radius:6px; }
.dt-container .dt-paging .page-link:hover{ background:#F6FBF8; color:var(--wa-green-700); }
.dt-container .dt-paging .page-item.active .page-link,
.dt-container .dt-paging-button.current{ background:var(--wa-green); border-color:var(--wa-green); color:#fff; }
.dt-container .dt-paging .page-item.disabled .page-link{ color:var(--wa-ink-soft); opacity:.55; background:transparent; }
.dt-container .dt-paging .page-link:focus{ box-shadow:0 0 0 .2rem rgba(55,179,75,.25); }
.dt-container .dt-empty{ color:var(--wa-ink-soft); padding:1.4rem .5rem; }
.dt-container .dt-processing{ color:var(--wa-green); }
div.dt-container .dt-buttons .btn{ margin-right:6px; }
@media (max-width:575.98px){
  .dt-container .dt-search{ text-align:left; }
  .dt-container .dt-search input{ width:100%; min-width:0; margin-left:0; margin-top:4px; }
}

/* ======================================================================
   Task 13 - portfolio page and project view
   Tab bar scrolls sideways when there are many projects; health dot per project tab.
   ====================================================================== */
.wa-crumbs .breadcrumb{ font-size:.84rem; }
.wa-pftabs{
  display:flex; flex-wrap:nowrap; gap:4px; overflow-x:auto; margin:0 0 18px; padding:0 0 2px;
  border-bottom:1px solid var(--wa-line); -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.wa-pftab{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; max-width:240px; padding:9px 14px;
  font-size:.86rem; font-weight:600; color:var(--wa-ink-soft); white-space:nowrap;
  border-bottom:3px solid transparent; border-radius:8px 8px 0 0; text-decoration:none; margin-bottom:-1px;
}
.wa-pftab:hover{ color:var(--wa-green); background:var(--wa-accent-soft); }
.wa-pftab.is-active{ color:var(--wa-green); border-bottom-color:var(--wa-green); background:#fff; }
.wa-pftab--new{ color:var(--wa-green); font-weight:700; }
.wa-pftab__name{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.wa-hdot{ flex:0 0 auto; width:10px; height:10px; border-radius:50%; display:inline-block; }
.wa-hdot--green{ background:#37B34B; }
.wa-hdot--amber{ background:#E8A33D; }
.wa-hdot--red{ background:#DC3545; }
.wa-pjhead__pct{ min-width:200px; }
.wa-pjmeta{ display:flex; flex-wrap:wrap; gap:6px 28px; }
.wa-pjmeta dt{ font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--wa-ink-soft); }
.wa-pjmeta dd{ margin:0; font-size:.88rem; }
.wa-subtabs .nav-link{ color:var(--wa-ink-soft); font-weight:600; }
.wa-subtabs .nav-link.active{ color:var(--wa-green); }
.wa-wt-input{ width:110px; margin-left:auto; text-align:right; font-variant-numeric:tabular-nums; }
.wa-act-details{ overflow-wrap:anywhere; min-width:220px; }

/* === Kanban === (Task 14: My board) */
.wa-board{ min-width:0; }
.wa-board__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 20px; margin-bottom:16px; }
.wa-btiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.wa-btile{
  display:flex; flex-direction:column; gap:4px; padding:14px 16px; background:#fff;
  border:1px solid var(--wa-line); border-radius:var(--wa-radius-sm); box-shadow:var(--wa-shadow);
}
.wa-btile__label{ font-size:.7rem; font-weight:650; text-transform:uppercase; letter-spacing:.07em; color:var(--wa-ink-soft); }
.wa-btile__value{ font-size:1.7rem; font-weight:800; line-height:1.1; color:#102E21; font-variant-numeric:tabular-nums; }
.wa-btile--over .wa-btile__value{ color:#B42318; }
@media (max-width:767.98px){ .wa-btiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.wa-bcols{
  display:flex; align-items:flex-start; gap:12px; overflow-x:auto; padding-bottom:10px; max-width:100%;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.wa-bcol{
  flex:1 0 250px; min-width:250px; max-width:340px; display:flex; flex-direction:column;
  background:#EEF3F0; border:1px solid var(--wa-line); border-radius:var(--wa-radius-sm); padding:10px;
}
.wa-bcol__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 4px 10px; }
.wa-bcol__title{ margin:0; font-size:.82rem; font-weight:750; text-transform:uppercase; letter-spacing:.06em; color:var(--wa-ink-soft); }
.wa-bcol__count{
  min-width:24px; text-align:center; font-size:.75rem; font-weight:700; padding:.1rem .5rem; border-radius:999px;
  background:#fff; color:var(--wa-green); border:1px solid #CDEBD6; font-variant-numeric:tabular-nums;
}
.wa-bcol--in_progress{ border-top:3px solid #1FACDC; }
.wa-bcol--on_hold{ border-top:3px solid #E8A33D; }
.wa-bcol--done{ border-top:3px solid #37B34B; }
.wa-bcol--cancelled{ border-top:3px solid #9AA3A0; }
.wa-bcol--todo{ border-top:3px solid #6B7872; }
.wa-bcol__list{ display:flex; flex-direction:column; gap:8px; min-height:90px; border-radius:8px; }
.wa-bcol__list.is-empty::before{
  content:attr(data-empty); display:block; padding:18px 8px; text-align:center; font-size:.8rem; color:var(--wa-ink-soft);
  border:1px dashed #C9D6CF; border-radius:8px;
}
.wa-bcol__note{ margin:8px 4px 0; font-size:.74rem; color:var(--wa-ink-soft); }
.wa-bcard{
  background:#fff; border:1px solid var(--wa-line); border-left:4px solid #C9D6CF; border-radius:10px;
  box-shadow:0 1px 2px rgba(16,40,28,.06); padding:0 0 8px; cursor:grab; touch-action:manipulation;
}
.wa-bcard--over{ border-left-color:#DC3545; background:#FFFAFA; }
.wa-bcard--ghost{ opacity:.45; }
.wa-bcard--chosen{ box-shadow:0 8px 22px -8px rgba(16,40,28,.35); }
.wa-bcard.is-busy{ opacity:.6; pointer-events:none; }
.wa-bcard__open{
  display:flex; flex-direction:column; gap:6px; width:100%; padding:10px 12px 4px; border:0; background:transparent;
  text-align:left; font:inherit; color:inherit; cursor:inherit; border-radius:10px;
}
.wa-bcard__open:focus-visible, .wa-bcard__move:focus-visible{ outline:2px solid var(--wa-green); outline-offset:2px; }
.wa-bcard__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wa-bcard__title{ font-weight:650; font-size:.88rem; line-height:1.3; overflow-wrap:anywhere; color:#1E2B24; }
.wa-bcard__proj{ font-size:.76rem; color:var(--wa-ink-soft); overflow-wrap:anywhere; }
.wa-bcard__meta{ font-size:.78rem; }
.wa-bcard .wa-mini{ min-width:0; }
.wa-bcard .wa-mini progress{ flex:1 1 auto; width:auto; min-width:0; }
.wa-bcard__move{ display:block; width:calc(100% - 24px); margin:4px 12px 0; padding:.15rem 2rem .15rem .5rem; font-size:.76rem; cursor:pointer; }
@media (max-width:575.98px){ .wa-bcol{ flex-basis:80vw; min-width:80vw; } }

/* === Dashboards === (Task 15: dashboards.php, project Dashboard sub-tab, Team workload) */
.wa-chart-empty{ display:none; margin:0; position:absolute; inset:0; align-items:center; justify-content:center; text-align:center; padding:16px; font-size:.85rem; color:var(--wa-ink-soft); border:1px dashed #C9D6CF; border-radius:10px; }
.wa-chart-box.is-empty canvas{ display:none; }
.wa-chart-box.is-empty .wa-chart-empty{ display:flex; }
.wa-dash-head .wa-card__body{ padding-top:14px; padding-bottom:14px; }
.wa-dash-multi .dropdown-menu{ min-width:max(100%,260px); max-height:300px; overflow-y:auto; }
.wa-dash-multi .form-check-label{ white-space:nowrap; }
.wa-dash-multi > .btn{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-dash-kpis .wa-kpi__value{ font-variant-numeric:tabular-nums; }
/* === /Dashboards === */

/* === Notifications === (Task 16: topbar bell, notifications.php, profile preferences) */
.wa-bell-wrap{ position:relative; }
.wa-bell{ position:relative; }
.wa-bell__badge{
  position:absolute; top:-3px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--wa-danger); color:#fff; font-size:.66rem; font-weight:700; line-height:18px; text-align:center;
  box-shadow:0 0 0 2px #fff; font-variant-numeric:tabular-nums;
}
.wa-bell__menu{ width:360px; max-width:calc(100vw - 16px); padding:0; overflow:hidden; border-radius:var(--wa-radius-sm); box-shadow:var(--wa-shadow-lg); }
.wa-bell__head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--wa-line); }
.wa-bell__heading{ font-weight:700; font-size:.9rem; color:var(--wa-ink); }
.wa-bell__readall{ padding:0; font-size:.78rem; color:var(--wa-green); text-decoration:none; }
.wa-bell__list{ max-height:min(60vh,420px); overflow-y:auto; }
.wa-bell__item,.wa-notif-item{ display:flex; flex-direction:column; gap:2px; padding:9px 14px; border-bottom:1px solid var(--wa-line-soft); color:var(--wa-ink); text-decoration:none; }
.wa-bell__item:hover,.wa-bell__item:focus,.wa-notif-item:hover,.wa-notif-item:focus{ background:var(--wa-accent-soft); color:#123024; outline:none; }
.wa-bell__item.is-unread,.wa-notif-item.is-unread{ background:#F2FAF4; box-shadow:inset 3px 0 0 var(--wa-accent); }
.wa-bell__item.is-unread .wa-bell__msg,.wa-notif-item.is-unread .wa-notif-item__msg{ font-weight:600; }
.wa-bell__msg,.wa-notif-item__msg{ font-size:.84rem; line-height:1.35; overflow-wrap:anywhere; }
.wa-bell__when,.wa-notif-item__when{ font-size:.72rem; color:var(--wa-ink-soft); }
.wa-bell__empty,.wa-notif-empty{ padding:16px 14px; margin:0; font-size:.84rem; color:var(--wa-ink-soft); text-align:center; }
.wa-bell__foot{ display:block; padding:9px 14px; text-align:center; font-size:.8rem; font-weight:600; color:var(--wa-green); border-top:1px solid var(--wa-line); text-decoration:none; }
.wa-bell__foot:hover{ background:var(--wa-line-soft); }
.wa-notif-item{ display:grid; grid-template-columns:10px 1fr auto; align-items:baseline; column-gap:10px; padding:12px 18px; }
.wa-notif-item__dot{ width:8px; height:8px; border-radius:50%; background:transparent; }
.wa-notif-item.is-unread .wa-notif-item__dot{ background:var(--wa-accent); }
.wa-notif-item__when{ white-space:nowrap; }
.wa-notif-pager{ display:flex; justify-content:center; padding:12px; border-top:1px solid var(--wa-line); }
@media (max-width:575.98px){
  .wa-bell__menu{ position:fixed!important; top:62px!important; left:8px!important; right:8px!important; width:auto; transform:none!important; }
  .wa-notif-item{ grid-template-columns:10px 1fr; }
  .wa-notif-item__when{ grid-column:2; }
}
/* === /Notifications === */

/* === Export === */
.wa-export{ display:inline-flex; align-items:center; gap:6px; flex-wrap:nowrap; }
.wa-export .btn[disabled]{ opacity:.6; cursor:progress; }
/* === /Export === */

/* === Templates === */
.wa-tp-rows th,.wa-tp-rows td{ vertical-align:top; }
.wa-tp-rows .wa-tp-no{ width:2rem; padding-top:.6rem; }
.wa-tp-rows .wa-tp-col-title,#tiTable .wa-tp-col-title{ min-width:220px; }
.wa-tp-rows input[type=number]{ min-width:84px; }
.wa-tp-tags{ display:flex; flex-wrap:wrap; gap:4px 10px; min-width:150px; max-width:260px; max-height:112px; overflow-y:auto; padding-top:.3rem; }
.wa-tp-tag{ display:inline-flex; align-items:center; gap:4px; font-size:.8rem; color:var(--wa-ink); white-space:nowrap; cursor:pointer; }
.wa-tp-tag--off{ color:var(--wa-ink-soft); font-style:italic; }
#tiTable td{ vertical-align:top; }
#tiTable select{ min-width:160px; }
/* === /Templates === */

/* === Settings: rate limits (Task 20) === */
.wa-w-150{ width:150px; }
.wa-w-170{ width:170px; }
/* === /Settings === */

/* === Security: CSP utilities === (Task 21: replace every style="" attribute in server templates) */
.wa-hidden{ display:none; }                 /* no !important: jQuery .show()/.toggle() can still reveal it */
.wa-fs-62{ font-size:.62rem; }
.wa-fs-72{ font-size:.72rem; }
.wa-fs-74{ font-size:.74rem; }
.wa-fs-78{ font-size:.78rem; }
.wa-mw-480{ max-width:480px; }
.wa-avatar.wa-avatar--lg{ width:74px; height:74px; font-size:1.5rem; }
.wa-error-code{ font-size:3rem; font-weight:700; color:var(--wa-green); margin:0; }
.wa-otp-input{ letter-spacing:.4em; font-weight:600; }
.wa-toast-area{ z-index:1090; }
.wa-text-warning{ color:var(--wa-warning); }
/* === /Security === */

/* === Login: test-account panel === */
.wa-demo{ margin-top:1.25rem; padding:.75rem; border:1px dashed var(--wa-green); border-radius:.75rem; background:#f4faf6; }
.wa-demo__head{ font-size:.8rem; font-weight:600; color:var(--wa-green); margin-bottom:.5rem; }
.wa-demo__head span{ font-weight:400; color:#6c757d; margin-left:.35rem; }
.wa-demo__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.4rem; }
.wa-demo__btn{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:.05rem; padding:.4rem .55rem;
  border:1px solid #d7e6dc; border-radius:.5rem; background:#fff; cursor:pointer; min-width:0; }
.wa-demo__btn:hover,.wa-demo__btn:focus-visible{ border-color:var(--wa-green); outline:none; }
.wa-demo__btn.is-picked{ border-color:var(--wa-green); box-shadow:0 0 0 2px rgba(0,121,63,.2); }
.wa-demo__role{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--wa-green); }
.wa-demo__name{ font-size:.82rem; font-weight:600; color:#1f2937; }
.wa-demo__email{ font-size:.68rem; color:#6c757d; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* === /Login === */