/*
 |-----------------------------------------------------------------------
 | Backend runtime overrides
 |-----------------------------------------------------------------------
 |
 | Edit this file for Laravel backend and auth-page visual tweaks that
 | should apply immediately without running `npm run build`.
 |
 | It is loaded after `public/css/admin-base.css`, so rules here win by
 | source order when specificity is equal.
 |
 | Use this for:
 | - admin UI refinements
 | - auth page visual changes
 | - page-specific backend overrides
 |
 | Avoid editing files inside `public/build/` because Vite rebuilds those.
 | The backend now reads from `public/css/admin-base.css` instead.
 |
 */

/* Shared helper hooks for backend-only runtime customization. */

[data-admin-shell] .runtime-hidden {
    display: none !important;
}

.admin-runtime-note {
    color: rgb(100 116 139);
    font-size: 0.875rem;
    line-height: 1.5;
}

.dark .admin-runtime-note {
    color: rgb(148 163 184);
}

:root {
    --hbbs-admin-accent: rgb(var(--hbbs-admin-accent-rgb));
    --hbbs-admin-accent-hover: rgb(var(--hbbs-admin-accent-hover-rgb));
    --hbbs-admin-accent-deep: rgb(var(--hbbs-admin-accent-deep-rgb));
    --hbbs-admin-accent-ultra: rgb(var(--hbbs-admin-accent-ultra-rgb));
    --hbbs-admin-accent-warm: rgb(var(--hbbs-admin-accent-warm-rgb));
    --hbbs-admin-border: rgba(var(--hbbs-admin-accent-rgb), 0.14);
    --hbbs-admin-shell-gradient:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--hbbs-admin-surface-elevated) 82%, var(--hbbs-admin-bg-alt) 18%) 0%,
            color-mix(in srgb, var(--hbbs-admin-bg) 90%, white 10%) 100%
        );
    --hbbs-admin-header-gradient:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--hbbs-admin-surface-elevated) 88%, var(--hbbs-admin-bg) 12%) 0%,
            color-mix(in srgb, var(--hbbs-admin-surface) 84%, var(--hbbs-admin-bg-alt) 16%) 100%
        );
    --hbbs-admin-page-mesh:
        radial-gradient(ellipse 82% 64% at 8% -10%, rgba(var(--hbbs-admin-accent-rgb), 0.08) 0%, transparent 56%),
        radial-gradient(ellipse 72% 54% at 100% 100%, rgba(var(--hbbs-admin-accent-deep-rgb), 0.07) 0%, transparent 54%),
        linear-gradient(180deg, var(--hbbs-admin-bg) 0%, var(--hbbs-admin-bg-alt) 100%);
}

html.dark {
    --hbbs-admin-shell-gradient:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--hbbs-admin-surface-elevated) 72%, var(--hbbs-admin-bg-alt) 28%) 0%,
            color-mix(in srgb, var(--hbbs-admin-bg) 92%, black 8%) 100%
        );
    --hbbs-admin-header-gradient:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--hbbs-admin-surface-elevated) 82%, var(--hbbs-admin-bg) 18%) 0%,
            color-mix(in srgb, var(--hbbs-admin-surface) 76%, var(--hbbs-admin-bg-alt) 24%) 100%
        );
    --hbbs-admin-page-mesh:
        radial-gradient(ellipse 82% 64% at 8% -10%, rgba(var(--hbbs-admin-accent-rgb), 0.12) 0%, transparent 56%),
        radial-gradient(ellipse 72% 54% at 100% 100%, rgba(var(--hbbs-admin-accent-warm-rgb), 0.08) 0%, transparent 54%),
        linear-gradient(180deg, var(--hbbs-admin-bg) 0%, var(--hbbs-admin-bg-alt) 100%);
}

html,
body {
    background: var(--hbbs-admin-bg);
    color: var(--hbbs-admin-text-main);
}

body {
    background-image: var(--hbbs-admin-page-mesh);
    background-attachment: fixed;
}

#sidebar-backdrop {
    background: color-mix(in srgb, var(--hbbs-admin-bg) 74%, black 26%) !important;
}

#admin-sidebar {
    background: var(--hbbs-admin-shell-gradient) !important;
    border-color: var(--hbbs-admin-border) !important;
    color: var(--hbbs-admin-text-main);
    box-shadow: 8px 0 36px rgba(15, 23, 42, 0.08);
}

html.dark #admin-sidebar {
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.32);
}

#admin-sidebar > div:first-child,
#admin-sidebar > div:last-child {
    border-color: var(--hbbs-admin-border) !important;
}

#admin-sidebar nav .h-px {
    background: rgba(var(--hbbs-admin-accent-rgb), 0.14) !important;
}

[data-admin-shell] > header {
    background: var(--hbbs-admin-header-gradient) !important;
    border-color: var(--hbbs-admin-border) !important;
    box-shadow: 0 1px 0 rgba(var(--hbbs-admin-accent-rgb), 0.08), 0 10px 28px rgba(15, 23, 42, 0.08);
}

html.dark [data-admin-shell] > header {
    box-shadow: 0 1px 0 rgba(var(--hbbs-admin-accent-rgb), 0.10), 0 14px 34px rgba(0, 0, 0, 0.24);
}

[data-admin-shell] .rounded-2xl.border.bg-white,
[data-admin-shell] .rounded-2xl.border.bg-slate-50,
[data-admin-shell] .overflow-hidden.rounded-2xl.border.bg-white,
[data-admin-shell] .overflow-hidden.rounded-2xl.border.bg-slate-900,
[data-admin-shell] .overflow-hidden.rounded-2xl.border.bg-slate-50 {
    background: color-mix(in srgb, var(--hbbs-admin-surface-elevated) 92%, transparent) !important;
    border-color: color-mix(in srgb, rgb(var(--hbbs-admin-accent-rgb)) 12%, rgba(148, 163, 184, 0.28)) !important;
}

html.dark [data-admin-shell] .rounded-2xl.border.bg-white,
html.dark [data-admin-shell] .rounded-2xl.border.bg-slate-50,
html.dark [data-admin-shell] .overflow-hidden.rounded-2xl.border.bg-white,
html.dark [data-admin-shell] .overflow-hidden.rounded-2xl.border.bg-slate-900,
html.dark [data-admin-shell] .overflow-hidden.rounded-2xl.border.bg-slate-50 {
    background: color-mix(in srgb, var(--hbbs-admin-surface) 96%, transparent) !important;
    border-color: rgba(var(--hbbs-admin-accent-rgb), 0.14) !important;
}

.btn-primary {
    background: linear-gradient(90deg, var(--hbbs-admin-accent) 0%, var(--hbbs-admin-accent-deep) 58%, var(--hbbs-admin-accent-ultra) 100%);
    box-shadow: 0 12px 26px rgba(var(--hbbs-admin-accent-rgb), 0.24);
}

.btn-primary:hover {
    background: linear-gradient(90deg, var(--hbbs-admin-accent-hover) 0%, var(--hbbs-admin-accent) 58%, var(--hbbs-admin-accent-deep) 100%);
    box-shadow: 0 16px 34px rgba(var(--hbbs-admin-accent-rgb), 0.28);
}

.btn-primary:active {
    background: linear-gradient(90deg, var(--hbbs-admin-accent) 0%, var(--hbbs-admin-accent-deep) 55%, var(--hbbs-admin-accent-ultra) 100%);
    box-shadow: 0 8px 18px rgba(var(--hbbs-admin-accent-rgb), 0.20);
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--hbbs-admin-accent-rgb), 0.18);
}

.nav-link-active {
    color: var(--hbbs-admin-accent-deep);
    background: rgba(var(--hbbs-admin-accent-rgb), 0.08);
    border-color: rgba(var(--hbbs-admin-accent-rgb), 0.18);
}

.dark .nav-link-active {
    color: rgb(255 255 255);
    background: linear-gradient(90deg, rgba(var(--hbbs-admin-accent-rgb), 0.18) 0%, rgba(var(--hbbs-admin-accent-deep-rgb), 0.12) 100%);
    box-shadow: inset 2.5px 0 0 rgba(var(--hbbs-admin-accent-rgb), 0.95), inset 0 1px 0 rgba(255,255,255,0.08);
}

.dark .admin-dialog {
    border-color: rgba(var(--hbbs-admin-accent-rgb), 0.18);
}

.icon-ring-indigo,
.icon-ring-violet,
.icon-ring-sky {
    background: rgba(var(--hbbs-admin-accent-rgb), 0.10) !important;
    border-color: rgba(var(--hbbs-admin-accent-rgb), 0.18) !important;
    color: var(--hbbs-admin-accent) !important;
}

.dark .icon-ring-indigo,
.dark .icon-ring-violet,
.dark .icon-ring-sky {
    background: rgba(var(--hbbs-admin-accent-rgb), 0.14) !important;
    border-color: rgba(var(--hbbs-admin-accent-rgb), 0.24) !important;
    color: var(--hbbs-admin-accent-hover) !important;
}

.text-indigo-500,
.text-indigo-600,
.text-violet-600,
.text-sky-600 {
    color: var(--hbbs-admin-accent-deep) !important;
}

.dark .dark\:text-indigo-300,
.dark .dark\:text-indigo-400,
.dark .dark\:text-violet-400,
.dark .dark\:text-sky-300,
.dark .dark\:text-sky-400 {
    color: var(--hbbs-admin-accent-hover) !important;
}

.border-indigo-200,
.border-sky-200,
.border-violet-200 {
    border-color: rgba(var(--hbbs-admin-accent-rgb), 0.22) !important;
}

.bg-indigo-50,
.bg-sky-50,
.bg-violet-50 {
    background-color: rgba(var(--hbbs-admin-accent-rgb), 0.08) !important;
}

.theme-preset-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.theme-preset-option {
    position: relative;
}

.theme-preset-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-preset-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 100%;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, rgb(var(--hbbs-admin-accent-rgb)) 10%, rgba(226, 232, 240, 0.9));
    background: color-mix(in srgb, var(--hbbs-admin-surface-elevated) 96%, transparent);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.dark .theme-preset-card {
    border-color: rgba(var(--hbbs-admin-accent-rgb), 0.14);
    background: color-mix(in srgb, var(--hbbs-admin-surface) 94%, transparent);
}

.theme-preset-card:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--hbbs-admin-accent-rgb), 0.26);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.dark .theme-preset-card:hover {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.theme-preset-input:checked + .theme-preset-card {
    border-color: rgba(var(--hbbs-admin-accent-rgb), 0.44);
    box-shadow: 0 0 0 3px rgba(var(--hbbs-admin-accent-rgb), 0.12), 0 16px 34px rgba(var(--hbbs-admin-accent-rgb), 0.10);
}

.theme-preset-input:focus-visible + .theme-preset-card {
    outline: 2px solid rgba(var(--hbbs-admin-accent-rgb), 0.34);
    outline-offset: 3px;
}

.theme-preset-preview {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.theme-preset-preview__pane {
    height: 4.5rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.theme-preset-preview__pane--light {
    background: linear-gradient(145deg, rgba(255,255,255,0.98) 0%, color-mix(in srgb, var(--theme-preview-light) 16%, white) 100%);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
}

.theme-preset-preview__pane--dark {
    background: linear-gradient(145deg, rgba(4, 10, 28, 0.98) 0%, color-mix(in srgb, var(--theme-preview-dark-deep) 48%, #040a1c) 100%);
}

.theme-preset-preview__dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--theme-preview-light) 0%, var(--theme-preview-dark) 100%);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.92), 0 10px 24px rgba(15, 23, 42, 0.18);
}

.theme-preset-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.theme-preset-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.theme-preset-title {
    color: rgb(15 23 42);
    font-size: 0.95rem;
    font-weight: 600;
}

.dark .theme-preset-title {
    color: rgb(248 250 252);
}

.theme-preset-mode-chip {
    color: rgb(71 85 105);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dark .theme-preset-mode-chip {
    color: rgb(148 163 184);
}

.theme-preset-description {
    color: rgb(100 116 139);
    font-size: 0.78rem;
    line-height: 1.45;
}

.dark .theme-preset-description {
    color: rgb(148 163 184);
}

/*
 |-----------------------------------------------------------------------
 | Collapsible desktop sidebar
 |-----------------------------------------------------------------------
 | Toggled via `.sidebar-collapsed` on <html> (see layouts/admin.blade.php
 | inline scripts). Scoped to the `lg` breakpoint (1024px) so the mobile
 | slide-over drawer is never affected — it always shows the full sidebar.
 */
@media (min-width: 1024px) {
    html.sidebar-collapsed #admin-sidebar {
        width: 4.5rem;
    }

    html.sidebar-collapsed [data-admin-shell] {
        padding-left: 4.5rem;
    }

    html.sidebar-collapsed .sidebar-label {
        display: none;
    }

    html.sidebar-collapsed #sidebar-brand {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    html.sidebar-collapsed #admin-sidebar nav {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    html.sidebar-collapsed #admin-sidebar nav a {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    html.sidebar-collapsed #sidebar-user-card {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    html.sidebar-collapsed #sidebar-signout {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    html.sidebar-collapsed #sidebar-collapse-icon {
        transform: rotate(180deg);
    }
}