:root {
    --ip-navy: #1e2a4a;
    --ip-blue: #1d4ed8;
    --ip-blue-dark: #14328f;
    --ip-blue-light: #eff4ff;
    --ip-border: #e3e8ef;
    --ip-muted: #8a93a6;
    --ip-grad: linear-gradient(90deg, #14328f 0%, #2f74d0 100%);
}

html {
    /* Base font size for the whole app (all pages). Normal text = 12px.
       Headings (rem-based, e.g. h1..h6, .fs-*) and small notes/footers (.small,
       small) scale proportionally from this base automatically. */
    font-size: 12px;
}

html, body {
    height: 100%;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ip-navy);
}

/* App background — soft blue-grey to match the prototype. */
body { background: #eef3fa; }
#app-wrapper { min-height: 100vh; }

/* ---------- Sidebar ---------- */
/* ---------- Brand logo ("IN" tile) ---------- */
.ip-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgb(10, 77, 156), rgb(18, 115, 212));
  color: #fff;
  font-weight: 700;
  letter-spacing: .5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

/* ---------- Buttons ---------- */
.btn:not(.btn-sm):not(.btn-icon):not(.btn-close):not(.paginate_button),
.btn-add {
    min-width: 140px;
    min-height: 44px;
    border-radius: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-weight: 600;
}

.btn-primary {
    background: var(--ip-grad);
    border: none;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(90deg, #102a78 0%, #2a68bd 100%);
    border: none;
}

/* ---------- Cards / inputs ---------- */
.card {
    border: 1px solid var(--ip-border);
    border-radius: .75rem;
}
.form-control, .form-select {
    border-radius: .6rem;
    border-color: var(--ip-border);
    padding: .6rem .8rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ip-blue);
    box-shadow: 0 0 0 .2rem rgba(29, 78, 216, .12);
}
.form-label { font-weight: 500; font-size: .9rem; }
.req { color: #e23b3b; }

/* ---------- Login page (split layout) ---------- */
.login-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 100vh;
    background: #fff;
}
.login-visual {
    position: relative;
    margin: 18px;
    border-radius: 26px;
    background: linear-gradient(150deg, #e8f1fd 0%, #dbe9fb 45%, #cfe2fa 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.visual-blob { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); }
.blob-1 { width: 520px; height: 520px; top: -160px; left: -120px; }

@keyframes floaty {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.login-visual-stage {
    position: relative;
    width: 540px;
    height: 490px;
}

.float-card {
    position: absolute;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(16,54,102,.14);
}

.card-mini {
    left: 52px;
    top: 186px;
    width: 436px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(16,54,102,.18);
    overflow: hidden;
}
.card-mini .mini-head { background: linear-gradient(90deg,#0a4d9c,#1273d4); padding: 12px 16px; }
.card-mini .mini-body { padding: 14px 16px 18px; }
.mini-stat { background: #f4f8fd; border-radius: 10px; padding: 9px; }
.mini-label { font-size: 7.5px; color: #7c8ea5; font-weight: 600; }
.mini-val { font-size: 13px; font-weight: 800; color: #0a63c9; margin-top: 3px; }
.mini-chart .bars { display: flex; align-items: flex-end; gap: 9px; height: 70px; }
.mini-chart .bars span { flex: 1; background: #cfe2fa; border-radius: 4px 4px 0 0; }
.mini-chart .bars span:nth-child(4),
.mini-chart .bars span:nth-child(7) { background: #7db2ee; }
.mini-chart .bars span:nth-child(6) { background: #0a63c9; }

.card-movement {
    left: 0;
    top: 104px;
    width: 214px;
    padding: 17px 16px;
    animation: floaty 7s ease-in-out infinite;
}
.card-movement .text-muted.small { font-size: 9px !important; color: #7c8ea5 !important; font-weight: 700; }
.card-movement .fw-bold { font-size: 12px; margin-top: 6px; }
.card-movement .text-success { font-size: 10px; margin-top: 4px; font-weight: 600 !important; color: #00913f !important; }

.card-rfid {
    right: 0;
    top: 26px;
    width: 212px;
    padding: 17px 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: floaty 8s ease-in-out .6s infinite;
}
.card-rfid .tick {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e6f7ed;
    color: #00913f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}
.card-rfid .fw-bold { font-size: 11px; }
.card-rfid .text-muted.small { font-size: 9px !important; color: #7c8ea5 !important; margin-top: 3px; }

.card-fuel {
    right: 28px;
    bottom: 6px;
    width: 196px;
    padding: 17px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg,#0a4d9c,#1273d4);
    color: #fff;
    box-shadow: 0 18px 40px rgba(10,77,156,.3);
    animation: floaty 7.5s ease-in-out .9s infinite;
}
.card-fuel .fw-bold { font-size: 11px; }
.card-fuel .small { font-size: 9px !important; opacity: .8; margin-top: 3px; }
.card-fuel .chip { background: rgba(255,255,255,.2); color:#fff; border-radius: 20px; padding: 3px 8px; font-size: 8px; font-weight: 700; }

.login-form-side {
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 40px;
}
.login-form-inner {
    width: 100%;
    max-width: 378px;
}
.login-form-inner .ip-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0a4d9c, #1273d4);
    font-size: 17px;
    font-weight: 800;
}
.brand-title {
    font-size: 17px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #132b46;
}
.brand-sub {
    margin-top: 4px;
    font-size: 9.5px;
    font-weight: 600;
    color: #7c8ea5;
}
.login-title {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: #132b46;
}
.login-sub {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #7c8ea5;
}
.login-form-inner .form-label {
    font-size: 12px;
    font-weight: 600;
    color: #132b46;
}
.login-form-inner .form-control {
    height: 44px;
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 13px;
    background: #fff;
}
.login-form-inner .form-control:focus {
    border-color: #9cc4f0;
    box-shadow: 0 0 0 2px rgba(156, 196, 240, .25);
}
.btn-login {
    height: 46px;
    background: linear-gradient(90deg, #0a4d9c, #1273d4);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 10px 22px rgba(10, 77, 156, .28);
}
.btn-login:hover { color: #fff; filter: brightness(1.06); }

/* ---------- Misc ---------- */
.stat-card .display-6 { font-weight: 600; }
table.dataTable tbody td { vertical-align: middle; }
.navbar-brand.h6 { color: var(--ip-navy); font-weight: 600; }


/* ============ Sidebar ============ */
/* Prototype uses px here, so px is kept rather than the app's 12px-based rem. */
#sidebar {
    width: 250px;
    flex: none;
    background: linear-gradient(180deg, #0a4d9c 0%, #0b3f80 55%, #0a3468 100%);
    border: 1px solid rgba(255, 255, 255, .15);
    transition: width .18s ease;
    margin: 14px 0 14px 14px;
    border-radius: 20px;
    height: calc(100vh - 28px);
    position: sticky;
    top: 14px;
    box-shadow: 0 12px 30px rgba(12, 44, 86, .07);
    overflow: hidden;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.sidebar-head {
    height: 70px;
    flex: none;
    padding: 0 16px !important;
    gap: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.sidebar-collapse-btn {
    width: 32px;
    height: 32px;
    flex: none;
    padding: 0;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 9px;
    background: rgba(255, 255, 255, .1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-collapse-btn:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.sidebar-body {
    overflow-y: auto;
    padding: 12px 10px !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Sidebar logo tile: white square with the brand colour, per the prototype.
   It doubles as the toggle, which is the only way back when collapsed. */
.ip-logo-sidebar {
    width: 36px;
    height: 36px;
    flex: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 11px;
    background: #fff;
    color: #0a4d9c;
    font-size: 14px;
    font-weight: 800;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.ip-logo-sidebar:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
.sidebar-brand {
    font-size: 16px;
    line-height: 1;
    min-width: 0;
    font-weight: 800;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.menu-group {
    color: rgba(255, 255, 255, .55);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 15px 12px 7px;
    text-transform: uppercase;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    padding: 11px 12px;
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 2px;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.menu-link i { font-size: 18px; width: 18px; text-align: center; flex: none; }
.menu-link:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.menu-link.active {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.sidebar-foot {
    color: rgba(255, 255, 255, .6);
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding: 13px 18px !important;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Collapsed state: icons only. The separate collapse button is removed — as in
   the prototype — and the logo tile becomes the way to expand again. */
.sidebar-collapsed #sidebar { width: 76px; }
.sidebar-collapsed #sidebar .sidebar-head { justify-content: center; }
.sidebar-collapsed #sidebar .sidebar-collapse-btn { display: none; }
.sidebar-collapsed #sidebar .menu-link span,
.sidebar-collapsed #sidebar .menu-group,
.sidebar-collapsed #sidebar .sidebar-head .fw-bold,
.sidebar-collapsed #sidebar .sidebar-foot { display: none; }
.sidebar-collapsed #sidebar .menu-link { justify-content: center; }

/* ============ Topbar ============ */
/* Header matches the page background (no white bar / no divider) — per prototype.
   Uses the app background colour (not transparent) so scrolling content is
   covered by the sticky bar instead of bleeding through behind the title. */
.topbar {
    background: #eef3fa;
    border-bottom: 0;
    min-height: 92px;
    padding: 0 26px !important;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.topbar-heading { min-width: 0; }
/* 2rem = 24px on the 12px base — matches the prototype's 24px page title. */
.topbar-title {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.6px;
    color: var(--ip-navy);
}
.topbar-subtitle {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ip-muted);
    margin-top: 5px;
}
.btn-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: #4a6280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(12,44,86,.08);
}
.btn-icon:hover { background: #f2f7fd; color: #233856; }
.user-chip {
    border: 0;
    border-radius: 30px;
    padding: 6px 12px 6px 6px;
    gap: 11px;
    color: var(--ip-navy);
    background: transparent;
}
.user-chip:hover { background: #fff; }
.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: #0a4d9c;
    font-weight: 800;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(12,44,86,.08);
}
.user-chip .fw-semibold { font-size: 13px; font-weight: 700 !important; color: var(--ip-navy); }
.user-chip .text-muted.small { font-size: 11.5px !important; font-weight: 500; color: var(--ip-muted) !important; margin-top: 2px; }

/* ============ Dashboard ============ */
.welcome-banner {
    background: linear-gradient(100deg,#14328f 0%, #2f74d0 60%, #4a92e8 100%);
    color: #fff; border-radius: 1rem; padding: 1.75rem 2rem;
}
.welcome-banner h2 { font-weight: 700; }
.stat-tile { border-radius: .9rem; border: 1px solid var(--ip-border); }
.stat-ico { width: 46px; height: 46px; border-radius: .7rem; display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; }
.stat-value { font-size: 1.9rem; font-weight: 700; color: var(--ip-navy); }
.trend-up { color: #16a34a; background: #dcfce7; border-radius: 1rem; padding: .1rem .5rem; font-size: .75rem; font-weight:600; }
.trend-warn { color: #b45309; background: #fef3c7; border-radius: 1rem; padding: .1rem .5rem; font-size: .75rem; font-weight:600; }

/* Rank badge for top-cards list */
.rank-badge {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ip-blue-light); color: var(--ip-blue);
    font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}


/* ============ Styled grid (dashboard "Transaksi Terbaru" & similar) ============ */
/* Applied to the static .ip-grid AND to every DataTables grid across all pages. */
.ip-grid thead,
table.dataTable thead,
.ip-grid thead tr,
table.dataTable thead tr {
    background: #fff;
}
.ip-grid thead th,
table.dataTable thead th {
    color: #0a63c9;
    font-weight: 700;
    border-bottom: 1px solid var(--ip-border);
    padding: .75rem 1rem;
    white-space: nowrap;
    background: #fff;
}
.ip-grid tbody td,
table.dataTable tbody td { padding: .7rem 1rem; border-bottom: 1px solid #f1f4f9; }
.ip-grid tbody tr:nth-child(even),
table.dataTable tbody tr:nth-child(even) { background: #fafbfe; }
.ip-grid tbody tr:hover,
table.dataTable tbody tr:hover { background: #eaf3fe; }

/* DataTables toolbar (search box, length select, paging) to match theme */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--ip-border);
    border-radius: .5rem;
    padding: .3rem .6rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--ip-grad) !important;
    color: #fff !important;
    border: none !important;
    border-radius: .4rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: .4rem;
}

/* Product badges by official Pertamina fuel colours */
.badge-pertalite      { background: #dcfce7; color: #15803d; } /* Pertalite RON 90 - Hijau */
.badge-pertamax       { background: #dbeafe; color: #1d4ed8; } /* Pertamax RON 92 - Biru */
.badge-pertamax-turbo { background: #fee2e2; color: #dc2626; } /* Pertamax Turbo RON 98 - Merah */
.badge-pertamax-green { background: #ede9fe; color: #7c3aed; } /* Pertamax Green 95 - Ungu */
.badge-biosolar       { background: #eef1f6; color: #475569; } /* Bio Solar Subsidi - Abu */
.badge-dexlite        { background: #d1fae5; color: #065f46; } /* Dexlite CN 51 - Hijau Tua */
.badge-pertamina-dex  { background: #ecfccb; color: #4d7c0f; } /* Pertamina Dex CN 53 - Hijau Muda */
.badge-other          { background: #eef1f6; color: #475569; }


/* ============ Unified "Add / Tambah" button ============ */
.btn-add {
    background: var(--ip-grad);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: .6rem;
    padding: .5rem 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    box-shadow: 0 6px 16px rgba(20, 50, 143, .22);
    white-space: nowrap;
}
.btn-add:hover, .btn-add:focus { color: #fff; opacity: .95; }
.btn-add i { font-size: 1rem; }


/* ============ Search bar (master data pages) ============ */
.search-bar .input-group-text,
.search-bar .form-control {
    border-color: var(--ip-border);
    padding-top: .6rem; padding-bottom: .6rem;
    background: var(--bs-body-bg);
}
.search-bar .input-group-text { border-radius: .6rem 0 0 .6rem; }
.search-bar .form-control { border-radius: 0 .6rem .6rem 0; box-shadow: none; }
.search-bar .form-control:focus { border-color: var(--ip-blue); }

/* ============ Toolbar reusable ============ */
.search-toolbar {
    gap: 10px !important;
    margin-bottom: 15px !important;
    align-items: center;
}
.search-toolbar .search-bar {
    position: relative;
}
.search-toolbar .search-bar .input-group-text {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    padding: 0;
    border: 0;
    background: transparent;
    color: #73859f;
    line-height: 1;
}
.search-toolbar .search-bar .form-control {
    height: 43px;
    width: 100%;
    border: 1px solid #d8e1ef;
    /* Bootstrap's .input-group rule (specificity 0,7,0) squares the left corners
       and shifts the field by -1px, so it must be overridden explicitly. */
    border-radius: 11px !important;
    margin-left: 0 !important;
    padding: 0 14px 0 38px;
    font-size: 13px;
    background: #fff;
    box-shadow: none;
}
.ip-filter-btn.btn,
.search-toolbar .btn-add-proto {
    height: 43px;
    border-radius: 11px;
    padding: 0 16px;
    font-size: 12.5px;
    font-weight: 700;
}
/* Reusable Filter button (any page using IpFilter) — same look everywhere. */
.ip-filter-btn.btn {
    border-color: #e6edf6;
    color: #4a6280;
    background: #fff;
}
.ip-filter-btn.btn:hover,
.ip-filter-btn.btn:focus {
    border-color: #e6edf6;
    color: #4a6280;
    background: #f5f9fe;
}

/* Reusable Add button variant (prototype style)
   Pakai class ini agar tidak perlu CSS per-page berbasis ID. */
.btn-add-proto {
    min-width: 170px;
    height: 43px;
    padding: 0 20px;
    border-radius: 11px;
    border: 1px solid #277DE0;
    background: linear-gradient(180deg, #277DE0, #0450AB);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    gap: 8px;
    box-shadow: none;
}
.btn-add-proto:hover,
.btn-add-proto:focus {
    background: #0F54A4;
    border-color: #0F54A4;
    color: #fff;
    opacity: 1;
}
.btn-add-proto i {
    width: 16px;
    height: 16px;
    border: 1.8px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
}
/* ---- Reusable prototype grid skin (CSS only, no function/column coupling) ---- */
.grid-proto-card {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(12,44,86,.07);
    background: #fff;
}
.grid-proto-card .card-body { padding: 0; }
.grid-proto-card .table-responsive { overflow: auto; }
.grid-proto {
    min-width: 940px;
    margin: 0 !important;
}
.grid-proto.dataTable thead th { position: relative; }
.grid-proto.dataTable thead th span.dt-column-order {
    position: static;
    display: inline-block;
    width: auto;
    margin-left: 6px;
    opacity: .5;
}
.grid-proto.dataTable thead th.dt-orderable-asc,
.grid-proto.dataTable thead th.dt-orderable-desc { padding-right: 16px !important; }
.grid-proto.table.dataTable thead th,
.grid-proto.dataTable thead th {
    text-align: left;
    color: #0a63c9;
    font-size: 12px;
    font-weight: 700;
    padding: 17px 16px;
    border-bottom: 1px solid #e5edf8;
    background: #fff;
    white-space: nowrap;
}
.grid-proto.table.dataTable tbody td,
.grid-proto.dataTable tbody td {
    padding: 17px 16px;
    font-size: 12px;
    border-bottom: 1px solid #edf2fa;
    background: transparent;
    box-shadow: none;
}
.grid-proto.table.dataTable tbody tr,
.grid-proto.dataTable tbody tr { background: #fff; }
.grid-proto.table.dataTable tbody tr:nth-child(even),
.grid-proto.dataTable tbody tr:nth-child(even) { background: #f7f7f7; }
.grid-proto.table.dataTable.table-hover > tbody > tr:hover > *,
.grid-proto.table.dataTable.table-hover > tbody > tr.selected:hover > * {
    box-shadow: none;
    background: transparent;
}
.grid-proto.table.dataTable tbody tr:hover,
.grid-proto.dataTable tbody tr:hover { background: #eaf3fe; }
.grid-proto-card .grid-proto-foot {
    padding: 15px 20px;
    border-top: 1px solid #edf2fa;
    margin: 0;
}
.grid-proto-card .grid-proto-page-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #4a6280;
    white-space: nowrap;
    margin-right: 4px;
}
.grid-proto-card .dt-info {
    font-size: 11.5px;
    color: #6f8198;
    padding: 0;
    margin: 0;
}
.grid-proto-card .grid-proto-pager {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.grid-proto-card .grid-proto-pager-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #d8e1ef;
    background: #fff;
    color: #5f728d;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 13px;
    cursor: pointer;
}
.grid-proto-card .grid-proto-pager-btn.is-last {
    border: 0;
    color: #fff;
    background: linear-gradient(180deg,#277DE0,#0450AB);
}
.grid-proto-card .grid-proto-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.grid-proto-card .grid-proto-length {
    height: 32px;
    border: 1px solid #d8e1ef;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    color: #132b46;
    padding: 0 8px;
    min-width: 56px;
}
.grid-proto-card .dt-length { margin: 0; padding: 0; }
.grid-proto-card .dt-length label { display: none; }
.grid-proto-card .dt-length select {
    min-width: 56px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #d8e1ef;
    font-size: 12px;
    padding: 0 8px;
}
.grid-proto-card .dt-paging { margin: 0; padding: 0; }
.grid-proto-card .dt-paging .pagination { margin: 0; gap: 4px; }
.grid-proto-card .dt-paging .page-link {
    border-radius: 8px;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e1ef;
    color: #5f728d;
    background: #fff;
    font-size: 12px;
    padding: 0 8px;
}
.grid-proto-card .dt-paging .page-item.active .page-link {
    background: linear-gradient(180deg,#277DE0,#0450AB);
    border-color: transparent;
    color: #fff;
}
.grid-proto-card .dt-paging .page-item.disabled .page-link {
    color: #b3c0d1;
    background: #fff;
}
.grid-proto-card .dataTables_wrapper .dataTables_paginate,
.grid-proto-card .dataTables_wrapper .dataTables_info,
.grid-proto-card .dataTables_wrapper .dataTables_length {
    display: none !important;
}
.grid-proto-card .grid-proto-page-input {
    box-sizing: border-box;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    height: 32px;
    text-align: center;
    border: 1px solid #d8e1ef;
    border-radius: 8px;
    background: #f7faff;
    font-size: 12px;
    font-weight: 700;
    color: #132b46;
    outline: 0;
    padding: 0 6px;
}
.grid-proto-card .grid-proto-page-input:focus {
    border-color: #91b7e6;
    box-shadow: 0 0 0 2px rgba(39,125,224,.12);
}
.grid-proto-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.grid-proto-action-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e1ef;
    border-radius: 8px;
    background: #fff;
    color: #4a6280;
    text-decoration: none;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.grid-proto-action-btn i { font-size: 15px; }
.grid-proto-action-btn svg { width: 17px; height: 16px; flex: none; }
.grid-proto-action-btn:hover,
.grid-proto-action-btn:focus {
    background: #eaf3fe;
    border-color: #bfd4ee;
    color: #0a63c9;
}
.grid-proto-action-btn.grid-proto-action-btn--view { color: #4a6280; }
.grid-proto-action-btn.grid-proto-action-btn--edit { color: #0a63c9; }
.grid-proto-action-btn.grid-proto-action-btn--key { color: #4a6280; }
.grid-proto-action-btn.grid-proto-action-btn--del { color: #c0455b; }
.grid-proto-action-btn.grid-proto-action-btn--del:hover,
.grid-proto-action-btn.grid-proto-action-btn--del:focus {
    background: #fdeaea;
    border-color: #f2c2c8;
    color: #c62828;
}
.grid-proto-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.grid-proto-status-pill.active { background: #e3f6ec; color: #1f9254; }
.grid-proto-status-pill.blocked { background: #fde7e7; color: #d33a3a; }

/* Per-column text treatment, matching the prototype table */
.grid-proto tbody td.grid-proto-cell-no,
.grid-proto tbody td.grid-proto-cell-muted { color: #7c8ea5; }
.grid-proto tbody td.grid-proto-cell-id { color: #0a63c9; font-weight: 600; }
.grid-proto tbody td.grid-proto-cell-name { color: var(--ip-navy); font-weight: 500; }
.grid-proto .grid-proto-cell-muted { color: #7c8ea5; }

/* ---- Expandable master-detail (Pelanggan → Account) ---- */
.grid-proto td.cust-cell-expand { cursor: pointer; width: 44px; text-align: center; }
.cust-expand-btn {
    width: 26px;
    height: 26px;
    border: 1px solid #d8e1ef;
    border-radius: 7px;
    background: #fff;
    color: #4a6280;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
tr.shown .cust-expand-btn {
    background: linear-gradient(180deg,#277DE0,#0450AB);
    border-color: transparent;
    color: #fff;
}
.cust-detail { background: #f7faff; }
.cust-detail-head { color: #132b46; }
/* Smaller "+ Account" button for the detail panel header (overrides btn-add-proto min-width). */
.btn-add-proto.btn-add-sm {
    min-width: 0;
    height: 34px;
    padding: 0 14px;
    font-size: 12px;
    border-radius: 9px;
}
.cust-account-grid { margin: 0; background: #fff; border-radius: 10px; overflow: hidden; }
.cust-account-grid thead th {
    background: #eef4fc;
    color: #0a63c9;
    font-size: 11px;
    font-weight: 700;
    padding: 10px 12px;
    white-space: nowrap;
}
.cust-account-grid tbody td {
    padding: 10px 12px;
    font-size: 12px;
    border-bottom: 1px solid #eef2fa;
}
.cust-account-grid .cust-acc-id { color: #0a63c9; font-weight: 700; }


/* ============ Detail View modal (prototype parity) ============ */
.ip-entity-view .modal-dialog {
    max-width: 430px;
}
.ip-entity-view .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(12,34,62,.34);
    overflow: hidden;
}
.ip-entity-view .modal-header {
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 26px 16px;
    border-bottom: 1px solid #e6edf6;
}
.ip-entity-view .modal-heading { min-width: 0; }
.ip-entity-view .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #132b46;
    line-height: 1.25;
}
.ip-entity-view .modal-subtitle {
    margin: 5px 0 0;
    font-size: 11.5px;
    font-weight: 500;
    color: #7c8ea5;
    line-height: 1.4;
}
.ip-entity-view .btn-close {
    margin: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    opacity: .65;
}
.ip-entity-view .modal-body { padding: 20px 26px 22px; }
.ip-entity-view .entity-view-card {
    border: 1px solid #e6edf6;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.ip-entity-view .entity-view-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 16px;
    border-bottom: 1px solid #eef3f9;
}
.ip-entity-view .entity-view-row:last-child { border-bottom: 0; }
.ip-entity-view .entity-view-row-status {
    align-items: center;
    background: #f7fafd;
    padding: 14px 16px;
}
.ip-entity-view .entity-view-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #7c8ea5;
}
.ip-entity-view .entity-view-value {
    font-size: 13px;
    font-weight: 600;
    color: #132b46;
    text-align: right;
    word-break: break-word;
}
.ip-entity-view .entity-view-value-id {
    font-weight: 700;
    color: #0a63c9;
}
.ip-entity-view .entity-view-value-muted {
    font-weight: 500;
    color: #4a6280;
}
.ip-entity-view .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 26px;
    border-top: 1px solid #e6edf6;
    background: #f7fafd;
}
.ip-entity-view .modal-footer .btn-cancel {
    min-height: 40px;
    border-color: #dbe5f0;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #4a6280;
    background: #fff;
}
.ip-entity-view .grid-proto-status-pill {
    font-size: 10.5px;
    padding: 5px 11px;
}

/* ============ Dialog / modal ============ */
/* Shared by the add-user and reset-password dialogs so both look identical. */
.ip-modal .modal-dialog { max-width: 480px; }
.ip-modal .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(12,34,62,.34);
    overflow: hidden;
}
.ip-modal .modal-header {
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 26px 16px;
    border-bottom: 1px solid #e6edf6;
}
.ip-modal .modal-heading { min-width: 0; }
.ip-modal .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #132b46;
    line-height: 1.25;
}
.ip-modal .modal-subtitle {
    margin: 6px 0 0;
    font-size: 11.5px;
    font-weight: 500;
    color: #7c8ea5;
    line-height: 1.5;
}
.ip-modal .btn-close {
    margin: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    flex: none;
    align-self: flex-start;
    opacity: .65;
}
.ip-modal .btn-close:hover { opacity: .9; }
.ip-modal .modal-body {
    padding: 22px 26px;
    max-height: 64vh;
    overflow: auto;
}
.ip-modal .form-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #4a6280;
    margin-bottom: 7px;
}
.ip-modal .form-control,
.ip-modal .form-select {
    height: 46px;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    padding: 0 13px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: #132b46;
}
.ip-entity-form .form-control,
.ip-entity-form .form-select {
    box-shadow: none;
}
.ip-entity-form .form-control:focus,
.ip-entity-form .form-select:focus {
    border-color: #9ebfe6;
    box-shadow: 0 0 0 2px rgba(39,125,224,.10);
}
.ip-modal .form-control:disabled,
.ip-modal .form-control[readonly] {
    background: #f7fafd;
    border-color: #e6edf6;
    color: #7c8ea5;
    font-weight: 700;
}
.ip-modal .form-control::placeholder { color: #9aacc2; }
.ip-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 15px 26px;
    gap: 10px;
    border-top: 1px solid #e6edf6;
    background: #f7fafd;
}
.ip-entity-form .modal-heading {
    min-height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.ip-entity-form .modal-title {
    margin: 0;
}
.ip-entity-form .modal-subtitle {
    margin-top: 6px;
    max-width: 380px;
}
.ip-entity-form .modal-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.ip-entity-form .modal-body .mb-3 {
    margin-bottom: 0 !important;
}
.ip-entity-form .modal-body .form-hint {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    color: #7c8ea5;
}
.ip-entity-form #f_msg {
    margin-top: -2px;
}
.ip-entity-form #f_msg .alert {
    margin: 0;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.45;
    padding: 10px 12px !important;
}
.ip-entity-form .modal-footer .btn-cancel,
.ip-entity-form .modal-footer .btn-add {
    height: 42px;
    min-height: 42px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
}
.ip-entity-form .modal-footer .btn-cancel {
    border: 1px solid #dbe5f0;
    background: #fff;
    color: #4a6280;
}
.ip-entity-form .modal-footer .btn-cancel:hover,
.ip-entity-form .modal-footer .btn-cancel:focus {
    background: #f2f6fb;
    color: #4a6280;
}
.ip-entity-form .modal-footer .btn-add {
    border: 0;
    padding: 0 22px;
    background: linear-gradient(180deg, #277DE0, #0450AB);
}
.ip-entity-form .modal-footer .btn-add:hover,
.ip-entity-form .modal-footer .btn-add:focus {
    background: linear-gradient(180deg, #277DE0, #0450AB);
    filter: brightness(1.06);
    opacity: 1;
}
/* Cancel: quiet outlined button; Save: reuses the app's gradient .btn-add */
.ip-modal .btn-cancel,
.ip-confirm .btn-cancel {
    min-width: 110px;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid #d8e2ee;
    background: #fff;
    color: #4a6280;
    font-weight: 600;
}
.ip-modal .btn-cancel:hover,
.ip-confirm .btn-cancel:hover {
    background: var(--ip-blue-light);
    color: var(--ip-navy);
}
.ip-modal .btn-add,
.ip-confirm .btn-add {
    min-height: 44px;
    border-radius: 10px;
    padding: 0 22px;
}

/* ---- Confirmation dialog (built by IpConfirm in site.js) ---- */
/* Sits above a form dialog (Bootstrap modal z-index is 1055). */
.ip-confirm { z-index: 1080; }
.ip-confirm .modal-dialog { max-width: 420px; }
.ip-confirm .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(12,34,62,.24);
}
.ip-confirm .modal-body {
    padding: 32px 28px 6px;
    text-align: center;
}
.ip-confirm-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fdf1dc;
    color: #e08b1e;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ip-confirm-title {
    margin: 0 0 9px;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ip-navy);
}
.ip-confirm-text {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ip-muted);
    line-height: 1.5;
}
.ip-confirm-foot {
    justify-content: center;
    gap: 12px;
    padding: 20px 28px 26px;
    border-top: 0;
}

/* ---- Reusable success/info popup ---- */
.ip-notice { z-index: 1075; }
.ip-notice-dialog {
    width: 380px;
    max-width: calc(100vw - 40px);
}
.ip-notice .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(12,34,62,.34);
    overflow: hidden;
}
.ip-notice .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 34px 28px 32px;
}
.ip-notice-icon {
    width: 66px;
    height: 66px;
    margin: 0;
    border-radius: 50%;
    background: #e6f7ed;
    color: #00803a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ip-notice-title {
    margin: 16px 0 0;
    font-size: 16.5px;
    font-weight: 700;
    color: #132b46;
}
.ip-notice-text {
    margin: 8px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #7c8ea5;
    line-height: 1.55;
}

.ip-modal .form-hint {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    color: #7c8ea5;
}


/* ---- Password show/hide (eye) button, added by IpPasswordToggle ---- */
.ip-password-wrap { position: relative; }
.ip-password-wrap .form-control { padding-right: 44px; }
/* Hide the browser's own password reveal / autofill buttons so only our custom
   eye is shown — Edge and Chromium render ::-ms-reveal, Safari the WebKit ones. */
.ip-password-wrap .form-control::-ms-reveal,
.ip-password-wrap .form-control::-ms-clear {
    display: none;
}
.ip-password-wrap .form-control::-webkit-credentials-auto-fill-button,
.ip-password-wrap .form-control::-webkit-strong-password-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}
.ip-password-eye {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #7c8ea5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}
.ip-password-eye:hover { background: var(--ip-blue-light); color: var(--ip-navy); }
.ip-password-eye i { font-size: 1.15rem; }


/* ============ Profile dropdown ============ */
.ip-profile-menu {
    width: 292px;
    padding: 0;
    border: 1px solid var(--ip-border);
    border-radius: 16px;
    box-shadow: 0 22px 54px rgba(12,34,62,.22);
    overflow: hidden;
}
.ip-profile-head {
    padding: 24px 22px 20px;
    text-align: center;
}
.ip-profile-avatar {
    width: 84px;
    height: 84px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 1px solid var(--ip-border);
    color: #7c8ea5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ip-profile-avatar i { font-size: 2.9rem; line-height: 1; }
.ip-profile-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ip-navy);
}
.ip-profile-role,
.ip-profile-user {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ip-muted);
    margin-top: 4px;
    word-break: break-all;
}
.ip-profile-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 22px;
    border-top: 1px solid var(--ip-border);
    color: var(--ip-navy);
    font-size: 1.12rem;
    font-weight: 600;
    text-decoration: none;
}
.ip-profile-item i { font-size: 1.25rem; color: var(--ip-blue); }
.ip-profile-item:hover { background: var(--ip-blue-light); color: var(--ip-navy); }
.ip-profile-foot {
    padding: 16px 20px 20px;
    border-top: 1px solid var(--ip-border);
}
.ip-profile-logout {
    width: 100%;
    height: 50px;
    min-height: 50px;
    justify-content: center;
    border: 0;
    border-radius: 26px;
    background: linear-gradient(180deg, #277DE0, #0450AB);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: none;
}
.ip-profile-logout:hover,
.ip-profile-logout:focus,
.ip-profile-logout:active,
.ip-profile-logout:visited {
    color: #fff;
    text-decoration: none !important;
    filter: brightness(1.06);
}

/* ============ Change Password page (prototype alignment) ============ */
.cp-wrap {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 18px;
    align-items: start;
    max-width: 940px;
}
.cp-card {
    background: #fff;
    border: 1px solid var(--ip-border);
    border-radius: 16px;
    padding: 23px 25px;
    box-shadow: none;
}
.cp-rule {
    background: #f2f7fd;
    border: 1px dashed #cfe0f3;
    border-radius: 16px;
    padding: 19px 21px;
    box-shadow: none;
}
.cp-card-head {
    padding: 0;
    border: 0;
}
.cp-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ip-navy);
}
.cp-card-subtitle {
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ip-muted);
}
.cp-card-body { padding: 0; }
.cp-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}
.cp-label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: #4a6280;
}
.cp-label .form-control {
    height: 44px;
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    padding: 0 13px;
    font-size: 13px;
    background: #fff;
}
.cp-action {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.cp-submit,
.cp-clear {
    height: 44px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    padding: 0 24px;
}
.cp-submit {
    border: 0;
    background: linear-gradient(90deg,#0a4d9c,#1273d4);
    color: #fff;
}
.cp-clear {
    border: 1px solid var(--ip-border);
    background: #fff;
    color: #4a6280;
    padding: 0 20px;
}
.cp-rule-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ip-navy);
}
.cp-rule-list {
    margin: 10px 0 0;
    padding-left: 17px;
    font-size: 11.5px;
    font-weight: 500;
    color: #4a6280;
    line-height: 1.8;
}
.cp-rule-list li + li { margin-top: 0; }

@media (max-width: 991.98px) {
    .cp-wrap {
        grid-template-columns: 1fr;
    }
}



/* ============================================================
   IpFilter — reusable Filter dropdown popover + active chips.
   Matches the prototype (Account/Member) filter pattern.
   Built by window.IpFilter in site.js.
   ============================================================ */
.ip-filter-anchor {
    position: relative;
    display: inline-flex;
}
.ip-filter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.ip-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 2px;
    border-radius: 20px;
    background: #e02020;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* ---- Popover ---- */
.ip-filter-pop {
    position: absolute;
    right: 0;
    top: 50px;
    width: 300px;
    background: #fff;
    border: 1px solid #e6edf6;
    border-radius: 14px;
    box-shadow: 0 24px 54px rgba(12, 34, 62, .22);
    z-index: 1050;
}
.ip-filter-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 17px 12px;
}
.ip-filter-pop-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #132b46;
}
.ip-filter-pop-close {
    border: 0;
    background: transparent;
    color: #7c8ea5;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.ip-filter-pop-body {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 0 17px 4px;
    max-height: 320px;
    overflow: auto;
}
.ip-filter-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}
.ip-filter-field-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #4a6280;
}
.ip-filter-select.form-select {
    height: 42px;
    border: 1px solid #e6edf6;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    background-color: #ffffff;
    color: #132b46;
}
.ip-filter-daterange {
    display: flex;
    gap: 8px;
}
.ip-filter-date.form-control {
    height: 42px;
    flex: 1;
    min-width: 0;
    border: 1px solid #e6edf6;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    background-color: #ffffff;
    color: #132b46;
}
.ip-filter-pop-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 17px;
    margin-top: 10px;
    border-top: 1px solid #e6edf6;
}
.ip-filter-reset {
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: #4a6280;
    cursor: pointer;
    padding: 6px 2px;
}
.ip-filter-reset:hover {
    color: #132b46;
}
.ip-filter-apply.btn-add {
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 10px 20px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    background: linear-gradient(90deg, #0a4d9c, #1273d4);
}
.ip-filter-apply.btn-add:hover,
.ip-filter-apply.btn-add:focus {
    background: linear-gradient(90deg, #0a4d9c, #1273d4);
    filter: brightness(1.06);
    opacity: 1;
}

/* ---- Active-filter chips row ---- */
.ip-filter-chips {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: -4px;
    margin-bottom: 15px;
}
.ip-filter-chips-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #7c8ea5;
    flex: none;
}
.ip-filter-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 32px;
    border: 1px solid #e6edf6;
    border-radius: 20px;
    background: #fff;
    padding: 0 6px 0 13px;
}
.ip-filter-chip-label {
    font-size: 11.5px;
    font-weight: 500;
    color: #7c8ea5;
}
.ip-filter-chip-value {
    font-size: 11.5px;
    font-weight: 600;
    color: #132b46;
}
.ip-filter-chip-x {
    width: 20px;
    height: 20px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #7c8ea5;
    cursor: pointer;
}
.ip-filter-chip-x:hover {
    background: #f2f6fb;
}
.ip-filter-clear-all {
    border: 0;
    background: transparent;
    font-size: 11.5px;
    font-weight: 700;
    color: #0a63c9;
    cursor: pointer;
    text-decoration: underline;
    padding: 6px 2px;
}


/* Set Limit actions stay compact in the modal footer. */
.ip-modal .modal-footer .btn-limit-apply {
    width: auto;
    min-width: 140px;
    flex: 0 0 auto;
}


/* Keep Set Limit modal actions compact and visible side by side. */
.limit-modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
}
.limit-modal-footer .btn-limit-cancel,
.limit-modal-footer .btn-limit-apply {
    width: auto !important;
    min-width: 140px !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
}
.limit-modal-footer .btn-limit-apply {
    padding: 0 22px !important;
}


/* Customer grid expand/collapse controls in the first header column. */
.customer-expand-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.customer-expand-header-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--ip-border);
    border-radius: 7px;
    background: #fff;
    color: var(--ip-blue);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.customer-expand-header-btn:hover,
.customer-expand-header-btn:focus {
    background: #eef5ff;
    border-color: var(--ip-blue);
}


/* ---- Reusable searchable dropdown ---- */
.ip-search-dropdown { position: relative; }
.ip-search-dropdown-button { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ip-search-dropdown-label.text-muted { color: #7c8ea5 !important; }
.ip-search-dropdown-menu { display: none; position: absolute; z-index: 1050; top: calc(100% + 4px); left: 0; width: 100%; padding: 8px; border: 1px solid #d8e2ef; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(12,44,86,.14); }
.ip-search-dropdown.open .ip-search-dropdown-menu { display: block; }
.ip-search-dropdown-search { height: 30px; font-size: .75rem; margin-bottom: 6px; }
.ip-search-dropdown-options { max-height: 240px; overflow-y: auto; }
.ip-search-dropdown-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: #263b55; text-align: left; font-size: .8rem; cursor: pointer; }
.ip-search-dropdown-option:hover { background: #eef5fd; }
.ip-search-dropdown-option .form-check-input { margin: 0; }
.ip-search-dropdown-empty { padding: 10px; color: #7c8ea5; font-size: .75rem; }

.ip-search-dropdown-option-text { min-width: 0; display: block; }
.ip-search-dropdown-option-text > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-search-dropdown-option-text small { display: block; margin-top: 2px; color: #7c8ea5; font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-search-dropdown-option--two-line { align-items: flex-start; }

.card-modal-account { margin-top: 4px; color: #526b88; font-weight: 600; }
.card-modal-account .req { color: #c62828; }