/* =========================================================
   Portal Serikat Pekerja KB Bank - Corporate Branding
   Primary : KB Yellow  #FFBC00 (Pantone 116 C)
   Secondary: KB Grey/Brown #605A57 / #726F6C
   Neutral : White #FFFFFF
   ========================================================= */
:root {
    --kb-yellow: #FFBC00;
    --kb-yellow-dark: #E0A600;
    --kb-grey: #605A57;
    --kb-grey-light: #726F6C;
    --kb-white: #FFFFFF;
    --kb-text: #2B2826;
    --kb-bg-soft: #FAF9F7;
    --kb-border: #E7E3DF;
    --kb-success: #2E7D32;
    --kb-danger: #C62828;
}

body {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--kb-text);
    background-color: var(--kb-white);
}

a {
    color: var(--kb-grey);
}
a:hover {
    color: var(--kb-yellow-dark);
}

/* ---------- Navbar ---------- */
.navbar-kb {
    background-color: var(--kb-white);
    border-bottom: 3px solid var(--kb-yellow);
}
.navbar-kb .navbar-brand {
    font-weight: 700;
    color: var(--kb-grey);
}
.navbar-kb .nav-link {
    color: var(--kb-grey);
    font-weight: 500;
}
.navbar-kb .nav-link:hover,
.navbar-kb .nav-link.active {
    color: var(--kb-yellow-dark);
}

/* ---------- Buttons ---------- */
.btn-kb-primary {
    background-color: var(--kb-yellow);
    border-color: var(--kb-yellow);
    color: var(--kb-grey);
    font-weight: 600;
}
.btn-kb-primary:hover {
    background-color: var(--kb-yellow-dark);
    border-color: var(--kb-yellow-dark);
    color: var(--kb-white);
}
.btn-kb-secondary {
    background-color: var(--kb-grey);
    border-color: var(--kb-grey);
    color: var(--kb-white);
    font-weight: 600;
}
.btn-kb-secondary:hover {
    background-color: var(--kb-grey-light);
    border-color: var(--kb-grey-light);
    color: var(--kb-white);
}
.btn-kb-outline {
    background-color: transparent;
    border: 1.5px solid var(--kb-grey);
    color: var(--kb-grey);
    font-weight: 600;
}
.btn-kb-outline:hover {
    background-color: var(--kb-grey);
    color: var(--kb-white);
}

/* ---------- Hero / Banner ---------- */
.hero-kb {
    background: linear-gradient(135deg, var(--kb-yellow) 0%, var(--kb-yellow-dark) 100%);
    color: var(--kb-grey);
    padding: 64px 0;
}
.hero-kb h1 {
    font-weight: 800;
    color: #33302D;
}
.hero-kb p.lead {
    color: #4a4643;
}

.announcement-bar {
    background-color: var(--kb-grey);
    color: var(--kb-white);
    padding: 10px 0;
    font-size: 0.9rem;
}

/* ---------- Cards ---------- */
.card-kb {
    border: 1px solid var(--kb-border);
    border-radius: 10px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.card-kb:hover {
    box-shadow: 0 8px 20px rgba(96, 90, 87, 0.15);
    transform: translateY(-2px);
}
.card-kb .card-title {
    color: var(--kb-grey);
    font-weight: 700;
}
.badge-kb-yellow {
    background-color: var(--kb-yellow);
    color: var(--kb-grey);
}
.badge-kb-grey {
    background-color: var(--kb-grey);
    color: var(--kb-white);
}

/* ---------- Sections ---------- */
.section-title {
    color: var(--kb-grey);
    font-weight: 800;
    border-left: 5px solid var(--kb-yellow);
    padding-left: 12px;
    margin-bottom: 24px;
}

.bg-kb-soft {
    background-color: var(--kb-bg-soft);
}

/* ---------- Footer ---------- */
.footer-kb {
    background-color: var(--kb-grey);
    color: var(--kb-white);
    padding: 32px 0;
    margin-top: 48px;
}
.footer-kb a {
    color: var(--kb-yellow);
}

/* ---------- Forms ---------- */
.form-label {
    font-weight: 600;
    color: var(--kb-grey);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--kb-yellow);
    box-shadow: 0 0 0 0.2rem rgba(255, 188, 0, 0.25);
}

/* ---------- Admin layout ---------- */
.admin-sidebar {
    background-color: var(--kb-grey);
    min-height: 100vh;
    color: var(--kb-white);
}
.admin-sidebar a {
    color: #EDEBE9;
    display: block;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    margin-bottom: 4px;
}
.admin-sidebar a:hover,
.admin-sidebar a.active {
    background-color: var(--kb-yellow);
    color: var(--kb-grey);
    font-weight: 600;
}
.admin-topbar {
    background-color: var(--kb-white);
    border-bottom: 1px solid var(--kb-border);
}
.stat-card {
    border-radius: 10px;
    border-left: 5px solid var(--kb-yellow);
    background: var(--kb-white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.status-pending { color: #B8860B; font-weight: 600; }
.status-approved { color: var(--kb-success); font-weight: 600; }
.status-rejected { color: var(--kb-danger); font-weight: 600; }

.login-card-kb {
    max-width: 420px;
    margin: 64px auto;
    border-top: 6px solid var(--kb-yellow);
    border-radius: 10px;
}