/* ITOS Smart Sales — panel styles.
 *
 * The state colours are load-bearing, not decoration. A seller must be able to tell
 * at a glance the difference between "nothing is due" (grey, calm) and "this section
 * failed to load" (red, alarming) — because those two facts look identical if you
 * only count rows, and acting on the second as if it were the first loses a sale.
 */

.itos-ss-panel {
    border: 1px solid #d0d7de;
    border-radius: 6px;
    margin: 12px 0;
    background: #fff;
    font-size: 0.92em;
}

.itos-ss-head {
    padding: 8px 12px;
    background: #f6f8fa;
    border-bottom: 1px solid #d0d7de;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.itos-ss-head:hover { background: #eef2f6; }

.itos-ss-chevron { font-size: 0.8em; transition: transform 0.15s; }
.itos-ss-chevron.collapsed { transform: rotate(-90deg); }

.itos-ss-sub { color: #57606a; font-weight: normal; }

.itos-ss-body { padding: 10px 12px; }
.itos-ss-body.collapsed { display: none; }

.itos-ss-sec { margin-bottom: 14px; }
.itos-ss-sec h4 { margin: 0 0 6px; font-size: 0.95em; color: #24292f; }

/* ── The four states. Each one LOOKS different because each one MEANS
      something different. ─────────────────────────────────────────────── */

/* AVAILABLE but empty: a real, healthy "nothing to show". */
.itos-ss-state.itos-ss-ok      { color: #57606a; font-style: italic; }

/* INSUFFICIENT_HISTORY: not a failure. The customer is just new. */
.itos-ss-state.itos-ss-thin    { color: #7d4e00; background: #fff8e5; padding: 6px 8px; border-radius: 4px; }

/* UNAVAILABLE: a blocker. The data does not exist in this ERP. */
.itos-ss-state.itos-ss-blocked { color: #57606a; background: #f0f3f6; padding: 6px 8px; border-radius: 4px; }

/* ERROR: the engine broke. NEVER let this look like "0 results". */
.itos-ss-state.itos-ss-error   { color: #a40e26; background: #fff0f1; padding: 6px 8px;
                                 border-radius: 4px; border-left: 3px solid #cf222e; font-weight: 600; }

.itos-ss-unavailable {
    padding: 10px 12px;
    color: #a40e26;
    background: #fff0f1;
    border-left: 3px solid #cf222e;
}

.itos-ss-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.itos-ss-table th, .itos-ss-table td { padding: 4px 6px; border-bottom: 1px solid #eaeef2; text-align: left; }
.itos-ss-table th { font-weight: 600; color: #57606a; font-size: 0.9em; }
.itos-ss-table td.r, .itos-ss-table th.r { text-align: right; }
.itos-ss-table tr:hover { background: #f6f8fa; }

.itos-ss-ref  { font-family: monospace; color: #57606a; font-size: 0.9em; }
.itos-ss-qty  { text-align: right; }
.itos-ss-money { white-space: nowrap; }

.itos-ss-up   { color: #a40e26; }   /* price went UP since they last bought */
.itos-ss-down { color: #1a7f37; }   /* price went DOWN */
.itos-ss-warn { color: #9a6700; font-weight: 600; }

.itos-ss-badge { padding: 1px 6px; border-radius: 10px; font-size: 0.8em; font-weight: 700; }
.itos-ss-badge.itos-ss-overdue { background: #ffebe9; color: #cf222e; }
.itos-ss-badge.itos-ss-due     { background: #fff8c5; color: #7d4e00; }
.itos-ss-badge.itos-ss-ok      { background: #dafbe1; color: #1a7f37; }

/* Stock. STOCK_UNKNOWN is GREY, not red — the vans have no stock rows at all, and
   telling a van seller his full van is empty is worse than telling him nothing. */
.itos-ss-instock { color: #1a7f37; }
.itos-ss-low     { color: #9a6700; font-weight: 600; }
.itos-ss-out     { color: #cf222e; font-weight: 700; }
.itos-ss-unknown { color: #8c959f; font-style: italic; }

/* HISTORY-based vs MANUALLY-configured recommendations are tagged differently.
   "Customers also bought this" is a measurement; "same category" is a filing
   decision. The seller is entitled to know which one they are looking at. */
.itos-ss-tag { padding: 1px 5px; border-radius: 3px; font-size: 0.78em; font-weight: 600; }
.itos-ss-tag.itos-ss-hist   { background: #ddf4ff; color: #0969da; }
.itos-ss-tag.itos-ss-manual { background: #f0f3f6; color: #57606a; }

.itos-ss-ev   { color: #8c959f; font-size: 0.85em; }
.itos-ss-why  { white-space: nowrap; }
.itos-ss-foot { color: #57606a; font-size: 0.85em; margin: 4px 0 0; }

.itos-ss-actions { padding-top: 8px; border-top: 1px solid #eaeef2; }
.itos-ss-note    { color: #57606a; font-size: 0.85em; margin-left: 10px; }

.itos-ss-carton, .itos-ss-disc { margin: 4px 0; padding-left: 18px; }