/* Small layout fixes found in the page review (2026-10-16) */

/* PWA "Install App" button covered the sidebar (Settings) at bottom-left: move to bottom-right */
.pwa-install-btn {
    position: fixed !important;
    left: auto !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 900 !important;
}
.pwa-install-btn ~ .pwa-install-btn {
    display: none !important;
}

/* Secondary line inside table money cells (e.g. 'price + fees') */
.cell-sub {
    font-size: 0.72rem;
    color: var(--ds-text-muted, #64748b);
    font-weight: 400;
    white-space: nowrap;
}

/* Hover lift (replaces inline onmouseover/onmouseout handlers) */
[data-hover-lift] {
    transition:
        transform 0.15s,
        box-shadow 0.15s;
}
[data-hover-lift]:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Hover help tips: <span class="tip" data-tip="..."> */
.tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: #94a3b8;
    cursor: help;
    font-size: 0.8em;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.tip:hover,
.tip:focus {
    color: #6366f1;
    outline: none;
}
.tip::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 280px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
    white-space: normal;
    text-align: left;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
}
.tip:hover::after,
.tip:focus::after {
    opacity: 1;
}
th .tip::after {
    font-weight: 400;
}
.stat-card-sub {
    font-size: 0.78rem;
    color: var(--ds-text-muted, #64748b);
    margin-top: 2px;
}

/* Phone / tablet drawer (2026-10-16): the overlay (z 999) sat ABOVE the sidebar (z 100), so taps on the
   menu hit the overlay; the Leaflet map (panes z 400-1000) also drew over the sidebar. */
@media (max-width: 1024px) {
    .sidebar {
        z-index: 1001 !important;
    }
    .sidebar.collapsed {
        width: var(--sidebar-width) !important;
    }
}
#dubai-map-widget,
.leaflet-container {
    position: relative;
    z-index: 0;
    isolation: isolate;
}

/* Partner Capital table (dashboard): fit the card, no sideways scroll; whole row opens the statement.
   Columns: 1 partner 2 units 3 paid price 4 expenses 5 contributed 6 share of cost 7 still to pay
   8 next 3 months 9 progress 10 actions. Less important columns drop away as the screen narrows. */
.pc-table-wrap {
    overflow-x: visible;
    container-type: inline-size;
    container-name: pctable;
}
.pc-table {
    width: 100%;
    table-layout: auto;
    font-size: 0.8rem;
}
.pc-table th,
.pc-table td {
    padding: 0.55rem 0.45rem !important;
}
.pc-table th {
    white-space: normal;
    line-height: 1.25;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    vertical-align: bottom;
}
.pc-table td.pc-num {
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pc-table th:nth-child(n + 3):nth-child(-n + 8) {
    text-align: right;
}
.pc-table td:first-child {
    max-width: 9.5rem;
}
.pc-caption {
    caption-side: top;
    text-align: right;
    font-size: 0.7rem;
    color: var(--ds-text-muted, #64748b);
    padding: 0 0.45rem 0.35rem;
}
.pc-table td:first-child strong {
    white-space: normal;
}
.pc-table th:nth-child(2),
.pc-table td:nth-child(2) {
    text-align: center;
}
.pc-table .pc-progress {
    min-width: 60px;
}
.pc-table .pc-actions {
    white-space: nowrap;
}
.pc-table .pc-actions .btn {
    padding: 0.2rem 0.35rem;
}
.pc-row {
    cursor: pointer;
}
/* the whole row opens the statement, so the eye/chart buttons column is not needed */
.pc-table th:nth-child(10),
.pc-table td:nth-child(10) {
    display: none;
}
.pc-row:hover td {
    background: var(--bg-hover, rgba(99, 102, 241, 0.06));
}
.pc-units-chip,
.ps-share-chip {
    display: none;
}
@container pctable (min-width: 761px) and (max-width: 900px) {
    .pc-table th:nth-child(9),
    .pc-table td:nth-child(9),
    .pc-table th:nth-child(8),
    .pc-table td:nth-child(8) {
        display: none;
    }
}
/* Narrow (phones folded/unfolded, small tablets): each partner becomes a labelled card; the stats flow
   into as many columns as fit (2 on a phone, 3-4 on an unfolded or tablet screen). */
@container pctable (max-width: 760px) {
    .pc-table,
    .pc-table tbody {
        display: block;
        width: 100%;
    }
    .pc-table thead {
        display: none;
    }
    .pc-table caption {
        display: block;
        text-align: left;
        padding: 0 0 0.6rem;
        line-height: 1.4;
    }
    .pc-table tr.pc-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
        gap: 0.55rem 1rem;
        padding: 0.8rem 0.9rem;
        margin-bottom: 0.65rem;
        border: 1px solid var(--border-light, var(--ds-border, #e2e8f0));
        border-radius: 12px;
        background: transparent;
    }
    .pc-table tr.pc-row:hover {
        background: var(--bg-hover, rgba(99, 102, 241, 0.06));
    }
    .pc-table tr.pc-row:hover td {
        background: transparent;
    }
    .pc-table tr.pc-row td {
        display: block;
        padding: 0 !important;
        border: 0;
        min-width: 0;
        max-width: none;
        text-align: left;
        white-space: normal;
        font-size: 0.92rem;
    }
    .pc-table tr.pc-row td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.64rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted, var(--ds-text-muted, #64748b));
        margin-bottom: 2px;
    }
    .pc-table tr.pc-row td.pc-name {
        grid-column: 1 / -1;
        font-size: 1rem;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid var(--border-light, var(--ds-border, #e2e8f0));
    }
    .pc-table .pc-units-chip {
        display: inline-block;
        margin-left: auto;
        font-size: 0.7rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--bg-tertiary, rgba(100, 116, 139, 0.15));
        color: var(--text-muted, #64748b);
        white-space: nowrap;
    }
    .pc-table tr.pc-row td.pc-units,
    .pc-table tr.pc-row td.pc-actions {
        display: none;
    }
    .pc-table tr.pc-row td.pc-prog {
        grid-column: 1 / -1;
    }
    .pc-table tr.pc-row td .cell-sub {
        font-size: 0.7rem;
    }
}

/* Partner statement pop-up: compact tables that wrap instead of scrolling sideways */
#partner-details-modal .modal-content,
#partner-details-modal .modal {
    max-width: min(1200px, 96vw);
}
#partner-details-content .ds-table {
    width: 100%;
    table-layout: auto;
    font-size: 0.78rem;
}
#partner-details-content .ds-table th,
#partner-details-content .ds-table td {
    padding: 0.45rem 0.4rem !important;
    white-space: normal;
    word-break: break-word;
}
#partner-details-content .ds-table th {
    font-size: 0.66rem;
    line-height: 1.25;
}
#partner-details-content .ds-table td.ds-num {
    white-space: nowrap;
}
@container pstable (min-width: 761px) and (max-width: 900px) {
    /* main table: drop "Fair share" (col 6); payment sub-tables: drop Notes */
    .ps-table > thead th:nth-child(6),
    .ps-table > tbody > tr > td:nth-child(6),
    .ps-table > tfoot td:nth-child(6) {
        display: none;
    }
    .ps-detail .ds-table th:last-child,
    .ps-detail .ds-table td:last-child:not([colspan]) {
        display: none;
    }
}

/* Phones: the main column is a flex item with min-width:auto, so wide content stretched it to ~700px and
   the whole page scrolled sideways. Let it shrink to the screen; wide widgets wrap or scroll inside. */
.main-content {
    min-width: 0;
}
@media (max-width: 1024px) {
    .main-content {
        max-width: 100vw;
        overflow-x: clip;
    }
}
/* Statement pop-up on narrow screens: each unit is a labelled card, payments/expenses are small cards */
#partner-details-content .ps-wrap {
    overflow-x: visible !important;
    container-type: inline-size;
    container-name: pstable;
}
@container pstable (max-width: 760px) {
    .ps-table,
    .ps-table > tbody,
    .ps-table > tfoot,
    .ps-detail .ds-table,
    .ps-detail .ds-table tbody {
        display: block;
        width: 100%;
    }
    .ps-table > thead,
    .ps-detail .ds-table thead {
        display: none;
    }
    .ps-table > tbody > tr.ps-unit,
    .ps-table > tfoot > tr.ps-total {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
        gap: 0.5rem 1rem;
        padding: 0.75rem 0.85rem;
        margin-top: 0.6rem;
        border: 1px solid var(--border-light, var(--ds-border, #e2e8f0));
        border-radius: 12px;
        background: transparent;
    }
    .ps-table > tfoot > tr.ps-total {
        border-width: 2px;
    }
    .ps-table > tbody > tr > td,
    .ps-table > tfoot > tr > td {
        display: block;
        padding: 0 !important;
        border: 0;
        min-width: 0;
        text-align: left;
        white-space: normal;
        word-break: normal;
        font-size: 0.88rem;
    }
    .ps-table > tbody > tr.ps-unit > td:first-child,
    .ps-table > tfoot > tr.ps-total > td:first-child {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.95rem;
        padding-bottom: 0.45rem !important;
        border-bottom: 1px solid var(--border-light, var(--ds-border, #e2e8f0));
    }
    .ps-table > tbody > tr > td.ps-share,
    .ps-table > tfoot > tr > td.ps-share {
        display: none;
    }
    .ps-table .ps-share-chip {
        display: inline-block;
        margin-left: auto;
        font-size: 0.7rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--bg-tertiary, rgba(100, 116, 139, 0.15));
        color: var(--text-muted, #64748b);
        white-space: nowrap;
    }
    .ps-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.62rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted, var(--ds-text-muted, #64748b));
        margin-bottom: 1px;
    }
    /* opened unit: the payments panel is a block under its card (closed rows keep their inline display:none) */
    .ps-table > tbody > tr[id^='ps-detail-'] {
        display: block;
    }
    .ps-table > tbody > tr[id^='ps-detail-'] > td.ps-detail {
        display: block;
        padding: 0.5rem 0.25rem 0.25rem !important;
        border: 0;
    }
    .ps-detail-head {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .ps-detail .ds-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.2rem 0.75rem;
        padding: 0.5rem 0.6rem;
        margin-bottom: 0.4rem;
        border: 1px solid var(--border-light, var(--ds-border, #e2e8f0));
        border-radius: 10px;
    }
    .ps-detail .ds-table td {
        display: block;
        padding: 0 !important;
        border: 0;
        min-width: 0;
        max-width: none;
        white-space: normal;
        word-break: break-word;
        font-size: 0.8rem;
    }
    .ps-detail .ds-table td[colspan] {
        grid-column: 1 / -1;
    }
    .ps-detail .ds-table td.ds-num {
        text-align: right;
        font-weight: 700;
        white-space: nowrap;
    }
    /* payments: Date | Amount, Method | Reference, Milestone, Notes */
    .ps-pay tbody td:nth-child(4) {
        text-align: right;
    }
    .ps-pay tbody td:nth-child(n + 5) {
        grid-column: 1 / -1;
    }
    /* expenses: Date | Your amount, Category, Basis, Notes */
    .ps-exp tbody td:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
    }
    .ps-exp tbody td:nth-child(3) {
        grid-row: 1;
        grid-column: 2;
    }
    .ps-exp tbody td:nth-child(2),
    .ps-exp tbody td:nth-child(n + 4) {
        grid-column: 1 / -1;
    }
    .ps-detail .ds-table td:empty {
        display: none;
    }
}

/* Units table: compact so OP, total cost, discount, market value and gain fit without sideways scroll */
#units-table-view {
    container-type: inline-size;
    container-name: unitstable;
}
#units-table {
    width: 100%;
    table-layout: auto;
    font-size: 0.8rem;
}
#units-table th,
#units-table td {
    padding: 0.55rem 0.45rem !important;
}
#units-table th {
    white-space: normal;
    line-height: 1.25;
    font-size: 0.68rem;
    vertical-align: bottom;
}
#units-table td.cell-money {
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
#units-table th:nth-child(n + 4):nth-child(-n + 8) {
    text-align: right;
}
#units-table .owners-cell {
    max-width: 9rem;
    white-space: normal;
}
#units-table .owner-tag {
    display: inline-block;
    margin: 1px 0;
    font-size: 0.68rem;
    padding: 1px 6px;
}
#units-table .row-actions {
    flex-wrap: nowrap;
    gap: 2px;
}
#units-table .row-action-btn {
    width: 26px;
    height: 26px;
}
#units-table .text-danger {
    color: #dc2626;
}
/* A table never pushes the whole page sideways (the sidebar slid off-screen on a ~1300px laptop): if it is still
   wider than its card after the narrow-screen column drops below, it scrolls inside the card. The cards were
   overflow:hidden already, so nothing that was sticky changes. */
.table-container,
#units-table-view {
    overflow-x: auto;
}
@container unitstable (max-width: 1280px) {
    /* drop Discount (col 6) and Status (col 9) first */
    #units-table th:nth-child(6),
    #units-table td:nth-child(6),
    #units-table th:nth-child(9),
    #units-table td:nth-child(9) {
        display: none;
    }
}
@container unitstable (max-width: 1000px) {
    #units-table th:nth-child(3),
    #units-table td:nth-child(3),
    #units-table th:nth-child(4),
    #units-table td:nth-child(4) {
        display: none;
    }
}

/* Post-dated cheque not cleared yet (exposure) */
.pc-pdc,
.ds-pdc {
    color: #b45309;
    font-weight: 600;
}
.ds-pdc {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 0.72rem;
    white-space: nowrap;
}

/* rows that open something on click (frontend-enhancements.js marks them data-rowclick="1") */
table tbody tr[data-rowclick='1'] {
    cursor: pointer;
}
table tbody tr[data-rowclick='1']:hover td {
    background: var(--bg-hover, rgba(99, 102, 241, 0.06));
}

/* Fill-from-scan (doc-autofill.js) */
.kyc-scan-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.6rem;
}
.da-result {
    margin: 0.5rem 0;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border-light, #e2e8f0);
    font-size: 0.85rem;
    line-height: 1.5;
}
.da-result.ok {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
}
.da-result.warn {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}
.da-checks {
    font-size: 0.78rem;
}
.da-wrap {
    overflow-x: auto;
}
.da-table {
    width: 100%;
    font-size: 0.8rem;
}
.da-table .form-select {
    font-size: 0.78rem;
    padding: 0.2rem 0.4rem;
    min-width: 9rem;
}
.da-row-same td {
    opacity: 0.6;
}
.da-same {
    color: #16a34a;
    font-weight: 600;
}
.da-check {
    display: block;
    margin: 0.6rem 0;
    font-size: 0.85rem;
}

/* Inbox page (inbox.js) */
.inbox-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.inbox-toolbar .form-input {
    max-width: 280px;
}
.inbox-tabs {
    display: flex;
    gap: 0.25rem;
}
.inbox-tab {
    border: 1px solid var(--border-light, #e2e8f0);
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    cursor: pointer;
    font-size: 0.85rem;
}
.inbox-tab.active {
    background: var(--ds-primary, #6366f1);
    border-color: var(--ds-primary, #6366f1);
    color: #fff;
}
.inbox-table {
    width: 100%;
}
.inbox-row {
    cursor: pointer;
}
.inbox-row.unread td {
    font-weight: 600;
}
.inbox-row.unread .inbox-who::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ds-primary, #6366f1);
    margin-right: 6px;
}
.inbox-who {
    max-width: 14rem;
}
.inbox-when {
    white-space: nowrap;
    text-align: right;
}
.inbox-subj .cell-sub {
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46ch;
}
.inbox-chip {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 4px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--ds-primary, #6366f1);
}
.inbox-chip.unit {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
.inbox-chip.warn {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}
.inbox-meta {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}
.inbox-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.55;
}
.inbox-main {
    padding: 0.75rem;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    max-height: 50vh;
    overflow: auto;
}
.inbox-atts {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.inbox-thread-item {
    border-left: 3px solid var(--border-light, #e2e8f0);
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.5rem;
}
.inbox-thread-item.out {
    border-left-color: var(--ds-primary, #6366f1);
}
@media (max-width: 640px) {
    .inbox-table thead {
        display: none;
    }
    .inbox-table tr.inbox-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.15rem 0.5rem;
        padding: 0.6rem 0.25rem;
        border-bottom: 1px solid var(--border-light, #e2e8f0);
    }
    .inbox-table tr.inbox-row td {
        display: block;
        padding: 0 !important;
        border: 0;
        max-width: none;
    }
    .inbox-table td.inbox-subj {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .inbox-subj .cell-sub {
        max-width: 100%;
    }
}

/* WhatsApp (whatsapp.js) */
.wa-btn,
.row-action-btn.wa {
    color: #fff;
    background: #25d366;
    border: 1px solid #25d366;
}
.row-action-btn.wa {
    color: #25d366;
    background: rgba(37, 211, 102, 0.1);
}
.row-action-btn.wa:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.wa-btn:hover {
    background: #128c7e;
    border-color: #128c7e;
    color: #fff;
}
.wa-tpls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}
.ds-head-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Sort + smart filters (table-tools.js) */
.tt-th {
    cursor: pointer;
    user-select: none;
}
.tt-th::after {
    content: '\f0dc';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.65em;
    opacity: 0.3;
    margin-left: 0.35em;
}
.tt-th[data-sort-dir='asc']::after {
    content: '\f0de';
    opacity: 0.9;
}
.tt-th[data-sort-dir='desc']::after {
    content: '\f0dd';
    opacity: 0.9;
}
.tt-hidden {
    display: none !important;
}
.tt-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0 0 0.6rem;
}
.tt-search {
    position: relative;
    flex: 1 1 220px;
    max-width: 320px;
}
.tt-search i {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.45;
    font-size: 0.8rem;
}
.tt-search input {
    width: 100%;
    padding: 0.4rem 0.6rem 0.4rem 1.9rem;
    border-radius: 999px;
    border: 1px solid var(--border-light, #e2e8f0);
    background: var(--bg-card, transparent);
    color: inherit;
    font-size: 0.82rem;
}
.tt-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.tt-select {
    width: auto;
    max-width: 210px;
    font-size: 0.78rem;
    padding: 0.3rem 1.6rem 0.3rem 0.6rem;
    border-radius: 999px;
}
.tt-count {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    margin-left: auto;
}
.tt-clear {
    border: 0;
    background: transparent;
    color: var(--ds-primary, #6366f1);
    font-size: 0.78rem;
    cursor: pointer;
}

/* Header ☰: only where the sidebar is hidden (phones / tablets); desktop uses the sidebar's own collapse button */
.header-menu-btn {
    display: none;
}
@media (max-width: 1024px) {
    .header-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        flex-shrink: 0;
    }
}

/* Cashflow: the old one-screen layout (fixed height + overflow hidden) cut off everything below the fold */
#page-cashflow .cashflow-dashboard-layout {
    height: auto;
    min-height: 0;
    overflow: visible;
    grid-template-rows: auto;
}

/* Reminders pop-up (payment-reminders.js) */
.rem-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.rem-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border-light, #e2e8f0);
    border-left: 4px solid #6366f1;
}
.rem-item.soon {
    border-left-color: #f59e0b;
}
.rem-item.late {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}
.rem-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.rem-main small {
    color: var(--text-muted, #64748b);
    font-size: 0.75rem;
}
.rem-amt {
    font-weight: 700;
    white-space: nowrap;
}
.rem-actions {
    display: flex;
    gap: 0.3rem;
}
@media (max-width: 560px) {
    .rem-item {
        grid-template-columns: 1fr auto;
    }
    .rem-actions {
        grid-column: 1 / -1;
    }
}

/* My account (account.js) */
.ac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.ac-card {
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.ac-card h4 {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
}
.ac-card h4 i {
    color: var(--ds-primary, #6366f1);
    margin-right: 0.3rem;
}
.ac-wide {
    grid-column: 1 / -1;
}
.ac-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    border-bottom: 1px dashed var(--border-light, #e2e8f0);
    padding-bottom: 0.3rem;
}
.ac-row span {
    color: var(--text-muted, #64748b);
}
.ac-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.ac-card form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.ac-card .btn {
    align-self: flex-start;
}
.ac-devices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ac-device {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.5rem 0.6rem;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.05);
}
.ac-device > i {
    font-size: 1.2rem;
    color: var(--ds-primary, #6366f1);
}
.ac-device small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
}
.ac-prefs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ac-card small,
.ac-device small {
    white-space: normal;
}

/* Security cheque callout (deal sheet) */
.ds-cheque {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.9rem;
    margin: 0.75rem 0;
    border-radius: 12px;
    border: 1px solid #fcd34d;
    background: rgba(245, 158, 11, 0.08);
    font-size: 0.85rem;
}
.ds-cheque > i {
    color: #b45309;
    font-size: 1.1rem;
}
.ds-cheque small {
    display: block;
    color: var(--text-muted, #64748b);
    font-size: 0.75rem;
}
.ds-cheque-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    .ds-cheque {
        grid-template-columns: auto 1fr;
    }
    .ds-cheque-actions {
        grid-column: 1 / -1;
    }
}

/* "New version available" bar (frontend-enhancements.js) */
#ur-update-bar {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    background: #1e293b;
    color: #fff;
    font-size: 0.85rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
    max-width: calc(100vw - 2rem);
}
#ur-update-bar button {
    border: 0;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    background: #6366f1;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
#ur-update-bar button.later {
    background: transparent;
    padding: 0.3rem 0.4rem;
    font-size: 1rem;
}
@media (max-width: 768px) {
    #ur-update-bar {
        bottom: 5rem;
    }
}

/* Partner statement toolbar (partner-statement.js) */
.ps-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.75rem;
}
.ps-tools .tt-search {
    flex: 1 1 200px;
}

/* filter chips (table-tools.js) */
.tt-filter {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 999px;
}
.tt-filter-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    margin-right: 0.15rem;
}
.tt-chip {
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}
.tt-chip:hover {
    background: rgba(99, 102, 241, 0.08);
}
.tt-chip.active {
    background: var(--ds-primary, #6366f1);
    color: #fff;
}
.tt-filter:has(select) {
    padding: 0;
    border: 0;
}
.wa-lang {
    float: right;
    display: inline-flex;
    gap: 0.25rem;
}
.wa-recipients {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.35rem;
    max-height: 210px;
    overflow: auto;
}
.wa-rcpt {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 8px;
    font-size: 0.82rem;
    cursor: pointer;
}
.wa-rcpt small {
    margin-left: auto;
    color: var(--text-muted, #64748b);
    font-size: 0.7rem;
}
.wa-rcpt.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.wa-rcpt.wa-group {
    grid-column: 1 / -1;
}
.wa-rcpt:has(input:checked) {
    border-color: #25d366;
    background: rgba(37, 211, 102, 0.08);
}
.wa-queue {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    padding: 0.6rem;
    border-radius: 10px;
    background: rgba(37, 211, 102, 0.08);
    font-size: 0.82rem;
}
.wa-q {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border-light, #e2e8f0);
    font-size: 0.78rem;
}
.wa-q.done {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}
.wa-q.now {
    border-color: #25d366;
    font-weight: 600;
}
/* multi-line (EN + HE) tooltips */
.tip.tip-multi::after {
    unicode-bidi: plaintext; /* each line takes its own direction: English LTR, Hebrew RTL */
    white-space: pre-line;
    max-width: 320px;
    text-align: start;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.ho-table .tip::after,
.ix-kpi .tip::after {
    left: 0;
    transform: none;
}

/* ===== Audit Log page (public/js/audit-log.js) ===== */
.al-root .al-integrity {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
}
.al-root .al-int-ok {
    color: #16a34a;
}
.al-root .al-int-bad {
    color: #dc2626;
    font-weight: 700;
}
.al-week {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0;
}
.al-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
}
.al-card-warn {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.07);
}
.al-card-n {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}
.al-card-l,
.al-dim {
    color: var(--text-muted, #64748b);
    font-size: 0.8rem;
}
.al-card-t {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748b);
    margin-bottom: 0.3rem;
}
.al-chip {
    display: inline-block;
    background: rgba(100, 116, 139, 0.12);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    margin: 0 0.25rem 0.25rem 0;
    font-size: 0.78rem;
}
.al-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.al-tab {
    border: 1px solid var(--border-light, #e2e8f0);
    background: var(--bg-card, #fff);
    color: inherit;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    font: inherit;
}
.al-tab.active {
    background: var(--primary-500, #3b82f6);
    border-color: var(--primary-500, #3b82f6);
    color: #fff;
}
.al-filters .al-grow {
    flex: 1 1 200px;
}
.al-root [hidden] {
    display: none !important;
}
.al-tablewrap {
    overflow-x: auto;
}
.al-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.al-table th {
    text-align: start;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748b);
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    white-space: nowrap;
}
.al-table td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--border-light, #eef2f7);
    vertical-align: top;
}
.al-table[hidden],
.al-modal [hidden] {
    display: none;
}
.al-center {
    text-align: center;
    padding: 1.5rem !important;
}
.al-time {
    white-space: nowrap;
}
.al-time .al-abs {
    display: block;
}
.al-time .al-rel {
    display: none;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}
.al-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
.al-b-green {
    background: rgba(22, 163, 74, 0.14);
    color: #15803d;
}
.al-b-blue {
    background: rgba(59, 130, 246, 0.14);
    color: #1d4ed8;
}
.al-b-red {
    background: rgba(220, 38, 38, 0.14);
    color: #b91c1c;
}
.al-b-amber {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}
.al-b-purple {
    background: rgba(139, 92, 246, 0.16);
    color: #6d28d9;
}
.al-b-gray {
    background: rgba(100, 116, 139, 0.16);
    color: #475569;
}
.al-type {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748b);
}
.al-label {
    font-weight: 600;
}
.al-link {
    color: var(--primary-600, #2563eb);
    text-decoration: none;
}
.al-link:hover {
    text-decoration: underline;
}
.al-ico {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
}
.al-ico:hover {
    background: rgba(100, 116, 139, 0.16);
    color: inherit;
}
.al-ico-warn:hover {
    color: #b45309;
}
.al-uico {
    color: var(--text-muted, #94a3b8);
    font-size: 0.75rem;
}
.al-details {
    max-width: 440px;
}
.al-chg {
    display: block;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}
.al-old {
    color: #b91c1c;
    text-decoration: line-through;
    text-decoration-color: rgba(185, 28, 28, 0.4);
    overflow-wrap: anywhere;
}
.al-new {
    color: #15803d;
    overflow-wrap: anywhere;
}
.al-dev {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
}
.al-act {
    white-space: nowrap;
}
.al-group td {
    background: rgba(100, 116, 139, 0.06);
}
.al-sub td:first-child {
    padding-inline-start: 1.6rem;
}
.al-link-btn {
    border: 0;
    background: transparent;
    color: var(--primary-600, #2563eb);
    cursor: pointer;
    font: inherit;
    margin-inline-start: 0.5rem;
}
.al-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.6rem;
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
}
.al-retention {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
}
.al-retention summary {
    cursor: pointer;
    font-weight: 600;
}
.al-ret-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0.5rem 0;
}
.al-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.al-modal {
    position: relative;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #0f172a);
    border-radius: 14px;
    padding: 1.2rem 1.4rem;
    width: min(720px, 100%);
    max-height: 88vh;
    overflow: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.al-modal-wide {
    width: min(820px, 100%);
}
.al-modal-x {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.8rem;
    border: 0;
    background: transparent;
    font-size: 1.6rem;
    cursor: pointer;
    color: inherit;
}
.al-modal h3 {
    margin: 0 2rem 0.4rem 0;
    font-size: 1.05rem;
}
.al-he .al-modal h3,
.al-modal[dir='rtl'] h3 {
    margin: 0 0 0.4rem 2rem;
}
.al-difftable td {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.al-modal-foot {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.9rem;
    justify-content: flex-end;
}
.al-timeline {
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
    border-inline-start: 2px solid var(--border-light, #e2e8f0);
}
.al-tl-item {
    position: relative;
    display: flex;
    gap: 0.7rem;
    padding: 0 0 1rem 1rem;
    padding-inline-start: 1rem;
    margin-inline-start: -0.9rem;
}
.al-tl-dot {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    background-clip: padding-box;
}
.al-tl-body {
    min-width: 0;
    flex: 1;
}
@media (max-width: 900px) {
    .al-week {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* mobile: compact cards with action icon and relative time (#20) */
@media (max-width: 768px) {
    .al-table thead {
        display: none;
    }
    .al-table,
    .al-table tbody,
    .al-table tr,
    .al-table td {
        display: block;
        width: 100%;
    }
    .al-table tr {
        border: 1px solid var(--border-light, #e2e8f0);
        border-radius: 12px;
        margin-bottom: 0.6rem;
        padding: 0.5rem 0.7rem;
        background: var(--bg-card, #fff);
    }
    .al-table td {
        border: 0;
        padding: 0.15rem 0;
    }
    .al-table .al-time .al-abs {
        display: none;
    }
    .al-table .al-time .al-rel {
        display: block;
        float: inline-end;
        font-size: 0.78rem;
    }
    .al-table td[data-label='Entity'],
    .al-table td[data-label='Details'] {
        max-width: none;
    }
    .al-details {
        max-width: none;
    }
    .al-dev {
        font-size: 0.72rem;
    }
    .al-act {
        text-align: end;
    }
    .al-table td[colspan] {
        display: block;
    }
    .al-table .al-center {
        display: block;
    }
    .al-modal {
        padding: 1rem;
    }
}