:root {
    --ink: #1e293b;
    --muted: #64748b;
    --accent: #0f766e;
    --accent-dark: #115e59;
    --accent-soft: #ccfbf1;
    --bg: #f1f5f9;
    --card-bg: #ffffff;
    --border: #e2e8f0;
    --amber: #b45309;
    --amber-soft: #fef3c7;
    --indigo: #4338ca;
    --indigo-soft: #e0e7ff;
    --danger: #b91c1c;
    --danger-soft: #fee2e2;
    /* Stat-card specific greys (Tailwind gray-900/500/400) - kept distinct
       from --ink/--muted above, which are a slightly different (slate)
       scale used everywhere else. */
    --stat-value: #111827;
    --stat-label: #6b7280;
    --stat-sublabel: #9ca3af;
}

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.006em;
}

/* Login page only - the split-screen layout must fill exactly one
   viewport with no page-level scroll. Scoped to this class (set on
   <body> only when logged out) rather than applied to html/body
   generally, since every other page legitimately needs to scroll. */
body.login-page {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.login-wrap {
    display: flex;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.login-split {
    display: flex;
    width: 100%;
    height: 100%;
}

.login-panel-left {
    flex: 1;
    height: 100vh;
    background: linear-gradient(145deg, var(--accent-dark) 0%, #1a5c4a 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 4.5rem;
}

.login-panel-left .login-brand-mark {
    font-size: 2.75rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.login-panel-left h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

.login-panel-left p {
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.login-features {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.login-features div {
    color: rgba(255,255,255,0.9);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.login-features i {
    color: #7fffd4;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.login-panel-right {
    flex: 1;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg);
}

.login-card {
    width: 100%;
    max-width: 380px;
    padding: 2.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(15, 23, 42, 0.05);
}

.login-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-brand-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}

/* Login form fields - on-brand instead of Bootstrap's default gray/blue */
.login-card .form-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.login-card .input-group-text {
    background-color: var(--accent-soft);
    border-color: var(--border);
    color: var(--accent-dark);
    width: 44px;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.login-card .form-control {
    border-color: var(--border);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.login-card .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.15);
}

.login-card .input-group:focus-within .input-group-text {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.login-card .btn-primary {
    font-weight: 600;
    letter-spacing: 0.01em;
}

@media (max-width: 768px) {
    .login-panel-left { display: none; }
    .login-panel-right { width: 100%; }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: 600;
}

/* Page title area (the <h2> every page renders at its top, e.g.
   "Dashboard", "Manage Users") - not set in includes/header.php, since
   each page owns its own heading markup; .container is the one shared
   wrapper around all of it (see includes/header.php), so style it here
   instead of touching every page. */
.container {
    max-width: 1400px;
    padding: 1rem;
}
.container h2 {
    font-size: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

a {
    color: var(--accent);
}
a:hover {
    color: var(--accent-dark);
}

.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 6px rgba(15, 23, 42, 0.04);
}

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
}
.btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
}
.btn-outline-primary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
}
.btn-outline-secondary:hover {
    background-color: var(--ink);
    border-color: var(--ink);
}

/* ---------- Top navigation ---------- */
.app-navbar {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    /* Sticky, not fixed: stays put once its own row scrolls to the top of
       the viewport, without needing extra padding elsewhere to reserve
       space for it (fixed positioning would need that everywhere). Has
       no effect on print pages - those are standalone HTML that never
       includes this navbar to begin with. */
    position: sticky;
    top: 0;
    z-index: 1030;
}

.app-navbar .navbar-brand {
    color: var(--ink);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-navbar .navbar-brand i {
    color: var(--accent);
    font-size: 1.25rem;
}

.app-navbar .nav-link {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.925rem;
    letter-spacing: -0.005em;
    line-height: 1.5;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.85rem !important;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.app-navbar .nav-emoji {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    width: 1.2em;
    text-align: center;
    margin-right: 4px;
}
.app-navbar .nav-link:hover {
    color: var(--ink);
}
.app-navbar .nav-link.active {
    color: var(--accent);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

.app-navbar .org-name {
    align-items: center;
    padding: 0.5rem 0.6rem;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: -0.005em;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-navbar .navbar-divider {
    width: 1px;
    align-self: center;
    height: 26px;
    background-color: var(--border);
    margin: 0 0.75rem;
}

.app-navbar .user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.35rem 0.75rem 0.35rem 0.35rem;
    border-radius: 999px;
    background-color: var(--bg);
    border: 1px solid var(--border);
    color: var(--muted);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.app-navbar a.user-chip:hover {
    background-color: var(--accent-soft);
    border-color: var(--accent-soft);
    color: var(--ink);
}
.app-navbar a.user-chip:hover .user-name {
    color: var(--ink);
}
.app-navbar .user-name {
    color: var(--ink);
    font-weight: 500;
    font-size: 0.875rem;
}
.app-navbar .user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 700;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------- Dashboard stat cards ---------- */
/* Every one of the 8 cards (primary row + secondary row) shares this
   exact same structure/spacing - no per-card padding/size variants, no
   colored borders. The only per-card difference is the icon's color. */
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.25rem;
    border: none;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.stat-card .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.stat-card .stat-label {
    color: var(--stat-label);
    font-size: 0.8rem;
    font-weight: 500;
}
.stat-card .stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--stat-value);
    line-height: 1.2;
}
.stat-card .stat-value a {
    color: inherit;
}
.stat-card .stat-currency {
    font-size: 1.4rem;
    font-weight: 700;
    color: #374151;
}
.stat-card .stat-sublabel {
    font-size: 0.75rem;
    color: var(--stat-sublabel);
}
.stat-icon.stat-icon-teal { background: var(--accent-soft); color: var(--accent-dark); }
.stat-icon.stat-icon-amber { background: var(--amber-soft); color: var(--amber); }
.stat-icon.stat-icon-indigo { background: var(--indigo-soft); color: var(--indigo); }
.stat-icon.stat-icon-red { background: var(--danger-soft); color: var(--danger); }

/* ---------- Document view action bar + status card ----------
   Shared by invoices/view.php, quotations/view.php and
   credit-notes/view.php, so all three look consistent. */
.doc-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.doc-back-link {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.doc-back-link:hover {
    color: #111827;
}
.doc-actions-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

/* Status card: badge (left) / document title (center) / contextual
   action buttons (right), below the action bar and above the document
   itself. Reuses the same .btn-inv button family as the action bar. */
.doc-status-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: nowrap;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
}
.doc-status-card .doc-status-title {
    font-weight: 600;
    color: #111827;
}
.doc-status-card .doc-status-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.doc-actions .btn-inv, .doc-status-card .btn-inv {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 6px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.doc-actions .btn-inv-primary, .doc-status-card .btn-inv-primary {
    background-color: #1a6b5a;
    border: 1px solid #1a6b5a;
    color: #fff;
}
.doc-actions .btn-inv-primary:hover, .doc-status-card .btn-inv-primary:hover {
    background-color: #155a4b;
    border-color: #155a4b;
    color: #fff;
}
.doc-actions .btn-inv-dark, .doc-status-card .btn-inv-dark {
    background-color: #374151;
    border: 1px solid #374151;
    color: #fff;
}
.doc-actions .btn-inv-dark:hover, .doc-status-card .btn-inv-dark:hover {
    background-color: #1f2937;
    border-color: #1f2937;
    color: #fff;
}
.doc-actions .btn-inv-outline, .doc-status-card .btn-inv-outline {
    background-color: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
}
.doc-actions .btn-inv-outline:hover, .doc-status-card .btn-inv-outline:hover {
    background-color: #f3f4f6;
}
.doc-actions .btn-inv-danger-outline, .doc-status-card .btn-inv-danger-outline {
    background-color: #fff;
    border: 1px solid #ef4444;
    color: #ef4444;
}
.doc-actions .btn-inv-danger-outline:hover, .doc-status-card .btn-inv-danger-outline:hover {
    background-color: #fef2f2;
}

.section-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

/* Underline tab bar used to split a long settings form into sections
   (e.g. Company Settings) - mirrors .app-navbar's active-link style so
   it reads as one consistent pattern across the app. */
.settings-tabs {
    display: flex;
    gap: 1.75rem;
    border-bottom: 1px solid var(--border);
}
.settings-tabs .nav-link {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0 0 0.75rem;
    color: var(--muted);
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.settings-tabs .nav-link:hover {
    color: var(--ink);
}
.settings-tabs .nav-link.active {
    color: var(--accent);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

.filter-divider {
    height: 40px;
    align-self: center;
    opacity: 1;
    border-left: 1px solid var(--border);
}

/* Choices.js searchable dropdown - match the app's look instead of its default blue theme */
.choices__inner {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    min-height: calc(1.5em + 0.75rem + 2px);
    font-size: 1rem;
}
.choices.is-focused .choices__inner,
.choices__list--dropdown {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(15, 118, 110, 0.15);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--accent-soft);
    color: var(--accent-dark);
}
.choices__list--single .choices__item {
    color: var(--ink);
}

.table > :not(caption) > * > * {
    color: var(--ink);
}
.table thead th {
    /* font-size/letter-spacing/border-bottom-width deliberately omitted
       here - every actual table on the page matches either the more
       specific :not(.invoice-box .table) rule below (0.75rem) or the
       invoice's own .table-bordered thead th rule (11pt), so a value set
       here would only ever be silently overridden, never actually shown
       (confirmed by CSS specificity - keeping a dead value here risks
       misleading whoever next reads this into thinking it's the real
       table-header size). */
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    border-color: var(--border);
}

/* Polished list-table look (invoice/quotation history, customers, etc).
   Excludes .invoice-box, the printable tax-document layout, which has
   its own tight print-specific cell sizing that must not change, and
   .table-sm, used where a page deliberately wants a denser table. */
.table:not(.invoice-box .table) > :not(caption) > * > * {
    border-bottom-color: var(--border);
}
.table:not(.invoice-box .table):not(.table-sm) > :not(caption) > * > * {
    padding: 0.85rem 0.9rem;
}
.table:not(.invoice-box .table) thead th {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom-width: 2px;
}
.table:not(.invoice-box .table):not(.table-sm) thead th {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.table:not(.invoice-box .table) tbody td {
    font-size: 0.95rem;
}
.table:not(.invoice-box .table) tbody tr:last-child td {
    border-bottom: none;
}
.table:not(.invoice-box .table) td.text-end, .table:not(.invoice-box .table) th.text-end,
.table:not(.invoice-box .table) td.text-center, .table:not(.invoice-box .table) th.text-center {
    font-variant-numeric: tabular-nums;
}
.table-hover:not(.invoice-box .table-hover) > tbody > tr:hover > * {
    --bs-table-hover-bg: transparent;
    background-color: var(--accent-soft);
}
/* Clickable list-page rows (see includes/footer.php's delegated click
   handler) - the pointer cursor signals the whole row opens, not just
   the View button. */
tr[data-href] {
    cursor: pointer;
}


.cell-currency {
    font-size: 0.85em;
    color: var(--muted);
}

.cell-amount {
    white-space: nowrap;
}

/* Description column wraps long text cleanly in fixed-layout table */
.invoice-box .table-bordered td:last-child {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.arabic-field {
    direction: rtl !important;
    text-align: right !important;
}

.ar-label,
.ar-only-label {
    font-weight: normal;
    color: var(--muted);
    font-size: 0.85em;
}
.ar-label {
    margin-left: 3px;
}

.info-stack {
    border-collapse: collapse;
    width: 100%;
}

.info-stack td {
    padding: 3px 4px;
    white-space: nowrap;
    vertical-align: top;
}

.info-stack td:first-child {
    text-align: right;
    color: var(--ink);
    font-weight: 500;
    width: 55%;
}

.info-stack td.ar-only-label {
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
    width: 45%;
}

.payment-details {
    text-align: right;
}

.payment-details .ar-only-label {
    font-weight: bold;
    font-size: 11pt;
    color: var(--ink);
}

.payment-details .bank-details-table {
    margin-left: auto;
    text-align: left;
}

/* ---------- Arabic (RTL) document layout - additive only, alongside the
   default layout's own rules above (never modified by these). See
   includes/invoice_render_ar.php's own header comment for why every
   <table> there forces dir="ltr" and controls alignment explicitly. ---------- */
.ar-info-stack td:first-child {
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
    width: 45%;
}

.ar-info-stack td:last-child {
    text-align: left;
    color: var(--ink);
    font-weight: 500;
    width: 55%;
}

.ar-payment-details .bank-details-table {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

/* ---------- Invoice typography: Calibri 10pt base, 11pt bold for headings ---------- */

/* Base: entire invoice box uses Calibri 10pt normal */
.invoice-box {
    background: var(--card-bg);
    padding: 30px;
    max-width: 900px;
    margin: 0 auto;
    font-family: 'Calibri', 'Carlito', 'Liberation Sans', Arial, sans-serif;
    font-size: 10pt;
    font-weight: normal;
}

/* Bold 11pt: TO label */
.invoice-box .to-label {
    font-size: 11pt;
    font-weight: bold;
}

/* Bold 11pt: Contact name and Company name in the TO block */
.invoice-box .to-contact-name,
.invoice-box .to-company-name {
    font-size: 11pt;
    font-weight: bold;
}

/* Bold 11pt: item table column headings */
.invoice-box .table-bordered thead th {
    background-color: var(--bg);
    text-align: center !important;
    font-size: 11pt;
    font-weight: bold;
}

.invoice-box table td {
    vertical-align: top;
}

/* Bold 11pt: Grand Total (الصافي) row */
.totals-table tr.grand-total td {
    font-weight: bold;
    font-size: 11pt;
    border-top: 2px solid var(--ink);
}


.invoice-logo {
    max-height: 80px;
    max-width: 220px;
}

.letterhead-space {
    height: 96px;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.letterhead-hint {
    color: var(--muted);
    font-size: 0.8rem;
    margin-bottom: 4px;
    opacity: 0.7;
}

.qr-code-img {
    width: 180px;
    height: 180px;
}

.totals-table td {
    padding: 4px 8px;
    white-space: nowrap;
}

.totals-table tr.grand-total td {
    font-weight: bold;
    font-size: 1.15rem;
    border-top: 2px solid var(--ink);
}

.bank-details-table {
    border-collapse: collapse;
}

.bank-details-table td {
    padding: 4px 10px;
    border: 1px solid var(--border);
}

.bank-details-table td:first-child {
    color: var(--muted);
    white-space: nowrap;
    min-width: 72px;
    background-color: var(--bg);
    font-weight: bold;
}

/* ---------- Print styles: A4 friendly, strictly black & white ---------- */
@media print {
    .no-print {
        display: none !important;
    }

    /* Force pure black text everywhere and strip all background colors/
       shading, so the printed invoice is always plain black & white -
       regardless of the app's on-screen color scheme. */
    * {
        color: #000 !important;
        background: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        background: #fff;
    }
    /* Explicitly preserve the Calibri font stack in print mode since
       the * { } reset above could otherwise lose it. */
    .invoice-box, .invoice-box * {
        font-family: 'Calibri', 'Carlito', 'Liberation Sans', Arial, sans-serif !important;
    }

    .invoice-box {
        max-width: 100%;
        padding: 0;
    }
    .letterhead-space {
        height: 33mm;
        border-bottom: none;
    }

    /* Keep table/box borders solid black so they stay crisp on a
       black & white printer (light gray borders can wash out). */
    .table-bordered,
    .table-bordered th,
    .table-bordered td,
    .bank-details-table,
    .bank-details-table td,
    .totals-table tr.grand-total td {
        border-color: #000 !important;
    }

    /* Restore the item table header's light grey background in print -
       the * { background: none } above strips it, but a visible header
       row makes the printed invoice much easier to read. */
    .invoice-box .table-bordered thead th {
        background-color: #e8e8e8 !important;
    }

    .bank-details-table td:first-child {
        background-color: #e8e8e8 !important;
    }

    @page {
        size: A4;
        margin: 15mm;
    }
}

/* ---------- Dashboard: small-screen (phone) tuning ----------
   Scoped narrowly to elements the dashboard actually uses - does not
   touch the nav, or any invoice/quotation view/print layout. */
@media (max-width: 575.98px) {
    /* The period filter (This Month/Quarter/Year/All Time) is a
       Bootstrap connected button group, which doesn't wrap - on a
       phone the 4 buttons would overflow off-screen. Let it wrap onto
       two rows instead, restoring individual pill corners since a
       wrapped connected group looks broken at the wrap point. */
    .period-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .period-filter .btn {
        border-radius: 6px !important;
    }

    /* Slightly tighter KPI cards so two per row (already the mobile
       layout) don't crowd the amount text. */
    .stat-card {
        padding: 0.85rem;
    }
    .stat-card .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    .stat-card .stat-value,
    .stat-card .stat-currency {
        font-size: 1.15rem;
    }

    /* Long customer names in the dashboard's summary tables would
       otherwise force horizontal scrolling on a phone - truncate with
       an ellipsis instead (full name is one tap away via View). */
    .customer-cell {
        display: inline-block;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
}

.app-footer {
    /* Mirrors .app-navbar's look (same background/border/shadow
       treatment) so it reads as the same bar, just at the bottom -
       shadow direction flipped since it sits below the content instead
       of above it. */
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -1px 2px rgba(15, 23, 42, 0.04);
    padding: 1.25rem 0;
    margin-top: 2.5rem;
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}