/* Inventory Valuation page. Filament uses its own CSS build, so this page
   deliberately avoids app-level Tailwind utility classes. */

.iv-page { display: flex; flex-direction: column; gap: 1.25rem; }
.iv-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.iv-hero__identity, .iv-hero__title-row, .iv-validation, .iv-method__header, .iv-check, .iv-change { display: flex; align-items: center; }
.iv-hero__identity { align-items: flex-start; gap: 1rem; }
.iv-hero__icon { display: flex; width: 3rem; height: 3rem; flex: 0 0 3rem; align-items: center; justify-content: center; border: 1px solid rgb(199 210 254); border-radius: 0.75rem; background: rgb(238 242 255); color: rgb(79 70 229); }
.iv-hero__icon svg { width: 1.65rem; height: 1.65rem; }
.iv-hero__title-row { flex-wrap: wrap; gap: 0.6rem; }
.iv-hero__title { color: rgb(17 24 39); font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
.iv-hero__description { max-width: 46rem; margin-top: 0.3rem; color: rgb(107 114 128); font-size: 0.875rem; line-height: 1.5; }
.iv-validation { flex: 0 0 auto; gap: 0.45rem; border: 1px solid rgb(187 247 208); border-radius: 0.65rem; background: rgb(240 253 244); padding: 0.55rem 0.75rem; color: rgb(21 128 61); font-size: 0.8rem; font-weight: 600; }
.iv-validation svg { width: 1.1rem; height: 1.1rem; }

.iv-coverage-warning { display: flex; align-items: flex-start; gap: 1rem; border: 1px solid rgb(253 230 138); border-radius: 0.75rem; background: rgb(255 251 235); padding: 1.15rem; }
.iv-coverage-warning__icon { display: flex; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; align-items: center; justify-content: center; border-radius: 0.65rem; background: rgb(254 243 199); color: rgb(180 83 9); }
.iv-coverage-warning__icon svg { width: 1.5rem; height: 1.5rem; }
.iv-coverage-warning__content { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; }
.iv-coverage-warning__content h2 { color: rgb(120 53 15); font-size: 1rem; font-weight: 700; }
.iv-coverage-warning__content p { color: rgb(146 64 14); font-size: 0.875rem; line-height: 1.5; }

.iv-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
.iv-metric { display: flex; min-width: 0; flex-direction: column; gap: 0.25rem; border: 1px solid rgb(229 231 235); border-radius: 0.7rem; background: rgb(249 250 251); padding: 0.85rem 1rem; }
.iv-metric__label { overflow: hidden; color: rgb(107 114 128); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.iv-metric__value { color: rgb(17 24 39); font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; line-height: 1.25; }

.iv-two-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.iv-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.iv-method { border: 1px solid rgb(229 231 235); border-radius: 0.7rem; background: rgb(255 255 255); padding: 0.9rem; }
.iv-method--active { border-color: rgb(165 180 252); background: rgb(238 242 255); box-shadow: inset 3px 0 0 rgb(79 70 229); }
.iv-method__header { justify-content: space-between; gap: 0.5rem; color: rgb(17 24 39); font-size: 0.875rem; }
.iv-method p { margin-top: 0.5rem; color: rgb(107 114 128); font-size: 0.8rem; line-height: 1.45; }

.iv-checks { display: flex; flex-direction: column; gap: 0.8rem; }
.iv-check { align-items: flex-start; gap: 0.65rem; color: rgb(55 65 81); font-size: 0.84rem; line-height: 1.45; }
.iv-check__icon { display: flex; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; align-items: center; justify-content: center; border-radius: 50%; background: rgb(220 252 231); color: rgb(22 163 74); }
.iv-check__icon svg { width: 0.8rem; height: 0.8rem; }

.iv-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid rgb(229 231 235); border-radius: 0.7rem; }
.iv-table { width: 100%; border-collapse: collapse; font-size: 0.825rem; }
.iv-table th { background: rgb(249 250 251); color: rgb(107 114 128); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.035em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.iv-table th, .iv-table td { padding: 0.7rem 0.85rem; vertical-align: top; }
.iv-table tbody tr + tr { border-top: 1px solid rgb(229 231 235); }
.iv-table tbody tr:hover { background: rgb(249 250 251); }
.iv-table td { color: rgb(75 85 99); }
.iv-table td strong, .iv-product, .iv-number--strong { color: rgb(17 24 39) !important; font-weight: 600; }
.iv-number { font-variant-numeric: tabular-nums; text-align: right !important; white-space: nowrap; }
.iv-nowrap { white-space: nowrap; }
.iv-change { gap: 0.45rem; }
.iv-change > svg { width: 0.9rem; height: 0.9rem; color: rgb(156 163 175); }
.iv-reason { min-width: 16rem; line-height: 1.45; }
.iv-separator { margin: 0 0.25rem; color: rgb(156 163 175); }
.iv-table-note { margin-top: 0.65rem; color: rgb(107 114 128); font-size: 0.75rem; }
.iv-empty { display: flex; min-height: 8rem; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; color: rgb(107 114 128); font-size: 0.825rem; text-align: center; }
.iv-empty > svg { width: 2.25rem; height: 2.25rem; margin-bottom: 0.25rem; color: rgb(156 163 175); }
.iv-empty strong { color: rgb(55 65 81); font-size: 0.875rem; }

.dark .iv-hero__icon { border-color: rgb(49 46 129); background: rgba(79 70 229 / 0.12); color: rgb(165 180 252); }
.dark .iv-hero__title, .dark .iv-metric__value, .dark .iv-method__header, .dark .iv-table td strong, .dark .iv-product, .dark .iv-number--strong, .dark .iv-empty strong { color: rgb(243 244 246) !important; }
.dark .iv-hero__description, .dark .iv-metric__label, .dark .iv-method p, .dark .iv-table td, .dark .iv-table-note, .dark .iv-empty { color: rgb(156 163 175); }
.dark .iv-validation { border-color: rgb(20 83 45); background: rgba(34 197 94 / 0.08); color: rgb(74 222 128); }
.dark .iv-coverage-warning { border-color: rgb(146 64 14); background: rgba(245 158 11 / 0.08); }
.dark .iv-coverage-warning__icon { background: rgba(245 158 11 / 0.15); color: rgb(252 211 77); }
.dark .iv-coverage-warning__content h2 { color: rgb(253 230 138); }
.dark .iv-coverage-warning__content p { color: rgb(252 211 77); }
.dark .iv-metric, .dark .iv-method { border-color: rgb(55 65 81); background: rgba(255 255 255 / 0.035); }
.dark .iv-method--active { border-color: rgb(67 56 202); background: rgba(79 70 229 / 0.12); box-shadow: inset 3px 0 0 rgb(129 140 248); }
.dark .iv-check { color: rgb(209 213 219); }
.dark .iv-check__icon { background: rgba(34 197 94 / 0.12); color: rgb(74 222 128); }
.dark .iv-table-wrap, .dark .iv-table tbody tr + tr { border-color: rgb(55 65 81); }
.dark .iv-table th { background: rgba(255 255 255 / 0.04); color: rgb(156 163 175); }
.dark .iv-table tbody tr:hover { background: rgba(255 255 255 / 0.035); }

@media (max-width: 1023px) { .iv-two-column { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .iv-hero { align-items: flex-start; flex-direction: column; } .iv-coverage-warning { flex-direction: column; } .iv-metrics, .iv-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .iv-metrics, .iv-methods { grid-template-columns: minmax(0, 1fr); } }