/* Safety Observer Web — shield identity: safety green #0C5A36, orange #F26B21 */
:root {
  --green: #0C5A36;
  --green-deep: #08402a;
  --orange: #F26B21;
  --ink: #1d2622;
  --muted: #5c6a64;
  --line: #d9e2dd;
  --bg: #f2f5f3;
  --card: #ffffff;
  --danger: #b3261e;
  --warn-bg: #fff4e5;
  --warn-line: #f0c48c;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Calibri, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.45;
}
h1, h2, h3 { color: var(--green-deep); margin: 0 0 .5rem; }
a { color: var(--green); }
label { display: block; font-size: .86rem; font-weight: 600; color: var(--muted); }
label input, label select, label textarea {
  display: block; width: 100%; margin-top: .3rem;
  font: inherit; font-weight: 400; color: var(--ink);
  padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px;
  background: #fff;
}
textarea { resize: vertical; }
.block { margin: .8rem 0; }

/* ---------- buttons ---------- */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: 9px; border: 1px solid transparent;
  padding: .55rem 1.05rem; background: #e7edea; color: var(--ink);
}
.btn:hover { filter: brightness(.97); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-google {
  width: 100%; background: #fff; border-color: var(--line); color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .65rem;
}
.g-mark {
  font-weight: 700; color: #4285f4; font-size: 1.1rem; line-height: 1;
}
.btn-small { padding: .3rem .6rem; font-size: .85rem; border-radius: 7px; }

/* ---------- sign-in ---------- */
.signin-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #0C5A36 0%, #08402a 70%);
  padding: 1.2rem;
}
.signin-card {
  background: var(--card); border-radius: 16px; padding: 2rem 2.2rem;
  max-width: 420px; width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.35);
  text-align: center;
}
.shield-lg { width: 74px; height: 74px; }
.signin-card h1 { font-size: 1.7rem; margin-top: .4rem; }
.tagline { color: var(--muted); margin: .2rem 0 1.3rem; }
.signin-card form { text-align: left; display: grid; gap: .8rem; margin-top: .6rem; }
.signin-card .btn-primary { width: 100%; padding: .65rem; }
.divider {
  display: flex; align-items: center; gap: .8rem; color: var(--muted);
  font-size: .82rem; margin: 1.1rem 0 .2rem;
}
.divider::before, .divider::after {
  content: ""; flex: 1; border-top: 1px solid var(--line);
}
.switch-line { font-size: .9rem; color: var(--muted); }
.fineprint { font-size: .78rem; color: var(--muted); margin-top: 1.1rem; }
/* V5.7: the registration sex selector (two radio options). */
.rg-sex { border: 0; padding: 0; margin: .4rem 0; }
.rg-sex legend { font-size: .9rem; padding: 0; margin-bottom: .25rem; }
.rg-sex label.inline { display: inline-flex; align-items: center; gap: .3rem; margin-right: 1.2rem; }
.error {
  color: var(--danger); background: #fdecea; border: 1px solid #f3c1bd;
  padding: .5rem .7rem; border-radius: 8px; font-size: .9rem; margin: 0;
}

/* ---------- app frame ---------- */
.topbar {
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .55rem 1.1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .55rem; }
.shield-sm { width: 30px; height: 30px; }
.brand-name { font-size: 1.2rem; font-weight: 700; }
.brand-sub {
  background: var(--orange); color: #fff; font-size: .72rem; font-weight: 700;
  padding: .12rem .45rem; border-radius: 999px; text-transform: uppercase;
  letter-spacing: .04em;
}
.topbar-right { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.proj-picker { color: #dcebe2; display: flex; align-items: center; gap: .5rem; }
.proj-picker select {
  width: auto; margin: 0; min-width: 210px; font-weight: 600;
}
.hdr-email { font-size: .9rem; color: #dcebe2; }
.topbar .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }

.tabs {
  display: flex; gap: .3rem; padding: .5rem 1.1rem 0; flex-wrap: wrap;
  background: var(--bg);
}
.tab {
  font: inherit; font-weight: 600; cursor: pointer;
  background: transparent; border: none; border-bottom: 3px solid transparent;
  padding: .5rem .8rem; color: var(--muted);
}
.tab.active { color: var(--green); border-bottom-color: var(--orange); }

main { padding: 1.1rem; max-width: 1240px; margin: 0 auto; }
.foot {
  color: var(--muted); font-size: .82rem; text-align: center;
  padding: 1.4rem 1rem 2rem;
}

/* ---------- dashboard cards ---------- */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1rem; margin-bottom: 1.2rem;
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem 1.2rem; box-shadow: 0 2px 8px rgba(12,90,54,.05);
}
.card h3 { font-size: 1.15rem; margin-bottom: .15rem; }
.card .sub { color: var(--muted); font-size: .88rem; margin-bottom: .8rem; }
.chip {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: .14rem .5rem; border-radius: 999px; background: #e8f1ec;
  color: var(--green); text-transform: uppercase; letter-spacing: .03em;
}
.chip.stream-leadership { background: #fdeee2; color: #9a4a0d; }
.chip.chip-auto { background: #fdeee2; color: #9a4a0d; font-size: .62rem; padding: .08rem .4rem; vertical-align: middle; }
.hero-num { font-size: 2rem; font-weight: 700; color: var(--green); line-height: 1.1; }
.hero-label { color: var(--muted); font-size: .82rem; margin-bottom: .7rem; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .9rem; }
.stat { font-size: .9rem; color: var(--muted); }
.stat b { color: var(--ink); font-size: 1rem; }
.stat .bad { color: var(--danger); }

/* ---------- panels & forms ---------- */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem 1.2rem; margin-bottom: 1rem;
}
.panel.narrow { max-width: 760px; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.form-grid.one { grid-template-columns: 1fr; }
.form-actions { display: flex; gap: .5rem; align-items: end; }
.hint { color: var(--muted); font-size: .87rem; }
.status { font-size: .9rem; min-height: 1.2em; margin: .5rem 0 0; }
.status.ok { color: var(--green); }
.status.err { color: var(--danger); }
.cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; align-items: start; }
.stack { display: grid; gap: 0; }
@media (max-width: 900px) {
  .cols, .form-grid { grid-template-columns: 1fr; }
}

/* ---------- KPI strip ---------- */
.kpis { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: .7rem 1rem; min-width: 150px;
}
.kpi .v { font-size: 1.35rem; font-weight: 700; color: var(--green); }
.kpi .k { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.kpi.warn .v { color: var(--danger); }

/* ---------- tables ---------- */
table.grid {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  font-size: .92rem;
}
table.grid th {
  background: var(--green); color: #fff; text-align: left;
  padding: .5rem .6rem; font-size: .83rem;
}
table.grid td { padding: .45rem .6rem; border-top: 1px solid var(--line); vertical-align: top; }
table.grid tr.overdue td { background: #fdf1f0; }
.row-actions { white-space: nowrap; display: flex; gap: .35rem; }
.status-open { color: #9a4a0d; font-weight: 700; }
.status-closed { color: var(--green); font-weight: 700; }
.obs-text { max-width: 340px; }

/* ---------- misc ---------- */
.note, .warn {
  border-radius: 10px; padding: .7rem .9rem; font-size: .92rem; margin-bottom: 1rem;
}
.note { background: #e8f1ec; border: 1px solid #bcd6c6; }
.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.empty, .empty-inline { color: var(--muted); }
.empty {
  background: var(--card); border: 1px dashed var(--line); border-radius: 14px;
  padding: 1.4rem; margin-bottom: 1rem;
}
.lti-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .45rem; }
.lti-list li {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  border: 1px solid var(--line); border-radius: 9px; padding: .45rem .7rem;
  font-size: .92rem;
}
.lib-tools { margin-bottom: .8rem; }
.lib-tools select { width: auto; display: inline-block; margin-left: .4rem; }
.lib-list { display: grid; gap: .6rem; }
.lib-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: .8rem 1rem; display: flex; justify-content: space-between;
  gap: 1rem; align-items: center; flex-wrap: wrap;
}
.lib-item .t { font-weight: 700; }
.lib-item .m { color: var(--muted); font-size: .86rem; }
.lib-item .acts { display: flex; gap: .45rem; }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 30, 20, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 2.2rem 1rem; overflow-y: auto; z-index: 50;
}
.modal {
  background: #fff; border-radius: 14px; max-width: 860px; width: 100%;
  padding: 1.3rem 1.5rem; box-shadow: 0 22px 60px rgba(0,0,0,.35);
}
.modal-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.modal-actions { display: flex; gap: .5rem; }
.modal-meta { color: var(--muted); font-size: .88rem; margin-bottom: .6rem; }
.modal-body h4 { color: var(--green); margin: 1rem 0 .35rem; }
.modal-body table { border-collapse: collapse; width: 100%; font-size: .9rem; margin: .5rem 0; }
.modal-body th { background: var(--green); color: #fff; text-align: left; padding: .4rem .5rem; }
.modal-body td { border: 1px solid var(--line); padding: .4rem .5rem; }

/* ---------- reports (wave A) ---------- */
.section-title { margin: 1.4rem 0 .4rem; font-size: 1.15rem; }
.section-title:first-child { margin-top: 0; }
.house-card { cursor: pointer; }
.house-card.selected { outline: 2px solid var(--green); outline-offset: -2px; }
.house-card h3 { font-size: 1.02rem; }

/* ---------- hidden must always win ----------
   Author display rules (e.g. .modal-backdrop / .signin-wrap set
   display:flex) defeat the browser's built-in [hidden] rule, which
   left the document modal permanently on screen in v1. This guard
   restores the contract for every toggled element. */
[hidden] { display: none !important; }

/* ---- Wave B: tools ---- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.chips .chip {
  border: 1px solid #b9c8c0; background: #fff; color: #234;
  border-radius: 999px; padding: .3rem .8rem; cursor: pointer;
  font-size: .9rem; font-weight: 400; text-transform: none; letter-spacing: 0;
}
.chips .chip.selected { background: #0c5a36; color: #fff; border-color: #0c5a36; }
.fld-label { display: block; font-weight: 600; margin-bottom: .25rem; }
.row { display: flex; align-items: center; }
.row.gap { gap: .5rem; flex-wrap: wrap; }
.std-group { margin: .6rem 0; }
.std-entry { border-top: 1px solid #e3eae6; padding: .45rem 0; }
.std-entry .ref { font-weight: 700; color: #0c5a36; }
.qa-refs { background: #eef5f1; border-radius: 8px; padding: .5rem .8rem; margin-top: .5rem; }
.calc-result {
  font-size: 1.15rem; font-weight: 700; margin: .6rem 0 .2rem;
}
.risk-grid { border-collapse: collapse; margin: .6rem 0; }
.risk-grid td {
  width: 44px; height: 34px; text-align: center; border: 1px solid #fff;
  font-weight: 600; color: #223;
}
.risk-grid td.hl { outline: 3px solid #222; outline-offset: -3px; }
.cv-job, .cv-edu {
  border: 1px solid #d7e0da; border-radius: 8px; padding: .6rem .8rem;
  margin: .6rem 0;
}
@media print {
  body * { visibility: hidden; }
  #cv-print-area, #cv-print-area * { visibility: visible; }
  #cv-print-area { position: absolute; inset: 0; padding: 24px; }
}

/* ---- Wave C: capture ---- */
.photo-preview {
  display: block; max-width: 360px; max-height: 260px; width: auto;
  border-radius: 8px; margin: .5rem 0; border: 1px solid #cfd8d2;
}

/* ---- Wave D: professional shell ---- */
.topbar {
  background: linear-gradient(120deg, var(--green-deep) 0%, var(--green) 65%);
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 2px 14px rgba(8, 64, 42, .28);
  padding: .6rem 1.2rem;
}
.tabs {
  background: #fff; padding: .45rem 1.2rem; gap: .35rem;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 6px rgba(12, 90, 54, .06);
  position: sticky; top: 0; z-index: 30;
}
.tab {
  border: 1px solid transparent; border-radius: 999px;
  padding: .42rem .85rem;
}
.tab:hover { background: #eef4f0; }
.tab.active {
  color: #fff; background: var(--green); border-bottom-color: transparent;
}

/* header identity — mirrors the phone app's home header */
.hdr-identity {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px; padding: .35rem .6rem; cursor: pointer; font: inherit;
  color: #fff; min-width: 0;
}
.hdr-identity:hover { background: rgba(255,255,255,.15); }
.hdr-avatar-wrap { flex: 0 0 auto; display: flex; }
.hdr-avatar {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; background: #fff;
}
.hdr-initials {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--orange); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; font-size: 1rem;
}
.hdr-id-text { display: flex; flex-direction: column; min-width: 118px; max-width: 220px; }
.hdr-name { font-weight: 700; font-size: .98rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-designation { font-size: .78rem; color: #cde5d8; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-company-logo {
  width: 100%; max-height: 24px; object-fit: contain; object-position: left center;
  background: #fff; border-radius: 4px; padding: 1px 3px; margin-top: 2px;
}
.hdr-company-name { font-size: .75rem; color: #a9cdb9; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-email { font-size: .72rem; color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 820px) {
  .hdr-email { display: none; }
  .hdr-id-text { min-width: 92px; max-width: 150px; }
  .proj-picker select { min-width: 140px; }
}

/* dashboard info line */
.infoline {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--orange);
  border-radius: 10px; padding: .55rem .9rem; margin: 0 0 1rem;
  font-size: .95rem; font-weight: 600; color: var(--green-deep);
  box-shadow: 0 1px 5px rgba(12,90,54,.05);
}
.infoline:empty { display: none; }

/* library folders */
.lib-folders { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.folder-tile {
  display: flex; align-items: center; gap: .55rem; font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: .7rem 1rem; box-shadow: 0 1px 5px rgba(12,90,54,.05);
}
.folder-tile:hover { border-color: var(--green); }
.folder-tile.active { outline: 2px solid var(--green); outline-offset: -2px; }
.folder-icon { font-size: 1.3rem; }
.folder-name { font-weight: 700; color: var(--green-deep); }
.folder-count { color: var(--muted); font-size: .85rem; }
.lib-folder-bar { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }

/* scaffolding catalogue */
.scf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .8rem; margin-top: .8rem;
}
.scf-card {
  font: inherit; cursor: pointer; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: .55rem; display: flex; flex-direction: column; gap: .5rem;
}
.scf-card:hover { border-color: var(--green); }
.scf-card img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; }
.scf-card span { font-weight: 700; color: var(--green-deep); font-size: .92rem; }
.scf-hero { width: 100%; max-height: 420px; object-fit: contain; border-radius: 10px; background: #f7faf8; }
.scf-illus {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--green); background: #e8f1ec;
  border-radius: 999px; padding: .12rem .5rem; margin: .4rem 0;
}
.scf-points { margin: .3rem 0 .8rem; padding-left: 1.2rem; }
.scf-points li { margin: .25rem 0; }
.scf-standard { font-weight: 600; color: var(--green-deep); }

/* profile page */
.pf-files { display: flex; gap: 2rem; flex-wrap: wrap; margin: .6rem 0; }
.pf-photo-preview {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--green); display: block; margin-bottom: .5rem;
}
.pf-logo-preview {
  max-width: 220px; max-height: 54px; object-fit: contain; display: block;
  margin-bottom: .5rem; background: #fff; border: 1px solid var(--line);
  border-radius: 6px; padding: 3px;
}

/* settings */
.stamp-toggle {
  display: flex; align-items: center; gap: .55rem; font-size: .95rem;
  color: var(--ink); cursor: pointer;
}
.stamp-toggle input { width: auto; margin: 0; }

/* ---- v1.9/V5.2: accounts, verification & admin ---- */
.signin-card.wide { max-width: 640px; }
.checkline { display: flex; gap: .5rem; align-items: flex-start; font-weight: 600; }
.checkline input { width: auto; margin-top: .2rem; }
.policy-box {
  max-height: 240px; overflow-y: auto; white-space: pre-wrap;
  text-align: left; font-size: .78rem; line-height: 1.45;
  background: var(--card, #fff); border: 1px solid var(--line, #d8ded8);
  border-radius: 8px; padding: .7rem; font-family: inherit;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th, .admin-table td {
  text-align: left; padding: .45rem .5rem;
  border-bottom: 1px solid var(--line, #d8ded8); vertical-align: top;
}
.chip-off { opacity: .55; }
.chip-blocked { background: var(--danger, #b3261e); color: #fff; }
.admin-line {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px solid var(--line, #eef1ee);
}
.admin-line span { color: var(--muted, #68736a); }
.admin-actions { margin: 1rem 0; }
.admin-activity-list { list-style: none; padding: 0; margin: 0; }
.admin-activity-list li {
  display: flex; gap: .6rem; padding: .3rem 0;
  border-bottom: 1px solid var(--line, #eef1ee); font-size: .88rem;
}
.admin-selfie { max-width: 140px; border-radius: 8px; }
.admin-docphoto { max-width: 260px; border-radius: 8px; }
/* V5.5 Owner Document View: the drawer's content sections. */
.admin-content-list { list-style: none; padding: 0; margin: 0; }
.admin-content-list li {
  padding: .4rem 0; border-bottom: 1px solid var(--line, #eef1ee);
}
.admin-obs, .admin-doc {
  padding: .5rem 0; border-bottom: 1px solid var(--line, #eef1ee);
}
.admin-obs-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
}
.admin-obs-detail { padding: .4rem 0 .2rem; }
.admin-ra-scroll { overflow-x: auto; }

/* V6.0: top-corner language picker (kept in V7.0) */
.lang-sel { font: inherit; font-size: .85rem; padding: .3rem .5rem; border-radius: .5rem; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: inherit; cursor: pointer; }

/* ================= V7.0: Interface Themes =================
   The five interfaces (Android v2.0) restyle the whole app via
   the data-* attributes themes.js sets on <body>. Palette values
   mirror the phone exactly (Palettes.forInterface / forTheme,
   UiSettings.iconAccent). Emerald Executive is the classic
   design: the six colour themes live under it. */
:root {
  --tint: #EAF3EE;
  --header-bg: linear-gradient(120deg, var(--green-deep) 0%, var(--green) 65%);
  --on-header: #ffffff;
  --icon-accent: #0C5A36;
}
body .topbar { background: var(--header-bg); color: var(--on-header); }
body[data-iconcolor="theme"] { --icon-accent: var(--green); }
body[data-iconcolor="green"] { --icon-accent: #0C8A4A; }
body[data-iconcolor="blue"] { --icon-accent: #2470D8; }
body[data-iconcolor="amber"] { --icon-accent: #D88A10; }
body[data-iconcolor="red"] { --icon-accent: #D84A3A; }
body[data-iconcolor="violet"] { --icon-accent: #7A4FD0; }

/* -- Emerald colour themes (Palettes.forTheme) -- */
body[data-iface="emerald"][data-ctheme="navy"] { --green: #16324A; --green-deep: #0E2438; --tint: #E7EEF4; }
body[data-iface="emerald"][data-ctheme="slate"] { --green: #232B33; --green-deep: #171D22; --tint: #ECEFF1; }
body[data-iface="emerald"][data-ctheme="sand"] { --green: #7A5A1E; --green-deep: #5C4315; --tint: #F5EDDA; }
body[data-iface="emerald"][data-ctheme="teal"] { --green: #065A60; --green-deep: #043E42; --tint: #DFEFED; }
body[data-iface="emerald"][data-ctheme="indigo"] { --green: #332C77; --green-deep: #241E54; --tint: #E9E7F6; }

/* -- the four designed interfaces -- */
body[data-iface="aurora"] {
  --green: #0A6E63; --green-deep: #065A60; --tint: #E9EDF5;
  --header-bg: linear-gradient(120deg, #065A60 0%, #1E9E6A 100%);
}
body[data-iface="midnight"] {
  --green: #2ECC82; --green-deep: #0A0E12; --tint: #1B2530;
  --header-bg: #0A0E12; --on-header: #ffffff;
}
body[data-iface="porcelain"] {
  --green: #0C5A36; --green-deep: #0C5A36; --tint: #EAF3EE;
  --header-bg: #FDFDFB; --on-header: #0C5A36; --bg: #FAFAF7;
}
body[data-iface="desert"] {
  --green: #C45A28; --green-deep: #9A4519; --tint: #FAF0DC;
  --header-bg: linear-gradient(120deg, #DCBA85 0%, #C49A68 100%);
  --on-header: #4A3220; --bg: #FAF5EC;
}

/* -- dark background (Midnight forces it; others may choose) -- */
body[data-bg="dark"] {
  --bg: #101613; --card: #1A211D; --ink: #E8EFE9;
  --muted: #9DB3A6; --line: #2C3831;
}
body[data-bg="dark"][data-ctheme="navy"] { --tint: #1B2E3F; }
body[data-bg="dark"][data-ctheme="slate"] { --tint: #2A3238; }
body[data-bg="dark"][data-ctheme="sand"] { --tint: #3A2E18; }
body[data-bg="dark"][data-ctheme="teal"] { --tint: #143231; }
body[data-bg="dark"][data-ctheme="indigo"] { --tint: #28243F; }
body[data-iface="midnight"][data-bg="dark"] {
  --bg: #0B0F14; --card: #131A21; --line: #26313D; --muted: #A8B6C2;
}
body[data-bg="dark"] label input,
body[data-bg="dark"] label select,
body[data-bg="dark"] label textarea,
body[data-bg="dark"] input, body[data-bg="dark"] select,
body[data-bg="dark"] textarea {
  background: #222B25; color: var(--ink); border-color: var(--line);
}
body[data-iface="midnight"] label input,
body[data-iface="midnight"] label select,
body[data-iface="midnight"] label textarea,
body[data-iface="midnight"] input, body[data-iface="midnight"] select,
body[data-iface="midnight"] textarea { background: #1B2530; }
body[data-bg="dark"] .tabs { background: var(--card); }
body[data-bg="dark"] .btn { background: #26302A; color: var(--ink); }
body[data-bg="dark"] .btn-primary { background: var(--orange); color: #fff; }
body[data-bg="dark"] .btn-ghost { background: transparent; }
body[data-bg="dark"] .modal { background: var(--card); color: var(--ink); }
body[data-bg="dark"] .note { background: var(--tint); border-color: var(--line); }
body[data-bg="dark"] .folder-tile,
body[data-bg="dark"] .scf-card,
body[data-bg="dark"] .infoline { background: var(--card); color: var(--ink); }
body[data-bg="dark"] .chips .chip { background: var(--card); color: var(--ink); border-color: var(--line); }
body[data-bg="dark"] .chips .chip.selected { background: var(--green); color: #fff; border-color: var(--green); }
body[data-bg="dark"] .qa-refs { background: var(--tint); }
body[data-bg="dark"] .scf-hero { background: var(--tint); }
body[data-bg="dark"] .std-entry { border-top-color: var(--line); }
body[data-iface="midnight"] .tab.active { color: #06281A; }

/* -- light headers (Porcelain / Desert): dark-on-light chrome -- */
body[data-iface="porcelain"] .proj-picker,
body[data-iface="desert"] .proj-picker { color: #54705F; }
body[data-iface="desert"] .proj-picker { color: #6E5433; }
body[data-iface="porcelain"] .hdr-designation,
body[data-iface="porcelain"] .hdr-company-name { color: #54705F; }
body[data-iface="desert"] .hdr-designation,
body[data-iface="desert"] .hdr-company-name { color: #6E5433; }
body[data-iface="porcelain"] .hdr-email { color: rgba(12,90,54,.65); }
body[data-iface="desert"] .hdr-email { color: rgba(74,50,32,.65); }
body[data-iface="porcelain"] .hdr-identity {
  background: rgba(12,90,54,.06); border-color: rgba(12,90,54,.25);
  color: var(--on-header);
}
body[data-iface="desert"] .hdr-identity {
  background: rgba(74,50,32,.08); border-color: rgba(74,50,32,.3);
  color: var(--on-header);
}
body[data-iface="porcelain"] .topbar .btn-ghost,
body[data-iface="desert"] .topbar .btn-ghost {
  color: var(--on-header); border-color: rgba(90,70,40,.4);
}
body[data-iface="porcelain"] .lang-sel,
body[data-iface="desert"] .lang-sel {
  border-color: rgba(90,70,40,.4); background: rgba(255,255,255,.35);
  color: var(--on-header);
}
body[data-iface="porcelain"] .shield-sm path:first-child { fill: #0C5A36; }
body[data-iface="porcelain"] .chip {
  background: transparent; border: 1.5px solid var(--green);
}

/* -- Aurora Cards: centred tiles + gradient hero -- */
body[data-iface="aurora"] #dash-cards .card,
body[data-iface="aurora"] #rep-rsg-cards .card,
body[data-iface="aurora"] #rep-house-cards .card { text-align: center; }
body[data-iface="aurora"] #dash-cards .stat-grid,
body[data-iface="aurora"] #rep-rsg-cards .stat-grid { text-align: left; }
body[data-iface="aurora"] .hero-num {
  background: linear-gradient(120deg, #065A60 0%, #1E9E6A 100%);
  color: #fff; border-radius: 12px; padding: .25rem .9rem;
  display: inline-block;
}
body[data-iface="aurora"] .card-head { justify-content: center; }
body[data-iface="aurora"] .tile-ic .shield-p { fill: var(--tint); }

/* -- home-tile icons: style + colour (Icon style / colour) -- */
.card-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .35rem; }
.card-head h3 { margin: 0; }
.card-head .sub { margin: 0; }
.tile-ic { width: 40px; height: 40px; flex: 0 0 auto; }
.tile-ic svg { width: 100%; height: 100%; display: block; }
body[data-iconstyle="outline"] .tile-ic .shield-p {
  fill: none; stroke: var(--icon-accent); stroke-width: 2.2;
}
body[data-iconstyle="outline"] .tile-ic .tick-p {
  fill: none; stroke: var(--icon-accent); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
}
body[data-iconstyle="filled"] .tile-ic .shield-p { fill: var(--icon-accent); stroke: none; }
body[data-iconstyle="filled"] .tile-ic .tick-p {
  fill: none; stroke: #fff; stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
}
body[data-iconstyle="duo"] .tile-ic .shield-p {
  fill: var(--tint); stroke: var(--icon-accent); stroke-width: 2;
}
body[data-iconstyle="duo"] .tile-ic .tick-p {
  fill: none; stroke: var(--orange); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ================= V7.0: Assistant + Companion ================= */
.plan-bucket { margin: 1.1rem 0 .4rem; font-size: 1.05rem; }
.plan-bucket.overdue { color: var(--danger); }
.plan-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: .65rem .9rem; margin-bottom: .5rem;
  flex-wrap: wrap;
}
.plan-row .p-main { min-width: 0; }
.plan-row .p-title { font-weight: 700; }
.plan-row .p-meta { color: var(--muted); font-size: .86rem; }
.plan-row.done { opacity: .75; }
.plan-row.done .p-title { text-decoration: line-through; color: var(--muted); }
.plan-row.overdue .p-title { color: var(--danger); }
.done-badge {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: 999px;
  background: var(--tint); color: var(--green);
}
.plan-scope { display: flex; gap: .5rem; align-items: center; margin-bottom: .8rem; flex-wrap: wrap; }
.week-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.week-row:last-child { border-bottom: none; }
.week-row .w-date { color: var(--muted); white-space: nowrap; }
.week-row.overdue .w-title { color: var(--danger); font-weight: 700; }
.week-row.today .w-title { font-weight: 700; }
.meeting-points { margin: .4rem 0 .4rem 1.2rem; padding: 0; }
.meeting-points li { margin: .3rem 0; }
.action-tag {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: .08rem .45rem; border-radius: 999px; margin-left: .4rem;
  background: #fdeee2; color: #9a4a0d; vertical-align: middle;
}
body[data-bg="dark"] .action-tag { background: #3A2E18; color: #F2C48C; }

/* ============ V7.0: Monthly Plan review step ============ */
.rev-row {
  display: flex; gap: .5rem; align-items: center; margin-bottom: .45rem;
  flex-wrap: wrap;
}
.rev-row .rev-day { width: 190px; flex: 0 0 auto; }
.rev-row .rev-text { flex: 1 1 260px; }
.rev-row select, .rev-row input {
  font: inherit; padding: .45rem .55rem; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink); width: 100%;
}
body[data-bg="dark"] .rev-row select, body[data-bg="dark"] .rev-row input {
  background: #222B25;
}
.rev-friday { color: var(--danger); font-size: .85rem; font-weight: 600; }

/* ---- V10.0: folders, Documents box, Knowledge ---- */
.folder-tile.active { outline: 2px solid #0c5a36; }
.chip.folder-chip { background: #e7f2ea; color: #0c5a36; font-size: .72rem;
  padding: .1rem .5rem; vertical-align: middle; margin-left: .4rem; }
.convert-menu { display: inline-flex; gap: .3rem; align-items: center;
  flex-wrap: wrap; }
.lib-item .acts { flex-wrap: wrap; justify-content: flex-end; }
.hf-attach { border-top: 1px dashed #b9c8bd; margin-top: 1rem; padding-top: .6rem; }
.ed-stage { display: flex; justify-content: center; background: #525659;
  padding: .8rem; border-radius: .5rem; margin: .6rem 0; }
.ed-stage canvas { max-width: 100%; height: auto; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.4); touch-action: none; }
.spacer { flex: 1; }
.kb-panel { margin-bottom: 1rem; }
.kb-ask, .kb-find { border-top: 1px dashed #b9c8bd; margin-top: .8rem; padding-top: .8rem; }
.kb-ask input[type="text"], .kb-find input[type="text"] { flex: 1; }
.kb-answerbox { background: #eef6f0; border: 1px solid #bcd6c2;
  border-radius: .5rem; padding: .7rem .9rem; margin-top: .6rem; }
.kb-answerbox p { margin: .2rem 0; white-space: pre-wrap; }
.btn.small { padding: .25rem .6rem; font-size: .85rem; }
.row.wrap { flex-wrap: wrap; }

/* V10.2: Generate Reports accordion (one-door reporting) */
.gen-list { display: flex; flex-direction: column; gap: .5rem;
  margin-bottom: 1rem; }
.gen-row { border: 1px solid var(--line); border-radius: 10px;
  background: var(--card, #fff); }
.gen-row.open { outline: 2px solid #0c5a36; }
.gen-head { width: 100%; display: flex; justify-content: space-between;
  align-items: center; gap: .6rem; background: none; border: 0;
  padding: .7rem .9rem; font: inherit; font-weight: 600;
  cursor: pointer; color: inherit; text-align: left; }
.gen-arrow { color: var(--muted); font-weight: 400; }
.gen-body { padding: 0 .9rem .85rem; }
.gen-body .hint { margin-top: 0; }
.btn.danger, .btn.btn-small.danger { color: var(--danger); }