/* ─── Theme colors ───────────────────────────────────────────── */
:root {
    --bs-primary: #07512c;
    --bs-primary-rgb: 7, 81, 44;
    --tc-gold: #C19324;
    --tc-gold-rgb: 193, 147, 36;
}

.btn-warning, .badge.bg-warning {
    background-color: var(--tc-gold) !important;
    border-color: var(--tc-gold) !important;
    color: #fff !important;
}
.text-warning { color: var(--tc-gold) !important; }

/* ─── Language dropdown ──────────────────────────────────────── */
.dropdown-hover .dropdown-menu.dropdown-menu-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(0) !important;
}
@media (max-width: 991px) {
    .dropdown-hover .dropdown-menu.dropdown-menu-open {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        padding-left: 1rem !important;
    }
}

/* ─── intl-tel-input ─────────────────────────────────────────── */
.iti { display: block; }
.iti .form-control { width: 100%; }

/* ─── Mobile sidebar ─────────────────────────────────────────── */
@media (max-width: 1199px) {
    .aside-menu-container {
        display: flex !important;
        flex-direction: column;
    }
    .aside-menu-container .sidebar-scrolling {
        flex: 1 1 auto !important;
        height: auto !important;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* ─── Utility ────────────────────────────────────────────────── */
.d-hidden { display: none !important; }

/* ─── Stat cards (user / akademia / pendukung dashboard) ─────── */
.stat-card { transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.09) !important; }
.stat-icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: .5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}

/* ─── Card header / section label ───────────────────────────── */
.section-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: .25rem;
}
.card-header-clean {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 1rem 1.25rem .75rem;
}

/* ─── Section divider (register / profile forms) ─────────────── */
.section-divider {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9ca3af;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: .35rem;
    margin-bottom: 1rem;
}

/* ─── Proposal / campaign cards ─────────────────────────────── */
.proposal-card { transition: transform .15s, box-shadow .15s; }
.proposal-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.09) !important; }

/* ─── Table row styles ───────────────────────────────────────── */
.offer-row { transition: background .1s; }
.offer-row:hover { background: #f8faff; }
.pending-row { background: #fffbeb; }
.pending-row:hover { background: #fef3c7 !important; }

/* ─── Avatar ─────────────────────────────────────────────────── */
.supporter-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-placeholder {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem;
    flex-shrink: 0;
}

/* ─── Register page ──────────────────────────────────────────── */
.reg-wrap { width: 100%; max-width: 560px; margin: 0 auto; }

.reg-tabs {
    display: flex;
    border-radius: .5rem;
    overflow: hidden;
    border: 1.5px solid #d1d5db;
    margin-bottom: 1.25rem;
}
.reg-tab {
    flex: 1;
    padding: .6rem .5rem;
    border: none;
    background: #fff;
    font-weight: 600;
    font-size: .85rem;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s, color .15s;
    display: flex; align-items: center; justify-content: center;
    gap: .4rem;
}
/* Default active (fallback) */
.reg-tab.active { background: #009ef7; color: #fff; }
.reg-tab:not(.active):hover { background: #f0f9ff; color: #009ef7; }

/* Mahasiswa — biru */
#tabUser.active                   { background: #009ef7; color: #fff; }
#tabUser:not(.active):hover       { background: #f0f9ff; color: #009ef7; }

/* Akademia — hijau institusi */
#tabAkademia.active               { background: #07512c; color: #fff; }
#tabAkademia:not(.active):hover   { background: #f0fdf4; color: #07512c; }

/* Mitra — emas/amber */
#tabMitra.active                  { background: #C19324; color: #fff; }
#tabMitra:not(.active):hover      { background: #fffbeb; color: #C19324; }

.scope-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-bottom: .25rem;
}
@media (max-width: 400px) {
    .scope-cards { grid-template-columns: 1fr; }
}
.scope-card {
    border: 1.5px solid #e5e7eb;
    border-radius: .5rem;
    padding: .75rem .5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.scope-card:hover  { border-color: #009ef7; background: #f0f9ff; }
.scope-card.active { border-color: #009ef7; background: #e0f2fe; }
.scope-card .sc-icon  { font-size: 1.2rem; margin-bottom: .25rem; }
.scope-card .sc-label { font-size: .78rem; font-weight: 600; color: #111; }
.scope-card .sc-desc  { font-size: .67rem; color: #6b7280; line-height: 1.3; margin-top: .1rem; }

.lang-picker { position: absolute; top: 1rem; right: 1rem; }
@media (max-width: 576px) {
    .lang-picker { top: .5rem; right: .5rem; }
    .lang-picker .btn { font-size: .75rem; padding: .3rem .6rem; }
}

.reg-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    padding: 2rem;
}
@media (max-width: 576px) {
    .reg-card { padding: 1.25rem 1rem; border-radius: .75rem; }
}

/* ─── Password strength indicator ───────────────────────────── */
.pw-check { color: #9ca3af; transition: color .2s; }
.pw-check.ok { color: #16a34a; }
.pw-bar { transition: background .25s; }

/* ─── Campaign Progress Stepper ─────────────────────────────── */
.cp-bar-track {
    height: 6px;
    border-radius: 4px;
    background: #e9ecef;
    margin-bottom: 28px;
    overflow: hidden;
}
.cp-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .4s ease;
}
.cp-bar-fill.cp-success  { background: #198754; }
.cp-bar-fill.cp-danger   { background: #dc3545; }
.cp-bar-fill.cp-warning  { background: #ffc107; }

.cp-stages-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
}
.cp-line {
    position: absolute;
    top: 21px;
    left: calc(12.5%);
    right: calc(12.5%);
    height: 2px;
    background: #dee2e6;
    z-index: 0;
}
.cp-stage-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}
.cp-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    background: #fff;
    color: #adb5bd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 0 0 4px #fff;
    transition: background .3s, border-color .3s, color .3s;
}
.cp-circle.done     { background: #198754; border-color: #198754; color: #fff; }
.cp-circle.current  { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.cp-circle.rejected { background: #dc3545; border-color: #dc3545; color: #fff; }
.cp-circle.blocked  { background: #ffc107; border-color: #ffc107; color: #212529; }

.cp-stage-label {
    margin-top: 10px;
    font-size: 0.78rem;
    font-weight: 400;
    color: #6c757d;
    text-align: center;
    line-height: 1.3;
}
.cp-stage-label.done    { font-weight: 600; color: #198754; }
.cp-stage-label.current { font-weight: 600; color: #0d6efd; }
.cp-stage-label.rejected-lbl { font-weight: 600; color: #dc3545; }
.cp-stage-label.blocked-lbl  { font-weight: 600; color: #856404; }

.cp-stage-desc {
    font-size: 0.68rem;
    color: #9ca3af;
    text-align: center;
    margin-top: 3px;
    line-height: 1.3;
    padding: 0 4px;
}
.cp-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f1f1f1;
    text-align: center;
}
.cp-info-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 0.82rem;
}
.cp-info-box.danger  { background: #fff5f5; border: 1px solid #f5c6cb; color: #842029; }
.cp-info-box.warning { background: #fff3cd; color: #856404; }
.cp-info-box.success { background: #d1e7dd; color: #0f5132; }
.cp-info-box.muted   { background: transparent; color: #6c757d; }

/* TomSelect z-index fix — dropdown tampil di atas elemen lain */
.ts-wrapper .ts-dropdown { z-index: 9999 !important; }
.ts-wrapper.is-disabled .ts-control { cursor: not-allowed; opacity: 0.6; }
/* Pastikan input pencarian di dropdown terlihat */
.ts-dropdown .ts-dropdown-content { max-height: 240px; }

/* Bar width states (menggantikan inline style agar bebas dari Blade di style attr) */
.cp-w-0   { width: 0%; }
.cp-w-25  { width: 25%; }
.cp-w-33  { width: 33%; }
.cp-w-50  { width: 50%; }
.cp-w-66  { width: 66%; }
.cp-w-75  { width: 75%; }
.cp-w-100 { width: 100%; }