/* ================================
   YaPEIM Dashboard Styles (Frosted)
   ================================ */

body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #111827;
}

/* --- Frosted Glass Navbar --- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    /* Semi-transparent emerald/teal with gradient */
    background: linear-gradient(180deg, rgba(10, 104, 56, 0.80) 0%, rgba(7, 93, 84, 0.80) 100%) !important;
    /* Glass blur */
    -webkit-backdrop-filter: saturate(130%) blur(10px);
    backdrop-filter: saturate(130%) blur(10px);
    /* Premium divider line in gold */
    border-bottom: 3px solid #cfae3d;
    /* Soft shadow when content scrolls beneath */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.brand-logo {
    height: 55px; /* adjust size here if needed */
    width: auto;
    display: block;
}

.navbar .navbar-brand {
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 0.4px;
    font-size: 1.35rem;
}

    .navbar .navbar-brand:hover {
        color: #fffbeb !important;
    }

.navbar .container-fluid {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* --- Live Clock --- */
.clock-chip {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.875rem;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: saturate(120%) blur(4px);
    -webkit-backdrop-filter: saturate(120%) blur(4px);
    white-space: nowrap;
}

/* --- Filter Bar (under navbar) --- */
.filter-bar {
    position: sticky;
    top: 64px; /* sits neatly below frosted navbar */
    z-index: 1019;
    background: #f5f8f6;
    border-bottom: 1px solid #e6ece8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

    .filter-bar .container {
        padding: 10px 12px;
    }

.filter-label {
    color: #0a5d2a;
    font-weight: 600;
}

.filter-select {
    min-width: 180px;
    border-radius: 12px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
}

/* --- Accessibility Helper --- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 1px, 1px);
    white-space: nowrap;
    border: 0;
}

/* --- Dashboard Background --- */
.dashboard-bg {
    background: linear-gradient(180deg, #f2f7f4 0%, #ffffff 100%);
    min-height: 100vh;
}

/* --- Cards --- */
.card {
    border-radius: 12px !important;
    overflow: hidden;
}

.metric-card, .chart-card {
    transition: all 0.3s ease;
    border-radius: 12px;
}

    .metric-card:hover, .chart-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .metric-card .card-body {
        display: flex;
        align-items: center;
        gap: 12px;
    }

.icon-pill {
    background: #e6f4ea;
    color: #0b5d1e;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 1.25rem;
}

    .icon-pill.gold {
        background: #fff8e1;
        color: #a07d00;
    }

.small-muted {
    font-size: 0.85rem;
    color: #6b7280;
}

/* --- Placeholder Chart --- */
.placeholder-chart {
    text-align: center;
    padding: 40px 10px;
    border: 1px dashed #cfcfcf;
    border-radius: 10px;
    color: #6b7280;
    background: #fafafa;
}

/* --- Buttons & Form Styles --- */
.btn {
    border-radius: 10px !important;
}

.form-select.form-select-sm {
    background-color: #ffffff;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
}

/* --- Headings --- */
h2 {
    letter-spacing: 0.3px;
    color: #0b5d1e;
}

/* --- Footer --- */
footer {
    border-top: 1px solid #e6ece8;
    background: #f9faf9;
    color: #6b7280;
}

/* --- Responsive Tweaks --- */
@media (max-width: 768px) {
    .filter-bar .container {
        flex-direction: column;
        gap: 8px;
    }

    .filter-select {
        width: 100%;
    }

    .clock-chip {
        display: none;
    }
}
/* === Alignment & Layout Fix for Navbar and Filter Bar === */

/* Make logo + title perfectly centered with the filter controls */
.navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* Keep logo and text aligned together */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    height: 55px;
    width: auto;
    display: block;
    margin-top: 0; /* remove any vertical offset */
}

/* Make the clock and filter bar align to same center line visually */
.clock-chip {
    align-self: center;
}

/* Make the filter bar closer to navbar (reduce the gap) */
.filter-bar {
    position: sticky;
    top: 66px; /* sits snugly below the frosted navbar */
    background: #f5f8f6;
    border-bottom: 1px solid #e6ece8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    z-index: 1019;
    padding-top: 2px;
    padding-bottom: 2px;
}

    /* Align filter elements neatly in one line */
    .filter-bar .container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        padding: 8px 16px;
    }

/* Adjust label positioning */
.filter-label {
    color: #0a5d2a;
    font-weight: 600;
    margin-top: 2px;
}

/* Slightly smaller rounded selects for elegance */
.filter-select {
    min-width: 180px;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid #d9e2da;
    padding: 4px 8px;
    height: 34px;
    line-height: 1.2;
    font-size: 0.9rem;
}

/* Smooth transition for top layout */
.navbar,
.filter-bar {
    transition: all 0.3s ease;
}

/* Dim the month select when disabled (admin) */
#monthSelect.disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

/* --- Differentiate cumulative vs yearly metric cards --- */

/* === PREMIUM GOLD VERSION (OPTION A) === */

.metric-card-total {
    position: relative;
    background: linear-gradient(135deg, #fdfbf4, #faf6eb); /* Soft gold ivory */
    border: 1px solid #e9ddc7; /* Muted gold border */
    box-shadow: 0 8px 20px rgba(148, 113, 15, 0.08); /* golden soft shadow */
    overflow: hidden;
}

    /* Left gold accent strip */
    .metric-card-total::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 6px;
        height: 100%;
        background: linear-gradient(#e7c56c, #c9a441);
        border-radius: 6px 0 0 6px;
    }

    /* Gold geometric glow (very faint) */
    .metric-card-total::after {
        content: "";
        position: absolute;
        right: -40px;
        top: -40px;
        width: 140px;
        height: 140px;
        border-radius: 999px;
        background: radial-gradient(circle at center, rgba(231, 197, 108, 0.22), rgba(231, 197, 108, 0) 70%);
        pointer-events: none;
    }

    /* Gold icon tint */
    .metric-card-total .icon-pill {
        background: rgba(217, 160, 14, 0.12);
        color: #7a6200;
    }

    /* Hover gold glow */
    .metric-card-total:hover {
        box-shadow: 0 18px 40px rgba(217, 160, 14, 0.22);
    }

/* --- Label Pills --- */

.metric-label-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

    /* Cumulative (1985–kini) pill — GOLD */
    .metric-label-pill.total {
        background-color: #f3e7c1; /* Warm gold */
        color: #7a6200;
    }

    /* Yearly pill — GREEN */
    .metric-label-pill.yearly {
        background-color: #e3f4ea;
        color: #166534;
    }

/* === PREMIUM GREEN YEARLY CARDS (TAHUN XXXX) === */

.metric-card-year {
    position: relative;
    background: linear-gradient(135deg, #f4faf6, #f8fdf9); /* soft greenish white */
    border: 1px solid #cfe7d7; /* muted green border */
    box-shadow: 0 8px 20px rgba(15, 118, 80, 0.08); /* soft green shadow */
    overflow: hidden;
}

    /* Left green accent strip */
    .metric-card-year::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 6px;
        height: 100%;
        background: linear-gradient(#22c55e, #16a34a); /* emerald gradient */
        border-radius: 6px 0 0 6px;
    }

    /* Slight soft glow (top-right) */
    .metric-card-year::after {
        content: "";
        position: absolute;
        right: -40px;
        top: -40px;
        width: 140px;
        height: 140px;
        border-radius: 999px;
        background: radial-gradient(circle at center, rgba(34, 197, 94, 0.16), rgba(34, 197, 94, 0) 70%);
        pointer-events: none;
    }

    /* Icon tint for yearly cards */
    .metric-card-year .icon-pill {
        background: rgba(34, 197, 94, 0.12);
        color: #166534;
    }

    /* Slightly stronger green shadow on hover */
    .metric-card-year:hover {
        box-shadow: 0 18px 40px rgba(22, 163, 74, 0.22);
    }