/*
 * CLM Admin Portal Styles — "Skydash" light theme
 * Scoped to .clm-ap.
 *
 * Palette:
 *   primary        #4B49AC  (indigo)
 *   primary-light  #98BDFF  (light blue)
 *   blue           #7DA0FA
 *   purple         #7978E9
 *   coral          #F3797E
 */

/* ── Palette ───────────────────────────────────────────────────── */
.clm-ap {
    --clm-primary:        #4B49AC;
    --clm-primary-dark:   #3d3b91;
    --clm-primary-tint:   #ECECF8;
    --clm-blue:           #7DA0FA;
    --clm-blue-light:     #98BDFF;
    --clm-purple:         #7978E9;
    --clm-coral:          #F3797E;
    --clm-accent:         #7978E9;
    --clm-accent-light:   #EFEFFC;
    --clm-danger:         #F3797E;
    --clm-success:        #34B1AA;
    --clm-warning:        #F5A623;
    --clm-text:           #343a40;
    --clm-heading:        #2E2E3A;
    --clm-muted:          #8A8FA3;
    --clm-border:         #E8EAF3;
    --clm-bg:             #F0F1F7;
    --clm-card-bg:        #ffffff;
    --clm-sidebar-bg:     #ffffff;
    --clm-sidebar-hover:  #F4F5FB;
    --clm-radius:         12px;
    --clm-radius-sm:      8px;
    --clm-shadow:         0 4px 18px rgba(75, 73, 172, .06);
    --clm-shadow-lg:      0 8px 28px rgba(75, 73, 172, .12);
    --clm-topbar-h:       60px;
    --clm-nav-w:          236px;
    --ap-surface-alt:     #F4F5FB;

    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--clm-text);
    background: var(--clm-bg);
    min-height: 100vh;
    box-sizing: border-box;
}
.clm-ap *, .clm-ap *::before, .clm-ap *::after { box-sizing: border-box; }

/* ── Top bar (white, Skydash style) ───────────────────────────── */
.clm-ap-topbar {
    position: sticky; top: 0; z-index: 200;
    height: var(--clm-topbar-h);
    background: #fff;
    color: var(--clm-heading);
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-shadow: 0 2px 12px rgba(75, 73, 172, .08);
    gap: 12px;
}
.clm-ap-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.clm-ap-brand-name {
    font-weight: 800; font-size: 1.08rem; color: var(--clm-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -.01em;
}
.clm-ap-brand-sub  { font-size: .7rem; color: var(--clm-muted); white-space: nowrap; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.clm-ap-topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.clm-ap-user-name  { font-size: .85rem; font-weight: 600; color: var(--clm-heading); white-space: nowrap; }
.clm-ap-user-role  { font-size: .72rem; color: var(--clm-muted); white-space: nowrap; }

/* Log-out button — shell uses .btn-outline-light, restyle for white topbar */
.clm-ap-topbar .btn-outline-light {
    color: var(--clm-primary);
    border-color: var(--clm-primary-tint);
    background: var(--clm-primary-tint);
    font-weight: 600;
    border-radius: 8px;
}
.clm-ap-topbar .btn-outline-light:hover {
    color: #fff;
    background: var(--clm-primary);
    border-color: var(--clm-primary);
}

/* Hamburger toggle (visible on mobile only) */
.clm-ap-nav-toggle {
    display: none;
    background: none; border: none; color: var(--clm-heading);
    padding: 6px; cursor: pointer; border-radius: 8px;
    line-height: 1;
}
.clm-ap-nav-toggle:hover { background: var(--clm-primary-tint); color: var(--clm-primary); }
.clm-ap-nav-toggle .dashicons { font-size: 1.4rem; width: auto; height: auto; }

/* ── Layout ──────────────────────────────────────────────────── */
.clm-ap-layout {
    display: flex;
    min-height: calc(100vh - var(--clm-topbar-h));
    position: relative;
}

/* ── Sidebar (white, indigo active pill) ─────────────────────── */
.clm-ap-nav {
    width: var(--clm-nav-w); flex-shrink: 0;
    background: var(--clm-sidebar-bg);
    padding: 16px 12px;
    display: flex; flex-direction: column;
    position: sticky; top: var(--clm-topbar-h);
    height: calc(100vh - var(--clm-topbar-h));
    overflow-y: auto; overflow-x: hidden;
    transition: transform .25s ease;
    z-index: 150;
    border-right: 1px solid var(--clm-border);
}
.clm-ap-nav-label {
    font-size: .66rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--clm-muted);
    padding: 6px 14px 8px;
}
.clm-ap-nav-item {
    display: flex; align-items: center; gap: 11px;
    color: #6C7383; text-decoration: none;
    padding: 10px 14px; font-size: .86rem; font-weight: 500;
    transition: background .14s, color .14s;
    border-radius: 10px;
    margin-bottom: 2px;
    white-space: nowrap; overflow: hidden;
}
.clm-ap-nav-item:hover  { background: var(--clm-sidebar-hover); color: var(--clm-primary); }
.clm-ap-nav-item.active {
    background: var(--clm-primary); color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(75, 73, 172, .28);
}
.clm-ap-nav-item.active:hover { background: var(--clm-primary-dark); color: #fff; }
.clm-ap-nav-item .dashicons { font-size: 1.08rem; width: auto; height: auto; flex-shrink: 0; }
.clm-ap-nav-spacer { flex: 1; }
.clm-ap-nav-divider { border-top: 1px solid var(--clm-border); margin: 10px 4px; }
.clm-ap-nav-logout { color: var(--clm-muted); }
.clm-ap-nav-logout:hover { color: var(--clm-coral); background: #FDEEEF; }

/* Backdrop for mobile sidebar */
.clm-ap-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(46, 46, 58, .45); z-index: 140;
}

/* ── Main content ─────────────────────────────────────────────── */
.clm-ap-main {
    flex: 1; padding: 28px; overflow-x: hidden;
    min-width: 0;
}
.clm-ap-page { max-width: 1280px; }

/* ── Page header ─────────────────────────────────────────────── */
.clm-ap-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px; flex-wrap: wrap; gap: 10px;
}
.clm-ap-page-title {
    font-size: 1.32rem; font-weight: 700; color: var(--clm-heading); margin: 0;
    letter-spacing: -.01em;
}
.clm-ap-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: .8rem; color: var(--clm-muted); margin-bottom: 4px;
}
.clm-ap-breadcrumb a { color: var(--clm-primary); text-decoration: none; }
.clm-ap-breadcrumb a:hover { text-decoration: underline; }
.clm-ap-breadcrumb-sep { opacity: .5; }

/* ── KPI cards (solid Skydash tiles) ─────────────────────────── */
.clm-ap-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px; margin-bottom: 26px;
}
.clm-ap-kpi {
    background: var(--clm-card-bg); border-radius: var(--clm-radius);
    padding: 18px 20px; box-shadow: var(--clm-shadow);
    border: none;
    position: relative;
    overflow: hidden;
}
.clm-ap-kpi-icon {
    position: absolute; right: 14px; top: 12px;
    opacity: .18; font-size: 2.1rem;
}
.clm-ap-kpi-icon .dashicons { font-size: 2.1rem; width: auto; height: auto; }
.clm-ap-kpi-label {
    font-size: .74rem; font-weight: 600;
    letter-spacing: .03em; color: var(--clm-muted);
}
.clm-ap-kpi-value {
    font-size: 1.65rem; font-weight: 700; color: var(--clm-heading);
    margin: 5px 0 2px; line-height: 1.1; letter-spacing: -.01em;
}
.clm-ap-kpi-sub { font-size: .72rem; color: var(--clm-muted); }

/* Coloured variants — solid background, white text (reference tiles) */
.clm-ap-kpi--primary { background: var(--clm-primary); }
.clm-ap-kpi--success { background: var(--clm-blue); }
.clm-ap-kpi--warning { background: var(--clm-blue-light); }
.clm-ap-kpi--accent  { background: var(--clm-purple); }
.clm-ap-kpi--danger  { background: var(--clm-coral); }

.clm-ap-kpi--primary, .clm-ap-kpi--success, .clm-ap-kpi--warning,
.clm-ap-kpi--accent,  .clm-ap-kpi--danger {
    box-shadow: 0 6px 18px rgba(75, 73, 172, .18);
}
.clm-ap-kpi--primary .clm-ap-kpi-label, .clm-ap-kpi--primary .clm-ap-kpi-value, .clm-ap-kpi--primary .clm-ap-kpi-sub,
.clm-ap-kpi--success .clm-ap-kpi-label, .clm-ap-kpi--success .clm-ap-kpi-value, .clm-ap-kpi--success .clm-ap-kpi-sub,
.clm-ap-kpi--warning .clm-ap-kpi-label, .clm-ap-kpi--warning .clm-ap-kpi-value, .clm-ap-kpi--warning .clm-ap-kpi-sub,
.clm-ap-kpi--accent  .clm-ap-kpi-label, .clm-ap-kpi--accent  .clm-ap-kpi-value, .clm-ap-kpi--accent  .clm-ap-kpi-sub,
.clm-ap-kpi--danger  .clm-ap-kpi-label, .clm-ap-kpi--danger  .clm-ap-kpi-value, .clm-ap-kpi--danger  .clm-ap-kpi-sub {
    color: #fff;
}
.clm-ap-kpi--primary .clm-ap-kpi-label, .clm-ap-kpi--success .clm-ap-kpi-label,
.clm-ap-kpi--warning .clm-ap-kpi-label, .clm-ap-kpi--accent .clm-ap-kpi-label,
.clm-ap-kpi--danger .clm-ap-kpi-label { opacity: .85; }
.clm-ap-kpi--primary .clm-ap-kpi-sub, .clm-ap-kpi--success .clm-ap-kpi-sub,
.clm-ap-kpi--warning .clm-ap-kpi-sub, .clm-ap-kpi--accent .clm-ap-kpi-sub,
.clm-ap-kpi--danger .clm-ap-kpi-sub { opacity: .8; }
.clm-ap-kpi--primary .clm-ap-kpi-icon, .clm-ap-kpi--success .clm-ap-kpi-icon,
.clm-ap-kpi--warning .clm-ap-kpi-icon, .clm-ap-kpi--accent .clm-ap-kpi-icon,
.clm-ap-kpi--danger .clm-ap-kpi-icon { color: #fff; opacity: .28; }
.clm-ap-kpi--primary a, .clm-ap-kpi--success a, .clm-ap-kpi--warning a,
.clm-ap-kpi--accent a,  .clm-ap-kpi--danger a {
    color: #fff; text-decoration: underline; text-underline-offset: 2px;
}

/* ── Cards ───────────────────────────────────────────────────── */
.clm-ap-card {
    background: var(--clm-card-bg); border-radius: var(--clm-radius);
    box-shadow: var(--clm-shadow); border: none;
    margin-bottom: 22px; overflow: hidden;
}
.clm-ap-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--clm-border);
    background: #fff;
}
.clm-ap-card-title {
    font-size: .92rem; font-weight: 700;
    color: var(--clm-heading); margin: 0;
    letter-spacing: -.01em;
}
.clm-ap-card-body { padding: 18px 20px; }

/* ── Filter bar ──────────────────────────────────────────────── */
.clm-ap-filter {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; background: #fff;
    border-bottom: 1px solid var(--clm-border);
    flex-wrap: wrap;
}
.clm-ap-filter .form-control,
.clm-ap-filter .form-select {
    font-size: .82rem; padding: 7px 12px; height: auto;
    border-radius: 8px; border-color: var(--clm-border);
    background-color: #F8F9FD;
    /* Bootstrap defaults to width:100%, which makes each control wrap onto
       its own full-width row inside the flex-wrap bar — size to content. */
    width: auto; flex: 0 1 auto;
}
.clm-ap-filter .form-control:focus,
.clm-ap-filter .form-select:focus { background-color: #fff; }
.clm-ap-filter .form-control { min-width: 180px; max-width: 260px; }
.clm-ap-filter .form-select  { min-width: 130px; max-width: 210px; }
.clm-ap-filter-search { position: relative; flex: 0 1 260px; min-width: 200px; }
.clm-ap-filter-search .dashicons {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--clm-muted); font-size: 1rem; width: auto; height: auto;
}
.clm-ap-filter-search .form-control {
    padding-left: 32px; width: 100%; min-width: 0; max-width: none;
}

/* ── Data table ──────────────────────────────────────────────── */
.clm-ap-table-wrap { overflow-x: auto; }
.clm-ap-table {
    width: 100%; border-collapse: collapse; font-size: .84rem;
}
.clm-ap-table thead th {
    background: #F4F5FB; font-weight: 600; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em;
    padding: 11px 14px; border-bottom: none;
    white-space: nowrap; color: #6C7383;
}
.clm-ap-table thead th:first-child { border-radius: 0; }
.clm-ap-table tbody td {
    padding: 11px 14px; border-bottom: 1px solid #F1F2F8;
    vertical-align: middle;
}
.clm-ap-table tbody tr:hover { background: #F8F9FE; }
.clm-ap-table tbody tr:last-child td { border-bottom: none; }
.clm-ap-table tbody th {
    padding: 11px 14px; border-bottom: 1px solid #F1F2F8;
    vertical-align: middle; font-weight: 600; color: var(--clm-heading);
    font-size: .8rem;
}
.clm-ap-table tfoot td, .clm-ap-table tfoot th {
    background: #F4F5FB; font-weight: 700; color: var(--clm-heading);
    padding: 11px 14px; border-top: 2px solid var(--clm-border);
    border-bottom: none; font-size: .82rem;
}
.clm-ap-table .font-mono { font-family: 'Consolas', 'Courier New', monospace; font-size: .82rem; }
.clm-ap-table .ap-actions { white-space: nowrap; }
.clm-ap-actions-col { text-align: right; }

/* ── Table footer / pagination ───────────────────────────────── */
.clm-ap-table-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-top: 1px solid var(--clm-border);
    background: #fff; flex-wrap: wrap; gap: 8px;
}
.clm-ap-table-info { font-size: .8rem; color: var(--clm-muted); }
.clm-ap-table-footer .pagination { margin: 0; }

/* Pagination — indigo */
.clm-ap .pagination .page-link {
    color: var(--clm-primary); border-color: var(--clm-border);
    font-size: .8rem;
}
.clm-ap .pagination .page-link:hover { background: var(--clm-primary-tint); }
.clm-ap .pagination .page-item.active .page-link {
    background: var(--clm-primary); border-color: var(--clm-primary); color: #fff;
}
.clm-ap .pagination .page-item.disabled .page-link { color: var(--clm-muted); }

/* ── Buttons ─────────────────────────────────────────────────── */
.clm-ap .btn { border-radius: 8px; font-weight: 600; }
.clm-ap .btn-xs {
    padding: 2px 9px; font-size: .78rem; border-radius: 6px; line-height: 1.6;
}
.clm-ap .btn-primary {
    background-color: var(--clm-primary); border-color: var(--clm-primary);
}
.clm-ap .btn-primary:hover, .clm-ap .btn-primary:focus, .clm-ap .btn-primary:active {
    background-color: var(--clm-primary-dark) !important;
    border-color: var(--clm-primary-dark) !important;
}
.clm-ap .btn-outline-primary {
    color: var(--clm-primary); border-color: var(--clm-primary);
}
.clm-ap .btn-outline-primary:hover, .clm-ap .btn-outline-primary:active {
    background-color: var(--clm-primary) !important;
    border-color: var(--clm-primary) !important;
    color: #fff !important;
}
.clm-ap .btn-danger { background-color: var(--clm-coral); border-color: var(--clm-coral); }
.clm-ap .btn-danger:hover { background-color: #ef5d63; border-color: #ef5d63; }
.clm-ap .btn-outline-danger { color: #E0464D; border-color: var(--clm-coral); }
.clm-ap .btn-outline-danger:hover { background-color: var(--clm-coral); border-color: var(--clm-coral); color: #fff; }
.clm-ap .btn-success { background-color: #34B1AA; border-color: #34B1AA; }
.clm-ap .btn-success:hover, .clm-ap .btn-success:focus {
    background-color: #2A968F !important; border-color: #2A968F !important;
}
.clm-ap .btn-outline-success { color: #2A968F; border-color: #34B1AA; }
.clm-ap .btn-outline-success:hover { background-color: #34B1AA; border-color: #34B1AA; color: #fff; }
.clm-ap .btn-warning { background-color: #F5A623; border-color: #F5A623; color: #fff; }
.clm-ap .btn-warning:hover { background-color: #DD941A; border-color: #DD941A; color: #fff; }
.clm-ap .btn-outline-warning { color: #B07D17; border-color: #F5A623; }
.clm-ap .btn-outline-warning:hover { background-color: #F5A623; border-color: #F5A623; color: #fff; }
.clm-ap .text-primary { color: var(--clm-primary) !important; }
.clm-ap .text-danger  { color: #E0464D !important; }
.clm-ap .text-success { color: #1E8E87 !important; }
.clm-ap a { color: var(--clm-primary); }

/* ── Nav tabs (accounting / reports / settings) ──────────────── */
.clm-ap .nav-tabs {
    border-bottom: 1px solid var(--clm-border);
    gap: 2px;
}
.clm-ap .nav-tabs .nav-link {
    color: #6C7383; font-size: .84rem; font-weight: 600;
    border: none; border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 9px 16px;
}
.clm-ap .nav-tabs .nav-link:hover {
    color: var(--clm-primary); background: var(--clm-primary-tint);
    border-bottom-color: transparent;
}
.clm-ap .nav-tabs .nav-link.active {
    color: var(--clm-primary); background: transparent;
    border-bottom: 3px solid var(--clm-primary);
}

/* ── Badges — soft tinted (Skydash style) ────────────────────── */
.clm-ap .badge {
    font-size: .72rem; font-weight: 600; text-transform: capitalize;
    padding: .36em .68em; border-radius: 6px;
}
.clm-ap .badge.text-bg-primary   { background-color: var(--clm-primary-tint) !important; color: var(--clm-primary) !important; }
.clm-ap .badge.text-bg-success   { background-color: #E1F3F2 !important; color: #1E8E87 !important; }
.clm-ap .badge.text-bg-danger    { background-color: #FDEBEC !important; color: #D9434E !important; }
.clm-ap .badge.text-bg-warning   { background-color: #FDF3E1 !important; color: #B07D17 !important; }
.clm-ap .badge.text-bg-info      { background-color: #E5EDFD !important; color: #3D6FD8 !important; }
.clm-ap .badge.text-bg-secondary { background-color: #EEF0F6 !important; color: #5A6270 !important; }
.clm-ap .badge.text-bg-dark      { background-color: #2E2E3A !important; color: #fff !important; }
.clm-ap .badge.text-bg-light     { background-color: #F4F5FB !important; color: #5A6270 !important; }

/* ── Notices ─────────────────────────────────────────────────── */
#ap-notices {
    position: fixed; bottom: 20px; right: 20px;
    z-index: 500; width: min(360px, calc(100vw - 40px));
    display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
#ap-notices .alert {
    box-shadow: var(--clm-shadow-lg); pointer-events: auto; margin: 0;
    font-size: .875rem; border: none; border-radius: 10px;
}

/* Alerts inside the page */
.clm-ap .alert { border-radius: 10px; border: none; }
.clm-ap .alert-success { background: #E1F3F2; color: #1E8E87; }
.clm-ap .alert-danger  { background: #FDEBEC; color: #D9434E; }
.clm-ap .alert-warning { background: #FDF3E1; color: #B07D17; }
.clm-ap .alert-info,
.clm-ap .alert-light   { background: #F4F5FB; color: #5A6270; }

/* ── Stat definition list ────────────────────────────────────── */
.clm-ap-dl {
    display: grid; grid-template-columns: auto 1fr;
    gap: 6px 16px; font-size: .85rem;
}
.clm-ap-dl dt { font-size: .72rem; font-weight: 600; color: var(--clm-muted);
    text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; align-self: center; }
.clm-ap-dl dd { margin: 0; align-self: center; }

/* ── Detail page two-col layout ──────────────────────────────── */
.clm-ap-detail-row { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.clm-ap-detail-main   { flex: 1 1 500px; min-width: 0; }
.clm-ap-detail-side   { flex: 0 0 290px; }

/* ── Loan / member item list ─────────────────────────────────── */
.clm-ap-item-list    { display: flex; flex-direction: column; gap: 12px; }
.clm-ap-item         { background: #F8F9FD; border: 1px solid var(--clm-border);
    border-radius: 10px; padding: 14px 16px; }
.clm-ap-item-head    { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.clm-ap-item-no      { font-weight: 700; font-family: 'Consolas', monospace; font-size: .88rem; }
.clm-ap-item-body    { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.clm-ap-item-footer  { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ── Stat value pair ─────────────────────────────────────────── */
.clm-ap-stat         { display: flex; flex-direction: column; gap: 1px; }
.clm-ap-stat-label   { font-size: .7rem; text-transform: uppercase; color: var(--clm-muted); font-weight: 600; }
.clm-ap-stat-value   { font-size: .9rem; font-weight: 600; color: var(--clm-heading); }

/* ── Transaction list ────────────────────────────────────────── */
.clm-ap-tx-list     { display: flex; flex-direction: column; }
.clm-ap-tx          { display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid #F1F2F8; gap: 10px; }
.clm-ap-tx:last-child { border-bottom: none; }
.clm-ap-tx-meta     { display: flex; flex-direction: column; min-width: 0; }
.clm-ap-tx-or       { font-size: .82rem; font-family: 'Consolas', monospace; font-weight: 600; }
.clm-ap-tx-date     { font-size: .72rem; color: var(--clm-muted); }
.clm-ap-tx-amount   { font-weight: 700; white-space: nowrap; font-size: .9rem; }
.clm-ap-tx-amount--cr { color: #1E8E87; }
.clm-ap-tx-amount--dr { color: #D9434E; }

/* ── Payment allocation preview ──────────────────────────────── */
.ap-payment-alloc     { background: #F8F9FD; border-radius: 10px; padding: 14px; font-size: .85rem; }
.ap-alloc-row         { display: flex; justify-content: space-between; padding: 4px 0;
    border-bottom: 1px solid var(--clm-border); }
.ap-alloc-row:last-child { border-bottom: none; }

/* ── Report output areas ─────────────────────────────────────── */
.ap-rpt-output { min-height: 120px; }
.ap-rpt-output .clm-ap-card + .clm-ap-card { margin-top: 16px; }
.ap-rpt-output .row > [class*="col-"] .clm-ap-card { height: 100%; }

/* ── Modal tweaks (light header) ─────────────────────────────── */
.clm-ap .modal-content { border: none; border-radius: var(--clm-radius); box-shadow: var(--clm-shadow-lg); }
.clm-ap .modal-header {
    background: #fff; color: var(--clm-heading);
    border-bottom: 1px solid var(--clm-border);
    padding: 16px 20px;
}
.clm-ap .modal-title { font-size: .98rem; font-weight: 700; color: var(--clm-heading); }
.clm-ap .modal-footer { border-top: 1px solid var(--clm-border); }

/* Offcanvas */
.clm-ap ~ .offcanvas, .offcanvas { font-size: 14px; }

/* ── Schedule table (loan detail) ────────────────────────────── */
.clm-ap-schedule { font-size: .8rem; }
.clm-ap-schedule th { font-size: .72rem; }
.clm-ap-schedule .row-paid    { color: var(--clm-muted); }
.clm-ap-schedule .row-overdue { background: #FDF1F2; color: #D9434E; }
.clm-ap-schedule .row-partial { background: #FDF8EC; }

/* ── Loan suggestion dropdown ────────────────────────────────── */
#ap-loan-suggestions {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
    border: 1px solid var(--clm-border); border-radius: 0 0 10px 10px;
    max-height: 220px; overflow-y: auto; box-shadow: var(--clm-shadow-lg);
}
#ap-loan-suggestions .list-group-item { font-size: .83rem; padding: 8px 12px; }

/* ── KPI mini (release preview) ──────────────────────────────── */
.ap-kpi-mini { padding: 10px 8px; background: #F8F9FD; border-radius: 8px; }
.ap-kpi-mini-label { font-size: .68rem; text-transform: uppercase; color: var(--clm-muted);
    font-weight: 600; display: block; }
.ap-kpi-mini-val { font-size: .92rem; font-weight: 700; color: var(--clm-primary); }

/* ── Empty state ─────────────────────────────────────────────── */
.clm-ap-empty { text-align: center; color: var(--clm-muted); padding: 36px 16px;
    font-size: .9rem; }
.clm-ap-empty .dashicons { font-size: 2.5rem; width: auto; height: auto; margin-bottom: 8px; opacity: .35; }

/* ── Form sections ───────────────────────────────────────────── */
.clm-ap-form-section { margin-bottom: 22px; }
.clm-ap-form-section-title {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--clm-muted); margin-bottom: 12px;
    padding-bottom: 7px; border-bottom: 1px solid var(--clm-border);
}
.clm-ap .form-label { font-size: .8rem; font-weight: 600; margin-bottom: 4px; color: var(--clm-heading); }
.clm-ap .form-control, .clm-ap .form-select {
    font-size: .85rem; border-radius: 8px; border-color: var(--clm-border);
}
.clm-ap .form-control:focus, .clm-ap .form-select:focus {
    border-color: var(--clm-primary);
    box-shadow: 0 0 0 .18rem rgba(75, 73, 172, .15);
}
.clm-ap .form-check-input:checked {
    background-color: var(--clm-primary);
    border-color: var(--clm-primary);
}
.clm-ap .form-check-input:focus {
    border-color: var(--clm-primary);
    box-shadow: 0 0 0 .18rem rgba(75, 73, 172, .15);
}

/* ── Loan position indicator ─────────────────────────────────── */
.clm-ap-loan-search-wrap { position: relative; }

/* ── Interest-type selector cards (loan products) ────────────── */
.ap-interest-type-card {
    border-color: var(--clm-border) !important;
    border-radius: 10px !important;
    transition: border-color .14s, background .14s;
}
.ap-interest-type-card:hover {
    border-color: var(--clm-purple) !important;
    background: var(--clm-accent-light);
}
.ap-interest-type-card.active {
    border-color: var(--clm-primary) !important;
    background: var(--clm-primary-tint);
    box-shadow: 0 0 0 1px var(--clm-primary);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 991px) {
    .clm-ap-detail-side { flex: 1 1 100%; }
}

@media (max-width: 767px) {
    .clm-ap-nav-toggle { display: flex; align-items: center; }

    .clm-ap-nav {
        position: fixed;
        top: var(--clm-topbar-h); left: 0; bottom: 0;
        width: var(--clm-nav-w);
        transform: translateX(calc(-1 * var(--clm-nav-w)));
        box-shadow: var(--clm-shadow-lg);
    }
    .clm-ap-nav.ap-nav--open { transform: translateX(0); }
    .clm-ap-backdrop.ap-nav--open { display: block; }

    .clm-ap-main { padding: 14px; }
    .clm-ap-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .clm-ap-kpi-value { font-size: 1.25rem; }
    .clm-ap-page-title { font-size: 1.1rem; }

    .clm-ap-filter { gap: 8px; }
    .clm-ap-filter .form-control { min-width: 0; width: 100%; max-width: none; }
    .clm-ap-filter .form-select  { min-width: 0; width: 100%; max-width: none; }
    .clm-ap-filter-search { flex: 1 1 100%; min-width: 0; }

    .clm-ap-brand-sub { display: none; }
    .clm-ap-user-role { display: none; }

    .clm-ap-detail-row { flex-direction: column; }
    .clm-ap-detail-side { flex: none; width: 100%; }
}

@media (max-width: 479px) {
    .clm-ap-kpi-grid { grid-template-columns: 1fr 1fr; }
    .clm-ap-topbar { padding: 0 14px; }
}

/* ─────────────────────────────────────────────────────────────── */
/* Member portal mobile improvements (scoped to .clm-portal)       */
/* ─────────────────────────────────────────────────────────────── */

/* Mobile hamburger for member portal (white topbar — dark icon) */
.clm-portal-nav-toggle {
    display: none;
    background: none; border: none; color: #2E2E3A;
    padding: 6px; cursor: pointer; border-radius: 8px; line-height: 1;
}
.clm-portal-nav-toggle:hover { background: #ECECF8; color: #4B49AC; }
.clm-portal-nav-toggle .dashicons { font-size: 1.4rem; width: auto; height: auto; }

.clm-portal-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(46,46,58,.45); z-index: 95; /* below .clm-portal-nav z:100 */
}

@media (max-width: 767px) {
    .clm-portal-nav-toggle { display: flex; align-items: center; }
    .clm-portal-topbar { padding: 0 12px; }

    /* Hide icon-only mode; replace with hidden/slide-in */
    .clm-portal-nav {
        position: fixed;
        top: var(--clm-topbar-h); left: 0; bottom: 0;
        width: var(--clm-nav-w);
        transform: translateX(calc(-1 * var(--clm-nav-w)));
        transition: transform .25s ease;
        z-index: 100;
        /* override old icon-only rules */
        padding: 16px 0;
    }
    .clm-portal-nav.clm-nav--open { transform: translateX(0); }
    .clm-portal-nav .clm-nav-item { padding: 12px 20px; justify-content: flex-start; }
    .clm-portal-nav .clm-nav-item span { display: inline !important; }
    .clm-portal-backdrop.clm-nav--open { display: block; }

    .clm-portal-main { padding: 14px; }
}