/* =========================================================================
   Metro AI Publishing Factory — Components (components.css)
   Reusable UI: buttons, forms, cards, badges, alerts, states.
   ========================================================================= */

/* ---------- Buttons ---------- */
.btn {
    --btn-bg: var(--color-card);
    --btn-color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0 var(--space-5);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--btn-color);
    background: var(--btn-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: transform var(--transition), background var(--transition),
                box-shadow var(--transition), border-color var(--transition);
    text-decoration: none;
    position: relative;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled,
.btn.is-loading {
    cursor: not-allowed;
    opacity: 0.75;
    transform: none;
}

.btn--primary {
    --btn-color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover { box-shadow: var(--shadow-md); }

.btn--secondary {
    --btn-bg: #fff;
    --btn-color: var(--color-text);
    border-color: var(--color-border);
}
.btn--secondary:hover { background: var(--color-bg-soft); }

.btn--ghost {
    --btn-bg: transparent;
    --btn-color: var(--color-text-secondary);
    border-color: transparent;
}
.btn--ghost:hover { background: var(--color-bg-soft); color: var(--color-text); }

.btn--danger {
    --btn-color: #fff;
    border-color: transparent;
    background: var(--color-danger);
}

.btn--sm { min-height: 40px; padding: 0 var(--space-4); font-size: 0.9rem; }
.btn--block { width: 100%; }

.btn__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}
.btn.is-loading .btn__spinner { display: inline-block; }
.btn.is-loading .btn__label { opacity: 0.85; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Forms ---------- */
.form { margin: 0; }
.form-field { margin-bottom: var(--space-4); }

.form-label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-2);
    color: var(--color-text);
}
.form-label .req { color: var(--color-danger); margin-left: 2px; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-icon {
    position: absolute;
    left: var(--space-4);
    color: var(--color-text-secondary);
    pointer-events: none;
    font-size: 1.05rem;
}
.input-wrap:has(.input-icon) .input { padding-left: 44px; }

.input,
.select,
.textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 var(--space-4);
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
}
.textarea { min-height: 110px; padding: var(--space-3) var(--space-4); line-height: 1.6; resize: vertical; }
.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}
.input::placeholder,
.textarea::placeholder { color: #B7B3A6; }

.select-wrap { position: relative; }
.select-wrap::after {
    content: "\F229"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    pointer-events: none;
}
.select { padding-right: 44px; }

.input-action {
    position: absolute;
    right: var(--space-2);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.input-action:hover { background: var(--color-bg-soft); color: var(--color-text); }

.helper-text {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
.field-error {
    display: none;
    margin-top: var(--space-2);
    font-size: 0.85rem;
    color: var(--color-danger);
}
.form-field.has-error .input,
.form-field.has-error .select,
.form-field.has-error .textarea { border-color: var(--color-danger); }
.form-field.has-error .field-error { display: block; }

/* Form sections */
.form-section {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}
.form-section__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.form-section__icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--color-bg-soft);
    color: var(--color-primary-hover);
    font-size: 1.1rem;
}
.form-section__title { margin: 0; font-size: 1.05rem; }
.form-section__desc { margin: 2px 0 0; font-size: 0.85rem; color: var(--color-text-secondary); }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.form-grid .col-span-2 { grid-column: 1 / -1; }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: #fff;
    cursor: pointer;
}
.checkbox input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-primary); }
.checkbox__text { font-size: 0.95rem; }
.checkbox__text small { display: block; color: var(--color-text-secondary); }

/* ---------- Cards ---------- */
.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

/* Stat cards */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.stat-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    font-size: 1.2rem;
    margin-bottom: var(--space-3);
}
.stat-card__icon--total { background: var(--bg-warning); color: var(--color-primary-hover); }
.stat-card__icon--draft { background: #EEECFB; color: var(--color-accent-purple); }
.stat-card__icon--planned { background: var(--bg-success); color: var(--color-success); }
.stat-card__icon--failed { background: var(--bg-danger); color: var(--color-danger); }
.stat-card__value { font-family: var(--font-heading); font-weight: 700; font-size: 1.9rem; line-height: 1; }
.stat-card__label { color: var(--color-text-secondary); font-size: 0.9rem; margin-top: var(--space-2); }

/* Project cards */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}
.project-card {
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.project-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.project-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.project-card__title { margin: 0; font-size: 1.05rem; }
.project-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    margin-bottom: var(--space-4);
}
.project-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.project-card__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.project-card__date { color: var(--color-text-secondary); font-size: 0.8rem; }

/* Data list (detail page) */
.data-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}
.data-list__item .data-list__label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}
.data-list__item .data-list__value { font-weight: 500; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--draft { background: #EEECFB; color: #6B5BD1; }
.badge--planning { background: var(--bg-info); color: #2C7BCB; }
.badge--planned { background: var(--bg-success); color: #2A8F5D; }
.badge--failed { background: var(--bg-danger); color: #C63C3C; }
.badge--neutral { background: var(--color-bg-soft); color: var(--color-text-secondary); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
}

/* ---------- Alerts ---------- */
.flash-stack { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-input);
    border: 1px solid transparent;
    font-size: 0.95rem;
}
.alert i { margin-top: 2px; }
.alert--success { background: var(--bg-success); color: #276749; border-color: #BFE6CF; }
.alert--error { background: var(--bg-danger); color: #A02B2B; border-color: #F3C9C9; }
.alert--info { background: var(--bg-info); color: #285E8E; border-color: #C6E0F5; }
.alert--warning { background: var(--bg-warning); color: #8A5A12; border-color: #F3DCB0; }

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    padding: var(--space-7) var(--space-5);
    background: var(--color-card);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
}
.empty-state__art {
    width: 96px; height: 96px;
    margin: 0 auto var(--space-4);
    border-radius: 28px;
    display: grid; place-items: center;
    font-size: 2.4rem;
    color: var(--color-primary-hover);
    background: radial-gradient(circle at 30% 30%, var(--color-bg-soft), #fff);
    box-shadow: var(--shadow-sm);
}
.empty-state__title { margin: 0 0 var(--space-2); }
.empty-state__text { color: var(--color-text-secondary); max-width: 460px; margin: 0 auto var(--space-5); }

/* ---------- Loading / skeleton ---------- */
.loading-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-secondary);
}
.loading-inline .spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

.skeleton {
    position: relative;
    overflow: hidden;
    background: #F1EEE4;
    border-radius: var(--radius-sm);
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-line { height: 14px; margin-bottom: 10px; }
.skeleton-line--title { height: 20px; width: 60%; }
.skeleton-line--short { width: 40%; }

/* Full-screen processing overlay for AI planning */
.processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    place-items: center;
    padding: var(--space-5);
    background: rgba(36, 36, 36, 0.35);
    backdrop-filter: blur(3px);
}
.processing-overlay.is-active { display: grid; }
.processing-card {
    background: #fff;
    border-radius: var(--radius-card);
    padding: var(--space-6);
    text-align: center;
    max-width: 380px;
    box-shadow: var(--shadow-lg);
}
.processing-card .spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    margin: 0 auto var(--space-4);
    animation: spin 800ms linear infinite;
}
.processing-card__title { margin: 0 0 var(--space-2); }
.processing-card__text { color: var(--color-text-secondary); margin: 0; }

/* ---------- Page cards (project detail) ---------- */
.page-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: var(--space-4);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.page-thumb {
    border-radius: var(--radius-sm);
    background:
        repeating-linear-gradient(45deg, #F7F4EC, #F7F4EC 8px, #F1EDE1 8px, #F1EDE1 16px);
    display: grid;
    place-items: center;
    color: var(--color-text-secondary);
    aspect-ratio: 3 / 4;
    font-size: 1.4rem;
}
.page-card__num {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary-hover);
}
.page-card__title { margin: 2px 0 var(--space-2); font-size: 1rem; }
.page-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.page-card__instruction { margin: 0 0 var(--space-3); }
.prompt-box {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}
.prompt-box__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.prompt-box__label { font-size: 0.78rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.prompt-box__text { margin: 0; font-size: 0.9rem; color: var(--color-text); word-break: break-word; }
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.copy-btn:hover { color: var(--color-text); background: var(--color-bg-soft); }
.copy-btn.is-copied { color: var(--color-success); border-color: #BFE6CF; }

/* Cover preview placeholder */
.cover-preview {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-4);
    align-items: center;
}
.cover-thumb {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-sm);
    background: linear-gradient(160deg, var(--color-bg-soft), #fff);
    border: 1px solid var(--color-border);
    display: grid;
    place-items: center;
    color: var(--color-primary-hover);
    font-size: 2rem;
}

/* ---------- Auth card ---------- */
.auth-card {
    width: 100%;
    max-width: 860px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 28px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.auth-card--narrow { max-width: 440px; grid-template-columns: 1fr; }
.auth-card__art {
    position: relative;
    background: linear-gradient(160deg, #FFF3D0, #E9F7FF);
    overflow: hidden;
    min-height: 320px;
}
.art-blob { position: absolute; border-radius: 50%; filter: blur(4px); opacity: 0.7; }
.art-blob--a { width: 180px; height: 180px; background: var(--color-accent-mint); top: -30px; left: -30px; }
.art-blob--b { width: 140px; height: 140px; background: var(--color-accent-purple); bottom: -20px; right: -10px; opacity: 0.45; }
.art-icon { position: absolute; color: #fff; }
.art-icon--book { font-size: 5rem; top: 38%; left: 30%; color: var(--color-primary); opacity: 0.9; }
.art-icon--spark { font-size: 2rem; top: 24%; right: 26%; color: var(--color-primary-hover); }

.auth-card__body { padding: var(--space-7) var(--space-6); }
.auth-logo {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: grid; place-items: center;
    font-size: 1.5rem;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
}
.auth-logo--muted { background: linear-gradient(135deg, #C9C4B5, #9E9A8C); }
.auth-title { margin: 0 0 var(--space-2); font-size: 1.5rem; }
.auth-subtitle { color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.auth-hint {
    margin-top: var(--space-5);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    display: flex; align-items: center; gap: var(--space-2);
}

.error-id-box {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    text-align: center;
}
.error-id-box__label { display: block; font-size: 0.78rem; color: var(--color-text-secondary); }
.error-id-box__code { font-size: 1.05rem; font-weight: 600; color: var(--color-text); }

/* ---------- Confirmation box ---------- */
.confirm-box {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-input);
    background: var(--bg-warning);
    border: 1px solid #F3DCB0;
    color: #8A5A12;
    margin-bottom: var(--space-4);
}