body { font-family: Arial, sans-serif; margin: 0; background: #f7f7f7; color: #111; }
nav { background: white; padding: 16px 24px; box-shadow: 0 1px 4px #ddd; position: sticky; top: 0; }
nav a { margin-right: 24px; }
main { max-width: 1250px; margin: 24px auto; padding: 0 18px; }
.card { background: white; border: 1px solid #ddd; border-radius: 10px; padding: 18px; margin-bottom: 18px; box-shadow: 0 1px 3px #ddd; }
.row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
label { display: block; font-weight: bold; }
input { width: 100%; padding: 8px; margin-top: 4px; box-sizing: border-box; }
button { padding: 8px 14px; cursor: pointer; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { border: 1px solid #ddd; padding: 9px; vertical-align: top; }
th { background: #eee; }
.pill { padding: 4px 8px; border-radius: 20px; font-size: 0.9em; }
.ready { background: #d7f7d7; }
.needs_review { background: #fff1c2; }
.duplicate { background: #ffd7d7; }
.warn { color: #8a4d00; background: #fff4d5; padding: 10px; border-radius: 8px; }
.ok { color: #064f1e; background: #ddf8e6; padding: 10px; border-radius: 8px; }
.actions form { display: inline; }
pre { white-space: pre-wrap; max-height: 350px; overflow: auto; background: #f2f2f2; padding: 10px; }
.summary-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.card {
    padding: 12px 18px;
    border-radius: 8px;
    background: #eeeeee;
    font-weight: bold;
}

.ok {
    background: #d8f5d1;
}

.warn {
    background: #fff3bf;
}

.danger {
    background: #ffd6d6;
}

.big-button {
    display: inline-block;
    padding: 10px 16px;
    margin: 5px 8px 10px 0;
    background: #e8e8e8;
    border: 1px solid #999;
    border-radius: 6px;
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.big-button:hover {
    background: #d6eaff;
}

.status-ready {
    background: #e6ffe6;
}

.status-needs_review {
    background: #fff8d6;
}

.status-duplicate {
    background: #ffe1e1;
}

.status-exported {
    background: #eeeeee;
}
nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    padding: 6px 10px;
    border: 1px solid #999;
    background: #f1f1f1;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: white;
    min-width: 190px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 10;
}

.dropdown-content a {
    display: block;
    padding: 10px;
    color: black;
    text-decoration: none;
}

.dropdown-content a:hover {
    background: #eef5ff;
}

.dropdown:hover .dropdown-content {
    display: block;
}
.family-strip {
    display: flex;
    gap: 10px;
    margin: 10px 0 20px 0;
    align-items: center;
}

.family-strip img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.dashboard-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 110px;
}

.dashboard-sidebar img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.dashboard-main {
    flex: 1;
}
.welcome-page {
    display: flex;
    gap: 35px;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.welcome-left,
.welcome-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.welcome-left img,
.welcome-right img {
    width: 260px;
    height: 310px;
    object-fit: contain;
    border-radius: 18px;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.welcome-card {
    max-width: 500px;
    padding: 30px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}

.enter-btn {
    font-size: 18px;
    padding: 12px 24px;
    margin-top: 15px;
}
.welcome-photos {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.welcome-photos img {
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    background: white;
}
.welcome-card {
    max-width: 500px;
    padding: 30px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}

.enter-btn {
    font-size: 18px;
    padding: 12px 24px;
    margin-top: 15px;
}

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

    body {
        background: white;
    }

    main {
        margin: 0;
        padding: 0;
    }

    table {
        font-size: 12px;
    }
}

/* Review screen upgrade */
.review-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.muted {
    color: #555;
    margin-top: 4px;
}

.review-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.badge {
    display: inline-block;
    padding: 7px 11px;
    border-radius: 999px;
    font-weight: bold;
    border: 1px solid #ccc;
    background: #f0f0f0;
}

.confidence-good { background: #d8f5d1; }
.confidence-medium { background: #fff3bf; }
.confidence-low { background: #ffd6d6; }

.validation-panel {
    background: #ffdddd;
    padding: 12px;
    border: 1px solid red;
    margin-bottom: 20px;
    border-radius: 8px;
}

.review-layout {
    display: grid;
    grid-template-columns: minmax(320px, 36%) minmax(700px, 64%);
    gap: 20px;
    align-items: start;
}

.preview-pane,
.edit-pane {
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.preview-pane {
    position: sticky;
    top: 78px;
}

.pane-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.pane-title h2 {
    margin: 0;
}

.invoice-preview {
    width: 100%;
    height: 78vh;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f7f7f7;
}

.invoice-image-preview {
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f7f7f7;
}

.preview-missing {
    padding: 40px;
    text-align: center;
    background: #f3f3f3;
    border-radius: 8px;
    color: #666;
}

.raw-text-box {
    margin-top: 12px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.summary-card {
    background: #f3f3f3;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px;
}

.summary-card span {
    display: block;
    font-size: 0.85em;
    color: #555;
}

.summary-card strong {
    font-size: 1.25em;
}

.total-card {
    background: #e8f3ff;
}

.compact-fields {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 8px 12px;
    align-items: center;
}

.compact-fields label {
    margin: 0;
}

.compact-fields input[readonly],
.gross-input[readonly] {
    background: #f4f4f4;
    color: #333;
}

.ledger-tools {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 10px;
}

.ledger-tools label {
    grid-column: 1 / -1;
}

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

.line-table input {
    min-width: 80px;
}

.line-table td:nth-child(2) input {
    min-width: 240px;
}

.line-table td:nth-child(10) input {
    min-width: 220px;
}

.row-warning {
    background: #fff8d6;
}

.review-actions {
    margin-top: 16px;
}

.primary-action {
    background: #d8f5d1;
    border: 1px solid #76a86c;
    font-weight: bold;
    padding: 10px 16px;
    border-radius: 8px;
}

.danger-action {
    margin-top: 10px;
    background: #ffd6d6;
    border: 1px solid #c77777;
    padding: 8px 14px;
    border-radius: 8px;
}

@media (max-width: 1000px) {
    .review-layout {
        grid-template-columns: 1fr;
    }

    .preview-pane {
        position: static;
    }

    .invoice-preview {
        height: 65vh;
    }
}
/* ===== REVIEW PAGE WIDER LAYOUT ===== */

.review-layout {
    width: 100%;
    grid-template-columns: minmax(300px, 34%) minmax(850px, 66%);
    gap: 18px;
}

.preview-pane {
    max-width: 100%;
}

.edit-pane {
    max-width: 100%;
}

main,
.container,
.page-container,
.content-container {
    max-width: 96% !important;
    width: 96% !important;
}

/* Make preview slightly shorter */
.invoice-preview {
    width: 100%;
    height: 720px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f8f8f8;
}



/* ===== Sage Reconciliation Report ===== */

.reconcile-form-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 180px) minmax(150px, 180px) minmax(280px, 1.4fr);
    gap: 14px;
    align-items: end;
}

.reconcile-form-grid select,
.reconcile-form-grid input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.reconcile-summary .card {
    min-width: 150px;
}

.reconcile-table th,
.reconcile-table td {
    font-size: 0.95em;
}

.muted {
    color: #555;
}

@media print {
    nav,
    form,
    button,
    .no-print {
        display: none !important;
    }

    main {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0;
    }

    table {
        font-size: 11px;
    }
}


/* Supplier statement workflow */
.statement-upload-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 22px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.statement-table-wrap {
    overflow-x: auto;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.statement-table input,
.statement-table textarea,
.statement-table select {
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
}

.statement-table textarea {
    min-width: 220px;
    min-height: 42px;
}

.statement-row-missing_in_app,
.statement-row-total_mismatch,
.statement-row-duplicate_on_statement,
.statement-row-duplicate_in_app {
    background: #ffdede;
}

.statement-row-missing_on_statement {
    background: #fff2c9;
}

.statement-row-matched {
    background: #e4f8e4;
}

.statement-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.statement-header-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.status-verified {
    background: #d8f5d1;
}

.status-archived {
    background: #eeeeee;
}

.status-csv_generated { background:#e8f1ff; }
.status-corrected_needs_export { background:#fff3bf; }

/* =========================================================
   ASTRU INVOICE — PREMIUM APPLICATION DESIGN SYSTEM
   ========================================================= */

:root {
    --astru-navy: #071f2b;
    --astru-navy-soft: #0d2c39;
    --astru-green: #123f35;
    --astru-green-light: #315f50;
    --astru-sage: #728a78;
    --astru-sage-pale: #e9efe7;
    --astru-cream: #fbfaf6;
    --astru-stone: #f2f0e9;
    --astru-gold: #c49b57;
    --astru-gold-light: #ead6a5;
    --astru-ink: #10212b;
    --astru-muted: #687078;
    --astru-border: #d9ddd7;
    --astru-danger: #a5443f;
    --astru-shadow: 0 12px 32px rgba(16, 33, 43, 0.08);
    --header-height: 88px;
    --sidebar-width: 164px;
}

* {
    box-sizing: border-box;
}

body.astru-app {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 80% 10%, rgba(196,155,87,.08), transparent 28%),
        var(--astru-cream);
    color: var(--astru-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif;
}

.app-header {
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 34px;
    color: white;
    background:
        linear-gradient(105deg, #061d28 0%, #082633 65%, #061c27 100%);
    box-shadow: 0 7px 24px rgba(2, 20, 28, .18);
}

.astru-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
    color: white;
    text-decoration: none;
}

.astru-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 56px;
    color: var(--astru-gold-light);
    font-family: Georgia, serif;
    font-size: 44px;
    line-height: 1;
}

.astru-brand-text {
    display: flex;
    flex-direction: column;
    letter-spacing: .22em;
}

.astru-brand-text strong {
    font-size: 22px;
    line-height: 1;
}

.astru-brand-text small {
    margin-top: 7px;
    color: var(--astru-gold-light);
    font-size: 11px;
    letter-spacing: .42em;
}

.workspace-name {
    min-width: 230px;
    padding-left: 26px;
    border-left: 1px solid rgba(255,255,255,.14);
}

.workspace-name strong,
.workspace-name span {
    display: block;
}

.workspace-name strong {
    font-size: 16px;
}

.workspace-name span {
    margin-top: 5px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown > button {
    border: 0;
    padding: 13px 16px;
    color: rgba(255,255,255,.92);
    background: transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 650;
}

.nav-dropdown > button:hover {
    background: rgba(255,255,255,.08);
}

.nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    min-width: 250px;
    padding: 8px;
    background: white;
    border: 1px solid var(--astru-border);
    border-radius: 12px;
    box-shadow: var(--astru-shadow);
}

.nav-menu-wide {
    min-width: 290px;
}

.nav-dropdown:hover .nav-menu {
    display: block;
}

.nav-menu a {
    display: block;
    padding: 10px 12px;
    color: var(--astru-ink);
    text-decoration: none;
    border-radius: 7px;
    font-size: 14px;
}

.nav-menu a:hover {
    background: var(--astru-sage-pale);
}

.header-help {
    color: white;
    text-decoration: none;
    font-weight: 650;
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: calc(100vh - var(--header-height));
}

.app-sidebar {
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 22px 12px;
    background:
        linear-gradient(180deg, #123f35 0%, #0a332d 100%);
    box-shadow: 5px 0 18px rgba(10, 45, 39, .08);
}

.sidebar-link {
    min-height: 77px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.88);
    text-decoration: none;
    border-radius: 11px;
    border-left: 3px solid transparent;
    font-size: 13px;
    font-weight: 650;
}

.sidebar-link:hover {
    background: rgba(255,255,255,.07);
}

.sidebar-link.active {
    color: #f3d69a;
    background: rgba(255,255,255,.1);
    border-left-color: var(--astru-gold-light);
}

.sidebar-icon {
    font-size: 25px;
    line-height: 1;
}

.sidebar-footer {
    margin-top: auto;
    padding: 20px 7px 7px;
    color: rgba(255,255,255,.82);
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.17);
}

.sidebar-footer strong,
.sidebar-footer small {
    display: block;
}

.sidebar-footer strong {
    margin-top: 8px;
    font-size: 12px;
}

.sidebar-footer small {
    margin-top: 5px;
    color: rgba(255,255,255,.58);
    font-size: 10px;
    line-height: 1.4;
}

.sidebar-shield {
    font-size: 25px;
    color: var(--astru-gold-light);
}

.app-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 42px 48px;
}

.upload-page {
    max-width: 1260px;
    margin: 0 auto;
}

.page-eyebrow {
    margin-bottom: 8px;
    color: var(--astru-gold);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
}

.display-title {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 5vw, 58px);
    font-weight: 600;
    letter-spacing: -.025em;
}

.page-intro {
    margin: 12px 0 22px;
    color: var(--astru-muted);
    font-size: 19px;
}

.system-status {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-radius: 11px;
    font-size: 14px;
}

.system-status.success {
    color: #24543e;
    background: #e4eee0;
    border: 1px solid #d3e2ce;
}

.system-status.warning {
    color: #805314;
    background: #fbefd3;
    border: 1px solid #ead7a9;
}

.status-symbol {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: white;
    background: #2d754b;
    border-radius: 50%;
    font-weight: 900;
}

.workflow-steps {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 28px 0 22px;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--astru-muted);
}

.workflow-step span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: #edf0ef;
    border: 1px solid #dde1df;
    border-radius: 50%;
    font-family: Georgia, serif;
    font-size: 20px;
}

.workflow-step.active {
    color: var(--astru-ink);
}

.workflow-step.active span {
    color: white;
    background: var(--astru-green);
    border-color: var(--astru-green);
}

.workflow-arrow {
    color: #8b918e;
    font-size: 27px;
}

.upload-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 22px;
}

.premium-panel {
    background: rgba(255,255,255,.9);
    border: 1px solid var(--astru-border);
    border-radius: 16px;
    box-shadow: var(--astru-shadow);
}

.upload-panel {
    padding: 25px;
}

.drop-zone {
    min-height: 385px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 35px;
    text-align: center;
    border: 2px dashed #ccd2cd;
    border-radius: 14px;
    cursor: pointer;
    transition: .18s ease;
}

.drop-zone:hover,
.drop-zone.dragging {
    border-color: var(--astru-sage);
    background: #f6f8f3;
    transform: translateY(-1px);
}

.upload-cloud {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin-bottom: 18px;
    color: var(--astru-green);
    background: var(--astru-sage-pale);
    border-radius: 50%;
    font-size: 53px;
}

.drop-zone > strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 600;
}

.drop-description {
    margin-top: 8px;
    color: var(--astru-muted);
    font-size: 17px;
}

.drop-divider {
    width: min(460px, 82%);
    display: flex;
    align-items: center;
    gap: 17px;
    margin: 24px 0;
    color: var(--astru-muted);
}

.drop-divider i {
    flex: 1;
    height: 1px;
    background: #d5d9d5;
}

.drop-divider em {
    font-style: normal;
}

.choose-files-button {
    min-width: 250px;
    padding: 15px 24px;
    color: white;
    background: linear-gradient(135deg, #174b3f, #0d392f);
    border-radius: 8px;
    font-size: 17px;
    font-weight: 750;
    box-shadow: 0 7px 18px rgba(18,63,53,.18);
}

.upload-limit {
    margin-top: 14px;
    color: var(--astru-muted);
    font-size: 13px;
}

.selected-files {
    margin-top: 15px;
    padding: 13px 16px;
    background: var(--astru-sage-pale);
    border-radius: 9px;
}

.selected-files strong,
.selected-files span {
    display: block;
}

.selected-files span {
    margin-top: 4px;
    color: var(--astru-muted);
    font-size: 13px;
    word-break: break-word;
}

.primary-action {
    border: 0;
    padding: 14px 23px;
    color: white;
    background: var(--astru-green);
    border-radius: 8px;
    font-weight: 750;
    cursor: pointer;
}

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

.upload-submit {
    width: 100%;
    margin-top: 14px;
}

.how-it-works {
    padding: 27px 25px;
}

.how-it-works h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
}

.gold-rule {
    width: 56px;
    height: 2px;
    margin: 15px 0 24px;
    background: var(--astru-gold);
}

.how-item {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 23px;
}

.how-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--astru-green);
    background: var(--astru-sage-pale);
    border-radius: 50%;
    font-size: 24px;
}

.how-item strong {
    font-size: 15px;
}

.how-item p {
    margin: 5px 0 0;
    color: var(--astru-muted);
    font-size: 13px;
    line-height: 1.45;
}

.trust-banner {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 22px;
    padding: 17px 20px;
    background: linear-gradient(90deg, #f0f3eb, #f8f7f0);
    border: 1px solid var(--astru-border);
    border-radius: 13px;
}

.trust-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    color: var(--astru-green);
    background: #e2eadf;
    border-radius: 50%;
    font-size: 24px;
}

.trust-banner p {
    margin: 4px 0 0;
    color: var(--astru-muted);
    font-size: 13px;
}

.trust-banner a {
    margin-left: auto;
    color: var(--astru-green);
    text-decoration: none;
    font-weight: 700;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    padding: 19px 5px 0;
    color: #7b817e;
    font-size: 12px;
}

@media (max-width: 1050px) {
    .workspace-name {
        display: none;
    }

    .upload-grid {
        grid-template-columns: 1fr;
    }

    .how-it-works {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 16px;
    }

    .how-it-works h2,
    .how-it-works .gold-rule {
        grid-column: 1 / -1;
    }
}

@media (max-width: 800px) {
    :root {
        --header-height: auto;
    }

    .app-header {
        position: relative;
        height: auto;
        flex-wrap: wrap;
        padding: 17px 20px;
    }

    .header-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .header-help {
        margin-left: auto;
    }

    .app-shell {
        display: block;
    }

    .app-sidebar {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
    }

    .sidebar-link {
        min-width: 92px;
        min-height: 67px;
    }

    .sidebar-footer {
        display: none;
    }

    .app-content {
        padding: 28px 18px;
    }

    .workflow-steps {
        gap: 8px;
        overflow-x: auto;
    }

    .workflow-step strong {
        display: none;
    }

    .workflow-arrow {
        font-size: 21px;
    }

    .product-footer {
        flex-direction: column;
        gap: 7px;
    }
}

@media (max-width: 540px) {
    .astru-brand {
        min-width: auto;
    }

    .astru-brand-text small {
        display: none;
    }

    .display-title {
        font-size: 38px;
    }

    .drop-zone {
        min-height: 330px;
        padding: 24px 15px;
    }

    .choose-files-button {
        min-width: 210px;
    }

    .how-it-works {
        display: block;
    }

    .trust-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .trust-banner a {
        width: 100%;
        margin-left: 60px;
    }
}

@media print {
    .app-header,
    .app-sidebar {
        display: none !important;
    }

    .app-shell {
        display: block;
    }

    .app-content {
        padding: 0;
    }
}

/* =========================================================
   ASTRU BLUE PRODUCT THEME
   ========================================================= */

:root {
    --astru-navy: #061c35;
    --astru-navy-soft: #0a2d55;
    --astru-blue: #1677f2;
    --astru-blue-dark: #0759cb;
    --astru-sky: #78b7ff;
    --astru-blue-pale: #eaf3ff;
    --astru-background: #f4f8fd;
    --astru-panel: #ffffff;
    --astru-ink: #10233b;
    --astru-muted: #667892;
    --astru-border: #dce6f1;
    --astru-success: #23855a;
    --astru-warning: #b97818;
    --astru-danger: #b94b52;
    --astru-shadow: 0 14px 34px rgba(6, 28, 53, 0.09);
}

body.astru-app {
    background:
        radial-gradient(circle at 86% 3%, rgba(22,119,242,.10), transparent 27%),
        var(--astru-background);
    color: var(--astru-ink);
}

.app-header {
    background:
        radial-gradient(circle at 72% 0%, rgba(22,119,242,.28), transparent 32%),
        linear-gradient(110deg, #04172b 0%, #07294e 65%, #061c35 100%);
}

.astru-mark {
    color: white;
    background: linear-gradient(145deg, #73b7ff, #0f6ff2);
    -webkit-background-clip: text;
    background-clip: text;
}

.astru-brand-text small {
    color: var(--astru-sky);
}

.app-sidebar {
    background:
        radial-gradient(circle at 20% 5%, rgba(51,139,255,.26), transparent 35%),
        linear-gradient(180deg, #082c52 0%, #061c35 100%);
}

.sidebar-link.active {
    color: white;
    border-left-color: var(--astru-sky);
    background: rgba(63,145,255,.18);
}

.sidebar-shield {
    color: var(--astru-sky);
}

.page-eyebrow {
    color: var(--astru-blue);
}

.system-status.success {
    color: #17623f;
    background: #e8f5ed;
    border-color: #cce8d7;
}

.workflow-step.active span,
.primary-action {
    background: linear-gradient(135deg, var(--astru-blue), var(--astru-blue-dark));
    border-color: var(--astru-blue);
}

.upload-cloud,
.how-icon,
.trust-icon {
    color: var(--astru-blue);
    background: var(--astru-blue-pale);
}

.choose-files-button {
    background: linear-gradient(135deg, #1677f2, #0759cb);
    box-shadow: 0 10px 24px rgba(22,119,242,.23);
}

.drop-zone:hover,
.drop-zone.dragging {
    border-color: var(--astru-blue);
    background: #f5f9ff;
}

.gold-rule {
    background: var(--astru-blue);
}

.trust-banner {
    background: linear-gradient(90deg, #edf5ff, #f8fbff);
}

.trust-banner a {
    color: var(--astru-blue);
}

/* Dashboard */

.dashboard-page {
    max-width: 1450px;
    margin: 0 auto;
}

.dashboard-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 26px;
}

.dashboard-heading h1 {
    margin: 0;
    color: var(--astru-ink);
    font-size: clamp(32px, 4vw, 46px);
    letter-spacing: -.035em;
}

.dashboard-heading p {
    margin: 8px 0 0;
    color: var(--astru-muted);
    font-size: 16px;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 25px;
}

.dashboard-stat {
    min-height: 154px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 22px;
    background: var(--astru-panel);
    border: 1px solid var(--astru-border);
    border-radius: 17px;
    box-shadow: var(--astru-shadow);
    position: relative;
    overflow: hidden;
}

.dashboard-stat::after {
    content: "";
    position: absolute;
    right: -38px;
    top: -45px;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: rgba(22,119,242,.06);
}

.stat-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--astru-blue);
    background: var(--astru-blue-pale);
    font-size: 23px;
    font-weight: 800;
}

.stat-label,
.stat-value,
.dashboard-stat small {
    display: block;
}

.stat-label {
    color: var(--astru-muted);
    font-size: 13px;
    font-weight: 700;
}

.stat-value {
    margin: 5px 0 2px;
    color: #164d85;
    font-size: 38px;
    line-height: 1;
}

.dashboard-stat small {
    color: #8795a8;
    font-size: 11px;
    line-height: 1.35;
}

.invoice-workspace-panel {
    background: var(--astru-panel);
    border: 1px solid var(--astru-border);
    border-radius: 18px;
    box-shadow: var(--astru-shadow);
    overflow: hidden;
}

.workspace-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    padding: 21px 23px;
    border-bottom: 1px solid var(--astru-border);
}

.workspace-toolbar h2 {
    margin: 0;
    color: var(--astru-ink);
    font-size: 20px;
}

.workspace-toolbar p {
    margin: 5px 0 0;
    color: var(--astru-muted);
    font-size: 13px;
}

.toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    color: white;
    background: linear-gradient(135deg, var(--astru-blue), var(--astru-blue-dark));
    box-shadow: 0 7px 18px rgba(22,119,242,.20);
}

.button-secondary {
    color: #17416d;
    background: white;
    border-color: #bed1e5;
}

.button-secondary:hover {
    background: #f2f7fd;
}

.button-danger {
    color: var(--astru-danger);
    background: #fff;
    border-color: #e9c7ca;
}

.button-danger:hover {
    background: #fff5f5;
}

.premium-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.premium-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
}

.premium-table th,
.premium-table td {
    border: 0;
    border-bottom: 1px solid #e7eef5;
    padding: 15px 14px;
    vertical-align: middle;
}

.premium-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #60748c;
    background: #f5f8fc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em;
    text-align: left;
    text-transform: uppercase;
}

.premium-table tbody tr {
    transition: background .14s ease;
}

.premium-table tbody tr:hover {
    background: #f7faff;
}

.premium-table tbody tr:last-child td {
    border-bottom: 0;
}

.checkbox-column {
    width: 72px;
    text-align: center !important;
}

.money-column {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.file-cell {
    max-width: 250px;
    color: #4e6178;
    font-size: 12px;
    word-break: break-word;
}

.muted-cell {
    color: var(--astru-muted);
    font-size: 12px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #53677e;
    background: #edf2f7;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-ready {
    color: #17623f;
    background: #dff3e7;
}

.status-review {
    color: #8a5510;
    background: #fff0d2;
}

.status-duplicate {
    color: #963f47;
    background: #fbe2e4;
}

.status-sage {
    color: #17599e;
    background: #dfeeff;
}

.status-csv {
    color: #5a4698;
    background: #eee8ff;
}

.confidence-value {
    color: #53677e;
    font-weight: 750;
}

.review-link {
    display: inline-flex;
    padding: 7px 11px;
    color: var(--astru-blue);
    background: var(--astru-blue-pale);
    border-radius: 7px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.review-link:hover {
    color: white;
    background: var(--astru-blue);
}

.dashboard-empty-state {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 42px;
    text-align: center;
}

.empty-state-icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(135deg, #58a1ff, #126ae0);
    border-radius: 50%;
    font-size: 30px;
    box-shadow: 0 12px 30px rgba(22,119,242,.20);
}

.dashboard-empty-state h2 {
    margin: 20px 0 7px;
}

.dashboard-empty-state p {
    margin: 0 0 20px;
    color: var(--astru-muted);
}

@media (max-width: 1200px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .toolbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 650px) {
    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-stat {
        min-height: 125px;
    }

    .toolbar-actions {
        width: 100%;
    }

    .toolbar-actions .button {
        width: 100%;
    }
}