/*
    The interface font, carried in the repository rather than fetched from Google.

    Three reasons, in order of weight. An installed copy on a phone in a client's storeroom has
    no internet, and a screen that falls back to the system Arabic face there looks like a
    different product. The office's books should not announce themselves to a third party on
    every page load. And a font that arrives over someone else's network is a page that renders
    twice — once in the fallback, once when it lands.

    IBM Plex Sans Arabic, under the SIL Open Font License 1.1; the licence sits beside the
    files in fonts/OFL.txt. Cyrillic is left out: nothing in this product is written in it.
*/
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/plex-arabic-400-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/plex-arabic-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/plex-arabic-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/plex-arabic-500-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/plex-arabic-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/plex-arabic-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/plex-arabic-600-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/plex-arabic-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/plex-arabic-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/plex-arabic-700-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/plex-arabic-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/plex-arabic-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --border: #e3e6ea;
    --text: #17202a;
    --text-muted: #5d6b7a;
    --brand: #1f7a3d;
    --brand-strong: #2e8b46;
    --brand-solid: #1f7a3d;
    --on-brand: #ffffff;
    --brand-soft: #e7f4ec;
    --danger: #b4232a;
    --danger-soft: #fbe9ea;
    --warn: #8a5a00;
    --warn-soft: #fdf1dc;
    --info: #1f5f9e;
    --info-soft: #e8f0f9;
    --muted-soft: #eef0f3;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #12161b;
        --surface: #1a1f26;
        --surface-2: #1f252d;
        --border: #2c343d;
        --text: #e8edf2;
        --text-muted: #9aa8b6;
        --brand: #55d06f;
        --brand-strong: #44ca78;
        --brand-solid: #55d06f;
        --on-brand: #0e2a17;
        --brand-soft: #16301f;
        --danger: #ef8a8f;
        --danger-soft: #3a1f21;
        --warn: #e0b154;
        --warn-soft: #362c17;
        --info: #7fb2e5;
        --info-soft: #1b2a3a;
        --muted-soft: #262d35;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

a {
    color: var(--brand);
}

/* ---------- layout ---------- */

.shell {
    display: grid;
    grid-template-columns: 236px 1fr;
    min-height: 100vh;
    /* Room for the fixed strip, so nothing ever hides beneath it. */
    padding-bottom: 34px;
}

/*
    The menu stays put while the page moves.

    It scrolled away with the content, and the portfolio is a hundred and forty-six rows long:
    reaching the bottom of it meant losing every way out of the screen. Sticky rather than
    fixed so it still sits inside the grid column, and it scrolls on its own when the open
    company's fifteen screens make it taller than the window.
*/
.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: calc(100vh - 34px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border-inline-start: 1px solid var(--border);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    flex: none;
    object-fit: contain;
}

.login-brand .brand-mark {
    width: 52px;
    height: 52px;
}

.brand-name {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
}

.brand-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13.5px;
}

.nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
}

.nav-item.active {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

/*
    The label above each group of links — and the one thing it must not look like is a link.

    It used to sit in the same rhythm as the items beneath it: same muted colour, same left
    padding, a line of text in a column of lines of text. The office's owner reported clicking
    it more than once expecting it to go somewhere. So it is now set apart by a rule above it,
    by a smaller and dimmer label, and by carrying a name in stronger type underneath — the
    shape of a heading, not of a row.
*/
.nav-section {
    padding: 12px 11px 8px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
    cursor: default;
    user-select: none;
}

.nav-section:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.nav-section-kind {
    font-size: 10.5px;
    letter-spacing: .08em;
    color: var(--text-muted);
    opacity: .75;
}

/* Which office, or which client's books — the answer to "where am I working". */
.nav-section-name {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    The foot of the window, not the foot of the page.

    Fixed to the frame like a status bar: whatever screen is open and however far it has been
    scrolled, the version and whose product this is are in the same place.
*/
.app-foot {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 34px;
    padding: 0 16px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
}

.foot-side {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* The end of the line, which in a right-to-left page is its left edge. */
.foot-version {
    flex: 0 0 auto;
}

.foot-stage {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--warn-soft);
    color: var(--warn);
    font-weight: 600;
}

.main {
    padding: 24px 28px 48px;
    min-width: 0;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.page-title {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
}

.page-sub {
    color: var(--text-muted);
    font-size: 13px;
    margin: 2px 0 0;
}

/* ---------- tiles ---------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow);
    text-align: start;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.tile:hover {
    border-color: var(--brand);
}

.tile.is-active {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.tile-label {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.tile-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tile-value.danger {
    color: var(--danger);
}

.tile-value.warn {
    color: var(--warn);
}

/* ---------- toolbar ---------- */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.field {
    flex: 1 1 240px;
    min-width: 0;
}

input[type="search"],
select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

input[type="search"]:focus,
select:focus {
    outline: 2px solid var(--brand);
    outline-offset: -1px;
}

/* ---------- table ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.table-scroll {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    text-align: start;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--surface-2);
}

.num {
    font-variant-numeric: tabular-nums;
}

.client-name {
    font-weight: 600;
    white-space: normal;
    min-width: 220px;
}

.client-code {
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.muted {
    color: var(--text-muted);
}

/* ---------- badges ---------- */

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.badge-warn {
    background: var(--warn-soft);
    color: var(--warn);
}

.badge-info {
    background: var(--info-soft);
    color: var(--info);
}

.badge-muted {
    background: var(--muted-soft);
    color: var(--text-muted);
}

.badge-ok {
    background: var(--brand-soft);
    color: var(--brand);
}

.empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--text-muted);
}

.footnote {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 860px) {
    .shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-inline-start: none;
        border-bottom: 1px solid var(--border);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        overflow-x: auto;
        padding: 12px 16px;
    }

    .nav {
        flex-direction: row;
    }

    .nav-heading {
        display: none;
    }

    .main {
        padding: 16px;
    }
}

/* ---------- buttons and notices ---------- */

/*
    Out of sight and still reachable by keyboard.

    Used for the file inputs behind their own labels: the browser's control writes "Choose File"
    and "No file chosen" in English, left to right, in the middle of an Arabic screen — and no
    stylesheet can change that text. display:none would also take it out of the tab order, so
    it is clipped instead.
*/
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.btn {
    padding: 9px 18px;
    border: 1px solid var(--brand-solid);
    border-radius: 8px;
    background: var(--brand-solid);
    color: var(--on-brand);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.btn:hover:not(:disabled) {
    filter: brightness(1.08);
}

.btn:disabled {
    opacity: .6;
    cursor: default;
}

.btn-link {
    color: var(--brand);
    font-size: 13px;
    text-decoration: underline;
}

.notice {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13.5px;
}

.notice-ok {
    background: var(--brand-soft);
    color: var(--brand);
}

.notice-warn {
    background: var(--warn-soft);
    color: var(--warn);
}

.notice-danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.problems {
    margin: 10px 0 0;
    padding-inline-start: 20px;
    font-size: 13px;
    color: var(--text-muted);
    max-height: 260px;
    overflow-y: auto;
}

.problems li {
    margin-bottom: 3px;
}

input[type="file"] {
    font: inherit;
    color: var(--text);
}

/* ---------- context bar ---------- */

.context-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.context-current {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    min-width: 0;
}

.context-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.context-actions select {
    width: auto;
    min-width: 190px;
    max-width: 320px;
    padding: 6px 10px;
    font-size: 13px;
}

.context-chip {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.context-chip-firm {
    background: var(--info-soft);
    color: var(--info);
}

.context-chip-client {
    background: var(--brand-soft);
    color: var(--brand);
}

.context-chip-own {
    background: var(--warn-soft);
    color: var(--warn);
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 4px;
    white-space: nowrap;
    font-size: 13.5px;
    color: var(--text-muted);
}

input[type="date"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

button.btn-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ---------- login ---------- */

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: var(--bg);
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 28px 26px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.login-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0 5px;
}

.login-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.login-input:focus {
    outline: 2px solid var(--brand);
    outline-offset: -1px;
}

.login-submit {
    width: 100%;
    margin-top: 6px;
    padding: 11px;
}

.login-hint {
    margin: 18px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
}

.validation-message {
    display: block;
    color: var(--danger);
    font-size: 12px;
    margin-top: 4px;
}

.context-user {
    font-size: 13px;
    white-space: nowrap;
    align-self: center;
}

.context-actions form {
    display: flex;
    align-items: center;
}

.btn-danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
    background: var(--danger-soft);
    filter: none;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.recovery-codes code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    text-align: center;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 13.5px;
    letter-spacing: .04em;
    direction: ltr;
}

a.context-user {
    text-decoration: none;
    color: inherit;
}

a.context-user:hover {
    text-decoration: underline;
}

.two-factor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    font-size: 13px;
}

.two-factor-actions a {
    color: var(--brand);
    text-decoration: underline;
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
}

.role-select {
    width: auto;
    min-width: 130px;
    padding: 5px 8px;
    font-size: 13px;
}

input[type="email"] {
    width: 100%;
}

.secret-box {
    background: var(--surface-2);
    border: 1px solid var(--brand);
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
}

.secret-box code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 13.5px;
    direction: ltr;
    display: block;
    white-space: nowrap;
    user-select: all;
}

.authenticator-setup {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-start;
}

/* The QR is a fixed physical size: scaling it with the column is how a code stops scanning. */
.authenticator-qr {
    flex: 0 0 auto;
    width: 172px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.authenticator-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.authenticator-setup > div:last-child {
    flex: 1 1 260px;
    min-width: 0;
}

/* ---------- dashboard ---------- */

/* A tile that is not a button must not pretend to be clickable. */
.tile:not(button) {
    cursor: default;
}

.tile:not(button):hover {
    border-color: var(--border);
}

.tile-value.ok {
    color: var(--brand);
}

.card-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.card-head h2 {
    margin: 0;
    font-size: 15px;
}

.dashboard-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
}

.num.ok {
    color: var(--brand);
}

.num.warn {
    color: var(--warn);
}

.num.danger {
    color: var(--danger);
}

.months {
    display: flex;
    gap: 10px;
    padding: 18px 16px 6px;
    align-items: flex-end;
}

.month {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

/* Fixed height so the columns share a baseline and the bars stay comparable. No track behind
   the bar: a filled track reads as a full column, which made a month with one filing look as
   busy as a month with a hundred. */
.month-bar {
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 6px;
    overflow: hidden;
    border-bottom: 2px solid var(--border);
}

/* A month with work in it must leave a mark even when the busiest month dwarfs it. */
.month-fill {
    flex: 0 0 auto;
    min-height: 3px;
}

.month-overdue {
    background: var(--danger);
}

.month-remaining {
    background: var(--warn);
}

.month-submitted {
    background: var(--brand);
}

.month-name {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.month-count {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 16px 16px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.legend .swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-inline-end: 5px;
}

.scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px 16px;
}

/* ---------- the books ---------- */

.account-code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-inline-end: 8px;
}

.account-heading {
    font-weight: 600;
    background: var(--surface-2);
}

/* An out-of-balance entry must be impossible to miss while it is being written. */
.entry-unbalanced td {
    background: var(--danger-soft);
}

.entry-unbalanced .danger {
    color: var(--danger);
    font-weight: 600;
}

.year-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.year-close {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

/* ---------- financial statements ---------- */

.statement .statement-section td {
    background: var(--surface-2);
    padding-top: 14px;
}

.statement .statement-heading {
    font-weight: 600;
}

.statement .statement-total td {
    border-top: 1px solid var(--border);
}

/* The bottom line gets a double rule, which is what an accountant looks for. */
.statement .statement-result td {
    border-top: 3px double var(--text);
    font-size: 15px;
    padding-top: 10px;
}

.statement .num.ok {
    color: var(--brand);
}

.statement .num.danger {
    color: var(--danger);
}

.ageing-row {
    cursor: pointer;
}

.ageing-row:hover td {
    background: var(--surface-2);
}

/* The open items under a party, set back so the grouping reads at a glance. */
table.nested {
    background: var(--surface-2);
    margin: 0;
}

table.nested th {
    font-size: 12px;
    font-weight: 500;
}

/* ---------- printable documents ---------- */

.print-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 28px 24px 60px;
    background: var(--surface);
    color: var(--text);
}

.doc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--text);
    margin-bottom: 18px;
}

.doc-head h1 {
    margin: 0 0 4px;
    font-size: 19px;
}

.doc-title {
    text-align: start;
}

.doc-title h2 {
    margin: 0;
    font-size: 17px;
}

.doc-number {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* A cancelled document that looks valid is one somebody pays twice. */
.doc-void {
    border: 2px solid var(--danger);
    color: var(--danger);
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    padding: 8px;
    margin-bottom: 18px;
    letter-spacing: 4px;
}

.doc-void.doc-draft {
    border-color: var(--warn);
    color: var(--warn);
}

.doc-parties {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.doc-party-name {
    font-size: 16px;
    font-weight: 600;
}

.doc-meta {
    text-align: start;
    font-variant-numeric: tabular-nums;
}

.doc-meta > div {
    margin-bottom: 3px;
}

table.doc-lines {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

table.doc-lines th,
table.doc-lines td {
    border: 1px solid var(--border);
    padding: 7px 9px;
    text-align: start;
}

table.doc-lines th {
    background: var(--surface-2);
    font-size: 12.5px;
}

table.doc-lines .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.doc-totals {
    margin-inline-start: auto;
    max-width: 330px;
}

.doc-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 4px 0;
}

.doc-grand {
    border-top: 2px solid var(--text);
    margin-top: 4px;
    padding-top: 8px !important;
    font-size: 16px;
    font-weight: 700;
}

.doc-words {
    display: block !important;
    font-size: 12.5px;
    color: var(--text-muted);
    padding-top: 8px !important;
}

.doc-ageing h3 {
    font-size: 14px;
    margin: 22px 0 8px;
}

.doc-notes {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 18px;
}

.doc-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-top: 44px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
}

.doc-sign {
    border-top: 1px solid var(--text);
    padding-top: 4px;
    min-width: 170px;
    text-align: center;
}

.print-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 32px;
}

@media print {
    /* Paper is white whatever the screen was, and nothing that is not the document goes on it. */
    :root,
    :root[data-theme="dark"] {
        --surface: #ffffff;
        --surface-2: #f4f5f7;
        --text: #000000;
        --text-muted: #444444;
        --border: #999999;
    }

    body {
        background: #ffffff;
    }

    .no-print,
    .sidebar,
    .context-bar {
        display: none !important;
    }

    .print-page {
        max-width: none;
        padding: 0;
    }

    table.doc-lines {
        page-break-inside: auto;
    }

    table.doc-lines tr {
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }
}

/* Attachments on a document: a short list plus the picker, kept out of the line grid. */
.doc-attachments {
    margin-top: 16px;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 10px;
}

.attachment {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 0;
}

.attachment a {
    color: var(--brand);
    text-decoration: none;
}

.attachment a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   The phone.

   Not a narrower desktop: bigger targets, one number per row, and a home that
   is four things rather than a menu. These classes are used only by the mobile
   screens, and live here so the phone and the laptop cannot drift apart in
   colour or typeface.
   --------------------------------------------------------------------------- */

.m-page,
.m-home {
    padding: 16px;
    max-width: 720px;
    margin: 0 auto;
}

.m-home h1 {
    margin-bottom: 4px;
}

.m-tiles {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.m-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    /* Comfortably above the size a thumb can hit without looking. */
    min-height: 72px;
}

.m-tile:active {
    background: var(--surface-2);
}

.m-tile-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.m-switch {
    display: flex;
    gap: 8px;
    margin: 12px 0;
}

.m-switch .btn {
    flex: 1;
    min-height: 44px;
}

.m-search {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: inherit;
    font: inherit;
}

.m-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.m-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
}

.m-row-title {
    font-weight: 500;
}

.splash {
    display: grid;
    place-items: center;
    min-height: 60vh;
    color: var(--muted);
}

/*
    The phone's own top bar.

    The desktop layout put a sidebar and a wide context bar above every page; on a six-inch
    screen that was a third of the height and it overflowed sideways. What a phone needs is
    the two things a person loses when a screen fills the display: a way back, and which
    office or company they are looking at.
*/
.m-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.m-bar-btn {
    display: grid;
    place-items: center;
    /* A thumb target, not an icon's worth of pixels. */
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    cursor: pointer;
}

.m-bar-btn:active {
    background: var(--surface-2);
}

.m-bar-title {
    font-weight: 600;
    /* One line: a long client name must not push the bar into two rows. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-signout {
    display: block;
    margin: 28px auto 8px;
    color: var(--text-muted);
}

/*
    Blazor's own "something went wrong" bar.

    It lives in the installed application's page from the moment it loads and is supposed to be
    hidden until something actually fails. The rule that hides it sat in a stylesheet the page
    never linked, so every screen on the phone carried the sentence "حدث خطأ غير متوقّع" under
    its content — permanently, with nothing wrong. It belongs here, in the one stylesheet both
    the browser and the installed application load.
*/
#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    padding: 12px 16px;
    background: var(--danger-soft);
    color: var(--danger);
    box-shadow: 0 -1px 3px rgba(16, 24, 40, .12);
}

#blazor-error-ui .reload {
    color: inherit;
    margin-inline-start: 8px;
}

#blazor-error-ui .dismiss {
    position: absolute;
    inset-inline-end: 12px;
    top: 10px;
    cursor: pointer;
}

/* The mark beside the name, wherever the name stands for the product itself. */
.foot-mark {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: .85;
}

.m-bar-mark {
    width: 24px;
    height: 24px;
    object-fit: contain;
    /* After the back and home buttons, before the name it belongs to. */
    margin-inline-end: 2px;
}