/* ==========================================================================
   MailServices — design system
   Loaded after Tailwind. Component classes for the parts that repeat, so the
   views stay readable instead of carrying forty utilities each.
   ========================================================================== */

:root {
  --bg:            #f8fafc;
  --surface:       #ffffff;
  --surface-soft:  #f8fafc;

  --border:        #e8edf3;
  --border-strong: #dde4ec;

  --text:          #0f172a;
  --text-2:        #334155;
  --muted:         #64748b;
  --faint:         #94a3b8;

  --brand:         #2563eb;
  --brand-strong:  #1d4ed8;
  --brand-soft:    #eff6ff;

  --ok:            #16a34a;
  --ok-soft:       #f0fdf4;
  --warn:          #d97706;
  --warn-soft:     #fffbeb;
  --bad:           #dc2626;
  --bad-soft:      #fef2f2;

  --radius:        12px;
  --radius-sm:     10px;

  /* flat and plain: a hairline border does the work, not a drop shadow */
  --shadow:        0 1px 2px rgba(15, 23, 42, .04);
  --shadow-lift:   0 2px 8px rgba(15, 23, 42, .07);

  --sidebar:       #0f172a;
  --sidebar-deep:  #0b1220;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

::selection { background: rgba(37, 99, 235, .16); }

/* --------------------------------------------------------------- scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d3d8e6; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #bcc3d6; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ----------------------------------------------------------------- sidebar */
.app-sidebar {
  background: var(--sidebar);
  color: #fff;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  margin-bottom: .15rem;
  border-radius: 10px;
  font-size: .9375rem;
  color: #94a3b8;
  transition: background .14s ease, color .14s ease;
}
.nav-link:hover { background: rgba(255, 255, 255, .06); color: #e2e8f0; }

.nav-link.is-active {
  background: rgba(37, 99, 235, .16);
  color: #fff;
  font-weight: 500;
}
.nav-link.is-active svg { color: #60a5fa; }

.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 10px;
  padding: .7rem 1rem;
  font-size: .9375rem;
  font-weight: 500;
  color: #fff;
  background: var(--brand);
  transition: background .14s ease;
}
.btn-brand:hover { background: var(--brand-strong); }

.sidebar-promo {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
}

/* -------------------------------------------------------------------- card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-hover { transition: box-shadow .18s ease, transform .18s ease; }
.card-hover:hover { box-shadow: var(--shadow-lift); }

.card-head {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.15rem 1.35rem;
}

.card-title { font-size: 1rem; font-weight: 600; color: var(--text); }
.card-sub   { font-size: .8125rem; color: var(--muted); margin-top: .1rem; }

/* --------------------------------------------------------------- icon tile */
.icon-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex: 0 0 auto;
}
.icon-tile svg { width: 21px; height: 21px; }

.tile-indigo  { background: #eff6ff; color: #2563eb; }
.tile-blue    { background: #f0fdf4; color: #16a34a; }
.tile-emerald { background: #f5f3ff; color: #7c3aed; }
.tile-amber   { background: #fff7ed; color: #f97316; }
.tile-violet  { background: #eff6ff; color: #2563eb; }
.tile-rose    { background: #fff1f2; color: #e11d48; }
.tile-slate   { background: #f1f5f9; color: #475569; }

/* ------------------------------------------------------------------- chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border-radius: 999px;
  padding: .25rem .625rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
}
.chip-ok      { background: var(--ok-soft);   color: #047857; }
.chip-warn    { background: var(--warn-soft); color: #b45309; }
.chip-bad     { background: var(--bad-soft);  color: #be123c; }
.chip-neutral { background: #f1f5f9;          color: #64748b; }
.chip-brand   { background: var(--brand-soft); color: var(--brand-strong); }

/* keyboard hint in the search box */
.kbd {
  font-size: .6875rem;
  font-weight: 500;
  color: var(--faint);
  background: #f1f3f9;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: .1rem .38rem;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ tables */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }

.data-table thead th {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
  padding: .8rem 1rem;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
}
.data-table thead th:first-child { padding-left: 1.35rem; }
.data-table thead th:last-child  { padding-right: 1.35rem; }

.data-table tbody td {
  padding: .95rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
  color: var(--text-2);
  vertical-align: middle;
}
.data-table tbody td:first-child { padding-left: 1.35rem; }
.data-table tbody td:last-child  { padding-right: 1.35rem; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .14s ease; }
.data-table tbody tr:hover { background: var(--surface-soft); }

/* -------------------------------------------------------------- form bits */
.field {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: .58rem .75rem;
  font-size: .875rem;
  color: var(--text);
  background: #fff;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.field::placeholder { color: var(--faint); }

/* ------------------------------------------------------------------ misc */
.stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--text);
}

.link-brand { color: var(--brand); font-weight: 500; }
.link-brand:hover { text-decoration: underline; }

.sparkline { display: block; overflow: visible; }

[x-cloak] { display: none !important; }

/* ==========================================================================
   Legacy panels
   The other screens were written with raw utilities before this design system
   existed. Rather than rewrite every view, lift the shared patterns to match
   the new cards, inputs and tables.
   ========================================================================== */

.rounded-xl.border.border-slate-200.bg-white,
.rounded-2xl.border.border-slate-200.bg-white {
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.border-slate-200  { border-color: var(--border); }
.border-slate-100  { border-color: var(--border); }
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }
.bg-slate-50       { background-color: var(--surface-soft); }

/* headings and body copy pick up the tuned scale */
.text-slate-900 { color: var(--text); }
.text-slate-800 { color: var(--text-2); }
.text-slate-700 { color: var(--text-2); }
.text-slate-600 { color: var(--muted); }
.text-slate-500 { color: var(--muted); }
.text-slate-400 { color: var(--faint); }

/* form controls, wherever they were declared */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  border-radius: 10px;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }

/* table headers written as utilities */
thead.bg-slate-50 th { color: var(--faint); letter-spacing: .06em; }

/* primary + dark buttons */
.bg-indigo-600 { background-color: var(--brand); }
.text-indigo-600 { color: var(--brand); }
.text-indigo-700 { color: var(--brand-strong); }
.border-indigo-600 { border-color: var(--brand); }
.bg-indigo-50 { background-color: var(--brand-soft); }
.hover\:bg-indigo-700:hover { background-color: var(--brand-strong); }
.bg-slate-900 { background-color: #1e2433; }
.hover\:bg-slate-800:hover { background-color: #2b3346; }

/* status pills keep their colour but gain the softer shape */
.rounded-full.px-2.py-0\.5 { padding: .25rem .625rem; font-weight: 500; }