/**
 * MUTU Master UI/UX — Components
 * ----------------------------------------------------------------
 * Cards, buttons, badges (text-bg-*-level), tables, pagination,
 * filters, modals, tabs, date-range picker, accordion. This is the
 * bulk of the reusable design language - see docs/COMPONENTS.md for
 * a catalog with markup snippets for every pattern in here.
 *
 * A few blocks near the bottom (.PIC, .customer-info, .customer-avatar,
 * .ar-customer-name-toggle) are domain examples from the source app,
 * not generic chrome - treat them as patterns to copy, not core CSS.
 *
 * Load order: Bootstrap 5 CSS -> mutu-tokens.css -> mutu-theme.css ->
 * mutu-components.css -> your own page CSS (if any).
 */

/* app-wide default icon size — 16px, everywhere except the Sidebar (nav +
   flyout + tooltip) and the Action Button component, which set their own
   smaller size via more specific selectors that win regardless of order. */
svg {
    width: 16px;
    height: 16px;
}

i.bi {
    font-size: 16px;
    line-height: 1;
}

i.bi {
    font-size: 16px;
}

.btn.btn-outline-primary:hover {
    background-color: #0B458F;
    color: #f7f0f0;
}

.btn.btn-outline-primary {
    border-color: #0A3E7F;
    color: #fff;
    background-color: var(--mutu-brand-blue, #0C4D9F);
    border-radius: 8px;
    font-size: 12px;
    padding: 8px 12px 8px 12px;
}


.btn.btn-outline-primary:active {
    border-color: #0A3E7F;
}

.btn.btn-outline-icon-primary {
    border-color: #DDDDDD;
    color: #000000;
    border-radius: 8px;
    padding: 4px;
}


.btn.btn-outline-icon-primary:active {
    background-color: var(--mutu-brand-blue-alt, #0B4EA1);
    color: #fff;
}

.btn-icon {
    padding: 4px;
}

.btn.btn-outline-secondary:hover {
    /* Cancel/Return: brand red on hover (blue = proceed/save, red = cancel). */
    background-color: var(--mutu-brand-red, #FF383C);
    border-color: var(--mutu-brand-red, #FF383C);
    color: #fff;
}

/* Action buttons (Add ..., Download ...) carry .btn-custom and are not
   cancel/return, so they keep the blue hover. .btn-hover-blue does the same
   for outline buttons that are not .btn-custom-shaped (Save Draft, Upload,
   Schedule, filter toggles, ...). */
.btn.btn-outline-secondary.btn-custom:hover,
.btn.btn-outline-secondary.btn-hover-blue:hover {
    background-color: var(--mutu-brand-blue-alt, #0B4EA1);
    border-color: var(--mutu-brand-blue-alt, #0B4EA1);
    color: #E8F5FC;
}

.btn.btn-outline-cancel,
.btn.btn-outline-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;

 

    padding: 8px 12px;
    font-size: 12px;
    line-height: 1;
    border-radius: 6px;
}


.btn.btn-outline-cancel {
    border-color: #DFDFDF;
    color: #000000;
    background-color: #fff;
}


.btn.btn-outline-secondary {
    border-color: #B3C8E2;
    color: var(--mutu-brand-blue-alt, #0B4EA1);
    background-color: #E7EDF6;
}
.btn.btn-outline-secondary i.bi {
    font-size: 16px;
    line-height: 1;
}

.btn.btn-outline-secondary:active {
    border-color: #E8F5FC;
}

.btn.btn-outline-success:hover {
    background-color: #D7EFE2;
    color: #3BBA75;

}

.btn.btn-outline-success {
    border-color: #D7EFE2;
    color: #3BBA75;
}

.btn.btn-outline-success:active {
    border-color: #D7EFE2;
}

.btn.btn-outline-danger:hover {
    background-color: #FFD7DC;
    color: var(--mutu-brand-red, #FF383C);

}

.btn.btn-outline-danger {
    border-color: #FFD7DC;
    color: var(--mutu-brand-red, #FF383C);
}

.btn.btn-outline-danger:active {
    border-color: #FFD7DC;
}

.btn.btn-outline-warning:hover {
    background-color: #FEE6C9;
    color: #FF8D28;

}

.btn.btn-outline-warning {
    border-color: #FEE6C9;
    color: #FF8D28;
    padding: 8px 8px 8px 8px;
}

.btn.btn-outline-warning:active {
    border-color: #FEE6C9;
}

.btn.btn-outline-info:hover {
    background-color: #CBE6FF;
    color: #0088FF;

}

.btn.btn-outline-info {
    border-color: #CBE6FF;
    color: #0088FF;
}

.btn.btn-outline-info:active {
    border-color: #CBE6FF;
}

.btn.btn-outline-light:hover {
    background-color: #DDDDDD;
    color: #2B2B2B;

}

.btn.btn-outline-light {
    border-color: #DDDDDD;
    color: #2B2B2B;
}

.btn.btn-outline-light:active {
    border-color: #DDDDDD;
}


.btn.btn-outline-dark:hover {
    background-color: #CED4DA;
    color: #2B2B2B;

}

.btn.btn-outline-dark {
    border-color: #CED4DA;
}

.btn.btn-outline-dark:active {
    border-color: #CED4DA;
}

.btn.btn-outline-cancel:hover {
    background-color: #F7F7F7;
    color: var(--mutu-brand-red, #FF383C);
    border-color: #DFDFDF !important;
}



.btn-close {
    width: 16px;
    height: 16px;
    padding: 8px;
    border-radius: 8px;
    transition: all .2s ease;
}

.btn-close:hover {
    background-color: #F3F6FA;
    transform: rotate(90deg);
}

.btn-close:focus {
    box-shadow: none;
}

/* Status Badge — one shared size/shape for every status badge in the app
   (both the plain text-bg-* set and the bordered text-bg-*-level set).
   Colors stay per-variant (already soft); only size is unified here.
   Excludes text-bg-primary-icon, which is a decorative icon chip, not a
   status label. */
.badge[class*="text-bg-"]:not(.text-bg-primary-icon) {
    padding: 3.5px 6.5px !important;
    font-size: 10px !important;
    line-height: 1.4;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 19px;
    box-sizing: border-box;
}

/* icons inside a status badge must scale down to fit the 19px badge height
   — the global 16px icon default is sized for full-size UI icons, not a
   glyph sitting inside a compact pill label. */
.badge[class*="text-bg-"]:not(.text-bg-primary-icon) svg,
.badge[class*="text-bg-"]:not(.text-bg-primary-icon) i.bi {
    width: 10px;
    height: 10px;
    font-size: 10px;
    flex-shrink: 0;
}

.badge.text-bg-primary {
    background-color: #E7EDF6 !important;
    color: var(--mutu-brand-blue-alt, #0B4EA1) !important;
    font-weight: normal !important;
}

.badge.text-bg-secondary {
    background-color: #E8F5FC !important;
    color: #000000 !important;
    font-weight: normal !important;

}

.badge.text-bg-success {
    background-color: #D7EFE2 !important;
    color: #3BBA75 !important;
    font-weight: normal !important;
}

.badge.text-bg-danger {
    background-color: #FFD7DC !important;
    color: var(--mutu-brand-red, #FF383C) !important;
    font-weight: normal !important;
}

.badge.text-bg-warning {
    background-color: #FEE6C9 !important;
    color: #FF8D28 !important;
    font-weight: normal !important;

}

.badge.text-bg-info {
    background-color: #CBE6FF !important;
    color: #0088FF !important;
    font-weight: normal !important;
}

.badge.text-bg-light {
    background-color: #DDDDDD !important;
    color: #2B2B2B !important;
    font-weight: normal !important;
}

.badge.text-bg-dark {
    background-color: #CED4DA !important;
    color: #2B2B2B !important;
    font-weight: normal !important;
}

.btn.btn-primary {
    background-color: #D4ECFD;
    color: var(--mutu-ink, #0A2D48);
    /* Was `border: #D4ECFD` - an INVALID border shorthand (a shorthand
       needs width+style+color, not a bare color), so browsers either
       ignored it or fell back to a different computed border-width than
       .btn.btn-outline-secondary's valid `border-color`-only declaration -
       a subtle few-px height mismatch on top of the box-model gap below.
       border-color is the correct, valid property for "same border
       width/style as Bootstrap's default, just recoloured", matching how
       .btn.btn-outline-secondary already does it. */
    border-color: #D4ECFD;
    border-width: 1px;
    border-style: solid;
    /* Was missing this entire box model (unlike .btn.btn-outline-secondary
       just above), so every Save/Apply button fell back to Bootstrap's
       plain inline-block button box - visibly bigger/taller and
       disproportionate next to Cancel/outline buttons using the same size.
       Copied property-for-property from .btn.btn-outline-secondary so both
       compute the exact same height regardless of icon+text vs text-only
       content - Save and Cancel/Apply now only differ by colour, never by
       font/size/height, per explicit request. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 12px;
    padding: 8px 12px;
    line-height: 1;
    border-radius: 6px;
}

.btn.btn-primary:hover {
    /* Same as mutu-finance: Save/Submit turns brand blue on hover (and navy when
       pressed). Without this it fell back to Bootstrap's own off-palette
       .btn-primary:hover rule. Cancel/Return turn red - see .btn-outline-secondary. */
    background-color: var(--mutu-brand-blue-alt, #0B4EA1);
    border-color: var(--mutu-brand-blue-alt, #0B4EA1);
    color: #fff;
}

.btn.btn-primary:active {
    background-color: var(--mutu-ink, #0A2D48);
    border-color: var(--mutu-ink, #0A2D48);
    color: #fff;
}


/* Card CSS — same visual language as .container/.accordion (the app's
   content-card system): subtle shadow, thin light border, 12px radius. */
.card {
    border-radius: 12px;
    border-color: #dddd;
}

.card-title {
    margin-bottom: 8px;

}

.card-title h6 {
    font-size: medium;
    margin: 0px;
}

.icon-card {
    height: 32px;
    width: 32px;
    background-color: #3E8E62;
    border-radius: 100px;
    margin-right: 8px;
}

/* Amount box — used by the Assignment Letter Info (Lumpsum) and Request
   PUMD Info (Total Operational Cost Submission) pages. Same soft
   bordered-box language as .customer-info. */
.amount-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
    border: 1px solid #E9EEF5;
    border-radius: 12px;
    background: #F8FAFC;
}

.amount-box .amount-label {
    font-size: 12px;
    color: var(--mutu-text-muted, #667085);
    margin-bottom: 4px;
}

.amount-box .amount-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--mutu-ink, #0A2D48);
}

/* Stat card icon chip + trend label — used on the summary-stat row of
   Payment Term View, Invoice Detail, and Invoice Transaction (was
   duplicated identically in each page's own <style> block). */
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.stat-icon.blue {
    background: #D4ECFD;
    color: var(--mutu-brand-blue, #0C4D9F);
}

.stat-icon.green {
    background: #D7EFE2;
    color: #3BBA75;
}

.stat-icon.purple {
    background: #F3E2FB;
    color: #CB30E0;
}

.stat-icon.orange {
    background: #FEE6C9;
    color: #FF8D28;
}

.stat-trend {
    font-size: 11px;
    color: var(--mutu-text-muted, #667085);
}

.stat-trend .up {
    color: #3BBA75;
    font-weight: 600;
    margin-right: 4px;
}

/* Documentation page TOC sidebar + doc-content headings — used on Manual
   Book and AR System Blueprint (was duplicated identically in each page's
   own <style> block). .doc-diagram is only used on AR System Blueprint. */
.doc-toc a {
    display: block;
    padding: 4px 0;
    font-size: 12px;
    color: #344054;
    text-decoration: none;
}

.doc-toc a:hover {
    color: var(--mutu-brand-blue, #0C4D9F);
}

.doc-toc a.doc-toc-title {
    color: #3BBA75;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.doc-toc .lvl-2 {
    padding-left: 14px;
}

.doc-diagram {
    background: #F8F9FA;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #344054;
    white-space: pre-wrap;
    line-height: 1.6;
}

.doc-content h6.doc-h {
    color: var(--mutu-brand-blue, #0C4D9F);
    font-weight: 600;
    margin-top: 20px;
}

.doc-content h5.doc-title {
    color: var(--mutu-brand-blue, #0C4D9F);
    font-weight: 700;
}

.card-text {
    margin: 0;
}

.card-header {
    color: #fff;
    background-color: var(--mutu-brand-blue-alt, #0B4EA1);
}

/* Filter dan Add — inline-flex so the button always hugs its content
   width, regardless of whether its parent wrapper happens to be a flex
   container (some pages wrap it in d-flex, others in a plain block div
   like col-12 text-end — with display:flex this stretched full-width
   on the latter). */
.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    line-height: 1;
}

/* "Back to list" link is always the first thing in .main on View/Edit
   detail pages — make it its own block line (instead of flowing inline
   next to whatever inline-level element follows, e.g. the seg-tabs pill).
   Spacing to the next section comes from .main's gap, not its own margin. */
.main>.btn-custom:first-child {
    display: flex;
    width: fit-content;
}

.btn-custom i.bi {
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* SEARCH — single, shared search component used everywhere (header + table filters).
   Sized to exactly match .form-control/.form-select (the filter field standard):
   6px/12px padding, 1px border, 6px radius, 1.5 line-height, 12px font. */
.input-group {
    border: 1px solid #D0D5DD;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #fff;
}

/* the table-toolbar search box (Show N Entries + search, aligned right in
   its column) — was a repeated inline style="width: 25%; flex-grow: 1;" */
.table-search-group {
    width: 25%;
    flex-grow: 1;
}

/* required-field (*) marker — was a repeated inline style="color: red;"
   (kept the same literal red to avoid changing appearance while moving it) */
.required-marker {
    color: red;
}

/* shared modal corner radius — was a repeated inline style="border-radius:14px;" */
.modal-content {
    border-radius: 14px;
}

/* file-upload input-group trio (NPWP upload) — was repeated inline styles */
/* file-upload input-group trio (NPWP upload) — height/line-height/padding
   pinned to exactly match the standard 32px .form-control/.form-select
   height used everywhere else; .input-group's overflow:hidden was clipping
   these when they rendered taller than the group. */
.upload-choose-label {
    height: 32px;
    display: flex;
    align-items: center;
    line-height: 1;
    border-radius: 6px 0 0 6px;
    white-space: nowrap;
}

.upload-hidden-input {
    display: none;
}

.upload-placeholder-text {
    height: 32px;
    display: flex;
    align-items: center;
    line-height: 1;
    color: #6c757d;
}

/* External/Internal indicator (Disbursement Detail's Employee Name sub-line)
   — plain colored text, no badge/background, using existing design-system
   color tokens (info-blue / warning-yellow). */
.text-external,
.text-internal {
    font-size: 10px;
    font-weight: 600;
}

.text-external svg,
.text-external i.bi,
.text-internal svg,
.text-internal i.bi {
    width: 10px;
    height: 10px;
    font-size: 10px;
}

.text-external {
    color: #0088FF;
}

.text-internal {
    color: #FF8D28;
}



/* Box icon */
.input-group-text {
    background: transparent;
    border: none !important;
    padding: 6px 0 6px 12px;
    gap: 8px;
}

.input-group-text svg,
.input-group-text i.bi {
    width: 16px;
    height: 16px;
    font-size: 16px;
    flex-shrink: 0;
}

/* Input */
.form-search {
    border: none !important;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mutu-text-muted, #667085);
    padding: 6px 12px 6px 8px;
    /* placeholder tipis */

}

.input-group:hover {
    border-color: var(--mutu-ink, #0A2D48);

}

/* Remove blue highlight */
.form-search:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* show entries */
.custom-select {
    border-radius: 4px;
    border-color: #CED4DA;
    padding: 4px;
}

/* filter  */
.btn-group .btn-outline-primary:hover,
.btn-group .btn-outline-primary:focus,
.btn-group .btn-outline-primary:active,
.btn-group .btn-outline-primary.show {
    background-color: var(--mutu-brand-blue-alt, #0B4EA1);
    color: #fff;
    box-shadow: none;
    font-size: 12px;
    padding: 8px 12px 8px 12px;
}

.btn-group .dropdown-item:hover,
.btn-group .dropdown-item:focus {
    background-color: var(--mutu-brand-blue-alt, #0B4EA1);
    color: #ffff;
    border-radius: 6px;

}

.btn-group .dropdown-menu {
    padding: 6px;
}

/* Content Card — responsible only for its own contents (padding); spacing
   between cards comes entirely from .main's flex gap, never margin-top. */
.container {
    align-items: center;
    margin-left: auto;
    width: 100%;
    height: fit-content;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0px 4px 16px 0px rgba(8, 15, 54, 0.06);
    padding: 24px;
    border: 0.5px solid #F2F2F2;
}




.container-top {
    display: inline-flex;
    gap: 12px;
    position: relative;
    padding-bottom: 12px;
}

.container-center {
    padding: 0px 0px 12px 0px;

}


.container-table {
    overflow-x: auto;
    border-radius: 8px;
    margin-top: 16px;
}

.container-left {
    display: flex;
    gap: 12px;
    justify-content: end;
}

.table thead th {
    background-color: var(--mutu-brand-blue-alt, #0B4EA1);
    color: #fff;

}

/* tabel — one global standard for every table in the app: roomier
   horizontal padding so column text never crowds the edge, a taller/more
   legible header, and consistent vertical rhythm for row height. Wide
   tables still scroll horizontally via .container-table, they don't
   shrink columns down to illegibility. */
.table th {
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    padding: 12px 30px 12px 12px;
    font-size: 14px;
    font-weight: 700;
    transition: all linear 0.3s;
    user-select: none;
    vertical-align: middle;
    line-height: 1.3;
    text-align: left;
}

.table td {
    padding: 12px 30px 12px 12px;
    vertical-align: middle;
}

/* soft row hover, modern + comfortable to scan */
table tbody tr {
    transition: background-color 0.2s ease;
}

table tbody tr:hover {
    background-color: #F7F9FC;
}

table th.asc,
table th.desc {
    color: #fff;
}

/* sort icon hidden by default so it never crowds/narrows the column title;
   only appears on header hover or when that column is the active sort */
table th[data-sort]:before,
table th[data-sort]:after {
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    opacity: 0;
    right: 8px;
    border: 4px solid transparent;
    transition: opacity 0.15s ease;
}

table th[data-sort]:before {
    top: 12px;
    border-bottom-color: #fff;
    padding: 0px;
}

table th[data-sort]:after {
    top: 22px;
    border-top-color: #fff;
}

table th[data-sort]:hover:before,
table th[data-sort]:hover:after {
    opacity: 0.5;
}

table th.asc:before,
table th.desc:after {
    opacity: 1;
}

.table.caption-top {
    padding-top: 16px;
    overflow-x: auto;
}

.btn-bottom {
    gap: 12px;
}

/* No more geser (horizontal scroll) as the primary strategy for wide tables
   (Payment Summary/Payment Term/AR Customer) - cell text wraps instead of
   clipping or requiring a scrollbar, so no column is ever hidden. */
.table-no-scroll {
    overflow-x: hidden;
}

.table-no-scroll .table th,
.table-no-scroll .table td {
    white-space: normal;
    word-break: break-word;
}

/* Per-row expand toggle (+/-) - the leading icon column on Payment Term,
   Payment Summary and AR Customer that reveals an inline detail row instead
   of dedicating a permanent "Action" column to it (see list-page.js's
   detailRow config + initDetailRowToggle()). Matches the DataTables
   Responsive child-row pattern the user referenced: bi-plus-circle-fill in
   blue when collapsed, swapped for bi-dash-circle-fill in red when open -
   the icon glyph itself is swapped in JS, colour follows via .detail-open. */
.row-expand-toggle {
    background: none;
    border: none;
    padding: 0;
    line-height: 0;
    cursor: pointer;
}

.row-expand-toggle i {
    font-size: 20px;
    color: var(--mutu-brand-blue-alt, #0B4EA1);
    transition: color 0.15s ease;
}

.row-expand-toggle.detail-open i {
    color: #DC3545;
}

/* AR Customer - the customer name is also clickable (in addition to its own
   leading .row-expand-toggle icon) and stays in sync with the same
   detail-row open/close state via list-page.js's initDetailRowToggle(). */
.ar-customer-name-toggle {
    color: var(--mutu-brand-blue-alt, #0B4EA1);
    text-decoration: none;
    font-weight: 600;
}

.ar-customer-name-toggle:hover {
    text-decoration: underline;
}

.row-detail-panel {
    background-color: #F7F9FC;
    border-radius: 8px;
}

/* Preview modal's "Riwayat Customer" list (AR Customer Unlock + AR Customer
   Limit) - simple stacked cards instead of a wide table, per explicit
   request to remove the left/right scrollbar and keep it easy to scan.
   Same light background as .row-detail-panel for visual consistency. Only
   vertical scroll is allowed (overflow-x: hidden) since cards always fit
   the modal's width. */
.history-list {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

.history-card {
    background-color: #F7F9FC;
    border-radius: 8px;
    padding: 12px 14px;
}

.history-card + .history-card {
    margin-top: 8px;
}



/* Input style */
input.form-control {
    font-size: 12px;
}

/* Remove bootstrap blue highlight */
.form-control:focus,
.input-group-text:focus {
    border-color: var(--mutu-ink, #0A2D48) !important;
    box-shadow: none !important;
}

/* Disabled field — one shared style for every non-editable field in the
   app (previously done ad hoc per-page via [readonly], now via :disabled). */
.form-control:disabled,
.form-select:disabled {
    background-color: #F3F4F6;
    font-size: 12px;
    opacity: 1;
}

/* form select radio opsi */
.form-check-label {
    margin-top: 2px;
}

textarea.form-control {
    font-size: 12px;
    resize: vertical;
}

.form-check-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-right: 4px;
    box-shadow: none !important;
}

.form-check-input:checked {
    background-color: var(--mutu-ink, #0A2D48);
    border-color: var(--mutu-ink, #0A2D48);
}

/* Checkbox / radio / switch rows: one flex row, so the box always sits level with the FIRST line of its
   label - even when the label wraps to two lines. Bootstrap's float + negative-margin layout, combined
   with this theme's 16px box (above) and the label's margin-top, let the box drop below the first line
   and read as "one step too low". Inline groups still flow side by side. */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding-left: 0;
    min-height: 0;
}

.form-check .form-check-input {
    float: none;
    margin: .15rem 0 0;
    flex: none;
}

.form-check .form-check-label {
    margin-top: 0;
}

.form-check.form-check-inline {
    display: inline-flex;
    margin-right: 1rem;
}

.form-check.form-switch {
    padding-left: 0;
}

.form-check.form-switch .form-check-input {
    margin-left: 0;
}

/* form select opsi */
.form-select:hover,
.form-select:focus {
    border-color: var(--mutu-ink, #0A2D48);
    box-shadow: none !important;
    outline: none;
}

.form-label {
    font-size: 12px;
}

.form-select {
    font-size: 12px;
}

.form-radio {
    padding: 0px 0px 16px;
    display: inline-flex;
    gap: 12px;
}

.section-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-header {
    background: #EAF4FB;
    padding: 10px 16px;
    border-radius: 16px 16px 0 0;
}

.section-body {
    padding: 40px 20px;
}

.empty-icon i {
    font-size: 48px;
    color: var(--mutu-ink, #0A2D48);
}

.drag-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
}

.drag-handle {
    cursor: grab;
    color: #6c757d;
    font-size: 18px;
}

.drag-item input {
    height: 38px;
}

.price-input {
    max-width: 180px;
}

.btn-delete {
    color: #dc3545;
    font-size: 18px;
    padding: 0 6px;
}

.btn-delete:hover {
    color: #a71d2a;
}

.alert-primary {
    gap: 4px;
    box-shadow: 0 .35rem .5rem #2c30fa1a;
    ;
    padding: 8px;
}

/*button icon level*/
.badge.text-bg-primary-level {
    background-color: #FFF3E5 !important;
    border: 1px solid #FF8D28 !important;
    color: #FF8D28 !important;
    font-weight: normal !important;
    border-radius: 12px;
    font-size: 12px;
}

.badge.text-bg-warning-level {
    border: 1px solid #FFCC00;
    background-color: #FFFEE9 !important;
    color: #FFCC00 !important;
    font-weight: normal !important;
    border-radius: 12px;
    font-size: 12px;

}

.badge.text-bg-success-level {
    border: 1px solid #34C759;
    background-color: #F0FFF7 !important;
    color: #34C759 !important;
    font-weight: normal !important;
    border-radius: 12px;
    font-size: 12px;
}

.badge.text-bg-info-level {
    border: 1px solid #0057FF;
    background-color: #E6EEFF !important;
    color: #0057FF !important;
    font-weight: normal !important;
    border-radius: 12px;
    font-size: 12px;
}

.badge.text-bg-purple-level {
    border: 1px solid #CB30E0;
    background-color: #FDEEFF !important;
    color: #CB30E0 !important;
    font-weight: normal !important;
    border-radius: 12px;
    font-size: 12px;

}

.badge.text-bg-coffee-level {
    border: 1px solid #AC7F5E;
    background-color: #FFE8D7 !important;
    color: #AC7F5E !important;
    font-weight: normal !important;
    border-radius: 12px;
    font-size: 12px;
}

.badge.text-bg-danger-level {
    border: 1px solid var(--mutu-brand-red, #FF383C);
    background-color: #FFE9EC !important;
    color: var(--mutu-brand-red, #FF383C) !important;
    font-weight: normal !important;
    border-radius: 12px;
    font-size: 12px;
}

.badge.text-bg-light-level {
    border: 1px solid #CACACA;
    background-color: #DDDDDD !important;
    color: #2B2B2B !important;
    font-weight: normal !important;
    border-radius: 12px;
}

.badge.text-bg-dark-level {
    border: 1px solid var(--mutu-text-label, #A0A0A0);
    background-color: #CED4DA !important;
    color: #2B2B2B !important;
    font-weight: normal !important;
    border-radius: 12px;
}

/* pagination */
.pagination-title {
    display: flex;
    text-align: center;
    justify-content: space-between;
    margin-top: 16px;
}

.pagination {
    gap: 6px;
}

.pagination .page-link {
    box-shadow: none !important;
    color: var(--mutu-brand-blue, #0C4D9F);
    border: none;
    border-radius: 6px !important;
    padding: 6px 12px;
    font-size: 12px;
}

.pagination .page-link:active {
    background-color: var(--mutu-brand-blue, #0C4D9F) !important;
    color: #fff !important;
}

.active>.page-link,
.page-link.active {
    background-color: var(--mutu-brand-blue, #0C4D9F) !important;
    color: #fff !important;
    border: none !important;
}

.pagination .page-link:focus,
.pagination .page-link:focus-visible,
.pagination .page-link:active {
    outline: none !important;
    box-shadow: none !important;
}

/* step indicator*/
.indicator {
    display: flex;

    margin-bottom: 0;

}

ul .step {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px;
}

div.progres.one::after {
    width: 0;
    height: 0;
}

ul li .progres {
    margin: 12px 0px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #DFDFDF;
    margin: 14px 0px;
    display: grid;
    place-items: center;
    position: relative;
    margin: 0 50px;
    cursor: pointer;

}

ul li .progres .check {
    display: none;
}

.progres::after {
    content: " ";
    position: absolute;
    width: 101px;
    height: 3px;
    background-color: #DFDFDF;
    right: 41px;
}


ul .step .progres.one.active,
ul .step .progres.one.active::after {
    background-color: #FFD7DC;
}

ul .step .progres.two.active,
ul .step .progres.two.active::after {
    background-color: #FEE6C9;
}

ul .step .progres.three.active,
ul .step .progres.three.active::after {
    background-color: #D7EFE2;
}

ul .step .progres.four.active,
ul .step .progres.four.active::after {
    background-color: #E7EDF5;
}

ul li .progres.one:hover {
    border: 1px solid var(--mutu-brand-red, #FF383C);
}

ul li .progres.two:hover {
    border: 1px solid #FF8D28;
}

ul li .progres.three:hover {
    border: 1px solid #34C759;
}

ul li .progres.four:hover {
    border: 1px solid var(--mutu-brand-blue, #0C4D9F);
}

ul li .active .icon {
    display: none;
}

ul li .icon {
    display: flex;
}

ul li .active .check {
    display: flex;
}

.one .icon:hover {
    color: var(--mutu-brand-red, #FF383C);
}

.two .icon:hover {
    color: #FF8D28;
}

.three .icon:hover {
    color: #34C759;
}

.four .icon:hover {
    color: var(--mutu-brand-blue, #0C4D9F);
}

/*previous dan next nya*/
.container .buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.buttons button {
    padding: 8px 12px;
    background-color: var(--mutu-brand-blue, #0C4D9F);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

.buttons button:disabled {
    background: #E7EDF6;
}

#next #prev {
    text-align: center;
    cursor: not-allowed;
}

/* step indicator-view*/
.indicator-view {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

ul .step {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px;
}

ul li .progres {
    margin: 12px 0px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #DFDFDF;
    margin: 14px 0px;
    display: grid;
    place-items: center;
    position: relative;
    margin: 0 50px;
    cursor: pointer;

}

ul li .progres .check {
    display: none;
}

.progres::after {
    content: " ";
    position: absolute;
    width: 101px;
    height: 3px;
    background-color: #DFDFDF;
    right: 41px;
}

div .progres.onee::after {
    display: none;
}

ul .step .progres.onee.active,
ul .step .progres.onee.active::after {
    background-color: #FFD7DC;
}

ul .step .progres.twoo.active,
ul .step .progres.twoo.active::after {
    background-color: #FEE6C9;
}

ul .step .progres.threee.active,
ul .step .progres.threee.active::after {
    background-color: #D7EFE2;
}

ul .step .progres.fourr.active,
ul .step .progres.fourr.active::after {
    background-color: #E7EDF5;
}

ul .step .progres.fivee.active,
ul .step .progres.fivee.active::after {
    background-color: #F9D6FD;
}

ul .step .progres.sixx.active,
ul .step .progres.sixx.active::after {
    background-color: #F3B588;
}

ul .step .progres.sevenn.active,
ul .step .progres.sevenn.active::after {
    background-color: #FFC694;
}

ul li .progres.onee:hover {
    border: 1px solid var(--mutu-brand-red, #FF383C);
}

ul li .progres.twoo:hover {
    border: 1px solid #FF8D28;
}

ul li .progres.threee:hover {
    border: 1px solid #34C759;
}

ul li .progres.fourr:hover {
    border: 1px solid var(--mutu-brand-blue, #0C4D9F);
}

ul li .progres.fivee:hover {
    border: 1px solid #CB30E0;
}

ul li .progres.sixx:hover {
    border: 1px solid #AC7F5E;
}

ul li .progres.sevenn:hover {
    border: 1px solid #FF8D28;
}


ul li .active .icon {
    display: none;
}

ul li .icon {
    display: flex;
}

ul li .active .check {
    display: flex;
}

.onee .icon:hover {
    color: var(--mutu-brand-red, #FF383C);
}

.twoo .icon:hover {
    color: #FF8D28;
}

.threee .icon:hover {
    color: #34C759;
}

.fourr .icon:hover {
    color: var(--mutu-brand-blue, #0C4D9F);
}

/*indicator-payment*/
.indicator-payment {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

ul .step {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px;
}

div.progres.satu::after {
    width: 0;
    height: 0;
}

ul li .progres {
    margin: 12px 0px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #DFDFDF;
    margin: 14px 0px;
    display: grid;
    place-items: center;
    position: relative;
    margin: 0 50px;
    cursor: pointer;

}

ul li .progres .check {
    display: none;
}

.progres::after {
    content: " ";
    position: absolute;
    width: 101px;
    height: 3px;
    background-color: #DFDFDF;
    right: 41px;
}


ul .step .progres.satu.active,
ul .step .progres.satu.active::after {
    background-color: #FFD7DC;
}

ul .step .progres.dua.active,
ul .step .progres.dua.active::after {
    background-color: #FEE6C9;
}

ul .step .progres.tiga.active,
ul .step .progres.tiga.active::after {
    background-color: #D7EFE2;
}



ul li .progres.satu:hover {
    border: 1px solid var(--mutu-brand-red, #FF383C);
}

ul li .progres.dua:hover {
    border: 1px solid #FF8D28;
}

ul li .progres.tiga:hover {
    border: 1px solid #34C759;
}


ul li .active .icon {
    display: none;
}

ul li .icon {
    display: flex;
}

ul li .active .check {
    display: flex;
}

.satu .icon:hover {
    color: var(--mutu-brand-red, #FF383C);
}

.dua .icon:hover {
    color: #FF8D28;
}

.tiga .icon:hover {
    color: #34C759;
}


/*Circle PIC*/
.PIC {
    width: 125px;
    height: 125px;
}

.isi-pic p {
    margin-bottom: 8px;
    font-size: 12px;
}

.content-pic {
    display: flex;
    gap: 45px;
}

/* prevent action buttons from wrapping onto separate lines inside a narrow
   table cell — the table scrolls horizontally (.container-table) instead */
td:has(.btn-action-danger, .btn-action-warning, .btn-action-info, .btn-action-success, .btn-action-purple) {
    white-space: nowrap;
}

/* button icon action — one shared, reusable Action Button component
   (View/Edit/Delete, and any other row-level tool action) used across
   every table row in the app. Fixed square size + centered icon keeps
   every instance identical regardless of markup order/whitespace in the
   row. Success/purple reuse the same colors already used for badges
   elsewhere in the app (text-bg-success / text-bg-purple-level). */
.btn.btn-action-danger,
.btn.btn-action-warning,
.btn.btn-action-info,
.btn.btn-action-success,
.btn.btn-action-purple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0 3px 0 0;
    border: 1px solid #DFDFDF;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
}

.btn.btn-action-danger:last-child,
.btn.btn-action-warning:last-child,
.btn.btn-action-info:last-child,
.btn.btn-action-success:last-child,
.btn.btn-action-purple:last-child {
    margin-right: 0;
}

.btn.btn-action-danger svg,
.btn.btn-action-danger i.bi,
.btn.btn-action-warning svg,
.btn.btn-action-warning i.bi,
.btn.btn-action-info svg,
.btn.btn-action-info i.bi,
.btn.btn-action-success svg,
.btn.btn-action-success i.bi,
.btn.btn-action-purple svg,
.btn.btn-action-purple i.bi {
    width: 14px;
    height: 14px;
    font-size: 14px;
    flex-shrink: 0;
}

.btn.btn-action-danger {
    color: var(--mutu-brand-red, #FF383C);
}

.btn.btn-action-danger:hover {
    background-color: #FFD7DC;
    color: var(--mutu-brand-red, #FF383C);
}

.btn.btn-action-warning {
    color: #FF8D28;
}

.btn.btn-action-warning:hover {
    background-color: #FEE6C9;
    color: #FF8D28;
}

.btn.btn-action-info {
    color: #004FE8;
}

.btn.btn-action-info:hover {
    background-color: #D9E6FF;
    color: #004FE8;
}

.btn.btn-action-success {
    color: #3BBA75;
}

.btn.btn-action-success:hover {
    background-color: #D7EFE2;
    color: #3BBA75;
}

.btn.btn-action-purple {
    color: #CB30E0;
}

.btn.btn-action-purple:hover {
    background-color: #F3E2FB;
    color: #CB30E0;
}

@media (max-width: 768px) {

    .btn.btn-action-danger,
    .btn.btn-action-warning,
    .btn.btn-action-info,
    .btn.btn-action-success,
    .btn.btn-action-purple {
        width: 32px;
        height: 32px;
    }
}



.btn.btn-action-info:active {
    border-color: #CBE6FF;
}


.btn.btn-primary {
    background-color: #D4ECFD;
    color: var(--mutu-ink, #0A2D48);
    /* Was `border: #D4ECFD` - an INVALID border shorthand (a shorthand
       needs width+style+color, not a bare color), so browsers either
       ignored it or fell back to a different computed border-width than
       .btn.btn-outline-secondary's valid `border-color`-only declaration -
       a subtle few-px height mismatch on top of the box-model gap below.
       border-color is the correct, valid property for "same border
       width/style as Bootstrap's default, just recoloured", matching how
       .btn.btn-outline-secondary already does it. */
    border-color: #D4ECFD;
    border-width: 1px;
    border-style: solid;
    /* Was missing this entire box model (unlike .btn.btn-outline-secondary
       just above), so every Save/Apply button fell back to Bootstrap's
       plain inline-block button box - visibly bigger/taller and
       disproportionate next to Cancel/outline buttons using the same size.
       Copied property-for-property from .btn.btn-outline-secondary so both
       compute the exact same height regardless of icon+text vs text-only
       content - Save and Cancel/Apply now only differ by colour, never by
       font/size/height, per explicit request. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 12px;
    padding: 8px 12px;
    line-height: 1;
    border-radius: 6px;
}

.btn.btn-primary:active {
    background-color: var(--mutu-ink, #0A2D48);
}

.badge.text-bg-primary-icon {
    color: var(--mutu-brand-red, #FF383C);
    background-color: #FFEBEC;
    padding: 8px;
    font-weight: normal !important;
}

/*select search*/
.custom-select-wrapper {
    position: relative;
}

.custom-select {
    padding-left: 42px;
    padding-right: 40px;
    height: 44px;
    border-radius: 10px;
    font-weight: 500;
    appearance: none;
    background-color: #fff;
}

/* icon search kiri */
.custom-select-wrapper::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat center;
}

/* arrow kanan */
.custom-select-wrapper::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    border: 1.5px solid #3b82f6;
    transform: translateY(-50%) rotate(180deg);
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 11.854a.5.5 0 0 0 .708 0L8 6.207l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 0 .708z'/%3E%3C/svg%3E") no-repeat center;
}

/*card selection*/

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-card {
    position: relative;
    cursor: pointer;
}

.service-card input {
    display: none;
}

.card-content {
    border: 2px solid #eaeaea;
    border-radius: 12px;
    text-align: center;
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.2s ease;
    background: #fff;
    align-items: center;
}

.card-content img {
    width: 320px;
    height: 180px;
}

.card-content h5 {
    font-size: 18px;
    font-weight: 600;
}

/* ACTIVE STATE */
.service-card input:checked+.card-content,
.service-card.active .card-content {
    border-color: var(--mutu-brand-blue, #0C4D9F);
}

/* hover */
.service-card:hover .card-content {
    border-color: var(--mutu-brand-blue, #0C4D9F);
}

/* Section nav tabs — used on View/Edit detail pages (Customer View, Payment
   Term View, Invoice Detail, Disbursement) to switch between tab-panes or
   link to a sibling page. One shared segmented-pill look (per design finance)
   regardless of which page-specific class wraps it or whether the items are
   <a> or <button>. */
.customer-view-tabs,
.payment-term-tabs,
.invoice-tabs,
.seg-tabs {
    display: flex;
    width: fit-content;
    gap: 4px;
    background: #F2F4F7;
    border: none;
    border-radius: 10px;
    padding: 4px;
    margin: 0;
}

.customer-view-tabs .nav-link,
.payment-term-tabs .nav-link,
.invoice-tabs .nav-link,
.seg-tabs a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 500;
    color: #8A94A6;
    background: transparent;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.customer-view-tabs .nav-link:hover,
.payment-term-tabs .nav-link:hover,
.invoice-tabs .nav-link:hover,
.seg-tabs a:hover {
    color: var(--mutu-brand-blue, #0C4D9F);
}

.customer-view-tabs .nav-link.active,
.payment-term-tabs .nav-link.active,
.invoice-tabs .nav-link.active,
.seg-tabs a.active {
    background: #fff;
    color: var(--mutu-ink, #0A2D48);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* .main is the single source of truth for spacing between sections
   (Filter/Table/Form/Detail cards, tabs, back-links, etc.) — a flex column
   with gap. Cards/sections must never set their own margin-top/margin-bottom
   to space themselves from siblings; only .main's gap does that. The fixed
   64px header is cleared via padding-top instead of a per-card margin-top. */
.main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    padding-top: 88px;
    padding-bottom: 100vh;
}

/* Bootstrap's row gutter classes (g-*) apply a negative margin-top to the
   .row itself, which cancels out .main's gap when a .row is used as a
   direct section (e.g. a stat-card row). Neutralize it here so spacing
   stays entirely gap-driven; the column gutters (left/right) are untouched. */
.main>.row {
    margin-top: 0;
    margin-bottom: 0;
}

.title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.title h6 {
    margin: 0;
    color: var(--mutu-brand-blue, #0C4D9F);
}


/* accordion*/
/* the collapsible accordion "card" shares the same card family as
   .container (radius/shadow/border/padding) — same as every other card
   in the app. Spacing between accordion sections comes from .main's gap,
   never its own margin. */
.accordion {
    align-items: center;
    margin-left: auto;
    width: 100%;
    height: fit-content;
    border: 1px solid #dddddd;
    background-color: #fff;
    border-radius: 12px;
    margin-bottom: 16px;
}


.accordion .contentB {
    position: relative;
    padding: 16px;
}

.accordion .contentB .label {
    position: relative;
    cursor: pointer;
}


.level {
    padding: 20px;
}



/*jjuby*/
.accordion-icon {
    width: 32px;
    height: 32px;
    background: var(--mutu-brand-blue, #0C4D9F);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: 0.3s;
}

/* base icon markup is bi-chevron-up; rotate it 180deg by default so a
   CLOSED accordion points down, and un-rotate it when OPEN (.active) so
   it points up — matches the app-wide open=up / closed=down convention. */
.icon-arrow {
    transition: 0.3s;
    transform: rotate(180deg);
}

.accordion .contentB.active .icon-arrow {
    transform: rotate(0deg);
}

.accordion-arrow {
    display: flex;
    justify-content: space-between;
}

.icon-btn {
    display: flex;
    align-items: center;
    gap: 12px;
}



.accordion .contentB .isi-content {
    position: relative;
    background-color: #fff;
    height: 0;
    overflow: hidden;
    transition: 0.5s;
    overflow-y: auto;
}

.accordion .contentB.active .isi-content {
    height: auto;
    padding-top: 12px;
}

/*checkbox*/
.checkbox {
    display: flex;
    gap: 45px;
}

.customer-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #F8FAFC;
    border: 1px solid #E9EEF5;
    border-radius: 12px;
}

.customer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E7EDF6;
}

.customer-detail small {
    font-size: 11px;
    color: var(--mutu-text-faint, #98A2B3);
}

.customer-detail h6 {
    color: #000;
    font-weight: 600;
    margin: 2px 0 0;
}

/*date range*/
.date-picker-wrapper{
    position:relative;
    width:100%;
}


.date-input{

    height:32px;
    border:1px solid #dee2e6;
    border-radius:6px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:0 12px;

    background:#fff;
    cursor:pointer;

    font-size:12px;

    transition:.2s;

}


.date-input:hover{
    border-color:#000;
}


.date-input i{
    color:#6c757d;
    font-size:14px;
    width:14px;
    height:14px;
}

/* The click handler is bound to the whole #dateInput div (see
   date-range-picker.js), but without this the icon/text children can still
   swallow the click before it bubbles in some browsers - forcing it through
   to the parent so the entire field opens the dropdown, not just the icon. */
.date-input i,
.date-input span{
    pointer-events:none;
}

.date-dropdown{

    position:absolute;

    top:60px;
    left:0;

    width:280px;

    padding:14px;

    background:#fff;

    border-radius:10px;

    border:1px solid #e5e5e5;

    box-shadow:
    0 10px 25px rgba(0,0,0,.12);

    display:none;

    z-index:999;

    transition:width .15s ease;

}

/* Widened while "Custom Range"'s calendar is open (see date-range-picker.js's
   customBtn handler) - room enough for the year sidebar + a two-month
   calendar side by side, matching the reference layout instead of the old
   narrow single-column Start/End <input type="date"> fields. */
.date-dropdown.dropdown-wide{
    width:640px;
}

.date-dropdown-body{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

.date-dropdown-presets{
    width:150px;
    flex:0 0 150px;
}


.range-option{

    width:100%;

    border:0;

    background:#f8f9fa;

    color:#495057;

    padding:8px 12px;

    margin-bottom:7px;

    border-radius:6px;

    text-align:left;

    font-size:13px;

    transition:.2s;

}

.range-option:hover{

    background:#e9f3ff;

    color:var(--mutu-brand-blue, #0C4D9F);

}

.range-option.active{

    background:var(--mutu-brand-blue, #0C4D9F);

    color:white;

}

.custom-date{

    border-left:1px solid #eee;

    padding-left:16px;

    flex:1 1 auto;
    min-width:0;

}

/* Two-month calendar (Custom Range) - replaces the old .date-field plain
   <input type="date"> pair. See date-range-picker.js's renderCalendars()/
   handleDayClick(). */
.calendar-year-jump{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
}

.calendar-year-jump label{
    font-size:12px;
    font-weight:700;
    color:var(--mutu-ink, #0A2D48);
    margin:0;
    white-space:nowrap;
}

.calendar-year-jump select{
    width:auto;
    min-width:90px;
}

.calendar-nav{
    display:flex;
    align-items:flex-start;
    gap:6px;
}

.cal-nav-btn{
    background:none;
    border:none;
    font-size:20px;
    line-height:1;
    color:var(--mutu-brand-blue-alt, #0B4EA1);
    cursor:pointer;
    padding:2px 6px;
    border-radius:4px;
    margin-top:18px;
}

.cal-nav-btn:hover{
    background:#e9f3ff;
}

.calendar-months{
    display:flex;
    gap:14px;
    flex:1;
    min-width:0;
}

.calendar-month{
    flex:1;
    min-width:0;
}

.calendar-month-label{
    text-align:center;
    font-weight:700;
    font-size:12px;
    color:var(--mutu-ink, #0A2D48);
    margin-bottom:6px;
}

.calendar-weekdays{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    text-align:center;
    font-size:10px;
    font-weight:600;
    color:#6c757d;
    margin-bottom:2px;
}

.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:2px;
}

.calendar-day{
    border:none;
    background:none;
    aspect-ratio:1;
    width:100%;
    font-size:11px;
    border-radius:50%;
    cursor:pointer;
    color:#212529;
}

.calendar-day:hover{
    background-color:#e9f3ff;
}

.calendar-day.muted{
    color:#c7ccd1;
}

.calendar-day.in-range{
    background-color:#e9f3ff;
    border-radius:0;
}

.calendar-day.range-start,
.calendar-day.range-end{
    background-color:var(--mutu-brand-blue-alt, #0B4EA1) !important;
    color:#fff;
    border-radius:50%;
}

.calendar-day.today{
    box-shadow: inset 0 0 0 1px var(--mutu-brand-blue-alt, #0B4EA1);
}

.calendar-range-display{
    text-align:center;
    font-size:11px;
    color:#495057;
    margin:8px 0 0;
}

.action-btn{

    display:flex;

    justify-content:flex-end;

    gap:8px;

    margin-top:15px;

}

.action-btn button{

    height:32px;

    padding:0 16px;

    font-size:13px;

    border-radius:6px;

}
/* Module chip toggles - used by SSO's Add Entitlement modal and Tenant
   Management's Enabled Modules picker (both render one per cross-app
   module - see App\Support\ModuleCatalog). Bootstrap's own .btn-check
   pattern (visually-hidden checkbox + styled label sibling), styled as a
   bordered tile instead of a solid .btn so it reads as "select which of
   these" rather than a button bar. */
.module-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 10px;
    font-size: 13px;
    color: var(--mutu-ink, #0A2D48);
    cursor: pointer;
    transition: .15s;
}
.module-chip i.bi:first-child { font-size: 15px; color: #98A2B3; }
.module-chip-check { display: none; margin-left: auto; color: var(--mutu-brand-blue, #0C4D9F); }
.module-chip:hover { border-color: var(--mutu-brand-blue, #0C4D9F); }
.module-chip-input:checked + .module-chip {
    border-color: var(--mutu-brand-blue, #0C4D9F);
    background: var(--bs-tertiary-bg, #F0F5FC);
    font-weight: 500;
}
.module-chip-input:checked + .module-chip i.bi:first-child { color: var(--mutu-brand-blue, #0C4D9F); }
.module-chip-input:checked + .module-chip .module-chip-check { display: inline-block; }

/* Timeline / Activity Log - pairs with blade-starter/partials/timeline.blade.php.
   Generic vertical log for status history, approval history, audit trails,
   or any other timestamped event feed. */
.mutu-timeline { position: relative; padding-left: 2rem; }
.mutu-timeline-item { position: relative; padding-bottom: 1.25rem; }
.mutu-timeline-item:not(:last-child)::before {
    /* centered exactly under the dot: dot left (-2rem) + half its width
       (.8rem) - half the line width (1px) */
    content: ''; position: absolute; left: calc(-1.2rem - 1px); top: 1.6rem; bottom: 0;
    width: 2px; background: var(--bs-border-color, #dee2e6);
}
.mutu-timeline-dot {
    position: absolute; left: -2rem; top: 0;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem;
}
/* Dot colors from the MutuApps palette (same pastel + colored-icon pairs as
   the status badges / action-button hovers) — soft fill, no border. */
.mutu-timeline-dot.text-bg-success { background-color: #D7EFE2 !important; color: #3BBA75 !important; }
.mutu-timeline-dot.text-bg-warning { background-color: #FEE6C9 !important; color: #FF8D28 !important; }
.mutu-timeline-dot.text-bg-primary,
.mutu-timeline-dot.text-bg-info { background-color: #E7EDF5 !important; color: var(--mutu-brand-blue-alt, #0B4EA1) !important; }
.mutu-timeline-dot.text-bg-danger { background-color: #FFEBEC !important; color: var(--mutu-brand-red-dark, #E42028) !important; }
.mutu-timeline-dot.text-bg-secondary { background-color: #F2F4F7 !important; color: #667085 !important; }
.mutu-timeline-dot i.bi { font-size: .75rem; line-height: 1; }
.mutu-timeline-dot i.bi::before { display: block; vertical-align: 0; }
/* title row vertically centered on the 1.6rem dot */
.mutu-timeline-body > :first-child { min-height: 1.6rem; align-items: center; }

/* Searchable Select (Select2) skin — adopted from mutu-finance's payment-term
   details page (Add Package Detail / Add Additional Cost modals). Makes the
   select2-bootstrap-5-theme widget match this system's own .form-select:
   12px text (the theme defaults to 1rem and looks oversized next to the other
   fields), dark-navy focus ring, no blue glow. The !important on font-size is
   needed because the third-party theme sets size on more specific selectors.
   Load select2 + select2-bootstrap-5-theme CSS before this file and init with
   { theme: 'bootstrap-5', dropdownParent: $(modal), width: '100%' }.
   See docs/COMPONENTS.md → Searchable Select (Select2). */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--bootstrap-5 .select2-selection .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--bootstrap-5 .select2-dropdown .select2-search__field,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__message {
    font-size: 12px !important;
}
.select2-container--bootstrap-5 .select2-results__option { padding: 6px 12px; }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown .select2-search__field:focus {
    border-color: var(--mutu-ink, #0A2D48);
    box-shadow: none;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: var(--mutu-ink, #0A2D48); color: #fff; }