/**
 * SIMLITABMAS • Standar Antarmuka Panel
 * =====================================
 * HANYA untuk panel login-berbasis-role (body.sim-body).
 * File ini dimuat SETELAH panel.css agar penyesuaian tampilan berada di satu tempat.
 *
 * Susunan: 1. Tokens  2. Tata letak  3. Card & KPI  4. Form & filter
 *          5. Tabel  6. Status & tombol  7. Modal/tabs  8. Responsive.
 *
 * Jangan menambahkan CSS per modul jika komponen umum sudah tersedia di sini.
 */

/* 1. Design tokens — ubah variabel ini untuk mengubah gaya seluruh role. */
body.sim-body {
    --ui-primary: #0a4f8a;
    --ui-primary-dark: #063b69;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f7faff;
    --ui-border: #e2eaf2;
    --ui-text: #24374c;
    --ui-muted: #6e8197;
    --ui-radius: 14px;
    --ui-radius-small: 9px;
    --ui-shadow: 0 5px 18px rgba(28, 71, 112, .055);
    --ui-space: 16px;
    color: var(--ui-text);
}

/* 2. Hierarki judul dan ruang isi. */
.sim-body .sim-content { padding: 24px; }
.sim-body .content-head { margin-bottom: 20px !important; }
.sim-body .content-head h4 {
    color: var(--ui-text);
    font-size: 1.25rem;
    line-height: 1.35;
    letter-spacing: -.02em;
}
.sim-body .page-intro,
.sim-body .dashboard-heading,
.sim-body .page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.sim-body .dashboard-heading h5,
.sim-body .page-intro h5,
.sim-body .page-toolbar h5,
.sim-body .page-toolbar h6 {
    color: var(--ui-text);
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 750;
    margin-bottom: 4px;
}
.sim-body .dashboard-heading p,
.sim-body .page-intro p,
.sim-body .page-toolbar .text-muted {
    color: var(--ui-muted) !important;
    font-size: .82rem;
    line-height: 1.6;
    margin-bottom: 0;
}
.sim-body .eyebrow {
    color: var(--ui-primary);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* 3. Card utama, ringkasan, dan ikon status. */
.sim-body .page-card,
.sim-body .dashboard-card,
.sim-body .inner-card,
.sim-body .stat-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    min-width: 0;
}
.sim-body .page-card { padding: 20px; }
.sim-body .page-card > h6:first-child,
.sim-body .dashboard-card .card-head h6 {
    color: var(--ui-text);
    font-weight: 750;
    line-height: 1.45;
}
.sim-body .stat-card {
    min-height: 94px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
}
.sim-body .stat-card .ui-stat-copy,
.sim-body .stat-card > div:last-child { min-width: 0; flex: 1; }
.sim-body .stat-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.22rem;
}
.sim-body .stat-label {
    color: var(--ui-muted);
    font-size: .74rem;
    line-height: 1.45;
    font-weight: 550;
    margin-bottom: 4px;
    white-space: normal;
    overflow-wrap: anywhere;
}
.sim-body .stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.25;
    color: #203d59;
    white-space: normal;
    overflow-wrap: anywhere;
}
.sim-body .stat-value.finance-value { font-size: clamp(.85rem, 1.2vw, 1.2rem); }
.sim-body .stat-note { font-size: .72rem; color: var(--ui-muted); margin-top: 4px; }

/* 4. Form dan filter. Berlaku untuk semua role tanpa mengubah alur JavaScript. */
.sim-body .form-label {
    display: inline-block;
    color: #455d77;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.5;
    margin-bottom: 6px;
}
.sim-body .form-control,
.sim-body .form-select,
.sim-body .input-group-text {
    min-height: 39px;
    border-radius: var(--ui-radius-small);
    border-color: #d9e4ef;
    font-size: .82rem;
}
.sim-body textarea.form-control { min-height: 100px; }
.sim-body .form-control:focus,
.sim-body .form-select:focus {
    border-color: #78a5ca;
    box-shadow: 0 0 0 3px rgba(10, 79, 138, .105);
}
.sim-body .form-text,
.sim-body .invalid-feedback { font-size: .72rem; line-height: 1.5; }
.sim-body .sim-admin-filters {
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-small);
    padding: 14px;
}
.sim-body .sim-admin-filters .btn,
.sim-body .page-card form .btn { white-space: nowrap; }

/* 5. Tabel dan DataTables; kolom panjang tetap dapat di-scroll. */
.sim-body .table-responsive { max-width: 100%; overflow-x: auto; }
.sim-body .table-sim {
    width: 100%;
    margin-bottom: 0;
    font-size: .79rem;
    vertical-align: middle;
    border-color: #e8eef4;
}
.sim-body .table-sim thead th {
    background: #f4f8fc;
    color: #526984;
    font-size: .72rem;
    line-height: 1.4;
    font-weight: 750;
    border-bottom: 1px solid #dde8f3;
    padding: 12px 10px;
    white-space: normal;
}
.sim-body .table-sim tbody td {
    padding: 12px 10px;
    line-height: 1.55;
    color: var(--ui-text);
    vertical-align: middle;
}
.sim-body .table-sim tbody tr:hover td { background: #f8fbff; }
.sim-body .dataTables_wrapper .dataTables_filter input,
.sim-body .dataTables_wrapper .dataTables_length select {
    min-height: 35px;
    border: 1px solid #d9e4ef !important;
    border-radius: var(--ui-radius-small) !important;
}
.sim-body .dataTables_wrapper .dataTables_info,
.sim-body .dataTables_wrapper .dataTables_paginate,
.sim-body .dataTables_wrapper .dataTables_length { padding-top: 10px; }
.sim-body .pagination .page-link { border-radius: 7px; }

/* 6. Tombol, badge, alert: ukuran dan jarak identik di setiap modul. */
.sim-body .btn {
    min-height: 38px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 8px 14px;
    border-radius: var(--ui-radius-small);
    font-size: .79rem;
    font-weight: 650;
    line-height: 1.4;
}
.sim-body .btn.btn-sm {
    min-height: 32px;
    padding: 6px 10px;
    font-size: .74rem;
}
.sim-body .btn:focus-visible,
.sim-body .form-check-input:focus-visible {
    outline: 2px solid #2976b7;
    outline-offset: 2px;
}
.sim-body .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: .72rem;
    line-height: 1.25;
    font-weight: 700;
    white-space: normal;
    text-align: center;
}
.sim-body .alert { border-radius: var(--ui-radius-small); line-height: 1.6; }
.sim-body .empty-state { padding: 32px 20px; color: var(--ui-muted); }

/* 7. Tabs dan modal form. */
.sim-body .segmented-tabs { gap: 6px; }
.sim-body .segmented-tabs button {
    min-height: 35px;
    border-radius: var(--ui-radius-small);
    line-height: 1.45;
}
.sim-body .modal-content { border-radius: var(--ui-radius) !important; }
.sim-body .modal-header,
.sim-body .modal-body { padding: 20px; }
.sim-body .modal-title { font-weight: 750; font-size: 1rem; }

/* 8. Responsive: mencegah tombol memotong judul dan angka pada layar kecil. */
@media (max-width: 767.98px) {
    .sim-body .sim-content { padding: 16px 12px; }
    .sim-body .page-card { padding: 15px; }
    .sim-body .stat-card { padding: 12px; gap: 10px; min-height: 88px; }
    .sim-body .stat-icon { width: 39px; height: 39px; flex-basis: 39px; font-size: 1.05rem; }
    .sim-body .stat-value { font-size: 1.16rem; }
    .sim-body .stat-value.finance-value { font-size: .84rem; }
    .sim-body .page-toolbar > .btn { width: 100%; }
    .sim-body .table-sim { font-size: .76rem; }
}