/* ========== Theme Tokens (Dark) ========== */
:root {
    /* palette */
    --brand-green: #00e59b;
    --surface-0: #000;
    --surface-1: #0b0b0b;
    --text-0: #f4f4f4;
    --border-0: #21272b;

    /* bootstrap var overrides */
    --bs-body-bg: var(--surface-0);
    --bs-body-color: var(--text-0);
    --bs-border-color: var(--border-0);
    --bs-card-bg: var(--surface-0);
    --bs-card-border-color: var(--border-0);
    --bs-navbar-color: var(--text-0);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-brand-color: var(--text-0);
    --bs-navbar-toggler-border-color: var(--border-0);
    --bs-table-color: var(--text-0);
    --bs-table-bg: var(--surface-0);
    --bs-table-border-color: var(--border-0);
}

/* ========== Base ========== */
html, body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Remove harsh focus glow globally; keep accessibility via :focus-visible */
.form-control:focus,
.btn:focus,
.nav-link:focus {
    box-shadow: none;
    outline: none;
}
:focus-visible {
    outline: 2px solid var(--border-0);
    outline-offset: 2px;
}

/* ========== Cards ========== */
.card,
.card-dark {
    background-color: var(--bs-card-bg);
    border: 1px solid var(--border-0) !important;
}

.card-dark .card-header {
    border-bottom: 1px solid #2b2b2b !important;
}

/* ========== Navbar ========== */
.navbar {
    background: #000000 !important;
    border-bottom: 1px solid var(--border-0);
}
.navbar-brand {
    padding: .75rem 1rem;
    font-size: 1rem;
}
.nav-link {
    color: var(--bs-navbar-color);
}
.nav-link:hover,
.nav-link:focus {
    color: var(--bs-navbar-hover-color);
}
.navbar-toggler {
    top: .25rem;
    right: 1rem;
}

/* ========== Forms ========== */
.form-control {
    background-color: transparent;
    color: var(--text-0);
    border-color: var(--border-0);
}
.form-control::placeholder {
    color: rgba(244,244,244,.6);
}
.form-control:focus {
    border-color: var(--border-0);
}
.form-floating > label {
    color: var(--text-0);
    opacity: .8;
}

/* Optional darker fill variant without !important */
.form-control-dark {
    color: var(--text-0);
    background-color: rgba(255,255,255,.08);
    border: 1px solid var(--border-0);
    border-radius: 0;
}
.form-control-dark:focus {
    border-color: var(--border-0);
    box-shadow: 0 0 0 .25rem rgba(255,255,255,.06);
}

/* ========== Sidebar ========== */
.sidebar {
    padding-top: 5rem !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    background-color: var(--surface-0);
    box-shadow: inset -1px 0 0 rgba(0,0,0,.1);
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--border-0);
}
@media (max-width: 767.98px) {
    .sidebar { top: 5rem; }
}

/* ========== Main Container ========== */
.mainbody {
    padding-left: 0;
    padding-right: 0;
}

/* ========== Tables (dark) ========== */
.table {
    --bs-table-bg: var(--surface-0);
    --bs-table-color: var(--text-0);
    --bs-table-border-color: var(--border-0);
}
.table > :not(caption) > * > * {
    background-color: var(--surface-0);
}

/* ========== Buttons ========== */
/* Custom green button using BS 5.3 CSS vars */
.btn-green {
    --bs-btn-color: #000000;
    --bs-btn-bg: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-bg: #34e490;
    --bs-btn-hover-border-color: #34e490;
    --bs-btn-active-bg: #2fce82;
    --bs-btn-active-border-color: #2fce82;
    --bs-btn-disabled-bg: var(--brand-green);
    --bs-btn-disabled-border-color: var(--brand-green);
}

/* Soft light button */
.btn-custom-light {
    --btn-light-bg: #e9f5ef;
    --btn-light-text: #0f3727;

    --bs-btn-bg: var(--btn-light-bg);
    --bs-btn-color: var(--btn-light-text);
    --bs-btn-border-color: var(--btn-light-bg);

    /* hover */
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--btn-light-bg);
    --bs-btn-hover-border-color: var(--btn-light-bg);

    /* focus */
    --bs-btn-focus-bg: transparent;
    --bs-btn-focus-color: var(--btn-light-bg);
    --bs-btn-focus-border-color: var(--btn-light-bg);

    /* active */
    --bs-btn-active-bg: transparent;
    --bs-btn-active-color: var(--btn-light-bg);
    --bs-btn-active-border-color: var(--btn-light-bg);

    /* disabled */
    --bs-btn-disabled-bg: var(--btn-light-bg);
    --bs-btn-disabled-color: var(--btn-light-text);
    --bs-btn-disabled-border-color: var(--btn-light-bg);
}

.btn-custom-light:focus-visible {
    outline: 2px solid var(--btn-light-bg);
    outline-offset: 2px;
}

.success-top {
    background: #34e490 !important;
    border-radius: 0px !important;
}

.card-mail-read {
    background: #2b2b2b78 !important;
}

.card-mail {
    border-radius: 0px !important;
}

.link-active {
    background: #2b2b2b;
    border-radius: 4px;
}

.pagination {
    padding: 0.5rem;
    border-radius: 0.375rem;
}
.pagination .page-link {
    background-color: #000;
    color: #f4f4f4;
    border: 1px solid #444;
}
.pagination .page-link:hover {
    background-color: #222;
    color: #f4f4f4;
    border-color: #666;
}
.pagination .disabled .page-link {
    background-color: #111;
    color: #777;
    border-color: #333;
    pointer-events: none;
}
.month-select {
    display:none;
}

/* hide radios per your pattern */
.month-select {
    display:none;
}

/* base label */
.css-select-box {
    display:block;
    width:100%;
    padding:12px 14px;
    background:transparent;
    color:#fff;
    border:1px solid var(--border-0);
    border-radius:8px;
    cursor:pointer;
    transition:border-color .12s ease, box-shadow .12s ease, background-color .12s ease, transform .08s ease;
}

/* hover/press feedback */
.css-select-box:hover { transform:translateY(-1px);border-color:rgba(255,255,255,.25); }
.css-select-box:active { transform:translateY(0); }

/* SELECTED STATE — works for both adjacent (+) and general sibling (~) */
.month-select:checked + .css-select-box,
.month-select:checked ~ .css-select-box {
    border-color:var(--brand-green);
    background:rgba(34,197,94,.06);
    box-shadow:0 0 0 .2rem rgba(34,197,94,.15);
}

/* tidy headings inside labels (optional) */
.css-select-box h4,
.css-select-box h6 { margin:0;line-height:1.25; }
.css-select-box h6 { opacity:.85; }

/* optional row gap helper */
.select-row { row-gap:.75rem; }