/* ═══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS — grep `═══ N\.` to jump to a section.
   ───────────────────────────────────────────────────────────────
     1. Auth page (shared base)
     2. Storage diagnostic banner (setup)
     3. Auth v2 (split-pane layout)
     4. Auth left brand panel
     5. Auth right form panel
     6. Auth form card
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   auth.css — Login + first-time setup page styling.
   Loaded by admin-login.ejs and admin-setup.ejs after style.css.
   Depends on style.css for: variables, .btn, .field.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 1. Auth page (shared base) ═══ */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(224, 122, 42, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(30, 41, 59, 0.04), transparent 60%),
    var(--bg);
  padding: 24px;
}
/* (Legacy v1 .auth-card / .auth-card-wide / .auth-brand rules removed —
    login + setup pages now use the .auth-page.v2 split-pane layout
    further down in this file. authIn keyframe also removed since the
    v2 cards animate via fadeUp instead.) */
/* ═══ 2. Storage diagnostic banner (setup) ═══ */
/* Storage diagnostic banner on setup */
.storage-banner {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  margin: 4px 0 22px;
  border: 1px solid var(--border-soft);
}
.storage-banner.storage-ok {
  background: #ECFDF3;
  border-color: #BBF7D0;
  color: #14532D;
}
.storage-banner.storage-warn {
  background: #FEF3C7;
  border-color: #FCD34D;
  color: #78350F;
}
.storage-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
}
.storage-ok .storage-icon { color: var(--success); }
.storage-warn .storage-icon { color: var(--warning-text); }
.storage-body { flex: 1; min-width: 0; }
.storage-body strong { display: block; font-size: 0.95rem; }
.storage-body p { margin: 2px 0 0; }
.storage-body code {
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.55);
  padding: 1px 5px;
  border-radius: 4px;
}
/* ═══ 3. Auth v2 (split-pane layout) ═══ */
.auth-page.v2 {
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}
/* ═══ 4. Auth left brand panel ═══ */
.auth-side {
  background:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(224,122,42,0.12), transparent 65%),
    radial-gradient(ellipse 60% 70% at 80% 80%, rgba(30,41,59,0.10), transparent 60%),
    var(--navy);
  color: #fff;
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-side::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.06), transparent 50%);
  pointer-events: none;
}
.auth-side-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative; z-index: 1;
}
.auth-side-brand img {
  /* Match the portrait aspect ratio of the brandmark SVG (730×1080)
     so it isn't squashed into a square. */
  height: 56px; width: auto;
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
  padding: 4px;
}
.auth-side-brand strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.auth-side-brand small {
  display: block;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 2px;
}
.auth-side-pitch {
  position: relative; z-index: 1;
  max-width: 380px;
}
.auth-side-pitch h2 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.2;
  margin: 0 0 16px;
}
.auth-side-pitch p {
  font-size: var(--t-md);
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  margin: 0;
}
.auth-side-features {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative; z-index: 1;
}
.auth-side-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.78);
}
.auth-side-features li::before {
  content: '';
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5 L7 12 L13 5'/></svg>");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.auth-side-foot {
  position: relative; z-index: 1;
  font-size: var(--t-xs);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* ═══ 5. Auth right form panel ═══ */
.auth-form-side {
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 36px;
  overflow-y: auto;
}
/* ═══ 6. Auth form card ═══ */
.auth-form-card {
  width: 100%;
  max-width: 380px;
}
.auth-form-card h1 {
  margin: 0 0 4px;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--navy);
}
.auth-form-card .auth-sub {
  margin: 0 0 26px;
  font-size: var(--t-md);
  color: var(--text-muted);
}
.auth-form-card .field { margin-bottom: 14px; }
.auth-form-card .btn { margin-top: 10px; }
@media (max-width: 900px) {
  .auth-page.v2 { grid-template-columns: 1fr; }
  .auth-side {
    padding: 36px 28px 28px;
    min-height: auto;
  }
  .auth-side-pitch h2 { font-size: 1.4rem; }
  .auth-side-features { display: none; }
  .auth-form-side { padding: 36px 24px 56px; }
}

/* Storage diagnostic — collapsed-by-default disclosure on setup */
.storage-disclosure {
  margin: 16px 0 22px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--card-tint);
}
.storage-disclosure summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  user-select: none;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text);
}
.storage-disclosure summary::-webkit-details-marker { display: none; }
.storage-disclosure .badge2 { margin-left: auto; }
.storage-disclosure-body {
  padding: 0 14px 14px;
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.5;
}
.storage-disclosure-body code {
  background: rgba(255,255,255,0.7);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.78rem;
}

/* Empty state v2 */
.empty2 {
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 36px 28px;
  text-align: center;
  margin-bottom: var(--sp-4);
}
.empty2 .empty2-icon {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-tint);
  border-radius: 16px;
  color: var(--text-muted);
}
.empty2 h3 { margin: 0 0 6px; font-size: var(--t-lg); color: var(--navy); }
.empty2 p { margin: 0 auto 14px; max-width: 320px; color: var(--text-muted); font-size: var(--t-sm); line-height: 1.5; }

/* Service-area search bar + tag list */
.sa-search-wrap {
  position: relative;
  margin-bottom: 14px;
}
#sa-search {
  width: 100%;
  padding: 12px 14px 12px 38px;
  font-size: var(--t-md);
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2386868B' stroke-width='1.6'><circle cx='7' cy='7' r='5'/><path d='M11 11l3 3' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px;
}
#sa-search:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224,122,42,0.16);
}

.sa-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.sa-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  background: var(--orange-soft);
  border: 1px solid rgba(224,122,42,0.22);
  color: var(--text);
  font-size: var(--t-sm);
  font-weight: 600;
  animation: chipIn 0.18s ease-out;
}
.sa-tag-icon {
  width: 14px;
  height: 14px;
  color: var(--orange-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sa-tag-text { color: var(--text); }
.sa-tag-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  color: var(--orange-dark);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.sa-tag-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.sa-tag-remove:hover { background: rgba(0,0,0,0.06); color: var(--st-danger-fg); }
.sa-empty { width: 100%; }


/* ─── Google sign-in button + auth divider ─────────────────────────
   Sits above the password form on the admin login page. Distinct
   white surface with the official Google "G" mark per their brand
   guidelines. The divider ("or") separates the OAuth path from the
   password fallback so the two are visibly peer-level options.
   Hidden entirely when GOOGLE_OAUTH_* env isn't configured (server
   passes google_enabled=false). */
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  border-radius: 8px;
  color: #3C4043;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.btn-google:hover {
  background: #F8F9FA;
  border-color: #C0C2C6;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}
.btn-google:active { background: #F1F3F4; }
.btn-google:focus-visible {
  outline: none;
  border-color: #4285F4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.22);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: #9A9485;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E5DED3;
}