/* Datang-inspired theme layer. Dynamic colors are set by /assets/theme.js. */
:root {
  --brand: #b01f24;
  --brand-deep: #8a1519;
  --brand-dark: #1e2329;
  --brand-soft: #fbedee;
  --gold: #c9a227;
  --card-radius: 20px;
}

.admin-body {
  background-color: #f4f2ef;
}

.sidebar {
  background:
    radial-gradient(420px 300px at 20% 0%, rgba(176, 31, 36, 0.3), transparent 65%),
    linear-gradient(180deg, #20262d 0%, #161b21 100%);
}
.sidebar-brand img,
.auth-brand img,
.public-brand img {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(176, 31, 36, 0.42), rgba(176, 31, 36, 0.1));
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.16);
}
.nav-item.active::before {
  background: var(--gold);
  box-shadow: 0 0 14px rgba(201, 162, 39, 0.55);
}
.admin-card .avatar {
  color: #f3d998;
  border-color: rgba(201, 162, 39, 0.22);
}
.hero-card {
  background:
    radial-gradient(640px 340px at 88% 8%, rgba(201, 162, 39, 0.22), transparent 60%),
    radial-gradient(500px 380px at 100% 100%, rgba(176, 31, 36, 0.22), transparent 60%),
    linear-gradient(120deg, #291113 0%, #1e2329 62%, #15191e 100%);
  border-color: rgba(201, 162, 39, 0.12);
}
.hero-pill .dot {
  background: #e4c15d;
  box-shadow: 0 0 0 3px rgba(228, 193, 93, 0.14);
}
.hero-copy h2 em {
  color: #e4c15d;
}
.hero-id,
.hero-chip {
  border-color: rgba(201, 162, 39, 0.24);
}
.profile-cover {
  background:
    radial-gradient(420px 200px at 85% 0%, rgba(201, 162, 39, 0.25), transparent 60%),
    linear-gradient(110deg, #2b1214, #1e2329);
}
.bar-col .bar-track i {
  background: linear-gradient(180deg, #d24a4f, var(--brand));
}
.bar-col.is-today .bar-track i {
  background: linear-gradient(180deg, #e5c56a, var(--gold));
}
.chart-legend i {
  background: var(--brand);
}
.chart-legend i.amber {
  background: var(--gold);
}
.dept-bar i {
  background: linear-gradient(90deg, #d98a8d, var(--brand));
}
.quick-card {
  background: linear-gradient(160deg, #fdf9f3, #faf3e8);
  border-color: #eee1cd;
}
.quick-card h4 svg,
.quick-link:hover,
.quick-link:hover svg {
  color: var(--brand);
}
.stat-icon {
  background: var(--brand-soft);
  color: var(--brand);
}
.qr-frame::before,
.qr-frame::after {
  border-color: var(--brand);
}
.btn-primary {
  box-shadow: 0 1px 2px rgba(138, 21, 25, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.page-banner {
  border-color: #ecd7a6;
  background: #fffaf0;
}
.settings-save-bar .btn-primary {
  background: var(--brand);
}
.topbar-user {
  background: linear-gradient(145deg, #f3dcda, #e7bcb9);
  color: var(--brand-deep);
  border-color: rgba(176, 31, 36, 0.16);
}

.auth-visual {
  background:
    radial-gradient(700px 500px at 20% 0%, rgba(176, 31, 36, 0.45), transparent 60%),
    radial-gradient(600px 600px at 100% 100%, rgba(201, 162, 39, 0.15), transparent 55%),
    linear-gradient(155deg, #2a1214 0%, #1e2329 58%, #12161b 100%);
}
.auth-visual::after {
  border-color: rgba(201, 162, 39, 0.16);
}
.visual-kicker,
.setup-steps li.is-active small {
  color: #e4c15d;
}
.setup-steps li.is-active b {
  background: var(--brand);
  border-color: #d56a6e;
  box-shadow: 0 0 0 5px rgba(176, 31, 36, 0.18);
}
.auth-head .auth-eyebrow {
  color: var(--brand);
}
.auth-form .btn-primary {
  background: var(--brand);
}
.auth-form .input-wrap:focus-within {
  border-color: #c98a8d;
  box-shadow: 0 0 0 3px rgba(176, 31, 36, 0.1);
}

.scan-body {
  background:
    radial-gradient(720px 480px at 8% -8%, #f1dfdc 0%, transparent 58%),
    radial-gradient(620px 420px at 100% 108%, #efe8d4 0%, transparent 55%),
    #f6f3ef;
}
.id-hero {
  background:
    radial-gradient(460px 260px at 92% 4%, rgba(255, 255, 255, 0.2), transparent 58%),
    radial-gradient(300px 220px at 0% 100%, rgba(0, 0, 0, 0.28), transparent 65%),
    linear-gradient(148deg, var(--brand) 0%, var(--brand-deep) 62%, #2b0d0f 100%);
}
.scan-status-pill {
  border-color: rgba(255, 255, 255, 0.24);
}
.pa-btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  box-shadow: 0 6px 18px rgba(176, 31, 36, 0.22);
}
.pa-btn-primary:hover {
  background: linear-gradient(135deg, #c62b31, var(--brand-deep));
}
.verified-strip {
  color: #8a5d12;
  background: linear-gradient(90deg, #fbf5e5, #fffdf7 68%, #fff);
  border-bottom-color: #f0e5c9;
}
.verified-strip .v-icon {
  background: #f4e7c4;
  color: #9a6c16;
}
.public-tags span {
  background: #fbf0ef;
  color: #8a3a3d;
}
.public-info-icon {
  background: #f7f2eb;
  color: #9a7a58;
}
.scan-notice {
  border-color: #eadfce;
}
.public-toast {
  background: rgba(30, 35, 41, 0.96);
}

/* Manage centre */
.manage-body {
  background-color: #f4f2ef;
}
.m-sidebar {
  background:
    radial-gradient(420px 300px at 20% 0%, rgba(176, 31, 36, 0.3), transparent 65%),
    linear-gradient(180deg, #20262d 0%, #161b21 100%);
}
.m-nav-item.active {
  background: linear-gradient(90deg, rgba(176, 31, 36, 0.42), rgba(176, 31, 36, 0.1));
}
.m-nav-item.active::before {
  background: var(--gold);
}

/* Override base radius where configured. */
.card,
.table-card,
.profile-card,
.qr-panel,
.id-card,
.state-card {
  border-radius: var(--card-radius);
}
.record-form-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--form-color, var(--brand));
  flex: none;
}
.auth-visual .mini-avatar {
  background: linear-gradient(145deg, #e6c574, var(--brand));
  color: #2b1112;
}
.auth-visual .mini-ok {
  color: #f3d998;
  border-color: rgba(201, 162, 39, 0.35);
  background: rgba(176, 31, 36, 0.16);
}
.auth-visual .visual-card {
  border-color: rgba(201, 162, 39, 0.18);
}
.hero-chip {
  color: #f3d998;
  border-color: rgba(201, 162, 39, 0.22);
  background: rgba(30, 35, 41, 0.72);
}
.hero-chip svg {
  color: var(--gold);
}
/* Read-only account: hide write entry points (server still enforces). */
body.is-viewer [data-action="new-person"],
body.is-viewer [data-action="open-import"],
body.is-viewer [data-action="person-edit"],
body.is-viewer [data-action="person-delete"],
body.is-viewer [data-action="bulk-enable"],
body.is-viewer [data-action="bulk-disable"],
body.is-viewer [data-action="bulk-delete"],
body.is-viewer .bulk-bar,
body.is-viewer #export-people {
  display: none !important;
}
.id-hero .id-avatar {
  background: linear-gradient(145deg, #e8c87a, var(--brand, #B01F24));
  color: #fff;
}
.avatar {
  background: var(--brand-soft, #fbeaeb);
  color: var(--brand-deep, #7d1519);
}
.status-options > label:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.status-options b {
  color: var(--brand-deep);
}