/**
 * Agreement Variations — custom View page (resources/views/filament/resources/agreement-variations/pages/view-agreement-variation.blade.php)
 *
 * All classes prefixed `is-variation-*` so they never collide with other
 * modules. Dark mode overrides at the bottom of this file.
 */

/* ───────── Summary card grid (4 columns on desktop, 2 on tablet, 1 on phone) ───────── */
.is-variation-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

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

@media (max-width: 640px) {
    .is-variation-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ───────── Narratives side-by-side on desktop, stacked on mobile ───────── */
.is-variation-narratives-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 768px) {
    .is-variation-narratives-grid {
        grid-template-columns: 1fr;
    }
}

.is-variation-narrative {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgb(55 65 81);
    max-height: 320px;
    overflow-y: auto;
}

.is-variation-narrative p {
    margin: 0 0 0.5rem 0;
}

.is-variation-narrative ul,
.is-variation-narrative ol {
    margin: 0.25rem 0 0.5rem 1.25rem;
    padding: 0;
}

/* ───────── Fee Changes table ───────── */
.is-variation-fee-table-wrap {
    overflow-x: auto;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.5rem;
    background: rgb(255 255 255);
}

.is-variation-fee-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.is-variation-fee-table thead {
    background: rgb(249 250 251);
}

.is-variation-fee-table th {
    padding: 0.6rem 0.875rem;
    text-align: left;
    font-weight: 600;
    color: rgb(75 85 99);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgb(229 231 235);
}

.is-variation-fee-table tbody tr {
    border-top: 1px solid rgb(243 244 246);
    transition: background-color 120ms ease;
}

.is-variation-fee-table tbody tr:first-child {
    border-top: none;
}

.is-variation-fee-table tbody tr:hover {
    background: rgb(249 250 251);
}

.is-variation-fee-table td {
    padding: 0.75rem 0.875rem;
    vertical-align: middle;
    color: rgb(31 41 55);
}

.is-variation-fee-table tfoot td {
    padding: 0.75rem 0.875rem;
    background: rgb(249 250 251);
    border-top: 2px solid rgb(229 231 235);
    font-size: 0.95rem;
}

.is-variation-fee-table-right {
    text-align: right;
}

.is-variation-fee-arrow {
    margin: 0 0.375rem;
    color: rgb(156 163 175);
}

/* ───────── Per-row Type badge ───────── */
.is-variation-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    border: 1px solid transparent;
}

.is-variation-badge-add {
    background: rgb(209 250 229);
    color: rgb(6 95 70);
    border-color: rgb(110 231 183);
}

.is-variation-badge-modify {
    background: rgb(254 243 199);
    color: rgb(146 64 14);
    border-color: rgb(251 191 36);
}

.is-variation-badge-remove {
    background: rgb(254 226 226);
    color: rgb(153 27 27);
    border-color: rgb(252 165 165);
}

.is-variation-badge-gray {
    background: rgb(243 244 246);
    color: rgb(55 65 81);
    border-color: rgb(209 213 219);
}

/* ───────── Signed-delta colors used both inline + in totals row ───────── */
.is-variation-net-positive { color: rgb(5 150 105); }
.is-variation-net-negative { color: rgb(220 38 38); }
.is-variation-net-neutral  { color: rgb(75 85 99); }

/* ───────── Reconciliation action badges ───────── */
.is-variation-recon-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.is-variation-recon-badge-noaction {
    background: rgb(243 244 246);
    color: rgb(75 85 99);
    border-color: rgb(209 213 219);
}

.is-variation-recon-badge-creditnote {
    background: rgb(219 234 254);
    color: rgb(30 64 175);
    border-color: rgb(147 197 253);
}

.is-variation-recon-badge-reissue {
    background: rgb(254 243 199);
    color: rgb(146 64 14);
    border-color: rgb(251 191 36);
}

.is-variation-recon-badge-refund {
    background: rgb(254 226 226);
    color: rgb(153 27 27);
    border-color: rgb(252 165 165);
}

.is-variation-recon-badge-uacredit {
    background: rgb(209 250 229);
    color: rgb(6 95 70);
    border-color: rgb(110 231 183);
}

.is-variation-recon-badge-topup {
    background: rgb(254 243 199);
    color: rgb(146 64 14);
    border-color: rgb(251 191 36);
}

.is-variation-recon-executed {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: rgb(220 252 231);
    color: rgb(22 101 52);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Dark variants */
.dark .is-variation-recon-badge-noaction {
    background: rgba(107, 114, 128, 0.15);
    color: rgb(209 213 219);
    border-color: rgba(107, 114, 128, 0.4);
}

.dark .is-variation-recon-badge-creditnote {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(147 197 253);
    border-color: rgba(59, 130, 246, 0.4);
}

.dark .is-variation-recon-badge-reissue {
    background: rgba(245, 158, 11, 0.15);
    color: rgb(252 211 77);
    border-color: rgba(245, 158, 11, 0.4);
}

.dark .is-variation-recon-badge-refund {
    background: rgba(239, 68, 68, 0.15);
    color: rgb(252 165 165);
    border-color: rgba(239, 68, 68, 0.4);
}

.dark .is-variation-recon-badge-uacredit {
    background: rgba(16, 185, 129, 0.15);
    color: rgb(110 231 183);
    border-color: rgba(16, 185, 129, 0.4);
}

.dark .is-variation-recon-badge-topup {
    background: rgba(245, 158, 11, 0.15);
    color: rgb(252 211 77);
    border-color: rgba(245, 158, 11, 0.4);
}

.dark .is-variation-recon-executed {
    background: rgba(34, 197, 94, 0.2);
    color: rgb(134 239 172);
}

/* ───────── Signers grid (2-up at desktop, 1 column on mobile) ───────── */
.is-variation-signers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .is-variation-signers-grid {
        grid-template-columns: 1fr;
    }
}

/* ───────── Timeline grid (5 columns at desktop, collapses gracefully) ───────── */
.is-variation-timeline-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 1024px) {
    .is-variation-timeline-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

/* ───────── Dark mode overrides ───────── */
.dark .is-variation-narrative {
    color: rgb(209 213 219);
}

.dark .is-variation-fee-table-wrap {
    background: rgb(31 41 55);
    border-color: rgb(55 65 81);
}

.dark .is-variation-fee-table thead {
    background: rgb(17 24 39);
}

.dark .is-variation-fee-table th {
    color: rgb(156 163 175);
    border-bottom-color: rgb(55 65 81);
}

.dark .is-variation-fee-table tbody tr {
    border-top-color: rgb(55 65 81);
}

.dark .is-variation-fee-table tbody tr:hover {
    background: rgb(55 65 81);
}

.dark .is-variation-fee-table td {
    color: rgb(229 231 235);
}

.dark .is-variation-fee-table tfoot td {
    background: rgb(17 24 39);
    border-top-color: rgb(55 65 81);
}

.dark .is-variation-fee-arrow {
    color: rgb(107 114 128);
}

.dark .is-variation-badge-add {
    background: rgba(16, 185, 129, 0.15);
    color: rgb(110 231 183);
    border-color: rgba(16, 185, 129, 0.4);
}

.dark .is-variation-badge-modify {
    background: rgba(245, 158, 11, 0.15);
    color: rgb(252 211 77);
    border-color: rgba(245, 158, 11, 0.4);
}

.dark .is-variation-badge-remove {
    background: rgba(239, 68, 68, 0.15);
    color: rgb(252 165 165);
    border-color: rgba(239, 68, 68, 0.4);
}

.dark .is-variation-net-positive { color: rgb(52 211 153); }
.dark .is-variation-net-negative { color: rgb(248 113 113); }
.dark .is-variation-net-neutral  { color: rgb(156 163 175); }

/* ==========================================================================
   Fee-change previews — the GST breakdown shown while a variation row is
   being drafted. Used by BOTH the split parts panel and the add panel,
   despite the `is-split-` prefix, which predates the second use. Kept
   rather than renamed because a rename that misses one usage leaves an
   unstyled table on a money screen.

   Originally: the split preview.

   Ops enters part amounts EXCLUDING GST and the billing layer adds it when
   the DR is raised, so the two figures used to meet only on the DR itself.
   That is how a 4,290 fee (quoted GST-inclusive) came to be split into parts
   that would have billed 4,719. This table shows both columns side by side
   while the amounts are still being typed.

   Lives here rather than inline because inline colours cannot carry a .dark
   variant, and Growmore works in dark mode daily.
   ========================================================================== */

.is-split-preview {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    background: #ffffff;
    border: 1px solid rgb(229 231 235);
    border-radius: 6px;
}

.is-split-preview th {
    padding: 6px 10px;
    background: rgb(249 250 251);
    color: rgb(100 116 139);
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid rgb(229 231 235);
}

.is-split-preview td {
    padding: 6px 10px;
    border-bottom: 1px solid rgb(229 231 235);
}

.is-split-preview tfoot td {
    background: rgb(249 250 251);
    font-weight: 700;
    border-bottom: none;
}

.is-split-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dark .is-split-preview {
    background: rgb(30 41 59);
    border-color: rgb(51 65 85);
}

.dark .is-split-preview th {
    background: rgb(51 65 85);
    color: rgb(148 163 184);
    border-bottom-color: rgb(71 85 105);
}

.dark .is-split-preview td {
    border-bottom-color: rgb(51 65 85);
}

.dark .is-split-preview tfoot td {
    background: rgb(51 65 85);
}

/* Balance verdict boxes */
.is-split-ok,
.is-split-bad,
.is-split-hint {
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.is-split-ok {
    background: rgb(236 253 245);
    border-left: 4px solid rgb(16 185 129);
    color: rgb(6 95 70);
}

.is-split-bad {
    background: rgb(254 242 242);
    border-left: 4px solid rgb(239 68 68);
    color: rgb(153 27 27);
}

.is-split-hint {
    background: rgb(249 250 251);
    border: 1px dashed rgb(209 213 219);
    border-radius: 6px;
    color: rgb(107 114 128);
}

.dark .is-split-ok {
    background: rgb(6 78 59);
    border-left-color: rgb(52 211 153);
    color: rgb(167 243 208);
}

.dark .is-split-bad {
    background: rgb(127 29 29);
    border-left-color: rgb(248 113 113);
    color: rgb(254 202 202);
}

.dark .is-split-hint {
    background: rgb(30 41 59);
    border-color: rgb(71 85 105);
    color: rgb(148 163 184);
}