/* RAS component layer.
 *
 * Everything here already existed in the app — as 2.800 `style="…"`
 * attributes typed by hand inside template literals, plus per-domain copies
 * (.ship-btn, .inb-btn, .emt-*). This file is the shared version: one place
 * to change a button, a table row or a status badge.
 *
 * Rules:
 *  - Purely additive. It redefines no existing selector, so nothing that
 *    already renders can change until markup opts in by using a class.
 *  - Every value comes from tokens.css. No raw hex in this file.
 *  - Genuinely dynamic values (a computed hsl per ladder step, a bar width
 *    from a percentage) stay inline. Components are for the repeated shell,
 *    not for data-driven paint.
 *  - New markup uses these classes. Existing screens migrate one module at a
 *    time — see Specs/45_design-system.md.
 *
 * Live reference: /components
 */

/* ============================ Text ================================== */

/* The single most repeated inline style in the app (11px/12px + --ras-muted,
   ~60 literal copies): counts, timestamps, "3 of 12", helper lines. */
.ras-meta {
    font-size: var(--ras-fs-xs);
    color: var(--ras-muted);
    line-height: 1.45;
}
.ras-meta--sm { font-size: var(--ras-fs-sm); }

/* Uppercase micro-label that opens a group of fields or a detail block. */
.ras-eyebrow {
    font-size: var(--ras-fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ras-muted);
}

.ras-title {
    font-size: var(--ras-fs-xl);
    font-weight: 700;
    color: var(--ras-green);
}
.ras-subtitle {
    font-size: var(--ras-fs-base);
    font-weight: 600;
    color: var(--ras-ink);
}
.ras-body { font-size: var(--ras-fs-base); color: var(--ras-text); line-height: 1.5; }
.ras-error { font-size: var(--ras-fs-sm); color: var(--ras-danger); }

/* ============================ Layout ================================ */

.ras-row { display: flex; align-items: center; gap: var(--ras-space-2); }
.ras-row--wrap { flex-wrap: wrap; }
.ras-row--top { align-items: flex-start; }
.ras-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--ras-space-2); }
.ras-stack { display: flex; flex-direction: column; gap: var(--ras-space-2); }
.ras-stack--tight { gap: var(--ras-space-1); }
.ras-stack--loose { gap: var(--ras-space-4); }
.ras-grow { flex: 1; min-width: 0; }

/* ============================ Buttons =============================== */

.ras-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--ras-control-h);
    padding: 0 var(--ras-space-4);
    border: 1px solid var(--ras-line-strong);
    border-radius: var(--ras-radius);
    background: var(--ras-surface);
    color: var(--ras-text);
    font-family: var(--ras-font);
    font-size: var(--ras-fs-base);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ras-btn:hover { border-color: var(--ras-green); color: var(--ras-green); background: var(--ras-green-softer); }
.ras-btn:active { transform: scale(0.985); }
.ras-btn:disabled, .ras-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    border-color: var(--ras-line);
    color: var(--ras-muted-soft);
    background: var(--ras-surface);
}

.ras-btn--primary {
    background: var(--ras-green);
    border-color: var(--ras-green);
    color: var(--ras-on-dark);
}
.ras-btn--primary:hover { background: var(--ras-green-hover); border-color: var(--ras-green-hover); color: var(--ras-on-dark); }

.ras-btn--danger { border-color: var(--ras-danger); color: var(--ras-danger); }
.ras-btn--danger:hover { background: var(--ras-danger-soft); border-color: var(--ras-danger); color: var(--ras-danger); }

/* Borderless: toolbar actions, "Clear", the × next to a chip. */
.ras-btn--ghost { border-color: transparent; background: transparent; }
.ras-btn--ghost:hover { background: var(--ras-green-softer); border-color: transparent; }

.ras-btn--sm { height: 28px; padding: 0 10px; font-size: var(--ras-fs-xs); }
.ras-btn--lg { height: 46px; padding: 0 var(--ras-space-5); font-size: var(--ras-fs-md); }
.ras-btn--block { display: flex; width: 100%; }

/* Shop-floor tablets: 44px is the smallest reliable tap target on iOS. */
.ras-btn--touch { height: var(--ras-control-h-touch); font-size: var(--ras-fs-md); }

/* ============================ Fields ================================ */

.ras-field { display: flex; flex-direction: column; gap: 5px; }
.ras-label {
    font-size: var(--ras-fs-sm);
    font-weight: 600;
    color: var(--ras-text);
}
.ras-label__req { color: var(--ras-danger); margin-left: 2px; }
.ras-hint { font-size: var(--ras-fs-xs); color: var(--ras-muted); }

.ras-input, .ras-select, .ras-textarea {
    width: 100%;
    min-height: var(--ras-control-h);
    padding: 8px 10px;
    border: 1px solid var(--ras-line-strong);
    border-radius: var(--ras-radius);
    background: var(--ras-surface);
    color: var(--ras-ink);
    font-family: var(--ras-font);
    font-size: var(--ras-fs-md);
    box-sizing: border-box;
}
.ras-textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.ras-input:focus, .ras-select:focus, .ras-textarea:focus {
    outline: none;
    border-color: var(--ras-green);
    box-shadow: 0 0 0 2px var(--ras-green-soft);
}
.ras-input::placeholder, .ras-textarea::placeholder { color: var(--ras-muted-soft); }
.ras-input:disabled, .ras-select:disabled, .ras-textarea:disabled {
    background: var(--ras-paper-2);
    color: var(--ras-muted);
    cursor: not-allowed;
}
.ras-input--invalid, .ras-select--invalid, .ras-textarea--invalid { border-color: var(--ras-danger); }

/* ============================ Surfaces ============================== */

.ras-card {
    background: var(--ras-surface);
    border: 1px solid var(--ras-line);
    border-radius: var(--ras-radius);
    padding: var(--ras-space-4);
    box-shadow: var(--ras-shadow-card);
}
.ras-card--flat { box-shadow: none; }
.ras-card--inset { background: var(--ras-paper-2); box-shadow: none; }
.ras-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ras-space-2);
    margin-bottom: var(--ras-space-3);
}

/* Soft green call-out: "Operating: Forklift 7", banners, summaries. */
.ras-note {
    background: var(--ras-green-soft);
    border: 1px solid var(--ras-green-line);
    border-left: 3px solid var(--ras-green);
    border-radius: var(--ras-radius);
    padding: 10px var(--ras-space-3);
    font-size: var(--ras-fs-base);
    color: var(--ras-green-deep);
}
.ras-note--warn { background: var(--ras-warn-soft); border-color: var(--ras-warn); border-left-color: var(--ras-warn); color: var(--ras-warn-strong); }
.ras-note--danger { background: var(--ras-danger-soft); border-color: var(--ras-danger); border-left-color: var(--ras-danger); color: var(--ras-danger); }

.ras-empty {
    padding: var(--ras-space-6) var(--ras-space-4);
    text-align: center;
    color: var(--ras-muted);
    font-size: var(--ras-fs-base);
    background: var(--ras-paper-2);
    border: 1px dashed var(--ras-line-strong);
    border-radius: var(--ras-radius);
}

/* ============================ Badges ================================ */

.ras-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--ras-radius-pill);
    background: var(--ras-paper-3);
    color: var(--ras-muted);
    border: 1px solid transparent;
    font-size: var(--ras-fs-xs);
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
}
.ras-badge--ok { background: var(--ras-ok-soft); color: var(--ras-green-deep); }
.ras-badge--warn { background: var(--ras-warn-soft); color: var(--ras-warn-strong); }
.ras-badge--danger { background: var(--ras-danger-soft); color: var(--ras-danger); }
.ras-badge--info { background: var(--ras-info-soft); color: var(--ras-info); }
.ras-badge--solid { background: var(--ras-green); color: var(--ras-on-dark); }
/* Not decided yet / placeholder — reads as provisional, not as a status. */
.ras-badge--draft {
    background: transparent;
    border: 1px dashed currentColor;
    border-radius: var(--ras-radius);
    color: inherit;
    opacity: 0.8;
    font-size: var(--ras-fs-micro);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Removable chip: a PO number, an extra email recipient, a tag filter. */
.ras-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--ras-line-strong);
    border-radius: var(--ras-radius);
    background: var(--ras-surface);
    font-size: var(--ras-fs-sm);
    color: var(--ras-text);
}
.ras-chip--active { border-color: var(--ras-green); background: var(--ras-green-soft); color: var(--ras-green-deep); }
.ras-chip__x { cursor: pointer; color: var(--ras-muted); font-weight: 700; line-height: 1; }
.ras-chip__x:hover { color: var(--ras-danger); }

/* ============================ Tabs ================================== */

.ras-tabs {
    display: flex;
    gap: var(--ras-space-1);
    border-bottom: 1px solid var(--ras-line);
    flex-wrap: wrap;
}
.ras-tab {
    padding: 8px var(--ras-space-3);
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--ras-muted);
    font-family: var(--ras-font);
    font-size: var(--ras-fs-base);
    font-weight: 600;
    cursor: pointer;
}
.ras-tab:hover { color: var(--ras-text); }
.ras-tab.is-active { color: var(--ras-green); border-bottom-color: var(--ras-green); }

/* Segmented control: the Table / Insights / Report switch. */
.ras-segment { display: inline-flex; border: 1px solid var(--ras-line-strong); border-radius: var(--ras-radius); overflow: hidden; }
.ras-segment > button {
    padding: 6px var(--ras-space-3);
    border: none;
    background: var(--ras-surface);
    color: var(--ras-text);
    font-family: var(--ras-font);
    font-size: var(--ras-fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.ras-segment > button + button { border-left: 1px solid var(--ras-line-strong); }
.ras-segment > button.is-active { background: var(--ras-green); color: var(--ras-on-dark); }

/* ============================ Table ================================= */

.ras-table { width: 100%; border-collapse: collapse; font-size: var(--ras-fs-sm); }
.ras-table th {
    padding: 9px 10px;
    text-align: left;
    background: var(--ras-paper-3);
    border-bottom: 1px solid var(--ras-line);
    color: var(--ras-muted);
    font-size: var(--ras-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.ras-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ras-line-soft);
    color: var(--ras-text);
    vertical-align: top;
}
.ras-table tbody tr:hover td { background: var(--ras-green-softer); }
.ras-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ras-table--compact td { padding: 6px 8px; }
/* Wide tables scroll inside their own box; the modal body must not. */
.ras-table-wrap { overflow-x: auto; border: 1px solid var(--ras-line); border-radius: var(--ras-radius); background: var(--ras-surface); }

/* ============================ Tiles ================================= */

.ras-tilegrid { display: flex; flex-wrap: wrap; gap: 10px; }
.ras-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 0 150px;
    min-width: 150px;
    padding: var(--ras-space-3);
    border: 1px solid var(--ras-line);
    border-radius: var(--ras-radius);
    background: var(--ras-surface);
    text-align: left;
    cursor: pointer;
    font-family: var(--ras-font);
    transition: border-color 0.15s, background 0.15s;
}
.ras-tile:hover { border-color: var(--ras-green); background: var(--ras-green-softer); }
.ras-tile__name { font-size: var(--ras-fs-base); font-weight: 700; color: var(--ras-ink); }
.ras-tile__desc { font-size: var(--ras-fs-xs); color: var(--ras-muted); }

/* ============================ Stat ================================== */

.ras-stat { display: flex; flex-direction: column; gap: 2px; }
.ras-stat__value { font-size: 22px; font-weight: 700; color: var(--ras-green); font-variant-numeric: tabular-nums; }
.ras-stat__label { font-size: var(--ras-fs-xs); color: var(--ras-muted); text-transform: uppercase; letter-spacing: 0.4px; }

/* Selected state for a button acting as a toggle: a filter, a track picker,
   a forklift number. Same fill as --primary so "chosen" reads identically
   everywhere. */
.ras-btn.is-active {
    background: var(--ras-green);
    border-color: var(--ras-green);
    color: var(--ras-on-dark);
}
.ras-btn.is-active:hover { background: var(--ras-green-hover); border-color: var(--ras-green-hover); color: var(--ras-on-dark); }
/* A button that stacks a label over a sub-label needs its own height. */
.ras-btn--stacked { height: auto; min-height: var(--ras-control-h); padding-top: 7px; padding-bottom: 7px; }
.ras-btn__sub { display: block; font-size: 10px; font-weight: 400; opacity: 0.75; }

/* Neutral call-out: an explanation, not a status. */
.ras-note--muted {
    background: var(--ras-paper-2);
    border-color: var(--ras-line);
    border-left-color: var(--ras-line-strong);
    color: var(--ras-muted);
    font-size: var(--ras-fs-sm);
}