/* Shajara design tokens — a warm archival/document palette (fired clay on sand paper).
 *
 * This is the single source for the palette. Three other places mirror it and must be
 * changed together: ShajaraTheme.cs (MudBlazor components), the fallback literals in
 * js/shajaraTree.js (which reads these properties at init), and img/avatar-*.svg (static
 * files, so no custom property can reach them).
 *
 * The spec (§4.4) specifies a deep-green palette; this warmer one replaces it by choice.
 * Every text pair here meets WCAG AA and beats the green it replaced on secondary text
 * (5.4:1 → 6.1:1) — the readers are elderly, so warmth may not cost contrast.
 */
:root {
    --bg: #FAF4EC;         /* sand paper */
    --surface: #FFFDFA;    /* cards, sheets */
    --ink: #2C2018;        /* primary text — warm walnut-black */
    --ink-soft: #6F5E4E;   /* secondary text, years */
    --accent: #9C4221;     /* fired clay */
    --accent-soft: #F7E6DC;/* selected/focused node tint */
    --line: #E4D6C6;       /* tree edges, hairline borders */
    --deceased: #9C8B79;   /* muted border for deceased */
}

html, body {
    margin: 0;
    background-color: var(--bg);
    color: var(--ink);
    /* PT Sans is the UI face (self-host the font files under wwwroot/fonts and
       add @font-face declarations here); system sans fallback until then. */
    font-family: 'PT Sans', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px; /* elderly-first: body text >= 17px */
    line-height: 1.5;
}

/* PT Serif is used for the family title and person names in profile view. */
.shajara-serif {
    font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
}

h1:focus {
    outline: none;
}

a {
    color: var(--accent);
}

#blazor-error-ui {
    color-scheme: light only;
    background: #FBEFD0;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Xatolik yuz berdi.";
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--line);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--accent);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    color: var(--ink-soft);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Yuklanmoqda…");
    }

/* ============================================================
   App shell
   ============================================================ */
.sh-app { display: flex; flex-direction: column; height: 100dvh; }
.sh-main { flex: 1; min-height: 0; overflow: hidden; }
.sh-screen { display: flex; flex-direction: column; height: 100%; }

/* Visible keyboard focus everywhere (WCAG). */
.sh-navitem:focus-visible, .sh-seg:focus-visible, .sh-tool:focus-visible,
.sh-related:focus-visible, .sh-search-input:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ---- bottom navigation: exactly three items, icon + label ---- */
.sh-bottomnav {
    display: flex;
    flex: none;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}
.sh-navitem {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; padding: 6px 4px;   /* touch target >= 48px */
    border: 0; background: none; cursor: pointer;
    color: var(--ink-soft); text-decoration: none;
    font-family: inherit; font-size: 15px;
}
.sh-navitem.sh-active { color: var(--accent); font-weight: 600; }
.sh-navitem:disabled { opacity: .4; cursor: default; }

/* ---- top bar + segmented control ---- */
.sh-topbar { flex: none; padding: 10px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.sh-segmented {
    display: flex; overflow: hidden;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.sh-seg {
    flex: 1; min-height: 48px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 16px; color: var(--ink);
}
.sh-seg + .sh-seg { border-left: 1px solid var(--line); }
.sh-seg.sh-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* ---- tree ---- */
.sh-tree-wrap { position: relative; flex: 1; min-height: 0; }
.sh-tree-host { position: absolute; inset: 0; }
.sh-overlay {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 24px; text-align: center; background: var(--bg); color: var(--ink-soft);
}

/* ---- tree toolbar: always visible, icon + Uzbek label ---- */
.sh-toolbar { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.sh-tool {
    display: flex; align-items: center; gap: 6px;
    min-height: 48px; min-width: 48px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    color: var(--ink); font-family: inherit; font-size: 15px; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.sh-tool:disabled { opacity: .45; cursor: default; }
.sh-tool:active { transform: scale(.98); transition: transform 100ms; }

/* ---- bottom sheet ---- */
.sh-scrim {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(35, 36, 31, .35);
    opacity: 0; pointer-events: none;
    transition: opacity 250ms ease-out;
}
.sh-scrim.sh-open { opacity: 1; pointer-events: auto; }
.sh-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
    display: flex; flex-direction: column; max-height: 85dvh;
    background: var(--surface); border-radius: 16px 16px 0 0;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .12);
    transform: translateY(100%);
    transition: transform 250ms ease-out;
}
.sh-sheet.sh-open { transform: translateY(0); }
.sh-handle { flex: none; width: 40px; height: 4px; margin: 10px auto 4px; border-radius: 2px; background: var(--line); }
/* min-height:0 is required: without it this flex item refuses to shrink below its
   content, so a long profile pushes the "Shu kishiga fokus" footer off screen. */
.sh-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; }
.sh-sheet-foot { flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

.sh-carousel { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.sh-carousel img { flex: none; height: 180px; border: 1px solid var(--line); border-radius: 12px; }
.sh-name { margin: 8px 0 4px; font-size: 24px; }
.sh-badge {
    display: inline-block; padding: 2px 10px;
    border: 1px solid var(--line); border-radius: 999px;
    font-size: 15px; color: var(--ink-soft);
}
.sh-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0; }
.sh-facts dt { font-size: 15px; color: var(--ink-soft); }
.sh-facts dd { margin: 0; font-size: 17px; }
.sh-section { margin: 16px 0 6px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.sh-bio { margin: 0; white-space: pre-wrap; }

/* ---- related rows / search results ---- */
.sh-related {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 56px; padding: 8px 4px;
    border: 0; border-bottom: 1px solid var(--line); background: none;
    text-align: left; cursor: pointer; font-family: inherit;
}
.sh-related-thumb {
    flex: none; width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; background: var(--accent-soft);
}
.sh-related-thumb.sh-dec { filter: saturate(.45); border: 1px solid var(--deceased); }
.sh-related-text { display: flex; flex-direction: column; }
.sh-related-name { font-size: 17px; color: var(--ink); }
.sh-related-sub { font-size: 15px; color: var(--ink-soft); }

/* ---- search ---- */
.sh-search-input {
    box-sizing: border-box; width: 100%; min-height: 52px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: 19px;
}
.sh-results { flex: 1; overflow-y: auto; padding: 0 12px; }
.sh-empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 48px 16px; text-align: center; color: var(--ink-soft);
}
.sh-empty { color: var(--ink-soft); }

/* ---- skeletons ---- */
.sh-skel { background: var(--accent-soft); border-radius: 8px; }
.sh-skel-photo { height: 180px; margin-bottom: 12px; }
.sh-skel-line { height: 14px; margin: 8px 0; }

/* ---- PNG export dialog ---- */
.sh-export-group { margin-bottom: 16px; }
.sh-export-label { color: var(--ink-soft); margin-bottom: 4px; }

/* ============================================================
   Admin
   ============================================================ */
.sh-center { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 16px; }
.sh-blank { min-height: 100dvh; background: var(--bg); }
.sh-login { width: 100%; max-width: 380px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }

.sh-form { display: flex; flex-direction: column; gap: 12px; min-width: min(520px, 80vw); }

/* PartialDate editor: the qualifier sits beside the year because "taxminan 1935" is a
   normal, first-class answer — not an edge case. */
.sh-pd { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.sh-pd-title { color: var(--ink-soft); margin-bottom: 8px; }
.sh-pd-row { display: flex; gap: 8px; margin-bottom: 8px; }
.sh-pd-row > * { flex: 1; }
.sh-pd-qual { flex: 1.4; }
.sh-pd-preview { color: var(--accent); font-weight: 600; }

.sh-picker-list { max-height: 50dvh; overflow-y: auto; margin-top: 8px; min-width: min(460px, 80vw); }

.sh-related-admin { border-bottom: 1px solid var(--line); }
.sh-related-open {
    display: flex; flex-direction: column; align-items: flex-start;
    flex: 1; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit; padding: 4px 0;
}
.sh-related-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Drag-and-drop: the file input is stretched invisibly over the drop zone, which is
   what makes a real drop (not just a click) work. */
.sh-upload-wrap { position: relative; }
.sh-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; cursor: pointer; }
.sh-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 140px; border: 2px dashed var(--line); border-radius: 12px;
    background: var(--bg); color: var(--ink-soft); text-align: center; padding: 12px;
}
.sh-dropzone-active { border-color: var(--accent); background: var(--accent-soft); }

.sh-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.sh-photo { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.sh-photo-primary { border-color: var(--accent); border-width: 2px; }
.sh-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.sh-photo-actions { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px; }

.sh-invite-url {
    background: var(--accent-soft); padding: 4px 8px; border-radius: 6px;
    word-break: break-all; font-size: 14px;
}
.sh-admin-table { background: transparent; }

/* MudBlazor uppercases button labels by default. Uzbek strings must render exactly
   as written in the resource file, and all-caps is harder to read. */
.mud-button-root { text-transform: none; }

/* Nothing moves unless the user caused it (spec §4.3).
   The blanket reset matters because MudBlazor brings its own motion — ripples,
   spinners, dialog and snackbar transitions — which our own rules would not reach.
   The d3 tree honours this separately, in JS, via matchMedia. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .sh-scrim, .sh-sheet { transition-duration: 0s; }
    .sh-tool:active { transform: none; }
    /* Do NOT hide .mud-ripple: MudBlazor puts that class on the interactive element
       itself, so display:none removes the whole button. The blanket rule above already
       neutralises the ripple animation. */
}