:root {
    --primary:#4154f1;
    --sidebar:#fff;
    --body:#f6f8fb;
    --text:#263238;
    --muted:#6c757d;
    --border:#e7eaf0;
    --top:#fff;
    --card:#fff;
    --table:#fafbfc
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:var(--body);
    color:var(--text);
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif
}

.app-shell {
    min-height:100vh
}

.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:260px;
    background:var(--sidebar);
    border-right:1px solid var(--border);
    z-index:1040;
    display:flex;
    flex-direction:column;
    overflow:hidden
}

.brand {
    height:auto;
    min-height:132px;
    position:sticky;
    top:0;
    padding:12px 22px 0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border-bottom:1px solid var(--border);
    background:var(--sidebar);
    z-index:10
}

.brand-mark {
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:10px;
    background:var(--primary);
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:20px;
    overflow:hidden
}

.brand-mark img {
    width:100%;
    height:100%;
    object-fit:contain;
    background:#fff
}

.brand-name {
    font-weight:800;
    font-size:14px;
    letter-spacing:.2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.brand small {
    color:var(--muted);
    font-size:10px
}

.brand-copy {
    min-width:0
}

.brand-head {
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:8px
}

.sidebar-clock {
    padding:10px 11px 12px;
    margin:10px 0 0;
    border-top:1px solid var(--border);
    background:linear-gradient(180deg,rgba(65,84,241,.03),transparent);
    font-variant-numeric:tabular-nums;
    text-align:center
}

.clock-date {
    font-size:14px;
    font-weight:600;
    color:#53606e;
    line-height:1.35
}

.clock-time {
    font-size:28px;
    font-weight:800;
    letter-spacing:.2px;
    color:var(--text);
    line-height:1.35;
    margin-top:2px
}

.clock-zone {
    font-size:11px;
    color:#8b93a1;
    margin-top:3px;
    letter-spacing:.3px
}

.company-switcher {
    min-width:210px;
    border-radius:8px
}

.company-context-badge {
    font-size:12px;
    color:var(--muted);
    padding:7px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--card)
}

.sidebar-menu {
    padding:10px 12px 30px;
    overflow-y:auto;
    overflow-x:hidden;
    flex:1;
    min-height:0;
    scrollbar-width:thin;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch
}

.menu-label {
    font-size:10px;
    font-weight:800;
    color:#9aa1ad;
    letter-spacing:.8px;
    padding:14px 10px 7px
}

.sidebar-section {
    margin:0
}

.menu-toggle {
    border:0;
    background:transparent;
    width:100%;
    text-align:left;
    color:#9aa1ad;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:10px;
    font-weight:800;
    letter-spacing:.8px;
    padding:14px 10px 7px;
    cursor:pointer
}

.menu-toggle .chev {
    margin-left:auto;
    font-size:11px;
    transition:transform .28s ease
}

.menu-toggle[aria-expanded="false"] .chev {
    transform:rotate(-90deg)
}

.menu-section-body {
    display:grid;
    grid-template-rows:1fr;
    opacity:1;
    transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1),opacity .2s ease
}

.menu-section-body.is-collapsed {
    grid-template-rows:0fr;
    opacity:0
}

.menu-section-inner {
    min-height:0;
    overflow:hidden
}

.nav-link {
    color:#53606e;
    border-radius:8px;
    padding:10px 11px;
    margin:2px 0;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    transition:background-color .2s ease,color .2s ease,transform .2s ease
}

.nav-link:hover {
    background:#f1f3ff;
    color:var(--primary);
    transform:translateX(1px)
}

.nav-link.active {
    background:#eef0ff;
    color:var(--primary);
    font-weight:700
}

.nav-link i {
    width:20px;
    text-align:center;
    font-size:16px
}

.main-panel {
    margin-left:260px;
    min-height:100vh
}

.topbar {
    height:74px;
    background:var(--top);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    padding:0 24px;
    position:sticky;
    top:0;
    z-index:1030
}

.topbar-title {
    font-size:18px;
    font-weight:700
}

.user-menu {
    display:flex;
    align-items:center;
    gap:8px;
    border:0;
    background:transparent
}

.avatar {
    width:34px;
    height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#eef0ff;
    color:var(--primary);
    font-weight:800
}

.content {
    padding:24px
}

.footer {
    padding:20px 24px;
    color:#9aa1ad;
    font-size:12px
}

.page-heading {
    margin-bottom:22px
}

.page-heading h1 {
    font-size:22px;
    font-weight:750;
    margin:0 0 5px
}

.page-heading p {
    margin:0;
    color:var(--muted);
    font-size:13px
}

.card {
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 2px 10px rgba(30,50,90,.03);
    background:var(--card)
}

.stat-card {
    padding:18px
}

.stat-icon {
    width:46px;
    height:46px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:#eef0ff;
    color:var(--primary);
    font-size:21px
}

.stat-value {
    font-size:23px;
    font-weight:800;
    margin-top:8px
}

.stat-label {
    color:var(--muted);
    font-size:12px
}

.table th {
    font-size:12px;
    color:#6c757d;
    text-transform:uppercase;
    letter-spacing:.3px;
    background:var(--table);
    white-space:nowrap
}

.table td {
    vertical-align:middle;
    font-size:13px
}

.btn-primary {
    background:var(--primary);
    border-color:var(--primary)
}

.form-control,
.form-select {
    border-radius:8px;
    border-color:#dfe3ea;
    padding:.62rem .75rem;
    font-size:13px
}

.badge-soft {
    background:#eef0ff;
    color:var(--primary)
}

.print-only {
    display:none
}

.dark-mode {
    --primary:#7c8cff;
    --sidebar:#151922;
    --body:#0f1218;
    --text:#e8ebf2;
    --muted:#aab2c0;
    --border:#292f3b;
    --top:#151922;
    --card:#171c25;
    --table:#1c222c
}

.dark-mode .nav-link {
    color:#b8c0cf
}

.dark-mode .nav-link:hover,
.dark-mode .nav-link.active {
    background:#222a3d;
    color:#9aa6ff
}

.dark-mode .brand-mark img {
    background:#fff
}

.dark-mode .dropdown-menu {
    background:#1b202a;
    color:#eee
}

.dark-mode .dropdown-item {
    color:#ddd
}

.dark-mode .dropdown-item:hover {
    background:#252c39
}

.dark-mode .table {
    --bs-table-bg:transparent;
    --bs-table-color:var(--text);
    --bs-table-border-color:var(--border)
}

.dark-mode .form-control,
.dark-mode .form-select {
    background:#11151d;
    color:#eee;
    border-color:#343b49
}

.dark-mode .form-control::placeholder {
    color:#7f8999
}

.dark-mode .btn-light {
    background:#242b36;
    color:#eee;
    border-color:#343b49
}

.dark-mode .user-menu {
    color:#f1f5f9
}

.dark-mode .user-menu .small {
    color:#e8ebf2 !important
}

.dark-mode .clock-date {
    color:#b9c3d2
}

.dark-mode .clock-time {
    color:#f1f5f9
}

.dark-mode .clock-zone {
    color:#8fa0b7
}

.dark-mode .card {
    box-shadow:none
}


.sidebar-mobile-overlay{display:none}
@media(max-width:991.98px){
    .sidebar-mobile-overlay{
        position:fixed;
        inset:0;
        z-index:1040;
        background:rgba(15,23,42,.28);
        touch-action:manipulation;
    }
    body.sidebar-open .sidebar-mobile-overlay{display:block}
    body.sidebar-open{overflow:hidden}
    .sidebar{z-index:1050}
    .topbar{z-index:1030}
}

@media(max-width:991.98px) {

    .sidebar {
        transform:translateX(-100%);
        box-shadow:10px 0 30px rgba(0,0,0,.08);
        transition:transform .25s ease
    }

    .sidebar.show {
        transform:translateX(0)
    }

    .main-panel {
        margin-left:0
    }

}

@media(max-width:575.98px) {

    .content {
        padding:16px
    }

    .topbar {
        padding:0 10px;
        gap:8px
    }

    .topbar-title {
        font-size:15px;
        min-width:0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis
    }

    .topbar .company-switcher-form {
        min-width:0
    }

    .topbar .company-switcher {
        min-width:0;
        width:120px;
        font-size:11px;
        padding:.42rem 2rem .42rem .55rem
    }

    .topbar .user-menu {
        padding:.15rem
    }

    .topbar .user-menu .avatar {
        width:32px;
        height:32px
    }

    .topbar .btn-light {
        padding:.3rem .45rem
    }

    .topbar .dropdown-menu {
        font-size:13px
    }

}

.dashboard-filter-menu .form-check {
    cursor:pointer;
    padding:.2rem .35rem .2rem 1.6rem;
    border-radius:6px
}

.dashboard-filter-menu .form-check:hover {
    background:rgba(65,84,241,.07)
}
/* =========================================================
   RNT PRODUCTION - GLOBAL DARK MODE VISUAL STANDARD
   Consistent table + form/header styling
   ========================================================= */
.dark-mode {
  --dark-surface: #171c25;
  --dark-surface-2: #1b222d;
  --dark-input: #11151d;
  --dark-border: #2b3442;
  --dark-border-soft: #252d39;
  --dark-heading: #f1f5f9;
  --dark-label: #8fa0b7;
  --dark-text: #dbe3ee;
  --dark-muted: #94a3b8;
}

/* Page and card headings */
.dark-mode .page-heading h1,
.dark-mode .page-heading h2,
.dark-mode .page-heading h3,
.dark-mode .page-heading h4,
.dark-mode .page-heading h5,
.dark-mode .page-heading h6,
.dark-mode .card h1,
.dark-mode .card h2,
.dark-mode .card h3,
.dark-mode .card h4,
.dark-mode .card h5,
.dark-mode .card h6,
.dark-mode .card-title,
.dark-mode .modal-title,
.dark-mode .accordion-button {
  color: var(--dark-heading) !important;
}

.dark-mode .page-heading p,
.dark-mode .card .text-muted,
.dark-mode .card .text-secondary,
.dark-mode .form-text {
  color: var(--dark-muted) !important;
}

/* Form labels and field captions - same visual family as table headings */
.dark-mode label,
.dark-mode .form-label,
.dark-mode .col-form-label,
.dark-mode .form-check-label,
.dark-mode .form-floating > label,
.dark-mode .input-group-text,
.dark-mode .form-text {
  color: var(--dark-label) !important;
}

.dark-mode .form-label,
.dark-mode .col-form-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1px;
}

/* Inputs / selects / textarea */
.dark-mode .form-control,
.dark-mode .form-select,
.dark-mode textarea.form-control,
.dark-mode input.form-control,
.dark-mode select.form-select {
  background-color: var(--dark-input) !important;
  color: #f1f5f9 !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: none !important;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus,
.dark-mode textarea.form-control:focus {
  background-color: #121821 !important;
  color: #fff !important;
  border-color: #5668a8 !important;
  box-shadow: 0 0 0 .15rem rgba(124,140,255,.12) !important;
}

.dark-mode .form-control::placeholder,
.dark-mode textarea.form-control::placeholder {
  color: #68778c !important;
  opacity: 1;
}

.dark-mode .form-select option,
.dark-mode select option {
  background: var(--dark-input);
  color: #f1f5f9;
}

.dark-mode .input-group-text {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-border) !important;
}

/* Checkboxes / radios */
.dark-mode .form-check-input {
  background-color: var(--dark-input);
  border-color: #536174;
}
.dark-mode .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Tables: exact consistent dark header model */
.dark-mode .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--dark-text);
  --bs-table-border-color: var(--dark-border-soft);
  color: var(--dark-text) !important;
  margin-bottom: 0;
}

.dark-mode .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--dark-text);
  border-bottom-color: var(--dark-border-soft);
}

.dark-mode .table > thead > tr > th,
.dark-mode .table thead th {
  background: var(--dark-surface-2) !important;
  color: var(--dark-label) !important;
  border-bottom: 1px solid var(--dark-border) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .35px;
  white-space: nowrap;
  padding: 10px 10px !important;
}

.dark-mode .table > tbody > tr > td,
.dark-mode .table tbody td {
  background: transparent !important;
  color: var(--dark-text) !important;
  border-bottom: 1px solid var(--dark-border-soft) !important;
  font-size: 13px;
  padding: 10px !important;
  vertical-align: middle;
}

.dark-mode .table > tbody > tr:hover > td {
  background: rgba(255,255,255,.025) !important;
}

.dark-mode .table-responsive {
  border-radius: 8px;
}

/* Generic text utilities that otherwise stay too dark in Bootstrap */
.dark-mode .text-dark,
.dark-mode .text-body,
.dark-mode .text-black {
  color: var(--dark-text) !important;
}
.dark-mode .text-muted,
.dark-mode .text-secondary {
  color: var(--dark-muted) !important;
}
.dark-mode a:not(.btn):not(.nav-link) {
  color: #9aaeff;
}

/* Dropdowns / modals / accordion */
.dark-mode .dropdown-menu,
.dark-mode .modal-content,
.dark-mode .accordion-item {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
.dark-mode .dropdown-item,
.dark-mode .dropdown-item-text {
  color: var(--dark-text) !important;
}
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
  background: var(--dark-surface-2) !important;
  color: #fff !important;
}
.dark-mode .dropdown-divider {
  border-color: var(--dark-border) !important;
}
.dark-mode .accordion-button {
  background: var(--dark-surface) !important;
  color: var(--dark-heading) !important;
}
.dark-mode .accordion-button:not(.collapsed) {
  background: var(--dark-surface-2) !important;
}

/* Buttons */
.dark-mode .btn-light,
.dark-mode .btn-outline-secondary {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
.dark-mode .btn-light:hover,
.dark-mode .btn-outline-secondary:hover {
  background: #252d39 !important;
  color: #fff !important;
}

/* Card/form containers */
.dark-mode .card {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}
.dark-mode hr {
  border-color: var(--dark-border) !important;
  opacity: 1;
}

/* Date/time picker icons remain visible on dark inputs */
.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark-mode input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(.85);
  opacity: .9;
}

/* Multiselect menus */
.dark-mode .dashboard-filter-menu,
.dark-mode .dropdown-menu.dashboard-filter-menu {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}
.dark-mode .dashboard-filter-menu .form-check:hover {
  background: rgba(124,140,255,.12) !important;
}
.dark-mode .dashboard-filter-menu .form-check-label {
  color: var(--dark-text) !important;
}

/* Invoice status filter - compact and placed below the status summary */
.invoice-list-toolbar {
    min-height: 0;
}
.invoice-status-filter-form {
    margin: 0;
    max-width: 220px;
}
.invoice-status-filter-wrap {
    position: relative;
    width: 100%;
}
.invoice-status-filter-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    color: var(--bs-secondary-color, #6c757d);
}
.invoice-status-filter {
    width: 100%;
    min-width: 0;
    padding-left: 2.15rem;
    font-size: .8rem;
    font-weight: 500;
    border-radius: .45rem;
}
@media (max-width: 576px) {
    .invoice-status-filter-form {
        max-width: 100%;
    }
    .invoice-status-filter {
        font-size: .82rem;
    }
}
[data-theme="dark"] .invoice-status-filter,
.dark-mode .invoice-status-filter {
    color: var(--dark-text, #e5e7eb) !important;
    background-color: var(--dark-surface, #11151d) !important;
    border-color: var(--dark-border, #2b3442) !important;
}
[data-theme="dark"] .invoice-status-filter-icon,
.dark-mode .invoice-status-filter-icon {
    color: var(--dark-text, #e5e7eb) !important;
}
[data-theme="dark"] .invoice-status-filter:focus,
.dark-mode .invoice-status-filter:focus {
    border-color: #64748b;
    box-shadow: 0 0 0 .2rem rgba(148,163,184,.12);
}

/* Dashboard chart: model tetap sama di semua ukuran layar dan mode tema. */
.cash-chart {
    position: relative;
    width: 100%;
    height: 360px;
    min-height: 360px;
}

.cash-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 991.98px) {
    .cash-chart {
        height: 360px;
        min-height: 360px;
    }
}

/* Mobile modal safety: prevent action buttons from being clipped by viewport/browser chrome. */
@media (max-width: 575.98px) {
  .modal-dialog { max-width: calc(100% - .75rem); margin: .375rem auto; }
  .modal-content { max-height: calc(100dvh - .75rem); }
  .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { position: sticky; bottom: 0; background: var(--bs-body-bg); z-index: 5; }
  #roleModal .modal-footer { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
  #roleModal .modal-footer .btn { min-height: 44px; flex: 1 1 0; }
}

.theme-choice{border:1px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;background:var(--card);color:var(--text);font-size:13px}.theme-choice:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 15%,transparent)}.theme-choice input{accent-color:var(--primary)}.login-bg-preview{height:190px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(135deg,#f5f7ff,#eef2f7);background-size:cover;background-position:center;overflow:hidden;position:relative}.login-bg-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,rgba(7,18,35,.12),rgba(7,18,35,.02));color:#fff;font-size:12px;text-shadow:0 1px 3px rgba(0,0,0,.4)}

/* =========================================================
   RNT V3.4 - DARK MODE: Role/Permission, Company & Login Settings
   ========================================================= */
.dark-mode .role-card,
.dark-mode .permission-group,
.dark-mode .permission-item {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}
.dark-mode .permission-group-header {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-heading) !important;
}
.dark-mode .permission-item:hover,
.dark-mode .role-card:hover {
  background: var(--dark-surface-2) !important;
}
.dark-mode .permission-code,
.dark-mode .user-form-label,
.dark-mode .role-permission-header .text-secondary,
.dark-mode .role-card .text-secondary,
.dark-mode .permission-group .text-secondary {
  color: var(--dark-muted) !important;
}
.dark-mode .role-card .badge-soft,
.dark-mode .badge-soft {
  background: #222a3d !important;
  color: #aeb8ff !important;
  border: 1px solid #35405c !important;
}
.dark-mode .role-card .text-bg-primary,
.dark-mode .company-code-badge {
  background: #2b3560 !important;
  color: #e6e9ff !important;
}
.dark-mode .role-card .btn-outline-primary,
.dark-mode .permission-group .btn-outline-primary,
.dark-mode .btn-outline-primary {
  color: #aeb8ff;
  border-color: #5968a8;
}
.dark-mode .role-card .btn-outline-primary:hover,
.dark-mode .permission-group .btn-outline-primary:hover,
.dark-mode .btn-outline-primary:hover {
  background: #2b3560;
  color: #fff;
  border-color: #7c8cff;
}
.dark-mode .permission-item .text-primary,
.dark-mode .permission-item i.text-primary {
  color: #9aa6ff !important;
}
.dark-mode .modal-content,
.dark-mode .modal-header,
.dark-mode .modal-footer {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
.dark-mode .modal-header .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}
.dark-mode .modal-footer .btn-secondary {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Company settings */
.dark-mode .alert.alert-primary {
  background: #19223b !important;
  color: #dce4ff !important;
  border-color: #34446f !important;
}
.dark-mode .alert.alert-primary strong {
  color: #f1f5ff !important;
}
.dark-mode .alert.alert-warning {
  background: #332a16 !important;
  color: #f7df9a !important;
  border-color: #5a4721 !important;
}
.dark-mode .alert.alert-warning strong {
  color: #fff1c2 !important;
}
.dark-mode .card .badge.text-bg-primary {
  background: #2b3560 !important;
  color: #e6e9ff !important;
}
.dark-mode .card img {
  background: #fff;
  border-radius: 6px;
}

/* Login background settings */
.dark-mode .login-bg-preview {
  background: linear-gradient(135deg, #171c25, #0f1218) !important;
  border-color: var(--dark-border) !important;
}
.dark-mode .login-bg-overlay {
  background: linear-gradient(135deg, rgba(7,12,22,.55), rgba(7,12,22,.32)) !important;
  color: #f8fafc !important;
}
.dark-mode .login-bg-preview + form .form-text,
.dark-mode .login-bg-preview ~ form .form-text {
  color: var(--dark-muted) !important;
}

/* User creation controls */
.dark-mode .user-form-label {
  color: var(--dark-label) !important;
}
.dark-mode .form-text {
  color: var(--dark-muted) !important;
}


/* V3.5 - Role & Permission dark-mode consistency */
.dark-mode .role-permission-header,
.dark-mode .role-permission-header h1,
.dark-mode .role-permission-header h2,
.dark-mode .role-permission-header h3,
.dark-mode .role-permission-header h4,
.dark-mode .role-permission-header h5,
.dark-mode .role-permission-header h6 { color: var(--dark-heading) !important; }
.dark-mode .role-permission-header .text-secondary,
.dark-mode .permission-group-header .text-secondary,
.dark-mode .permission-item .text-secondary,
.dark-mode .permission-code { color: var(--dark-muted) !important; }
.dark-mode .permission-group { background: var(--dark-surface) !important; border-color: var(--dark-border) !important; }
.dark-mode .permission-group-header { background: var(--dark-surface-2) !important; color: var(--dark-heading) !important; border-bottom-color: var(--dark-border) !important; }
.dark-mode .permission-list { background: var(--dark-surface) !important; }
.dark-mode .permission-item { background: var(--dark-input) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; }
.dark-mode .permission-item:hover { background: #1d2530 !important; border-color: #364154 !important; }
.dark-mode .permission-item .fw-semibold { color: var(--dark-text) !important; }
.dark-mode .permission-item .text-primary,
.dark-mode .permission-item i.text-primary { color: #9aa6ff !important; }
.dark-mode .permission-item .form-check-input { background-color: var(--dark-input) !important; border-color: #536174 !important; }
.dark-mode .permission-item .form-check-input:checked { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.dark-mode #roleModal .modal-body { background: var(--dark-surface) !important; color: var(--dark-text) !important; }
.dark-mode #roleModal .modal-footer { background: var(--dark-surface) !important; border-top-color: var(--dark-border) !important; }
/* Rental item controls: one consistent field style, with width-only mobile adjustment for quantity. */
#rentItems .rental-qty{width:88px;min-width:88px;text-align:center;font-weight:600;color:var(--text);background:var(--card);-webkit-text-fill-color:var(--text);caret-color:var(--primary);opacity:1;}
.dark-mode #rentItems .rental-qty{color:#f1f5f9;background:var(--dark-input);-webkit-text-fill-color:#f1f5f9;}
.dark-mode #rentItems .rental-qty:focus{color:#fff;background:#121821;-webkit-text-fill-color:#fff;}
@media(max-width:575.98px){#rentItems .rental-qty{width:88px;min-width:88px;}#rentItems .rental-qty::-webkit-inner-spin-button,#rentItems .rental-qty::-webkit-outer-spin-button{opacity:1;margin:0;}}
#rentItems td:nth-child(3),#rentItems td:nth-child(4){vertical-align:middle;}

/* Invoice list keeps pagination inside the card and footer in normal document flow. */
.invoice-page-heading + .card { margin-bottom: 24px; }
@media (min-width: 992px) { .main-panel { display:flex; flex-direction:column; min-height:100vh; } .main-panel > .content { flex:1 0 auto; } }

/* Searchable customer combobox */
.customer-combobox .customer-options {
    position: absolute;
    z-index: 1080;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    padding: .35rem;
}

.customer-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .65rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: .65rem .75rem;
    border-radius: .55rem;
    cursor: pointer;
}

.customer-option:hover,
.customer-option.active {
    background: rgba(65, 84, 241, .10);
}

.customer-option-code {
    flex: 0 0 auto;
    min-width: 70px;
    font-size: .78rem;
    font-weight: 700;
    opacity: .75;
}

.customer-option-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-empty {
    padding: .75rem;
    font-size: .875rem;
    color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 575.98px) {
    .customer-combobox .customer-options {
        max-height: 240px;
    }
}

.customer-selector-input{cursor:pointer;background:var(--card);color:var(--text)}
.customer-selector-input:focus{cursor:pointer}
.customer-selector-input[readonly]{background:var(--card)}
/* Customer picker - selaras dengan tema RNT Production dan mendukung light/dark mode. */
.customer-picker-row{display:flex;align-items:stretch;gap:.5rem}
.customer-search-btn{min-width:78px;border-radius:8px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;box-shadow:0 2px 7px rgba(30,50,90,.10)}
.customer-search-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(30,50,90,.14)}
.customer-combobox .customer-options{box-shadow:0 12px 30px rgba(30,50,90,.12);border-color:var(--border);background:var(--card);color:var(--text)}
.customer-hint{padding:.7rem .8rem;color:var(--muted);font-size:.82rem}
.customer-option{color:var(--text);font-size:.86rem}
.customer-option:hover,.customer-option.active{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}
.customer-picker-modal{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card);color:var(--text);box-shadow:0 20px 60px rgba(20,35,70,.18)}
.customer-picker-modal .modal-header{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--card)),var(--card));border-bottom:1px solid var(--border);padding:1rem 1.15rem}
.customer-picker-modal .modal-title{font-size:1.05rem;font-weight:800;color:var(--text)}
.customer-modal-subtitle{font-size:.78rem;color:var(--muted);margin-top:.15rem}
.customer-picker-modal .modal-body{padding:1rem 1.15rem;background:var(--card)}
.customer-table-toolbar{margin-bottom:.85rem}
.customer-table-toolbar .input-group-text{background:var(--table);border-color:var(--border);color:var(--muted)}
.customer-table-toolbar .form-control{background:var(--card);color:var(--text);border-color:var(--border)}
.customer-picker-table{border-color:var(--border);background:var(--card);color:var(--text)}
.customer-picker-table thead th{background:var(--table);color:var(--muted);border-bottom-color:var(--border);font-size:.72rem}
.customer-picker-table tbody td{border-color:var(--border);font-size:.82rem;color:var(--text)}
.customer-picker-table tbody tr:hover{background:color-mix(in srgb,var(--primary) 4%,var(--card))}
.customer-table-name{font-weight:750;color:var(--text)}
.customer-select-btn{border-radius:7px;font-size:.75rem;font-weight:700;white-space:nowrap}
.customer-table-wrap{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.dark-mode .customer-picker-modal .btn-close{filter:invert(1) grayscale(1) brightness(2)}
.dark-mode .customer-search-btn{box-shadow:none}
@media(max-width:575.98px){
  .customer-picker-row{gap:.4rem}
  .customer-search-btn{min-width:46px;padding:.62rem .7rem}
  .customer-search-btn span{display:none}
  .customer-picker-modal .modal-header,.customer-picker-modal .modal-body{padding:.85rem}
  .customer-picker-table th:nth-child(2),.customer-picker-table td:nth-child(2){display:none}
  .customer-picker-table th,.customer-picker-table td{font-size:.76rem;padding:.6rem .45rem}
  .customer-picker-table th:nth-child(3),.customer-picker-table td:nth-child(3){max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .customer-select-btn{padding:.42rem .55rem}
}


/* Product picker: mengikuti pola Customer Picker agar pemilihan barang konsisten di Penawaran dan Penyewaan. */
.product-picker-field{position:relative;width:100%;}
.product-selector-input{cursor:pointer;background:var(--card);color:var(--text);padding-right:2.35rem;}
.product-selector-input[readonly]{background:var(--card);}
.product-selector-input::placeholder{color:var(--muted);}
.product-picker-field::after{content:'\F282';font-family:'bootstrap-icons';position:absolute;right:.8rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;}
#quoteItems .product-picker-field,#rentItems .product-picker-field{min-width:240px;}
@media(max-width:767.98px){#quoteItems .product-picker-field,#rentItems .product-picker-field{min-width:220px;}}

/* V8.2.6 - Pagination page-size selectors: no native/Bootstrap arrow in light or dark mode.
   Keep the compact select appearance identical across themes. */
select.pagination-page-size,
.form-select.pagination-page-size {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    --bs-form-select-bg-img: none !important;
    padding-right: .75rem !important;
    background-position: initial !important;
    background-repeat: no-repeat !important;
    background-size: 0 !important;
}

.dark-mode select.pagination-page-size,
.dark-mode .form-select.pagination-page-size {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    --bs-form-select-bg-img: none !important;
}

/* V6.0.3: employee fee picker must always sit above the application chrome. */
#employeePickerModal { z-index: 1065; }
#employeePickerModal .modal-dialog { position: relative; z-index: 1066; }
#feeEmployeePickerBackdrop { z-index: 1060; }

/* Collapsible input cards.
   UI-only: backend permission + CSRF remain the security boundary. */
.feature-card-hidden,
.input-collapse-card{
    display:block !important;
    overflow:hidden;
    transition:margin-bottom .2s ease, box-shadow .2s ease;
}
.input-collapse-header{
    width:100%;
    border:0;
    background:transparent;
    color:inherit;
    padding:0;
    text-align:left;
    cursor:pointer;
}
.input-collapse-header:hover{opacity:.9;}
.input-collapse-header-inner{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.input-collapse-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
}
.input-collapse-title-icon{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--primary-soft, rgba(65,84,241,.12));
    color:var(--primary);
    flex:0 0 auto;
}
.input-collapse-icon{transition:transform .2s ease;}
.input-collapse-card.is-collapsed{margin-bottom:16px !important;}
.input-collapse-card.is-collapsed .input-collapse-body{display:none;}
.input-collapse-card.is-collapsed .input-collapse-icon{transform:rotate(-90deg);}
.input-collapse-card.is-expanded .input-collapse-body{display:block;}
.input-collapse-body{border-top:1px solid var(--border-color, rgba(128,128,128,.18));padding-top:16px;margin-top:12px;}
.dark-mode .input-collapse-body{border-top-color:rgba(255,255,255,.08);}
@media (prefers-reduced-motion: reduce){.input-collapse-card,.input-collapse-icon{transition:none;}}

/* V6.0.6: collapsible input-card headers must remain bright and readable in dark mode. */
.dark-mode .input-collapse-header,
.dark-mode .input-collapse-title,
.dark-mode .input-collapse-header .input-collapse-title > span:last-child {
    color: #f1f5f9 !important;
}
.dark-mode .input-collapse-header:hover,
.dark-mode .input-collapse-header:focus-visible {
    color: #ffffff !important;
}
.dark-mode .input-collapse-icon {
    color: #dbe5f2 !important;
}
.dark-mode .input-collapse-title-icon {
    color: #cdd7ff !important;
    background: rgba(124,140,255,.16);
}