/* Shared admin presentation used by the main, Caller Desk, and Vibe AUTH screens. */
:root {
  color-scheme: light;
  --admin-ink: #18212f;
  --admin-muted: #667085;
  --admin-line: #dfe3e8;
  --admin-panel: #fff;
  --admin-page: #f4f6f8;
  --admin-brand: #176b5b;
  --admin-brand-dark: #105247;
  --admin-warn: #9a6700;
  --admin-danger: #b42318;
}

body,
body[hidden] {
  background: var(--admin-page) !important;
  color: var(--admin-ink) !important;
  font-family: Inter, Arial, sans-serif !important;
}

.shell,
.wrap { color: var(--admin-ink); }

.top,
.bar {
  background: #fff !important;
  border-color: var(--admin-line) !important;
  color: var(--admin-ink) !important;
}

.brand,
.brand-row,
.side-brand { color: var(--admin-ink); }
.brand span,
.eyebrow,
.online,
.secure { color: var(--admin-brand) !important; }
.top small,
.tag,
.muted,
.sub,
.clock { color: var(--admin-muted) !important; }
.tag { border-color: var(--admin-line) !important; }
.login p,
.login label,
.form label { color: #344054 !important; }
.top-actions a,
a { color: var(--admin-brand); }

.hero h1,
.clock b,
h1,
h2,
h3,
h4 { color: var(--admin-ink); }

.panel,
.stat,
.metric,
.login,
.card {
  background: var(--admin-panel) !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgb(16 24 40 / 5%);
}

.panel-head { border-color: var(--admin-line) !important; }
.btn,
.button {
  background: var(--admin-brand) !important;
  color: #fff !important;
  border-color: var(--admin-brand) !important;
  border-radius: 6px !important;
}
.btn:hover,
.button:hover { background: var(--admin-brand-dark) !important; }
.btn.secondary,
.btn.ghost,
.btn.subtle,
.button.secondary {
  background: #fff !important;
  color: var(--admin-ink) !important;
  border: 1px solid #cfd5dc !important;
}
.btn.warn { background: #fff6e5 !important; color: var(--admin-warn) !important; border-color: #f0cf82 !important; }
.btn.danger,
.button.danger { background: #fff !important; color: var(--admin-danger) !important; border-color: #f0b9b5 !important; }

input,
select,
textarea,
.search,
.filters input,
.filters select,
.reason,
.lookup input,
.login input {
  background: #fff !important;
  color: var(--admin-ink) !important;
  border-color: #cfd5dc !important;
  border-radius: 6px !important;
}
input:focus,
select:focus,
textarea:focus,
.search:focus { outline: 2px solid rgb(23 107 91 / 18%) !important; border-color: var(--admin-brand) !important; }

table th { background: #f8f9fa !important; color: var(--admin-muted) !important; }
table td { color: var(--admin-ink) !important; border-color: #edf0f2 !important; }
.tag,
.status,
.pill { background: #eef2f4 !important; color: #46545c !important; }
.tag.resolved,
.status.active,
.status.paid,
.status.completed { background: #ecfdf3 !important; color: #067647 !important; }
.tag.follow_up,
.status.suspended,
.status.pending { background: #fff6e5 !important; color: var(--admin-warn) !important; }
.tag.missed,
.status.blacklisted,
.status.failed { background: #fef3f2 !important; color: var(--admin-danger) !important; }

.notice,
.alert,
.error-bar { border-radius: 6px !important; }
.empty { color: var(--admin-muted) !important; }

.admin-sidebar { display: none; }
body.admin-portal .admin-sidebar {
  position: fixed;
  z-index: 5;
  inset: 0 auto 0 0;
  width: 196px;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  background: #111b21;
  color: #e7ecef;
}
.admin-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; border-bottom: 1px solid #ffffff18; }
.admin-sidebar-brand strong { display: block; font-size: 13px; }
.admin-sidebar-brand small { color: #9facb4; font-size: 10px; }
.admin-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 6px; background: var(--admin-brand); color: #fff; font-weight: 800; }
.admin-sidebar nav { display: grid; gap: 4px; }
.admin-sidebar nav a { padding: 9px 10px; border-radius: 6px; color: #b8c3c9 !important; font-size: 13px; font-weight: 600; text-decoration: none; }
.admin-sidebar nav a:hover,
.admin-sidebar nav a.active { background: #223138; color: #fff !important; }
body.admin-portal .shell { width: auto; max-width: none; margin: 0; padding: 0 24px 40px 220px; }
body.admin-portal .bar,
body.admin-portal .top { width: auto; margin-left: 196px; padding-left: 24px !important; }
body.admin-portal #app .top { margin-left: 0; }
body.admin-portal .wrap { width: auto; max-width: 1200px; margin: 40px 24px 40px 220px; }

@media (max-width: 560px) {
  .top,
  .bar { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 760px) {
  body.admin-portal .admin-sidebar { position: sticky; inset: auto; width: auto; height: auto; padding: 10px 12px; }
  body.admin-portal .admin-sidebar-brand { padding-bottom: 10px; }
  body.admin-portal .admin-sidebar nav { display: flex; overflow-x: auto; }
  body.admin-portal .admin-sidebar nav a { white-space: nowrap; }
  body.admin-portal .shell { padding: 0 14px 28px; }
  body.admin-portal .bar,
  body.admin-portal .top { margin-left: 0; }
  body.admin-portal .wrap { margin: 24px 14px; }
}