/* =====================================================
   STYLE RINGAN - PHP 5.6
   Aplikasi Konfirmasi Alamat Pengiriman Serdik
   Versi menu interaktif, responsif HP, tanpa framework
   ===================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #edf3fb;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.45;
}
a { color: #0f4c81; text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell { min-height: 100vh; }
.topbar {
    background: #0b4f85;
    color: #fff;
    border-bottom: 4px solid #f2b705;
}
.topbar-inner {
    max-width: 1220px;
    margin: 0 auto;
    padding: 12px 16px;
    display: table;
    width: 100%;
}
.brand {
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    width: 35%;
    text-decoration: none;
}
.brand:hover { color: #fff; text-decoration: none; }
.brand-mark {
    display: inline-block;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: 10px;
    background: #07345d;
    border: 1px solid rgba(255,255,255,.22);
    font-size: 21px;
    font-weight: bold;
    margin-right: 9px;
    vertical-align: middle;
}
.brand-text { display: inline-block; vertical-align: middle; }
.brand-text strong { display: block; font-size: 16px; letter-spacing: .1px; }
.brand-text small { display: block; color: #dbeafe; font-size: 12px; margin-top: 2px; }
.userbox {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    font-size: 13px;
}
.userbox a,
.userbox .user-pill {
    display: inline-block;
    color: #fff;
    background: #07345d;
    border: 1px solid rgba(255,255,255,.15);
    padding: 9px 10px;
    border-radius: 8px;
    margin: 3px 2px;
    text-decoration: none;
    font-weight: bold;
}
.userbox a:hover { background: #082f49; }
.userbox a.active { background: #f2b705; color: #111827; border-color: #f6d365; }
.userbox .logout-link { background: #b91c1c; }
.userbox .logout-link:hover { background: #991b1b; }
.menu-toggle {
    display: none;
    float: right;
    border: 1px solid #dbeafe;
    background: #07345d;
    color: #fff;
    border-radius: 7px;
    padding: 9px 11px;
    font-weight: bold;
}

.container { max-width: 1220px; margin: 20px auto 40px; padding: 0 16px; }
.card,
.page-hero {
    background: #fff;
    border: 1px solid #d7e0ea;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
}
.page-hero {
    border-left: 6px solid #0b4f85;
    background: #ffffff;
}
.page-hero p { color: #4b5563; margin-bottom: 0; }
.card.compact { padding: 15px; }
h1, h2, h3 { margin-top: 0; color: #07345d; line-height: 1.2; }
h1 { font-size: 26px; margin-bottom: 8px; }
h2 { font-size: 19px; margin-bottom: 10px; }
h3 { font-size: 16px; margin-bottom: 8px; }
p { margin-top: 0; }
.muted { color: #667085; }
.field-note { color: #667085; font-size: 12px; margin-top: 5px; }
hr { border: 0; border-top: 1px solid #d7e0ea; margin: 20px 0; }

/* Login */
.login-wrap { max-width: 500px; margin: 35px auto; }
.login-card {
    border-top: 5px solid #0b4f85;
}
.login-card h1,
.login-card .muted { text-align: center; }
.login-badge {
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 18px;
    margin: 0 auto 12px;
    text-align: center;
    font-size: 30px;
    background: #eaf2fb;
    border: 1px solid #bfdbfe;
}

label { display: block; margin-top: 13px; margin-bottom: 6px; font-weight: bold; color: #24324a; }
input[type=text],
input[type=password],
input[type=number],
input[type=url],
input[type=tel],
select,
textarea {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #b9c6d3;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: #1f2937;
}
input:focus,
input[type=url]:focus,
input[type=tel]:focus,
select:focus,
textarea:focus {
    outline: 2px solid #bfdbfe;
    border-color: #0b4f85;
}
textarea { min-height: 85px; resize: vertical; }
input[type=checkbox] { width: 18px; height: 18px; vertical-align: middle; }

.btn {
    display: inline-block;
    border: 0;
    border-radius: 8px;
    padding: 10px 13px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    line-height: 1.2;
    min-height: 40px;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { text-decoration: none; opacity: .94; }
.btn-primary { background: #0b4f85; color: #fff; }
.btn-success { background: #15803d; color: #fff; }
.btn-warning { background: #f59e0b; color: #111827; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-secondary { background: #64748b; color: #fff; }
.btn-light { background: #eef2f7; color: #24324a; border: 1px solid #d7e0ea; }
.btn-block { width: 100%; margin-top: 18px; }
.nav-actions,
.form-actions,
.row-actions { margin-bottom: 14px; }
.nav-actions .btn,
.form-actions .btn,
.row-actions .btn { margin: 3px; }

.alert {
    padding: 12px 14px;
    border-radius: 9px;
    margin-bottom: 15px;
    font-weight: bold;
}
.alert-success { background: #e9f9ef; color: #166534; border: 1px solid #bbf7d0; }
.alert-danger { background: #fff1f2; color: #991b1b; border: 1px solid #fecaca; }

/* Grid ringan */
.grid,
.grid-3 { display: table; width: 100%; table-layout: fixed; border-spacing: 12px 0; margin-left: -12px; }
.grid > div,
.grid-3 > div { display: table-cell; vertical-align: top; }
.grid > div { width: 50%; }
.grid-3 > div { width: 33.33%; }

/* Menu dashboard */
.dashboard-menu { margin-bottom: 18px; }
.menu-title-row {
    display: table;
    width: 100%;
    margin-bottom: 12px;
}
.menu-title-row h2 { display: table-cell; margin: 0; vertical-align: middle; }
.menu-title-row .menu-caption { display: table-cell; text-align: right; vertical-align: middle; color: #667085; font-size: 12px; }
.menu-grid {
    font-size: 0;
    margin: 0 -7px;
}
.menu-card {
    display: inline-block;
    width: calc(25% - 14px);
    margin: 0 7px 14px;
    min-height: 112px;
    vertical-align: top;
    background: #fff;
    border: 1px solid #d7e0ea;
    border-left: 5px solid #0b4f85;
    border-radius: 12px;
    padding: 14px;
    color: #1f2937;
    text-decoration: none;
    font-size: 14px;
}
.menu-card:hover {
    text-decoration: none;
    background: #f8fbff;
    border-color: #b9d5f6;
}
.menu-icon {
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 10px;
    background: #eaf2fb;
    color: #07345d;
    font-size: 20px;
    margin-bottom: 9px;
}
.menu-card strong { display: block; color: #07345d; font-size: 15px; margin-bottom: 4px; }
.menu-card small { display: block; color: #667085; font-size: 12px; line-height: 1.35; }
.menu-card.success { border-left-color: #15803d; }
.menu-card.warning { border-left-color: #f59e0b; }
.menu-card.danger { border-left-color: #dc2626; }
.menu-card.purple { border-left-color: #6d28d9; }

.stats { margin: 0 -6px 18px; font-size: 0; }
.stats > .stat-card { display: inline-block; width: calc(25% - 12px); margin: 0 6px 12px; vertical-align: top; font-size: 14px; }
.info-box {
    background: #f2f8ff;
    border: 1px solid #bfdbfe;
    border-left: 5px solid #0b4f85;
    border-radius: 9px;
    padding: 13px;
    white-space: pre-line;
}

.info-box.warning-box {
    background: #fff7ed;
    border-color: #fed7aa;
    border-left-color: #f97316;
    color: #7c2d12;
}
.pisn-alert strong {
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
}
.pisn-alert span {
    display: block;
    line-height: 1.45;
}

.stat-card {
    background: #fff;
    border: 1px solid #d7e0ea;
    border-radius: 12px;
    padding: 15px;
}
.stat-card .num { font-size: 28px; font-weight: bold; color: #0b4f85; }
.stat-card .label { color: #667085; margin-top: 4px; font-weight: bold; }
.stat-card.good { border-left: 5px solid #15803d; }
.stat-card.warn { border-left: 5px solid #f59e0b; }
.stat-card.info { border-left: 5px solid #0b4f85; }
.stat-card.purple { border-left: 5px solid #6d28d9; }

.search-form {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px 0;
    margin-left: -10px;
}
.search-form > div { display: table-cell; vertical-align: bottom; }
.search-form .search-input { width: 42%; }

.table-wrap { overflow-x: auto; border: 1px solid #d7e0ea; border-radius: 10px; background: #fff; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { border-bottom: 1px solid #e6edf5; padding: 10px; text-align: left; vertical-align: top; font-size: 13px; }
th { background: #eaf2fb; color: #07345d; font-size: 12px; text-transform: uppercase; }
tr:nth-child(even) td { background: #fbfdff; }
tr:last-child td { border-bottom: 0; }
.badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}
.badge-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.badge-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.badge-info { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }

.choice-card {
    display: block;
    padding: 13px;
    border: 1px solid #b7d7ff;
    background: #f3f9ff;
    border-radius: 10px;
    margin: 14px 0;
    cursor: pointer;
}
.choice-card input { margin-right: 8px; }
.choice-card strong { color: #07345d; }
.choice-card span { color: #667085; font-size: 13px; }
.print-toolbar {
    background: #fff;
    border-bottom: 1px solid #d7e0ea;
    padding: 10px;
}
.step-list {
    font-size: 0;
    margin: 0 -6px 14px;
}
.step-item {
    display: inline-block;
    width: calc(33.33% - 12px);
    margin: 0 6px 12px;
    vertical-align: top;
    background: #fff;
    border: 1px solid #d7e0ea;
    border-radius: 12px;
    padding: 13px;
    font-size: 13px;
}
.step-item b { display: block; color: #07345d; font-size: 14px; margin-bottom: 3px; }
.step-no {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    background: #0b4f85;
    color: #fff;
    font-weight: bold;
    margin-right: 6px;
}

@media (max-width: 980px) {
    .menu-card { width: calc(50% - 14px); }
    .stats > .stat-card { width: calc(50% - 12px); }
}

@media (max-width: 900px) {
    .topbar-inner { display: block; padding: 10px 12px; }
    .brand,
    .userbox { display: block; width: 100%; text-align: left; }
    .brand { padding-right: 95px; }
    .menu-toggle { display: inline-block; position: absolute; right: 12px; top: 13px; }
    .userbox { display: none; padding-top: 10px; clear: both; }
    body.nav-open .userbox { display: block; }
    .userbox a,
    .userbox .user-pill { display: block; text-align: left; margin: 6px 0; border-radius: 8px; }
    .container { margin: 14px auto 28px; padding: 0 10px; }
    .card,
    .page-hero { padding: 15px; border-radius: 10px; }
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    input[type=text],
    input[type=password],
    input[type=number],
    input[type=url],
    input[type=tel],
    select,
    textarea { font-size: 16px; padding: 11px; }
    .grid,
    .grid-3,
    .search-form { display: block; width: 100%; margin-left: 0; }
    .grid > div,
    .grid-3 > div,
    .search-form > div { display: block; width: 100%; margin-bottom: 12px; }
    .menu-title-row,
    .menu-title-row h2,
    .menu-title-row .menu-caption { display: block; text-align: left; }
    .menu-title-row .menu-caption { margin-top: 4px; }
    .stats { margin: 0 0 12px; font-size: 14px; }
    .btn,
    button[type=submit],
    .nav-actions .btn,
    .form-actions .btn { width: 100%; margin: 4px 0; }

    .table-wrap.mobile-cards { overflow: visible; border: 0; background: transparent; }
    .table-wrap.mobile-cards table,
    .table-wrap.mobile-cards thead,
    .table-wrap.mobile-cards tbody,
    .table-wrap.mobile-cards th,
    .table-wrap.mobile-cards td,
    .table-wrap.mobile-cards tr { display: block; }
    .table-wrap.mobile-cards thead { display: none; }
    .table-wrap.mobile-cards tr {
        margin-bottom: 12px;
        background: #fff;
        border: 1px solid #d7e0ea;
        border-radius: 10px;
        overflow: hidden;
    }
    .table-wrap.mobile-cards td {
        border-bottom: 1px solid #eef2f7;
        padding: 10px 12px;
        font-size: 13px;
    }
    .table-wrap.mobile-cards td:before {
        content: attr(data-label);
        display: block;
        color: #667085;
        font-weight: bold;
        font-size: 11px;
        text-transform: uppercase;
        margin-bottom: 3px;
    }
    .row-actions .btn { width: 100%; }
    .step-item { width: calc(100% - 12px); }
}

@media (max-width: 540px) {
    .menu-card { width: calc(100% - 14px); min-height: 86px; }
    .stats > .stat-card { display: block; width: 100%; margin: 0 0 10px; }
}

@media (max-width: 460px) {
    .brand-text small { display: none; }
    .brand-mark { width: 34px; height: 34px; line-height: 34px; }
    .brand-text strong { font-size: 14px; }
    .card,
    .page-hero { padding: 13px; }
}

@media print {
    body { background: #fff; }
    .topbar,
    .print-toolbar,
    .nav-actions,
    .form-actions,
    .dashboard-menu { display: none !important; }
    .container { max-width: none; margin: 0; padding: 0; }
    .card { border: 0; padding: 0; margin: 0; }
}

/* =====================================================
   VERSI 10 - LOGIN TERPISAH 1/3 HALAMAN & MENU BUTTON
   Tetap ringan, PHP 5.6, tanpa framework/CDN
   ===================================================== */

/* Login khusus: tidak memakai header aplikasi */
body.login-page {
    background: #e9f1fb;
    min-height: 100vh;
}
.login-layout {
    min-height: 100vh;
    padding: 28px;
    display: table;
    width: 100%;
}
.login-panel {
    width: 33.333%;
    min-width: 360px;
    max-width: 460px;
    margin: 0 auto;
    display: block;
    background: #fff;
    border: 1px solid #cfddea;
    border-top: 6px solid #0b4f85;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 28px rgba(7, 52, 93, .13);
}
.login-head {
    display: table;
    width: 100%;
    margin-bottom: 18px;
}
.login-logo {
    display: table-cell;
    width: 58px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    vertical-align: middle;
    border-radius: 16px;
    background: #0b4f85;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
}
.login-head > div:last-child {
    display: table-cell;
    vertical-align: middle;
    padding-left: 12px;
}
.login-head h1 {
    margin: 0;
    font-size: 24px;
    color: #07345d;
    letter-spacing: 1px;
}
.login-head p {
    margin: 3px 0 0;
    color: #667085;
    font-size: 13px;
}
.login-title-box {
    background: #f5f9ff;
    border: 1px solid #d7e8fb;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
}
.login-title-box h2 {
    margin-bottom: 5px;
    font-size: 20px;
}
.login-title-box p {
    margin: 0;
    color: #667085;
}
.login-form label { margin-top: 12px; }
.role-switch {
    font-size: 0;
    margin: 8px -4px 4px;
}
.role-option {
    display: inline-block;
    width: calc(50% - 8px);
    margin: 0 4px;
    padding: 11px 10px;
    border: 1px solid #cbd8e6;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}
.role-option input {
    position: absolute;
    left: -9999px;
}
.role-option.selected {
    background: #0b4f85;
    color: #fff;
    border-color: #0b4f85;
}
.login-submit {
    border-radius: 10px;
    min-height: 46px;
    font-size: 15px;
}
.login-note {
    margin-top: 16px;
    padding: 12px;
    border-radius: 10px;
    background: #fff7e6;
    border: 1px solid #fde2a5;
    color: #6b4e00;
    font-size: 12px;
    line-height: 1.4;
}

/* Topbar menu sebagai tombol profesional */
.userbox .nav-link,
.userbox .logout-link {
    border-radius: 999px;
    padding: 9px 13px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
}
.userbox .nav-link span {
    display: inline-block;
    margin-right: 4px;
}
.userbox .nav-link:hover {
    background: #f2b705;
    color: #111827;
    border-color: #f2b705;
}
.userbox .logout-link {
    background: #b91c1c;
    border-color: #ef4444;
}

/* Tombol menu dashboard dibuat seperti launcher aplikasi */
.dashboard-menu {
    border-top: 5px solid #0b4f85;
}
.menu-card {
    position: relative;
    border-left: 0;
    border-top: 4px solid #0b4f85;
    box-shadow: 0 3px 10px rgba(15, 76, 129, .08);
    min-height: 126px;
}
.menu-card:after {
    content: 'Buka';
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eaf2fb;
    color: #0b4f85;
    font-size: 11px;
    font-weight: bold;
}
.menu-card:hover {
    background: #ffffff;
    border-color: #0b4f85;
    box-shadow: 0 8px 18px rgba(15, 76, 129, .15);
}
.menu-card:hover .menu-icon {
    background: #0b4f85;
    color: #fff;
}
.menu-card.success { border-top-color: #15803d; }
.menu-card.warning { border-top-color: #f59e0b; }
.menu-card.danger { border-top-color: #dc2626; }
.menu-card.purple { border-top-color: #6d28d9; }
.menu-card.success:after { background: #e9f9ef; color: #15803d; }
.menu-card.warning:after { background: #fff7e6; color: #92400e; }
.menu-card.danger:after { background: #fff1f2; color: #b91c1c; }
.menu-card.purple:after { background: #f2ecff; color: #6d28d9; }
.menu-icon {
    border: 1px solid #d7e0ea;
}

/* Tombol aksi umum tampak lebih profesional */
.btn {
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(31,41,55,.08);
}
.btn-light {
    background: #ffffff;
}
.form-actions,
.nav-actions {
    background: #fff;
    border: 1px solid #d7e0ea;
    border-radius: 12px;
    padding: 10px;
}
.row-actions .btn {
    border-radius: 8px;
}

@media (max-width: 900px) {
    .login-layout {
        padding: 16px;
        display: block;
    }
    .login-panel {
        width: 100%;
        min-width: 0;
        max-width: 520px;
        padding: 18px;
        border-radius: 14px;
    }
    .userbox .nav-link,
    .userbox .logout-link,
    .userbox .user-pill {
        border-radius: 12px;
        padding: 12px;
    }
    .form-actions,
    .nav-actions {
        padding: 10px;
    }
    .menu-card {
        min-height: 112px;
    }
}

@media (max-width: 420px) {
    .login-panel {
        padding: 15px;
    }
    .role-option {
        display: block;
        width: calc(100% - 8px);
        margin-bottom: 8px;
    }
    .login-logo {
        width: 48px;
        height: 48px;
        line-height: 48px;
        font-size: 24px;
    }
    .login-head h1 {
        font-size: 21px;
    }
}

/* Fitur import massal alumni */
.menu-grid-small {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.check-line {
    display: block;
    background: #f8fafc;
    border: 1px solid #d7e0ea;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0;
    line-height: 1.5;
}
.check-line input {
    width: auto;
    margin-right: 8px;
}
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px;
}
.tag-list span {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef6ff;
    border: 1px solid #d7e0ea;
    color: #0b4f85;
    font-weight: 700;
    font-size: 13px;
}
.compact-actions {
    margin: 8px 0 14px;
}
@media (max-width: 640px) {
    .tag-list span {
        width: 100%;
        border-radius: 10px;
    }
}

/* Versi 23 - paket pembelian dan bukti pembayaran */
.payment-panel {
    border: 1px solid #d7e0ea;
    background: #f8fafc;
    border-radius: 14px;
    padding: 14px;
    margin-top: 10px;
}
.payment-amount {
    min-height: 44px;
    border: 2px solid #d7e0ea;
    background: #ffffff;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    color: #0b4f85;
}
.payment-amount.small {
    font-size: 18px;
    min-height: 40px;
}
.amount-map {
    border-color: #15803d;
    color: #15803d;
}
.amount-selaber {
    border-color: #b45309;
    color: #b45309;
}
.link-inline {
    display: inline-block;
    margin-top: 4px;
    font-weight: 700;
    color: #0b4f85;
    text-decoration: underline;
    word-break: break-word;
}
@media (max-width: 640px) {
    .payment-panel {
        padding: 11px;
    }
    .payment-amount {
        font-size: 20px;
    }
}

/* Versi 29 - gambar informasi souvenir pada laman alumni */
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.souvenir-card {
    overflow: hidden;
}
.souvenir-image-wrap {
    background: #ffffff;
    border: 1px solid #d7e0ea;
    border-radius: 16px;
    padding: 12px;
    text-align: center;
}
.souvenir-image {
    display: block;
    width: 100%;
    max-width: 980px;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
}
@media (max-width: 640px) {
    .section-title-row {
        display: block;
    }
    .souvenir-image-wrap {
        padding: 7px;
        border-radius: 12px;
    }
    .souvenir-image {
        border-radius: 8px;
    }
}

/* Versi 30 - gambar souvenir ditempatkan di sebelah kanan area pembelian */
.payment-panel-with-souvenir {
    padding: 16px;
}
.purchase-souvenir-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
    margin-top: 12px;
}
.purchase-form-side {
    min-width: 0;
}
.souvenir-side {
    background: #ffffff;
    border: 1px solid #d7e0ea;
    border-radius: 14px;
    padding: 12px;
    text-align: center;
}
.souvenir-side h3 {
    margin: 0 0 5px;
    font-size: 18px;
    color: #0b2740;
}
.souvenir-side p {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 13px;
}
.souvenir-image-wrap.compact {
    border: 0;
    padding: 0;
    background: transparent;
}
.souvenir-side .souvenir-image {
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
}
@media (max-width: 980px) {
    .purchase-souvenir-layout {
        grid-template-columns: 1fr;
    }
    .souvenir-side {
        max-width: 560px;
        margin: 0 auto;
        width: 100%;
    }
    .souvenir-side .souvenir-image {
        max-width: 520px;
    }
}
@media (max-width: 640px) {
    .payment-panel-with-souvenir {
        padding: 11px;
    }
    .purchase-souvenir-layout {
        gap: 12px;
    }
    .souvenir-side {
        padding: 9px;
        border-radius: 12px;
    }
    .souvenir-side h3 {
        font-size: 16px;
    }
}


/* Versi 31 - kotak link bukti pembayaran diperbesar agar link panjang mudah dibaca */
.bukti-link-input {
    min-height: 108px;
    font-size: 15px;
    line-height: 1.45;
    padding: 14px;
    font-family: Arial, Helvetica, sans-serif;
    word-break: break-all;
    overflow-wrap: anywhere;
}
.bukti-link-input:focus {
    background: #ffffff;
}
@media (max-width: 640px) {
    .bukti-link-input {
        min-height: 130px;
        font-size: 16px;
        padding: 13px;
    }
}

/* Versi 37 - menu operator cetak */
.operator-menu-grid .menu-card {
    width: calc(50% - 14px);
    min-height: 145px;
}
.soft-card {
    background: #fbfdff;
    border-color: #dce8f4;
}
@media (max-width: 760px) {
    .operator-menu-grid .menu-card {
        width: calc(100% - 14px);
    }
}

/* Versi 39 - jasa pengiriman/expedisi */
.mini-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}
.mini-select {
    width: 100%;
    min-width: 145px;
    padding: 8px 9px;
    font-size: 13px;
}
.btn-small {
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.2;
}
@media (max-width: 700px) {
    .mini-form {
        width: 100%;
    }
    .mini-select,
    .btn-small {
        width: 100%;
    }
}

/* =====================================================
   VERSI 40 - JUMLAH DATA DASHBOARD & TABEL FIT DESKTOP
   ===================================================== */
.topbar-inner,
.container {
    max-width: 1600px;
    width: 98%;
}
.dashboard-table-card {
    padding-left: 12px;
    padding-right: 12px;
}
.display-control-row {
    display: table;
    width: 100%;
    margin: 8px 0 12px;
    padding: 10px 12px;
    border: 1px solid #d7e0ea;
    border-radius: 12px;
    background: #f8fbff;
}
.per-page-form,
.table-fit-note {
    display: table-cell;
    vertical-align: middle;
}
.per-page-form label {
    display: inline-block;
    margin: 0 8px 0 0;
    font-size: 13px;
}
.per-page-form select {
    display: inline-block;
    width: 145px;
    padding: 8px 10px;
    font-size: 13px;
}
.table-fit-note {
    color: #667085;
    text-align: right;
    font-size: 12px;
    line-height: 1.35;
}
.table-fit-wrap {
    overflow-x: visible;
}
.table-fit {
    table-layout: fixed;
    width: 100%;
}
.table-fit th,
.table-fit td {
    padding: 6px 5px;
    font-size: 11px;
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.table-fit th {
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
}
.table-fit .muted {
    font-size: 10px;
    line-height: 1.25;
}
.table-fit .badge {
    padding: 3px 5px;
    border-radius: 10px;
    font-size: 10px;
    white-space: normal;
}
.table-fit .link-inline {
    font-size: 10px;
    line-height: 1.2;
}
.table-fit .address-cell {
    white-space: pre-line;
}
.table-fit .row-actions {
    margin-bottom: 0;
}
.table-fit .row-actions .btn {
    display: block;
    width: 100%;
    min-height: 0;
    margin: 0 0 4px;
    padding: 5px 4px;
    font-size: 10px;
    border-radius: 6px;
    box-shadow: none;
}
.table-fit .mini-form {
    min-width: 0;
    gap: 4px;
}
.table-fit .mini-select {
    min-width: 0;
    padding: 5px 4px;
    font-size: 10px;
}
.table-fit .btn-small {
    padding: 5px 4px;
    font-size: 10px;
    min-height: 0;
}
.table-fit th:nth-child(1),
.table-fit td:nth-child(1) { width: 3%; text-align: center; }
.table-fit th:nth-child(2),
.table-fit td:nth-child(2) { width: 5%; }
.table-fit th:nth-child(3),
.table-fit td:nth-child(3) { width: 5%; }
.table-fit th:nth-child(4),
.table-fit td:nth-child(4) { width: 9%; }
.table-fit th:nth-child(5),
.table-fit td:nth-child(5) { width: 7%; }
.table-fit th:nth-child(6),
.table-fit td:nth-child(6) { width: 8%; }
.table-fit th:nth-child(7),
.table-fit td:nth-child(7) { width: 8%; }
.table-fit th:nth-child(8),
.table-fit td:nth-child(8) { width: 14%; }
.table-fit th:nth-child(9),
.table-fit td:nth-child(9) { width: 8%; }
.table-fit th:nth-child(10),
.table-fit td:nth-child(10) { width: 6%; }
.table-fit th:nth-child(11),
.table-fit td:nth-child(11) { width: 7%; }
.table-fit th:nth-child(12),
.table-fit td:nth-child(12) { width: 7%; }
.table-fit th:nth-child(13),
.table-fit td:nth-child(13) { width: 5%; }
.table-fit th:nth-child(14),
.table-fit td:nth-child(14) { width: 8%; }
.pagination-bar {
    margin-top: 14px;
    padding: 12px;
    background: #f8fbff;
    border: 1px solid #d7e0ea;
    border-radius: 12px;
    text-align: center;
}
.page-info {
    display: inline-block;
    margin: 5px 8px;
    font-weight: bold;
    color: #07345d;
}
@media (min-width: 901px) {
    .table-fit-wrap.mobile-cards {
        overflow-x: visible;
    }
}
@media (max-width: 900px) {
    .topbar-inner,
    .container {
        width: 100%;
        max-width: none;
    }
    .display-control-row,
    .per-page-form,
    .table-fit-note {
        display: block;
        text-align: left;
    }
    .per-page-form label,
    .per-page-form select {
        display: block;
        width: 100%;
        margin: 0 0 8px;
    }
    .table-fit th,
    .table-fit td {
        font-size: 13px;
        padding: 10px 12px;
    }
    .table-fit .muted,
    .table-fit .badge,
    .table-fit .link-inline {
        font-size: 12px;
    }
    .pagination-bar .btn {
        width: 100%;
        margin: 4px 0;
    }
}

/* =====================================================
   VERSI 41 - PANDUAN ADMIN, OPERATOR, DAN ALUMNI
   ===================================================== */
.guide-card {
    margin-bottom: 16px;
}
.guide-card h2 {
    margin-top: 0;
    color: #07345d;
}
.guide-steps {
    margin: 8px 0 10px 22px;
    padding: 0;
    line-height: 1.65;
}
.guide-steps li {
    margin-bottom: 4px;
}
.guide-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 12px;
    background: #fff;
    font-size: 14px;
}
.guide-table th,
.guide-table td {
    border: 1px solid #d7e0ea;
    padding: 10px 11px;
    vertical-align: top;
    text-align: left;
}
.guide-table th {
    background: #eaf2fb;
    color: #07345d;
}
.guide-menu-grid .menu-card {
    width: calc(25% - 14px);
}
@media (max-width: 980px) {
    .guide-menu-grid .menu-card {
        width: calc(50% - 14px);
    }
}
@media (max-width: 700px) {
    .guide-table,
    .guide-table tbody,
    .guide-table tr,
    .guide-table th,
    .guide-table td {
        display: block;
        width: 100%;
    }
    .guide-table tr {
        margin-bottom: 10px;
        border: 1px solid #d7e0ea;
        border-radius: 10px;
        overflow: hidden;
    }
    .guide-table th,
    .guide-table td {
        border: 0;
        border-bottom: 1px solid #edf2f7;
    }
    .guide-menu-grid .menu-card {
        width: calc(100% - 14px);
    }
}

/* Versi 44 - Verifikasi bukti pembayaran dan pilihan pengiriman */
.badge-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.badge-purple { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
.btn-disabled {
    background: #e5e7eb !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
.compact-info { padding: 10px 12px; margin: 10px 0; }
.delivery-choice-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.delivery-choice-box .choice-card { margin: 0; }
.readonly-box {
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    padding: 10px 12px;
    min-height: 42px;
}
@media (max-width: 720px) {
    .delivery-choice-box { grid-template-columns: 1fr; }
}

/* =====================================================
   VERSI 48 - REKAPITULASI DASHBOARD PER PERIODE
   ===================================================== */
.summary-scope {
    display: table;
    width: 100%;
    margin: 0 0 14px;
    padding: 12px 14px;
    background: #f2f8ff;
    border: 1px solid #bfdbfe;
    border-left: 5px solid #0b4f85;
    border-radius: 12px;
}
.summary-scope > div,
.summary-scope > a {
    display: table-cell;
    vertical-align: middle;
}
.summary-scope > a {
    width: 190px;
    text-align: center;
}
.period-recap-card {
    margin-bottom: 18px;
}
.period-recap-wrap {
    overflow-x: visible;
}
.period-recap-table {
    table-layout: fixed;
    width: 100%;
}
.period-recap-table th,
.period-recap-table td {
    padding: 7px 5px;
    font-size: 11px;
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.period-recap-table th {
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
}
.period-recap-table th:nth-child(1),
.period-recap-table td:nth-child(1) { width: 14%; }
.period-recap-table th:nth-child(15),
.period-recap-table td:nth-child(15) { width: 9%; }
.period-recap-table .btn-small {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    padding: 5px 4px;
    font-size: 10px;
    min-height: 0;
}
.num-cell {
    text-align: center;
    font-weight: bold;
    color: #07345d;
}
.good-text { color: #15803d; }
.warn-text { color: #b45309; }
@media (max-width: 900px) {
    .summary-scope,
    .summary-scope > div,
    .summary-scope > a {
        display: block;
        width: auto;
        text-align: left;
    }
    .summary-scope > a {
        margin-top: 10px;
    }
    .period-recap-wrap {
        overflow-x: auto;
    }
}

/* =====================================================
   VERSI 49 - PERBAIKAN DASHBOARD V48
   Masalah: kolom Aksi tidak mendapat lebar, sehingga tabel terjepit
   dan baris terlihat hanya satu/terlalu tinggi pada layar desktop.
   ===================================================== */
.dashboard-table-card .table-fit-wrap {
    overflow-x: visible;
    overflow-y: visible;
}
.dashboard-table-card .table-fit {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}
.dashboard-table-card .table-fit th,
.dashboard-table-card .table-fit td {
    vertical-align: top;
    font-size: 10px;
    line-height: 1.18;
    padding: 5px 4px;
}
.dashboard-table-card .table-fit th {
    font-size: 9.5px;
    line-height: 1.12;
}
.dashboard-table-card .table-fit .compact-text {
    line-height: 1.16;
}
.dashboard-table-card .table-fit .muted,
.dashboard-table-card .table-fit .link-inline {
    font-size: 9.5px;
    line-height: 1.15;
}
.dashboard-table-card .table-fit .badge {
    font-size: 9.5px;
    padding: 2px 5px;
    line-height: 1.1;
}
.dashboard-table-card .table-fit .address-cell {
    white-space: normal;
}
.dashboard-table-card .table-fit .row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    margin: 0;
}
.dashboard-table-card .table-fit .row-actions .btn,
.dashboard-table-card .table-fit .row-actions .btn-disabled {
    display: block;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 4px 3px;
    font-size: 9px;
    line-height: 1.05;
    border-radius: 5px;
    box-shadow: none;
    white-space: normal;
}
.dashboard-table-card .table-fit .mini-select {
    padding: 4px 3px;
    font-size: 9.5px;
    line-height: 1.1;
}
.dashboard-table-card .table-fit .mini-form {
    gap: 3px;
}
.dashboard-table-card .table-fit .mini-form .btn {
    padding: 4px 3px;
    font-size: 9px;
}

/* Lebar ulang 15 kolom agar semua field masuk dalam satu layar desktop. */
.dashboard-table-card .table-fit th:nth-child(1),
.dashboard-table-card .table-fit td:nth-child(1) { width: 3%; text-align: center; }
.dashboard-table-card .table-fit th:nth-child(2),
.dashboard-table-card .table-fit td:nth-child(2) { width: 4%; }
.dashboard-table-card .table-fit th:nth-child(3),
.dashboard-table-card .table-fit td:nth-child(3) { width: 5%; }
.dashboard-table-card .table-fit th:nth-child(4),
.dashboard-table-card .table-fit td:nth-child(4) { width: 8%; }
.dashboard-table-card .table-fit th:nth-child(5),
.dashboard-table-card .table-fit td:nth-child(5) { width: 6%; }
.dashboard-table-card .table-fit th:nth-child(6),
.dashboard-table-card .table-fit td:nth-child(6) { width: 7%; }
.dashboard-table-card .table-fit th:nth-child(7),
.dashboard-table-card .table-fit td:nth-child(7) { width: 7%; }
.dashboard-table-card .table-fit th:nth-child(8),
.dashboard-table-card .table-fit td:nth-child(8) { width: 12%; }
.dashboard-table-card .table-fit th:nth-child(9),
.dashboard-table-card .table-fit td:nth-child(9) { width: 8%; }
.dashboard-table-card .table-fit th:nth-child(10),
.dashboard-table-card .table-fit td:nth-child(10) { width: 5%; }
.dashboard-table-card .table-fit th:nth-child(11),
.dashboard-table-card .table-fit td:nth-child(11) { width: 5%; }
.dashboard-table-card .table-fit th:nth-child(12),
.dashboard-table-card .table-fit td:nth-child(12) { width: 7%; }
.dashboard-table-card .table-fit th:nth-child(13),
.dashboard-table-card .table-fit td:nth-child(13) { width: 6%; }
.dashboard-table-card .table-fit th:nth-child(14),
.dashboard-table-card .table-fit td:nth-child(14) { width: 5%; }
.dashboard-table-card .table-fit th:nth-child(15),
.dashboard-table-card .table-fit td:nth-child(15) { width: 12%; }
.compact-dashboard-note {
    margin-top: -4px;
    color: #0f5e8c;
}

@media (max-width: 900px) {
    .dashboard-table-card .table-fit th,
    .dashboard-table-card .table-fit td {
        font-size: 13px;
        line-height: 1.35;
        padding: 10px 12px;
    }
    .dashboard-table-card .table-fit .muted,
    .dashboard-table-card .table-fit .link-inline,
    .dashboard-table-card .table-fit .badge {
        font-size: 12px;
    }
    .dashboard-table-card .table-fit .row-actions {
        grid-template-columns: 1fr 1fr;
    }
    .dashboard-table-card .table-fit .row-actions .btn,
    .dashboard-table-card .table-fit .row-actions .btn-disabled {
        font-size: 12px;
        padding: 8px 8px;
    }
}

/* =====================================================
   VERSI 50 - DASHBOARD LIST RINGKAS TANPA SLIDER
   Perbaikan: mengganti tabel 15 kolom menjadi baris/kartu ringkas
   agar semua data tampil berurutan dan tidak terasa hanya 1 baris.
   ===================================================== */
.alumni-list-info {
    background: #f2f8ff;
    border: 1px solid #bfdbfe;
    border-left: 5px solid #0b4f85;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 10px 0 12px;
    color: #274060;
    font-size: 13px;
}
.alumni-compact-list {
    display: block;
    width: 100%;
}
.alumni-compact-row {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #d7e0ea;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 76, 129, .05);
}
.alumni-row-top {
    display: grid;
    grid-template-columns: 86px 1.35fr .95fr 1.15fr .95fr;
    gap: 8px;
    align-items: stretch;
}
.alumni-no-box,
.alumni-name-box,
.alumni-info-box,
.alumni-detail {
    min-width: 0;
    border: 1px solid #edf2f7;
    background: #f8fbff;
    border-radius: 9px;
    padding: 8px 9px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.alumni-no-box {
    text-align: center;
    background: #fff7f7;
    border-color: #fecaca;
}
.alumni-no-box span,
.alumni-name-box span,
.alumni-info-box b,
.alumni-detail b,
.alumni-detail span {
    display: block;
}
.alumni-no-box span,
.alumni-name-box span,
.alumni-detail b,
.alumni-info-box b {
    font-size: 11px;
    color: #667085;
    line-height: 1.25;
}
.alumni-no-box strong {
    display: block;
    font-size: 32px;
    line-height: 1;
    color: #dc2626;
    margin-top: 4px;
}
.alumni-name-box strong {
    display: block;
    color: #07345d;
    font-size: 14px;
    line-height: 1.25;
    margin-bottom: 3px;
}
.alumni-info-box,
.alumni-detail {
    font-size: 12px;
    line-height: 1.28;
}
.alumni-row-middle {
    display: grid;
    grid-template-columns: 2fr 1.35fr .95fr 1.15fr 1.05fr;
    gap: 8px;
    margin-top: 8px;
}
.alumni-detail {
    background: #ffffff;
}
.alumni-detail b {
    color: #07345d;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .2px;
}
.alumni-detail .muted,
.alumni-detail .link-inline {
    font-size: 11px;
    line-height: 1.22;
}
.alumni-detail .badge,
.alumni-info-box .badge {
    white-space: normal;
    font-size: 10.5px;
    padding: 3px 6px;
    line-height: 1.1;
    margin: 1px 0;
}
.detail-address {
    font-size: 12.5px;
    font-weight: 600;
}
.alumni-row-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed #d7e0ea;
}
.alumni-row-bottom .btn,
.alumni-row-bottom .btn-disabled {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 8px;
    box-shadow: none;
}
.compact-expedisi-form {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2px;
}
.compact-expedisi-form .mini-select {
    flex: 1 1 110px;
    min-width: 100px;
    padding: 6px 7px;
    font-size: 11px;
}
.compact-expedisi-form .btn {
    flex: 0 0 auto;
    padding: 6px 8px;
    font-size: 11px;
}
.empty-state {
    padding: 18px;
    border: 1px dashed #b9c6d3;
    border-radius: 12px;
    background: #f8fbff;
    color: #667085;
    text-align: center;
    font-weight: bold;
}
@media (max-width: 1280px) {
    .alumni-row-top {
        grid-template-columns: 78px 1.4fr 1fr 1fr;
    }
    .alumni-row-top .alumni-info-box:nth-child(5) {
        grid-column: 2 / span 3;
    }
    .alumni-row-middle {
        grid-template-columns: 1.7fr 1.25fr 1fr;
    }
}
@media (max-width: 900px) {
    .alumni-row-top,
    .alumni-row-middle {
        display: block;
    }
    .alumni-no-box,
    .alumni-name-box,
    .alumni-info-box,
    .alumni-detail {
        margin-bottom: 8px;
    }
    .alumni-row-bottom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
    }
    .alumni-row-bottom .btn,
    .alumni-row-bottom .btn-disabled {
        width: 100%;
        text-align: center;
    }
}
@media (max-width: 520px) {
    .alumni-row-bottom {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   VERSI 51 - DASHBOARD KARTU MANDIRI
   Style tambahan. Dashboard juga menyertakan style inline agar tetap tampil
   rapi meskipun browser masih menyimpan cache CSS lama.
   ===================================================== */
.kd-card{background:#fff;border:1px solid #d8e2ee;border-radius:14px;padding:16px;margin:16px 0;box-shadow:0 3px 12px rgba(15,76,129,.05)}
.kd-title{margin:0 0 8px;color:#07345d;font-size:22px}.kd-muted{color:#667085;font-size:12px}.kd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.kd-stat{border:1px solid #e5edf5;border-radius:12px;background:#f8fbff;padding:12px}.kd-stat b{font-size:24px;color:#0b4f85;display:block}.kd-stat span{font-size:12px;color:#475467}.kd-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.kd-filter label{font-weight:bold;font-size:12px;color:#1f2a44;display:block;margin-bottom:5px}.kd-filter input,.kd-filter select{width:100%;padding:9px;border:1px solid #cbd5e1;border-radius:9px}.kd-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.kd-btn{display:inline-block;padding:8px 12px;border-radius:999px;text-decoration:none;border:1px solid transparent;font-weight:bold;font-size:12px;line-height:1.2}.kd-btn.blue{background:#0b4f85;color:#fff}.kd-btn.green{background:#15803d;color:#fff}.kd-btn.yellow{background:#f59e0b;color:#111827}.kd-btn.red{background:#dc2626;color:#fff}.kd-btn.gray{background:#eef2f7;color:#1f2a44;border-color:#cbd5e1}.kd-btn.disabled{background:#e5e7eb;color:#6b7280;cursor:not-allowed}.kd-badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:bold;margin:2px 3px 2px 0}.kd-badge.green{background:#dcfce7;color:#166534;border:1px solid #86efac}.kd-badge.yellow{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}.kd-badge.blue{background:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}.kd-badge.purple{background:#ede9fe;color:#6d28d9;border:1px solid #c4b5fd}.kd-badge.red{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}.kd-badge.gray{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1}.kd-link{color:#0b4f85;font-weight:bold;text-decoration:underline}.kd-list{display:block}.kd-row{display:block;border:1px solid #d7e0ea;border-radius:14px;background:#fff;margin:0 0 14px;padding:12px;box-shadow:0 2px 8px rgba(15,76,129,.05)}.kd-row-head{display:grid;grid-template-columns:90px 1.4fr 1fr 1.2fr 1fr;gap:8px}.kd-box{min-width:0;border:1px solid #edf2f7;border-radius:10px;background:#f8fbff;padding:9px;word-break:break-word}.kd-box label{display:block;font-size:11px;color:#64748b;font-weight:bold;text-transform:uppercase;margin-bottom:4px}.kd-number{text-align:center;background:#fff7f7;border-color:#fecaca}.kd-number strong{font-size:38px;line-height:1;color:#dc2626;display:block}.kd-name strong{font-size:16px;color:#07345d}.kd-row-body{display:grid;grid-template-columns:1.7fr 1.2fr 1fr 1.15fr;gap:8px;margin-top:8px}.kd-address{font-weight:600;font-size:13px}.kd-expedisi-form{display:flex;gap:6px;flex-wrap:wrap}.kd-expedisi-form select{min-width:140px;padding:7px;border:1px solid #cbd5e1;border-radius:8px}.kd-row-actions{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;border-top:1px dashed #d7e0ea;margin-top:10px;padding-top:10px}.kd-table{width:100%;border-collapse:collapse}.kd-table th,.kd-table td{border-bottom:1px solid #e5edf5;padding:7px;font-size:12px;text-align:left}.kd-table th{background:#eaf2fb;color:#07345d}.kd-page{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.kd-alert{background:#fff7ed;border:1px solid #fed7aa;border-left:5px solid #f97316;border-radius:10px;padding:10px;margin:10px 0;color:#7c2d12}.kd-count-debug{font-size:12px;color:#0b4f85;margin-top:6px}
@media(max-width:1200px){.kd-row-head{grid-template-columns:80px 1.4fr 1fr}.kd-row-body{grid-template-columns:1fr 1fr}.kd-row-head .kd-box:nth-child(4),.kd-row-head .kd-box:nth-child(5){grid-column:auto}}
@media(max-width:760px){.kd-row-head,.kd-row-body{display:block}.kd-box{margin-bottom:8px}.kd-row-actions{display:grid;grid-template-columns:1fr 1fr}.kd-row-actions .kd-btn{text-align:center}.kd-filter{display:block}.kd-filter>div{margin-bottom:10px}}
@media(max-width:420px){.kd-row-actions{grid-template-columns:1fr}.kd-number strong{font-size:32px}}


/* =====================================================
   VERSI 53 - DASHBOARD TABEL SEPERTI V46
   Kolom Serdik Digital tidak ditampilkan. Tabel dibuat fit 100%.
   ===================================================== */
.kd-table-wrap{width:100%;overflow:visible;max-height:none;height:auto;margin-top:12px}
.kd-display-control{margin:12px 0;padding:10px 0;border-top:1px solid #e5edf5;border-bottom:1px solid #e5edf5}
.kd-perpage-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.kd-perpage-form label{font-weight:bold;color:#1f2a44}.kd-perpage-form select{padding:8px 12px;border:1px solid #cbd5e1;border-radius:9px;background:#fff}
.kd-table-fit{width:100%;border-collapse:collapse;table-layout:fixed;background:#fff}
.kd-table-fit th,.kd-table-fit td{border-bottom:1px solid #e5edf5;padding:7px 6px;vertical-align:top;text-align:left;font-size:10.8px;line-height:1.25;color:#1f2a44;white-space:normal;word-break:break-word;overflow-wrap:anywhere}
.kd-table-fit thead th{background:#eaf2fb;color:#07345d;font-weight:bold;border-top:1px solid #d7e2ef}
.kd-table-fit tbody tr:nth-child(even){background:#fbfdff}.kd-table-fit tbody tr:hover{background:#f4f9ff}.kd-table-fit .kd-col-no{font-size:10.8px;font-weight:normal;color:#1f2a44;text-align:center}.kd-address-cell{font-weight:600}.kd-table-actions{display:flex;flex-direction:column;gap:5px;align-items:stretch}.kd-table-actions .kd-btn{padding:6px 7px;font-size:10px;text-align:center;border-radius:8px}.kd-mini-form{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.kd-mini-select{width:100%;max-width:120px;padding:6px;border:1px solid #cbd5e1;border-radius:8px;font-size:10px}.kd-table-fit th:nth-child(1){width:3.2%}.kd-table-fit th:nth-child(2){width:5.2%}.kd-table-fit th:nth-child(3){width:6.4%}.kd-table-fit th:nth-child(4){width:8.2%}.kd-table-fit th:nth-child(5){width:7.3%}.kd-table-fit th:nth-child(6){width:7.2%}.kd-table-fit th:nth-child(7){width:7.2%}.kd-table-fit th:nth-child(8){width:13.5%}.kd-table-fit th:nth-child(9){width:10.2%}.kd-table-fit th:nth-child(10){width:6%}.kd-table-fit th:nth-child(11){width:8.4%}.kd-table-fit th:nth-child(12){width:7.6%}.kd-table-fit th:nth-child(13){width:5.6%}.kd-table-fit th:nth-child(14){width:7.8%}
@media(max-width:900px){.kd-table-wrap{overflow:visible}.kd-table-fit,.kd-table-fit thead,.kd-table-fit tbody,.kd-table-fit th,.kd-table-fit td,.kd-table-fit tr{display:block;width:100%}.kd-table-fit thead{display:none}.kd-table-fit tr{border:1px solid #d7e0ea;border-radius:12px;margin:0 0 12px;background:#fff;box-shadow:0 2px 8px rgba(15,76,129,.05);overflow:hidden}.kd-table-fit td{display:flex;gap:10px;justify-content:space-between;border-bottom:1px solid #edf2f7;font-size:12px}.kd-table-fit td:before{content:attr(data-label);font-weight:bold;color:#07345d;flex:0 0 38%;max-width:38%}.kd-table-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.kd-table-actions .kd-btn{font-size:11px}.kd-mini-select{max-width:none}.kd-mini-form{width:100%}}
@media(max-width:520px){.kd-table-fit td{display:block}.kd-table-fit td:before{display:block;max-width:100%;margin-bottom:4px}.kd-table-actions{grid-template-columns:1fr}}



/* VERSI 55 - Samakan font Nomor Urut pada tabel data alumni dashboard */
.kd-table-fit .kd-col-no{font-size:10.8px !important;font-weight:normal !important;color:#1f2a44 !important;text-align:center;}
@media(max-width:900px){.kd-table-fit .kd-col-no{font-size:12px !important;font-weight:normal !important;color:#1f2a44 !important;text-align:inherit;}}

/* =====================================================
   VERSI 56 - Paket Tanpa Map dan Pernyataan Risiko
   ===================================================== */
.statement-box{margin:10px 0;padding:12px;border-left:4px solid #0b4f85;background:#f8fbff;border-radius:10px}
.statement-check{display:flex;gap:10px;align-items:flex-start;font-weight:700;color:#1f2a44;line-height:1.4}
.statement-check input{width:18px;height:18px;margin-top:2px;flex:0 0 auto}
.payment-amount.amount-free{background:#eef2f7;color:#334155;border-color:#cbd5e1}
@media(max-width:700px){.statement-check{font-size:14px}}

/* V57 - No. Resi dan unggah massal link Serdik */
.kd-mini-input{
    max-width:130px;
    padding:7px 8px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    font-size:11px;
    box-sizing:border-box;
}
.kd-resi-form{
    gap:5px;
    align-items:center;
}
@media(max-width:760px){
    .kd-mini-input{max-width:100%;width:100%;}
}

/* V59 - Operator import resi dan isian Atas Nama Transfer */
.kd-transfer-form{
    margin:4px 0 4px;
    width:100%;
}
.kd-transfer-input{
    max-width:170px;
    width:100%;
}
.kd-transfer-form .kd-btn{
    min-width:58px;
}
@media(max-width:760px){
    .kd-transfer-input{max-width:100%;width:100%;}
    .kd-transfer-form .kd-btn{width:100%;}
}

/* V63 - Status FC dan Dashboard Fotokopi */
.kd-fc-table th,.kd-fc-table td{font-size:13px;line-height:1.35}
.kd-fc-table th:nth-child(1){width:12%}
.kd-fc-table th:nth-child(2){width:14%}
.kd-fc-table th:nth-child(3){width:18%}
.kd-fc-table th:nth-child(4){width:26%}
.kd-fc-table th:nth-child(5){width:30%}
.kd-fc-action{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kd-fc-action .kd-btn{border-radius:9px}

/* V66 - Jumlah Lembar Fotokopi dan Rekapitulasi FC */
.kd-fc-lembar-form{
    display:flex;
    gap:7px;
    align-items:center;
    flex-wrap:wrap;
    margin:8px 0 6px;
    padding:8px;
    border:1px dashed #cbd5e1;
    border-radius:10px;
    background:#f8fafc;
}
.kd-fc-lembar-form label{font-size:12px;font-weight:bold;color:#475569;}
.kd-fc-lembar-form input{
    width:80px;
    padding:7px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    text-align:center;
    font-weight:bold;
}
.kd-fc-total{font-size:18px;font-weight:bold;color:#07345d;}
@media(max-width:760px){
    .kd-fc-lembar-form input{width:100%;}
    .kd-fc-lembar-form .kd-btn{width:100%;text-align:center;}
}

/* V68 - Ganti password admin/operator */
.form-info-box {
    background: #f8fafc;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    padding: 12px 14px;
    color: #334155;
    line-height: 1.45;
}