/*
 * Bayanat Document Archive - Theme Overrides
 * Based on: Digital Archivist spec + Stasi Mediathek patterns + Bayanat brand colors
 */

/* Brand overrides on top of DaisyUI light theme — only what differs */
[data-theme="light"] {
    /* Primary: Bayanat dark teal #1A4540 */
    --color-primary: oklch(0.30 0.063 175);
    --color-primary-content: oklch(1 0 0);

    /* Secondary: Bayanat teal #3D9B8F */
    --color-secondary: oklch(0.61 0.085 180);
    --color-secondary-content: oklch(1 0 0);

    /* Accent: amber #F59E0B */
    --color-accent: oklch(0.75 0.168 72);
    --color-accent-content: oklch(0.20 0.040 72);

    /* Surface tiers */
    --color-base-content: oklch(0.13 0.033 255); /* #0F172A primary text */

    /* Sharp corners — Stasi / institutional pattern */
    --radius-box: 0rem;
    --radius-selector: 0.125rem;
    --radius-field: 0.125rem;

    /* Custom brand tokens (not DaisyUI standard) */
    --color-primary-mid: oklch(0.61 0.085 180);   /* #3D9B8F links, hover */
    --color-primary-light: oklch(0.71 0.083 182); /* #5AB5A9 tags, secondary interactive */
    --color-ink-muted: oklch(0.37 0.005 255);     /* #4B4B4B body text */
}

/* Ambient shadow (not drop shadow) */
.shadow-ambient {
    box-shadow: 0 0 32px rgba(26, 69, 64, 0.06);
}

/* Document viewer sidebar buttons (Stasi pattern) */
.sidebar-btn {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #3D9B8F;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.15s;
}

.sidebar-btn:hover,
.sidebar-btn:focus-visible {
    background: #1A4540;
    outline: 2px solid #fff;
    outline-offset: -3px;
}

/* Document chip (mimics physical tab folder) */
.doc-chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--b2);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Scope view transition to results area only — rest of page stays static */
#results {
    view-transition-name: search-results;
}

/* Card entry animation — plays on every HTMX swap into #results */
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#results > *:not(#toolbar) {
    animation: fade-in 1000ms ease both;
}

/* Global focus-visible ring — applies to all interactive elements */
:focus-visible {
    outline: 2px solid oklch(0.61 0.085 180);
    outline-offset: 2px;
}

/* Alpine.js: hide x-cloak elements before hydration */
[x-cloak] { display: none !important; }

html.timeline-overscroll-locked,
body.timeline-overscroll-locked {
    overscroll-behavior-y: none;
}

/* HTMX request indicators: hidden by default, visible during request */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: block;
}

/* Dual range handles for the mobile timeline filter. */
.timeline-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.75rem;
    transform: translate(-10px);
    background: transparent;
    pointer-events: none;
}

.timeline-range::-webkit-slider-runnable-track {
    height: 2px;
    background: transparent;
}

.timeline-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 30px solid #1a4540;
    margin-top: -13px;
    pointer-events: auto;
    cursor: ew-resize;
}

.timeline-range::-moz-range-track {
    height: 2px;
    background: transparent;
    border: 0;
}

.timeline-range::-moz-range-thumb {
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 30px solid #1a4540;
    border-top: 0;
    border-radius: 0;
    background: transparent;
    pointer-events: auto;
    cursor: ew-resize;
}

/* Document detail: minimal custom CSS for behaviors not practical in utility classes */
.doc-detail {
    --doc-header-height: 64px;
    --doc-zoom-bar-height: 56px;
    --doc-related-toggle-height: 56px;
    --doc-mobile-actions-height: 64px;
    --doc-desktop-actions-width: 194px;
    --doc-docx-page-max-width: 864px;
    --doc-stage-top: calc(var(--doc-header-height) + var(--doc-zoom-bar-height));
    --doc-stage-height: calc(100vh - var(--doc-stage-top));
    overscroll-behavior: none;
}

.doc-media-stage {
    padding-bottom: calc(var(--doc-related-toggle-height) + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.doc-image-scroll,
.doc-pdf-scroll,
.doc-docx-scope {
    padding-bottom: calc(var(--doc-related-toggle-height) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
    .doc-media-stage {
        padding-bottom: calc(
            var(--doc-related-toggle-height) +
            var(--doc-mobile-actions-height) +
            env(safe-area-inset-bottom, 0px)
        );
    }

    .doc-image-scroll,
    .doc-pdf-scroll,
    .doc-docx-scope {
        padding-bottom: calc(
            var(--doc-related-toggle-height) +
            var(--doc-mobile-actions-height) +
            env(safe-area-inset-bottom, 0px)
        );
    }
}

.doc-pdf-canvas,
.doc-mobile-pdf-canvas {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}

.doc-image-scroll.is-zoomed img {
    flex: none;
    margin: 0 auto;
    max-width: none !important;
    max-height: none !important;
}

.doc-image-scroll.is-zoomed {
    justify-content: flex-start;
    align-items: flex-start;
}

.doc-pdf-scroll.is-zoomed {
    align-items: flex-start;
}

.doc-docx-scope .docx-preview,
.doc-docx-scope .docx-wrapper {
    max-width: min(var(--doc-docx-page-max-width), 100%);
    margin-inline: auto;
}

.doc-docx-scope .docx {
    max-width: none !important;
    width: auto !important;
}

.doc-docx-scope div[style*="display: inline-block"][style*="width"][style*="pt"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
}

.doc-docx-scope .docx-wrapper.is-zoomed {
    max-width: none !important;
}

@media (max-width: 767px) {
    .doc-docx-scope .docx-preview[style] {
        padding: 16px !important;
        box-sizing: border-box;
    }
}

/* Normalize DOCX preview heading/list paragraph offsets from Word styles. */
.doc-docx-scope .docx-preview p[class*="docx-preview_heading"][class*="docx-preview-num-"] {
    text-indent: 0 !important;
    margin-inline-start: 0 !important;
}

@media (max-width: 900px) {
    .doc-mobile-pdf-canvas {
        max-width: 100%;
        width: auto;
    }
}

.doc-audio-wave-bg {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(61, 155, 143, 0.18) 0,
            rgba(61, 155, 143, 0.18) 6px,
            rgba(15, 23, 42, 0.06) 6px,
            rgba(15, 23, 42, 0.06) 10px
        ),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}