/* ═══════════════════════════════════════════════════
   Oravine Admin — Design System
   ═══════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────── */

:root {
    /* Background / surface */
    --app-bg:            #f4f6fa;
    --sidebar-bg:        #ffffff;
    --card-bg:           #ffffff;

    /* Borders */
    --border-color:      rgba(17, 24, 39, 0.10);
    --border-color-soft: rgba(17, 24, 39, 0.06);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(16,24,40,0.04);
    --shadow-sm: 0 1px 3px rgba(16,24,40,0.07), 0 1px 2px rgba(16,24,40,0.05);
    --shadow-md: 0 4px 16px rgba(16,24,40,0.09), 0 2px 4px rgba(16,24,40,0.05);
    --shadow-lg: 0 12px 32px rgba(16,24,40,0.12), 0 4px 8px rgba(16,24,40,0.06);

    /* Brand */
    --brand-color:      #7BB31A;
    --brand-color-dark: #679815;
    --brand-soft:       rgba(123, 179, 26, 0.12);
    --brand-soft-hover: rgba(123, 179, 26, 0.18);

    /* Text */
    --text-muted:   rgba(17, 24, 39, 0.50);
    --text-subtle:  rgba(17, 24, 39, 0.72);
    --text-default: #111827;

    /* Semantic */
    --success:      #16a34a;  --success-soft: rgba(22,163,74,0.10);
    --warning:      #d97706;  --warning-soft: rgba(217,119,6,0.10);
    --danger:       #dc2626;  --danger-soft:  rgba(220,38,38,0.09);
    --info:         #2563eb;  --info-soft:    rgba(37,99,235,0.09);
    --neutral-soft: rgba(17, 24, 39, 0.06);

    /* Radii */
    --radius-xs: 0.375rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;

    /* Transitions */
    --transition-fast: 120ms ease;
    --transition-base: 160ms ease;
}

/* ── Base reset ─────────────────────────────────────────── */

html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--app-bg);
    color: var(--text-default);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 15px;
}

/* Admin surfaces opt back into dashboard font */
.page, .login-wrap {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: var(--brand-color);
    transition: color var(--transition-fast);
}
a:hover { color: var(--brand-color-dark); }

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.015em; }
h1:focus { outline: none; }

::selection { background: var(--brand-soft); }

/* Slim scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(17,24,39,0.16) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(17,24,39,0.15); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: var(--radius-md);
    font-weight: 560;
    font-size: 0.875rem;
    line-height: 1;
    transition: background-color var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast), box-shadow var(--transition-fast), transform 80ms ease;
}

.btn svg { flex-shrink: 0; }

.btn:active { transform: translateY(1px); }

/* Primary */
.btn-primary {
    color: #fff;
    background-color: var(--brand-color);
    border-color: var(--brand-color-dark);
    box-shadow: 0 1px 2px rgba(103,152,21,0.30), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #fff;
    background-color: var(--brand-color-dark) !important;
    border-color: #527a11 !important;
    box-shadow: 0 2px 6px rgba(103,152,21,0.35) !important;
}

/* Outline primary */
.btn-outline-primary {
    color: var(--brand-color-dark);
    border-color: rgba(123,179,26,0.45);
    background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    color: #fff !important;
    background-color: var(--brand-color) !important;
    border-color: var(--brand-color-dark) !important;
}

/* Outline secondary */
.btn-outline-secondary {
    color: var(--text-subtle);
    border-color: var(--border-color);
    background: transparent;
}
.btn-outline-secondary:hover {
    color: var(--text-default) !important;
    background-color: rgba(17,24,39,0.04) !important;
    border-color: rgba(17,24,39,0.18) !important;
}

/* Outline danger */
.btn-outline-danger {
    color: var(--danger);
    border-color: rgba(220,38,38,0.3);
    background: transparent;
}
.btn-outline-danger:hover {
    color: #fff !important;
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}

/* Ghost — no border, subtle hover fill */
.btn-ghost {
    color: var(--text-subtle);
    background: transparent;
    border-color: transparent;
}
.btn-ghost:hover {
    color: var(--text-default) !important;
    background-color: rgba(17,24,39,0.06) !important;
    border-color: transparent !important;
}
.btn-ghost:active {
    background-color: rgba(17,24,39,0.09) !important;
}

/* Icon-only square button */
.btn-icon {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    flex-shrink: 0;
}
.btn-icon.btn-sm  { width: 1.9rem; height: 1.9rem; }
.btn-icon.btn-lg  { width: 2.6rem; height: 2.6rem; }

/* Sizes */
.btn-sm {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    gap: 0.3rem;
}
.btn-lg {
    font-size: 0.95rem;
    padding: 0.65rem 1.35rem;
    border-radius: var(--radius-lg);
}

/* Focus ring */
.btn:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-color);
    outline: none;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ── Forms ──────────────────────────────────────────────── */

.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--border-color);
    font-size: 0.875rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-label {
    font-size: 0.8rem;
    font-weight: 620;
    color: var(--text-subtle);
    margin-bottom: 0.3rem;
    letter-spacing: 0.01em;
}

.form-text {
    font-size: 0.77rem;
    color: var(--text-muted);
}

.form-check-input:checked {
    background-color: var(--brand-color);
    border-color: var(--brand-color-dark);
}

.form-check-input:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Input with icon prefix */
.input-icon-wrap {
    position: relative;
}
.input-icon-wrap .input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}
.input-icon-wrap .form-control,
.input-icon-wrap .form-select {
    padding-left: 2.25rem;
}

/* ── Cards ──────────────────────────────────────────────── */

.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover {
    border-color: rgba(17,24,39,0.09);
}

.card .card-body {
    padding: 1.35rem;
}

.card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.35rem;
    border-bottom: 1px solid var(--border-color-soft);
    background: rgba(17,24,39,0.015);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--text-default);
}

.card .card-footer {
    padding: 0.85rem 1.35rem;
    border-top: 1px solid var(--border-color-soft);
    background: rgba(17,24,39,0.015);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.75rem;
}

.card-title-row h2 {
    font-size: 0.9rem;
    font-weight: 650;
    margin: 0;
    color: var(--text-default);
}

/* ── KPI cards ──────────────────────────────────────────── */

.kpi-card {
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
    cursor: default;
}

.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.kpi-card .card-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.kpi-label {
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.kpi-value {
    font-size: 1.9rem;
    font-weight: 730;
    line-height: 1.1;
    color: var(--text-default);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.kpi-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.kpi-icon {
    width: 2.85rem;
    height: 2.85rem;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-icon svg { width: 1.3rem; height: 1.3rem; }

.kpi-icon.brand   { background: var(--brand-soft);    color: var(--brand-color-dark); }
.kpi-icon.success { background: var(--success-soft);  color: var(--success); }
.kpi-icon.warning { background: var(--warning-soft);  color: var(--warning); }
.kpi-icon.info    { background: var(--info-soft);     color: var(--info); }
.kpi-icon.danger  { background: var(--danger-soft);   color: var(--danger); }

/* ── Badges ─────────────────────────────────────────────── */

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.badge-soft .dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
}

.badge-soft.success { background: var(--success-soft); color: var(--success); }
.badge-soft.warning { background: var(--warning-soft); color: var(--warning); }
.badge-soft.danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-soft.info    { background: var(--info-soft);    color: var(--info); }
.badge-soft.neutral { background: var(--neutral-soft); color: var(--text-subtle); }
.badge-soft.brand   { background: var(--brand-soft);   color: var(--brand-color-dark); }

/* ── Tables ─────────────────────────────────────────────── */

.table { --bs-table-bg: transparent; }

.table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    white-space: nowrap;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--border-color-soft);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    vertical-align: middle;
}

.table tbody tr:last-child > * { border-bottom: 0; }

.table-hover > tbody > tr {
    transition: background-color 100ms ease;
    cursor: default;
}
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(123,179,26,0.045);
}

.table .cell-id   { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.table .cell-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--text-subtle); }
.table .cell-num  { font-variant-numeric: tabular-nums; }

.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--brand-color-dark); }

.sort-arrow { display: inline-block; margin-left: 0.2rem; font-size: 0.68rem; opacity: 0.6; }

/* ── Page header / toolbar ──────────────────────────────── */

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

.page-header h1 {
    font-size: 1.4rem;
    font-weight: 730;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--text-default);
}

.page-header .page-subtitle {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin-top: 0.18rem;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Toolbar card (search + filters strip) */
.toolbar-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 1rem 1.35rem;
    margin-bottom: 1rem;
}

/* Search input with icon */
.search-input {
    position: relative;
}
.search-input .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}
.search-input .form-control { padding-left: 2.25rem; }

/* ── Structured content editors ─────────────────────────── */

.editor-form {
    display: grid;
    gap: 1.25rem;
}

.editor-layout,
.editor-loading {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .8fr);
    grid-template-areas: "main side";
    align-items: start;
    gap: 1.25rem;
}

.editor-copy-panel { grid-area: main; min-width: 0; }
.editor-product-panel { grid-area: side; min-width: 0; }

.editor-panel-title {
    color: var(--text-default);
    font-size: .9rem;
    font-weight: 680;
    letter-spacing: -.01em;
}

.editor-panel-subtitle {
    margin-top: .12rem;
    color: var(--text-muted);
    font-size: .73rem;
    font-weight: 450;
}

.editor-form .validation-summary-errors {
    padding: .85rem 1rem;
    border-radius: var(--radius-md);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: .82rem;
}

.editor-form .validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }
.editor-form .validation-summary-valid { display: none; }

.editor-form .nav-tabs {
    gap: .25rem;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    padding-bottom: 1px;
    scrollbar-width: none;
}
.editor-form .nav-tabs::-webkit-scrollbar { display: none; }
.editor-form .nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: .45rem .7rem;
    border: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 580;
    white-space: nowrap;
}
.editor-form .nav-tabs .nav-link:hover { color: var(--text-default); background: rgba(17,24,39,.035); }
.editor-form .nav-tabs .nav-link.active {
    color: var(--brand-cta);
    background: var(--brand-soft);
    box-shadow: inset 0 -2px 0 var(--brand-color);
}

.editor-action-bar {
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    bottom: .75rem;
    z-index: 10;
    border: 1px solid var(--border-color-soft);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.editor-save-hint { color: var(--text-muted); font-size: .76rem; }

/* Compact page-level tabs for switching between related datasets. */
.admin-tabs {
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1rem;
    padding: .25rem;
    display: flex;
    gap: .2rem;
    overflow-x: auto;
    border: 1px solid var(--border-color-soft);
    border-radius: .75rem;
    background: rgba(17,24,39,.035);
}

.admin-tab {
    min-height: 2.35rem;
    padding: .45rem .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 0;
    border-radius: .56rem;
    background: transparent;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 620;
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-tab:hover { color: var(--text-default); }
.admin-tab.active {
    background: var(--card-bg);
    color: var(--text-default);
    box-shadow: var(--shadow-xs);
}

@media (max-width: 1099.98px) {
    .editor-layout,
    .editor-loading {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "side" "main";
    }
}

@media (max-width: 575.98px) {
    .editor-action-bar { bottom: .5rem; align-items: stretch; flex-direction: column; }
    .editor-action-bar .page-header-actions { width: 100%; }
    .editor-action-bar .btn { flex: 1 1 auto; }
    .editor-save-hint { text-align: center; }
}

/* ── Section divider label ──────────────────────────────── */

.section-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

/* ── Empty state ────────────────────────────────────────── */

.empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--text-muted);
}

.empty-state .empty-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: var(--radius-lg);
    background: var(--neutral-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.empty-state .empty-title {
    font-weight: 650;
    font-size: 0.95rem;
    color: var(--text-subtle);
    margin-bottom: 0.3rem;
}

.empty-state .empty-hint { font-size: 0.84rem; }

/* ── Skeleton loading ───────────────────────────────────── */

.skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(17,24,39,0.06);
    border-radius: var(--radius-sm);
    min-height: 0.9rem;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }

/* ── Pagination ─────────────────────────────────────────── */

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color-soft);
    margin-top: 0.25rem;
}

.pager .pager-info  { font-size: 0.8rem; color: var(--text-muted); }
.pager .pager-buttons { display: flex; gap: 0.3rem; }
.pager .pager-buttons .btn { min-width: 2.1rem; }

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

.alert {
    border-radius: var(--radius-md);
    border: 0;
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
}

.alert-danger  { background: var(--danger-soft);  color: #b91c1c; }
.alert-success { background: var(--success-soft); color: #15803d; }
.alert-warning { background: var(--warning-soft); color: #b45309; }
.alert-info    { background: var(--info-soft);    color: #1d4ed8; }

/* ── Image preview ──────────────────────────────────────── */

.image-preview {
    width: 7rem;
    height: 7rem;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--neutral-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-preview-empty { color: var(--text-muted); display: flex; align-items: center; justify-content: center; }

.metadata-thumb {
    display: grid;
    width: 52px;
    height: 42px;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--app-bg);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
}

.metadata-thumb img { width: 100%; height: 100%; object-fit: cover; }

.category-image-editor {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.category-image-preview {
    display: grid;
    flex: 0 0 124px;
    width: 124px;
    height: 106px;
    overflow: hidden;
    place-items: center;
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    background: linear-gradient(145deg, var(--app-bg), #fff);
    color: var(--text-muted);
    font-size: .75rem;
}

.category-image-preview img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 575px) {
    .category-image-editor { flex-direction: column; }
    .category-image-preview { width: 100%; height: 150px; flex-basis: auto; }
}

/* ── Chart helpers ──────────────────────────────────────── */

.chart-wrap { width: 100%; overflow-x: auto; }
.chart-wrap svg { display: block; width: 100%; height: auto; }

.chart-bar {
    fill: url(#barGradient);
    transition: opacity 120ms ease;
}
.chart-bar:hover { opacity: 0.72; }

.chart-axis-label { font-size: 9px; fill: var(--text-muted); }
.chart-gridline { stroke: rgba(17,24,39,0.06); stroke-width: 1; }

/* ── Sidebar nav in app.css (overrides Bootstrap .nav) ─── */

.top-row.navbar {
    border-bottom: 1px solid rgba(17,24,39,0.07);
}

.navbar-brand {
    color: var(--brand-color);
    font-weight: 650;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.navbar-brand:hover, .navbar-brand:focus {
    color: var(--brand-color);
    opacity: .85;
}

.brand-logo { height: 26px; width: auto; display: inline-block; }

/* ── Login page ─────────────────────────────────────────── */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(123,179,26,0.12), transparent 60%),
        radial-gradient(700px 400px at -10% 110%, rgba(37,99,235,0.06), transparent 55%),
        var(--app-bg);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--card-bg);
    border: 1px solid var(--border-color-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2.25rem 2rem;
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.login-brand img { height: 36px; }
.login-brand .brand-text {
    font-size: 1.3rem;
    font-weight: 730;
    color: var(--brand-color-dark);
    letter-spacing: -0.02em;
}

.login-title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 680;
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.login-subtitle {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* ── Validation ─────────────────────────────────────────── */

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); font-size: 0.8rem; margin-top: 0.2rem; }

/* ── Blazor error boundary ──────────────────────────────── */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius-md);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

/* ── Form floating ──────────────────────────────────────── */

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Content area padding ───────────────────────────────── */

.content {
    padding-top: 1.35rem;
    padding-bottom: 2.5rem;
}

/* ═══════════════════════════════════════════════════
   Polish layer — focus, motion, density, responsive
   ═══════════════════════════════════════════════════ */

/* ── Motion tokens (match the public site's curves) ─────── */

:root {
    --ease:      cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out:  cubic-bezier(0.16, 0.84, 0.44, 1);
    --transition-slow: 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Focus visibility ───────────────────────────────────── */

/* Every interactive control gets the same ring, not just buttons. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--card-bg, #fff), 0 0 0 4px var(--brand-color);
    border-radius: var(--radius-xs);
}

/* Inputs keep their softer inline ring rather than the offset one. */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    box-shadow: 0 0 0 3px var(--brand-soft);
    border-color: var(--brand-color);
}

/* Skip link for keyboard users entering the admin. */
.admin-skip-link {
    position: fixed;
    top: 0.6rem;
    inset-inline-start: 0.6rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--text-default);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 620;
    box-shadow: var(--shadow-lg);
    transform: translateY(-160%);
    transition: transform var(--transition-base);
}

.admin-skip-link:focus,
.admin-skip-link:focus-visible {
    transform: translateY(0);
    color: #fff;
}

/* ── Entrance motion ────────────────────────────────────── */

@keyframes admin-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Each route render eases in rather than snapping. */
article.content > * {
    animation: admin-fade-up 260ms var(--ease) both;
}

.fade-in { animation: admin-fade-up 260ms var(--ease) both; }

/* ── Cards: only interactive ones react ─────────────────── */

a.card,
button.card,
.card-interactive {
    cursor: pointer;
}

a.card:hover,
button.card:hover,
.card-interactive:hover {
    border-color: rgba(123, 179, 26, 0.35);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

a.card:active,
button.card:active,
.card-interactive:active {
    transform: translateY(0);
    transition-duration: 90ms;
}

/* ── Modals / dialogs ───────────────────────────────────── */

.modal.fade .modal-dialog {
    transform: translateY(12px) scale(0.985);
    transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.modal.show .modal-dialog {
    transform: none;
}

.modal-content {
    border: 1px solid var(--border-color-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--border-color-soft);
    padding: 1rem 1.35rem;
}

.modal-header .modal-title {
    font-size: 0.98rem;
    font-weight: 680;
    letter-spacing: -0.01em;
}

.modal-body { padding: 1.35rem; }

.modal-backdrop.show { opacity: 0.35; }

.admin-modal-backdrop {
    overflow-y: auto;
    padding: 1rem;
    background: rgba(15,23,42,.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── Dropdowns ──────────────────────────────────────────── */

.dropdown-menu {
    border: 1px solid var(--border-color-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.3rem;
    font-size: 0.875rem;
    animation: dropdown-in 140ms var(--ease-out) both;
}

@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.dropdown-item {
    border-radius: var(--radius-xs);
    padding: 0.45rem 0.6rem;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dropdown-item:active {
    background-color: var(--brand-soft);
    color: var(--text-default);
}

/* ── Accordions / collapsibles ──────────────────────────── */

/* Height-agnostic expand: no JS measurement, no layout thrash. */
.collapse-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-slow);
}

.collapse-panel > * { overflow: hidden; min-height: 0; }
.collapse-panel.is-open { grid-template-rows: 1fr; }

.collapse-chevron { transition: transform var(--transition-base); }
[aria-expanded="true"] .collapse-chevron { transform: rotate(180deg); }

/* ── Loading affordance inside buttons ──────────────────── */

.btn-spinner {
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 999px;
    animation: btn-spin 700ms linear infinite;
    opacity: 0.85;
    flex-shrink: 0;
}

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

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Tables on narrow screens ───────────────────────────── */

/* Wide tables scroll inside their own card instead of pushing
   the whole page sideways. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll > .table { margin-bottom: 0; }

/* ── Responsive density ─────────────────────────────────── */

@media (max-width: 640.98px) {
    html, body { font-size: 14.5px; }

    .card .card-body,
    .toolbar-card { padding: 1rem; }

    .card .card-header,
    .card .card-footer { padding: 0.75rem 1rem; }

    .page-header { margin-bottom: 1rem; }
    .page-header h1 { font-size: 1.2rem; }

    .kpi-value { font-size: 1.6rem; }

    /* Page-level actions get full width so they are easy to hit. */
    .page-header-actions { width: 100%; }
    .page-header-actions > .btn { flex: 1 1 auto; }
}

@media (min-width: 1600px) {
    /* Keep line lengths readable on very wide displays. */
    article.content { max-width: 1500px; }
}

/* Comfortable touch targets on touch devices. */
@media (pointer: coarse) {
    .btn { min-height: 42px; }
    .btn-sm { min-height: 38px; }
    .btn-icon { min-width: 42px; }
    .nav-link { min-height: 42px; }
    .form-control, .form-select { min-height: 42px; }
}

/* ── Reduced motion ─────────────────────────────────────── */

@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;
    }

    /* Spinners still need to spin to signal "working". */
    .btn-spinner { animation-duration: 900ms !important; animation-iteration-count: infinite !important; }
    .skeleton::after { animation: none; }
}

/* ── Print ──────────────────────────────────────────────── */

@media print {
    .sidebar, .top-row, .page-header-actions { display: none !important; }
    .page { display: block; }
    article.content { padding: 0 !important; }
    .card { box-shadow: none; border-color: rgba(0,0,0,0.15); break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════
   Admin scope guard
   ---------------------------------------------------
   The public site's compiled Tailwind bundle (oravine.css)
   ships UNSCOPED `.btn-primary` / `.btn-secondary` rules and
   loads after this file, so it was quietly turning admin
   buttons into full pills with the site's padding.

   These rules re-assert the admin button system under the two
   admin roots (`.page` and `.login-wrap`), which outranks the
   bare class selectors without needing `!important`.
   ═══════════════════════════════════════════════════ */

:is(.page, .login-wrap) .btn {
    border-radius: var(--radius-md);
    font-weight: 560;
    font-size: 0.875rem;
    padding: 0.5rem 0.9rem;
    transition: background-color var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast), box-shadow var(--transition-fast), transform 80ms ease;
}

:is(.page, .login-wrap) .btn-sm {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
}

:is(.page, .login-wrap) .btn-lg {
    font-size: 0.95rem;
    padding: 0.65rem 1.35rem;
    border-radius: var(--radius-lg);
}

:is(.page, .login-wrap) .btn-icon {
    padding: 0;
    width: 2.2rem;
}

:is(.page, .login-wrap) .btn-icon.btn-sm { width: 1.9rem; }
:is(.page, .login-wrap) .btn-icon.btn-lg { width: 2.6rem; }

:is(.page, .login-wrap) .btn-primary {
    color: #fff;
    background-color: var(--brand-color);
    border: 1px solid var(--brand-color-dark);
    box-shadow: 0 1px 2px rgba(103, 152, 21, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: none;
}

:is(.page, .login-wrap) .btn-primary:hover {
    color: #fff;
    background-color: var(--brand-color-dark);
    border-color: #527a11;
    transform: none;
}

:is(.page, .login-wrap) .btn-secondary {
    color: var(--text-subtle);
    background-color: transparent;
    border: 1px solid var(--border-color);
}

:is(.page, .login-wrap) .btn-secondary:hover {
    color: var(--text-default);
    background-color: rgba(17, 24, 39, 0.04);
    border-color: rgba(17, 24, 39, 0.18);
}

/* The site bundle also styles bare form elements; keep admin
   inputs on the dashboard scale. */
:is(.page, .login-wrap) :is(.form-control, .form-select) {
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════
   Legible calls to action
   ---------------------------------------------------
   White text on the brand green (#7BB31A) measures
   2.53:1 — far below the 4.5:1 AA needs for button
   labels, which made the dashboard's primary action
   its hardest-to-read control.

   `--brand-cta` is the lightest mix that clears AA
   (4.69:1) while still reading as the same green.
   The brand colour itself is unchanged, and stays in
   use for icons, tints, borders and accents.
   ═══════════════════════════════════════════════════ */

:root {
    --brand-cta:       color-mix(in srgb, var(--brand-color), #16240a 36%);
    --brand-cta-hover: color-mix(in srgb, var(--brand-color), #16240a 48%);
}

:is(.page, .login-wrap) .btn-primary {
    background-color: var(--brand-cta);
    border-color: var(--brand-cta-hover);
    box-shadow: 0 1px 2px rgba(56, 82, 12, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

:is(.page, .login-wrap) .btn-primary:hover,
:is(.page, .login-wrap) .btn-primary:focus-visible,
:is(.page, .login-wrap) .btn-primary:active {
    background-color: var(--brand-cta-hover);
    border-color: var(--brand-cta-hover);
}

/* Outline/ghost variants place green on white, so they take the
   darker ink value rather than the raw brand colour. */
:is(.page, .login-wrap) .btn-outline-primary {
    color: var(--brand-cta);
    border-color: color-mix(in srgb, var(--brand-color), transparent 55%);
}

:is(.page, .login-wrap) .btn-outline-primary:hover,
:is(.page, .login-wrap) .btn-outline-primary:active {
    background-color: var(--brand-cta);
    border-color: var(--brand-cta-hover);
    color: #fff;
}

/* Green text on light surfaces (links, badge labels, KPI icons,
   sortable headers) needs the same treatment. */
a, .btn-link { color: var(--brand-cta); }
a:hover { color: var(--brand-cta-hover); }

.badge-soft.brand { color: var(--brand-cta); }
.kpi-icon.brand   { color: var(--brand-cta); }
.table th.sortable:hover { color: var(--brand-cta); }
.login-brand .brand-text { color: var(--brand-cta); }
.navbar-brand, .navbar-brand:hover, .navbar-brand:focus { color: var(--brand-cta); }
.brand-pill { color: var(--brand-cta); }

/* Avatar and other decorative gradients keep the brighter green. */
.user-chip .avatar {
    background: linear-gradient(135deg, var(--brand-color), var(--brand-cta));
}

/* ═══════════════════════════════════════════════════
   Arabic-script content in the admin
   ---------------------------------------------------
   Translation editors show every language side by side,
   so any field flipped to RTL renders in the same
   Arabic face the public site uses. App.razor loads
   Noto Sans Arabic on all /admin routes for this.
   ═══════════════════════════════════════════════════ */

[dir="rtl"],
[dir="rtl"] :is(input, textarea, select, .form-control, .form-select) {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.8;
    letter-spacing: 0;
}