/* Dhandare console styles.
   Hand-authored, no build step: a Tailwind-compatible utility subset (exactly the
   classes the templates use) plus the component classes. Mobile-first. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; }

/* layout ------------------------------------------------------------------ */
.h-full { height: 100%; }
.h-8 { height: 2rem; } .h-16 { height: 4rem; } .h-20 { height: 5rem; }
.w-8 { width: 2rem; } .w-28 { width: 7rem; } .w-full { width: 100%; }
.flex { display: flex; } .inline { display: inline; } .block { display: block; }
.grid { display: grid; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.place-items-center { place-items: center; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-1 { margin-left: .25rem; } .ml-2 { margin-left: .5rem; }
.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; }
.p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pb-10 { padding-bottom: 2.5rem; } .pt-4 { padding-top: 1rem; }
.max-w-md { max-width: 28rem; } .max-w-2xl { max-width: 42rem; } .max-w-6xl { max-width: 72rem; }
.max-w-\[220px\] { max-width: 220px; }
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.sticky { position: sticky; } .top-0 { top: 0; } .z-20 { z-index: 20; }
.overflow-x-auto { overflow-x: auto; }
.whitespace-nowrap { white-space: nowrap; }
.break-all { word-break: break-all; }
.backdrop-blur { backdrop-filter: blur(8px); }

/* type -------------------------------------------------------------------- */
.text-xs { font-size: .75rem; } .text-sm { font-size: .875rem; }
.text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tracking-widest { letter-spacing: .1em; }
.text-center { text-align: center; } .text-right { text-align: right; }

/* colour ------------------------------------------------------------------ */
.bg-slate-50 { background: #f8fafc; } .bg-white { background: #fff; }
.bg-white\/95 { background: rgba(255,255,255,.95); }
.bg-indigo-600 { background: #4f46e5; }
.bg-emerald-50 { background: #ecfdf5; } .bg-amber-50 { background: #fffbeb; } .bg-rose-50 { background: #fff1f2; }
.text-white { color: #fff; }
.text-slate-500 { color: #64748b; } .text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; } .text-slate-800 { color: #1e293b; } .text-slate-900 { color: #0f172a; }
.text-indigo-700 { color: #4338ca; }
.text-emerald-700 { color: #047857; } .text-emerald-900 { color: #064e3b; }
.text-amber-600 { color: #d97706; } .text-amber-900 { color: #78350f; }
.text-rose-600 { color: #e11d48; } .text-rose-800 { color: #9f1239; }
.border { border: 1px solid transparent; }
.border-b { border-bottom: 1px solid transparent; }
.border-slate-200 { border-color: #e2e8f0; }
.border-emerald-300 { border-color: #6ee7b7; } .border-amber-200 { border-color: #fde68a; }
.border-rose-200 { border-color: #fecdd3; }
.rounded-lg { border-radius: .5rem; } .rounded-xl { border-radius: .75rem; } .rounded-2xl { border-radius: 1rem; }

/* components -------------------------------------------------------------- */
.nav {
  padding: .375rem .625rem; border-radius: .5rem; color: #334155;
  text-decoration: none; min-height: 2rem; display: inline-flex; align-items: center;
}
.nav:hover { background: #f1f5f9; color: #0f172a; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .5rem .875rem; min-height: 2.25rem; border: 1px solid #4f46e5; border-radius: .5rem;
  background: #4f46e5; color: #fff; font-size: .875rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.btn-primary:hover { background: #4338ca; border-color: #4338ca; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .5rem .875rem; min-height: 2.25rem; border: 1px solid #cbd5e1; border-radius: .5rem;
  background: #fff; color: #334155; font-size: .875rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.btn-ghost:hover { background: #f8fafc; border-color: #94a3b8; }

.lbl { display: block; font-size: .8125rem; font-weight: 500; color: #475569; }
.inp {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem .625rem;
  border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff;
  font-size: .9375rem; color: #0f172a; font-family: inherit;
}
.inp:focus { outline: 2px solid #a5b4fc; outline-offset: 1px; border-color: #6366f1; }
textarea.inp { resize: vertical; }

.lnk { color: #4338ca; text-decoration: underline; text-underline-offset: 2px; }
.lnk:hover { color: #3730a3; }

.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tbl th {
  position: sticky; top: 0; z-index: 1; background: #f8fafc; text-align: left;
  padding: .5rem .625rem; font-weight: 600; color: #475569; border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.tbl td { padding: .5rem .625rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }

.kpi { border: 1px solid #e2e8f0; border-radius: .75rem; background: #fff; padding: .875rem 1rem; }
.kpi dt { font-size: .75rem; color: #64748b; }
.kpi dd { margin: .25rem 0 0; font-size: 1.375rem; font-weight: 700; color: #0f172a;
          font-variant-numeric: tabular-nums; }

.badge-ok, .badge-warn, .badge-bad, .badge-muted {
  display: inline-flex; align-items: center; padding: .1875rem .5rem;
  border-radius: 9999px; font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.badge-ok { background: #d1fae5; color: #065f46; }
.badge-warn { background: #fef3c7; color: #92400e; }
.badge-bad { background: #ffe4e6; color: #9f1239; }
.badge-muted { background: #f1f5f9; color: #475569; }

.chip {
  display: inline-flex; align-items: center; padding: .25rem .625rem; min-height: 2rem;
  border: 1px solid #e2e8f0; border-radius: 9999px; background: #fff;
  font-size: .8125rem; color: #334155; text-decoration: none;
}
.chip-on { background: #4f46e5; border-color: #4f46e5; color: #fff; }

.step {
  display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem;
  margin-right: .5rem; border-radius: 9999px; background: #e0e7ff; color: #3730a3;
  font-size: .75rem; font-weight: 700;
}

.code {
  margin-top: .75rem; padding: .875rem 1rem; overflow-x: auto;
  border: 1px solid #e2e8f0; border-radius: .5rem; background: #0f172a; color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125rem; line-height: 1.6; white-space: pre;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em; }

/* responsive -------------------------------------------------------------- */
/* Nothing may push the page sideways on a phone: long endpoints, keys and UTRs wrap,
   and the header nav wraps instead of overflowing.
   NOTE: deliberately NOT `overflow-x: hidden` on html/body — that makes body a scroll
   container, which breaks window scrolling and the sticky header. Fix the cause. */
.font-mono { overflow-wrap: anywhere; }
.brand span:last-child { white-space: nowrap; }

@media (max-width: 639px) {
  .nav { padding: .375rem .5rem; }
  nav.flex { gap: .125rem; row-gap: .25rem; }
  .brand span:last-child { font-size: .9375rem; }
  .tbl { font-size: .8125rem; }
  .tbl th, .tbl td { padding: .4375rem .5rem; }
}

@media (min-width: 640px) {
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:text-4xl { font-size: 2.25rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}