/* 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
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: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
:focus-visible { outline: 2px solid #10b981; 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:#1e293b; --slate-900:#0f172a;
    --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;
    --emerald-50:#ecfdf5;--emerald-100:#d1fae5;--emerald-200:#a7f3d0;--emerald-300:#6ee7b7;
    --emerald-500:#10b981;--emerald-600:#059669;--emerald-700:#047857;--emerald-800:#065f46;
    --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); }

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