/* ═══════════════════════════════════════════════
   TENANCE — OELFKE GMBH CSS OVERRIDES  v6
   Only active when body has class .oelfke-mode
   Zero effect on the standard Tenance app.
═══════════════════════════════════════════════ */

/* ── Brand color + DARK theme cascade ── */
body.oelfke-mode {
  --gold:    #2E6FA8;
  --goldd:   #1a5490;
  --sb:      #0f2540;      /* dark navy sidebar */
}

/* ══════════════════════════════════════════════
   BACKGROUNDS — auth screens keep a premium
   dark-blue gradient; dashboard gets the light bg
══════════════════════════════════════════════ */

body.oelfke-mode #s-land,
body.oelfke-mode #s-ll,
body.oelfke-mode #s-tl,
body.oelfke-mode #s-fp,
body.oelfke-mode #s-rs,
body.oelfke-mode #s-setup,
body.oelfke-mode #s-tsignup,
body.oelfke-mode #s-tfp,
body.oelfke-mode #s-trs,
body.oelfke-mode #s-agent-portal,
body.oelfke-mode #s-pending,
body.oelfke-mode #s-provider,
body.oelfke-mode #s-oelfke-auth,
body.oelfke-mode #s-maint-worker-auth {
  background: radial-gradient(ellipse 120% 80% at 50% 0%, #1a3a5c 0%, #0d2540 50%, #060e18 100%);
}

/* Same subtle dot-grid overlay as the Tenance landing */
body.oelfke-mode #s-land::before,
body.oelfke-mode #s-ll::before,
body.oelfke-mode #s-tl::before,
body.oelfke-mode #s-tsignup::before,
body.oelfke-mode #s-provider::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

/* Ensure relative positioning so ::before overlay works */
body.oelfke-mode #s-ll,
body.oelfke-mode #s-tl,
body.oelfke-mode #s-tsignup,
body.oelfke-mode #s-provider {
  position: relative;
  overflow: hidden;
}

/* ── Auth card (abox) — dark blue card on gradient bg ── */
body.oelfke-mode .abox {
  background: #0e1c2e;
  border-color: rgba(46, 111, 168, .28);
}
/* Auth text colors stay light (card is dark) */
body.oelfke-mode .abox .a-title,
body.oelfke-mode .abox .a-sub,
body.oelfke-mode .abox label,
body.oelfke-mode .abox .errtxt { color: #d0dde8; }
body.oelfke-mode .abox .a-title { color: #ffffff; }
body.oelfke-mode .abox .si {
  background: rgba(255,255,255,.06);
  border-color: rgba(46,111,168,.35);
  color: #e8f0f8;
}
body.oelfke-mode .abox .si::placeholder { color: rgba(200,220,240,.35); }
body.oelfke-mode .abox .si:focus {
  border-color: rgba(46,111,168,.7);
  box-shadow: 0 0 0 3px rgba(46,111,168,.15);
}

/* ── Landing cards hover ── */
body.oelfke-mode .lc:hover {
  border-color: #2E6FA8;
  box-shadow: 0 24px 60px rgba(46, 111, 168, .2);
}
body.oelfke-mode .lc-cta {
  color: #2E6FA8;
}

/* ── Primary buttons use Oelfke blue ── */
body.oelfke-mode .bg {
  background: linear-gradient(135deg, #2E6FA8, #1e5080);
  color: #fff;
}
body.oelfke-mode .bg:hover {
  background: linear-gradient(135deg, #3a7fbb, #255f90);
}
body.oelfke-mode .abtn {
  background: linear-gradient(135deg, #2E6FA8, #1e5080);
  color: #fff;
}
body.oelfke-mode .abtn:hover {
  background: linear-gradient(135deg, #3a7fbb, #255f90);
}

/* ── Outline button on light background ── */
body.oelfke-mode .bo {
  border-color: rgba(46,111,168,.35);
  color: #2E6FA8;
}
body.oelfke-mode .bo:hover {
  background: rgba(46,111,168,.08);
  color: #1a5490;
}

/* ── Tab buttons on login screen (Email / Phone OTP) ── */
body.oelfke-mode .tl-tab.on {
  border-color: #2E6FA8 !important;
  background: rgba(46, 111, 168, .12) !important;
  color: #2E6FA8 !important;
}

/* ── Links ── */
body.oelfke-mode .alink a,
body.oelfke-mode a[style*="color:#5ac86a"] {
  color: #2E6FA8 !important;
}

/* ══════════════════════════════════════════════
   SIDEBAR — stays dark navy for brand clarity
══════════════════════════════════════════════ */
body.oelfke-mode .sb {
  background: var(--sb) !important;
  border-right-color: rgba(46,111,168,.22) !important;
}
body.oelfke-mode .sb-head {
  border-bottom-color: rgba(46,111,168,.22) !important;
}

/* Nav items: white text on dark sidebar */
body.oelfke-mode .sb .ni {
  color: rgba(220,235,248,.65);
}
body.oelfke-mode .sb .ni:hover {
  background: rgba(255,255,255,.06);
  color: rgba(220,235,248,.9);
}
body.oelfke-mode .sb .ni .ni-ico svg {
  stroke: rgba(220,235,248,.5);
}
body.oelfke-mode .sb .ni:hover .ni-ico svg {
  stroke: rgba(220,235,248,.85);
}
/* Active nav item: bright blue on dark sidebar */
body.oelfke-mode .ni.on {
  background: rgba(46, 111, 168, .25);
  color: #7fc4f0;
}
body.oelfke-mode .ni.on .ni-ico svg {
  stroke: #7fc4f0;
}
/* Sidebar user name */
body.oelfke-mode .sb .sb-un {
  color: rgba(220,235,248,.7);
}
body.oelfke-mode .sb .sb-av {
  background: rgba(46,111,168,.3);
  color: #7fc4f0;
}
/* Sidebar bottom: sign out and footer text */
body.oelfke-mode .sb .sb-brand-sub,
body.oelfke-mode .sb .sb-foot { color: rgba(220,235,248,.45); }

/* ── Oelfke logo in sidebar: let the wordmark set its own width ── */
body.oelfke-mode .sb-head .sb-logo {
  width: auto;
  height: auto;
  flex-shrink: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
}
body.oelfke-mode .sb-head .sb-logo img {
  height: 26px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  display: block;
}
/* Hide the text label next to the logo — the wordmark image already has the name */
body.oelfke-mode .sb-head .sb-bn,
body.oelfke-mode .sb-bn {
  display: none !important;
}

/* ══════════════════════════════════════════════
   MODAL & TOAST — blue accent borders on dark theme
══════════════════════════════════════════════ */
body.oelfke-mode .modal {
  border-color: rgba(46,111,168,.25) !important;
}

/* Property status tags */
body.oelfke-mode .ps-occ  { background: rgba(20,80,20,.75);  color: #7ae882; }
body.oelfke-mode .ps-vac  { background: rgba(80,50,10,.75);  color: #e0c060; }
body.oelfke-mode .ps-pend { background: rgba(60,40,10,.75);  color: #e09b6b; }

/* ── Calendar: today cell needs white text on blue ── */
body.oelfke-mode .cd.today { color: #ffffff; }

/* ── Chat bubble: "me" messages need white text on blue ── */
body.oelfke-mode .bbl.me { color: #ffffff; }

/* ── Tenant ID copy button needs white text on blue ── */
body.oelfke-mode .tid-copy { color: #ffffff; }

/* ══════════════════════════════════════════════
   AUTH SCREENS — center + clean up logo area
══════════════════════════════════════════════ */

/* Remove white box behind logo; let wordmark breathe */
body.oelfke-mode #s-ll .a-brand .a-ico,
body.oelfke-mode #s-fp .a-brand .a-ico,
body.oelfke-mode #s-tl .a-brand .a-ico,
body.oelfke-mode #s-tsignup .a-brand .a-ico,
body.oelfke-mode #s-tfp .a-brand .a-ico,
body.oelfke-mode #s-rs .a-brand .a-ico,
body.oelfke-mode #s-trs .a-brand .a-ico {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
}

/* Center the logo row on all oelfke-mode auth screens */
body.oelfke-mode .a-brand {
  justify-content: center;
  margin-bottom: 6px;
}

/* Dedicated Oelfke auth screen — always centered, name always hidden */
#s-oelfke-auth .a-brand {
  justify-content: center;
  margin-bottom: 6px;
}
#s-oelfke-auth .a-bname {
  display: none !important;
}
/* Clean up the logo box on the dedicated auth screen */
#s-oelfke-auth .a-ico {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ── Landing logo: hide the duplicate text name (wordmark has it) ── */
body.oelfke-mode .land-logo-name {
  display: none;
}

/* ── Language toggle button ── */
#oelfke-lang-toggle {
  display: none;
  background: rgba(46, 111, 168, .12);
  border: 1px solid rgba(46, 111, 168, .28);
  border-radius: 20px;
  color: #2E6FA8;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .15s;
  margin: 6px auto;
}
#oelfke-lang-toggle:hover {
  background: rgba(46, 111, 168, .2);
}

/* ── Provider portal card ── */
#s-provider .provider-card {
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(46, 111, 168, .30);
  border-radius: 20px;
  padding: 28px 24px;
  cursor: pointer;
  transition: border-color .15s, transform .2s, box-shadow .2s;
  display: flex;
  align-items: center;
  gap: 16px;
}
#s-provider .provider-card:hover {
  border-color: #2E6FA8;
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(46, 111, 168, .2);
}

/* ── Cards / badges with gold → blue ── */
body.oelfke-mode .ubadge.occ,
body.oelfke-mode .ubadge.pend {
  background: rgba(46, 111, 168, .18);
  color: #2E6FA8;
}

/* ── Hide .tenance-only in oelfke mode ── */
body.oelfke-mode .tenance-only {
  display: none !important;
}

/* ── Show .oelfke-only in oelfke mode ── */
body.oelfke-mode .oelfke-only {
  display: initial;
}

/* ── Upgrade / plan modal — never shows for Oelfke users ── */
body.oelfke-mode #upgradeModal {
  display: none !important;
}

/* ── Auth pages: hide brand name text (wordmark has it) ── */
body.oelfke-mode .a-bname {
  display: none !important;
}

/* ── Tenant card icon — Oelfke blue (overrides Tenance green) ── */
body.oelfke-mode .land-cards .lc:nth-child(2) .lc-ico {
  background: rgba(46, 111, 168, .13) !important;
}
body.oelfke-mode .land-cards .lc:nth-child(2) .lc-ico svg {
  stroke: #2E6FA8 !important;
}

/* ── Search bar / inputs — blue accent border ── */
body.oelfke-mode .srch { border-color: rgba(46,111,168,.3); }
body.oelfke-mode .cin:focus { border-color: rgba(46,111,168,.55); }