/* ──────────────────────────────────────────────────────────────────────────
   Saree Costing & Margin Calculator — Trade Tools
   Shares the visual language of saree-meter-to-piece-rate-calculator.css so
   the Trade Tools cluster reads as one product family.
   Mobile-first: every interactive control is at least 44px tall.
   ────────────────────────────────────────────────────────────────────────── */

/* Segmented buttons: language / pricing mode / text choice ----------------- */
.scm-lang-btn,
.scm-mode-btn,
.scm-text-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.10);
    color: #52525b;
    -webkit-tap-highlight-color: transparent;
}

html.dark .scm-lang-btn,
html.dark .scm-mode-btn,
html.dark .scm-text-btn {
    background: rgba(24, 24, 27, 0.8);
    border-color: rgba(255, 255, 255, 0.10);
    color: #a1a1aa;
}

.scm-lang-btn:hover,
.scm-mode-btn:hover,
.scm-text-btn:hover {
    border-color: rgba(245, 158, 11, 0.45);
    color: #b45309;
}

html.dark .scm-lang-btn:hover,
html.dark .scm-mode-btn:hover,
html.dark .scm-text-btn:hover {
    color: #fbbf24;
}

.scm-lang-btn.is-active,
.scm-mode-btn.is-active,
.scm-text-btn.is-active {
    background: linear-gradient(135deg, #f59e0b, #f43f5e);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 18px -8px rgba(244, 63, 94, 0.65);
}

.scm-lang-btn.is-active {
    /* The language chips sit inside a tinted track, so they stay flat. */
    background: #f59e0b;
    box-shadow: none;
}

.scm-mode-btn.is-active {
    transform: translateY(-1px);
}

/* The "price only" choice is the safe one — mark it green when selected so the
   owner can see at a glance that no cost data is in the text. */
#scm-text-price.is-active {
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 6px 18px -8px rgba(16, 185, 129, 0.7);
}

/* On/off switch (bulk mode) ----------------------------------------------- */
.scm-switch {
    background: #d4d4d8;
}

html.dark .scm-switch {
    background: #3f3f46;
}

.scm-switch.is-on {
    background: linear-gradient(135deg, #f59e0b, #f43f5e);
}

.scm-switch .scm-switch-knob {
    transform: translateX(0);
}

.scm-switch.is-on .scm-switch-knob {
    transform: translateX(24px);
}

/* Range sliders (wastage, margin) ----------------------------------------- */
.scm-range {
    accent-color: #f59e0b;
    height: 28px;
    cursor: pointer;
    background: transparent;
}

.scm-range:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 4px;
}

/* Stacked breakdown bar ---------------------------------------------------- */
.scm-bar {
    display: flex;
    width: 100%;
    height: 22px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

html.dark .scm-bar {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.scm-bar-seg {
    display: block;
    height: 100%;
    min-width: 2px;
    transition: width 0.25s ease-out;
}

.scm-bar-seg + .scm-bar-seg {
    border-left: 1px solid rgba(255, 255, 255, 0.55);
}

html.dark .scm-bar-seg + .scm-bar-seg {
    border-left-color: rgba(0, 0, 0, 0.35);
}

/* Light-mode label colours on the saturated action buttons -----------------
   app.css rewrites `text-white` to a dark colour inside glass cards in light
   mode (its FAQ-accordion fix). These buttons sit on a gradient, a solid
   emerald fill and a solid dark fill, where a dark label is unreadable. */
html:not(.dark) #scm-review-btn,
html:not(.dark) #scm-review-btn span,
html:not(.dark) #scm-review-btn i,
html:not(.dark) #scm-copy-btn,
html:not(.dark) #scm-copy-btn span,
html:not(.dark) #scm-copy-btn i,
html:not(.dark) #scm-download-btn,
html:not(.dark) #scm-download-btn span,
html:not(.dark) #scm-download-btn i {
    color: #ffffff !important;
}

html:not(.dark) #scm-download-btn {
    background-color: #18181b !important;
}

/* Focus visibility for keyboard users ------------------------------------- */
.scm-lang-btn:focus-visible,
.scm-mode-btn:focus-visible,
.scm-text-btn:focus-visible,
.scm-switch:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

/* Disabled "Check & Share" state (no cost entered yet) --------------------- */
#scm-review-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

/* Long rupee figures must never push the result card sideways on a phone. */
#scm-out-sp {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Trade-style figures read better without desktop spinner arrows. */
.scm-money::-webkit-outer-spin-button,
.scm-money::-webkit-inner-spin-button,
#scm-wastage::-webkit-outer-spin-button,
#scm-wastage::-webkit-inner-spin-button,
#scm-margin::-webkit-outer-spin-button,
#scm-margin::-webkit-inner-spin-button,
#scm-qty::-webkit-outer-spin-button,
#scm-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.scm-money,
#scm-wastage,
#scm-margin,
#scm-qty {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* The review panel is the confirm-before-send gate — make its arrival
   noticeable without being loud. */
#scm-review-panel:not([hidden]) {
    animation: scm-review-in 0.22s ease-out;
}

@keyframes scm-review-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    #scm-review-panel:not([hidden]) { animation: none; }
    .scm-mode-btn.is-active { transform: none; }
    .scm-bar-seg { transition: none; }
}

/* Narrow phones: the mode and text-choice buttons need room for the longer
   Hindi and Gujarati labels. */
@media (max-width: 380px) {
    .scm-mode-btn,
    .scm-text-btn {
        font-size: 11px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Loss state ---------------------------------------------------------------
   A negative profit shown in profit-green is misleading at a glance, which is
   exactly the mistake this cluster exists to prevent. When the price does not
   clear the cost, the profit tiles flip to the loss palette.

   The html:not(.dark) / html.dark prefixes are load-bearing: app.css rewrites
   [class*="bg-emerald-500/"] to a solid emerald in light mode with !important,
   and a bare .scm-tile.is-loss loses to that on specificity. */
html:not(.dark) .scm-tile.is-loss {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
}

html.dark .scm-tile.is-loss {
    background: rgba(244, 63, 94, 0.12) !important;
    border-color: rgba(244, 63, 94, 0.35) !important;
}

html:not(.dark) .scm-tile.is-loss .scm-tile-label,
html:not(.dark) .scm-tile.is-loss .scm-tile-value {
    color: #be123c !important;
}

html.dark .scm-tile.is-loss .scm-tile-label,
html.dark .scm-tile.is-loss .scm-tile-value {
    color: #fda4af !important;
}