/* ============================================
   Base — Design System Variables, Reset, Layout
   ============================================ */

:root {
    --color-primary:       #2563eb;
    --color-primary-dark:  #1e40af;
    --color-primary-light: #dbeafe;
    --color-primary-50:    #eff6ff;

    --color-success:       #16a34a;
    --color-success-light: #dcfce7;
    --color-warning:       #d97706;
    --color-warning-light: #fef3c7;
    --color-danger:        #dc2626;
    --color-danger-light:  #fee2e2;

    --color-bg:            #f5f7fa;
    --color-surface:       #ffffff;
    --color-border:        #e2e8f0;
    --color-text:          #1e293b;
    --color-text-muted:    #64748b;
    --color-text-light:    #94a3b8;

    --sidebar-bg:          #1e293b;
    --sidebar-text:        #cbd5e1;
    --sidebar-active:      #2563eb;
    --sidebar-hover:       #334155;
    --sidebar-width:       260px;

    --radius:              0.5rem;
    --radius-lg:           0.75rem;
    --shadow-sm:           0 1px 2px rgba(0,0,0,0.05);
    --shadow:              0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:           0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --transition:          0.2s ease;
}

/* ---- Reset & Base ---- */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-bg);
    display: flex;
    min-height: 100vh;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: none; }

/* ---- Main Content ---- */

#main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--transition);
}

body.sidebar-collapsed #main-content { margin-left: 0; }
body.sidebar-collapsed .sidebar { transform: translateX(calc(-1 * var(--sidebar-width))); }

/* ---- Topbar ---- */

.topbar {
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    height: 56px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-toggle {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    padding: 0.25rem 0.5rem;
    margin-right: 1rem;
}

.topbar-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* ---- Content Area ---- */

.content-area {
    padding: 1.5rem;
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
}

/* ---- Responsive ---- */

@media (max-width: 992px) {
    .sidebar { transform: translateX(calc(-1 * var(--sidebar-width))); }
    .sidebar.open { transform: translateX(0); }
    #main-content { margin-left: 0; }
}

@media (max-width: 576px) {
    .content-area { padding: 1rem; }
}