/* Green Mentor console. Colours, corners and type follow the approved design
   (docs/design/admin/admin_core_v1.html) and the app's design system: 8 px controls, 12 px cards,
   brand green with gold for "now" and special things. Light and dark follow the device. */
:root {
  --bg: #EFF4EF; --surface: #FFFFFF; --on-surface: #191C1A; --on-variant: #55605A;
  --outline: #DFE4DF; --outline-strong: #C9D1CA;
  --primary: #0B7A3E; --on-primary: #FFFFFF;
  --mint: #DCEBDF; --mint-soft: #E7F4EB; --on-mint: #00552A;
  --cream: #FFF6E3; --cream-line: #F3E2B6; --on-cream: #3D2A00; --gold-text: #9A6400; --gold-icon: #C78A12; --gold-bright: #F2C14E;
  --header-a: #0C7A42; --header-b: #085A33;
  --error: #BA1A1A; --error-bg: #FFDAD6; --on-error-bg: #410002;
  --danger: #BA1A1A; --on-danger: #FFFFFF;
  --side: #FFFFFF; --side-active: #DCEBDF; --row-alt: #F6F9F6;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1511; --surface: #1B221D; --on-surface: #DFE4DF; --on-variant: #BFC9C1;
    --outline: #303731; --outline-strong: #404943;
    --primary: #86D9A0; --on-primary: #00391B;
    --mint: #1A3325; --mint-soft: #1A3325; --on-mint: #C4EFCF;
    --cream: #33290F; --cream-line: #4F3F18; --on-cream: #FFE8A3; --gold-text: #F2C14E; --gold-icon: #F2C14E;
    --header-a: #0A5C35; --header-b: #053620;
    --error: #FFB4AB; --error-bg: #5C1A14; --on-error-bg: #FFDAD6;
    --danger: #FFB4AB; --on-danger: #690005;
    --side: #151B17; --side-active: #1A3325; --row-alt: #182019;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--on-surface);
  font-family: "Noto Sans Bengali", "Nirmala UI", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; line-height: 1.5;
}
a { color: var(--primary); }
.icon { width: 20px; height: 20px; fill: currentColor; flex: none; vertical-align: middle; }
.icon.small { width: 17px; height: 17px; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; white-space: nowrap; }
.muted { color: var(--on-variant); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Frame */
.console { display: grid; grid-template-columns: 248px 1fr; grid-template-rows: 56px 1fr; min-height: 100vh; }
.topbar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 16px; color: #fff;
  background: linear-gradient(135deg, var(--header-a), var(--header-b));
}
.brand { display: flex; align-items: center; gap: 10px; width: 216px; color: #fff; text-decoration: none; }
.brand svg { width: 32px; height: 32px; border-radius: 8px; }
.brand b { display: block; font-family: Poppins, Roboto, system-ui, sans-serif; font-weight: 700; font-size: 16px; }
.brand small { display: block; font-size: 10px; letter-spacing: 1.6px; color: var(--gold-bright); }
.environment { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; }
.environment.dev { background: var(--gold-bright); color: #3D2A00; }
.environment.prod { background: #FFDAD6; color: #410002; }
.spacer { flex: 1; }
.language { display: flex; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; overflow: hidden; margin: 0; }
.language button { border: 0; background: transparent; color: #fff; font: inherit; font-size: 12.5px; padding: 5px 10px; cursor: pointer; }
.language button[aria-pressed="true"] { background: rgba(255,255,255,.22); font-weight: 600; }
.me { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.me .avatar { width: 30px; height: 30px; border-radius: 50%; background: #DCEBDF; color: #00552A; display: grid; place-items: center; font-weight: 600; box-shadow: 0 0 0 2px #DDA43A; }
.me small { display: block; font-size: 11.5px; opacity: .85; }
.signout { margin: 0; }
.signout button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; border-radius: 8px; height: 32px; padding: 0 10px; font: inherit; font-size: 12.5px; cursor: pointer; }

.sidebar { background: var(--side); border-right: 1px solid var(--outline); padding: 10px 8px; font-size: 13.5px; }
.sidebar .group { font-size: 11.5px; font-weight: 600; color: var(--on-variant); margin: 10px 10px 3px; }
.sidebar .group:first-child { margin-top: 2px; }
.sidebar .item { display: flex; align-items: center; gap: 10px; height: 31px; padding: 0 10px; border-radius: 8px; color: var(--on-surface); text-decoration: none; }
.sidebar .item .icon { width: 19px; height: 19px; color: var(--on-variant); }
.sidebar a.item:hover { background: var(--row-alt); }
.sidebar .item.active { background: var(--side-active); color: var(--on-mint); font-weight: 600; }
.sidebar .item.active .icon { color: var(--on-mint); }
.sidebar .item.soon { color: var(--on-variant); }
.sidebar .item .soon-tag { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--gold-text); background: var(--cream); border-radius: 6px; padding: 0 6px; }

.main { padding: 18px 22px 40px; min-width: 0; }
.page-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.page-head .title { flex: 1; }
.page-head h1 { margin: 0; font-size: 21px; font-weight: 600; }
.page-head .help { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--on-variant); margin-top: 3px; }
.page-head .help .icon { width: 17px; height: 17px; color: var(--primary); }

/* Parts */
.card { background: var(--surface); border-radius: 12px; border: 1px solid var(--outline); margin-bottom: 14px; }
.card > h2 { margin: 0; padding: 11px 16px; font-size: 14.5px; font-weight: 600; border-bottom: 1px solid var(--outline); display: flex; align-items: center; gap: 8px; }
.card > h2 .icon { color: var(--primary); }
.card > h2 .aside { margin-left: auto; font-weight: 500; font-size: 12.5px; color: var(--on-variant); }
.card .body { padding: 14px 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat { padding: 12px 14px; margin: 0; }
.stat .label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--on-variant); }
.stat .label .icon { width: 18px; height: 18px; color: var(--primary); }
.stat .value { display: block; font-weight: 700; font-size: 22px; margin: 6px 0 2px; }
.stat .note { font-size: 12px; color: var(--on-variant); }
.stat .note.bad { color: var(--error); font-weight: 600; }
.columns { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.columns.wide-left { grid-template-columns: 1.35fr 1fr; }
.empty { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--on-variant); }
.empty .icon { color: var(--primary); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 600; font-size: 12px; color: var(--on-variant); padding: 8px 14px; border-bottom: 1px solid var(--outline); background: var(--row-alt); }
td { padding: 9px 14px; border-bottom: 1px solid var(--outline); vertical-align: middle; line-height: 1.45; }
tr:last-child td { border-bottom: 0; }
td small { display: block; font-size: 11.5px; color: var(--on-variant); }
td.actions { text-align: right; white-space: nowrap; }

.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tag.on { background: var(--mint); color: var(--on-mint); }
.tag.waiting { background: var(--cream); color: var(--gold-text); border: 1px solid var(--cream-line); }
.tag.off { background: var(--error-bg); color: var(--on-error-bg); }
.tag.plain { background: var(--row-alt); color: var(--on-variant); border: 1px solid var(--outline); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; border: 0; background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; font-size: 13.5px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.button.outline { background: transparent; color: var(--primary); border: 1px solid var(--outline-strong); }
.button.small { height: 30px; padding: 0 10px; font-size: 12.5px; }
.button.danger { background: var(--danger); color: var(--on-danger); }
.button .icon { width: 18px; height: 18px; }

form.stack { display: grid; gap: 12px; }
form.inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.field { display: grid; gap: 4px; }
.field label { font-size: 12.5px; font-weight: 600; }
.field .hint { font-size: 11.5px; color: var(--on-variant); }
input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="datetime-local"], select, textarea {
  font: inherit; font-size: 13.5px; color: var(--on-surface); background: var(--surface);
  border: 1px solid var(--outline-strong); border-radius: 8px; padding: 7px 10px; min-height: 36px; width: 100%;
}
textarea { min-height: 64px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.checks { display: grid; gap: 6px; }
.checks label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 13px; }
.checks small { display: block; font-size: 11.5px; color: var(--on-variant); }

.callout { display: flex; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--mint-soft); color: var(--on-mint); font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
.callout.gold { background: var(--cream); color: var(--on-cream); border: 1px solid var(--cream-line); }
.callout.bad { background: var(--error-bg); color: var(--on-error-bg); }
.callout .icon { width: 18px; height: 18px; }

.ladder { display: grid; gap: 6px; padding: 12px 16px; }
.step { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.step .level { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: var(--mint); color: var(--on-mint); flex: none; }
.step .level.top { background: var(--cream); color: var(--gold-text); }
.step small { display: block; font-size: 11.5px; color: var(--on-variant); }

.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; padding: 12px 16px; font-size: 13px; }
.kv span { color: var(--on-variant); }

/* Feature status: the change form beside the parts, and rows that need someone */
.columns.status-layout { grid-template-columns: 1fr 380px; align-items: start; }
.segments { display: flex; flex-wrap: wrap; border: 1px solid var(--outline-strong); border-radius: 8px; overflow: hidden; width: fit-content; max-width: 100%; }
.segments label { display: flex; align-items: center; font-size: 13px; font-weight: 500; cursor: pointer; }
.segments label + label { border-left: 1px solid var(--outline-strong); }
.segments input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segments span { padding: 6px 12px; }
.segments input:checked + span { background: var(--mint); color: var(--on-mint); font-weight: 600; }
.segments input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: -2px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; }
form.cancel-schedule { margin-bottom: 14px; }
form.cancel-schedule input { flex: 1; min-width: 160px; }
.todo { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--outline); }
.todo:last-child { border-bottom: 0; }
.todo .text { flex: 1; min-width: 0; }
.todo .text b { display: block; font-size: 13.5px; font-weight: 600; }
.todo .text small { display: block; font-size: 12px; color: var(--on-variant); }
.todo-icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--mint); color: var(--on-mint); }
.todo.gold .todo-icon { background: var(--cream); color: var(--gold-icon); }
.todo.bad .todo-icon { background: var(--error-bg); color: var(--error); }

/* Home layout: one row per part, and a small picture of Home */
.block-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--outline); border-radius: 8px; }
.block-row.fixed { background: var(--row-alt); color: var(--on-variant); }
.block-row select { width: auto; min-width: 64px; }
.block-row .text { flex: 1; min-width: 0; }
.block-row .text b { display: block; font-size: 13.5px; font-weight: 600; }
.block-row .text small { display: block; font-size: 12px; color: var(--on-variant); }
.switch { display: flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.phone-preview { margin: 14px auto 16px; width: 200px; border: 6px solid var(--on-surface); border-radius: 20px; overflow: hidden; background: var(--bg); padding-bottom: 8px; }
.preview-header { background: linear-gradient(135deg, var(--header-a), var(--header-b)); color: #fff; font-size: 11.5px; padding: 14px 10px; }
.preview-block { margin: 6px 6px 0; padding: 8px; border-radius: 8px; background: var(--surface); font-size: 11.5px; }
.preview-block.hidden { opacity: .45; text-decoration: line-through; }
.preview-block small { display: block; text-decoration: none; }
form.discard-draft { margin-top: 10px; }

/* Gold and Star rules: one row per rule, with a box for each number that may change */
h3.rule-section { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--on-variant); }
.rule-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px; padding: 12px; border: 1px solid var(--outline); border-radius: 8px; }
.rule-row.fixed { background: var(--row-alt); }
.rule-row .text { min-width: 0; }
.rule-row .text b { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.rule-row .text small { display: block; font-size: 12px; color: var(--on-variant); }
.rule-row .numbers { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.rule-row .numbers label { display: grid; gap: 4px; font-size: 12px; color: var(--on-variant); }
.rule-row .numbers input { width: 120px; }
ul.changes { margin: 0; padding-left: 16px; font-size: 12.5px; }

/* Discover */
.checks-row { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.source-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: center; margin-top: 6px; }
textarea.tall { min-height: 280px; }
.plain-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
ul.issues-bad li { color: var(--error); }
input.short { width: 80px; }
.word-row { display: flex; align-items: center; gap: 8px; }
.list-actions { margin-bottom: 12px; }
@media (max-width: 800px) { .source-row { grid-template-columns: 1fr; } }

/* Members and tickets */
.card.narrow { max-width: 640px; }
.queue-tabs { margin-bottom: 12px; }
.queue-tabs a { display: flex; color: inherit; text-decoration: none; font-size: 13px; font-weight: 500; }
.queue-tabs a + a { border-left: 1px solid var(--outline-strong); }
.queue-tabs a.on span { background: var(--mint); color: var(--on-mint); font-weight: 600; }
tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--error); }
.dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--gold-icon); vertical-align: middle; }
.thread { display: grid; gap: 10px; padding: 12px 16px 16px; }
.bubble { max-width: 85%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--outline); background: var(--surface); }
.bubble.member { justify-self: start; background: var(--row-alt); }
.bubble.staff { justify-self: end; background: var(--mint); color: var(--on-mint); border-color: transparent; }
.bubble .who { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.bubble .who small { opacity: .75; }
.bubble p { margin: 4px 0 0; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Pages outside the console frame: sign-in, no access, errors */
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.center-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--outline); border-radius: 12px; padding: 28px 24px; text-align: center; }
.center-card svg.logo { width: 56px; height: 56px; border-radius: 14px; }
.center-card h1 { margin: 14px 0 4px; font-size: 20px; }
.center-card p { margin: 6px 0; color: var(--on-variant); }
.google-button { display: flex; align-items: center; justify-content: center; gap: 12px; height: 48px; margin: 18px 0 8px; border-radius: 8px; border: 1px solid #747775; background: #FFFFFF; color: #1F1F1F; font-family: Roboto, system-ui, sans-serif; font-weight: 500; font-size: 15px; text-decoration: none; }
.google-button svg { width: 20px; height: 20px; }
@media (prefers-color-scheme: dark) { .google-button { background: #131314; border-color: #8E918F; color: #E3E3E3; } }

/* A phone's browser: the menu goes above the page. */
@media (max-width: 800px) {
  .console { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .topbar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .brand { width: auto; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--outline); }
  /* Parts not built yet stay off a small screen, so the page is not pushed far down. */
  .sidebar .item.soon, .sidebar .group.soon { display: none; }
  .main { padding: 14px 12px 32px; }
  .card { overflow-x: auto; }
  .columns, .columns.wide-left, .columns.status-layout { grid-template-columns: 1fr; }
  .todo { flex-wrap: wrap; }
  .kv { grid-template-columns: 1fr; }
  td, th { padding: 8px 10px; }
}