/* OISHI Hub v1.9 — top bar, the office menu on the left (Property Management's O layout), app tiles */
:root{
  --indigo:#1f2a5a; --indigo-deep:#141c3f; --paper:#f7f6f2; --ink:#1b1b1f;
  --ink-soft:#5a5d6b; --line:#dcdad2; --shu:#c8412b; --shu-ink:#fff;
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font:16px/1.5 var(--font)}
a{color:inherit}
:focus-visible{outline:3px solid var(--shu);outline-offset:2px}

/* login */
body.login{display:grid;place-items:center;padding:24px}
.login-card{background:#fff;border:1px solid var(--line);border-top:6px solid var(--indigo);padding:36px 40px 28px;width:min(420px,100%);border-radius:8px}
.login-card h1{margin:0 0 6px;font-size:28px;font-weight:600}
.lede{margin:0 0 24px;color:var(--ink-soft)}
.login-card label{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:14px}
.login-card input{display:block;width:100%;margin-top:6px;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:6px}
.login-card button{width:100%;margin-top:6px;background:var(--shu);color:#fff;border:0;font:inherit;font-weight:600;padding:12px;border-radius:6px;cursor:pointer}
.login-card button:hover{background:#b0361f}
.err{background:#fbe9e5;border:1px solid #efb8ad;color:#7a2416;padding:10px 12px;border-radius:6px;margin:0 0 16px}
.foot{margin:20px 0 0;font-size:13px;color:var(--ink-soft)}
.login-card img.logo{display:block;max-height:64px;max-width:240px;margin:0 auto 14px}

/* ---------- v1.9 portal: top bar, menu column (272 px), stage ---------- */
body.portal{
  --bg2:#fff; --soft:#efede6; --dim:#6b6e7a; --line2:#cfccc2; --accent-ink:#fff;
  --tin:#1f8f4d; --tcur:#2f54c8; --tout:#d9771b; --core:#0e7c7b; --rep:#7b3fb5; --inag:#a3122f; --outag:#5b6678;
  display:grid; grid-template-columns:272px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); min-height:100vh; height:auto;
}
@media (prefers-color-scheme:dark){
  body.portal{
    --paper:#15171c; --ink:#e7e8ec; --ink-soft:#a5a9b6; --line:#2c3039; --bg2:#1c1f26; --soft:#262a33; --dim:#9aa0ad; --line2:#3a3f4a; --accent-ink:#0f1115;
    --tin:#4fc47f; --tcur:#7c9cff; --tout:#f0a04b; --core:#3cbcba; --rep:#b88cf0; --inag:#ff6b86; --outag:#9aa6bd;
  }
  body.portal .office select{background:var(--bg2);color:var(--ink);border-color:var(--line2)}
}
.topbar{grid-column:1 / -1; display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--indigo); color:#fff; padding:10px 20px; min-height:58px}
.tb-brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-size:22px; font-weight:600; letter-spacing:.01em}
.tb-brand span{font-weight:300; opacity:.75; margin-left:.3em}
.tb-brand img.logo{max-height:36px; max-width:120px; background:#fff; border-radius:5px; padding:2px}
.tb-right{margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:14px}
.tb-office{opacity:.85}
.tb-who{display:flex; align-items:center; gap:8px}
.topbar .avatar{width:30px; height:30px; border-radius:50%; background:#fff; color:var(--indigo); display:grid; place-items:center; font-size:14px; font-weight:700}
.tb-link{color:#fff; opacity:.85; text-decoration:none}
.tb-link:hover{opacity:1; text-decoration:underline}
.tb-ver{font-size:12px; opacity:.5}
.topbar .office{display:flex; flex-direction:row; align-items:center; gap:6px; margin:0}
.topbar .office label{color:#fff; opacity:.75; font-size:13px}
.topbar .office select{font:inherit; font-size:14px; padding:4px 8px; border-radius:6px; border:0}
.menubtn{display:none; font:600 15px/1 var(--font); color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); border-radius:8px; padding:8px 12px; cursor:pointer}

.stage{grid-column:2; padding:36px 44px; max-width:none; min-width:0}
.office-line{margin:0 0 14px;color:var(--ink-soft)}
.stage h1{font-weight:600;line-height:1.15;margin:0 0 10px;letter-spacing:-.01em}
.blurb{font-size:17px;color:var(--ink-soft);margin:0 0 28px;max-width:60ch}
.stage:focus{outline:none}
.stage h1{font-size:32px}
.tiles-h{font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:8px 0 12px}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; max-width:980px}
.tile{display:flex; flex-direction:column; gap:6px; text-decoration:none; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:16px 18px; min-height:118px}
.tile:hover{border-color:var(--indigo)}
.tile-name{font-size:17px; font-weight:600}
.tile-blurb{font-size:14px; color:var(--ink-soft); flex:1}
.tile-open{font-size:14px; font-weight:600; color:var(--shu)}

/* the menu (Property Management's O layout, v.16-v.20) */
.omenu{-webkit-tap-highlight-color:transparent; grid-column:1; grid-row:2; min-width:0; overflow:auto; overscroll-behavior:contain; background:var(--bg2); border-right:1px solid var(--line); padding:10px 8px 24px; font-family:var(--font)}
.ohead{display:flex; align-items:baseline; justify-content:space-between; padding:2px 8px 8px; font-size:12px; color:var(--dim)}
.ohead b{color:var(--ink); font-size:13px; letter-spacing:.3px; text-transform:uppercase; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.oempty{padding:6px 10px; color:var(--dim); font-size:14px}
.ocat{--oc:var(--indigo); margin-bottom:4px; border-radius:10px}
.ocat.o-tin{--oc:var(--tin)} .ocat.o-tcur{--oc:var(--tcur)} .ocat.o-tout{--oc:var(--tout)} .ocat.o-core{--oc:var(--core)}
.ocat.o-rep{--oc:var(--rep)} .ocat.o-inag{--oc:var(--inag)} .ocat.o-outag{--oc:var(--outag)}
.ocat.open{background:color-mix(in srgb, var(--oc) 7%, transparent); box-shadow:inset 3px 0 0 var(--oc); padding-bottom:6px}
.omenu button{font:inherit; color:var(--ink); background:none; border:0; width:100%; text-align:left; cursor:pointer; display:flex; align-items:center; gap:8px; border-radius:8px}
.omenu button:focus-visible, .omenu a:focus-visible{outline:3px solid var(--oc, var(--shu)); outline-offset:-2px; background:var(--soft)}
.ocb{padding:9px 10px; font-weight:700; font-size:15px}
.ocb:hover{background:color-mix(in srgb, var(--oc) 12%, transparent)}
.ocb .on{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; background:var(--oc); color:var(--accent-ink); font-size:12px; flex:0 0 auto}
.ocb .ol{flex:1}
.omenu .arr{color:var(--dim); font-size:12px; width:12px; flex:0 0 auto}
.oblurb{font-size:12px; color:var(--dim); padding:0 10px 6px 40px; line-height:1.35}
.ogrp{margin-left:18px}
.ogb{padding:6px 8px; font-weight:600; font-size:13.5px}
.ogb:hover{background:var(--soft)}
.ogb .gl{flex:1}
.ogb .cnt{margin-left:auto; color:var(--dim); font-weight:400; font-size:12px}
.oitems{margin:2px 0 6px 20px; border-left:2px solid color-mix(in srgb, var(--oc) 40%, var(--line)); display:flex; flex-direction:column}
.oib{display:block; padding:6px 10px; font-size:13.5px; color:var(--ink); text-decoration:none; border-radius:0 8px 8px 0; line-height:1.3}
.oib:hover{background:color-mix(in srgb, var(--oc) 12%, transparent)}
.oib.active{background:var(--oc); color:var(--accent-ink); font-weight:600}
[hidden]{display:none !important}

/* phones (<= 760 px): the menu is a drawer behind ☰ Menu; nothing scrolls sideways */
@media (max-width:760px){
  body.portal{grid-template-columns:minmax(0,1fr)}
  .menubtn{display:inline-flex}
  .topbar{padding:8px 12px; gap:8px 10px}
  .tb-brand{font-size:19px}
  .tb-right{gap:8px 12px; font-size:13px; width:100%; margin-left:0}
  .tb-name, .tb-ver{display:none}
  .stage{grid-column:1; padding:20px 16px}
  .stage h1{font-size:26px}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .omenu{display:none}
  body.menu-open .omenu{display:block; position:fixed; z-index:30; left:0; right:0; top:var(--menu-top,56px); bottom:0; border-right:0; border-top:1px solid var(--line); padding-bottom:calc(24px + env(safe-area-inset-bottom)); box-shadow:0 12px 30px rgba(0,0,0,.25)}
  .omenu button, .oib{min-height:40px}
  .ocb{font-size:16px} .ogb, .oib{font-size:15px}
  .oib{display:flex; align-items:center}
}
@media (prefers-reduced-motion:no-preference){ .open,.tile,.oib,.ocb,.ogb{transition:background .12s, border-color .12s} }