/* ══ Glitch System — ICONI brand ═════════════════════════════
   ICONI – Tourism Sector (Syrian Sovereignty Fund)
   Night Black is the brand's primary background, so the dark theme is
   the primary look here and the light theme is the alternate.

   Brand fonts (Collier for titles, Hergon Grotesk for body) are not
   available as web fonts, and the nginx CSP blocks external font hosts.
   The system stack stands in; the brand's ALL-CAPS letter-spaced
   section-label rule is applied so the typographic voice still reads.  */

:root {
  /* ── Brand core ───────────────────────────────────── */
  --iconi-black:     #0c181c;   /* Night Black   */
  --iconi-white:     #ffffff;   /* Pure White    */
  --iconi-off-white: #f2f2f2;   /* Off-White     */
  --iconi-lt-grey:   #e6e6e6;   /* Light Grey    */
  --iconi-deep-blue: #032b4a;   /* Deep Blue     */
  --iconi-orange:    #e65a2f;   /* Sunny Orange  */
  --iconi-sea-blue:  #0057a4;   /* Sea Blue      */
  --iconi-gold:      #f5d0a5;   /* Golden Sand   */
  --iconi-sky:       #63b5f6;   /* Sky Blue      */

  /* ── Semantic surfaces (dark = primary) ───────────── */
  --bg:        var(--iconi-black);
  --surface:   #13242a;         /* one tonal step off Night Black */
  --surface-2: #1b3038;
  --line:      #26424c;
  --text:      var(--iconi-white);
  --muted:     #9db0b8;

  /* Interactive uses Sea Blue; Sunny Orange is reserved for accents
     and alerts, per the brand's usage rules. */
  --primary:   var(--iconi-sea-blue);
  --primary-d: var(--iconi-deep-blue);
  --accent:    var(--iconi-orange);

  /* Status. The palette carries no red or green, but the brand's status
     rules call for them (Green = completed, Red = overdue/issue), so
     both are tuned to sit with Night Black rather than shout over it. */
  --ok:     #2e8b62;
  --warn:   var(--iconi-orange);
  --danger: #d92d20;

  /* Priority ramp: red for critical only, then the brand accents. */
  --p1: #d92d20;
  --p2: var(--iconi-orange);
  --p3: var(--iconi-sea-blue);
  --p4: #7b8a90;

  --radius: 14px;
  --tap: 48px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        var(--iconi-off-white);
    --surface:   var(--iconi-white);
    --surface-2: var(--iconi-off-white);
    --line:      var(--iconi-lt-grey);
    --text:      var(--iconi-black);
    --muted:     #5a6a70;
    --p4:        #6b7a80;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto,
        "Noto Sans Arabic", sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0; }
.muted { color: var(--muted); font-size: 0.875rem; }
[hidden] { display: none !important; }

/* Logo swaps with the theme so it always has contrast. */
.logo { display: block; height: auto; }
.logo-on-dark  { display: block; }
.logo-on-light { display: none; }
@media (prefers-color-scheme: light) {
  .logo-on-dark  { display: none; }
  .logo-on-light { display: block; }
}

/* ── Login ─────────────────────────────────────────────── */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  /* Night Black ground with a whisper of Deep Blue, so the stamp logo
     sits on brand colour rather than flat black. */
  background:
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in srgb, var(--iconi-deep-blue) 55%, transparent) 0%,
      transparent 60%),
    var(--iconi-black);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: color-mix(in srgb, var(--iconi-black) 82%, #ffffff);
  border: 1px solid #26424c;
  border-radius: 20px;
  padding: 28px 24px;
  display: grid;
  gap: 16px;
  color: var(--iconi-white);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* The login card is always dark, so it always takes the white logo. */
.login-card .logo-on-dark  { display: block; }
.login-card .logo-on-light { display: none; }

.brand { display: grid; justify-items: center; gap: 12px; margin-bottom: 4px; }
.brand .logo { width: 108px; }
.brand h1 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
}
.brand-rule {
  width: 56px; height: 2.5px;
  background: var(--accent);          /* brand accent line */
  border-radius: 2px;
}
.brand p { color: #9db0b8; font-size: 0.8rem; }

.login-card .field > span { color: #9db0b8; }
.login-card input {
  background: rgba(255, 255, 255, 0.06);
  border-color: #26424c;
  color: var(--iconi-white);
}

.field { display: grid; gap: 6px; }
.field > span {
  font-size: 0.72rem; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}

input, select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.btn {
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-danger  { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.btn-ok      { background: var(--ok);      border-color: var(--ok);      color: #fff; }
.btn-block { width: 100%; }
.btn-sm { min-height: 38px; font-size: 0.85rem; padding: 0 12px; }

/* The primary call to action carries the brand accent. */
#login-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
}

.lang-toggle {
  background: none; border: 0; color: #9db0b8;
  font: inherit; text-decoration: underline; cursor: pointer;
  padding: 8px; min-height: 40px;
}
.error {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  border: 1px solid var(--danger);
  color: var(--iconi-white);
  padding: 10px 12px; border-radius: 10px; font-size: 0.875rem;
}

/* Brand footer: org | contact | iconi.sy */
.brand-footer {
  margin-top: 4px;
  border-top: 1px solid #26424c;
  padding-top: 12px;
  display: grid; gap: 2px;
  text-align: center;
  font-size: 0.68rem;
  color: #7d8f97;
  letter-spacing: 0.04em;
}
.brand-footer strong { color: var(--iconi-white); font-weight: 700; }

/* ── Shell ─────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--iconi-black);
  /* Brand rule: Night Black header with a Sunny Orange bottom border. */
  border-bottom: 2.5px solid var(--accent);
  color: var(--iconi-white);
}
.topbar h2 {
  font-size: 0.95rem; flex: 1;
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
.topbar .logo { width: 34px; }
.topbar-right { display: flex; gap: 4px; }
.icon-btn {
  min-width: 40px; height: 40px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--iconi-white);
  font-size: 1.05rem; cursor: pointer;
}
.icon-btn:active { background: rgba(255, 255, 255, 0.12); }
/* The bar is always Night Black, so always the white logo. */
.topbar .logo-on-dark  { display: block; }
.topbar .logo-on-light { display: none; }

main {
  padding: 16px 14px calc(96px + var(--safe-b));
  max-width: 780px;
  margin-inline: auto;
}

/* Connectivity state. Amber when offline, Sea Blue while syncing —
   never silent, because a staff member needs to know their report is
   held rather than lost. */
.net-banner {
  position: sticky; top: 54px; z-index: 19;
  padding: 9px 14px;
  font-size: 0.78rem; font-weight: 650;
  text-align: center; letter-spacing: 0.03em;
  background: var(--accent); color: #fff;
}
.net-banner.syncing { background: var(--primary); }
.net-banner.queued  { background: var(--iconi-gold); color: var(--iconi-black); }

.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
  display: flex;
  padding: 6px 8px calc(6px + var(--safe-b));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.tabbar button {
  flex: 1; position: relative;
  min-height: 56px;
  display: grid; place-items: center; gap: 2px;
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 0.7rem; font-weight: 600;
}
.tabbar button.active { color: var(--accent); }
.tab-ico { font-size: 1.15rem; line-height: 1; }
.nav-primary { color: var(--text); }
.nav-primary .tab-ico {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 1.3rem; font-weight: 700;
}
.tab-badge {
  position: absolute; top: 4px; inset-inline-end: 22%;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 0.65rem; display: grid; place-items: center;
}

/* ── Cards & KPIs ──────────────────────────────────────── */
.kpi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 20px;
}
@media (min-width: 560px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }

.kpi {
  background: var(--surface); border: 1px solid var(--line);
  /* Brand rule: Sunny Orange top border on KPI blocks. */
  border-top: 2.5px solid var(--accent);
  border-radius: var(--radius); padding: 14px;
  cursor: pointer; text-align: start;
  color: var(--text);
}
.kpi-val { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.kpi-lbl {
  font-size: 0.68rem; color: var(--muted); margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700;
}
.kpi.alert { border-top-color: var(--danger); }
.kpi.alert .kpi-val { color: var(--danger); }
.kpi.warn  .kpi-val { color: var(--warn); }

.section-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 700; margin: 22px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin-bottom: 10px;
  cursor: pointer; display: grid; gap: 8px;
}
.card:active { background: var(--surface-2); }
.card-top { display: flex; align-items: flex-start; gap: 10px; }
.card-title { font-weight: 620; flex: 1; line-height: 1.35; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card-thumb {
  width: 52px; height: 52px; border-radius: 10px;
  object-fit: cover; background: var(--surface-2); flex: none;
}

.chip {
  font-size: 0.68rem; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
  white-space: nowrap; letter-spacing: 0.03em;
}
.chip-p1 { background: color-mix(in srgb, var(--p1) 20%, transparent); color: var(--p1); }
.chip-p2 { background: color-mix(in srgb, var(--p2) 20%, transparent); color: var(--p2); }
.chip-p3 { background: color-mix(in srgb, var(--p3) 22%, transparent); color: var(--p3); }
.chip-p4 { background: color-mix(in srgb, var(--p4) 25%, transparent); color: var(--p4); }
.chip-breached { background: var(--danger); color: #fff; }
.chip-due_soon { background: var(--accent); color: #fff; }
.chip-repeat   { background: var(--iconi-gold); color: var(--iconi-black); }
.chip-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: -0.02em;
}

.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex: none;
}
.status-new          { background: var(--danger); }
.status-acknowledged { background: var(--accent); }
.status-assigned     { background: var(--iconi-sky); }
.status-in_progress  { background: var(--primary); }
.status-on_hold      { background: var(--p4); }
.status-resolved     { background: var(--ok); }
.status-verified     { background: var(--ok); }
.status-closed       { background: var(--muted); }

/* ── Filter tabs ───────────────────────────────────────── */
.filters {
  display: flex; gap: 6px; overflow-x: auto;
  margin-bottom: 14px; padding-bottom: 4px;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filters button {
  flex: none; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.filters button.active {
  background: var(--iconi-deep-blue); border-color: var(--iconi-deep-blue);
  color: #fff;
}

/* ── Detail view ───────────────────────────────────────── */
.detail-head {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 2.5px solid var(--accent);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}
.detail-head h3 { font-size: 1.15rem; margin-bottom: 8px; line-height: 1.35; }
.kv {
  display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px;
  font-size: 0.875rem; margin-top: 12px;
}
.kv dt {
  color: var(--muted); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; align-self: center;
}
.kv dd { margin: 0; }

.photo-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.photo-strip img {
  width: 104px; height: 104px; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line); flex: none; cursor: pointer;
}
.photo-wrap { position: relative; flex: none; }
.photo-tag {
  position: absolute; inset-inline-start: 6px; bottom: 6px;
  font-size: 0.6rem; font-weight: 700; padding: 2px 6px;
  border-radius: 6px; background: rgba(12, 24, 28, 0.82); color: #fff;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.photo-tag.evidence { background: var(--ok); color: #fff; }

.timeline { display: grid; gap: 0; }
.tl-item { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.tl-rail { display: grid; justify-items: center; }
.tl-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); margin-top: 6px;
}
.tl-line { width: 2px; flex: 1; background: var(--line); min-height: 16px; }
.tl-body { padding-bottom: 14px; }
.tl-what { font-size: 0.9rem; font-weight: 600; }
.tl-when { font-size: 0.75rem; color: var(--muted); }
.tl-note { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

/* ── Report form ───────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cat {
  min-height: 84px; padding: 10px 6px;
  display: grid; place-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 0.72rem; font-weight: 600;
  cursor: pointer; text-align: center; line-height: 1.25;
}
.cat.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.cat-dot { width: 22px; height: 22px; border-radius: 7px; }

.photo-add {
  min-height: 104px; width: 104px;
  border: 2px dashed var(--line); border-radius: 12px;
  background: var(--surface); color: var(--muted);
  display: grid; place-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 600; cursor: pointer; flex: none;
}
.form-stack { display: grid; gap: 18px; }

/* ── Misc ──────────────────────────────────────────────── */
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-ico { font-size: 2.5rem; opacity: 0.4; display: block; margin-bottom: 10px; }

.toast {
  position: fixed; inset-inline: 16px; bottom: calc(84px + var(--safe-b));
  z-index: 50; padding: 13px 16px; border-radius: 12px;
  background: var(--iconi-black); border: 1px solid var(--line);
  color: var(--iconi-white);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  font-size: 0.9rem; text-align: center;
}
.toast.ok    { background: var(--ok);     color: #fff; border-color: transparent; }
.toast.error { background: var(--danger); color: #fff; border-color: transparent; }

.spinner {
  width: 22px; height: 22px; margin: 40px auto;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(12, 24, 28, 0.96);
  display: grid; place-items: center; padding: 16px;
}
.lightbox img { max-width: 100%; max-height: 88dvh; border-radius: 10px; }

/* RTL: logical properties handle most of it; flip the back arrow. */
[dir="rtl"] #back-btn { transform: scaleX(-1); }