/* =============================================================================
   AdminKit — components.css
   All custom components. Each section is independent.

   Sections:
     1. Card           5. Table            9. Tabs
     2. Button         6. Modal            10. Notification panel
     3. Badge          7. Toast            11. Dropdown menu
     4. Form           8. Alert            12. KPI card / misc
============================================================================= */

/* =====[ 1. Card ]============================================================ */
.card-app {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.card-app__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-surface);
}

.card-app__title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
}

.card-app__sub {
    margin: 2px 0 0;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.card-app__header-actions {
    margin-inline-start: auto;
    display: flex;
    gap: var(--space-2);
}

.card-app__body {
    padding: var(--space-5);
}

.card-app__footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
}

/* =====[ 2. Button ]========================================================== */
.btn-app {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    height: 38px;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
    transition: background var(--duration) var(--easing), border-color var(--duration) var(--easing), color var(--duration) var(--easing), box-shadow var(--duration) var(--easing), transform var(--duration-fast) var(--easing);
}

    .btn-app:focus-visible {
        box-shadow: var(--focus-ring);
        outline: none;
    }

    .btn-app:active:not(:disabled) {
        transform: translateY(1px);
    }

    .btn-app:disabled, .btn-app.is-disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .btn-app i {
        font-size: 14px;
    }

/* Sizes */
.btn-app--sm {
    height: 30px;
    font-size: var(--fs-xs);
    padding: 0 var(--space-3);
}

.btn-app--lg {
    height: 46px;
    font-size: var(--fs-md);
    padding: 0 var(--space-5);
}

/* Variants */
.btn-app--primary {
    background: var(--brand-primary);
    color: var(--color-text-inverse);
    border-color: var(--brand-primary);
}

    .btn-app--primary:hover:not(:disabled) {
        background: var(--brand-primary-hover);
        border-color: var(--brand-primary-hover);
        color: #fff;
    }

.btn-app--accent {
    background: var(--brand-accent);
    color: var(--navy-900);
    border-color: var(--brand-accent);
}

    .btn-app--accent:hover:not(:disabled) {
        background: var(--brand-accent-hover);
        border-color: var(--brand-accent-hover);
        color: var(--navy-900);
    }

.btn-app--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

    .btn-app--ghost:hover:not(:disabled) {
        background: var(--color-surface-hover);
        border-color: var(--color-border-strong);
        color: var(--color-text);
    }

.btn-app--soft {
    background: var(--brand-primary-soft);
    color: var(--color-text);
    border-color: transparent;
}

    .btn-app--soft:hover:not(:disabled) {
        background: var(--brand-accent-soft);
        color: var(--color-text);
    }
/* In dark mode the soft tint is very faint — add a 1-px border so the
   button still has a visible boundary. */
[data-theme="dark"] .btn-app--soft {
    border-color: var(--color-border);
}
/* In dark mode `--color-text-inverse` resolves to the dark brand color (so
   inverse-text on a light surface stays dark). For primary buttons that's
   wrong: the button is on a dark surface, so text must stay bright. */
[data-theme="dark"] .btn-app--primary,
[data-theme="dark"] .btn-app--primary:hover:not(:disabled) {
    color: #fff;
}

.btn-app--danger {
    background: var(--status-danger);
    color: #fff;
    border-color: var(--status-danger);
}

    .btn-app--danger:hover:not(:disabled) {
        background: #b91c1c;
        border-color: #b91c1c;
        color: #fff;
    }

.btn-app--danger-soft {
    background: var(--status-danger-soft);
    color: var(--status-danger);
    border-color: transparent;
}

    .btn-app--danger-soft:hover:not(:disabled) {
        background: var(--status-danger);
        color: #fff;
    }

/* Icon-only */
.btn-app--icon {
    width: 38px;
    padding: 0;
}

    .btn-app--icon.btn-app--sm {
        width: 30px;
    }

    .btn-app--icon.btn-app--lg {
        width: 46px;
    }

/* Loading state */
.btn-app.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

    .btn-app.is-loading::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 16px;
        height: 16px;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: btn-spin 0.6s linear infinite;
        color: var(--color-text);
    }

.btn-app--primary.is-loading::after, .btn-app--danger.is-loading::after {
    color: #fff;
}

.btn-app--accent.is-loading::after {
    color: var(--navy-900);
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =====[ 3. Badge ]=========================================================== */
.badge-app {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: var(--fw-bold);
    line-height: 1.5;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* Solid */
.badge-app--neutral {
    background: var(--color-text-muted);
    color: #fff;
}

.badge-app--success {
    background: var(--status-success);
    color: #fff;
}

.badge-app--danger {
    background: var(--status-danger);
    color: #fff;
}

.badge-app--warning {
    background: var(--status-warning);
    color: #fff;
}

.badge-app--info {
    background: var(--status-info);
    color: #fff;
}

.badge-app--accent {
    background: var(--brand-accent);
    color: var(--navy-900);
}

.badge-app--primary {
    background: var(--brand-primary);
    color: #fff;
}

/* Soft */
.badge-app--soft.badge-app--success {
    background: var(--status-success-soft);
    color: var(--status-success);
}

.badge-app--soft.badge-app--danger {
    background: var(--status-danger-soft);
    color: var(--status-danger);
}

.badge-app--soft.badge-app--warning {
    background: var(--status-warning-soft);
    color: var(--status-warning);
}

.badge-app--soft.badge-app--info {
    background: var(--status-info-soft);
    color: var(--status-info);
}

.badge-app--soft.badge-app--accent {
    background: var(--brand-accent-soft);
    color: var(--gold-700);
}

.badge-app--soft.badge-app--neutral {
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
}

[data-theme="dark"] .badge-app--soft.badge-app--accent {
    color: var(--brand-accent);
}

/* Dot prefix */
.badge-app__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

/* =====[ 4. Form ]============================================================ */
.form-app {
    display: block;
}

.form-app__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.form-app__label--required::after {
    content: "*";
    color: var(--status-danger);
    margin-inline-start: 4px;
}

.form-app__hint {
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.form-app__error {
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--status-danger);
    display: none;
    align-items: center;
    gap: 4px;
}

.form-app__control {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 var(--space-3);
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration) var(--easing), box-shadow var(--duration) var(--easing);
    appearance: none;
}

textarea.form-app__control {
    min-height: 96px;
    padding: var(--space-3);
    height: auto;
    resize: vertical;
    line-height: var(--lh-normal);
}

.form-app__control::placeholder {
    color: var(--color-text-faint);
}

.form-app__control:focus {
    outline: none;
    border-color: var(--brand-accent);
    box-shadow: var(--focus-ring);
}

.form-app__control:disabled,
.form-app__control[readonly] {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

select.form-app__control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-inline-start: calc(var(--space-3) + 16px);
}

/* Validation states */
.form-app__group.has-error .form-app__control {
    border-color: var(--status-danger);
}

    .form-app__group.has-error .form-app__control:focus {
        box-shadow: 0 0 0 3px var(--status-danger-soft);
    }

.form-app__group.has-error .form-app__error {
    display: inline-flex;
}

.form-app__group.has-success .form-app__control {
    border-color: var(--status-success);
}

/* Input with icon (icon goes on inline-start = right in RTL) */
.form-app__input-wrap {
    position: relative;
}

    .form-app__input-wrap .form-app__control {
        padding-inline-start: calc(var(--space-3) + 24px);
    }

.form-app__input-icon {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--space-3);
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    pointer-events: none;
    font-size: 14px;
}

/* Trailing icon button — used for password show/hide and similar actions.
   Sits at the inline-end of the input wrap (opposite the leading icon). */
.form-app__input-action {
    position: absolute;
    inset-block: 1px;
    inset-inline-end: 1px;
    width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 14px;
    border-radius: var(--radius-sm);
}

    .form-app__input-action:hover {
        color: var(--color-text);
        background: var(--color-surface-hover);
    }

    .form-app__input-action:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }
/* Reserve space on the inline-end side when a trailing action exists. */
.form-app__input-wrap:has(.form-app__input-action) .form-app__control {
    padding-inline-end: 42px;
}

/* Checkbox / Radio */
.form-check-app {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--fs-sm);
    user-select: none;
}

.form-check-app__input {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 4px;
    background: var(--color-surface);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background var(--duration) var(--easing), border-color var(--duration) var(--easing);
}

    .form-check-app__input[type="radio"] {
        border-radius: 50%;
    }

    .form-check-app__input:checked {
        background: var(--brand-accent);
        border-color: var(--brand-accent);
    }

    .form-check-app__input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 5px;
        height: 9px;
        border: solid var(--navy-900);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) translate(-1px, -1px);
    }

    .form-check-app__input[type="radio"]:checked::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        background: var(--navy-900);
    }

    .form-check-app__input:focus-visible {
        box-shadow: var(--focus-ring);
    }

/* Switch */
.form-switch-app {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
    font-size: var(--fs-sm);
}

.form-switch-app__input {
    appearance: none;
    width: 40px;
    height: 22px;
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
    position: relative;
    cursor: pointer;
    transition: background var(--duration) var(--easing);
}

    .form-switch-app__input::after {
        content: "";
        position: absolute;
        top: 2px;
        inset-inline-start: 2px;
        width: 18px;
        height: 18px;
        background: #fff;
        border-radius: 50%;
        box-shadow: var(--shadow-xs);
        transition: transform var(--duration) var(--easing);
    }

    .form-switch-app__input:checked {
        background: var(--status-success);
    }
        /* In RTL, the inline-start is on the right; "on" means thumb moves toward inline-end (visually left). */
        .form-switch-app__input:checked::after {
            transform: translateX(-18px);
        }

[dir="ltr"] .form-switch-app__input:checked::after {
    transform: translateX(18px);
}

.form-switch-app__input:focus-visible {
    box-shadow: var(--focus-ring);
}

.form-switch-app__input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* File dropzone */
.form-dropzone-app {
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface-2);
    padding: var(--space-7) var(--space-5);
    text-align: center;
    cursor: pointer;
    transition: background var(--duration) var(--easing), border-color var(--duration) var(--easing);
}

    .form-dropzone-app:hover, .form-dropzone-app.is-drag-over {
        border-color: var(--brand-accent);
        background: var(--brand-accent-soft);
    }

.form-dropzone-app__icon {
    font-size: 28px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.form-dropzone-app__primary {
    font-weight: var(--fw-medium);
    margin: 0 0 var(--space-1);
}

.form-dropzone-app__hint {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: 0;
}

.form-dropzone-app__input {
    display: none;
}

/* Grouped fields */
.form-app__group {
    margin-bottom: var(--space-5);
}

    .form-app__group:last-child {
        margin-bottom: 0;
    }

.form-app__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
}

/* =====[ 5. Table ]=========================================================== */
.table-app-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.table-app-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.table-app-toolbar__search {
    flex: 1 1 220px;
    max-width: 320px;
}

.table-app-toolbar__actions {
    display: flex;
    gap: var(--space-2);
    margin-inline-start: auto;
    flex-wrap: wrap;
}

/* Column-settings dropdown attached to the [data-table-cols] button */
.table-cols-menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 100;
    min-width: 240px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    padding: 0;
    display: none;
    text-align: start;
}

    .table-cols-menu.is-open {
        display: block;
    }

.table-cols-menu__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
}

    .table-cols-menu__head > span {
        flex: 1;
    }

.table-cols-menu__close {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
}

    .table-cols-menu__close:hover {
        background: var(--color-surface-2);
        color: var(--color-text);
    }

.table-cols-menu__list {
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    max-height: 320px;
    overflow-y: auto;
}

    .table-cols-menu__list li {
        padding: 4px 0;
    }

    .table-cols-menu__list .form-check-app {
        font-size: var(--fs-sm);
        cursor: pointer;
    }

.table-cols-menu__foot {
    border-top: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    display: flex;
    justify-content: flex-end;
}

.table-app {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

    .table-app thead th {
        background: var(--color-surface-2);
        color: var(--color-text-muted);
        font-weight: var(--fw-medium);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: var(--space-3) var(--space-4);
        text-align: start;
        border-bottom: 1px solid var(--color-border);
        white-space: nowrap;
    }

        .table-app thead th.is-sortable {
            cursor: pointer;
            user-select: none;
        }

            .table-app thead th.is-sortable::after {
                content: "\f0dc";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                margin-inline-start: 6px;
                font-size: 10px;
                color: var(--color-text-faint);
            }

        .table-app thead th.is-sorted-asc::after {
            content: "\f0de";
            color: var(--brand-accent);
        }

        .table-app thead th.is-sorted-desc::after {
            content: "\f0dd";
            color: var(--brand-accent);
        }

    .table-app tbody td {
        padding: var(--space-4);
        border-bottom: 1px solid var(--color-border);
        color: var(--color-text);
        vertical-align: middle;
    }

    .table-app tbody tr:last-child td {
        border-bottom: 0;
    }

    .table-app tbody tr:hover td {
        background: var(--color-surface-hover);
    }
/* Action buttons inside a table cell. We MUST NOT change the <td>'s display
   (it has to stay `table-cell` so the row layout engine keeps cells aligned —
   `display: inline-flex` on a td makes the cell shrink to its content and
   breaks the row's bottom border alignment). Instead we keep the cell as a
   normal table-cell and align inline-block buttons to the end. */
.table-app__actions {
    text-align: end;
    white-space: nowrap;
}

    .table-app__actions > .btn-app + .btn-app {
        margin-inline-start: 4px;
    }

    .table-app__actions > .btn-app {
        vertical-align: middle;
    }

.table-app__empty {
    text-align: center;
    padding: var(--space-9) var(--space-5);
    color: var(--color-text-muted);
}

.table-app__empty-icon {
    font-size: 32px;
    color: var(--color-text-faint);
    margin-bottom: var(--space-3);
}

/* Pagination */
.pagination-app {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.pagination-app__info {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

    .pagination-app__info b {
        color: var(--color-text);
        font-weight: var(--fw-medium);
    }

.pagination-app__size {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

    .pagination-app__size select {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: 4px var(--space-2);
        font-family: inherit;
        color: var(--color-text);
        cursor: pointer;
    }

.pagination-app__pages {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

    .pagination-app__pages button {
        min-width: 32px;
        height: 32px;
        padding: 0 var(--space-2);
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        color: var(--color-text);
        cursor: pointer;
        font-family: inherit;
        font-size: var(--fs-sm);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .pagination-app__pages button:hover:not(:disabled) {
            background: var(--color-surface-hover);
            border-color: var(--color-border);
        }

        .pagination-app__pages button.is-active {
            background: var(--brand-primary);
            color: #fff;
            font-weight: var(--fw-medium);
        }

        .pagination-app__pages button:disabled {
            color: var(--color-text-faint);
            cursor: not-allowed;
            opacity: 0.5;
        }

.pagination-app__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    color: var(--color-text-faint);
    user-select: none;
}

/* Mobile card-view for tables */
@media (max-width: 767.98px) {
    .table-app.is-card-on-mobile thead {
        display: none;
    }

    .table-app.is-card-on-mobile tbody tr {
        display: block;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        margin-bottom: var(--space-3);
        background: var(--color-surface);
    }

    .table-app.is-card-on-mobile tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        border-bottom: 1px dashed var(--color-border);
    }

        .table-app.is-card-on-mobile tbody td:last-child {
            border-bottom: 0;
        }

        .table-app.is-card-on-mobile tbody td::before {
            content: attr(data-label);
            font-weight: var(--fw-medium);
            color: var(--color-text-muted);
            font-size: var(--fs-xs);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
}

/* =====[ 6. Modal ]=========================================================== */
.modal-app-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    animation: modal-fade var(--duration) var(--easing);
}

    .modal-app-backdrop.is-open {
        display: flex;
    }

@keyframes modal-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-app {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 520px;
    width: 100%;
    /* `dvh` accounts for the mobile browser URL bar; `vh` is the fallback. */
    max-height: calc(100vh - var(--space-8));
    max-height: calc(100dvh - var(--space-8));
    /* Grid (not flex) so the body row gets a proper `1fr` track. With flex the
     body's `min-height: 0` alone wasn't enough to make the body shrink under
     the parent's `max-height` — flex was sizing it from its content. */
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    animation: modal-pop var(--duration) var(--easing);
}
    /* When a <form> wraps header/body/footer, make it transparent to the grid
   so the three sections participate as the grid's tracks. */
    .modal-app > form {
        display: contents;
    }

.modal-app--lg {
    max-width: 760px;
}

.modal-app--sm {
    max-width: 380px;
}

@keyframes modal-pop {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-app__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.modal-app__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    flex: 1 1 auto;
}

.modal-app__close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .modal-app__close:hover {
        background: var(--color-surface-hover);
        color: var(--color-text);
    }

.modal-app__body {
    padding: var(--space-5);
    /* `min-height: 0` lets the body row of the grid shrink below its content;
     combined with `overflow-y: auto` this is what makes the body scroll
     when the form is taller than the modal can contain — the classic mobile
     "can't reach the bottom of the form" bug. */
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.modal-app__footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ---- Mobile: bottom-sheet for default & large modals -------------------- */
/* Small modals (confirm dialogs) stay centered and small even on phones. */
@media (max-width: 575.98px) {
    .modal-app-backdrop:has(.modal-app:not(.modal-app--sm)) {
        padding: 0;
        align-items: flex-end;
    }

    .modal-app:not(.modal-app--sm) {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        animation: modal-slide-up var(--duration) var(--easing);
    }

    .modal-app__footer {
        /* Stretch buttons across the bottom for easier tapping. */
        padding: var(--space-3);
    }

        .modal-app__footer .btn-app {
            flex: 1 1 0;
            min-width: 0;
        }
}

@keyframes modal-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0.5;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Confirm dialog variant — icon to the right (inline-end) of text */
.modal-app__confirm-body {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.modal-app__confirm-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.modal-app__confirm-icon--danger {
    background: var(--status-danger-soft);
    color: var(--status-danger);
}

.modal-app__confirm-icon--warning {
    background: var(--status-warning-soft);
    color: var(--status-warning);
}

.modal-app__confirm-icon--info {
    background: var(--status-info-soft);
    color: var(--status-info);
}

.modal-app__confirm-icon--success {
    background: var(--status-success-soft);
    color: var(--status-success);
}

.modal-app__confirm-title {
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-2);
}

.modal-app__confirm-text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* =====[ 7. Toast ]=========================================================== */
.toast-stack {
    position: fixed;
    bottom: var(--space-5);
    inset-inline-start: var(--space-5); /* bottom-right in RTL */
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    max-width: 360px;
    width: calc(100% - var(--space-9));
}

.toast-app {
    pointer-events: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-inline-start: 4px solid var(--color-text-muted);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    animation: toast-in var(--duration) var(--easing);
}

    .toast-app.is-leaving {
        animation: toast-out var(--duration) var(--easing) forwards;
    }

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

.toast-app__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.toast-app__body {
    flex: 1 1 auto;
    min-width: 0;
}

.toast-app__title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    margin: 0 0 2px;
}

.toast-app__text {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: 0;
}

.toast-app__close {
    background: transparent;
    border: 0;
    color: var(--color-text-faint);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    margin-inline-start: var(--space-2);
}

    .toast-app__close:hover {
        color: var(--color-text);
    }

.toast-app--success {
    border-inline-start-color: var(--status-success);
}

    .toast-app--success .toast-app__icon {
        background: var(--status-success-soft);
        color: var(--status-success);
    }

.toast-app--danger {
    border-inline-start-color: var(--status-danger);
}

    .toast-app--danger .toast-app__icon {
        background: var(--status-danger-soft);
        color: var(--status-danger);
    }

.toast-app--warning {
    border-inline-start-color: var(--status-warning);
}

    .toast-app--warning .toast-app__icon {
        background: var(--status-warning-soft);
        color: var(--status-warning);
    }

.toast-app--info {
    border-inline-start-color: var(--status-info);
}

    .toast-app--info .toast-app__icon {
        background: var(--status-info-soft);
        color: var(--status-info);
    }

/* =====[ 8. Alert ]=========================================================== */
.alert-app {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-4);
}

.alert-app__icon {
    font-size: 16px;
    line-height: 1.4;
    flex-shrink: 0;
}

.alert-app__body {
    flex: 1 1 auto;
    min-width: 0;
}

.alert-app__title {
    font-weight: var(--fw-bold);
    margin: 0 0 2px;
}

.alert-app__close {
    background: transparent;
    border: 0;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}

    .alert-app__close:hover {
        opacity: 1;
    }

.alert-app--success {
    background: var(--status-success-soft);
    color: var(--status-success);
    border-color: rgba(22,163,74,0.25);
}

.alert-app--danger {
    background: var(--status-danger-soft);
    color: var(--status-danger);
    border-color: rgba(220,38,38,0.25);
}

.alert-app--warning {
    background: var(--status-warning-soft);
    color: var(--status-warning);
    border-color: rgba(217,119,6,0.25);
}

.alert-app--info {
    background: var(--status-info-soft);
    color: var(--status-info);
    border-color: rgba(2,132,199,0.25);
}

/* =====[ 9. Tabs ]============================================================ */
/* Horizontal */
.tabs-app {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
    overflow-x: auto;
    scrollbar-width: none;
}

    .tabs-app::-webkit-scrollbar {
        display: none;
    }

.tabs-app__btn {
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    margin-bottom: -1px;
    transition: color var(--duration) var(--easing), border-color var(--duration) var(--easing);
}

    .tabs-app__btn:hover {
        color: var(--color-text);
    }

    .tabs-app__btn.is-active {
        color: var(--color-text);
        border-bottom-color: var(--brand-accent);
    }

.tabs-app__panel {
    display: none;
}

    .tabs-app__panel.is-active {
        display: block;
    }

/* Vertical (settings nav)
   Default: nav at inline-start (right in RTL) — the natural reading position.
   Modifier `.tabs-app-v--end` puts the nav at inline-end (visual left in RTL)
   while keeping DOM order so screen readers still hit the nav first. */
.tabs-app-v {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-6);
    align-items: flex-start;
}

.tabs-app-v--end {
    grid-template-columns: 1fr 240px;
}

    .tabs-app-v--end > .tabs-app-v__list {
        grid-column: 2;
    }

    .tabs-app-v--end > :not(.tabs-app-v__list) {
        grid-column: 1;
        grid-row: 1;
    }

@media (max-width: 767.98px) {
    .tabs-app-v,
    .tabs-app-v--end {
        grid-template-columns: 1fr;
    }

        .tabs-app-v--end > .tabs-app-v__list,
        .tabs-app-v--end > :not(.tabs-app-v__list) {
            grid-column: 1;
            grid-row: auto;
        }
}

.tabs-app-v__list {
    list-style: none;
    padding: var(--space-2);
    margin: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    position: sticky;
    top: calc(var(--app-header-height) + var(--space-4));
}

@media (max-width: 767.98px) {
    .tabs-app-v__list {
        position: static;
    }
}

.tabs-app-v__btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    text-align: start;
    position: relative;
}

    .tabs-app-v__btn:hover {
        background: var(--color-surface-hover);
        color: var(--color-text);
    }

    .tabs-app-v__btn.is-active {
        background: var(--brand-primary-soft);
        color: var(--color-text);
    }

        .tabs-app-v__btn.is-active::before {
            content: "";
            position: absolute;
            inset-block: 6px;
            inset-inline-end: 0;
            width: 3px;
            border-radius: 2px;
            background: var(--brand-accent);
        }

.tabs-app-v__btn-icon {
    width: 18px;
    text-align: center;
    color: var(--color-text-muted);
}

.tabs-app-v__btn.is-active .tabs-app-v__btn-icon {
    color: var(--brand-accent);
}

.tabs-app-v__btn-dirty {
    margin-inline-start: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-warning);
    display: none;
}

.tabs-app-v__btn.is-dirty .tabs-app-v__btn-dirty {
    display: inline-block;
}

/* =====[ 10. Notification panel ]============================================= */
.dropdown-app {
    position: relative;
    display: inline-block;
}

.dropdown-app__menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    z-index: var(--z-sticky);
    display: none;
    animation: dd-pop var(--duration) var(--easing);
}

.dropdown-app.is-open > .dropdown-app__menu {
    display: block;
}

@keyframes dd-pop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-app__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--color-text);
    text-align: start;
    cursor: pointer;
}

    .dropdown-app__item:hover {
        background: var(--color-surface-hover);
    }

.dropdown-app__item--danger {
    color: var(--status-danger);
}

.dropdown-app__divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-2) 0;
}

.dropdown-app__header {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: var(--fw-medium);
    letter-spacing: 0.04em;
}

/* User chip in header */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px var(--space-3) 4px 4px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--duration) var(--easing);
}

    .user-chip:hover {
        background: var(--color-surface-hover);
    }

.user-chip__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}

.user-chip__name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.user-chip__caret {
    font-size: 10px;
    color: var(--color-text-muted);
}

@media (max-width: 575.98px) {
    .user-chip__name, .user-chip__caret {
        display: none;
    }

    .user-chip {
        padding: 2px;
    }
}

/* =====[ 12. KPI / misc ]==================================================== */
.kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: transform var(--duration) var(--easing), box-shadow var(--duration) var(--easing);
}

    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.kpi-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--brand-accent-soft);
    color: var(--brand-accent);
    flex-shrink: 0;
}

.kpi-card__icon--primary {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

[data-theme="dark"] .kpi-card__icon--primary {
    color: var(--gold-300);
}

.kpi-card__icon--success {
    background: var(--status-success-soft);
    color: var(--status-success);
}

.kpi-card__icon--danger {
    background: var(--status-danger-soft);
    color: var(--status-danger);
}

.kpi-card__icon--info {
    background: var(--status-info-soft);
    color: var(--status-info);
}

.kpi-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.kpi-card__label {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kpi-card__value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-heavy);
    margin: 0;
    color: var(--color-text);
    line-height: 1.1;
}

.kpi-card__trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    margin-top: var(--space-1);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.kpi-card__trend--up {
    background: var(--status-success-soft);
    color: var(--status-success);
}

.kpi-card__trend--down {
    background: var(--status-danger-soft);
    color: var(--status-danger);
}

.kpi-card__trend--flat {
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
}

/* Avatar */
.avatar-app {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    flex-shrink: 0;
}

.avatar-app--sm {
    width: 28px;
    height: 28px;
    font-size: var(--fs-xs);
}

.avatar-app--lg {
    width: 48px;
    height: 48px;
    font-size: var(--fs-md);
}

/* Fiscal year calendar (months grid) */
.fiscal-months {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-2);
}

@media (max-width: 575.98px) {
    .fiscal-months {
        grid-template-columns: repeat(3, 1fr);
    }
}

.fiscal-months__cell {
    padding: var(--space-3) var(--space-2);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: var(--fs-xs);
    cursor: pointer;
    transition: background var(--duration) var(--easing), border-color var(--duration) var(--easing);
    user-select: none;
}

    .fiscal-months__cell:hover {
        border-color: var(--brand-accent);
    }

    .fiscal-months__cell.is-start {
        background: var(--brand-accent);
        color: var(--navy-900);
        border-color: var(--brand-accent);
        font-weight: var(--fw-bold);
    }

    .fiscal-months__cell.is-in-range {
        background: var(--brand-accent-soft);
        border-color: transparent;
    }

.fiscal-months__cell-num {
    font-size: 10px;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 2px;
}

.fiscal-months__cell.is-start .fiscal-months__cell-num {
    color: var(--navy-700);
}

/* Color picker swatch row (settings appearance) */
.color-picker-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.color-picker-swatch {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-border);
    cursor: pointer;
    position: relative;
    transition: transform var(--duration) var(--easing);
}

    .color-picker-swatch:hover {
        transform: scale(1.06);
    }

    .color-picker-swatch.is-active {
        border-color: var(--color-text);
    }

        .color-picker-swatch.is-active::after {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.4);
        }

/* Activity feed (dashboard) */
.activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-feed__item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

    .activity-feed__item:last-child {
        border-bottom: 0;
    }

.activity-feed__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-accent-soft);
    color: var(--brand-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.activity-feed__body {
    flex: 1 1 auto;
    min-width: 0;
}

.activity-feed__text {
    margin: 0 0 2px;
    font-size: var(--fs-sm);
}

.activity-feed__meta {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* Anchor list (showcase TOC) */
.anchor-toc {
    position: sticky;
    top: calc(var(--app-header-height) + var(--space-4));
    list-style: none;
    padding: var(--space-3);
    margin: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
}

    .anchor-toc a {
        display: block;
        padding: 6px var(--space-3);
        color: var(--color-text-muted);
        border-radius: var(--radius-sm);
        text-decoration: none;
    }

        .anchor-toc a:hover {
            background: var(--color-surface-hover);
            color: var(--color-text);
        }

        .anchor-toc a.is-active {
            background: var(--brand-accent-soft);
            color: var(--color-text);
            font-weight: var(--fw-medium);
        }

/* Section heading inside showcase */
.showcase-section {
    scroll-margin-top: calc(var(--app-header-height) + var(--space-3));
    margin-bottom: var(--space-9);
}

.showcase-section__title {
    font-size: var(--fs-xl);
    margin: 0 0 var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.showcase-section__title-num {
    width: 28px;
    height: 28px;
    background: var(--brand-accent);
    color: var(--navy-900);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

.showcase-section__sub {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    margin: 0 0 var(--space-5);
}

/* Login split layout
   Brand panel sits on the visual LEFT, form on the visual RIGHT in RTL.
   In RTL, column 1 is inline-start (right) and column 2 is inline-end (left).
   We keep brand-first DOM order but use grid-column to place it at column 2. */
.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.login-shell__brand {
    grid-column: 2;
}

.login-shell__form {
    grid-column: 1;
    grid-row: 1;
}

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

    .login-shell__brand {
        display: none;
    }

    .login-shell__form {
        grid-column: 1;
        grid-row: auto;
    }
}

.login-shell__brand {
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
    color: #fff;
    padding: var(--space-9);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

    .login-shell__brand::before {
        content: "";
        position: absolute;
        inset: -50% -20% auto auto;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, var(--brand-accent-soft) 0%, transparent 60%);
        pointer-events: none;
    }

.login-shell__brand-logo {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-heavy);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

    .login-shell__brand-logo .logo-mark {
        width: 48px;
        height: 48px;
        background: var(--brand-accent);
        color: var(--navy-900);
        border-radius: var(--radius-sm);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
    }

.login-shell__brand-quote {
    font-size: var(--fs-lg);
    line-height: var(--lh-loose);
    position: relative;
    z-index: 1;
}

.login-shell__brand-foot {
    font-size: var(--fs-xs);
    opacity: 0.6;
    position: relative;
    z-index: 1;
}

.login-shell__form {
    padding: var(--space-9) var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--color-bg);
}

.login-card {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
}

/* =====[ 13. Filter card ]==================================================== */
.filter-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
}

.filter-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    user-select: none;
}

.filter-card__head-title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    margin: 0;
    flex: 1 1 auto;
}

.filter-card__count {
    background: var(--brand-accent);
    color: var(--navy-900);
    font-size: 10px;
    font-weight: var(--fw-bold);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.filter-card__caret {
    color: var(--color-text-muted);
    transition: transform var(--duration) var(--easing);
}

.filter-card.is-open .filter-card__caret {
    transform: rotate(-180deg);
}

.filter-card__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration) var(--easing);
}

.filter-card.is-open .filter-card__body {
    grid-template-rows: 1fr;
}

.filter-card__body-inner {
    overflow: hidden;
    min-height: 0;
}

.filter-card__content {
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}

.filter-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.filter-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* Filter chips (active filters above table) */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 10px;
    background: var(--brand-accent-soft);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    color: var(--color-text);
}

.filter-chip__label {
    color: var(--color-text-muted);
}

.filter-chip__value {
    font-weight: var(--fw-medium);
}

.filter-chip__remove {
    width: 16px;
    height: 16px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

    .filter-chip__remove:hover {
        background: rgba(0,0,0,0.08);
        color: var(--color-text);
    }

/* =====[ 14. Gallery grid (product images) ]================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-3);
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-2);
    overflow: hidden;
    cursor: grab;
}

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.gallery-item__remove {
    position: absolute;
    top: var(--space-2);
    inset-inline-end: var(--space-2);
    width: 26px;
    height: 26px;
    border: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    opacity: 0;
    transition: opacity var(--duration) var(--easing);
}

.gallery-item:hover .gallery-item__remove {
    opacity: 1;
}

.gallery-item__star {
    position: absolute;
    top: var(--space-2);
    inset-inline-start: var(--space-2);
    font-size: 12px;
    color: var(--brand-accent);
    background: rgba(255,255,255,0.95);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gallery-item.is-primary {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 2px var(--brand-accent-soft);
}

.gallery-item__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-3);
    font-size: var(--fs-xs);
    height: 100%;
}

    .gallery-item__empty i {
        font-size: 22px;
        margin-bottom: var(--space-2);
    }

.gallery-item__add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px dashed var(--color-border-strong);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    height: 100%;
    transition: border-color var(--duration) var(--easing), background var(--duration) var(--easing);
}

    .gallery-item__add:hover {
        border-color: var(--brand-accent);
        background: var(--brand-accent-soft);
        color: var(--brand-accent);
    }

    .gallery-item__add i {
        font-size: 22px;
        margin-bottom: var(--space-1);
    }

    .gallery-item__add small {
        font-size: var(--fs-xs);
    }

/* =====[ 15. Variant repeater rows ]========================================== */
.variant-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.variant-option {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

@media (max-width: 575.98px) {
    .variant-option {
        grid-template-columns: 1fr;
    }
}

.variant-option__remove {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

    .variant-option__remove:hover {
        background: var(--status-danger-soft);
        color: var(--status-danger);
    }

.variant-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

    .variant-table th {
        padding: var(--space-2) var(--space-3);
        background: var(--color-surface-2);
        color: var(--color-text-muted);
        font-size: var(--fs-xs);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        text-align: start;
        border-bottom: 1px solid var(--color-border);
    }

    .variant-table td {
        padding: var(--space-2) var(--space-3);
        border-bottom: 1px solid var(--color-border);
    }

    .variant-table tr:last-child td {
        border-bottom: 0;
    }

    .variant-table input {
        font-size: var(--fs-sm);
    }

/* =====[ 16. Sticky bottom action bar (product create) ]====================== */
.app-sticky-footer {
    position: sticky;
    bottom: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-5);
    /* Add iOS safe-area inset so the bar sits above the home indicator. */
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    margin: var(--space-6) calc(-1 * var(--space-5)) calc(-1 * var(--space-9));
    display: flex;
    align-items: center;
    gap: var(--space-3);
    z-index: var(--z-sticky);
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
}

[data-theme="dark"] .app-sticky-footer {
    box-shadow: 0 -4px 12px rgba(0,0,0,0.4);
}

.app-sticky-footer__info {
    flex: 1 1 auto;
    min-width: 0;
}

.app-sticky-footer__info-title {
    font-weight: var(--fw-medium);
    margin: 0;
    font-size: var(--fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sticky-footer__info-sub {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sticky-footer__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* Mobile: stack actions on a new row and hide the verbose subtitle. */
@media (max-width: 767.98px) {
    .app-sticky-footer {
        flex-wrap: wrap;
        padding: var(--space-3);
        padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
        gap: var(--space-2);
    }

    .app-sticky-footer__info {
        flex: 1 1 100%;
        order: -1;
    }

    .app-sticky-footer__info-sub {
        display: none;
    }

    .app-sticky-footer__actions {
        flex: 1 1 100%;
        justify-content: stretch;
    }

        .app-sticky-footer__actions .btn-app {
            flex: 1 1 0;
            padding-inline: var(--space-2);
            min-width: 0;
        }
        /* Hide secondary actions marked with [data-hide-mobile] — the primary save
     and draft buttons get the room they need to render the full label. */
        .app-sticky-footer__actions [data-hide-mobile] {
            display: none;
        }
}
/* On very narrow phones, shrink the cancel link to icon-only so the
   important "save" + "draft" labels always fit comfortably. */
@media (max-width: 399.98px) {
    .app-sticky-footer__actions [data-shrink-mobile] {
        flex: 0 0 auto;
        width: 38px;
        padding-inline: 0;
        overflow: hidden;
        white-space: nowrap;
        text-indent: -9999px;
    }

        .app-sticky-footer__actions [data-shrink-mobile] i {
            text-indent: 0;
        }
}

/* =====[ 17. Progress bar (page-level) ]====================================== */
.progress-app {
    width: 100%;
    height: 6px;
    background: var(--color-surface-2);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.progress-app__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-hover));
    border-radius: var(--radius-pill);
    transition: width var(--duration-slow) var(--easing);
    width: 0;
}

/* =====[ 18. Tab status (extends .tabs-app-v__btn) ]========================== */
.tabs-app-v__btn-status {
    margin-inline-start: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
    background: var(--color-surface-2);
    color: var(--color-text-faint);
    border: 1px solid var(--color-border);
}

.tabs-app-v__btn-status--valid {
    background: var(--status-success-soft);
    color: var(--status-success);
    border-color: transparent;
}

.tabs-app-v__btn-status--invalid {
    background: var(--status-danger-soft);
    color: var(--status-danger);
    border-color: transparent;
}

.tabs-app-v__btn-status--partial {
    background: var(--status-warning-soft);
    color: var(--status-warning);
    border-color: transparent;
}

/* =====[ 19. Compact stat block (smaller KPI variant) ]======================= */
.stat-mini {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.stat-mini__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--brand-accent-soft);
    color: var(--brand-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.stat-mini__label {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: 0;
}

.stat-mini__value {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin: 0;
    line-height: 1.2;
}

/* =====[ 20. Empty state ]==================================================== */
.empty-state {
    text-align: center;
    padding: var(--space-9) var(--space-5);
    color: var(--color-text-muted);
}

.empty-state__icon {
    font-size: 40px;
    color: var(--color-text-faint);
    margin-bottom: var(--space-3);
}

.empty-state__title {
    color: var(--color-text);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-2);
}

.empty-state__text {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-sm);
}

/* =====[ 21. Color swatch input (for category color picker in row) ]========== */
.color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    margin-inline-end: var(--space-2);
    vertical-align: middle;
}

/* =====[ 22. Section header inside a card (used in product create panels) ]== */
.card-section {
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

    .card-section:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .card-section:first-child {
        padding-top: 0;
    }

.card-section__title {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .card-section__title i {
        color: var(--brand-accent);
    }

.card-section__sub {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
}

/* =====[ Tree table — hierarchical accounts ]================================ */
.tree-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

    .tree-table thead th {
        background: var(--color-surface-2);
        color: var(--color-text-muted);
        font-size: var(--fs-xs);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: var(--space-2) var(--space-3);
        text-align: start;
        border-bottom: 1px solid var(--color-border);
        white-space: nowrap;
    }

    .tree-table tbody td {
        padding: var(--space-2) var(--space-3);
        border-bottom: 1px solid var(--color-border);
        vertical-align: middle;
    }

    .tree-table tbody tr:hover td {
        background: var(--color-surface-hover);
    }

    .tree-table tbody tr:last-child td {
        border-bottom: 0;
    }

.tree-row__name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tree-row__toggle {
    width: 20px;
    height: 20px;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    transition: transform var(--duration) var(--easing);
}

.tree-row.is-collapsed .tree-row__toggle {
    transform: rotate(-90deg);
}

.tree-row__toggle:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.tree-row__toggle-placeholder {
    width: 20px;
    flex-shrink: 0;
}

.tree-row__code {
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    min-width: 60px;
    display: inline-block;
}

.tree-row--group td {
    background: var(--color-surface-2);
    font-weight: var(--fw-bold);
}

.tree-row--group .tree-row__name {
    color: var(--color-text);
}

.tree-row.is-hidden {
    display: none;
}

.tree-row__type {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: var(--fw-medium);
}

.tree-row__type--asset {
    background: var(--status-info-soft);
    color: var(--status-info);
}

.tree-row__type--liability {
    background: var(--status-warning-soft);
    color: var(--status-warning);
}

.tree-row__type--equity {
    background: var(--brand-accent-soft);
    color: var(--gold-700);
}

[data-theme="dark"] .tree-row__type--equity {
    color: var(--gold-300);
}

.tree-row__type--revenue {
    background: var(--status-success-soft);
    color: var(--status-success);
}

.tree-row__type--expense {
    background: var(--status-danger-soft);
    color: var(--status-danger);
}

/* =====[ Profile header — contact / customer view ]========================= */
.profile-header {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-5);
    align-items: center;
    margin-bottom: var(--space-5);
}

@media (max-width: 767.98px) {
    .profile-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .profile-header__actions {
        justify-content: center !important;
    }
}

.profile-header__avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary), var(--navy-600));
    color: var(--brand-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: var(--fw-heavy);
    flex-shrink: 0;
    position: relative;
}

.profile-header__avatar-dot {
    position: absolute;
    bottom: 4px;
    inset-inline-end: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--status-success);
    border: 3px solid var(--color-surface);
}

.profile-header__info {
    min-width: 0;
}

.profile-header__name {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-1);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.profile-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

    .profile-header__meta i {
        color: var(--brand-accent);
        margin-inline-end: 4px;
    }

.profile-header__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* =====[ Info row — definition list style for profile overview ]============= */
.info-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: var(--fs-sm);
}

    .info-row:last-child {
        border-bottom: 0;
    }

.info-row__label {
    color: var(--color-text-muted);
}

.info-row__value {
    color: var(--color-text);
    font-weight: var(--fw-medium);
}

@media (max-width: 575.98px) {
    .info-row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
        padding: var(--space-2) 0;
    }
}

/* =====[ Contact type selector — universal "kind" picker ]=================== */
.contact-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.contact-type {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--duration) var(--easing), background var(--duration) var(--easing);
    text-align: start;
    font-family: inherit;
    width: 100%;
    position: relative;
}

    .contact-type:hover {
        border-color: var(--brand-accent);
    }

    .contact-type.is-active {
        border-color: var(--brand-accent);
        background: var(--brand-accent-soft);
    }

        .contact-type.is-active::after {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: 6px;
            inset-inline-end: 8px;
            width: 18px;
            height: 18px;
            background: var(--brand-accent);
            color: var(--navy-900);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
        }

.contact-type__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--color-surface-2);
    color: var(--brand-primary);
    flex-shrink: 0;
}

.contact-type.is-active .contact-type__icon {
    background: var(--brand-accent);
    color: var(--navy-900);
}

.contact-type__label {
    font-weight: var(--fw-bold);
    margin: 0;
    font-size: var(--fs-sm);
}

.contact-type__sub {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    margin: 2px 0 0;
}

/* =====[ Attachment list — file uploads with category ]===================== */
.attachment-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.attachment {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.attachment__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

[data-theme="dark"] .attachment__icon {
    color: var(--gold-300);
}

.attachment__icon--pdf {
    background: rgba(220,38,38,0.12);
    color: var(--status-danger);
}

.attachment__icon--image {
    background: var(--status-info-soft);
    color: var(--status-info);
}

.attachment__icon--doc {
    background: rgba(2,132,199,0.12);
    color: var(--status-info);
}

.attachment__info {
    min-width: 0;
    display: grid;
    gap: var(--space-2);
}

.attachment__name {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.attachment__meta {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.attachment__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

@media (max-width: 575.98px) {
    .attachment {
        grid-template-columns: 40px 1fr;
    }

    .attachment__actions {
        grid-column: 2;
        justify-content: flex-end;
    }

    .attachment__icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .attachment__fields {
        grid-template-columns: 1fr;
    }
}

.attachment__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.attachment__remove {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

    .attachment__remove:hover {
        background: var(--status-danger-soft);
        color: var(--status-danger);
    }

/* =====[ 24. Invoice — items, totals, payments, print ]====================== */
.invoice-meta-grid {
    display: grid;
    /* `min(220px, 100%)` lets the columns shrink below the 220 min when the
     container is narrower than 220 — this prevents 2 cramped columns at
     ~290–440px widths where `minmax(220px, 1fr)` alone would still try to
     squeeze in 2 tracks. */
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--space-4);
}

.invoice-items {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

    .invoice-items thead th {
        background: var(--color-surface-2);
        color: var(--color-text-muted);
        font-size: var(--fs-xs);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: var(--space-2) var(--space-3);
        text-align: start;
        border-bottom: 1px solid var(--color-border);
        white-space: nowrap;
    }

    .invoice-items tbody td {
        padding: var(--space-2) var(--space-3);
        border-bottom: 1px solid var(--color-border);
        vertical-align: middle;
    }

    .invoice-items tbody tr:last-child td {
        border-bottom: 0;
    }

    .invoice-items input.form-app__control,
    .invoice-items select.form-app__control {
        height: 34px;
        font-size: var(--fs-sm);
    }

.invoice-items__line-total {
    font-weight: var(--fw-bold);
    white-space: nowrap;
    color: var(--color-text);
}

.invoice-items__remove {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

    .invoice-items__remove:hover {
        background: var(--status-danger-soft);
        color: var(--status-danger);
    }

/* Mobile-friendly card view for invoice line items */
@media (max-width: 767.98px) {
    .invoice-items thead {
        display: none;
    }

    .invoice-items, .invoice-items tbody, .invoice-items tr, .invoice-items td {
        display: block;
    }

        .invoice-items tbody tr {
            background: var(--color-surface-2);
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            padding: var(--space-2);
            margin-bottom: var(--space-3);
        }

        .invoice-items tbody td {
            border: 0;
            padding: var(--space-1) var(--space-2);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

            .invoice-items tbody td::before {
                content: attr(data-label);
                font-size: var(--fs-xs);
                color: var(--color-text-muted);
                width: 90px;
                flex-shrink: 0;
            }
            /* Cells without a data-label (delete button) — no empty 90px gap */
            .invoice-items tbody td:not([data-label])::before,
            .invoice-items tbody td[data-label=""]::before {
                display: none;
            }

            .invoice-items tbody td:not([data-label]),
            .invoice-items tbody td[data-label=""] {
                justify-content: flex-end;
                padding-top: var(--space-2);
                border-top: 1px dashed var(--color-border);
                margin-top: var(--space-2);
            }

            .invoice-items tbody td.is-product::before {
                display: none;
            }

            .invoice-items tbody td.is-product {
                padding: var(--space-2);
            }
            /* Inputs/selects inside cells: take the rest of the row */
            .invoice-items tbody td > input.form-app__control,
            .invoice-items tbody td > select.form-app__control {
                flex: 1 1 auto;
                min-width: 0;
            }
            /* Line total — push to the inline-end so the value reads naturally */
            .invoice-items tbody td.invoice-items__line-total {
                justify-content: space-between;
            }
}

/* Totals card (right column on invoice create) */
.totals-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    position: sticky;
    top: var(--space-4);
}

.totals-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: var(--fs-sm);
}

    .totals-card__row + .totals-card__row {
        border-top: 1px dashed var(--color-border);
    }

    .totals-card__row b {
        font-weight: var(--fw-bold);
    }

.totals-card__row--grand {
    font-size: var(--fs-md);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
    border-top: 2px solid var(--color-border-strong) !important;
}

    .totals-card__row--grand b {
        color: var(--brand-primary);
        font-size: var(--fs-lg);
    }

[data-theme="dark"] .totals-card__row--grand b {
    color: var(--gold-300);
}

.totals-card__row--due b {
    color: var(--status-danger);
}

.totals-card__row--paid b {
    color: var(--status-success);
}

.totals-card__row-input {
    width: 90px;
    text-align: end;
}

/* Payment allocations
   Columns: method | destination account | amount | remove
   The "account" select is method-aware: cash → cash registers, card → POS,
   transfer/check → bank accounts, wallet → wallet brands, credit → disabled. */
.payment-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.4fr) minmax(110px, 0.9fr) 36px;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    margin-bottom: var(--space-2);
}

@media (max-width: 767.98px) {
    .payment-row {
        grid-template-columns: 1fr 1fr;
    }

    .payment-row__method {
        grid-column: 1 / -1;
    }

    .payment-row__account {
        grid-column: 1 / -1;
    }

    .payment-row__remove {
        grid-column: 2;
        justify-self: end;
        align-self: center;
    }
}

.payment-row__method {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .payment-row__method i {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-sm);
        background: var(--brand-accent-soft);
        color: var(--brand-accent);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        flex-shrink: 0;
    }

.payment-row__remove {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

    .payment-row__remove:hover {
        background: var(--status-danger-soft);
        color: var(--status-danger);
    }

/* Quick payment-method chips (presets) */
.payment-presets {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.payment-preset {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--color-text);
    transition: border-color var(--duration) var(--easing), color var(--duration) var(--easing);
}

    .payment-preset:hover {
        border-color: var(--brand-accent);
        color: var(--brand-accent);
    }

    .payment-preset i {
        color: var(--brand-accent);
    }

/* ============= Invoice VIEW — print-friendly ============= */
.invoice-print {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-7);
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 575.98px) {
    /* Tighter padding on phones — every pixel counts */
    .invoice-print {
        padding: var(--space-4);
    }

    .invoice-print__header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--space-3) !important;
    }

    .invoice-print__title,
    .invoice-print__num,
    .invoice-print__date {
        text-align: start;
    }
}

.invoice-print__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 2px solid var(--color-border-strong);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.invoice-print__brand {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-heavy);
    color: var(--brand-primary);
    margin: 0 0 var(--space-2);
}

.invoice-print__brand-meta {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.invoice-print__title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-heavy);
    color: var(--brand-accent);
    margin: 0 0 var(--space-2);
    text-align: end;
}

.invoice-print__num {
    font-size: var(--fs-md);
    color: var(--color-text);
    text-align: end;
}

.invoice-print__date {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-align: end;
}

.invoice-print__parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
}

@media (max-width: 575.98px) {
    .invoice-print__parties {
        grid-template-columns: 1fr;
    }
}

.invoice-print__party-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
    font-weight: var(--fw-medium);
}

.invoice-print__party-name {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    margin: 0 0 4px;
}

.invoice-print__party-line {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.invoice-print__totals {
    margin-inline-start: auto;
    width: 100%;
    max-width: 360px;
}

.invoice-print__footer {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

@media (max-width: 575.98px) {
    .invoice-print__footer {
        grid-template-columns: 1fr;
    }
}

/* Print rules — hide everything except .invoice-print */
@media print {
    .no-print {
        display: none !important;
    }

    body, html {
        background: #fff !important;
        overflow: visible !important;
        height: auto !important;
    }

    .app-shell, .app-main {
        display: block !important;
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .app-sidebar, .app-header, .app-overlay, .toast-stack, .app-sticky-footer {
        display: none !important;
    }

    .invoice-print {
        border: 0;
        box-shadow: none;
        padding: 0;
        max-width: none;
    }

    .invoice-print__title {
        color: #000 !important;
    }

    .invoice-print__brand {
        color: #000 !important;
    }

    .totals-card__row--grand b {
        color: #000 !important;
    }

    @page {
        size: A4;
        margin: 1.5cm;
    }
}

/* Refund modal — line picker rows */
.refund-row {
    display: grid;
    grid-template-columns: 24px 1fr 110px 100px;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    background: var(--color-surface);
    transition: background var(--duration) var(--easing);
}

    .refund-row.is-selected {
        background: var(--brand-accent-soft);
        border-color: var(--brand-accent);
    }

    .refund-row.is-exhausted {
        opacity: 0.6;
        background: var(--color-surface-2);
    }

.refund-row__name {
    font-size: var(--fs-sm);
}

    .refund-row__name small {
        color: var(--color-text-muted);
        display: block;
    }

.refund-row__qty {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-align: center;
}

    .refund-row__qty b {
        color: var(--color-text);
        font-size: var(--fs-sm);
    }

@media (max-width: 575.98px) {
    .refund-row {
        grid-template-columns: 24px 1fr;
    }

        .refund-row__qty, .refund-row > input[type=number] {
            grid-column: 2;
        }
}

/* Refund history (list of past refunds on an invoice) */
.refund-history {
    background: var(--color-surface);
    border: 1px solid var(--status-danger-soft);
    border-inline-start: 4px solid var(--status-danger);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}

.refund-history__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

    .refund-history__head h4 {
        margin: 0;
        font-size: var(--fs-md);
    }

    .refund-history__head .badge-app {
        margin-inline-start: auto;
    }

.refund-history__item {
    padding: var(--space-3) 0;
    border-top: 1px dashed var(--color-border);
    font-size: var(--fs-sm);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
    align-items: center;
}

    .refund-history__item:first-child {
        border-top: 0;
        padding-top: 0;
    }

.refund-history__item-meta {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    margin-top: 2px;
}

.refund-history__item-amount {
    color: var(--status-danger);
    font-weight: var(--fw-bold);
}

/* =====[ 23. Branch select cards ]============================================ */
.branch-shell {
    min-height: 100vh;
    background: var(--color-bg);
    padding: var(--space-7) var(--space-5);
}

.branch-shell__head {
    max-width: 960px;
    margin: 0 auto var(--space-7);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

    .branch-shell__head .avatar-app {
        background: var(--brand-primary);
        color: var(--brand-accent);
    }

.branch-shell__welcome {
    flex: 1 1 auto;
    min-width: 0;
}

    .branch-shell__welcome h1 {
        font-size: var(--fs-xl);
        margin: 0;
    }

    .branch-shell__welcome p {
        color: var(--color-text-muted);
        margin: 2px 0 0;
        font-size: var(--fs-sm);
    }

.branch-grid {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.branch-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
    transition: transform var(--duration) var(--easing), box-shadow var(--duration) var(--easing), border-color var(--duration) var(--easing);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
    min-height: 220px;
}

    .branch-card:hover:not(.is-disabled) {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--brand-accent);
    }

    .branch-card.is-selected {
        border-color: var(--brand-accent);
        box-shadow: 0 0 0 3px var(--brand-accent-soft);
    }

    .branch-card.is-disabled {
        opacity: 0.55;
        cursor: not-allowed;
        background: var(--color-surface-2);
    }

.branch-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.branch-card__icon {
    width: 44px;
    height: 44px;
    background: var(--brand-accent-soft);
    color: var(--brand-accent);
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.branch-card__name {
    font-weight: var(--fw-bold);
    margin: 0 0 2px;
}

.branch-card__addr {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: 0;
}

.branch-card__meta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

    .branch-card__meta b {
        color: var(--color-text);
        display: block;
        font-size: var(--fs-sm);
        margin-top: 2px;
    }

.branch-card__badge {
    position: absolute;
    top: var(--space-3);
    inset-inline-end: var(--space-3);
}

.branch-card__role {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    margin-top: auto;
}

.branch-card__role-label {
    color: var(--color-text-muted);
}

.branch-card__role-name {
    font-weight: var(--fw-medium);
    margin-inline-start: auto;
}

/* Error page */
.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    text-align: center;
    background: var(--color-bg);
}

.error-page__code {
    font-size: 144px;
    font-weight: var(--fw-heavy);
    line-height: 1;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text {
    background: linear-gradient( 135deg, var(--status-danger), var(--brand-accent) );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.error-page__title {
    font-size: var(--fs-2xl);
    margin: var(--space-4) 0 var(--space-2);
}

.error-page__text {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
    max-width: 480px;
}
/* =====[ 99. Confirm Dialog (UI.confirm) ]==================================== */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    opacity: 0;
    transition: opacity var(--duration) var(--easing);
}

    .confirm-overlay.is-show {
        opacity: 1;
    }

.confirm-dialog {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 420px;
    width: 100%;
    padding: var(--space-6) var(--space-5) var(--space-5);
    text-align: center;
    transform: scale(0.96);
    transition: transform var(--duration) var(--easing);
}

.confirm-overlay.is-show .confirm-dialog {
    transform: scale(1);
}

.confirm-dialog__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: var(--space-3);
}

.confirm-dialog--danger .confirm-dialog__icon {
    background: var(--status-danger-soft);
    color: var(--status-danger);
}

.confirm-dialog--warning .confirm-dialog__icon {
    background: var(--status-warning-soft);
    color: var(--status-warning);
}

.confirm-dialog--info .confirm-dialog__icon {
    background: var(--status-info-soft);
    color: var(--status-info);
}

.confirm-dialog--success .confirm-dialog__icon {
    background: var(--status-success-soft);
    color: var(--status-success);
}

.confirm-dialog__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.confirm-dialog__text {
    margin: 0 0 var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.confirm-dialog__actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}

    .confirm-dialog__actions .btn-app {
        min-width: 100px;
    }
/* =====[ 100. Notifications Widget (UI.notifications) ]======================= */
.notif-wrap {
    position: relative;
    display: inline-block;
}

.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-dropdown, 1000);
    display: none;
    flex-direction: column;
    max-height: 480px;
    overflow: hidden;
    animation: notif-pop var(--duration) var(--easing);
}

    .notif-panel.is-open {
        display: flex;
    }

@keyframes notif-pop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notif-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.notif-panel__title {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
}

.notif-panel__action {
    background: transparent;
    border: 0;
    color: var(--brand-primary);
    font-size: var(--fs-xs);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

    .notif-panel__action:hover {
        text-decoration: underline;
    }

.notif-panel__list {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.notif-panel__empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}

    .notif-panel__empty p {
        margin: var(--space-3) 0 0;
        font-size: var(--fs-sm);
    }

.notif-panel__foot {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
}

.notif-panel__clear {
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    cursor: pointer;
    font-family: inherit;
    padding: var(--space-2);
}

    .notif-panel__clear:hover {
        color: var(--status-danger);
    }

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    position: relative;
    transition: background var(--duration);
}

    .notif-item:hover {
        background: var(--color-surface-hover);
    }

    .notif-item:last-child {
        border-bottom: 0;
    }
    /* اللي مش مقروء — خط برتقالي صغير على اليمين */
    .notif-item:not(.is-read)::before {
        content: '';
        position: absolute;
        top: var(--space-3);
        inset-inline-start: var(--space-2);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--brand-accent);
    }

    .notif-item.is-read {
        opacity: 0.7;
    }

.notif-item__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.notif-item.is-info .notif-item__icon {
    background: var(--status-info-soft);
    color: var(--status-info);
}

.notif-item.is-success .notif-item__icon {
    background: var(--status-success-soft);
    color: var(--status-success);
}

.notif-item.is-warning .notif-item__icon {
    background: var(--status-warning-soft);
    color: var(--status-warning);
}

.notif-item.is-danger .notif-item__icon {
    background: var(--status-danger-soft);
    color: var(--status-danger);
}

.notif-item__body {
    flex: 1 1 auto;
    min-width: 0;
}

.notif-item__title {
    margin: 0 0 2px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.notif-item__text {
    margin: 0 0 4px;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.notif-item__time {
    margin: 0;
    font-size: 11px;
    color: var(--color-text-faint);
}

.notif-item__dismiss {
    background: transparent;
    border: 0;
    color: var(--color-text-faint);
    cursor: pointer;
    font-size: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--duration);
}

.notif-item:hover .notif-item__dismiss {
    opacity: 1;
}

.notif-item__dismiss:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

/* =====[ Segmented toggle (reusable) ]======================================= */
.seg-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
}

    .seg-toggle button {
        border: 0;
        background: transparent;
        color: var(--color-text-muted);
        padding: 9px 16px;
        cursor: pointer;
        font-family: inherit;
        font-size: var(--fs-sm);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
    }

    .seg-toggle button + button {
        border-inline-start: 1px solid var(--color-border);
    }

    .seg-toggle button.is-active {
        background: var(--brand-primary);
        color: #fff;
    }

.expiry-precision {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.expiry-precision__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.expiry-precision__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--status-warning-soft);
    color: var(--status-warning);
    flex-shrink: 0;
}

.expiry-precision__title {
    margin: 0;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
}

.expiry-precision__sub {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

@media (max-width: 575.98px) {
    .expiry-precision { flex-direction: column; align-items: stretch; }
    .seg-toggle { width: 100%; }
    .seg-toggle button { flex: 1; justify-content: center; }
}

/* =====[ Money field — العملة + سعر الصرف + المبلغ + يعادل (مكوّن موحّد) ]==== */
.cx-money {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}

.cx-money__fields {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 1.1fr;
    gap: var(--space-2);
    padding: var(--space-3);
}

.cx-money__fld {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cx-money__lbl {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.cx-money__equiv {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px var(--space-3);
    background: var(--brand-primary-soft);
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

    .cx-money__equiv i {
        color: var(--brand-primary);
    }

    .cx-money__equiv b {
        margin-inline-start: auto;
        font-family: var(--font-mono);
        font-size: var(--fs-md);
        font-weight: var(--fw-bold);
        color: var(--brand-primary);
    }

@media (max-width: 575.98px) {
    .cx-money__fields { grid-template-columns: 1fr; }
}

/* ---------- مدخل الهاتف بكود الدولة ---------- */
.phone-field {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: visible;
}
.phone-field:focus-within { border-color: var(--brand-accent); box-shadow: 0 0 0 2px var(--brand-accent-soft); }
.phone-field__input {
    flex: 1; min-width: 0;
    border: 0 !important; background: transparent !important;
    box-shadow: none !important;
    padding: 0 12px; direction: ltr; text-align: start;
    color: var(--color-text); font-family: var(--font-sans);
}
.phone-field__input:focus { outline: none; box-shadow: none !important; }
.phone-field__code {
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; cursor: pointer;
    background: var(--color-surface-2);
    border-inline-end: 1px solid var(--color-border);
    padding: 0 12px; flex-shrink: 0;
    color: var(--color-text); font-family: var(--font-mono);
    font-size: var(--fs-sm); font-weight: 700;
    border-start-start-radius: var(--radius); border-end-start-radius: var(--radius);
}
.phone-field__code i { font-size: 10px; color: var(--color-text-muted); }
.phone-field__code:hover { background: var(--color-border); }
.phone-field__menu {
    position: absolute; top: calc(100% + 4px); inset-inline-start: 0;
    width: 240px; max-height: 280px; overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 50; padding: 4px;
}
.phone-field__opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; border: 0; background: transparent; cursor: pointer;
    padding: 8px 10px; border-radius: var(--radius-sm);
    color: var(--color-text); font-family: var(--font-sans); font-size: var(--fs-sm);
    text-align: start;
}
.phone-field__opt:hover { background: var(--brand-accent-soft); }
.phone-field__opt-dial { font-family: var(--font-mono); color: var(--color-text-muted); direction: ltr; }

/* ---------- توحيد خط select2 (بما فيه الـ placeholder) على خط النظام ---------- */
.select2-container,
.select2-container .select2-selection__rendered,
.select2-container .select2-selection__placeholder,
.select2-container .select2-search__field,
.select2-container--default .select2-search--inline .select2-search__field,
.select2-results__option,
.select2-results__group {
    font-family: var(--font-sans) !important;
}
.select2-search__field::placeholder { font-family: var(--font-sans) !important; }

/* ---------- كارت الفرع الأساسي (عرض فقط) ---------- */
.branch-chip {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--eyaar-gold-grad-soft);
}
.branch-chip__icon {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--eyaar-gold-grad); color: #1c1917; font-size: 17px;
}
.branch-chip__body { min-width: 0; }
.branch-chip__name { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.branch-chip__hint { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); }