/* ═══════════════════════════════════════════════════════════════
   CWD Admin — Main stylesheet
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
    --sidebar-w:      220px;
    --sidebar-bg:     #1a1d2e;
    --sidebar-text:   #b8bdd4;
    --sidebar-active: #4f7ef8;
    --header-h:       3.25rem;
    --header-bg:      #1a1d2e;
    --content-bg:     #f4f6fb;
    --primary:        #4f7ef8;
    --card-border:    #dde3ee;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px; }

/* ── Shell layout ───────────────────────────────────────────── */
.cwd-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Header */
.cwd-header {
    height: var(--header-h);
    flex-shrink: 0;
    background: var(--header-bg);
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    z-index: 100;
}

/* Body = sidebar + content side by side */
.cwd-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar wrapper */
.cwd-sidebar-wrapper {
    flex-shrink: 0;
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    overflow: hidden;
    transition: width .2s ease;
}
.cwd-sidebar-wrapper.closed { width: 0; }

/* Content area */
.cwd-content {
    flex: 1;
    overflow-y: auto;
    background: var(--content-bg);
    padding: 1.25rem 1.5rem;
}

/* ── Header navbar ──────────────────────────────────────────── */
.header-navbar {
    display: flex;
    align-items: center;
    height: var(--header-h);
    padding: 0 .5rem;
    gap: .5rem;
}

.header-logo {
    height: 1.9rem;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
}

.navbar-toggler {
    border: none;
    background: transparent;
    padding: .4rem .6rem;
    cursor: pointer;
    color: rgba(255,255,255,.85);
    font-size: 1rem;
    border-radius: 4px;
    flex-shrink: 0;
}
.navbar-toggler:hover { background: rgba(255,255,255,.1); }
.navbar-toggler-icon {
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,.9)' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: var(--sidebar-w);
    overflow: hidden;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .5rem 0;
}

/* Nav list */
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list .nav-section-label {
    display: block;
    padding: .9rem 1rem .25rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    white-space: nowrap;
}

.nav-list .nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: .88rem;
    white-space: nowrap;
    border-radius: 0;
    transition: background .12s;
}
.nav-list .nav-item:hover  { background: rgba(255,255,255,.07); color: #fff; }
.nav-list .nav-item.active { background: var(--sidebar-active); color: #fff; font-weight: 600; }

.sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .75rem 1rem;
}

/* ── Culture selector ───────────────────────────────────────── */
.culture-selector { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.culture-label { color: rgba(255,255,255,.5); font-size: .75rem; white-space: nowrap; }

/* ── Login ──────────────────────────────────────────────────── */
.login-backdrop {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1d2e 0%, #2d3256 100%);
}
.login-card {
    background: #fff;
    border-radius: 14px;
    padding: 2rem 2.25rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.login-logo { text-align: center; margin-bottom: 1.5rem; }
.login-logo-img { height: 52px; object-fit: contain; margin-bottom: .5rem; }
.login-logo h4  { font-weight: 800; color: #1a1d2e; margin: 0; font-size: 1.2rem; }

/* ── Home cards ─────────────────────────────────────────────── */
.home-card {
    border: 1px solid var(--card-border);
    border-radius: 10px;
    transition: box-shadow .15s, transform .15s;
    cursor: pointer;
    background: #fff;
}
.home-card:hover { box-shadow: 0 4px 18px rgba(79,126,248,.18); transform: translateY(-2px); }
.home-icon { color: var(--primary); min-width: 36px; text-align: center; }

/* ── Grid toolbar icon classes (DevExpress references) ──────── */
.grid-toolbar-new,
.grid-toolbar-edit,
.grid-toolbar-delete,
.grid-toolbar-export,
.grid-toolbar-column-chooser { display: inline-block; width: 16px; height: 16px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.grid-toolbar-new    { background-image: url('images/icons/grid-toolbar-new.svg'); }
.grid-toolbar-edit   { background-image: url('images/icons/grid-toolbar-edit.svg'); }
.grid-toolbar-delete { background-image: url('images/icons/grid-toolbar-delete.svg'); }
.grid-toolbar-export { background-image: url('images/icons/export.svg'); }
.grid-toolbar-column-chooser { background-image: url('images/icons/column-chooser.svg'); }

/* ── Empty state ────────────────────────────────────────────── */
.cwd-empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 3rem; border: 2px dashed #d0d7e8;
    border-radius: 10px; color: #9aa3b8;
}

/* ── Filter controls ────────────────────────────────────────── */
.filter-input { width: 180px; }
.filter-date  { width: 140px; }
.filter-combo { width: 200px; }

/* ── Update banner ──────────────────────────────────────────── */
.update-banner { position: sticky; top: 0; z-index: 200; }

/* ── Blazor error UI ────────────────────────────────────────── */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0; left: 0; right: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    padding: .6rem 1.25rem;
    position: fixed;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cwd-sidebar-wrapper { position: absolute; z-index: 50; height: calc(100vh - var(--header-h)); top: var(--header-h); }
    .cwd-sidebar-wrapper.closed { width: 0; }
    .cwd-content { padding: .75rem; }
}

/* ─── Loading overlay ─────────────────────────────────────────────────────── */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-box {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    min-width: 160px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e7ff;
    border-top-color: var(--primary, #4f7ef8);
    border-radius: 50%;
    animation: loading-spin .7s linear infinite;
}

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

.loading-message {
    font-size: .9rem;
    font-weight: 500;
    color: #4a5568;
    text-align: center;
}

/* ─── Loading overlay ─────────────────────────────────────────────────────── */
/* position:fixed + z-index:9999 → floats above everything, zero effect on layout */
.cwd-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 18, 40, 0.55);
    backdrop-filter: blur(3px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* no width/height/margin/padding that could push content */
}

.cwd-loading-box {
    background: #ffffff;
    border-radius: 14px;
    padding: 2rem 2.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    min-width: 180px;
}

.cwd-loading-spinner {
    width: 52px;
    height: 52px;
    border: 5px solid #e8edf8;
    border-top-color: #4f7ef8;
    border-radius: 50%;
    animation: cwd-spin .65s linear infinite;
    flex-shrink: 0;
}

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

.cwd-loading-message {
    font-size: .88rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* ─── Theme switcher button — always visible on any header background ──────── */
.cwd-theme-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.cwd-theme-btn:hover {
    background: rgba(255, 255, 255, 0.28) !important;
}
.cwd-theme-btn-active {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}
.cwd-theme-btn .fa-palette {
    color: #ffffff !important;
}