/* ===========================================================================
   app.css — custom styles layered on top of Bootstrap 5.
   Keep this small; prefer Bootstrap utility classes in the HTML.
   =========================================================================== */

:root {
    --wa-green: #00a884;
    --wa-green-dark: #06231d;
    --sidebar-bg: #111b21;
    --sidebar-hover: #202c33;
    --sidebar-width: 260px;
}

body {
    background: #f4f6f8;
}

/* ----- Layout ----- */
.layout {
    min-height: 100vh;
}

.content-area {
    min-width: 0; /* lets tables scroll instead of overflowing the flex row */
}

/* ----- Sidebar ----- */
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg) !important;
}

@media (min-width: 768px) {
    /* On desktop the sidebar is a fixed, full-height column. */
    .sidebar {
        min-height: 100vh;
        position: sticky;
        top: 0;
    }
}

.sidebar .brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar .nav-link {
    color: #aebac1;
    padding: 0.7rem 1.25rem;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.95rem;
}

.sidebar .nav-link:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.sidebar .nav-link.active {
    color: #fff;
    background: var(--sidebar-hover);
    border-left-color: var(--wa-green);
}

.sidebar .nav-link svg {
    flex: 0 0 20px;
    opacity: 0.9;
}

.sidebar .nav-section {
    color: #6b7c85;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1rem 1.25rem 0.35rem;
}

/* ----- Topbar ----- */
.topbar {
    background: #fff;
    border-bottom: 1px solid #e6e9ec;
    height: 60px;
}

/* ----- Buttons / accents ----- */
.btn-wa {
    background: var(--wa-green);
    border-color: var(--wa-green);
    color: var(--wa-green-dark);
    font-weight: 600;
}
.btn-wa:hover {
    background: #06cf9c;
    border-color: #06cf9c;
    color: var(--wa-green-dark);
}

.text-wa { color: var(--wa-green) !important; }

/* Toast container */
.toast-container {
    z-index: 1090;
}