/* ============================================================================
   admin.css — shadcn/ui-inspired component styles for the admin panel.

   WHY THIS FILE EXISTS
   --------------------
   shadcn/ui is a React + Tailwind component collection with no mature Blazor
   port. This project's Tailwind build only scans the server `Components/` folder
   and is not loaded in the WASM client, so Tailwind classes do not work in the
   admin pages. Rather than risk dragging Tailwind's global preflight reset on top
   of the Bootstrap-styled client pages, we recreate the shadcn visual language by
   hand here.

   SAFE BY DESIGN
   --------------
   Every class is prefixed `.shad-` and there is NO global element reset, so this
   stylesheet cannot collide with Bootstrap (client) or Tailwind (public site).
   It is linked once, globally, in App.razor; the prefix keeps it inert everywhere
   except where the admin pages opt in by using the classes.

   Palette follows shadcn's "zinc" theme.
   ========================================================================== */

:root {
    --shad-background: #ffffff;
    --shad-foreground: #09090b; /* zinc-950 */
    --shad-muted: #f4f4f5; /* zinc-100 */
    --shad-muted-foreground: #71717a; /* zinc-500 */
    --shad-border: #e4e4e7; /* zinc-200 */
    --shad-input: #e4e4e7; /* zinc-200 */
    --shad-ring: #a1a1aa; /* zinc-400 */
    --shad-primary: #18181b; /* zinc-900 */
    --shad-primary-foreground: #fafafa; /* zinc-50 */
    --shad-destructive: #dc2626; /* red-600 */
    --shad-destructive-foreground: #fafafa;
    --shad-radius: 0.5rem;
    --shad-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Layout shell ─────────────────────────────────────────────────────────── */

.shad-scope {
    font-family: var(--shad-font);
    color: var(--shad-foreground);
    background: var(--shad-muted);
    min-height: 100vh;
}

.shad-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.shad-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.shad-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

.shad-page-subtitle {
    color: var(--shad-muted-foreground);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

/* ── Admin shell + left sidebar (AdminLayout.razor) ───────────────────────────
   The sidebar lives OUTSIDE the page's own `.shad-scope`, so it sets its own font
   and colour here. The page (`.shad-scope` → `.shad-container`) renders in the
   `.shad-admin-main` column to the right. */

.shad-admin-shell {
    display: flex;
    min-height: 100vh;
    font-family: var(--shad-font);
    color: var(--shad-foreground);
    background: var(--shad-muted);
}

.shad-admin-sidebar {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem 0.75rem;
    background: var(--shad-background);
    border-right: 1px solid var(--shad-border);
    /* Stay pinned while the content column scrolls. */
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
}

.shad-admin-main {
    flex: 1;
    min-width: 0; /* allow the 960px content to shrink instead of overflowing the row */
}

.shad-admin-brand {
    display: block;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--shad-foreground);
    text-decoration: none;
}

.shad-admin-brand-accent { color: var(--shad-muted-foreground); font-weight: 500; }

.shad-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.shad-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--shad-radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--shad-muted-foreground);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.shad-sidebar-link:hover {
    background: var(--shad-muted);
    color: var(--shad-foreground);
}

/* NavLink adds `.active` to the link for the current section. */
.shad-sidebar-link.active {
    background: var(--shad-muted);
    color: var(--shad-foreground);
    font-weight: 600;
}

.shad-sidebar-spacer { flex: 1; }

.shad-sidebar-foot {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--shad-border);
}

/* The logout <button> is styled to read as a sidebar link. */
.shad-sidebar-logout {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: inherit;
}

/* On narrow viewports the sidebar becomes a horizontal top strip so it doesn't
   crush the 960px content column. */
@media (max-width: 860px) {
    .shad-admin-shell { flex-direction: column; }

    .shad-admin-sidebar {
        width: auto;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem 0.75rem;
        border-right: none;
        border-bottom: 1px solid var(--shad-border);
        overflow-x: auto;
    }

    .shad-admin-brand { margin: 0 0.5rem 0 0; white-space: nowrap; }

    .shad-sidebar-nav { flex-direction: row; }

    .shad-sidebar-foot {
        flex-direction: row;
        padding-top: 0;
        border-top: none;
    }
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

.shad-card {
    background: var(--shad-background);
    border: 1px solid var(--shad-border);
    border-radius: calc(var(--shad-radius) + 0.25rem);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
}

.shad-card + .shad-card {
    margin-top: 1.25rem;
}

.shad-card-header {
    padding: 1.25rem 1.5rem 0.75rem;
}

.shad-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.shad-card-desc {
    font-size: 0.8125rem;
    color: var(--shad-muted-foreground);
    margin: 0.25rem 0 0;
}

.shad-card-body {
    padding: 1.25rem 1.5rem;
}

.shad-card-footer {
    padding: 0.75rem 1.5rem 1.25rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── Form primitives ──────────────────────────────────────────────────────── */

.shad-field {
    margin-bottom: 1rem;
}

.shad-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}

.shad-hint {
    font-size: 0.75rem;
    color: var(--shad-muted-foreground);
    margin-top: 0.375rem;
}

.shad-input,
.shad-textarea {
    width: 100%;
    font: inherit;
    font-size: 0.875rem;
    color: var(--shad-foreground);
    background: var(--shad-background);
    border: 1px solid var(--shad-input);
    border-radius: var(--shad-radius);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.shad-input { height: 2.25rem; }

.shad-textarea {
    min-height: 7rem;
    resize: vertical;
    line-height: 1.5;
}

/* Native select styled to match the input. Used by the exam-module editor (question type,
   difficulty, sub-type dropdowns). */
.shad-select {
    width: 100%;
    font: inherit;
    font-size: 0.875rem;
    height: 2.25rem;
    color: var(--shad-foreground);
    background: var(--shad-background);
    border: 1px solid var(--shad-input);
    border-radius: var(--shad-radius);
    padding: 0.375rem 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    cursor: pointer;
}

.shad-select:focus {
    outline: none;
    border-color: var(--shad-ring);
    box-shadow: 0 0 0 3px rgb(161 161 170 / 0.35);
}

/* A checkbox + label on one line. Used by the exam-module question editor. */
.shad-checkline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--shad-foreground);
    cursor: pointer;
    margin-bottom: 0.375rem;
}

.shad-checkline input { cursor: pointer; }

.shad-input::placeholder,
.shad-textarea::placeholder {
    color: var(--shad-muted-foreground);
}

.shad-input:focus,
.shad-textarea:focus {
    outline: none;
    border-color: var(--shad-ring);
    box-shadow: 0 0 0 3px rgb(161 161 170 / 0.35);
}

.shad-input:disabled,
.shad-textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.shad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    height: 2.25rem;
    padding: 0 0.95rem;
    border-radius: var(--shad-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

.shad-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(161 161 170 / 0.4);
}

.shad-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.shad-btn-primary {
    background: var(--shad-primary);
    color: var(--shad-primary-foreground);
}

.shad-btn-primary:hover:not(:disabled) { background: #27272a; }

.shad-btn-outline {
    background: var(--shad-background);
    border-color: var(--shad-border);
    color: var(--shad-foreground);
}

.shad-btn-outline:hover:not(:disabled) { background: var(--shad-muted); }

.shad-btn-ghost {
    background: transparent;
    color: var(--shad-foreground);
}

.shad-btn-ghost:hover:not(:disabled) { background: var(--shad-muted); }

.shad-btn-destructive {
    background: var(--shad-destructive);
    color: var(--shad-destructive-foreground);
}

.shad-btn-destructive:hover:not(:disabled) { background: #b91c1c; }

.shad-btn-sm { height: 1.875rem; padding: 0 0.7rem; font-size: 0.8125rem; }

.shad-btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

/* ── Badge (status pills) ─────────────────────────────────────────────────── */

.shad-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    border: 1px solid transparent;
}

.shad-badge-draft {
    background: var(--shad-muted);
    color: var(--shad-muted-foreground);
    border-color: var(--shad-border);
}

.shad-badge-published {
    background: #dcfce7; /* green-100 */
    color: #166534; /* green-800 */
}

.shad-badge-archived {
    background: #fef3c7; /* amber-100 */
    color: #92400e; /* amber-800 */
}

/* ── Table ────────────────────────────────────────────────────────────────── */

.shad-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.shad-table th {
    text-align: left;
    font-weight: 500;
    color: var(--shad-muted-foreground);
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--shad-border);
}

.shad-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--shad-border);
    vertical-align: middle;
}

.shad-table tr:last-child td { border-bottom: none; }

.shad-table tr:hover td { background: var(--shad-muted); }

/* ── Section editor block ─────────────────────────────────────────────────── */

.shad-section {
    border: 1px solid var(--shad-border);
    border-radius: var(--shad-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--shad-background);
}

.shad-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.shad-section-index {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--shad-muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* A nested block inside a section — used for each question within a part. */
.shad-subsection {
    border: 1px solid var(--shad-border);
    border-left: 3px solid var(--shad-ring);
    border-radius: var(--shad-radius);
    padding: 0.875rem;
    margin: 0.75rem 0;
    background: var(--shad-muted);
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.shad-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--shad-muted);
    border-radius: var(--shad-radius);
    margin-bottom: 1.25rem;
}

.shad-tab {
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.875rem;
    border: none;
    background: transparent;
    color: var(--shad-muted-foreground);
    border-radius: calc(var(--shad-radius) - 2px);
    cursor: pointer;
}

.shad-tab-active {
    background: var(--shad-background);
    color: var(--shad-foreground);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */

.shad-alert {
    border-radius: var(--shad-radius);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.shad-alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.shad-alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.shad-alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* ── Helpers ──────────────────────────────────────────────────────────────── */

.shad-row { display: flex; gap: 0.75rem; align-items: center; }
.shad-row-end { justify-content: flex-end; }
.shad-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.shad-muted { color: var(--shad-muted-foreground); }
.shad-spacer { flex: 1; }

@media (max-width: 640px) {
    .shad-grid-2 { grid-template-columns: 1fr; }
}

/* ── Spinner ──────────────────────────────────────────────────────────────── */

.shad-spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: shad-spin 0.6s linear infinite;
}

@keyframes shad-spin { to { transform: rotate(360deg); } }

/* ── Media upload (MediaUpload.razor) ──────────────────────────────────────── */

.shad-upload-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* The picker is a <label> wrapping a hidden <InputFile>; style it like a button. */
.shad-upload-pick {
    cursor: pointer;
    margin: 0;
}

.shad-upload-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.shad-upload-preview {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem;
    margin-bottom: 0.625rem;
    border: 1px solid var(--shad-border);
    border-radius: var(--shad-radius);
    background: var(--shad-muted);
}

.shad-upload-thumb {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: calc(var(--shad-radius) - 0.125rem);
    border: 1px solid var(--shad-border);
    background: var(--shad-background);
    flex-shrink: 0;
}

.shad-upload-audio {
    height: 2.25rem;
    max-width: 16rem;
}

.shad-upload-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0; /* let the URL truncate instead of overflowing the row */
    flex: 1;
}

.shad-upload-url {
    font-size: 0.8125rem;
    color: var(--shad-muted-foreground);
    word-break: break-all;
    text-decoration: none;
}

.shad-upload-url:hover { text-decoration: underline; }

.shad-upload-error { margin-top: 0.5rem; }

.shad-upload-manual {
    margin-top: 0.5rem;
}

.shad-upload-manual > summary {
    cursor: pointer;
    width: fit-content;
    user-select: none;
}

.shad-upload-manual > .shad-input {
    margin-top: 0.5rem;
}