/* =====================================================================
 * dm-modern.css
 * Sentuhan tampilan modern (konsisten dengan #dashboardv3) untuk SEMUA menu.
 * File ini di-load global dari layouts/header.php.
 * Hanya mengubah PRESENTASI (warna, radius, shadow, spacing) — tidak
 * mengubah struktur, ID, name, atau fungsi apa pun.
 * ===================================================================== */

/* ---------- Variabel warna ---------- */
:root {
    --dm-blue: #1e88e5;
    --dm-blue-dark: #1561a5;
    --dm-green: #2ecc71;
    --dm-green-dark: #1e8449;
    --dm-orange: #f39c12;
    --dm-orange-dark: #d35400;
    --dm-red: #e74c3c;
    --dm-red-dark: #a93226;
    --dm-purple: #9b59b6;
    --dm-teal: #1abc9c;
    --dm-ink: #33475b;
    --dm-muted: #7b8a9a;
    --dm-line: #e6ecf2;
    --dm-bg-soft: #f6f9fc;
    --dm-radius: 14px;
    --dm-shadow: 0 6px 20px rgba(16, 42, 67, 0.08);
    --dm-shadow-hover: 0 12px 28px rgba(16, 42, 67, 0.14);
}

/* ---------- Jarvis Widget (kotak utama tiap menu) ---------- */
.jarviswidget {
    border-radius: var(--dm-radius);
    box-shadow: var(--dm-shadow);
    border: 1px solid var(--dm-line);
    margin-bottom: 22px;
    background: #fff;
    transition: box-shadow .25s ease;
}

.jarviswidget:hover {
    box-shadow: var(--dm-shadow-hover);
}

.jarviswidget>header {
    background: linear-gradient(120deg, #0b3d91 0%, #1561a5 55%, #1e88e5 100%) !important;
    color: #fff !important;
    border-bottom: none !important;
    border-radius: var(--dm-radius) var(--dm-radius) 0 0;
}

/* Hormati warna asli tiap menu (jarviswidget-color-*) dengan gradien senada */
.jarviswidget.jarviswidget-color-teal>header {
    background: linear-gradient(120deg, #0e6655 0%, #1abc9c 100%) !important;
}

.jarviswidget.jarviswidget-color-greenDark>header,
.jarviswidget.jarviswidget-color-green>header {
    background: linear-gradient(120deg, #1e8449 0%, #2ecc71 100%) !important;
}

.jarviswidget.jarviswidget-color-blueDark>header,
.jarviswidget.jarviswidget-color-blue>header {
    background: linear-gradient(120deg, #0b3d91 0%, #1e88e5 100%) !important;
}

.jarviswidget.jarviswidget-color-orange>header,
.jarviswidget.jarviswidget-color-orangeDark>header {
    background: linear-gradient(120deg, #d35400 0%, #f39c12 100%) !important;
}

.jarviswidget.jarviswidget-color-red>header,
.jarviswidget.jarviswidget-color-redDark>header {
    background: linear-gradient(120deg, #a93226 0%, #e74c3c 100%) !important;
}

.jarviswidget.jarviswidget-color-purple>header {
    background: linear-gradient(120deg, #6c3483 0%, #9b59b6 100%) !important;
}

.jarviswidget.jarviswidget-color-pink>header,
.jarviswidget.jarviswidget-color-pinkDark>header {
    background: linear-gradient(120deg, #a9328a 0%, #e91e8c 100%) !important;
}

.jarviswidget>header h2 {
    color: #fff !important;
    font-weight: 700;
    text-shadow: none;
}

.jarviswidget>header .widget-icon {
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px;
    color: #fff !important;
}

.jarviswidget>header .widget-icon i {
    color: #fff !important;
}

.jarviswidget>header>.jarviswidget-ctrls a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.jarviswidget>header>.jarviswidget-ctrls a:hover {
    color: #fff !important;
}

.jarviswidget .widget-body {
    background: #fff;
}

.jarviswidget .widget-body.no-padding {
    padding: 0;
}

/* ---------- Well (kotak abu-abu bawaan) ---------- */
.well {
    border-radius: var(--dm-radius);
    border: 1px solid var(--dm-line);
    background: var(--dm-bg-soft);
    box-shadow: none;
}

/* ---------- Tombol ---------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--dm-blue), var(--dm-blue-dark)) !important;
    border-color: var(--dm-blue-dark) !important;
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.32);
}

.btn-success {
    background: linear-gradient(135deg, var(--dm-green), var(--dm-green-dark)) !important;
    border-color: var(--dm-green-dark) !important;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.32);
}

.btn-warning {
    background: linear-gradient(135deg, var(--dm-orange), var(--dm-orange-dark)) !important;
    border-color: var(--dm-orange-dark) !important;
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.32);
}

.btn-danger {
    background: linear-gradient(135deg, var(--dm-red), var(--dm-red-dark)) !important;
    border-color: var(--dm-red-dark) !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.32);
}

.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover {
    box-shadow: 0 8px 18px rgba(16, 42, 67, 0.22);
}

/* ---------- Form ---------- */
.smart-form .input input,
.smart-form .select select,
.smart-form .textarea textarea,
.smart-form .input-file .button,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
    border-radius: 10px !important;
    border-color: var(--dm-line) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.smart-form .input input:focus,
.smart-form .select select:focus,
.smart-form .textarea textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: var(--dm-blue) !important;
    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15) !important;
    outline: none;
}

.smart-form fieldset {
    border-radius: var(--dm-radius);
}

.smart-form footer {
    background: var(--dm-bg-soft);
    border-top: 1px solid var(--dm-line);
    border-radius: 0 0 var(--dm-radius) var(--dm-radius);
}

/* ---------- Tabel ---------- */
.table {
    border-radius: var(--dm-radius);
}

/* Gradien ditaruh di <thead> (satu blok) supaya header kolom TIDAK belang-belang.
   <th> dibuat transparan agar warna latar bawaan DataTables/SmartAdmin tidak muncul. */
.table>thead,
.table>thead>tr {
    background: linear-gradient(120deg, #1561a5, #1e88e5);
}

.table>thead>tr>th {
    background-color: transparent !important;
    color: #fff !important;
    font-weight: 700;
    border-bottom: none !important;
    vertical-align: middle;
    box-shadow: none !important;
}

.table>thead>tr>th a,
.table>thead>tr>th i {
    color: #fff !important;
}

/* DataTables: pertahankan ikon sorting (background-image) tapi hilangkan warna latar
   bawaan yang menyebabkan header belang-belang. */
.dataTables_wrapper table.table thead .sorting,
.dataTables_wrapper table.table thead .sorting_asc,
.dataTables_wrapper table.table thead .sorting_desc,
.dataTables_wrapper table.table thead .sorting_asc_disabled,
.dataTables_wrapper table.table thead .sorting_desc_disabled {
    background-color: transparent !important;
}

/* Hover header: efek lembut, tanpa mengubah warna latar bawaan */
.table>thead>tr>th:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.table-striped>tbody>tr:nth-child(odd)>td {
    background-color: #f8fbfe;
}

.table-hover>tbody>tr:hover>td {
    background-color: #eaf4ff;
}

.table>tbody>tr>td {
    vertical-align: middle;
    border-color: var(--dm-line);
}

/* ---------- Panel ---------- */
.panel {
    border-radius: var(--dm-radius);
    border: 1px solid var(--dm-line);
    box-shadow: var(--dm-shadow);
}

.panel-heading {
    border-radius: var(--dm-radius) var(--dm-radius) 0 0 !important;
    font-weight: 700;
}

/* ---------- Badge & Label ---------- */
.badge,
.label {
    border-radius: 50px;
    font-weight: 700;
    padding: 4px 10px;
}

/* ---------- Modal ---------- */
.modal-content {
    border-radius: var(--dm-radius);
    border: none;
    box-shadow: 0 18px 50px rgba(16, 42, 67, 0.28);
}

.modal-header {
    background: linear-gradient(120deg, #0b3d91 0%, #1561a5 55%, #1e88e5 100%);
    color: #fff;
    border-bottom: none;
    border-radius: var(--dm-radius) var(--dm-radius) 0 0;
}

.modal-header .close {
    color: #fff;
    opacity: .85;
    text-shadow: none;
}

.modal-header .close:hover {
    opacity: 1;
}

.modal-title {
    font-weight: 700;
    color: #fff;
}

.modal-footer {
    background: var(--dm-bg-soft);
    border-top: 1px solid var(--dm-line);
    border-radius: 0 0 var(--dm-radius) var(--dm-radius);
}

/* ---------- Nav Tabs ---------- */
.nav-tabs>li>a {
    border-radius: 10px 10px 0 0;
    font-weight: 600;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    color: var(--dm-blue-dark);
    border-top: 3px solid var(--dm-blue);
}

/* ---------- Alert ---------- */
.alert {
    border-radius: var(--dm-radius);
    border: none;
    box-shadow: var(--dm-shadow);
}

/* ---------- Select2 ---------- */
.select2-container .select2-choice,
.select2-container--default .select2-selection--single {
    border-radius: 10px !important;
}

/* ---------- Pagination ---------- */
.pagination>li>a,
.pagination>li>span {
    border-radius: 8px !important;
    margin: 0 2px;
    color: var(--dm-blue-dark);
    border-color: var(--dm-line);
}

.pagination>.active>a,
.pagination>.active>span {
    background: linear-gradient(135deg, var(--dm-blue), var(--dm-blue-dark));
    border-color: var(--dm-blue-dark);
}

/* ---------- Judul halaman ---------- */
.page-title {
    font-weight: 800;
    color: var(--dm-ink);
}

/* ============================================================
   HEADER ATAS (setelah login) — tampilan modern
   ============================================================ */
#header {
    background-image: linear-gradient(135deg, #1e5799 0%, #2a69a2 55%, #3d8ace 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 12px rgba(20, 45, 80, 0.28) !important;
    height: 56px !important;
    padding-right: 16px !important;
}

#header>div {
    height: 56px !important;
}

/* Logo & nama aplikasi */
#logo-group {
    display: flex !important;
    align-items: center;
    height: 56px;
}

#logo {
    display: flex !important;
    align-items: center;
    width: auto !important;
    margin: 0 !important;
    padding-left: 14px;
    height: 56px;
}

#logo img {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

#logo .logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 12px;
}

#logo .redaksional_app {
    margin: 0 !important;
    color: #fff !important;
    font-size: 21px !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

#logo .badan_app {
    margin: 2px 0 0 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.1;
    letter-spacing: 0.4px;
}

/* Tombol-tombol header (kanan) */
#header .btn-header> :first-child>a {
    background: rgba(255, 255, 255, 0.14) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 10px !important;
    color: #fff !important;
    height: 36px !important;
    min-width: 36px !important;
    line-height: 1 !important;
    margin-top: 10px !important;
    padding: 0 10px !important;
    font-size: 15px !important;
    transition: all 0.2s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
}

#header .btn-header> :first-child>a:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

#header .btn-header> :first-child>a:active {
    background: rgba(255, 255, 255, 0.35) !important;
    background-image: none !important;
}

#header .btn-header a>span {
    color: #fff !important;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    height: auto;
    display: inline-flex;
    align-items: center;
}

/* Label teks pada tombol header (mis. "Info Profil") */
#header .btn-header .dm-btn-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}

/* Tombol Info Profil (dengan teks) */
#header #headerdektop.btn-header> :first-child>a {
    padding: 0 14px !important;
    font-weight: 600;
    width: auto !important;
    min-width: 36px !important;
}

#header #headerdektop.btn-header> :first-child>a i {
    font-size: 14px;
}

/* Pastikan tombol berlabel teks tidak dipaksa sempit oleh media query SmartAdmin */
#header .btn-header.dm-has-label> :first-child>a,
#header #headerdektop.btn-header> :first-child>a {
    width: auto !important;
}

/* Dropdown Info Profil */
#header .btn-header .dropdown-menu {
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 12px 34px rgba(20, 45, 80, 0.22) !important;
    padding: 8px !important;
    margin-top: 8px !important;
    overflow: hidden;
}

#header .btn-header .dropdown-menu li p {
    margin: 0;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 13px;
    color: #33475b;
}

#header .btn-header .dropdown-menu li p:hover {
    background: #f2f7fc;
}

#header .btn-header .dropdown-menu li p .col {
    padding-left: 0;
    padding-right: 0;
}

#header .btn-header .dropdown-menu li:first-child p {
    font-weight: 600;
}

#header .btn-header .dropdown-menu li a {
    display: block;
    border-radius: 9px;
    text-align: center;
    font-weight: 600;
    padding: 9px 12px;
    margin-top: 4px;
}

/* ---------- Dropdown Info Profil (modern) ---------- */
#header .dm-profile-menu {
    width: 360px !important;
    min-width: 300px !important;
    max-width: 92vw !important;
    padding: 0 !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 18px 44px rgba(20, 45, 80, 0.24) !important;
    overflow: hidden;
    background: #fff !important;
}

#header .dm-profile-menu-mobile {
    width: 300px !important;
}

/* Header kartu profil */
#header .dm-profile-menu .dm-profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 16px;
    background: linear-gradient(135deg, #1e5799 0%, #2a69a2 55%, #3d8ace 100%);
    color: #fff;
}

#header .dm-profile-menu .dm-profile-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

#header .dm-profile-menu .dm-profile-head-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#header .dm-profile-menu .dm-profile-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    white-space: normal;
    word-break: break-word;
}

#header .dm-profile-menu .dm-profile-nip {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
    letter-spacing: 0.3px;
}

/* Baris data */
#header .dm-profile-menu .dm-profile-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 18px;
    border-bottom: 1px solid #eef2f7;
}

#header .dm-profile-menu .dm-profile-row:last-of-type {
    border-bottom: none;
}

#header .dm-profile-menu .dm-profile-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8a9bb0;
    display: flex;
    align-items: center;
    gap: 6px;
}

#header .dm-profile-menu .dm-profile-label i {
    color: #3d8ace;
    font-size: 12px;
}

#header .dm-profile-menu .dm-profile-value {
    font-size: 13.5px;
    font-weight: 600;
    color: #22384f;
    line-height: 1.35;
    word-break: break-word;
}

/* Tombol tutup */
#header .dm-profile-menu .dm-profile-foot {
    padding: 12px 14px 14px;
}

#header .dm-profile-menu .dm-profile-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(230, 126, 34, 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#header .dm-profile-menu .dm-profile-close:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 20px rgba(230, 126, 34, 0.42);
    color: #fff !important;
}

/* ---------- Responsif ---------- */
@media (max-width: 767px) {
    .jarviswidget {
        border-radius: 10px;
    }

    #logo .badan_app {
        display: none;
    }

    #logo .redaksional_app {
        font-size: 17px !important;
    }
}