/* =====================================================================
   WainTo Admin — "Ops" design system
   A dense, data-rich operations console layered over MudBlazor.
   Presentation only: tokens + component overrides. No behavioral hooks.
   ===================================================================== */

:root {
  --wt-ink:        #0F1729;
  --wt-ink-2:      #33415A;
  --wt-muted:      #5B667A;
  --wt-faint:      #8A93A5;
  --wt-canvas:     #EEF1F6;
  --wt-panel:      #FFFFFF;
  --wt-line:       #E4E8EF;
  --wt-line-soft:  #EFF2F7;
  --wt-hover:      #F6F8FB;
  --wt-head-bg:    #F8FAFC;

  --wt-side:       #0F1729;
  --wt-side-2:     #17213A;
  --wt-side-txt:   #9AA6BC;
  --wt-side-head:  #5E6B85;

  --wt-accent:     #1E6FE0;
  --wt-accent-2:   #1657B8;
  --wt-accent-tint:#E7F0FD;

  --wt-amber:  #E8930C; --wt-amber-bg:#FBEFD4; --wt-amber-tx:#8A5606;
  --wt-green:  #1FA463; --wt-green-bg:#DBF1E3; --wt-green-tx:#0F6B41;
  --wt-red:    #E23D3D; --wt-red-bg:#FBE1E1;   --wt-red-tx:#9B1C1C;
  --wt-slate:  #94A3B8; --wt-slate-bg:#EDF0F5; --wt-slate-tx:#51607A;
  --wt-info-bg:#DCE9FB; --wt-info-tx:#1B4FA8;

  --wt-r:   8px;
  --wt-r-sm:6px;
  --wt-shadow: 0 1px 2px rgba(15,23,41,.06), 0 1px 3px rgba(15,23,41,.04);
}

html, body { margin: 0; }
body { background: var(--wt-canvas); }

.mud-main-content { background: var(--wt-canvas); }
.wt-content { padding: 16px 18px 40px !important; }

/* =====================================================================
   SHELL — app bar
   ===================================================================== */
.wt-appbar {
  background: var(--wt-panel) !important;
  color: var(--wt-ink) !important;
  border-bottom: 1px solid var(--wt-line);
  box-shadow: none !important;
}
.wt-appbar .mud-toolbar { min-height: 52px; height: 52px; }
.wt-appbar__toggle { display: none !important; }
.wt-signout.mud-button-root { color: var(--wt-muted); font-weight: 600; }
.wt-signout.mud-button-root:hover { background: var(--wt-hover); color: var(--wt-red-tx); }

@media (max-width: 1279.98px) {
  .wt-appbar__toggle { display: inline-flex !important; }
}

/* =====================================================================
   SHELL — dark drawer + brand + user foot
   ===================================================================== */
.wt-drawer.mud-drawer {
  background: var(--wt-side) !important;
  border-inline-end: 1px solid #0A1120;
}
.wt-drawer .mud-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wt-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 0 16px; height: 52px; flex: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.wt-brand__logo {
  width: 27px; height: 27px; border-radius: 7px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--wt-accent), #3E8BF5);
}
.wt-brand__logo .mud-icon-root { font-size: 16px; }
.wt-brand__text b { color: #fff; font-size: 14px; font-weight: 650; letter-spacing: .2px; display: block; line-height: 1.15; }
.wt-brand__text span { color: var(--wt-side-head); font-size: 10.5px; font-weight: 500; }

.wt-drawer__nav { flex: 1 1 auto; overflow-y: auto; padding: 6px 8px; }

.wt-drawer__foot {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.06);
}
.wt-drawer__foot .mud-avatar { font-size: 11px; font-weight: 600; }
.wt-drawer__who { overflow: hidden; line-height: 1.25; }
.wt-drawer__who b { color: #E4E9F2; font-size: 12.5px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-drawer__who span { color: var(--wt-side-head); font-size: 10.5px; }

/* =====================================================================
   NAV MENU
   ===================================================================== */
.wt-nav { padding: 0; }
.wt-nav__group {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--wt-side-head); padding: 14px 10px 5px;
}
.wt-nav .mud-nav-link {
  color: var(--wt-side-txt) !important;
  font-size: 12.5px; font-weight: 500;
  padding: 7px 10px; margin: 1px 0; border-radius: var(--wt-r-sm);
  min-height: 0; position: relative;
}
.wt-nav .mud-nav-link .mud-nav-link-icon { color: var(--wt-side-txt); font-size: 18px; min-width: 18px; margin-inline-end: 10px; opacity: .85; }
.wt-nav .mud-nav-link:hover { background: var(--wt-side-2) !important; color: #D7DEEC !important; }
.wt-nav .mud-nav-link:hover .mud-nav-link-icon { color: #D7DEEC; }
.wt-nav .mud-nav-link.active {
  background: rgba(30,111,224,.16) !important;
  color: #fff !important;
}
.wt-nav .mud-nav-link.active .mud-nav-link-icon { color: #6BA6F5; opacity: 1; }
.wt-nav .mud-nav-link.active::before {
  content: ""; position: absolute; inset-inline-start: -8px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--wt-accent);
}
html[dir="rtl"] .wt-nav .mud-nav-link.active::before { border-radius: 3px 0 0 3px; }

/* =====================================================================
   PAGE HEADER (compact) — restyles every page's h4 title
   ===================================================================== */
.mud-main-content .mud-typography-h4 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.2px; }

/* =====================================================================
   PANELS / CARDS
   ===================================================================== */
.mud-card {
  border: 1px solid var(--wt-line) !important;
  border-radius: var(--wt-r) !important;
  box-shadow: var(--wt-shadow) !important;
}
.mud-card.mud-card-outlined { box-shadow: none !important; }

/* =====================================================================
   TABLES — the workhorse
   ===================================================================== */
.mud-table {
  border: 1px solid var(--wt-line) !important;
  border-radius: var(--wt-r) !important;
  box-shadow: var(--wt-shadow) !important;
  overflow: hidden;
}
.mud-table .mud-table-root { border-collapse: collapse; }

.mud-table .mud-table-head .mud-table-cell {
  background: var(--wt-head-bg);
  color: var(--wt-muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 8px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--wt-line);
}
.mud-table .mud-table-body .mud-table-cell {
  padding: 7px 14px;
  border-bottom: 1px solid var(--wt-line-soft);
  font-size: 12.75px; color: var(--wt-ink);
  vertical-align: middle;
}
.mud-table .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: 0; }
.mud-table-hover .mud-table-body .mud-table-row:hover { background: var(--wt-hover) !important; }
.mud-table .mud-table-sort-label { font: inherit; }

/* compact identity avatars keep rows tight */
.mud-table .mud-avatar { width: 30px; height: 30px; min-width: 30px; font-size: 12px; border-radius: var(--wt-r-sm); }
.mud-table .mud-avatar .mud-icon-root { font-size: 17px; }
.wt-biz__name b { font-size: 13px; font-weight: 600; display: block; line-height: 1.25; }
.wt-biz__name span { font-size: 11.5px; color: var(--wt-muted); }

/* numbers align + tabular */
.mud-table .mud-table-cell.mud-table-cell-align-right { font-variant-numeric: tabular-nums; }

/* =====================================================================
   CHIPS — status (filled = tint + dot) vs tags (outlined/text = neutral)
   ===================================================================== */
.mud-chip.mud-chip-size-small { height: 21px; font-size: 11.5px; font-weight: 600; padding: 0 9px; }
.mud-chip.mud-chip-filled { box-shadow: none; border-radius: 20px; }

/* leading status dot */
.mud-chip.mud-chip-filled::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  margin-inline-end: 6px; flex: none; background: currentColor; opacity: .9;
}

.mud-chip.mud-chip-filled.mud-chip-color-warning { background: var(--wt-amber-bg); color: var(--wt-amber-tx); }
.mud-chip.mud-chip-filled.mud-chip-color-success { background: var(--wt-green-bg); color: var(--wt-green-tx); }
.mud-chip.mud-chip-filled.mud-chip-color-error   { background: var(--wt-red-bg);   color: var(--wt-red-tx); }
.mud-chip.mud-chip-filled.mud-chip-color-info    { background: var(--wt-info-bg);  color: var(--wt-info-tx); }
.mud-chip.mud-chip-filled.mud-chip-color-primary { background: var(--wt-accent-tint); color: var(--wt-accent-2); }
.mud-chip.mud-chip-filled.mud-chip-color-default,
.mud-chip.mud-chip-filled.mud-chip-color-dark    { background: var(--wt-slate-bg); color: var(--wt-slate-tx); }

/* tag chips (outlined) — neutral, no dot */
.mud-chip.mud-chip-outlined {
  border-radius: 20px; font-weight: 600; font-size: 11.5px;
  background: var(--wt-panel); border-color: var(--wt-line); color: var(--wt-muted);
}
/* inline badges (text variant) — subtle, no dot */
.mud-chip.mud-chip-text.mud-chip-color-primary { background: var(--wt-accent-tint); color: var(--wt-accent-2); font-weight: 600; }
.mud-chip.mud-chip-text.mud-chip-color-warning { background: var(--wt-amber-bg); color: var(--wt-amber-tx); font-weight: 600; }

/* =====================================================================
   BUTTONS — dense, calm; destructive stays red
   ===================================================================== */
.mud-button-root { text-transform: none; border-radius: var(--wt-r-sm); }
.mud-button-root.mud-button-text { font-weight: 600; }
.mud-table .mud-button-root.mud-button-text { padding: 3px 8px; }
.mud-button-root.mud-button-outlined { border-width: 1px; }

/* icon buttons in tables read as compact action affordances */
.mud-table .mud-icon-button { border-radius: var(--wt-r-sm); }

/* =====================================================================
   INPUTS / FILTERS — dense
   ===================================================================== */
.mud-input.mud-input-outlined { border-radius: var(--wt-r-sm); background: var(--wt-panel); }
.mud-input-outlined .mud-input-outlined-border { border-color: var(--wt-line); }
.mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--wt-slate); }

/* =====================================================================
   PAGINATION
   ===================================================================== */
.mud-pagination-item { border-radius: var(--wt-r-sm); font-variant-numeric: tabular-nums; }
.mud-pagination-item.mud-pagination-item-selected { background: var(--wt-accent); color: #fff; }

/* =====================================================================
   DIALOGS — compact
   ===================================================================== */
.mud-dialog { border-radius: var(--wt-r) !important; }
.mud-dialog .mud-dialog-title {
  font-size: 0.95rem; font-weight: 650; padding: 14px 18px;
  border-bottom: 1px solid var(--wt-line);
}
.mud-dialog .mud-dialog-content { padding: 16px 18px; }
.mud-dialog .mud-dialog-actions {
  padding: 12px 18px; border-top: 1px solid var(--wt-line); gap: 8px;
}

/* =====================================================================
   ALERTS
   ===================================================================== */
.mud-alert { border-radius: var(--wt-r); }

/* =====================================================================
   DASHBOARD — KPI strip + queue urgency tiles
   ===================================================================== */
.wt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.wt-kpi {
  background: var(--wt-panel); border: 1px solid var(--wt-line); border-radius: var(--wt-r);
  padding: 12px 14px; box-shadow: var(--wt-shadow);
}
.wt-kpi__lbl {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--wt-muted); display: flex; align-items: center; gap: 7px;
}
.wt-kpi__lbl .mud-icon-root { font-size: 15px; color: var(--wt-faint); }
.wt-kpi__val {
  font-size: 25px; font-weight: 700; letter-spacing: -.5px; margin-top: 6px;
  color: var(--wt-ink); font-variant-numeric: tabular-nums;
}
.wt-kpi__foot { font-size: 11.5px; color: var(--wt-faint); margin-top: 2px; }

.wt-panel {
  background: var(--wt-panel); border: 1px solid var(--wt-line);
  border-radius: var(--wt-r); box-shadow: var(--wt-shadow); overflow: hidden;
}
.wt-panel__head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--wt-line);
}
.wt-panel__head h3 { margin: 0; font-size: 13px; font-weight: 650; color: var(--wt-ink); }
.wt-panel__head .wt-count {
  font-size: 11px; color: var(--wt-muted); background: var(--wt-canvas);
  padding: 1px 8px; border-radius: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
}

.wt-queues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wt-qtile {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--wt-line); border-radius: var(--wt-r-sm);
  border-inline-start-width: 3px; padding: 12px 14px;
  transition: background .12s, border-color .12s;
}
.wt-qtile:hover { background: var(--wt-hover); }
.wt-qtile__top { display: flex; align-items: baseline; justify-content: space-between; }
.wt-qtile__n { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wt-qtile__lbl { font-size: 12.5px; font-weight: 600; margin-top: 2px; color: var(--wt-ink); }
.wt-qtile__sub { font-size: 11px; color: var(--wt-muted); }
.wt-qtile.wt-amber { border-inline-start-color: var(--wt-amber); }
.wt-qtile.wt-amber .wt-qtile__n { color: var(--wt-amber-tx); }
.wt-qtile.wt-red { border-inline-start-color: var(--wt-red); }
.wt-qtile.wt-red .wt-qtile__n { color: var(--wt-red-tx); }
.wt-qtile.wt-blue { border-inline-start-color: var(--wt-accent); }
.wt-qtile.wt-blue .wt-qtile__n { color: var(--wt-accent-2); }

@media (max-width: 959.98px) {
  .wt-queues { grid-template-columns: 1fr; }
}

/* business identity cell (used across list/moderation tables) */
.wt-biz { display: flex; align-items: center; gap: 11px; }
.wt-biz__name b { font-size: 13px; font-weight: 600; display: block; line-height: 1.25; }
.wt-biz__name span { font-size: 11.5px; color: var(--wt-muted); }

/* =====================================================================
   AUTH PAGES (login / change password / error / 404)
   ===================================================================== */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(30,111,224,.10), transparent 60%),
    linear-gradient(160deg, #F3F6FB 0%, #E9EEF6 100%);
}
.auth-page__top { display: flex; justify-content: flex-end; padding: 16px 24px; }
.auth-page__content { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 64px); }

.wt-auth-card { width: 100%; border-radius: 14px !important; border: 1px solid var(--wt-line); }

.wt-field { margin-bottom: 16px; display: flex; flex-direction: column; }
.wt-field label { font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; color: var(--wt-muted); }
.wt-input {
  width: 100%; box-sizing: border-box; padding: 11px 13px; font-size: 0.95rem;
  font-family: inherit; border: 1px solid var(--wt-line); border-radius: var(--wt-r-sm);
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.wt-input:focus { outline: none; border-color: var(--wt-accent); box-shadow: 0 0 0 3px rgba(30,111,224,.16); }
.validation-message { color: var(--wt-red); font-size: 0.78rem; margin-top: 4px; }
html[dir="rtl"] .wt-field label { text-align: right; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }

@media (prefers-reduced-motion: reduce) {
  .wt-qtile, .mud-nav-link, .mud-button-root { transition: none !important; }
}