@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

/* PLM visual layer. Bootstrap 3 and existing AdminLTE behavior remain intact. */
:root {
    --plm-font-family: 'Manrope', sans-serif;
    --plm-font-heading: var(--plm-font-family);
    --plm-ink: #5e6372;
    --plm-heading: #5e6372;
    --plm-text-secondary: #5e6372;
    --plm-muted: #7e838e;
    --plm-primary: #2f6fe8;
    --plm-primary-dark: #1e57c9;
    --plm-link: #1e5bd6;
    --plm-primary-soft: #eaf0ff;
    --plm-accent: #19b394;
    --plm-success: #19b394;
    --plm-success-dark: #14977d;
    --plm-success-soft: #e6f7f3;
    --plm-info: #3b9fd6;
    --plm-info-dark: #2f8abb;
    --plm-info-soft: #e8f4fb;
    --plm-warning: #e2a63b;
    --plm-warning-dark: #c98f24;
    --plm-warning-soft: #fdf5e6;
    --plm-danger: #dd5a67;
    --plm-danger-dark: #c44450;
    --plm-danger-soft: #fdeef0;
    --plm-default: #6b7280;
    --plm-default-dark: #565e6b;
    --plm-default-soft: #eef1f7;
    --plm-surface: #ffffff;
    --plm-background: #f3f5fa;
    --plm-border: #e6e8ef;
    --plm-table-head-bg: #f6f7fb;
    --plm-navy: #111a33;
    --plm-navy-hover: #1f2a50;
    --plm-menu-text: #c9d1ea;
    --plm-active-line: #7c9bff;
    --plm-radius: 12px;
    --plm-radius-card: 16px;
    --plm-shadow: 0 10px 30px rgba(23, 35, 61, .07);
    --plm-shadow-pop: 0 18px 40px rgba(17, 26, 51, .16);
}

html,
body,
button,
input,
optgroup,
select,
textarea,
.btn,
.form-control,
.dropdown-menu,
.table,
.nav,
.navbar,
.modal,
.popover,
.tooltip,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.plm-brand-name,
.plm-page-title,
.plm-hero h1,
.plm-sidebar-header,
.box-title,
.modal-title,
.box,
.panel,
.card,
.info-box,
.badge,
.label,
.alert,
.select2,
.select2-container,
.dataTables_wrapper,
.pagination {
    font-family: var(--plm-font-family) !important;
}

html,
body {
    background: var(--plm-background);
    color: var(--plm-ink);
    font-family: var(--plm-font-family) !important;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

html, h6, h5, h4, h3, h2, h1, input:not(#filterNavigateMenu), textarea:not(#filterNavigateMenu), optgroup:not(#filterNavigateMenu), select:not(#filterNavigateMenu), .select2-selection:not(#filterNavigateMenu), body, article, aside, details, figcaption, figure, footer, hgroup, main, menu, section, summary, button {
    font-family: var(--plm-font-family) !important;
    font-size: 14px;
}

/* Proteksi agar font icon tidak tertimpa */
.fa, [class*=" fa-"], [class^="fa-"] {
    font-family: FontAwesome !important;
}
.glyphicon, [class*=" glyphicon-"], [class^="glyphicon-"] {
    font-family: 'Glyphicons Halflings' !important;
}
.ion, [class*=" ion-"], [class^="ion-"] {
    font-family: "Ionicons" !important;
}

body {
    overflow-x: hidden;
}

.content-wrapper,
.right-side {
    background: var(--plm-background) !important;
}

.content {
    padding: 28px !important;
}

.breadcrumb {
    background: transparent !important;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--plm-muted);
    font-size: 13px;
    margin-bottom: 6px;
    padding: 0;
}

.breadcrumb > .active,
.breadcrumb a {
    color: var(--plm-muted) !important;
}

.breadcrumb a:hover {
    color: var(--plm-link) !important;
}

/* Judul halaman: <h1> dari override breadcrumbs, dan breadcrumb satu item
   yang ditulis langsung di beberapa halaman tampil dengan gaya yang sama. */
.plm-page-head {
    margin-bottom: 8px;
}

.plm-page-title,
.breadcrumb:not(.plm-crumbs) > li:last-child {
    color: var(--plm-heading) !important;
    font-size: 18px;
    font-weight: 700 !important;
    /*font-weight: 700;*/
    /*line-height: 1.3;*/
    margin: 0;
}

.breadcrumb:not(.plm-crumbs) {
    margin-bottom: 5px;
}

.breadcrumb:not(.plm-crumbs) > li:last-child:before {
    display: none;
}

.breadcrumb:not(.plm-crumbs) > li:last-child:not(:first-child) {
    display: block;
}

.box,
.small-box,
.card,
.panel {
    background: var(--plm-surface);
    border: 1px solid var(--plm-border) !important;
    border-radius: var(--plm-radius-card) !important;
    box-shadow: var(--plm-shadow) !important;
    overflow: hidden;
}

/* Terlapor rows are .box items whose search/delete buttons sit absolutely
   outside the right edge; clipping them would hide the buttons. */
.list_terlapor > li.box {
    overflow: visible;
}

.box-header,
.panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--plm-border);
    color: var(--plm-ink);
    padding: 18px 20px;
}

.box-body,
.panel-body {
    padding: 24px;
}

.box-footer,
.panel-footer {
    background: #fbfcfe !important;
    border-top: 1px solid var(--plm-border);
}

.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: #fbfcfe;
    border: 1px solid #d8e0ec;
    border-radius: 8px !important;
    box-shadow: none;
    color: var(--plm-ink);
    min-height: 40px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    background: #fff;
    border-color: var(--plm-primary);
    box-shadow: 0 0 0 3px rgba(36, 87, 214, .12);
}

label {
    color: var(--plm-ink);
    font-weight: 600 !important;
}

.btn {
    border-radius: 8px;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--plm-primary), #4d7cf3) !important;
    border-color: var(--plm-primary) !important;
    box-shadow: 0 6px 14px rgba(36, 87, 214, .18);
}

.btn-default,
.btn-secondary {
    background: #fff;
    border-color: var(--plm-border);
    color: var(--plm-ink);
}

.table {
    color: var(--plm-ink);
}

.table > thead > tr > th {
    background: var(--plm-table-head-bg);
    border-bottom: 1px solid var(--plm-border);
    color: var(--plm-muted);
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.table > tbody > tr > td {
    border-top-color: #edf1f6;
    vertical-align: top;
}

.dataTables_wrapper,
.table-responsive {
    overflow-x: auto;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d8e0ec;
    border-radius: 7px;
    min-height: 34px;
    padding: 5px 9px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 0 !important;
    border-radius: 7px !important;
    color: var(--plm-ink) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--plm-primary) !important;
    color: #fff !important;
}

.table-hover > tbody > tr:hover,
.table-laporan tbody tr:hover {
    background: #f7faff;
}

.alert {
    border: 0;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(23, 35, 61, .06);
}

.modal-content {
    border: 0;
    border-radius: var(--plm-radius);
    box-shadow: 0 20px 55px rgba(16, 27, 51, .2);
}

/* Keep Bootstrap's backdrop below the dialog, including legacy stacking contexts. */
.modal-backdrop { z-index: 1040 !important; }
.modal { z-index: 1050 !important; }
.modal-dialog { position: relative; z-index: 1051; }
.select2-dropdown { z-index: 1060 !important; }

.modal-header {
    border-bottom-color: var(--plm-border);
}

.modal-footer {
    background: #fbfcfe;
    border-top-color: var(--plm-border);
}

/* Public/auth screens use the same visual language without changing their forms. */
.login-container {
    background: var(--plm-surface) !important;
    border: 1px solid var(--plm-border);
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(16, 27, 51, .14) !important;
    overflow: hidden;
}

.login-form,
.register-box,
.register-box-body,
.login-box-body {
    color: var(--plm-ink);
}

.login-form h1,
.register-logo a,
.login-box-msg {
    color: var(--plm-ink) !important;
    font-weight: 700;
}

.login-bg {
    background-color: var(--plm-primary);
    filter: saturate(.85);
}

.dropdown-menu-login {
    border: 1px solid var(--plm-border);
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(16, 27, 51, .14);
    padding: 0;
}

.dropdown-menu-login .login-box-body {
    padding: 22px;
}

.register-box {
    margin: 24px auto;
}

.register-box-body {
    border: 1px solid var(--plm-border);
    border-radius: var(--plm-radius);
    box-shadow: var(--plm-shadow);
}

.small-box {
    transition: transform .25s ease, box-shadow .25s ease;
}

.small-box:hover {
    box-shadow: 0 15px 32px rgba(23, 35, 61, .12) !important;
    transform: translateY(-3px);
}

.dashboard-stat-card .inner {
    padding: 22px 24px;
}

.dashboard-stat-card h3 {
    color: var(--plm-primary);
    font-size: 32px;
    margin: 0 0 8px;
}

.dashboard-stat-card p {
    color: var(--plm-muted);
    font-weight: 600;
}

.dashboard-card-title {
    color: var(--plm-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 20px;
}

.dashboard-chart-card canvas {
    max-height: 250px;
}

.dashboard-summary-card .report-status {
    border-bottom: 1px solid #edf1f6;
    margin-bottom: 0;
    padding: 10px 0;
}

.dashboard-summary-card .report-status:last-child {
    border-bottom: 0;
}

.dashboard-summary-card .status-icon {
    border-radius: 9px;
}

.dashboard-summary-card .status-text b {
    color: var(--plm-ink);
}

.dashboard-summary-card .status-text div {
    color: var(--plm-muted);
    font-size: 14px;
    margin-top: 3px;
}

.content > * {
    animation: plm-enter .35s ease both;
}

@keyframes plm-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Layout aplikasi: header + menu bar horizontal + mega menu ===== */
.plm-app .wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: visible;
}

.plm-app .plm-topbar {
    flex: 0 0 auto;
}

.plm-app .content-wrapper {
    background: var(--plm-background) !important;
    flex: 1 0 auto;
    margin-left: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
}

.plm-app .plm-content {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    padding: 10px !important;
}

/* DataTables list pages reserve space for filters, headers and pagination. */
body.plm-table-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.plm-app .content.plm-table-content > * {
    animation: none;
}

.plm-table-content #table-laporan-container,
.plm-table-content #table-laporan-container-no-href {
    /* Neutralize legacy fixed heights before measuring available space. */
    height: auto;
}

.plm-table-content .plm-table-card {
    margin-bottom: 0;
}

.plm-table-content .plm-table-responsive {
    overflow: visible;
}

.plm-app .plm-viewport-table .dataTables_scrollBody {
    height: var(--plm-table-height, 240px) !important;
    max-height: var(--plm-table-height, 240px) !important;
    overflow: auto !important;
}

/* Header + menu bar tetap di atas saat scroll */
.plm-topbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 4px 14px rgba(17, 26, 51, .08);
}

/* Header utama */
.plm-header {
    background: #fff;
    border-bottom: 1px solid #c5d5f0;
}

.plm-header__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    min-height: 56px;
    padding: 0 32px;
}

.plm-brand {
    align-items: center;
    display: flex;
    gap: 10px;
    min-height: 44px;
    text-decoration: none !important;
}

.plm-brand img {
    height: 32px;
    width: 32px;
    object-fit: contain;
}

.plm-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.plm-brand__name {
    color: var(--plm-heading);
    font-size: 17px;
    font-weight: 700;
}

.plm-brand__tagline {
    color: var(--plm-muted);
    font-size: 11px;
}

.plm-header__actions {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-left: auto;
}

/* Blok user */
.plm-user {
    position: relative;
}

.plm-user__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    height: 44px; /* skin AdminLTE memaksa button { min-height: unset } */
    padding: 4px 8px;
    text-align: left;
}

.plm-user__toggle:hover,
.plm-user.is-open .plm-user__toggle {
    background: var(--plm-background);
}

.plm-user__avatar {
    border-radius: 50%;
    height: 32px;
    object-fit: cover;
    width: 32px;
}

.plm-user__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    max-width: 220px;
}

.plm-user__name {
    color: var(--plm-heading);
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plm-user__role {
    color: var(--plm-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plm-user .plm-chevron {
    color: var(--plm-muted);
}

.plm-user__panel {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    right: 0;
    top: calc(100% + 8px);
    width: 300px;
}

.plm-hamburger {
    background: transparent;
    border: 1px solid var(--plm-border);
    border-radius: 10px;
    display: none;
    height: 44px;
    padding: 0 11px;
    width: 44px;
}

.plm-hamburger .icon-bar {
    background: var(--plm-heading);
    border-radius: 1px;
    display: block;
    height: 2px;
    width: 20px;
}

.plm-hamburger .icon-bar + .icon-bar {
    margin-top: 4px;
}

/* Panel (dropdown, mega menu, panel user) */
.plm-panel {
    background: var(--plm-surface);
    border: 1px solid var(--plm-border);
    border-radius: 12px;
    box-shadow: var(--plm-shadow-pop);
    display: none;
    position: absolute;
    z-index: 1000;
}

.plm-dd.is-open > .plm-panel {
    display: block;
}

.plm-panel__list {
    list-style: none;
    margin: 0;
    padding: 5px;
}

.plm-panel__list li > a,
.plm-acc__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--plm-text-secondary);
    display: flex;
    font-size: 13px;
    gap: 8px;
    min-height: 40px;
    padding: 0 10px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.plm-panel__list li > a:hover,
.plm-panel__list li > a:focus,
.plm-acc__toggle:hover {
    background: var(--plm-background);
    color: var(--plm-link);
    text-decoration: none;
}

.plm-panel__list li.active > a {
    color: var(--plm-link);
    font-weight: 600;
}

.plm-panel__list .fa {
    width: 14px;
    font-size: 13px;
}

.plm-panel__list .plm-ext {
    margin-left: auto;
    opacity: .7;
}

.plm-panel__label {
    border-top: 1px solid var(--plm-border);
    color: var(--plm-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 10px 16px 2px;
    text-transform: uppercase;
}

.plm-panel__list--footer {
    border-top: 1px solid var(--plm-border);
}

.plm-acc__toggle {
    height: 40px;
}

.plm-acc__toggle .plm-chevron {
    margin-left: auto;
}

.plm-acc__body {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 2px 10px;
}

.plm-acc.is-open > .plm-acc__body {
    display: block;
}

.plm-acc__sublabel {
    color: var(--plm-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px 2px;
}

.plm-acc__nested > a {
    padding-left: 24px !important;
}

.plm-chevron {
    transition: transform .2s ease;
}

.plm-dd.is-open > [data-plm-toggle] .plm-chevron,
.plm-acc.is-open > .plm-acc__toggle .plm-chevron {
    transform: rotate(180deg);
}

/* Menu bar */
.plm-menubar {
    background: var(--plm-navy);
    padding: 0 24px;
    position: relative;
    z-index: 900;
}

.plm-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.plm-menu__item {
    position: relative;
}

.plm-menu__item.plm-dd--mega {
    position: static;
}

.plm-menu__link {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--plm-menu-text) !important;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    text-decoration: none !important;
    white-space: nowrap;
}

.plm-menu__link > .fa:first-child {
    font-size: 16px;
    text-align: center;
    width: 16px;
}

.plm-menu__link .plm-chevron {
    font-size: 14px;
}

.plm-menu__link:hover,
.plm-menu__link:focus {
    color: #fff !important;
}

.plm-menu__item.active > .plm-menu__link {
    box-shadow: inset 0 -2px 0 var(--plm-active-line);
    color: #fff !important;
    font-weight: 600;
}

.plm-menu__item.is-open > .plm-menu__link {
    background: var(--plm-navy-hover);
    color: #fff !important;
}

.plm-menubar .plm-dropdown {
    left: 0;
    min-width: 220px;
    top: 100%;
}

/* Mega menu Pelaporan */
.plm-mega {
    border-radius: 0 0 16px 16px;
    border-top: 0;
    left: 24px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 28px;
    right: 24px;
    top: 100%;
}

.plm-mega__grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.plm-mega__head {
    align-items: center;
    color: var(--plm-heading);
    display: flex;
    font-size: 15px;
    font-weight: 700;
    gap: 10px;
    margin-bottom: 8px;
}

.plm-mega__icon {
    align-items: center;
    background: var(--plm-primary-soft);
    border-radius: 10px;
    color: var(--plm-link);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 16px;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.plm-mega__list,
.plm-mega__list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plm-mega__list ul {
    border-left: 2px solid var(--plm-border);
    margin: 0 0 4px 2px;
    padding-left: 12px;
}

.plm-mega__list a {
    color: var(--plm-text-secondary);
    display: block;
    font-size: 14px;
    padding: 8px 0;
    text-decoration: none;
}

.plm-mega__list a:hover,
.plm-mega__list a:focus {
    color: var(--plm-link);
    text-decoration: none;
}

.plm-mega__list li.active > a {
    color: var(--plm-link);
    font-weight: 600;
}

.plm-mega__sublabel {
    color: var(--plm-muted);
    display: block;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 0 2px;
}

.plm-mega__sub.active > .plm-mega__sublabel {
    color: var(--plm-link);
}

/* Responsif: < 1024px menu bar menjadi menu vertikal via hamburger */
/* Keep all Pelaporan groups in order on one desktop row. */
@media (min-width: 1024px) {
    #plm-mega-pelaporan .plm-mega__grid {
        grid-auto-flow: column;
        grid-auto-columns: minmax(145px, 1fr);
        grid-template-columns: none;
    }
}

@media (max-width: 1023px) {
    .plm-header__inner {
        gap: 12px;
        padding: 4px 16px;
    }

    .plm-hamburger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
    }

    .plm-menubar {
        display: none;
        padding: 8px 12px 12px;
    }

    .plm-menubar.is-open {
        display: block;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .plm-menu {
        flex-direction: column;
        gap: 2px;
    }

    .plm-menu__link {
        border-radius: 8px;
        height: 42px;
        width: 100%;
    }

    .plm-menu__link .plm-chevron {
        margin-left: auto;
    }

    .plm-menu__item.active > .plm-menu__link {
        box-shadow: inset 3px 0 0 var(--plm-active-line);
    }

    .plm-menubar .plm-panel {
        border-radius: 10px;
        box-shadow: none;
        margin: 4px 0 8px;
        max-height: none;
        position: static;
    }

    .plm-mega {
        padding: 16px;
    }

    .plm-mega__grid {
        gap: 16px;
        grid-template-columns: 1fr;
    }

    .plm-mega__list a {
        align-items: center;
        display: flex;
        min-height: 44px;
        padding: 0;
    }

    .plm-app .plm-content {
        padding: 10px !important;
    }
}

@media (max-width: 767px) {
    .plm-brand__tagline,
    .plm-user__meta {
        display: none;
    }

    .plm-user__panel {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 60px;
        width: auto;
    }
}

@media (max-width: 767px) {
    .content { padding: 18px 14px !important; }
    .box-body, .panel-body { padding: 15px; }
    .content > * { animation: none; }
    .login-container { margin: 14px; padding: 0 !important; width: auto !important; }
    .login-container .login-bg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   Bootstrap 3 semantic palette
   Menyelaraskan warna primary/success/info/warning/danger/default dengan
   warna dasar PLM modern di :root.
   ========================================================================== */

/* ---- Text utilities ---- */
.text-primary { color: var(--plm-primary) !important; }
.text-success { color: var(--plm-success) !important; }
.text-info    { color: var(--plm-info) !important; }
.text-warning { color: var(--plm-warning) !important; }
.text-danger  { color: var(--plm-danger) !important; }
.text-muted   { color: var(--plm-muted) !important; }

/* ---- Background utilities ---- */
.bg-primary { background-color: var(--plm-primary) !important; color: #fff !important; }
.bg-success { background-color: var(--plm-success) !important; color: #fff !important; }
.bg-info    { background-color: var(--plm-info) !important;    color: #fff !important; }
.bg-warning { background-color: var(--plm-warning) !important; color: var(--plm-heading) !important; }
.bg-danger  { background-color: var(--plm-danger) !important;  color: #fff !important; }
.bg-default { background-color: var(--plm-default) !important; color: #fff !important; }

/* ---- Buttons ---- */
.btn-primary {
    background: linear-gradient(135deg, var(--plm-primary), #4d7cf3) !important;
    border-color: var(--plm-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background: linear-gradient(135deg, var(--plm-primary-dark), var(--plm-primary)) !important;
    border-color: var(--plm-primary-dark) !important;
    color: #fff !important;
}

.btn-success {
    background: var(--plm-success) !important;
    border-color: var(--plm-success) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(25, 179, 148, .18);
}

.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
    background: var(--plm-success-dark) !important;
    border-color: var(--plm-success-dark) !important;
    color: #fff !important;
}

.btn-info {
    background: var(--plm-info) !important;
    border-color: var(--plm-info) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(59, 159, 214, .18);
}

.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    background: var(--plm-info-dark) !important;
    border-color: var(--plm-info-dark) !important;
    color: #fff !important;
}

.btn-warning {
    background: var(--plm-warning) !important;
    border-color: var(--plm-warning) !important;
    color: var(--plm-heading) !important;
    box-shadow: 0 6px 14px rgba(226, 166, 59, .22);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
    background: var(--plm-warning-dark) !important;
    border-color: var(--plm-warning-dark) !important;
    color: #fff !important;
}

.btn-danger {
    background: var(--plm-danger) !important;
    border-color: var(--plm-danger) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(221, 90, 103, .18);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
    background: var(--plm-danger-dark) !important;
    border-color: var(--plm-danger-dark) !important;
    color: #fff !important;
}

.btn-default {
    background: #fff !important;
    border-color: var(--plm-border) !important;
    color: var(--plm-ink) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background: var(--plm-default-soft) !important;
    border-color: #d8e0ec !important;
    color: var(--plm-ink) !important;
}

.btn[disabled],
.btn.disabled,
fieldset[disabled] .btn {
    box-shadow: none;
    opacity: .6;
}

/* ---- Form validation states ---- */
.has-success .form-control,
.has-success .form-control:focus {
    border-color: var(--plm-success) !important;
}
.has-success .form-control:focus {
    box-shadow: 0 0 0 3px rgba(25, 179, 148, .15) !important;
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
    color: var(--plm-success-dark);
}

.has-warning .form-control,
.has-warning .form-control:focus {
    border-color: var(--plm-warning) !important;
}
.has-warning .form-control:focus {
    box-shadow: 0 0 0 3px rgba(226, 166, 59, .2) !important;
}
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
    color: var(--plm-warning-dark);
}

.has-error .form-control,
.has-error .form-control:focus {
    border-color: var(--plm-danger) !important;
}
.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(221, 90, 103, .15) !important;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
    color: var(--plm-danger-dark);
}

/* ---- Alerts ---- */
.alert-primary {
    background-color: var(--plm-primary-soft);
    border-left: 4px solid var(--plm-primary);
    color: var(--plm-primary-dark);
}
.alert-success {
    background-color: var(--plm-success-soft);
    border-left: 4px solid var(--plm-success);
    color: var(--plm-success-dark);
}
.alert-info {
    background-color: var(--plm-info-soft);
    border-left: 4px solid var(--plm-info);
    color: var(--plm-info-dark);
}
.alert-warning {
    background-color: var(--plm-warning-soft);
    border-left: 4px solid var(--plm-warning);
    color: var(--plm-warning-dark);
}
.alert-danger {
    background-color: var(--plm-danger-soft);
    border-left: 4px solid var(--plm-danger);
    color: var(--plm-danger-dark);
}

.alert-primary .alert-link { color: var(--plm-primary-dark); }
.alert-success .alert-link { color: var(--plm-success-dark); }
.alert-info .alert-link    { color: var(--plm-info-dark); }
.alert-warning .alert-link { color: var(--plm-warning-dark); }
.alert-danger .alert-link  { color: var(--plm-danger-dark); }

/* ---- Labels / badges ---- */
.label-primary { background-color: var(--plm-primary) !important; color: #fff !important; }
.label-success { background-color: var(--plm-success) !important; color: #fff !important; }
.label-info    { background-color: var(--plm-info) !important;    color: #fff !important; }
.label-warning { background-color: var(--plm-warning) !important; color: var(--plm-heading) !important; }
.label-danger  { background-color: var(--plm-danger) !important;  color: #fff !important; }
.label-default { background-color: var(--plm-default) !important; color: #fff !important; }

/* ---- Progress bars ---- */
.progress-bar            { background-color: var(--plm-primary); }
.progress-bar-success    { background-color: var(--plm-success); }
.progress-bar-info       { background-color: var(--plm-info); }
.progress-bar-warning    { background-color: var(--plm-warning); }
.progress-bar-danger     { background-color: var(--plm-danger); }

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .18) 75%, transparent 75%, transparent);
}

/* ---- Panels ---- */
.panel-primary { border-color: var(--plm-primary) !important; }
.panel-success { border-color: var(--plm-success) !important; }
.panel-info    { border-color: var(--plm-info) !important; }
.panel-warning { border-color: var(--plm-warning) !important; }
.panel-danger  { border-color: var(--plm-danger) !important; }

.panel-primary > .panel-heading {
    background: var(--plm-primary) !important;
    border-color: var(--plm-primary) !important;
    color: #fff !important;
}
.panel-success > .panel-heading {
    background: var(--plm-success) !important;
    border-color: var(--plm-success) !important;
    color: #fff !important;
}
.panel-info > .panel-heading {
    background: var(--plm-info) !important;
    border-color: var(--plm-info) !important;
    color: #fff !important;
}
.panel-warning > .panel-heading {
    background: var(--plm-warning) !important;
    border-color: var(--plm-warning) !important;
    color: var(--plm-heading) !important;
}
.panel-danger > .panel-heading {
    background: var(--plm-danger) !important;
    border-color: var(--plm-danger) !important;
    color: #fff !important;
}

.panel-primary > .panel-heading a,
.panel-success > .panel-heading a,
.panel-info > .panel-heading a,
.panel-danger > .panel-heading a {
    color: #fff !important;
}
.panel-warning > .panel-heading a {
    color: var(--plm-heading) !important;
}

/* ---- AdminLTE boxes ---- */
.box.box-primary { border-top-color: var(--plm-primary) !important; }
.box.box-success { border-top-color: var(--plm-success) !important; }
.box.box-info    { border-top-color: var(--plm-info) !important; }
.box.box-warning { border-top-color: var(--plm-warning) !important; }
.box.box-danger  { border-top-color: var(--plm-danger) !important; }

.box.box-solid.box-primary > .box-header {
    background: var(--plm-primary) !important;
    color: #fff !important;
}
.box.box-solid.box-success > .box-header {
    background: var(--plm-success) !important;
    color: #fff !important;
}
.box.box-solid.box-info > .box-header {
    background: var(--plm-info) !important;
    color: #fff !important;
}
.box.box-solid.box-warning > .box-header {
    background: var(--plm-warning) !important;
    color: var(--plm-heading) !important;
}
.box.box-solid.box-danger > .box-header {
    background: var(--plm-danger) !important;
    color: #fff !important;
}

/* ---- Callouts (AdminLTE) ---- */
.callout.callout-success { border-color: var(--plm-success) !important; }
.callout.callout-info    { border-color: var(--plm-info) !important; }
.callout.callout-warning { border-color: var(--plm-warning) !important; }
.callout.callout-danger  { border-color: var(--plm-danger) !important; }

.callout.callout-success h4 { color: var(--plm-success-dark); }
.callout.callout-info h4    { color: var(--plm-info-dark); }
.callout.callout-warning h4 { color: var(--plm-warning-dark); }
.callout.callout-danger h4  { color: var(--plm-danger-dark); }

/* ---- Pagination & navigation ---- */
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
    background-color: var(--plm-primary) !important;
    border-color: var(--plm-primary) !important;
    color: #fff !important;
}

.pagination > li > a,
.pagination > li > span {
    color: var(--plm-link);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--plm-primary) !important;
    color: #fff !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--plm-primary) !important;
    color: #fff !important;
}

/* ---- Modals ---- */
.modal-primary .modal-header { background: var(--plm-primary); color: #fff; }
.modal-success .modal-header { background: var(--plm-success); color: #fff; }
.modal-info .modal-header    { background: var(--plm-info);    color: #fff; }
.modal-warning .modal-header { background: var(--plm-warning); color: var(--plm-heading); }
.modal-danger .modal-header  { background: var(--plm-danger);  color: #fff; }

/* ==========================================================================
   DataTables pagination (Bootstrap 3 markup)
   Markup: .dataTables_paginate > ul.pagination > li.paginate_button > a
   ========================================================================== */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 8px;
    padding-top: 0;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    border-radius: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.dataTables_wrapper .dataTables_paginate .pagination > li {
    display: inline-flex;
    margin: 0;
}

.dataTables_wrapper .dataTables_paginate .pagination > li > a,
.dataTables_wrapper .dataTables_paginate .pagination > li > span {
    align-items: center;
    background: #fff;
    border: 1px solid var(--plm-border);
    border-radius: 8px;
    box-shadow: none;
    color: var(--plm-text-secondary);
    display: inline-flex;
    float: none;
    font-size: 13px;
    font-weight: 600;
    justify-content: center;
    line-height: 1;
    margin: 0;
    min-height: 36px;
    min-width: 36px;
    padding: 6px 12px;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.dataTables_wrapper .dataTables_paginate .pagination > li > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li > a:focus,
.dataTables_wrapper .dataTables_paginate .pagination > li > span:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li > span:focus {
    background: var(--plm-primary-soft);
    border-color: #cfdcfa;
    box-shadow: none;
    color: var(--plm-link);
    outline: 0;
    text-decoration: none;
}

.dataTables_wrapper .dataTables_paginate .pagination > li > a:focus-visible {
    box-shadow: 0 0 0 3px rgba(47, 111, 232, .18);
}

.dataTables_wrapper .dataTables_paginate .pagination > li.active > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > span {
    background: var(--plm-primary) !important;
    border-color: var(--plm-primary) !important;
    box-shadow: 0 6px 14px rgba(47, 111, 232, .22);
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .pagination > li.active > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > a:focus {
    background: var(--plm-primary-dark) !important;
    border-color: var(--plm-primary-dark) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > span,
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a:focus {
    background: #f7f8fc;
    border-color: var(--plm-border);
    box-shadow: none;
    color: var(--plm-muted);
    cursor: default;
    opacity: .65;
}

.dataTables_wrapper .dataTables_paginate .pagination > li.ellipsis > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.ellipsis > span {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--plm-muted);
    cursor: default;
    min-width: 28px;
    padding-left: 4px;
    padding-right: 4px;
}

.dataTables_wrapper .dataTables_paginate .pagination > li.previous > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.next > a {
    padding-left: 14px;
    padding-right: 14px;
}

/* Main navigation sized for comfortable reading. */
.plm-menubar {
    background: var(--plm-navy);
    min-width: 0;
    padding: 0;
    position: relative;
}

.plm-menu {
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.plm-menu__link {
    font-size: 14px;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
}

.plm-menu__link > .fa:first-child {
    font-size: 15px;
    width: 16px;
}

.plm-menu__item.active > .plm-menu__link,
.plm-menu__item.is-open > .plm-menu__link {
    background: #1e57c9;
    border-radius: 4px;
    box-shadow: none;
}

.plm-menu__search {
    align-items: center;
    display: flex;
    flex: 0 1 180px;
    margin-left: auto;
    min-width: 150px;
    position: relative;
}

.plm-menu__search > .fa-search {
    color: #c9d1ea;
    left: 11px;
    position: absolute;
    z-index: 1;
}

.plm-search__input {
    background: #253550;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    height: 36px;
    outline: 0;
    padding: 4px 10px 4px 30px;
    width: 100%;
}

.plm-search__input::placeholder {
    color: #b4bfd4;
    opacity: 1;
}

input.plm-search__input:focus {
    border-color: #7896d7;
    box-shadow: 0 0 0 2px rgba(120, 150, 215, .18);
    color: #253550 !important;
}

.plm-search__results {
    background: #fff;
    border: 1px solid var(--plm-border);
    border-radius: 8px;
    box-shadow: var(--plm-shadow-pop);
    left: 0;
    max-height: 300px;
    min-width: 230px;
    overflow-y: auto;
    padding: 4px;
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    z-index: 1050;
}

.plm-search__results[hidden] {
    display: none;
}

.plm-search__result {
    border-radius: 5px;
    color: var(--plm-text-secondary);
    display: block;
    font-size: 13px;
    padding: 9px 11px;
    text-decoration: none;
}

.plm-search__result:hover,
.plm-search__result:focus {
    background: var(--plm-primary-soft);
    color: var(--plm-link);
    text-decoration: none;
}

.plm-search__empty {
    color: var(--plm-muted);
    font-size: 13px;
    padding: 10px 11px;
}

.plm-mega {
    border-radius: 0 0 8px 8px;
    left: 4px;
    max-height: calc(100vh - 48px);
    padding: 8px;
    right: 4px;
}

.plm-mega__grid {
    align-items: stretch;
    gap: 8px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.plm-mega__col {
    background: #fff;
    border: 1px solid #e7ebf3;
    border-radius: 6px;
    min-width: 0;
    padding: 9px 10px;
}

.plm-mega__head {
    font-size: 13px;
    gap: 8px;
    margin-bottom: 7px;
}

.plm-mega__icon {
    border-radius: 6px;
    font-size: 15px;
    height: 32px;
    width: 32px;
}

.plm-mega__list a {
    align-items: baseline;
    display: flex;
    font-size: 14px;
    gap: 6px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    padding: 5px 0;
}

.plm-mega__list a::before {
    color: #77839a;
    content: "\f0f6";
    flex: 0 0 10px;
    font-family: FontAwesome;
    font-size: 11px;
    text-align: center;
}

.plm-mega__list a > .fa {
    display: none;
}

/* Item aksi (mis. BUAT LAPORAN) memakai ikon dari markup, bukan ikon file ::before. */
.plm-mega__list a.plm-mega__action::before {
    content: none;
}

.plm-mega__list a.plm-mega__action > .fa {
    display: inline-block;
}

.plm-mega__list ul {
    border-left-width: 1px;
    margin-left: 2px;
    padding-left: 6px;
}

.plm-mega__sublabel {
    font-size: 11px;
    padding: 6px 0 2px;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .plm-mega__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .plm-menu {
        align-items: stretch;
        flex-direction: column;
        gap: 2px;
    }

    .plm-menu__link {
        border-radius: 6px;
        height: 40px;
        padding: 0 10px;
        width: 100%;
    }

    .plm-menu__item.active > .plm-menu__link {
        box-shadow: inset 3px 0 0 var(--plm-active-line);
    }

    .plm-menu__search {
        flex: 0 0 auto;
        margin: 6px 0;
        min-width: 0;
        order: 1;
        width: 100%;
    }

    .plm-search__input {
        height: 36px;
    }

    .plm-search__results {
        min-width: 0;
    }

    .plm-mega__grid {
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plm-mega__col {
        padding: 8px;
    }

    .plm-mega__head {
        font-size: 14px;
    }

    .plm-mega__list a {
        font-size: 11px;
        min-height: 32px;
        padding: 5px 0;
    }
}

@media (max-width: 767px) {
    .plm-mega__grid {
        grid-template-columns: 1fr;
    }
}

.plm-table-card>.box-header{
    display: none !important;
}