/* ==========================================================================
   ÖGOY — mockup design system
   Shared by index.html, mobile.html, back-office.html, head-office.html.

   Why this file exists: the three surfaces are one product, not three. The
   same Event record reaches a guard, an ops manager and a client at different
   authority levels, so the surfaces must read as one system. Tokens live here;
   each surface only sets its own ground colour and density.
   ========================================================================== */

:root{
  /* --- ground / chrome -------------------------------------------------- */
  --anthracite:#131a21;   /* uniform anthracite — mobile ground, office chrome */
  --slate:#1e2933;        /* raised surface on dark ground                     */
  --slate-2:#28353f;      /* pressed / hovered surface on dark ground          */
  --paper:#eceef1;        /* cool recycled-stock light ground (office)         */
  --card:#ffffff;

  /* --- ink -------------------------------------------------------------- */
  --ink:#111820;
  --muted:#68757f;        /* secondary text on light                          */
  --muted-d:#8a99a6;      /* secondary text on dark                           */
  --line:#d6dbe1;
  --line-d:#31404b;

  /* --- state (the only colours that carry meaning) ---------------------- */
  --hivis:#f5b301;        /* duty / attention / the single accent            */
  --hivis-ink:#4a3500;
  --alarm:#cf3520;        /* incident, panic, overdue, failed verification   */
  --verified:#0f7c6c;     /* QR + GPS both passed                            */
  --pending:#93a1ad;      /* not yet due                                     */

  /* --- geometry --------------------------------------------------------- */
  --r-chip:2px;
  --r-ctl:4px;
  --r-card:8px;
  --r-phone:30px;

  --f-display:"Barlow Condensed","Arial Narrow",Haettenschweiler,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",Roboto,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono","Cascadia Mono",Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--f-body);
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

/* Display face is used with restraint: titles, numerals, ribbon labels.
   Never for running text — condensed type at body size is hostile. */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;margin:0;line-height:1.12}
h1{font-size:34px;letter-spacing:.005em}
h2{font-size:24px}
h3{font-size:19px}
h4{font-size:16px}
p{margin:0 0 12px}
a{color:inherit}

.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* Eyebrow: a category label, not decoration. Only used where the thing below
   genuinely belongs to a named group (a module, a surface, a site). */
.eyebrow{
  font-family:var(--f-body);
  font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}

/* Turkish domain term kept in place and glossed. In Turkish it is just a word,
   so the gloss styling comes off. */
.tr{font-style:italic}
body[data-lang="tr"] .tr{font-style:normal}

/* ==========================================================================
   Language switch. Turkish ships in the markup — the pages read Turkish with
   JavaScript off. English is carried in data-en and swapped in by ogoy-i18n.js.
   ========================================================================== */
.langs{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden;flex:none}
.langs button{
  font:inherit;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  padding:4px 10px;border:0;background:var(--card);color:var(--muted);cursor:pointer;
}
.langs button+button{border-left:1px solid var(--line)}
.langs button[aria-pressed="true"]{background:var(--anthracite);color:#fff}
.on-dark .langs,.surface-mobile .langs{border-color:var(--line-d)}
.on-dark .langs button,.surface-mobile .langs button{background:transparent;color:var(--muted-d)}
.on-dark .langs button+button,.surface-mobile .langs button+button{border-left-color:var(--line-d)}
.on-dark .langs button[aria-pressed="true"],
.surface-mobile .langs button[aria-pressed="true"]{background:var(--hivis);color:var(--hivis-ink)}

:focus-visible{outline:2px solid var(--hivis);outline-offset:2px}

/* ==========================================================================
   Requirement tags — every mocked element traces to a BRD requirement.
   Toggleable, because a stakeholder reviewing the flow wants them off and an
   analyst checking coverage wants them on.
   ========================================================================== */
.br{
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.02em;
  padding:1px 4px;border-radius:var(--r-chip);
  background:rgba(245,179,1,.16);
  color:#8a6400;
  border:1px solid rgba(245,179,1,.5);
  white-space:nowrap;vertical-align:1px;
}
.on-dark .br,.surface-mobile .br{background:rgba(245,179,1,.14);color:var(--hivis);border-color:rgba(245,179,1,.35)}
body:not(.show-br) .br{display:none}
/* Separators that only exist to punctuate a requirement tag go with it —
   otherwise turning tags off leaves a dangling "Module 7 ·". */
body:not(.show-br) .br-sep{display:none}

/* ==========================================================================
   Chips — one shape, meaning carried only by state colour.
   ========================================================================== */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:2px 7px;border-radius:var(--r-chip);
  border:1px solid var(--line);background:#f5f6f8;color:var(--muted);
  white-space:nowrap;
}
.chip.is-verified{background:rgba(15,124,108,.1);border-color:rgba(15,124,108,.4);color:var(--verified)}
.chip.is-alarm{background:rgba(207,53,32,.1);border-color:rgba(207,53,32,.4);color:var(--alarm)}
.chip.is-duty{background:rgba(245,179,1,.16);border-color:rgba(245,179,1,.55);color:#8a6400}
.chip.is-open{background:rgba(207,53,32,.07);border-color:rgba(207,53,32,.3);color:#9c2c1c}
.on-dark .chip{background:var(--slate-2);border-color:var(--line-d);color:var(--muted-d)}
.on-dark .chip.is-verified{background:rgba(15,124,108,.22);border-color:rgba(15,124,108,.6);color:#5fd3bf}
.on-dark .chip.is-alarm{background:rgba(207,53,32,.22);border-color:rgba(207,53,32,.6);color:#ff8a75}
.on-dark .chip.is-duty{background:rgba(245,179,1,.18);border-color:rgba(245,179,1,.5);color:var(--hivis)}

.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* Live alerts pulse. This is the only ambient motion in the system — an
   unattended alarm should be findable from across a control desk. */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.42}}
.live .dot{animation:pulse 1.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.live .dot{animation:none}}

/* ==========================================================================
   SIGNATURE 1 — the QR + GPS seal.
   BR-2.2 / BR-3.1: both halves must pass. Rendering it as one stamp split in
   two makes a half-failure legible at a glance — and a broken seal is notched.
   ========================================================================== */
.seal{
  display:inline-flex;align-items:stretch;
  font-family:var(--f-mono);font-size:10px;font-weight:500;
  border:1px solid var(--verified);border-radius:var(--r-chip);
  overflow:hidden;line-height:1;
}
.seal span{padding:3px 6px;display:flex;align-items:center;gap:4px;color:var(--verified);background:rgba(15,124,108,.09)}
.seal span+span{border-left:1px solid var(--verified)}
.seal.is-broken{border-color:var(--alarm)}
.seal.is-broken span{border-left-color:var(--alarm)}
.seal.is-broken .fail{background:rgba(207,53,32,.12);color:var(--alarm)}
/* The notch: a failed seal is physically cut, not just recoloured. */
.seal.is-broken .fail{clip-path:polygon(0 0,100% 0,100% 38%,92% 50%,100% 62%,100% 100%,0 100%)}
.on-dark .seal span{background:rgba(15,124,108,.2);color:#5fd3bf}
.on-dark .seal.is-broken .fail{background:rgba(207,53,32,.22);color:#ff8a75}

/* ==========================================================================
   SIGNATURE 2 — the Duty Ribbon.
   A 24-hour band per site. Shift blocks are segments; patrol rounds are ticks
   coloured by verification state; a handover gap is a notch cut through the
   band; an overlap is a doubled band. One row per site lets an ops manager
   read a whole night as a stack.
   Positioning is by percentage of the day: left = hour/24*100.

   Two lanes, because they answer different questions: shifts on top (who was on
   post), rounds below (was the work proved). Overlapping them made the ticks
   unreadable against the shift fill.
   ========================================================================== */
.ribbon{
  position:relative;height:38px;border-radius:var(--r-ctl);
  background:
    repeating-linear-gradient(to right,
      rgba(255,255,255,.09) 0 1px, transparent 1px calc(100%/24));
  background-color:var(--slate);
  border:1px solid var(--line-d);
  overflow:hidden;
}
.ribbon.on-light{background-color:#dfe4e9;border-color:var(--line);
  background-image:repeating-linear-gradient(to right,rgba(17,24,32,.10) 0 1px,transparent 1px calc(100%/24))}

/* Lane 1 — shifts. */
.ribbon .shift{
  position:absolute;top:4px;height:18px;border-radius:2px;
  background:rgba(245,179,1,.18);border:1px solid rgba(245,179,1,.5);
  display:flex;align-items:center;padding:0 6px;
  font-family:var(--f-mono);font-size:9.5px;color:var(--hivis);
  white-space:nowrap;overflow:hidden;
}
.ribbon.on-light .shift{background:rgba(245,179,1,.28);border-color:#c99400;color:#6b4d00}
.ribbon .shift.is-overlap{top:1px;height:24px;background:rgba(245,179,1,.45);border-style:double;border-width:3px}

/* Handover gap — no guard on post. Cut clean through the band. */
.ribbon .gap{
  position:absolute;top:0;bottom:0;
  background:repeating-linear-gradient(45deg,
    rgba(207,53,32,.55) 0 3px, transparent 3px 6px);
  border-left:1px solid var(--alarm);border-right:1px solid var(--alarm);
}

/* Lane 2 — patrol round ticks, in their own band so they stay readable. */
.ribbon .tick{position:absolute;top:26px;height:9px;width:4px;margin-left:-2px;border-radius:1px}
.ribbon .tick.ok{background:var(--verified)}
.ribbon .tick.late{background:var(--hivis)}
.ribbon .tick.missed{background:var(--alarm);width:6px;height:12px;top:23px}
.ribbon .tick.due{background:var(--pending);opacity:.55}

/* Scale marks sit every six hours so even spacing is honest — five labels
   across a 24-hour band land exactly on 0 / 25 / 50 / 75 / 100 %. */
.ribbon-scale{
  display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:9.5px;color:var(--muted);
  padding-top:4px;
}
.on-dark .ribbon-scale{color:var(--muted-d)}

.ribbon-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--muted)}
.ribbon-legend b{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:5px}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  font:inherit;font-weight:600;font-size:13px;
  padding:7px 14px;border-radius:var(--r-ctl);
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background .12s ease,border-color .12s ease;
}
.btn:hover{background:#f4f6f8}
.btn.primary{background:var(--hivis);border-color:#d09800;color:var(--hivis-ink)}
.btn.primary:hover{background:#ffc21f}
.btn.danger{background:var(--alarm);border-color:#a82817;color:#fff}
.btn.ghost-d{background:transparent;border-color:var(--line-d);color:#dfe6ec}
.btn.ghost-d:hover{background:var(--slate-2)}

/* ==========================================================================
   Cards, panels, tables
   ========================================================================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:16px}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.on-dark .card{background:var(--slate);border-color:var(--line-d);color:#e6ecf1}

table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{
  text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
  padding:0 10px 7px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tbl td{padding:9px 10px;border-bottom:1px solid #eef0f3;vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
.on-dark table.tbl th{color:var(--muted-d);border-bottom-color:var(--line-d)}
.on-dark table.tbl td{border-bottom-color:var(--line-d)}

.stat{font-family:var(--f-display);font-size:38px;line-height:1;font-weight:600}
.stat-l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.on-dark .stat-l{color:var(--muted-d)}

.rows>*{padding:11px 0;border-bottom:1px solid #eaedf0}
.rows>*:last-child{border-bottom:0}
.on-dark .rows>*{border-bottom-color:var(--line-d)}

/* Scope banner — BR-X4 made visible. A client user must always be able to see
   which sites their authority covers; hiding it invites the wrong assumption. */
.scope{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 14px;font-size:12px;
  background:rgba(245,179,1,.13);border-bottom:1px solid rgba(245,179,1,.45);
  color:#6b4d00;
}

/* Print target — Vukuat Defteri and Tutanak must produce printable output
   (BR-X7). These render as a sheet, not as an app screen. */
.sheet{
  background:#fff;border:1px solid var(--line);
  padding:34px 38px;max-width:720px;
  font-family:"Times New Roman",Georgia,serif;font-size:14px;line-height:1.6;
  box-shadow:0 1px 0 rgba(17,24,32,.06),0 8px 24px rgba(17,24,32,.06);
}
.sheet h3{font-family:"Times New Roman",Georgia,serif;font-weight:700;font-size:16px;
  text-align:center;letter-spacing:.06em;text-transform:uppercase}
.sheet table{width:100%;border-collapse:collapse;font-size:12.5px}
.sheet table th,.sheet table td{border:1px solid #b9bfc6;padding:6px 8px;text-align:left;vertical-align:top}
.sheet table th{background:#f2f3f5;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.sig{display:flex;gap:40px;margin-top:34px}
.sig div{flex:1;border-top:1px solid #333;padding-top:6px;font-size:12px}

@media print{
  .noprint{display:none !important}
  body{background:#fff}
  .sheet{border:0;box-shadow:none;max-width:none;padding:0}
}