/* ============================================================
   assets/css/app.css  — updated for Step 4
   Minimal reset + auth page styles not in calendar.css
   ============================================================ */

/* Auth page styles (login / register / confirm) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --color-bg:       #f0f4f8;
    --color-surface:  #ffffff;
    --color-primary:  #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-success:  #16a34a;
    --color-error:    #dc2626;
    --color-text:     #1e293b;
    --color-muted:    #64748b;
    --color-border:   #e2e8f0;
    --radius:         10px;
    --shadow:         0 4px 24px rgba(0,0,0,0.08);
}

body.auth-page {
    min-height: 100vh;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--color-text);
    padding: 1rem;
}

.auth-container {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 420px;
    padding: 2.5rem 2rem;
}

.auth-brand { text-align: center; margin-bottom: 1.75rem; }
.auth-logo  { font-size: 2.5rem; margin-bottom: 0.5rem; }
.auth-brand h1 { font-size: 1.5rem; font-weight: 700; }
.auth-brand p  { color: var(--color-muted); font-size: 0.9rem; margin-top: 0.25rem; }

.auth-tabs { display: flex; margin-bottom: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.tab-btn { flex: 1; padding: 0.6rem; border: none; background: transparent; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: var(--color-muted); transition: all 0.2s; }
.tab-btn.active { background: var(--color-primary); color: #fff; }

.tab-content         { display: none; }
.tab-content.active  { display: block; }

.form-group       { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border); border-radius: 7px;
    font-size: 0.95rem; color: var(--color-text); outline: none;
    transition: border-color 0.2s;
}
.form-group input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

.btn          { display: inline-block; padding: 0.65rem 1.25rem; border-radius: 7px; font-size: 0.95rem; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: background 0.2s; text-align: center; }
.btn-primary  { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-full     { width: 100%; display: block; }
.btn-sm       { padding: 0.35rem 0.85rem; font-size: 0.85rem; }
.btn-danger   { background: var(--color-error); color: #fff; }

.alert         { padding: 0.75rem 1rem; border-radius: 7px; margin-bottom: 1rem; font-size: 0.9rem; }
.alert-error   { background: #fef2f2; color: var(--color-error);  border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: var(--color-success); border: 1px solid #bbf7d0; }

.booking-card       { background: #f8fafc; border-radius: 8px; padding: 20px; margin: 16px 0; }
.booking-card table { width: 100%; border-collapse: collapse; }
.booking-card td    { padding: 5px 0; color: var(--color-text); }
.booking-card td:first-child { color: var(--color-muted); width: 100px; }