@import url("/font/vazirmatn/vazirmatn.css");

:root {
    --railpay-primary: #2E3754;
    --railpay-primary-hover: #3A4668;
    --railpay-primary-dark: #1E2540;
    --railpay-surface: #FFFFFF;
    --bs-primary: #2E3754;
    --bs-primary-rgb: 46, 55, 84;
    --bs-focus: #2E3754;
    --bs-blue: #2E3754;

    /* Multi-color accent palette (Kero-inspired) */
    --railpay-accent-purple: #794c8a;
    --railpay-accent-purple-rgb: 121, 76, 138;
    --railpay-accent-blue: #4a6cf7;
    --railpay-accent-blue-rgb: 74, 108, 247;
    --railpay-accent-teal: #16c0a8;
    --railpay-accent-teal-rgb: 22, 192, 168;
    --railpay-accent-cyan: #16aaff;
    --railpay-accent-cyan-rgb: 22, 170, 255;
    --railpay-accent-coral: #f76a5c;
    --railpay-accent-coral-rgb: 247, 106, 92;
    --railpay-accent-amber: #f7b924;
    --railpay-accent-amber-rgb: 247, 185, 36;
    --railpay-accent-green: #3ac47d;
    --railpay-accent-green-rgb: 58, 196, 125;
    --railpay-accent-pink: #f65ca2;
    --railpay-accent-pink-rgb: 246, 92, 162;

    /* Gradients */
    --railpay-hero-gradient: linear-gradient(120deg, #1E2540 0%, #2E3754 42%, #4a3d6e 78%, #5a4a8a 100%);
    --railpay-page-bg: #eef1f7;

    /* Header gradient for tables / list cards */
    --railpay-thead-gradient: linear-gradient(180deg, #f3f5fb 0%, #e9edf7 100%);
}

/* Soft page background so white cards lift off the surface */
.app-main,
.app-main__outer,
.app-main__inner {
    background: var(--railpay-page-bg);
}

.app-main__content {
    background: var(--railpay-page-bg);
}

html {
    max-width: 100%;
    /* clip avoids horizontal scroll without breaking position:fixed backdrops on tall pages */
    overflow-x: clip;
}

body {
    max-width: 100%;
}

body {
    font-family: "Vazirmatn", Tahoma, sans-serif;
    direction: rtl;
    text-align: right;
}

input,
button,
select,
textarea {
    font-family: inherit;
}

/* RTL: sidebar on the right */
.app-sidebar-wrapper {
    left: auto !important;
    right: 1.5rem;
}

.app-main .app-main__outer {
    padding: 0 calc(1.5rem + 280px) 0 0 !important;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.closed-sidebar .app-main .app-main__outer,
.closed-sidebar-mobile .app-main .app-main__outer,
.sidebar-mini .app-main .app-main__outer {
    padding: 0 calc(1.5rem + 80px) 0 0 !important;
}

.header-mobile-open .app-main .app-main__outer {
    padding: 0 calc(1.5rem + 80px) 0 0 !important;
}

.app-main__inner,
.app-main__content {
    max-width: 100%;
    min-width: 0;
}

.app-header-right {
    margin-left: 0 !important;
    margin-right: auto;
    flex-shrink: 0;
}

.railpay-user-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    max-width: min(100%, 22rem);
    padding: 0.35rem 0.35rem 0.35rem 0.75rem;
    background: var(--railpay-surface);
    border: 1px solid rgba(46, 55, 84, 0.1);
    border-radius: 999px;
    box-shadow: 0 0.125rem 0.5rem rgba(46, 55, 84, 0.06);
}

.railpay-user-bar__profile {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.railpay-user-bar__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--railpay-primary) 0%, var(--railpay-primary-hover) 100%);
    color: #fff;
    font-size: 0.8rem;
}

.railpay-user-bar__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.railpay-user-bar__greeting {
    font-size: 0.6875rem;
    color: #8b93a7;
    font-weight: 500;
}

.railpay-user-bar__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--railpay-primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.railpay-user-bar__logout-form {
    margin: 0;
    flex-shrink: 0;
}

.railpay-user-bar__logout {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.45rem 0.85rem;
    border: 0;
    border-radius: 999px;
    background: rgba(217, 37, 80, 0.08);
    color: #c6284a;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.railpay-user-bar__logout:hover {
    background: rgba(217, 37, 80, 0.14);
    color: #a91f3d;
}

.railpay-user-bar__logout:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(217, 37, 80, 0.25);
}

.railpay-user-bar__logout i {
    font-size: 0.875rem;
}

@media (max-width: 575.98px) {
    .railpay-user-bar {
        max-width: none;
        padding-inline-start: 0.5rem;
        gap: 0.5rem;
    }

    .railpay-user-bar__info {
        display: none;
    }

    .railpay-user-bar__logout-label {
        display: none;
    }

    .railpay-user-bar__logout {
        padding: 0.5rem;
        width: 2rem;
        height: 2rem;
        justify-content: center;
    }
}

/* Sidebar header: logo + collapse toggle (RTL) */
.app-sidebar .app-header__logo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1rem 1rem 1.35rem;
    width: 100%;
    min-width: 0;
}

.app-sidebar .app-header__logo .brand-logo-link {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.25rem 0;
}

.app-sidebar .app-header__logo .hamburger {
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0.4rem;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.app-sidebar .app-header__logo .hamburger:hover {
    opacity: 1;
    background: rgba(46, 55, 84, 0.07);
}

.app-sidebar .app-header__logo .hamburger .hamburger-box {
    width: 22px;
    height: 14px;
}

.app-sidebar .app-header__logo .hamburger .hamburger-inner,
.app-sidebar .app-header__logo .hamburger .hamburger-inner::before,
.app-sidebar .app-header__logo .hamburger .hamburger-inner::after {
    width: 22px;
    background-color: var(--railpay-primary);
}

.header-mobile-open .app-sidebar .app-header__logo {
    justify-content: center;
    padding-inline: 0.5rem;
}

.header-mobile-open .app-sidebar .brand-logo-link {
    display: none;
}

.header-mobile-open .app-sidebar .app-header__logo .hamburger {
    margin: 0 auto !important;
}

.header-mobile-open .app-sidebar:hover .brand-logo-link {
    display: flex;
}

.header-mobile-open .app-sidebar:hover .app-header__logo {
    justify-content: flex-end;
}

.header-mobile-open .app-sidebar:hover .app-header__logo .hamburger {
    margin: 0 !important;
}

.vertical-nav-menu li a {
    display: flex !important;
    align-items: center;
    gap: 0.625rem;
    padding: 0 1.5rem !important;
    color: #6c757d;
    position: relative;
}

.vertical-nav-menu li a:hover {
    color: #343a40;
    text-decoration: none;
}

.vertical-nav-menu li.mm-active > a {
    color: #343a40;
    font-weight: 600;
}

.vertical-nav-menu li a.mm-active {
    color: var(--railpay-primary);
    font-weight: 600;
}

.vertical-nav-menu i.metismenu-icon {
    position: static !important;
    width: 1.375rem;
    height: auto;
    line-height: 1;
    margin: 0 !important;
    flex-shrink: 0;
    text-align: center;
    opacity: 0.45;
    color: inherit;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.vertical-nav-menu li a:hover i.metismenu-icon,
.vertical-nav-menu li.mm-active > a i.metismenu-icon {
    opacity: 1;
}

.vertical-nav-menu > li > a .metismenu-state-icon {
    position: absolute !important;
    left: 1rem !important;
    right: auto !important;
    margin: 0 !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    font-size: 0.6875rem !important;
    opacity: 0.45;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.vertical-nav-menu li.mm-active > a .metismenu-state-icon {
    opacity: 1;
    transform: rotate(-180deg);
}

.vertical-nav-menu ul {
    padding: 0 0.5rem;
}

.vertical-nav-menu ul > li > a {
    display: block !important;
    position: relative;
    padding: 0 calc(1.5rem + 1.375rem + 0.625rem + 4px) 0 1.5rem !important;
    color: #6c757d;
    height: 2.2rem;
    line-height: 2.2rem;
    border-radius: 50px;
    margin: 0;
    text-align: right;
}

.vertical-nav-menu ul > li > a .metismenu-icon {
    display: none !important;
}

.vertical-nav-menu ul > li > a:hover {
    color: var(--railpay-primary);
    text-decoration: none;
}

.vertical-nav-menu ul > li > a.mm-active {
    color: var(--railpay-primary);
    background: rgba(46, 55, 84, 0.08);
    font-weight: 600;
}

.vertical-nav-menu ul > li > a::before {
    position: absolute !important;
    right: calc(1.5rem + 1.375rem);
    left: auto !important;
    top: 50%;
    margin-top: -2px;
    content: "";
    width: 4px;
    height: 4px;
    background: var(--railpay-primary);
    border-radius: 0.4rem;
}

.closed-sidebar .vertical-nav-menu li a,
.sidebar-mini .vertical-nav-menu li a,
.closed-sidebar-mobile .vertical-nav-menu li a {
    justify-content: center;
    padding-inline: 0.75rem !important;
}

.closed-sidebar .app-sidebar:hover .vertical-nav-menu li a,
.sidebar-mini .app-sidebar:hover .vertical-nav-menu li a {
    justify-content: flex-start;
    padding: 0 1.5rem !important;
}

.breadcrumb {
    direction: ltr;
}

.pagination {
    direction: ltr;
}

.form-check-label {
    padding-right: 1.5rem;
    padding-left: 0;
}

/* RTL: select caret on the left inside the field */
.form-select:not([multiple]):not([size]),
.form-select:not([multiple])[size="1"] {
    padding: 0.375rem 0.75rem 0.375rem 2.25rem;
    background-position: left 0.75rem center;
}

.form-select[multiple],
.form-select[size]:not([size="1"]) {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.input-group-lg > .form-select:not([multiple]),
.input-group-sm > .form-select:not([multiple]) {
    padding-left: 3rem;
    padding-right: 0.75rem;
}

.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"] {
    padding-left: 4.125rem;
    padding-right: 0.75rem;
    background-position: left 0.75rem center, left 2.25rem center;
}

.toll-time-input {
    text-align: left !important;
    direction: ltr !important;
}

/* Brand colors override Kero defaults */
.btn-primary,
.btn-focus {
    --bs-btn-bg: var(--railpay-primary);
    --bs-btn-border-color: var(--railpay-primary);
    --bs-btn-hover-bg: var(--railpay-primary-hover);
    --bs-btn-hover-border-color: var(--railpay-primary-hover);
    --bs-btn-active-bg: #252f4a;
    --bs-btn-active-border-color: #252f4a;
}

.btn-outline-primary {
    --bs-btn-color: var(--railpay-primary);
    --bs-btn-border-color: var(--railpay-primary);
    --bs-btn-hover-bg: var(--railpay-primary);
    --bs-btn-hover-border-color: var(--railpay-primary);
}

.bg-primary {
    background-color: var(--railpay-primary) !important;
}

.text-primary {
    color: var(--railpay-primary) !important;
}

.border-primary {
    border-color: var(--railpay-primary) !important;
}

.app-sidebar__heading {
    color: var(--railpay-primary) !important;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after,
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: var(--railpay-primary);
}

.header-mobile-wrapper {
    background: var(--railpay-primary);
}

/* Logo */
.brand-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo-link .brand-logo {
    display: block;
    height: 2.25rem;
    width: auto;
    max-width: calc(100% - 1rem);
    object-fit: contain;
}

.closed-sidebar .brand-logo-link .brand-logo,
.sidebar-mini .brand-logo-link .brand-logo {
    height: 1.75rem;
}

/* Filter pills */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #343a40;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-pill:hover {
    border-color: var(--railpay-accent-blue);
    color: var(--railpay-accent-blue);
    text-decoration: none;
}

.filter-pill.active {
    background: linear-gradient(135deg, var(--railpay-accent-blue) 0%, var(--railpay-accent-purple) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0.3rem 0.7rem rgba(var(--railpay-accent-blue-rgb), 0.28);
}

.filter-pill .filter-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
}

.filter-pill.active .filter-pill-count {
    background: rgba(255, 255, 255, 0.25);
}

.filter-pills--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: #b8c0c8 transparent;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    overscroll-behavior-x: contain;
}

.filter-pills--scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.filter-pills--scroll.is-dragging .filter-pill {
    pointer-events: none;
}

.filter-pills--scroll::-webkit-scrollbar {
    height: 6px;
}

.filter-pills--scroll::-webkit-scrollbar-thumb {
    background: #b8c0c8;
    border-radius: 3px;
}

.filter-pills--scroll::-webkit-scrollbar-thumb:hover {
    background: #9aa3ad;
}

.filter-pills--scroll .filter-pill {
    flex-shrink: 0;
}

/* Compact credit limit inquiry strip */
.credit-limit-panel {
    border: none;
    border-radius: 0.7rem;
    box-shadow: 0 0.3rem 1.1rem rgba(46, 55, 84, 0.08);
    overflow: hidden;
}

.credit-limit-panel .card-header {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #eef1f5;
    background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
    position: relative;
}

.credit-limit-panel .card-header::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--railpay-accent-teal) 0%, var(--railpay-accent-cyan) 100%);
}

.credit-limit-panel .card-header .card-title {
    color: #128c79;
}

.credit-limit-panel .card-body {
    padding: 1rem 1.25rem 1.15rem;
}

.credit-limit-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.credit-limit-card {
    flex: 1 1 220px;
    max-width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid #e5eaf0;
    border-radius: 0.6rem;
    background: linear-gradient(180deg, #fff 0%, #f6fbfb 100%);
    box-shadow: inset 4px 0 0 var(--railpay-accent-teal);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.credit-limit-card:hover {
    border-color: rgba(var(--railpay-accent-teal-rgb), 0.4);
    box-shadow: inset 4px 0 0 var(--railpay-accent-teal), 0 0.35rem 0.8rem rgba(var(--railpay-accent-teal-rgb), 0.16);
    transform: translateY(-2px);
}

.credit-limit-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.credit-limit-card__bank {
    font-size: 0.875rem;
    font-weight: 600;
    color: #343a40;
}

.credit-limit-card__amount {
    font-size: 1rem;
    font-weight: 700;
    color: #128c79;
    margin-bottom: 0.15rem;
}

.credit-limit-card__meta {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Status badges with dot */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-badge::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 0.18rem rgba(255, 255, 255, 0.55);
}

.status-badge--success {
    background: #e6f7ee;
    color: #1b7a42;
    border-color: rgba(58, 196, 125, 0.35);
}

.status-badge--success::before {
    background: #2fb96f;
}

.status-badge--info {
    background: #e6f4fe;
    color: #0a6bad;
    border-color: rgba(22, 170, 255, 0.35);
}

.status-badge--info::before {
    background: #16aaff;
}

.status-badge--warning {
    background: #fef4e3;
    color: #a9760a;
    border-color: rgba(247, 185, 36, 0.4);
}

.status-badge--warning::before {
    background: #f5ad19;
}

.status-badge--danger {
    background: #fdeaee;
    color: #b02441;
    border-color: rgba(217, 37, 80, 0.32);
}

.status-badge--danger::before {
    background: #d92550;
}

.status-badge--secondary {
    background: #eef1f6;
    color: #5c6678;
    border-color: rgba(108, 117, 125, 0.28);
}

.status-badge--secondary::before {
    background: #97a1b0;
}

.status-badge--purple {
    background: rgba(var(--railpay-accent-purple-rgb), 0.12);
    color: #6a3f7d;
    border-color: rgba(var(--railpay-accent-purple-rgb), 0.32);
}

.status-badge--purple::before {
    background: var(--railpay-accent-purple);
}

/* Type badge */
.type-badge {
    display: inline-block;
    padding: 0.22rem 0.7rem;
    border-radius: 2rem;
    border: 1px solid rgba(var(--railpay-accent-purple-rgb), 0.3);
    background: rgba(var(--railpay-accent-purple-rgb), 0.08);
    color: #6a3f7d;
    font-size: 0.8125rem;
    font-weight: 600;
}

.card-body.p-0 > .data-table-wrap,
.detail-section-card .data-table-wrap {
    border: none;
    border-radius: 0;
}

.detail-section-card .card-body .data-table-wrap {
    margin-bottom: 1rem;
}

.detail-section-card .card-body .data-table-wrap:last-child {
    margin-bottom: 0;
}

/* Table card & list pages */
.table-card,
.list-page-card {
    border: none;
    border-radius: 0.7rem;
    box-shadow: 0 0.3rem 1.1rem rgba(46, 55, 84, 0.08);
    overflow: hidden;
}

.list-page-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border-bottom: 1px solid #eef1f5;
    background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
    position: relative;
}

.list-page-card__header::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--railpay-accent-blue) 0%, var(--railpay-accent-purple) 55%, var(--railpay-accent-teal) 100%);
}

.list-page-card__title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.list-page-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, rgba(var(--railpay-accent-blue-rgb), 0.16) 0%, rgba(var(--railpay-accent-purple-rgb), 0.16) 100%);
    color: var(--railpay-accent-blue);
    font-size: 1.1rem;
}

.list-page-card__title h5 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #2c3345;
}

.list-page-card__subtitle {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #8b95a5;
}

.list-page-card__body {
    padding: 1.25rem 1.35rem 1.35rem;
}

.list-toolbar {
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid #e7ecf5;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, rgba(var(--railpay-accent-blue-rgb), 0.05) 0%, rgba(var(--railpay-accent-purple-rgb), 0.05) 100%);
}

.list-filter-form .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.35rem;
}

.list-filter-form .btn {
    min-height: 2.375rem;
}

.data-table-wrap {
    border: 1px solid #e9edf2;
    border-radius: 0.55rem;
    overflow: hidden;
    background: #fff;
}

.data-table-wrap .table-responsive {
    margin: 0;
    max-height: none;
}

.data-table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--railpay-thead-gradient);
    border-bottom: 2px solid rgba(var(--railpay-accent-blue-rgb), 0.35);
    font-weight: 700;
    color: #3b4663;
    font-size: 0.78rem;
    padding: 0.9rem 1rem;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.data-table tbody td {
    padding: 0.95rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #eef1f6;
    font-size: 0.875rem;
    color: #3d4658;
}

.data-table tbody tr {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.data-table tbody tr:nth-child(even) {
    background: #f9fafd;
}

.data-table tbody tr:hover {
    background: rgba(var(--railpay-accent-blue-rgb), 0.06);
    box-shadow: inset 3px 0 0 var(--railpay-accent-blue);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table .col-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #2c3345;
    white-space: nowrap;
}

.data-table .col-company {
    font-weight: 500;
    max-width: 14rem;
}

.data-table .col-date {
    white-space: nowrap;
    font-size: 0.84rem;
}

.data-table .col-actions {
    width: 1%;
    white-space: nowrap;
}

.table-invoice-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--railpay-accent-blue);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.875rem;
}

.table-invoice-link:hover {
    color: #3050d8;
    text-decoration: underline;
}

.table-invoice-link i {
    font-size: 0.7rem;
    color: var(--railpay-accent-blue);
    opacity: 0.85;
}

.table-empty-state {
    padding: 3rem 1.5rem !important;
    text-align: center;
    color: #8b95a5;
}

.table-empty-state i {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.45;
}

.btn-table-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(var(--railpay-accent-blue-rgb), 0.35);
    background: rgba(var(--railpay-accent-blue-rgb), 0.06);
    color: var(--railpay-accent-blue);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-table-action:hover {
    background: var(--railpay-accent-blue);
    border-color: var(--railpay-accent-blue);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 0.25rem 0.6rem rgba(var(--railpay-accent-blue-rgb), 0.3);
}

.btn-table-action--icon {
    padding: 0.35rem 0.5rem;
}

.list-page-card__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #eef1f5;
}

.list-page-card__footer .pagination {
    margin: 0;
}

.list-page-card__footer .page-link {
    border-radius: 0.4rem !important;
    margin: 0 0.1rem;
    color: #5c6678;
    border-color: #e2e7ef;
    min-width: 2.1rem;
    text-align: center;
}

.list-page-card__footer .page-item.active .page-link {
    background: var(--railpay-accent-blue);
    border-color: var(--railpay-accent-blue);
    color: #fff;
    box-shadow: 0 0.25rem 0.6rem rgba(var(--railpay-accent-blue-rgb), 0.3);
}

.list-page-card__footer .page-item.disabled .page-link {
    color: #adb5bd;
}

.table-card .table thead th {
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    color: #6c757d;
    font-size: 0.8125rem;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.table-card .table .status-badge,
.data-table .status-badge {
    white-space: normal;
    max-width: 12rem;
    line-height: 1.4;
}

.table-card .table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f3f5;
}

.table-card .table tbody tr:last-child td {
    border-bottom: none;
}

.row-id {
    color: var(--railpay-accent-blue);
    font-weight: 700;
}

.table-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.table-actions .action-link {
    color: var(--railpay-primary);
    font-weight: 500;
    text-decoration: none;
    font-size: 0.875rem;
}

.table-actions .action-link:hover {
    text-decoration: underline;
}

.table-actions .action-icon {
    color: #6c757d;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 0.15rem;
}

.table-actions .action-icon:hover {
    color: var(--railpay-primary);
}

.table-actions .action-icon--danger:hover {
    color: #d92550;
}

/* Dashboard (Kero-inspired, RTL-safe) */
.railpay-dash-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1px solid #e9edf3;
    border-radius: 0.55rem;
    box-shadow: 0 0.0625rem 0.25rem rgba(46, 55, 84, 0.05);
}

.railpay-dash-toolbar__welcome {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.railpay-dash-toolbar__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--railpay-primary) 0%, var(--railpay-primary-hover) 100%);
    color: #fff;
    font-size: 0.8rem;
}

.railpay-dash-toolbar__greeting {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.railpay-dash-toolbar__hello {
    font-size: 0.9rem;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20rem;
}

.railpay-dash-toolbar__greeting strong {
    font-weight: 700;
    color: var(--railpay-primary-dark);
}

.railpay-dash-toolbar__subtitle {
    font-size: 0.72rem;
    color: #97a0b5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
}

.railpay-dash-toolbar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-inline-start: auto;
}

.railpay-dash-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8f9fc;
    color: var(--railpay-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.railpay-dash-chip:hover {
    background: #eef1f7;
    border-color: #cfd6e3;
    color: var(--railpay-primary-dark);
}

.railpay-dash-chip i {
    font-size: 0.7rem;
    opacity: 0.85;
}

.railpay-dash-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.railpay-dash-section__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--railpay-primary-dark);
}

.railpay-dash-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
}

.railpay-dash-section__icon--primary {
    background: rgba(46, 55, 84, 0.1);
    color: var(--railpay-primary);
}

.railpay-dash-section__icon--info {
    background: rgba(22, 170, 255, 0.12);
    color: #0d8ecf;
}

.railpay-dash-section__icon--warning {
    background: rgba(247, 185, 36, 0.16);
    color: #c99212;
}

.railpay-dash-section__count {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #f1f3f8;
    color: #6b7488;
    font-size: 0.7rem;
    font-weight: 600;
}

.railpay-dash-section__link {
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.railpay-dash-section__link i {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.railpay-dash-section__link:hover i {
    transform: translateX(-2px);
}

.railpay-dash-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    height: 100%;
    padding: 0.7rem 0.8rem;
    border-radius: 0.6rem;
    background: #fff;
    border: 1px solid #e9edf3;
    box-shadow: 0 0.0625rem 0.25rem rgba(46, 55, 84, 0.04);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.railpay-dash-stat::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--dash-accent, #cfd6e3);
    opacity: 0.85;
}

.railpay-dash-stat--total {
    background: linear-gradient(135deg, #fbfcfe 0%, #f4f6fb 100%);
    border-color: #dde3ee;
}

a.railpay-dash-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.45rem 1rem rgba(46, 55, 84, 0.1);
    border-color: #d8dee8;
    color: inherit;
}

.railpay-dash-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.45rem;
    font-size: 0.875rem;
}

.railpay-dash-stat__content {
    flex: 1 1 auto;
    min-width: 0;
}

.railpay-dash-stat__value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--railpay-primary-dark);
    margin-bottom: 0.05rem;
}

.railpay-dash-stat__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #495057;
    line-height: 1.25;
}

.railpay-dash-stat__subtitle {
    font-size: 0.6875rem;
    color: #8b93a7;
    margin-top: 0.05rem;
}

.railpay-dash-stat--primary {
    --dash-accent: var(--railpay-primary);
}

.railpay-dash-stat--info {
    --dash-accent: #0d8ecf;
}

.railpay-dash-stat--warning {
    --dash-accent: #c99212;
}

.railpay-dash-stat--success {
    --dash-accent: #2a9d5c;
}

.railpay-dash-stat--danger {
    --dash-accent: #c6284a;
}

.railpay-dash-stat--purple {
    --dash-accent: var(--railpay-accent-purple);
}

.railpay-dash-stat--teal {
    --dash-accent: #128c79;
}

.railpay-dash-stat--primary .railpay-dash-stat__icon {
    background: rgba(46, 55, 84, 0.1);
    color: var(--railpay-primary);
}

.railpay-dash-stat--info .railpay-dash-stat__icon {
    background: rgba(22, 170, 255, 0.12);
    color: #0d8ecf;
}

.railpay-dash-stat--warning .railpay-dash-stat__icon {
    background: rgba(247, 185, 36, 0.15);
    color: #c99212;
}

.railpay-dash-stat--success .railpay-dash-stat__icon {
    background: rgba(58, 196, 125, 0.14);
    color: #2a9d5c;
}

.railpay-dash-stat--danger .railpay-dash-stat__icon {
    background: rgba(217, 37, 80, 0.1);
    color: #c6284a;
}

.railpay-dash-stat__meter {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.railpay-dash-stat__meter-track {
    position: relative;
    flex: 1 1 auto;
    height: 0.3rem;
    border-radius: 999px;
    background: #eef0f5;
    overflow: hidden;
}

.railpay-dash-stat__meter-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: 999px;
    background: var(--dash-accent, var(--railpay-primary));
    min-width: 0.3rem;
    transition: width 0.4s ease;
}

.railpay-dash-stat__meter-text {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    color: #8b93a7;
    font-variant-numeric: tabular-nums;
}

.railpay-dash-stat--primary .railpay-dash-stat__value {
    color: var(--railpay-primary);
}

.railpay-dash-stat--info .railpay-dash-stat__value {
    color: #0d8ecf;
}

.railpay-dash-stat--warning .railpay-dash-stat__value {
    color: #b8860b;
}

.railpay-dash-stat--success .railpay-dash-stat__value {
    color: #2a9d5c;
}

.railpay-dash-stat--danger .railpay-dash-stat__value {
    color: #c6284a;
}

.railpay-dash-stat--purple .railpay-dash-stat__icon {
    background: rgba(var(--railpay-accent-purple-rgb), 0.14);
    color: var(--railpay-accent-purple);
}

.railpay-dash-stat--purple .railpay-dash-stat__value {
    color: #6a3f7d;
}

.railpay-dash-stat--teal .railpay-dash-stat__icon {
    background: rgba(var(--railpay-accent-teal-rgb), 0.16);
    color: #128c79;
}

.railpay-dash-stat--teal .railpay-dash-stat__value {
    color: #128c79;
}

@media (max-width: 575.98px) {
    .railpay-dash-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .railpay-dash-toolbar__chips {
        margin-inline-start: 0;
    }

    .railpay-dash-toolbar__greeting {
        max-width: none;
        white-space: normal;
    }

    .railpay-dash-stat__value {
        font-size: 1.15rem;
    }

    .railpay-dash-section__count {
        display: none;
    }
}

.railpay-dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 2.5rem 1.25rem;
    background: #fff;
    border: 1px solid #e9edf3;
    border-radius: 0.6rem;
    box-shadow: 0 0.0625rem 0.25rem rgba(46, 55, 84, 0.04);
}

.railpay-dash-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.25rem;
    border-radius: 50%;
    background: rgba(46, 55, 84, 0.07);
    color: var(--railpay-primary);
    font-size: 1.4rem;
}

.railpay-dash-empty__title {
    font-weight: 700;
    color: var(--railpay-primary-dark);
    margin: 0;
}

.railpay-dash-empty__text {
    font-size: 0.85rem;
    color: #8b93a7;
    max-width: 32rem;
}

/* Legacy widget cards (other pages) */
.widget-content.bg-railpay-primary {
    background: linear-gradient(135deg, var(--railpay-primary) 0%, var(--railpay-primary-dark) 100%);
}

.widget-content.bg-railpay-info {
    background: linear-gradient(135deg, #16aaff 0%, #0d8ecf 100%);
}

.widget-content.bg-railpay-success {
    background: linear-gradient(135deg, #3ac47d 0%, #2a9d5c 100%);
}

.widget-content.bg-railpay-warning {
    background: linear-gradient(135deg, #f7b924 0%, #d99a1a 100%);
}

.widget-content a.widget-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.8125rem;
    display: inline-block;
    margin-top: 0.5rem;
}

.widget-content a.widget-link:hover {
    color: #fff;
}

/* Login page */
body.railpay-login-page,
.app-theme-white.app-container.railpay-login-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--railpay-primary-dark) !important;
    background-image:
        linear-gradient(135deg, rgba(30, 37, 64, 0.5) 0%, rgba(46, 55, 84, 0.35) 50%, rgba(30, 37, 64, 0.55) 100%),
        url("../img/login-background.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

html:has(body.railpay-login-page) {
    background-color: var(--railpay-primary-dark);
}

.railpay-login-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.5rem 1rem;
}

@media (max-width: 767.98px), (hover: none) {
    body.railpay-login-page,
    .app-theme-white.app-container.railpay-login-page {
        background-attachment: scroll;
    }
}

.railpay-login-box .modal-dialog {
    margin: 0;
    max-width: 100%;
}

.railpay-login-box .modal-content {
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(2px);
}

.railpay-login-brand {
    padding-top: 0.25rem;
}

.railpay-login-logo {
    display: block;
    height: 3.25rem;
    width: auto;
    max-width: min(100%, 14rem);
    margin: 0 auto;
    object-fit: contain;
}

/* RTL: icon on the right (start), rounded outer corners on the correct side */
.railpay-login-page .input-group > .input-group-text {
    border-radius: 0 !important;
    border-start-start-radius: 0.35rem !important;
    border-end-start-radius: 0.35rem !important;
}

.railpay-login-page .input-group > .form-control {
    border-radius: 0 !important;
    border-start-end-radius: 0.35rem !important;
    border-end-end-radius: 0.35rem !important;
    margin-left: 0 !important;
    margin-inline-start: -1px;
}

.railpay-login-page .input-group > .form-control:focus {
    z-index: 3;
}

/* Bootstrap modals live on body; stack above Kero sidebar/header (~1001) */
body.modal-open {
    overflow: hidden !important;
}

.modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 !important;
    z-index: 1050 !important;
}

.modal {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 1055 !important;
}

/* RTL modal headers: title on the right, close button on the left */
.modal-header {
    justify-content: space-between;
    gap: 0.75rem;
}

.modal-header .modal-title {
    flex: 1 1 auto;
    margin: 0;
}

.modal-header .btn-close {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    flex-shrink: 0;
    float: none;
    margin: -0.5rem -0.5rem -0.5rem 0 !important;
    padding: 0.5rem;
    opacity: 0.65;
}

.modal-header .btn-close:hover,
.modal-header .btn-close:focus {
    opacity: 1;
}

/* Scrollable modals: prevent dialog stretching beyond content on tall pages */
.modal-dialog.modal-dialog-scrollable {
    height: auto;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: 1rem auto;
}

.modal-dialog-scrollable .modal-content {
    max-height: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    flex: 1 1 auto;
}

/* Persian datepicker above open modals */
.datepicker-container {
    z-index: 1070 !important;
}

/* Page header breadcrumb in Kero style */
.page-title-breadcrumb {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

.page-title-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.page-title-breadcrumb a:hover {
    text-decoration: underline;
}

/* Settlement details page */
.settlement-detail-hero {
    position: relative;
    background: var(--railpay-hero-gradient);
    border-radius: 0.85rem;
    box-shadow: 0 0.6rem 1.6rem rgba(30, 37, 64, 0.28);
    padding: 1.4rem 1.6rem;
    color: #fff;
    overflow: hidden;
}

.settlement-detail-hero::after {
    content: "";
    position: absolute;
    inset-block: -40%;
    inset-inline-start: -10%;
    width: 16rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.settlement-detail-hero__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.settlement-detail-hero__id {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.3rem;
    letter-spacing: 0.01em;
}

.settlement-detail-hero__subtitle {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
}

/* Status badge inside the dark hero needs a light glassy look */
.settlement-detail-hero .status-badge {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
}

.settlement-detail-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin-top: 1.15rem;
    position: relative;
    z-index: 1;
}

.settlement-detail-kpi {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
    backdrop-filter: blur(3px);
}

.settlement-detail-kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.85rem;
}

.settlement-detail-kpi__body {
    min-width: 0;
}

.settlement-detail-kpi__label {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0.2rem;
}

.settlement-detail-kpi__value {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}

.detail-section-card {
    border: none;
    border-radius: 0.7rem;
    box-shadow: 0 0.3rem 1.1rem rgba(46, 55, 84, 0.08);
    overflow: hidden;
}

.detail-section-card .card-header {
    background: linear-gradient(180deg, #fff 0%, #f8fafd 100%);
    border-bottom: 1px solid #eef1f5;
    padding: 0.85rem 1.25rem;
}

.detail-section-card .card-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

/* Colored title icon chips inside detail cards */
.detail-section-card .card-title .section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Thin accent stripe on the start edge of each detail card */
.detail-section-card--purple { box-shadow: inset 4px 0 0 var(--railpay-accent-purple), 0 0.3rem 1.1rem rgba(46, 55, 84, 0.08); }
.detail-section-card--blue { box-shadow: inset 4px 0 0 var(--railpay-accent-blue), 0 0.3rem 1.1rem rgba(46, 55, 84, 0.08); }
.detail-section-card--teal { box-shadow: inset 4px 0 0 var(--railpay-accent-teal), 0 0.3rem 1.1rem rgba(46, 55, 84, 0.08); }
.detail-section-card--cyan { box-shadow: inset 4px 0 0 var(--railpay-accent-cyan), 0 0.3rem 1.1rem rgba(46, 55, 84, 0.08); }
.detail-section-card--coral { box-shadow: inset 4px 0 0 var(--railpay-accent-coral), 0 0.3rem 1.1rem rgba(46, 55, 84, 0.08); }
.detail-section-card--amber { box-shadow: inset 4px 0 0 var(--railpay-accent-amber), 0 0.3rem 1.1rem rgba(46, 55, 84, 0.08); }

.detail-section-card .card-body {
    padding: 1rem 1.25rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.85rem 1.25rem;
}

.detail-item {
    min-width: 0;
}

.detail-label {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.2rem;
}

.detail-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: #212529;
    word-break: break-word;
}

.detail-value--danger {
    color: #d92550;
    font-weight: 600;
}

.barat-info-strip {
    background: linear-gradient(135deg, #f8f9fa 0%, #eef4fb 100%);
    border-bottom: 1px solid #e9ecef;
    padding: 0.85rem 1.25rem;
}

.barat-info-strip .detail-grid {
    gap: 0.5rem 1rem;
}

.action-panel-card .card-header {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-panel-card .card-body {
    padding: 1rem;
}

.action-panel-card .card-title {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Colored action-panel headers by intent */
.action-panel-card--primary .card-header {
    background: linear-gradient(135deg, rgba(var(--railpay-accent-blue-rgb), 0.14) 0%, rgba(var(--railpay-accent-purple-rgb), 0.14) 100%);
    border-bottom-color: rgba(var(--railpay-accent-blue-rgb), 0.2);
}

.action-panel-card--primary .card-title { color: var(--railpay-accent-blue); }

.action-panel-card--warning .card-header {
    background: rgba(var(--railpay-accent-amber-rgb), 0.16);
    border-bottom-color: rgba(var(--railpay-accent-amber-rgb), 0.3);
}

.action-panel-card--warning .card-title { color: #b8860b; }

.action-panel-card--info .card-header {
    background: rgba(var(--railpay-accent-cyan-rgb), 0.14);
    border-bottom-color: rgba(var(--railpay-accent-cyan-rgb), 0.28);
}

.action-panel-card--info .card-title { color: #0d8ecf; }

.action-panel-card--teal .card-header {
    background: rgba(var(--railpay-accent-teal-rgb), 0.14);
    border-bottom-color: rgba(var(--railpay-accent-teal-rgb), 0.28);
}

.action-panel-card--teal .card-title { color: #128c79; }

.attachment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.attachment-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f3f5;
}

.attachment-list li:last-child {
    border-bottom: none;
}

.attachment-list a {
    color: var(--railpay-primary);
    text-decoration: none;
    font-size: 0.875rem;
}

.attachment-list a:hover {
    text-decoration: underline;
}

.settlement-detail-sidebar {
    position: sticky;
    top: 1rem;
}

@media (max-width: 991.98px) {
    .settlement-detail-sidebar {
        position: static;
    }
}

.collapse-section-toggle {
    color: inherit;
    cursor: pointer;
}

.collapse-section-toggle:hover {
    background: #f8f9fa !important;
}

.collapse-section-toggle .collapse-section-chevron {
    transition: transform 0.2s ease;
}

.collapse-section-toggle:not(.collapsed) .collapse-section-chevron,
.collapse-section-toggle[aria-expanded="true"] .collapse-section-chevron {
    transform: rotate(180deg);
}

/* Reusable accent icon chips. Placed last so accent backgrounds reliably
   override base chip backgrounds (e.g. .list-page-card__icon) when combined. */
.accent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    flex-shrink: 0;
}

.accent-icon--purple {
    background: rgba(var(--railpay-accent-purple-rgb), 0.12);
    color: var(--railpay-accent-purple);
}

.accent-icon--blue {
    background: rgba(var(--railpay-accent-blue-rgb), 0.12);
    color: var(--railpay-accent-blue);
}

.accent-icon--teal {
    background: rgba(var(--railpay-accent-teal-rgb), 0.14);
    color: #128c79;
}

.accent-icon--cyan {
    background: rgba(var(--railpay-accent-cyan-rgb), 0.12);
    color: #0d8ecf;
}

.accent-icon--coral {
    background: rgba(var(--railpay-accent-coral-rgb), 0.12);
    color: var(--railpay-accent-coral);
}

.accent-icon--amber {
    background: rgba(var(--railpay-accent-amber-rgb), 0.16);
    color: #c99212;
}

.accent-icon--green {
    background: rgba(var(--railpay-accent-green-rgb), 0.14);
    color: #2a9d5c;
}

.accent-icon--pink {
    background: rgba(var(--railpay-accent-pink-rgb), 0.12);
    color: var(--railpay-accent-pink);
}