:root {
    --primary: #2563eb;
    --primary-dark: #1e40af;
    --primary-light: #60a5fa;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --bg-body: #f8fafc;
    --bg-sidebar: #ffffff;  /* Changed to match header */
    --bg-header: #ffffff;
    --bg-card: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-sidebar: #0f172a; /* New variable for sidebar text on light bg */
    --text-inverse: #f8fafc;
    --border: #e2e8f0;
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 70px;
    --header-height: 64px;
    --transition-speed: 0.3s;

    /* header.jsp 등에서 사용하는 별칭 변수 */
    --bg-hover: #f1f5f9;
    --text-primary: #0f172a;
    --border-color: #e2e8f0;
}

[data-theme='dark'] {
    --bg-body: #020617;
    --bg-sidebar: #1e293b; /* Dark mode sidebar */
    --bg-header: #1e293b;
    --bg-card: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-sidebar: #f8fafc;
    --text-inverse: #f8fafc;
    --border: #334155;

    /* header.jsp 등에서 사용하는 별칭 변수 */
    --bg-hover: #334155;
    --text-primary: #f8fafc;
    --border-color: #334155;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
    display: flex;
}

/* Sidebar Styles */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar); /* Updated text color */
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: width var(--transition-speed) ease;
    z-index: 1000;
    flex-shrink: 0;
    border-right: 1px solid var(--border); /* Added border for separation */
    /* Position fixed logic is handled by flex layout of body, but requirement says "fixed exposure". 
       The current flex layout keeps it fixed on the left while content scrolls. This satisfies the requirement. */
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    background-color: var(--bg-sidebar); /* Ensure background match */
}

.sidebar.collapsed .sidebar-header {
    padding: 0;
    justify-content: center;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 1;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.sidebar.collapsed .logo-area {
    display: none;
}

.sidebar.collapsed .sidebar-header button {
    margin: 0 auto;
}

.logo-img {
    height: 120px;
    width: 120px;
    object-fit: contain;
}

/* .logo-text removed */

.sidebar-nav {
    flex: 1;
    padding: 1.5rem 0.75rem;
    overflow-y: auto;
    background-color: var(--bg-sidebar);
}

.sidebar-nav ul {
    list-style: none;
}

.nav-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted); /* Updated color */
    font-weight: 700;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    white-space: nowrap;
}

.sidebar.collapsed .nav-header {
    display: none;
}

.nav-item {
    margin-bottom: 0.25rem;
}

/* 2-depth menu support */
.nav-sub-menu {
    padding-left: 1.5rem;
    display: none; /* Hidden by default */
}

.nav-item.open .nav-sub-menu {
    display: block;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-muted); /* Default text color */
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s;
    white-space: nowrap;
    cursor: pointer;
}

.nav-link:hover,
.nav-item.active > .nav-link {
    background-color: #f1f5f9; /* Lighter hover for light sidebar */
    color: var(--primary);
    font-weight: 500;
}

/* 하위 메뉴(nav-sub-menu) 내 active 링크 스타일 */
.nav-sub-menu li.active .nav-link,
.nav-sub-menu .nav-link.active {
    color: var(--primary);
    font-weight: 600;
    background-color: #e0f2fe;
}

[data-theme='dark'] .nav-link:hover,
[data-theme='dark'] .nav-item.active > .nav-link {
    background-color: rgba(255,255,255,0.1);
}

[data-theme='dark'] .nav-sub-menu li.active .nav-link,
[data-theme='dark'] .nav-sub-menu .nav-link.active {
    background-color: rgba(37, 99, 235, 0.2);
}


.sidebar.collapsed .nav-text, 
.sidebar.collapsed .nav-sub-menu,
.sidebar.collapsed .nav-arrow {
    display: none;
}

.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 0.75rem;
}

/* Layout Main */
.main-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    /* Ensure it takes remaining space properly without forced width */
}

/* Header Styles */
.top-header {
    height: var(--header-height);
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    flex-shrink: 0;
}

.page-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.top-menu {
    display: flex;
    gap: 1.5rem;
}

.top-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
}

.top-link:hover {
    color: var(--primary);
}

.divider-vertical {
    width: 1px;
    height: 24px;
    background-color: var(--border);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Content Area */
.content-area {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    background-color: var(--bg-body);
}

/* Reusing Card & Badge Styles from previous */
.role-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.role-USER {
    background: #dcfce7;
    color: #166534;
}

.role-OPERATOR {
    background: #fef9c3;
    color: #854d0e;
}

.role-ADMIN {
    background: #dbeafe;
    color: #1e40af;
}

.btn-icon {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.btn-icon:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.sidebar .btn-icon:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Adjusted for light sidebar */
}

.sidebar.collapsed .sidebar-header .collapse-btn i {
    transform: rotate(180deg);
}

.card {
    background: var(--bg-card);
    border-radius: 1rem;
    border: 1px solid var(--border);
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    min-width: 0;
    /* Allow shrinking */
}

.card-title {
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    min-width: 0;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    min-width: 0;
}

@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

.status-ok {
    color: var(--success);
    background: #ecfdf5;
}

.status-warn {
    color: var(--warning);
    background: #fffbeb;
}

.status-danger {
    color: var(--danger);
    background: #fef2f2;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    padding: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 1rem 0.75rem;
    font-size: 0.875rem;
    border-bottom: 1px dotted var(--border);
}

.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden;
    /* Critical for resizing */
}

.role-alert {
    text-align: center;
    padding: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}