/* Statikz CRM — utility CSS (Tailwind-compatible subset, hand-tuned).
   No build step required. Add classes here when you need new ones. */

*, *::before, *::after { box-sizing: border-box; border: 0 solid #e2e8f0; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Host Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; color: #121212; }
h1, h2, h3, h4, h5, h6 { font-family: 'Host Grotesk', inherit; font-weight: 600; letter-spacing: -0.01em; color: #121212; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: transparent; padding: 0; }
table { border-collapse: collapse; }
code, pre { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
:focus-visible { outline: 2px solid #61CE70; outline-offset: 2px; }

/* -- Color palette ---------------------------------------------------- */
:root {
    --slate-50:#f8fafc;  --slate-100:#f1f5f9;  --slate-200:#e2e8f0;  --slate-300:#cbd5e1;
    --slate-400:#94a3b8; --slate-500:#64748b;  --slate-600:#475569;  --slate-700:#334155;
    --slate-800:#1f1f1f; --slate-900:#121212;
    --red-50:#fef2f2;    --red-100:#fee2e2;    --red-200:#fecaca;    --red-300:#fca5a5;
    --red-600:#dc2626;   --red-700:#b91c1c;    --red-800:#991b1b;    --red-900:#7f1d1d;
    --amber-50:#fffbeb;  --amber-100:#fef3c7;  --amber-200:#fde68a;  --amber-300:#fcd34d;
    --amber-700:#b45309; --amber-800:#92400e;  --amber-900:#78350f;
    /* Statikz brand green (replaces Tailwind emerald) */
    --emerald-50:#eafbef;  --emerald-100:#d2f5dc; --emerald-200:#a5ebb6; --emerald-300:#7ee098;
    --emerald-500:#61CE70; --emerald-600:#3fb352;--emerald-700:#2c8f3d; --emerald-800:#1f6a2c;
    /* Statikz neutrals */
    --ink:#121212; --ink-muted:#7A7A7A;
    --sky-50:#f0f9ff;    --sky-100:#e0f2fe;    --sky-200:#bae6fd;    --sky-700:#0369a1; --sky-800:#075985;
    --blue-100:#dbeafe;  --blue-700:#1d4ed8;   --blue-800:#1e40af;
    --indigo-100:#e0e7ff;--indigo-700:#4338ca; --indigo-800:#3730a3;
    --purple-100:#f3e8ff;--purple-700:#7e22ce; --purple-800:#6b21a8;
    --orange-100:#ffedd5;--orange-700:#c2410c; --orange-800:#9a3412;
    --green-100:#dcfce7; --green-700:#15803d;  --green-800:#166534;
}

/* -- Layout ----------------------------------------------------------- */
.min-h-screen{min-height:100vh}.h-screen{height:100vh}.w-full{width:100%}.h-full{height:100%}
.w-1{width:.25rem}.w-2{width:.5rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}
.w-10{width:2.5rem}.w-32{width:8rem}.w-40{width:10rem}.w-48{width:12rem}.w-60{width:15rem}.w-64{width:16rem}.w-72{width:18rem}.w-80{width:20rem}.w-96{width:24rem}
.h-1{height:.25rem}.h-2{height:.5rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-10{height:2.5rem}.h-48{height:12rem}
.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-\[1400px\]{max-width:1400px}
.min-w-0{min-width:0}
.flex{display:flex}.inline-flex{display:inline-flex}.inline{display:inline}.inline-block{display:inline-block}.block{display:block}.hidden{display:none}.grid{display:grid}.table{display:table}
.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}
.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.col-span-2{grid-column:span 2 / span 2}.col-span-3{grid-column:span 3 / span 3}.col-span-full{grid-column:1/-1}

/* spacing */
.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}
.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-3{padding-left:.75rem}.pr-3{padding-right:.75rem}
.m-0{margin:0}.m-2{margin:.5rem}.m-4{margin:1rem}
.mx-auto{margin-left:auto;margin-right:auto}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}
.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.space-y-1>*+*{margin-top:.25rem}.space-y-2>*+*{margin-top:.5rem}.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}.space-y-6>*+*{margin-top:1.5rem}
.space-x-2>*+*{margin-left:.5rem}.space-x-3>*+*{margin-left:.75rem}
.divide-y>*+*{border-top:1px solid var(--slate-200)}

/* -- Position --------------------------------------------------------- */
.relative{position:relative}.absolute{position:absolute}.sticky{position:sticky}.fixed{position:fixed}
.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.inset-0{top:0;right:0;bottom:0;left:0}
.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}

/* -- Type ------------------------------------------------------------- */
.text-\[10px\]{font-size:10px;line-height:1.4}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}
.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}
.leading-tight{line-height:1.25}.leading-snug{line-height:1.375}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}
.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* color classes (foreground) */
.text-white{color:#fff}.text-slate-100{color:var(--slate-100)}.text-slate-200{color:var(--slate-200)}.text-slate-300{color:var(--slate-300)}.text-slate-400{color:var(--slate-400)}.text-slate-500{color:var(--slate-500)}.text-slate-600{color:var(--slate-600)}.text-slate-700{color:var(--slate-700)}.text-slate-800{color:var(--slate-800)}.text-slate-900{color:var(--slate-900)}
.text-red-600{color:var(--red-600)}.text-red-700{color:var(--red-700)}.text-red-800{color:var(--red-800)}
.text-amber-700{color:var(--amber-700)}.text-amber-800{color:var(--amber-800)}.text-amber-900{color:var(--amber-900)}
.text-emerald-600{color:var(--emerald-600)}.text-emerald-700{color:var(--emerald-700)}.text-emerald-800{color:var(--emerald-800)}
.text-sky-700{color:var(--sky-700)}.text-sky-800{color:var(--sky-800)}
.text-blue-700{color:var(--blue-700)}.text-blue-800{color:var(--blue-800)}
.text-indigo-700{color:var(--indigo-700)}.text-indigo-800{color:var(--indigo-800)}
.text-purple-700{color:var(--purple-700)}.text-purple-800{color:var(--purple-800)}
.text-orange-700{color:var(--orange-700)}.text-orange-800{color:var(--orange-800)}
.text-green-700{color:var(--green-700)}.text-green-800{color:var(--green-800)}

/* color classes (background) */
.bg-white{background:#fff}.bg-slate-50{background:var(--slate-50)}.bg-slate-100{background:var(--slate-100)}.bg-slate-200{background:var(--slate-200)}.bg-slate-300{background:var(--slate-300)}.bg-slate-800{background:var(--slate-800)}.bg-slate-900{background:var(--slate-900)}
.bg-red-50{background:var(--red-50)}.bg-red-100{background:var(--red-100)}.bg-red-600{background:var(--red-600)}.bg-red-700{background:var(--red-700)}
.bg-amber-50{background:var(--amber-50)}.bg-amber-100{background:var(--amber-100)}.bg-amber-300{background:var(--amber-300)}
.bg-emerald-50{background:var(--emerald-50)}.bg-emerald-100{background:var(--emerald-100)}.bg-emerald-400{background:#34d399}.bg-emerald-500{background:var(--emerald-500)}.bg-emerald-600{background:var(--emerald-600)}.bg-emerald-700{background:var(--emerald-700)}
.bg-sky-50{background:var(--sky-50)}.bg-sky-100{background:var(--sky-100)}
.bg-blue-100{background:var(--blue-100)}
.bg-indigo-100{background:var(--indigo-100)}
.bg-purple-100{background:var(--purple-100)}
.bg-orange-100{background:var(--orange-100)}
.bg-green-100{background:var(--green-100)}
.bg-slate-600{background:var(--slate-600)}

/* borders */
.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-l-4{border-left-width:4px}
.border-slate-200{border-color:var(--slate-200)}.border-slate-300{border-color:var(--slate-300)}.border-slate-400{border-color:var(--slate-400)}.border-slate-700{border-color:var(--slate-700)}.border-slate-800{border-color:var(--slate-800)}
.border-red-200{border-color:var(--red-200)}.border-red-300{border-color:var(--red-300)}
.border-emerald-200{border-color:var(--emerald-200)}.border-emerald-500{border-color:var(--emerald-500)}.border-emerald-600{border-color:var(--emerald-600)}
.border-amber-200{border-color:var(--amber-200)}.border-amber-300{border-color:var(--amber-300)}
.border-sky-200{border-color:var(--sky-200)}
.border-dashed{border-style:dashed}

.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-full{border-radius:9999px}
.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem}

/* shadows */
.shadow-sm{box-shadow:0 1px 2px rgb(0 0 0 / .05)}
.shadow{box-shadow:0 1px 3px rgb(0 0 0 / .1),0 1px 2px rgb(0 0 0 / .06)}
.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1)}

/* overflow */
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-auto{overflow:auto}

/* cursors / pointer */
.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}
.pointer-events-none{pointer-events:none}

/* opacity */
.opacity-50{opacity:.5}.opacity-75{opacity:.75}

/* hover/focus */
.hover\:bg-slate-50:hover{background:var(--slate-50)}
.hover\:bg-slate-100:hover{background:var(--slate-100)}
.hover\:bg-slate-200:hover{background:var(--slate-200)}
.hover\:bg-slate-800:hover{background:var(--slate-800)}
.hover\:bg-red-50:hover{background:var(--red-50)}
.hover\:bg-red-700:hover{background:var(--red-700)}
.hover\:bg-emerald-50:hover{background:var(--emerald-50)}
.hover\:bg-emerald-700:hover{background:var(--emerald-700)}
.hover\:underline:hover{text-decoration:underline}
.hover\:text-slate-900:hover{color:var(--slate-900)}
.hover\:text-white:hover{color:#fff}
.hover\:bg-slate-800:hover{background:var(--slate-800)}
.hover\:border-slate-400:hover{border-color:var(--slate-400)}
.focus\:outline-none:focus{outline:none}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--emerald-500)}
.focus\:ring-emerald-500:focus{box-shadow:0 0 0 2px var(--emerald-500)}
.focus\:border-emerald-500:focus{border-color:var(--emerald-500)}

/* tables */
table.tbl { width:100%; }
table.tbl th { text-align:left; font-weight:600; color:var(--slate-600); background:var(--slate-50); padding:.5rem .75rem; border-bottom:1px solid var(--slate-200); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
table.tbl td { padding:.625rem .75rem; border-bottom:1px solid var(--slate-100); font-size:.875rem; vertical-align:middle; }
table.tbl tr:hover td { background:var(--slate-50); }

/* clickable rows */
table.tbl-rows tbody tr.row-link { cursor: pointer; }
table.tbl-rows tbody tr.row-link:hover td { background: var(--slate-50); }
table.tbl-rows tbody tr.row-link:hover .row-open { opacity: 1; }
.row-open {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 9999px;
    color: var(--slate-400); font-size: 1.125rem; line-height: 1;
    opacity: .35; transition: opacity .12s, color .12s, background-color .12s;
}
.row-open:hover { color: var(--emerald-700); background: var(--emerald-50, #ecfdf5); opacity: 1 !important; }

/* sortable column headers */
.th-sort {
    display: inline-flex; align-items: center; gap: .25rem;
    color: inherit; text-decoration: none;
    padding: 0; cursor: pointer;
}
.th-sort:hover { color: var(--slate-900); }
.th-sort-arrow { font-size: .65rem; opacity: .4; }
.th-sort-active { color: var(--emerald-700); }
.th-sort-active .th-sort-arrow { opacity: 1; }

/* checkbox hit-target */
.check-hit { display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; cursor: pointer; border-radius: .25rem; }
.check-hit:hover { background: var(--slate-100); }
.cell-checkbox { padding: .25rem .25rem; }

/* inline editable cells — subtle "click to edit" hint */
.inline-edit-cell {
    width: auto !important; min-width: 6rem; max-width: 10rem;
    padding: .25rem .5rem !important;
    font-size: .8125rem !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: .25rem !important;
    transition: border-color .12s, background-color .12s;
}
.inline-edit-cell:hover { border-color: var(--slate-300) !important; background: #fff !important; }
.inline-edit-cell:focus { border-color: var(--emerald-500) !important; background: #fff !important; }
select.inline-edit-cell { padding-right: 1.25rem !important; }

/* badges */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:9999px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.badge-slate{background:var(--slate-100);color:var(--slate-700)}
.badge-blue{background:var(--blue-100);color:var(--blue-800)}
.badge-indigo{background:var(--indigo-100);color:var(--indigo-800)}
.badge-purple{background:var(--purple-100);color:var(--purple-800)}
.badge-amber{background:var(--amber-100);color:var(--amber-800)}
.badge-orange{background:var(--orange-100);color:var(--orange-800)}
.badge-green{background:var(--green-100);color:var(--green-800)}
.badge-red{background:var(--red-100);color:var(--red-800)}

/* form controls */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=tel],input[type=search],input[type=datetime-local],input[type=date],input[type=time],select,textarea{
    appearance:none;background:#fff;border:1px solid var(--slate-300);border-radius:.375rem;padding:.5rem .75rem;font-size:.875rem;width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--emerald-500);box-shadow:0 0 0 3px rgb(16 185 129 / .15)}
input[type=checkbox],input[type=radio]{width:1rem;height:1rem;accent-color:var(--emerald-600)}

/* buttons (semantic) */
.btn{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;border-radius:.375rem;font-size:.875rem;font-weight:500;border:1px solid transparent;transition:background-color .12s}
.btn-primary{background:var(--emerald-600);color:#fff}.btn-primary:hover{background:var(--emerald-700)}
.btn-secondary{background:#fff;color:var(--slate-700);border-color:var(--slate-300)}.btn-secondary:hover{background:var(--slate-50)}
.btn-danger{background:#fff;color:var(--red-700);border-color:var(--red-300)}.btn-danger:hover{background:var(--red-50)}
.btn-dark{background:var(--slate-900);color:#fff}.btn-dark:hover{background:var(--slate-800)}
.btn-sm{padding:.375rem .625rem;font-size:.75rem}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgb(15 23 42 / .5);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}
.modal-panel{background:#fff;border-radius:.5rem;max-width:42rem;width:100%;max-height:90vh;overflow:auto;box-shadow:0 25px 50px -12px rgb(0 0 0 / .25)}

/* responsive */
@media (min-width:640px){
    .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .sm\:flex-row{flex-direction:row}
}
@media (min-width:768px){
    .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .md\:col-span-2{grid-column:span 2 / span 2}
    .md\:col-span-3{grid-column:span 3 / span 3}
    .md\:flex{display:flex}
    .md\:hidden{display:none}
}
@media (min-width:1024px){
    .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .lg\:col-span-2{grid-column:span 2 / span 2}
    .lg\:flex{display:flex}
}

/* pipeline column color helpers (server emits class names from config pipeline_statuses) */
.dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;background:var(--slate-400)}
.dot-slate{background:var(--slate-400)}.dot-blue{background:#3b82f6}.dot-indigo{background:#6366f1}.dot-purple{background:#a855f7}.dot-amber{background:#f59e0b}.dot-orange{background:#f97316}.dot-green{background:#10b981}.dot-red{background:#ef4444}

/* prose-ish content (for TXT viewer / email body) */
.prose{font-size:.875rem;color:var(--slate-700);line-height:1.65}
.prose p{margin:0 0 .75rem}
.prose pre{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:.375rem;padding:.75rem;white-space:pre-wrap;word-wrap:break-word;font-size:.8rem;line-height:1.55}
.prose a{color:var(--emerald-700);text-decoration:underline}

/* small icon dot */
.dot-active{background:var(--emerald-500)}

/* ============================================================
   Dark mode — activated by `data-theme="dark"` on <html>
   ============================================================ */

:root {
    --page-bg:    #f8fafc;
    --surface-1:  #ffffff;
    --surface-2:  #f1f5f9;
    --surface-3:  #e2e8f0;
    --text-1:     #1e293b;
    --text-2:     #475569;
    --text-3:     #64748b;
    --text-mute:  #94a3b8;
    --border-1:   #e2e8f0;
    --border-2:   #cbd5e1;
    --sidebar-bg: #0f172a;
    --shadow-rgb: 0 0 0;
}

html[data-theme="dark"] {
    --page-bg:    #0a0a0a;
    --surface-1:  #161616;
    --surface-2:  #1f1f1f;
    --surface-3:  #2a2a2a;
    --text-1:     #fafafa;
    --text-2:     #d4d4d4;
    --text-3:     #a3a3a3;
    --text-mute:  #737373;
    --border-1:   #262626;
    --border-2:   #3f3f3f;
    --sidebar-bg: #000000;
    --shadow-rgb: 0 0 0;
    color-scheme: dark;
}
html[data-theme="dark"] body { color: var(--text-1); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--text-1); }
html[data-theme="dark"] table.tbl th { background: #1a1a1a; color: #a3a3a3; }
html[data-theme="dark"] aside.bg-slate-900 { background: #000 !important; border-right-color: #1a1a1a; }
html[data-theme="dark"] aside.bg-slate-900 a:hover { background: #1a1a1a !important; }
html[data-theme="dark"] .bg-white.border-slate-200 { border-color: var(--border-1); }
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=url],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=datetime-local],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=time],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { border-color: var(--border-2); background: var(--surface-2); }

/* Body + base text */
html[data-theme="dark"] body { background: var(--page-bg); color: var(--text-1); }

/* Surfaces */
html[data-theme="dark"] .bg-white        { background-color: var(--surface-1) !important; }
html[data-theme="dark"] .bg-slate-50     { background-color: var(--page-bg)   !important; }
html[data-theme="dark"] .bg-slate-100    { background-color: var(--surface-2) !important; }
html[data-theme="dark"] .bg-slate-200    { background-color: var(--surface-3) !important; }
html[data-theme="dark"] .bg-slate-900    { background-color: var(--sidebar-bg) !important; }
html[data-theme="dark"] .bg-slate-800    { background-color: #1e293b !important; }
html[data-theme="dark"] aside.bg-slate-900 { background: var(--sidebar-bg) !important; }

/* Text */
html[data-theme="dark"] .text-slate-900  { color: #f1f5f9 !important; }
html[data-theme="dark"] .text-slate-800  { color: var(--text-1) !important; }
html[data-theme="dark"] .text-slate-700  { color: var(--text-2) !important; }
html[data-theme="dark"] .text-slate-600  { color: var(--text-2) !important; }
html[data-theme="dark"] .text-slate-500  { color: var(--text-3) !important; }
html[data-theme="dark"] .text-slate-400  { color: var(--text-mute) !important; }
html[data-theme="dark"] .text-slate-300  { color: #94a3b8 !important; }

/* Borders */
html[data-theme="dark"] .border          { border-color: var(--border-1); }
html[data-theme="dark"] .border-slate-200 { border-color: var(--border-1) !important; }
html[data-theme="dark"] .border-slate-300 { border-color: var(--border-2) !important; }
html[data-theme="dark"] .border-slate-800 { border-color: #1e293b !important; }

/* Sidebar nav active state */
html[data-theme="dark"] aside .hover\:bg-slate-800:hover { background: #1e293b !important; }

/* Hover overrides */
html[data-theme="dark"] .hover\:bg-slate-50:hover  { background: var(--surface-2) !important; }
html[data-theme="dark"] .hover\:bg-slate-100:hover { background: var(--surface-2) !important; }
html[data-theme="dark"] .hover\:bg-slate-200:hover { background: var(--surface-3) !important; }

/* Form controls */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=url],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=datetime-local],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=time],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--surface-2);
    border-color: var(--border-2);
    color: var(--text-1);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus { border-color: var(--emerald-500); box-shadow: 0 0 0 3px rgb(16 185 129 / .25); }
html[data-theme="dark"] ::placeholder   { color: var(--text-mute); }

/* Tables */
html[data-theme="dark"] table.tbl th       { background: var(--surface-2); color: var(--text-3); border-bottom-color: var(--border-1); }
html[data-theme="dark"] table.tbl td       { border-bottom-color: var(--border-1); color: var(--text-1); }
html[data-theme="dark"] table.tbl tr:hover td { background: var(--surface-2); }
html[data-theme="dark"] table.tbl tr.kbd-active td { background: rgb(16 185 129 / .15) !important; box-shadow: inset 4px 0 0 var(--emerald-500); }

/* Clickable rows (dark) */
html[data-theme="dark"] table.tbl-rows tbody tr.row-link:hover td { background: var(--surface-2); }
html[data-theme="dark"] .row-open { color: var(--text-mute); }
html[data-theme="dark"] .row-open:hover { color: #6ee7b7; background: rgb(16 185 129 / .15); }

/* Sortable headers (dark) */
html[data-theme="dark"] .th-sort:hover { color: var(--text-1); }
html[data-theme="dark"] .th-sort-active { color: #6ee7b7; }

/* Checkbox hit-target (dark) */
html[data-theme="dark"] .check-hit:hover { background: var(--surface-3); }

/* Inline edit cells (dark) */
html[data-theme="dark"] .inline-edit-cell:hover { border-color: var(--border-2) !important; background: var(--surface-2) !important; }
html[data-theme="dark"] .inline-edit-cell:focus { background: var(--surface-2) !important; }

/* Buttons */
html[data-theme="dark"] .btn-secondary { background: var(--surface-2); color: var(--text-1); border-color: var(--border-2); }
html[data-theme="dark"] .btn-secondary:hover { background: var(--surface-3); }
html[data-theme="dark"] .btn-dark      { background: var(--surface-3); color: var(--text-1); }
html[data-theme="dark"] .btn-dark:hover{ background: var(--border-2); }

/* Modal */
html[data-theme="dark"] .modal-panel    { background: var(--surface-1); color: var(--text-1); }
html[data-theme="dark"] .modal-backdrop { background: rgb(0 0 0 / .7); }

/* Badges — soften so they don't glow */
html[data-theme="dark"] .badge-slate   { background: #334155; color: #cbd5e1; }
html[data-theme="dark"] .badge-blue    { background: rgb(59 130 246 / .2);  color: #93c5fd; }
html[data-theme="dark"] .badge-indigo  { background: rgb(99 102 241 / .2);  color: #a5b4fc; }
html[data-theme="dark"] .badge-purple  { background: rgb(168 85 247 / .2);  color: #d8b4fe; }
html[data-theme="dark"] .badge-amber   { background: rgb(245 158 11 / .2);  color: #fcd34d; }
html[data-theme="dark"] .badge-orange  { background: rgb(249 115 22 / .2);  color: #fdba74; }
html[data-theme="dark"] .badge-green   { background: rgb(16 185 129 / .2);  color: #6ee7b7; }
html[data-theme="dark"] .badge-red     { background: rgb(239 68 68 / .2);   color: #fca5a5; }

/* Flash messages — soften light tints */
html[data-theme="dark"] .bg-emerald-50 { background: rgb(16 185 129 / .12) !important; }
html[data-theme="dark"] .text-emerald-800 { color: #6ee7b7 !important; }
html[data-theme="dark"] .border-emerald-200 { border-color: rgb(16 185 129 / .3) !important; }
html[data-theme="dark"] .bg-red-50     { background: rgb(239 68 68 / .12) !important; }
html[data-theme="dark"] .text-red-800  { color: #fca5a5 !important; }
html[data-theme="dark"] .border-red-200,
html[data-theme="dark"] .border-red-300 { border-color: rgb(239 68 68 / .3) !important; }
html[data-theme="dark"] .bg-amber-50   { background: rgb(245 158 11 / .12) !important; }
html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-amber-900 { color: #fcd34d !important; }
html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-amber-300 { border-color: rgb(245 158 11 / .3) !important; }
html[data-theme="dark"] .bg-sky-50     { background: rgb(56 189 248 / .12) !important; }
html[data-theme="dark"] .text-sky-800,
html[data-theme="dark"] .text-sky-700  { color: #7dd3fc !important; }
html[data-theme="dark"] .border-sky-200 { border-color: rgb(56 189 248 / .3) !important; }

/* Prose / code / pre */
html[data-theme="dark"] .prose         { color: var(--text-2); }
html[data-theme="dark"] .prose pre     { background: #0b1220; border-color: var(--border-1); color: var(--text-1); }
html[data-theme="dark"] code           { background: #0b1220; color: #fcd34d; padding: 1px 4px; border-radius: 3px; }

/* Kanban */
html[data-theme="dark"] .kanban-col > div:first-child { background: var(--surface-2); }

/* ============================================================
   Statikz brand tweaks — match statikz.agency look
   ============================================================ */

/* Form labels use mono caps for that Statikz signature look */
label.statikz-label,
.tag-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
}

/* Sidebar darker + brand colored active nav indicator */
aside.bg-slate-900 {
    background: #121212 !important;
    color: #fafafa;
    border-right: 1px solid #1f1f1f;
}
aside.bg-slate-900 .text-slate-100 { color: #fafafa; }
aside.bg-slate-900 .border-slate-800 { border-color: #1f1f1f !important; }
aside.bg-slate-900 a:hover { background: #1f1f1f !important; }
aside.bg-slate-900 .bg-emerald-400 { background: #61CE70 !important; }

/* Primary buttons — slightly more squared (Statikz uses less rounded) */
.btn-primary { background: #61CE70; color: #fff; font-weight: 600; }
.btn-primary:hover { background: #3fb352; }
.btn-dark { background: #121212; color: #fff; font-weight: 600; }
.btn-dark:hover { background: #1f1f1f; }
.btn { border-radius: .375rem; transition: background-color .15s, transform .05s; }
.btn:active { transform: translateY(1px); }

/* Strong heading on cards */
h1, h2, h3 { color: var(--ink); }

/* Section labels (the uppercase tracking-wider ones) — use mono */
.uppercase.tracking-wider,
.uppercase.tracking-widest {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.06em;
}

/* Inputs */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=tel],input[type=search],input[type=datetime-local],input[type=date],input[type=time],select,textarea{
    border-radius: .375rem;
    border-color: #e5e5e5;
}
input:focus,select:focus,textarea:focus { border-color: #61CE70; box-shadow: 0 0 0 3px rgb(97 206 112 / .25); }

/* Tables — Statikz feel */
table.tbl th {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: #7A7A7A;
    background: #fafafa;
}

/* Badges with stronger contrast */
.badge {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.05em;
}

/* Card borders — slightly more visible */
.bg-white.border-slate-200 { border-color: #ececec; }

/* Sidebar nav: brand-green pill for active */
aside.bg-slate-900 .bg-slate-800.text-white {
    background: #1f1f1f !important;
    box-shadow: inset 3px 0 0 #61CE70;
}

/* Theme color for dark sidebar text active dot */
aside.bg-slate-900 .bg-emerald-400 { background: #61CE70 !important; }

/* Replace "slate" 700-color text used in form labels (mostly secondary) */
.text-slate-700 { color: #4a4a4a; }

/* ============================================================
   Mobile sidebar / drawer
   ============================================================ */
.sidebar-overlay {
    position: fixed; inset: 0; background: rgb(0 0 0 / .5);
    z-index: 39; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.sidebar-overlay.open { opacity: 1; pointer-events: auto; }
body.no-scroll { overflow: hidden; }

@media (max-width: 767px) {
    .sidebar-aside {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
        transform: translateX(-100%); transition: transform .2s ease-out;
        width: 260px; max-width: 80vw;
    }
    .sidebar-aside.open { transform: translateX(0); }
}

/* ============================================================
   Toast notifications
   ============================================================ */
.toasts-container {
    position: fixed; top: 1rem; right: 1rem; z-index: 60;
    display: flex; flex-direction: column; gap: .5rem; pointer-events: none;
    max-width: calc(100vw - 2rem);
}
.toast {
    pointer-events: auto;
    background: #fff; color: var(--text-1, #1e293b);
    border: 1px solid var(--border-1, #e2e8f0);
    border-left: 4px solid var(--slate-400);
    border-radius: 8px; padding: .75rem 1rem; min-width: 280px; max-width: 420px;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / .15), 0 6px 10px -5px rgb(0 0 0 / .08);
    display: flex; align-items: center; gap: .75rem;
    font-size: .875rem; line-height: 1.4;
    transform: translateX(120%); opacity: 0; transition: transform .25s, opacity .25s;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast button { color: var(--text-3, #94a3b8); font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.toast button:hover { color: var(--text-1, #1e293b); }
.toast-success { border-left-color: #10b981; }
.toast-error   { border-left-color: #ef4444; }
.toast-warning { border-left-color: #f59e0b; }
.toast-info    { border-left-color: #3b82f6; }
html[data-theme="dark"] .toast { background: var(--surface-1); border-color: var(--border-1); color: var(--text-1); }

/* ============================================================
   Tables — auto-wrap in horizontal scroll on small screens
   ============================================================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   Command palette
   ============================================================ */
.cmdk-backdrop {
    position: fixed; inset: 0; background: rgb(0 0 0 / .5);
    z-index: 55; display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh; padding-left: 1rem; padding-right: 1rem;
}
.cmdk-panel {
    width: 100%; max-width: 600px; background: #fff;
    border: 1px solid var(--border-1, #e2e8f0); border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
    overflow: hidden; display: flex; flex-direction: column;
}
.cmdk-panel input {
    width: 100%; border: 0 !important; padding: 1rem 1.25rem;
    font-size: 1rem; outline: none !important; box-shadow: none !important;
    border-bottom: 1px solid var(--border-1, #e2e8f0) !important;
    border-radius: 0;
}
.cmdk-results { max-height: 420px; overflow-y: auto; }
.cmdk-item {
    padding: .625rem 1rem; cursor: pointer; display: flex; align-items: baseline; gap: .5rem;
    border-bottom: 1px solid #f5f5f5;
}
.cmdk-item.active { background: #f1f5f9; }
.cmdk-item .cmdk-type {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase;
    color: #7A7A7A; padding: 2px 6px; background: #f5f5f5; border-radius: 4px; letter-spacing: .04em;
}
.cmdk-item .cmdk-title { font-weight: 500; color: var(--ink, #121212); }
.cmdk-item .cmdk-sub { color: #7A7A7A; font-size: .8125rem; margin-left: auto; }
.cmdk-footer {
    padding: .5rem 1rem; border-top: 1px solid var(--border-1, #e2e8f0);
    display: flex; gap: 1rem; font-size: .75rem; color: #7A7A7A;
}
.cmdk-footer kbd {
    padding: 1px 5px; border: 1px solid #d4d4d4; border-radius: 3px;
    background: #fafafa; font-family: 'JetBrains Mono', monospace; font-size: 10px;
}

html[data-theme="dark"] .cmdk-panel { background: var(--surface-1); border-color: var(--border-1); }
html[data-theme="dark"] .cmdk-panel input { background: var(--surface-1); color: var(--text-1); border-bottom-color: var(--border-1) !important; }
html[data-theme="dark"] .cmdk-item { border-bottom-color: var(--border-1); }
html[data-theme="dark"] .cmdk-item.active { background: var(--surface-2); }
html[data-theme="dark"] .cmdk-item .cmdk-type { background: var(--surface-2); color: var(--text-3); }
html[data-theme="dark"] .cmdk-item .cmdk-title { color: var(--text-1); }
html[data-theme="dark"] .cmdk-footer { border-top-color: var(--border-1); }
html[data-theme="dark"] .cmdk-footer kbd { background: var(--surface-2); border-color: var(--border-2); color: var(--text-2); }

/* Bulk-action bar — wraps on small screens */
@media (max-width: 767px) {
    #bulk-actions select, #bulk-actions input[type=text] {
        width: 100% !important; min-width: 0;
    }
    #bulk-actions { width: 100%; flex-wrap: wrap; }
}

/* Header actions wrap on small screens */
@media (max-width: 640px) {
    header .btn { padding: .375rem .625rem; font-size: .75rem; }
}

/* Kanban — make columns stack-friendly */
@media (max-width: 640px) {
    .kanban-col { width: 80vw !important; max-width: 280px; }
}

/* Theme toggle button */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px;
    color: #cbd5e1; transition: background .15s, color .15s;
}
.theme-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
.theme-toggle svg { width: 18px; height: 18px; }
html[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }


/* ============================================================
   v2 — Taskplus-inspired dark refresh
   Refines dark-theme palette, sidebar, kanban, cards.
   ============================================================ */

/* Tighter, more contemporary dark palette */
html[data-theme="dark"] {
    --page-bg:    #0d0d0d;
    --surface-1:  #161616;       /* card */
    --surface-2:  #1c1c1c;       /* slightly elevated */
    --surface-3:  #232323;       /* hover */
    --border-1:   #1f1f1f;       /* very subtle */
    --border-2:   #2a2a2a;
    --sidebar-bg: #131313;
    --text-1:     #f5f5f5;
    --text-2:     #c4c4c4;
    --text-3:     #8a8a8a;
    --text-mute:  #5e5e5e;
}

/* Body padding so sidebar+content "float" on the page bg (Taskplus look) */
html[data-theme="dark"] body { background: #060606; }
html[data-theme="dark"] .flex.min-h-screen {
    padding: 12px;
    gap: 12px;
    min-height: 100vh;
    background: #060606;
}

/* Sidebar: rounded outer, integrated look */
html[data-theme="dark"] aside.sidebar-aside {
    background: var(--sidebar-bg) !important;
    border-radius: 18px;
    border: 1px solid var(--border-1);
    box-shadow: 0 0 0 1px rgba(255,255,255,.02);
    padding: .25rem;
}
html[data-theme="dark"] aside.sidebar-aside > div:first-child {
    border-bottom-color: var(--border-1) !important;
}

/* Sidebar nav items — subtle hover, rounded pill active state */
html[data-theme="dark"] aside nav a {
    border-radius: 10px;
    padding: .55rem .75rem;
    margin: 1px 0;
    color: var(--text-3) !important;
    font-weight: 500;
    transition: background .12s, color .12s;
}
html[data-theme="dark"] aside nav a:hover {
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
}
html[data-theme="dark"] aside nav a.bg-slate-800 {  /* active */
    background: var(--surface-3) !important;
    color: var(--text-1) !important;
    box-shadow: inset 0 0 0 1px var(--border-2);
}
/* Hide the original tiny dot indicators on dark — too noisy with new design */
html[data-theme="dark"] aside nav a > span.w-1 { display: none; }

/* Section labels in sidebar */
html[data-theme="dark"] aside nav .text-\[10px\].uppercase {
    color: var(--text-mute) !important;
    font-weight: 600;
    letter-spacing: .08em;
    padding-left: .75rem;
}

/* Sidebar footer (user + logout) */
html[data-theme="dark"] aside > div:last-child {
    border-top-color: var(--border-1) !important;
}
html[data-theme="dark"] aside > div:last-child a,
html[data-theme="dark"] aside > div:last-child button {
    border-radius: 10px;
}

/* Main content: rounded inner panel matching the sidebar */
html[data-theme="dark"] main {
    background: var(--surface-1);
    border-radius: 18px;
    border: 1px solid var(--border-1);
    overflow: hidden;
}
html[data-theme="dark"] main > header.sticky {
    background: var(--surface-1) !important;
    border-bottom-color: var(--border-1) !important;
    padding: 1.25rem 1.5rem;
}
html[data-theme="dark"] main > header.sticky h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.02em;
}
html[data-theme="dark"] main > div.p-4 {
    padding: 1.5rem;
}

/* Cards / panels — subtler borders, bigger radius */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white.border-slate-200 {
    background-color: var(--surface-2) !important;
    border-color: var(--border-1) !important;
    border-radius: 12px !important;
}

/* Headings get a bit more weight + larger in dark */
html[data-theme="dark"] h1 { font-weight: 600; letter-spacing: -.02em; }
html[data-theme="dark"] h2 { font-weight: 600; letter-spacing: -.01em; }

/* Inputs feel more "premium" */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=url],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=datetime-local],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=time],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--surface-1);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    padding: .55rem .8rem;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: rgba(97,206,112,.5);
    box-shadow: 0 0 0 3px rgba(97,206,112,.12);
}

/* Buttons: slightly more rounded, tighter */
html[data-theme="dark"] .btn {
    border-radius: 10px;
    padding: .55rem 1rem;
    font-weight: 500;
}
html[data-theme="dark"] .btn-primary {
    background: var(--emerald-500);
    color: #0a0a0a;
}
html[data-theme="dark"] .btn-primary:hover {
    background: #75d883;
}
html[data-theme="dark"] .btn-secondary {
    background: var(--surface-3);
    color: var(--text-1);
    border-color: var(--border-2);
}
html[data-theme="dark"] .btn-secondary:hover { background: #2b2b2b; }
html[data-theme="dark"] .btn-sm { padding: .35rem .7rem; border-radius: 8px; }

/* Tables — quieter, no harsh hover */
html[data-theme="dark"] table.tbl th {
    background: transparent;
    color: var(--text-mute);
    font-size: 11px;
    border-bottom: 1px solid var(--border-1);
    padding: .75rem 1rem;
}
html[data-theme="dark"] table.tbl td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border-1);
}
html[data-theme="dark"] table.tbl tr:hover td { background: var(--surface-3); }

/* Badges — flatter, softer */
html[data-theme="dark"] .badge {
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
}

/* Segmented tab bar (Kanban / List / Timeline / Table) */
.seg-bar {
    display: inline-flex; gap: 2px;
    padding: 4px; border-radius: 12px;
    background: var(--surface-2, #f1f5f9);
    border: 1px solid var(--border-1, #e2e8f0);
}
.seg-bar a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: 8px;
    color: var(--text-3, #64748b); font-size: .875rem; font-weight: 500;
    transition: background .12s, color .12s;
}
.seg-bar a:hover { color: var(--text-1, #1e293b); }
.seg-bar a.active {
    background: var(--surface-1, #fff);
    color: var(--text-1, #1e293b);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.04);
}
html[data-theme="dark"] .seg-bar a.active {
    background: var(--surface-3);
    box-shadow: inset 0 0 0 1px var(--border-2);
}

/* Kanban v2 — Taskplus-style columns */
.kanban-col-v2 {
    width: 320px; flex: none;
    background: transparent;
}
.kanban-col-v2 .kc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 .25rem .75rem;
    border-bottom: 1px solid transparent;
}
.kanban-col-v2 .kc-title {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .875rem; font-weight: 600;
    color: var(--text-1, #1e293b);
}
.kanban-col-v2 .kc-title::before {
    content: ''; width: 3px; height: 16px; border-radius: 2px; background: var(--slate-400);
}
.kanban-col-v2[data-color="slate"]  .kc-title::before { background: #64748b; }
.kanban-col-v2[data-color="blue"]   .kc-title::before { background: #3b82f6; }
.kanban-col-v2[data-color="indigo"] .kc-title::before { background: #6366f1; }
.kanban-col-v2[data-color="purple"] .kc-title::before { background: #a855f7; }
.kanban-col-v2[data-color="amber"]  .kc-title::before { background: #f59e0b; }
.kanban-col-v2[data-color="orange"] .kc-title::before { background: #f97316; }
.kanban-col-v2[data-color="green"]  .kc-title::before { background: #22c55e; }
.kanban-col-v2[data-color="red"]    .kc-title::before { background: #ef4444; }
.kanban-col-v2 .kc-count {
    font-size: .75rem; color: var(--text-mute, #94a3b8);
    background: var(--surface-2, #f1f5f9); padding: 2px 8px; border-radius: 999px;
}
html[data-theme="dark"] .kanban-col-v2 .kc-count { background: var(--surface-2); }

.kanban-col-v2 .kc-list { display: flex; flex-direction: column; gap: 10px; min-height: 100px; padding: .25rem; }

.k-card {
    display: block; background: var(--surface-1, #fff);
    border: 1px solid var(--border-1, #e2e8f0);
    border-radius: 12px; padding: 14px;
    transition: border-color .12s, transform .12s, box-shadow .12s;
    cursor: grab;
}
.k-card:hover {
    border-color: var(--border-2, #cbd5e1);
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.08);
}
html[data-theme="dark"] .k-card {
    background: var(--surface-2);
    border-color: var(--border-1);
}
html[data-theme="dark"] .k-card:hover {
    background: var(--surface-3);
    border-color: var(--border-2);
}
.k-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.k-card-title { font-weight: 600; color: var(--text-1); font-size: .9375rem; line-height: 1.35; margin-bottom: 8px; letter-spacing: -.005em; }
.k-card-meta {
    display: flex; gap: 12px; font-size: 12px; color: var(--text-mute, #94a3b8);
    align-items: center;
}
.k-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.k-card-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-1);
}
.k-card-score {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
}
.k-card-bars { display: inline-flex; gap: 2px; align-items: flex-end; }
.k-card-bars span { width: 3px; background: #2563eb; border-radius: 1px; }

/* Add-new affordance at bottom of column */
.kc-add {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; border-radius: 12px;
    color: var(--text-3); font-size: .875rem;
    border: 1px dashed transparent;
    transition: border-color .12s, color .12s, background .12s;
    cursor: pointer;
}
.kc-add:hover {
    color: var(--text-1);
    border-color: var(--border-2);
    background: var(--surface-2);
}

/* Folder-icon header style for page titles */
.title-folder {
    display: inline-flex; align-items: center; gap: 14px;
}
.title-folder .folder {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(59,130,246,.12); color: #3b82f6;
}
html[data-theme="dark"] .title-folder .folder { background: rgba(59,130,246,.15); }

/* Avatar stack */
.avatar-stack { display: inline-flex; }
.avatar-stack > * {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--surface-3); border: 2px solid var(--surface-2);
    margin-left: -8px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600; color: var(--text-3);
}
.avatar-stack > *:first-child { margin-left: 0; }

/* "Upgrade" / promo card at bottom of sidebar */
.sb-promo {
    margin: .5rem; padding: 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #1c1c1c, #161616);
    border: 1px solid var(--border-1, #2a2a2a);
    text-align: center; color: var(--text-2);
}
.sb-promo .ico {
    width: 44px; height: 44px; margin: 0 auto 8px;
    border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(97,206,112,.15); color: var(--emerald-500); font-size: 22px;
}
.sb-promo h4 { font-size: .9375rem; font-weight: 600; color: var(--text-1); margin: 0 0 4px; }
.sb-promo p { font-size: 12px; color: var(--text-3); margin: 0 0 12px; line-height: 1.4; }
.sb-promo .btn { width: 100%; justify-content: center; }

/* Quieter scrollbars in dark */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 6px; border: 2px solid var(--page-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* Modal panel in dark */
html[data-theme="dark"] .modal-panel { border: 1px solid var(--border-1); border-radius: 14px; }

/* Inputs/selects in light mode get same radius for visual parity */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=tel],
input[type=search],input[type=datetime-local],input[type=date],input[type=time],select,textarea { border-radius: 10px; }
.btn { border-radius: 10px; }

/* Light-mode cards rounded a bit more */
.bg-white.border-slate-200, .bg-white.rounded-lg { border-radius: 12px; }
.rounded-lg { border-radius: 12px !important; }
.rounded-md { border-radius: 8px !important; }

/* Sidebar nav icons — consistent sizing */
.nav-link { font-size: .875rem; font-weight: 500; }
.nav-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex: none;
    opacity: .8;
}
.nav-ico svg { width: 18px; height: 18px; }
.nav-link:hover .nav-ico { opacity: 1; }
.nav-link.bg-slate-800 .nav-ico { opacity: 1; color: #61CE70; }
html[data-theme="dark"] .nav-link.bg-slate-800 .nav-ico { color: #61CE70; }

/* Sidebar promo card at the bottom (matches Taskplus inspo) */
.sb-bottom-card {
    margin: .75rem .5rem .5rem;
    padding: 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #1c1c1c, #131313);
    border: 1px solid var(--border-1, #262626);
    color: var(--text-2, #d4d4d4);
    position: relative;
}
.sb-bottom-card .close {
    position: absolute; top: 8px; right: 10px;
    color: var(--text-3); font-size: 16px; line-height: 1;
}
.sb-bottom-card .ico {
    width: 44px; height: 44px; margin: 0 auto 10px;
    border-radius: 11px; display: flex; align-items: center; justify-content: center;
    background: rgba(97,206,112,.15); color: var(--emerald-500);
}
.sb-bottom-card .ico svg { width: 22px; height: 22px; }
.sb-bottom-card h4 { font-size: .875rem; font-weight: 600; color: var(--text-1, #fafafa); margin: 0 0 4px; text-align: center; }
.sb-bottom-card p  { font-size: 11.5px; color: var(--text-3); margin: 0 0 12px; line-height: 1.45; text-align: center; }
.sb-bottom-card .btn { width: 100%; justify-content: center; background: var(--surface-3, #2a2a2a); color: var(--text-1, #fafafa); border-color: var(--border-2, #3f3f3f); }

/* Breadcrumb in headers */
.bc {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--text-3); font-size: .8125rem;
}
.bc a { color: var(--text-3); }
.bc a:hover { color: var(--text-1); }
.bc .sep { color: var(--text-mute); }

/* Bigger page title in dark */
html[data-theme="dark"] main > header.sticky h1 { font-size: 1.5rem; }

/* Light theme also gets sidebar/main rounded shells for consistency */
.flex.min-h-screen {
    padding: 0;
    background: #f8fafc;
}
aside.sidebar-aside { border-radius: 0; }
main { border-radius: 0; }
@media (min-width: 768px) {
    html[data-theme="dark"] aside.sidebar-aside { margin: 0; }
}

/* ============================================================
   Sidebar v2 — grouped, collapsible, dropdown groups
   ============================================================ */
:root { --sidebar-w: 248px; --sidebar-w-collapsed: 64px; }

aside.sidebar-aside {
    width: var(--sidebar-w);
    transition: width .2s ease;
}

/* Default header — buttons hidden until non-mobile */
.sidebar-header .brand-link { color: inherit; text-decoration: none; min-width: 0; }
.sidebar-header .brand-link:hover .brand-label { opacity: .85; }
.sb-collapse-btn {
    width: 28px; height: 28px; border-radius: 6px;
    background: transparent; color: #94a3b8;
    border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.sb-collapse-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.sb-collapse-btn .ico-expand   { display: none; }
.sb-collapse-btn .ico-collapse { display: inline; }

/* Nav groups */
.sidebar-nav .nav-group { margin-bottom: 4px; }
.sidebar-nav .nav-group + .nav-group { margin-top: 2px; }
.sidebar-nav .nav-group-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px 6px 10px;
    font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: #64748b; cursor: pointer; user-select: none;
    list-style: none;
}
.sidebar-nav .nav-group-header::-webkit-details-marker { display: none; }
.sidebar-nav .nav-group-header:hover { color: #cbd5e1; }
.sidebar-nav .group-chevron { transition: transform .15s ease; flex: none; }
.sidebar-nav .nav-group[open] > .nav-group-header .group-chevron { transform: rotate(90deg); }

.sidebar-nav .nav-group-items { display: flex; flex-direction: column; gap: 1px; }

.nav-link { font-size: .875rem; font-weight: 500; min-height: 36px; }
.nav-link .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Collapsed (icon-only) mode ---------- */
aside.sidebar-aside.is-collapsed { width: var(--sidebar-w-collapsed); }
aside.sidebar-aside.is-collapsed .brand-label,
aside.sidebar-aside.is-collapsed .nav-label,
aside.sidebar-aside.is-collapsed .group-label,
aside.sidebar-aside.is-collapsed .group-chevron,
aside.sidebar-aside.is-collapsed .sb-bottom-card,
aside.sidebar-aside.is-collapsed .user-block .user-text {
    display: none;
}
aside.sidebar-aside.is-collapsed .nav-group-header {
    padding: 6px 0; justify-content: center; cursor: default;
}
/* In collapsed mode every group acts open, ignore details state */
aside.sidebar-aside.is-collapsed .nav-group-items { display: flex !important; }
aside.sidebar-aside.is-collapsed .nav-group:not([open]) .nav-group-items { display: flex !important; }
aside.sidebar-aside.is-collapsed .nav-group-header::after {
    content: ''; display: block; width: 18px; height: 1px; background: rgba(148,163,184,.25);
}
aside.sidebar-aside.is-collapsed .nav-link {
    justify-content: center; padding: 10px 0;
}
aside.sidebar-aside.is-collapsed .sb-collapse-btn .ico-expand   { display: inline; }
aside.sidebar-aside.is-collapsed .sb-collapse-btn .ico-collapse { display: none; }
aside.sidebar-aside.is-collapsed .sidebar-header { padding: 12px 8px; justify-content: center; }
aside.sidebar-aside.is-collapsed .sidebar-header .brand-link { justify-content: center; }
aside.sidebar-aside.is-collapsed .user-block { justify-content: center; }
aside.sidebar-aside.is-collapsed .user-block .user-avatar { margin: 0; }

/* On mobile, the collapse button is hidden — drawer behavior takes over */
@media (max-width: 767px) {
    aside.sidebar-aside.is-collapsed { width: 260px; }
    aside.sidebar-aside.is-collapsed .brand-label,
    aside.sidebar-aside.is-collapsed .nav-label,
    aside.sidebar-aside.is-collapsed .group-label,
    aside.sidebar-aside.is-collapsed .group-chevron { display: initial; }
    aside.sidebar-aside.is-collapsed .nav-link { justify-content: flex-start; padding: 8px 12px; }
}

aside.sidebar-aside.is-collapsed .nav-group-header { pointer-events: none; }

/* ============================================================
   Theme parity — geometry identical for light & dark.
   Only colors differ. Prevents layout shift on theme toggle.
   ============================================================ */

/* Shell: 12px gutter + gap on every page. Was previously dark-only. */
.flex.min-h-screen {
    padding: 12px;
    gap: 12px;
}
@media (max-width: 767px) {
    .flex.min-h-screen { padding: 0; gap: 0; }
}

/* Sidebar shell — rounded panel in both themes */
aside.sidebar-aside {
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    padding: .25rem;
}
html[data-theme="dark"] aside.sidebar-aside {
    border-color: var(--border-1);
}
@media (max-width: 767px) {
    aside.sidebar-aside { border-radius: 0; border: 0; padding: 0; }
}

/* Main panel — rounded + bordered in both themes */
main {
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    background: #ffffff;
}
html[data-theme="dark"] main {
    border-color: var(--border-1);
    background: var(--surface-1);
}
@media (max-width: 767px) {
    main { border-radius: 0; border: 0; }
}

/* Sticky header inside main — same padding + same h1 size in both themes */
main > header.sticky {
    padding: 1.25rem 1.5rem;
}
main > header.sticky h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.02em;
}
@media (max-width: 767px) {
    main > header.sticky { padding: .75rem 1rem; }
    main > header.sticky h1 { font-size: 1.125rem; }
}

/* Sidebar nav links — identical geometry in both themes */
aside.sidebar-aside .nav-link {
    border-radius: 10px;
    padding: .55rem .75rem;
    margin: 1px 0;
    transition: background .12s, color .12s;
}

/* btn-sm — same padding in both themes (was overridden dark-only) */
.btn-sm { padding: .35rem .7rem; border-radius: 8px; }

/* Theme-agnostic scrollbar size to avoid 1–2px content shift */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2a2a; border: 2px solid var(--page-bg); background-clip: padding-box; }