/* Gannita v120 — premium top bar, plan card contrast, dark-mode logos, autofill colours. */

/* ---- Top bar ---- */
.topbar {
  padding: calc(9px + env(safe-area-inset-top, 0px)) 16px 9px; gap: 10px; border-bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,248,255,.86));
  box-shadow: 0 1px 0 rgba(11,26,44,.06), 0 14px 28px -22px rgba(11,26,44,.45);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(10,132,255,.55) 20%, rgba(107,182,255,.9) 50%, rgba(10,132,255,.55) 80%, transparent); opacity: .55; pointer-events: none; }
.topbar .brand .brand-logo { height: 28px; }
.topbar .who { gap: 8px; min-width: 0; }
.topbar .who > button, .topbar .who > .theme-toggle { height: 36px; min-height: 36px; }
.topbar .who .theme-toggle { width: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--border); color: var(--ink-2); box-shadow: 0 6px 14px -8px rgba(11,26,44,.45); }
.topbar .who .theme-toggle:hover { border-color: var(--accent); color: var(--accent-2); }
.topbar .who .plan-pill, .topbar .who .company-pill {
  position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 14px 0 38px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; border: 1px solid var(--border);
  background: #fff; color: var(--ink); box-shadow: 0 6px 14px -10px rgba(11,26,44,.5);
}
.topbar .who .plan-pill.company-pill { max-width: 36vw; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 34px; padding-left: 38px; background: #fff; color: var(--ink); border-color: var(--border); box-shadow: 0 6px 14px -10px rgba(11,26,44,.5); }
.topbar .who .plan-pill.company-pill::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  box-shadow: 0 4px 10px -4px rgba(11,40,90,.8); left: 4px; width: 26px; height: 26px; margin-top: -13px;
  -webkit-mask: none; mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l8-2v18M12 9h8v12M4 21h16M7 9h2M7 13h2M7 17h2M15 13h2M15 17h2' transform='translate(4.5 4.5) scale(.62)'/%3E%3C/svg%3E"), linear-gradient(135deg, #1a6fe0, #0b1a2c);
  background-size: 100% 100%, 100% 100%; background-repeat: no-repeat;
}
.topbar .who .plan-pill { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; padding-left: 30px; background: linear-gradient(135deg, #eaf8f0, #f6fcf9); color: #0f7a43; border-color: #c4ead4; }
.topbar .who .plan-pill::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
.topbar .who .plan-pill.ok { background: linear-gradient(135deg, #eaf8f0, #f6fcf9); color: #0f7a43; border-color: #c4ead4; }
.topbar .who .plan-pill.warn { background: linear-gradient(135deg, #fff4e0, #fffaf0); color: #a8530a; border-color: #f6dcae; }
.topbar .who .plan-pill.warn::before { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.22); }
.topbar .who .plan-pill.bad { background: linear-gradient(135deg, #fdebea, #fff5f5); color: #b42318; border-color: #f5c6c2; }
.topbar .who .plan-pill.bad::before { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.22); }
.topbar #tenant-name { font-weight: 700; color: var(--ink); }
@media (max-width: 420px) { .topbar { padding-left: 12px; padding-right: 12px; gap: 8px; } .topbar .who { gap: 6px; } .topbar .who .plan-pill.company-pill { max-width: 30vw; padding-right: 10px; } .topbar .who .plan-pill:not(.company-pill) { max-width: 34vw; } .topbar .who .plan-pill { padding-right: 11px; } .topbar .brand .brand-logo { height: 25px; } }

html[data-theme="dark"] .topbar { background: linear-gradient(180deg, rgba(9,18,32,.95), rgba(7,14,26,.88)); box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 14px 28px -22px rgba(0,0,0,.8); }
html[data-theme="dark"] .topbar .who .theme-toggle { background: var(--panel-2); border-color: var(--border-strong); color: #cfe3ff; box-shadow: none; }
html[data-theme="dark"] .topbar .who .plan-pill, html[data-theme="dark"] .topbar .who .company-pill { background: var(--panel-2); border-color: var(--border-strong); color: var(--text); box-shadow: none; }
html[data-theme="dark"] .topbar .who .plan-pill, html[data-theme="dark"] .topbar .who .plan-pill.ok { background: rgba(22,163,74,.14); color: #4ade80; border-color: rgba(74,222,128,.28); }
html[data-theme="dark"] .topbar .who .plan-pill.warn { background: rgba(217,119,6,.16); color: #fbbf24; border-color: rgba(251,191,36,.3); }
html[data-theme="dark"] .topbar .who .plan-pill.bad { background: rgba(220,38,38,.16); color: #ff8a8f; border-color: rgba(255,138,143,.3); }
html[data-theme="dark"] .topbar .who .plan-pill.company-pill { background: var(--panel-2); color: var(--text); border-color: var(--border-strong); }
html[data-theme="dark"] .topbar #tenant-name { color: var(--text); }

/* ---- Dark-mode logos (light wordmark; blue mark kept) ---- */
html[data-theme="dark"] .brand-logo { filter: none; content: url("/brand-wordmark-light.png"); }
html[data-theme="dark"] .auth-brand { filter: none; content: url("/brand-wordmark-tagline-light.png"); }

/* ---- Browser autofill: stop Chrome/Safari painting fields pale blue/yellow ---- */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill, textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #fff inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); transition: background-color 9999s;
}
html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #132338 inset !important; -webkit-text-fill-color: #e6eefb !important; caret-color: #e6eefb;
}

/* ---- Plans: readable "current plan" card ---- */
.plan-card.current .plan-name, .plan-card.current h3 { color: #fff; }
.plan-card.current .plan-features li { color: #dbe8ff; border-bottom-color: rgba(255,255,255,.12); }
.plan-card.current .plan-features li::before { background: rgba(22,163,74,.28); }
.plan-card.current .btn[disabled], .plan-card.current .btn:disabled { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); box-shadow: none; opacity: 1; filter: none; }
html[data-theme="dark"] .plan-card:not(.current) .plan-features li { color: var(--text); }
.plan-card.current .plan-features li::after { color: #4ade80; }