:root {
    --ms-bg-1: #f6fbfd;
    --ms-bg-2: #dceef4;
    --ms-ink: #1f3042;
    --ms-muted: #657487;
    --ms-line: #c5dbe5;
    --ms-panel: rgba(255,255,255,.74);
    --ms-panel-strong: rgba(255,255,255,.92);
    --ms-blue: #bdeff7;
    --ms-blue-ink: #17495a;
    --ms-green: #dbf5e7;
    --ms-green-ink: #236447;
    --ms-red: #ffe0df;
    --ms-red-ink: #8a2b2b;
    --ms-shadow: 0 18px 42px rgba(80,111,135,.18);
    --ms-radius: 22px;
}

html,
body {
    min-height: 100%;
}

body,
body.light-sidebar-nav,
body.login-body {
    color: var(--ms-ink);
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.9), transparent 22%),
        radial-gradient(circle at 92% 14%, rgba(214,239,247,.78), transparent 24%),
        linear-gradient(180deg, var(--ms-bg-1) 0%, var(--ms-bg-2) 100%) !important;
}

.mobile-shell,
#container,
#main-content,
.wrapper {
    transition: max-width .2s ease, padding .2s ease;
}

.soft-panel,
.card,
.form-signin,
.record-card,
.detail-card {
    border-color: rgba(197,219,229,.86) !important;
    background: var(--ms-panel) !important;
    box-shadow: var(--ms-shadow) !important;
}

.page-header,
.dash-header {
    min-height: 54px;
}

.modern-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.modern-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ms-ink);
    font-size: 18px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
}

.modern-brand:hover {
    color: var(--ms-ink);
    text-decoration: none;
}

.modern-brand-mark {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 7px;
    background: rgba(31,48,66,.72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 8px 18px rgba(86,117,139,.2);
}

.modern-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.modern-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #34495d;
    background: rgba(255,255,255,.82);
    box-shadow: 0 8px 18px rgba(69,96,115,.14);
    text-decoration: none;
}

.modern-close:hover {
    color: #34495d;
    text-decoration: none;
}

.page-brand,
.brand {
    letter-spacing: 0 !important;
}

.title-block h1,
.section-title,
nav[aria-label="breadcrumb"] h5 {
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

.btn,
.pill-btn,
.pill-action,
.icon-btn,
.action-choice {
    border-radius: 999px !important;
}

.form-control,
.input-soft,
.select-soft,
.textarea-soft,
.custom-select,
.search-row input {
    border-color: var(--ms-line) !important;
    background: var(--ms-panel-strong) !important;
    color: var(--ms-ink) !important;
}

.form-control:focus,
.input-soft:focus,
.select-soft:focus,
.textarea-soft:focus,
.custom-select:focus,
.search-row input:focus {
    border-color: #7ebed2 !important;
    box-shadow: 0 0 0 3px rgba(126,190,210,.2) !important;
}

.btn-primary,
.btn-info,
.pill-btn.save,
.pill-btn.primary,
.pill-action.view,
.icon-btn {
    background: var(--ms-blue) !important;
    color: var(--ms-blue-ink) !important;
}

.btn-success,
.icon-btn.refresh {
    background: var(--ms-green) !important;
    color: var(--ms-green-ink) !important;
}

.btn-danger,
.pill-action.delete {
    background: var(--ms-red) !important;
    color: var(--ms-red-ink) !important;
}

/* Legacy utility tables */
#results .box-body,
#results .table-responsive {
    background: transparent !important;
}

#results table,
#results .table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}

#results thead,
#results .paging-header,
#results .paging-header tr,
#results .paging-header th {
    background: transparent !important;
}

#results table th {
    border: 0 !important;
    color: var(--ms-muted) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 14px !important;
    text-transform: uppercase !important;
    padding: 0 8px 6px !important;
    white-space: normal !important;
}

#results table td {
    border-top: 1px solid rgba(197,219,229,.72) !important;
    border-bottom: 1px solid rgba(197,219,229,.72) !important;
    background: var(--ms-panel-strong) !important;
    color: var(--ms-ink) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    vertical-align: middle !important;
    padding: 12px 8px !important;
}

#results table tr td:first-child {
    border-left: 1px solid rgba(197,219,229,.72) !important;
    border-radius: 16px 0 0 16px !important;
}

#results table tr td:last-child {
    border-right: 1px solid rgba(197,219,229,.72) !important;
    border-radius: 0 16px 16px 0 !important;
}

#results table .btn {
    min-width: 68px;
    min-height: 34px;
    padding: 0 10px;
}

body.light-sidebar-nav .input-group.mb-3 {
    display: grid !important;
    grid-template-columns: 46px repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
}

body.light-sidebar-nav .input-group-prepend {
    display: block !important;
    margin: 0 !important;
}

body.light-sidebar-nav .input-group-prepend .btn,
body.light-sidebar-nav .input-group-prepend .input-group-text {
    width: 100% !important;
    height: 42px !important;
}

body.light-sidebar-nav .custom-select,
body.light-sidebar-nav .filterSearch {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}

body.light-sidebar-nav #btn_cari,
body.light-sidebar-nav #btn_reset {
    min-width: 0 !important;
}

body.light-sidebar-nav .group-user-toolbar {
    grid-template-columns: 44px repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

body.light-sidebar-nav .group-user-toolbar .custom-select,
body.light-sidebar-nav .group-user-toolbar .filterSearch,
body.light-sidebar-nav .group-user-toolbar .toolbar-search-actions {
    grid-column: 1 / -1 !important;
}

body.light-sidebar-nav .group-user-toolbar .toolbar-search-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
}

.select2-container {
    width: 100% !important;
    max-width: 100% !important;
    font-family: Arial, Helvetica, sans-serif;
}

.select2-container--default .select2-selection--single {
    min-height: 42px !important;
    border: 1px solid #bdd2dc !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.88) !important;
    color: #243648 !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100% !important;
    color: #243648 !important;
    font-size: 14px !important;
    line-height: 40px !important;
    padding-left: 13px !important;
    padding-right: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #7b8a99 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    right: 9px !important;
    top: 1px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 24px !important;
    color: #607285 !important;
    font-size: 18px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #8fdfea !important;
    box-shadow: 0 0 0 4px rgba(151,231,241,.22) !important;
}

.select2-dropdown {
    border: 1px solid #bdd2dc !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 18px 36px rgba(80,111,135,.18) !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}

.select2-search--dropdown {
    padding: 10px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 40px !important;
    border: 1px solid #bdd2dc !important;
    border-radius: 14px !important;
    color: #243648 !important;
    font-size: 14px !important;
    outline: 0 !important;
    padding: 0 12px !important;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 260px !important;
}

.select2-results__option {
    color: #243648 !important;
    font-size: 14px !important;
    padding: 10px 13px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #bdeff7 !important;
    color: #17495a !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: #edf8fb !important;
    color: #17495a !important;
    font-weight: 900 !important;
}

@media (max-width: 430px) {
    body.light-sidebar-nav .input-group.mb-3 {
        grid-template-columns: 46px 1fr !important;
    }

    body.light-sidebar-nav .input-group.mb-3 .input-group-prepend:nth-of-type(2),
    body.light-sidebar-nav .input-group.mb-3 .input-group-prepend:nth-of-type(3),
    body.light-sidebar-nav .input-group.mb-3 .input-group-prepend:nth-of-type(4),
    body.light-sidebar-nav .input-group.mb-3 .input-group-prepend:nth-of-type(5) {
        grid-column: span 1;
    }
}

.paging-header {
    color: var(--ms-muted) !important;
}

@media (min-width: 768px) {
    .mobile-shell,
    #container,
    #main-content,
    .wrapper {
        max-width: 760px !important;
    }

    .dash-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .record-list,
    .detail-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1120px) {
    .mobile-shell,
    #container,
    #main-content,
    .wrapper {
        max-width: 1060px !important;
    }

    .dash-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .dash-card {
        min-height: 118px !important;
        border-radius: 22px !important;
        aspect-ratio: auto !important;
    }

    .dash-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 25px !important;
    }

    .dash-label {
        min-height: 34px !important;
        font-size: 14px !important;
        line-height: 17px !important;
    }

    .search-row {
        grid-template-columns: minmax(260px, 1fr) 44px 44px !important;
    }

    .form-grid,
    .form-soft-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}