/**
 * Snug Network — Booking Workflow Styles (v2 Design System)
 *
 * Uses design tokens from snug-tokens.css. Both booking list and
 * booking detail pages now use the .snug-dash container, so most
 * layout comes from snug-dashboard-v2.css. This file handles
 * booking-specific components only.
 */

/* ── Back link ─────────────────────────────────────────── */
.snug-booking__back-link {
    display: inline-block;
    margin-top: var(--snug-space-2, 8px);
    margin-bottom: var(--snug-space-3, 12px);
    font-size: var(--snug-text-sm, 14px);
    color: var(--snug-accent, #d97706);
    text-decoration: none;
    font-weight: var(--snug-weight-medium, 500);
}
.snug-booking__back-link:hover {
    text-decoration: underline;
    color: var(--snug-accent-hover, #b45309);
}

/* ── View link ─────────────────────────────────────────── */
.snug-booking__view-link {
    color: var(--snug-accent, #d97706);
    font-weight: var(--snug-weight-semibold, 600);
    text-decoration: none;
    font-size: var(--snug-text-sm, 14px);
}
.snug-booking__view-link:hover {
    text-decoration: underline;
    color: var(--snug-accent-hover, #b45309);
}

/* ── Summary bar ───────────────────────────────────────── */
.snug-booking__summary {
    margin-top: var(--snug-space-3, 12px);
    padding: var(--snug-space-3, 12px) var(--snug-space-4, 16px);
    background: var(--snug-bg-subtle, #f8f8f6);
    border-radius: var(--snug-radius, 8px);
    font-size: var(--snug-text-sm, 14px);
    color: var(--snug-text, #1a1a2e);
}

/* ── Status Timeline ───────────────────────────────────── */
.snug-booking__timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--snug-space-6, 24px) 0;
    padding: 0 var(--snug-space-5, 20px);
    position: relative;
}
.snug-booking__timeline::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: var(--snug-border, #e5e7eb);
    z-index: 0;
}
.snug-booking__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}
.snug-booking__dot {
    width: 24px;
    height: 24px;
    border-radius: var(--snug-radius-full, 9999px);
    background: var(--snug-border, #e5e7eb);
    border: 3px solid var(--snug-border, #e5e7eb);
    transition: all var(--snug-transition, 150ms ease);
}
.snug-booking__dot--active {
    background: var(--snug-accent, #d97706);
    border-color: var(--snug-accent, #d97706);
}
.snug-booking__dot--completed {
    background: var(--snug-success, #059669);
    border-color: var(--snug-success, #059669);
}
.snug-booking__dot--error {
    background: var(--snug-error, #dc2626);
    border-color: var(--snug-error, #dc2626);
}
.snug-booking__step-label {
    margin-top: var(--snug-space-2, 8px);
    font-size: var(--snug-text-xs, 12px);
    color: var(--snug-text-muted, #6b7280);
    text-align: center;
    max-width: 80px;
}

/* ── Info Grid (detail page) ───────────────────────────── */
.snug-booking__info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--snug-space-6, 24px);
}
.snug-booking__info-card {
    background: var(--snug-bg-card, #ffffff);
    padding: var(--snug-space-6, 24px);
    border-radius: var(--snug-radius, 8px);
    border: 1px solid var(--snug-border, #e5e7eb);
}
.snug-booking__info-heading {
    margin: 0 0 var(--snug-space-4, 16px);
    font-size: var(--snug-text-base, 16px);
    font-weight: var(--snug-weight-semibold, 600);
    color: var(--snug-text, #1a1a2e);
}
.snug-booking__dl {
    margin: 0;
}
.snug-booking__dl dt {
    font-weight: var(--snug-weight-semibold, 600);
    color: var(--snug-text-muted, #6b7280);
    font-size: var(--snug-text-xs, 12px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.snug-booking__dl dd {
    margin: 0 0 var(--snug-space-4, 16px);
    color: var(--snug-text, #1a1a2e);
    font-size: var(--snug-text-sm, 14px);
}
.snug-booking__dl dd a {
    color: var(--snug-accent, #d97706);
    text-decoration: none;
    font-weight: var(--snug-weight-medium, 500);
}
.snug-booking__dl dd a:hover {
    text-decoration: underline;
}

/* ── Notes ─────────────────────────────────────────────── */
.snug-booking__notes-display {
    white-space: pre-wrap;
    font-size: var(--snug-text-sm, 14px);
    color: var(--snug-text-muted, #6b7280);
    margin-bottom: var(--snug-space-3, 12px);
    padding: var(--snug-space-3, 12px);
    background: var(--snug-bg-card, #ffffff);
    border-radius: var(--snug-radius, 8px);
    border: 1px solid var(--snug-border-light, #f3f4f6);
}
.snug-booking__textarea {
    width: 100%;
    min-height: 80px;
    padding: var(--snug-space-3, 12px);
    border: 1px solid var(--snug-border, #e5e7eb);
    border-radius: var(--snug-radius, 8px);
    resize: vertical;
    font-family: var(--snug-font, sans-serif);
    font-size: var(--snug-text-sm, 14px);
    color: var(--snug-text, #1a1a2e);
    background: var(--snug-bg-card, #ffffff);
    box-sizing: border-box;
}
.snug-booking__textarea:focus {
    outline: none;
    border-color: var(--snug-accent, #d97706);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

/* ── Action Buttons ────────────────────────────────────── */
.snug-booking__actions {
    display: flex;
    gap: var(--snug-space-3, 12px);
    flex-wrap: wrap;
}
.snug-booking__btn {
    padding: var(--snug-space-3, 12px) var(--snug-space-6, 24px);
    border: none;
    border-radius: var(--snug-radius, 8px);
    font-weight: var(--snug-weight-semibold, 600);
    cursor: pointer;
    font-size: var(--snug-text-sm, 14px);
    font-family: var(--snug-font, sans-serif);
    transition: background var(--snug-transition, 150ms ease), color var(--snug-transition, 150ms ease);
}
.snug-booking__btn--review {
    background: var(--snug-info, #2563eb);
    color: #fff;
}
.snug-booking__btn--review:hover {
    background: #1d4ed8;
}
.snug-booking__btn--approve {
    background: var(--snug-success, #059669);
    color: #fff;
}
.snug-booking__btn--approve:hover {
    background: #047857;
}
.snug-booking__btn--decline {
    background: var(--snug-error, #dc2626);
    color: #fff;
}
.snug-booking__btn--decline:hover {
    background: #b91c1c;
}
.snug-booking__btn--create {
    background: var(--snug-accent, #d97706);
    color: #fff;
}
.snug-booking__btn--create:hover {
    background: var(--snug-accent-hover, #b45309);
}
.snug-booking__btn--cancel {
    background: transparent;
    border: 2px solid var(--snug-text-light, #9ca3af);
    color: var(--snug-text-muted, #6b7280);
}
.snug-booking__btn--cancel:hover {
    background: var(--snug-text-light, #9ca3af);
    color: #fff;
}
.snug-booking__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Status badge overrides for booking statuses ───────── */
.snug-dash__badge--pending          { background: var(--snug-warning-bg, #fffbeb); color: var(--snug-accent-text, #92400e); }
.snug-dash__badge--under_review     { background: var(--snug-info-bg, #eff6ff); color: var(--snug-info, #2563eb); }
.snug-dash__badge--approved         { background: #dbeafe; color: #1e40af; }
.snug-dash__badge--declined         { background: var(--snug-error-bg, #fef2f2); color: var(--snug-error, #dc2626); }
.snug-dash__badge--artist_confirmed { background: var(--snug-success-bg, #ecfdf5); color: var(--snug-success, #059669); }
.snug-dash__badge--artist_declined  { background: var(--snug-warning-bg, #fffbeb); color: var(--snug-accent-text, #92400e); }
.snug-dash__badge--show_created     { background: var(--snug-success-bg, #ecfdf5); color: var(--snug-success, #059669); }
.snug-dash__badge--cancelled        { background: var(--snug-bg-subtle, #f8f8f6); color: var(--snug-text-muted, #6b7280); }
.snug-dash__badge--processed        { background: #dbeafe; color: #1e40af; }
.snug-dash__badge--confirmed        { background: var(--snug-success-bg, #ecfdf5); color: var(--snug-success, #059669); }

/* ── Artist Response Form (booking response page) ──────── */
.snug-booking-response-form {
    background: var(--snug-bg-card, #ffffff);
    padding: var(--snug-space-6, 24px);
    border-radius: var(--snug-radius, 8px);
    border: 1px solid var(--snug-border, #e5e7eb);
    margin-top: var(--snug-space-6, 24px);
}
.snug-booking-response-form h3 {
    margin-top: 0;
    margin-bottom: var(--snug-space-4, 16px);
    color: var(--snug-text, #1a1a2e);
}
.snug-booking-response-form textarea {
    width: 100%;
    min-height: 80px;
    padding: var(--snug-space-3, 12px);
    border: 1px solid var(--snug-border, #e5e7eb);
    border-radius: var(--snug-radius, 8px);
    resize: vertical;
    font-family: var(--snug-font, sans-serif);
    font-size: var(--snug-text-sm, 14px);
    box-sizing: border-box;
    color: var(--snug-text, #1a1a2e);
    background: var(--snug-bg-card, #ffffff);
}
.snug-booking-response-form textarea:focus {
    outline: none;
    border-color: var(--snug-accent, #d97706);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}
.response-buttons {
    display: flex;
    gap: var(--snug-space-4, 16px);
    margin-top: var(--snug-space-4, 16px);
}
.snug-booking-confirm {
    background: var(--snug-success, #059669);
    color: #fff;
    padding: var(--snug-space-3, 12px) var(--snug-space-8, 32px);
    border: none;
    border-radius: var(--snug-radius, 8px);
    font-weight: var(--snug-weight-semibold, 600);
    font-size: var(--snug-text-base, 16px);
    cursor: pointer;
}
.snug-booking-confirm:hover {
    background: #047857;
}
.snug-booking-decline {
    background: transparent;
    border: 2px solid var(--snug-error, #dc2626);
    color: var(--snug-error, #dc2626);
    padding: var(--snug-space-3, 12px) var(--snug-space-8, 32px);
    border-radius: var(--snug-radius, 8px);
    font-weight: var(--snug-weight-semibold, 600);
    font-size: var(--snug-text-base, 16px);
    cursor: pointer;
}
.snug-booking-decline:hover {
    background: var(--snug-error, #dc2626);
    color: #fff;
}

/* Confirmed / Declined Message */
.snug-booking-confirmed-msg {
    padding: var(--snug-space-5, 20px);
    border-radius: var(--snug-radius, 8px);
    text-align: center;
    margin-top: var(--snug-space-6, 24px);
}
.snug-booking-confirmed-msg.confirmed {
    background: var(--snug-success-bg, #ecfdf5);
    color: var(--snug-success, #059669);
}
.snug-booking-confirmed-msg.declined {
    background: var(--snug-error-bg, #fef2f2);
    color: var(--snug-error, #dc2626);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 600px) {
    .snug-booking__info-grid {
        grid-template-columns: 1fr;
    }
    .snug-booking__timeline {
        padding: 0 var(--snug-space-2, 8px);
    }
    .snug-booking__timeline::before {
        left: 20px;
        right: 20px;
    }
    .snug-booking__step-label {
        font-size: 10px;
    }
    .snug-booking__actions {
        flex-direction: column;
    }
    .response-buttons {
        flex-direction: column;
    }
}