/*
    Ahkila Reader — visual theme.

    The component layer of design_handoff_ahkila_theme: buttons, inputs, cards, tags, tables,
    progress, the shell and the reader, expressed against the tokens in tokens.css.

    Scope is the design layer only. Nothing here changes navigation structure, routes, what a page
    contains or where its data comes from — every rule restyles markup that is already there.

    Loaded after app.css so it wins on shared selectors without app.css needing to be unpicked.
*/

/* ------------------------------------------------------------------ shell */

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Headings carry hierarchy by size and space, never by weight past 500. */
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-weight: var(--weight-heading);
}

.mud-appbar.top-bar,
.mud-appbar {
    height: 48px;
    min-height: 48px;
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg));
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--text) 9%, transparent);
    padding-inline: var(--space-6);
}

.mud-appbar .mud-toolbar {
    height: 48px;
    min-height: 48px;
    padding-inline: 0;
    gap: var(--space-3);
}

.brand {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.01em;
}

/*
    The ambient wash the design puts behind page content. On the content element rather than the
    body so it stays put under the fixed header and drawer.
*/
.mud-main-content,
.main-content {
    background: radial-gradient(120% 60% at 12% 0%,
        color-mix(in srgb, var(--accent) 6%, var(--bg)) 0%, var(--bg) 60%);
}

/* --------------------------------------------------------------- side nav */

.mud-drawer.side-nav,
.mud-drawer {
    background: var(--nav-bg);
    border: 0;
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--text) 7%, transparent);
    transition: width 180ms ease;
}

.mud-drawer .mud-navmenu {
    padding: var(--space-3);
    gap: var(--space-1);
}

.mud-drawer .mud-nav-link {
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    gap: var(--space-4);
    color: color-mix(in srgb, var(--text) 62%, transparent);
    transition: background 140ms ease, color 140ms ease;
}

.mud-drawer .mud-nav-link .mud-nav-link-icon {
    font-size: 19px;
    min-width: 19px;
}

.mud-drawer .mud-nav-link:hover {
    background: color-mix(in srgb, var(--text) 5%, transparent);
    color: var(--text);
}

/* Active is a tinted sweep plus a bar on the leading edge — no fill, no bold. */
.mud-drawer .mud-nav-link.active {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 20%, transparent),
        color-mix(in srgb, var(--accent) 4%, transparent));
    box-shadow: inset 2px 0 0 var(--accent);
    color: var(--text);
    font-weight: 500;
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: var(--accent);
}

/* Group headers read as section labels, not as links. */
.mud-drawer .mud-nav-group > .mud-nav-link {
    font-size: 13.5px;
}

.mud-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    font-size: 13px;
    padding-left: 30px;
}

/* -------------------------------------------------------------- typography */

.section-label,
.mud-typography-overline {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 40%, transparent);
}

/* The kicker above a page title — same treatment, in the accent. */
.kicker {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-2);
}

.page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
}

/* Counts, sizes and page numbers line up column-wise. */
.mud-table-cell,
.tabular {
    font-variant-numeric: tabular-nums;
}

.path-text,
.mono {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

/* ---------------------------------------------------------------- buttons */

/*
    Outlined, never solid-filled. MudBlazor fills primaries by default, so filled and outlined are
    given the same treatment rather than leaving two different-looking primary actions on one page.
*/
.mud-button-root {
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 16px;
    box-shadow: none;
    transition: background 140ms ease, border-color 140ms ease;
}

.mud-button-root:hover {
    box-shadow: none;
}

.mud-button-filled,
.mud-button-outlined {
    background: transparent;
    border: 1px solid var(--divider);
    color: var(--text);
}

.mud-button-filled.mud-button-filled-primary,
.mud-button-outlined.mud-button-outlined-primary,
.mud-button-filled.mud-button-filled-secondary,
.mud-button-outlined.mud-button-outlined-secondary {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-outlined.mud-button-outlined-primary:hover,
.mud-button-filled.mud-button-filled-secondary:hover,
.mud-button-outlined.mud-button-outlined-secondary:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: var(--accent);
}

.mud-button-filled.mud-button-filled-primary:active,
.mud-button-outlined.mud-button-outlined-primary:active {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.mud-button-filled:hover,
.mud-button-outlined:hover {
    background: color-mix(in srgb, var(--text) 7%, transparent);
}

.mud-button-filled:active,
.mud-button-outlined:active {
    background: color-mix(in srgb, var(--text) 14%, transparent);
}

/* Ghost: accent text, no border. */
.mud-button-text {
    color: var(--accent);
    padding: 8px 12px;
}

.mud-button-text:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Destructive keeps its meaning without becoming a solid red block. */
.mud-button-filled.mud-button-filled-error,
.mud-button-outlined.mud-button-outlined-error {
    background: transparent;
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

.mud-button-filled.mud-button-filled-error:hover,
.mud-button-outlined.mud-button-outlined-error:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.mud-icon-button {
    border-radius: var(--radius-md);
    padding: 6px;
    color: color-mix(in srgb, var(--text) 72%, transparent);
}

.mud-icon-button:hover {
    background: color-mix(in srgb, var(--text) 7%, transparent);
    color: var(--text);
}

.mud-button-root:disabled,
.mud-button-root.mud-button-disabled {
    opacity: .45;
}

.mud-button-root:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------- inputs */

.mud-input.mud-input-outlined,
.mud-input.mud-input-filled,
.mud-input-control .mud-input-slot {
    background: var(--input-bg);
    border-radius: var(--radius-md);
    font-size: 14px;
}

.mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-color: var(--divider);
    border-radius: var(--radius-md);
    transition: border-color 140ms ease;
}

.mud-input.mud-input-outlined:hover > .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--text) 45%, transparent);
}

.mud-input.mud-input-outlined.mud-focused > .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-color: var(--accent);
    border-width: 1px;
}

.mud-input input,
.mud-input textarea,
.mud-input .mud-input-slot {
    caret-color: var(--accent);
    color: var(--text);
}

.mud-input input::placeholder,
.mud-input textarea::placeholder {
    color: var(--text-faint);
}

/* Filled inputs lose their underline — this design has no underlined fields. */
.mud-input.mud-input-filled::before,
.mud-input.mud-input-filled::after,
.mud-input.mud-input-underline::before,
.mud-input.mud-input-underline::after {
    display: none;
}

/*
    The label sits above the field at rest rather than notching the border, which is what the
    handoff asks for. Once raised MudBlazor's own transform already puts it there — the notch is
    simply given no width to cut, so the border runs unbroken behind it.
*/
.mud-input.mud-input-outlined > .mud-input-outlined-border legend {
    max-width: 0;
    padding: 0;
}

.mud-input-label-outlined.mud-input-label-inputcontrol {
    font-size: 12px;
    color: color-mix(in srgb, var(--text) 70%, transparent);
}

.mud-input-label.mud-input-label-outlined.mud-input-label-shrink {
    background: transparent;
    padding-inline: 2px;
}

/* ------------------------------------------------------------------ cards */

.mud-paper,
.mud-card {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--edge-card);
    background-image: none;
}

.mud-paper-outlined {
    border: 0;
    box-shadow: var(--edge-card);
}

/* Hover changes the hairline only — no lift, no scale. */
.mud-card:hover,
.browse-card:hover,
.folder-card:hover {
    box-shadow: 0 0 0 1px var(--accent-700);
    transform: none;
}

.mud-card-content {
    padding: var(--space-4);
}

/* ------------------------------------------------------------------- tags */

.mud-chip {
    height: auto;
    min-height: 0;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

.mud-chip.mud-chip-filled {
    background: var(--hairline-strong);
    color: var(--text);
}

.mud-chip.mud-chip-filled.mud-chip-color-primary,
.mud-chip.mud-chip-filled.mud-chip-color-secondary {
    background: var(--accent-800);
    color: var(--accent-200);
}

.mud-chip.mud-chip-outlined {
    background: transparent;
    border: 1px solid var(--divider);
    color: var(--text);
}

.mud-chip.mud-chip-outlined.mud-chip-color-primary {
    border-color: var(--accent);
    color: var(--accent-300);
}

/* The accent pill in the header — "5 in progress". */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--accent-900);
    color: var(--accent-200);
    font-size: 11.5px;
    font-weight: 500;
}

.scan-activity-indicator {
    background: var(--accent-900);
    color: var(--accent-200);
    border: 0;
    border-radius: 999px;
    padding: 3px 11px;
    gap: var(--space-2);
    font-size: 11.5px;
}

/* ----------------------------------------------------------------- tables */

.mud-table {
    background: var(--surface-card);
    box-shadow: var(--edge-card);
    border-radius: var(--radius-md);
}

.mud-table-head .mud-table-cell {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 0;
}

.mud-table-body .mud-table-cell {
    font-size: 14px;
    padding: var(--space-2) var(--space-3);
    border: 0;
}

/*
    The row rule is painted on the row so the fade spans it end to end — on the cell it would
    restart at every column edge.
*/
.mud-table-body .mud-table-row {
    background-image: linear-gradient(to right, transparent,
        color-mix(in srgb, var(--text) 8%, transparent) 48px,
        color-mix(in srgb, var(--text) 8%, transparent) calc(100% - 48px), transparent);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 1px;
}

.mud-table-body .mud-table-row:hover {
    background-color: color-mix(in srgb, var(--text) 4%, transparent);
}

/* --------------------------------------------------------------- progress */

/*
    One visual language for "where am I", in all four places it appears: on a cover, in a table
    row, in the reader rail and on a folder card.
*/
.mud-progress-linear {
    background: var(--divider);
    border-radius: 3px;
    overflow: hidden;
}

.mud-progress-linear .mud-progress-linear-bar {
    background: var(--accent);
}

.progress-strip {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: var(--divider);
}

.progress-strip > span {
    display: block;
    height: 100%;
    background: var(--accent);
    box-shadow: var(--glow-accent);
}

.progress-inline {
    width: 74px;
    height: 3px;
    border-radius: 3px;
    background: var(--divider);
    overflow: hidden;
}

.progress-inline > span {
    display: block;
    height: 100%;
    background: var(--accent);
    box-shadow: var(--glow-accent);
}

.mud-progress-circular {
    color: var(--accent);
}

/* ----------------------------------------------------------------- covers */

.book-cover,
.details-cover,
.reader-details-cover {
    border-radius: var(--radius-md);
    box-shadow: var(--edge-cover);
    overflow: hidden;
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--accent) 26%, var(--surface-card)),
        var(--surface-card));
}

.browse-card,
.folder-card {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--edge-card);
    padding: var(--space-4);
}

.book-title,
.folder-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.book-grid,
.folder-grid {
    gap: var(--space-4);
}

/* ---------------------------------------------------------------- dialogs */

.mud-dialog {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--edge-raised);
}

.mud-dialog-title {
    font-size: 18px;
    font-weight: 500;
    padding: var(--space-6) var(--space-6) var(--space-3);
}

.mud-dialog-content {
    padding: 0 var(--space-6) var(--space-6);
    font-size: 14px;
}

.mud-dialog-actions {
    padding: var(--space-3) var(--space-6) var(--space-6);
    gap: var(--space-3);
}

.mud-overlay-dialog {
    background: rgba(14, 15, 24, .7);
}

/* Menus and select popovers are surfaces, not floating white sheets. */
.mud-popover,
.mud-menu-popover {
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--edge-cover);
}

.mud-list-item:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.mud-list-item.mud-selected-item {
    background: var(--accent-900);
    color: var(--accent-200);
}

/* ----------------------------------------------------------------- reader */

.reader-stage {
    background: var(--reader-stage);
}

/*
    The page image is deliberately NOT framed.

    The handoff frames reader pages — hairline plus a 44px ambient shadow — and that belongs to a
    prototype where the page floats in a stage. Here `.reader-page` is the whole viewport
    (`min-height:100vh`) and `.reader-image` is the bitmap the turn animation transforms, both
    carrying `will-change: transform, opacity`. Framing them made every turn repaint a full-screen
    blurred shadow and re-clip rounded corners on a multi-megapixel image, per frame: the animation
    started, stalled part way and finished with a jump.

    So the stage keeps its ground and the chrome its treatment, and the page itself stays flat.
    A comic page is edge-to-edge artwork; a shadow around it is decoration the reader does not need.
    `.epub-reader-page` is the same story — 100vw by 100dvh and scroll-snapped, so a corner radius
    on it would never be seen and a shadow would cost a repaint per page.
*/

/*
    The neighbouring pages being warmed. Out of the layout and out of the way — it must cost a
    fetch and nothing else: no space, no paint, no hit testing.
*/
.reader-preload {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.immersive-reader-header,
.reader-toolbar {
    background: color-mix(in srgb, var(--nav-bg) 92%, transparent);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--text) 9%, transparent);
    padding: var(--space-4) var(--space-8);
}

.reader-title {
    font-size: 13px;
    font-weight: 500;
}

.reader-side-drawer,
.reader-issue-list-panel {
    background: var(--nav-bg);
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--text) 7%, transparent);
}

/* Turn zones: a wash that fades inward, so the page is never dimmed. */
.reader-click-zone {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 10%, transparent), transparent);
}

.reader-click-zone:last-child {
    background: linear-gradient(270deg,
        color-mix(in srgb, var(--accent) 10%, transparent), transparent);
}

.immersive-reader-footer {
    background: color-mix(in srgb, var(--nav-bg) 92%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 9%, transparent);
}

/* ------------------------------------------------- selection / bulk action */

.bulk-action-bar {
    background: var(--accent-900);
    box-shadow: 0 0 0 1px var(--accent-700);
    border-radius: var(--radius-md);
    color: var(--accent-200);
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
}

/* ------------------------------------------------------------- stat tiles */

.stat-tile {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--edge-card);
    padding: var(--space-4);
}

.stat-tile-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
}

.stat-tile-value {
    font-size: 26px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.stat-tile-sub {
    font-size: 11.5px;
    color: var(--text-faint);
}

/* ------------------------------------------------------ segmented control */

.segmented {
    display: inline-flex;
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.segmented > * {
    padding: 7px 12px;
    font-size: 12.5px;
    background: transparent;
    border: 0;
    border-inline-end: 1px solid var(--divider);
    color: var(--text-muted);
    cursor: pointer;
}

.segmented > *:last-child {
    border-inline-end: 0;
}

.segmented > .selected,
.segmented > [aria-selected="true"] {
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.segmented > *:focus-visible {
    outline-offset: -2px;
}

/* -------------------------------------------------------------- switches */

.mud-switch .mud-switch-track {
    background: var(--divider);
}

.mud-switch.mud-checked .mud-switch-track {
    background: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ------------------------------------------------- the app's own controls */

/*
    Markup that predates the design system and is styled by app.css rather than by MudBlazor. The
    radius scale here is 4 / 8 / 14 only, so the 6px, 10px and 12px corners app.css carries are
    brought onto it, and hand-rolled inputs and cards are given the same surfaces as their MudBlazor
    equivalents. Selectors only — no markup, no layout, no data.
*/
.browse-card-link:focus-visible,
.item-select-toggle,
.reader-toc-item,
.reader-issue-list-item,
.scan-log-viewer,
.folder-browser-path-row,
.metadata-value-link,
.metadata-value-tile,
.theme-preview-btn,
.arc-issue-card,
.stats-kpi {
    border-radius: var(--radius-md) !important;
}

.reader-issue-list-item img,
.arc-issue-card-num,
.api-code-block,
.theme-preview-nav-item {
    border-radius: var(--radius-sm);
}

.reader-arc-card,
.theme-card,
.reader-arc-detail-cover {
    border-radius: var(--radius-md);
}

/* Hand-rolled fields follow the input spec: no underline, accent caret, hairline that lifts. */
.auth-input,
.fit-select,
.direction-select,
.page-size-select,
.folder-browser-path-row input,
select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"] {
    background: var(--input-bg);
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    color: var(--text);
    caret-color: var(--accent);
    font-family: var(--font);
    font-size: 14px;
    transition: border-color 140ms ease;
}

.auth-input:hover,
.fit-select:hover,
.direction-select:hover,
.page-size-select:hover,
select:hover,
input[type="text"]:hover,
input[type="search"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover {
    border-color: color-mix(in srgb, var(--text) 45%, transparent);
}

.auth-input:focus,
.fit-select:focus,
.direction-select:focus,
.page-size-select:focus,
select:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {
    border-color: var(--accent);
    outline-offset: 0;
}

/* Cards and tiles the app draws itself. */
.stats-kpi,
.metadata-value-tile,
.reader-arc-card,
.theme-card,
.scan-log-viewer {
    background: var(--surface-card);
    box-shadow: var(--edge-card);
}

.api-code-block,
.scan-log-viewer {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

/* The theme picker's swatch card — selected state is an accent hairline, not a fill. */
.theme-card.selected,
.theme-card[aria-selected="true"] {
    box-shadow: 0 0 0 1px var(--accent);
}

/* The scrollbar app.css leaves light grey on a dark ground. */
::-webkit-scrollbar-thumb {
    background: var(--hairline-strong);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text) 32%, transparent);
}

/* ---------------------------------------------------------------- tooltip */

.mud-tooltip {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--edge-cover);
    border-radius: var(--radius-sm);
    font-size: 12px;
}