:root {
    --color-primary: #1B382B;
    --color-primary-dark: #14291F;
    --color-primary-hover: #254D3B;
    --color-accent-sand: #C5A880;
    --color-canvas: #F8F7F4;
    --color-card: #FFFFFF;
    --color-muted-surface: #F2EFE9;
    --color-border: #E6E2DA;
    --color-heading: #1C201E;
    --color-body: #48504B;
    --color-muted-text: #7E8782;

    --radius-card: 16px;
    --radius-control: 12px;
    --radius-pill: 9999px;

    --shadow-soft: 0 2px 12px -2px rgba(27, 56, 43, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-elevated: 0 8px 24px -4px rgba(27, 56, 43, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-canvas);
    color: var(--color-body);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c5a880; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a98d65; }

/* Sidebar Desktop Transition */
#sidebar { 
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}
#sidebar.collapsed {
    width: 5rem !important;
}
#sidebar.collapsed .sidebar-text,
#sidebar.collapsed .sidebar-brand,
#sidebar.collapsed .sidebar-profile { display: none !important; }
#sidebar.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
#sidebar.collapsed .nav-item span { display: none !important; }
#sidebar.collapsed .nav-item i { margin-right: 0; font-size: 1.25rem; }
#sidebar.collapsed .sidebar-brand-header { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }
#sidebar.collapsed #sidebar-toggle { margin: 0 auto; }

/* Active Navigation Indicator */
.nav-item.active {
    background-color: #14291F !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.2);
    border-left: 4px solid #C5A880 !important;
}
.nav-item.active i {
    color: #C5A880 !important;
}

/* Mobile Drawer Specific Rules */
@media (max-width: 767px) {
    #sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        width: 280px !important;
        transform: translateX(-100%);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
    }
    #sidebar.mobile-open {
        transform: translateX(0) !important;
    }
    #sidebar-backdrop.mobile-open {
        display: block !important;
    }
}

/* Smooth collapse for public monitor details */
.details-content {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin 0.3s ease-in-out, padding 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.details-content.open {
    max-height: 500px;
    opacity: 1;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top-width: 1px;
}
.details-toggle i {
    transition: transform 0.3s ease;
}
.details-toggle.open i {
    transform: rotate(180deg);
}