/* ============================================================
   3vya app-specific styles — builds on liquid-glass.css
   ============================================================ */

/* HTMX swaps replace content in #main-workspace; keep .page always visible */
.page { display: block !important; }

/* Fade the workspace during HTMX swaps */
#main-workspace { transition: opacity 180ms ease; }
#main-workspace.htmx-swapping { opacity: 0; }
#main-workspace.htmx-settling { opacity: 1; }

/* ── Forms ── */
input, select, textarea {
    background: var(--glass-white);
    border: 1px solid var(--glass-border);
    color: var(--color-text);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    width: 100%;
    font-size: var(--text-md);
    font-family: var(--font-body);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-aqua);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}
select { appearance: none; }
label { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin: 12px 0 4px; }

/* Tables (global, matches .table) */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
thead th { text-align: left; color: var(--color-text-muted); font-weight: 500; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px; border-bottom: 1px solid var(--glass-border-subtle); }
tbody td { padding: 12px; border-bottom: 1px solid var(--glass-border-subtle); color: var(--color-text); }
tbody tr:hover { background: var(--glass-white); }
tbody tr:last-child td { border-bottom: none; }

/* ── Status badge colours (map app statuses to glass accents) ── */
.badge.Draft, .badge.draft, .badge.inactive, .badge.archived { background: var(--glass-white); color: var(--color-text-muted); }
.badge.Accepted, .badge.Paid, .badge.completed, .badge.active, .badge.confirmed, .badge.fresh { background: rgba(52, 211, 153, 0.16); color: var(--accent-lime); }
.badge.Invoiced, .badge.Sent, .badge.pre_production, .badge.inuse { background: rgba(45, 212, 191, 0.16); color: var(--accent-aqua); }
.badge.pending, .badge.Overdue, .badge.on_hold, .badge.Processing, .badge.used { background: rgba(251, 191, 36, 0.16); color: var(--accent-amber); }
.badge.in_progress, .badge.post_production { background: rgba(147, 164, 184, 0.18); color: var(--accent-violet); }
.badge.Cancelled, .badge.Rejected, .badge.cancelled, .badge.rejected, .badge.lost, .badge.damaged, .badge.Unpaid { background: rgba(112, 122, 134, 0.16); color: var(--accent-rose); }

/* ── Wizard ── */
.step-indicator { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); }
.step { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); }
.step-circle { width: 30px; height: 30px; border-radius: 50%; background: var(--glass-white); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); border: 1px solid var(--glass-border); transition: all var(--dur-fast); }
.step.active .step-circle { background: var(--accent-aqua); color: #04231c; border-color: var(--accent-aqua); box-shadow: var(--shadow-glow); }
.step.completed .step-circle { background: var(--accent-lime); color: #04231c; border-color: var(--accent-lime); }
.step.active .step-label { color: var(--color-text); }
.wizard-panel { background: var(--glass-white); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-lg); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); }
.adder-row { display: flex; gap: var(--space-sm); margin-bottom: var(--space-sm); align-items: center; }
.equip-search-wrap { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.equip-search { max-width: 340px; }
.equip-search-hint { font-size: var(--text-xs); color: var(--accent-amber, #fbbf24); }
.wizard-table { width: 100%; margin-top: var(--space-md); font-size: var(--text-sm); border-collapse: collapse; }
.wizard-table th, .wizard-table td { padding: 8px; border-bottom: 1px solid var(--glass-border-subtle); text-align: left; }
.internal-line { display: flex; gap: var(--space-md); align-items: center; padding: 4px 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.hint { color: var(--color-text-muted); font-size: var(--text-xs); margin: 6px 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.breakdown { background: var(--glass-white); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: var(--space-md); margin-top: var(--space-md); }
.breakdown-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--text-sm); }
.breakdown-row.total { border-top: 1px solid var(--glass-border-subtle); margin-top: 6px; padding-top: 12px; font-size: var(--text-base); color: var(--accent-aqua); font-weight: 600; }
.breakdown-row.muted { color: var(--color-text-muted); }
.wizard-buttons { display: flex; justify-content: space-between; margin-top: var(--space-lg); }

/* ── Job card ── */
.job-card { display: flex; gap: var(--space-md); justify-content: space-between; align-items: flex-start; background: var(--glass-white); border: 1px solid var(--glass-border); border-left: 3px solid var(--accent-aqua); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-sm); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); transition: transform var(--dur-fast) var(--ease-liquid), box-shadow var(--dur-fast); }
.job-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-glass); }

/* ── Category picker card ── */
.cat-card { display: flex; align-items: center; justify-content: center; padding: 1.5rem; border-radius: var(--radius-md); background: var(--glass-white); border: 1px solid var(--glass-border); color: var(--color-text-muted); font-size: var(--text-base); cursor: pointer; transition: all var(--dur-fast) var(--ease-liquid); }
.cat-card:hover { border-color: var(--glass-border-bright); transform: translateY(-2px); }
.cat-card.selected { background: rgba(45, 212, 191, 0.16); color: var(--accent-aqua); border-color: var(--accent-aqua); box-shadow: var(--shadow-glow); }

/* ── Equipment type filter chips (builder line-item picker) ── */
.type-filter { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--glass-white); border: 1px solid var(--glass-border); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: all var(--dur-fast) var(--ease-liquid); }
.chip:hover { border-color: var(--glass-border-bright); }
.chip.selected { background: rgba(45, 212, 191, 0.16); color: var(--accent-aqua); border-color: var(--accent-aqua); }

/* ── Stat box (payroll summary) ── */
.stat-box { background: var(--glass-white); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: var(--space-md); backdrop-filter: var(--blur-md); }
.stat-box span { display: block; color: var(--color-text-muted); font-size: var(--text-xs); margin-bottom: 6px; }
.stat-box strong { font-size: var(--text-xl); font-weight: 600; color: var(--accent-aqua); }

/* ── Tooltip (empty-package prompt) ── */
.tooltip { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.35); color: var(--accent-amber); font-size: var(--text-sm); }
.tooltip a { color: var(--accent-aqua); text-decoration: underline; }

/* ── Buttons (plain → primary, .ghost → secondary) ── */
button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--accent-aqua), var(--accent-violet));
    color: #0a0b0d; border: none; padding: 10px 16px; border-radius: var(--radius-sm);
    cursor: pointer; font-size: var(--text-sm); font-weight: 600; font-family: var(--font-body);
    transition: transform var(--dur-fast) var(--ease-liquid), box-shadow var(--dur-fast), filter var(--dur-fast);
}
button:hover { transform: translateY(-1px); box-shadow: var(--shadow-glass); filter: brightness(1.05); }
button:active { transform: translateY(0); }
button.ghost {
    background: var(--glass-white); color: var(--color-text); border: 1px solid var(--glass-border);
    font-weight: 500;
}
button.ghost:hover { border-color: var(--glass-border-bright); box-shadow: none; }

/* ── Calendar ── */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-day { min-height: 88px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border-subtle); padding: 6px; background: var(--glass-white); font-size: var(--text-xs); }
.calendar-day.today { border-color: var(--accent-aqua); }
.calendar-day .day-num { color: var(--color-text-muted); }
.calendar-day .event-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; }
.ev-booking { background: var(--accent-aqua); }
.ev-job { background: var(--accent-violet); }
.ev-payroll { background: var(--accent-amber); }
.ev-leave { background: var(--accent-rose); }

/* ── Equipment carousel (partials/equipment-carousel.blade.php) ──
   Renders only when an item has an image; otherwise the partial emits nothing.
   Track translates by (100/count)% per slide: with each card at flex:0 0 100%
   the track is `count` viewports wide, so that offset is exactly one card. */
.equip-carousel { position: relative; max-width: 720px; margin: var(--space-lg) auto; }
.equip-carousel__viewport { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--glass-border); background: var(--glass-dark); box-shadow: var(--shadow-glass); }
.equip-carousel__track { display: flex; transition: transform var(--dur-mid) var(--ease-smooth); }
.equip-carousel__card { flex: 0 0 100%; min-width: 0; }
.equip-carousel__img { display: block; width: 100%; height: 200px; object-fit: cover; background: var(--glass-white); }
.equip-carousel__body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.equip-carousel__type { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-aqua); font-weight: 700; margin-bottom: 4px; }
.equip-carousel__name { font-size: var(--text-lg); color: var(--color-text); font-weight: 700; }
.equip-carousel__rate { margin-top: 6px; font-size: var(--text-sm); color: var(--accent-amber); }

.equip-carousel__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--glass-white-md); color: var(--color-text);
    border: 1px solid var(--glass-border-bright); cursor: pointer;
    font-size: var(--text-base); z-index: var(--z-raised);
    box-shadow: var(--shadow-float);
}
.equip-carousel__nav--prev { left: -14px; }
.equip-carousel__nav--next { right: -14px; }
.equip-carousel__nav:hover { border-color: var(--accent-aqua); color: var(--accent-aqua); }

.equip-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-sm); }
.equip-carousel__dot {
    width: 8px; height: 8px; padding: 0; border-radius: 50%;
    background: var(--glass-white-md); border: 1px solid var(--glass-border);
    cursor: pointer; transform: none;
}
.equip-carousel__dot.is-active { background: var(--accent-aqua); border-color: var(--accent-aqua); }
.equip-carousel__dot:hover { transform: none; box-shadow: none; filter: none; }