/* ==========================================================================
   ERP theme — self-hosted stylesheet, RTL / Arabic.
   Mirrors the dev-15 auth module theme: corporate, functional, flat, no
   decorative animation. No external fonts, images or scripts.
   ========================================================================== */

:root {
    --ink: #1c2733;
    --ink-soft: #5a6a7a;
    --line: #d5dde5;
    --paper: #ffffff;
    --page: #eef1f5;
    --brand: #1f4e79;
    --brand-dark: #173a5a;
    --danger: #b02a37;
    --danger-bg: #f8d7da;
    --ok: #1e6f42;
    --ok-bg: #d9f0e2;
    --warn-bg: #fff3cd;
    --warn: #8a6d1a;
    --radius: 6px;
    --sidebar-w: 250px;
    /* Panel padding is a variable because tables cancel it to run edge-to-edge;
       the two have to move together. */
    --panel-pad-x: 20px;
    --panel-pad-y: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    /* System stack only — Arabic-capable faces first, no web fonts. */
    font-family: "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, Arial, sans-serif;
    font-size: 15px;
    color: var(--ink);
    background: var(--page);
    line-height: 1.6;
}

h1, h2, h3 { font-weight: 600; color: var(--ink); }
a { color: var(--brand); }

/* Company logo slot: replace .brand-mark with an <img> of the real logo. */
.brand-mark {
    display: inline-block;
    width: 22px; height: 22px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--brand) 0%, #2d6da3 100%);
    vertical-align: -4px;
    flex: 0 0 auto;
}
.brand-mark.large { width: 44px; height: 44px; border-radius: 8px; }

/* ---------- Centred card (login and related pages) ---------- */

.auth-body { min-height: 100vh; }
.auth-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.auth-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 2px 10px rgba(28, 39, 51, 0.08);
    width: 100%;
    max-width: 430px;
    padding: 36px 40px 32px;
}
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo h1 { font-size: 20px; margin-top: 10px; }
.auth-subtitle { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.auth-footnote {
    margin-top: 18px;
    color: var(--ink-soft);
    font-size: 12px;
    text-align: center;
    max-width: 430px;
}

/* ---------- Forms ---------- */

.form-group { margin-bottom: 16px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.hint { color: var(--ink-soft); font-size: 12.5px; margin-top: 4px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"],
input[type="search"], select, textarea {
    width: 100%;
    padding: 9px 11px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
textarea { resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--brand);
    outline-offset: 0;
    border-color: var(--brand);
}
.req { color: var(--danger); }
input.is-invalid { border-color: #eeb2b8; }

/* Latin-script values (username, password, amounts, codes) keep LTR character
   order, but they start at the right edge like every other field on the page. */
.ltr-field { direction: ltr; text-align: right; }

.password-wrap { position: relative; }
/* The toggle sits at the page's inline-end — the LEFT edge in RTL — so the room
   for it is reserved on the left, opposite to where the text now starts. */
.password-wrap input { padding-left: 38px; }
.toggle-password {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--ink-soft);
    line-height: 0;
}
.toggle-password:hover { color: var(--brand); }
.toggle-password svg { width: 18px; height: 18px; }

.field-error { display: block; margin-top: 4px; font-size: 12.5px; color: var(--danger); }

.checkbox-row { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.checkbox-row input { margin-top: 4px; accent-color: var(--brand); }
.checkbox-row label { font-weight: 400; font-size: 13.5px; margin: 0; cursor: pointer; }

.btn {
    display: inline-block;
    padding: 9px 18px;
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary[disabled] { opacity: .7; cursor: not-allowed; }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--page); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #90222d; }
.btn-small { padding: 4px 10px; font-size: 13px; }
.btn-block { display: block; width: 100%; }

/* ---------- Alerts / flash ---------- */

.alert { padding: 10px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; }
.alert-error { background: var(--danger-bg); color: var(--danger); border: 1px solid #eeb2b8; }
.alert-success { background: var(--ok-bg); color: var(--ok); border: 1px solid #b3ddc3; }
.alert-warning { background: var(--warn-bg); color: var(--warn); border: 1px solid #ead49a; }

/* A message that takes itself away once read — أوقات الدوام on the login card.
   A plain fade, in keeping with the rest: it is there to stop the notice
   vanishing mid-sentence, not to decorate it. */
.alert-fading { transition: opacity .35s linear; }
.alert-fading.is-gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .alert-fading { transition: none; }
}

.separator {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-soft);
    font-size: 12.5px;
    margin: 18px 0;
    letter-spacing: 0.04em;
}
.separator::before, .separator::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--line);
}

.auth-links { margin-top: 16px; text-align: center; font-size: 13.5px; }

/* ==========================================================================
   Application shell (post-login) — same corporate theme.
   Sidebar sits on the right for RTL.
   ========================================================================== */

.app-body { background: var(--page); min-height: 100vh; }

.sidebar {
    position: fixed;
    inset-block: 0;
    /* RTL: inline-start is the RIGHT edge, which is where the menu belongs. */
    inset-inline-start: 0;
    width: var(--sidebar-w);
    /* A shade deeper than the header band above the content. The two are the
       same furniture, but the menu is meant to sit behind the work rather than
       compete with it, and one flat tone across both flattened the whole
       screen into a single slab. */
    background: var(--brand-dark);
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 40;
    transition: transform .2s ease;
}

.sidebar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .12);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.35;
}
.sidebar-close {
    margin-inline-start: auto;
    display: none;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 2px;
    line-height: 0;
}
.sidebar-close svg { width: 20px; height: 20px; }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px 22px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 3px; }

.nav-list { list-style: none; }

.nav-link, .nav-toggle {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: #c3d5e6;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s linear, color .12s linear;
}
.nav-link:hover, .nav-toggle:hover { background: rgba(255, 255, 255, .09); color: #fff; }

/* The page you are on, marked by a bar at the edge and a lift in weight
   rather than by a solid white block. The block read as a hole cut in the
   menu, and it dropped the item out of the palette everything else shares. */
.nav-link.active {
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-weight: 600;
}
.nav-link.active::before {
    content: '';
    position: absolute;
    inset-block: 6px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: #fff;
}

.nav-link svg, .nav-toggle svg.nav-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    /* Quiet until the item is wanted, so the column reads as labels first. */
    opacity: .75;
}
.nav-link:hover svg, .nav-toggle:hover svg.nav-icon,
.nav-link.active svg,
.nav-toggle[aria-expanded="true"] svg.nav-icon { opacity: 1; }

.nav-caret {
    margin-inline-start: auto;
    width: 14px !important;
    height: 14px !important;
    transform: rotate(180deg);   /* points inward in RTL */
    transition: transform .15s ease;
}
.nav-toggle[aria-expanded="true"] .nav-caret { transform: rotate(90deg); }

.submenu {
    list-style: none;
    margin-bottom: 4px;
    overflow: hidden;
    max-height: 0;
    transition: max-height .2s ease;
}
.submenu.open { max-height: 760px; }
.submenu .nav-link, .submenu .nav-toggle {
    padding-block: 6px;
    padding-inline-start: 14px;
    font-size: 13.5px;
    font-weight: 400;
    color: #aec4d8;
}
.submenu .nav-link:hover, .submenu .nav-toggle:hover,
.submenu .nav-link.active { color: #fff; }
.submenu .submenu .nav-link { padding-inline-start: 26px; }

/* A child page is marked by weight and the edge bar, not by a fill: nesting is
   already carrying the hierarchy, and a second filled block inside an open
   section made the menu look like two competing lists. */
.submenu .nav-link.active { background: rgba(255, 255, 255, .08); font-weight: 600; }

.dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    flex: 0 0 auto;
}
.nav-link.active .dot { opacity: 1; }

.nav-link.is-disabled { opacity: .55; cursor: not-allowed; }
.nav-link.is-disabled:hover { background: none; color: #aec4d8; }

.soon {
    margin-inline-start: auto;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .16);
    font-weight: 500;
}

/* ---------- Header + main column ---------- */

.shell { margin-inline-start: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.app-header { background: var(--brand); color: #fff; }

/* Three tracks rather than flex: the clock is centred on the header itself,
   so it stays put as the title and the user's name change width under it. */
.app-header-inner {
    padding: 10px 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "start clock user";
    align-items: center;
    gap: 14px;
}
.app-header h1 { font-size: 16px; font-weight: 600; color: #fff; }

.header-start { grid-area: start; display: flex; align-items: center; gap: 14px; min-width: 0; }
.header-start h1 {
    /* A long screen title yields to the clock instead of shoving it aside. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- التاريخ والساعة ---------- */

.header-clock {
    grid-area: clock;
    justify-self: center;
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, .12);
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
}
.header-clock .clock-day { font-weight: 600; }
.header-clock .clock-sep { opacity: .6; margin-inline-start: -5px; }

/* Latin digits inside an RTL line: isolate them so 01/08/2026 and 20:09:33
   keep their own order and never fold into the Arabic around them. Tabular
   figures stop the width shifting as the seconds turn over. */
.header-clock .clock-date,
.header-clock .clock-time {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.header-clock .clock-time {
    font-weight: 600;
    letter-spacing: .4px;
    color: #eaf3fb;
}

/* ص / م — Arabic, so it stays outside the isolate around the digits and keeps
   its place to their left. Slightly quieter than the hour it qualifies. */
.header-clock .clock-meridiem {
    margin-inline-start: -2px;
    font-size: 13px;
    font-weight: 600;
    color: #cfe0f0;
}

.header-user { grid-area: user; justify-self: end; display: flex; align-items: center; gap: 14px; }

.hamburger {
    display: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--radius);
    padding: 5px;
    cursor: pointer;
    color: #fff;
    line-height: 0;
}
.hamburger svg { width: 18px; height: 18px; }

.header-user .who { font-size: 14px; color: #fff; font-weight: 600; }
.header-user .who span { display: block; font-size: 12px; font-weight: 400; color: #dce8f3; }

.app-main { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: 22px 20px 44px; }
.app-main h2 { font-size: 20px; margin-bottom: 4px; }
.app-main .page-hint { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 18px; }

/* The greeting and the sentence explaining the screen, taken together and set
   off from the figures below them. Without the rule the heading floated at the
   same distance from the tiles as the tiles sit from each other. */
.page-head {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.page-head h2 { margin-bottom: 5px; }
.page-head .page-hint { margin-bottom: 0; max-width: 76ch; }

/* Divides the two halves of a screen that merges what used to be two pages —
   قائمة المشاريع carries the projects table and مصاريف المشاريع beneath it. */
.app-main .section-heading {
    font-size: 17px;
    margin: 30px 0 4px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.app-footer {
    border-top: 1px solid var(--line);
    padding: 14px 20px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 12px;
}

/* ---------- Panels, tables, badges ---------- */

.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--panel-pad-y) var(--panel-pad-x);
    margin-bottom: 20px;
    /* Matches the reference card's shadow-sm geometry, tinted with the theme
       ink rather than pure black. */
    box-shadow: 0 2px 4px rgba(28, 39, 51, .06);
}
/* Ruled off from what it introduces, so a screen of stacked panels reads as
   sections with headings rather than a run of boxes with bold text on top. */
.panel-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}
/* A title above a table that bleeds to the panel edge: the table's own header
   band supplies the division, and two rules together read as a seam. */
.panel > .panel-title + .table-wrap { margin-top: -1px; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.stat {
    position: relative;
    /* Clips the rule below to the card's own corners. */
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 15px 16px 14px;
    box-shadow: 0 2px 4px rgba(28, 39, 51, .06);
    transition: border-color .12s linear, box-shadow .12s linear;
}
.stat:hover { border-color: #bfcbd8; box-shadow: 0 3px 8px rgba(28, 39, 51, .09); }

/* A rule along the top edge, coloured for what the tile counts. It lets وارد,
   صادر and الرصيد be told apart before a word is read, without colouring the
   figure itself where the sign already carries meaning. */
.stat::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: var(--line);
}
.stat-in::before { background: var(--ok); }
.stat-out::before { background: var(--danger); }
.stat-net::before { background: var(--brand); }

.stat .label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.stat .value {
    font-size: 23px;
    font-weight: 600;
    line-height: 1.25;
    /* Figures of the same length line up across tiles and stop shifting as
       the numbers change. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.stat .value.sm { font-size: 14.5px; font-weight: 600; }

/* اسم الجهة التي جاء منها الرقم — المكتب أو المشاريع أو المعامل. Deliberately
   quiet: it qualifies the figure above it without competing with it. */
.source {
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-top: 3px;
}
/* One line per source, for a tile whose money comes from more than one book.
   Ruled like a small statement, so three figures under one heading read as
   three separate books rather than a sum broken into parts. */
.stat .source-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(28, 39, 51, .07);
}
.stat .source-line:last-child { border-bottom: 0; padding-bottom: 0; }
.stat .source-line .source { margin-top: 0; font-size: 12px; }

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

/* A table that reaches a panel edge runs the whole width of it: the panel
   becomes the frame, and the header band carries into the rounded corners.
   Panels that sit a table between prose — a title above, a pager below —
   keep those gutters, so only the edges the table actually owns bleed.
   .panel-inset is a nested sub-panel with its own tighter padding, so its
   tables stay inside it. */
.panel:not(.panel-inset) > .table-wrap { margin-inline: calc(-1 * var(--panel-pad-x)); }
.panel:not(.panel-inset) > .table-wrap:first-child {
    margin-top: calc(-1 * var(--panel-pad-y));
    border-start-start-radius: var(--radius);
    border-start-end-radius: var(--radius);
}
.panel:not(.panel-inset) > .table-wrap:last-child {
    margin-bottom: calc(-1 * var(--panel-pad-y));
    border-end-start-radius: var(--radius);
    border-end-end-radius: var(--radius);
}
/* Nothing follows it inside the panel, so the panel border closes the table
   off and the last row's own rule would only double it. */
.panel:not(.panel-inset) > .table-wrap:last-child table.data tbody tr:last-child > * {
    border-bottom: 0;
}

table.data { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 14px; }
table.data th, table.data td {
    text-align: start;
    padding: 10px 14px;
    /* Hairline rules: enough to track a row across the page, quiet enough
       that a long list reads as one block rather than a stack of boxes. */
    border-bottom: 1px solid rgba(28, 39, 51, .07);
    vertical-align: middle;
}
table.data th {
    background: #f9fafb;
    font-size: 12.5px;
    /* Kept at 0.04em: letter-spacing severs the cursive joins in Arabic, so
       the header stays quiet through size and colour instead. */
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    font-weight: 600;
}
/* Column headings only — body headings (the permission matrix section rows)
   carry full sentences and need to wrap. */
table.data thead th { white-space: nowrap; }
table.data tr:hover td { background: #f9fafb; }

.badge { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 10px; padding: 1px 9px; }
.badge-active { background: var(--ok-bg); color: var(--ok); }
.badge-muted { background: var(--page); color: var(--ink-soft); }
.badge-brand { background: #dbe9f6; color: var(--brand); }

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

/* ---------- Movements module ---------- */

.page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.action-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.action-row form { display: inline; }

.link-danger, .link-plain {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.link-danger { color: var(--danger); }
.link-plain { color: var(--brand); }

a.who { text-decoration: none; }
a.who:hover { text-decoration: underline; }

/* ==========================================================================
   دفتر الصادر والوارد — ruled "paper ledger" table.
   Applied only to the movements lists (day, month, full register) via
   class="data ledger"; every other table keeps the compact default.
   ========================================================================== */

table.data.ledger {
    font-size: 15px;
    /* No outer border: the panel around it is the frame. */
}

table.data.ledger th,
table.data.ledger td {
    padding: 12px 14px;
    line-height: 1.7;
    vertical-align: middle;
    border-bottom: 1px solid rgba(28, 39, 51, .07);
    border-inline-end: 1px solid #edf0f4;   /* faint column rules, like a ruled page */
}

table.data.ledger th:last-child,
table.data.ledger td:last-child { border-inline-end: 0; }

table.data.ledger thead th {
    font-size: 13px;
    border-bottom: 1px solid rgba(28, 39, 51, .1);
}

/* Alternating bands make a long register far easier to follow across columns.
   They also sit almost on top of the plain hover tint, so the register hovers
   a step deeper — enough to read over a banded row as well as a white one. */
table.data.ledger tbody tr:nth-child(even) td { background: #fafbfd; }
table.data.ledger tbody tr:hover td { background: #f1f3f6; }
table.data.ledger tbody tr:last-child td { border-bottom: 0; }

/* الحركة المسجّلة للتو. Recording ends on this table rather than on a page of
   its own, so the new line has to be findable at a glance: a tinted band and a
   marked edge, declared after the stripes and the hover so it wins over both.
   It is on the screen only — the printed sheet is a record, not a receipt. */
table.data.ledger tbody tr.row-new td,
table.data.ledger tbody tr.row-new:hover td { background: var(--ok-bg); }
/* The page is RTL, so the row's start edge is the first cell's right-hand
   side — hence the negative inset offset. */
table.data.ledger tbody tr.row-new td:first-child { box-shadow: inset -3px 0 0 var(--ok); }

@media print {
    table.data.ledger tbody tr.row-new td,
    table.data.ledger tbody tr.row-new td:first-child {
        background: transparent;
        box-shadow: none;
    }
}

/* Amounts align on the digits so columns read straight down the page. */
table.data.ledger .amount-in,
table.data.ledger .amount-out,
table.data.ledger td.num {
    font-variant-numeric: tabular-nums;
    font-size: 15.5px;
    white-space: nowrap;
}

table.data.ledger .date-cell {
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* البيان — the one column carrying a sentence rather than a value. It is given
   room to read and a ceiling to stop it from crowding out the figures beside
   it; anything longer is cut with an ellipsis and shown in full on the
   movement's own page. */
table.data .notes-cell {
    min-width: 180px;
    max-width: 340px;
    color: var(--ink-soft);
}

table.data.ledger tfoot .totals-row th {
    padding: 13px 14px;
    font-size: 15px;
    border-inline-end: 1px solid #edf0f4;
}

@media (max-width: 768px) {
    table.data.ledger { font-size: 14.5px; }
    table.data.ledger th,
    table.data.ledger td { padding: 13px 10px; }
    table.data.ledger .amount-in,
    table.data.ledger .amount-out { font-size: 15px; }
}

@media print {
    table.data.ledger tbody tr:nth-child(even) td { background: none; }
    table.data.ledger,
    table.data.ledger th,
    table.data.ledger td { border-color: #999; }
}

/* ---------- Journal (اليومية) ---------- */

.period-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.period-title { text-align: center; line-height: 1.4; flex: 1; }
.period-title strong { display: block; font-size: 17px; }
.period-title span { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.disabled-btn { opacity: .45; cursor: not-allowed; }

.jump-form { display: flex; gap: 6px; align-items: center; }
.jump-form input[type="date"] { width: auto; padding: 4px 8px; font-size: 13px; }

.empty-day {
    text-align: center;
    padding: 30px 16px;
    color: var(--ink-soft);
}
.empty-day p { margin-bottom: 14px; font-size: 14.5px; }

.day-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.day-title a { text-decoration: none; }
.day-title a:hover { text-decoration: underline; }
.day-summary { font-size: 13px; font-weight: 400; color: var(--ink-soft); }

/* ---------- Notes & messages ---------- */

.notes { list-style: none; margin-top: 14px; }
.note {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--paper);
}
.note-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    margin-bottom: 6px;
}
.note-head form { display: inline; margin-inline-start: auto; }
.note-role { color: var(--brand); font-size: 12px; }
.note-time { color: var(--ink-soft); font-size: 12px; }
.note-body { font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; }

.recipient-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}
.recipient {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 14px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    margin: 0;
}
.recipient:hover { background: var(--page); }
.recipient input { width: auto; accent-color: var(--brand); }
.recipient small { color: var(--ink-soft); }

table.data tr.unread td { background: #f2f7fc; font-weight: 600; }

/* Unread messages. The one place in the menu that may shout, so it is the one
   place carrying a colour of its own — a white pill read as another active
   item and competed with the page marker. */
.nav-badge {
    margin-inline-start: auto;
    font-size: 11px;
    font-weight: 700;
    min-width: 19px;
    text-align: center;
    padding: 1px 6px;
    border-radius: 10px;
    background: #c0392b;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.alert ul { margin: 6px 18px 0 0; }

.amount-in { color: var(--ok); font-weight: 600; }
.amount-out { color: var(--danger); font-weight: 600; }

table.data tfoot .totals-row th {
    background: var(--page);
    border-top: 2px solid var(--brand);
    border-bottom: 0;
    font-size: 14px;
    color: var(--ink);
}

.pager { margin-top: 14px; }
.pagination { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.page-btn {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--brand);
    background: var(--paper);
}
.page-btn:hover { background: var(--page); }
.page-btn.disabled { color: var(--ink-soft); opacity: .55; pointer-events: none; }
.page-info { color: var(--ink-soft); }

/* سند القبض / الصرف */
.voucher-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--brand);
    margin-bottom: 14px;
}
.voucher-org { font-size: 16px; font-weight: 600; }
.voucher-type { color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }
.voucher-no { text-align: end; font-size: 12.5px; color: var(--ink-soft); }
.voucher-no strong { display: block; font-size: 16px; color: var(--ink); }
.voucher-amount {
    font-size: 27px;
    font-weight: 700;
    text-align: center;
    padding: 14px 0 18px;
}
.voucher-sign {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    font-size: 13.5px;
    color: var(--ink-soft);
}

.report-head .voucher-head { margin-bottom: 0; }

@media print {
    .sidebar, .app-header, .app-footer, .backdrop, .no-print { display: none !important; }
    .panel { break-inside: avoid; margin-bottom: 14px; }
    thead { display: table-header-group; }   /* repeat headers across pages */
    .shell { margin: 0; }
    .app-main { padding: 0; max-width: none; }
    body { background: #fff; font-size: 13px; }
    .panel { border: 0; padding: 0; box-shadow: none; }
    /* The panel has no padding left to cancel, so the edge-to-edge bleed
       would push the table off the sheet. */
    .panel > .table-wrap { margin: 0; border-radius: 0; }
    table.data tr:hover td { background: none; }
}

.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(28, 39, 51, .5);
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.backdrop.show { opacity: 1; pointer-events: auto; }

/* ---------- Responsive ---------- */

@media (max-width: 992px) {
    .sidebar { transform: translateX(100%); }      /* parks off-screen past the right edge */
    .sidebar.open { transform: translateX(0); box-shadow: -6px 0 22px rgba(28, 39, 51, .3); }
    .sidebar-close { display: block; }
    .shell { margin-inline-start: 0; }
    .hamburger { display: block; }
}

/* Three across stops fitting well before the sidebar folds away: the clock
   drops to a line of its own rather than crushing the title beside it. */
@media (max-width: 900px) {
    .app-header-inner {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "start user"
            "clock clock";
        row-gap: 9px;
    }
    .header-clock { width: 100%; justify-content: center; }
}

@media (max-width: 768px) {
    .auth-card { padding: 26px 22px; }
    .app-header-inner, .app-main { padding-left: 14px; padding-right: 14px; }
    .header-user .who { display: none; }
}

@media (max-width: 400px) {
    .header-clock { font-size: 13px; gap: 5px; padding: 5px 8px; }
}

/* ==========================================================================
   الصادر والوارد — daily journal page only.
   Layout and treatment ported from the bina-test-2 prototype: card rows with
   a direction tile, compact KPIs with a full-width hero, and the day split
   into وارد / صادر sections instead of one table.
   Every rule is scoped to .inout so no other screen inherits it.
   ========================================================================== */

.inout {
    --io-radius: 16px;
    --io-shadow: 0 2px 10px rgba(22, 32, 74, .07);
    --io-muted: #79839f;
    --io-line: #e6e9f2;
}

/* ---------- day pager ---------- */

.inout .io-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--paper);
    border-radius: var(--io-radius);
    box-shadow: var(--io-shadow);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.inout .io-nav .io-nav-mid { flex: 1; text-align: center; }
.inout .io-nav .io-day { font-weight: 700; font-size: 15px; }
.inout .io-nav .io-date { font-size: 12px; color: var(--io-muted); direction: ltr; }

.inout .io-step {
    flex: none;
    border: 1px solid var(--io-line);
    background: var(--paper);
    border-radius: 11px;
    padding: 9px 13px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}
.inout .io-step:hover { background: #f7f9fc; }
.inout .io-step.is-disabled { opacity: .35; pointer-events: none; }

.inout .io-badge {
    display: inline-block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ok-bg);
    color: var(--ok);
}
.inout .io-back {
    display: inline-block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 700;
}

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

.inout .io-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
}
.inout .io-kpi {
    background: var(--paper);
    border-radius: var(--io-radius);
    box-shadow: var(--io-shadow);
    padding: 14px;
}
.inout .io-kpi .lab {
    font-size: 12.5px;
    color: var(--io-muted);
    font-weight: 600;
    margin-bottom: 6px;
}
.inout .io-kpi .val { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.inout .io-kpi .unit {
    font-size: 11px;
    color: var(--io-muted);
    font-weight: 600;
    margin-inline-start: 3px;
}

.inout .io-kpi.hero {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--brand) 0%, #2d6da3 100%);
    color: #fff;
}
.inout .io-kpi.hero .lab { color: #b9d0e4; }
.inout .io-kpi.hero .val { font-size: 26px; color: #fff; }
.inout .io-kpi.hero .unit { color: #b9d0e4; }
.inout .io-kpi.hero .io-sub {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: 12px;
    color: #b9d0e4;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}
.inout .io-kpi.hero .io-sub b { color: #fff; font-weight: 700; }

/* ---------- section headers + row cards ---------- */

.inout .io-sec {
    font-size: 13px;
    font-weight: 700;
    color: var(--io-muted);
    margin: 20px 4px 10px;
}
.inout .io-card {
    background: var(--paper);
    border-radius: var(--io-radius);
    box-shadow: var(--io-shadow);
    padding: 4px 14px;
    margin-bottom: 12px;
}
.inout .io-none {
    color: var(--io-muted);
    font-size: 13px;
    text-align: center;
    margin: 12px 0;
}

.inout .io-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--io-line);
    text-decoration: none;
    color: inherit;
}
.inout .io-row:last-child { border-bottom: 0; }
.inout .io-row:hover { background: #f7f9fc; }

.inout .io-row .ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: none;
}
.inout .io-row .ic svg { width: 20px; height: 20px; }
.inout .io-row .ic.in { background: rgba(30, 111, 66, .12); color: var(--ok); }
.inout .io-row .ic.out { background: rgba(176, 42, 55, .10); color: var(--danger); }

.inout .io-row .mid { flex: 1; min-width: 0; }
.inout .io-row .mid b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inout .io-row .mid span {
    font-size: 12px;
    color: var(--io-muted);
    display: block;
    margin-top: 2px;
}
.inout .io-row .amt {
    font-weight: 800;
    font-size: 14.5px;
    white-space: nowrap;
    direction: ltr;
}
.inout .io-row .amt.in { color: var(--ok); }
.inout .io-row .amt.out { color: var(--danger); }

/* ---------- empty day ---------- */

.inout .io-empty {
    text-align: center;
    padding: 46px 20px;
    color: var(--io-muted);
    background: var(--paper);
    border-radius: var(--io-radius);
    box-shadow: var(--io-shadow);
}
.inout .io-empty svg { width: 34px; height: 34px; opacity: .5; }
.inout .io-empty b { display: block; color: var(--ink); font-size: 15px; margin: 12px 0 5px; }
.inout .io-empty p { margin: 0; font-size: 13px; line-height: 1.8; }

@media (max-width: 560px) {
    .inout .io-nav { flex-wrap: wrap; }
    .inout .io-nav .io-nav-mid { order: -1; flex-basis: 100%; margin-bottom: 4px; }
    .inout .io-step { flex: 1; text-align: center; }
}

@media print {
    .inout .print-only { display: block !important; }
    .inout .print-only h3 { margin-bottom: 12px; font-size: 16px; }
    .inout .io-card,
    .inout .io-kpi,
    .inout .io-empty { box-shadow: none; border: 1px solid var(--io-line); }
    .inout .io-kpi.hero { background: none; color: var(--ink); border: 1px solid var(--io-line); }
    .inout .io-kpi.hero .lab,
    .inout .io-kpi.hero .unit,
    .inout .io-kpi.hero .io-sub { color: var(--ink-soft); }
    .inout .io-kpi.hero .val,
    .inout .io-kpi.hero .io-sub b { color: var(--ink); }
}

/* ---------- Role permission guide (المستخدمون والصلاحيات) ---------- */

.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;
}

.role-guide {
    background: var(--page);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 18px;
}
.role-guide-title { font-weight: 600; margin-bottom: 10px; }
.role-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px 22px;
}
.role-guide-section-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
}

.perm-list { list-style: none; margin-top: 5px; }
.perm-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    padding: 2px 0;
}
.perm-mark { font-weight: 700; }
.perm-yes .perm-mark { color: var(--ok); }
.perm-no { color: var(--ink-soft); }
.perm-no .perm-mark { color: var(--danger); }

/* إعدادات النظام — one switch per row, each with the sentence that says what
   it does. A setting changes the system for everyone, so the explanation is
   part of the control rather than a tooltip beside it. */
.setting-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.setting-row:last-of-type { border-bottom: 0; }

.setting-label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
}
.setting-label input[type="checkbox"] { margin-top: 5px; flex: none; }

/* The mark carries its own colour here: on this panel it stands alone rather
   than inside a .perm-yes / .perm-no cell. */
.perm-mark.perm-yes { color: var(--ok); }
.perm-mark.perm-no { color: var(--danger); }

.setting-hint {
    /* Aligned under the label's text, clear of the box that precedes it. */
    margin: 4px 0 0;
    padding-inline-start: 24px;
}

/* أوقات الدوام — the one setting that is more than a box, so its two times sit
   indented under their switch and read as belonging to it. */
.access-window-times {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px;
    margin: 10px 0 0;
    padding-inline-start: 24px;
}
.access-window-times .form-group { margin: 0; }
.access-window-times input[type="time"] { width: auto; min-width: 130px; }

/* States the office's own answer back to it, so a مدير setting the hours can
   see at a glance whether he has just shut the system. */
.access-window-state {
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.access-window-state.is-open { background: var(--ok-bg); color: var(--ok); }
.access-window-state.is-shut { background: var(--warn-bg); color: var(--warn); }

table.data.perm-matrix td.perm-cell { text-align: center; font-weight: 700; }
table.data.perm-matrix th.perm-role { text-align: center; }
table.data.perm-matrix tr.section-row th {
    background: var(--page);
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 0;
}

/* شريط المسؤولية — what a confined account is responsible for, above every page
   it opens. It has to read as a statement of fact rather than as an alert: it
   is on screen all day, every day, for the person it describes. */
.duty-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--brand);
    border-radius: var(--radius);
    padding: 9px 13px;
    margin-bottom: 16px;
    font-size: 13.5px;
}
.duty-title { font-weight: 600; color: var(--ink-soft); }
.duty-group { display: inline-flex; align-items: baseline; gap: 7px; }
.duty-section {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--page);
    border-radius: var(--radius);
    padding: 2px 7px;
}
.duty-names { font-weight: 600; }
.duty-note { color: var(--ink-soft); font-size: 12.5px; }

/* نطاق العمل — the مشاريع or المعامل an account is held to, in columns so a
   long list stays one glance rather than one scroll. */
.scope-guide { margin-top: 12px; }
.scope-owner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 22px;
    margin: 6px 0 4px;
}

/* The sentence that says what confinement costs. It appears only once a مشروع
   or معمل is actually ticked, so it has to read as a change of state rather
   than as one more line of help text. */
.hint-warn {
    background: var(--warn-bg);
    color: var(--warn);
    border-radius: var(--radius);
    padding: 8px 11px;
    margin-top: 8px;
}

.panel-inset {
    background: var(--page);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 0 0 18px;
}
.panel-inset table.data { background: var(--paper); }
.panel-inset .action-row { align-items: center; gap: 10px; margin-top: 12px; }

a.badge { text-decoration: none; }

/* ---------- Print tool (طباعة) ---------- */

.print-tool { position: relative; display: inline-block; }

.print-panel {
    position: absolute;
    z-index: 40;
    inset-inline-start: 0;
    top: calc(100% + 6px);
    min-width: 260px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(28, 39, 51, .16);
    padding: 12px 14px;
    text-align: start;
}
.print-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.print-panel-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.print-group + .print-group { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.print-group-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 4px;
}
.print-col {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    padding: 3px 0;
    cursor: pointer;
}

.print-only { display: none; }

@media print {
    .print-only { display: block; }
    .print-tool, .print-panel { display: none !important; }

    .print-head { margin-bottom: 14px; border-bottom: 1px solid #999; padding-bottom: 8px; }
    .print-head-top { display: flex; justify-content: space-between; font-size: 12px; }
    .print-head h2 { font-size: 17px; margin: 6px 0 2px; }
    .print-head-sub { font-size: 12.5px; }
    .print-head-by { font-size: 11.5px; color: #444; margin-top: 4px; }

    table.data { page-break-inside: auto; }
    table.data tr { page-break-inside: avoid; }

    @page { margin: 14mm; }
}

/* ---------- صفحة غير مصرّح (403) ---------- */

/* Standalone page: no sidebar, no header, so it centres in the viewport
   instead of sitting in the shell grid the rest of the app uses. */
.error-body { display: flex; align-items: center; justify-content: center; padding: 24px; }

.error-page { width: 100%; max-width: 560px; }

.error-panel { text-align: center; margin-bottom: 0; }

.error-code {
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    color: var(--line);
    margin: 0 0 4px;
    font-variant-numeric: tabular-nums;
}

.error-title { font-size: 20px; font-weight: 600; margin: 0 0 10px; }

.error-reason { font-size: 14.5px; margin: 0 0 14px; }

.error-panel .hint { margin-top: 10px; text-align: start; }

.error-actions { justify-content: center; margin-top: 20px; }

/* ---------- كشف المدخلات ---------- */

/* A copy of the office's own paper form (files/reports_example.docx): the
   معمل or المشروع centred at the top, «المدخل» and the date beneath it, then
   nothing but المبلغ والتفاصيل. Sizes are the form's own — 22pt title, 14pt
   body — so what leaves the printer matches what the office already files.

   On screen it is drawn as a sheet of paper rather than as another panel, so
   the person printing sees what they are about to get. */
.entry-sheet {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 32px;
    margin-bottom: 18px;
    max-width: 860px;
}

.entry-sheet-title {
    text-align: center;
    font-size: 29px;              /* 22pt */
    font-weight: 600;
    margin: 0 0 26px;
}

.entry-sheet-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 18.5px;            /* 14pt */
    font-weight: 700;
    margin-bottom: 14px;
}

.entry-sheet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18.5px;
}

.entry-sheet-table th,
.entry-sheet-table td {
    border: 1px solid #333;
    padding: 8px 10px;
    text-align: start;
    vertical-align: top;
}

/* The form rules its amount column at a quarter of the width. */
.entry-sheet-amount { width: 25%; font-variant-numeric: tabular-nums; }

.entry-sheet-table thead th { font-weight: 600; }

/* Ruled lines left to be filled in by hand, so a short day — or an empty
   one — still prints as a usable form. */
.entry-sheet-blank td { height: 34px; }

.entry-sheet-table tfoot td { font-weight: 700; }

.entry-sheet-dir { font-weight: 700; }
.entry-sheet-dir::after { content: ' — '; font-weight: 400; }

@media print {
    /* The sheet is the page: no border, no card, and the margins are the
       form's own inch. */
    .entry-sheet { border: 0; border-radius: 0; padding: 0; margin: 0; max-width: none; }
    .entry-sheet-title { font-size: 22pt; margin-bottom: 24pt; }
    .entry-sheet-meta { font-size: 14pt; margin-bottom: 10pt; }
    .entry-sheet-table { font-size: 14pt; }
    .entry-sheet-table th, .entry-sheet-table td { border: 1px solid #000; }
    .entry-sheet-blank td { height: 26pt; }

    /* The page margin stays the app's own 14mm rather than the form's inch:
       @page cannot be scoped to one screen, and widening it here would widen
       every other printout in the system. */
}