/*
 * Tema PKU Muhammadiyah Yogyakarta.
 * Warna diambil dari logo (public/assets/images/logo/logo-tagline.png).
 * Dimuat SETELAH bootstrap.css / app.css untuk menimpa warna bawaan template Mazer (#435ebe).
 */
:root {
    --pku-green: #006838;       /* teks & emblem logo */
    --pku-green-dark: #004f2b;
    --pku-green-soft: #e6f2ec;
    --pku-blue: #283088;        /* "YOGYAKARTA" pada logo */
    --pku-blue-dark: #1e2468;
    --pku-red: #e02028;         /* warna tagline */
    --pku-gold: #f8e800;        /* bintang emblem, hanya untuk aksen (bukan teks) */
    --pku-ink: #1c2d35;
    --pku-muted: #66767c;
    --pku-canvas: #f4f7f5;
    --pku-focus: rgba(0, 104, 56, 0.18);

    --bs-primary: var(--pku-green);
    --bs-blue: var(--pku-blue);
}

body {
    color: #4d5e64;
    background-color: var(--pku-canvas);
}

a,
.btn-link,
.link-primary,
.text-primary,
.page-link {
    color: var(--pku-green);
}

a:hover,
.btn-link:hover,
.link-primary:hover,
.page-link:hover {
    color: var(--pku-green-dark);
}

h1, h2, h3, h4, h5, h6,
.page-heading h3,
.card .card-title,
.card-header h4 {
    color: var(--pku-blue);
}

/* ---------- Tombol ---------- */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: var(--pku-green);
    border-color: var(--pku-green);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary {
    color: #fff;
    background-color: var(--pku-green-dark);
    border-color: var(--pku-green-dark);
}

.btn-outline-primary,
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--pku-green);
    border-color: var(--pku-green);
}

.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    color: #fff;
    background-color: var(--pku-green);
    border-color: var(--pku-green);
}

.btn-info {
    color: #fff;
    background-color: var(--pku-blue);
    border-color: var(--pku-blue);
}

.btn-info:hover,
.btn-info:focus {
    color: #fff;
    background-color: var(--pku-blue-dark);
    border-color: var(--pku-blue-dark);
}

.btn:focus,
.btn-check:focus + .btn,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus {
    box-shadow: 0 0 0 0.2rem var(--pku-focus);
}

/* ---------- Form ---------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--pku-green);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate,
.form-check .form-check-input.form-check-primary,
.form-check.form-check-primary .form-check-input {
    background-color: var(--pku-green);
    border-color: var(--pku-green);
}

.form-range::-webkit-slider-thumb { background-color: var(--pku-green); }
.form-range::-moz-range-thumb { background-color: var(--pku-green); }

/* ---------- Warna utilitas ---------- */
.bg-primary,
.badge.bg-primary,
.progress-bar,
.progress.progress-primary .progress-bar {
    background-color: var(--pku-green) !important;
}

.text-primary {
    color: var(--pku-green) !important;
}

.border-primary {
    border-color: var(--pku-green) !important;
}

.alert-primary {
    color: var(--pku-green-dark);
    background-color: var(--pku-green-soft);
    border-color: #c4e0d1;
}

/* ---------- Navigasi & daftar ---------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active,
.page-item.active .page-link,
.pagination.pagination-primary .page-item.active .page-link,
.dataTable-pagination .active a,
.dataTable-pagination .active a:hover {
    color: #fff;
    background-color: var(--pku-green);
    border-color: var(--pku-green);
}

.nav-tabs .nav-link.active {
    color: var(--pku-green);
}

.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link.active:after {
    background-color: var(--pku-green);
}

/* ---------- Tabel ---------- */
.table > thead th {
    color: var(--pku-blue);
}

/* ---------- Sidebar gelap (hijau tua PKU) ----------
 * Logo memakai varian putih (logo-nama-putih.png); tagline kuning emas karena
 * merah di atas hijau tua kontrasnya hanya ±2:1. Teks menu putih 86% (±9:1).
 */
:root {
    --pku-sidebar-1: #00552f;
    --pku-sidebar-2: #032b1b;
    --pku-sidebar-text: rgba(255, 255, 255, 0.86);
    --pku-sidebar-muted: rgba(255, 255, 255, 0.55);
    --pku-sidebar-hover: rgba(255, 255, 255, 0.08);
    --pku-sidebar-active: rgba(255, 255, 255, 0.14);
}

#sidebar .sidebar-wrapper {
    background: linear-gradient(180deg, var(--pku-sidebar-1) 0%, var(--pku-sidebar-2) 100%);
}

#sidebar .sidebar-wrapper .sidebar-header {
    padding: 1.5rem 1.5rem 0.5rem;
    border-bottom: 3px solid var(--pku-gold);
    margin: 0 1.5rem;
    padding-left: 0;
    padding-right: 0;
}

#sidebar .sidebar-wrapper .sidebar-hide,
#sidebar .sidebar-wrapper .sidebar-toggler {
    color: var(--pku-sidebar-text);
}

.sidebar-wrapper .menu .sidebar-title {
    color: var(--pku-sidebar-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-wrapper .menu .sidebar-link,
.sidebar-wrapper .menu .submenu .submenu-item a {
    color: var(--pku-sidebar-text);
}

.sidebar-wrapper .menu .sidebar-link i,
.sidebar-wrapper .menu .sidebar-link svg {
    color: var(--pku-sidebar-muted);
}

.sidebar-wrapper .menu .sidebar-link:hover {
    color: #fff;
    background-color: var(--pku-sidebar-hover);
}

.sidebar-wrapper .menu .sidebar-link:hover i {
    color: #fff;
}

.sidebar-wrapper .menu .sidebar-item.active .sidebar-link {
    background-color: var(--pku-sidebar-active);
    box-shadow: inset 3px 0 0 var(--pku-gold);
}

.sidebar-wrapper .menu .submenu .submenu-item a:hover,
.sidebar-wrapper .menu .submenu .submenu-item.active > a {
    color: var(--pku-gold);
}

.pku-brand-putih .pku-brand-tagline {
    color: var(--pku-gold);
}

.form-group.with-title .form-control:focus ~ label {
    background-color: var(--pku-green);
}

/* ---------- Header halaman & footer ---------- */
.page-heading h3 {
    font-weight: 700;
}

.page-heading h3::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 0.5rem;
    background: linear-gradient(90deg, var(--pku-green) 0 66%, var(--pku-gold) 66% 100%);
    border-radius: 2px;
}

.card {
    border: 1px solid #e2e9e6;
}

footer .footer {
    color: var(--pku-muted);
}

/* ---------- Logo + tagline (app/Views/partials/pku-brand.php) ----------
 * Tagline diletakkan di area kosong logo-nama.png, tempat tagline lama berada
 * (x = 85/75 tinggi logo, baris bawah). Semua ukuran mengikuti --pku-brand-h.
 */
.pku-brand {
    --pku-brand-h: 40px;
    position: relative;
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.pku-brand img {
    display: block;
    width: auto;
    height: var(--pku-brand-h);
}

#sidebar .sidebar-wrapper .sidebar-header .pku-brand {
    --pku-brand-h: 46px;
}

#sidebar .sidebar-wrapper .sidebar-header .pku-brand img {
    height: var(--pku-brand-h);
}

.pku-brand-tagline {
    position: absolute;
    left: calc(var(--pku-brand-h) * 85 / 75);
    bottom: calc(var(--pku-brand-h) * 0.08);
    color: var(--pku-red);
    font-size: calc(var(--pku-brand-h) * 0.15);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

/* ---------- Halaman login ---------- */
#auth #auth-left .auth-logo .pku-brand {
    --pku-brand-h: 48px;
}

#auth .auth-title {
    color: var(--pku-blue);
}

#auth #auth-right {
    background: linear-gradient(135deg, var(--pku-green) 0%, var(--pku-green-dark) 55%, var(--pku-blue) 100%);
    border-left: 6px solid var(--pku-gold);
}

.nav-tabs .nav-link.active {
    background-color: var(--pku-green-soft);
}

#auth #auth-left .auth-logo .pku-brand img {
    height: var(--pku-brand-h);
}

.pku-brand-tagline strong {
    font-weight: 800;
}

/* panah menu bersub: SVG bawaan Mazer abu-abu, kurang kontras di latar gelap */
.sidebar-wrapper .menu .sidebar-item.has-sub .sidebar-link:after,
.sidebar-wrapper .menu .sidebar-item.active .sidebar-link.has-sub:after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}