/* KalpOCR module workspace ------------------------------------------------------
   Shared presentation for every PDF and image reader. Business logic remains in
   the existing templates/routes; this file only normalizes hierarchy and layout. */

:root {
    --module-surface: #ffffff;
    --module-soft: #f6f9fd;
    --module-soft-blue: #eef6ff;
    --module-border: #dbe6f2;
    --module-border-strong: #c6d7ea;
    --module-title: #102441;
    --module-copy: #657991;
    --module-blue: #0969db;
    --module-cyan: #08a2df;
    --module-green: #0b9166;
    --module-shadow: 0 8px 28px rgba(6, 42, 91, .07);
}

/* Keep short reader screens at full viewport height so the shared footer
   sits on the bottom edge; long result screens continue to grow and scroll. */
body.kalp-app:has(.kalp-sidebar) {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
}

/* The fixed top header already identifies the page. Keep only a focus target and
   remove the second repeated page-title strip. */
body:has(.kalp-sidebar) .kalp-content-anchor {
    height: 0;
    overflow: hidden;
}

body:has(.kalp-sidebar) .kalp-module-context { display: none; }

/* Compact tool introduction ---------------------------------------------------- */
body:has(.kalp-sidebar) > .hero {
    position: relative;
    width: calc(100% - (var(--kalp-app-gutter) * 2));
    max-width: 1540px;
    min-height: 126px;
    margin: 20px auto 0 !important;
    padding: 20px 0 !important;
    overflow: hidden;
    color: var(--module-title) !important;
    border: 1px solid var(--module-border) !important;
    border-radius: 17px !important;
    background:
        radial-gradient(circle at 90% 10%, rgba(17, 142, 230, .11), transparent 22rem),
        linear-gradient(115deg, #ffffff, #f7fbff 64%, #eef8ff) !important;
    box-shadow: var(--module-shadow) !important;
}

body:has(.kalp-sidebar) > .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: radial-gradient(rgba(9, 105, 219, .16) 1px, transparent 1px);
    background-size: 17px 17px;
    mask-image: linear-gradient(90deg, transparent 58%, #000 100%);
    pointer-events: none;
}

body:has(.kalp-sidebar) > .hero > .container,
body:has(.kalp-sidebar) > .hero > .container-fluid {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    padding-inline: clamp(20px, 2.6vw, 36px) !important;
}

body:has(.kalp-sidebar) > .hero .module-nav,
body:has(.kalp-sidebar) > .hero .mini-badge,
body:has(.kalp-sidebar) > .hero .col-lg-8 > .pill { display: none !important; }

body:has(.kalp-sidebar) > .hero h1,
body:has(.kalp-sidebar) > .hero .display-5,
body:has(.kalp-sidebar) > .hero .display-6 {
    max-width: 850px;
    margin: 0 0 8px !important;
    color: var(--module-title) !important;
    font-size: clamp(1.15rem, 1.75vw, 1.48rem) !important;
    font-weight: 850 !important;
    letter-spacing: -.032em;
    line-height: 1.24;
}

body:has(.kalp-sidebar) > .hero p,
body:has(.kalp-sidebar) > .hero .text-white-50 {
    max-width: 880px;
    margin: 0 !important;
    color: var(--module-copy) !important;
    font-size: .76rem !important;
    line-height: 1.55;
    opacity: 1 !important;
}

body:has(.kalp-sidebar) > .hero .col-lg-4 .glass-card,
body:has(.kalp-sidebar) > .hero .col-lg-4 .panel,
body:has(.kalp-sidebar) > .hero .col-lg-4 .section-card {
    min-height: 86px;
    padding: 13px 14px !important;
    color: #31506f !important;
    border: 1px solid #d7e7f6 !important;
    border-radius: 13px !important;
    background: rgba(239, 247, 255, .88) !important;
    box-shadow: none !important;
    backdrop-filter: blur(7px);
}

body:has(.kalp-sidebar) > .hero .col-lg-4 .fw-bold.fs-5,
body:has(.kalp-sidebar) > .hero .col-lg-4 > .panel > .fw-bold {
    margin-bottom: 9px !important;
    color: #173b64;
    font-size: .72rem !important;
    font-weight: 850 !important;
    letter-spacing: .045em;
    text-transform: uppercase;
}

body:has(.kalp-sidebar) > .hero .col-lg-4 .row { --bs-gutter-x: 7px; --bs-gutter-y: 7px; }
body:has(.kalp-sidebar) > .hero .col-lg-4 .row > div > div,
body:has(.kalp-sidebar) > .hero .col-lg-4 .row > div {
    color: #456684;
    font-size: .65rem;
}

body:has(.kalp-sidebar) > .hero .col-lg-4 .row > div > .border {
    min-height: 38px;
    padding: 8px 5px !important;
    display: grid;
    place-items: center;
    border-color: #cbdced !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .72);
}

/* Main tool canvas -------------------------------------------------------------- */
body:has(.kalp-sidebar) .upload-wrap,
body:has(.kalp-sidebar) main.upload-wrap {
    width: calc(100% - (var(--kalp-app-gutter) * 2)) !important;
    max-width: 1540px !important;
    margin: 0 auto !important;
    padding: 18px 0 44px !important;
}

body:has(.kalp-sidebar) main.page-shell {
    width: calc(100% - (var(--kalp-app-gutter) * 2)) !important;
    max-width: 1540px !important;
    margin: 0 auto !important;
    padding: 20px 0 44px !important;
}

/* Invoice reader had its own second header. The application header now owns it. */
body:has(.kalp-sidebar) main.page-shell > .topbar { display: none !important; }

body:has(.kalp-sidebar) .glass-card,
body:has(.kalp-sidebar) .panel,
body:has(.kalp-sidebar) .section-box,
body:has(.kalp-sidebar) .analysis-card,
body:has(.kalp-sidebar) .status-strip {
    color: #263c56;
    border: 1px solid var(--module-border) !important;
    border-radius: 16px !important;
    background: var(--module-surface) !important;
    box-shadow: var(--module-shadow) !important;
    backdrop-filter: none !important;
}

body:has(.kalp-sidebar) .section-card:not(details),
body:has(.kalp-sidebar) .panel.p-4,
body:has(.kalp-sidebar) .panel.p-3,
body:has(.kalp-sidebar) .data-card,
body:has(.kalp-sidebar) .recent-panel,
body:has(.kalp-sidebar) .upload-panel {
    padding: clamp(17px, 2vw, 24px) !important;
}

body:has(.kalp-sidebar) .section-head,
body:has(.kalp-sidebar) .table-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}

body:has(.kalp-sidebar) .section-head h2,
body:has(.kalp-sidebar) .section-head h3,
body:has(.kalp-sidebar) .section-head h4,
body:has(.kalp-sidebar) .section-head h5,
body:has(.kalp-sidebar) .section-heading,
body:has(.kalp-sidebar) .table-title,
body:has(.kalp-sidebar) .h4.fw-bold,
body:has(.kalp-sidebar) .h5.fw-bold {
    color: var(--module-title) !important;
    font-size: .94rem !important;
    font-weight: 850 !important;
    letter-spacing: -.02em;
}

body:has(.kalp-sidebar) .section-head .text-muted,
body:has(.kalp-sidebar) .section-head .text-secondary,
body:has(.kalp-sidebar) .subcopy,
body:has(.kalp-sidebar) .format-meta {
    color: var(--module-copy) !important;
    font-size: .69rem !important;
    line-height: 1.5;
}

/* Upload control is the primary task. */
body:has(.kalp-sidebar) .drop-zone,
body:has(.kalp-sidebar) .upload-control,
body:has(.kalp-sidebar) .upload-panel {
    position: relative;
    border: 1.5px dashed #9fc8ee !important;
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(251, 254, 255, .98), rgba(241, 247, 255, .96)) !important;
    box-shadow: none !important;
}

body:has(.kalp-sidebar) .drop-zone { padding: clamp(17px, 2vw, 23px) !important; }
body:has(.kalp-sidebar) .upload-control { max-width: 620px; padding: 18px !important; }
body:has(.kalp-sidebar) .upload-panel { padding: clamp(28px, 4vw, 48px) !important; text-align: center; }

body:has(.kalp-sidebar) .drop-zone:hover,
body:has(.kalp-sidebar) .upload-control:hover { border-color: #5ba8eb !important; }

body:has(.kalp-sidebar) .form-label {
    margin-bottom: 7px;
    color: #294663;
    font-size: .7rem;
    font-weight: 800 !important;
}

body:has(.kalp-sidebar) .form-control,
body:has(.kalp-sidebar) .form-select {
    min-height: 44px;
    border: 1px solid #cad9e8;
    border-radius: 10px !important;
    color: #263d58;
    background-color: #fff;
    font-size: .76rem;
    box-shadow: none;
}

body:has(.kalp-sidebar) .form-control:focus,
body:has(.kalp-sidebar) .form-select:focus {
    border-color: #6daee9;
    box-shadow: 0 0 0 3px rgba(9, 105, 219, .1);
}

body:has(.kalp-sidebar) input[type="file"]::file-selector-button {
    min-height: 42px;
    margin: -1px 12px -1px -1px;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid #d3dfeb;
    color: #18599e;
    background: #edf6ff;
    font-size: .7rem;
    font-weight: 800;
}

body:has(.kalp-sidebar) .btn-lg,
body:has(.kalp-sidebar) .primary-button,
body:has(.kalp-sidebar) .download-button {
    min-height: 43px;
    padding: 9px 16px !important;
    border-radius: 10px !important;
    font-size: .73rem !important;
    font-weight: 800 !important;
}

body:has(.kalp-sidebar) .btn-success,
body:has(.kalp-sidebar) .btn-info,
body:has(.kalp-sidebar) .primary-button {
    border-color: var(--module-blue) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--module-blue), #087fe8) !important;
    box-shadow: 0 8px 18px rgba(9, 105, 219, .17);
}

body:has(.kalp-sidebar) .mini-badge,
body:has(.kalp-sidebar) .pill,
body:has(.kalp-sidebar) .status-pill,
body:has(.kalp-sidebar) .result-pill,
body:has(.kalp-sidebar) .format-chip,
body:has(.kalp-sidebar) .page-pill {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px !important;
    border: 1px solid #cfe4f7 !important;
    border-radius: 999px !important;
    color: #1767ad !important;
    background: #edf7ff !important;
    font-size: .61rem !important;
    font-weight: 800 !important;
}

/* Results and data review ------------------------------------------------------- */
body:has(.kalp-sidebar) .kv,
body:has(.kalp-sidebar) .stat-card,
body:has(.kalp-sidebar) .summary-card,
body:has(.kalp-sidebar) .metric-card,
body:has(.kalp-sidebar) .seal-card {
    min-height: 78px;
    padding: 13px !important;
    border: 1px solid var(--module-border) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #fff, #f8fbff) !important;
    box-shadow: none !important;
}

body:has(.kalp-sidebar) .kv .label,
body:has(.kalp-sidebar) .stat-label,
body:has(.kalp-sidebar) .summary-label,
body:has(.kalp-sidebar) .label {
    margin-bottom: 6px;
    color: #6c7f96 !important;
    font-size: .61rem !important;
    font-weight: 850 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase;
}

body:has(.kalp-sidebar) .kv .value,
body:has(.kalp-sidebar) .stat-value,
body:has(.kalp-sidebar) .summary-value,
body:has(.kalp-sidebar) .value {
    color: #173452 !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    line-height: 1.42;
}

body:has(.kalp-sidebar) .key-grid,
body:has(.kalp-sidebar) .grid {
    gap: 10px !important;
}

body:has(.kalp-sidebar) .table-panel,
body:has(.kalp-sidebar) .table-wrap,
body:has(.kalp-sidebar) .table-scroll {
    overflow: hidden;
    border-color: var(--module-border) !important;
    border-radius: 14px !important;
}

body:has(.kalp-sidebar) .table-scroll,
body:has(.kalp-sidebar) .table-responsive { overflow-x: auto; }

body:has(.kalp-sidebar) .table th {
    padding: 11px 12px !important;
    color: #5d7189 !important;
    background: #f3f7fc !important;
    font-size: .61rem !important;
    font-weight: 850 !important;
    letter-spacing: .055em;
    white-space: nowrap;
}

body:has(.kalp-sidebar) .table td {
    padding: 11px 12px !important;
    color: #2b425d;
    font-size: .69rem !important;
    line-height: 1.45;
}

body:has(.kalp-sidebar) details {
    border-color: var(--module-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
}

body:has(.kalp-sidebar) details summary { padding: 13px 15px !important; color: #294765; font-size: .74rem !important; }
body:has(.kalp-sidebar) .section-content { padding: 15px !important; border-top-color: var(--module-border) !important; }

body:has(.kalp-sidebar) .raw,
body:has(.kalp-sidebar) .raw-text,
body:has(.kalp-sidebar) .text-box {
    border: 1px solid #173c68 !important;
    border-radius: 12px !important;
    color: #d9e9fb !important;
    background: #071e3e !important;
    font-size: .68rem !important;
    line-height: 1.55;
}

body:has(.kalp-sidebar) .recent-item,
body:has(.kalp-sidebar) .recent-link,
body:has(.kalp-sidebar) .list-group-item {
    border-color: #e0e9f3 !important;
    color: #29445f !important;
    background: #fbfdff !important;
    font-size: .7rem;
}

body:has(.kalp-sidebar) .recent-item { padding: 11px 12px; border-radius: 10px !important; }
body:has(.kalp-sidebar) .alert { padding: 11px 14px; border: 1px solid rgba(12, 111, 82, .14) !important; border-radius: 11px !important; font-size: .72rem; box-shadow: none !important; }

/* Blank states stay useful without consuming the whole viewport. */
body:has(.kalp-sidebar) .upload-panel .upload-icon { width: 54px; height: 54px; margin-bottom: 12px; border-radius: 15px; font-size: 1.25rem; }
body:has(.kalp-sidebar) .upload-panel h2 { margin-bottom: 6px; color: var(--module-title); font-size: 1.08rem; }
body:has(.kalp-sidebar) .upload-panel > p { max-width: 680px; margin-inline: auto; font-size: .72rem; }

/* Preview panes should remain prominent and never overflow mobile screens. */
body:has(.kalp-sidebar) .preview-shell,
body:has(.kalp-sidebar) .page-image,
body:has(.kalp-sidebar) .source-image {
    max-width: 100%;
    border-color: var(--module-border) !important;
    border-radius: 12px !important;
    background: #f7faff;
}

body:has(.kalp-sidebar) .left-rail { position: static !important; top: auto !important; }

/* Footer belongs to the content area and stays visually secondary. */
body:has(.kalp-sidebar) .kalp-site-footer {
    width: 100%;
    margin-top: auto !important;
    padding: 20px 0;
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    body:has(.kalp-sidebar) > .hero { min-height: 0; }
    body:has(.kalp-sidebar) > .hero .row { --bs-gutter-y: 12px; }
    body:has(.kalp-sidebar) > .hero .col-lg-4 .glass-card,
    body:has(.kalp-sidebar) > .hero .col-lg-4 .panel,
    body:has(.kalp-sidebar) > .hero .col-lg-4 .section-card { min-height: 0; }
    body:has(.kalp-sidebar) .left-rail { display: grid; gap: 14px; }
}

@media (max-width: 767.98px) {
    body:has(.kalp-sidebar) > .hero {
        width: calc(100% - 24px);
        margin-top: 12px !important;
        padding: 17px 0 !important;
        border-radius: 14px !important;
    }
    body:has(.kalp-sidebar) > .hero > .container,
    body:has(.kalp-sidebar) > .hero > .container-fluid { padding-inline: 17px !important; }
    body:has(.kalp-sidebar) > .hero h1,
    body:has(.kalp-sidebar) > .hero .display-5,
    body:has(.kalp-sidebar) > .hero .display-6 { font-size: 1.05rem !important; line-height: 1.32; }
    body:has(.kalp-sidebar) > .hero p,
    body:has(.kalp-sidebar) > .hero .text-white-50 { font-size: .69rem !important; }
    body:has(.kalp-sidebar) > .hero .col-lg-4 { display: none; }
    body:has(.kalp-sidebar) .upload-wrap,
    body:has(.kalp-sidebar) main.upload-wrap,
    body:has(.kalp-sidebar) main.page-shell { width: calc(100% - 24px) !important; padding-top: 12px !important; }
    body:has(.kalp-sidebar) .section-card,
    body:has(.kalp-sidebar) .panel.p-4,
    body:has(.kalp-sidebar) .panel.p-3,
    body:has(.kalp-sidebar) .data-card,
    body:has(.kalp-sidebar) .recent-panel,
    body:has(.kalp-sidebar) .upload-panel { padding: 15px !important; }
    body:has(.kalp-sidebar) .section-head,
    body:has(.kalp-sidebar) .table-head { align-items: stretch; flex-direction: column; }
    body:has(.kalp-sidebar) .input-group { align-items: stretch; flex-direction: column; gap: 9px; }
    body:has(.kalp-sidebar) .input-group > .form-control,
    body:has(.kalp-sidebar) .input-group > .btn { width: 100%; border-radius: 10px !important; }
    body:has(.kalp-sidebar) .drop-zone .btn-lg,
    body:has(.kalp-sidebar) .upload-panel .primary-button { width: 100%; justify-content: center; }
    body:has(.kalp-sidebar) .result-layout,
    body:has(.kalp-sidebar) .data-grid { grid-template-columns: 1fr !important; }
    body:has(.kalp-sidebar) .key-values > div { grid-template-columns: 1fr !important; gap: 4px !important; }
    body:has(.kalp-sidebar) .kalp-site-footer { margin-top: auto !important; }
}

@media (max-width: 420px) {
    body:has(.kalp-sidebar) .stat-grid,
    body:has(.kalp-sidebar) .key-grid,
    body:has(.kalp-sidebar) .grid { grid-template-columns: 1fr !important; }
    body:has(.kalp-sidebar) .kv,
    body:has(.kalp-sidebar) .stat-card { min-height: 68px; }
}