/**
 * Payment → Instalment allocation popup
 * =====================================
 *
 * Shared chrome for the three places an accountant distributes an inward
 * across a DR's instalments:
 *   - Create Inward  → save-confirmation modal
 *   - Edit Inward    → save-confirmation modal
 *   - View Inward / Inwards table → "Allocate to Instalments" action
 *
 * All three render through App\Filament\Concerns\BuildsAllocationSchema,
 * so this file is the single place their look is defined.
 *
 * Previously each modal inlined its own `style="background:#eff6ff…"`,
 * which meant hard-coded white panels that stayed white in dark mode.
 * Growmore runs dark mode daily, so every rule here carries a `.dark`
 * variant.
 *
 * @since Follow-up I (2026-08-23)
 */

/* ------------------------------------------------------------------ */
/* Context tiles — Payment #, DR, Banked, DR total, outstanding, date  */
/* ------------------------------------------------------------------ */

.is-alloc-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 640px) {
    .is-alloc-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.is-alloc-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    min-width: 0;
}

.dark .is-alloc-card {
    background: rgb(255 255 255 / 4%);
    border-color: rgb(255 255 255 / 10%);
}

.is-alloc-card-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .is-alloc-card-label {
    color: #9ca3af;
}

.is-alloc-card-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    margin-top: 0.15rem;
    word-break: break-word;
}

.dark .is-alloc-card-value {
    color: #f3f4f6;
}

/* Tone modifiers — used to make an outstanding balance read as money
   still owed rather than as neutral metadata. */
.is-alloc-card-value.is-positive { color: #047857; }
.dark .is-alloc-card-value.is-positive { color: #6ee7b7; }

.is-alloc-card-value.is-warning { color: #b45309; }
.dark .is-alloc-card-value.is-warning { color: #fcd34d; }

.is-alloc-card-value.is-danger { color: #b91c1c; }
.dark .is-alloc-card-value.is-danger { color: #fca5a5; }

/* ------------------------------------------------------------------ */
/* Banners — intro, shared rules note, live sum check                  */
/* ------------------------------------------------------------------ */

.is-alloc-note {
    padding: 0.6rem 0.9rem;
    border-left: 4px solid;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.is-alloc-note + .is-alloc-note {
    margin-top: 0.5rem;
}

.is-alloc-note strong {
    font-weight: 600;
}

.is-alloc-note--info {
    background: #eff6ff;
    border-color: #1e40af;
    color: #1e3a8a;
}

.dark .is-alloc-note--info {
    background: rgb(59 130 246 / 12%);
    border-color: #60a5fa;
    color: #bfdbfe;
}

.is-alloc-note--muted {
    background: #f3f4f6;
    border-color: #6b7280;
    color: #374151;
}

.dark .is-alloc-note--muted {
    background: rgb(255 255 255 / 5%);
    border-color: #9ca3af;
    color: #d1d5db;
}

.is-alloc-note--warning {
    background: #fefce8;
    border-color: #eab308;
    color: #78350f;
}

.dark .is-alloc-note--warning {
    background: rgb(234 179 8 / 12%);
    border-color: #facc15;
    color: #fde68a;
}

.is-alloc-note--success {
    background: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
}

.dark .is-alloc-note--success {
    background: rgb(16 185 129 / 12%);
    border-color: #34d399;
    color: #a7f3d0;
}

.is-alloc-note--danger {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}

.dark .is-alloc-note--danger {
    background: rgb(239 68 68 / 12%);
    border-color: #f87171;
    color: #fecaca;
}

/* The shared "how this works" note that replaced the per-row helper
   text repeated under every allocation input. */
.is-alloc-rules {
    font-size: 0.8rem;
}

.is-alloc-rules ul {
    margin: 0.35rem 0 0;
    padding-left: 1.05rem;
    list-style: disc;
}

.is-alloc-rules li + li {
    margin-top: 0.15rem;
}

/* ------------------------------------------------------------------ */
/* Row header — instalment title + coverage bubble                     */
/* ------------------------------------------------------------------ */

/* Rendered from Repeater::itemLabel(), which passes an Htmlable through
   Blade unescaped. The heading element Filament wraps this in is inline,
   so the flex row lives on our own span. */
.is-alloc-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.is-alloc-row-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "(billed 5,500.00 less 1,100.00 credited)" — quieter than the payable
   figure it explains, so the eye lands on what the client actually owes. */
.is-alloc-row-note {
    font-weight: 400;
    font-size: 0.75rem;
    color: #6b7280;
}

.dark .is-alloc-row-note {
    color: #9ca3af;
}

.is-alloc-bubble {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Dot before the text so the state survives a monochrome print and does
   not rely on hue alone. */
.is-alloc-bubble::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: currentColor;
}

/* Fully covered */
.is-alloc-bubble--paid {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.dark .is-alloc-bubble--paid {
    background: rgb(16 185 129 / 15%);
    border-color: rgb(16 185 129 / 35%);
    color: #6ee7b7;
}

/* Part-covered — shows exactly how much is still short */
.is-alloc-bubble--partial {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.dark .is-alloc-bubble--partial {
    background: rgb(245 158 11 / 15%);
    border-color: rgb(245 158 11 / 35%);
    color: #fcd34d;
}

/* Nothing allocated to this instalment yet */
.is-alloc-bubble--unpaid {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.dark .is-alloc-bubble--unpaid {
    background: rgb(239 68 68 / 15%);
    border-color: rgb(239 68 68 / 35%);
    color: #fca5a5;
}

/* ==========================================================================
   Coverage table — "What is covering this DR"
   ==========================================================================
   Every inward and every absorbed credit on the DR, with the arithmetic that
   reconciles them to the outstanding figure. Added 2026-09-03 after the
   popup showed a row "AUD 815.76 short" beside a DR tile reading AUD 773.00
   with nothing on screen explaining the gap.

   Styles live here, not inline, so the .dark variants apply — enforced by
   AllocateToInstalmentsLivewireTest::allocation_popups_share_one_schema_definition.
   ========================================================================== */

.is-alloc-coverage {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 14px 16px;
    background: #f8fafc;
}

.dark .is-alloc-coverage {
    border-color: #334155;
    background: #0f172a;
}

.is-alloc-coverage-title {
    font-size: 0.7rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    font-weight: 700;
}

.dark .is-alloc-coverage-title { color: #94a3b8; }

.is-alloc-coverage table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.is-alloc-coverage th {
    color: #64748b;
    text-align: left;
    font-weight: 600;
    padding: 4px 8px;
}

.dark .is-alloc-coverage th { color: #94a3b8; }

.is-alloc-coverage td { padding: 4px 8px; color: #0f172a; }
.dark .is-alloc-coverage td { color: #e2e8f0; }

.is-alloc-coverage .is-num { text-align: right; }

/* The row the accountant is currently allocating. */
.is-alloc-coverage tr.is-current { background: #eff6ff; }
.dark .is-alloc-coverage tr.is-current { background: rgba(14, 165, 233, 0.12); }

/* A credit note — real, but not money that can be allocated. */
.is-alloc-coverage tr.is-credit td { color: #6b7280; font-style: italic; }
.dark .is-alloc-coverage tr.is-credit td { color: #94a3b8; }

.is-alloc-coverage .is-here    { color: #0369a1; font-weight: 700; font-style: normal; }
.is-alloc-coverage .is-done    { color: #059669; font-style: normal; }
.is-alloc-coverage .is-pending { color: #b45309; font-weight: 700; font-style: normal; }

.dark .is-alloc-coverage .is-here    { color: #7dd3fc; }
.dark .is-alloc-coverage .is-done    { color: #6ee7b7; }
.dark .is-alloc-coverage .is-pending { color: #fcd34d; }

.is-alloc-coverage-sum {
    border-top: 1px dashed #cbd5e1;
    margin-top: 10px;
    padding-top: 8px;
    font-size: 0.78rem;
    color: #475569;
}

.dark .is-alloc-coverage-sum { border-top-color: #334155; color: #94a3b8; }

.is-alloc-coverage-sum strong { color: #0f172a; }
.dark .is-alloc-coverage-sum strong { color: #f1f5f9; }

.is-alloc-coverage-sum .is-outstanding     { color: #b45309; }
.dark .is-alloc-coverage-sum .is-outstanding { color: #fcd34d; }
.is-alloc-coverage-sum .is-settled         { color: #059669; }
.dark .is-alloc-coverage-sum .is-settled     { color: #6ee7b7; }

.is-alloc-coverage-hint { margin-top: 6px; }