/*
   The panel is a registry desk, not a dashboard.

   The operator's job is literally a registrar's: somebody submits papers, you look at the
   papers, you stamp a decision. So the surface is paper, the text is ink, the tables are ruled,
   and a status is a stamp rather than a coloured sweet. None of that changed.

   What changed is the colour. This used to be the daylight side of a deep Tigris teal, with the
   phone app as its night side. The app is blue on white now, and a teal panel beside a blue app
   is two products. So the values below are the app's — theme/brand.dart is where they live —
   read onto paper: the same blue for action, the same amber for waiting, darkened only where a
   screen value is unreadable as text on white.

   Colour carries one meaning each, consistently:
     amber = somebody is waiting on you    blue = you act    red = you refuse

   Note the split this rewrite introduced: --ink used to be both the text colour and the action
   colour, which worked only because they were the same teal. They are not the same thing and
   are now two variables. Text is --ink; anything you press is --action.
*/
:root {
    --paper:  #f5f7fb;   /* the desk — Brand.page */
    --sheet:  #ffffff;   /* a sheet laid on it — Brand.card */
    --ink:    #101a33;   /* Brand.ink */
    --ink-2:  #4a5470;
    --ink-3:  #69718c;   /* Brand.muted */
    --rule:   #e4e9f5;   /* Brand.line */
    --rule-2: #ccd3ec;

    /* THE action colour, straight off the app. */
    --action:      #0a5af9;   /* Brand.blue */
    --action-deep: #0847c6;   /* pressed — Brand.blueDeep */
    --action-wash: #f1f6ff;   /* selected row fill — Brand.blueTint */

    /* State. Darkened from the app's screen values, which are set against a phone at arm's
       length and fail as small text on white: Brand.amber #ffba28 is 1.8:1 here, and a
       registrar reads these all day. */
    --amber:  #a9700c;
    --amber-wash: #fff4da;
    --green:  #0f7a55;
    --red:    #c42b2b;

    --radius: 8px;

    /* Kufi for anything that names something — it is the lettering of a shop sign, which is
       what most of these records are. Naskh-ish sans for reading.

       These are NOT the app's Cairo and IBM Plex Sans Arabic. The panel serves no font files
       and an operator's desktop will have neither, so naming them here would just fall back to
       Segoe UI while claiming otherwise. Worth closing if the panel ever bundles webfonts. */
    --display: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
    --body: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    /* Phone numbers and plates are compared column against column, so they are tabular. */
    --data: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.65;
}

a { color: var(--action); text-underline-offset: 3px; }

/* No letter-spacing anywhere on Arabic: it severs the connected letterforms. */
h1, h2, h3 { font-family: var(--display); letter-spacing: 0; margin: 0; font-weight: 700; }
h1 { font-size: 1.7rem; margin-bottom: 1.6rem; }

/* A section heading is a ruled line with a title sitting on it, the way a ledger page is
   divided. The rule does the work that a card border would otherwise do. */
h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 2.2rem 0 .9rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--rule-2);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
}
h2:first-of-type { margin-top: 0; }

/* The count beside a section title. Amber only when it is a queue with something in it. */
.count { font-family: var(--data); font-size: .9rem; font-weight: 700; color: var(--ink-3); }
.count.waiting { color: var(--amber); }

/* ---- shell ---- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 216px;
    flex: 0 0 216px;
    background: var(--sheet);
    border-inline-start: 1px solid var(--rule-2);
    padding: 1.6rem 1rem;
    display: flex;
    flex-direction: column;
}

.content { flex: 1; padding: 2.2rem 2.6rem 4rem; max-width: 1080px; }

.brand { margin-bottom: 2.2rem; }
.wordmark { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.brand-sub { display: block; font-size: .78rem; color: var(--ink-3); }

.nav-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.nav-list li { margin-bottom: .1rem; }

.nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .7rem;
    border-radius: var(--radius);
    color: var(--ink-2);
    text-decoration: none;
    /* The marker sits in the gutter so the label never shifts when it appears. */
    border-inline-start: 3px solid transparent;
}

.nav-list a:hover { background: var(--paper); color: var(--action); }
.nav-list a.active {
    background: var(--action-wash);
    border-inline-start-color: var(--action);
    color: var(--action);
    font-weight: 700;
}

/* Amber, because a badge here only ever means somebody is waiting. */
.badge {
    background: var(--amber);
    color: #fff;
    font-family: var(--data);
    font-size: .72rem;
    font-weight: 700;
    min-width: 1.35rem;
    text-align: center;
    padding: 0 .35rem;
    border-radius: 999px;
}

.signout { margin-top: 1.5rem; }
.signout button {
    width: 100%;
    background: none;
    border: 1px solid var(--rule-2);
    color: var(--ink-3);
    padding: .45rem;
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
}
.signout button:hover { color: var(--action); border-color: var(--action); }

/* ---- login ---- */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }

.login-card {
    background: var(--sheet);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius);
    /* One heavier edge, like a form with a printed margin down its side. */
    border-inline-start: 4px solid var(--action);
    padding: 2.4rem 2rem;
    width: min(370px, 100%);
    text-align: center;
}

.login-card .wordmark { font-size: 2.2rem; margin-bottom: .1rem; }
.login-sub { color: var(--ink-3); margin: 0 0 1.8rem; font-size: .9rem; }
.login-card .btn-primary { width: 100%; margin-top: .4rem; }
.login-error {
    background: transparent;
    border: 1.5px solid var(--red);
    color: var(--red);
    border-radius: var(--radius);
    padding: .55rem;
    margin: 0 0 1rem;
    font-size: .88rem;
}

/* ---- forms ---- */
.field { display: block; text-align: start; margin-bottom: 1rem; }
.field > span { display: block; font-size: .82rem; color: var(--ink-2); margin-bottom: .3rem; }

input, select, textarea {
    width: 100%;
    background: var(--sheet);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius);
    color: var(--ink);
    padding: .5rem .65rem;
    font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--action); }
input[type="number"], input[dir="ltr"] { font-family: var(--data); }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 2px;
}

.btn-primary, .btn-danger, .btn-quiet {
    border-radius: var(--radius);
    padding: .5rem 1.1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
}
/* Blue, not amber: amber means waiting, and pressing this is the opposite of waiting. */
.btn-primary { background: var(--action); color: #fff; border-color: var(--action); }
.btn-primary:hover:not(:disabled) { background: var(--action-deep); border-color: var(--action-deep); }

/* Outlined until hovered. Refusing somebody should take one deliberate beat longer. */
.btn-danger { background: transparent; color: var(--red); border-color: var(--red); }
.btn-danger:hover:not(:disabled) { background: var(--red); color: #fff; }

.btn-quiet { background: transparent; color: var(--ink-2); border-color: var(--rule-2); }
.btn-quiet:hover { color: var(--action); border-color: var(--action); }

button:disabled { opacity: .4; cursor: not-allowed; }

.actions { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

/* ---- sheets ---- */
.card {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    margin-bottom: 1rem;
}

/*
   The slip: one submitted application, laid out the way it arrived. The name of the thing
   being registered leads, because that is what the operator is deciding about; the person and
   their number sit under it; the decision is at the far end within reach.

   This is the panel's one memorable object, so everything else stays quiet.
*/
.slip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-inline-start: 3px solid var(--amber);
    border-radius: var(--radius);
    padding: .85rem 1.1rem;
    margin-bottom: .5rem;
}
.slip:hover { border-color: var(--rule-2); border-inline-start-color: var(--amber); }

.slip-title { font-family: var(--display); font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.slip-meta { color: var(--ink-2); font-size: .88rem; }
.slip-meta .num { font-family: var(--data); }
.slip-side { display: flex; align-items: center; gap: .8rem; }
.slip-docs { font-size: .8rem; color: var(--ink-3); white-space: nowrap; }

/* One line, at the bottom, out of the way. These numbers are context, not work. */
.tally {
    margin-top: 2.6rem;
    padding-top: .8rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-3);
    font-size: .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
}
.tally b { font-family: var(--data); font-weight: 700; color: var(--ink-2); }

/* Kept for the settings preview, where a computed figure genuinely is the content. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .8rem; }
.tile { border-inline-start: 2px solid var(--rule-2); padding: .2rem .9rem; }
.tile .figure { font-family: var(--data); font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.tile .label { color: var(--ink-3); font-size: .8rem; }
.tile.quiet .figure { color: var(--ink-2); font-weight: 400; }

/* ---- ledger ---- */
/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: .6rem .6rem; border-bottom: 1px solid var(--rule); }
thead th {
    color: var(--ink-3);
    font-family: var(--body);
    font-weight: 600;
    font-size: .78rem;
    border-bottom: 1.5px solid var(--rule-2);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--action-wash); }
td[dir="ltr"] { font-family: var(--data); font-size: .9rem; }

/* The review page lists one record as label/value rows, so its th is a field name rather than
   a column heading. */
tbody th { color: var(--ink-3); font-weight: 600; font-size: .82rem; width: 8.5rem; }

/*
   A stamp, not a pill. The border and the weight do the work; there is no fill and no jaunty
   rotation, because this is a record of a decision and not a sticker.
*/
.pill {
    display: inline-block;
    padding: .02rem .45rem;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}
.pill-pending { color: var(--amber); background: var(--amber-wash); }
.pill-approved { color: var(--green); }
.pill-rejected,
.pill-suspended { color: var(--red); }
.pill-new { color: var(--amber); background: var(--amber-wash); }
.pill-read { color: var(--ink-3); }
.pill-resolved { color: var(--green); }

.muted { color: var(--ink-3); }
.empty { color: var(--ink-3); padding: 1.6rem 0; }
.error-text { color: var(--red); }
.ok-text { color: var(--green); }

/* ---- documents ---- */
/* A shopfront, or a driver with their vehicle. This platform does not collect identity cards —
   see VerificationDocument — so what is on screen is a place or a person, and it is shown large
   enough to actually recognise. An approval that cannot see the evidence is not an approval. */
.docs { display: flex; gap: .9rem; flex-wrap: wrap; }
.doc {
    border: 1px solid var(--rule-2);
    border-radius: var(--radius);
    overflow: hidden;
    width: 230px;
    text-decoration: none;
    background: var(--sheet);
}
.doc:hover { border-color: var(--action); }
/* contain, not cover: a cropped identity card can lose the number the operator is checking. */
.doc img { display: block; width: 100%; height: 165px; object-fit: contain; background: var(--paper); }
.doc .doc-kind { padding: .4rem .6rem; font-size: .8rem; color: var(--ink-2); }

@media (max-width: 760px) {
    .shell { flex-direction: column; }
    .sidebar { width: auto; flex: none; border-inline-start: none; border-bottom: 1px solid var(--rule-2); }
    .nav-list { display: flex; flex-wrap: wrap; gap: .3rem; }
    .nav-list a { border-inline-start: none; border-bottom: 3px solid transparent; }
    .nav-list a.active { border-inline-start-color: transparent; border-bottom-color: var(--action); }
    .signout { margin-top: 1rem; }
    .content { padding: 1.4rem 1.1rem 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---- circuit ---- */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    background: var(--red);
    color: #fff;
    padding: .7rem 1.2rem;
    z-index: 1000;
}
#blazor-error-ui .reload { color: #fff; }
#blazor-error-ui .dismiss { cursor: pointer; float: inline-end; }

#components-reconnect-modal {
    border: 1px solid var(--rule-2);
    border-radius: var(--radius);
    background: var(--sheet);
    color: var(--ink);
    font-family: var(--body);
    padding: 1.6rem 2rem;
    text-align: center;
}
#components-reconnect-modal::backdrop { background: rgba(16, 26, 51, .45); }
#components-reconnect-modal button {
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    margin-top: .6rem;
    padding: .45rem 1.1rem;
    border: 1.5px solid var(--action);
    border-radius: var(--radius);
    background: var(--action);
    color: #fff;
}