/* =========================================================
   पोषण व्यवस्थापन प्रणाली — Admin area styling
   Uses the brand palette defined in site.css (:root variables)
   ========================================================= */

body {
    background-color: var(--brand-green-lighter);
}

/* ---------- Top bar ---------- */
.admin-topbar {
    background-color: var(--brand-green-dark);
    border-bottom: 3px solid var(--brand-accent);
}

.admin-topbar .navbar-brand {
    display: flex;
    align-items: center;
    font-weight: 700;
}

.admin-brand-logo {
    height: 34px;
    width: auto;
    margin-right: 0.6rem;
    border-radius: 4px;
    background-color: var(--brand-white);
    padding: 2px;
}

/* ---------- Layout ---------- */
.admin-wrapper {
    display: flex;
    min-height: calc(100vh - 56px);
}

.admin-sidebar {
    width: 260px;
    flex-shrink: 0;
    background-color: var(--brand-green-darkest);
    border-right: 1px solid var(--brand-green-dark);
    padding-top: 1rem;
    /* Stay fixed in place while the report content scrolls: sticky to the viewport just below
       the top bar, with its own independent scrollbar if the menu itself grows taller than the
       screen, instead of scrolling away with the page body. */
    position: sticky;
    top: 56px;
    align-self: flex-start;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

.admin-sidebar .nav-link {
    color: var(--brand-green-light);
    padding: 0.65rem 1.1rem;
    border-left: 3px solid transparent;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--brand-white);
    border-left-color: var(--brand-accent);
}

.admin-sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--brand-white);
    border-left-color: var(--brand-accent);
    font-weight: 600;
}

.admin-sidebar .collapse .nav-link {
    color: #cfe0ee;
    font-size: 0.92rem;
}

.admin-content {
    flex-grow: 1;
    padding: 1.5rem;
}

@media (max-width: 767.98px) {
    .admin-sidebar {
        position: fixed;
        top: 56px;
        left: -260px;
        bottom: 0;
        z-index: 1030;
        transition: left 0.2s ease-in-out;
        overflow-y: auto;
        background-color: var(--brand-green-darkest);
    }

    .admin-sidebar.show {
        left: 0;
    }
}

/* ---------- Dashboard cards ---------- */
.dashboard-card {
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(18, 51, 42, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(18, 51, 42, 0.14);
}

.dashboard-card.text-bg-success {
    background-color: var(--brand-green) !important;
}

.dashboard-card.text-bg-primary {
    background-color: var(--brand-green-dark) !important;
}

.dashboard-card.text-bg-info {
    background-color: #2f6f8f !important;
}

/* These dashboard cards use dark brand backgrounds, so their title/description text (and the
   "हेर्नुहोस्" link button) must stay white/light for contrast regardless of the page's
   default text color. */
.dashboard-card.text-bg-success .card-title,
.dashboard-card.text-bg-success .card-text,
.dashboard-card.text-bg-primary .card-title,
.dashboard-card.text-bg-primary .card-text,
.dashboard-card.text-bg-info .card-title,
.dashboard-card.text-bg-info .card-text {
    color: var(--brand-white) !important;
}

/* ---------- Cards / panels used throughout Admin views ---------- */
.card {
    border: 1px solid var(--brand-border);
}

.card-header {
    background-color: var(--brand-green-light);
    color: var(--brand-green-darkest);
    font-weight: 600;
    border-bottom: 1px solid var(--brand-border);
}

.table thead {
    background-color: var(--brand-green-light);
}

.table thead th {
    color: var(--brand-green-darkest);
    border-bottom: 2px solid var(--brand-green);
}

/* ---------- Survey question cards ---------- */
.question-card {
    margin-bottom: 1rem;
}

.question-card .card-header {
    font-weight: 600;
}

.child-panel {
    border-left: 3px solid var(--brand-green);
    background-color: var(--brand-green-lighter);
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 0 0.4rem 0.4rem 0;
}

/* ---------- Login page ---------- */
.login-page-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-green-darkest);
    /* Layered: soft glow highlights + a subtle repeating leaf/grain motif (inline SVG,
       no external image file needed) + the base brand gradient, back to front. */
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.07) 0, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(245, 166, 35, 0.18) 0, transparent 50%),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='2'%3E%3Cpath d='M20 100c0-30 20-50 50-50'/%3E%3Cpath d='M20 100c15-5 25-15 25-30'/%3E%3Ccircle cx='95' cy='25' r='10'/%3E%3Cpath d='M95 15v20M85 25h20'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--brand-green-darkest) 0%, var(--brand-green-dark) 45%, var(--brand-green) 100%);
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    background-size: auto, auto, 120px 120px, cover;
    position: relative;
    overflow: hidden;
}

.login-card {
    position: relative;
    z-index: 1;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.login-logo {
    height: 64px;
    width: auto;
    margin-bottom: 0.75rem;
}

.login-card .btn-success {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.login-card .btn-success:hover {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}