/* Gamliot — shell and shared styles. The palette is the letterhead's: navy structure,
   green accent, pale grey tints. Component-level looks come from MudBlazor's theme in
   MainLayout.razor; this file is layout, the sign-in page and a few shared panels. */

:root {
    --g-navy: #0D2736;
    --g-navy-2: #1E3E52;
    --g-green: #37DD0F;
    --g-green-2: #2BB50B;
    --g-bg: #F5F7F9;
    --g-panel: #FFFFFF;
    --g-line: #E1E6EB;
    --g-text: #1F2933;
    --g-muted: #555555;
    --g-faint: #9AA5B1;
    --g-tint: #F5F7F9;
    --g-tint-green: #E8FCE0;
    --sidebar-w: 264px;
}

html, body { font-family: "Inter", Arial, sans-serif; background: var(--g-bg); color: var(--g-text); margin: 0; }
h1, h2, h3, h4 { margin: 0; }
a { color: var(--g-navy-2); }

/* ── Shell ──────────────────────────────────────────────────────────────── */

.shell { display: flex; min-height: 100vh; background: var(--g-bg); }

.sidebar {
    width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
    background: linear-gradient(180deg, #0D2B38 0%, #0B2732 55%, #0A2330 100%); color: #C9D4DC;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow: hidden;
}
/* The two green arcs from the sign-in page, so the shell and the door look like one product. */
.sidebar-art { position: absolute; inset: 0; pointer-events: none; }
.sidebar-art::before, .sidebar-art::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid rgba(32, 225, 58, 0.34); }
.sidebar-art::before { width: 420px; height: 420px; right: -40px; top: -250px; }
.sidebar-art::after { width: 520px; height: 520px; left: 150px; top: 46%; border-color: rgba(60, 203, 115, 0.16); }
.sidebar > :not(.sidebar-art) { position: relative; }

.brand { padding: 26px 24px 16px; display: flex; flex-direction: column; gap: 2px; }
.brand-mark { font-weight: 800; font-size: 2.1rem; letter-spacing: -0.03em; color: #fff; text-decoration: none; line-height: 1; }
.brand-g { color: #20E13A; }
.brand-tag { font-size: 0.78rem; color: #9FB5C4; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav { padding: 6px 16px; flex: 1; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
.nav-link {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px; border-radius: 12px; border: 1px solid transparent;
    color: #D3DEE5; text-decoration: none; font-size: 0.95rem; font-weight: 500;
}
.nav-link .mud-icon-root { font-size: 22px; opacity: 0.9; }
.nav-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav-link.active {
    background: linear-gradient(90deg, rgba(32, 225, 58, 0.30), rgba(32, 225, 58, 0.10));
    border-color: rgba(62, 234, 98, 0.42); color: #fff; font-weight: 600;
    box-shadow: 0 6px 18px rgba(4, 20, 27, 0.35);
}
.nav-link.active .mud-icon-root { color: #3EEA62; opacity: 1; }
.nav-section { margin: 16px 12px 5px; font-size: 0.68rem; letter-spacing: 0.2em; color: #8AA0AE; text-transform: uppercase; font-weight: 600; }
.nav-soon { opacity: 0.4; cursor: default; }
.nav-soon-tag { margin-left: auto; font-size: 0.6rem; letter-spacing: 0.06em; border: 1px solid #3A5566; border-radius: 5px; padding: 1px 5px; }

.sidebar-foot { padding: 14px 20px 14px; border-top: 1px solid rgba(255, 255, 255, 0.09); background: rgba(8, 28, 38, 0.55); }
.user-card { display: flex; align-items: center; gap: 12px; }
.user-text { min-width: 0; flex: 1; }
.avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
    background: #20E13A; color: #0D2B38;
    display: grid; place-items: center; font-weight: 700; font-size: 0.92rem;
}
.user-name { color: #fff; font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { color: #9FB5C4; font-size: 0.78rem; }
.user-card .mud-icon-button { color: #9FB5C4; }
.logout-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 10px;
    padding: 9px 12px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0 0 8px 8px; background: transparent;
    color: #D3DEE5; font: inherit; font-size: 0.92rem; cursor: pointer;
}
.logout-btn:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

.shell-backdrop { display: none; }
.shell-main {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    background:
        radial-gradient(900px 420px at 100% 0%, rgba(217, 247, 229, 0.75), transparent 70%),
        radial-gradient(700px 360px at 55% 0%, rgba(223, 242, 255, 0.55), transparent 70%),
        var(--g-bg);
}

.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 28px 6px; flex-wrap: wrap; }
/* The title and what the page is for, on one line: the sub line gives way first when room runs out. */
.topbar-titles { min-width: 0; flex: 1 1 auto; display: flex; align-items: baseline; gap: 12px; }
.topbar-title { flex: none; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--g-navy); line-height: 1.2; white-space: nowrap; }
.topbar-sub { min-width: 0; padding-left: 12px; border-left: 1px solid #D5DEE4; color: var(--g-muted); font-size: 0.84rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-right .chip { padding: 6px 14px; font-size: 0.82rem; color: var(--g-navy); box-shadow: 0 6px 18px rgba(13, 43, 56, 0.06); }
.menu-toggle.mud-button-root { display: none; width: 40px; height: 40px; }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px;
    background: var(--g-panel); border: 1px solid var(--g-line);
    color: var(--g-muted); font-size: 0.8rem; font-weight: 500;
}

.page { padding: 12px 28px 32px; flex: 1; }

/* ── Panels & forms ─────────────────────────────────────────────────────── */

.panel {
    background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 12px;
    padding: 20px 22px;
}
.panel + .panel { margin-top: 16px; }
.panel-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.panel-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.panel-title { font-size: 1.02rem; font-weight: 700; color: var(--g-navy); }
.panel-sub { color: var(--g-muted); font-size: 0.82rem; margin-top: 2px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.span-2 { grid-column: span 2; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.settings-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 12px;
    padding: 18px; text-decoration: none; color: inherit;
}
.settings-card:hover { border-color: var(--g-navy-2); box-shadow: 0 2px 10px rgba(13, 39, 54, 0.08); }
.settings-card .mud-icon-root { font-size: 28px; color: var(--g-navy); flex: 0 0 auto; }
.settings-card-title { font-weight: 600; color: var(--g-navy); }
.settings-card-sub { color: var(--g-muted); font-size: 0.82rem; margin-top: 2px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.stat { background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 12px; padding: 16px 18px; }
.stat-label { color: var(--g-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--g-navy); margin-top: 4px; }
.stat-sub { color: var(--g-faint); font-size: 0.8rem; margin-top: 2px; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; }
.tag-green { background: var(--g-tint-green); color: var(--g-green-2); }
.tag-grey { background: var(--g-tint); color: var(--g-muted); }
.tag-navy { background: #E3EAF0; color: var(--g-navy); }
.tag-amber { background: #FEF3C7; color: #B45309; }
.tag-red { background: #FEE2E2; color: #B91C1C; }

.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85em; }
.muted { color: var(--g-muted); }
.faint { color: var(--g-faint); }

.logo-preview { max-width: 240px; max-height: 120px; border: 1px dashed var(--g-line); border-radius: 8px; padding: 8px; background: #fff; }
.mark-preview { width: 180px; height: 100px; object-fit: contain; }

/* ── Document editors (quote, invoice) ───────────────────────────────────── */

.doc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.doc-toolbar-left { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 0.88rem; }
.doc-toolbar-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin-bottom: 16px; }
.doc-grid .panel + .panel { margin-top: 0; }
.doc-side { align-self: start; }

.totals > div { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--g-line); font-size: 0.92rem; }
.totals > div:last-child { border-bottom: 0; }
.totals-input .mud-input-control { margin: 0; }
.totals-input input { text-align: right; }
.totals-total { font-weight: 700; color: var(--g-navy); font-size: 1.02rem !important; background: var(--g-tint-green); margin: 4px -10px 0; padding: 8px 10px !important; border-radius: 8px; }
.totals-due { font-weight: 700; color: #B91C1C; }

.lines-table { width: 100%; border-collapse: collapse; }
.lines-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-muted); padding: 6px 8px; border-bottom: 2px solid var(--g-line); }
.lines-table td { padding: 4px 8px; border-bottom: 1px solid var(--g-line); vertical-align: top; }
.lines-table .line-pick .mud-input { font-size: 0.82rem; }
.lines-table .line-desc .mud-input { font-size: 0.92rem; }
.lines-table .mud-input-control { margin: 0; }
.lines-table .mud-input.mud-input-text { padding-top: 2px; }

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

.attachment-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--g-line); border-radius: 8px; padding: 4px 6px 4px 10px; background: var(--g-tint); font-size: 0.85rem; }
.attachment-chip a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--g-navy); }
.attachment-chip .mud-icon-button { padding: 2px; }

/* ── Sign in ────────────────────────────────────────────────────────────── */

/* One screen, never a scrollbar: the page is exactly the viewport and everything inside is
   sized from its height, so a short laptop screen gets a smaller version of the same page. */
.login-page {
    --lg-navy: #0D2B38; --lg-green: #20E13A; --lg-green-soft: #3EEA62; --lg-text: #0D2430;
    --lg-muted: #9FB5C4; --lg-border: #D8E2E8;
    height: 100vh; height: 100dvh; overflow: hidden;
    display: grid; grid-template-columns: 53.2fr 46.8fr;
    background: #F7FAFC;
}

.lp-side {
    position: relative; min-height: 0; overflow: hidden; color: #fff;
    background: var(--lg-navy) url('img/login/left_background_decoration.svg') center / 100% 100% no-repeat;
    padding: clamp(24px, 7.6vh, 76px) clamp(28px, 5.1vw, 86px) clamp(18px, 4.6vh, 46px);
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}
.lp-brand { font-weight: 700; font-size: clamp(2rem, 6.2vh, 3.75rem); letter-spacing: -0.035em; line-height: 1; }
.lp-brand .brand-g { color: var(--lg-green); }
.lp-legal { color: var(--lg-muted); margin-top: clamp(6px, 1.6vh, 16px); font-size: clamp(0.85rem, 2vh, 1.2rem); }

.lp-body { align-self: center; min-height: 0; }
.lp-eyebrow { color: #B9C9D4; font-size: clamp(0.68rem, 1.45vh, 0.88rem); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
.lp-headline { margin-top: clamp(6px, 1.4vh, 14px); font-size: clamp(1.45rem, 4.5vh, 2.7rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.015em; color: #fff; }
.lp-sub { margin: clamp(8px, 2.2vh, 22px) 0 0; color: #D5DFE6; font-size: clamp(0.9rem, 2.1vh, 1.25rem); }
.lp-promise { margin: clamp(2px, 0.8vh, 8px) 0 0; color: var(--lg-green); font-weight: 600; font-size: clamp(0.9rem, 2.1vh, 1.25rem); }

.lp-showcase { margin-top: clamp(14px, 4.4vh, 44px); position: relative; }
.lp-features { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(8px, 2.5vh, 24px); position: relative; z-index: 1; }
.lp-features li { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 20px); }
.lp-features img { width: clamp(38px, 6vh, 56px); height: clamp(38px, 6vh, 56px); flex: none; }
.lp-features strong { display: block; font-weight: 600; font-size: clamp(0.85rem, 1.75vh, 1.03rem); color: #fff; }
.lp-features span { display: block; margin-top: 2px; color: var(--lg-muted); font-size: clamp(0.76rem, 1.55vh, 0.92rem); white-space: nowrap; }
/* Sits beside the list and is allowed to run past it, top and bottom, as in the design. */
.lp-hero { position: absolute; right: -11%; top: 50%; transform: translateY(-47%); height: 130%; max-width: 62%; object-fit: contain; object-position: right center; pointer-events: none; }

.lp-foot {
    display: flex; align-items: center; gap: 10px; min-height: 22px;
    border-top: 1px solid rgba(159, 181, 196, 0.18); padding-top: clamp(12px, 3.2vh, 32px);
    color: #C9D6DE; font-size: clamp(0.8rem, 1.75vh, 1.03rem);
}
.lp-foot img { width: 22px; height: 22px; }

.lp-centre {
    min-height: 0; display: grid; place-items: center; padding: 20px;
    background: #F7FAFC url('img/login/right_background_decoration.svg') center / 100% 100% no-repeat;
    overflow-y: auto;   /* only ever reached on a screen too short to hold the form at its smallest */
}
.login-card {
    width: 100%; max-width: 536px; box-sizing: border-box; background: #fff; border-radius: 24px;
    box-shadow: 0 24px 60px rgba(13, 43, 56, 0.12);
    padding: clamp(22px, 5.4vh, 52px) clamp(22px, 3vw, 50px) clamp(20px, 4.4vh, 42px);
}
.login-title { font-size: clamp(1.6rem, 4.3vh, 2.5rem); font-weight: 700; letter-spacing: -0.015em; color: var(--lg-text); }
.login-subtitle { color: #60798A; font-size: clamp(0.9rem, 2vh, 1.16rem); line-height: 1.4; margin: clamp(4px, 1.3vh, 12px) 0 clamp(8px, 2.6vh, 26px); }
.login-label { display: block; font-size: clamp(0.88rem, 1.85vh, 1.06rem); font-weight: 600; color: var(--lg-text); margin: clamp(10px, 2.4vh, 24px) 0 clamp(5px, 1vh, 10px); }
.login-field { position: relative; }
.login-field-icon { position: absolute; left: 18px; top: 50%; width: 26px; height: 26px; transform: translateY(-50%); pointer-events: none; }
.login-input {
    width: 100%; box-sizing: border-box; height: clamp(44px, 6.1vh, 58px); padding: 0 16px 0 58px;
    border: 1px solid var(--lg-border); border-radius: 14px; font: inherit; font-size: clamp(0.95rem, 2vh, 1.15rem);
    background: #fff; color: var(--lg-text);
}
.login-input.has-toggle { padding-right: 54px; }
.login-input::placeholder { color: #8A9DAA; }
.login-input:focus { outline: 3px solid rgba(32, 225, 58, 0.22); border-color: var(--lg-navy); }
.login-input.invalid { border-color: #DC2626; }
.login-reveal {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 0; border-radius: 10px; background: transparent; color: #78909E; cursor: pointer;
}
.login-reveal:hover, .login-reveal:focus-visible { background: #F1F5F8; color: var(--lg-navy); outline: none; }
.login-reveal svg { width: 24px; height: 24px; }
.login-reveal[aria-pressed="true"] .slash { display: none; }
.login-button {
    width: 100%; height: clamp(46px, 6.5vh, 62px); margin-top: clamp(14px, 2.9vh, 28px);
    display: flex; align-items: center; justify-content: center; gap: 12px;
    border: 0; border-radius: 14px; background: var(--lg-navy); color: #fff;
    font: inherit; font-weight: 600; font-size: clamp(1rem, 2.05vh, 1.2rem); cursor: pointer;
    box-shadow: 0 10px 22px rgba(13, 43, 56, 0.22); transition: background 0.15s ease;
}
.login-button img { width: 26px; height: 26px; transition: transform 0.15s ease; }
.login-button:hover { background: #123746; }
.login-button:hover img { transform: translateX(3px); }
.login-button:focus-visible { outline: 3px solid rgba(32, 225, 58, 0.45); outline-offset: 2px; }
.login-error { background: #FEE2E2; color: #B91C1C; border-radius: 10px; padding: 10px 12px; font-size: 0.88rem; }
.login-validation { color: #B91C1C; font-size: 0.8rem; display: block; margin-top: 4px; }
.login-foot { margin-top: clamp(12px, 3vh, 30px); color: #78909E; font-size: clamp(0.78rem, 1.6vh, 0.95rem); text-align: center; }

/* The illustration is the first thing to go when the dark panel gets narrow. */
@media (max-width: 1180px) { .lp-hero { display: none; } }
@media (max-height: 560px) { .login-subtitle { display: none; } }

/* ── Dashboard ─────────────────────────────────────────────────────────── */

/* One screen, never a scrollbar. The page is pinned to the height of the window; the chart
   and the document list take whatever is left, and text and controls are sized from the
   window's height so a shorter screen gets the same page, smaller. */
.shell-main:has(.dash) { height: 100vh; height: 100dvh; overflow: hidden; }
.shell-main:has(.dash) .topbar { padding-top: clamp(6px, 1.2vh, 12px); }
.shell-main:has(.dash) .topbar-right .chip { padding: clamp(5px, 1vh, 9px) 16px; font-size: clamp(0.76rem, 1.55vh, 0.88rem); }
.page:has(> .dash) { display: flex; flex-direction: column; min-height: 0; padding-top: clamp(6px, 1.2vh, 12px); padding-bottom: clamp(10px, 2vh, 20px); }
.dash { --dash-gap: clamp(8px, 1.7vh, 18px); flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--dash-gap); }

.dash-stats { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dash-gap); }
.dash-stat, .dash-card {
    background: #fff; border: 1px solid #E6ECF0; border-radius: clamp(12px, 1.9vh, 18px);
    box-shadow: 0 10px 30px rgba(13, 43, 56, 0.06);
}
.dash-stat { padding: clamp(9px, 1.9vh, 20px) clamp(12px, 1.4vw, 22px) clamp(10px, 2.1vh, 22px); min-width: 0; }
.dash-rose { background: linear-gradient(160deg, #fff 35%, #FFEDEE 100%); }
.dash-blue { background: linear-gradient(160deg, #fff 35%, #EAF3FF 100%); }
.dash-green { background: linear-gradient(160deg, #fff 35%, #E6FAEC 100%); }
.dash-stat-head { display: flex; align-items: center; gap: clamp(8px, 0.9vw, 14px); }
.dash-stat-label { color: #24333D; font-size: clamp(0.64rem, 1.4vh, 0.8rem); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; line-height: 1.25; }
.dash-stat-value { font-size: clamp(1.05rem, min(3.3vh, 2.1vw), 2.05rem); font-weight: 800; letter-spacing: -0.01em; color: #0D2430; margin-top: clamp(3px, 1.1vh, 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-stat-value.up { color: #16B436; }
.dash-stat-value.down { color: #B91C1C; }
.dash-stat-sub { color: #6B7F8C; font-size: clamp(0.7rem, 1.6vh, 0.95rem); margin-top: clamp(1px, 0.7vh, 8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-stat-sub .up { color: #128A2B; font-weight: 500; }
.dash-stat-sub .down { color: #DC2626; font-weight: 500; }

.dash-tile { width: clamp(28px, 4.8vh, 46px); height: clamp(28px, 4.8vh, 46px); flex: none; border-radius: 28%; display: grid; place-items: center; }
.dash-tile .mud-icon-root { font-size: clamp(16px, 2.5vh, 24px); }
.dash-rose .dash-tile, .dash-tile-rose { background: #FFE1E4; color: #E0344B; }
.dash-blue .dash-tile, .dash-tile-blue { background: #DCEBFF; color: #2563EB; }
.dash-green .dash-tile, .dash-tile-green { background: #D9F7E1; color: #129C30; }

.dash-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 400px); gap: var(--dash-gap); }
.dash-card { padding: clamp(10px, 2.1vh, 22px) clamp(12px, 1.5vw, 24px); min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.dash-card-head { flex: none; display: flex; align-items: center; gap: clamp(8px, 0.9vw, 14px); margin-bottom: clamp(5px, 1.3vh, 14px); }
.dash-card-title { font-size: clamp(0.9rem, 2vh, 1.18rem); font-weight: 700; color: #0D2430; }
.dash-card-sub { color: #6B7F8C; font-size: clamp(0.7rem, 1.5vh, 0.9rem); margin-top: 1px; }
.dash-legend { margin-left: auto; display: flex; gap: 8px; }
.dash-legend span { display: inline-flex; align-items: center; gap: 8px; padding: clamp(2px, 0.6vh, 6px) 12px; border: 1px solid #E1E8ED; border-radius: 999px; font-size: clamp(0.7rem, 1.45vh, 0.85rem); color: #24333D; background: #fff; }
.dash-legend i { width: 10px; height: 10px; border-radius: 3px; }
.dash-swatch-sales, .dash-bar-sales { background: #0D2B38; }
.dash-swatch-spend, .dash-bar-spend { background: #9AA7B2; }
.dash-view-all { margin-left: auto; color: #1D5FD1; font-size: clamp(0.72rem, 1.5vh, 0.88rem); font-weight: 500; text-decoration: none; white-space: nowrap; }
.dash-view-all:hover { text-decoration: underline; }
.dash-empty { display: flex; align-items: center; gap: 8px; color: #6B7F8C; font-size: clamp(0.76rem, 1.5vh, 0.9rem); }

/* The chart takes the height the rest of the card leaves it: an axis column and a plot, with
   the month labels on a second row under the plot. */
.dash-chart { flex: 1; min-height: 84px; display: grid; grid-template-columns: clamp(46px, 3.8vw, 62px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0 10px; margin: clamp(2px, 0.6vh, 6px) 0 clamp(8px, 2vh, 22px); }
.dash-axis { position: relative; }
.dash-axis span { position: absolute; right: 0; transform: translateY(-50%); color: #5E7280; font-size: clamp(0.62rem, 1.35vh, 0.8rem); white-space: nowrap; }
.dash-axis span:nth-child(1) { top: 0; } .dash-axis span:nth-child(2) { top: 25%; } .dash-axis span:nth-child(3) { top: 50%; }
.dash-axis span:nth-child(4) { top: 75%; } .dash-axis span:nth-child(5) { top: 100%; }
.dash-plot { position: relative; display: flex; border: 1px solid #E3EAEF; }
.dash-gridline { position: absolute; left: 0; right: 0; border-top: 1px dashed #E3EAEF; }
.dash-gridline.zero { border-top: 1px solid #C9D4DC; }
.dash-col { position: relative; flex: 1 1 0; border-left: 1px dashed #EDF1F4; }
.dash-col:first-of-type { border-left: 0; }
.dash-bar { position: absolute; width: 24%; min-height: 2px; transition: opacity 0.15s ease; }
.dash-bar-sales { right: 51%; bottom: 50%; border-radius: 3px 3px 0 0; }
.dash-bar-spend { left: 51%; top: 50%; border-radius: 0 0 3px 3px; }
.dash-col:hover .dash-bar { opacity: 0.75; }
.dash-months { display: flex; padding-top: clamp(5px, 1.2vh, 12px); }
.dash-months div { flex: 1 1 0; text-align: center; min-width: 0; }
.dash-months span { display: block; color: #5E7280; font-size: clamp(0.66rem, 1.45vh, 0.85rem); white-space: nowrap; }
.dash-months strong { display: block; margin-top: clamp(1px, 0.6vh, 6px); color: #0D2430; font-size: clamp(0.66rem, 1.4vh, 0.82rem); font-weight: 700; }
.dash-months strong.down { color: #DC2626; }

.dash-owed { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dash-gap); }
.dash-owed-card { border: 1px solid #E6ECF0; border-radius: clamp(10px, 1.5vh, 14px); padding: clamp(7px, 1.6vh, 16px) clamp(10px, 1.2vw, 20px) clamp(6px, 1.4vh, 14px); min-width: 0; }
.dash-owed-head { display: flex; align-items: center; gap: clamp(8px, 0.9vw, 14px); margin-bottom: clamp(1px, 0.8vh, 8px); }
.dash-owed-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: clamp(3px, 0.9vh, 9px) 0; border-bottom: 1px solid #EDF1F4; font-size: clamp(0.76rem, 1.65vh, 1rem); color: #0D2430; white-space: nowrap; }
.dash-owed-row:first-of-type span:first-child { color: #1D4E89; }
.dash-owed-row.down { color: #B91C1C; font-weight: 600; }
.dash-owed-link { display: inline-block; margin-top: clamp(3px, 1vh, 10px); color: #7A8D99; font-size: clamp(0.68rem, 1.45vh, 0.88rem); text-decoration: none; }
.dash-owed-link:hover { color: #0D2B38; }

.dash-side { display: flex; flex-direction: column; gap: var(--dash-gap); min-width: 0; min-height: 0; }
/* What needs doing is never cut off; the document list below gives up its rows instead. */
.dash-side > .dash-card:first-child { flex: none; max-height: 55%; overflow-y: auto; scrollbar-width: thin; }
.dash-side > .dash-card:last-child { flex: 1; overflow: hidden; }

.dash-todo { flex: none; display: flex; align-items: center; gap: 12px; padding: clamp(3px, 0.75vh, 7px) 12px clamp(3px, 0.75vh, 7px) 8px; border: 1px solid #E6ECF0; border-radius: 12px; color: #0D2430; font-size: clamp(0.76rem, 1.6vh, 0.95rem); text-decoration: none; }
.dash-todo + .dash-todo { margin-top: clamp(4px, 0.8vh, 8px); }
.dash-todo:hover { border-color: #C9D4DC; background: #FAFCFD; }
.dash-todo .mud-icon-root:last-child { margin-left: auto; color: #7A8D99; }
.dash-todo-count { min-width: 32px; text-align: center; padding: clamp(1px, 0.4vh, 4px) 8px; border-radius: 999px; background: #EEF2F5; color: #0D2B38; font-weight: 700; font-size: clamp(0.7rem, 1.45vh, 0.85rem); }
.dash-todo-count.urgent { background: #FFE1E4; color: #C81E3A; }

/* Rows that do not fit wrap into a second column, which is clipped: the list shows as many
   whole documents as there is room for and never half of one. "View all" has the rest. */
.dash-docs { flex: 1; min-height: 0; display: flex; flex-direction: column; flex-wrap: wrap; overflow: hidden; }
.dash-doc { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: clamp(8px, 0.8vw, 12px); padding: clamp(3px, 0.95vh, 9px) 2px; border-bottom: 1px solid #EDF1F4; color: #0D2430; font-size: clamp(0.72rem, 1.5vh, 0.9rem); text-decoration: none; }
.dash-doc:hover .dash-doc-party { text-decoration: underline; }
.dash-doc .mud-icon-root { color: #7A8D99; flex: none; font-size: clamp(15px, 2.1vh, 20px); }
.dash-doc .mono { color: #5E7280; min-width: clamp(96px, 7.4vw, 118px); white-space: nowrap; }
.dash-doc-party { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-setup { flex: none; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; background: #fff; border: 1px solid #E6ECF0; border-radius: 12px; padding: clamp(4px, 1vh, 9px) 16px; font-size: clamp(0.72rem, 1.5vh, 0.88rem); color: #0D2430; }
.dash-setup strong { margin-right: 6px; }
.dash-setup a { padding: 2px 10px; border: 1px solid #E1E8ED; border-radius: 999px; color: #24333D; text-decoration: none; }
.dash-setup a:hover { border-color: #0D2B38; }
.dash-setup a.done { color: #128A2B; border-color: #BFEBCB; background: #F0FBF3; }
.dash-setup a.done::before { content: "\2713  "; }

/* A window too narrow or too short for one screen goes back to an ordinary page that scrolls. */
@media (max-width: 1100px), (max-height: 520px) {
    .shell-main:has(.dash) { height: auto; overflow: visible; }
    .page:has(> .dash) { display: block; }
    .dash { display: grid; }
    .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-grid { grid-template-columns: 1fr; }
    .dash-chart { flex: none; height: 240px; }
    .dash-side > .dash-card:first-child { max-height: none; }
    .dash-docs { flex-wrap: nowrap; }
    .dash-setup { flex-wrap: wrap; white-space: normal; }
}
@media (max-width: 640px) {
    .dash-stats, .dash-owed { grid-template-columns: 1fr; }
    .dash-legend { display: none; }
}

/* ── Dashboard, three columns: the money, what needs doing, and what is coming ── */
.dash-grid.dash-grid-3 { grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.8fr) minmax(270px, 0.9fr); grid-template-rows: minmax(0, 1fr); }
.dash-grid-3 > .dash-card { min-height: 0; overflow: hidden; }
.dash-grid-3 .dash-owed-row { font-size: clamp(0.72rem, 1.55vh, 0.92rem); }
.dash-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.dash-attn .dash-todo { font-size: clamp(0.74rem, 1.55vh, 0.9rem); }
.dash-badge { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: #FFE1E4; color: #C81E3A; font-size: clamp(0.66rem, 1.35vh, 0.78rem); font-weight: 700; white-space: nowrap; }
.dash-grid-3 .dash-side > .dash-card:first-child { flex: 1.5 1 0; max-height: none; overflow: hidden; }
.dash-grid-3 .dash-side > .dash-card:last-child { flex: 1 1 0; }

.dash-event { display: flex; align-items: center; gap: clamp(7px, 0.7vw, 10px); padding: clamp(3px, 0.75vh, 7px) 2px; border-bottom: 1px solid #EDF1F4; color: #0D2430; text-decoration: none; min-width: 0; }
.dash-event:last-child { border-bottom: 0; }
.dash-event:hover strong { text-decoration: underline; }
.dash-when { flex: none; width: clamp(54px, 4.4vw, 70px); color: #5E7280; font-size: clamp(0.66rem, 1.35vh, 0.8rem); font-weight: 600; white-space: nowrap; }
.dash-when.today { color: #C81E3A; }
.dash-kind { width: clamp(22px, 3.2vh, 28px); height: clamp(22px, 3.2vh, 28px); flex: none; display: grid; place-items: center; border-radius: 8px; }
.dash-kind .mud-icon-root { font-size: clamp(13px, 1.9vh, 16px); }
.dash-kind-0 { background: #D9F7E1; color: #129C30; }
.dash-kind-1 { background: #FFE8D6; color: #C2410C; }
.dash-kind-2 { background: #E3EEFF; color: #1D4ED8; }
.dash-kind-3 { background: #EFE7FF; color: #6D28D9; }
.dash-kind-4 { background: #FEF0CD; color: #A15C07; }
.dash-kind-5 { background: #D6F4F4; color: #0F766E; }
.dash-kind-6 { background: #FCE7F3; color: #BE185D; }
.dash-kind-7 { background: #E0F2FE; color: #0369A1; }
.dash-event-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dash-event-text strong { font-size: clamp(0.72rem, 1.5vh, 0.88rem); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-event-text span { font-size: clamp(0.64rem, 1.3vh, 0.76rem); color: #7A8D99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash-pulse { flex: none; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; background: #fff; border: 1px solid #E6ECF0; border-radius: 12px; padding: clamp(4px, 0.9vh, 8px) 16px; font-size: clamp(0.72rem, 1.5vh, 0.86rem); color: #0D2430; }
.dash-pulse strong { margin-right: 4px; }
.dash-pulse a { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid #E1E8ED; border-radius: 999px; color: #24333D; text-decoration: none; }
.dash-pulse a:hover { border-color: #0D2B38; }
.dash-pulse a .mud-icon-root { font-size: clamp(14px, 1.9vh, 17px); color: #5E7280; }
.dash-pulse a.warn { border-color: #F6E2AE; background: #FFF8E6; }
.dash-pulse a.setup.done { color: #128A2B; border-color: #BFEBCB; background: #F0FBF3; }
.dash-pulse a.setup.done::before { content: "\2713"; }
.dash-pulse-split { flex: none; width: 1px; height: 18px; margin: 0 6px; background: #D5DEE4; }

@media (max-width: 1100px), (max-height: 520px) {
    .dash-grid.dash-grid-3 { grid-template-columns: 1fr; grid-template-rows: none; }
    .dash-grid-3 > .dash-card, .dash-grid-3 .dash-side > .dash-card { overflow: visible; }
    .dash-scroll { overflow: visible; }
    .dash-pulse { flex-wrap: wrap; white-space: normal; }
}

/* ── Lists ─────────────────────────────────────────────────────────────── */

/* A list page: a toolbar, a table of fixed-height rows and a pager. The rows are kept short
   on purpose, so a screen holds as many records as it can. */
.gl-card { overflow-x: auto; background: #fff; border: 1px solid #E6ECF0; border-radius: 18px; box-shadow: 0 10px 30px rgba(13, 43, 56, 0.06); padding: 14px 20px 10px; }
.gl-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.gl-search { max-width: 520px; flex: 1 1 280px; }
.gl-search .mud-input-outlined-border { border-radius: 12px; }
.gl-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.gl-toolbar-right .mud-button-root { border-radius: 10px; }

.gl-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.gl-table th {
    height: 36px; padding: 0 10px; text-align: left; white-space: nowrap; cursor: pointer; user-select: none;
    font-size: 0.8rem; font-weight: 600; color: #0D2430; border-bottom: 1px solid #E3EAEF;
}
.gl-table th .mud-icon-root { font-size: 15px; vertical-align: -3px; margin-left: 2px; color: #9AA7B2; }
.gl-table th.sorted .mud-icon-root { color: #0D2B38; }
.gl-table th.gl-actions { cursor: default; }
.gl-table td { height: 44px; padding: 0 10px; border-bottom: 1px solid #EDF1F4; font-size: 0.84rem; color: #24333D; }
.gl-table tbody tr { cursor: pointer; }
.gl-table tbody tr:hover { background: #F7FAFC; }
.gl-table tbody tr.retired { opacity: 0.6; }
.gl-code { color: #3B4D59; white-space: nowrap; }
.gl-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-actions { width: 1%; text-align: right !important; white-space: nowrap; }
.gl-actions .mud-icon-button { padding: 4px; border-radius: 8px; background: #F5F8FA; }

.gl-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gl-kind { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; }
.gl-kind .mud-icon-root { font-size: 17px; }
.gl-kind-0 { background: #E3EEFF; color: #1D4ED8; }
.gl-kind-1 { background: #EFE7FF; color: #6D28D9; }
.gl-kind-2 { background: #E3F8E8; color: #15803D; }
.gl-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; }
.gl-tone-0 { background: #DCEBFF; color: #1D4ED8; }
.gl-tone-1 { background: #FFE1EA; color: #BE185D; }
.gl-tone-2 { background: #D9F7E1; color: #15803D; }
.gl-tone-3 { background: #FFE8D6; color: #C2410C; }
.gl-tone-4 { background: #E9E1FF; color: #6D28D9; }
.gl-tone-5 { background: #D6F4F4; color: #0F766E; }
.gl-two { min-width: 0; line-height: 1.2; }
.gl-two strong { display: block; font-weight: 600; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-two span:not(.tag) { display: block; margin-top: 1px; color: #7A8D99; font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gl-chip { display: inline-block; padding: 3px 12px; border-radius: 8px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.gl-chip-green { background: #E3F8E8; color: #15803D; }
.gl-chip-blue { background: #E3EEFF; color: #1D4ED8; }
.gl-chip-violet { background: #EFE7FF; color: #6D28D9; }
.gl-chip-red { background: #FFE4E4; color: #C81E1E; }
.gl-chip-slate { background: #E9EEF5; color: #3B4D7A; }
.gl-chip-amber { background: #FEF0CD; color: #A15C07; }

.gl-filter { flex: 0 1 260px; min-width: 170px; max-width: 260px; }
.gl-filter .mud-input-outlined-border { border-radius: 12px; }
.gl-table.gl-caps th { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #3B4D59; }
.gl-table th.gl-right, .gl-table td.gl-right { text-align: right; }
.gl-date { color: #5E7280; white-space: nowrap; }
.gl-cur { margin-left: 4px; color: #3B4D59; }
.gl-date.gl-late { color: #C81E1E; font-weight: 600; }
.gl-date.gl-late .gl-two strong { color: #C81E1E; }
.gl-two span.gl-late-by { color: #C81E1E; font-weight: 600; }
/* A one-line summary in the toolbar, for lists that used to carry a row of figures above them. */
.gl-summary { font-size: 0.82rem; color: #5E7280; white-space: nowrap; }
.gl-summary strong { color: #0D2430; font-weight: 700; margin: 0 2px; }
.gl-summary-late { margin-left: 8px; border: 0; cursor: pointer; padding: 3px 10px; border-radius: 8px; background: #FFE4E4; color: #C81E1E; font: inherit; font-size: 0.76rem; font-weight: 600; }
.gl-summary-late:hover { background: #FFD3D3; }
.gl-summary-late.on { background: #C81E1E; color: #fff; }
.gl-summary-late .gl-inline-icon.mud-icon-root { margin: 0 3px 0 0; color: inherit; }
.gl-owed { font-weight: 700; color: #0D2430; }
.gl-ref { margin-left: 6px; color: #9AA7B2; font-size: 0.72rem; }
.gl-two strong.gl-plain { font-weight: 500; }
/* A cell that gives way when the table is tight: the text is cut with an ellipsis and the full value is in the tooltip. */
.gl-table td.gl-clip { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-table td.gl-clip.gl-clip-wide { max-width: 320px; }
/* A free-text column takes what the others leave and is cut there, so it never widens the table. */
.gl-table td.gl-fill { width: 30%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1500px) {
    .gl-table th, .gl-table td { padding: 0 6px; }
    .gl-table td.gl-clip { max-width: 110px; }
    .gl-table td.gl-clip.gl-clip-wide { max-width: 190px; }
}
/* A currency code inside a bold figure stays on the figure's line. */
.gl-two strong span:not(.tag) { display: inline; margin: 0 0 0 4px; font-size: inherit; color: #3B4D59; }

.gl-empty { padding: 28px; text-align: center; color: #6B7F8C; font-size: 0.9rem; }
/* ── Receivables: five figures, the aging and the follow-ups, then the customers ───────────────── */
.rv { --rv-gap: clamp(7px, 1.2vh, 14px); display: flex; flex-direction: column; gap: var(--rv-gap); }
.rv-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rv-kpi { display: flex; align-items: center; gap: 12px; min-width: 0; padding: clamp(5px, 1.1vh, 14px) 14px; background: #fff; border: 1px solid #E6ECF0; border-radius: 14px; box-shadow: 0 8px 24px rgba(13, 43, 56, 0.05); }
.rv-kpi > div { min-width: 0; display: flex; flex-direction: column; }
.rv-kpi > div > span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #3B4D59; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-kpi > div > strong { margin-top: 0; font-size: clamp(1rem, 2.5vh, 1.4rem); line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; color: #0D2430; white-space: nowrap; }
.rv-kpi > div > small { font-size: 0.74rem; line-height: 1.2; color: #6B7F8C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-kpi-green { background: linear-gradient(120deg, #F1FBF4, #E6F8EC); border-color: #D3F1DD; }
.rv-kpi-red { background: linear-gradient(120deg, #FFF4F4, #FFEAEA); border-color: #FBD5D5; }
.rv-kpi-icon { width: clamp(34px, 5vh, 42px); height: clamp(34px, 5vh, 42px); flex: none; border-radius: 12px; display: grid; place-items: center; }
.rv-kpi-icon .mud-icon-root { font-size: 22px; }
.rv-kpi-icon.rv-small { width: 30px; height: 30px; border-radius: 9px; }
.rv-kpi-icon.rv-small .mud-icon-root { font-size: 18px; }
.rv-blue { background: #E3EEFF; color: #1D4ED8; }
.rv-green { background: #DDF7E5; color: #15803D; }
.rv-red { background: #FFDCDC; color: #C81E1E; }
.rv-violet { background: #EFE7FF; color: #6D28D9; }
.rv-bad { color: #C81E1E !important; }
.rv-good { color: #15803D !important; }

.rv-mid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; }
.rv-card { min-width: 0; padding: clamp(6px, 1.1vh, 14px) 16px; background: #fff; border: 1px solid #E6ECF0; border-radius: 14px; box-shadow: 0 8px 24px rgba(13, 43, 56, 0.05); }
.rv-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(3px, 0.7vh, 10px); }
.rv-card-head > div { line-height: 1.25; }
.rv-card-title { font-size: 1rem; font-weight: 800; color: #0D2430; }
.rv-card-sub { font-size: 0.78rem; color: #6B7F8C; }
.rv-aging { display: flex; flex-direction: column; gap: clamp(1px, 0.55vh, 8px); }
.rv-bucket { display: grid; grid-template-columns: 52px minmax(0, 1fr) 130px; align-items: center; gap: 14px; font-size: 0.8rem; line-height: 1.45; color: #3B4D59; }
.rv-bucket strong { text-align: right; font-weight: 700; color: #0D2430; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-bar { height: 9px; border-radius: 6px; background: #EDF1F4; overflow: hidden; }
.rv-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #22B547, #3ECF62); }
.rv-bar i.late { background: linear-gradient(90deg, #E25555, #F07A7A); }
.rv-follow { display: flex; flex-direction: column; gap: clamp(4px, 0.8vh, 10px); }
.rv-follow-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: clamp(5px, 1vh, 10px) 12px; border: 1px solid #E6ECF0; border-radius: 12px; background: #fff;
                 color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.rv-follow-row:hover { background: #F7FAFC; border-color: #D6E0E7; }
.rv-follow-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rv-follow-row strong { font-size: 0.9rem; font-weight: 700; color: #0D2430; }
.rv-follow-row span:not(.rv-count) { font-size: 0.78rem; color: #6B7F8C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-follow-row > .mud-icon-root { color: #93A4B0; }
.rv-count { width: clamp(30px, 4.6vh, 38px); height: clamp(30px, 4.6vh, 38px); flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; font-weight: 800; }
.rv-count.green { background: #DDF7E5; color: #15803D; }
.rv-count.amber { background: #FEF0CD; color: #A15C07; }
.rv-count.red { background: #FFDCDC; color: #C81E1E; }

/* The heading gives way to the controls rather than pushing them onto a second line. */
.rv-table-title { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; margin-right: 12px; }
.rv-table-title strong { font-size: 1.02rem; font-weight: 800; color: #0D2430; }
.rv-table-title span { font-size: 0.78rem; color: #6B7F8C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-toolbar-right .rv-search { flex: 0 1 250px; min-width: 180px; }
.gl-toolbar-right .rv-status { flex: 0 1 160px; min-width: 140px; }
.rv-grid th, .rv-grid td { padding-left: 7px; padding-right: 7px; }
.rv-grid td.rv-c { text-align: center; }
.rv-foot-total strong { margin-left: 4px; font-size: 0.92rem; }
/* On a narrower window the tiles sit tighter, and the last-payment date (still in the export) gives its room to the names. */
@media (max-width: 1450px) {
    .rv-kpi { gap: 9px; padding-left: 10px; padding-right: 10px; }
    .rv-kpi-icon { width: 30px; height: 30px; border-radius: 9px; }
    .rv-kpi-icon .mud-icon-root { font-size: 18px; }
    .rv-kpi > div > span { font-size: 0.64rem; letter-spacing: 0.04em; }
    .rv-grid .rv-wide { display: none; }
}
@media (max-width: 1250px) {
    .rv-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rv-mid { grid-template-columns: 1fr; }
}

/* ── Statements: the same figures, then the accounts (or one account's movements) beside a side column ── */

/* One screen: the figures keep their height, the table takes what is left (the page sizes it
   in rows) and the side column's activity list is the part that gives way. */
.shell-main:has(.st) { height: 100vh; height: 100dvh; overflow: hidden; }
.page:has(> .st) { display: flex; flex-direction: column; min-height: 0; padding-bottom: clamp(10px, 2vh, 20px); }
.st { flex: 1; min-height: 0; }
.st-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(270px, 21vw, 360px); grid-template-rows: minmax(0, 1fr); gap: 12px; }
.st-main > .gl-card { align-self: start; min-height: 0; max-height: 100%; }
.st-side { align-self: start; min-height: 0; max-height: 100%; display: flex; flex-direction: column; gap: var(--rv-gap); overflow: hidden; }
.st-side > .rv-card { flex: none; }
.st-side > .st-activity { flex: 1 1 auto; min-height: 96px; display: flex; flex-direction: column; overflow: hidden; }
.st-events { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; }
.rv-count.blue { background: #E3EEFF; color: #1D4ED8; }
.st-link { margin-left: auto; font-size: 0.8rem; font-weight: 600; color: var(--mud-palette-primary); white-space: nowrap; }
.st-side .rv-card-title, .st-side .rv-follow-row strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-event { display: flex; align-items: center; gap: 10px; min-width: 0; padding: clamp(3px, 0.6vh, 7px) 0; border-top: 1px solid #EEF2F5; color: inherit; text-decoration: none; }
.st-event:first-child { border-top: 0; }
a.st-event:hover strong { color: var(--mud-palette-primary); }
.st-event .gl-two strong { font-size: 0.82rem; }
.st-event-icon { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #E3EEFF; color: #1D4ED8; }
.st-event-icon .mud-icon-root { font-size: 16px; }
.st-event-icon.green { background: #DDF7E5; color: #15803D; }
.st-event-icon.red { background: #FFE4E4; color: #C81E1E; }
.st-event-text { flex: 1; min-width: 0; font-size: 0.8rem; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-event-when { flex: none; font-size: 0.72rem; color: #7A8D99; white-space: nowrap; }
.st-none { font-size: 0.78rem; color: #6B7F8C; line-height: 1.35; padding: 2px 0; }

/* One customer's statement */
.st-bar { flex: none; margin: 0; padding: 10px 12px 6px; border-radius: 14px; overflow: visible; }
.st-bar .mud-input-control.mud-input-control-margin-dense { margin: 0; }
.st-bar .st-period { flex: 0 0 170px; min-width: 150px; }
.st-bar .st-currency { flex: 0 0 110px; min-width: 100px; }
.st-bar .st-date { flex: 0 0 160px; }
.st-range { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #E6ECF0; border-radius: 999px; font-size: 0.82rem; color: #0D2430; white-space: nowrap; }
.st-range .mud-icon-root { color: #5E7280; }
.st-ledger { display: flex; flex-direction: column; padding-top: 10px; }
.st-facts { flex: none; display: flex; margin-bottom: 6px; padding: 5px 0; background: #F7FAFC; border: 1px solid #EEF2F5; border-radius: 10px; }
.st-facts > div { flex: 1 1 auto; min-width: 0; padding: 0 14px; border-left: 1px solid #E6ECF0; display: flex; flex-direction: column; line-height: 1.3; }
.st-facts > div:first-child { border-left: 0; }
.st-facts span { font-size: 0.72rem; color: #6B7F8C; white-space: nowrap; }
.st-facts strong { font-size: 0.84rem; font-weight: 600; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-grid td.st-desc { width: 34%; max-width: 0; }
.st-grid tbody tr.st-static { cursor: default; }
.st-grid tbody tr.st-static:hover { background: none; }
.st-grid td .gl-chip { padding: 2px 10px; }
.st-grid tfoot td { height: 40px; background: #EAF8EE; font-weight: 700; color: #0D2430; font-size: 0.86rem; }
.st-grid tfoot td:first-child { border-radius: 10px 0 0 10px; }
.st-grid tfoot td:last-child { border-radius: 0 10px 10px 0; }
.st-grid tfoot tr.st-total-due td:last-child { color: #C81E1E; }
.st-snap-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-snap-head .gl-two { flex: 1; }
.st-snap-head .gl-two strong { font-size: 0.95rem; font-weight: 700; }
.st-snap-lines { display: flex; flex-direction: column; gap: 1px; margin: 6px 0 8px 2px; font-size: 0.8rem; color: #3B4D59; min-width: 0; }
.st-snap-lines > * { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-snap-lines .mud-icon-root { font-size: 16px; color: #7A8D99; }
.st-snap-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-snap-actions .mud-button-root { border-radius: 9px; text-transform: none; font-size: 0.78rem; }
.st-aged { display: flex; flex-direction: column; font-size: 0.8rem; }
.st-aged > div { display: flex; justify-content: space-between; gap: 10px; padding: clamp(1px, 0.35vh, 4px) 8px; color: #3B4D59; }
.st-aged strong { font-weight: 600; color: #0D2430; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-aged .st-aged-total { margin-top: 3px; padding-top: clamp(3px, 0.7vh, 7px); padding-bottom: clamp(3px, 0.7vh, 7px); border-radius: 9px; background: #EAF8EE; font-weight: 700; color: #0D2430; }
.st-aged .st-aged-total.late { background: #FFF1F1; }
.st-aged .st-aged-total strong { font-weight: 800; }
.st-held { margin-top: 4px; font-size: 0.74rem; color: #6B7F8C; }
.st-held span { margin-left: 6px; color: #3B4D59; font-weight: 600; }
/* The accounts toolbar: the heading gives way before the controls wrap. */
.st .rv-table .gl-toolbar { flex-wrap: nowrap; }
.st .rv-table-title { flex-basis: 120px; }
.st .rv-table-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st .gl-toolbar-right .rv-search { flex: 0 1 190px; min-width: 160px; }
.st-side .rv-follow-row { gap: 10px; padding-left: 10px; padding-right: 8px; }

/* ── Assets: the register, and one asset's page, on the same one-screen frame as the statements ── */
.as-register .gl-toolbar { margin-bottom: 4px; }
.as-filters { display: grid; grid-template-columns: minmax(150px, 1.6fr) repeat(4, minmax(100px, 1fr)); gap: 8px; margin-bottom: 4px; }
.as-filters .mud-input-control.mud-input-control-margin-dense { margin: 0; }
.as-filters .gl-search { max-width: none; }
.as-filters .mud-input-outlined-border { border-radius: 12px; }
.as-kind { background: #EEF3F7; color: #3B4D59; }
.rv-grid td.as-class { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3B4D59; }
.rv-grid td.as-where { max-width: 170px; }
.as-side-head { margin-bottom: 6px; }
.as-side-head .gl-seg button { padding: 4px 12px; font-size: 0.8rem; }
.as-class-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 54px auto; align-items: center; gap: 8px;
    padding: clamp(3px, 0.6vh, 6px) 2px; border: 0; border-top: 1px solid #EEF2F5; background: none; font: inherit; font-size: 0.78rem; color: #3B4D59; cursor: pointer; text-align: left; }
.as-class-row:first-child { border-top: 0; }
.as-class-row:hover { background: #F7FAFC; }
.as-class-name { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-class-name .mud-icon-root { font-size: 16px; color: #5E7280; flex: none; }
.as-class-bar { height: 7px; border-radius: 5px; background: #EDF1F4; overflow: hidden; }
.as-class-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #6D8DF7, #8B5CF6); }
.as-class-pct { text-align: right; color: #5E7280; font-variant-numeric: tabular-nums; }
.as-class-row strong { text-align: right; font-weight: 600; color: #0D2430; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-class-note { font-size: 0.72rem; margin-top: 4px; }

/* One asset */
.as-hero { flex: none; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); padding: clamp(7px, 1.2vh, 14px) 16px;
    background: #fff; border: 1px solid #E6ECF0; border-radius: 14px; box-shadow: 0 8px 24px rgba(13, 43, 56, 0.05); }
.as-photo { position: relative; width: clamp(60px, 10.5vh, 104px); height: clamp(60px, 10.5vh, 104px); flex: none; border-radius: 12px; overflow: hidden;
    display: grid; place-items: center; background: linear-gradient(135deg, #EEF3F7, #E2E9EF); color: #5E7280; }
.as-photo img { width: 100%; height: 100%; object-fit: cover; }
.as-photo .mud-icon-root { font-size: clamp(28px, 5vh, 46px); }
.as-hero-main { flex: 1; min-width: 0; }
.as-hero-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.as-hero-title h2 { margin: 0; font-size: clamp(1.1rem, 2.6vh, 1.5rem); font-weight: 800; letter-spacing: -0.01em; color: #0D2430; }
.as-hero-sub { margin-top: 1px; display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: #5E7280; }
.as-hero-sub i { width: 4px; height: 4px; border-radius: 50%; background: #9AA7B2; }
.as-facts { display: flex; flex-wrap: wrap; gap: 6px clamp(14px, 2.2vw, 40px); margin-top: clamp(4px, 1vh, 10px); }
.as-facts > div { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; min-width: 0; }
.as-facts .mud-icon-root { grid-row: span 2; font-size: 20px; color: #5E7280; }
.as-facts span { font-size: 0.72rem; line-height: 1.2; color: #6B7F8C; }
.as-facts strong { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; font-weight: 600; line-height: 1.25; color: #0D2430; }
.as-hero-actions { align-self: flex-start; display: flex; gap: 8px; }
.as-hero-actions .mud-button-root { border-radius: 10px; text-transform: none; }

.as .st-main > .as-body { align-self: stretch; display: flex; flex-direction: column; padding: 0 0 6px; overflow: hidden; }
.as-tabs { flex: none; display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid #E6ECF0; }
.as-tabs button { margin-bottom: -1px; padding: clamp(7px, 1.2vh, 12px) 16px; border: 0; border-bottom: 2px solid transparent; background: none;
    font: inherit; font-size: 0.86rem; font-weight: 600; color: #5E7280; cursor: pointer; }
.as-tabs button:hover { color: #0D2430; }
.as-tabs button.on { color: #129C30; border-bottom-color: #22B547; }
.as-pane { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: var(--rv-gap); padding: clamp(7px, 1.2vh, 14px) 16px 0; }
.as-overview { flex: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; }
.as-block { min-width: 0; padding: clamp(5px, 1vh, 12px) 14px; border: 1px solid #EEF2F5; border-radius: 12px; }
.as-block-title { margin-bottom: clamp(3px, 0.7vh, 8px); font-size: 0.95rem; font-weight: 800; color: #0D2430; }
.as-fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3px, 0.8vh, 10px) 16px; }
.as-fields-1 { flex: 1; grid-template-columns: 1fr; }
.as-fields > div { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.as-fields span { font-size: 0.72rem; color: #6B7F8C; }
.as-fields strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; font-weight: 600; color: #0D2430; }
.as-fields strong.as-normal { font-weight: 400; }
.as-fields .as-wide { grid-column: 1 / -1; }
.as-standing { display: flex; flex-direction: column; gap: 8px; }
.as-standing-top { display: flex; align-items: flex-start; gap: 14px; }
.as-photo-big { width: clamp(90px, 17vh, 150px); height: clamp(68px, 12vh, 112px); }
.as-photo-hint { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 2px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.88);
    font: inherit; font-size: 0.7rem; font-weight: 600; color: #15803D; cursor: pointer; }
.as-banner { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #EAF8EE; color: #15803D; }
.as-banner .mud-icon-root { flex: none; font-size: 20px; }
.as-banner > div { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.as-banner strong { font-size: 0.84rem; color: #0D2430; }
.as-banner span { font-size: 0.76rem; color: #3B4D59; }
.as-banner-warn { background: #FFF6E5; color: #A15C07; }
.as-money { flex: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 5px; border: 1px solid #EEF2F5; border-radius: 12px; }
.as-money > div { min-width: 0; display: flex; flex-direction: column; padding: 5px 10px; border-radius: 9px; line-height: 1.3; }
.as-money span { white-space: nowrap; font-size: 0.72rem; color: #6B7F8C; }
.as-money strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; font-weight: 700; color: #1D4ED8; }
.as-money > div:nth-child(n+4) strong { font-weight: 600; color: #0D2430; }
.as-money > .as-money-key { background: #EAF8EE; }
.as-money > .as-money-key strong { color: #0D2430; }
.as-notes { flex: none; }
.as-notes-text { white-space: pre-line; font-size: 0.84rem; color: #3B4D59; }
.as-pane-head { flex: none; font-size: 0.8rem; color: #5E7280; }
.as-sched td { height: 40px; }
.as-sched tbody tr { cursor: default; }
.as-sched tr.as-future td { color: #8A9AA5; }
.as-sched tr.as-now td { background: #F1FBF4; }
.as-history .st-event { padding: 7px 0; }
.as .st-side.as-side { overflow-y: auto; scrollbar-width: thin; }
.as-side .rv-card { padding-top: clamp(5px, 0.9vh, 14px); padding-bottom: clamp(5px, 0.9vh, 14px); }
.as-summary > div { padding-left: 0; padding-right: 0; }
.as-progress { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 0.74rem; font-weight: 600; color: #15803D; white-space: nowrap; }
.as-progress .rv-bar { flex: 1; }
.as-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.as-actions .mud-button-root { justify-content: flex-start; border-radius: 9px; text-transform: none; font-size: 0.8rem; }
.as-related { display: flex; flex-direction: column; }
.as-related a { display: flex; align-items: center; gap: 10px; padding: clamp(3px, 0.7vh, 8px) 2px; border-top: 1px solid #EEF2F5; color: inherit; text-decoration: none; }
.as-related a:first-child { border-top: 0; }
.as-related a:hover strong { color: var(--mud-palette-primary); }
.as-related a > .mud-icon-root:first-child { font-size: 20px; color: #5E7280; }
.as-related a > .mud-icon-root:last-child { margin-left: auto; color: #93A4B0; }
.as-related .gl-two { flex: 1; }
.as-related .gl-two span { margin: 0 0 1px; }
.cd-head-tile.as-tile-red { background: #FFDCDC; color: #C81E1E; }

/* One employee: the asset page's frame, with a face for a photo. */
.as-photo.em-avatar { border-radius: 50%; font-size: clamp(1.2rem, 3.4vh, 1.9rem); font-weight: 800; letter-spacing: 0.02em; }
.as-photo.em-avatar.gl-tone-0 { background: #DCEBFF; color: #1D4ED8; }
.as-photo.em-avatar.gl-tone-1 { background: #FFE1EA; color: #BE185D; }
.as-photo.em-avatar.gl-tone-2 { background: #D9F7E1; color: #15803D; }
.as-photo.em-avatar.gl-tone-3 { background: #FFE8D6; color: #C2410C; }
.as-photo.em-avatar.gl-tone-4 { background: #E9E1FF; color: #6D28D9; }
.as-photo.em-avatar.gl-tone-5 { background: #D6F4F4; color: #0F766E; }
.em-count { margin-left: 6px; padding: 0 7px; border-radius: 9px; background: #E9EEF5; color: #3B4D59; font-size: 0.72rem; }
.em-count.late { background: #FFE4E4; color: #C81E1E; }
.em .as-money.em-pay { grid-template-columns: 1fr 1.05fr 1.9fr 0.85fr 1fr 1.15fr; }
.em .as-money.em-pay strong.mono { font-size: 0.8rem; }
.em .as-money > div strong, .em .as-money > div:nth-child(n+4) strong { font-weight: 600; color: #0D2430; font-size: 0.86rem; }
.em .as-money.em-leave { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.em-bottom { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.em-files .stat-label { font-size: 0.95rem; font-weight: 800; color: #0D2430; text-transform: none; letter-spacing: 0; }
.em-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.em-pane-head .mud-button-root { flex: none; text-transform: none; }
.em-table td { height: 40px; }
.em-table tbody tr.em-static { cursor: default; }
.em-table tbody tr.em-static:hover { background: none; }
.em-inline-chip { margin-left: 6px; padding: 1px 8px; }
.em-salary { flex: none; }
.em-salary.em-current { border-color: #CDEFD7; background: #FBFEFC; }
.em-salary-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 0.88rem; color: #0D2430; }
.em-salary-head .em-note { color: #6B7F8C; font-size: 0.8rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-salary-head .em-net { margin-left: auto; font-size: 0.8rem; color: #5E7280; white-space: nowrap; }
.em-salary-head .em-net strong { margin-left: 4px; font-size: 0.95rem; color: #0D2430; }
.em-components { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; font-size: 0.82rem; }
.em-components > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed #EDF1F4; color: #3B4D59; }
.em-components i { margin-left: 6px; font-style: normal; font-size: 0.7rem; color: #15803D; }
.em-components strong { font-weight: 600; color: #0D2430; font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-small { font-size: 0.74rem; margin-top: 4px; }
.pf.em-one { grid-template-columns: 1fr; }
.em-lines td { vertical-align: middle; }
.em-split { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.em-split-label { margin-left: auto; font-size: 0.8rem; color: #5E7280; white-space: nowrap; }
.em-split .em-split-input { flex: 0 0 150px; }
.em-split .mud-input-control { margin: 0; }
.em-totals { display: flex; justify-content: flex-end; gap: 22px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #EDF1F4; font-size: 0.84rem; color: #5E7280; }
.em-totals strong { margin-left: 6px; color: #0D2430; font-variant-numeric: tabular-nums; }
.em-totals .em-totals-net strong { font-size: 1rem; font-weight: 800; }
@media (max-width: 1450px) {
    .em .as-money.em-pay { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The asset form: six fields a line on a wide screen, four on a narrower one, in the editor frame. */
.qe-fields.as-form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.as-form-grid .as-span-2 { grid-column: span 2; }
@media (max-width: 1500px) { .qe-fields.as-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cd-head-tile.as-tile-violet { background: #EFE7FF; color: #6D28D9; }
.st-event-icon.violet { background: #EFE7FF; color: #6D28D9; }
.as-inline-link { margin-left: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--mud-palette-primary); cursor: pointer; text-decoration: underline; }
.as-hero-sub { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-hero-sub i { flex: none; }
.as-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: #22B547; }
.as-dot.amber { background: #E8A10C; }
.as-dot.red { background: #E25555; }
@media (max-width: 1450px) {
    .as-filters { grid-template-columns: minmax(120px, 1.1fr) repeat(4, minmax(96px, 1fr)); }
    .as-fields strong { white-space: normal; overflow-wrap: anywhere; }
    .as-money { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .as-facts strong { max-width: 150px; }
}

/* The open count and oldest due date (both still in the export) give their room to the names first. */
@media (max-width: 1600px) { .st-main .st-wide { display: none; } }
@media (max-width: 1450px) {
    .st-facts > div { padding: 0 9px; }
}
/* A window too small for one screen lets the page scroll instead, with everything still shown. */
@media (max-width: 1100px), (max-height: 600px) {
    .shell-main:has(.st) { height: auto; overflow: visible; }
    .page:has(> .st) { display: block; }
    .st-main { grid-template-columns: 1fr; }
    .st-side { overflow: visible; }
}

/* Two views of one list (bills / payments), switched in place. */
.gl-seg { flex: none; display: inline-flex; padding: 3px; gap: 2px; border: 1px solid #DDE5EA; border-radius: 12px; background: #F3F6F8; }
.gl-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: 9px; background: transparent; color: #5E7280;
                 font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.gl-seg button .mud-icon-root { font-size: 17px; }
.gl-seg button:hover { color: #0D2430; }
.gl-seg button.on { background: #fff; color: #0D2430; box-shadow: 0 1px 3px rgba(13, 43, 56, 0.12); }
.gl-seg button.on .mud-icon-root { color: #129C30; }

/* Figures for the whole list, between the count and the pages. */
.gl-foot-summary { display: flex; align-items: center; gap: 18px; min-width: 0; overflow: hidden; white-space: nowrap; margin-right: auto; margin-left: 24px; }
.gl-foot-summary strong { color: #0D2430; font-weight: 700; }
.gl-btn-badge { margin-left: 6px; padding: 1px 7px; border-radius: 8px; background: #FEF0CD; color: #A15C07; font-size: 0.72rem; font-weight: 700; }
.gl-inline-icon.mud-icon-root { font-size: 15px; vertical-align: -3px; margin-left: 4px; color: #93A4B0; }
/* Fixed: two dates have to show in full, so the search and category boxes are the ones that give way. */
.gl-range { flex: 0 0 260px; min-width: 260px; }
.gl-range .mud-input > input.mud-input-root { font-size: 0.82rem; min-width: 0; }
.gl-toolbar.gl-toolbar-tight { gap: 10px; }
.gl-toolbar-tight .gl-search { flex: 1 1 170px; min-width: 160px; }
.gl-toolbar-tight .gl-filter { flex: 0 1 180px; min-width: 150px; }
.gl-toolbar-tight .gl-toolbar-right { gap: 8px; }
/* Below this width a button keeps its icon and drops the words that only say it again. */
@media (max-width: 1500px) {
    .gl-wide-only { display: none; }
    .gl-btn-compact.mud-button-root { min-width: 0; padding-left: 12px; padding-right: 10px; }
    .gl-btn-compact .mud-button-icon-start { margin-right: 0; }
}
.gl-range .mud-input-outlined-border { border-radius: 12px; }
.gl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; color: #5E7280; font-size: 0.82rem; min-height: 34px; }
.gl-pager { display: flex; align-items: center; gap: 4px; }
.gl-pager button {
    min-width: 32px; height: 32px; padding: 0 8px; display: grid; place-items: center;
    border: 1px solid transparent; border-radius: 9px; background: transparent; color: #24333D; font: inherit; font-size: 0.84rem; cursor: pointer;
}
.gl-pager button:first-child, .gl-pager button:last-child { border-color: #E1E8ED; background: #fff; }
.gl-pager button:hover:not(:disabled) { background: #F1F5F8; }
.gl-pager button.current { background: #D9F7E1; color: #0D2430; font-weight: 700; }
.gl-pager button:disabled { opacity: 0.4; cursor: default; }
.gl-pager-gap { padding: 0 6px; color: #9AA7B2; }

@media (max-width: 900px) { .gl-card { overflow-x: auto; } }

/* ── Party form and its window ───────────────────────────────────────────── */

/* The customer window: a tinted header, sections on a pale ground, buttons on a rule. */
/* It may use nearly the whole height of the window, so the form fits a laptop screen without scrolling inside. */
.mud-dialog:has(.cd-head) { border-radius: 20px; overflow: hidden; max-height: calc(100vh - 20px); margin: 10px 32px; }
.mud-dialog .cd-title { padding: 0; }
.cd-head {
    display: flex; align-items: center; gap: 16px; padding: clamp(8px, 1.9vh, 18px) 24px clamp(6px, 1.5vh, 14px);
    background: radial-gradient(520px 160px at 78% 0%, rgba(197, 245, 214, 0.9), transparent 70%), linear-gradient(180deg, #F3FAFF, #fff);
}
.cd-head-tile { width: clamp(38px, 5.5vh, 52px); height: clamp(38px, 5.5vh, 52px); flex: none; border-radius: 14px; display: grid; place-items: center; background: #DDF7E5; color: #129C30; }
.cd-head-tile .mud-icon-root { font-size: 28px; }
.cd-head-text { min-width: 0; flex: 1; }
.cd-head-title { font-size: clamp(1.15rem, 2.7vh, 1.55rem); font-weight: 800; letter-spacing: -0.02em; color: #0D2430; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-head-sub { color: #5E7280; font-size: 0.9rem; margin-top: 2px; }
.cd-close { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 1px solid #DDE5EA; border-radius: 50%; background: #fff; color: #0D2430; cursor: pointer; }
.cd-close:hover { background: #F1F5F8; }
.mud-dialog .cd-content { padding: 4px 18px clamp(6px, 1.5vh, 14px); max-height: none; background: #F6F9FB; }
.mud-dialog .cd-actions { padding: clamp(6px, 1.3vh, 12px) 20px; border-top: 1px solid #E6ECF0; gap: 6px; }
.cd-btn.mud-button-root { border-radius: 10px; padding: 8px 22px; text-transform: none; font-weight: 600; font-size: 0.92rem; }
.cd-btn-save.mud-button-root .mud-icon-root { color: #3EEA62; }

/* The form itself: two columns of sections, each a white card with its own heading. */
.pf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, 1.3vh, 12px); }
.pf-section { background: #fff; border: 1px solid #E9EEF2; border-radius: 14px; padding: clamp(7px, 1.5vh, 14px) 16px clamp(8px, 1.7vh, 16px); min-width: 0; }
.pf-wide { grid-column: 1 / -1; }
.pf-head { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(4px, 1vh, 10px); }
.pf-tile { width: clamp(30px, 4.2vh, 40px); height: clamp(30px, 4.2vh, 40px); flex: none; border-radius: 11px; display: grid; place-items: center; background: #E3F8E8; color: #129C30; }
.pf-tile .mud-icon-root { font-size: 22px; }
.pf-title { font-size: 1.02rem; font-weight: 700; color: #0D2430; }
.pf-sub { color: #6B7F8C; font-size: 0.8rem; margin-top: 1px; }
.pf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(4px, 1vh, 10px) 16px; }
.pf-field { min-width: 0; }
.pf-section > .pf-field + .pf-field { margin-top: 10px; }
.pf-field > label { display: block; margin-bottom: clamp(2px, 0.5vh, 5px); font-size: 0.84rem; font-weight: 600; color: #0D2430; }
.pf-field > label em { color: #DC2626; font-style: normal; }
.pf-field > small { display: block; margin-top: 2px; color: #7A8D99; font-size: 0.76rem; }
.pf-field .mud-input-control { margin: 0; }
.pf-field .mud-input.mud-input-outlined { border-radius: 10px; background: #fff; }
.pf-field .mud-input-outlined-border { border-radius: 10px; border-color: #DDE5EA; }
/* The icon gets its own box at the front of the field, divided off from the text. */
.pf-field .mud-input.mud-input-outlined.mud-input-adorned-start { padding-left: 0; }
.pf-field .mud-input-adornment-start { align-self: stretch; height: auto; max-height: none; width: 42px; margin: 0 12px 0 0; justify-content: center; border-right: 1px solid #DDE5EA; color: #24333D; }
.pf-field .mud-input-adornment-start .mud-icon-root { font-size: 20px; }
/* A suggestion field draws its icon as a button; flattened, it is the same height as every other field. */
.pf-field .mud-input-adornment-start > .mud-icon-button { padding: 0; width: 100%; height: 100%; border-radius: 0; pointer-events: none; }
.pf-field input::placeholder { color: #93A4B0; opacity: 1; }
.pf-field .mud-input-outlined input.mud-input-root, .pf-field .mud-input-outlined .mud-select-input { padding-top: clamp(6px, 1.15vh, 10.5px); padding-bottom: clamp(6px, 1.15vh, 10.5px); }

/* Items: a field stacked under a row, and the kind picked from three buttons rather than a dropdown. */
.pf-gap { margin-top: clamp(6px, 1.2vh, 12px); }
.pf-row.pf-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Payroll runs */
.gl-toolbar .pr-year { flex: 0 1 150px; min-width: 130px; }
.gl-toolbar .pr-status { flex: 0 1 180px; min-width: 150px; }
.gl-table td.pr-c { text-align: center; }
.pf.pr-one { grid-template-columns: 1fr; }
/* Leave */
.gl-toolbar.lv-toolbar { flex-wrap: nowrap; }
.lv-toolbar .gl-summary-late { margin-left: 0; white-space: nowrap; flex: none; }
/* A select's class lands on its inner control; the toolbar sizes the wrapper around it. */
.gl-toolbar > .mud-select:has(.lv-year) { flex: 0 1 110px; min-width: 96px; }
.gl-toolbar > .mud-select:has(.lv-employee) { flex: 0 1 190px; min-width: 140px; }
.gl-toolbar > .mud-select:has(.lv-status) { flex: 0 1 150px; min-width: 124px; }
.gl-toolbar > .mud-select:has(.lv-kind) { flex: 0 1 160px; min-width: 130px; }
.gl-toolbar > .mud-select:has(.lv-year, .lv-employee, .lv-status, .lv-kind) .gl-filter { min-width: 0; max-width: none; }
.gl-summary.lv-now { white-space: nowrap; }
.gl-table td.lv-used { width: 120px; min-width: 90px; }
.lv-used .rv-bar { display: block; }
.lv-now-chip { margin-left: 4px; }
.gl-actions .mud-icon-button.lv-approve { color: #15803D; background: #E3F8E8; margin-right: 4px; }
.gl-actions .mud-icon-button.lv-reject { color: #C81E1E; background: #FFE4E4; margin-right: 4px; }
.lv-rule { display: inline-flex; align-items: center; gap: 4px; color: #6B7F8C; font-size: 0.8rem; cursor: help; }
.lv-rule .mud-icon-root { font-size: 16px; }
.pf.lv-one { grid-template-columns: 1fr; }

/* ── Documents: the list, and the letter editor ─────────────────────────── */
.gl-toolbar.dc-toolbar { flex-wrap: nowrap; }
.gl-toolbar > .mud-select:has(.dc-type) { flex: 0 1 200px; min-width: 150px; }
.gl-toolbar > .mud-select:has(.dc-kind) { flex: 0 1 150px; min-width: 132px; }
.gl-toolbar > .mud-select:has(.dc-status) { flex: 0 1 180px; min-width: 160px; }
.dc-toolbar .gl-search { min-width: 170px; }
.dc-toolbar .gl-seg, .dc-toolbar .gl-toolbar-right { flex: none; }
.dc-toolbar .mud-button-root { white-space: nowrap; }
.gl-toolbar > .mud-select:has(.dc-type, .dc-kind, .dc-status) .gl-filter { min-width: 0; max-width: none; }
.gl-kind.dc-pdf { background: #FFE4E4; color: #C81E1E; }
/* Three tabs leave no room for the word on Samples; its tooltip says it. */
.dc-samples .gl-wide-only { display: none; }
.dc-samples.mud-button-root { min-width: 0; padding-left: 12px; padding-right: 10px; }
.dc-samples .mud-button-icon-start { margin-right: 0; }

/* The editor takes the page: details on top, the writing area and a narrow side panel under them. */
.qe-fields.lt-fields { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lt-fields .lt-span-2 { grid-column: span 2; }
@media (max-width: 1500px) { .qe-fields.lt-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lt-fields .lt-span-2:last-child { grid-column: span 4; } }
.lt-dirty { color: #B45309; font-weight: 600; }
.lt-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 19vw, 300px); gap: var(--qe-gap); }
.qe .qe-card.lt-editor { min-height: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.lt-editor .ql-toolbar.ql-snow { flex: none; border: 0; border-bottom: 1px solid #E6ECF0; padding: 6px 10px; font-family: inherit; background: #FAFBFC; }
.lt-editor .ql-toolbar.ql-snow .ql-formats { margin-right: 10px; }
.lt-editor .ql-toolbar button.ql-inactive { opacity: 0.3; pointer-events: none; }
.lt-editor .ql-container.ql-snow { flex: 1; min-height: 0; border: 0; overflow-y: auto; scrollbar-width: thin; font-family: Inter, "Liberation Sans", Arial, sans-serif; font-size: 0.95rem; background: #F3F6F8; }
.lt-editor .ql-editor { max-width: 820px; min-height: 100%; margin: 0 auto; padding: 28px 40px 60px; background: #fff; line-height: 1.6; color: #24333D; box-shadow: 0 0 0 1px #E6ECF0; }
.lt-editor .ql-editor.ql-blank::before { left: calc(50% - 410px + 40px); right: auto; font-style: normal; color: #9AA7B2; }
@media (max-width: 1100px) { .lt-editor .ql-editor.ql-blank::before { left: 40px; } }
.lt-editor .ql-editor h1 { font-size: 1.5rem; color: #0D2736; margin: 0.6em 0 0.3em; }
.lt-editor .ql-editor h2 { font-size: 1.25rem; color: #0D2736; margin: 0.6em 0 0.3em; }
.lt-editor .ql-editor h3 { font-size: 1.08rem; color: #0D2736; margin: 0.5em 0 0.2em; }
.lt-editor .ql-editor table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.lt-editor .ql-editor td { border: 1px solid #CCCCCC; padding: 4px 8px; }
.lt-editor .ql-editor hr.ql-divider { border: 0; border-top: 1px solid #CCCCCC; margin: 12px 0; }
.lt-editor .ql-editor hr.ql-pagebreak { border: 0; border-top: 2px dashed #9AA7B2; margin: 18px 0; position: relative; overflow: visible; }
.lt-editor .ql-editor hr.ql-pagebreak::after { content: "Page break"; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); padding: 0 8px; background: #fff; color: #7A8D99; font-size: 0.7rem; }
.lt-editor.lt-readonly .ql-toolbar { display: none; }
.qe .qe-card.lt-side { min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 12px; }
.lt-side-block { display: flex; flex-direction: column; gap: 6px; }
.lt-side-block .pf-field .mud-input-control { margin: 0; }
.lt-side-block .mud-switch { margin-left: -6px; }
.lt-side-block .mud-switch .mud-typography { font-size: 0.84rem; }
.mud-dialog .cd-content.lt-preview-content { padding: 0; }
.lt-preview { display: block; width: 100%; height: min(78vh, 900px); border: 0; background: #525659; }
/* Templates and fields */
.lt-editor .ql-snow .ql-picker.ql-field { width: 108px; }
.lt-editor .ql-snow .ql-picker.ql-field .ql-picker-label::before { content: "Insert field"; font-size: 0.8rem; }
.lt-editor .ql-snow .ql-picker.ql-field .ql-picker-item::before { content: attr(data-label); font-size: 0.82rem; }
.lt-editor .ql-snow .ql-picker.ql-field .ql-picker-options { right: 0; min-width: 170px; }
@media (max-width: 1500px) { .lt-template .lt-name { grid-column: span 3; } }
.lt-template .lt-span-2:last-child { grid-column: span 3; }
@media (max-width: 1500px) { .lt-fields.lt-template .lt-span-2:last-child { grid-column: span 4; } }
.lt-pick-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.lt-pick-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lt-pick-text strong { font-size: 0.86rem; font-weight: 600; color: #0D2430; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-pick-text span { font-size: 0.74rem; color: #6B7F8C; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-pick-none { padding: 8px 12px; font-size: 0.82rem; color: #6B7F8C; }
.lt-pick-pop { max-width: 380px; }
.lt-hint { font-size: 0.78rem; line-height: 1.4; color: #6B7F8C; }
.lt-hint-gap { margin-top: 10px; }
.lt-field-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8rem; line-height: 1.5; }
.lt-field-row > span:first-child { color: #5E7280; white-space: nowrap; }
.lt-field-row > span:last-child { color: #0D2430; font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-field-row > span.lt-unfilled { color: #B45309; }
.dc-menu-head { padding: 8px 16px 2px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #8A9BA6; }
.gl-table td.dc-template-actions { white-space: nowrap; }
.dc-template-actions .dc-use { min-width: 0; padding: 2px 10px; margin-right: 2px; font-size: 0.78rem; }
.dc-fields { max-width: 280px; color: #4A5D69; }
/* Pictures, the signature and stamp, attached PDFs */
.lt-editor .ql-editor .ql-letterimage { margin: 10px 0; text-align: center; cursor: pointer; user-select: none; }
.lt-editor .ql-editor .ql-letterimage img { max-width: 100%; height: auto; border-radius: 2px; outline: 1px solid transparent; transition: outline-color 0.15s; }
.lt-editor .ql-editor .ql-letterimage:hover img { outline-color: #9AA7B2; }
.lt-editor.lt-readonly .ql-editor .ql-letterimage { cursor: default; }
.lt-editor.lt-readonly .ql-editor .ql-letterimage:hover img { outline-color: transparent; }
.lt-imgbar { position: absolute; z-index: 3; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: #0D2430; box-shadow: 0 4px 14px rgba(13, 36, 48, 0.25); }
.lt-imgbar[hidden] { display: none; }
.lt-imgbar button { border: 0; border-radius: 5px; padding: 3px 8px; background: transparent; color: #DCE6EC; font: inherit; font-size: 0.74rem; cursor: pointer; }
.lt-imgbar button:hover { background: rgba(255, 255, 255, 0.12); }
.lt-imgbar button.on { background: #129C30; color: #fff; }
.lt-imgbar button[data-remove] { color: #FFB4B4; margin-left: 4px; }
.lt-marks { display: flex; flex-direction: column; }
.lt-marks .lt-hint { margin: 2px 0 0 2px; }
.lt-file { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.8rem; }
.lt-file .mud-icon-root { color: #C81E1E; flex: none; }
.lt-file a { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0D2430; text-decoration: none; }
.lt-file a:hover { text-decoration: underline; }
.lt-file-size { flex: none; color: #8A9BA6; font-size: 0.72rem; }
.lt-file-x { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: #8A9BA6; cursor: pointer; }
.lt-file-x:hover { background: #FDECEC; color: #C81E1E; }
.lt-file-x .mud-icon-root { color: inherit; font-size: 16px; }
.lt-add-pdf { align-self: flex-start; }
@media (max-width: 1100px), (max-height: 600px) {
    .lt-main { grid-template-columns: 1fr; }
    .qe .qe-card.lt-editor { min-height: 520px; }
}
/* End of service */
.gl-toolbar.gr-toolbar { flex-wrap: nowrap; }
.gr-asof { flex: 0 0 170px; }
.gr-asof .mud-input-control.mud-input-control-margin-dense { margin: 0; }
.gr-asof .mud-input-outlined-border { border-radius: 12px; }
.gl-toolbar > .mud-select:has(.gr-view) { flex: 0 1 160px; min-width: 130px; }
.gl-toolbar > .mud-select:has(.gr-view) .gl-filter { min-width: 0; max-width: none; }
.gr-toolbar .gl-summary { white-space: nowrap; }
/* One payroll run, in the editor frame: the payslips take whatever height is left. */
.qe .qe-card.pr-lines { flex: 1 1 auto; min-height: 150px; display: flex; flex-direction: column; }
.pr-lines .pr-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.pr-lines .gl-table thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.pr-lines .gl-table td { height: 42px; }
.pr-lines td.pr-short { color: #B45309; font-weight: 600; }
.qe .qe-notes.pr-bottom { flex: none; min-height: 0; }
.pr-note { font-size: 0.82rem; line-height: 1.45; color: #3B4D59; }
.pr-paid { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; font-size: 0.82rem; }
.pr-paid > div { display: contents; }
.pr-paid span { color: #6B7F8C; }
.pr-paid strong { min-width: 0; font-weight: 600; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.if-kind { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: clamp(6px, 1.1vh, 9px) 8px; border: 1px solid #DDE5EA; border-radius: 10px;
           background: #fff; color: #3B4D59; font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.if-kind:hover { border-color: #B9C7D1; }
.if-kind.on { border-color: #22B547; background: #E3F8E8; color: #0D2430; box-shadow: inset 0 0 0 1px #22B547; }
.if-kind.on .mud-icon-root { color: #129C30; }
/* The stock settings sit in the pricing column, so they carry their labels inside the boxes to fit a short window. */
.if-stock-choice { display: flex; align-items: center; gap: 10px; }
.pf-field.if-stock-choice > label { flex: none; margin: 0; }
.if-stock-choice .if-kinds { flex: 1; min-width: 0; }
.if-stock-fields { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.if-stock-fields > * { min-width: 0; }
.if-stock-fields .mud-input-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 16px); }
.ed-hint { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border: 1px dashed #DDE5EA; border-radius: 10px; color: #6B7F8C; font-size: 0.82rem; }
.cd-head-chip { margin-left: 8px; vertical-align: 4px; font-size: 0.72rem; letter-spacing: 0; }
.cd-actions .cd-btn-left { margin-right: auto; }
.pf-active { display: flex; align-items: flex-start; gap: 4px; padding-top: clamp(12px, 2.1vh, 20px); min-width: 0; }
.pf-active .mud-input-control { margin: -6px 0 0; flex: none; width: auto; }
.pf-active strong { display: block; font-size: 0.86rem; font-weight: 600; color: #0D2430; }
.pf-active span { display: block; margin-top: 3px; color: #6B7F8C; font-size: 0.78rem; line-height: 1.3; }

@media (max-height: 740px) { .pf-field > small { display: none; } }
@media (max-width: 900px) { .pf { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pf-row { grid-template-columns: 1fr; } }

/* ── Quote editor ──────────────────────────────────────────────────────── */

/* One screen: the details, the notes and the totals keep their height and the items take
   what is left. A quote with more lines than fit scrolls inside the items card only. */
.shell-main:has(.qe) { height: 100vh; height: 100dvh; overflow: hidden; }
.shell-main:has(.qe) .topbar { padding-top: clamp(6px, 1.2vh, 12px); }
.shell-main:has(.qe) .topbar-right .chip { padding: 5px 14px; font-size: 0.8rem; }
.page:has(> .qe) { display: flex; flex-direction: column; min-height: 0; padding-top: 2px; padding-bottom: clamp(8px, 1.6vh, 16px); }
.qe { --qe-gap: clamp(6px, 1.2vh, 12px); flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--qe-gap); }

.qe-actions-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.qe-actions-right .cd-btn.mud-button-root { padding: 3px 14px; font-size: 0.82rem; background-color: #fff; }
.qe-actions-right .cd-btn.mud-button-filled { background-color: var(--mud-palette-primary); }
.qe-actions-right .cd-btn .mud-icon-root { font-size: 17px; }

.qe-card { flex: none; background: #fff; border: 1px solid #E6ECF0; border-radius: 14px; box-shadow: 0 8px 24px rgba(13, 43, 56, 0.05); padding: clamp(6px, 1.1vh, 10px) clamp(12px, 1.1vw, 18px) clamp(7px, 1.3vh, 12px); min-width: 0; }
.qe-head { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(3px, 0.7vh, 7px); }
.qe-head .pf-tile { width: 30px; height: 30px; border-radius: 9px; }
.qe-head .pf-tile .mud-icon-root { font-size: 18px; }
.qe-head .pf-title { font-size: 0.98rem; }
.qe-head .pf-sub { font-size: 0.76rem; }
.qe-head-note { display: flex; align-items: center; gap: 10px; color: #6B7F8C; font-size: 0.8rem; min-width: 0; }

/* The eight details sit on one line when the window is wide enough, and on two when it is not. */
.qe-fields { display: grid; grid-template-columns: 1.5fr 0.95fr 0.9fr 0.9fr 1.05fr 1fr 1.2fr 1fr; gap: 6px 12px; }
@media (max-width: 1640px) { .qe-fields { grid-template-columns: 1.25fr 1fr 1fr 1fr; } }
.qe-fields .pf-field > label { margin-bottom: 2px; font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qe-fields .pf-field > label i { margin-left: 6px; font-style: normal; font-weight: 400; font-size: 0.7rem; color: #7A8D99; }
/* Every field the same short height, whatever kind of control it is. */
.qe-fields .mud-input.mud-input-outlined { height: 32px; min-height: 0; font-size: 0.84rem; }
.qe-fields .mud-input-outlined input.mud-input-root, .qe-fields .mud-input-outlined .mud-select-input { padding-top: 0; padding-bottom: 0; height: 100%; }
/* A dropdown shows its value in a block of its own, which brings padding taller than the
   field; here it is the field's height with the text on its centre line. */
.qe-fields .mud-input-outlined div.mud-input-slot { height: 30px; line-height: 30px; padding-top: 0; padding-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qe-fields .mud-input-adornment-start { width: 32px; margin-right: 8px; }
.qe-fields .mud-input-adornment-start .mud-icon-root { font-size: 17px; }
.qe-fields .mud-input-adornment-end .mud-icon-button { padding: 2px; }
.qe-fields .mud-input-adornment-end .mud-icon-root { font-size: 18px; }
.qe-readonly .mud-input.mud-input-outlined { background: #F3F6F8; }
.qe-readonly input { color: #3B4D59; }

/* The items card always shows five lines: the heading row and five rows of a fixed height.
   A sixth line and beyond scroll inside it, and the notes below take the rest of the page. */
.qe-items { flex: none; display: flex; flex-direction: column; }
.qe-items .lines-editor { flex: none; height: 228px; overflow-y: auto; scrollbar-width: thin; }   /* 30 + 5 x 38 + 8 */
.qe-items .lines-table thead th { height: 30px; box-sizing: border-box; }
.qe-items .lines-table tbody tr { height: 38px; }
.qe-items .lines-editor > .mud-button-root { display: none; }   /* the page's own button is in the heading */
/* Drawn over the empty rows rather than under them, so an empty card is the same height as a full one. */
.qe-empty { margin-top: -198px; height: 198px; box-sizing: border-box; padding: 8px 14px 0; color: #7A8D99; font-size: 0.8rem; pointer-events: none; }
.qe-items .lines-table thead th {
    position: sticky; top: 0; z-index: 1; background: #F3F6F8; border-bottom: 0;
    padding: 0 8px; font-size: 0.68rem; letter-spacing: 0.07em; color: #3B4D59;
}
.qe-items .lines-table thead th:first-child { border-radius: 8px 0 0 8px; padding-left: 14px; }
.qe-items .lines-table thead th:last-child { border-radius: 0 8px 8px 0; }
.qe-items .lines-table td { padding: 0 8px; border-bottom: 1px solid #EDF1F4; vertical-align: middle; box-sizing: border-box; }
.qe-items .lines-table td:first-child { padding-left: 14px; }
/* Typed fields read as text until they are hovered or focused, as in a finished document. */
.qe-items .lines-table .mud-input.mud-input-underline::before { border-bottom-color: transparent; }
.qe-items .lines-table .mud-input.mud-input-underline:hover::before { border-bottom-color: #C9D4DC; }
.qe-items .lines-table .line-desc .mud-input { font-size: 0.86rem; font-weight: 600; color: #0D2430; }
.qe-items .lines-table .line-pick .mud-input { font-size: 0.76rem; }
.qe-items .lines-table .mud-input > input.mud-input-root-text { padding-top: 3px; padding-bottom: 3px; }
/* The catalogue search and the printed description share one line, so a row is half as tall and twice as many fit. */
.qe-items .lines-table td > .mud-autocomplete { display: inline-block; width: 30%; vertical-align: middle; margin: 0 2% 0 0; }
.qe-items .lines-table td > .line-desc { display: inline-flex; width: 67%; vertical-align: middle; margin: 0; }
.qe-items .lines-table td.mono { font-family: inherit; font-size: 0.88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.qe-items .lines-editor > .mud-button-root { text-transform: none; font-weight: 600; color: #129C30; }

.qe-notes { flex: 1 1 0; min-height: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--qe-gap); }
.qe-notes .qe-card { display: flex; flex-direction: column; min-height: 0; }
/* The text box fills its card, however tall the card turns out to be. */
.qe-notes .mud-input-control, .qe-notes .mud-input-control-input-container { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.qe-notes .mud-input.mud-input-outlined { flex: 1; min-height: 0; align-items: stretch; }
.qe-note-head { display: flex; align-items: center; gap: 8px; margin-bottom: clamp(3px, 0.7vh, 7px); font-size: 0.86rem; color: #0D2430; }
.qe-note-head strong { white-space: nowrap; }
.qe-note-head span { color: #6B7F8C; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qe-notes .mud-input-control { margin: 0; }
.qe-notes .mud-input-outlined-border { border-radius: 10px; border-color: #DDE5EA; }
.qe-notes .mud-input.mud-input-outlined { padding: 0; }
.qe-notes textarea { font-size: 0.82rem; line-height: 1.45; height: 100% !important; resize: none; overflow-y: auto !important; padding: 6px 12px !important; margin: 0 !important; box-sizing: border-box; scrollbar-width: thin; }

.qe-totals { flex: none; display: flex; align-items: stretch; background: #fff; border: 1px solid #CDEFD6; border-radius: 16px; box-shadow: 0 8px 24px rgba(13, 43, 56, 0.05); overflow: hidden; }
.qe-totals-title { display: flex; align-items: center; gap: 10px; padding: clamp(4px, 0.9vh, 8px) 18px; font-size: 0.98rem; color: #0D2430; min-width: 170px; }
.qe-totals-title .pf-tile { width: 30px; height: 30px; border-radius: 9px; }
.qe-totals-title .pf-tile .mud-icon-root { font-size: 18px; }
.qe-total { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; padding: clamp(3px, 0.7vh, 7px) 20px; position: relative; min-width: 0; }
.qe-total + .qe-total::before { content: ""; position: absolute; left: 0; top: 28%; bottom: 28%; border-left: 1px solid #DDE5EA; }
.qe-total > span { font-size: 0.78rem; color: #3B4D59; }
.qe-total > strong { font-size: 1rem; font-weight: 700; color: #0D2430; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qe-total i, .qe-grand i { font-style: normal; font-weight: 600; margin-left: 3px; }
.qe-discount { max-width: 150px; margin: 0 !important; }
.qe-discount .mud-input.mud-input-outlined { height: 28px; }
.qe-discount input { padding-top: 0 !important; padding-bottom: 0 !important; height: 100%; font-weight: 700; }
.qe-grand { display: flex; flex-direction: column; justify-content: center; padding: clamp(3px, 0.7vh, 7px) 28px; min-width: 250px; background: linear-gradient(120deg, #DDF7E5, #C9F2D6); }
.qe-grand > span { font-size: 0.78rem; font-weight: 600; color: #0D2430; }
.qe-grand > strong { font-size: clamp(1.05rem, 2.3vh, 1.35rem); font-weight: 800; letter-spacing: -0.01em; color: #0D2430; white-space: nowrap; }
.qe-grand > small { font-size: 0.72rem; color: #3B4D59; }

/* A sent quote is read, not typed into: no catalogue search, no prompts, and text dark enough to read. */
.qe-view .lines-table td > .mud-autocomplete { display: none; }
.qe-view .lines-table td > .line-desc { width: 100%; }
.qe-view .pf-field input::placeholder, .qe-view input::placeholder, .qe-view textarea::placeholder { color: transparent; -webkit-text-fill-color: transparent; }
.qe-view .mud-input.mud-disabled input, .qe-view .mud-input.mud-disabled textarea, .qe-view .mud-input.mud-disabled .mud-select-input { color: #24333D; -webkit-text-fill-color: #24333D; }

/* An invoice has nine details, not eight, payments beside its notes, and a Due figure in its totals. */
.qe-fields.qe-fields-9 { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; }
/* Nine on one line only where a bank's name still fits in its share of it. */
@media (min-width: 2100px) { .qe-fields.qe-fields-9 { grid-template-columns: 1.4fr 0.9fr 0.85fr 0.85fr 1.1fr 1.5fr 0.9fr 0.9fr 0.95fr; } }
.qe-void { color: #B91C1C; }
.qe-notes.qe-notes-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.qe-receipts { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.qe-receipts a { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 2px; border-bottom: 1px solid #EDF1F4; color: #24333D; font-size: 0.8rem; text-decoration: none; white-space: nowrap; }
.qe-receipts a:last-child { border-bottom: 0; }
.qe-receipts a:hover { background: #F7FAFC; }
.qe-receipts a span:nth-child(2), .qe-receipts a span:nth-child(3) { color: #6B7F8C; overflow: hidden; text-overflow: ellipsis; }
.qe-receipts a.reversed { color: #9AA7B2; text-decoration: line-through; }
.qe-total.qe-due > span, .qe-total.qe-due > strong { color: #B91C1C; }
/* Six figures and the total share the bar once an invoice is issued: on a narrower window they sit closer,
   and the currency is said once, in the total. */
@media (max-width: 1640px) {
    .qe-totals:is(:has(.qe-due), .qe-totals-dense) .qe-totals-title { min-width: 0; }
    .qe-totals:is(:has(.qe-due), .qe-totals-dense) .qe-total { padding-left: 14px; padding-right: 10px; }
    .qe-totals:is(:has(.qe-due), .qe-totals-dense) .qe-grand { min-width: 200px; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 1500px) {
    .qe-totals:is(:has(.qe-due), .qe-totals-dense) .qe-total i { display: none; }
    /* The method is in the row's tooltip; the narrow card keeps number, date and amount. */
    .qe-receipts a { grid-template-columns: auto minmax(0, 1fr) auto; }
    .qe-receipts a span:nth-child(3) { display: none; }
}

/* A receipt: ten details in two rows of five, invoices instead of item lines, and one remark. */
.qe-fields.qe-fields-5 { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; }
.qe-alloc th.r, .qe-alloc td.r { text-align: right; }
.qe-alloc td { font-size: 0.86rem; color: #24333D; white-space: nowrap; }
.qe-alloc td .mud-input-control { display: inline-flex; width: 140px; }
.qe-alloc td .mud-input input { text-align: right; font-size: 0.88rem; font-weight: 600; }
/* The one column that is typed into keeps its line, so it reads as a field among the figures. */
.qe-items .qe-alloc .mud-input.mud-input-underline::before { border-bottom-color: #C9D4DC; }
.qe-alloc tr.qe-row-link { cursor: pointer; }
.qe-alloc tr.qe-row-link:hover td { background: #F7FAFC; }
.qe-notes.qe-notes-auto { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.qe-fields.qe-apply { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; align-items: end; }
.qe-fields.qe-apply .cd-btn.mud-button-root { height: 32px; padding: 3px 18px; font-size: 0.82rem; }
.qe-total.qe-over > span, .qe-total.qe-over > strong { color: #B91C1C; }
/* A credit note: a warning in the heading when it is worth more than the invoice still owes,
   and the form for applying what is left under the list of invoices it is set against. */
.qe-head-note { flex: 0 1 auto; }
.qe-head-note .qe-warn { color: #B45309; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A header with many buttons: the buttons keep one line and the note gives way, shortened with an ellipsis. */
.qe-head-fit .pf-title { white-space: nowrap; }
.qe-head-fit .qe-head-note { flex: 1 1 0; overflow: hidden; }
.qe-head-fit .qe-head-note > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qe-head-fit .qe-actions-right { flex: 0 0 auto; flex-wrap: nowrap; }
.qe-notes .qe-fields.qe-apply { flex: none; margin-top: 6px; gap: 6px 8px; }
.qe-notes .qe-fields.qe-apply .mud-input-control { flex: none; display: flex; }
.qe-notes .qe-fields.qe-apply .mud-input.mud-input-outlined { flex: none; padding: 0 0 0 10px; align-items: center; }

/* A delivery note: twelve details in two rows of six (three of four on a narrower window), no prices,
   and what the invoice still has to send beside the notes. */
.qe-fields.qe-fields-6 { grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr)); }
.qe-fields.qe-fields-7 { grid-template-columns: 1.25fr repeat(6, minmax(0, 1fr)); }
@media (max-width: 1500px) { .qe-fields.qe-fields-7 { grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1500px) { .qe-fields.qe-fields-6 { grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); } }
.qe-ok { color: #129C30; font-weight: 600; }
.qe-items .lines-editor > .d-flex { display: none !important; }   /* its button and its count are in the heading and the summary */
.qe-items .lines-table .line-what .mud-input { font-size: 0.86rem; font-weight: 600; color: #0D2430; }
.qe-outstanding > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 4px 2px; border-bottom: 1px solid #EDF1F4; color: #24333D; font-size: 0.8rem; white-space: nowrap; }
.qe-outstanding > div:last-child { border-bottom: 0; }
.qe-outstanding > div > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.qe-outstanding > div > span:nth-child(2) { color: #6B7F8C; }
.qe-outstanding strong.done { color: #129C30; font-weight: 600; }

/* A purchase order: once sent, the lines show what has arrived, and the third card lists the bills. */
.qe-items .qe-alloc td.qe-line-desc { font-weight: 600; color: #0D2430; white-space: normal; }
.qe-alloc td.qe-recv-done { color: #129C30; font-weight: 600; }
.qe-alloc td.qe-recv-part { color: #A15C07; font-weight: 600; }
.qe-alloc td .faint { margin-left: 4px; font-weight: 400; }
.qe-notes .qe-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
/* The rule that makes a notes box fill its card must not catch the attach button's upload control. */
.qe-notes .mud-file-upload, .qe-notes .mud-file-upload > .mud-input-control-input-container { flex: none; }
.qe-receipts-empty { padding: 6px 2px; color: #7A8D99; font-size: 0.8rem; }
.qe-card-foot { flex: none; display: flex; justify-content: flex-end; margin-top: 2px; }
.qe-card-foot .mud-button-root { text-transform: none; font-size: 0.8rem; padding: 2px 8px; }
.qe-late .mud-input.mud-input-outlined input { color: #C81E1E; font-weight: 600; }

/* A window too short to hold everything lets the page scroll, and changes nothing else: the
   columns, the five-line items card and the side-by-side notes all stay as they are. */
@media (max-width: 1100px), (max-height: 600px), (max-height: 670px) and (max-width: 1640px) {
    .shell-main:has(.qe) { height: auto; overflow: visible; }
    .page:has(> .qe) { display: block; }
    .qe { display: grid; }
    .qe-notes textarea { height: 72px !important; }
}
/* Only a narrow window rearranges the page: fewer columns, and the notes one under the other. */
@media (max-width: 1100px) {
    .qe-fields, .qe-fields.qe-fields-9, .qe-fields.qe-fields-5, .qe-fields.qe-fields-6, .qe-fields.qe-fields-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qe-head { flex-wrap: wrap; }
    .qe-notes, .qe-notes.qe-notes-3 { grid-template-columns: 1fr; }
    .qe-notes.qe-notes-auto { grid-auto-flow: row; }
    .qe-totals { flex-wrap: wrap; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .sidebar { position: fixed; z-index: 1200; transform: translateX(-100%); transition: transform 0.2s ease; }
    .sidebar.open { transform: translateX(0); }
    .shell-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(13, 39, 54, 0.5); z-index: 1100; }
    .menu-toggle.mud-button-root { display: inline-flex; }
    .topbar { padding: 14px 16px 4px; }
    .topbar-titles { flex-wrap: wrap; row-gap: 2px; }
    .topbar-sub { padding-left: 0; border-left: 0; white-space: normal; }
    .page { padding: 10px 16px 24px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .span-2 { grid-column: span 1; }
    .login-page { grid-template-columns: 1fr; }
    .lp-side { display: none; }
}

/* ── Blazor error bar ───────────────────────────────────────────────────── */

#blazor-error-ui {
    color-scheme: light only;
    background: #FEF3C7; color: #92400E; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
#blazor-error-ui .reload { margin-left: 8px; color: #92400E; }

/* ── Reports ─────────────────────────────────────────────────────────── */

/* A bar chart without a charting library: one column per month, heights as
   percentages of the tallest bar. Hovering a column shows the real figures. */
.chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 18px 16px 12px;
    min-height: 180px;
}

.chart-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.chart-bar-wrap {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}

.chart-pair .chart-bar { width: 46%; }

.chart-bar {
    width: 70%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: #0D2736;
    transition: opacity .15s ease;
}

.chart-col:hover .chart-bar { opacity: .78; }

.chart-bar-spend { background: #9AA5B1; }

.chart-label {
    font-size: .7rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.chart-value { font-size: .72rem; color: #1F2933; font-weight: 600; }

.swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
}

.swatch-sales { background: #0D2736; }
.swatch-spend { background: #9AA5B1; }

.up { color: #2BB50B; }
.down { color: #B91C1C; }

/* The statement tables: a heading row, detail rows, and totals that stand out. */
.pl-table { width: 100%; border-collapse: collapse; }

.pl-table td {
    padding: 7px 16px;
    border-bottom: 1px solid #EEF1F4;
    font-size: .88rem;
}

.pl-table tr.pl-head td {
    font-weight: 700;
    color: #0D2736;
    background: #F5F7F9;
    border-bottom: 1px solid #E1E6EB;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pl-table tr.pl-total td {
    font-weight: 700;
    color: #0D2736;
    border-top: 1px solid #CBD2D9;
    border-bottom: 2px solid #E1E6EB;
}

/* A line of the "needs attention" list. */
.todo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    border-bottom: 1px solid #EEF1F4;
    font-size: .85rem;
    color: #1F2933;
    text-decoration: none;
}

.todo:hover { color: #0D2736; }
.todo:last-child { border-bottom: none; }

.todo-count {
    min-width: 26px;
    text-align: center;
    padding: 1px 6px;
    border-radius: 10px;
    background: #EEF1F4;
    color: #0D2736;
    font-weight: 700;
    font-size: .78rem;
}

.todo-urgent { background: #FDE8E8; color: #B91C1C; }

/* ── Settings: the company and its readiness, then the sections in four groups ─────────────────── */
.sh { --sh-gap: clamp(8px, 1.4vh, 14px); display: flex; flex-direction: column; gap: var(--sh-gap); }
.sh-company { display: flex; align-items: center; gap: 18px; padding: clamp(8px, 1.4vh, 14px) 18px; }
.sh-logo { width: 132px; height: clamp(48px, 7.5vh, 62px); flex: none; display: grid; place-items: center; border: 1px solid #E6ECF0; border-radius: 12px; background: #FAFBFC; overflow: hidden; }
.sh-logo img { max-width: 116px; max-height: calc(100% - 10px); object-fit: contain; }
.sh-logo span { font-size: 0.75rem; color: #9AA7B2; }
.sh-company-text { min-width: 0; flex: 1; }
.sh-company-name { font-size: 1.08rem; font-weight: 800; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-company-sub { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 0.8rem; color: #5E7280; }
.sh-company-sub span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sh-company-sub .mud-icon-root { font-size: 16px; color: #93A4B0; }
.sh-ready { flex: none; display: flex; flex-direction: column; gap: 6px; padding-left: 18px; border-left: 1px solid #E6ECF0; }
.sh-ready-head { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: #0D2430; }
.sh-ready-head .gl-chip { padding: 1px 9px; }
.sh-checks { display: flex; flex-wrap: wrap; gap: 6px; max-width: 470px; }
.sh-check { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 8px; background: #FEF6E2; color: #A15C07; font-size: 0.76rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sh-check .mud-icon-root { font-size: 15px; }
.sh-check.done { background: #E9F7EE; color: #15803D; }
.sh-check:hover { filter: brightness(0.97); text-decoration: underline; }
.sh-edit { flex: none; align-self: center; }
.sh-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; align-items: stretch; }
/* The reports home has five groups in a row: narrower columns, and below 1750px each row gives its icon's room to the words. */
.sh-groups.sh-five { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
@media (max-width: 1750px) {
    .sh-five .sh-row .gl-kind { display: none; }
    .sh-five .sh-row { padding-left: 12px; }
}
.sh-group { display: flex; flex-direction: column; }
.sh-rows { display: flex; flex-direction: column; gap: clamp(4px, 0.8vh, 8px); }
.sh-row { display: flex; align-items: center; gap: 9px; padding: clamp(6px, 1.05vh, 10px) 8px 6px 9px; border: 1px solid #E6ECF0; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; }
.sh-row:hover { background: #F7FAFC; border-color: #D6E0E7; }
.sh-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sh-row strong { font-size: 0.88rem; font-weight: 700; color: #0D2430; }
.sh-row span:not(.gl-kind) { font-size: 0.76rem; color: #6B7F8C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-row span.sh-warn { color: #B45309; }
.sh-row > .mud-icon-root { flex: none; color: #93A4B0; }
.gl-kind.sh-kind-red { background: #FFE4E4; color: #C81E1E; }
.sh-recent { margin-top: 2px; padding: 8px 10px 4px; border-radius: 12px; background: #F7FAFC; }
.sh-recent-head { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8A9BA6; margin-bottom: 4px; }
.sh-recent-row { display: flex; flex-direction: column; padding: 3px 0; border-top: 1px solid #E9EEF2; line-height: 1.3; }
.sh-recent-row:first-of-type { border-top: 0; }
.sh-recent-row span { font-size: 0.76rem; color: #24333D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-recent-row em { font-style: normal; font-size: 0.7rem; color: #8A9BA6; }
/* Narrower windows: the group's own icon says enough, so each row keeps its width for the words. */
@media (max-width: 1450px) {
    .sh-row .gl-kind { display: none; }
    .sh-row { padding-left: 12px; }
    .sh-checks { max-width: 330px; }
    .sh-group .rv-card-sub { display: none; }
    .sh-group .rv-card-title { font-size: 0.95rem; white-space: nowrap; }
}
@media (max-width: 1250px) {
    .sh-company { flex-wrap: wrap; }
    .sh-ready { padding-left: 0; border-left: 0; }
}

/* ── Settings pages: the lists, their dialogs, and the forms ───────────────────────────────────── */
.gl-toolbar.se-toolbar { flex-wrap: nowrap; }
.se-toolbar .gl-search { min-width: 200px; }
.se-toolbar .gl-toolbar-right { flex: none; }
.gl-toolbar > .mud-select:has(.se-kind, .se-method, .se-role) { flex: 0 1 170px; min-width: 140px; }
.gl-toolbar > .mud-select:has(.se-area) { flex: 0 1 190px; min-width: 150px; }
.gl-toolbar > .mud-select:has(.se-who) { flex: 0 1 180px; min-width: 140px; }
.gl-toolbar > .mud-select:has(.se-kind, .se-method, .se-role, .se-area, .se-who) .gl-filter { min-width: 0; max-width: none; }
.se-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8rem; letter-spacing: 0.01em; }
.gl-kind.se-code-tile { width: 38px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; }
.gl-chip.se-code { font-size: 0.74rem; margin-right: 4px; }
.se-next { display: inline-block; padding: 3px 10px; border-radius: 8px; background: #0D2430; color: #fff; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.se-hint { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: #7A8D99; font-size: 0.78rem; overflow: hidden; }
.se-hint .mud-icon-root { flex: none; font-size: 16px; color: #93A4B0; }
.gl-foot-summary .se-hint { white-space: nowrap; text-overflow: ellipsis; }
/* The note gives way first; the count beside it stays on one line. */
.gl-foot:has(.se-hint) > span:first-child { flex: none; white-space: nowrap; }
.gl-table tbody tr.se-group-row td { background: #FAFCFD; }
.gl-table tbody tr.se-group-row:hover td { background: #F3F7FA; }
.se-indent { padding-left: 22px; }
.se-branch { width: 14px; height: 20px; flex: none; margin-right: 2px; border-left: 2px solid #DDE5EA; border-bottom: 2px solid #DDE5EA; border-bottom-left-radius: 6px; transform: translateY(-6px); }
.se-rights { display: flex; align-items: center; gap: 8px; min-width: 120px; color: #5E7280; font-size: 0.78rem; white-space: nowrap; }
.se-rights .rv-bar { width: 64px; flex: none; }
.se-who { font-size: 0.84rem; color: #24333D; white-space: nowrap; }
.se-has-details.mud-icon-root { color: #93A4B0; }
.gl-table td.gl-fill.se-what { width: 52%; }

/* Dialogs */
.pf.se-one { grid-template-columns: 1fr; }
.se-switches { display: flex; flex-direction: column; }
.se-switches .mud-switch { margin-left: -6px; }
.se-preview { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #F3F6F8; font-size: 0.84rem; color: #5E7280; }
.se-preview strong { padding: 3px 12px; border-radius: 8px; background: #0D2430; color: #fff; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.86rem; }
.ed-hint.se-warn { border-color: #F5D58A; background: #FFFBEB; color: #92400E; }
.ed-hint.se-warn .mud-icon-root { color: #B45309; }
.mud-dialog .cd-content.se-rights-content { max-height: min(68vh, 640px); overflow-y: auto; scrollbar-width: thin; }
/* Columns rather than a grid, so short groups pack under each other instead of leaving gaps. */
.se-rights-grid { column-width: 250px; column-gap: 10px; }
.se-rights-group { padding: 8px 10px 6px; break-inside: avoid; margin-bottom: 10px; }
.se-rights-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.se-rights-head strong { flex: 1; font-size: 0.88rem; color: #0D2430; }
.se-rights-head .gl-chip { padding: 1px 8px; }
.se-rights-group .mud-checkbox .mud-typography { font-size: 0.8rem; line-height: 1.25; }
.se-rights-group .mud-checkbox { margin: 0; }
.se-link { border: 0; background: none; padding: 2px 4px; color: #129C30; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.se-link:hover { text-decoration: underline; }
.se-entry { font-size: 0.95rem; color: #0D2430; line-height: 1.45; }
.se-entry-action { margin-top: 8px; }
.se-details { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #F3F6F8; color: #24333D; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.76rem; white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow-y: auto; }

/* Forms */
.qe-fields.se-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.qe-fields.se-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qe-fields.se-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qe-fields.se-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qe-fields.se-grid-1 { grid-template-columns: minmax(0, 1fr); }
.qe-fields.se-grid-defaults { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 1.6fr); }
.qe-fields .se-span-2 { grid-column: span 2; }
.qe-fields .se-span-all { grid-column: 1 / -1; }
@media (max-width: 1400px) {
    .qe-fields.se-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .qe-fields.se-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.qe-fields .pf-field > small { font-size: 0.72rem; line-height: 1.3; }
.se-switch-line { margin: -2px 0 4px -6px; }
.se-switch-line .mud-typography { font-size: 0.86rem; }
.se-switch-gap { margin-top: 8px; }
.se-switch-box { height: 32px; display: flex; align-items: center; margin-left: -6px; }
.se-switch-box .mud-typography { font-size: 0.84rem; }
.se-hint-gap { margin-top: 8px; }
.qe-head .pf-tile.se-tile-blue { background: #E3EEFF; color: #1D4ED8; }
.qe-head .qe-actions-right .mud-switch .mud-typography { font-size: 0.84rem; }
.se-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.se-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #DDE5EA; border-radius: 12px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.se-option:hover:not(:disabled) { border-color: #B9C6CF; background: #FAFCFD; }
.se-option.on { border-color: #129C30; background: #F1FBF4; box-shadow: 0 0 0 1px #129C30 inset; }
.se-option:disabled { opacity: 0.55; cursor: default; }
.se-option > .mud-icon-root { flex: none; margin-top: 1px; color: #93A4B0; }
.se-option.on > .mud-icon-root { color: #129C30; }
.se-option > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.se-option strong { font-size: 0.9rem; color: #0D2430; }
.se-option span { font-size: 0.8rem; color: #5E7280; }
.se-option em { margin-top: 4px; font-style: normal; font-size: 0.78rem; font-weight: 600; color: #0D2430; font-variant-numeric: tabular-nums; }
.qe-notes.se-notes-1 { grid-template-columns: minmax(0, 1fr); }
.se-marks { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); gap: var(--qe-gap); }
.se-mark { display: flex; flex-direction: column; }
.se-mark-body { flex: 1; display: flex; align-items: center; gap: 12px; }
.se-mark-box { width: clamp(110px, 9vw, 150px); height: clamp(64px, 11vh, 92px); flex: none; display: grid; place-items: center; border: 1px dashed #CBD6DE; border-radius: 10px; background: #FAFBFC; overflow: hidden; }
.se-mark-box img { max-width: calc(100% - 12px); max-height: calc(100% - 12px); object-fit: contain; }
.se-mark-box span { font-size: 0.74rem; color: #9AA7B2; text-align: center; padding: 0 6px; }
.se-mark-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.se-mark-actions .cd-btn.mud-button-root { padding: 3px 12px; font-size: 0.8rem; }
.se-locale .qe-fields { gap: 6px; }
.se-locale-save { margin-top: 8px; display: flex; justify-content: flex-end; }
.se-locale-save .cd-btn.mud-button-root { padding: 3px 14px; font-size: 0.82rem; }
@media (max-width: 1250px) { .se-marks { grid-template-columns: repeat(3, minmax(0, 1fr)); } .se-locale { grid-column: 1 / -1; } }

/* ── Reports: the period bar, the figures, every table behind a tab, the trend and the notes ───── */
.shell-main:has(.rp) { height: 100vh; height: 100dvh; overflow: hidden; }
.shell-main:has(.rp) .topbar { padding-top: clamp(6px, 1.2vh, 12px); }
.shell-main:has(.rp) .topbar-right .chip { padding: 5px 14px; font-size: 0.8rem; }
.page:has(> .rp) { display: flex; flex-direction: column; min-height: 0; padding-top: 2px; padding-bottom: clamp(8px, 1.6vh, 16px); }
/* Too small a window to hold it all: the page scrolls instead, and the tables keep their rows. */
@media (max-width: 1100px), (max-height: 600px) {
    .shell-main:has(.rp) { height: auto; overflow: visible; }
    .page:has(> .rp) { display: block; }
    .rp-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
}
.rp { --rp-gap: clamp(7px, 1.2vh, 12px); flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--rp-gap); }
.gl-card.rp-bar { flex: none; padding: clamp(6px, 1vh, 10px) 14px; overflow: visible; }
.gl-toolbar.rp-toolbar { margin-bottom: 0; flex-wrap: nowrap; }
.gl-kind.rp-bar-icon { width: 34px; height: 34px; border-radius: 10px; }
.gl-kind.rp-bar-icon .mud-icon-root { font-size: 19px; }
.gl-toolbar > .mud-select:has(.rp-preset) { flex: 0 0 150px; min-width: 140px; }
.gl-toolbar > .mud-select:has(.rp-class) { flex: 0 1 190px; min-width: 150px; }
.gl-toolbar > .mud-select:has(.rp-preset, .rp-class) .gl-filter { min-width: 0; max-width: none; }
.rp-step { flex: none; display: flex; align-items: center; gap: 4px; }
.rp-step > button { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid #DDE5EA; border-radius: 50%; background: #fff; color: #0D2430; cursor: pointer; }
.rp-step > button:hover { background: #F1F5F8; }
.rp-range { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px; background: #F3F6F8; color: #0D2430; font-size: 0.86rem; font-weight: 600; white-space: nowrap; }
.rp-range .mud-icon-root { color: #6B7F8C; }
.rp-step .rp-date { width: 150px; }
.rp-step .rp-date .mud-input-control { margin: 0; }
.rp-to { font-size: 0.8rem; color: #6B7F8C; }

.rp-kpis { flex: none; display: grid; grid-template-columns: repeat(var(--rp-kpis, 4), minmax(0, 1fr)); gap: 10px; }
.rp-kpi { min-width: 0; display: flex; flex-direction: column; padding: clamp(6px, 1.1vh, 12px) 14px; background: #fff; border: 1px solid #E6ECF0; border-radius: 14px; box-shadow: 0 8px 24px rgba(13, 43, 56, 0.05); }
.rp-kpi > span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #3B4D59; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-kpi > strong { font-size: clamp(1rem, 2.4vh, 1.3rem); line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rp-kpi > strong em { margin-left: 4px; font-style: normal; font-size: 0.7rem; font-weight: 600; color: #8A9BA6; letter-spacing: 0; }
.rp-kpi > small { font-size: 0.72rem; line-height: 1.25; color: #6B7F8C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-kpi.rp-tone-good > strong { color: #15803D; }
.rp-kpi.rp-tone-bad > strong { color: #C81E1E; }
.rp-kpi.rp-tone-warn > strong { color: #B45309; }
a.rp-kpi.rp-kpi-link { color: inherit; text-decoration: none; box-shadow: none; }
a.rp-kpi.rp-kpi-link:hover { border-color: #C9D5DD; background: #FAFCFD; }

.rp-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 21vw, 330px); grid-template-rows: minmax(0, 1fr); gap: 12px; }
.rp-main.rp-main-full { grid-template-columns: minmax(0, 1fr); }
.rv-card.rp-tables { min-height: 0; display: flex; flex-direction: column; padding: clamp(6px, 1vh, 10px) 14px 4px; }
.rp-tabs-row { flex: none; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.gl-seg.rp-tabs { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gl-seg.rp-tabs button { white-space: nowrap; padding: 5px 12px; font-size: 0.82rem; }
.rp-count { margin-left: 2px; padding: 0 7px; border-radius: 8px; background: #E9EEF5; color: #3B4D7A; font-size: 0.7rem; font-weight: 700; }
.gl-seg button.on .rp-count { background: #E3F8E8; color: #15803D; }
.rp-tabs-row .rp-search { flex: 0 1 200px; min-width: 120px; margin-left: auto; }
.rp-tabs-row .rp-search .mud-input-control { margin: 0; }
.rp-desc { flex: none; margin: 0 0 2px 2px; font-size: 0.76rem; color: #7A8D99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-table-wrap { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.gl-table.rp-table { table-layout: fixed; }
.rp-table th { position: sticky; top: 0; z-index: 1; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-table td { height: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-table td.rp-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-table td.rp-neg { color: #C81E1E; }
.gl-table.rp-table tbody tr.rp-static { cursor: default; }
.rp-table tr.rp-row-heading td { font-weight: 700; color: #0D2430; background: #FAFCFD; }
.rp-table tr.rp-row-subtotal td { font-weight: 700; color: #0D2430; border-top: 1px solid #9AA7B2; }
.rp-table tr.rp-tone-good td.gl-num { color: #15803D; }
.rp-table tr.rp-tone-bad td.gl-num { color: #C81E1E; }
.rp-table tr.rp-tone-warn td:first-child { box-shadow: inset 3px 0 0 #F5B544; }
.rp-table tfoot td { position: sticky; bottom: 0; height: 36px; padding: 0 10px; background: #F1F5F8; border-top: 1px solid #0D2430; font-size: 0.84rem; font-weight: 700; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rp-side { min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; scrollbar-width: thin; }
.rv-card.rp-trend { flex: none; padding: 10px 14px; }
.rp-how { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px solid #DDE5EA; border-radius: 50%; background: #fff; color: #5E7280; cursor: pointer; }
.rp-how:hover { background: #F1F5F8; color: #0D2430; }
.rp-tabs-row:not(:has(.rp-search)) .rp-how { margin-left: auto; }
.rp-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 0.86rem; color: #0D2430; }
.rp-legend { display: inline-flex; align-items: center; font-size: 0.7rem; color: #6B7F8C; white-space: nowrap; }
.rp-legend i { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 8px; border-radius: 3px; background: #1D4ED8; }
.rp-legend i.b { background: #F59E0B; }
.rp-bars { display: flex; align-items: flex-end; gap: 5px; height: clamp(90px, 17vh, 150px); }
.rp-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; }
.rp-bar-pair { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.rp-bar-pair i { width: 42%; max-width: 18px; border-radius: 4px 4px 0 0; background: #1D4ED8; }
.rp-bar-pair i.b { background: #F59E0B; }
.rp-bar-pair i.neg { background: #E25555; }
.rp-col > span { margin-top: 4px; font-size: 0.64rem; color: #7A8D99; white-space: nowrap; }
ul.rp-notes { margin: 0; padding-left: 18px; font-size: 0.86rem; line-height: 1.5; color: #3B4D59; }
ul.rp-notes li + li { margin-top: 6px; }

.rv-card.rh-glance { padding: clamp(8px, 1.2vh, 14px) 16px; }
.rh-glance .rp-kpis { margin-top: 2px; }
.rh-glance .rp-kpi { box-shadow: none; background: #FAFCFD; }
@media (max-width: 1250px) { .rp-main { grid-template-columns: minmax(0, 1fr) 240px; } }
@media (max-width: 1450px) { .gl-seg.rp-tabs button > .mud-icon-root { display: none; } .gl-seg.rp-tabs button { padding: 5px 10px; } }

/* ── Attachments: the files behind a record, each saying what it is ─────────────────────────── */
.at { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.at-head { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.86rem; color: #0D2430; }
.at-head > .mud-icon-root { color: #6B7F8C; }
.at-count { padding: 0 8px; border-radius: 8px; background: #E9EEF5; color: #3B4D7A; font-size: 0.72rem; font-weight: 700; }
.at-hint { min-width: 0; color: #7A8D99; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-upload { margin-left: auto; flex: none; }
.at-add.cd-btn.mud-button-root { padding: 3px 12px; font-size: 0.8rem; }
.at-empty { padding: 12px; border: 1px dashed #D5DEE4; border-radius: 12px; color: #7A8D99; font-size: 0.82rem; text-align: center; background: #FAFCFD; }
.at-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.at-file { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px 6px 6px; border: 1px solid #E6ECF0; border-radius: 12px; background: #fff; }
.at-file:hover { border-color: #D3DDE4; background: #FAFCFD; }
.at-file.at-pending { border-style: dashed; background: #FFFDF5; }
.at-thumb { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 9px; background: #F1F5F8; overflow: hidden; text-decoration: none; }
.at-thumb img { width: 100%; height: 100%; object-fit: cover; }
.at-thumb .mud-icon-root { font-size: 22px; }
.at-thumb .at-pdf { color: #C81E1E; }
.at-thumb .at-xls { color: #15803D; }
.at-thumb .at-doc { color: #1D4ED8; }
.at-thumb .at-img { color: #6D28D9; }
.at-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.at-name { font-size: 0.84rem; font-weight: 600; color: #0D2430; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.at-name:hover { text-decoration: underline; }
.at-meta > span { font-size: 0.72rem; color: #7A8D99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-label { flex: none; display: inline-flex; align-items: center; gap: 0; padding: 2px 4px 2px 9px; border: 1px dashed #C9D5DD; border-radius: 8px; background: transparent; color: #7A8D99; font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.at-label.on { border: 0; background: #E3EEFF; color: #1D4ED8; }
span.at-label.on { padding-right: 9px; cursor: default; }
.at-label .mud-icon-root { font-size: 16px; }
.at-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #93A4B0; cursor: pointer; }
.at-x:hover { background: #FDECEC; color: #C81E1E; }
/* In the asset form: the files share the row with the description and the notes, and scroll inside it. */
.qe-notes.as-form-notes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
.qe-notes .qe-card.as-form-files { overflow-y: auto; scrollbar-width: thin; }
.as-form-files .at-list { grid-template-columns: minmax(0, 1fr); }


/* ── Company documents ─────────────────────────────────────────────────── */
.cdoc-count { margin-left: 2px; padding: 0 7px; border-radius: 8px; font-size: 0.7rem; font-weight: 700; line-height: 1.5; }
.cdoc-count-red { background: #FFE4E4; color: #C81E1E; }
.cdoc-count-amber { background: #FEF0CD; color: #A15C07; }
.cdoc-count-blue { background: #E3EEFF; color: #1D4ED8; }
.gl-two span.cdoc-soon { color: #A15C07; font-weight: 600; }
.cdoc-files { display: inline-flex; align-items: center; gap: 2px; margin-right: 8px; color: #5E7280; font-size: 0.8rem; }
.cdoc-files .mud-icon-root { font-size: 15px; color: #93A4B0; }
.cdoc-nofile { color: #B5C1CA; }
.cdoc-pager-red strong { color: #C81E1E; }
.cdoc-pager-amber strong { color: #A15C07; }
.cdoc-hint { display: block; margin-top: 6px; color: #7A8D99; font-size: 0.76rem; }
.cdoc-history { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; scrollbar-width: thin; }
.cdoc-renewal { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #F5F8FA; }
.cdoc-renewal > .mud-icon-root { flex: none; margin-top: 1px; color: #129C30; }
.cdoc-renewal strong { display: block; font-size: 0.84rem; color: #0D2430; }
.cdoc-renewal span { display: block; font-size: 0.76rem; color: #6B7F8C; }

/* ── Support: the list ─────────────────────────────────────────────────── */
.gl-toolbar-tight .gl-filter.sp-filter { flex: 0 1 150px; min-width: 130px; }
.sp-dot { display: inline-block; width: 8px; height: 8px; margin: 0 7px 1px 0; border-radius: 50%; background: #DC2626; box-shadow: 0 0 0 3px #FFE4E4; vertical-align: middle; }
.gl-table tr.sp-waiting .gl-two strong { color: #0D2430; font-weight: 700; }
.sp-from { max-width: 220px; }
.sp-priority { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.sp-priority::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: currentColor; }
.sp-priority-0 { color: #7A8D99; }
.sp-priority-1 { color: #2563EB; }
.sp-priority-2 { color: #D97706; }
.sp-priority-3 { color: #DC2626; }

/* ── Support: one ticket. The conversation scrolls; the page does not. ──── */
.shell-main:has(.sd) { height: 100vh; height: 100dvh; overflow: hidden; }
.page:has(> .sd) { display: flex; flex-direction: column; min-height: 0; padding-top: 2px; padding-bottom: clamp(8px, 1.6vh, 16px); }
.sd { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 360px); gap: 12px; }
.sd-main, .sd-card { background: #fff; border: 1px solid #E6ECF0; border-radius: 16px; box-shadow: 0 8px 24px rgba(13, 43, 56, 0.05); }
.sd-main { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sd-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #EDF1F4; }
.sd-back { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: #F3F6F8; color: #24333D; }
.sd-back:hover { background: #E6ECF0; }
.sd-head-text { flex: 1; min-width: 0; }
.sd-title { font-size: 1rem; font-weight: 700; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-sub { display: flex; gap: 10px; color: #7A8D99; font-size: 0.76rem; white-space: nowrap; overflow: hidden; }
.sd-sub span + span::before { content: "·"; margin-right: 10px; }

.sd-thread { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: #FAFCFD; }
.sd-msg { display: flex; align-items: flex-start; gap: 10px; max-width: 82%; }
.sd-msg.sd-ours { align-self: flex-end; flex-direction: row-reverse; }
.sd-bubble { min-width: 0; padding: 8px 12px 10px; border-radius: 14px; border: 1px solid #E6ECF0; background: #fff; }
.sd-ours .sd-bubble { background: #EEF7F1; border-color: #CFEBD8; }
.sd-note .sd-bubble { background: #FFF8E6; border-color: #F6E2AE; border-style: dashed; }
.sd-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; font-size: 0.74rem; color: #7A8D99; white-space: nowrap; }
.sd-meta strong { font-size: 0.8rem; color: #0D2430; }
.sd-tag { padding: 0 6px; border-radius: 6px; background: #FEF0CD; color: #A15C07; font-weight: 600; }
.sd-body { font-size: 0.86rem; color: #24333D; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.sd-event { align-self: center; max-width: 90%; text-align: center; font-size: 0.74rem; color: #7A8D99; }
.sd-event span { color: #3B4D59; }
.sd-event em { font-style: normal; margin-left: 4px; }

.sd-compose { flex: none; padding: 10px 16px 12px; border-top: 1px solid #EDF1F4; background: #fff; }
.sd-compose-note { background: #FFFCF2; }
.sd-compose-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; min-width: 0; }
.sd-compose-top .gl-seg button { padding: 4px 12px; font-size: 0.8rem; }
.sd-compose-hint { min-width: 0; color: #7A8D99; font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-text .mud-input.mud-input-outlined { border-radius: 10px; font-size: 0.86rem; }
.sd-text textarea { max-height: 22vh; }
.sd-compose-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }
/* A select hands its class to its inner control, so the outer one is sized here. */
.sd-compose-actions > .mud-select { flex: 0 1 250px; }
.sd-compose-actions .cd-btn.mud-button-root { padding: 5px 18px; }

.sd-side { min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; scrollbar-width: thin; }
.sd-card { flex: none; padding: 10px 14px 12px; }
.sd-card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.84rem; font-weight: 700; color: #0D2430; }
.sd-card-title .mud-icon-root { color: #129C30; }
.sd-link { margin-left: auto; border: 0; background: none; padding: 0; color: #129C30; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.sd-fields { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 6px 10px; }
.sd-fields > label { font-size: 0.78rem; font-weight: 600; color: #5E7280; }
.sd-fields .mud-input-control { margin: 0; }
.sd-fields .mud-input.mud-input-outlined { height: 32px; font-size: 0.84rem; border-radius: 9px; }
.sd-fields .mud-input-outlined div.mud-input-slot { height: 30px; line-height: 30px; padding-top: 0; padding-bottom: 0; }
.sd-contact { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 0.82rem; }
.sd-contact strong { color: #0D2430; font-size: 0.9rem; }
.sd-contact > span { color: #5E7280; }
.sd-contact a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: #1D4ED8; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-contact a:hover { text-decoration: underline; }
.sd-contact a .mud-icon-root { font-size: 15px; color: #93A4B0; }
.sd-share { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #EDF1F4; }
.sd-chipbtn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid #DDE5EA; border-radius: 9px; background: #fff; color: #24333D; font: inherit; font-size: 0.76rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.sd-chipbtn:hover { border-color: #B9C6CF; background: #FAFCFD; }
.sd-chipbtn .mud-icon-root { font-size: 15px; color: #5E7280; }
.sd-files .at-list { grid-template-columns: minmax(0, 1fr); }
.sd-files .at-head { flex-wrap: wrap; }
.pf-field.sd-wide { grid-column: span 1; }
@media (max-width: 1100px) {
    .shell-main:has(.sd) { height: auto; overflow: visible; }
    .sd { grid-template-columns: 1fr; }
    .sd-main { min-height: 70vh; }
}

/* ── The bell ──────────────────────────────────────────────────────────── */
.nb-btn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #E1E8ED; border-radius: 12px; background: #fff; color: var(--g-navy); cursor: pointer; box-shadow: 0 6px 18px rgba(13, 43, 56, 0.06); }
.nb-btn:hover { background: #F7FAFC; }
.nb-btn .mud-icon-root { font-size: 20px; }
.nb-badge { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; border: 2px solid #F5F7F9; background: #D97706; color: #fff; font-size: 0.64rem; font-weight: 700; line-height: 1; }
.nb-hot .nb-badge { background: #DC2626; }
.nb-pop.mud-popover { width: 360px; max-width: calc(100vw - 24px); border-radius: 14px; box-shadow: 0 16px 40px rgba(13, 43, 56, 0.18); }
.nb-list { max-height: min(70vh, 520px); overflow-y: auto; padding: 0 0 6px; }
.nb-head { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 8px; border-bottom: 1px solid #EDF1F4; }
.nb-head strong { font-size: 0.92rem; color: #0D2430; }
.nb-head span { font-size: 0.76rem; color: #7A8D99; }
.nb-group { padding: 10px 14px 4px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7A8D99; }
.nb-item.mud-menu-item { padding: 6px 14px; }
.nb-item .mud-menu-item-text { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nb-tile { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; }
.nb-tile .mud-icon-root { font-size: 17px; }
.nb-urgent { background: #FFE4E4; color: #C81E1E; }
.nb-soon { background: #FEF0CD; color: #A15C07; }
.nb-info { background: #E3EEFF; color: #1D4ED8; }
.nb-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nb-text strong { font-size: 0.82rem; font-weight: 600; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-text span { font-size: 0.74rem; color: #7A8D99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-more.mud-menu-item { padding: 4px 14px 4px 54px; font-size: 0.78rem; color: #129C30; }
.nb-empty { display: flex; align-items: center; gap: 10px; padding: 16px 14px 10px; color: #6B7F8C; font-size: 0.82rem; }
.nb-empty .mud-icon-root { color: #129C30; }

/* ── Settings: reminders and the help page ─────────────────────────────── */
.qe-fields.se-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .qe-fields.se-grid-2 { grid-template-columns: 1fr; } }
.sn-link { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: #F3F6F8; }
.sn-link > .mud-icon-root { flex: none; color: #129C30; }
.sn-url { flex: 1; min-width: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.82rem; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-link.qe-readonly .sn-url { color: #93A4B0; text-decoration: line-through; }
.sn-warn .mud-icon-root, .sn-warn { color: #A15C07; }
.sn-intro { margin-top: 10px; }

/* ── The public help page ──────────────────────────────────────────────── */
.hp { min-height: 100vh; padding: clamp(16px, 4vh, 48px) 16px 24px; background: radial-gradient(1200px 500px at 50% -10%, #E8F5EC 0%, rgba(232, 245, 236, 0) 70%), #F5F7F9; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hp-brand { width: 100%; max-width: 720px; display: flex; justify-content: center; }
.hp-brand img { max-height: 64px; max-width: 260px; object-fit: contain; }
.hp-name { font-size: 1.4rem; font-weight: 800; color: #0D2430; letter-spacing: -0.02em; }
.hp-card { width: 100%; max-width: 720px; box-sizing: border-box; padding: clamp(18px, 3vw, 32px); background: #fff; border: 1px solid #E6ECF0; border-radius: 20px; box-shadow: 0 16px 40px rgba(13, 43, 56, 0.08); }
.hp-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.hp-big-icon.mud-icon-root { font-size: 44px; color: #93A4B0; }
.hp-title { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 800; color: #0D2430; letter-spacing: -0.01em; }
.hp-intro { margin: 6px 0 0; color: #5E7280; font-size: 0.95rem; line-height: 1.5; }
.hp-form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.hp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hp-field { min-width: 0; }
.hp-field > label, .hp-reply > label, .hp-filelist > label { display: block; margin-bottom: 4px; font-size: 0.84rem; font-weight: 600; color: #0D2430; }
.hp-field > label em { color: #DC2626; font-style: normal; }
.hp .mud-input-control { margin: 0; }
.hp .mud-input.mud-input-outlined { border-radius: 10px; background: #fff; }
.hp-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-kinds button { padding: 6px 14px; border: 1px solid #DDE5EA; border-radius: 10px; background: #fff; color: #3B4D59; font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.hp-kinds button:hover { border-color: #B9C6CF; }
.hp-kinds button.on { border-color: #129C30; background: #F1FBF4; color: #0D2430; box-shadow: 0 0 0 1px #129C30 inset; }
.hp-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.hp-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hp-files .mud-button-root, .hp-reply .mud-button-root { border-radius: 10px; text-transform: none; font-weight: 600; }
.hp-files-hint { color: #7A8D99; font-size: 0.78rem; }
.hp-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border: 1px solid #E6ECF0; border-radius: 9px; background: #F8FAFB; color: #24333D; font-size: 0.8rem; text-decoration: none; }
a.hp-file { padding-right: 10px; }
a.hp-file:hover { border-color: #B9C6CF; }
.hp-file .mud-icon-root { font-size: 16px; color: #5E7280; }
.hp-file button { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #93A4B0; cursor: pointer; }
.hp-file button:hover { background: #FDECEC; color: #C81E1E; }
.hp-error { padding: 10px 12px; border-radius: 10px; background: #FFE4E4; color: #C81E1E; font-size: 0.86rem; font-weight: 600; }
.hp-ok { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: #E3F8E8; color: #15803D; font-size: 0.86rem; font-weight: 600; }
.hp-submit.mud-button-root { margin-top: 4px; border-radius: 12px; padding: 10px; text-transform: none; font-weight: 700; font-size: 1rem; }
.hp-contact { margin: 16px 0 0; text-align: center; color: #7A8D99; font-size: 0.84rem; }
.hp-contact a { color: #1D4ED8; text-decoration: none; margin: 0 4px; }
.hp-done { width: 100%; max-width: 720px; box-sizing: border-box; display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 16px; background: #E3F8E8; color: #15803D; }
.hp-done > .mud-icon-root { flex: none; font-size: 26px; }
.hp-done strong { display: block; color: #0D2430; }
.hp-done span { display: block; margin-top: 2px; color: #3B4D59; font-size: 0.86rem; }
.hp-ticket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #EDF1F4; }
.hp-number { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8rem; color: #7A8D99; }
.hp-dates { margin-top: 4px; color: #7A8D99; font-size: 0.8rem; }
.hp-status { flex: none; padding: 5px 12px; border-radius: 10px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.hp-status-0 { background: #E3EEFF; color: #1D4ED8; }
.hp-status-1 { background: #EFE7FF; color: #6D28D9; }
.hp-status-2 { background: #FEF0CD; color: #A15C07; }
.hp-status-3 { background: #E3F8E8; color: #15803D; }
.hp-status-4 { background: #E9EEF5; color: #3B4D7A; }
.hp-thread { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; }
.hp-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; border: 1px solid #E6ECF0; background: #F8FAFB; }
.hp-msg.hp-ours { align-self: flex-start; background: #EEF7F1; border-color: #CFEBD8; }
.hp-msg.hp-theirs { align-self: flex-end; }
.hp-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; font-size: 0.76rem; color: #7A8D99; }
.hp-meta strong { color: #0D2430; font-size: 0.82rem; }
.hp-body { font-size: 0.92rem; color: #24333D; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.hp-filelist { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0; border-top: 1px solid #EDF1F4; }
.hp-filelist > label { width: 100%; margin: 0; }
.hp-reply { padding-top: 14px; border-top: 1px solid #EDF1F4; }
.hp-reply .hp-files { margin-top: 8px; }
.hp-send.mud-button-root { margin-left: auto; }
.hp-closed { margin: 0; padding-top: 14px; border-top: 1px solid #EDF1F4; color: #7A8D99; font-size: 0.9rem; text-align: center; }
.hp-foot { margin-top: auto; padding-top: 8px; color: #93A4B0; font-size: 0.76rem; }
.hp-foot strong { color: #5E7280; }
.hp-foot .brand-g { color: #129C30; }
@media (max-width: 560px) {
    .hp-row { grid-template-columns: 1fr; }
    .hp-msg { max-width: 100%; }
    .hp-ticket-head { flex-direction: column-reverse; gap: 8px; }
}

/* ── Accounts: the chart, opening balances, journals ───────────────────── */
/* One screen: the card takes the window and the table scrolls inside it. */
.shell-main:has(.ac-card) { height: 100vh; height: 100dvh; overflow: hidden; }
.page:has(> .ac-card) { display: flex; flex-direction: column; min-height: 0; padding-bottom: clamp(8px, 1.6vh, 16px); }
.gl-card.ac-card { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ac-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.ac-scroll .gl-table thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.gl-toolbar-tight .gl-search.ac-search { flex: 0 1 220px; min-width: 150px; }
.gl-toolbar > .mud-select:has(.ac-type) { flex: 0 1 170px; min-width: 140px; }
.gl-toolbar > .mud-select:has(.ac-type) .gl-filter { min-width: 0; max-width: none; }
.ac-table td { height: 38px; }
.ac-code { width: 70px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8rem; }
.ac-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-name > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-name .mud-icon-root { flex: none; color: #93A4B0; font-size: 17px; }
.ac-head td { background: #F7FAFC; font-weight: 700; color: #0D2430; }
.ac-group { color: #5E7280; font-size: 0.8rem; white-space: nowrap; }
.ac-total { font-weight: 700; }
.ac-neg, .gl-table td.ac-neg strong { color: #C81E1E; }
.ac-tag { flex: none; padding: 1px 7px; border-radius: 6px; background: #E9EEF5; color: #3B4D7A; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; }
.ac-tag-bank { background: #E3F8E8; color: #15803D; }
.ac-health { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 8px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.ac-health.ok { background: #E3F8E8; color: #15803D; }
.ac-health.bad { background: #FFE4E4; color: #C81E1E; }
.gl-summary-late.ac-fix { margin-left: 0; }
.ac-gear.mud-icon-button { padding: 6px; border: 1px solid #DDE5EA; border-radius: 10px; }
.ac-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 4px 2px; border-top: 1px solid #EDF1F4; color: #5E7280; font-size: 0.8rem; }
.ac-foot strong { color: #0D2430; }

.ob-intro { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ob-intro strong { font-size: 0.92rem; color: #0D2430; }
.ob-intro span { color: #6B7F8C; font-size: 0.78rem; }
.ob-intro a { color: #129C30; font-weight: 600; }
.ob-locked { margin: 0 0 8px; }
.ob-table td { height: 40px; }
.ob-group td { padding-top: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5E7280; background: #F7FAFC; }
.gl-table tbody tr.ob-group { cursor: default; }
.ob-table tbody tr { cursor: default; }
.ob-table tbody tr.ob-set td:nth-child(2) { font-weight: 600; color: #0D2430; }
.ob-amount { width: 170px; text-align: right; }
.ob-amount .mud-input-control { margin: 0; }
.ob-amount .mud-input.mud-input-outlined { height: 30px; border-radius: 8px; font-size: 0.84rem; }
.ob-amount input { text-align: right; padding-top: 0 !important; padding-bottom: 0 !important; }
.ob-table tfoot td { padding: 8px 10px; font-weight: 700; border-top: 2px solid #DDE5EA; }
.ob-warn strong { color: #A15C07; }

.jv-narration { font-size: 0.95rem; font-weight: 600; color: #0D2430; margin-bottom: 4px; }
.jv-note { color: #6B7F8C; font-size: 0.82rem; }
.jv-lines { margin-top: 10px; }
.jv-lines tbody tr { cursor: default; }
.jv-lines tfoot td { padding: 8px 10px; font-weight: 700; border-top: 2px solid #DDE5EA; }
.jv-account { color: #0D2430; text-decoration: none; }
.jv-account:hover { text-decoration: underline; }
.jv-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.jv-grid { display: flex; flex-direction: column; gap: 6px; }
.jv-grid-head, .jv-grid-row, .jv-grid-foot { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1.2fr) 130px 130px 30px; gap: 8px; align-items: center; }
.jv-grid-head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #3B4D59; }
.jv-grid-row .mud-input-control { margin: 0; }
.jv-grid-row .mud-input.mud-input-outlined { height: 34px; border-radius: 9px; font-size: 0.84rem; }
.jv-grid-row .mud-input-outlined div.mud-input-slot { height: 32px; line-height: 32px; padding-top: 0; padding-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jv-grid-row input { padding-top: 0 !important; padding-bottom: 0 !important; }
.jv-grid-row .mud-input-numeric input { text-align: right; }
.jv-grid-foot { padding-top: 6px; border-top: 1px solid #EDF1F4; font-size: 0.86rem; }
.jv-grid-foot > :first-child { justify-self: start; }
.jv-diff { justify-self: end; font-weight: 700; }
.jv-diff.ok { color: #15803D; }
.jv-diff.bad { color: #C81E1E; }
@media (max-width: 900px) {
    .jv-grid-head { display: none; }
    .jv-grid-row, .jv-grid-foot { grid-template-columns: 1fr 1fr; }
    .jv-head { grid-template-columns: 1fr; }
}

.as-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.as-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid #E6ECF0; }
.as-check > .mud-icon-root { flex: none; margin-top: 1px; }
.as-check.ok > .mud-icon-root { color: #15803D; }
.as-check.warn { border-color: #F6E2AE; background: #FFFBEF; }
.as-check.warn > .mud-icon-root { color: #A15C07; }
.as-check strong { display: block; font-size: 0.86rem; color: #0D2430; }
.as-check span { display: block; margin-top: 2px; color: #6B7F8C; font-size: 0.78rem; line-height: 1.35; }
@media (max-width: 760px) { .as-checks { grid-template-columns: 1fr; } }

.gl-toolbar > .mud-select:has(.rp-account) { flex: 0 1 260px; min-width: 180px; }
.gl-toolbar > .mud-select:has(.rp-account) .gl-filter { min-width: 0; max-width: none; }

.ac-suspense { color: #A15C07; text-decoration: none; }
.ac-suspense strong { color: #A15C07; }
.pt-cell { width: 240px; max-width: 240px; }
.pt-cell .mud-input-control { margin: 0; }
.pt-cell .mud-input.mud-input-outlined { height: 30px; border-radius: 8px; font-size: 0.8rem; }
.pt-cell .mud-input-outlined div.mud-input-slot { height: 28px; line-height: 28px; padding-top: 0; padding-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-text { font-size: 0.8rem; color: #24333D; white-space: nowrap; }
.pt-text.pt-fallback { color: #93A4B0; font-style: italic; }

/* ── Banking: accounts, register, reconciliation, cheques ─────────────── */
.shell-main:has(.bk) { height: 100vh; height: 100dvh; overflow: hidden; }
.page:has(> .bk) { display: flex; flex-direction: column; min-height: 0; padding-top: 2px; padding-bottom: clamp(8px, 1.6vh, 16px); }
.bk { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 12px); }
.gl-card.bk-card { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.bk-back { margin: 0 -4px 0 -6px; }
.bk-account { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bk-kind { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; }
.bk-kind .mud-icon-root { font-size: 18px; }
.bk-kind-0 { background: #D9F7E1; color: #129C30; }
.bk-kind-1 { background: #E3EEFF; color: #1D4ED8; }
.bk-kind-2 { background: #EFE7FF; color: #6D28D9; }
.bk-ccy { margin-left: 2px; font-size: 0.7rem; font-weight: 600; color: #8A9BA6; }
.bk-sub { font-size: 0.72rem; color: #7A8D99; }
.bk-muted { color: #9AA7B2; }
.bk-in, .gl-two strong.bk-in { color: #15803D; }
.bk-out, .gl-two span.bk-out { color: #C2410C; }
.bk-ok, .gl-two span.bk-ok { color: #15803D; font-weight: 600; }
.bk-bad, .gl-two span.bk-bad { color: #C81E1E; font-weight: 600; }
.bk-warn, .gl-two span.bk-warn { color: #B45309; font-weight: 600; }
.gl-two.gl-two-right { text-align: right; }
.mud-menu-item.bk-danger .mud-menu-item-text, .mud-list-item.bk-danger { color: #C81E1E; }
.gl-table tbody tr.bk-bf, .gl-table tbody tr.bk-static { cursor: default; }
.gl-table tbody tr.bk-bf td { height: 36px; background: #F7FAFC; color: #5E7280; font-size: 0.8rem; }
.bk-card .ac-scroll .gl-table tfoot td { position: sticky; bottom: 0; height: 38px; padding: 0 10px; background: #fff; border-top: 1px solid #DDE5EA; font-size: 0.82rem; font-weight: 700; color: #0D2430; }

.bk-rec { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.bk-pane { min-height: 0; display: flex; flex-direction: column; border: 1px solid #E6ECF0; border-radius: 14px; overflow: hidden; }
.bk-pane-head { flex: none; display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; background: #F7FAFC; border-bottom: 1px solid #E6ECF0; min-width: 0; }
.bk-pane-head strong { flex: none; font-size: 0.84rem; color: #0D2430; }
.bk-pane-head span { min-width: 0; font-size: 0.74rem; color: #7A8D99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-pane-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.bk-line { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 6px 5px 12px; border-bottom: 1px solid #EDF1F4; cursor: pointer; }
.bk-line:hover { background: #F7FAFC; }
.bk-line.on { background: #EAF7EE; box-shadow: inset 3px 0 0 #129C30; }
.bk-line.matched, .bk-line.ignored { opacity: 0.6; cursor: default; }
.bk-item { margin: 0; padding-right: 14px; }
.bk-item.same:not(.on) { background: #FFFBEB; }
.bk-item input { flex: none; width: 16px; height: 16px; accent-color: #129C30; cursor: pointer; }
.bk-line-date { flex: none; width: 46px; font-size: 0.78rem; color: #5E7280; font-variant-numeric: tabular-nums; }
.bk-line-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bk-line-text > span { font-size: 0.82rem; color: #24333D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-line-text > small { font-size: 0.72rem; color: #7A8D99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-suggest { color: #1D4ED8; font-weight: 600; }
.bk-line-amt { flex: none; font-size: 0.84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-bar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding-top: 10px; font-size: 0.8rem; color: #3B4D59; }
.bk-bar strong { font-variant-numeric: tabular-nums; }
.bk-bar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bk-sub-head { margin: 10px 0 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #3B4D59; }
.bk-sub-head:first-child { margin-top: 2px; }
.bk-finish { display: flex; justify-content: space-between; gap: 10px; margin: 2px 0 10px; padding: 8px 12px; background: #F7FAFC; border-radius: 10px; font-size: 0.82rem; }
.bk-rate > span { display: block; padding-top: 9px; font-size: 0.84rem; color: #3B4D59; }

.bi { display: flex; flex-direction: column; gap: 10px; }
.bi-file { display: flex; align-items: center; gap: 12px; }
.bi-name { min-width: 0; font-size: 0.84rem; color: #5E7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-map { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.bi-summary { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: #3B4D59; }
.bi-scroll { max-height: 36vh; overflow-y: auto; border: 1px solid #E6ECF0; border-radius: 12px; scrollbar-width: thin; }
.bi-scroll .gl-table thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.bi-table td { height: 34px; }
.bi-table tbody tr { cursor: default; }
.bi-problem { color: #C81E1E; }
@media (max-width: 1100px) {
    .bi-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bk-rec { grid-template-columns: minmax(0, 1fr); }
}

/* ── Period close ─────────────────────────────────────────────────────── */
.shell-main:has(.pc) { height: 100vh; height: 100dvh; overflow: hidden; }
.page:has(> .pc) { display: flex; flex-direction: column; min-height: 0; padding-top: 2px; padding-bottom: clamp(8px, 1.6vh, 16px); }
.pc { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
.qe-card.pc-card { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pc-months { flex: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.pc-month { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.pc-month .mud-icon-root { font-size: 14px; }
.pc-month.locked { background: #E3F8E8; color: #15803D; }
.pc-month.open { background: #FEF0CD; color: #A15C07; }
.pc-month.current { background: #E9EEF5; color: #3B4D7A; }
.pc-next { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pc-next-head { flex: none; display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.pc-next-head strong { font-size: 0.88rem; color: #0D2430; }
.pc-next-head span { font-size: 0.76rem; color: #6B7F8C; }
.as-checks.pc-checks { flex: 1; min-height: 0; overflow-y: auto; align-content: start; scrollbar-width: thin; gap: 8px; }
.pc-checks .as-check { padding: 8px 10px; text-decoration: none; }
.pc-checks a.as-check[href]:hover { border-color: #C9D6DE; }
.pc-done { flex: 1; display: flex; align-items: center; gap: 8px; color: #15803D; font-size: 0.86rem; font-weight: 600; }
.pc-actions { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; }
.pc-years { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.pc-years .gl-table thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.pc-years a.gl-chip { text-decoration: none; }
@media (max-width: 1100px) { .pc { grid-template-columns: minmax(0, 1fr); } }

/* ── Recurring journals, budgets, revaluation ─────────────────────────── */
.rj-summary { font-size: 0.82rem; color: #5E7280; white-space: nowrap; }
.rj-summary strong { font-variant-numeric: tabular-nums; }
.rj-head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pc-actions .pc-left { margin-right: auto; }
.bu-table { table-layout: fixed; }
.bu-table th, .bu-table td { padding: 0 4px; }
.bu-table th.bu-account, .bu-table td.bu-account { width: 230px; padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bu-table td { height: 36px; font-size: 0.8rem; }
.bu-table .bu-total { width: 96px; }
.bu-cell input { width: 100%; height: 28px; padding: 0 6px; border: 1px solid #DDE5EA; border-radius: 7px; background: #fff; font: inherit; font-size: 0.8rem;
    text-align: right; font-variant-numeric: tabular-nums; color: #0D2430; }
.bu-cell input:focus { outline: none; border-color: #129C30; box-shadow: 0 0 0 2px rgba(18, 156, 48, 0.15); }
.bu-cell input:disabled { background: #F7FAFC; color: #5E7280; }
.bu-cell.bu-total input { font-weight: 700; background: #F7FAFC; }
.gl-table tbody tr.bu-head td { height: 30px; padding-left: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #3B4D59; background: #F7FAFC; }
.gl-table tbody tr.bu-sum td { height: 34px; font-weight: 700; color: #0D2430; border-top: 1px solid #DDE5EA; padding-left: 10px; }
.fx { display: flex; flex-direction: column; gap: 10px; }
.fx-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.fx-month { flex: 0 0 200px; }
.fx-rate { flex: 0 0 170px; }
.fx-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #C9D6DE; border-radius: 10px; font: inherit; font-size: 0.86rem; text-align: right; font-variant-numeric: tabular-nums; }
.fx-input:focus { outline: none; border-color: #129C30; }
.fx-scroll { max-height: 40vh; overflow-y: auto; border: 1px solid #E6ECF0; border-radius: 12px; scrollbar-width: thin; }
.fx-scroll .gl-table thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.fx-scroll .gl-table tfoot td { position: sticky; bottom: 0; height: 36px; padding: 0 10px; background: #fff; border-top: 1px solid #DDE5EA; font-weight: 700; }
.fx-past { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.78rem; color: #5E7280; }
.fx-past a.gl-chip { text-decoration: none; }
.fs-icon.mud-icon-button { border-radius: 10px; padding: 6px; }
@media (max-width: 1500px) {
    .bu-table th.bu-account, .bu-table td.bu-account { width: 190px; }
    .bu-table .bu-total { width: 84px; }
    .bu-table th, .bu-table td { padding: 0 2px; }
    .bu-cell input { padding: 0 3px; font-size: 0.76rem; }
}

/* ── Leads: the pipeline board and a lead's page ───────────────────────── */
button.rp-kpi.ld-kpi { text-align: left; font: inherit; cursor: pointer; }
.gl-toolbar > .mud-select:has(.ld-owner) { flex: 0 1 170px; min-width: 140px; }
.gl-toolbar > .mud-select:has(.ld-status) { flex: 0 1 130px; min-width: 110px; }
.ld-board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ld-col { min-height: 0; display: flex; flex-direction: column; background: #F5F8FA; border: 1px solid #E6ECF0; border-radius: 14px; transition: background 0.12s, border-color 0.12s; }
.ld-col.over { background: #EAF7EE; border-color: #A7DDB4; }
.ld-col-head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 12px 6px; }
.ld-col-head strong { font-size: 0.8rem; color: #0D2430; white-space: nowrap; }
.ld-col-head span { font-size: 0.72rem; color: #6B7F8C; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ld-col-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 7px; scrollbar-width: thin; }
.ld-card { flex: none; padding: 8px 10px; background: #fff; border: 1px solid #E1E8ED; border-radius: 11px; cursor: pointer; box-shadow: 0 1px 2px rgba(13, 43, 56, 0.05); }
.ld-card:hover { border-color: #B9C9D3; }
.ld-card[draggable="true"] { cursor: grab; }
.ld-card.due { box-shadow: inset 3px 0 0 #E25555; }
.ld-card-top { display: flex; align-items: baseline; gap: 6px; }
.ld-card-top strong { flex: 1; min-width: 0; font-size: 0.82rem; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-value { flex: none; font-size: 0.76rem; font-weight: 700; color: #15803D; font-variant-numeric: tabular-nums; }
.ld-card-interest { margin-top: 1px; font-size: 0.76rem; color: #5E7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-card-foot { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ld-who { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #E3EEFF; color: #1D4ED8; font-size: 0.62rem; font-weight: 700; }
.ld-due, .ld-age { display: inline-flex; align-items: center; gap: 3px; font-size: 0.7rem; color: #6B7F8C; white-space: nowrap; }
.ld-due .mud-icon-root { font-size: 13px; }
.ld-due.today { color: #B45309; font-weight: 600; }
.ld-due.late { color: #C81E1E; font-weight: 600; }
.ld-empty { padding: 14px 6px; text-align: center; font-size: 0.76rem; color: #9AA7B2; }
.ld-closers { flex: none; display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.ld-drop { flex: 0 0 200px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 1.5px dashed #D3DCE2; border-radius: 10px;
    font-size: 0.78rem; font-weight: 600; color: #8A9BA6; transition: all 0.12s; }
.ld-drop .mud-icon-root { font-size: 17px; }
.ld-closers.live .ld-drop.won { border-color: #15803D; color: #15803D; background: #F0FAF3; }
.ld-closers.live .ld-drop.lost { border-color: #C81E1E; color: #C81E1E; background: #FFF5F5; }
.ld-hint { margin-left: auto; font-size: 0.74rem; color: #9AA7B2; }
.ld-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ld-reasons button { padding: 4px 10px; border: 1px solid #DDE5EA; border-radius: 8px; background: #fff; font: inherit; font-size: 0.78rem; color: #3B4D59; cursor: pointer; }
.ld-reasons button.on { border-color: #C81E1E; background: #FFF1F1; color: #C81E1E; }

.shell-main:has(.ld-detail) { height: 100vh; height: 100dvh; overflow: hidden; }
.page:has(> .ld-detail) { display: flex; flex-direction: column; min-height: 0; padding-top: 2px; padding-bottom: clamp(8px, 1.6vh, 16px); }
.ld-detail { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px 12px; }
.ld-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ld-steps { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ld-steps button { flex: none; padding: 6px 14px; border: 1px solid #DDE5EA; border-radius: 999px; background: #fff; font: inherit; font-size: 0.8rem; color: #5E7280; cursor: pointer; white-space: nowrap; }
.ld-steps button.past { background: #EAF7EE; border-color: #CBEBD3; color: #15803D; }
.ld-steps button.on { background: #129C30; border-color: #129C30; color: #fff; font-weight: 600; }
.ld-steps button:disabled { cursor: default; }
.ld-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.qe-card.ld-pane { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ld-pane-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.ld-who-block { display: flex; align-items: center; gap: 12px; }
.ld-avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #E3F8E8; color: #15803D; font-weight: 800; }
.ld-name { font-size: 1.05rem; font-weight: 700; color: #0D2430; }
.ld-sub { font-size: 0.76rem; color: #6B7F8C; }
.ld-contact { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 4px; }
.ld-contact a { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; color: #1D4ED8; text-decoration: none; }
.ld-contact .mud-icon-root { font-size: 16px; }
.ld-label { margin: 12px 0 3px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7F8C; }
.ld-label-row { display: flex; align-items: center; justify-content: space-between; }
.ld-label-row .se-link { text-transform: none; letter-spacing: 0; }
.ld-interest { font-size: 0.92rem; font-weight: 600; color: #0D2430; }
.ld-message { max-height: 120px; overflow-y: auto; padding: 8px 10px; background: #F7FAFC; border-radius: 10px; font-size: 0.82rem; color: #24333D; white-space: pre-wrap; scrollbar-width: thin; }
.ld-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-top: 12px; }
.ld-facts > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-facts > div.ld-span { grid-column: 1 / -1; }
.ld-facts span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7F8C; }
.ld-facts strong { font-size: 0.86rem; color: #0D2430; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-facts strong em { font-style: normal; font-size: 0.7rem; color: #8A9BA6; }
.ld-customer a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: #1D4ED8; text-decoration: none; }
.ld-customer-add { display: flex; align-items: center; gap: 8px; }
.ld-customer-add > span { font-size: 0.78rem; color: #6B7F8C; }
.ld-customer-add .mud-input-control { flex: 1; min-width: 0; }
.ld-quote { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #EDF1F4; text-decoration: none; color: #24333D; font-size: 0.8rem; }
.ld-compose { flex: none; display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid #EDF1F4; }
.gl-seg.ld-kinds { align-self: flex-start; }
.gl-seg.ld-kinds button { padding: 5px 10px; font-size: 0.8rem; }
.ld-compose-foot { display: flex; align-items: center; gap: 8px; }
.ld-compose-foot > span { font-size: 0.76rem; color: #6B7F8C; white-space: nowrap; }
.ld-compose-foot > .mud-picker { flex: 0 0 150px; }
.ld-compose-foot > .mud-input-control { flex: 1; min-width: 0; }
.ld-timeline { flex: 1; min-height: 0; overflow-y: auto; padding-top: 8px; scrollbar-width: thin; }
.ld-event { display: flex; gap: 10px; padding: 7px 0; }
.ld-event-icon { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #EEF2F5; color: #5E7280; }
.ld-event-icon .mud-icon-root { font-size: 15px; }
.ld-event-1 .ld-event-icon, .ld-event-4 .ld-event-icon { background: #E3F8E8; color: #15803D; }
.ld-event-2 .ld-event-icon, .ld-event-3 .ld-event-icon { background: #E3EEFF; color: #1D4ED8; }
.ld-event-5 .ld-event-icon, .ld-event-9 .ld-event-icon { background: #EFE7FF; color: #6D28D9; }
.ld-event-6 .ld-event-icon { background: #FEF0CD; color: #A15C07; }
.ld-event-body { min-width: 0; flex: 1; }
.ld-event-head { display: flex; align-items: baseline; gap: 8px; }
.ld-event-head strong { font-size: 0.8rem; color: #0D2430; }
.ld-event-head span { font-size: 0.72rem; color: #8A9BA6; }
.ld-event-text { font-size: 0.82rem; color: #24333D; white-space: pre-wrap; overflow-wrap: anywhere; }
.hp-big-icon.hp-ok { color: #15803D; }
@media (max-width: 1100px) { .ld-board { grid-template-columns: repeat(5, minmax(180px, 1fr)); overflow-x: auto; } .ld-detail { grid-template-columns: minmax(0, 1fr); } }

/* ── Tasks ─────────────────────────────────────────────────────────────── */
.gl-toolbar > .mud-select:has(.tk-scope) { flex: 0 1 150px; min-width: 130px; }
.gl-toolbar > .mud-select:has(.tk-person) { flex: 0 1 170px; min-width: 140px; }
.gl-toolbar > .mud-select:has(.tk-status) { flex: 0 1 130px; min-width: 110px; }
.ld-board.tk-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tk-card.tk-p3 { box-shadow: inset 3px 0 0 #C81E1E; }
.tk-card.tk-p2 { box-shadow: inset 3px 0 0 #D97706; }
.ld-card.tk-card.due { box-shadow: inset 3px 0 0 #E25555; }
.ld-age .mud-icon-root { font-size: 13px; }
.tk-flag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; white-space: nowrap; background: #EEF2F5; color: #5E7280; }
.tk-flag-0 { background: #F3F6F8; color: #8A9BA6; }
.tk-flag-2 { background: #FEF0CD; color: #A15C07; }
.tk-flag-3 { background: #FDE2E2; color: #B91C1C; }
.tk-mine { padding: 2px 2px 8px; }
.tk-nologin { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: #FFF8E6; color: #7A4B05; font-size: 0.8rem; }
.tk-nologin .mud-icon-root { font-size: 18px; flex: none; }
.tk-group { margin-bottom: 10px; }
.tk-group-head { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #EDF1F4; }
.tk-group-head strong { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7F8C; }
.tk-group-head span { font-size: 0.72rem; color: #9AA7B2; }
.tk-group-head.late strong { color: #C81E1E; }
.tk-group-head.today strong { color: #B45309; }
.tk-line { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-bottom: 1px solid #F1F4F6; cursor: pointer; }
.tk-line:hover { background: #F7FAFC; }
.tk-line.tk-p3 { box-shadow: inset 3px 0 0 #C81E1E; }
.tk-line.tk-p2 { box-shadow: inset 3px 0 0 #D97706; }
.tk-tick { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1.5px solid #CBD5DD; border-radius: 50%; background: #fff; color: #8A9BA6; cursor: pointer; }
.tk-tick .mud-icon-root { font-size: 16px; }
.tk-tick:hover:not(:disabled) { border-color: #129C30; color: #129C30; background: #F0FAF3; }
.tk-tick.tk-s1 { border-color: #93B4F5; color: #1D4ED8; }
.tk-tick.tk-s2 { border-color: #F0C46B; color: #A15C07; }
.tk-tick:disabled { cursor: default; opacity: 0.6; }
.tk-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tk-line-main strong { font-size: 0.84rem; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-line-main span { font-size: 0.72rem; color: #8A9BA6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-when { flex: 0 0 110px; text-align: right; font-size: 0.78rem; color: #5E7280; white-space: nowrap; }
.tk-when.late { color: #C81E1E; font-weight: 600; }
.tk-when.today { color: #B45309; font-weight: 600; }
.ld-avatar.tk-avatar { background: #F0EBFF; color: #6D28D9; }
.ld-avatar.tk-avatar.tk-s1 { background: #E3EEFF; color: #1D4ED8; }
.ld-avatar.tk-avatar.tk-s2 { background: #FEF0CD; color: #A15C07; }
.ld-avatar.tk-avatar.tk-s3 { background: #E3F8E8; color: #15803D; }
.ld-avatar.tk-avatar.tk-s4 { background: #EEF2F5; color: #8A9BA6; }
.tk-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 10px; border-radius: 9px; background: #EEF2F5; color: #3B4D59; font-size: 0.8rem; }
.tk-note .mud-icon-root { font-size: 16px; }
.tk-note-hold { background: #FFF8E6; color: #7A4B05; }
.tk-note-done { background: #F0FAF3; color: #15803D; }
.tk-link { font-size: 0.86rem; font-weight: 600; color: #1D4ED8; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-count { font-style: normal; margin-left: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #9AA7B2; }
.tk-steps { display: flex; flex-direction: column; }
.tk-step { display: flex; align-items: center; gap: 4px; min-height: 30px; border-bottom: 1px solid #F1F4F6; }
.tk-step > span { flex: 1; min-width: 0; font-size: 0.82rem; color: #24333D; }
.tk-step.done > span { color: #8A9BA6; text-decoration: line-through; }
.tk-step .at-x { opacity: 0; }
.tk-step:hover .at-x { opacity: 1; }
.tk-step-add { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.tk-step-add .mud-input-control { flex: 1; min-width: 0; }
.tk-file { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #F1F4F6; font-size: 0.8rem; }
.tk-file > .mud-icon-root { font-size: 17px; color: #5E7280; flex: none; }
.tk-file a { flex: 0 1 auto; min-width: 0; color: #1D4ED8; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-file span { flex: 1; font-size: 0.72rem; color: #8A9BA6; white-space: nowrap; }
.ld-event-body .tk-file { border-bottom: 0; padding: 3px 0 0; }
.tk-compose-foot { flex-wrap: nowrap; }
.tk-tool { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: 1px solid #DDE5EA; border-radius: 8px; background: #fff; font: inherit; font-size: 0.78rem; color: #3B4D59; cursor: pointer; white-space: nowrap; }
.tk-tool .mud-icon-root { font-size: 15px; }
.tk-tool:hover { border-color: #B9C9D3; }
.tk-pending { flex: 1; min-width: 0; display: flex; gap: 4px; overflow: hidden; }
.tk-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 160px; padding: 2px 4px 2px 8px; border-radius: 999px; background: #EEF2F5; font-size: 0.72rem; color: #3B4D59; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-chip button { border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; color: #8A9BA6; }
.tk-chip .mud-icon-root { font-size: 13px; }
.tk-comment { padding: 6px 9px; margin-top: 2px; background: #F7FAFC; border-radius: 9px; }
.ld-event-head .tk-edit { margin-left: auto; font-size: 0.72rem; }
.tk-edit-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.tk-event-1 .ld-event-icon { background: #E3EEFF; color: #1D4ED8; }
.tk-event-2 .ld-event-icon { background: #EFE7FF; color: #6D28D9; }
.tk-event-4 .ld-event-icon { background: #E3F8E8; color: #15803D; }
@media (max-width: 1100px) { .ld-board.tk-board { grid-template-columns: repeat(4, minmax(180px, 1fr)); } }
.rt { margin-top: 4px; }
.rt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 56px; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #EDF1F4; text-decoration: none; color: #24333D; font-size: 0.8rem; }
.rt-row:hover { background: #F7FAFC; }
.rt-row.closed { color: #8A9BA6; }
.rt-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rt-who { font-size: 0.74rem; color: #6B7F8C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.rt-due { text-align: right; font-size: 0.74rem; color: #5E7280; white-space: nowrap; }
.rt-due.late { color: #C81E1E; font-weight: 600; }
.rt-more { display: inline-block; margin-top: 6px; font-size: 0.76rem; }
.tk-month { flex: none; display: flex; align-items: center; gap: 2px; margin: -2px 0 4px; }
.tk-month strong { min-width: 120px; text-align: center; font-size: 0.86rem; color: #0D2430; }
.tk-month .se-link { margin-left: 6px; font-size: 0.78rem; }
.tk-cal { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--tk-weeks, 5), minmax(0, 1fr)); gap: 4px; }
.tk-cal-dow { padding: 2px 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7F8C; }
.tk-cal-day { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 4px 5px; border: 1px solid #E6ECF0; border-radius: 9px; background: #fff; }
.tk-cal-day.out { background: #F7F9FB; }
.tk-cal-day.out .tk-cal-num { color: #B6C2CA; }
.tk-cal-day.today { border-color: #129C30; box-shadow: inset 0 0 0 1px #129C30; }
.tk-cal-num { font-size: 0.72rem; font-weight: 700; color: #3B4D59; }
.tk-cal-item { display: block; padding: 1px 6px; border-radius: 5px; background: #EEF4FF; color: #1D4ED8; font-size: 0.7rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-cal-item.tk-p2 { background: #FEF0CD; color: #8A4B06; }
.tk-cal-item.tk-p3 { background: #FDE2E2; color: #B91C1C; }
.tk-cal-item.late { box-shadow: inset 3px 0 0 #E25555; }
.tk-cal-item.done { background: #F0FAF3; color: #8AA394; text-decoration: line-through; }
.tk-cal-more { font-size: 0.68rem; color: #6B7F8C; padding-left: 4px; }
/* Narrower screens: the task views keep their icons and lose their words, so the toolbar stays one line. */
@media (max-width: 1700px) { .tk-views button > span { display: none; } }

/* ── Stock: what is on hand, where, every movement, and the places it is kept ─────────────────── */
button.rv-kpi.sk-kpi-btn { font: inherit; text-align: left; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
button.rv-kpi.sk-kpi-btn:hover { border-color: #C9D5DD; }
button.rv-kpi.sk-kpi-btn.on { border-color: #22B547; box-shadow: inset 0 0 0 1px #22B547, 0 8px 24px rgba(13, 43, 56, 0.05); }
.rv-kpi.sk-kpi-amber { background: linear-gradient(120deg, #FFFAF0, #FFF3DC); border-color: #F8E2B5; }
.sk-amber { background: #FFF0D1; color: #B45309; }
.sk-unit { margin-left: 2px; font-style: normal; font-size: 0.72rem; font-weight: 600; color: #8A9BA6; }
.sk .rv-table .gl-toolbar { flex-wrap: nowrap; }
.gl-seg.sk-tabs button { white-space: nowrap; padding: 5px 12px; font-size: 0.84rem; }
.sk .gl-search.sk-search { flex: 0 1 230px; min-width: 150px; }
.sk .gl-toolbar-right .mud-button-root { white-space: nowrap; }
.sk-grid td.sk-where { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.82rem; color: #3B4D59; }
.sk-grid td.sk-serial-cell { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; font-family: ui-monospace, Consolas, monospace; color: #3B4D59; }
.sk-grid tbody tr.sk-static { cursor: default; }
.sk-grid tbody tr.sk-void td { color: #9AA7B2; }
.sk-grid tbody tr.sk-void td .gl-two strong, .sk-grid tbody tr.sk-void td.gl-num { text-decoration: line-through; }
.sk-ml { margin-left: 4px; }
.sk-link { border: 0; background: none; padding: 0; cursor: pointer; }
.sk-list { display: flex; flex-direction: column; }
.sk-list-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: clamp(3px, 0.6vh, 7px) 0; border-top: 1px solid #EEF2F5; color: inherit; text-decoration: none; }
.sk-list-row:first-child { border-top: 0; }
.sk-list-row .gl-two { flex: 1; min-width: 0; }
.sk-list-row .gl-two strong { font-size: 0.82rem; }
.sk-list-row .gl-chip { flex: none; }
.if-kinds.sk-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.if-kinds.sk-four { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.if-kinds.sk-four .if-kind { padding-top: 7px; padding-bottom: 7px; font-size: 0.82rem; }
.sk-unit-row:has(.sk-unit-act) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; }
.sk-unit-act.mud-icon-button { padding: 2px; margin: -4px 0; color: #6B4FBB; }
.sk-at { display: inline-flex; align-items: center; gap: 4px; flex: none; white-space: nowrap; }
.sk-at button { display: grid; place-items: center; border: 0; background: none; padding: 0; margin-left: 2px; color: inherit; cursor: pointer; }
.sk-asset-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pm { display: flex; flex-direction: column; gap: 10px; }
.pm-sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pm-sums > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid #E6ECF0; border-radius: 12px; background: #FAFCFD; }
.pm-sums span { font-size: 0.74rem; color: #6B7F8C; }
.pm-sums strong { font-size: 1.05rem; color: #0D2430; }
.pm-sums small { font-size: 0.72rem; font-weight: 600; color: #6B7F8C; }
.pm-scroll { max-height: 48vh; overflow-y: auto; scrollbar-width: thin; }
.pm-table a.gl-two { color: inherit; text-decoration: none; }
.pm-table a.gl-two:hover strong { color: #129C30; }
.pm-sub { margin: 12px 0 4px; font-size: 0.8rem; font-weight: 700; color: #3B4D59; }
.pm-moves { display: flex; flex-direction: column; }
.pm-move { display: grid; grid-template-columns: 84px 112px auto minmax(0, 1fr) 90px; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid #EEF2F5; font-size: 0.8rem; color: #24333D; text-decoration: none; }
.pm-move:hover { background: #F6F9FA; }
.pm-move > .gl-num:last-child { text-align: right; }
.pm-what { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-reason { min-width: 0; font-size: 0.84rem; color: #3B4D59; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-sub-head { margin: clamp(6px, 1vh, 12px) 0 2px; }
.sk-sub-head .rv-card-title { font-size: 0.86rem; }
.sk-levels { display: flex; flex-direction: column; font-size: 0.82rem; }
.sk-levels > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: clamp(2px, 0.45vh, 5px) 4px; border-top: 1px solid #EEF2F5; }
.sk-levels > div:first-child { border-top: 0; }
.sk-levels > div > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: #3B4D59; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-levels > div > span .mud-icon-root { color: #7A8D99; font-size: 16px; }
.sk-levels strong { font-weight: 700; color: #0D2430; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-side > .sk-units { flex: 1 1 auto; min-height: 96px; display: flex; flex-direction: column; overflow: hidden; }
.sk-units-count { margin-left: auto; font-size: 0.72rem; color: #6B7F8C; white-space: nowrap; }
.sk-unit-list { min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; }
.sk-unit-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: clamp(3px, 0.55vh, 6px) 0; border-top: 1px solid #EEF2F5; font-size: 0.8rem; }
.sk-unit-row:first-child { border-top: 0; }
.sk-unit-row strong { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; color: #0D2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-unit-row > span:not(.gl-chip) { color: #6B7F8C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-facts { display: flex; flex-direction: column; font-size: 0.82rem; }
.sk-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: clamp(2px, 0.45vh, 5px) 2px; border-top: 1px solid #EEF2F5; }
.sk-facts > div:first-child { border-top: 0; }
.sk-facts span { color: #6B7F8C; white-space: nowrap; }
.sk-facts strong { min-width: 0; font-weight: 600; color: #0D2430; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.rv-card.sk-voided { background: #FFF6F6; border-color: #FBD5D5; }
/* Opening stock: the when, where and against on one row, the lines under it. */
.sk-open { display: flex; flex-direction: column; gap: 12px; }
.sk-open-head { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.sk-open-head .if-kind { padding-top: 7px; padding-bottom: 7px; font-size: 0.82rem; }
.sk-open-lines { max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
.sk-open-lines .lines-table td { vertical-align: top; }
.sk-count { display: inline-block; padding-top: 8px; font-weight: 600; color: #0D2430; }
.sk-serials textarea { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; }
.sk-open-total { font-size: 0.86rem; color: #3B4D59; }
.sk-open-total strong { color: #0D2430; }
@media (max-width: 1800px) { .gl-seg.sk-tabs button > span { display: none; } }
/* Stock on purchase documents: a serial row under a serialised line, and where it goes in or comes from. */
.lines-table tr.pl-serials td { padding-top: 0; border-top: 0; }
.lines-table tr.pl-stock td { border-bottom-color: transparent; }
.pl-serials-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 0 6px; color: #5E7280; }
.pl-serials-row .pl-serials-input { flex: 1; min-width: 0; }
.pl-serials-row .pl-serials-input .mud-input-control { margin: 0; }
.pl-serials-text { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; color: #3B4D59; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-serials-count { flex: none; padding: 2px 8px; border-radius: 8px; background: #FFF0D1; color: #B45309; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.pl-serials-count.ok { background: #E3F8E8; color: #15803D; }
.qe-actions-right .qe-stock-place { flex: 0 0 210px; }
.qe-actions-right .qe-stock-place .mud-input { font-size: 0.82rem; }
.qe-actions-right .qe-stock-place .mud-input-slot { padding-top: 5px; padding-bottom: 5px; }
.qe-actions-right .qe-switch { margin: 0; white-space: nowrap; }
.qe-actions-right .qe-switch .mud-typography { font-size: 0.82rem; }
.sd-needs { display: flex; flex-direction: column; gap: 12px; }
.sd-need-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; font-size: 0.86rem; color: #0D2430; }
.sd-need .mud-input-control { margin: 0; }
.qe-actions-right .qe-stock-place .mud-input-control { margin: 0; }
@media (max-width: 1250px) { .sk-open-head { grid-template-columns: 1fr 1fr; } }

/* Stock counts and serial numbers */
.st-main > .gl-card.sc-card { display: flex; flex-direction: column; overflow: hidden; }
.sc-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.sc-table thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.sc-table td { vertical-align: top; }
.sc-table .mud-input-control { margin: 0; }
.sc-tick.mud-checkbox { margin: 0; }
.sc-units { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: 0.74rem; }
.sc-add { flex: 0 1 260px; min-width: 200px; }
.st-bar .sc-note { flex: 1 1 140px; min-width: 120px; max-width: 420px; }
ul.sc-how { margin: 0; padding: 0 0 0 18px; font-size: 0.8rem; color: #3B4D59; line-height: 1.45; overflow-y: auto; scrollbar-width: thin; }
ul.sc-how li + li { margin-top: 4px; }
.sk-serial-filter { flex: 0 1 200px; min-width: 170px; }
.sk-mono { font-family: ui-monospace, Consolas, monospace; }
.sk-serial-history { max-height: 40vh; }
a.sk-link-inline { color: #129C30; text-decoration: none; }
a.sk-link-inline:hover { text-decoration: underline; }
.sk-unit-row.sk-unit-open { cursor: pointer; }
.sk-unit-row.sk-unit-open:hover strong { color: #129C30; }
.sk-unit-actwrap { display: inline-flex; }
.sc-table { table-layout: fixed; width: 100%; }
.sc-table th.sc-c-no { width: 34px; }
.sc-table th.sc-c-item { width: 24%; }
.sc-table th.sc-c-books { width: 96px; }
.sc-table th.sc-c-count { width: 136px; }
.sc-table th.sc-c-diff { width: 88px; }
.sc-table th.sc-c-value { width: 96px; }
.sc-table td .gl-two strong, .sc-table td .gl-two span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1450px) {
    .sc-table th.sc-c-item { width: 18%; }
    .sc-table th.sc-c-books { width: 84px; }
    .sc-table th.sc-c-count { width: 120px; }
    .sc-table th.sc-c-diff { width: 78px; }
    .sc-table th.sc-c-value { width: 86px; }
}