/* ── Variables ───────────────────────────────────────────────── */
:root {
    --sidebar-width:     240px;
    --sidebar-collapsed: 56px;
    --header-height:     56px;
    --transition:        .22s ease;
}

/* ── Skins ───────────────────────────────────────────────────────
   Apply by setting class "theme-<id>" on the .wrapper element.
   "default" = no class, keeps the original look.
*/

/* Light: same shape, lighter accents — header navy instead of black */
.wrapper.theme-light { background: #fafbfc; }
.wrapper.theme-light .top-header     { background-color: #1f3b62 !important; }
.wrapper.theme-light .sidebar        { background: #ffffff;  border-right-color: #e3e6ea; }
.wrapper.theme-light .main-footer    { background: #ffffff; }

/* Dark: full dark mode */
.wrapper.theme-dark                  { background: #1a1d22; color: #d8dde3; }
.wrapper.theme-dark .top-header      { background-color: #0e1116 !important; }
.wrapper.theme-dark .sidebar         { background: #23272d; border-right-color: #34393f; color: #d8dde3; }
.wrapper.theme-dark .sidebar .nav-link        { color: #cfd6dd; }
.wrapper.theme-dark .sidebar .nav-link:hover  { background: #2c3138; color: #fff; }
.wrapper.theme-dark .sidebar .nav-link.active { background: #2f7df0; color: #fff; }
.wrapper.theme-dark .sidebar .nav-section     { color: #8a929b; }
.wrapper.theme-dark .main-content    { color: #d8dde3; }
.wrapper.theme-dark .main-content .card,
.wrapper.theme-dark .main-content .table,
.wrapper.theme-dark .main-content .list-group-item {
    background: #23272d; color: #d8dde3; border-color: #34393f;
}
.wrapper.theme-dark .main-content .card-header,
.wrapper.theme-dark .main-content .table-light  { background: #2c3138; color: #d8dde3; }
.wrapper.theme-dark .main-content .text-muted   { color: #aab2bb !important; }
.wrapper.theme-dark .main-footer     { background: #0e1116; color: #aab2bb; }
.wrapper.theme-dark .form-control,
.wrapper.theme-dark .form-select     { background: #2c3138; color: #d8dde3; border-color: #3b4047; }

/* Ocean: deep blue accent */
.wrapper.theme-ocean .top-header     { background: linear-gradient(90deg, #0a4d8c, #1675c2) !important; }
.wrapper.theme-ocean .sidebar        { background: #f0f6fb; border-right-color: #cfe1ee; }
.wrapper.theme-ocean .sidebar .nav-link.active {
    background-color: #1675c2 !important;
    color: #ffffff !important;
}
.wrapper.theme-ocean .sidebar .nav-link.active .nav-label,
.wrapper.theme-ocean .sidebar .nav-link.active i { color: #ffffff !important; }
.wrapper.theme-ocean .btn-primary    { background-color: #1675c2 !important; border-color: #1675c2 !important; }
.wrapper.theme-ocean .text-primary   { color: #1675c2 !important; }

/* Graphite: default look but with the dark sidebar from theme-dark */
.wrapper.theme-graphite .sidebar              { background: #23272d; border-right-color: #34393f; color: #d8dde3; }
.wrapper.theme-graphite .sidebar .it-sidebar-header,
.wrapper.theme-graphite .sidebar .nav-section { color: #aab2bb; }
.wrapper.theme-graphite .sidebar .nav-link    { color: #cfd6dd; }
.wrapper.theme-graphite .sidebar .nav-link i  { color: inherit; }
.wrapper.theme-graphite .sidebar .nav-link:hover  { background: #2c3138; color: #ffffff; }
.wrapper.theme-graphite .sidebar .nav-link.active { background: #2f7df0; color: #ffffff; }
.wrapper.theme-graphite .sidebar .nav-link.active i,
.wrapper.theme-graphite .sidebar .nav-link.active .nav-label { color: #ffffff !important; }

/* Forest: green accent */
.wrapper.theme-forest .top-header    { background: linear-gradient(90deg, #1c5e2e, #2e8b57) !important; }
.wrapper.theme-forest .sidebar       { background: #f3f8f4; border-right-color: #cfe5d4; }
.wrapper.theme-forest .sidebar .nav-link.active,
.wrapper.theme-forest .btn-primary   { background-color: #2e8b57 !important; border-color: #2e8b57 !important; }
.wrapper.theme-forest .text-primary  { color: #2e8b57 !important; }

/* Sunset: orange accent */
.wrapper.theme-sunset .top-header    { background: linear-gradient(90deg, #b34d00, #f0793b) !important; }
.wrapper.theme-sunset .sidebar       { background: #fdf4ec; border-right-color: #f1d6c0; }
.wrapper.theme-sunset .sidebar .nav-link.active,
.wrapper.theme-sunset .btn-primary   { background-color: #f0793b !important; border-color: #f0793b !important; }
.wrapper.theme-sunset .text-primary  { color: #d35a13 !important; }


/* ────────────────────────────────────────────────────────────────
   Nova: modern skin
   - Inter / system font stack
   - Indigo→violet accent
   - Glassmorphism navbar
   - Generous rounding & soft shadows
   - Smooth micro-interactions
   ──────────────────────────────────────────────────────────────── */
.wrapper.theme-nova {
    background: linear-gradient(180deg, #f5f6fb 0%, #eef0fa 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --nova-accent:   #6366f1;
    --nova-accent-2: #8b5cf6;
    --nova-accent-3: #4f46e5;
    --nova-ink:      #1e1b4b;
    --nova-soft:     #ffffff;
    --nova-border:   #e4e6f0;
    --nova-shadow:   0 10px 30px -10px rgba(79, 70, 229, .15);
}
/* Header: glassy bar with subtle gradient */
.wrapper.theme-nova .top-header {
    background: linear-gradient(135deg, rgba(99,102,241,.95), rgba(139,92,246,.95)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 4px 20px rgba(99,102,241,.18);
    border: none;
}
.wrapper.theme-nova .top-header .navbar-brand { letter-spacing: -.01em; }

/* Sidebar: soft card-like surface */
.wrapper.theme-nova .sidebar {
    background: #ffffff;
    border-right: 1px solid var(--nova-border);
    box-shadow: 1px 0 0 rgba(255,255,255,.5);
}
.wrapper.theme-nova .sidebar .it-sidebar-header,
.wrapper.theme-nova .sidebar .nav-section {
    color: #6b7280; font-size: .68rem; letter-spacing: .08em;
    text-transform: uppercase; font-weight: 600;
}
.wrapper.theme-nova .sidebar .nav-link {
    color: #475569; border-radius: 10px;
    margin: 2px 8px;
    transition: all .18s ease;
}
.wrapper.theme-nova .sidebar .nav-link:hover {
    background: linear-gradient(90deg, rgba(99,102,241,.08), rgba(139,92,246,.08));
    color: var(--nova-accent-3);
    transform: translateX(2px);
}
.wrapper.theme-nova .sidebar .nav-link.active {
    background: linear-gradient(90deg, var(--nova-accent), var(--nova-accent-2)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -6px rgba(99,102,241,.55);
}
.wrapper.theme-nova .sidebar .nav-link.active i,
.wrapper.theme-nova .sidebar .nav-link.active .nav-label { color: #ffffff !important; }

/* Cards: more rounding + lift on hover */
.wrapper.theme-nova .card {
    border: 1px solid var(--nova-border);
    border-radius: 14px;
    background: var(--nova-soft);
    box-shadow: 0 1px 3px rgba(30,27,75,.04);
    transition: transform .2s ease, box-shadow .2s ease;
}
.wrapper.theme-nova .cat-card { cursor: pointer; }
.wrapper.theme-nova .cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--nova-shadow);
    border-color: rgba(99,102,241,.35);
}
.wrapper.theme-nova .card-header {
    background: linear-gradient(180deg, #fafbff, #f5f6fb);
    border-bottom: 1px solid var(--nova-border);
    border-radius: 14px 14px 0 0;
    font-weight: 600;
}

/* Primary buttons: gradient + halo */
.wrapper.theme-nova .btn-primary {
    background: linear-gradient(135deg, var(--nova-accent), var(--nova-accent-2)) !important;
    border: none !important;
    box-shadow: 0 4px 12px -2px rgba(99,102,241,.4);
    font-weight: 500;
    transition: all .2s ease;
}
.wrapper.theme-nova .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -2px rgba(99,102,241,.55);
    filter: brightness(1.05);
}
.wrapper.theme-nova .btn-primary:active { transform: translateY(0); }
.wrapper.theme-nova .text-primary       { color: var(--nova-accent-3) !important; }
.wrapper.theme-nova .link-primary,
.wrapper.theme-nova a.text-primary      { color: var(--nova-accent-3) !important; }

/* Outline buttons & badges */
.wrapper.theme-nova .btn-outline-primary {
    color: var(--nova-accent-3);
    border-color: rgba(99,102,241,.35);
}
.wrapper.theme-nova .btn-outline-primary:hover {
    background: var(--nova-accent-3); color: #fff; border-color: var(--nova-accent-3);
}
.wrapper.theme-nova .badge.bg-primary {
    background: linear-gradient(135deg, var(--nova-accent), var(--nova-accent-2)) !important;
}

/* Tables: cleaner, softer hover */
.wrapper.theme-nova .table {
    border-radius: 12px;
    overflow: hidden;
}
.wrapper.theme-nova .table thead.table-light th {
    background: #f1f3fa;
    color: #4b5563;
    font-weight: 600; font-size: .8rem;
    letter-spacing: .03em; text-transform: uppercase;
    border-bottom: 1px solid var(--nova-border);
}
.wrapper.theme-nova .table tbody tr {
    transition: background-color .15s ease;
}
.wrapper.theme-nova .table-hover tbody tr:hover {
    background-color: rgba(99,102,241,.05) !important;
}
.wrapper.theme-nova .table-active {
    background-color: rgba(99,102,241,.08) !important;
}

/* Image cards: nicer rounding & soft placeholder */
.wrapper.theme-nova .img-loader {
    border-radius: 12px;
    background-color: #f5f6fb !important;
}
.wrapper.theme-nova .img-loader img { border-radius: 10px; }

/* Form controls: focus ring matches accent */
.wrapper.theme-nova .form-control:focus,
.wrapper.theme-nova .form-select:focus {
    border-color: rgba(99,102,241,.55);
    box-shadow: 0 0 0 .2rem rgba(99,102,241,.15);
}

/* Footer */
.wrapper.theme-nova .main-footer {
    background: transparent;
    border-top: 1px solid var(--nova-border);
}

/* Cart popup: soft accent border instead of harsh blue */
.wrapper.theme-nova .cat-card.border-primary,
.wrapper.theme-nova .border-primary { border-color: var(--nova-accent) !important; }

/* Spinner color in nova */
.wrapper.theme-nova .spinner-border.text-primary { color: var(--nova-accent) !important; }


html, body { height: 100%; }

.wrapper {
    display: flex;
    flex-direction: column;
    padding-top: var(--header-height);
    min-height: 100vh;
    background: #f8f9fa;
}

/* ── Header ──────────────────────────────────────────────────── */
.top-header { height: var(--header-height); z-index: 1040; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    background: #fff;
    border-right: 1px solid #dee2e6;
    position: fixed;
    top: var(--header-height);
    left: 0;
    z-index: 1030;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--transition), transform var(--transition);
    transform: translateX(-100%);
}

@media (min-width: 768px) {
    .sidebar                { transform: translateX(0); }
    .sidebar.collapsed      { width: var(--sidebar-collapsed); }
    .main-content {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        transition: margin-left var(--transition), width var(--transition);
    }
    .main-content.collapsed {
        margin-left: var(--sidebar-collapsed);
        width: calc(100% - var(--sidebar-collapsed));
    }
}

.sidebar.sidebar-open { transform: translateX(0); }

.sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1025;
}

/* ── Sidebar header ──────────────────────────────────────────── */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid #dee2e6;
    height: 44px;
}
.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: .5rem 0;
}
.sidebar-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #6c757d;
    white-space: nowrap;
    flex: 1;
    overflow: hidden;
    transition: opacity var(--transition);
}
.sidebar.collapsed .sidebar-label { opacity: 0; width: 0; flex: 0; padding: 0; }

/* ── Nav links ───────────────────────────────────────────────── */
.sidebar .nav-link {
    color: #495057;
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    transition: background .15s;
    text-decoration: none;
    white-space: nowrap;
}
.sidebar .nav-link:hover  { background: #f0f0f0; color: #000; }
.sidebar .nav-link.active { background: #e9f2ff; color: #0d6efd; font-weight: 500; }

/* Icon: fixed 20px wide, always visible */
.sidebar .nav-link i {
    font-size: 1.15rem;
    display: inline-block;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Label */
.nav-label {
    overflow: hidden;
    white-space: nowrap;
    transition: max-width var(--transition), opacity var(--transition);
    max-width: 160px;
    opacity: 1;
}

/* ── Collapsed state ─────────────────────────────────────────── */
.sidebar.collapsed .nav-link {
    padding: .55rem 0;
    justify-content: center;
    gap: 0;
    /* force full width so icon is centered in 56px */
    width: var(--sidebar-collapsed);
}
.sidebar.collapsed .nav-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
}

/* Section dividers */
.nav-section {
    padding: .3rem .75rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #adb5bd;
    white-space: nowrap;
    margin-top: .5rem;
    max-height: 30px;
    opacity: 1;
    overflow: hidden;
    transition: max-height var(--transition), opacity var(--transition),
                padding var(--transition), margin var(--transition);
}
.sidebar.collapsed .nav-section {
    max-height: 0; opacity: 0; padding: 0; margin: 0;
}

/* ── Main content ─────────────────────────────────────────────── */
.main-content { flex: 1 1 auto; padding: 0.5rem 1rem; min-width: 0; max-width: 100%; }

/* ── Footer ──────────────────────────────────────────────────── */
.main-footer {
    text-align: center;
    padding: 12px 1rem;
    font-size: .75rem;
    color: #6c757d;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
}
@media (min-width: 768px) {
    .main-footer {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        transition: margin-left var(--transition), width var(--transition);
    }
    .main-footer.collapsed {
        margin-left: var(--sidebar-collapsed);
        width: calc(100% - var(--sidebar-collapsed));
    }
}

/* ── Cart panel ───────────────────────────────────────────────── */
.cart-panel {
    position: fixed; bottom: 1rem; right: 1rem;
    width: 340px; max-width: calc(100vw - 2rem);
    z-index: 1050; border-radius: 12px; overflow: hidden;
}

/* ── Catalog cards ────────────────────────────────────────────── */
.cat-card { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.1) !important; }

/* Catalog grid — auto-fill with min 180px per card, fills full width */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    width: 100%;
}

/* ── Image loader (spinner behind img until it loads / placeholder on error) ── */
@keyframes img-loader-spin { to { transform: rotate(360deg); } }
.img-loader {
    position: relative;
    display: block;
    background-color: #eef0f3 !important;
    overflow: hidden;
}
.img-loader::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #cfd4da;
    border-top-color: #6c757d;
    border-radius: 50%;
    animation: img-loader-spin 0.9s linear infinite;
    z-index: 1;
}
.img-loader.no-image::before {
    border: none;
    animation: none;
    width: 48px; height: 48px;
    margin: -24px 0 0 -24px;
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E") center/48px no-repeat;
}
.img-loader img {
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity .25s ease-in;
}
.img-loader img.loaded { opacity: 1; }
.img-loader.loaded::before { display: none; }
.img-loader:has(img.loaded) {
    background-color: transparent !important;
}
.img-loader:has(img.loaded)::before { display: none; }

/* ── Error modal (Blazor ErrorBoundary) ─────────────────────────── */
.error-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 2000;
}
.error-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2001;
    width: min(560px, 92vw);
    max-height: 86vh;
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
    overflow: hidden;
}
.error-modal-header {
    background: #dc3545;
    color: #fff;
    padding: .75rem 1rem;
    font-weight: 600;
    display: flex; align-items: center;
}
.error-modal-body {
    padding: 1rem;
    overflow-y: auto;
}
.error-modal-body .error-msg {
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 6px;
    padding: .6rem .8rem;
    font-weight: 500;
    word-break: break-word;
}
.error-modal-body .error-details {
    margin-top: .75rem;
    max-height: 40vh;
    overflow: auto;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: .6rem;
    font-size: .8rem;
    white-space: pre-wrap;
}
.error-modal-footer {
    display: flex; align-items: center;
    padding: .6rem 1rem;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

/* ── Message body (HTML from Quill) ──────────────────────────── */
.message-body img { max-width: 100%; height: auto; }
.message-body p   { margin-bottom: .5rem; }

/* ── Toast ────────────────────────────────────────────────────── */
.toast { min-width: 240px; }