/**
 * TicketYA — Install Wizard stylesheet.
 *
 * Standalone — used only by the 5-step wizard, no dependency on the
 * admin or public stylesheets.
 *
 * TABLE OF CONTENTS
 *   1. CSS variables
 *   2. Base resets + page background
 *   3. Wizard shell + header + brand mark
 *   4. Step indicator (1/5 → 5/5)
 *   5. Card (active step container)
 *   6. Checklist (requirements step)
 *   7. Form + inputs
 *   8. Buttons
 *   9. Alerts (errors / warnings)
 *  10. Finish screen
 *  11. Footer
 *  12. Responsive (≤ 600px)
 *
 * @package TicketYA\Assets\Install
 */


/* ════ 1. CSS variables ═══════════════════════════════════════════ */
:root {
    --ty-primary:      #4F46E5;
    --ty-primary-dark: #4338CA;
    --ty-bg:           #F5F5FA;
    --ty-card:         #FFFFFF;
    --ty-text:         #111827;
    --ty-muted:        #6B7280;
    --ty-border:       #E5E7EB;
    --ty-success:      #10B981;
    --ty-error:        #DC2626;
    --ty-warn:         #F59E0B;
    --ty-radius:       10px;
    --ty-shadow:       0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);
    --ty-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}


/* ════ 2. Base resets + page background ═══════════════════════════ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--ty-font);
    color: var(--ty-text);
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(79, 70, 229, 0.07), transparent 60%),
        var(--ty-bg);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.5;
}


/* ════ 3. Wizard shell + header + brand mark ══════════════════════ */
.ty-install {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px 32px;
}
.ty-install__header { margin-bottom: 32px; }
.ty-install__brand  { display: flex; align-items: center; gap: 14px; }
.ty-install__mark {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ty-primary), var(--ty-primary-dark));
    color: #fff;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}
.ty-install__brand h1 { margin: 0; font-size: 22px; font-weight: 700; }
.ty-install__brand p  { margin: 2px 0 0; color: var(--ty-muted); font-size: 13px; }


/* ════ 4. Step indicator (--active = current, --done = completed) ═ */
.ty-install__steps {
    display: flex; gap: 6px;
    background: #fff;
    padding: 10px;
    border-radius: var(--ty-radius);
    border: 1px solid var(--ty-border);
    margin-bottom: 20px;
    overflow-x: auto;
}
.ty-step {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    color: var(--ty-muted);
}
.ty-step__num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ty-border);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 600;
}
.ty-step--active                 { background: rgba(79, 70, 229, 0.08); color: var(--ty-primary); }
.ty-step--active .ty-step__num   { background: var(--ty-primary); }
.ty-step--done                   { color: var(--ty-success); }
.ty-step--done .ty-step__num     { background: var(--ty-success); }


/* ════ 5. Card (active step container) ════════════════════════════ */
.ty-install__card {
    background: var(--ty-card);
    border: 1px solid var(--ty-border);
    border-radius: var(--ty-radius);
    box-shadow: var(--ty-shadow);
    padding: 32px;
}
.ty-card__title { margin: 0 0 6px;  font-size: 22px; font-weight: 700; }
.ty-card__sub   { margin: 0 0 24px; color: var(--ty-muted); }


/* ════ 6. Checklist (--ok = green, --fail = red) ══════════════════ */
.ty-checklist { list-style: none; padding: 0; margin: 0 0 24px; }
.ty-checklist__item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--ty-border);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}
.ty-checklist__item--ok    { border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.04); }
.ty-checklist__item--fail  { border-color: rgba(220,  38, 38, 0.4); background: rgba(220,  38, 38, 0.05); }
.ty-checklist__icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
    color: #fff;
}
.ty-checklist__item--ok   .ty-checklist__icon { background: var(--ty-success); }
.ty-checklist__item--fail .ty-checklist__icon { background: var(--ty-error); }


/* ════ 7. Form + inputs ═══════════════════════════════════════════ */
.ty-form { display: flex; flex-direction: column; gap: 16px; }
.ty-form__row { display: flex; flex-direction: column; gap: 6px; }
.ty-form__row label { font-size: 13px; font-weight: 600; color: var(--ty-text); }
.ty-form__row input[type="text"],
.ty-form__row input[type="email"],
.ty-form__row input[type="password"],
.ty-form__row select {
    border: 1px solid var(--ty-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ty-form__row input[type="color"] {
    width: 60px; height: 36px;
    border: 1px solid var(--ty-border);
    border-radius: 8px;
    padding: 2px;
    background: #fff;
}
.ty-form__row input:focus,
.ty-form__row select:focus {
    border-color: var(--ty-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.ty-form__hint { color: var(--ty-muted); font-size: 12px; }


/* ════ 8. Buttons ═════════════════════════════════════════════════ */
.ty-actions { margin-top: 24px; display: flex; gap: 12px; }
.ty-btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px; font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    font-family: inherit;
}
.ty-btn--primary         { background: var(--ty-primary); color: #fff; }
.ty-btn--primary:hover   { background: var(--ty-primary-dark); }
.ty-btn--primary:active  { transform: translateY(1px); }
.ty-btn--ghost           { background: transparent; color: var(--ty-text); border-color: var(--ty-border); }
.ty-btn--ghost:hover     { background: #F9FAFB; }


/* ════ 9. Alerts ══════════════════════════════════════════════════ */
.ty-alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
}
.ty-alert--error { background: rgba(220,  38, 38, 0.08); color: var(--ty-error); border: 1px solid rgba(220,  38, 38, 0.25); }
.ty-alert--warn  { background: rgba(245, 158, 11, 0.08); color: var(--ty-warn);  border: 1px solid rgba(245, 158, 11, 0.25); }


/* ════ 10. Finish screen ══════════════════════════════════════════ */
.ty-finish { text-align: center; }
.ty-finish__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--ty-success);
    color: #fff;
    font-size: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.ty-finish__grid {
    display: flex; gap: 12px;
    justify-content: center;
    margin: 28px 0;
    flex-wrap: wrap;
}
.ty-finish__hints {
    text-align: left;
    background: #F9FAFB;
    border: 1px solid var(--ty-border);
    border-radius: 8px;
    padding: 16px 20px;
    font-size: 13px;
    color: var(--ty-muted);
}
.ty-finish__hints li   { margin-bottom: 6px; }
.ty-finish__hints code {
    background: #fff;
    border: 1px solid var(--ty-border);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    color: var(--ty-text);
}


/* ════ 11. Footer ═════════════════════════════════════════════════ */
.ty-install__footer {
    text-align: center;
    margin-top: 24px;
    color: var(--ty-muted);
    font-size: 12px;
}


/* ════ 12. Responsive ═════════════════════════════════════════════ */
@media (max-width: 600px) {
    .ty-install         { padding: 24px 12px; }
    .ty-install__card   { padding: 20px; }
    .ty-install__steps  { padding: 8px; }
    .ty-step__label     { display: none; }
}