@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================================
   "الميزان" — Ledger Instrument theme.
   Green-bar columnar paper, double-entry ink, tabular mono
   figures. Every number reads like a line on a trial balance.
   ============================================================ */
:root {
    --paper: #e8ece7;        /* cool pale green-bar ledger pad   */
    --surface: #f6f8f4;      /* worksheet sheet                  */
    --surface-2: #eef2ec;    /* green-bar band / inset           */
    --ink: #16211b;          /* deep pine-black ink              */
    --ink-soft: #444f48;
    --muted: #79857c;
    --line: #d6ddd4;         /* hairline rule                    */
    --rule: #b7c1b4;         /* ledger rule (stronger)           */

    --agree: #1c6b4a;        /* balanced / completed — green ink */
    --agree-bg: #e3ede6;
    --agree-line: #bcd4c6;
    --flag: #b23a2e;         /* discrepancy / failed — red pencil*/
    --flag-bg: #f2e2df;
    --flag-line: #dfbcb6;
    --pending: #9c7a1e;      /* in progress — amber              */
    --pending-bg: #efe8d4;
    --pending-line: #dccea0;
    --info: #3a5560;         /* converted — slate                */
    --info-bg: #e5edf0;
    --info-line: #c7d7dd;

    --accent: #16211b;
    --accent-hover: #2c3a32;

    --sans: 'IBM Plex Sans Arabic', system-ui, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', 'Cascadia Code', Consolas, monospace;
}

@layer base {
    body {
        background: var(--paper);
        color: var(--ink);
        font-family: var(--sans);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3, .display {
        font-family: var(--sans);
        color: var(--ink);
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.25;
    }

    ::selection { background: rgba(28, 107, 74, .18); }

    /* Tabular figures everywhere they matter — the ledger signature. */
    .num, .mono, .data-table .num, .stat-value {
        font-family: var(--mono);
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1;
    }

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

@layer components {
    .wrap { max-width: 74rem; margin-inline: auto; padding: 2.25rem 1.5rem; }

    /* ---- Page header: a ledger folio line ---- */
    header {
        background: var(--surface);
        border-bottom: 1px solid var(--rule);
    }
    .page-kicker {
        font-family: var(--mono);
        font-size: .68rem;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: var(--muted);
    }
    .page-title {
        font-family: var(--sans);
        font-weight: 600;
        font-size: 1.75rem;
        color: var(--ink);
        margin-top: .3rem;
    }

    /* ---- Surfaces ---- */
    .panel {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: .5rem;
        box-shadow: 0 1px 0 rgba(22, 33, 27, .02);
    }
    .panel-pad { padding: 1.5rem 1.65rem; }
    .panel-title {
        font-family: var(--sans);
        font-weight: 600;
        font-size: 1.02rem;
        color: var(--ink);
        display: flex;
        align-items: center;
        gap: .55rem;
    }
    /* small ledger tick before every panel title */
    .panel-title::before {
        content: "";
        width: .5rem; height: .5rem;
        border: 1.5px solid var(--rule);
        border-radius: 1px;
        transform: rotate(45deg);
        flex: none;
    }
    .panel-sub { font-size: .82rem; color: var(--muted); line-height: 1.7; }
    .divider { border: 0; border-top: 1px solid var(--line); margin: 1.15rem 0; }

    /* ---- Worksheet tables ---- */
    .data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
    .data-table thead th {
        text-align: start;
        color: var(--muted);
        font-weight: 500;
        font-family: var(--mono);
        font-size: .66rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        padding: .6rem .9rem;
        border-bottom: 1.5px solid var(--ink);   /* trial-balance rule */
        white-space: nowrap;
    }
    .data-table tbody td {
        padding: .72rem .9rem;
        border-bottom: 1px solid var(--line);
        color: var(--ink-soft);
    }
    /* green-bar banding */
    .data-table tbody tr:nth-child(even) { background: var(--surface-2); }
    .data-table tbody tr:last-child td { border-bottom: 1.5px solid var(--rule); }
    .data-table tbody tr:hover { background: rgba(28, 107, 74, .05); }
    .data-table .num { color: var(--ink); }

    /* ---- Buttons & links ---- */
    .btn {
        display: inline-flex; align-items: center; gap: .45rem;
        padding: .52rem 1.2rem; border-radius: .38rem;
        font-family: var(--sans); font-weight: 500; font-size: .88rem;
        border: 1px solid transparent; cursor: pointer;
        transition: background .15s ease, border-color .15s ease, transform .05s ease;
    }
    .btn:active { transform: translateY(1px); }
    .btn-primary { background: var(--accent); color: var(--paper); }
    .btn-primary:hover { background: var(--accent-hover); }
    .btn-ghost { background: transparent; border-color: var(--rule); color: var(--ink); }
    .btn-ghost:hover { background: rgba(22, 33, 27, .04); border-color: var(--ink); }
    .link {
        color: var(--ink);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: var(--rule);
        transition: text-decoration-color .15s ease;
    }
    .link:hover { text-decoration-color: var(--agree); color: var(--agree); }

    /* ---- Status: the auditor's marks ---- */
    .badge {
        display: inline-flex; align-items: center; gap: .34rem;
        padding: .16rem .6rem .16rem .55rem;
        border-radius: 999px; font-size: .74rem; font-weight: 500;
        border: 1px solid; font-family: var(--sans);
    }
    .badge::before {
        font-family: var(--mono); font-weight: 600; font-size: .82em;
        line-height: 1;
    }
    .badge-pending   { color: var(--muted);   background: #eceee9; border-color: var(--line); }
    .badge-pending::before   { content: "•"; }
    .badge-converted { color: var(--info);    background: var(--info-bg);    border-color: var(--info-line); }
    .badge-converted::before { content: "»"; }
    .badge-sent      { color: var(--pending); background: var(--pending-bg); border-color: var(--pending-line); }
    .badge-sent::before      { content: "~"; }
    .badge-completed { color: var(--agree);   background: var(--agree-bg);   border-color: var(--agree-line); }
    .badge-completed::before { content: "\2713"; }   /* ✓ agree */
    .badge-failed    { color: var(--flag);    background: var(--flag-bg);    border-color: var(--flag-line); }
    .badge-failed::before    { content: "\2717"; }   /* ✗ flagged */

    /* ---- Form fields ---- */
    .field {
        width: 100%; background: #fff; border: 1px solid var(--rule);
        border-radius: .38rem; padding: .6rem .85rem; color: var(--ink);
        font-family: var(--sans); font-size: .92rem;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .field::placeholder { color: var(--muted); }
    .field:focus { outline: none; border-color: var(--agree); box-shadow: 0 0 0 3px rgba(28, 107, 74, .14); }
    .label {
        display: block; font-family: var(--mono); font-size: .7rem;
        color: var(--muted); letter-spacing: .12em; text-transform: uppercase;
        margin-bottom: .4rem;
    }

    /* ---- Stat / folio cards ---- */
    .stat {
        position: relative; background: var(--surface);
        border: 1px solid var(--line); border-radius: .5rem;
        padding: 1rem 1.4rem .95rem; min-width: 11.5rem; overflow: hidden;
    }
    .stat::before {
        content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
        height: 3px; background: var(--agree);
    }
    .stat-label {
        font-family: var(--mono); font-size: .66rem; color: var(--muted);
        letter-spacing: .16em; text-transform: uppercase;
    }
    .stat-value { font-size: 1.7rem; color: var(--ink); margin-top: .25rem; font-weight: 500; }

    /* ---- Preformatted content ---- */
    .pre-block {
        white-space: pre-wrap; word-break: break-word;
        background: var(--surface-2); border: 1px solid var(--line);
        border-radius: .4rem; padding: 1.05rem 1.2rem; font-size: .9rem;
        color: var(--ink-soft); line-height: 1.95; font-family: var(--sans);
    }
    .pre-mono { font-family: var(--mono); font-size: .8rem; line-height: 1.6; }

    /* ---- Notices ---- */
    .notice { padding: .85rem 1.1rem; border-radius: .4rem; font-size: .9rem; border: 1px solid; border-inline-start-width: 3px; }
    .notice-ok  { background: var(--agree-bg); border-color: var(--agree-line); border-inline-start-color: var(--agree); color: var(--agree); }
    .notice-err { background: var(--flag-bg);  border-color: var(--flag-line);  border-inline-start-color: var(--flag);  color: var(--flag); }

    /* ---- Top navigation ---- */
    .app-nav { background: var(--surface); border-bottom: 1px solid var(--rule); }
    .app-nav .nav-wrap {
        max-width: 74rem; margin-inline: auto; height: 4.25rem;
        display: flex; align-items: center; padding: 0 1.5rem; gap: 2rem;
    }
    .brand {
        display: inline-flex; align-items: center; gap: .55rem;
        font-family: var(--sans); font-weight: 700; font-size: 1.22rem;
        color: var(--ink); letter-spacing: -0.01em;
    }
    .brand::before {
        content: "=";                 /* the balance / equals sign */
        font-family: var(--mono); font-weight: 600; color: var(--agree);
        font-size: 1.1rem;
    }
    .nav-links { display: flex; gap: 1.7rem; }
    .nav-link {
        color: var(--muted); font-size: .93rem; font-weight: 500;
        padding: .2rem 0; border-bottom: 2px solid transparent; transition: .15s;
    }
    .nav-link:hover { color: var(--ink); }
    .nav-link.active { color: var(--ink); border-bottom-color: var(--agree); }
    .nav-user {
        margin-inline-start: auto; display: flex; align-items: center;
        gap: 1.1rem; color: var(--muted); font-size: .86rem;
    }

    /* ---- Auth worksheet card ---- */
    .auth-shell {
        min-height: 100dvh; display: flex; align-items: center; justify-content: center;
        padding: 1.5rem; background:
            var(--paper)
            repeating-linear-gradient(0deg, transparent 0 2.15rem, rgba(183, 193, 180, .28) 2.15rem 2.2rem);
    }
    .auth-card {
        width: 100%; max-width: 25rem; background: var(--surface);
        border: 1px solid var(--line); border-radius: .55rem; overflow: hidden;
        box-shadow: 0 18px 40px -24px rgba(22, 33, 27, .35);
    }
    .auth-head {
        padding: 1.5rem 1.75rem 1.35rem;
        background: var(--ink); color: var(--paper);
    }
    .auth-brand {
        display: inline-flex; align-items: center; gap: .5rem;
        font-weight: 700; font-size: 1.3rem;
    }
    .auth-brand::before { content: "="; font-family: var(--mono); color: #7fc0a0; }
    .auth-kicker {
        font-family: var(--mono); font-size: .64rem; letter-spacing: .24em;
        text-transform: uppercase; color: #9bb0a5; margin-top: .55rem;
    }
    .auth-body { padding: 1.65rem 1.75rem 1.85rem; }
}