/* ==========================================================================
   Bellegestion UI — the one shared stylesheet for back-office pages.
   Tokens + components. Pages use these classes and keep only truly
   page-specific CSS. Prefix: ui-  (never bg- : Bootstrap owns that).
   Reference: docs/style-guide.md — the ONE Bellegestion style (the old orange public guide is retired).
   ========================================================================== */

:root {
    --ui-accent: #e8707e;
    --ui-accent-dark: #d95d6c;
    --ui-accent-light: #fdf0f1;
    --ui-accent-ring: rgba(232, 112, 126, 0.18);
    --ui-text: #2d3436;
    --ui-muted: #636e72;
    --ui-faint: #95a1a6;
    --ui-border: #e9ecef;
    --ui-border-strong: #dfe4e8;
    --ui-surface: #ffffff;
    --ui-bg: #f8f9fa;
    --ui-green: #10b981;
    --ui-green-light: #e8faf3;
    --ui-red: #dc2626;
    --ui-red-light: #fef2f2;
    --ui-amber: #b45309;
    --ui-amber-light: #fef3c7;
    --ui-blue: #3b82f6;
    --ui-blue-light: #eaf1fe;
    --ui-accent-border: #f5c8cd;
    --ui-orange: #e8923a;
    --ui-amber-strong: #f59e0b;
    --ui-purple: #6c5ce7;
    --ui-ink: #0f172a;
    --ui-ink-2: #1e293b;
    --ui-ink-text: #e2e8f0;
    --ui-ink-muted: #94a3b8;
    --ui-ink-faint: #64748b;
    --ui-ink-border: #334155;
    --ui-radius: 16px;
    --ui-radius-sm: 10px;
    --ui-radius-pill: 999px;
    --ui-shadow: 0 2px 8px rgba(45, 52, 54, 0.06);
    --ui-shadow-lg: 0 10px 30px rgba(45, 52, 54, 0.12);
    --ui-font: 'Nunito', sans-serif;
}

/* ── Scope ─────────────────────────────────────────────────────────────── */
.ui { font-family: var(--ui-font); color: var(--ui-text); }
/* layouts/app already wraps @yield('content') in .container-fluid.container-p-y — a page that opens with its
   own .container-fluid/.container-xxl must not add a second gutter (that is what made some pages narrower) */
:is(.content-wrapper > .container-fluid, .content-wrapper > .container-fluid > .content-wrapper, .content-wrapper > .container-fluid > .ui-lock-wrap > .ui-lock-blur) > :is(.container-fluid, .container-xxl) { padding-left: 0 !important; padding-right: 0 !important; max-width: none; }
:is(.content-wrapper > .container-fluid, .content-wrapper > .container-fluid > .content-wrapper, .content-wrapper > .container-fluid > .ui-lock-wrap > .ui-lock-blur) > .container-p-y { padding-top: 0 !important; padding-bottom: 0 !important; }
.ui a { text-decoration: none; }

/* ── Page header ───────────────────────────────────────────────────────── */
.ui-page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ui-page-head-left { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.ui-page-head-icon { width: 50px; height: 50px; border-radius: 12px; background: var(--ui-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; box-shadow: 0 4px 12px var(--ui-accent-ring); }
.ui-page-head h1 { font-family: var(--ui-font); font-size: 1.9rem; font-weight: 900; color: var(--ui-text); margin: 0; letter-spacing: -0.02em; line-height: 1.15; }
.ui-page-head p { margin: 0.15rem 0 0; color: var(--ui-muted); font-weight: 600; font-size: 0.9rem; }
.ui-page-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); overflow: hidden; }
.ui-card-head { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--ui-border); background: var(--ui-bg); }
.ui-card-head-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--ui-accent-light); color: var(--ui-accent); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.ui-card-title { font-family: var(--ui-font); font-size: 1rem; font-weight: 800; color: var(--ui-text); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.ui-card-title i { color: var(--ui-accent); }
.ui-card-subtitle { font-size: 0.8rem; color: var(--ui-muted); font-weight: 600; margin: 0.1rem 0 0; }
.ui-card-body { padding: 1.4rem; }
.ui-card-body.ui-flush { padding: 0; }
.ui-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; padding: 1rem 1.4rem; border-top: 1px solid var(--ui-border); background: var(--ui-bg); }
.ui-section-title { font-family: var(--ui-font); font-size: 1rem; font-weight: 800; color: var(--ui-text); margin: 0 0 1rem; padding-left: 0.75rem; border-left: 3px solid var(--ui-accent); line-height: 1.3; }
.ui-section { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--ui-border); }
.ui-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.ui-divider { height: 1px; background: var(--ui-border); margin: 1.25rem 0; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1.1rem; border-radius: var(--ui-radius-sm); border: 1.5px solid transparent; font-family: var(--ui-font); font-weight: 800; font-size: 0.875rem; line-height: 1.2; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; text-decoration: none; }
.ui-btn i { font-size: 1.05em; }
.ui-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-accent-ring); }
.ui-btn-primary { background: var(--ui-accent); color: #fff; }
.ui-btn-primary:hover { background: var(--ui-accent-dark); color: #fff; }
.ui-btn-save { background: var(--ui-green); color: #fff; }
.ui-btn-save:hover { background: #0ea371; color: #fff; }
.ui-btn-ghost { background: var(--ui-surface); color: var(--ui-muted); border-color: var(--ui-border); }
.ui-btn-ghost:hover { border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-light); }
.ui-btn-ghost.ui-danger { color: var(--ui-red); }
.ui-btn-ghost.ui-danger:hover { border-color: var(--ui-red); color: var(--ui-red); background: var(--ui-red-light); }
.ui-btn-outline { background: var(--ui-surface); color: var(--ui-accent); border-color: var(--ui-accent); }
.ui-btn-outline:hover { background: var(--ui-accent-light); color: var(--ui-accent); }
.ui-btn-danger-outline { background: var(--ui-surface); color: var(--ui-red); border-color: var(--ui-red); }
.ui-btn-danger-outline:hover { background: var(--ui-red-light); color: var(--ui-red); }
.ui-btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.ui-btn-icon { width: 34px; height: 34px; padding: 0; border-radius: 8px; background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-muted); }
.ui-btn-icon:hover { border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-light); }
.ui-btn-icon.ui-danger:hover { border-color: var(--ui-red); color: var(--ui-red); background: var(--ui-red-light); }
.ui-btn-pill { border-radius: var(--ui-radius-pill); }
.ui-btn[disabled], .ui-btn.disabled { opacity: 0.55; pointer-events: none; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.ui-label { display: block; font-family: var(--ui-font); font-size: 0.8125rem; font-weight: 800; color: var(--ui-text); margin-bottom: 0.375rem; }
.ui-label small { font-weight: 600; color: var(--ui-faint); }
.ui-label .ui-req { color: var(--ui-red); }
.ui-input { display: block; width: 100%; padding: 0.6rem 0.9rem; border: 1.5px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); font-family: var(--ui-font); font-size: 0.9rem; font-weight: 600; color: var(--ui-text); transition: border-color 0.15s, box-shadow 0.15s; }
.ui-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-ring); }
.ui-input::placeholder { color: #a1acb8; font-weight: 500; }
.ui-input.is-invalid { border-color: var(--ui-red); }
select.ui-input { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23636e72' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; }
select.ui-input { cursor: pointer; }
textarea.ui-input { min-height: 80px; resize: vertical; }
.ui-input-group { display: flex; align-items: stretch; }
.ui-input-group .ui-input { border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); }
.ui-input-group .ui-addon { display: flex; align-items: center; padding: 0 0.9rem; border: 1.5px solid var(--ui-border); border-left: 0; border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; background: var(--ui-bg); font-family: var(--ui-font); font-weight: 800; color: var(--ui-muted); font-size: 0.85rem; white-space: nowrap; }
.ui-input-group .ui-addon:first-child { border-left: 1.5px solid var(--ui-border); border-right: 0; border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); }
.ui-input-group .ui-addon:first-child + .ui-input { border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }
.ui-hint { color: var(--ui-muted); font-size: 0.76rem; font-weight: 600; margin-top: 0.375rem; line-height: 1.4; }
.ui-error { color: var(--ui-red); font-size: 0.78rem; font-weight: 700; margin-top: 0.3rem; }
.ui-field { margin-bottom: 1.1rem; }
.ui-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ui-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.1rem; }
@media (max-width: 768px) { .ui-form-grid, .ui-form-grid-3 { grid-template-columns: 1fr; } }

/* checkboxes + radios: one house look everywhere inside .ui, table cards and house modals
   (the switch components below keep their own hidden input — their rules are more specific) */
.ui input[type="checkbox"], .ui input[type="radio"], .ui-dt input[type="checkbox"], .ui-table input[type="checkbox"], .ui-modal-content input[type="checkbox"], .ui-modal-content input[type="radio"], .ui-modal input[type="checkbox"], .ui-modal input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; padding: 0; border: 2px solid var(--ui-border-strong); border-radius: 5px; background: var(--ui-surface) !important; background-image: none !important; box-shadow: none; cursor: pointer; vertical-align: middle; display: inline-block; position: relative; flex-shrink: 0; transition: border-color 0.15s, background-color 0.15s; }
.ui input[type="radio"], .ui-modal-content input[type="radio"], .ui-modal input[type="radio"] { border-radius: 50%; }
.ui input[type="checkbox"]:hover, .ui input[type="radio"]:hover, .ui-dt input[type="checkbox"]:hover, .ui-table input[type="checkbox"]:hover, .ui-modal-content input:hover, .ui-modal input:hover { border-color: var(--ui-accent); }
.ui input[type="checkbox"]:checked, .ui-dt input[type="checkbox"]:checked, .ui-table input[type="checkbox"]:checked, .ui-modal-content input[type="checkbox"]:checked, .ui-modal input[type="checkbox"]:checked, .ui input[type="checkbox"]:indeterminate, .ui-dt input[type="checkbox"]:indeterminate, .ui-table input[type="checkbox"]:indeterminate { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; }
.ui input[type="checkbox"]:checked::after, .ui-dt input[type="checkbox"]:checked::after, .ui-table input[type="checkbox"]:checked::after, .ui-modal-content input[type="checkbox"]:checked::after, .ui-modal input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 0; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ui input[type="checkbox"]:indeterminate::after, .ui-dt input[type="checkbox"]:indeterminate::after, .ui-table input[type="checkbox"]:indeterminate::after { content: ''; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: #fff; }
.ui input[type="radio"]:checked, .ui-modal-content input[type="radio"]:checked, .ui-modal input[type="radio"]:checked { border-color: var(--ui-accent) !important; background: var(--ui-accent) !important; box-shadow: inset 0 0 0 3px var(--ui-surface); }
.ui input[type="checkbox"]:focus-visible, .ui input[type="radio"]:focus-visible, .ui-dt input[type="checkbox"]:focus-visible, .ui-table input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-accent-ring); }
.ui input[type="radio"]:checked:focus-visible { box-shadow: inset 0 0 0 3px var(--ui-surface), 0 0 0 3px var(--ui-accent-ring); }
.ui input[type="checkbox"]:disabled, .ui input[type="radio"]:disabled, .ui-dt input[type="checkbox"]:disabled, .ui-table input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }
/* switch row (label wraps a hidden checkbox + .ui-sw) */
.ui-switch-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 2px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--ui-text); margin: 0 0 1rem; transition: all 0.15s; }
.ui-switch-row:hover { border-color: #f5c8cd; }
.ui-switch-row:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-light); }
.ui-switch-row input[type="checkbox"], .ui-switch-inline input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ui-sw { width: 38px; height: 20px; border-radius: 12px; background: var(--ui-border-strong); position: relative; flex-shrink: 0; transition: background 0.2s; }
.ui-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: left 0.2s; }
input:checked ~ .ui-sw { background: var(--ui-accent); }
input:checked ~ .ui-sw::after { left: 20px; }
input:focus-visible ~ .ui-sw { box-shadow: 0 0 0 3px var(--ui-accent-ring); }
.ui-switch-inline { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: 0.875rem; color: var(--ui-text); }
.ui-switch-row .ui-sw-text small { display: block; font-size: 0.75rem; color: var(--ui-muted); font-weight: 600; line-height: 1.35; margin-top: 2px; }

/* ── Chips / badges ────────────────────────────────────────────────────── */
.ui-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.65rem; border-radius: var(--ui-radius-pill); font-family: var(--ui-font); font-size: 0.72rem; font-weight: 800; line-height: 1.3; white-space: nowrap; background: #f1f3f5; color: var(--ui-muted); text-decoration: none; }
.ui-chip-pink { background: var(--ui-accent-light); color: var(--ui-accent); }
.ui-chip-green { background: var(--ui-green-light); color: #047857; }
.ui-chip-red { background: var(--ui-red-light); color: var(--ui-red); }
.ui-chip-amber { background: var(--ui-amber-light); color: var(--ui-amber); }
.ui-chip-blue { background: var(--ui-blue-light); color: var(--ui-blue); }
.ui-chip-solid { background: var(--ui-accent); color: #fff; }
a.ui-chip:hover { filter: brightness(0.96); }
.ui-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 0.5rem; border-radius: 8px; background: var(--ui-bg); border: 1px solid var(--ui-border); font-weight: 800; font-size: 0.75rem; color: var(--ui-text); }
.ui-count.ui-count-pink { background: var(--ui-accent-light); border-color: #f5c8cd; color: var(--ui-accent); }

/* ── Tables ────────────────────────────────────────────────────────────── */
.ui-table { width: 100%; border-collapse: collapse; font-family: var(--ui-font); font-size: 0.875rem; }
.ui-table thead th { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ui-muted); padding: 0.85rem 1rem; background: var(--ui-bg); border-bottom: 1px solid var(--ui-border); text-align: left; white-space: nowrap; }
.ui-table tbody td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--ui-border); color: var(--ui-text); vertical-align: middle; }
.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table tbody tr:hover td { background: #fcfcfd; }
.ui-table .ui-td-r, .ui-table .ui-th-r { text-align: right; }
.ui-table .ui-td-c, .ui-table .ui-th-c { text-align: center; }
.ui-table a.ui-row-link { color: var(--ui-text); font-weight: 800; }
.ui-table a.ui-row-link:hover { color: var(--ui-accent); }
.ui-table-wrap { border: 1px solid var(--ui-border); border-radius: 12px; overflow-x: auto; } /* auto, not hidden: wide tables must scroll on phones */
.ui-table-wrap .ui-table thead th:first-child { padding-left: 1.1rem; }
.ui-table-wrap .ui-table tbody td:first-child { padding-left: 1.1rem; }
.ui-table .ui-input, .ui-table .ui-input-group { min-width: 90px; }
.ui-table .ui-input { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
/* compact variant for dense ledgers */
.ui-table.ui-table-compact { font-size: 0.82rem; }
.ui-table.ui-table-compact thead th { padding: 0.5rem 0.75rem; font-size: 0.66rem; }
.ui-table.ui-table-compact tbody td, .ui-table.ui-table-compact tfoot td { padding: 0.42rem 0.75rem; }
.ui-table.ui-table-compact tr.ui-table-group td { padding: 0.35rem 0.75rem; }
.ui-table tr.ui-row-quiet td { color: var(--ui-faint); font-style: italic; }
/* toolbar: pills/title on the left, actions on the right */
.ui-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.ui-toolbar-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-left: auto; }
/* inline KPI strip (label over value) */
.ui-kpis { display: flex; gap: 1.75rem; flex-wrap: wrap; padding: 0.75rem 1rem; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); margin-bottom: 0.9rem; font-family: var(--ui-font); }
.ui-kpi { min-width: 0; }
.ui-kpi-label { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ui-muted); }
.ui-kpi-value { display: block; font-size: 1.05rem; font-weight: 900; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ui-kpi-value small { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 0.3rem; opacity: 0.8; }
.ui-kpi.ui-kpi-end { margin-left: auto; text-align: right; }/* Phones: toolbar stacks (pills full width, actions share one row), KPIs on a 2-column grid, tighter cards/tables */
@media (max-width: 575.98px) {
  .ui-toolbar { gap: 0.5rem; }
  .ui-toolbar .ui-pills { display: flex; width: 100%; }
  .ui-toolbar .ui-pills a, .ui-toolbar .ui-pills button { flex: 1 1 0; justify-content: center; }
  .ui-toolbar-actions { width: 100%; margin-left: 0; }
  .ui-toolbar-actions .ui-btn { flex: 1 1 auto; }
  .ui-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 0.9rem; padding: 0.7rem 0.9rem; }
  .ui-kpi { display: flex; flex-direction: column; justify-content: flex-end; }
  .ui-kpi-value { font-size: 0.95rem; }
  .ui-kpi.ui-kpi-end { margin-left: 0; grid-column: 2; justify-self: end; }  .ui-card-head { padding: 0.85rem 1rem; gap: 0.6rem; }
  .ui-card-body { padding: 1rem; }
  .ui-table thead th { padding: 0.65rem 0.7rem; }
  .ui-table tbody td { padding: 0.6rem 0.7rem; }
  .ui-table.ui-table-compact { font-size: 0.78rem; }
  .ui-table.ui-table-compact thead th { padding: 0.45rem 0.5rem; }
  .ui-table.ui-table-compact tbody td, .ui-table.ui-table-compact tfoot td { padding: 0.4rem 0.5rem; }
  .ui-table.ui-table-compact tbody td:first-child, .ui-table tr.ui-row-quiet td:first-child { white-space: nowrap; }
}
.ui-btn-icon.ui-btn-xs { width: 26px; height: 26px; border-radius: 6px; }
.ui-btn-icon.ui-btn-xs i { font-size: 0.85rem; }
.ui-table tr.ui-table-group td { background: #fafbfc; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ui-faint); font-weight: 800; padding: 0.5rem 1rem; }
.ui-table tr.ui-row-click { cursor: pointer; }
.ui-table tr.ui-row-click:hover td { background: var(--ui-accent-light); }
.ui-table td.ui-empty { padding: 2rem 1rem; }

/* DataTables (Yajra) inside a .ui-dt card */
.ui-dt .card-header.flex-column.flex-md-row.flex-row { display: none; }
.ui-dt table.dataTable { margin: 0 !important; border-collapse: collapse; font-family: var(--ui-font); }
.ui-dt table.dataTable thead th { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ui-muted); padding: 0.9rem 1.1rem; background: var(--ui-bg); border-bottom: 1px solid var(--ui-border); }
.ui-dt table.dataTable tbody td { padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--ui-border); vertical-align: middle; font-size: 0.875rem; color: var(--ui-text); }
.ui-dt table.dataTable tbody tr:hover td { background: #fcfcfd; }
.ui-dt table.dataTable tbody tr:last-child td { border-bottom: none; }
.ui-dt table.dataTable tbody a:not(.ui-chip):not(.ui-btn) { color: var(--ui-text); font-weight: 800; }
.ui-dt table.dataTable tbody a:not(.ui-chip):not(.ui-btn):hover { color: var(--ui-accent); }
.ui-dt .dataTables_wrapper { padding: 0; }
.ui-dt .dataTables_wrapper .row { margin: 0; }
.ui-dt .dataTables_wrapper .dataTables_info { padding: 1rem 1.1rem; color: var(--ui-faint); font-size: 0.78rem; font-weight: 600; font-family: var(--ui-font); }
.ui-dt .dataTables_wrapper .dataTables_paginate { padding: 0.75rem 1.1rem; text-align: right !important; }
/* pagination always sits at the end of the table, whatever the page's dom layout or the viewport */
.ui-dt .dataTables_wrapper .dataTables_paginate ul.pagination, .ui-dt .pagination { justify-content: flex-end !important; }
.ui-dt .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 8px; padding: 0.3rem 0.65rem; margin: 0 2px; font-family: var(--ui-font); font-weight: 700; font-size: 0.8rem; color: var(--ui-muted) !important; border: 1px solid transparent; background: transparent; }
.ui-dt .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--ui-bg); border-color: var(--ui-border); color: var(--ui-text) !important; }
.ui-dt .dataTables_wrapper .dataTables_paginate .paginate_button.current, .ui-dt .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: #fff !important; }
.ui-dt .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.45; }
.ui-dt .dataTables_wrapper .dataTables_length select, .ui-dt .dataTables_wrapper .dataTables_filter input { border: 1.5px solid var(--ui-border); border-radius: 8px; padding: 0.35rem 0.6rem; font-family: var(--ui-font); }
.ui-dt .btn-icon.item-edit, .ui-dt .btn-icon.item-delete { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-muted); }
.ui-dt .btn-icon.item-edit:hover { border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-light); }
.ui-dt .btn-icon.item-delete:hover { border-color: var(--ui-red); color: var(--ui-red); background: var(--ui-red-light); }
.ui-dt .btn-icon i { color: inherit !important; }
/* Pagination — one square house look everywhere: DataTables bs5 markup (li.page-item > a.page-link), plain DataTables
   markup (a.paginate_button) and Laravel links() pagers inside any .ui page. The theme rounds some of these into circles. */
.ui-dt .pagination, .ui .pagination { margin: 0; gap: 2px; }
/* DataTables wraps each link in li.paginate_button: the li carries no box of its own, only the link does */
.ui-dt .pagination .page-item, .ui-dt .pagination .paginate_button, .ui .pagination .page-item { padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; }
.ui-dt .pagination .page-item .page-link, .ui .pagination .page-item .page-link, .ui-dt .dataTables_paginate a.paginate_button, .ui .dataTables_paginate a.paginate_button { display: inline-block; border-radius: 8px !important; border: none !important; background: transparent !important; color: var(--ui-muted) !important; font-family: var(--ui-font); font-weight: 700; font-size: 0.8rem; line-height: 1.4; padding: 0.3rem 0.65rem; box-shadow: none !important; outline: none !important; min-width: 30px; text-align: center; }
.ui-dt .pagination .page-item .page-link:hover, .ui-dt .pagination .page-item .page-link:focus, .ui .pagination .page-item .page-link:hover, .ui-dt .dataTables_paginate a.paginate_button:hover, .ui .dataTables_paginate a.paginate_button:hover { background: var(--ui-accent-light) !important; color: var(--ui-accent) !important; }
.ui-dt .pagination .page-item.active .page-link, .ui .pagination .page-item.active .page-link, .ui-dt .dataTables_paginate a.paginate_button.current, .ui .dataTables_paginate a.paginate_button.current { background: var(--ui-accent) !important; color: #fff !important; }
.ui-dt .pagination .page-item.disabled .page-link, .ui .pagination .page-item.disabled .page-link, .ui-dt .dataTables_paginate a.paginate_button.disabled, .ui .dataTables_paginate a.paginate_button.disabled { opacity: 0.45; background: transparent !important; color: var(--ui-muted) !important; cursor: default; }
/* Name block (avatar + name + sub) — the children-list treatment, shared by every list via childNameBlock().
   Status ring + dot on the avatar: .ui-st-active (green) / .ui-st-waitlist (amber) / .ui-st-inactive (grey). */
.ui-who { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; text-decoration: none; color: var(--ui-text); font-weight: 700 !important; }
.ui-who-av { --_st: transparent; position: relative; display: block; width: 38px; height: 38px; flex-shrink: 0; }
.ui-who-av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--ui-border); background: var(--ui-bg); transition: border-color 0.2s; }
.ui-who-av img[src*="icon.png"] { object-fit: contain; }
.ui-who-av.ui-st { --_st: var(--ui-faint); }
.ui-who-av.ui-st img, .ui-who-av.ui-st .ui-who-ini { border-color: var(--_st); }
.ui-who-ini { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--ui-accent); color: #fff; font-weight: 800; font-size: 0.82rem; letter-spacing: -0.02em; border: 2px solid var(--ui-border); transition: border-color 0.2s; } /* initials avatar */
.ui-who:hover .ui-who-ini { border-color: var(--ui-accent-dark); }
.ui-who-av.ui-st::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--_st); border: 2px solid var(--ui-surface); }
.ui-who-av.ui-st-active { --_st: var(--ui-green); }
.ui-who-av.ui-st-waitlist { --_st: var(--ui-amber-strong); }
.ui-who-av.ui-st-inactive { --_st: var(--ui-faint); }
.ui-who-av.ui-st-inactive img { filter: grayscale(1); opacity: 0.7; }
.ui-who:hover .ui-who-av img { border-color: var(--ui-accent); }
.ui-who-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.35rem; min-width: 0; }
.ui-who-name { font-weight: 700; font-size: 0.875rem; color: var(--ui-text); white-space: nowrap; }
.ui-who:hover .ui-who-name { color: var(--ui-accent); }
.ui-who-sub { font-size: 0.72rem; color: var(--ui-muted); font-weight: 600; opacity: 0.8; white-space: nowrap; }
.ui-who-lines .ui-who-text { flex-direction: column; align-items: flex-start; row-gap: 1px; } /* sub under the name (contact e-mail…) */
.ui-who-sm .ui-who-av { width: 28px; height: 28px; }
.ui-who-sm .ui-who-av.ui-st::after { width: 9px; height: 9px; }
.ui-who-sm .ui-who-name { font-size: 0.82rem; }
.ui-row-actions { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
/* Hand-built pagers (file organizer, action tracker…) — same look as the DataTables pager above */
.ui-pager { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 1.1rem; border-top: 1px solid var(--ui-border); font-family: var(--ui-font); }
.ui-pager-info { color: var(--ui-faint); font-size: 0.78rem; font-weight: 600; }
.ui-pager-btns { display: flex; gap: 2px; margin-left: auto; }
.ui-pager-btn { display: inline-block; border-radius: 8px; border: none; background: transparent; color: var(--ui-muted); font-family: var(--ui-font); font-weight: 700; font-size: 0.8rem; line-height: 1.4; padding: 0.3rem 0.65rem; min-width: 30px; text-align: center; cursor: pointer; transition: all 0.15s; }
.ui-pager-btn:hover, .ui-pager-btn:focus-visible { background: var(--ui-accent-light); color: var(--ui-accent); outline: none; }
.ui-pager-btn.active { background: var(--ui-accent); color: #fff; }
.ui-pager-btn:disabled { opacity: 0.45; cursor: default; background: transparent; color: var(--ui-muted); }
.ui-pager-gap { display: inline-block; padding: 0.3rem 0.4rem; color: var(--ui-faint); font-size: 0.8rem; font-weight: 700; line-height: 1.4; }
/* Yajra's DT_RowIndex "NO" column — hide it on lists that opt in */
.ui-dt.ui-dt-noindex table.dataTable th:first-child, .ui-dt.ui-dt-noindex table.dataTable td:first-child { display: none !important; }

/* ── Modal skin (Bootstrap modal inside .ui-modal, or content flagged .ui-modal-content) ── */
.ui-modal .modal-content, .modal-content.ui-modal-content { border: none; border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-lg); font-family: var(--ui-font); overflow: hidden; }
.ui-modal .modal-header, .ui-modal-content .modal-header { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--ui-border); background: var(--ui-bg); display: flex; align-items: center; gap: 0.9rem; }
.ui-modal .modal-title, .ui-modal-content .modal-title { font-family: var(--ui-font); font-weight: 900; font-size: 1.05rem; color: var(--ui-text); margin: 0; display: flex; align-items: center; gap: 0.6rem; }
.ui-modal .modal-title i, .ui-modal-content .modal-title i { color: var(--ui-accent); font-size: 1.2rem; }
.ui-modal .modal-subtitle, .ui-modal-content .modal-subtitle { font-size: 0.8rem; color: var(--ui-muted); font-weight: 600; margin: 0.1rem 0 0; }
.ui-modal .modal-body, .ui-modal-content .modal-body { padding: 1.4rem; }
.ui-modal .modal-footer, .ui-modal-content .modal-footer { padding: 1rem 1.4rem; border-top: 1px solid var(--ui-border); background: var(--ui-bg); display: flex; justify-content: flex-end; gap: 0.6rem; }
.ui-modal .btn-close, .ui-modal-content .btn-close { margin-left: auto; opacity: 0.6; }
/* the shared #myModal is modal-xl; content can ask for a narrower dialog */
#myModal:has(.ui-modal-md) .modal-dialog { max-width: 640px; }
/* the theme pads .modal-content (modal-simple); a ui-modal-content fills it edge to edge */
#myModal .modal-content:has(> .ui-modal-content) { padding: 0; }
.ui-modal-content .modal-header > div:not(.ui-card-head-icon) { flex: 1; min-width: 0; }
.ui-modal-content .modal-header .btn-close, .ui-modal .modal-header .btn-close { position: static !important; transform: none !important; margin: 0 0 0 auto; padding: 0.4rem; background-color: var(--ui-surface); border-radius: 8px; box-shadow: none; }
#myModal:has(.ui-modal-lg) .modal-dialog { max-width: 860px; }

/* ── Nav strip (eyebrow + pills) ───────────────────────────────────────── */
.ui-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 18px; font-family: var(--ui-font); }
.ui-nav-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-faint); margin-right: 6px; text-decoration: none; }
a.ui-nav-eyebrow:hover { color: var(--ui-accent); }
.ui-nav-eyebrow i { color: var(--ui-accent); font-size: 14px; }
.ui-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-pill); padding: 4px; box-shadow: var(--ui-shadow); }
.ui-pills a, .ui-pills button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: none; border-radius: var(--ui-radius-pill); font-family: var(--ui-font); font-size: 12.5px; font-weight: 700; color: var(--ui-muted); background: transparent; text-decoration: none; white-space: nowrap; cursor: pointer; transition: all 0.15s; }
.ui-pills a i, .ui-pills button i { font-size: 15px; }
.ui-pills a:hover, .ui-pills button:hover { color: var(--ui-text); background: var(--ui-bg); }
.ui-pills a.on, .ui-pills button.on { background: var(--ui-accent); color: #fff; }

/* ── Boxes / empty states ──────────────────────────────────────────────── */
.ui-info-box { background: var(--ui-accent-light); border-left: 3px solid var(--ui-accent); border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; padding: 0.9rem 1.1rem; font-size: 0.85rem; color: var(--ui-text); font-weight: 600; margin-bottom: 1.1rem; }
.ui-info-box p { margin: 0; }
.ui-warning-box { background: var(--ui-amber-light); border-left: 3px solid #f59e0b; border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; padding: 0.9rem 1.1rem; font-size: 0.85rem; color: #78350f; font-weight: 600; margin-bottom: 1.1rem; }
.ui-empty { text-align: center; color: var(--ui-faint); font-weight: 700; font-size: 0.875rem; padding: 2rem 1rem; }
.ui-empty i { display: block; font-size: 1.8rem; margin-bottom: 0.4rem; opacity: 0.7; }
.ui-alert { border-radius: var(--ui-radius-sm); font-family: var(--ui-font); font-weight: 600; }

/* ── Segmented mini toggle (P / A cells, yes-no choices) ───────────────── */
.ui-seg { display: inline-flex; gap: 2px; align-items: center; }
.ui-seg button { min-width: 28px; padding: 3px 8px; border-radius: 6px; border: 1.5px solid var(--ui-border); background: var(--ui-surface); font-family: var(--ui-font); font-weight: 800; font-size: 0.7rem; line-height: 1.2; color: var(--ui-muted); cursor: pointer; transition: all 0.15s; }
.ui-seg button:hover { border-color: var(--ui-border-strong); color: var(--ui-text); }
.ui-seg button.active { color: #fff; }
.ui-seg button.ui-ok.active { background: var(--ui-green); border-color: var(--ui-green); }
.ui-seg button.ui-no.active { background: var(--ui-red); border-color: var(--ui-red); }
.ui-seg .ui-input { width: auto; min-width: 0; }
.ui-seg select.ui-input.active { border-color: #f59e0b; box-shadow: 0 0 0 2px var(--ui-amber-light); }

/* ── Date box (day + month) and simple list rows ───────────────────────── */
.ui-datebox { min-width: 44px; text-align: center; background: var(--ui-accent-light); color: var(--ui-accent); border-radius: var(--ui-radius-sm); padding: 5px 4px; font-family: var(--ui-font); flex-shrink: 0; }
.ui-datebox b { display: block; font-size: 17px; font-weight: 900; line-height: 1; }
.ui-datebox small { display: block; font-size: 9.5px; text-transform: uppercase; font-weight: 800; letter-spacing: 0.4px; margin-top: 2px; }
.ui-list-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ui-border); }
.ui-list-item:last-child { border-bottom: none; }

/* ── Loading overlay ───────────────────────────────────────────────────── */
/* Page-change loader (layouts/app): house logo bobbing over a pink indeterminate bar */
.ui-page-loader { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(2px); animation: uiFadeIn 0.2s ease-out; }
.ui-page-loader[hidden] { display: none; }
.ui-page-loader-box { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; font-family: var(--ui-font); }
.ui-page-loader-box img { width: 64px; height: 64px; object-fit: contain; animation: uiLoaderBob 1.1s ease-in-out infinite; }
.ui-page-loader-bar { position: relative; width: 140px; height: 5px; border-radius: 999px; background: var(--ui-accent-light); overflow: hidden; }
.ui-page-loader-bar span { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 999px; background: var(--ui-accent); animation: uiLoaderSlide 1.1s ease-in-out infinite; }
.ui-page-loader-text { font-size: 0.78rem; font-weight: 700; color: var(--ui-muted); letter-spacing: 0.04em; text-transform: uppercase; }
@keyframes uiLoaderBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes uiLoaderSlide { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ui-page-loader-box img, .ui-page-loader-bar span { animation: none; } .ui-page-loader-bar span { left: 30%; } }
.ui-overlay { position: fixed; inset: 0; background: rgba(45, 52, 54, 0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.ui-overlay.d-none, .ui-overlay[hidden] { display: none; }
.ui-overlay .spinner-border { width: 3rem; height: 3rem; }

/* ── Small utilities ───────────────────────────────────────────────────── */
.ui-text-green { color: var(--ui-green); }
.ui-text-red { color: var(--ui-red); }
.ui-text-blue { color: var(--ui-blue); }
.ui-text-amber { color: #d97706; }
.ui-dim { opacity: 0.45; }
.ui-text-accent { color: var(--ui-accent); }
.ui-dot-accent { background: var(--ui-accent); width: 8px; height: 8px; }
.ui-inline-form { display: inline; margin: 0; }
.ui-link-accent { color: var(--ui-accent); font-weight: 700; text-decoration: none; }
.ui-link-accent:hover { color: var(--ui-accent-dark); text-decoration: underline; }
.ui-btn-amber { background: var(--ui-amber-strong); color: #fff; }
.ui-btn-amber:hover { background: #d97706; color: #fff; }
.ui-input-xs { padding: 0.3rem 0.5rem; font-size: 0.85rem; max-width: 90px; margin: 0 auto; text-align: center; }
@keyframes uiFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ui-fade-in { animation: uiFadeIn 0.4s ease-out; }
/* fixed toast (top right) built by page scripts */
.ui-toast { position: fixed; top: 80px; right: 20px; z-index: 9999; min-width: 300px; max-width: 420px; padding: 0.85rem 1.1rem; border-radius: var(--ui-radius-sm); background: var(--ui-surface); border: 1px solid var(--ui-border); border-left: 4px solid var(--ui-accent); box-shadow: var(--ui-shadow-lg); font-family: var(--ui-font); font-weight: 700; font-size: 0.875rem; color: var(--ui-text); display: flex; align-items: center; gap: 0.6rem; }
.ui-toast-success { border-left-color: var(--ui-green); }
.ui-toast-success i { color: var(--ui-green); }
.ui-toast-info i { color: var(--ui-accent); }
.ui-swal-note { color: var(--ui-ink-muted); font-size: 0.88rem; }
.ui-swal-pre { text-align: left; font-size: 0.78rem; max-height: 200px; overflow: auto; background: var(--ui-bg); padding: 0.75rem; border-radius: 8px; color: var(--ui-ink-border); border: 1px solid var(--ui-border); white-space: pre-wrap; word-break: break-all; }

/* ══════════════════════════════════════════════════════════════════════════
   SHELL — navbar, search, user menu, banners (used by layouts/app.blade.php)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199.98px) { #layout-navbar { z-index: 1037; } } /* hamburger above .drag-target */
#layout-navbar .btn-outline-primary { color: var(--ui-muted) !important; background: var(--ui-bg) !important; border: 1.5px solid var(--ui-border) !important; border-radius: var(--ui-radius-sm); font-family: var(--ui-font); font-weight: 700; font-size: 0.82rem; padding: 0.4rem 0.9rem; transition: all 0.2s ease; box-shadow: none !important; }
#layout-navbar .btn-outline-primary:hover, #layout-navbar .btn-outline-primary:active, #layout-navbar .btn-outline-primary.active, #layout-navbar .btn-outline-primary.show, #layout-navbar .btn-outline-primary.dropdown-toggle.show, #layout-navbar .btn-check:checked + .btn-outline-primary, #layout-navbar .btn-check:active + .btn-outline-primary, #layout-navbar .btn-outline-primary:active:focus, #layout-navbar .btn-outline-primary.active:focus, #layout-navbar .btn-outline-primary.dropdown-toggle.show:focus { color: #fff !important; background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; box-shadow: 0 3px 10px var(--ui-accent-ring) !important; }
#layout-navbar .btn-outline-primary:focus, #layout-navbar .btn-check:focus + .btn-outline-primary { color: var(--ui-muted) !important; background: var(--ui-bg) !important; border-color: var(--ui-border) !important; box-shadow: none !important; }
#layout-navbar .btn-outline-primary.dropdown-toggle::after { opacity: 0.6; }
#layout-navbar .btn-outline-primary.waves-effect .waves-ripple { background: var(--ui-accent-ring) !important; }
#layout-navbar .dropdown-menu { border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow-lg); padding: 0.4rem; margin-top: 0.35rem; font-family: var(--ui-font); }
#layout-navbar .dropdown-item { border-radius: 8px; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 0.85rem; color: var(--ui-text) !important; transition: all 0.15s ease; }
#layout-navbar .dropdown-item:hover, #layout-navbar .dropdown-item:focus { background: var(--ui-accent-light) !important; color: var(--ui-accent) !important; }
#layout-navbar .dropdown-item.active, #layout-navbar .dropdown-item:not(.disabled).active, #layout-navbar .dropdown-item:not(.disabled):active { background: var(--ui-accent) !important; color: #fff !important; }
/* Same house dropdown inside any .ui page (child status menu, row menus…) — the theme's hover is purple */
.ui .dropdown-menu { border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow-lg); padding: 0.4rem; font-family: var(--ui-font); }
.ui .dropdown-item { border-radius: 8px; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 0.85rem; color: var(--ui-text) !important; transition: all 0.15s ease; }
.ui .dropdown-item:not([class*="btn-"]):hover, .ui .dropdown-item:not([class*="btn-"]):focus { background: var(--ui-accent-light) !important; color: var(--ui-accent) !important; }
.ui .dropdown-item.active:not([class*="btn-"]), .ui .dropdown-item:not(.disabled):active:not([class*="btn-"]) { background: var(--ui-accent) !important; color: #fff !important; }
/* Items that carry a status colour (btn-success, btn-warning…) keep it — e.g. the current child status in its menu */
.ui .dropdown-item.active[class*="btn-"], .ui .dropdown-item.active[class*="btn-"]:hover, .ui .dropdown-item.active[class*="btn-"]:focus { color: #fff !important; }
.ui .dropdown-item i { color: inherit; }

/* ── SweetAlert2: house skin (confirm dialogs, bulk send progress, toasts) ──
   The theme's SweetAlert styles load after ui.css and paint the purple button;
   these rules carry !important on colour so every dialog in the app matches. */
body .swal2-popup { border-radius: 16px !important; padding: 1.6rem 1.6rem 1.4rem !important; font-family: var(--ui-font) !important; box-shadow: var(--ui-shadow-lg) !important; color: var(--ui-text) !important; }
body .swal2-title { font-family: var(--ui-font) !important; font-weight: 800 !important; font-size: 1.25rem !important; color: var(--ui-text) !important; padding: .4rem 0 0 !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; text-align: center !important; }
body .swal2-html-container, body .swal2-actions { width: 100% !important; text-align: center !important; justify-content: center !important; }
body .swal2-html-container, body .swal2-content { font-size: .92rem !important; color: var(--ui-muted) !important; font-weight: 600 !important; line-height: 1.5 !important; margin: .9rem 0 0 !important; }
body .swal2-icon { border-width: 3px !important; margin: .5rem auto 0 !important; }
body .swal2-icon.swal2-success { border-color: var(--ui-green) !important; color: var(--ui-green) !important; }
body .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--ui-green) !important; }
body .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(36,179,100,.3) !important; }
body .swal2-icon.swal2-warning { border-color: var(--ui-amber) !important; color: var(--ui-amber) !important; }
body .swal2-icon.swal2-error { border-color: var(--ui-red) !important; color: var(--ui-red) !important; }
body .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--ui-red) !important; }
body .swal2-icon.swal2-question, body .swal2-icon.swal2-info { border-color: var(--ui-accent) !important; color: var(--ui-accent) !important; }
body .swal2-actions { gap: .6rem !important; margin: 1.3rem 0 0 !important; }
body .swal2-styled { font-family: var(--ui-font) !important; font-weight: 800 !important; font-size: .88rem !important; border-radius: 10px !important; padding: .6rem 1.3rem !important; box-shadow: none !important; margin: 0 !important; transition: all .15s ease !important; }
body .swal2-styled.swal2-confirm { background: var(--ui-accent) !important; color: #fff !important; border: 1.5px solid var(--ui-accent) !important; }
body .swal2-styled.swal2-confirm:hover { background: var(--ui-accent-dark, #d95f6d) !important; border-color: var(--ui-accent-dark, #d95f6d) !important; }
body .swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px var(--ui-accent-light) !important; }
body .swal2-styled.swal2-cancel, body .swal2-styled.swal2-deny { background: var(--ui-surface) !important; color: var(--ui-muted) !important; border: 1.5px solid var(--ui-border) !important; }
body .swal2-styled.swal2-cancel:hover, body .swal2-styled.swal2-deny:hover { border-color: var(--ui-accent) !important; color: var(--ui-accent) !important; background: var(--ui-accent-light) !important; }
body .swal2-loader { border-color: var(--ui-accent) transparent var(--ui-accent) transparent !important; }
body .swal2-toast { border-radius: 12px !important; padding: .6rem .9rem !important; box-shadow: var(--ui-shadow-lg) !important; }
body .swal2-toast .swal2-title { font-size: .9rem !important; padding: 0 !important; }
body .swal2-input, body .swal2-textarea, body .swal2-select { font-family: var(--ui-font) !important; border: 1.5px solid var(--ui-border) !important; border-radius: 10px !important; box-shadow: none !important; font-size: .9rem !important; }
body .swal2-input:focus, body .swal2-textarea:focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px var(--ui-accent-light) !important; }
#layout-navbar .avatar-initial.bg-label-primary { background-color: var(--ui-accent-light) !important; color: var(--ui-accent) !important; }
/* notification bell */
.ui-bell-badge { position: absolute; top: 0; left: 100%; transform: translate(-50%, -50%); display: inline-flex; justify-content: center; align-items: center; background: var(--ui-accent); color: #fff; font-size: 0.65rem; font-weight: 800; line-height: 1; padding: 0.2em 0.45em; min-width: 1.1rem; border-radius: 999px; font-family: var(--ui-font); }
.ui-bell-badge[hidden] { display: none; }
.ui-notif-menu { width: 380px; border-radius: 12px !important; overflow: hidden; padding: 0 !important; }
.ui-notif-head { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; border-bottom: 1px solid var(--ui-border); font-weight: 800; font-family: var(--ui-font); }
.ui-notif-head .ui-btn-pill { padding: 0.25rem 0.6rem; font-size: 0.75rem; background: var(--ui-accent-light); color: var(--ui-accent); border: 0; }
.ui-notif-list { max-height: 420px; overflow: auto; }
.ui-notif-foot { padding: 0.5rem; text-align: center; border-top: 1px solid var(--ui-border); font-size: 0.8rem; }
/* language switch in the user menu */
.ui-lang-row { padding: 0.35rem 0.85rem; list-style: none; }
.ui-lang-switch { display: flex; gap: 4px; padding: 4px; background: #f1f3f5; border-radius: 10px; width: 100%; }
.ui-lang-switch form { flex: 1; margin: 0; }
.ui-lang-btn { width: 100%; background: transparent; border: 0; padding: 0.42rem 0.6rem; font-family: var(--ui-font); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; color: var(--ui-muted); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; transition: background 0.18s ease, color 0.18s ease; cursor: pointer; }
.ui-lang-btn:hover:not(.is-active) { color: var(--ui-text); background: rgba(255, 255, 255, 0.55); }
.ui-lang-btn.is-active { background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow); }
.ui-lang-btn .fi { font-size: 1rem; line-height: 1; border-radius: 3px; overflow: hidden; }
/* live search (header + dashboards) */
.ui-search-wrap { position: relative; min-width: 0; }
.ui-search-wrap.ui-search-header { margin-left: 4px; min-width: 280px; }
.ui-search { display: flex; align-items: center; gap: 8px; background: var(--ui-bg); border: 1.5px solid var(--ui-border); border-radius: var(--ui-radius-pill); padding: 6px 14px; transition: all 0.15s; margin: 0; }
.ui-search:focus-within { border-color: var(--ui-accent); background: var(--ui-surface); box-shadow: 0 0 0 3px var(--ui-accent-light); }
.ui-search i { color: var(--ui-faint); font-size: 16px; }
.ui-search input { border: none; background: transparent; outline: none; font-family: var(--ui-font); font-weight: 600; font-size: 13px; color: var(--ui-text); width: 100%; min-width: 0; }
.ui-search input::placeholder { color: #a1acb8; }
.ui-search-wide .ui-search { min-width: 320px; }
.ui-search-results { display: none; position: absolute; top: calc(100% + 6px); left: 0; width: 380px; max-width: 92vw; max-height: 420px; overflow-y: auto; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow-lg); z-index: 1100; padding: 6px; font-family: var(--ui-font); }
.ui-search-results.active { display: block; }
.ui-search-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit; }
.ui-search-item:hover, .ui-search-item.sel { background: var(--ui-accent-light); color: inherit; }
.ui-search-type { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: #f1f3f5; color: var(--ui-muted); flex-shrink: 0; min-width: 62px; text-align: center; }
.ui-search-type.enfant, .ui-search-type[data-type="Enfant"] { background: var(--ui-accent-light); color: var(--ui-accent); }
.ui-search-type.contact, .ui-search-type[data-type="Contact"] { background: var(--ui-blue-light); color: var(--ui-blue); }
.ui-search-type.personnel, .ui-search-type[data-type="Personnel"] { background: var(--ui-green-light); color: var(--ui-green); }
.ui-search-name { font-weight: 800; font-size: 13px; color: var(--ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-search-sub { font-size: 11.5px; color: var(--ui-faint); font-weight: 600; }
.ui-search-empty { padding: 14px; text-align: center; color: var(--ui-faint); font-weight: 700; font-size: 13px; }
@media (max-width: 768px) { .ui-search-wrap, .ui-search-wide .ui-search { width: 100%; min-width: 0; } }
/* full-width banners under the navbar (impersonation, centre context, superadmin mode) */
.ui-banner { color: #fff; padding: 0.6rem 1.25rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-family: var(--ui-font); font-weight: 700; font-size: 0.9rem; flex-wrap: wrap; }
.ui-banner > i { font-size: 1.2rem; }
.ui-banner-purple { background: var(--ui-purple); }
.ui-banner-dark { background: var(--ui-text); }
.ui-banner-btn { color: #fff; background: rgba(255, 255, 255, 0.25); padding: 0.25rem 0.75rem; border-radius: 6px; border: none; text-decoration: none; font-family: var(--ui-font); font-weight: 800; margin-left: 0.5rem; cursor: pointer; }
.ui-banner-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.35); }
/* root-admin deploy / migrate banners */
@keyframes pu-slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pu-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } }
#pending-update-banner, #pending-migration-banner { font-family: var(--ui-font); background: var(--ui-ink); color: var(--ui-ink-text); padding: 0; animation: pu-slideDown 0.5s ease-out; position: relative; overflow: hidden; }
#pending-migration-banner { background: var(--ui-ink-2); }
.pu-inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.85rem; padding: 0.65rem 1.25rem; flex-wrap: wrap; }
.pu-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-green); flex-shrink: 0; animation: pu-pulse 2s ease-in-out infinite; }
.pu-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(16, 185, 129, 0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pu-icon i { font-size: 1.1rem; color: var(--ui-green); }
.pu-text { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.88rem; line-height: 1.4; }
.pu-label { font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.pu-commit { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.75rem; font-weight: 700; background: rgba(16, 185, 129, 0.2); color: #6ee7b7; padding: 0.15rem 0.5rem; border-radius: 5px; letter-spacing: 0.02em; }
.pu-msg { color: var(--ui-ink-muted); font-size: 0.84rem; }
.pu-meta { color: var(--ui-ink-faint); font-size: 0.78rem; }
.pu-btn-deploy { color: #fff; background: var(--ui-green); border: none; padding: 0.4rem 1rem; border-radius: 8px; cursor: pointer; font-weight: 800; font-size: 0.82rem; font-family: var(--ui-font); display: flex; align-items: center; gap: 0.4rem; transition: all 0.2s; white-space: nowrap; }
.pu-btn-deploy:hover { background: #059669; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.pu-btn-dismiss { color: var(--ui-ink-faint); background: transparent; border: 1px solid var(--ui-ink-border); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; font-size: 0.85rem; padding: 0; }
.pu-btn-dismiss:hover { color: var(--ui-ink-text); border-color: #475569; background: var(--ui-ink-2); }
.pu-diff { text-align: left; max-height: 320px; overflow-y: auto; margin-top: 1rem; font-family: var(--ui-font); }
.pu-diff-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.pu-diff-head i { color: var(--ui-ink-muted); font-size: 0.85rem; }
.pu-hash { font-family: monospace; font-size: 0.78rem; background: #f1f5f9; color: var(--ui-ink-faint); padding: 0.2rem 0.5rem; border-radius: 5px; }
.pu-hash-new { background: #d1fae5; color: #065f46; font-weight: 700; }
.pu-branch { margin-left: auto; font-size: 0.78rem; color: var(--ui-ink-muted); }
.pu-row { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.6rem 0; border-bottom: 1px solid #f1f5f9; }
.pu-row-id { font-family: monospace; font-size: 0.75rem; color: var(--ui-green); background: #f0fdf4; padding: 0.15rem 0.4rem; border-radius: 4px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.pu-row-body { flex: 1; min-width: 0; }
.pu-row-msg { font-size: 0.84rem; color: var(--ui-ink-2); font-weight: 600; line-height: 1.3; word-break: break-word; }
.pu-row-meta { font-size: 0.75rem; color: var(--ui-ink-muted); margin-top: 2px; }
.pu-add { color: var(--ui-green); font-size: 0.72rem; font-weight: 700; }
.pu-mod { color: var(--ui-amber-strong); font-size: 0.72rem; font-weight: 700; }
.pu-del { color: #ef4444; font-size: 0.72rem; font-weight: 700; }
.pu-swal-icon i { font-size: 2rem; color: var(--ui-green); }
.pm-inner { display: flex; align-items: center; gap: 12px; padding: 10px 20px; position: relative; }
.pm-dot { width: 8px; height: 8px; background: #eab308; border-radius: 50%; animation: pu-pulse 2s infinite; flex-shrink: 0; }
.pm-icon { font-size: 1.25rem; color: #eab308; flex-shrink: 0; }
.pm-text { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-label { font-weight: 700; font-size: 0.85rem; color: #fbbf24; }
.pm-detail { font-size: 0.8rem; color: var(--ui-ink-muted); }
.pm-btn { padding: 5px 14px; border-radius: 6px; border: none; font-family: var(--ui-font); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; flex-shrink: 0; }
.pm-btn-run { background: #eab308; color: var(--ui-ink-2); }
.pm-btn-run:hover { background: #facc15; }
.pm-btn-dismiss { background: transparent; color: var(--ui-ink-faint); border: 1px solid #475569; padding: 5px 10px; }
.pm-btn-dismiss:hover { color: var(--ui-ink-text); border-color: var(--ui-ink-faint); }
/* locked module upsell (module guard) */
.ui-lock-wrap { position: relative; min-height: 70vh; overflow: hidden; }
.ui-lock-blur { filter: blur(3px); opacity: 0.35; pointer-events: none; user-select: none; }
.ui-lock-overlay { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: center; padding-top: 3vh; z-index: 50; }
.ui-lock-card { background: rgba(255, 255, 255, 0.97); border-radius: 20px; box-shadow: var(--ui-shadow-lg); padding: 2.5rem 3rem 2rem; max-width: 920px; width: 95%; text-align: center; font-family: var(--ui-font); }
.ui-lock-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--ui-orange); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; margin-bottom: 1rem; }
.ui-lock-card h1 { font-size: 1.4rem; font-weight: 900; color: var(--ui-text); margin-bottom: 0.25rem; }
.ui-lock-text { font-size: 0.88rem; color: var(--ui-muted); margin-bottom: 2rem; }
.ui-lock-plans { display: grid; grid-template-columns: repeat(var(--_n, 3), 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 768px) { .ui-lock-plans { grid-template-columns: 1fr; } }
.ui-plan { border: 2px solid var(--ui-border); border-radius: 16px; padding: 2rem 1.5rem; position: relative; background: var(--ui-surface); }
.ui-plan.popular { border-color: var(--ui-accent); box-shadow: 0 4px 20px var(--ui-accent-ring); }
.ui-plan-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--ui-accent); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 3px 14px; border-radius: 20px; text-transform: uppercase; }
.ui-plan-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--_c, var(--ui-accent)); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; margin-bottom: 0.75rem; }
.ui-plan-name { font-size: 1.15rem; font-weight: 900; color: var(--ui-text); }
.ui-plan-tag { font-size: 0.78rem; color: var(--ui-muted); margin-bottom: 1rem; font-weight: 500; }
.ui-plan-price { margin-bottom: 1.25rem; }
.ui-plan-price sup { font-size: 0.9rem; font-weight: 700; color: var(--ui-text); }
.ui-plan-price b { font-size: 2.5rem; font-weight: 900; color: var(--ui-text); line-height: 1; }
.ui-plan-per { font-size: 0.75rem; color: var(--ui-muted); font-weight: 600; margin-top: 3px; }
.ui-plan-features { text-align: left; padding: 0 0.5rem; margin-bottom: 1.25rem; }
.ui-plan-feature { font-size: 0.82rem; color: var(--ui-muted); padding: 3px 0; font-weight: 500; }
.ui-plan-feature i { font-size: 0.85rem; margin-right: 5px; color: var(--ui-green); }
.ui-plan-feature.off { color: #ccc; }
.ui-plan-feature.off i { color: #ccc; }
.ui-plan-cta { display: inline-block; background: var(--ui-orange); color: #fff; border-radius: 10px; padding: 0.65rem 1.75rem; font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.ui-plan-cta:hover { color: #fff; filter: brightness(0.95); }
.ui-lock-back { color: var(--ui-muted); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
/* Google Places autocomplete dropdown */
.pac-container { z-index: 100000 !important; background: var(--ui-surface); border: none; border-radius: 12px; box-shadow: var(--ui-shadow-lg); margin-top: 4px; padding: 6px 0; font-family: var(--ui-font); overflow: hidden; animation: uiFadeIn 0.18s ease-out; }
.pac-container::after { display: none !important; }
.pac-item { border: none; padding: 10px 16px; cursor: pointer; font-size: 0.88rem; line-height: 1.45; color: var(--ui-muted); transition: background 0.15s ease, color 0.15s ease; display: flex; align-items: center; gap: 10px; }
.pac-item:hover, .pac-item.pac-item-selected { background: var(--ui-accent-light); }
.pac-item:hover .pac-item-query, .pac-item.pac-item-selected .pac-item-query { color: var(--ui-accent); }
.pac-icon { width: 20px; height: 20px; margin-right: 0; background-size: 16px 16px; flex-shrink: 0; filter: grayscale(1) opacity(0.4); transition: filter 0.15s ease; }
.pac-item:hover .pac-icon, .pac-item.pac-item-selected .pac-icon { filter: grayscale(0) opacity(0.7); }
.pac-item-query { font-size: 0.88rem; font-weight: 700; color: var(--ui-text); transition: color 0.15s ease; }
.pac-matched { font-weight: 800; color: var(--ui-accent); }
/* support toast (live chat) */
@keyframes bgToastSlideIn { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } }
#bg-support-toast { position: fixed; bottom: 100px; right: 24px; z-index: 100001; display: flex; align-items: center; gap: 12px; background: var(--ui-surface); border-left: 4px solid var(--ui-accent); border-radius: 12px; box-shadow: var(--ui-shadow-lg); padding: 14px 18px; max-width: 380px; cursor: pointer; font-family: var(--ui-font); animation: bgToastSlideIn 0.35s ease-out; transition: opacity 0.3s, transform 0.3s; }
#bg-support-toast:hover { transform: translateY(-2px); }
.bg-st-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--ui-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.bg-st-content { flex: 1; min-width: 0; }
.bg-st-title { font-weight: 800; font-size: 14px; color: var(--ui-text); margin-bottom: 2px; }
.bg-st-body { font-size: 13px; color: var(--ui-muted); }
.bg-st-preview { font-size: 12px; color: var(--ui-faint); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-st-cta { font-size: 11px; color: var(--ui-accent); font-weight: 700; margin-top: 4px; }
.bg-st-cta i { font-size: 11px; }
.bg-st-close { background: none; border: none; color: var(--ui-faint); font-size: 16px; cursor: pointer; padding: 4px; align-self: flex-start; }
.bg-st-close:hover { color: var(--ui-accent); }
/* sidebar count badges */
.sidebar-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 0.65rem; font-weight: 700; line-height: 1; color: #fff; margin-left: auto; background: var(--ui-accent); }
@keyframes badgePulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.sidebar-badge-new { animation: badgePulse 1.5s ease-in-out 3; }
.menu-item.has-badge-child > .menu-link > .sidebar-badge-parent { margin-left: auto; margin-right: 1.35rem; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD WIDGETS — stats, widgets, notices, events, quick actions
   ══════════════════════════════════════════════════════════════════════════ */
.ui-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
.ui-stat { --_accent: var(--ui-accent); background: var(--ui-surface); border-radius: var(--ui-radius); padding: 1.5rem 1.75rem; box-shadow: var(--ui-shadow); border: 1px solid var(--ui-border); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; font-family: var(--ui-font); }
.ui-stat::after { content: ''; position: absolute; top: -40px; right: -40px; width: 110px; height: 110px; background: var(--_accent); opacity: 0.07; border-radius: 50%; transition: transform 0.4s ease; }
.ui-stat:hover::after { transform: scale(1.3); }
.ui-stat:hover { transform: translateY(-3px); box-shadow: var(--ui-shadow-lg); border-color: color-mix(in srgb, var(--_accent) 30%, var(--ui-border)); }
.ui-stat-pink { --_accent: var(--ui-accent); } .ui-stat-orange { --_accent: var(--ui-amber-strong); } .ui-stat-gray { --_accent: var(--ui-faint); } .ui-stat-blue { --_accent: var(--ui-blue); } .ui-stat-green { --_accent: var(--ui-green); }
.ui-stat-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; }
.ui-stat-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--_accent); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--_accent) 35%, transparent); flex-shrink: 0; }
.ui-stat-label { font-size: 0.75rem; font-weight: 700; color: var(--ui-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ui-stat-value { font-size: 2.5rem; font-weight: 900; color: var(--ui-text); line-height: 1; margin-bottom: 0.4rem; letter-spacing: -0.03em; }
.ui-stat-delta { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 20px; color: var(--ui-muted); background: rgba(149, 165, 166, 0.1); }
.ui-stat-delta.up { color: var(--ui-green); background: rgba(16, 185, 129, 0.1); }
.ui-two-col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; }
.ui-col { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.ui-card-head .ui-card-action { margin-left: auto; }
.ui-card-action { color: var(--ui-accent); text-decoration: none; font-size: 0.82rem; font-weight: 700; transition: all 0.2s ease; padding: 0.35rem 0.75rem; border-radius: 8px; background: var(--ui-accent-light); white-space: nowrap; }
.ui-card-action:hover { color: #fff; background: var(--ui-accent); }
.ui-chart { height: 320px; position: relative; padding-bottom: 10px; }
.ui-chart svg { overflow: visible !important; }
.ui-table tfoot td { padding: 0.75rem 1rem; background: var(--ui-bg); border-top: 2px solid var(--ui-border); font-size: 0.85rem; }
.ui-table .ui-foot-label { font-weight: 800; color: var(--ui-text); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; }
.ui-table .ui-cell-sub { font-size: 0.72rem; color: var(--ui-muted); font-weight: 600; margin-top: 0.1rem; }
.ui-table .ui-cell-name { font-weight: 700; color: var(--ui-text); display: flex; align-items: center; gap: 0.5rem; }
.ui-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; background: var(--_c, var(--ui-faint)); }
.ui-chip.ui-pop-trigger { cursor: pointer; }
.ui-chip.ui-pop-trigger:hover { filter: brightness(0.92); }
.ui-chip-chev { font-size: 0.6rem; opacity: 0.5; }
.ui-pop { display: none; position: fixed; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 10px; box-shadow: var(--ui-shadow-lg); z-index: 1050; min-width: 220px; max-height: 280px; overflow-y: auto; padding: 0; text-align: left; font-family: var(--ui-font); }
.ui-pop.show { display: block; animation: uiFadeIn 0.15s ease-out; }
.ui-pop-title { font-size: 0.75rem; font-weight: 800; color: var(--ui-muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 0.6rem 0.85rem 0.4rem; border-bottom: 1px solid var(--ui-border); }
.ui-pop-list { list-style: none; margin: 0; padding: 0.35rem 0; }
.ui-pop-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.85rem; font-size: 0.8rem; font-weight: 600; color: var(--ui-text); }
.ui-pop-list li .ui-dot { width: 8px; height: 8px; }
.ui-pop-list li.present .ui-dot { background: var(--ui-green); }
.ui-pop-list li.absent .ui-dot { background: var(--ui-red); }
.ui-pop-list li.absent { color: var(--ui-muted); text-decoration: line-through; opacity: 0.65; }
/* event rows (closures, birthdays) */
.ui-event { display: flex; gap: 1rem; padding: 0.85rem; border-radius: var(--ui-radius-sm); transition: all 0.2s ease; border: 1px solid transparent; margin-bottom: 0.35rem; align-items: center; }
.ui-event:last-child { margin-bottom: 0; }
.ui-event:hover { background: var(--ui-bg); border-color: var(--ui-border); }
.ui-datebox-solid { width: 54px; height: 54px; background: var(--ui-accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
.ui-datebox-solid b { font-size: 1.35rem; }
.ui-datebox-solid small { font-size: 0.68rem; margin-top: 0; }
.ui-datebox-red { background: var(--ui-red); }
.ui-event-title { font-weight: 700; color: var(--ui-text); margin-bottom: 0.15rem; font-size: 0.9rem; }
.ui-event-title.ui-text-red { color: var(--ui-red); }
.ui-event-info { font-size: 0.78rem; color: var(--ui-muted); font-weight: 500; }
/* quick-action tiles */
.ui-action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.ui-action { --_c: var(--ui-accent); background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 1.25rem 1rem; text-align: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; text-decoration: none; position: relative; overflow: hidden; display: block; color: var(--ui-text); font-family: var(--ui-font); }
.ui-action::before { content: ''; position: absolute; inset: 0; background: var(--_c); opacity: 0; transition: opacity 0.3s ease; }
.ui-action:hover::before { opacity: 0.04; }
.ui-action:hover { border-color: var(--_c); transform: translateY(-2px); box-shadow: 0 4px 14px color-mix(in srgb, var(--_c) 20%, transparent); color: var(--ui-text); }
.ui-action-pink { --_c: var(--ui-accent); } .ui-action-blue { --_c: var(--ui-blue); } .ui-action-orange { --_c: var(--ui-amber-strong); } .ui-action-green { --_c: var(--ui-green); }
.ui-action-icon { width: 44px; height: 44px; background: var(--_c); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 0.75rem; color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--_c) 30%, transparent); transition: transform 0.3s ease; }
.ui-action:hover .ui-action-icon { transform: scale(1.08); }
.ui-action-title { font-weight: 700; font-size: 0.85rem; position: relative; }
/* notices (alerts list) */
.ui-notice { --_c: var(--ui-amber-strong); display: flex; gap: 0.85rem; padding: 1rem; background: color-mix(in srgb, var(--_c) 4%, transparent); border-left: 3px solid var(--_c); border-radius: 0 8px 8px 0; margin-bottom: 0.75rem; transition: all 0.2s ease; flex-wrap: wrap; font-family: var(--ui-font); }
.ui-notice:last-child { margin-bottom: 0; }
.ui-notice:hover { background: color-mix(in srgb, var(--_c) 7%, transparent); transform: translateX(2px); }
.ui-notice-red { --_c: var(--ui-red); }
.ui-notice-green { --_c: var(--ui-green); }
.ui-notice-icon { width: 36px; height: 36px; background: var(--_c); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; color: #fff; }
.ui-notice-body { flex: 1; min-width: 0; }
.ui-notice-title { font-weight: 700; color: var(--ui-text); margin-bottom: 0.15rem; font-size: 0.88rem; }
.ui-notice-text { font-size: 0.78rem; color: var(--ui-muted); font-weight: 500; }
.ui-mini-list { margin-top: 0.5rem; }
.ui-mini-item { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 8px; padding: 0.5rem 0.65rem; margin-bottom: 0.4rem; }
.ui-mini-item:last-child { margin-bottom: 0; }
.ui-mini-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.ui-mini-name { font-weight: 800; font-size: 0.82rem; color: var(--ui-text); text-decoration: none; }
.ui-mini-name:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-mini-name i { font-size: 0.7rem; opacity: 0.5; margin-right: 3px; }
.ui-mini-tag { font-weight: 800; font-size: 0.72rem; color: #fff; background: var(--ui-amber-strong); padding: 1px 8px; border-radius: 10px; white-space: nowrap; }
.ui-mini-tag.red { background: var(--ui-red-light); color: #b91c1c; }
.ui-mini-tag.amber { background: var(--ui-amber-light); color: #c2410c; }
.ui-mini-meta { display: flex; gap: 0.75rem; font-size: 0.7rem; color: var(--ui-muted); font-weight: 600; margin-top: 0.2rem; }
.ui-mini-meta i { font-size: 0.7rem; margin-right: 2px; }
.ui-week { display: flex; gap: 3px; margin-top: 0.35rem; }
.ui-week-day { text-align: center; flex: 1; border-radius: 5px; padding: 2px 0; font-size: 0.6rem; font-weight: 700; }
.ui-week-day.present { background: var(--ui-green-light); color: #065f46; }
.ui-week-day.absent { background: var(--ui-red-light); color: #991b1b; }
.ui-week-day.vacation { background: var(--ui-blue-light); color: #1e40af; }
.ui-week-label { font-size: 0.55rem; text-transform: uppercase; opacity: 0.7; }
.ui-week-status { font-size: 0.65rem; }
/* financial rows */
.ui-fin-row { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--ui-border); font-family: var(--ui-font); }
.ui-fin-row:last-child { border-bottom: none; padding-bottom: 0; }
.ui-fin-row.total { padding-top: 1.25rem; margin-top: 0.25rem; border-top: 2px solid var(--ui-border); border-bottom: none; }
.ui-fin-label { font-weight: 600; color: var(--ui-muted); font-size: 0.9rem; }
.ui-fin-row.total .ui-fin-label { color: var(--ui-text); font-weight: 800; font-size: 1.05rem; }
.ui-fin-value { font-weight: 700; color: var(--ui-text); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ui-fin-row.total .ui-fin-value { font-size: 1.35rem; font-weight: 900; color: var(--ui-green); }
.ui-fin-value.negative { color: var(--ui-red); }
/* setup checklist */
.ui-checklist { background: var(--ui-surface); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); border: 1px solid var(--ui-border); border-left: 4px solid var(--ui-accent); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; font-family: var(--ui-font); }
.ui-checklist-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; gap: 1rem; }
.ui-checklist-title { font-size: 1rem; font-weight: 800; color: var(--ui-text); margin: 0 0 0.5rem 0; display: flex; align-items: center; gap: 6px; }
.ui-checklist-title i { color: var(--ui-accent); }
.ui-progress-wrap { display: flex; align-items: center; gap: 0.75rem; }
.ui-progress { height: 6px; background: var(--ui-border); border-radius: 3px; flex: 1; min-width: 120px; overflow: hidden; }
.ui-progress-fill { height: 100%; background: var(--ui-accent); border-radius: 3px; transition: width 0.5s ease; }
.ui-progress-count { font-size: 0.75rem; color: var(--ui-muted); white-space: nowrap; font-weight: 700; }
.ui-checklist-items { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; }
.ui-checklist-items li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; padding: 4px 0; font-weight: 600; }
.ui-checklist-items li i { font-size: 1.1rem; color: var(--ui-border-strong); }
.ui-checklist-items li.done i { color: var(--ui-green); }
.ui-checklist-done { color: var(--ui-muted); text-decoration: line-through; }
.ui-checklist-link { color: var(--ui-accent); text-decoration: none; font-weight: 700; }
.ui-checklist-link:hover { text-decoration: underline; }
.ui-warning-box h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.ui-warning-box p { margin: 0.25rem 0 0; }
.ui-warning-box.ui-row-box { display: flex; align-items: center; gap: 1rem; }
.ui-warning-box.ui-row-box > i { font-size: 1.75rem; color: var(--ui-amber-strong); }
@media (max-width: 1400px) { .ui-two-col { grid-template-columns: 1fr; } }
@media (max-width: 992px) { .ui-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .ui-stat-grid { gap: 0.75rem; } .ui-stat { padding: 1rem 1.1rem; } .ui-stat-value { font-size: 1.75rem; } .ui-chart { height: 220px; } .ui-checklist-items { grid-template-columns: 1fr; } .ui-page-head h1 { font-size: 1.5rem; } }
.ui-muted { color: var(--ui-muted); }
.ui-faint { color: var(--ui-faint); }
.ui-strong { font-weight: 800; }
.ui-mono { font-variant-numeric: tabular-nums; }
.ui-stack { display: flex; flex-direction: column; gap: 1rem; }
.ui-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ui-grow { flex: 1; min-width: 0; }