/* GateMike theme: yellow + navy. Loaded after each page's own styles; remove the <link> to switch it off. */
:root {
  --gm-y: #FFC61A;        /* brand yellow */
  --gm-y-soft: #FFF6D6;
  --gm-y-line: #E8B400;
  --gm-n: #14254D;        /* brand navy */
  --gm-n2: #22397A;
  --gm-wait: #C2410C;     /* "waiting" / "do not disturb" orange, kept apart from the brand yellow */
  --gm-wait-soft: #FFEDE3;
  --brand: #22397A;
  --brand-ink: #14254D;
  --brand-soft: #FFF6D6;
  --bg: #F6F5F0;
  --line: #E6E2D3;
  --warn: #C2410C;
  --warn-soft: #FFEDE3;
  --side: #14254D;
  --side-ink: #CAD3E6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #FFC61A; --brand-ink: #14254D; --brand-soft: #2B2A1A;
    --bg: #0E1424; --panel: #151D31; --line: #26304A; --side: #0A1020; --side-ink: #B9C3D8;
    --warn: #FB8A4C; --warn-soft: #34200F;
  }
}

/* ---------- office / admin / resident screens ---------- */
@media screen {
  .side { background: linear-gradient(180deg, #14254D 0%, #0F1D3E 100%); border-top: 4px solid var(--gm-y); }
  .side .brand { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; color: #fff; }
  .side .brand::before { content: ""; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
    background: url(/brand/gatemike-icon-y.svg) center / cover no-repeat; }
  .side nav a.on { border-left-color: var(--gm-y); background: rgba(255,198,26,.12); color: var(--gm-y); font-weight: 600; }
  .side nav a:hover { background: rgba(255,255,255,.07); }
  .side .badge { background: var(--gm-y); color: var(--gm-n); font-weight: 700; }
  .side .msearch input:focus { border-color: var(--gm-y); }

  .btn.primary { background: var(--gm-y); color: var(--gm-n); border-color: var(--gm-y-line); font-weight: 700; }
  .btn.primary:hover { filter: brightness(1.04); }
  h1 { color: var(--gm-n); }
  .panel { border-radius: 12px; box-shadow: 0 1px 3px rgba(20,37,77,.06); }
  .tag { color: var(--gm-n); }
  tr.sub td { color: var(--gm-n); }

  .stat { border-top: 4px solid var(--gm-y); }
  .grid > .stat:nth-child(4n+2) { border-top-color: var(--gm-n2); }
  .grid > .stat:nth-child(4n+3) { border-top-color: #12A594; }
  .grid > .stat:nth-child(4n+4) { border-top-color: #E8603C; }

  /* login page */
  .auth { background: radial-gradient(circle at 85% 0%, rgba(255,198,26,.35), transparent 45%), linear-gradient(160deg, #14254D, #0B1530); }
  .auth .panel { border: 0; border-top: 6px solid var(--gm-y); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
  .auth .panel::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 16px;
    background: url(/brand/gatemike-icon-y.svg) center / cover no-repeat; }
  .auth h1 { text-align: center; font-size: 26px; }
  .auth h1 + .muted { text-align: center; }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) .tag, :root:not([data-theme="light"]) tr.sub td { color: inherit; }
  :root:not([data-theme="light"]) .auth h1 { color: var(--gm-n); }
}

/* ---------- guard phone, intercom and visitor pages (Hindi screens) ---------- */
/* Green = allow and red = deny/out are not touched: the guards go by those colours. */
.g-top { background: var(--gm-y) !important; color: var(--gm-n) !important; border-bottom: 4px solid var(--gm-n); }
.g-top *:not(input):not(.g-count):not(.g-count *) { color: var(--gm-n) !important; }
.g-top .g-search { box-shadow: 0 0 0 2px var(--gm-n); }
.g-count { background: var(--gm-n) !important; color: var(--gm-y) !important; }
.g-floors button { color: var(--gm-n) !important; }
.g-floors button.on, .v-chips label:has(input:checked) { background: var(--gm-n) !important; border-color: var(--gm-n) !important; color: var(--gm-y) !important; }
.g-flat, .g-row .f, .v-card .fl, .hp-name .fl, .hp-boxes span, .hp-keys button { color: var(--gm-n); }
.g-flat.mine, .v-kinds label:has(input:checked) { background: var(--gm-y-soft) !important; border-color: var(--gm-n) !important; }
.g-nav { border-top: 3px solid var(--gm-y) !important; }
.g-nav a.on { background: var(--gm-y) !important; color: var(--gm-n) !important; }
.g-hint { background: var(--gm-y-soft) !important; color: var(--gm-n) !important; border: 2px solid var(--gm-y); }
.v-cam { background: var(--gm-n) !important; color: #fff !important; }
.v-in:focus { outline-color: var(--gm-n) !important; border-color: var(--gm-n) !important; }
.hp-boxes span.cur { border-color: var(--gm-n) !important; }
/* waiting / do-not-disturb: clear orange instead of pale yellow, so it does not melt into the brand yellow */
.g-call.dnd, .v-ask, .g-sharebtn { background: var(--gm-wait-soft) !important; border-color: var(--gm-wait) !important; color: #7C2D12 !important; }
.g-call.dnd .ic { color: var(--gm-wait) !important; border-color: var(--gm-wait) !important; }
.g-call.dnd .s { color: #7C2D12 !important; }
.v-card.wait { background: var(--gm-wait-soft) !important; border-color: var(--gm-wait) !important; }
.gm-foot { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--gm-n); text-decoration: none; }
.gm-foot img { width: 22px; height: 22px; border-radius: 6px; }