/* Sonbola Connect admin UI: design tokens and base styles. Hand-written, right-to-left first, no
   build step. Four stylesheets, loaded by resources/views/partials/head-assets.blade.php:
     fonts.css       the Cairo font faces (served from /fonts)
     tokens.css      this file: colours, spacing, radii, shadows, type, and the base element styles
     layout.css      the application shell (sidebar, mobile bar, page head, grids) and the sign-in pages
     components.css  cards, tables, badges, buttons, fields, tabs, toasts, charts, chat bubbles
   Brand: deep green #1C4536 and wheat gold #D3A03C, from the Sonbola mark. Every colour a page
   uses is a token here; a page never hard-codes one. Directions use logical properties
   (inline-start/end), so Arabic and English share the same rules. */
:root {
    --bg: #f3f5f3;
    --card: #ffffff;
    --line: #e1e6e2;
    --line-strong: #cfd7d1;
    --text: #17251e;
    --muted: #66756d;
    --brand: #1C4536;
    --brand-dark: #123125;
    --brand-soft: #e8efeb;
    --brand-tint: #f4f7f5;
    --gold: #D3A03C;
    --gold-dark: #b07f24;
    --gold-soft: #fbf1de;
    --ok: #1f8a4c;
    --ok-soft: #dcf2e4;
    --warn: #b45309;
    --warn-soft: #fbf1de;
    --bad: #c0392b;
    --bad-soft: #f9dcd8;
    --info: #0b6b8a;
    --info-soft: #dcecf2;
    /* the chat ground and the outgoing bubble: what the customer actually received */
    --bubble: #d9fdd3;
    --bubble-deep: #cdf5c6;
    --chat: #efeae2;
    --tick: #8696a0;
    --tick-read: #53bdeb;
    --radius: 10px;
    --radius-sm: 6px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(18, 49, 37, .06);
    --shadow: 0 6px 20px rgba(18, 49, 37, .10);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, .28);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --font: "Cairo", "Segoe UI", Tahoma, "Noto Naskh Arabic", Arial, sans-serif;
    --mono: Consolas, "Cascadia Code", "Courier New", monospace;
    --sidebar: 250px;
    --mobile-bar: 56px;
    --content: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
}
a { color: var(--brand); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
h1 { font-size: 1.45rem; margin: 0 0 1rem; font-weight: 700; line-height: 1.3; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; color: var(--brand); font-weight: 700; }
h3 { font-size: 1rem; margin: 0 0 .5rem; color: var(--brand); font-weight: 700; }
p { margin: 0 0 .75rem; }
img, svg { vertical-align: middle; }
code, .mono { font-family: var(--mono); direction: ltr; unicode-bidi: embed; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.error { color: var(--bad); font-size: .9rem; margin: .15rem 0 .5rem; }
.bad-text { color: var(--bad); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[x-cloak] { display: none !important; }