:root {
    --bs-primary: #1EAAE7;
    --bs-primary-rgb: 30, 170, 231;
    --bs-secondary: #AC39D4;
    --bs-secondary-rgb: 172, 57, 212;
    --bs-success: #2BC155;
    --bs-success-rgb: 43, 193, 85;
    --bs-warning: #FE8024;
    --bs-warning-rgb: 254, 128, 36;
    --bs-danger: #FF2E2E;
    --bs-danger-rgb: 255, 46, 46;
    --bs-dark: #222B40;
    --bs-dark-rgb: 34, 43, 64;

    --bs-body-color: #667085;
    --bs-heading-color: #222B40;
    --bs-link-color: #1EAAE7;
    --bs-link-hover-color: #178bc0;
    --bs-border-color: #e7e7e7;

    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;

    --bs-danger-text-emphasis: #b0221f;
    --bs-danger-bg-subtle: #ffe6e6;
    --bs-danger-border-subtle: #ffb3b3;
    --bs-success-text-emphasis: #1c7a3b;
    --bs-success-bg-subtle: #e3f9ea;
    --bs-success-border-subtle: #a6e6bb;
    --bs-warning-text-emphasis: #b85a12;
    --bs-warning-bg-subtle: #fff1e5;
    --bs-warning-border-subtle: #ffcb9e;

    --sidebar-width: 16rem;
}

body {
    background-color: #F4F5F9;
    color: var(--bs-body-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--bs-heading-color);
    font-weight: 600;
}

code {
    word-break: break-all;
}

/* ---- Buttons ---- */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: .5rem;
    box-shadow: 0 2px 4px rgba(20, 20, 43, .06);
}

.btn-sm {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .3rem;
    box-shadow: none;
}

.btn-link {
    box-shadow: none;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #178bc0;
    --bs-btn-hover-border-color: #178bc0;
    --bs-btn-active-bg: #136f9c;
    --bs-btn-active-border-color: #136f9c;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 30, 170, 231;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 30, 170, 231;
}

.btn-outline-secondary {
    --bs-btn-color: #667085;
    --bs-btn-border-color: #d0d5dd;
    --bs-btn-hover-bg: #667085;
    --bs-btn-hover-border-color: #667085;
    --bs-btn-active-bg: #667085;
    --bs-btn-active-border-color: #667085;
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
    --bs-btn-focus-shadow-rgb: 255, 46, 46;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}

/* ---- App shell / sidebar (desktop only) ---- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-content-wrap {
    flex: 1;
    min-width: 0;
}

.app-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background-color: #fff;
    border-right: 1px solid var(--bs-border-color);
}

.app-sidebar .sidebar-brand {
    display: block;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.app-sidebar .sidebar-nav {
    padding: 1rem .75rem;
}

.app-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    margin-bottom: .25rem;
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    font-weight: 500;
    text-decoration: none;
}

.app-sidebar .sidebar-link i {
    font-size: 1.1rem;
    color: #a0a8b4;
}

.app-sidebar .sidebar-link:hover {
    background-color: #F4F5F9;
    color: var(--bs-heading-color);
}

.app-sidebar .sidebar-link.active {
    background-color: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
}

.app-sidebar .sidebar-link.active i {
    color: var(--bs-primary);
}

.app-sidebar .sidebar-footer {
    margin-top: auto;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}
@media(max-width: 992px){
    .nav-opener {
        position: fixed; right: 1rem; top: 1rem; width: 30px; height: 20px; z-index: 10; overflow: hidden; 
        span {
            display: block; content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: var( --bs-danger-bg-subtle); transition: all 0.4s ease; transform-origin: center center; 
        }
        span:nth-child(2){
            top: 50%; margin-top: -1px; 
        }
        span:nth-child(3){
             bottom: 0; 
        }
    }
    #navMain {
        position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: var(--bs-success-text-emphasis); display: flex; align-items: center; justify-content: center; z-index: 9; opacity: 0; pointer-events: none; transition: all 0.5s ease;
        ul {
            text-align: center; 
        }
    }
    body.nav-visible {
         .nav-opener {
            span:nth-child(1){
                rotate: 45deg; top: 50%; 
            }
            span:nth-child(2){
                left: -100%; 
            }
            span:nth-child(3){
                rotate: -45deg; bottom: 50%; 
            }
         }
        #navMain {
            opacity: 1; pointer-events: auto; 
        }
    }
}