/* TianHom — minimal clean stylesheet */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: system-ui, sans-serif;
    font-size: 16px;
    background: #f5f5f5;
    color: #222;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.app        { min-height: 100vh; display: flex; flex-direction: column; }
.navbar     { background: #4a3080; color: white; padding: 0.75rem 1.5rem;
              display: flex; align-items: center; justify-content: space-between; }
.navbar h1  { font-size: 1.2rem; font-weight: 600; }
.main       { flex: 1; padding: 1.5rem; max-width: 1100px; margin: 0 auto; width: 100%; }

/* ── Login page ─────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: white; border-radius: 10px; padding: 2rem;
              width: 100%; max-width: 360px; box-shadow: 0 2px 12px rgba(0,0,0,.1); }
.login-card h2  { margin-bottom: 1.5rem; color: #4a3080; text-align: center; }

/* ── Form elements ──────────────────────────────────────────────────────── */
.field       { margin-bottom: 1rem; }
.field label { display: block; font-size: .875rem; color: #555; margin-bottom: .3rem; }
.field input, .field select {
    width: 100%; padding: .5rem .75rem; border: 1px solid #ccc;
    border-radius: 6px; font-size: 1rem;
}
.field input:focus, .field select:focus {
    outline: none; border-color: #4a3080; box-shadow: 0 0 0 2px rgba(74,48,128,.15);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn         { padding: .5rem 1.25rem; border: none; border-radius: 6px;
               font-size: 1rem; cursor: pointer; font-weight: 500; }
.btn-primary { background: #4a3080; color: white; width: 100%; padding: .65rem; }
.btn-primary:hover   { background: #3a2070; }
.btn-secondary       { background: #e5e5e5; color: #333; }
.btn-secondary:hover { background: #d5d5d5; }
.btn-danger          { background: #dc3545; color: white; }
.btn-danger:hover    { background: #b02a37; }
.btn-sm  { padding: .3rem .75rem; font-size: .875rem; }

/* ── Error / status messages ────────────────────────────────────────────── */
.error   { color: #dc3545; font-size: .875rem; margin-top: .5rem; }
.success { color: #198754; font-size: .875rem; margin-top: .5rem; }

/* ── Schedule grid ──────────────────────────────────────────────────────── */
.schedule-header { display: flex; justify-content: space-between;
                   align-items: center; margin-bottom: 1rem; }
.schedule-header h2 { font-size: 1.2rem; color: #4a3080; }

.appointment-list { display: flex; flex-direction: column; gap: .5rem; }
.appointment-card {
    background: white; border-radius: 8px; padding: .75rem 1rem;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.apt-time    { font-weight: 600; color: #4a3080; min-width: 120px; }
.apt-details { flex: 1; }
.apt-tag     { display: inline-block; background: #ede9f8; color: #4a3080;
               border-radius: 4px; padding: .1rem .5rem; font-size: .8rem; }

/* ── Service form ───────────────────────────────────────────────────────── */
.form-card   { background: white; border-radius: 10px; padding: 1.5rem;
               box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.form-card h2 { margin-bottom: 1.25rem; color: #4a3080; }
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-result { background: #f0ecfb; border-radius: 8px; padding: 1rem;
               margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.result-item { font-size: .9rem; }
.result-item span { font-weight: 600; color: #4a3080; }

/* ── Navigation tabs ────────────────────────────────────────────────────── */
.tabs        { display: flex; gap: .5rem; margin-bottom: 1.5rem; border-bottom: 2px solid #e0e0e0; }
.tab         { padding: .5rem 1rem; cursor: pointer; border: none; background: none;
               font-size: 1rem; color: #666; border-bottom: 2px solid transparent;
               margin-bottom: -2px; }
.tab.active  { color: #4a3080; border-bottom-color: #4a3080; font-weight: 600; }
.tab:hover   { color: #4a3080; }

/* ── Loading spinner ────────────────────────────────────────────────────── */
.spinner     { text-align: center; padding: 2rem; color: #888; }