/* ======= Tokens ======= */
:root{
  --bg: #f6f7f8;
  --bg-elev: #ffffff;
  --bg-elev-weak: #f9fafb;
  --bg-dark-weak: rgba(16,25,34,.5);

  --text: #1f2937;
  --text-weak: #6b7280;
  --text-inv: #ffffff;

  --primary: #137fec;
  --primary-10: color-mix(in oklab, var(--primary) 10%, #fff);
  --border: #e5e7eb;
  --border-strong: #d1d5db;

  --green: #16a34a;
  --amber: #f59e0b;
  --red: #ef4444;

  --card-border: #e5e7eb;
  --header-shadow: 0 1px 0 rgba(0,0,0,.06);

  --radius: 12px;
  --radius-lg: 16px;

  --sidebar-w: 256px;
  --sidebar-w-collapsed: 80px;

  --shadow-1: 0 10px 24px -14px rgba(0,0,0,.18);
}

.dark{
  --bg: #101922;
  --bg-elev: #0f1720;
  --bg-elev-weak: #111b25;

  --text: #e5e7eb;
  --text-weak: #9ca3af;

  --border: #223041;
  --border-strong: #2b3a4d;

  --card-border: #213142;
}

/* ======= Base ======= */
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body.page{
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* a11y */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skiplink{
  position: fixed; inset: 12px auto auto 12px; z-index: 100;
  background: var(--bg-elev); color: var(--text); border:1px solid var(--border);
  padding:.5rem .75rem; border-radius:10px; box-shadow: var(--shadow-1);
  transform: translateY(-150%); transition: transform .2s ease;
}
.skiplink:focus{ transform: translateY(0); outline:2px solid var(--primary); outline-offset:2px; }

/* ======= Layout ======= */
.app{
  position:relative; display:flex; min-height: 100vh; width: 100%;
}
.overlay{
  position: fixed; inset:0; background: rgba(0,0,0,.4); z-index: 40;
}

/* Sidebar */
.sidebar{
  position: fixed; top:0; left:0; z-index:50;
  width: var(--sidebar-w); height: 100%;
  transform: translateX(-100%); /* hidden on mobile by default */
  background: var(--bg-elev); border-right:1px solid var(--border);
  transition: transform .3s ease, width .3s ease;
}
.sidebar.is-open{ transform: translateX(0); }
@media (min-width:1024px){
  .sidebar{ transform: none; }
}

.sidebar__inner{ display:flex; flex-direction:column; height:100%; }

.brand{
  display:flex; align-items:center; gap:12px;
  padding: 16px 24px; border-bottom:1px solid var(--border);
  color: inherit;
}
.brand__icon{ width:32px; height:32px; color: var(--primary); }
.brand__icon svg{ width:100%; height:100%; display:block; }
.brand__name{ font-weight:800; font-size: 20px; letter-spacing: -.01em; }

.nav{ padding: 16px; overflow-y:auto; }
.nav--footer{ margin-top:auto; border-top:1px solid var(--border); }
.nav__item{
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px; border-radius: 10px; color: inherit; text-decoration: none;
}
.nav__item:hover{ background: color-mix(in oklab, var(--primary) 8%, transparent); }
.nav__item--active{
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  color: var(--primary); font-weight: 600;
}
.nav__text{ white-space: nowrap; }
.material-symbols-outlined{ font-variation-settings:'OPSZ' 24; }

/* Sidebar collapsed (desktop only) */
.sidebar-collapsed .sidebar{ width: var(--sidebar-w-collapsed); }
.sidebar-collapsed .nav__text,
.sidebar-collapsed .brand__name{ opacity:0; visibility:hidden; }
.sidebar-collapsed .brand{ justify-content: center; }

/* Content area */
.content{
  display:flex; flex-direction:column; width:100%;
  min-height:100vh; transition: padding-left .3s ease;
}
@media (min-width:1024px){
  .content--expanded{ padding-left: var(--sidebar-w); }
  .content--collapsed{ padding-left: var(--sidebar-w-collapsed); }
}

/* Header */
.header{
  position: sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  background: var(--bg-elev); border-bottom:1px solid var(--border);
  padding: 10px 16px; box-shadow: var(--header-shadow);
}
.header__left{ display:flex; align-items:center; gap:8px; }
.header__right{ display:flex; align-items:center; gap:12px; margin-left:auto; }

.icon-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--border);
  background: var(--bg-elev-weak); color:#374151;
  position: relative; /* for notify badge */
}
.dark .icon-btn{ background:#111b25; color:#cbd5e1; }
.icon-btn:hover{ background: color-mix(in oklab, var(--primary) 10%, transparent); }

/* Search */
.search{ display:flex; align-items:center; height:40px; min-width:220px; max-width: 320px; background: var(--bg-elev-weak); border:1px solid var(--border); border-radius: 10px; }
.search__icon{ padding-left:10px; color: var(--text-weak); }
.search__input{
  flex:1; height:100%; border:none; background: transparent; color: var(--text);
  padding: 0 12px; outline:none;
}

/* Avatar */
.avatar{
  width:40px; height:40px; border-radius:50%;
  background-image: var(--avatar); background-size: cover; background-position:center;
}

/* Main */
.main{ padding: 20px 16px 28px; }
.container{ margin: 0 auto; max-width: 1280px; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.page-title{
  font-size: clamp(24px, 1.6vw + 18px, 34px); font-weight: 900; letter-spacing:-.015em; margin:0;
}

/* Grid */
.grid{
  display:grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width:1024px){
  .grid{ grid-template-columns: 2fr 1fr; }
}
.grid__left{ display:grid; gap:24px; }
.grid__right{ display:grid; gap:24px; }

/* Cards */
.card{
  background: color-mix(in oklab, var(--bg-elev) 94%, transparent);
  border:1px solid var(--card-border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-1); margin-bottom: 10px;
}
.card--panel{ padding: 24px; }
.card__title{ margin:0 0 6px; font-weight: 700; }

/* Metrics */
.metric{ margin: 4px 0; font-weight: 800; font-size: 32px; letter-spacing:-.01em; }
.metric--primary{ color: var(--primary); }
.metric__sub{ display:flex; align-items:center; gap:8px; margin-bottom: 8px; }
.muted{ color: var(--text-weak); font-size: .95rem; }
.pos{ color: var(--green); font-weight:600; }

/* Simple bars */
.bars{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); grid-auto-rows: 1fr auto;
  gap: 16px; align-items: end; justify-items: center; min-height: 180px; padding: 8px 10px 0;
}
.bar{
  width:100%; background: color-mix(in oklab, var(--primary) 20%, transparent);
  border-radius: 8px 8px 0 0;
}
.bar--solid{ background: var(--primary); }
.bars__label{ margin:0; font-weight:700; font-size: 13px; color: var(--text-weak); }

/* Spark area */
.spark{ display:flex; flex-direction:column; gap: 10px; padding: 8px 0; }
.spark__labels{ display:flex; justify-content:space-around; font-size: 13px; color: var(--text-weak); font-weight:700; }

/* Ongoing projects scroller */
.section-title{ margin: 4px 0 -4px 2px; font-weight: 800; font-size: 20px; }
.scroller{
  display:flex; gap:16px; padding: 8px 2px; overflow-x:auto; scroll-snap-type:x mandatory;
}
.proj{
  min-width: 256px; display:flex; flex-direction:column; gap:14px;
  background: var(--bg-elev); border:1px solid var(--card-border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.proj__media{
  aspect-ratio: 16/9; border-radius: var(--radius) var(--radius) 0 0;
  background: center / cover no-repeat var(--bg-dark-weak);
  background-image: var(--img);
}
.proj__body{ display:flex; flex-direction:column; gap: 14px; padding: 12px 16px 16px; }
.proj__title{ margin:0; font-weight: 600; }

/* Buttons */
.btn{
  height: 40px; padding: 0 16px; border-radius:10px; border:1px solid var(--border);
  background: color-mix(in oklab, var(--primary) 96%, #0000);
  color: #fff; font-weight: 800; cursor:pointer;
}
.btn:hover{ filter: brightness(0.98); }
.btn--primary{ background: var(--primary); }
.btn--ghost{ background: var(--bg-elev); color: var(--text); }
.btn--danger{ background: #fee2e2; color:#b91c1c; border-color:#fecaca; }
.dark .btn--danger{ background: rgba(239,68,68,.18); color:#fecaca; border-color: rgba(239,68,68,.35); }

/* Panels on right */
.panel__title{ margin:0 0 10px; font-weight:800; font-size: 18px; }
.list{ list-style:none; margin:0; padding:0; display:grid; gap: 12px; }
.list--gap{ gap: 10px; }
.list__item{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px; border-radius: 10px; background: color-mix(in oklab, var(--bg) 85%, transparent);
}
.dark .list__item{ background: color-mix(in oklab, var(--bg-elev-weak) 90%, transparent); }

.list__row{ display:flex; align-items:flex-start; gap:10px; }
.list__title{ margin:0; font-weight: 600; }

/* Color helpers for icons */
.text-primary{ color: var(--primary); }
.text-red{ color: var(--red); }
.text-amber{ color: var(--amber); }
.text-green{ color: var(--green); }
.text-amber-strong{ color: #f59e0b; }

/* Utilities */
.container{ padding-inline: 8px; }
@media (min-width:640px){ .container{ padding-inline: 12px; } }
@media (min-width:1024px){ .container{ padding-inline: 24px; } }

/* ================= Added: Notification badge ================= */
.icon-btn[aria-label="Notifications"] .notify-badge{
  position:absolute;
  top:4px; right:4px;
  min-width:16px; height:16px; padding:0 4px;
  display:none; /* JS will toggle */
  border-radius:999px;
  background: var(--red);
  color:#fff; font:700 10px/16px Inter,system-ui,sans-serif;
  text-align:center; transform: translate(25%,-25%);
  pointer-events:none;
}

/* ================= Added: Modal & loader ================= */
[x-cloak]{ display:none !important; }

.modal-scrim{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:16px; background: rgba(0,0,0,.45);
}
.modal{
  width:min(640px, 100%);
  background: var(--bg-elev); color: var(--text);
  border:1px solid var(--border); border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  padding:16px;
}
.modal__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.modal__title{ font-size:18px; font-weight:800; margin:0; }
.modal__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }

/* Spinner + sizing */
.modal__body.row{ display:flex; align-items:center; gap:10px; padding:8px 2px; color: var(--text); }
.size-4 { inline-size:16px; block-size:16px; }
.size-5 { inline-size:20px; block-size:20px; }
.size-6 { inline-size:24px; block-size:24px; }
.size-8 { inline-size:32px; block-size:32px; }
.spin{ display:inline-block; animation: spin-rotate 1s linear infinite; }
.spin .dim{ opacity:.25; stroke: currentColor; }
.spin .bold{ stroke: currentColor; stroke-linecap: round; animation: spin-dash 1.4s ease-in-out infinite; }

@keyframes spin-rotate{ 100% { transform: rotate(360deg); } }
@keyframes spin-dash{
  0%{ stroke-dasharray:1,200; stroke-dashoffset:0; }
  50%{ stroke-dasharray:90,200; stroke-dashoffset:-35; }
  100%{ stroke-dasharray:90,200; stroke-dashoffset:-124; }
}
@media (prefers-reduced-motion: reduce){
  .spin{ animation:none; }
  .spin .bold{ animation:none; }
}

/* Inline loading row utility */
.loading-row{
  display:flex; align-items:center; gap:10px;
  color: var(--text-weak);
}

/* ================= Added: Chips, pager, small helpers ================= */
.chip{ display:inline-flex; align-items:center; gap:6px; }
.chip > .btn{ height:34px; padding:0 12px; }

.pager{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top: 12px;
}

/* ================= Added: Table & pills (open/closed) ================= */
.table-wrap{ overflow:auto; border-radius: var(--radius); }
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table thead th{
  position:sticky; top:0; z-index:1;
  background: var(--bg-elev-weak);
  color: var(--text-weak);
  font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.02em;
  padding:10px 12px; border-bottom:1px solid var(--border);
}
.table tbody td{
  padding:10px 12px; border-bottom:1px solid var(--border);
  vertical-align:top;
}
.table tbody tr:hover{
  background: color-mix(in oklab, var(--bg-elev-weak) 70%, transparent);
}
.dark .table thead th{ background:#0b1320; }

/* Pills */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; font-size:12px; font-weight:700;
  border-radius:9999px; border:1px solid transparent;
}
.pill--open{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; } /* RED when open */
.pill--closed{ background:#dbeafe; color:#1e3a8a; border-color:#bfdbfe; } /* BLUE when closed */

.dark .pill--open{ background:rgba(239,68,68,.15); color:#fecaca; border-color:rgba(239,68,68,.35); }
.dark .pill--closed{ background:rgba(59,130,246,.15); color:#bfdbfe; border-color:rgba(59,130,246,.35); }

/* Optional status row coloring via attr selectors (fallback if not using pills) */
td[data-status="open"]{ color:#b91c1c; font-weight:600; }
td[data-status="closed"]{ color:#1e3a8a; font-weight:600; }

/* ================= Added: Notify bell hover target fix ================= */
.header__right .icon-btn[aria-label="Notifications"]{ overflow: visible; }

/* ================= Added: Tiny dots (for legend/badges) ================= */
.dot{ inline-size:8px; block-size:8px; border-radius:999px; display:inline-block; }
.dot--slate{ background:#64748b; }
.dot--green{ background:#16a34a; }

/* ================= Added: Range filter date inputs ================= */
input[type="date"].input{
  height:40px;
  background: var(--bg-elev);
}








/* ===== Datetime input (40px, matches .input/.btn) ===== */
.input-dt,
input[type="datetime-local"]{
  inline-size: 35%;
  block-size: 30px;
  padding-inline: 12px 36px; /* room for picker icon */
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  font: 500 14px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  /* Prevent zoom on iOS */
  font-size: 16px;
}

.dark .input-dt,
.dark input[type="datetime-local"]{
  background: var(--surface-2, #101922);
  border-color: var(--border, #223041);
  color: var(--text, #e5e7eb);
}

/* Hover & focus */
.input-dt:hover,
input[type="datetime-local"]:hover{
  border-color: var(--border-strong, #d1d5db);
}
.input-dt:focus,
input[type="datetime-local"]:focus{
  border-color: color-mix(in oklab, var(--primary, #137fec) 60%, #0000);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary, #137fec) 20%, #0000);
}

/* Placeholder color (when supported) */
.input-dt::placeholder,
input[type="datetime-local"]::placeholder{
  color: var(--muted, #6b7280);
  opacity: .9;
}

/* Disable spinners for a cleaner look (Chrome) */
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-clear-button{
  display: none;
}

/* Tidy the editable parts (Chrome/Safari) */
input[type="datetime-local"]::-webkit-datetime-edit{
  padding: 0;
}
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper{
  display: inline-flex;
  gap: 2px;
}
input[type="datetime-local"]::-webkit-datetime-edit-text{
  opacity: .65;
}
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field{
  padding: 0 1px;
  border-radius: 6px;
}
input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus{
  background: color-mix(in oklab, var(--primary, #137fec) 10%, transparent);
  color: inherit;
}

/* Picker "icon" area (Chrome/Safari) — make it clickable & subtle */
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  position: relative;
  inline-size: 18px;
  block-size: 18px;
  margin-inline-end: 8px;
  opacity: .7;
  cursor: pointer;
  filter: grayscale(0.1);
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{
  opacity: 1;
}

/* Firefox: ensure calendar icon is visible on dark backgrounds */
@-moz-document url-prefix(){
  input[type="datetime-local"]{
    padding-inline-end: 10px; /* FF doesn’t overlay indicator */
  }
}

/* Disabled / read-only states */
input[type="datetime-local"]:disabled,
.input-dt:disabled{
  background: color-mix(in oklab, var(--surface, #fff) 80%, #0000);
  color: var(--muted, #6b7280);
  cursor: not-allowed;
  opacity: .8;
}
input[type="datetime-local"][readonly]{
  background: color-mix(in oklab, var(--surface, #fff) 92%, #0000);
}

/* Invalid state (native constraint validation) */
input[type="datetime-local"]:invalid{
  border-color: color-mix(in oklab, var(--red, #ef4444) 65%, #0000);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--red, #ef4444) 18%, #0000);
}

/* Size helpers to match your UI when needed */
.input-dt--sm{ block-size: 36px; font-size: 14px; }
.input-dt--lg{ block-size: 44px; font-size: 16px; }

/* If placed in a tight grid, avoid shrinking text */
.input-dt, input[type="datetime-local"]{ min-width: 0; }






/* Chart containers */
.chart-box{
  position: relative;
  width: 100%;
  height: 260px;          /* <- control chart height here */
}
@media (max-width: 640px){
  .chart-box{ height: 220px; }
}

/* Make canvas fill its box without growing the layout */
.chart-box > canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}






/* KPI variants */
.card.kpi{
  --kpi:#64748b;                 /* default */
  --kpi-ink: var(--kpi);
  --kpi-soft: color-mix(in oklab, var(--kpi) 12%, #fff);
  --kpi-ring: color-mix(in oklab, var(--kpi) 30%, transparent);
  border-color: var(--kpi-ring);
  background:
    linear-gradient(180deg, var(--kpi-soft), transparent 60%)
    , color-mix(in oklab, var(--bg-elev) 92%, transparent);
}
.dark .card.kpi{
  --kpi-soft: color-mix(in oklab, var(--kpi) 18%, #0000);
}

/* Icon chip in the top-right */
.kpi__icon{
  inline-size: 36px; block-size: 36px;
  border-radius: 10px;
  display:grid; place-items:center;
  background: color-mix(in oklab, var(--kpi) 16%, #fff);
  color: var(--kpi-ink);
  border: 1px solid var(--kpi-ring);
}

/* Titles & numbers get a tint */
.kpi .xs.muted{ color: color-mix(in oklab, var(--kpi) 38%, var(--text-weak, #6b7280)); }
.kpi .metric-ink{ color: var(--kpi-ink); }

/* Variants */
.kpi--total { --kpi:#6366f1; }   /* indigo */
.kpi--open  { --kpi:#3b82f6; }   /* blue */
.kpi--closed{ --kpi:#10b981; }   /* green */
.kpi--due   { --kpi:#f59e0b; }   /* amber */

/* Optional: escalate “Due Soon” if there are any */
.kpi--due-danger{ --kpi:#ef4444; } /* red */