/* ── Force light color scheme for all form elements ── */
:root {
    color-scheme: light !important;
}

/* ── Global Form Elements — white background ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
textarea,
select {
    background-color: #fff !important;
    color: #1e293b !important;
    color-scheme: light !important;
}

/* ── Date picker icon and popup — force light theme ── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    filter: none !important;
    cursor: pointer;
}

/* ── Select dropdown arrow — force dark icon on white bg ── */
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 12px !important;
    padding-right: 2rem !important;
}

input[type="checkbox"]:not(.sr-only),
input[type="radio"]:not(.sr-only) {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff !important;
    border: 2px solid #cbd5e1 !important;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:not(.sr-only) {
    border-radius: 0.25rem;
}

input[type="radio"]:not(.sr-only) {
    border-radius: 50%;
}

input[type="checkbox"]:not(.sr-only):checked,
input[type="radio"]:not(.sr-only):checked {
    background-color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}

input[type="checkbox"]:not(.sr-only):checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="radio"]:not(.sr-only):checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

/* ── HTMX Loading Indicator ── */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* ── Top Loading Bar Animation ── */
@keyframes loading-progress {
    0%   { width: 0%; }
    20%  { width: 25%; }
    50%  { width: 60%; }
    80%  { width: 85%; }
    100% { width: 95%; }
}

.loading-bar {
    animation: loading-progress 2s ease-in-out infinite;
}

/* ── Pulsing Status Dots ── */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse-dot {
    animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Skeleton loading placeholder ── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

/* ════════════════════════════════════════════════════════════════════
   Command-center theme components (top bar + sidebar nav + buttons).
   Plain CSS so the look is defined ONCE and works with the Tailwind CDN.
   ════════════════════════════════════════════════════════════════════ */

/* ── Global top bar ── */
.topbar {
    height: 4rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;      /* slate-200 */
    display: flex;
    align-items: stretch;                  /* let the logo cell fill height for its right border */
    flex-shrink: 0;
    z-index: 40;
}
/* Logo cell — same width as the sidebar so logo sits directly above it,
   forming one continuous left column. */
.topbar-brand {
    width: 16rem;                          /* = sidebar w-64 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    border-right: 1px solid #e2e8f0;
}
.topbar-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
}
.topbar-search {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    background: #f8fafc;                    /* slate-50 */
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    font-size: 0.875rem;
    color: #1e293b;
    transition: all 0.15s ease;
}
.topbar-search:focus {
    outline: none;
    background: #fff;
    border-color: #38bdf8;                  /* sky-400 */
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}
.topbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;                         /* slate-600 */
    background: #fff;
}

/* ── Sidebar sections + items + 2-letter badges ── */
.nav-section {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #94a3b8;                         /* slate-400 */
    padding: 0.25rem 0.75rem;
    margin-top: 0.9rem;
    margin-bottom: 0.2rem;
}
.nav-section:first-child { margin-top: 0.25rem; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.6rem;
    color: #334155;                         /* slate-700 */
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}
.nav-item:hover { background: #f1f5f9; color: #0f172a; }
.nav-item.active { background: #f0f9ff; color: #0369a1; font-weight: 600; }  /* sky-50 / sky-700 */

.nav-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: #f1f5f9;                     /* slate-100 */
    color: #64748b;                         /* slate-500 */
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: all 0.15s ease;
}
.nav-item:hover .nav-badge { background: #e2e8f0; color: #334155; }
.nav-item.active .nav-badge {
    background: #0ea5e9;                     /* sky-500 */
    color: #fff;
    box-shadow: 0 1px 3px rgba(14, 165, 233, 0.45);
}

/* ── Sidebar line-art icons (replace 2-letter badges) ── */
.nav-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: #64748b;                         /* slate-500 */
    transition: color 0.15s ease;
}
.nav-item:hover .nav-icon { color: #334155; }
.nav-item.active .nav-icon { color: #0369a1; }  /* sky-700 */

/* ── Hover-expand collapsible sidebar ──
   The <aside class="sidebar-hover"> reserves only an icon-rail width in the
   flex layout; the inner .sidebar-panel overlays the main area and widens on
   hover — and on :focus-within, so keyboard users tabbing into the nav get
   the expanded state too — without ever reflowing the page content.
   Pure CSS: no JS state to re-init after hx-boost body swaps. */
.sidebar-hover {
    position: relative;
    width: 4.5rem;                          /* icon rail */
    flex-shrink: 0;
    z-index: 40;
}
.sidebar-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4.5rem;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #e2e8f0;        /* slate-200 */
    overflow: hidden;
    transition: width 0.2s ease, box-shadow 0.2s ease;
}
.sidebar-hover:hover .sidebar-panel,
.sidebar-hover:focus-within .sidebar-panel {
    width: 16rem;                           /* = former w-64 */
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
/* Collapsed labels must clip, never trigger a horizontal scrollbar. */
.sidebar-panel nav { overflow-x: hidden; }
/* Labels, section headings, and footer meta fade out in the rail state but
   keep their box height so rows don't shift vertically while expanding.
   The text stays in the DOM (opacity only), so screen readers still read it. */
.sidebar-panel .nav-item > span,
.sidebar-panel .nav-section,
.sidebar-panel .sidebar-fade {
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.sidebar-hover:hover .nav-item > span,
.sidebar-hover:hover .nav-section,
.sidebar-hover:hover .sidebar-fade,
.sidebar-hover:focus-within .nav-item > span,
.sidebar-hover:focus-within .nav-section,
.sidebar-hover:focus-within .sidebar-fade {
    opacity: 1;
}

/* ── Dark primary action button (reference "Start next actions") ── */
.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #0f172a;                     /* slate-900 */
    color: #fff;
    padding: 0.55rem 1rem;
    border-radius: 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
}
.btn-dark:hover { background: #1e293b; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25); }

/* ── Line clamp + "See more" expand (table free-text cells) ── */
.clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* Defined AFTER the clamps so it wins when both are present (expanded state). */
.clamp-none { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* ── Allocation card tones ── one accent color per recovery position,
   shared by the top-accent bar and the active/selected highlight. ── */
.tone-total       { --tone: #0ea5e9; --tone-soft: #f0f9ff; }  /* brand sky */
.tone-active      { --tone: #0ea5e9; --tone-soft: #f0f9ff; }  /* sky */
.tone-unreachable { --tone: #f59e0b; --tone-soft: #fffbeb; }  /* amber */
.tone-commitments { --tone: #10b981; --tone-soft: #ecfdf5; }  /* emerald */
.tone-disputed    { --tone: #8b5cf6; --tone-soft: #f5f3ff; }  /* violet */
.tone-settlement  { --tone: #14b8a6; --tone-soft: #f0fdfa; }  /* teal */
.tone-legal       { --tone: #dc2626; --tone-soft: #fef2f2; }  /* red */

/* Tone top-accent bar drawn as a pinned pseudo-element (NOT a border), so the
   card keeps a normal 1px border on all sides — the selection ring then wraps
   the card cleanly instead of colliding with a thick top border. */
.card-accent-top { position: relative; overflow: hidden; }
.card-accent-top::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--tone, #0ea5e9);
    z-index: 1;
}

/* KPI stat card surface: plain white with neutral slate borders — the only
   per-position color is the top-accent bar (.card-accent-top). Kept as its own
   class (rather than Tailwind utilities inline) so the accent bar, inset panel,
   and selection ring stay coordinated in one place. */
.tone-card {
    /* position + clip so the top-accent bar and the active underline (both
       drawn as pinned pseudo-elements) stay anchored to the card edges and
       follow its rounded corners. */
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-color: #e2e8f0;  /* slate-200 */
}
.tone-card:hover { border-color: #cbd5e1;  /* slate-300 */ }
/* Card title: neutral dark slate (matches the reference layout). */
.tone-card .tone-title { color: #334155;  /* slate-700 */ }
/* Inset AMOUNT/CASES panel: white with a hairline slate border/divider and a
   faint grey CASES cell. */
.tone-card .tone-inset { background: #ffffff; border-color: #e2e8f0; }
.tone-card .tone-inset .tone-divider { border-color: #e2e8f0; }
.tone-card .tone-inset .tone-cases { background: #f8fafc;  /* slate-50 */ }

/* Sum card ("Total Outstanding") keeps a soft sky wash + border so it reads as
   the "=" total, distinct from the plain-white position cards. */
.tone-card-sum { background: #f0f9ff;  /* sky-50 */ border-color: #bae6fd;  /* sky-200 */ }
.tone-card-sum:hover { border-color: #7dd3fc;  /* sky-300 */ }
.tone-card-sum .tone-title { color: #334155;  /* slate-700 */ }
.tone-card-sum .tone-inset .tone-cases { background: #f8fafc;  /* slate-50 */ }

/* Active/selected card (reference design): a soft sky-50 body wash, a light
   sky-200 border (NOT a heavy all-around ring), and a single thick sky bar on
   the BOTTOM edge — the "active tab" treatment. The bar is a pinned
   pseudo-element so it never shifts layout; drawn as ::after (bottom) so it does
   not collide with the position cards' top accent (::before). */
.tone-card.is-active {
    background: #f0f9ff;  /* sky-50 */
    border-color: #bae6fd;  /* sky-200 */
}
.tone-card.is-active:hover { border-color: #7dd3fc;  /* sky-300 */ }
.tone-card.is-active::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: #0284c7;  /* sky-600 */
    z-index: 2;
}