/* ============================================================================
 * auth.css  —  GENSCHED SaaS  ·  authentication + admin-panel styling
 * Matches the GENSCHED brand: blue #2563eb -> violet #7c3aed gradient.
 * ==========================================================================*/

/* CRITICAL: The HTML `hidden` attribute must always win, even when a CSS rule
 * sets display:flex or display:block on the same element. Without this, the
 * splash spinner stays visible over the login screen because .auth-splash and
 * .login-screen both declare display:flex, which has the same specificity as
 * the browser's built-in [hidden]{display:none} and overrides it in cascade.
 * !important here is intentional and correct — it ensures the hide/show
 * toggles in boot.js actually work. */
[hidden] { display: none !important; }

:root {
  --au-blue: #2563eb;
  --au-violet: #7c3aed;
  --au-grad: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --au-bg: #f7f8fb;
  --au-surface: #ffffff;
  --au-border: #e5e7eb;
  --au-text: #0f172a;
  --au-muted: #64748b;
  --au-faint: #94a3b8;
  --au-danger: #dc2626;
  --au-ok: #059669;
  --au-warn: #d97706;
}

/* ---- demo banner -------------------------------------------------------- */
.demo-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  background: #fef3c7; color: #92400e;
  border-bottom: 1px solid #fcd34d;
  font: 12.5px/1.5 "Geist", system-ui, sans-serif;
  padding: 7px 16px; text-align: center;
}
.demo-banner code {
  background: rgba(146, 64, 14, 0.12); padding: 1px 6px;
  border-radius: 4px; font-family: "JetBrains Mono", monospace; font-size: 11.5px;
}
body.has-demo-banner .auth-splash,
body.has-demo-banner .login-screen { padding-top: 38px; }
body.has-demo-banner .app { margin-top: 34px; }

/* ---- loading splash ----------------------------------------------------- */
.auth-splash {
  position: fixed; inset: 0; z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  background: var(--au-bg);
}
.auth-splash .splash-spin {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid #e5e7eb; border-top-color: var(--au-blue);
  animation: au-spin 0.8s linear infinite;
}
@keyframes au-spin { to { transform: rotate(360deg); } }
.splash-err {
  max-width: 420px; text-align: center; color: var(--au-danger);
  font: 13px/1.6 "Geist", system-ui, sans-serif;
}
.splash-err code {
  background: #f1f5f9; padding: 1px 5px; border-radius: 3px;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
}

/* ---- login screen ------------------------------------------------------- */
.login-screen {
  position: fixed; inset: 0; z-index: 7000;
  display: flex; align-items: center; justify-content: center;
  background: var(--au-bg);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(37, 99, 235, 0.07), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(124, 58, 237, 0.07), transparent 42%);
  font-family: "Geist", system-ui, sans-serif;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--au-surface);
  border: 1px solid var(--au-border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.10);
  padding: 32px 30px;
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.login-logo {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--au-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; letter-spacing: 0.5px;
}
.login-title { font-weight: 700; font-size: 16px; color: var(--au-text); }
.login-tagline { font-size: 11px; color: var(--au-faint); margin-top: 1px; }
.login-h {
  font-size: 19px; font-weight: 600; color: var(--au-text);
  margin: 0 0 18px;
}
.login-field { margin-bottom: 14px; }
.login-field label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--au-muted); margin-bottom: 5px;
}
.login-field input,
.ap-field input, .ap-field select {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px; font-size: 13.5px; font-family: inherit;
  border: 1px solid var(--au-border); border-radius: 7px;
  background: #fff; color: var(--au-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-field input:focus,
.ap-field input:focus, .ap-field select:focus {
  outline: none; border-color: var(--au-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.login-btn {
  width: 100%; padding: 10px; margin-top: 6px;
  font: 600 13.5px "Geist", system-ui, sans-serif;
  color: #fff; background: var(--au-grad);
  border: none; border-radius: 7px; cursor: pointer;
  transition: opacity 0.15s, transform 0.05s;
}
.login-btn:hover { opacity: 0.93; }
.login-btn:active { transform: translateY(1px); }
.login-btn:disabled { opacity: 0.6; cursor: default; }
.login-error, .ap-error {
  background: #fef2f2; border: 1px solid #fecaca; color: var(--au-danger);
  font-size: 12.5px; padding: 8px 11px; border-radius: 7px; margin-bottom: 12px;
}
.login-foot {
  margin-top: 20px; text-align: center;
  font-size: 11.5px; color: var(--au-muted); line-height: 1.6;
}
.login-foot-dim { color: var(--au-faint); }

/* ---- auth modal (forced password change) ------------------------------- */
.auth-modal-back, #forcePwModal {
  position: fixed; inset: 0; z-index: 7500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  font-family: "Geist", system-ui, sans-serif; padding: 24px;
}
.auth-modal {
  width: 100%; max-width: 420px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
  overflow: hidden;
}
.auth-modal-h { padding: 18px 22px 0; }
.auth-modal-h h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--au-text); }
.auth-modal-body { padding: 14px 22px 6px; }
.auth-modal-foot {
  padding: 14px 22px 18px; display: flex; gap: 8px; justify-content: flex-end;
}
.auth-p, .ap-p {
  font-size: 12.5px; line-height: 1.6; color: var(--au-muted); margin: 0 0 14px;
}

/* ---- account control (injected into GENSCHED header) ------------------- */
.acc-wrap { position: relative; margin-left: 8px; font-family: "Geist", system-ui, sans-serif; }
.acc-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px 5px 5px; cursor: pointer;
  background: #f1f5f9; border: 1px solid var(--au-border); border-radius: 8px;
  font: 500 12.5px "Geist", system-ui, sans-serif; color: var(--au-text);
}
.acc-btn:hover { background: #e9eef5; }
.acc-avatar {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--au-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
}
.acc-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-caret { color: var(--au-faint); font-size: 10px; }
.acc-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 6000;
  width: 230px; background: #fff;
  border: 1px solid var(--au-border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}
.acc-id { padding: 12px 14px; border-bottom: 1px solid var(--au-border); }
.acc-id-name { font-weight: 600; font-size: 13px; color: var(--au-text); }
.acc-id-email { font-size: 11.5px; color: var(--au-muted); margin-top: 1px; }
.acc-id-role {
  display: inline-block; margin-top: 6px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--au-violet); background: #ede9fe;
  padding: 2px 7px; border-radius: 5px;
}
.acc-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px; border: none; background: none; cursor: pointer;
  font: 500 12.5px "Geist", system-ui, sans-serif; color: var(--au-text);
}
.acc-item:hover { background: #f1f5f9; }

/* ---- admin panel -------------------------------------------------------- */
body.ap-open { overflow: hidden; }
.admin-panel {
  position: fixed; inset: 0; z-index: 6500;
  background: var(--au-bg); overflow: auto;
  font-family: "Geist", system-ui, sans-serif;
}
.ap-wrap { max-width: 1080px; margin: 0 auto; padding: 26px 28px 60px; }
.ap-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
.ap-head h2 { margin: 0; font-size: 21px; font-weight: 700; color: var(--au-text); }
.ap-sub { font-size: 12.5px; color: var(--au-muted); margin-top: 3px; }
.ap-head-actions { display: flex; gap: 8px; }
.ap-toolbar { margin-bottom: 12px; }
.ap-toolbar input {
  width: 320px; max-width: 100%; box-sizing: border-box;
  padding: 8px 12px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--au-border); border-radius: 8px; background: #fff;
}
.ap-toolbar input:focus {
  outline: none; border-color: var(--au-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.ap-tablewrap {
  background: #fff; border: 1px solid var(--au-border);
  border-radius: 12px; overflow: hidden;
}
.ap-table { width: 100%; border-collapse: collapse; }
.ap-table thead th {
  text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px; color: var(--au-faint);
  padding: 11px 14px; background: #f8fafc; border-bottom: 1px solid var(--au-border);
}
.ap-table tbody td {
  padding: 11px 14px; font-size: 12.5px; color: var(--au-text);
  border-bottom: 1px solid #f1f5f9; vertical-align: middle;
}
.ap-table tbody tr:last-child td { border-bottom: none; }
.ap-row-off { background: #fafafa; }
.ap-row-off .ap-u-email { color: var(--au-muted); }
.ap-u-email { font-weight: 600; }
.ap-u-name { font-size: 11.5px; color: var(--au-muted); margin-top: 1px; }
.ap-you {
  font-size: 9.5px; font-weight: 600; color: var(--au-blue);
  background: #dbeafe; padding: 1px 5px; border-radius: 4px; text-transform: uppercase;
}
.ap-empty { text-align: center; color: var(--au-faint); padding: 26px 14px; font-size: 12.5px; }
.ap-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-foot { margin-top: 14px; font-size: 11.5px; color: var(--au-faint); }

/* tags */
.ap-tag {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.3px;
}
.ap-tag-ok    { background: #d1fae5; color: #065f46; }
.ap-tag-off   { background: #fee2e2; color: #991b1b; }
.ap-tag-admin { background: #ede9fe; color: #5b21b6; }
.ap-tag-user  { background: #e0e7ff; color: #3730a3; }
.ap-tag-warn  { background: #fef3c7; color: #92400e; }

/* buttons (shared by admin panel + modals) */
.ap-btn {
  font: 500 12.5px "Geist", system-ui, sans-serif;
  padding: 8px 14px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--au-border); background: #fff; color: var(--au-text);
  transition: background 0.12s, opacity 0.12s;
}
.ap-btn:hover { background: #f1f5f9; }
.ap-btn:disabled { opacity: 0.5; cursor: default; }
.ap-btn-primary {
  background: var(--au-grad); color: #fff; border: none;
}
.ap-btn-primary:hover { opacity: 0.93; background: var(--au-grad); }
.ap-btn-ghost { background: #fff; }
.ap-btn-danger { color: var(--au-danger); border-color: #fecaca; }
.ap-btn-danger:hover { background: #fef2f2; }
.ap-btn-sm { padding: 5px 9px; font-size: 11.5px; }

/* ---- generic modal (create user, confirms, change pw) ------------------ */
.ap-modal-back {
  position: fixed; inset: 0; z-index: 7600;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.5); padding: 24px;
  font-family: "Geist", system-ui, sans-serif;
}
.ap-modal {
  width: 100%; max-width: 440px; background: #fff;
  border-radius: 14px; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
  overflow: hidden; max-height: 90vh; display: flex; flex-direction: column;
}
.ap-modal-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 0;
}
.ap-modal-h h3 { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--au-text); }
.ap-x {
  background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--au-faint); cursor: pointer; padding: 0 2px;
}
.ap-x:hover { color: var(--au-text); }
.ap-modal-body { padding: 14px 20px 4px; overflow: auto; }
.ap-modal-foot {
  padding: 14px 20px 18px; display: flex; gap: 8px; justify-content: flex-end;
}
.ap-field { margin-bottom: 13px; }
.ap-field label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--au-muted); margin-bottom: 5px;
}
.ap-inline { display: flex; gap: 6px; }
.ap-inline input { flex: 1; }
.ap-hint { font-size: 11px; color: var(--au-faint); margin-top: 4px; line-height: 1.5; }
.ap-mono { font-family: "JetBrains Mono", monospace; }

/* credentials box */
.ap-cred {
  background: #f8fafc; border: 1px solid var(--au-border);
  border-radius: 9px; padding: 12px 14px; margin: 4px 0 12px;
}
.ap-cred > div { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.ap-cred > div + div { border-top: 1px dashed var(--au-border); }
.ap-cred-k { font-size: 11px; color: var(--au-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.ap-cred-v { font-size: 13px; font-weight: 600; color: var(--au-text); }

/* ---- splash message + cloud-sync indicator ----------------------------- */
.splash-msg {
  margin-top: 14px; font-size: 12.5px; color: var(--au-muted);
  font-family: "Geist", system-ui, sans-serif;
}
.auth-splash { flex-direction: column; }

/* Cloud-sync pill, injected into the GENSCHED footer status bar */
.cloud-sync { display: flex; align-items: center; gap: 6px; }
.cloud-sync .cloud-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #94a3b8; flex: none;
}
.cloud-sync.sync-ok   .cloud-dot { background: #059669; }
.cloud-sync.sync-busy .cloud-dot { background: #2563eb; animation: cloud-pulse 1s ease-in-out infinite; }
.cloud-sync.sync-err  .cloud-dot { background: #dc2626; }
@keyframes cloud-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---- Project Hub -------------------------------------------------------- */
.ph-overlay {
  position: fixed; inset: 0; z-index: 6600;
  background: var(--au-bg); overflow: auto;
  font-family: "Geist", system-ui, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
.ph-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: #fff;
  border-bottom: 1px solid var(--au-border);
  position: sticky; top: 0; z-index: 10;
}
.ph-brand { display: flex; align-items: center; gap: 12px; }
.ph-app-name { font-size: 17px; font-weight: 700; color: var(--au-text); }
.ph-app-sub { font-size: 11px; color: var(--au-faint); margin-top: 1px; }
.ph-header-right { display: flex; align-items: center; gap: 10px; }
.ph-user-email { font-size: 12.5px; color: var(--au-muted); }
.ph-body { flex: 1; max-width: 1100px; margin: 0 auto; padding: 36px 28px 60px; width: 100%; }
.ph-hero { margin-bottom: 28px; }
.ph-hero h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; color: var(--au-text); }
.ph-hero p { margin: 0; font-size: 13.5px; color: var(--au-muted); }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 20px; }
.ph-card {
  background: #fff; border: 1px solid var(--au-border);
  border-radius: 12px; padding: 20px;
  box-shadow: 0 2px 8px rgba(15,23,42,.05);
  transition: box-shadow 0.15s, transform 0.1s;
}
.ph-card:hover { box-shadow: 0 6px 20px rgba(15,23,42,.1); transform: translateY(-1px); }
.ph-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.ph-card-name { font-weight: 600; font-size: 14px; color: var(--au-text); line-height: 1.3; }
.ph-card-code { font-size: 11px; color: var(--au-faint); margin-top: 3px; font-family: "JetBrains Mono", monospace; }
.ph-card-pct { font-size: 22px; font-weight: 700; color: var(--au-blue); line-height: 1; }
.ph-card-pct span { font-size: 12px; color: var(--au-muted); font-weight: 400; }
.ph-stats { display: flex; gap: 0; border: 1px solid var(--au-border); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.ph-stat { flex: 1; padding: 10px 8px; text-align: center; border-right: 1px solid var(--au-border); }
.ph-stat:last-child { border-right: none; }
.ph-stat-v { font-size: 13px; font-weight: 600; color: var(--au-text); }
.ph-stat-l { font-size: 10px; color: var(--au-faint); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.3px; }
.ph-select {
  width: 100%; padding: 9px 14px; border: none; border-radius: 8px;
  background: var(--au-grad); color: #fff; font: 600 12.5px "Geist", system-ui, sans-serif;
  cursor: pointer; transition: opacity 0.15s;
}
.ph-select:hover { opacity: 0.9; }
.ph-empty {
  grid-column: 1 / -1; text-align: center; padding: 40px 20px;
  color: var(--au-muted); font-size: 13px;
  background: #fff; border: 1px dashed var(--au-border); border-radius: 12px;
}
.ph-new-btn {
  padding: 10px 22px; background: none; border: 2px dashed var(--au-border);
  border-radius: 10px; color: var(--au-muted); font: 600 13px "Geist", system-ui, sans-serif;
  cursor: pointer; transition: all 0.15s;
}
.ph-new-btn:hover { border-color: var(--au-blue); color: var(--au-blue); background: #eff6ff; }
.ph-footer {
  text-align: center; padding: 16px;
  font-size: 11px; color: var(--au-faint);
  border-top: 1px solid var(--au-border); background: #fff;
}