/*
 * F SP TSK R KSPSI - UI/UX Master Layer
 * Baseline: web.rar 2026-09-06
 * Purpose: one consistent professional UI layer across the application.
 * Loaded after Hope UI + app-ui.css. Vendor CSS is intentionally untouched.
 */

:root {
    --ux-bg: #0a1120;
    --ux-bg-soft: #0d1628;
    --ux-surface: #111b2e;
    --ux-surface-2: #162238;
    --ux-surface-3: #1a2942;
    --ux-border: rgba(148, 163, 184, .14);
    --ux-border-strong: rgba(148, 163, 184, .24);
    --ux-text: #edf3fb;
    --ux-muted: #93a4bb;
    --ux-muted-2: #71839d;
    --ux-primary: #6680ff;
    --ux-primary-strong: #5270ff;
    --ux-primary-soft: rgba(102, 128, 255, .14);
    --ux-success: #37c995;
    --ux-success-soft: rgba(55, 201, 149, .14);
    --ux-warning: #f0b94a;
    --ux-warning-soft: rgba(240, 185, 74, .14);
    --ux-danger: #ff6b7b;
    --ux-danger-soft: rgba(255, 107, 123, .14);
    --ux-info: #4eb5f1;
    --ux-info-soft: rgba(78, 181, 241, .14);
    --ux-radius-xs: 7px;
    --ux-radius-sm: 10px;
    --ux-radius: 14px;
    --ux-radius-lg: 18px;
    --ux-shadow-sm: 0 8px 22px rgba(1, 7, 20, .14);
    --ux-shadow: 0 18px 48px rgba(1, 7, 20, .22);
    --ux-navbar-h: 62px;
    --ux-sidebar-w: 250px;
    --ux-content-max: 1680px;
}

/* ---------- Shell ---------- */
body.app-ui-master.dark {
    background: var(--ux-bg) !important;
    color: var(--ux-text);
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.app-ui-master.dark .main-content {
    min-height: 100vh;
    background:
        radial-gradient(circle at 78% -8%, rgba(102, 128, 255, .10), transparent 27rem),
        radial-gradient(circle at 10% 110%, rgba(78, 181, 241, .05), transparent 28rem),
        var(--ux-bg) !important;
}

body.app-ui-master.dark .iq-banner {
    background: transparent !important;
}

body.app-ui-master.dark .iq-navbar {
    min-height: var(--ux-navbar-h) !important;
    height: var(--ux-navbar-h) !important;
    position: sticky;
    top: 0;
    z-index: 1035;
    background: rgba(10, 17, 32, .90) !important;
    border-bottom: 1px solid var(--ux-border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.app-ui-master.dark .iq-navbar .navbar-inner {
    min-height: var(--ux-navbar-h) !important;
    height: var(--ux-navbar-h) !important;
    padding: 0 1.25rem !important;
}

body.app-ui-master.dark .iq-navbar .navbar-brand,
body.app-ui-master.dark .sidebar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

body.app-ui-master.dark .iq-navbar .navbar-brand img,
body.app-ui-master.dark .sidebar .navbar-brand img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
}

body.app-ui-master.dark .iq-navbar .logo-title,
body.app-ui-master.dark .sidebar .logo-title {
    color: var(--ux-text) !important;
    font-weight: 700;
    letter-spacing: -.015em;
}

/* Navbar search is currently not wired to a search action; hide dead UI. */
body.app-ui-master.dark .iq-navbar .search-input {
    display: none !important;
}

body.app-ui-master.dark .iq-navbar .sidebar-toggle {
    width: 36px;
    height: 36px;
    margin-left: .4rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ux-primary-soft) !important;
    color: #9badff !important;
    transition: transform .18s ease, background-color .18s ease;
}

body.app-ui-master.dark .iq-navbar .sidebar-toggle:hover {
    transform: translateY(-1px);
    background: rgba(102, 128, 255, .20) !important;
}

body.app-ui-master.dark .iq-navbar .nav-link {
    color: #b7c5d8 !important;
}

body.app-ui-master.dark .iq-navbar .nav-link:hover {
    color: #fff !important;
}

body.app-ui-master.dark .iq-navbar .avatar,
body.app-ui-master.dark .iq-navbar .fProfile {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    border: 2px solid rgba(255, 255, 255, .10);
    object-fit: cover;
}

body.app-ui-master.dark .iq-navbar .caption-title {
    color: var(--ux-text) !important;
    font-size: .88rem;
    font-weight: 700;
}

body.app-ui-master.dark .iq-navbar .caption-sub-title {
    color: var(--ux-muted) !important;
    font-size: .72rem;
}

/* Empty notification/mail dropdowns are visually suppressed until they have data. */
body.app-ui-master.dark #notification-drop + .sub-drop:empty,
body.app-ui-master.dark #mail-drop + .sub-drop:empty {
    display: none !important;
}

body.app-ui-master.dark .iq-navbar-header {
    height: 74px !important;
    min-height: 74px !important;
    margin: 0 !important;
    overflow: hidden;
    border-bottom: 1px solid var(--ux-border);
    background: linear-gradient(90deg, rgba(17, 27, 46, .92), rgba(13, 22, 40, .84)) !important;
}

body.app-ui-master.dark .iq-navbar-header .iq-header-img {
    opacity: .32;
}

body.app-ui-master.dark .iq-navbar-header .iq-header-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 17, 32, .94), rgba(10, 17, 32, .52), rgba(10, 17, 32, .88));
}

body.app-ui-master.dark .iq-navbar-header .iq-header-img img {
    object-fit: cover !important;
}

body.app-ui-master.dark .iq-navbar-header .iq-container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}

body.app-ui-master.dark #page-title-text {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(1.2rem, 1.6vw, 1.55rem) !important;
    font-weight: 750 !important;
    letter-spacing: -.025em;
    text-shadow: none !important;
}

body.app-ui-master.dark .container-fluid.content-inner,
body.app-ui-master.dark .conatiner-fluid.content-inner {
    width: 100%;
    max-width: var(--ux-content-max);
    margin: 0 auto !important;
    padding: 1.25rem 1.35rem 2.25rem !important;
}

body.app-ui-master.dark #ajax-content {
    min-width: 0;
}

/* ---------- Sidebar ---------- */
body.app-ui-master.dark .sidebar {
    width: var(--ux-sidebar-w);
    background: #0d1728 !important;
    border-right: 1px solid var(--ux-border) !important;
    box-shadow: none !important;
}

body.app-ui-master.dark .sidebar .sidebar-header {
    min-height: var(--ux-navbar-h) !important;
    height: var(--ux-navbar-h) !important;
    padding: 0 1rem !important;
    border-bottom: 1px solid var(--ux-border);
}

body.app-ui-master.dark .sidebar .sidebar-body {
    padding: .65rem 0 .9rem !important;
}

body.app-ui-master.dark .sidebar .nav-link {
    min-height: 40px;
    margin: 2px 10px;
    padding: .58rem .75rem !important;
    border-radius: 10px !important;
    color: #9eacc1 !important;
    font-size: .86rem;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

body.app-ui-master.dark .sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .045) !important;
    color: #eff4fb !important;
    transform: translateX(1px);
}

body.app-ui-master.dark .sidebar .nav-link.active,
body.app-ui-master.dark .sidebar .menu-branch-active > .nav-link,
body.app-ui-master.dark .sidebar .nav-link[aria-current="page"] {
    background: linear-gradient(90deg, rgba(102, 128, 255, .18), rgba(102, 128, 255, .07)) !important;
    color: #9eb0ff !important;
    box-shadow: inset 3px 0 0 var(--ux-primary);
}

body.app-ui-master.dark .sidebar .nav-link .item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app-ui-master.dark .sidebar .sidebar-section-label .nav-link,
body.app-ui-master.dark .sidebar .static-item .nav-link {
    margin-top: .75rem;
    min-height: 28px;
    background: transparent !important;
    box-shadow: none !important;
    color: #62738c !important;
}

body.app-ui-master.dark .sidebar .static-item .default-icon,
body.app-ui-master.dark .sidebar .sidebar-section-label .default-icon {
    font-size: .63rem !important;
    font-weight: 800 !important;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body.app-ui-master.dark .sidebar .sub-nav .nav-link {
    min-height: 36px;
    font-size: .82rem;
}

body.app-ui-master.dark .sidebar .sidebar-toggle {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: #8fa5ff;
    background: var(--ux-primary-soft);
}

/* ---------- Loading ---------- */
body.app-ui-master #loading {
    background: rgba(10, 17, 32, .98) !important;
    color: var(--ux-text) !important;
}

body.app-ui-master #loading #progress-text {
    color: #afbdd0 !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
}

body.app-ui-master #loading .loader2 {
    width: 76px !important;
    height: 76px !important;
    border-width: 4px !important;
    border-top-color: var(--ux-primary) !important;
    border-right-color: var(--ux-info) !important;
}

body.app-ui-master #loading .image-container2 {
    width: 48px !important;
    height: 48px !important;
    background: #fff;
    padding: 4px;
}

/* ---------- Typography ---------- */
body.app-ui-master.dark h1,
body.app-ui-master.dark h2,
body.app-ui-master.dark h3,
body.app-ui-master.dark h4,
body.app-ui-master.dark h5,
body.app-ui-master.dark h6 {
    color: var(--ux-text);
    letter-spacing: -.015em;
}

body.app-ui-master.dark .text-muted,
body.app-ui-master.dark small.text-muted,
body.app-ui-master.dark .form-text {
    color: var(--ux-muted) !important;
}

body.app-ui-master.dark code {
    color: #aebcff;
    background: rgba(102, 128, 255, .08);
    padding: .12rem .32rem;
    border-radius: 5px;
}

/* ---------- Cards ---------- */
body.app-ui-master.dark #ajax-content .card,
body.app-ui-master.dark .modal-content,
body.app-ui-master.dark .offcanvas {
    background: linear-gradient(180deg, rgba(18, 28, 47, .98), rgba(15, 24, 41, .98)) !important;
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-sm) !important;
    color: var(--ux-text);
}

body.app-ui-master.dark #ajax-content .card-header,
body.app-ui-master.dark .modal-header,
body.app-ui-master.dark .offcanvas-header {
    background: transparent !important;
    border-bottom: 1px solid var(--ux-border) !important;
    padding: .9rem 1rem !important;
}

body.app-ui-master.dark #ajax-content .card-body,
body.app-ui-master.dark .modal-body {
    padding: 1rem !important;
}

body.app-ui-master.dark #ajax-content .card-footer,
body.app-ui-master.dark .modal-footer {
    background: rgba(255, 255, 255, .012) !important;
    border-top: 1px solid var(--ux-border) !important;
}

body.app-ui-master.dark #ajax-content .card-header h4,
body.app-ui-master.dark #ajax-content .card-header h5,
body.app-ui-master.dark #ajax-content .card-header h6 {
    margin-bottom: .15rem;
    font-weight: 700;
}

/* ---------- Page headers / toolbars ---------- */
body.app-ui-master.dark .app-page {
    min-width: 0;
}

body.app-ui-master.dark .app-page-header {
    margin-bottom: 1rem;
    padding: 1rem 1.05rem;
    background: linear-gradient(135deg, rgba(102, 128, 255, .09), rgba(17, 27, 46, .62));
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius);
    box-shadow: none;
}

body.app-ui-master.dark .app-page-header h1,
body.app-ui-master.dark .app-page-header h2 {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 760;
    margin: 0;
}

body.app-ui-master.dark .app-page-header p {
    color: var(--ux-muted) !important;
    margin: .3rem 0 0;
    max-width: 760px;
    font-size: .88rem;
}

body.app-ui-master.dark .app-page-eyebrow {
    color: #8fa6ff;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}

body.app-ui-master.dark .app-page-actions,
body.app-ui-master.dark #ajax-content .app-toolbar {
    gap: .5rem !important;
}

body.app-ui-master.dark #ajax-content .app-toolbar {
    min-height: 40px;
}

/* ---------- Forms ---------- */
body.app-ui-master.dark .form-label,
body.app-ui-master.dark .form-group > label,
body.app-ui-master.dark label.form-label {
    color: #c9d4e4 !important;
    font-size: .79rem;
    font-weight: 650;
    margin-bottom: .36rem;
}

body.app-ui-master.dark .form-control,
body.app-ui-master.dark .form-select,
body.app-ui-master.dark .input-group-text,
body.app-ui-master.dark .select2-container--default .select2-selection--single,
body.app-ui-master.dark .select2-container--default .select2-selection--multiple {
    min-height: 40px;
    background: #0e1829 !important;
    border: 1px solid var(--ux-border-strong) !important;
    color: var(--ux-text) !important;
    border-radius: 9px;
    box-shadow: none !important;
}

body.app-ui-master.dark .form-control::placeholder {
    color: #63758f !important;
}

body.app-ui-master.dark .form-control:focus,
body.app-ui-master.dark .form-select:focus {
    border-color: rgba(102, 128, 255, .72) !important;
    box-shadow: 0 0 0 .18rem rgba(102, 128, 255, .11) !important;
}

body.app-ui-master.dark .form-control:disabled,
body.app-ui-master.dark .form-control[readonly],
body.app-ui-master.dark .form-select:disabled {
    opacity: .72;
    background: #111b2c !important;
}

body.app-ui-master.dark .input-group > .form-control:not(:first-child),
body.app-ui-master.dark .input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.app-ui-master.dark .input-group-text {
    color: #8294ae !important;
}

body.app-ui-master.dark textarea.form-control {
    min-height: 100px;
}

body.app-ui-master.dark input[type="date"],
body.app-ui-master.dark input[type="datetime-local"] {
    color-scheme: dark;
}

body.app-ui-master.dark .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    background-color: #0e1829;
    border-color: var(--ux-border-strong);
}

body.app-ui-master.dark .form-check-input:checked {
    background-color: var(--ux-primary);
    border-color: var(--ux-primary);
}

/* ---------- Buttons ---------- */
body.app-ui-master.dark .btn {
    min-height: 38px;
    border-radius: 9px !important;
    font-size: .82rem;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    box-shadow: none !important;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}

body.app-ui-master.dark .btn:hover {
    transform: translateY(-1px);
}

body.app-ui-master.dark .btn-sm {
    min-height: 32px;
    padding: .36rem .65rem;
    font-size: .76rem;
}

body.app-ui-master.dark .btn-primary {
    background: linear-gradient(135deg, var(--ux-primary), var(--ux-primary-strong)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body.app-ui-master.dark .btn-success {
    background: var(--ux-success) !important;
    border-color: var(--ux-success) !important;
    color: #071b15 !important;
}

body.app-ui-master.dark .btn-danger {
    background: var(--ux-danger) !important;
    border-color: var(--ux-danger) !important;
    color: #fff !important;
}

body.app-ui-master.dark .btn-warning {
    background: var(--ux-warning) !important;
    border-color: var(--ux-warning) !important;
    color: #201600 !important;
}

body.app-ui-master.dark .btn-outline-primary {
    border-color: rgba(102, 128, 255, .48) !important;
    color: #9eafff !important;
}

body.app-ui-master.dark .btn-outline-primary:hover {
    background: var(--ux-primary-soft) !important;
}

body.app-ui-master.dark .btn-outline-success {
    border-color: rgba(55, 201, 149, .42) !important;
    color: #79dfb8 !important;
}

body.app-ui-master.dark .btn-outline-danger {
    border-color: rgba(255, 107, 123, .42) !important;
    color: #ff98a3 !important;
}

body.app-ui-master.dark .btn-outline-secondary,
body.app-ui-master.dark .btn-light,
body.app-ui-master.dark .btn-secondary {
    background: rgba(255, 255, 255, .025) !important;
    border-color: var(--ux-border-strong) !important;
    color: #b8c5d7 !important;
}

body.app-ui-master.dark .btn-outline-secondary:hover,
body.app-ui-master.dark .btn-light:hover,
body.app-ui-master.dark .btn-secondary:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}

/* ---------- Tables ---------- */
body.app-ui-master.dark #ajax-content .table-responsive {
    border: 1px solid var(--ux-border);
    border-radius: 11px;
    background: rgba(8, 14, 25, .24);
    overflow-x: auto;
}

body.app-ui-master.dark #ajax-content table.table {
    margin-bottom: 0 !important;
    color: #dfe7f2 !important;
    font-size: .80rem;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,.018);
    --bs-table-hover-bg: rgba(102,128,255,.055);
    --bs-table-color: #dfe7f2;
    --bs-table-striped-color: #dfe7f2;
    --bs-table-hover-color: #fff;
}

body.app-ui-master.dark #ajax-content table.table thead th,
body.app-ui-master.dark #ajax-content table.table > tbody:first-child > tr:first-child > th {
    background: #121e32 !important;
    color: #9dafc5 !important;
    border-bottom: 1px solid var(--ux-border-strong) !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase;
    white-space: nowrap;
}

body.app-ui-master.dark #ajax-content table.table td,
body.app-ui-master.dark #ajax-content table.table th {
    padding: .58rem .65rem !important;
    border-color: var(--ux-border) !important;
    vertical-align: middle;
}

body.app-ui-master.dark #ajax-content table.table tbody tr:last-child td {
    border-bottom: 0;
}

body.app-ui-master.dark #ajax-content table.table tbody tr:hover {
    background: rgba(102, 128, 255, .045) !important;
}

body.app-ui-master.dark .ajax-ui-empty {
    min-height: 110px;
    padding: 2rem 1rem !important;
    color: var(--ux-muted) !important;
}

/* ---------- Dropdown / modal / offcanvas ---------- */
body.app-ui-master.dark .dropdown-menu {
    min-width: 210px;
    padding: .45rem;
    background: #121d30 !important;
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: 11px !important;
    box-shadow: var(--ux-shadow) !important;
}

body.app-ui-master.dark .dropdown-item {
    min-height: 36px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    color: #c8d3e3 !important;
    font-size: .80rem;
}

body.app-ui-master.dark .dropdown-item:hover,
body.app-ui-master.dark .dropdown-item:focus {
    background: rgba(102, 128, 255, .10) !important;
    color: #fff !important;
}

body.app-ui-master.dark .dropdown-header {
    color: #71839d !important;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

body.app-ui-master.dark .dropdown-divider {
    border-color: var(--ux-border) !important;
}

body.app-ui-master.dark .modal-backdrop.show {
    opacity: .72;
}

body.app-ui-master.dark .modal-title {
    font-weight: 720;
}

body.app-ui-master.dark .btn-close {
    filter: invert(1) grayscale(1);
    opacity: .7;
}

/* ---------- Alerts / badges ---------- */
body.app-ui-master.dark .alert {
    border-radius: 10px;
    border: 1px solid var(--ux-border-strong);
    box-shadow: none;
}

body.app-ui-master.dark .alert-info {
    background: var(--ux-info-soft) !important;
    border-color: rgba(78, 181, 241, .22) !important;
    color: #9bd7f8 !important;
}

body.app-ui-master.dark .alert-success {
    background: var(--ux-success-soft) !important;
    border-color: rgba(55, 201, 149, .22) !important;
    color: #8ee4c5 !important;
}

body.app-ui-master.dark .alert-warning {
    background: var(--ux-warning-soft) !important;
    border-color: rgba(240, 185, 74, .22) !important;
    color: #f6d180 !important;
}

body.app-ui-master.dark .alert-danger {
    background: var(--ux-danger-soft) !important;
    border-color: rgba(255, 107, 123, .22) !important;
    color: #ff9aa5 !important;
}

body.app-ui-master.dark .badge {
    border-radius: 7px;
    font-weight: 700;
    letter-spacing: .01em;
}

body.app-ui-master.dark .bg-light.text-dark,
body.app-ui-master.dark .bg-light.text-body {
    background: rgba(255, 255, 255, .05) !important;
    color: #bdcadb !important;
    border-color: var(--ux-border) !important;
}

/* ---------- Pagination ---------- */
body.app-ui-master.dark .pagination {
    gap: .25rem;
}

body.app-ui-master.dark .pagination .page-link,
body.app-ui-master.dark .pagination a {
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .32rem .52rem;
    background: #111c2f !important;
    border: 1px solid var(--ux-border) !important;
    border-radius: 8px !important;
    color: #9eacc1 !important;
    font-size: .75rem;
}

body.app-ui-master.dark .pagination .active .page-link,
body.app-ui-master.dark .pagination .page-item.active .page-link {
    background: var(--ux-primary) !important;
    border-color: var(--ux-primary) !important;
    color: #fff !important;
}

/* ---------- Tabs / accordions ---------- */
body.app-ui-master.dark .nav-tabs {
    border-bottom-color: var(--ux-border) !important;
    gap: .25rem;
}

body.app-ui-master.dark .nav-tabs .nav-link {
    border: 0 !important;
    border-radius: 8px 8px 0 0;
    color: var(--ux-muted) !important;
    font-weight: 650;
}

body.app-ui-master.dark .nav-tabs .nav-link.active {
    background: var(--ux-primary-soft) !important;
    color: #a8b7ff !important;
}

body.app-ui-master.dark .accordion-item {
    background: transparent !important;
    border-color: var(--ux-border) !important;
}

body.app-ui-master.dark .accordion-button {
    background: #111c2f !important;
    color: var(--ux-text) !important;
    box-shadow: none !important;
}

/* ---------- Member/import Phase 2 reinforcement ---------- */
body.app-ui-master.dark .app-stat-card {
    background: linear-gradient(145deg, rgba(19, 31, 52, .98), rgba(15, 24, 41, .98)) !important;
    border: 1px solid var(--ux-border) !important;
    box-shadow: none !important;
}

body.app-ui-master.dark .app-stat-card strong {
    color: #fff !important;
}

body.app-ui-master.dark .app-filter-form,
body.app-ui-master.dark .app-filter-panel {
    color: var(--ux-text);
}

body.app-ui-master.dark .app-filter-chip {
    background: rgba(102, 128, 255, .09) !important;
    border-color: rgba(102, 128, 255, .18) !important;
    color: #acb9ff !important;
}

/* ---------- Master page auto-enhancement ---------- */
body.app-ui-master.dark #ajax-content .app-generic-card {
    overflow: hidden;
}

body.app-ui-master.dark #ajax-content .app-generic-form-card > .card-header,
body.app-ui-master.dark #ajax-content .app-generic-list-card > .card-header {
    min-height: 58px;
    display: flex;
    align-items: center;
}

body.app-ui-master.dark #ajax-content .app-legacy-title {
    margin-bottom: .9rem;
    padding: .8rem .9rem;
    border-radius: 10px;
    background: rgba(102, 128, 255, .07);
    border: 1px solid var(--ux-border);
}

/* ---------- Dashboard ---------- */
body.app-ui-master.dark .dashboard-master {
    display: grid;
    gap: 1rem;
}

body.app-ui-master.dark .dashboard-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr);
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 1.3rem;
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius-lg);
    background:
        radial-gradient(circle at 88% 10%, rgba(102, 128, 255, .20), transparent 16rem),
        linear-gradient(135deg, #14233d, #101a2d 56%, #0e1728);
    box-shadow: var(--ux-shadow-sm);
}

body.app-ui-master.dark .dashboard-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -120px;
    bottom: -140px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
}

body.app-ui-master.dark .dashboard-hero__eyebrow {
    color: #9eb0ff;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
}

body.app-ui-master.dark .dashboard-hero h2 {
    margin: .3rem 0 .45rem;
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: 760;
}

body.app-ui-master.dark .dashboard-hero p {
    color: #a4b2c7;
    margin: 0;
    max-width: 780px;
    font-size: .88rem;
}

body.app-ui-master.dark .dashboard-hero__meta {
    position: relative;
    z-index: 2;
    display: grid;
    gap: .55rem;
}

body.app-ui-master.dark .dashboard-mini-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .72rem .8rem;
    background: rgba(8, 14, 25, .38);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
}

body.app-ui-master.dark .dashboard-mini-stat span {
    color: #9cacbf;
    font-size: .74rem;
}

body.app-ui-master.dark .dashboard-mini-stat strong {
    color: #fff;
    font-size: 1rem;
}

body.app-ui-master.dark .dashboard-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .15rem;
}

body.app-ui-master.dark .dashboard-section-head h3 {
    margin: 0;
    font-size: 1.03rem;
    font-weight: 720;
}

body.app-ui-master.dark .dashboard-section-head p {
    margin: .2rem 0 0;
    color: var(--ux-muted);
    font-size: .77rem;
}

body.app-ui-master.dark .dashboard-puk-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

body.app-ui-master.dark .dashboard-puk-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .8rem .85rem;
    background: linear-gradient(145deg, rgba(18, 29, 49, .98), rgba(14, 23, 39, .98));
    border: 1px solid var(--ux-border);
    border-radius: 12px;
    transition: transform .18s ease, border-color .18s ease;
}

body.app-ui-master.dark .dashboard-puk-card:hover {
    transform: translateY(-2px);
    border-color: rgba(102, 128, 255, .32);
}

body.app-ui-master.dark .dashboard-puk-card img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex: 0 0 auto;
    padding: 4px;
    border-radius: 10px;
    background: rgba(255,255,255,.95);
}

body.app-ui-master.dark .dashboard-puk-card__name {
    display: block;
    color: #dbe5f2;
    font-size: .78rem;
    font-weight: 680;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.app-ui-master.dark .dashboard-puk-card__count {
    display: block;
    margin-top: .16rem;
    color: #93a7ff;
    font-size: .95rem;
    font-weight: 760;
}

body.app-ui-master.dark .dashboard-feed-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

body.app-ui-master.dark .dashboard-feed-grid > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

body.app-ui-master.dark .dashboard-feed-card {
    height: 100%;
    overflow: hidden;
}

body.app-ui-master.dark .dashboard-feed-card .card-header {
    min-height: 64px;
}

body.app-ui-master.dark .dashboard-feed-card .carousel,
body.app-ui-master.dark .dashboard-feed-card video,
body.app-ui-master.dark .dashboard-feed-card .carousel-item img {
    border-radius: 10px;
    overflow: hidden;
}

body.app-ui-master.dark .dashboard-feed-card .carousel-item img,
body.app-ui-master.dark .dashboard-feed-card video {
    width: 100%;
    max-height: 440px !important;
    object-fit: contain;
    background: #08101d;
}

body.app-ui-master.dark .dashboard-feed-card .read-more,
body.app-ui-master.dark .dashboard-feed-card .read-less {
    color: #8fa6ff !important;
    font-size: .77rem;
    font-weight: 700;
}

/* ---------- Login ---------- */
body.app-ui-master.dark .login-master {
    min-height: min(720px, calc(100vh - 160px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    overflow: hidden;
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius-lg);
    background: #0e1829;
    box-shadow: var(--ux-shadow);
}

body.app-ui-master.dark .login-master__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
}

body.app-ui-master.dark .login-master__panel {
    width: min(430px, 100%);
}

body.app-ui-master.dark .login-master__brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.8rem;
}

body.app-ui-master.dark .login-master__brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    background: #fff;
    padding: 4px;
    border-radius: 11px;
}

body.app-ui-master.dark .login-master__brand strong {
    display: block;
    color: #fff;
    font-size: 1rem;
}

body.app-ui-master.dark .login-master__brand span {
    color: var(--ux-muted);
    font-size: .72rem;
}

body.app-ui-master.dark .login-master__visual {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background:
        radial-gradient(circle at 60% 35%, rgba(102,128,255,.32), transparent 16rem),
        linear-gradient(145deg, #152947, #0d1728 70%);
}

body.app-ui-master.dark .login-master__visual::after {
    content: "";
    position: absolute;
    inset: 1.2rem;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
}

body.app-ui-master.dark .login-master__visual img {
    position: relative;
    z-index: 2;
    max-width: min(420px, 82%);
    max-height: 420px;
    object-fit: contain;
    filter: drop-shadow(0 25px 60px rgba(0,0,0,.34));
}

body.app-ui-master.dark .login-logo-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .45rem;
    margin-top: 1.1rem;
}

body.app-ui-master.dark .login-logo-strip a {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ux-border);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
}

body.app-ui-master.dark .login-logo-strip img {
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
}

/* ---------- Public / informational content ---------- */
body.app-ui-master.dark #ajax-content .app-info-surface,
body.app-ui-master.dark #ajax-content .content-surface {
    background: linear-gradient(180deg, rgba(17, 27, 46, .98), rgba(13, 22, 38, .98));
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius);
    padding: 1rem;
}

body.app-ui-master.dark #ajax-content img.img-fluid,
body.app-ui-master.dark #ajax-content .img-fluid2 {
    border-radius: 10px;
}

body.app-ui-master.dark #ajax-content blockquote {
    border-left: 3px solid var(--ux-primary);
    padding-left: .9rem;
    color: #bdc9d9;
}

/* ---------- DataTables ---------- */
body.app-ui-master.dark .dataTables_wrapper .dataTables_length,
body.app-ui-master.dark .dataTables_wrapper .dataTables_filter,
body.app-ui-master.dark .dataTables_wrapper .dataTables_info,
body.app-ui-master.dark .dataTables_wrapper .dataTables_paginate {
    color: var(--ux-muted) !important;
    font-size: .78rem;
}

body.app-ui-master.dark .dataTables_wrapper input,
body.app-ui-master.dark .dataTables_wrapper select {
    background: #0e1829 !important;
    color: var(--ux-text) !important;
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: 8px;
}

/* ---------- Responsive ---------- */
@media (min-width: 1200px) {
    body.app-ui-master.dark .iq-navbar .navbar-brand {
        display: none !important;
    }
}

@media (max-width: 1199.98px) {
    body.app-ui-master.dark .dashboard-puk-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    body.app-ui-master.dark .container-fluid.content-inner,
    body.app-ui-master.dark .conatiner-fluid.content-inner {
        padding: 1rem 1rem 1.8rem !important;
    }

    body.app-ui-master.dark .iq-navbar .navbar-inner {
        padding: 0 .9rem !important;
    }

    body.app-ui-master.dark .iq-navbar-header {
        height: 66px !important;
        min-height: 66px !important;
    }

    body.app-ui-master.dark .dashboard-hero {
        grid-template-columns: 1fr;
    }

    body.app-ui-master.dark .dashboard-hero__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-ui-master.dark .dashboard-puk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-ui-master.dark .dashboard-feed-grid {
        grid-template-columns: 1fr;
    }

    body.app-ui-master.dark .login-master {
        grid-template-columns: 1fr;
    }

    body.app-ui-master.dark .login-master__visual {
        display: none;
    }
}

@media (max-width: 767.98px) {
    body.app-ui-master.dark .iq-navbar {
        height: 58px !important;
        min-height: 58px !important;
    }

    body.app-ui-master.dark .iq-navbar .navbar-inner {
        min-height: 58px !important;
        height: 58px !important;
    }

    body.app-ui-master.dark .iq-navbar .logo-title {
        font-size: .82rem;
    }

    body.app-ui-master.dark .iq-navbar-header {
        display: none !important;
    }

    body.app-ui-master.dark .container-fluid.content-inner,
    body.app-ui-master.dark .conatiner-fluid.content-inner {
        padding: .8rem .75rem 1.5rem !important;
    }

    body.app-ui-master.dark #ajax-content .card-header,
    body.app-ui-master.dark #ajax-content .card-body {
        padding: .8rem !important;
    }

    body.app-ui-master.dark .app-page-header {
        padding: .85rem;
        margin-bottom: .8rem;
    }

    body.app-ui-master.dark .app-page-header,
    body.app-ui-master.dark .app-page-actions,
    body.app-ui-master.dark #ajax-content .app-toolbar {
        align-items: stretch !important;
    }

    body.app-ui-master.dark .app-page-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-ui-master.dark .app-page-actions > .btn,
    body.app-ui-master.dark .app-page-actions > .dropdown,
    body.app-ui-master.dark .app-page-actions > .dropdown > .btn {
        width: 100%;
    }

    body.app-ui-master.dark #ajax-content .app-toolbar {
        flex-direction: column;
    }

    body.app-ui-master.dark #ajax-content .app-toolbar > * {
        width: 100%;
    }

    body.app-ui-master.dark #ajax-content .app-toolbar .input-group,
    body.app-ui-master.dark #ajax-content form[data-app-search] .input-group {
        max-width: none !important;
        width: 100%;
    }

    body.app-ui-master.dark .dashboard-hero {
        padding: 1rem;
        border-radius: 14px;
    }

    body.app-ui-master.dark .dashboard-hero__meta {
        grid-template-columns: 1fr;
    }

    body.app-ui-master.dark .dashboard-puk-grid {
        display: flex;
        gap: .65rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: .25rem;
        scrollbar-width: thin;
    }

    body.app-ui-master.dark .dashboard-puk-card {
        min-width: 220px;
        scroll-snap-align: start;
    }

    body.app-ui-master.dark .login-master__form {
        padding: 1.2rem .9rem;
    }

    body.app-ui-master.dark .login-logo-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.app-ui-master.dark #ajax-content table.table {
        min-width: 720px;
    }

    body.app-ui-master.dark #ajax-content .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 479.98px) {
    body.app-ui-master.dark .app-page-actions {
        grid-template-columns: 1fr;
    }

    body.app-ui-master.dark .login-logo-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media print {
    body.app-ui-master #loading,
    body.app-ui-master .sidebar,
    body.app-ui-master .iq-navbar,
    body.app-ui-master .iq-navbar-header {
        display: none !important;
    }

    body.app-ui-master .main-content,
    body.app-ui-master .content-inner {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
}

/* ---------- Legacy page compatibility ---------- */
body.app-ui-master.dark #ajax-content .border,
body.app-ui-master.dark #ajax-content .border-top,
body.app-ui-master.dark #ajax-content .border-bottom,
body.app-ui-master.dark #ajax-content .border-start,
body.app-ui-master.dark #ajax-content .border-end {
    border-color: var(--ux-border) !important;
}

body.app-ui-master.dark #ajax-content .text-body,
body.app-ui-master.dark #ajax-content .text-dark {
    color: var(--ux-text) !important;
}

body.app-ui-master.dark #ajax-content .card-primary.card-outline,
body.app-ui-master.dark #ajax-content .card-outline {
    border-top: 1px solid var(--ux-border) !important;
}

body.app-ui-master.dark #ajax-content .card-primary.card-outline .card-title,
body.app-ui-master.dark #ajax-content .card-outline .card-title {
    margin: 0;
    color: var(--ux-text) !important;
    font-size: .98rem;
    font-weight: 720;
    line-height: 1.4;
}

body.app-ui-master.dark #ajax-content .card-primary.card-outline .card-body p,
body.app-ui-master.dark #ajax-content .card-outline .card-body p,
body.app-ui-master.dark #ajax-content .prod-descr {
    color: #c4cfdd;
    line-height: 1.72;
}

body.app-ui-master.dark #ajax-content .card-primary.card-outline .card-body li,
body.app-ui-master.dark #ajax-content .card-outline .card-body li {
    margin-bottom: .42rem;
    color: #c4cfdd;
    line-height: 1.6;
}

body.app-ui-master.dark #ajax-content .card-primary.card-outline .card-body ul,
body.app-ui-master.dark #ajax-content .card-primary.card-outline .card-body ol,
body.app-ui-master.dark #ajax-content .card-outline .card-body ul,
body.app-ui-master.dark #ajax-content .card-outline .card-body ol {
    padding-left: 1.35rem;
}

body.app-ui-master.dark #ajax-content .rounded-circle.bg-success-subtle,
body.app-ui-master.dark #ajax-content .bg-success-subtle {
    background: var(--ux-success-soft) !important;
    color: #7ce0bb !important;
}

body.app-ui-master.dark #ajax-content .bg-primary-subtle {
    background: var(--ux-primary-soft) !important;
    color: #aab8ff !important;
}

body.app-ui-master.dark #ajax-content .bg-warning-subtle {
    background: var(--ux-warning-soft) !important;
    color: #f5ce7c !important;
}

body.app-ui-master.dark #ajax-content hr {
    border-color: var(--ux-border) !important;
    opacity: 1;
}

body.app-ui-master.dark #ajax-content .list-group-item {
    background: #111c2f !important;
    color: #d7e0eb !important;
    border-color: var(--ux-border) !important;
}

body.app-ui-master.dark #ajax-content .list-group-item-action:hover {
    background: rgba(102,128,255,.07) !important;
}

body.app-ui-master.dark #ajax-content .progress {
    background: rgba(255,255,255,.05) !important;
    border-radius: 999px;
    overflow: hidden;
}

body.app-ui-master.dark #ajax-content .progress-bar {
    background: linear-gradient(90deg, var(--ux-primary), var(--ux-info)) !important;
}

/* ---------- UAC / Menu Manager compatibility ---------- */
body.app-ui-master.dark #uac-role-manager,
body.app-ui-master.dark #permission-manager,
body.app-ui-master.dark #menu-manager {
    --uac-border: var(--ux-border) !important;
    --uac-soft: var(--ux-primary-soft) !important;
    --menu-border: var(--ux-border) !important;
    --menu-soft: var(--ux-primary-soft) !important;
    --menu-hover: rgba(102,128,255,.045) !important;
}

body.app-ui-master.dark #uac-role-manager .uac-role-header,
body.app-ui-master.dark #uac-role-manager .uac-role-table thead th,
body.app-ui-master.dark #permission-manager .permission-heading,
body.app-ui-master.dark #permission-manager .permission-toolbar,
body.app-ui-master.dark #permission-manager .permission-savebar,
body.app-ui-master.dark #menu-manager .menu-manager-header,
body.app-ui-master.dark #menu-manager .menu-table thead th,
body.app-ui-master.dark #menu-manager .card-footer {
    background: #111c2f !important;
    border-color: var(--ux-border) !important;
}

body.app-ui-master.dark #uac-role-manager .uac-role-description,
body.app-ui-master.dark #uac-role-manager .uac-empty,
body.app-ui-master.dark #permission-manager .permission-route,
body.app-ui-master.dark #menu-manager .menu-route,
body.app-ui-master.dark #menu-manager .menu-mobile-meta {
    color: var(--ux-muted) !important;
}

body.app-ui-master.dark #uac-role-manager .uac-role-icon,
body.app-ui-master.dark #menu-manager .menu-node-icon {
    background: var(--ux-primary-soft) !important;
    color: #9eafff !important;
}

body.app-ui-master.dark #uac-role-manager .uac-permission-badge {
    background: var(--ux-info-soft) !important;
    color: #8dd4fa !important;
}

body.app-ui-master.dark #uac-role-manager .uac-status.is-active {
    color: #78dfb8 !important;
}

body.app-ui-master.dark #uac-role-manager .uac-status.is-active .uac-status-dot {
    background: var(--ux-success) !important;
}

body.app-ui-master.dark #uac-role-manager .uac-status.is-inactive {
    color: #8495ad !important;
}

body.app-ui-master.dark #permission-manager .permission-scroll,
body.app-ui-master.dark #menu-manager .menu-table-wrap,
body.app-ui-master.dark #uac-role-manager .uac-role-table-wrap {
    scrollbar-color: #41516b #0e1829;
    scrollbar-width: thin;
}

body.app-ui-master.dark #permission-manager .permission-row,
body.app-ui-master.dark #menu-manager .menu-table tbody tr,
body.app-ui-master.dark #uac-role-manager .uac-role-table tbody tr {
    border-color: var(--ux-border) !important;
}

body.app-ui-master.dark #permission-manager .permission-row:hover,
body.app-ui-master.dark #menu-manager .menu-table tbody tr:hover,
body.app-ui-master.dark #uac-role-manager .uac-role-table tbody tr:hover {
    background: rgba(102,128,255,.045) !important;
}

body.app-ui-master.dark #menu-manager .menu-access-public {
    background: var(--ux-success-soft) !important;
    color: #78dfb8 !important;
}

body.app-ui-master.dark #menu-manager .menu-access-authenticated {
    background: var(--ux-info-soft) !important;
    color: #8dd4fa !important;
}

body.app-ui-master.dark #menu-manager .menu-access-permission {
    background: rgba(167,139,250,.13) !important;
    color: #c0adff !important;
}

@media (max-width: 767.98px) {
    body.app-ui-master.dark #uac-role-manager .uac-role-table tr.role-row {
        background: #111c2f !important;
        border-color: var(--ux-border) !important;
    }

    body.app-ui-master.dark #uac-role-manager .uac-role-table td:before {
        color: var(--ux-muted) !important;
    }
}

/* Standalone login presentation while reusing the same CI3 shell. */
body.app-ui-master.app-login-route .sidebar,
body.app-ui-master.app-login-route .iq-navbar,
body.app-ui-master.app-login-route .iq-navbar-header {
    display: none !important;
}

body.app-ui-master.app-login-route .main-content {
    margin-left: 0 !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

body.app-ui-master.app-login-route .iq-banner {
    display: none !important;
}

body.app-ui-master.app-login-route .container-fluid.content-inner,
body.app-ui-master.app-login-route .conatiner-fluid.content-inner {
    width: 100%;
    max-width: 1280px;
    padding: 1rem !important;
}

body.app-ui-master.app-login-route #ajax-content {
    width: 100%;
}

/* ================================================================
   MASTER V1.1 HOTFIX - 2026-09-06
   Fixes: login responsive shell, UAC dark surface compatibility.
   ================================================================ */

/* Login is rendered inside the regular CI shell. The footer is a sibling of
   .content-inner, so a row-direction flex shell pushed it beside the form.
   Keep login as a clean, centered single-purpose screen. */
body.app-ui-master.app-login-route .main-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    min-width: 0 !important;
}

body.app-ui-master.app-login-route .container-fluid.content-inner,
body.app-ui-master.app-login-route .conatiner-fluid.content-inner {
    flex: 0 1 auto;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 1rem !important;
}

body.app-ui-master.app-login-route .content-inner > .row,
body.app-ui-master.app-login-route #ajax-content {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.app-ui-master.app-login-route .content-inner > .row > [class*="col-"] {
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.app-ui-master.app-login-route .footer,
body.app-ui-master.app-login-route .btn-download,
body.app-ui-master.app-login-route #offcanvasExample {
    display: none !important;
}

/* UAC/Menu views were written with Bootstrap 5 color CSS variables and fall
   back to #fff. The current Hope UI dark shell does not set those variables
   on these AJAX fragments, which made the permission tree white-on-white. */
body.app-ui-master.dark #permission-manager,
body.app-ui-master.dark #uac-role-manager,
body.app-ui-master.dark #menu-manager {
    --bs-body-bg: #0e1829 !important;
    --bs-body-color: var(--ux-text) !important;
    --bs-secondary-color: var(--ux-muted) !important;
    --bs-primary: var(--ux-primary) !important;
    --uac-hover: rgba(102, 128, 255, .055) !important;
}

body.app-ui-master.dark #permission-manager .permission-header,
body.app-ui-master.dark #permission-manager .permission-body,
body.app-ui-master.dark #permission-manager .permission-scroll,
body.app-ui-master.dark #permission-manager .permission-savebar,
body.app-ui-master.dark #uac-role-manager .uac-role-table-wrap,
body.app-ui-master.dark #menu-manager .menu-table-wrap {
    background: #0e1829 !important;
    color: var(--ux-text) !important;
    border-color: var(--ux-border) !important;
}

body.app-ui-master.dark #permission-manager .permission-row {
    color: #dfe7f2 !important;
    background: transparent !important;
    border-color: var(--ux-border) !important;
}

body.app-ui-master.dark #permission-manager .permission-row-root {
    background: rgba(102, 128, 255, .035) !important;
}

body.app-ui-master.dark #permission-manager .permission-row-readonly {
    background: rgba(148, 163, 184, .018) !important;
}

body.app-ui-master.dark #permission-manager .permission-name,
body.app-ui-master.dark #permission-manager .permission-select-all,
body.app-ui-master.dark #permission-manager .permission-heading h5 {
    color: var(--ux-text) !important;
}

body.app-ui-master.dark #permission-manager .permission-toggle,
body.app-ui-master.dark #permission-manager .permission-child-count,
body.app-ui-master.dark #permission-manager .permission-dirty-status,
body.app-ui-master.dark #permission-manager .permission-empty {
    color: var(--ux-muted) !important;
}

body.app-ui-master.dark #permission-manager .permission-access-badge.access-public {
    background: var(--ux-success-soft) !important;
    color: #78dfb8 !important;
}

body.app-ui-master.dark #permission-manager .permission-access-badge.access-authenticated {
    background: var(--ux-info-soft) !important;
    color: #8dd4fa !important;
}

body.app-ui-master.dark #permission-manager .permission-access-badge.access-permission {
    background: rgba(167, 139, 250, .13) !important;
    color: #c0adff !important;
}

@media (max-width: 991.98px) {
    body.app-ui-master.app-login-route .login-master {
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: auto !important;
    }

    body.app-ui-master.app-login-route .login-master__visual {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    body.app-ui-master.app-login-route {
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body.app-ui-master.app-login-route .main-content {
        min-height: 100dvh !important;
        justify-content: flex-start !important;
    }

    body.app-ui-master.app-login-route .container-fluid.content-inner,
    body.app-ui-master.app-login-route .conatiner-fluid.content-inner {
        padding: .65rem !important;
    }

    body.app-ui-master.app-login-route .login-master {
        width: 100% !important;
        min-width: 0 !important;
        border-radius: 14px !important;
    }

    body.app-ui-master.app-login-route .login-master__form {
        width: 100% !important;
        min-width: 0 !important;
        padding: 1.15rem 1rem !important;
    }

    body.app-ui-master.app-login-route .login-master__panel,
    body.app-ui-master.app-login-route .login-master form,
    body.app-ui-master.app-login-route .login-master .input-group {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body.app-ui-master.app-login-route .login-master__brand {
        margin-bottom: 1.35rem !important;
    }

    body.app-ui-master.app-login-route .login-master__brand strong {
        font-size: .92rem !important;
    }

    body.app-ui-master.app-login-route .login-master__brand span {
        font-size: .68rem !important;
    }

    body.app-ui-master.app-login-route .login-master h2 {
        font-size: 1.65rem !important;
    }

    body.app-ui-master.app-login-route .login-logo-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}


/* ================================================================
   MASTER V1.4 STABILITY + LEGACY PAGE POLISH - 2026-09-06
   ================================================================ */

/* Blank legacy controls beside Search/Cari are not actionable and were
   rendered as a stray pill after the global form restyle. JS marks only a
   blank immediate sibling of a Search/Cari button. */
body.app-ui-master .app-ui-empty-search-artifact {
    display: none !important;
}

/* Make all legacy search/action rows visually consistent without changing
   their HTML or event handlers. */
body.app-ui-master.dark #ajax-content form:not(.login-master form) .input-group,
body.app-ui-master.dark #ajax-content .card-header .input-group {
    align-items: stretch;
}

body.app-ui-master.dark #ajax-content .input-group > .form-control,
body.app-ui-master.dark #ajax-content .input-group > .form-select {
    min-width: 0;
}

body.app-ui-master.dark #ajax-content .input-group > .btn,
body.app-ui-master.dark #ajax-content form .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
}

body.app-ui-master.dark #ajax-content .card:not(.dashboard-card) {
    overflow: hidden;
}

body.app-ui-master.dark #ajax-content .card-header > .row,
body.app-ui-master.dark #ajax-content .card-body > .row:first-child {
    row-gap: .65rem;
}

body.app-ui-master.dark #ajax-content table.table {
    margin-bottom: 0;
}

body.app-ui-master.dark #ajax-content .table-responsive {
    border-radius: 10px;
}

body.app-ui-master.dark #ajax-content .table thead th {
    letter-spacing: .025em;
}

/* Modal close button must remain a clear clickable target across the mixed
   Bootstrap 4/5 markup used by legacy pages. */
body.app-ui-master.dark .modal-header .btn-close,
body.app-ui-master.dark .modal-header .close,
body.app-ui-master.dark .modal-header [data-bs-dismiss="modal"],
body.app-ui-master.dark .modal-header [data-dismiss="modal"] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    margin: -.35rem -.35rem -.35rem auto !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    border: 1px solid transparent !important;
    color: #c9d4e4 !important;
    opacity: .82 !important;
    cursor: pointer !important;
    position: relative;
    z-index: 3;
}

body.app-ui-master.dark .modal-header .btn-close:hover,
body.app-ui-master.dark .modal-header .close:hover,
body.app-ui-master.dark .modal-header [data-bs-dismiss="modal"]:hover,
body.app-ui-master.dark .modal-header [data-dismiss="modal"]:hover {
    background: rgba(255, 255, 255, .07) !important;
    border-color: var(--ux-border-strong) !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* Login can also arrive through the legacy AJAX shell after Logout. The JS
   synchronizes app-login-route as soon as .login-master exists. */
body.app-ui-master.app-login-route {
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: #0a1322 !important;
}

body.app-ui-master.app-login-route .main-content {
    width: 100% !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.app-ui-master.app-login-route .container-fluid.content-inner,
body.app-ui-master.app-login-route .conatiner-fluid.content-inner {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: clamp(.75rem, 2vw, 1.5rem) !important;
}

body.app-ui-master.app-login-route .login-master {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    min-height: min(700px, calc(100dvh - 3rem)) !important;
    grid-template-columns: minmax(420px, .9fr) minmax(420px, 1.1fr) !important;
}

body.app-ui-master.app-login-route .login-master__panel {
    width: min(430px, 100%) !important;
}

@media (max-width: 991.98px) {
    body.app-ui-master.app-login-route .login-master {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 620px !important;
        min-height: auto !important;
    }

    body.app-ui-master.app-login-route .login-master__visual {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    body.app-ui-master.app-login-route .container-fluid.content-inner,
    body.app-ui-master.app-login-route .conatiner-fluid.content-inner {
        padding: .5rem !important;
    }

    body.app-ui-master.app-login-route .login-master {
        border-radius: 12px !important;
        max-width: none !important;
    }

    body.app-ui-master.app-login-route .login-master__form {
        padding: 1rem .9rem !important;
    }

    body.app-ui-master.app-login-route .login-logo-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* ================================================================
   MASTER V1.5 MODULE POLISH - 2026-09-06
   Applies consistent visual hierarchy to legacy CRUD, information,
   media, inbox and profile pages without changing their business logic.
   ================================================================ */

/* Module surfaces ------------------------------------------------ */
body.app-ui-master.dark #ajax-content.app-module-surface {
    display: grid;
    gap: 1rem;
}

body.app-ui-master.dark #ajax-content .app-module-card {
    border-color: rgba(148, 163, 184, .13) !important;
    box-shadow: 0 10px 28px rgba(1, 7, 20, .12) !important;
}

body.app-ui-master.dark #ajax-content .app-module-card > .card-header {
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: .85rem 1rem !important;
    background: linear-gradient(180deg, rgba(255,255,255,.018), transparent) !important;
}

body.app-ui-master.dark #ajax-content .app-module-card > .card-header .card-title,
body.app-ui-master.dark #ajax-content .app-module-card > .card-header h3,
body.app-ui-master.dark #ajax-content .app-module-card > .card-header h4,
body.app-ui-master.dark #ajax-content .app-module-card > .card-header h5 {
    margin: 0 !important;
    font-size: .94rem !important;
    line-height: 1.35;
    font-weight: 740 !important;
    color: #eef4fb !important;
}

/* Data / master pages ------------------------------------------- */
body.app-ui-master.dark #ajax-content .app-data-card > .card-header {
    padding: .8rem 1rem !important;
}

body.app-ui-master.dark #ajax-content .app-data-card .app-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .65rem 1rem !important;
}

body.app-ui-master.dark #ajax-content .app-data-card form[data-app-search],
body.app-ui-master.dark #ajax-content form.app-search-form {
    width: min(460px, 100%);
    margin-left: auto;
}

body.app-ui-master.dark #ajax-content .app-data-card form[data-app-search] .input-group,
body.app-ui-master.dark #ajax-content form.app-search-form .input-group {
    width: 100%;
    flex-wrap: nowrap;
}

body.app-ui-master.dark #ajax-content .app-data-card .input-group-text {
    min-width: 42px;
    justify-content: center;
    background: #0c1626 !important;
}

body.app-ui-master.dark #ajax-content .app-data-card .table-responsive {
    background: rgba(6, 12, 22, .18);
}

body.app-ui-master.dark #ajax-content .app-data-card table.table tbody td {
    color: #d5dfec !important;
}

body.app-ui-master.dark #ajax-content .app-data-card table.table tbody tr:nth-child(even) {
    background: rgba(255,255,255,.008);
}

body.app-ui-master.dark #ajax-content .app-data-card table.table tbody tr:hover {
    background: rgba(102, 128, 255, .065) !important;
}

body.app-ui-master.dark #ajax-content .app-data-card .app-actions {
    white-space: nowrap;
}

body.app-ui-master.dark #ajax-content .app-data-card .app-actions .btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0 !important;
}

body.app-ui-master.dark #ajax-content .app-data-card .card-footer,
body.app-ui-master.dark #ajax-content .app-data-card .app-data-footer {
    padding: .75rem 1rem !important;
}

/* Forms --------------------------------------------------------- */
body.app-ui-master.dark #ajax-content .app-form-card form {
    max-width: 1120px;
}

body.app-ui-master.dark #ajax-content .app-form-card .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: .85rem;
}

body.app-ui-master.dark #ajax-content .app-form-card hr {
    border-color: var(--ux-border) !important;
    opacity: 1;
}

body.app-ui-master.dark #ajax-content .app-form-card .form-section-title {
    margin: .3rem 0 .65rem;
    color: #aebdff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Informational / article pages -------------------------------- */
body.app-ui-master.dark #ajax-content .app-prose-card > .card-body {
    width: 100%;
    max-width: 1120px;
    padding: 1.25rem 1.35rem 1.45rem !important;
    color: #cbd6e5;
    font-size: .91rem;
    line-height: 1.76;
}

body.app-ui-master.dark #ajax-content .app-prose-card p,
body.app-ui-master.dark #ajax-content .app-prose-card .prod-descr {
    margin: 0 0 .92rem !important;
    color: #cbd6e5 !important;
    line-height: 1.76 !important;
    text-align: left !important;
}

body.app-ui-master.dark #ajax-content .app-prose-card p:last-child {
    margin-bottom: 0 !important;
}

body.app-ui-master.dark #ajax-content .app-prose-card ul,
body.app-ui-master.dark #ajax-content .app-prose-card ol {
    margin: .6rem 0 1rem;
    padding-left: 1.35rem;
}

body.app-ui-master.dark #ajax-content .app-prose-card li {
    margin: .38rem 0;
    padding-left: .15rem;
    color: #cad5e4;
}

body.app-ui-master.dark #ajax-content .app-prose-card li::marker {
    color: #8ea4ff;
    font-weight: 800;
}

body.app-ui-master.dark #ajax-content .app-prose-card strong,
body.app-ui-master.dark #ajax-content .app-prose-card b {
    color: #f1f5fb;
}

body.app-ui-master.dark #ajax-content .app-prose-card a {
    color: #94a9ff;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

body.app-ui-master.dark #ajax-content .app-prose-card blockquote {
    margin: 1rem 0;
    padding: .85rem 1rem;
    background: rgba(102,128,255,.055);
    border: 1px solid rgba(102,128,255,.14);
    border-left: 3px solid var(--ux-primary);
    border-radius: 0 10px 10px 0;
}

/* Visually mark short statement cards (e.g. Visi / Misi). */
body.app-ui-master.dark #ajax-content .app-prose-card.app-prose-compact > .card-body {
    font-size: 1rem;
    line-height: 1.65;
}

body.app-ui-master.dark #ajax-content .app-prose-card.app-prose-compact {
    background:
        radial-gradient(circle at 100% 0, rgba(102,128,255,.08), transparent 13rem),
        linear-gradient(180deg, rgba(18,28,47,.98), rgba(15,24,41,.98)) !important;
}

/* Media / gallery / content ------------------------------------ */
body.app-ui-master.dark #ajax-content .app-media-card .card-body > .row.g-3,
body.app-ui-master.dark #ajax-content .app-media-card .card-body > .row.g-4 {
    row-gap: 1rem !important;
}

body.app-ui-master.dark #ajax-content .app-media-card article.card,
body.app-ui-master.dark #ajax-content .app-media-tile {
    overflow: hidden;
    border: 1px solid var(--ux-border) !important;
    background: #101b2e !important;
    box-shadow: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.app-ui-master.dark #ajax-content .app-media-card article.card:hover,
body.app-ui-master.dark #ajax-content .app-media-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(102,128,255,.30) !important;
    box-shadow: 0 14px 32px rgba(1,7,20,.18) !important;
}

body.app-ui-master.dark #ajax-content .app-media-card article.card img {
    transition: transform .28s ease;
}

body.app-ui-master.dark #ajax-content .app-media-card article.card:hover img {
    transform: scale(1.015);
}

/* Inbox / suggestion pages ------------------------------------- */
body.app-ui-master.dark #ajax-content .app-inbox-card tbody tr[data-unread="1"],
body.app-ui-master.dark #ajax-content .app-inbox-card tbody tr.is-unread {
    background: rgba(102,128,255,.045) !important;
}

body.app-ui-master.dark #ajax-content .app-inbox-card .btn-link {
    color: #dce6f3 !important;
}

/* Profile ------------------------------------------------------- */
body.app-ui-master.dark #ajax-content.app-profile-module .profile-img,
body.app-ui-master.dark #ajax-content.app-profile-module .profile-logo {
    position: relative;
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(102,128,255,.75), rgba(78,181,241,.35));
    box-shadow: 0 8px 26px rgba(1,7,20,.22);
}

body.app-ui-master.dark #ajax-content.app-profile-module .profile-img img,
body.app-ui-master.dark #ajax-content.app-profile-module .profile-logo img {
    border: 3px solid #111b2e;
}

body.app-ui-master.dark #ajax-content.app-profile-module .profile-tab {
    gap: .35rem;
    padding: .3rem;
    border-radius: 10px;
    background: rgba(7,13,24,.28);
}

body.app-ui-master.dark #ajax-content.app-profile-module .profile-tab .nav-link {
    padding: .48rem .75rem;
    border-radius: 8px;
    color: var(--ux-muted) !important;
    font-size: .78rem;
    font-weight: 700;
}

body.app-ui-master.dark #ajax-content.app-profile-module .profile-tab .nav-link.active {
    background: var(--ux-primary-soft) !important;
    color: #aebaff !important;
}

body.app-ui-master.dark #ajax-content.app-profile-module .profile-content {
    min-width: 0;
}

/* Empty states -------------------------------------------------- */
body.app-ui-master.dark #ajax-content .app-empty-state,
body.app-ui-master.dark #ajax-content .ajax-ui-empty {
    display: table-cell;
    text-align: center;
    color: var(--ux-muted) !important;
}

body.app-ui-master.dark #ajax-content div.app-empty-state,
body.app-ui-master.dark #ajax-content div.ajax-ui-empty {
    display: flex;
    min-height: 128px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .45rem;
    border: 1px dashed rgba(148,163,184,.18);
    border-radius: 10px;
    background: rgba(255,255,255,.012);
}

/* Responsive module behaviour --------------------------------- */
@media (max-width: 767.98px) {
    body.app-ui-master.dark #ajax-content .app-data-card .app-toolbar {
        align-items: stretch;
    }

    body.app-ui-master.dark #ajax-content .app-data-card .app-toolbar > *,
    body.app-ui-master.dark #ajax-content .app-data-card form[data-app-search],
    body.app-ui-master.dark #ajax-content form.app-search-form {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
    }

    body.app-ui-master.dark #ajax-content .app-data-card .app-toolbar .d-flex.flex-wrap.gap-2 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-ui-master.dark #ajax-content .app-data-card .app-toolbar .d-flex.flex-wrap.gap-2 .btn {
        width: 100%;
    }

    body.app-ui-master.dark #ajax-content .app-prose-card > .card-body {
        padding: 1rem !important;
        font-size: .88rem;
        line-height: 1.68;
    }

    body.app-ui-master.dark #ajax-content.app-profile-module .profile-tab {
        width: 100%;
        margin-top: .65rem;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    body.app-ui-master.dark #ajax-content .app-data-card .app-toolbar .d-flex.flex-wrap.gap-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    body.app-ui-master.dark #ajax-content .app-module-card > .card-header {
        padding: .75rem .8rem !important;
    }

    body.app-ui-master.dark #ajax-content .app-module-card > .card-body {
        padding: .8rem !important;
    }

    body.app-ui-master.dark #ajax-content .app-data-card > .card-body {
        padding: .75rem !important;
    }
}