/* ============================================================
   Easy FBR Digital Invoicing (Portal) - same brand tokens as the
   main app's app.css, copied rather than shared since Portal has
   no build-time dependency on FbrIntegration.Web.
   ============================================================ */

:root {
    --fbr-green-900: #0b3b27;
    --fbr-green-700: #146b47;
    --fbr-green-600: #1d7d55;
    --fbr-green-100: #e3f0e9;
    --fbr-gold-500: #c9a227;
    --fbr-gold-100: #f7efd6;
    --fbr-amber-600: #8a5a00;
    --fbr-amber-100: #fbf1de;
    --fbr-surface: #f4f7f5;
    --fbr-ink: #1f2a24;
    --fbr-radius-sm: 0.375rem;
    --fbr-radius-md: 0.5rem;
    --fbr-radius-lg: 0.75rem;
    --fbr-radius-pill: 999px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--fbr-ink);
    background: var(--fbr-surface);
}

:focus-visible {
    outline: 2px solid var(--fbr-gold-500);
    outline-offset: 1px;
}

a {
    color: var(--fbr-green-700);
}

/* ---------- Full-page centered card (login) ---------- */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--fbr-green-900) 0%, #14523a 100%);
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: var(--fbr-radius-lg);
    border-top: 4px solid var(--fbr-gold-500);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: 2.25rem 2rem;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 1.75rem;
}

.login-brand-logo {
    height: 3.5rem;
    width: auto;
    display: block;
}

.login-subtitle {
    margin: 0;
    font-size: 0.78rem;
    color: #6b7a72;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ---------- Form fields (shared by login and invoice pages) ----------
   Normal static labels: the <label> sits above its <input>/<select> in
   the markup and stays put - no floating/animation. */

.form-field {
    margin-bottom: 0.4rem;
}

.form-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3c4a43;
    margin-bottom: 0.15rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem 0.75rem 0.5rem;
    font-size: 0.95rem;
    border: 1px solid #c4d0c9;
    border-radius: var(--fbr-radius-sm);
    background-color: #fff;
    color: var(--fbr-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select.form-input {
    padding: 0.6rem 0.75rem;
}

.form-input:focus {
    outline: none;
    border-color: var(--fbr-green-700);
    box-shadow: 0 0 0 3px rgba(20, 107, 71, 0.18);
}

.form-button {
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--fbr-green-700);
    border: none;
    border-radius: var(--fbr-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.form-button:hover {
    background-color: var(--fbr-green-900);
}

.form-error {
    background-color: #fdecea;
    border: 1px solid #f5c6c0;
    color: #a4342a;
    border-radius: var(--fbr-radius-sm);
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 1.1rem;
}

.form-hint {
    margin: -0.15rem 0 0.5rem;
    font-size: 0.78rem;
    color: #6b7a72;
}

/* ---------- Page chrome for non-login pages ---------- */

.brand-header {
    background: var(--fbr-green-900);
    border-bottom: 2px solid var(--fbr-gold-500);
    min-height: 4rem;
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.brand-header-logout-form {
    margin: 0;
}

.brand-header-logout-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
    border-radius: var(--fbr-radius-sm);
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.brand-header-logout-button:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.brand-header-logo {
    height: 3.35rem;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
    display: block;
}

@media (max-width: 640px) {
    .brand-header {
        min-height: 3.5rem;
        padding: 0.5rem 0.85rem;
    }

    .brand-header-logo {
        height: 2.35rem;
    }
}

.page-content {
    max-width: 480px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.card {
    background: #fff;
    border-radius: var(--fbr-radius-lg);
    border-top: 4px solid var(--fbr-gold-500);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 1.75rem;
}

.card h2 {
    margin-top: 0;
    color: var(--fbr-green-900);
}

.link-out {
    display: inline-block;
    margin-top: 1rem;
}

/* Secondary action button (e.g. Save Draft) - same size/weight as the
   primary .form-button so it reads as an equal, deliberate action rather
   than a muted afterthought, just outlined instead of filled. */
.button-secondary {
    width: auto;
    padding: 0.65rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fbr-green-700);
    background: #fff;
    border: 1px solid var(--fbr-green-700);
    border-radius: var(--fbr-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.button-secondary:hover {
    background-color: var(--fbr-green-100);
}

/* ---------- Wide sectioned layout (Create Invoice) ---------- */

.page-content-wide {
    max-width: 1280px;
    margin: 1.5rem auto;
    padding: 0 2rem;
}

.breadcrumb-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

/* Page title on wide sectioned pages (Create Invoice, Drafts, History) -
   same green as .card h2, but these h2s sit directly on the page background
   rather than inside a .card, so they need their own rule. */
.wide-page-title {
    color: var(--fbr-green-900);
}

/* Running total stays visible while entering items, instead of only being
   readable once you scroll all the way down to the Invoice Summary card. */
.running-total-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: var(--fbr-green-700);
    color: #fff;
    border-radius: var(--fbr-radius-sm);
    padding: 0.6rem 1rem;
    margin-bottom: 0.9rem;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.running-total-count {
    color: var(--fbr-green-100);
}

.running-total-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 0.6rem;
}

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

.section-grid-30-70 {
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 0.85rem;
    margin-bottom: 0.6rem;
}

@media (max-width: 720px) {
    .section-grid-30-70 {
        grid-template-columns: 1fr;
    }
}

.section-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-bottom: 0.6rem;
}

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

@media (max-width: 720px) {
    .section-grid-3 {
        grid-template-columns: 1fr;
    }
}

.invoice-details-card {
    margin-bottom: 0.9rem;
}

.invoice-ref-field {
    max-width: 340px;
}

/* Invoice Reference No only means anything for a Debit Note - shown/hidden
   with a pure CSS `:has()` check against the selected Invoice Type option,
   so it stays conditional without needing any JavaScript. The hide rule is
   scoped inside @supports so a browser without :has() just never hides the
   field (progressive enhancement) - the field always being visible is a
   much smaller cost than it becoming permanently unreachable, which is
   what happens if the hide rule applies but the show rule can't. */
@supports selector(:has(*)) {
    .invoice-ref-field {
        display: none;
    }

    .invoice-details-card:has(#Input_InvoiceType option[value="Debit Note"]:checked) .invoice-ref-field {
        display: block;
    }
}

.action-bar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* On phones, Save draft / Submit invoice stay one thumb-reach away instead
   of requiring a scroll to the very bottom of a long item list. */
@media (max-width: 640px) {
    .action-bar-card {
        position: sticky;
        bottom: 0;
        z-index: 5;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    }

    .action-bar-card .action-bar {
        flex-wrap: nowrap;
    }

    .action-bar-card .action-bar button {
        flex: 1 1 0;
    }
}

/* Flat content cards (Seller/Buyer/Line Items) - deliberately no gold top
   accent, unlike .login-card. The gold border is a login-specific brand
   flourish; repeating it on every content section reads as decorative
   clutter on a dense, work-oriented page, so these stay flat/bordered
   like the main app's non-login cards. */
.section-card {
    border-top: none;
    border: 1px solid #e2e8e4;
    border-radius: var(--fbr-radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 1.25rem 1.5rem;
}

.section-card h3 {
    margin: 0 0 1rem;
    color: var(--fbr-green-900);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.subsection-label {
    margin: 0 0 0.75rem;
    color: var(--fbr-green-900);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.staging-panel {
    background: var(--fbr-surface);
    border: 1px solid #dde5e0;
    border-radius: var(--fbr-radius-md);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Bottom spacing shared by the Line Items and Invoice Summary cards, which
   (unlike Seller/Buyer/action-bar) need a gap before the next section. */
.section-card-spaced {
    margin-bottom: 1.5rem;
}

/* Additional Charges & SRO Details <details>/<summary> - collapsed by
   default so the rarely-needed fields don't compete with the common ones. */
.charges-details {
    margin-bottom: 1rem;
}

.charges-summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--fbr-green-900);
    font-size: 0.85rem;
}

.charges-intro-hint {
    margin-top: 0.75rem;
}

/* Add item / Save changes button - same visual weight as .form-button but
   sized to its label instead of stretching full width like a submit form. */
.add-item-button {
    width: auto;
    padding: 0.6rem 1.5rem;
}

/* Submit invoice - the primary call to action at the bottom of the page,
   given more horizontal padding than .add-item-button to read as the
   heavier, final action. */
.submit-invoice-button {
    width: auto;
    padding: 0.65rem 2rem;
}

/* ---------- Invoice line item: tax-treatment coding ----------
   Matches the main app's field-role coding (app.css): Sale Type, Rate and
   the SRO fields share a gold rail (same legal decision, split across the
   visible form and the collapsed Additional Charges panel); rare
   additional-charge fields share one amber tone rather than four
   competing hues, since most invoices never touch them. */
.field-rail {
    position: relative;
    padding-left: 0.65rem;
}

.field-rail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 3px;
    border-radius: 0.125rem;
    background: var(--fbr-gold-500);
}

.rail-tick {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fbr-gold-500);
    box-shadow: 0 0 0 3px var(--fbr-gold-100);
    margin-right: 0.5rem;
}

.field-charge .form-input {
    background: var(--fbr-amber-100);
    border-color: #d9b96a;
    color: var(--fbr-amber-600);
    font-weight: 600;
}

.field-charge label {
    color: var(--fbr-amber-600) !important;
}

.readonly-field {
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}

.readonly-field .label {
    font-weight: 600;
    color: #3c4a43;
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Tally/ledger styling for the Saved Items list - a running paper tally
   fits an invoice's real-world register more than a generic dashboard
   grid, and gives the page one deliberate signature detail. */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.data-table th {
    background: transparent;
    color: var(--fbr-green-700);
    text-align: left;
    padding: 0.4rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--fbr-green-700);
}

.data-table th.numeric {
    text-align: right;
}

.data-table td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px dotted #c4d0c9;
}

.data-table tbody tr:last-child td {
    border-bottom: 2px solid var(--fbr-green-700);
}

.data-table td.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--fbr-green-900);
}

.data-table .actions-cell {
    white-space: nowrap;
}

/* A <form> around a single action button (e.g. Discard) needs to sit
   inline next to sibling links/buttons in the same table cell, not drop
   to its own block line the way a bare <form> does by default. */
.inline-form {
    display: inline;
}

.data-table .actions-cell button {
    margin-right: 0.75rem;
}

.edit-item-button {
    background: none;
    border: none;
    color: var(--fbr-green-700);
    font-size: 0.85rem;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.edit-item-button:hover {
    color: var(--fbr-green-900);
}

.remove-item-button {
    background: none;
    border: none;
    color: #a4342a;
    font-size: 0.85rem;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.remove-item-button:hover {
    color: #7a2620;
}

.summary-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.summary-tile {
    background: var(--fbr-surface);
    border: 1px solid #e0e6e2;
    border-radius: var(--fbr-radius-md);
    padding: 0.7rem 0.9rem;
}

.summary-tile .tile-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #5b6b63;
    display: block;
    margin-bottom: 0.2rem;
}

.summary-tile .tile-value {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--fbr-ink);
    font-variant-numeric: tabular-nums;
}

/* Sales tax reuses the same tint as the field-computed treatment in the
   main app - "the system did this math" reads as reassurance. */
.summary-tile.computed {
    background: var(--fbr-green-100);
    border-color: var(--fbr-green-600);
}

.summary-tile.computed .tile-label,
.summary-tile.computed .tile-value {
    color: var(--fbr-green-700);
}

/* Other taxes reuses the one rare-charge amber tone - uncommon, so it
   shouldn't compete visually with the sales tax tile. */
.summary-tile.charge {
    background: var(--fbr-amber-100);
    border-color: #d9b96a;
}

.summary-tile.charge .tile-label,
.summary-tile.charge .tile-value {
    color: var(--fbr-amber-600);
}

.summary-tile.grand-total {
    background: var(--fbr-green-700);
    border-color: var(--fbr-green-700);
}

.summary-tile.grand-total .tile-label {
    color: var(--fbr-green-100);
}

.summary-tile.grand-total .tile-value {
    color: #fff;
    font-size: 1.3rem;
}

/* ---------- Status badges (Invoice History) ---------- */

.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--fbr-radius-pill, 999px);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-badge.status-success {
    background: var(--fbr-green-100);
    color: var(--fbr-green-700);
}

.status-badge.status-failed {
    background: #fdecea;
    color: #a4342a;
}

.status-badge.status-pending {
    background: #eceff1;
    color: #5b6b63;
}

/* ---------- Saved customer / product pickers (Create Invoice) ----------
   A select plus its action button on one line, so "choose, then apply" reads
   as a single control rather than two unrelated widgets. */

.picker-row {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.picker-field {
    flex: 1 1 auto;
    margin-bottom: 0;
    min-width: 0;
}

.picker-button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.6rem 1rem;
}

@media (max-width: 560px) {
    .picker-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------- Filter bar (Invoice History) ---------- */

.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.filter-bar .form-field {
    margin-bottom: 0;
    min-width: 9rem;
}

.filter-bar .button-secondary,
.filter-bar .form-button {
    padding: 0.6rem 1.25rem;
    /* Anchors and buttons sit side by side here; without this the <a> renders
       at text height and the row's baselines don't line up. */
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.filter-summary {
    margin: 0.85rem 0 0;
}

/* ---------- Dashboard navigation tiles ---------- */

.nav-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.nav-tile {
    display: block;
    background: var(--fbr-surface);
    border: 1px solid #e0e6e2;
    border-left: 3px solid var(--fbr-green-600);
    border-radius: var(--fbr-radius-md);
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nav-tile:hover {
    background: var(--fbr-green-100);
    border-left-color: var(--fbr-gold-500);
}

.nav-tile-title {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--fbr-green-900);
    margin-bottom: 0.15rem;
}

.nav-tile-desc {
    display: block;
    font-size: 0.8rem;
    color: #6b7a72;
}

/* ---------- Digital Invoicing Rules ---------- */

.rules-list {
    margin: 0.5rem 0 1rem;
    padding-left: 1.15rem;
    font-size: 0.9rem;
    line-height: 1.55;
}

.rules-list code {
    background: var(--fbr-surface);
    border: 1px solid #dde5e0;
    border-radius: var(--fbr-radius-sm);
    padding: 0 0.25rem;
    font-size: 0.85em;
}

/* ---------- Printable invoice receipt ----------
   Portal ships no JavaScript, so there is no Print button calling
   window.print() the way the main app's receipt does - the user reaches for
   their browser's own print command, and these rules make sure what comes out
   is the document rather than the app around it. */

.receipt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.receipt-card {
    position: relative;
    overflow: hidden;
}

.receipt-watermark {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: 0.3rem;
    color: rgba(220, 38, 38, 0.25);
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.receipt-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.receipt-fbr-logo {
    height: 3.75rem;
    width: auto;
}

.receipt-head-meta {
    text-align: right;
    font-size: 0.85rem;
}

.receipt-head-meta p {
    margin: 0 0 0.15rem;
}

.receipt-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fbr-green-900);
}

.receipt-parties {
    font-size: 0.85rem;
}

.receipt-parties p {
    margin: 0 0 0.15rem;
}

.receipt-table tfoot td {
    font-weight: 700;
    border-bottom: none;
    padding-top: 0.5rem;
}

.receipt-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.receipt-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* FBR requires the QR code to print at 7x7mm minimum (S.R.O. 69(I)/2025);
   1 inch on screen keeps it comfortably scannable in both media. */
.receipt-qr img {
    width: 1in;
    height: 1in;
}

@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: #fff;
    }

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

    .receipt-card {
        border: none;
        box-shadow: none;
        padding: 0;
    }
}

/* ---------- FBR environment status banner (Dashboard) ---------- */

.status-banner {
    border-radius: var(--fbr-radius-md);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0 1.25rem;
}

.status-banner-title {
    font-weight: 700;
    font-size: 0.85rem;
    display: block;
}

.status-banner-desc {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
}

.status-banner-success {
    background: var(--fbr-green-100);
    color: var(--fbr-green-700);
}

.status-banner-warning {
    background: var(--fbr-amber-100);
    color: var(--fbr-amber-600);
}

.status-banner-info {
    background: #eaf1fb;
    color: #2a5a8c;
}

/* ---------- Empty state (Saved Items, before the first item is added) ---------- */

.empty-state {
    text-align: center;
    color: #5b6b63;
    padding: 2rem 1rem;
}

.empty-state-icon {
    font-size: 2.5rem;
    line-height: 1;
    color: #9db3a8;
    display: block;
    margin-bottom: 0.5rem;
}

.empty-state-title {
    font-weight: 600;
    color: var(--fbr-ink);
    margin: 0 0 0.25rem;
}

.empty-state-desc {
    color: #6b7a72;
    margin: 0;
    font-size: 0.85rem;
}