/* ═══════════════════════════════════════════════════════════════════════════
   Docket Processor — custom stylesheet
   Uses CSS custom properties for theming; Bootstrap reboot is already loaded.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --teal:         #0D9488;
    --teal-dark:    #0F766E;
    --teal-light:   #CCFBF1;
    --amber:        #F59E0B;
    --amber-light:  #FEF3C7;
    --red:          #EF4444;
    --red-light:    #FEE2E2;
    --green:        #22C55E;
    --green-light:  #DCFCE7;
    --grey-50:      #F8FAFC;
    --grey-100:     #F1F5F9;
    --grey-200:     #E2E8F0;
    --grey-400:     #94A3B8;
    --grey-600:     #475569;
    --grey-800:     #1E293B;
    --radius:       8px;
    --shadow:       0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
    --shadow-md:    0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background: var(--grey-50);
    color: var(--grey-800);
    margin: 0;
    padding: 0;
}

.app-main {
    min-height: 100vh;
}

/* ── Blazor error overlay ─────────────────────────────────────────────────── */
#blazor-error-ui {
    color-scheme: light only;
    background: #FEF3C7;
    border-top: 2px solid var(--amber);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ── Loading animation ────────────────────────────────────────────────────── */
.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}
.loading-progress circle {
    fill: none;
    stroke: var(--grey-200);
    stroke-width: .6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--teal);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%;
    transition: stroke-dasharray .05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto .2rem;
}
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.app-header {
    background: white;
    border-bottom: 1px solid var(--grey-200);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}
.app-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.app-header__brand { display: flex; align-items: center; gap: .5rem; }
.app-header__icon  { font-size: 1.5rem; }
.app-header__title { font-size: 1.25rem; font-weight: 700; color: var(--grey-800); }
.app-header__subtitle { font-size: .8rem; color: var(--grey-400); margin-left: .25rem; }

.header-chip {
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .75rem;
    border-radius: 999px;
}
.header-chip--ok   { background: var(--green-light);  color: #166534; }
.header-chip--warn { background: var(--amber-light);  color: #92400E; }

/* ── App content container ────────────────────────────────────────────────── */
.app-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Panel (shared card container) ───────────────────────────────────────── */
.panel {
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.25rem;
    background: var(--grey-50);
    border-bottom: 1px solid var(--grey-200);
}
.panel__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.panel__toggle { color: var(--grey-400); font-size: .85rem; }
.panel__body   { padding: 1.25rem; }

/* ── Status dot ───────────────────────────────────────────────────────────── */
.status-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
}
.status-dot--ok   { background: var(--green); }
.status-dot--warn { background: var(--amber); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-group    { margin-bottom: 1.25rem; }
.form-label    { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem; color: var(--grey-800); }
.form-hint     { font-weight: 400; font-size: .75rem; color: var(--grey-400); margin-left: .35rem; }
.form-input    {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    font-size: .875rem;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    background: white;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.form-input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}
.form-textarea { resize: vertical; min-height: 200px; font-family: 'Consolas', 'Courier New', monospace; font-size: .8rem; }
.form-actions  { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s, opacity .15s, box-shadow .15s;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
    background: var(--teal);
    color: white;
    border-color: var(--teal-dark);
}
.btn-primary:hover:not(:disabled) { background: var(--teal-dark); }
.btn-ghost {
    background: transparent;
    color: var(--grey-600);
    border-color: var(--grey-200);
}
.btn-ghost:hover:not(:disabled) { background: var(--grey-100); }
.btn-sm  { padding: .3rem .65rem; font-size: .8rem; }
.btn-xs  { padding: .15rem .4rem; font-size: .72rem; }
.btn-lg  { padding: .7rem 1.5rem; font-size: 1rem; }

/* ── Spinner ──────────────────────────────────────────────────────────────── */
.spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Upload zone ──────────────────────────────────────────────────────────── */
.hidden-input  { display: none; }

.upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    border: 2px dashed var(--grey-200);
    border-radius: var(--radius);
    background: var(--grey-50);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    text-align: center;
}
.upload-zone:hover { border-color: var(--teal); background: var(--teal-light); }
.upload-zone__icon { font-size: 2.5rem; }
.upload-zone__text { font-size: .9rem; color: var(--grey-600); }
.upload-zone__hint { font-size: .8rem; color: var(--grey-400); }
.upload-zone--compact { padding: .75rem 1.25rem; flex-direction: row; gap: .5rem; }

/* ── Prompt image thumbnails ──────────────────────────────────────────────── */
.prompt-image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .75rem;
}
.prompt-image-thumb {
    position: relative;
    width: 96px;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--grey-50);
}
.prompt-image-thumb img { width: 100%; height: 72px; object-fit: cover; display: block; }
.prompt-image-thumb__name {
    font-size: .65rem;
    color: var(--grey-600);
    padding: .2rem .3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prompt-image-thumb .btn { position: absolute; top: 2px; right: 2px; padding: .1rem .3rem; font-size: .65rem; background: rgba(255,255,255,.85); }

/* ── PDF upload row (config panel) ─────────────────────────────────────────── */
.pdf-upload-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: 6px;
    margin-bottom: .5rem;
}
.pdf-icon { font-size: 1.2rem; }
.pdf-name { flex: 1; font-size: .85rem; font-weight: 500; color: var(--grey-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Queue list ───────────────────────────────────────────────────────────── */
.queue-summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--grey-600);
    margin: .75rem 0;
}
.queue-chip {
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.queue-chip--pending    { background: var(--grey-100);   color: var(--grey-600); }
.queue-chip--processing { background: var(--teal-light);  color: var(--teal-dark); }
.queue-chip--completed  { background: var(--green-light); color: #166534; }
.queue-chip--error      { background: var(--red-light);   color: #991B1B; }

.queue-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.queue-list__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .6rem;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    font-size: .8rem;
}
.queue-list__thumb {
    width: 36px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--grey-200);
}
.queue-list__thumb--pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--grey-200);
    background: #fee2e2;
    color: #b91c1c;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.queue-list__name   { flex: 1; color: var(--grey-800); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-list__status { flex-shrink: 0; }

.upload-panel__actions { display: flex; justify-content: flex-end; padding-top: .5rem; }

/* ── Status badges ────────────────────────────────────────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.status-badge--pending    { background: var(--grey-100);   color: var(--grey-600); }
.status-badge--processing { background: var(--teal-light);  color: var(--teal-dark); animation: pulse 1.5s ease-in-out infinite; }
.status-badge--completed  { background: var(--amber-light); color: #92400E; }
.status-badge--error      { background: var(--red-light);   color: #991B1B; }
.status-badge--confirmed  { background: var(--green-light); color: #166534; }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert { padding: .65rem 1rem; border-radius: var(--radius); font-size: .85rem; margin: .75rem 0; }
.alert-danger { background: var(--red-light); border: 1px solid #FCA5A5; color: #991B1B; }

/* ── Results section ──────────────────────────────────────────────────────── */
.results-section { }
.results-section__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--grey-600);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .75rem;
}

/* ── Docket card ──────────────────────────────────────────────────────────── */
.docket-card {
    background: white;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.docket-card--processing { border-color: var(--teal);  box-shadow: 0 0 0 2px rgba(13,148,136,.12); }
.docket-card--error      { border-color: var(--red);   }
.docket-card--confirmed  { border-color: var(--green); }

.docket-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    background: var(--grey-50);
    border-bottom: 1px solid var(--grey-200);
    gap: 1rem;
}
.docket-card__title  { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; }
.docket-card__filename { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Processing log ───────────────────────────────────────────────────────── */
.processing-log {
    background: #0F172A;
    color: #94A3B8;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: .75rem;
    padding: .75rem 1rem;
    max-height: 180px;
    overflow-y: auto;
    line-height: 1.5;
}
.processing-log__line { white-space: pre-wrap; word-break: break-all; }

.processing-log-details { margin: .75rem 1rem; }
.processing-log-details summary {
    cursor: pointer;
    font-size: .8rem;
    color: var(--grey-400);
    user-select: none;
}
.processing-log-details .processing-log {
    margin-top: .5rem;
    border-radius: var(--radius);
}

/* ── Docket card body (two-column layout) ─────────────────────────────────── */
.docket-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 0;
}

.docket-card__image-col {
    border-right: 1px solid var(--grey-200);
    padding: 1rem;
    overflow-y: auto;
    max-height: 700px;
    background: var(--grey-50);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.docket-scan-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: var(--shadow-md);
}
.docket-scan-pdf {
    width: 100%;
    min-height: 600px;
    border-radius: 4px;
    border: 1px solid var(--grey-200);
    box-shadow: var(--shadow-md);
}

.docket-card__fields-col {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    max-height: 700px;
}

.docket-card__actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    margin-top: .5rem;
    border-top: 1px solid var(--grey-100);
}

/* ── Field rows ───────────────────────────────────────────────────────────── */
.field-row {
    display: grid;
    grid-template-columns: 180px 1fr 80px;
    align-items: start;
    gap: .5rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--grey-100);
    border-left: 3px solid transparent;
    padding-left: .5rem;
}
.field-row:last-child { border-bottom: none; }
.field-row--warning   { border-left-color: var(--amber); background: rgba(245,158,11,.04); }
.field-row--danger    { border-left-color: var(--red);   background: rgba(239,68,68,.04); }

.field-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--grey-600);
    padding-top: .45rem;
    line-height: 1.3;
}

.field-input-wrapper { flex: 1; }

.field-input {
    width: 100%;
    padding: .35rem .6rem;
    font-size: .85rem;
    border: 1px solid var(--grey-200);
    border-radius: 4px;
    background: white;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.field-input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(13,148,136,.1);
}
.field-input:disabled { background: var(--grey-50); color: var(--grey-600); cursor: default; }

textarea.field-input { resize: vertical; min-height: 60px; }

.field-confidence { display: flex; align-items: flex-start; padding-top: .35rem; }

/* ── Confidence badges ────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .2rem .5rem;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}
.badge-ok      { background: var(--green-light); color: #166534; }
.badge-warning { background: var(--amber-light); color: #92400E; }
.badge-danger  { background: var(--red-light);   color: #991B1B; }

/* ── Confirmed JSON ───────────────────────────────────────────────────────── */
.confirmed-json-wrapper {
    margin: 1rem;
    border: 1px solid var(--green);
    border-radius: var(--radius);
    overflow: hidden;
}
.confirmed-json-header {
    background: var(--green-light);
    color: #166534;
    font-size: .8rem;
    font-weight: 600;
    padding: .4rem .75rem;
    border-bottom: 1px solid var(--green);
}
.confirmed-json {
    background: #0F172A;
    color: #86EFAC;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: .78rem;
    padding: 1rem;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .docket-card__body {
        grid-template-columns: 1fr;
    }
    .docket-card__image-col {
        border-right: none;
        border-bottom: 1px solid var(--grey-200);
        max-height: 300px;
    }
    .field-row {
        grid-template-columns: 130px 1fr 70px;
    }
    .app-content { padding: .75rem; }
}