/*
 * Union Brand (هوية الاتحاد) panel theme.
 * Loaded by AdminPanelProvider ONLY when GeneralSettings::panel_theme === 'union_brand'.
 * The Original theme never loads this file. Light mode only (dark mode is
 * disabled for this theme in the panel config).
 *
 * Badge/focus/link/tab colors come from the brand palettes set in
 * AdminPanelProvider::panelColors(); this file handles surfaces, layout
 * and the few places where Filament's generated shades need adjusting.
 */

/* ===== Step 1: tokens ===== */
:root {
    --ub-bg: #f5f7fb;
    --ub-surface: #ffffff;
    --ub-surface-alt: #f8f9fc;
    --ub-border: #e4e8f0;
    --ub-heading: #1f2440;
    --ub-text: #3d4461;
    --ub-muted: #6b7280;

    --ub-navy: #103595;
    --ub-navy-hover: #0d2a78;
    --ub-dark: #2b2f4a;
    --ub-dark-hover: #1c1f33;

    /* Brand accents (icons, stripes, charts) */
    --ub-teal: #0ab39c;
    --ub-blue: #299cdb;
    --ub-amber: #f7b84b;
    --ub-red: #f06548;
    --ub-green: #28a745;

    /* Deepened fills for white-text buttons (WCAG AA) */
    --ub-success-fill: #07806f;
    --ub-success-fill-hover: #066b5d;
    --ub-info-fill: #1b74a8;
    --ub-info-fill-hover: #16618c;
    --ub-danger-fill: #c8432a;
    --ub-danger-fill-hover: #a93822;
    --ub-warning-fill: #f7b84b;
    --ub-warning-fill-hover: #eea935;
    --ub-warning-ink: #3d2c00;

    --ub-radius: 12px;
    --ub-radius-sm: 8px;
    --ub-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --ub-shadow-hover: 0 6px 16px rgba(43, 47, 74, 0.12);
}

/* ===== Page & topbar ===== */
.fi-body {
    background-color: var(--ub-bg);
    color: var(--ub-text);
}
.fi-topbar,
.fi-topbar > nav {
    background-color: var(--ub-surface);
    box-shadow: none;
    border-bottom: 1px solid var(--ub-border);
}
.fi-header-heading {
    color: var(--ub-heading);
    font-weight: 700;
}
.fi-header-subheading {
    color: var(--ub-muted);
}

/* ===== Sidebar ===== */
.fi-sidebar { background-color: var(--ub-navy); }
.fi-sidebar-header { background-color: var(--ub-navy); box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.fi-sidebar-item-label { color: rgba(255, 255, 255, 0.88); }
.fi-sidebar-item-btn > .fi-icon { color: rgba(255, 255, 255, 0.7); }
.fi-sidebar-item-btn { border-radius: var(--ub-radius-sm); }
.fi-sidebar-item-btn:hover { background-color: rgba(255, 255, 255, 0.07); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(255, 255, 255, 0.12);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: #ffffff;
    font-weight: 700;
}
.fi-sidebar-group-label { color: rgba(255, 255, 255, 0.55); }
.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-collapse-btn .fi-icon { color: rgba(255, 255, 255, 0.55); }
.fi-sidebar-item-grouped-border-part,
.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last { background-color: rgba(255, 255, 255, 0.25); }

/* ===== Buttons — Filament's own --bg/--hover-bg/--text vars ===== */
.fi-btn { border-radius: var(--ub-radius-sm); }
.fi-btn.fi-color-primary:not(.fi-outlined) { --bg: var(--ub-dark);         --hover-bg: var(--ub-dark-hover);         --text: #ffffff; --hover-text: #ffffff; }
.fi-btn.fi-color-success:not(.fi-outlined) { --bg: var(--ub-success-fill); --hover-bg: var(--ub-success-fill-hover); --text: #ffffff; --hover-text: #ffffff; }
.fi-btn.fi-color-info:not(.fi-outlined)    { --bg: var(--ub-info-fill);    --hover-bg: var(--ub-info-fill-hover);    --text: #ffffff; --hover-text: #ffffff; }
.fi-btn.fi-color-danger:not(.fi-outlined)  { --bg: var(--ub-danger-fill);  --hover-bg: var(--ub-danger-fill-hover);  --text: #ffffff; --hover-text: #ffffff; }
.fi-btn.fi-color-warning:not(.fi-outlined) { --bg: var(--ub-warning-fill); --hover-bg: var(--ub-warning-fill-hover); --text: var(--ub-warning-ink); --hover-text: var(--ub-warning-ink); }

/* ===== Cards — base look shared by sections, stat tiles, widgets and tables ===== */
.fi-section:not(.fi-aside),
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    border-radius: var(--ub-radius);
    border: 1px solid var(--ub-border);
    box-shadow: var(--ub-shadow);
    background-color: var(--ub-surface);
}

/* ======================================================================
   Step 2: Dashboard
   Scope: pages that contain the Union Brand welcome banner
   (App\Filament\Widgets\WelcomeHeaderWidget), i.e. the dashboard only.
   ====================================================================== */
.fi-body:has(.ub-welcome) {
    --ub-overlap: 56px;
    --ub-grid-gap: 1.5rem; /* Filament .fi-sc-has-gap */
}

/* The banner replaces the page header (title + "إنشاء معاملة" action). */
.fi-body:has(.ub-welcome) .fi-header { display: none; }

/* ----- Welcome banner (direction B) ----- */
.ub-welcome {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 30px 32px;
    border-radius: 22px;
    color: #ffffff;
    background: linear-gradient(120deg, #0c2a78 0%, #103595 45%, #1f5fc9 100%);
    box-shadow: 0 14px 30px -10px rgba(16, 53, 149, 0.35);
}
.ub-welcome::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 85% 120%, rgba(41, 156, 219, 0.55) 0, rgba(41, 156, 219, 0) 45%);
}
.ub-welcome::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline-start: -40px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 36px solid rgba(255, 255, 255, 0.06);
}
/* Extra room at the bottom when the stat cards overlap it. The lazy-load
   placeholder is matched too, so nothing jumps while the stats load. */
.ub-welcome-widget:has(+ .fi-wi-stats-overview, + [x-intersect]) .ub-welcome {
    padding-bottom: calc(30px + var(--ub-overlap));
}
.ub-welcome-title {
    margin: 0 0 6px;
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff;
}
.ub-welcome-date {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375rem;
}
.ub-welcome-date-icon { width: 18px; height: 18px; flex-shrink: 0; }
.ub-welcome .ub-welcome-action {
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(247, 184, 75, 0.35);
}

/* ----- Stat cards overlap the banner (direction B) ----- */
.ub-welcome-widget + .fi-wi-stats-overview {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * (var(--ub-overlap) + var(--ub-grid-gap)));
    padding-inline: 20px;
}

/* ----- Stat cards: compact — icon chip beside a label/number stack ----- */
.fi-body:has(.ub-welcome) .fi-wi-stats-overview-stat {
    --acc: var(--ub-navy);
    --tint: #e8ecf7;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid var(--ub-border);
    box-shadow: 0 4px 6px -1px rgba(16, 24, 40, 0.06), 0 10px 24px -6px rgba(16, 24, 40, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fi-body:has(.ub-welcome) .fi-wi-stats-overview .fi-section-content > :nth-child(3n+2) .fi-wi-stats-overview-stat { --acc: #b27400; --tint: #fef4e1; }
.fi-body:has(.ub-welcome) .fi-wi-stats-overview .fi-section-content > :nth-child(3n+3) .fi-wi-stats-overview-stat { --acc: #07806f; --tint: #e6f7f4; }
.fi-body:has(.ub-welcome) .fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -12px rgba(16, 24, 40, 0.18);
}
/* Soft decorative circle, clipped inside the card, behind the content,
   in the corner opposite the icon chip */
.fi-body:has(.ub-welcome) .fi-wi-stats-overview-stat::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline-end: -24px;
    bottom: -34px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--tint);
    opacity: 0.6;
    pointer-events: none;
}
/* Two-column grid: chip spans both rows; label on top, number under it */
.fi-body:has(.ub-welcome) .fi-wi-stats-overview-stat-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
}
.fi-body:has(.ub-welcome) .fi-wi-stats-overview-stat-label-ctn {
    display: contents;
}
.fi-body:has(.ub-welcome) .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    padding: 13px;
    border-radius: 16px;
    background-color: var(--tint);
    color: var(--acc);
}
.fi-body:has(.ub-welcome) .fi-wi-stats-overview-stat-label {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ub-muted);
}
.fi-body:has(.ub-welcome) .fi-wi-stats-overview-stat-value {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ub-heading);
}
.fi-body:has(.ub-welcome) .fi-wi-stats-overview-stat-description {
    grid-column: 1 / -1;
    margin-top: 8px;
}
/* ----- Chart cards (tables and badges are global, see step 3) ----- */
.fi-body:has(.ub-welcome) .fi-section:not(.fi-aside) {
    border-radius: 16px;
}
.fi-body:has(.ub-welcome) .fi-section-header-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--ub-heading);
}
.fi-body:has(.ub-welcome) .fi-section-header-heading::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: var(--ub-navy);
    flex-shrink: 0;
}

/* ----- Small screens: smaller banner, lighter overlap ----- */
@media (max-width: 640px) {
    .fi-body:has(.ub-welcome) { --ub-overlap: 28px; }
    .ub-welcome { padding: 22px 20px; border-radius: 18px; }
    .ub-welcome-title { font-size: 1.3rem; }
    .ub-welcome .ub-welcome-action { width: 100%; justify-content: center; }
    .ub-welcome-widget + .fi-wi-stats-overview { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .fi-body:has(.ub-welcome) .fi-wi-stats-overview-stat { transition: none; }
    .fi-body:has(.ub-welcome) .fi-wi-stats-overview-stat:hover { transform: none; }
}

/* ======================================================================
   Step 3: Tables and badges — every page (resources, reports, hub,
   relation managers, dashboard widgets)
   ====================================================================== */

/* ----- Table card & header ----- */
.fi-ta-ctn {
    border-radius: 16px;
}
.fi-ta-header {
    padding-block: 18px;
}
.fi-ta-header-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--ub-heading);
}
.fi-ta-header-heading::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: var(--ub-navy);
    flex-shrink: 0;
}
.fi-ta-header-description { color: var(--ub-muted); }
.fi-ta-header-toolbar {
    background-color: var(--ub-surface);
    border-color: var(--ub-border);
}

/* Search box inside tables (other inputs are styled in step 4) */
.fi-ta-ctn .fi-ta-header-toolbar .fi-input-wrp {
    border-radius: 10px;
    background-color: var(--ub-surface-alt);
}

/* ----- Column headers ----- */
.fi-ta-header-cell,
.fi-ta-header-group-cell,
.fi-ta-empty-header-cell,
.fi-ta-selection-cell:where(thead *) {
    background-color: var(--ub-surface-alt);
}
.fi-ta-header-cell {
    color: var(--ub-muted);
    font-size: 0.75rem;
    font-weight: 700;
}
.fi-ta-header-cell-sorted,
.fi-ta-header-cell-sort-btn:hover { color: var(--ub-navy); }

/* ----- Rows ----- */
.fi-ta-row,
.fi-ta-row.fi-striped {
    background-color: transparent;
}
.fi-ta-row:hover,
.fi-ta-row.fi-clickable:hover {
    background-color: #f3f6fd;
}
.fi-ta-table > tbody > .fi-ta-row { border-color: #eef1f6; }
.fi-ta-cell .fi-ta-text {
    padding-block: 1rem;
}
.fi-ta-text-description { color: var(--ub-muted); }

/* Group and summary rows */
.fi-ta-group-header-row > td,
.fi-ta-group-header { background-color: #f0f3f9; }
.fi-ta-group-heading { color: var(--ub-heading); font-weight: 700; }
.fi-ta-summary-row { background-color: var(--ub-surface-alt); }

/* Colored text in cells: fixed AA shades (Filament's generated ones are
   too light for info/success on white). Primary = bold navy links. */
.fi-ta-text-item.fi-color-primary { --text: var(--ub-navy); font-weight: 800; }
.fi-ta-text-item.fi-color-success { --text: #067a6a; }
.fi-ta-text-item.fi-color-info    { --text: #1a6fa3; }
.fi-ta-text-item.fi-color-warning { --text: #8a5a00; }
.fi-ta-text-item.fi-color-danger  { --text: #b8391f; }

/* ----- Bulk selection bar ----- */
.fi-ta-selection-indicator {
    background-color: #eef2fa;
    color: var(--ub-navy);
    font-weight: 500;
}

/* ----- Active filters bar ----- */
.fi-ta-filter-indicators {
    background-color: var(--ub-surface-alt);
    border-color: var(--ub-border);
}
.fi-ta-filter-indicators-label { color: var(--ub-muted); font-weight: 700; }

/* ----- Empty state ----- */
.fi-ta-empty-state-icon-bg {
    background-color: #e8ecf7;
}
.fi-ta-empty-state-icon-bg .fi-icon { color: var(--ub-navy); }
.fi-ta-empty-state-heading { color: var(--ub-heading); font-weight: 700; }
.fi-ta-empty-state-description { color: var(--ub-muted); }

/* ----- Pagination ----- */
.fi-pagination-overview { color: var(--ub-muted); }
.fi-pagination-items {
    border-radius: 10px;
    overflow: hidden;
}
.fi-pagination-item.fi-active .fi-pagination-item-btn {
    background-color: #e8ecf7;
}
.fi-pagination-item.fi-active .fi-pagination-item-label {
    color: var(--ub-navy);
    font-weight: 700;
}
.fi-pagination-records-per-page-select .fi-input-wrp,
.fi-pagination-records-per-page-select-ctn .fi-input-wrp { border-radius: 10px; }

/* ----- Badges: pill + colored dot, fixed AA colors ----- */
.fi-badge {
    border-radius: 999px;
    padding-inline: 11px 12px;
    padding-block: 4px;
    gap: 6px;
    font-weight: 700;
    /* gray (no color class) */
    background-color: #f1f3f6;
    --text: #4b5563;
    color: var(--text);
}
.fi-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}
.fi-badge.fi-color-primary { background-color: #e8ecf7; --text: #103595; --tw-ring-color: rgba(16, 53, 149, 0.12); }
.fi-badge.fi-color-success { background-color: #e6f7f4; --text: #067a6a; --tw-ring-color: rgba(6, 122, 106, 0.14); }
.fi-badge.fi-color-info    { background-color: #e7f3fb; --text: #1a6fa3; --tw-ring-color: rgba(26, 111, 163, 0.14); }
.fi-badge.fi-color-warning { background-color: #fef4e1; --text: #8a5a00; --tw-ring-color: rgba(138, 90, 0, 0.14); }
.fi-badge.fi-color-danger  { background-color: #fdecea; --text: #b8391f; --tw-ring-color: rgba(184, 57, 31, 0.14); }
.fi-badge.fi-color-gray    { background-color: #f1f3f6; --text: #4b5563; --tw-ring-color: rgba(75, 85, 99, 0.12); }

/* No dot / compact shape where badges are counters or tiny labels */
.fi-sidebar .fi-badge::before,
.fi-topbar .fi-badge::before,
.fi-tabs .fi-badge::before,
.fi-dropdown-panel .fi-badge::before,
.fi-badge.fi-size-xs::before,
.fi-badge:has(.fi-icon)::before {
    content: none;
}
.fi-sidebar .fi-badge,
.fi-topbar .fi-badge,
.fi-tabs .fi-badge,
.fi-badge.fi-size-xs {
    padding-inline: 7px;
    padding-block: 1px;
}

/* ======================================================================
   Layout: narrower sidebar, wider content (Union Brand only — this file
   is never loaded for the Original theme, so its 20rem / 7xl defaults
   stay untouched there).
   ====================================================================== */
/* Filament sets these on :root inline; the doubled selector wins regardless
   of order. Used for the desktop sidebar and the mobile slide-over alike;
   --collapsed-sidebar-width is left as is. */
:root:root {
    --sidebar-width: 16rem; /* 256px (Filament default 20rem) */
}
.fi-sidebar-item-label {
    white-space: normal;
    line-height: 1.35;
}
.fi-main.fi-width-7xl {
    max-width: 96rem; /* 1536px (Filament default 80rem / 1280px) */
}

/* ======================================================================
   Step 4: Forms — sections, fields, repeaters, uploads (every form)
   Styling only: no field, name, hook or live() behaviour is involved.
   ====================================================================== */

/* ----- Sections ----- */
.fi-section:not(.fi-section-not-contained) {
    border-radius: 16px;
}
.fi-section-header {
    padding-block: 16px;
}
.fi-section.fi-section-has-header:not(.fi-section-not-contained) > .fi-section-header {
    border-bottom: 1px solid var(--ub-border);
}
.fi-section-header-heading {
    color: var(--ub-heading);
    font-weight: 700;
}
.fi-section-header-description { color: var(--ub-muted); }
.fi-section-header > .fi-icon,
.fi-section-header .fi-section-header-icon {
    box-sizing: content-box;
    padding: 7px;
    border-radius: 10px;
    background-color: #e8ecf7;
    color: var(--ub-navy);
}
.fi-section-collapse-btn .fi-icon { color: var(--ub-muted); }

/* Sections nested inside sections read as sub-panels, not new cards */
.fi-section .fi-section:not(.fi-section-not-contained) {
    background-color: var(--ub-surface-alt);
    box-shadow: none;
    border-radius: 12px;
}
.fi-section .fi-section.fi-section-has-header > .fi-section-header {
    padding-block: 12px;
}
.fi-section .fi-section .fi-section-header-heading { font-size: 0.9375rem; }
.fi-section .fi-section .fi-section-header > .fi-icon {
    padding: 5px;
    background-color: #ffffff;
}

/* ----- Field labels, hints, errors ----- */
.fi-fo-field-label-content {
    color: var(--ub-heading);
    font-weight: 600;
}
.fi-fo-field-label-required-mark,
.fi-fieldset-label-required-mark { color: #b8391f; }
.fi-fo-field-wrp-error-message { color: #b8391f; }

/* ----- Inputs, selects, textareas, date pickers ----- */
.fi-input-wrp {
    border-radius: 10px;
    --tw-shadow: 0 0 #0000;
    --tw-ring-color: #d9e0ec;
}
.fi-input-wrp:hover:not(.fi-disabled) { --tw-ring-color: #c3cde0; }
.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    --tw-ring-color: rgba(16, 53, 149, 0.55);
}
.fi-input-wrp.fi-disabled {
    background-color: var(--ub-surface-alt);
}
.fi-input-wrp-prefix,
.fi-input-wrp-suffix {
    color: var(--ub-muted);
}
.fi-input-wrp-label { color: var(--ub-muted); font-weight: 500; }
.fi-input::placeholder,
.fi-fo-textarea textarea::placeholder { color: #9aa3b5; }
.fi-input[type="date"],
.fi-input[type="datetime-local"],
.fi-input[type="time"] {
    font-family: inherit;
    color: var(--ub-text);
}
.fi-select-input-value-label { color: var(--ub-text); }

/* ----- Repeaters (e.g. plots, parties, extra documents) ----- */
.fi-fo-repeater-item {
    border-radius: 14px;
    background-color: var(--ub-surface);
    --tw-ring-color: var(--ub-border);
    box-shadow: 0 0 0 1px var(--ub-border), 0 1px 3px rgba(16, 24, 40, 0.06);
}
.fi-fo-repeater-item-header {
    background-color: #f3f6fd;
    border-bottom: 1px solid var(--ub-border);
    border-radius: 14px 14px 0 0;
    padding-block: 10px;
}
.fi-fo-repeater-item:has(> .fi-fo-repeater-item-content[style*="display: none"]) > .fi-fo-repeater-item-header {
    border-bottom: 0;
    border-radius: 14px;
}
.fi-fo-repeater-item-header-label {
    color: var(--ub-navy);
    font-weight: 700;
}
.fi-fo-repeater-add {
    padding-top: 4px;
}

/* ----- File uploads (FilePond) ----- */
.fi-fo-file-upload .filepond--root {
    border-radius: 12px;
}
.fi-fo-file-upload .filepond--panel-root {
    background-color: var(--ub-surface-alt);
    border: 1.5px dashed #c9d3e6;
    border-radius: 12px;
}
.fi-fo-file-upload .filepond--drop-label { color: var(--ub-muted); }
.fi-fo-file-upload .filepond--label-action {
    color: var(--ub-navy);
    font-weight: 700;
    text-decoration-color: rgba(16, 53, 149, 0.35);
}

/* ----- Form action bar (Save / Cancel) ----- */
.fi-form-actions,
.fi-sc-actions {
    gap: 10px;
}

/* ======================================================================
   Page: Edit transaction — section arrangement (layout via CSS only;
   the schema in TransactionResource.php is not touched).
   Filament puts the top-level sections two per row; here they go
   full width, except Financial + Dates which share a row.
   Order in getFormSchema(): 1 info & parties, 2 property, 3 financial,
   4 dates, 5 documents.
   ====================================================================== */
.fi-resource-edit-record-page.fi-resource-transaction-records .fi-page-content .fi-grid:not(.fi-section .fi-grid) > .fi-grid-col:has(> .fi-sc-component > .fi-sc-section) {
    grid-column: 1 / -1;
}
@media (min-width: 1024px) {
    .fi-resource-edit-record-page.fi-resource-transaction-records .fi-page-content .fi-grid:not(.fi-section .fi-grid) > .fi-grid-col:nth-child(3):has(> .fi-sc-component > .fi-sc-section),
    .fi-resource-edit-record-page.fi-resource-transaction-records .fi-page-content .fi-grid:not(.fi-section .fi-grid) > .fi-grid-col:nth-child(4):has(> .fi-sc-component > .fi-sc-section) {
        grid-column: auto;
    }
}

/* ======================================================================
   Wizards (e.g. Create transaction) — step bar
   Selectors mirror Filament's own chains so they win on source order.
   ====================================================================== */
.fi-sc-wizard.fi-contained,
.fi-sc-wizard:not(.fi-contained) .fi-sc-wizard-header {
    border-radius: 16px;
    --tw-ring-color: var(--ub-border);
    --tw-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    overflow: hidden;
}
.fi-sc-wizard.fi-contained .fi-sc-wizard-header { border-color: var(--ub-border); }
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step .fi-sc-wizard-header-step-separator {
    color: var(--ub-border);
}
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step .fi-sc-wizard-header-step-btn {
    transition: background-color 0.15s ease;
}
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step:not(.fi-active) .fi-sc-wizard-header-step-btn:hover {
    background-color: var(--ub-surface-alt);
}
/* Active step: tinted tab with a navy underline and a solid navy circle */
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn {
    background-color: #f3f6fd;
    box-shadow: inset 0 -3px 0 var(--ub-navy);
}
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn {
    background-color: var(--ub-navy);
    border-color: var(--ub-navy);
    box-shadow: 0 6px 14px -6px rgba(16, 53, 149, 0.6);
}
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step:not(.fi-completed).fi-active .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn .fi-icon,
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn .fi-sc-wizard-header-step-number {
    color: #ffffff;
}
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-text .fi-sc-wizard-header-step-label {
    color: var(--ub-navy);
    font-weight: 700;
}
/* Completed steps: teal circle, dark label */
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn {
    background-color: var(--ub-success-fill);
}
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-text .fi-sc-wizard-header-step-label {
    color: var(--ub-heading);
}
/* Upcoming steps: soft outline circle, muted label */
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step:not(.fi-active) .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn {
    border-color: #d9e0ec;
    background-color: #ffffff;
}
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step.fi-completed:not(.fi-active) .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn {
    border-color: transparent;
    background-color: var(--ub-success-fill);
}
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step:not(.fi-completed):not(.fi-active) .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn .fi-icon {
    color: var(--ub-muted);
}
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-text .fi-sc-wizard-header-step-label {
    font-weight: 600;
}

/* ======================================================================
   Page: Create transaction — duplicate section headings
   Step 1 wraps each party ("البائع" / "المشتري") in a compact section
   whose first child is the shared section with the same title. Under
   Union Brand the inner one is shown flat (no header, no frame), so
   each title appears once. Only applies when the outer section holds
   exactly one nested section, so the Documents step (four
   sub-sections) keeps its sub-headings.
   ====================================================================== */
.fi-resource-create-record-page.fi-resource-transaction-records
    .fi-section.fi-compact:not(:has(> .fi-section-content-ctn > .fi-section-content > .fi-grid-col:nth-child(n+2) .fi-section))
    > .fi-section-content-ctn > .fi-section-content > .fi-grid-col:first-child > .fi-sc-component > .fi-sc-section > .fi-section {
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
}
.fi-resource-create-record-page.fi-resource-transaction-records
    .fi-section.fi-compact:not(:has(> .fi-section-content-ctn > .fi-section-content > .fi-grid-col:nth-child(n+2) .fi-section))
    > .fi-section-content-ctn > .fi-section-content > .fi-grid-col:first-child > .fi-sc-component > .fi-sc-section > .fi-section > .fi-section-header {
    display: none;
}
.fi-resource-create-record-page.fi-resource-transaction-records
    .fi-section.fi-compact:not(:has(> .fi-section-content-ctn > .fi-section-content > .fi-grid-col:nth-child(n+2) .fi-section))
    > .fi-section-content-ctn > .fi-section-content > .fi-grid-col:first-child > .fi-sc-component > .fi-sc-section > .fi-section > .fi-section-content-ctn {
    border-top: 0;
}
.fi-resource-create-record-page.fi-resource-transaction-records
    .fi-section.fi-compact:not(:has(> .fi-section-content-ctn > .fi-section-content > .fi-grid-col:nth-child(n+2) .fi-section))
    > .fi-section-content-ctn > .fi-section-content > .fi-grid-col:first-child > .fi-sc-component > .fi-sc-section > .fi-section > .fi-section-content-ctn > .fi-section-content {
    padding: 0;
}

/* ======================================================================
   Page: Employee folder (/admin/transactions/employees/{id})
   Hooks are ub-ef-* classes in employee-folder.blade.php. The view keeps
   its inline styles for the Original theme, so overrides of inline
   properties need !important here.
   ====================================================================== */

/* ----- Profile: navy banner ----- */
.ub-ef-profile.fi-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(120deg, #0c2a78 0%, #103595 45%, #1f5fc9 100%);
    box-shadow: 0 14px 30px -10px rgba(16, 53, 149, 0.35);
    --tw-ring-color: transparent;
}
.ub-ef-profile.fi-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 10% 15%, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 90% 130%, rgba(41, 156, 219, 0.5) 0, rgba(41, 156, 219, 0) 45%);
}
.ub-ef-profile-row { gap: 1.25rem !important; }
.ub-ef-avatar {
    width: 5.5rem !important;
    height: 5.5rem !important;
    border: 3px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45);
}
.ub-ef-name {
    color: #ffffff !important;
    font-size: 1.5rem !important;
}
.ub-ef-job { color: rgba(255, 255, 255, 0.8) !important; }
.ub-ef-badges { margin-top: 0.5rem !important; }
.ub-ef-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.2rem 0.7rem !important;
    font-weight: 700 !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.ub-ef-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.ub-ef-pill-commission { color: #ffd98f !important; }
.ub-ef-pill-active { color: #7ff0dc !important; }
.ub-ef-pill-inactive { color: #ffb4a4 !important; }
.ub-ef-code { color: rgba(255, 255, 255, 0.75) !important; }
.ub-ef-contacts {
    color: rgba(255, 255, 255, 0.82) !important;
    margin-top: 0.75rem !important;
}
.ub-ef-profile .ub-ef-back,
.ub-ef-profile .ub-ef-back .fi-icon {
    color: #ffffff !important;
}
.ub-ef-profile .ub-ef-back {
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    text-decoration: none;
}
.ub-ef-profile .ub-ef-back:hover { background: rgba(255, 255, 255, 0.2); }

/* ----- Stat cards ----- */
.ub-ef-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
}
.ub-ef-stat {
    --acc: var(--ub-navy);
    --tint: #e8ecf7;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: start !important;
    padding: 20px 22px !important;
    border-radius: 18px !important;
    background: var(--ub-surface) !important;
    border: 1px solid var(--ub-border) !important;
    border-inline-start: 4px solid var(--acc) !important;
    box-shadow: 0 4px 6px -1px rgba(16, 24, 40, 0.06), 0 10px 24px -6px rgba(16, 24, 40, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ub-ef-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -12px rgba(16, 24, 40, 0.18);
}
.ub-ef-stat::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline-end: -24px;
    bottom: -34px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--tint);
    opacity: 0.7;
}
.ub-ef-stat-2 { --acc: #07806f; --tint: #e6f7f4; }
.ub-ef-stat-3 { --acc: #b27400; --tint: #fef4e1; }
.ub-ef-stat-4 { --acc: #1b74a8; --tint: #e7f3fb; }
.ub-ef-stat-value {
    color: var(--ub-heading) !important;
    font-size: 2.1rem !important;
}
.ub-ef-stat-label {
    color: var(--ub-muted) !important;
    font-weight: 500;
    margin-top: 0.4rem !important;
}
@media (max-width: 1024px) {
    .ub-ef-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
    .ub-ef-stats { grid-template-columns: minmax(0, 1fr) !important; }
    .ub-ef-profile-row { flex-direction: column; align-items: flex-start !important; }
}

/* ----- Tabs + table card ----- */
.ub-ef-table-card > .fi-section-content-ctn > .fi-section-content {
    padding: 0;
}
.ub-ef-tabs-wrap {
    margin: 0;
    border-bottom: 1px solid var(--ub-border);
    background: var(--ub-surface);
    border-radius: 16px 16px 0 0;
}
.ub-ef-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 14px;
    overflow-x: auto;
}
.ub-ef-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ub-muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ub-ef-tab:hover { background: var(--ub-surface-alt); color: var(--ub-heading); }
.ub-ef-tab.ub-ef-tab-active {
    background: #e8ecf7;
    color: var(--ub-navy);
    font-weight: 700;
}
.ub-ef-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #eef1f6;
    color: #4b5563;
}
.ub-ef-tab-active .ub-ef-tab-count {
    background: var(--ub-navy);
    color: #ffffff;
}
.ub-ef-table { margin: 0; }
.ub-ef-table .fi-ta-ctn {
    border: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: none;
    --tw-ring-color: transparent;
}

/* ======================================================================
   Page: Transaction file (view page) — view-record.blade.php
   Hooks: .txn-record-view / .txn-card (existing) + ub-vr-* and ub-pill.
   The view is inline-styled for the Original theme, so overrides of
   inline properties use !important. Status colors that carry meaning
   (overdue/remaining days, receipt state) are left as they are.
   ====================================================================== */

.txn-record-view {
    --vr-head-bg: linear-gradient(to left, #dfe8fa 0%, #eef3fc 55%, #ffffff 100%);
    --vr-shadow: 0 2px 4px rgba(16, 24, 40, 0.04), 0 8px 20px -8px rgba(16, 24, 40, 0.12);
}

/* Replace the view's own dotted page background (it forces it with
   !important) with the theme background. */
.fi-body .fi-main:has(.txn-record-view) {
    background-color: var(--ub-bg) !important;
    background-image: none !important;
}

/* ----- Cards ----- */
.txn-record-view .txn-card,
.txn-record-view .ub-vr-doc-group {
    border-radius: 18px !important;
    box-shadow: var(--vr-shadow) !important;
}
.txn-record-view .txn-card[style*="border:1px solid #e5e7eb"] {
    border-color: #e1e7f2 !important;
}
.txn-record-view .txn-card:hover {
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.05), 0 18px 34px -14px rgba(16, 53, 149, 0.22) !important;
}

/* ----- Card headers: tinted band + gradient icon chip + bold navy title ----- */
.txn-record-view .ub-vr-card-head {
    background: var(--vr-head-bg) !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #dde5f3 !important;
    gap: 12px !important;
}
.txn-record-view .ub-vr-card-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ub-navy) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}
.txn-record-view .ub-vr-card-head > .ub-vr-card-title:first-child::before {
    content: "";
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 50%, #ffffff 0 4px, transparent 5px),
        linear-gradient(135deg, #103595, #299cdb);
    box-shadow: 0 6px 14px -6px rgba(16, 53, 149, 0.6);
}
/* Headers that already start with an icon (e.g. Notes): make it the chip */
.txn-record-view .ub-vr-card-head > svg:first-child {
    box-sizing: content-box;
    padding: 6px;
    border-radius: 10px;
    background: linear-gradient(135deg, #103595, #299cdb);
    stroke: #ffffff !important;
    box-shadow: 0 6px 14px -6px rgba(16, 53, 149, 0.6);
}

/* ----- File header: navy band with headline, status and value ----- */
.txn-record-view .ub-vr-header {
    padding: 0 0 20px !important;
    border: 0 !important;
    overflow: hidden;
}
.txn-record-view .ub-vr-hero {
    position: relative;
    isolation: isolate;
    margin: 0 0 20px !important;
    padding: 26px 30px !important;
    align-items: center !important;
    background: linear-gradient(120deg, #0c2a78 0%, #103595 45%, #1f5fc9 100%);
}
.txn-record-view .ub-vr-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 8% 20%, rgba(255, 255, 255, 0.13) 0, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 95% 140%, rgba(41, 156, 219, 0.5) 0, rgba(41, 156, 219, 0) 45%);
}
.txn-record-view .ub-vr-headline {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    margin-bottom: 10px !important;
}
.txn-record-view .ub-vr-hero span[style*="color:#9ca3af"] {
    color: rgba(255, 255, 255, 0.78) !important;
}
.txn-record-view .ub-vr-price {
    padding: 12px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.txn-record-view .ub-vr-price-value {
    color: #ffffff !important;
    font-size: 2.4rem !important;
    font-variant-numeric: tabular-nums;
}
.txn-record-view .ub-vr-price-cur {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Key figures under the band */
.txn-record-view .ub-vr-summary {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px !important;
    margin: 0 30px !important;
    padding: 0 !important;
    border: 0 !important;
}
.txn-record-view .ub-vr-summary-item {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #e1e7f2 !important;
    border-inline-start: 4px solid var(--ub-navy) !important;
    box-shadow: 0 4px 12px -8px rgba(16, 24, 40, 0.25);
}
.txn-record-view .ub-vr-summary-item:nth-child(2) { border-inline-start-color: var(--ub-blue) !important; }
.txn-record-view .ub-vr-summary-item:nth-child(3) { border-inline-start-color: var(--ub-teal) !important; }
.txn-record-view .ub-vr-summary-item:nth-child(4) { border-inline-start-color: var(--ub-amber) !important; }
.txn-record-view .ub-vr-summary-label {
    color: var(--ub-muted) !important;
    font-size: 0.8rem !important;
}
.txn-record-view .ub-vr-summary-value {
    color: var(--ub-navy) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
}
.txn-record-view .ub-vr-stage {
    margin: 18px 30px 0 !important;
    padding: 12px 0 !important;
    border-top: 1px solid var(--ub-border) !important;
    border-bottom: 0 !important;
}
.txn-record-view .ub-vr-stage-label {
    color: var(--ub-muted) !important;
}
.txn-record-view .ub-vr-meta {
    margin: 4px 30px 0 !important;
    gap: 2rem !important;
}

/* ----- Pills: default view colors mapped to the theme's AA pairs ----- */
.txn-record-view .ub-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    border: 0 !important;
}
.txn-record-view .ub-pill[style*=";color:#f59e0b;"],
.txn-record-view .ub-pill[style*=";color:#92400e;"] { background: #fef4e1 !important; color: #8a5a00 !important; }
.txn-record-view .ub-pill[style*=";color:#3b82f6;"] { background: #e7f3fb !important; color: #1a6fa3 !important; }
.txn-record-view .ub-pill[style*=";color:#ef4444;"],
.txn-record-view .ub-pill[style*=";color:#dc2626;"] { background: #fdecea !important; color: #b8391f !important; }
.txn-record-view .ub-pill[style*=";color:#22c55e;"],
.txn-record-view .ub-pill[style*=";color:#16a34a;"],
.txn-record-view .ub-pill[style*=";color:#166534;"] { background: #e6f7f4 !important; color: #067a6a !important; }
.txn-record-view .ub-pill[style*=";color:#6366f1;"] { background: #e8ecf7 !important; color: #103595 !important; }
.txn-record-view .ub-pill[style*=";color:#6b7280;"] { background: #f1f3f6 !important; color: #4b5563 !important; }

/* ----- Tabs: segmented pill bar ----- */
.txn-record-view .ub-vr-tabs {
    padding: 6px !important;
    border-radius: 16px !important;
    background: #e9eef8 !important;
    border: 1px solid #dbe3f2 !important;
    box-shadow: 0 6px 16px -10px rgba(16, 24, 40, 0.3) !important;
}
.txn-record-view .ub-vr-tabs > div {
    gap: 4px;
    padding: 0 !important;
    border-bottom: 0 !important;
}
.txn-record-view .ub-vr-tab {
    border: 0 !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    border-radius: 11px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #4a5578 !important;
    background: transparent !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}
.txn-record-view .ub-vr-tab:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    color: var(--ub-navy) !important;
}
.txn-record-view .ub-vr-tab.ub-vr-tab-active {
    background: linear-gradient(135deg, #103595, #1f5fc9) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px -8px rgba(16, 53, 149, 0.7) !important;
}

/* ----- Label/value tiles (property details, dates) ----- */
.txn-record-view .ub-vr-tile {
    position: relative;
    background: #ffffff !important;
    border: 1px solid #e1e7f2;
    border-inline-start: 4px solid #8fa7d8;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    box-shadow: 0 3px 10px -8px rgba(16, 24, 40, 0.3);
}
.txn-record-view .ub-vr-tile:has(.ub-vr-tile-important) {
    border-inline-start-color: var(--ub-navy);
    background: linear-gradient(to left, #e3ebfb, #f4f7fd) !important;
}
.txn-record-view .ub-vr-tile-label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--ub-muted) !important;
}
.txn-record-view .ub-vr-tile-value[style*="color:#111827"] {
    color: var(--ub-heading) !important;
    font-size: 18px !important;
}
.txn-record-view .ub-vr-tile-value.ub-vr-tile-important,
.txn-record-view .ub-vr-tile-value[style*="color:#1e40af"] {
    color: var(--ub-navy) !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
}

/* ----- Parties: seller teal, buyer amber ----- */
.txn-record-view .ub-vr-party {
    --party: #0ab39c;
    --party-ink: #067a6a;
    --party-tint: #e6f7f4;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--party-tint) 0, #ffffff 90px) !important;
    border: 1px solid #e1e7f2 !important;
    border-top: 5px solid var(--party) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    box-shadow: var(--vr-shadow);
}
.txn-record-view .ub-vr-parties-grid > .ub-vr-party:nth-child(2) {
    --party: #f7b84b;
    --party-ink: #8a5a00;
    --party-tint: #fef4e1;
}
.txn-record-view .ub-vr-party .ub-pill[style*=";color:#374151;"] {
    background: var(--party) !important;
    color: #ffffff !important;
    padding: 3px 12px !important;
    font-size: 12px !important;
}
.txn-record-view .ub-vr-parties-grid > .ub-vr-party:nth-child(2) .ub-pill[style*=";color:#374151;"] {
    color: #3d2c00 !important;
}
.txn-record-view .ub-vr-party-name {
    font-size: 19px !important;
    color: var(--ub-heading) !important;
}
.txn-record-view .ub-vr-party-name a:hover {
    color: var(--ub-navy) !important;
}
.txn-record-view .ub-vr-party-name + div {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dde5f3;
    color: var(--ub-navy) !important;
    font-weight: 700 !important;
}
.txn-record-view .ub-vr-party [style*="width:56px;height:56px"] {
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 6px 16px -8px rgba(16, 24, 40, 0.45);
}

/* ----- Documents ----- */
.txn-record-view .ub-vr-doc-group {
    border-top-color: #e1e7f2 !important;
    border-left-color: #e1e7f2 !important;
    border-bottom-color: #e1e7f2 !important;
    border-right-width: 5px !important;
}
.txn-record-view .ub-vr-doc-group > .ub-vr-card-head:has(> span[style*="#f97316"]) { background: linear-gradient(to left, #ffe6d3, #fff4ea 55%, #ffffff) !important; }
.txn-record-view .ub-vr-doc-group > .ub-vr-card-head:has(> span[style*="#3b82f6"]) { background: linear-gradient(to left, #dbe8ff, #eef4ff 55%, #ffffff) !important; }
.txn-record-view .ub-vr-doc-group > .ub-vr-card-head:has(> span[style*="#22c55e"]) { background: linear-gradient(to left, #d6f5e3, #edfbf3 55%, #ffffff) !important; }
.txn-record-view .ub-vr-doc-group > .ub-vr-card-head:has(> span[style*="#6366f1"]) { background: linear-gradient(to left, #e1e3fd, #f1f1ff 55%, #ffffff) !important; }
.txn-record-view .ub-vr-doc-group > .ub-vr-card-head > span:first-child[style*="border-radius:50%"] {
    width: 12px !important;
    height: 12px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}
.txn-record-view .ub-vr-doc-grid {
    gap: 14px !important;
    padding: 16px !important;
}
.txn-record-view .ub-vr-doc {
    border-radius: 14px !important;
    border-color: #e1e7f2 !important;
    box-shadow: 0 4px 12px -8px rgba(16, 24, 40, 0.3) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.txn-record-view .ub-vr-doc:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -14px rgba(16, 53, 149, 0.35) !important;
}
.txn-record-view .ub-vr-doc > div:first-child[style*="background:#f9fafb"] {
    background: repeating-linear-gradient(135deg, #f5f7fb 0 10px, #eef2f8 10px 20px) !important;
}
.txn-record-view .ub-vr-doc > div:last-child {
    padding: 12px 14px !important;
    background: #f8f9fc !important;
    border-top: 1px solid #e1e7f2 !important;
}
.txn-record-view .ub-vr-doc > div:last-child span[style*="font-size:0.75rem"] {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

/* ----- Sidebar: chat widget, receipt, dates ----- */
.txn-record-view .fi-section {
    box-shadow: none !important;
    --tw-ring-color: transparent;
    border-radius: 0 !important;
}
.txn-record-view .fi-section > .fi-section-header {
    background: var(--vr-head-bg);
    border-bottom: 1px solid #dde5f3;
}
.txn-record-view .fi-section > .fi-section-header .fi-section-header-heading {
    color: var(--ub-navy);
    font-size: 17px;
    font-weight: 800;
}
.txn-record-view .fi-section > .fi-section-header > .fi-icon {
    padding: 6px;
    border-radius: 10px;
    background: linear-gradient(135deg, #103595, #299cdb);
    color: #ffffff;
}
.txn-record-view .txn-card[style*="border-right:4px solid"] {
    border-right-width: 5px !important;
}
.txn-record-view .txn-card[style*="border-right:4px solid"] > div:first-child {
    padding: 14px 20px !important;
}
.txn-record-view .txn-card[style*="border-right:4px solid"] > div:first-child > span:last-child {
    font-size: 17px !important;
    font-weight: 800 !important;
}

/* Stronger separation between detail tiles */
.txn-record-view div:has(> .ub-vr-tile) {
    gap: 12px !important;
    padding: 16px !important;
}

/* Receipt card: keep its status colors, give it a proper frame */
.txn-record-view .txn-card[style*="border-right:4px solid"] {
    background: #ffffff !important;
}
.txn-record-view .txn-card[style*="border-right:4px solid"] > div:first-child > span:first-child {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 4px 12px -6px rgba(16, 24, 40, 0.4);
}
.txn-record-view .txn-card[style*="border-right:4px solid"] > div:last-child {
    padding: 16px 20px !important;
}
.txn-record-view .txn-card[style*="border-right:4px solid"] > div:last-child > div:first-child {
    font-size: 16px !important;
}
.txn-record-view .txn-card[style*="border-right:4px solid"] > div:last-child > a {
    padding: 8px 18px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    box-shadow: 0 6px 14px -8px rgba(16, 24, 40, 0.5);
}

/* ----- Inline-colored buttons/links in this view -> theme colors ----- */
.txn-record-view button[style*="background:#2563eb"],
.txn-record-view button[style*="background: #2563eb"],
.txn-record-view button[style*="background:#6366f1"],
.txn-record-view button[style*="background: #6366f1"],
.txn-record-view button[style*="background:#111827"],
.txn-record-view a[style*="background:#2563eb"],
.txn-record-view a[style*="background: #2563eb"] {
    background: var(--ub-navy) !important;
    border-radius: 8px !important;
}
.txn-record-view button[style*="background:#ef4444"],
.txn-record-view button[style*="background: #ef4444"],
.txn-record-view button[style*="background:#dc2626"],
.txn-record-view button[style*="background: #dc2626"] {
    background: var(--ub-danger-fill) !important;
    border-radius: 8px !important;
}
.txn-record-view button[style*="background:#16a34a"] {
    background: var(--ub-success-fill) !important;
    border-radius: 8px !important;
}
.txn-record-view a[style*="background:#f59e0b"] {
    background: var(--ub-warning-fill) !important;
    color: var(--ub-warning-ink) !important;
    border-radius: 8px !important;
}

/* ----- Responsive: the view's fixed grids stack on smaller screens ----- */
@media (max-width: 1024px) {
    .txn-record-view .ub-vr-main-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
    .txn-record-view .ub-vr-parties-grid,
    .txn-record-view .ub-vr-doc-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .txn-record-view .ub-vr-hero { padding: 20px !important; }
    .txn-record-view .ub-vr-summary,
    .txn-record-view .ub-vr-stage,
    .txn-record-view .ub-vr-meta { margin-inline: 16px !important; }
    .txn-record-view .ub-vr-price-value { font-size: 2rem !important; }
    .txn-record-view .ub-vr-tabs > div { overflow-x: auto; }
}

/* ======================================================================
   Page: Tasks Kanban — livewire/tasks-kanban-board.blade.php
   Hooks: ub-kb-* classes. The view is inline-styled for the Original
   theme, so overrides of inline properties use !important.
   Column status colors: pending amber, in progress blue, completed teal.
   ====================================================================== */

.ub-kb {
    --kb-shadow: 0 2px 4px rgba(16, 24, 40, 0.04), 0 10px 24px -12px rgba(16, 24, 40, 0.18);
}
.ub-kb .ub-kb-col-pending     { --st: #f7b84b; --st-ink: #8a5a00; --st-tint: #fef4e1; --st-soft: #fffaf1; }
.ub-kb .ub-kb-col-in_progress { --st: #299cdb; --st-ink: #1a6fa3; --st-tint: #e3f1fb; --st-soft: #f5fafe; }
.ub-kb .ub-kb-col-completed   { --st: #0ab39c; --st-ink: #067a6a; --st-tint: #e0f6f2; --st-soft: #f4fbfa; }

/* ----- Toolbar ----- */
.ub-kb .ub-kb-toolbar {
    gap: 10px !important;
    margin-bottom: 20px !important;
    padding: 12px;
    border-radius: 16px;
    background: var(--ub-surface);
    border: 1px solid var(--ub-border);
    box-shadow: var(--kb-shadow);
}
.ub-kb .ub-kb-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #103595, #1f5fc9) !important;
    box-shadow: 0 8px 18px -8px rgba(16, 53, 149, 0.7);
}
.ub-kb .ub-kb-new::before {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 16px;
    line-height: 1;
}
.ub-kb .ub-kb-search {
    padding: 10px 14px !important;
    padding-inline-start: 40px !important;
    font-size: 0.9rem !important;
    border: 1px solid #d9e0ec !important;
    border-radius: 12px !important;
    background: var(--ub-surface-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.2-5.2m0 0A7.5 7.5 0 1 0 5.2 5.2a7.5 7.5 0 0 0 10.6 10.6Z'/%3E%3C/svg%3E") no-repeat right 14px center / 18px !important;
}
.ub-kb .ub-kb-filter,
.ub-kb .ub-kb-archive {
    padding: 10px 14px !important;
    font-size: 0.875rem !important;
    border: 1px solid #d9e0ec !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
}
.ub-kb .ub-kb-search:focus,
.ub-kb .ub-kb-filter:focus,
.ub-kb .ub-kb-input:focus {
    outline: none;
    border-color: var(--ub-navy) !important;
    box-shadow: 0 0 0 3px rgba(16, 53, 149, 0.15);
}
.ub-kb .ub-kb-archive:hover { background: var(--ub-surface-alt) !important; }
.ub-kb .ub-kb-archive.ub-kb-archive-on {
    background: #fef4e1 !important;
    border-color: #f7b84b !important;
    color: #8a5a00 !important;
}

/* ----- Board & columns ----- */
.ub-kb .ub-kb-board {
    gap: 20px !important;
}
.ub-kb .ub-kb-col {
    background: var(--st-soft) !important;
    border: 1px solid var(--ub-border);
    border-top: 5px solid var(--st);
    border-radius: 18px !important;
    box-shadow: var(--kb-shadow);
}
.ub-kb .ub-kb-col-head {
    background: linear-gradient(to left, var(--st-tint), #ffffff) !important;
    color: var(--st-ink) !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--ub-border);
}
.ub-kb .ub-kb-col-dot {
    width: 12px !important;
    height: 12px !important;
    background: var(--st) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 0 5px var(--st);
    margin-inline-end: 4px;
}
.ub-kb .ub-kb-col-title {
    font-size: 1rem !important;
    font-weight: 800 !important;
}
.ub-kb .ub-kb-col-count {
    min-width: 1.75rem;
    text-align: center;
    padding: 2px 10px !important;
    font-size: 0.8rem !important;
    font-weight: 800;
    background: var(--st) !important;
    color: #ffffff !important;
}
.ub-kb .ub-kb-col-pending .ub-kb-col-count { color: #3d2c00 !important; }
.ub-kb .ub-kb-list {
    padding: 14px !important;
    gap: 12px !important;
}

/* ----- Task cards ----- */
.ub-kb .ub-kb-card {
    position: relative;
    padding: 14px 16px !important;
    background: #ffffff !important;
    border: 1px solid #e1e7f2 !important;
    border-inline-start: 4px solid var(--st) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px -8px rgba(16, 24, 40, 0.3);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ub-kb .ub-kb-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -14px rgba(16, 53, 149, 0.35);
}
.ub-kb .ub-kb-card.ub-kb-overdue {
    border-inline-start-color: #c8432a !important;
    background: linear-gradient(to left, #fff5f3, #ffffff 60%) !important;
}
.ub-kb .ub-kb-card-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--ub-heading) !important;
    line-height: 1.45;
}
.ub-kb .ub-kb-card-title:hover { color: var(--ub-navy) !important; }
.ub-kb .ub-kb-card-desc {
    font-size: 0.8rem !important;
    color: var(--ub-muted) !important;
    margin-top: 6px !important;
    line-height: 1.5;
}
.ub-kb .ub-kb-icon-btn {
    display: inline-grid !important;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px !important;
    color: var(--ub-muted) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ub-kb .ub-kb-icon-btn:hover {
    background: #eef2fa !important;
    color: var(--ub-navy) !important;
}
.ub-kb .ub-kb-icon-btn svg { width: 16px !important; height: 16px !important; }

/* Meta row: avatar, due date chip, transaction chip */
.ub-kb .ub-kb-meta {
    gap: 8px !important;
    margin-top: 12px !important;
}
.ub-kb .ub-kb-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.7rem !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 1px #d9e0ec;
}
.ub-kb div.ub-kb-avatar { background: linear-gradient(135deg, #103595, #299cdb) !important; }
.ub-kb .ub-kb-due {
    gap: 4px !important;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ub-surface-alt);
    border: 1px solid #e1e7f2;
    font-size: 0.75rem !important;
    font-weight: 700;
    color: var(--ub-text) !important;
}
.ub-kb .ub-kb-card.ub-kb-overdue .ub-kb-due {
    background: #fdecea;
    border-color: #f6c9bf;
    color: #b8391f !important;
}
.ub-kb .ub-kb-tx {
    padding: 3px 10px;
    border-radius: 999px;
    background: #e8ecf7;
    color: var(--ub-navy) !important;
    font-size: 0.75rem !important;
    font-weight: 700;
}
.ub-kb .ub-kb-tx:hover { background: var(--ub-navy); color: #ffffff !important; }

/* Move-to-status buttons */
.ub-kb .ub-kb-moves {
    gap: 6px !important;
    margin-top: 12px !important;
    padding-top: 12px;
    border-top: 1px dashed #e1e7f2;
}
.ub-kb .ub-kb-move {
    padding: 6px 8px !important;
    font-size: 0.75rem !important;
    font-weight: 700;
    border-radius: 10px !important;
    border: 1px solid #d9e0ec !important;
    background: #ffffff !important;
    color: var(--ub-text) !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ub-kb .ub-kb-move-pending:hover     { background: #fef4e1 !important; border-color: #f7b84b !important; color: #8a5a00 !important; }
.ub-kb .ub-kb-move-in_progress:hover { background: #e3f1fb !important; border-color: #299cdb !important; color: #1a6fa3 !important; }
.ub-kb .ub-kb-move-completed:hover   { background: #e0f6f2 !important; border-color: #0ab39c !important; color: #067a6a !important; }

/* Empty column */
.ub-kb .ub-kb-empty {
    margin: 4px;
    padding: 2.5rem 1rem !important;
    border: 2px dashed #d5deed;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--ub-muted) !important;
    font-size: 0.85rem !important;
    font-weight: 600;
}
.ub-kb .ub-kb-empty::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    border-radius: 12px;
    background: var(--st-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.8' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E") no-repeat center / 22px;
}

/* ----- Modals (create/edit, task detail) ----- */
.ub-kb .ub-kb-backdrop {
    background: rgba(12, 22, 48, 0.55) !important;
    backdrop-filter: blur(3px);
}
.ub-kb .ub-kb-dialog {
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 30px 60px -20px rgba(12, 22, 48, 0.55);
}
.ub-kb .ub-kb-dialog-wide { padding: 0 !important; }
.ub-kb .ub-kb-dialog-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--ub-navy) !important;
}
.ub-kb .ub-kb-dialog-title::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: var(--ub-navy);
}
.ub-kb .ub-kb-dialog-head {
    padding: 16px 20px !important;
    background: linear-gradient(to left, #dfe8fa, #ffffff) !important;
    border-bottom: 1px solid #dde5f3 !important;
}
.ub-kb .ub-kb-label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--ub-heading) !important;
    margin-bottom: 6px !important;
}
.ub-kb .ub-kb-input {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    border: 1px solid #d9e0ec !important;
    border-radius: 10px !important;
    background: #ffffff !important;
}
.ub-kb .ub-kb-btn-primary {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #103595, #1f5fc9) !important;
    box-shadow: 0 8px 18px -8px rgba(16, 53, 149, 0.7);
}
.ub-kb .ub-kb-btn-secondary {
    padding: 10px 18px !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    border-radius: 10px !important;
    border: 1px solid #d9e0ec !important;
}
.ub-kb .ub-kb-btn-secondary:hover { background: var(--ub-surface-alt) !important; }
.ub-kb .ub-kb-info {
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 1px solid #e1e7f2;
    border-inline-start: 4px solid #8fa7d8;
    border-radius: 12px !important;
}
.ub-kb .ub-kb-info > span:first-child {
    display: block;
    margin-bottom: 2px;
    font-size: 0.75rem !important;
    color: var(--ub-muted) !important;
}
.ub-kb .ub-kb-status-btn {
    padding: 10px !important;
    font-size: 0.85rem !important;
    border-radius: 10px !important;
    border: 1px solid #d9e0ec !important;
    background: #ffffff !important;
    color: var(--ub-text) !important;
}
.ub-kb .ub-kb-status-btn.ub-kb-status-active {
    background: linear-gradient(135deg, #103595, #1f5fc9) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px -8px rgba(16, 53, 149, 0.7);
}
.ub-kb .ub-kb-comment-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.65rem !important;
    background: linear-gradient(135deg, #103595, #299cdb) !important;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .ub-kb .ub-kb-board { grid-template-columns: minmax(0, 1fr) !important; }
    .ub-kb .ub-kb-list { max-height: none !important; }
}
@media (max-width: 640px) {
    .ub-kb .ub-kb-toolbar { flex-direction: column; align-items: stretch !important; }
    .ub-kb .ub-kb-new { justify-content: center; }
}

/* ======================================================================
   Dashboard background pattern (option B: soft diagonal lines)
   Union Brand only (this file), screen only (media="screen" link),
   dashboard only (scoped to pages with the welcome banner).
   A 16x16 SVG tile with 45deg navy hairlines at 5% opacity, repeated
   by the browser as a cached bitmap; background-attachment stays the
   default (scroll), so nothing is repainted on scroll. Cards, banner
   and tables keep their own solid backgrounds.
   ====================================================================== */
.fi-body:has(.ub-welcome) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M-4 4 4-4M0 16 16 0M12 20 20 12' stroke='%23103595' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-repeat: repeat;
}

/* ======================================================================
   Tablet (768–1024px): the custom pages use fixed inline grids, so they
   are re-flowed here (specificity beats the inline styles via !important)
   and oversized decorative icons are scaled down.
   ====================================================================== */
@media (max-width: 1024px) {
    .ub-hub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ub-hub-stats svg { width: 2rem !important; height: 2rem !important; }
    .txn-record-view .ub-vr-acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ub-kb .ub-kb-board { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
    .ub-hub-stats,
    .txn-record-view .ub-vr-acc-grid,
    .ub-kb .ub-kb-board { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ======================================================================
   Icon size safety net. Filament sizes .fi-icon inside its @layer'd CSS;
   when a browser drops that (older Android/Samsung WebView), inline SVGs
   fall back to filling their container. These unlayered rules restate the
   same sizes with zero specificity (:where), so every class rule above
   (.cu-chip-icon, .ub-welcome-date-icon...) still wins.
   ====================================================================== */
:where(.fi-icon) { width: 1.25rem; height: 1.25rem; }
:where(.fi-icon.fi-size-xs) { width: 0.75rem; height: 0.75rem; }
:where(.fi-icon.fi-size-sm) { width: 1rem; height: 1rem; }
:where(.fi-icon.fi-size-md) { width: 1.25rem; height: 1.25rem; }
:where(.fi-icon.fi-size-lg) { width: 1.5rem; height: 1.5rem; }
:where(.fi-icon.fi-size-xl) { width: 1.75rem; height: 1.75rem; }
:where(.fi-icon.fi-size-2xl) { width: 2rem; height: 2rem; }
:where(.fi-icon > svg) { width: inherit; height: inherit; }

/* ===== Transaction form (create wizard + edit) — the "إضافة معاملة" design =====
 * Scoped to the transactions resource; only loaded with the Union Brand theme.
 * Clickable stepper on top, one card per group, rounded fields, chip-style toggle buttons. */
.fi-resource-transaction-records .fi-sc-wizard {
    background: transparent;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    border: 0;
}
.fi-resource-transaction-records .fi-sc-wizard-header {
    display: flex;
    background: var(--ub-surface);
    border: 1px solid var(--ub-border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: var(--ub-shadow);
}
.fi-resource-transaction-records .fi-sc-wizard-header-step { flex: 1; min-width: 0; border-inline-start: 1px solid var(--ub-border); }
.fi-resource-transaction-records .fi-sc-wizard-header-step:first-child { border-inline-start: 0; }
.fi-resource-transaction-records .fi-sc-wizard-header-step-separator { display: none; }
.fi-resource-transaction-records .fi-sc-wizard-header-step-btn {
    width: 100%;
    padding: 13px 14px;
    gap: 10px;
    color: var(--ub-muted);
    font-weight: 700;
}
.fi-resource-transaction-records .fi-sc-wizard-header-step-icon-ctn {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--ub-bg);
    border: 0;
    color: var(--ub-muted);
}
.fi-resource-transaction-records .fi-sc-wizard-header-step.fi-active { box-shadow: inset 0 -3px 0 var(--ub-navy); }
.fi-resource-transaction-records .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn,
.fi-resource-transaction-records .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-label { color: var(--ub-navy); }
.fi-resource-transaction-records .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn { background: var(--ub-navy); color: #fff; }
.fi-resource-transaction-records .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn { background: #e6f7ef; color: #05724f; }
.fi-resource-transaction-records .fi-sc-wizard-step { padding: 0; background: transparent; }

/* cards */
.fi-resource-transaction-records .fi-section:not(.fi-section-not-contained) {
    border-radius: 14px;
    border: 1px solid var(--ub-border);
    box-shadow: var(--ub-shadow);
    background: var(--ub-surface);
}
.fi-resource-transaction-records .fi-section.fi-section-has-header:not(.fi-section-not-contained) > .fi-section-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ub-border);
}
.fi-resource-transaction-records .fi-section-header-heading { font-size: 1rem; font-weight: 800; color: var(--ub-heading); }
.fi-resource-transaction-records .fi-section-content { padding: 16px; }

/* fields */
.fi-resource-transaction-records .fi-fo-field-label-content { font-weight: 700; font-size: 0.84rem; color: var(--ub-heading); }
.fi-resource-transaction-records .fi-input-wrp { border-radius: 10px; min-height: 2.65rem; }
.fi-resource-transaction-records .fi-input-wrp:focus-within { --tw-ring-color: var(--ub-navy); }
.fi-resource-transaction-records .fi-fo-field-helper-text,
.fi-resource-transaction-records .fi-fo-field-wrp-hint { font-size: 0.78rem; color: var(--ub-muted); }
.fi-resource-transaction-records input[type="number"],
.fi-resource-transaction-records .fi-input[inputmode="decimal"] { font-variant-numeric: tabular-nums; }

/* toggle buttons (payment method, duration) as chips */
.fi-resource-transaction-records .fi-fo-toggle-buttons.fi-inline { gap: 8px; }
.fi-resource-transaction-records .fi-fo-toggle-buttons .fi-btn {
    border-radius: 10px;
    font-weight: 700;
    padding: 8px 14px;
}

/* repeater items (plots) */
.fi-resource-transaction-records .fi-fo-repeater-item {
    border-radius: 12px;
    border: 1px solid var(--ub-border);
    box-shadow: none;
    overflow: hidden;
}
.fi-resource-transaction-records .fi-fo-repeater-item-header { background: var(--ub-bg); font-weight: 800; }

/* footer buttons */
.fi-resource-transaction-records .fi-sc-wizard-footer { margin-top: 6px; gap: 10px; flex-wrap: wrap; }
.fi-resource-transaction-records .fi-sc-wizard-footer .fi-btn { border-radius: 10px; font-weight: 700; }

@media (max-width: 760px) {
    .fi-resource-transaction-records .fi-sc-wizard-header-step-label,
    .fi-resource-transaction-records .fi-sc-wizard-header-step-text { display: none; }
    .fi-resource-transaction-records .fi-sc-wizard-header-step-btn { justify-content: center; }
}

/* --- add-transaction design, part 2: flat line icons, chips, totals, document cards --- */
.fi-resource-transaction-records .fi-sc-wizard-header-step-icon-ctn {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
    border-radius: 999px; background: var(--ub-bg); color: var(--ub-muted);
}
.fi-resource-transaction-records .fi-sc-wizard-header-step-icon-ctn svg { width: 1.2rem; height: 1.2rem; stroke-width: 1.6; }
.fi-resource-transaction-records .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn { background: #e6f7ef; color: #05724f; }
.fi-resource-transaction-records .fi-section-header .fi-icon,
.fi-resource-transaction-records .fi-section-header svg {
    background: none !important; box-shadow: none !important; padding: 0 !important;
    width: 1.25rem; height: 1.25rem; color: var(--ub-navy); stroke-width: 1.6;
}
.fi-resource-transaction-records .fi-section-header > div:has(> svg) { background: none !important; padding: 0 !important; }
.ub-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ub-big { display: grid; gap: 2px; border: 1px solid var(--ub-border); border-radius: 12px; padding: 10px 16px; background: var(--ub-bg); }
.ub-big small { color: var(--ub-muted); font-size: 0.78rem; }
.ub-big strong { font-size: 1.45rem; font-weight: 800; color: var(--ub-heading); font-variant-numeric: tabular-nums; text-align: end; }
@media (max-width: 760px) { .ub-totals { grid-template-columns: 1fr; } }

/* "+ add" buttons of repeaters as dashed pills */
.fi-resource-transaction-records .fi-fo-repeater-add .fi-btn,
.fi-resource-transaction-records .fi-fo-repeater-add button {
    border: 1px dashed var(--ub-muted);
    background: transparent;
    color: var(--ub-navy);
    border-radius: 999px;
    padding: 4px 14px;
    font-weight: 700;
    font-size: 0.82rem;
    box-shadow: none;
}
.fi-resource-transaction-records .fi-fo-repeater-add { justify-content: flex-start; }

/* "+ عميل جديد" next to the client picker */
.fi-resource-transaction-records .fi-input-wrp-prefix .fi-btn,
.fi-resource-transaction-records .fi-input-wrp-suffix .fi-btn {
    background: var(--ub-navy);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* documents */
.ub-doc-progress { border: 1px solid var(--ub-border); border-radius: 12px; padding: 12px 16px; background: var(--ub-surface); }
.ub-doc-progress-head { display: flex; justify-content: space-between; font-size: 0.9rem; }
.ub-doc-bar { height: 8px; background: var(--ub-bg); border-radius: 99px; overflow: hidden; margin: 8px 0 10px; }
.ub-doc-bar > div { height: 100%; background: #05724f; transition: width .25s; }
.ub-doc-row { font-size: 0.85rem; color: var(--ub-muted); }
.ub-doc-row.is-done { color: #05724f; }
.fi-resource-transaction-records .fi-fo-file-upload .filepond--root,
.fi-resource-transaction-records .fi-fo-file-upload .filepond--panel-root {
    border-radius: 12px;
}
.fi-resource-transaction-records .fi-fo-file-upload .filepond--panel-root { border: 1.5px dashed var(--ub-border); background: var(--ub-bg); }

.fi-resource-transaction-records .fi-fo-toggle-buttons .fi-btn { background: var(--ub-surface); border: 1px solid var(--ub-border); color: var(--ub-heading); box-shadow: none; }
.fi-resource-transaction-records .fi-fo-toggle-buttons input:checked + .fi-btn,
.fi-resource-transaction-records .fi-fo-toggle-buttons .fi-btn.fi-active { background: var(--ub-navy); border-color: var(--ub-navy); color: #fff; }

/* --- transaction form: compact, enterprise-style density --- */
.fi-resource-transaction-records .fi-sc,
.fi-resource-transaction-records .fi-grid { gap: 0.75rem 1rem; }
.fi-resource-transaction-records .fi-sc-wizard-header { margin-bottom: 12px; }
.fi-resource-transaction-records .fi-sc-wizard-header-step-btn { padding: 9px 12px; }
.fi-resource-transaction-records .fi-sc-wizard-header-step-icon-ctn { width: 2rem; height: 2rem; }
.fi-resource-transaction-records .fi-section.fi-section-has-header:not(.fi-section-not-contained) > .fi-section-header { padding: 9px 14px; }
.fi-resource-transaction-records .fi-section-content { padding: 12px 14px; }
.fi-resource-transaction-records .fi-section { margin-bottom: 0; }
.fi-resource-transaction-records .fi-fo-field { gap: 0.25rem; }
.fi-resource-transaction-records .fi-input-wrp { min-height: 2.35rem; }
.fi-resource-transaction-records .fi-fo-repeater-item-content { padding: 0.75rem; }
.fi-resource-transaction-records .fi-fo-file-upload .filepond--root { margin-bottom: 0; }
.fi-resource-transaction-records .fi-fo-file-upload .filepond--drop-label { min-height: 3.2rem !important; }
.fi-resource-transaction-records .fi-sc-wizard-footer { margin-top: 10px; }
.fi-resource-transaction-records .ub-important-doc { border: 1.5px solid #f06548; background: #fff8f6; }
.fi-resource-transaction-records .ub-important-doc .fi-section-header-heading { color: #b42318; }