:root {
    --app-sidebar-width: 248px;
    --app-sidebar-bg: #1f2937;
    --app-sidebar-fg: #cbd5e1;
    --app-sidebar-active: #2563eb;
    --app-header-h: 60px;
}

body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.925rem;
}

/* ---------- layout shell ---------- */

.app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--app-sidebar-width);
    background: var(--app-sidebar-bg);
    color: var(--app-sidebar-fg);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .2s ease;
}

.app-sidebar .brand {
    height: var(--app-header-h);
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 1.1rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: .3px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-decoration: none;
}

.app-sidebar .brand:hover { color: #fff; }

.app-sidebar .nav-link {
    color: var(--app-sidebar-fg);
    padding: .65rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    border-left: 3px solid transparent;
    font-size: .93rem;
}

.app-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.app-sidebar .nav-link.active {
    background: rgba(37, 99, 235, .18);
    border-left-color: var(--app-sidebar-active);
    color: #fff;
}

.app-sidebar .nav-link.disabled { opacity: .45; pointer-events: none; }

.app-sidebar .sidebar-footer {
    margin-top: auto;
    padding: .9rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .82rem;
}

.app-main {
    margin-left: var(--app-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    height: var(--app-header-h);
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.app-content { padding: 1.5rem 1.25rem 3rem; flex: 1; }

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.show { transform: translateX(0); }
    .app-main { margin-left: 0; }
}

/* ---------- pieces ---------- */

.page-title { font-size: 1.35rem; font-weight: 600; margin: 0; }

.card {
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid #eef0f3;
    font-weight: 600;
    padding: .85rem 1.1rem;
}

.stat-card .stat-value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.stat-card .stat-label { color: #6b7280; font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; }
.stat-card .stat-icon { font-size: 1.6rem; opacity: .35; }

.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7280;
    font-weight: 600;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.badge-soft-success { background: #dcfce7; color: #166534; }
.badge-soft-danger  { background: #fee2e2; color: #991b1b; }
.badge-soft-warning { background: #fef3c7; color: #92400e; }
.badge-soft-info    { background: #dbeafe; color: #1e40af; }
.badge-soft-muted   { background: #f1f5f9; color: #475569; }

.empty-state { text-align: center; padding: 3rem 1rem; color: #6b7280; }
.empty-state i { font-size: 2.4rem; opacity: .35; display: block; margin-bottom: .6rem; }

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.login-card { width: 100%; max-width: 400px; }

.table-actions .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .45rem; --bs-btn-font-size: .8rem; }

.required-mark::after { content: " *"; color: #dc2626; }