/* Sales Profit Tracker — thin layer over Tailwind Play CDN.
 * Only put rules here that Tailwind utilities express awkwardly.
 */

[x-cloak] {
    display: none !important;
}

/* Hide rows filtered out by the client-side search. !important defeats any
 * stray `display:` set by other styles or sticky-column rules. */
.is-hidden {
    display: none !important;
}

/* ---------- Base resets ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01" 1, "cv11" 1;
}

/* Tabular numbers helper (Tailwind has tabular-nums but kept as a class for
 * legacy markup). */
.tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Scrollbar polish on WebKit / Blink */
.spt-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.spt-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.spt-scroll::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
    background-clip: padding-box;
    border: 2px solid transparent;
}

.spt-scroll {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

/* Focus polish — softer than browser default but accessible. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.2);
    border-radius: 6px;
}

/* Native selects: clearer chevron when using appearance-none else Tailwind handles utility */
select:not([class*='appearance-none']) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 12px;
    padding-right: 2rem;
}

/* Micro fade-in for newly revealed regions */
@keyframes spt-soft-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.soft-in {
    animation: spt-soft-in 0.35s ease-out both;
}

/* Mobile sticky first column for wide tables. Mark a wrapper with
 * `.spt-sticky-first` and give the wrapper `overflow-x: auto`. */
@media (max-width: 767.98px) {
    .spt-sticky-first {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .spt-sticky-first table th:first-child,
    .spt-sticky-first table td:first-child {
        position: sticky;
        left: 0;
        z-index: 4;
        background: #ffffff;
        box-shadow: 4px 0 8px rgba(15, 23, 42, 0.04);
    }
    .spt-sticky-first table thead th:first-child {
        z-index: 6;
    }

    /* First four columns stay visible while scrolling (sales sheets). */
    .spt-sticky-first-4 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .spt-sticky-first-4 table th:nth-child(1),
    .spt-sticky-first-4 table td:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 4;
        min-width: 2.25rem;
        background: #ffffff;
        box-shadow: 4px 0 8px rgba(15, 23, 42, 0.04);
    }
    .spt-sticky-first-4 table th:nth-child(2),
    .spt-sticky-first-4 table td:nth-child(2) {
        position: sticky;
        left: 2.25rem;
        z-index: 4;
        min-width: 5.5rem;
        background: #ffffff;
        box-shadow: 4px 0 8px rgba(15, 23, 42, 0.04);
    }
    .spt-sticky-first-4 table th:nth-child(3),
    .spt-sticky-first-4 table td:nth-child(3) {
        position: sticky;
        left: 7.75rem;
        z-index: 4;
        min-width: 8.5rem;
        background: #ffffff;
        box-shadow: 4px 0 8px rgba(15, 23, 42, 0.04);
    }
    .spt-sticky-first-4 table th:nth-child(4),
    .spt-sticky-first-4 table td:nth-child(4) {
        position: sticky;
        left: 16.25rem;
        z-index: 4;
        min-width: 6rem;
        background: #ffffff;
        box-shadow: 4px 0 8px rgba(15, 23, 42, 0.04);
    }
    .spt-sticky-first-4 table thead th:nth-child(-n + 4) {
        z-index: 6;
    }
}

/* Sticky table head under the app bar. Apply via class. */
.spt-thead-sticky thead th {
    position: sticky;
    top: 56px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 -1px 0 #e5e7eb;
    z-index: 5;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Sparkline soft */
.spark-line {
    color: #9ca3af;
    opacity: 0.7;
}

/* Saved tick fade */
.saved-tick {
    opacity: 0;
    transition: opacity 0.18s ease;
}

.saved-tick.is-visible {
    opacity: 1;
}

/* ---------- Dashboard ambience (views opt-in via class) ---------- */
@keyframes spt-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.spt-dashboard-fade {
    animation: spt-fade-in-up 0.45s ease-out both;
}

.fade-in-up {
    animation: spt-fade-in-up 0.45s ease-out both;
}

.spt-chart-markers circle,
.spt-chart-dot {
    transition: opacity 0.15s ease, fill-opacity 0.15s ease;
}

.spt-area-chart:hover .spt-chart-markers circle,
.spt-area-chart:hover .spt-chart-dot {
    opacity: 1;
    fill-opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
    .spt-dashboard-fade {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .fade-in-up {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Confetti drop (B2). Used by the rep dashboard when monthly target is hit. */
@keyframes spt-confetti-fall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0.95;
    }
    80% {
        opacity: 0.85;
    }
    100% {
        transform: translateY(102vh) rotate(720deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    [style*="spt-confetti-fall"] {
        animation: none !important;
        display: none;
    }
}

/* Very subtle film grain; sits above gradient blobs, below content */
.spt-grain-overlay {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Sales form live preview: margin meter (≤10 red · 10–25 amber · 25–40 green · 40+ elite) */
.spt-pv-meter-bands {
    background: linear-gradient(
        to right,
        #fecaca 0%,
        #fecaca 10%,
        #fde68a 10%,
        #fde68a 25%,
        #86efac 25%,
        #86efac 40%,
        #059669 40%,
        #059669 100%
    );
}

.spt-pv-meter .js-pv-meter-tick {
    z-index: 2;
}

.spt-pv-pct-excellent {
    color: #047857;
}

.spt-pv-meter-pill-excellent {
    background: #d1fae5;
    color: #047857;
}