/* Welldone Building Intelligence — portal design system.
   Green (#3AAE3B) is the live signal (accent/focus/status only); a deeper green
   (#18792A) carries white button text at WCAG AA; black is the structure. */
:root{
  color-scheme: light;
  --brand-green:#3AAE3B; --brand-black:#111A13;
  --green-cta:#18792A; --green-cta-hover:#166B26; --green-cta-active:#0F5C20;
  --green-soft:#E8F5EA; --green-soft-line:#C5E6C9; --green-text:#16711F;
  --ink:#0E1A12; --muted:#54635A; --faint:#8A968D;
  --page:#F4F7F4; --panel:#FFFFFF; --line:#DCE3DD; --line-2:#ECF0ED; --row-hover:#FAFCFA;
  --ok-bg:#E5F4EA; --ok-ink:#14723A;
  --warn-bg:#FBF1DC; --warn-ink:#8A5A12;
  --err-bg:#FBE6E6; --err-ink:#A41C1C; --err-line:#F0C8C8;
  --danger-fill:#B81E1E;
  --dark:#0B130D; --dark-2:#122016; --dark-line:#1F3324; --dark-muted:#A9B8AE;
  --focus:#3AAE3B;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --sh-1:0 1px 2px rgba(14,26,18,.06);
  --sh-2:0 10px 28px rgba(14,26,18,.12);
  --sh-pop:0 24px 48px rgba(14,26,18,.20);
  --font-sans:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--font-sans); color:var(--ink); background:var(--page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5;}
a{color:var(--green-text);}
img{max-width:100%; display:block;}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px;}

/* buttons */
.btn{appearance:none; cursor:pointer; border:1px solid transparent; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 16px; border-radius:var(--r); font:600 15px/1 var(--font-sans); white-space:nowrap;
  transition:background .12s ease, border-color .12s ease, color .12s ease;}
.btn--primary{background:var(--green-cta); color:#fff;}
.btn--primary:hover{background:var(--green-cta-hover);}
.btn--primary:active{background:var(--green-cta-active);}
.btn--secondary{background:var(--green-soft); color:var(--green-text); border-color:var(--green-soft-line);}
.btn--secondary:hover{background:#DCEFDE;}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn--ghost:hover{background:var(--line-2);}
.btn--danger{background:var(--danger-fill); color:#fff;}
.btn--danger:hover{background:#A41C1C;}
.btn--block{width:100%; height:46px; font-size:16px;}
.btn--sm{height:34px; padding:0 12px; font-size:13px;}

.iconbtn{appearance:none;border:0;background:transparent;cursor:pointer;width:34px;height:34px;
  border-radius:var(--r-sm);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease;}
.iconbtn:hover{background:var(--line-2); color:var(--ink);}

/* form controls */
.label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.input{width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; font:400 16px/1 var(--font-sans); color:var(--ink);
  transition:border-color .12s ease, box-shadow .12s ease;}
.input:focus{outline:none; border-color:var(--brand-green); box-shadow:0 0 0 3px rgba(58,174,59,.30);}
select.input{appearance:none; padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2354635A' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;}

.pill{display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap;}
.pill .dot{width:7px;height:7px;border-radius:50%;}
.pill--ok{background:var(--ok-bg); color:var(--ok-ink);} .pill--ok .dot{background:var(--brand-green);}
.pill--warn{background:var(--warn-bg); color:var(--warn-ink);} .pill--warn .dot{background:#C9971F;}
.pill--off{background:var(--line-2); color:var(--muted);} .pill--off .dot{background:#9AA89F;}
.pill--admin{background:#E9ECEA; color:var(--brand-black);} .pill--admin .dot{background:var(--brand-black);}
.pill--client{background:var(--green-soft); color:var(--green-text);} .pill--client .dot{background:var(--brand-green);}

.chip{display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:var(--r-sm);
  background:var(--line-2); color:var(--muted); font:600 12.5px/1 var(--font-mono); white-space:nowrap;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);}

/* ============ LOGIN / SET-PASSWORD ============ */
.login{display:grid; grid-template-columns:46% 1fr; min-height:100vh;}
.login__brand{position:relative; overflow:hidden; background:var(--dark); color:#fff;
  padding:44px; display:flex; flex-direction:column; justify-content:space-between;}
.login__brand::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 46% at 82% 10%, rgba(58,174,59,.18), transparent 70%);}
.login__logo{width:262px; max-width:62%; height:auto; position:relative; z-index:2;}
.login__tag{position:relative; z-index:2; max-width:30ch;}
.login__tag h2{font-size:30px; font-weight:700; letter-spacing:-.01em; margin:0 0 8px;}
.login__tag p{color:var(--dark-muted); margin:0; font-size:16px; line-height:1.55;}
.login__foot{position:relative; z-index:2; display:flex; align-items:center; gap:10px; color:var(--dark-muted); font-size:13px;}
.login__foot .dot{width:8px;height:8px;border-radius:50%;background:var(--brand-green);}
.login__signal{position:absolute; left:-40px; bottom:-40px; width:460px; height:460px; z-index:1; opacity:.5;}
.login__panel{display:grid; place-items:center; padding:32px 24px; background:var(--panel);}
.signin{width:min(384px,100%);}
.signin__top{display:none; margin-bottom:22px;}
.signin__top img{width:230px;}
.signin h1{font-size:30px; font-weight:700; letter-spacing:-.01em; margin:0; display:inline-block;}
.signin h1::after{content:""; display:block; width:46px; height:3px; border-radius:2px; background:var(--brand-green); margin-top:10px;}
.signin .sub{color:var(--muted); margin:14px 0 22px; font-size:15px;}
.field-group{margin-bottom:14px;}
.field{position:relative;}
.field .reveal{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none;
  cursor:pointer; color:var(--green-text); font:600 13px var(--font-sans); padding:8px;}
.alert{display:flex; gap:9px; align-items:flex-start; border-radius:var(--r); padding:11px 12px; font-size:14px; margin-bottom:16px;}
.alert--err{background:var(--err-bg); color:var(--err-ink); border:1px solid var(--err-line);}
.signin .submit{margin-top:8px;}
.signin__foot{margin-top:18px; color:var(--faint); font-size:12px; display:flex; align-items:center; gap:7px;}
.signin__foot .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-green);}
@media(max-width:860px){
  .login{grid-template-columns:1fr;}
  .login__brand{display:none;}
  .signin__top{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
}

/* ============ ADMIN ============ */
.admin{min-height:100vh; display:grid; grid-template-rows:64px 1fr;}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 22px;
  background:var(--panel); border-bottom:1px solid var(--line);}
.topbar__brand{display:flex; align-items:center; gap:14px; min-width:0;}
.topbar__logo{height:30px; width:auto;}
.topbar__chip{display:grid; gap:1px; padding-left:14px; border-left:1px solid var(--line);}
.topbar__chip strong{font-size:14px; line-height:1.2;}
.topbar__chip span{font-size:12px; color:var(--muted);}
.usermenu{display:flex; align-items:center; gap:10px;}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--green-soft); color:var(--green-text);
  display:grid; place-items:center; font-size:12.5px; font-weight:700;}
.usermenu .who{font-size:13px; color:var(--muted); display:none;}
.usermenu .who b{color:var(--ink); font-weight:600;}
@media(min-width:720px){ .usermenu .who{display:block;} }
.logout-form{display:inline;}

.admin__body{display:grid; grid-template-columns:220px 1fr; min-height:0;}
.sidenav{background:var(--panel); border-right:1px solid var(--line); padding:18px 12px; display:flex; flex-direction:column; gap:2px;}
.sidenav__h{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:6px 12px 10px;}
.nav-item{text-decoration:none; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-sm);
  font:500 14px/1 var(--font-sans); color:var(--muted); position:relative;}
.nav-item:hover{background:var(--line-2); color:var(--ink);}
.nav-item.is-active{color:var(--ink); font-weight:600; background:var(--green-soft);}
.nav-item.is-active::before{content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:2px; background:var(--brand-green);}
.nav-item .count{margin-left:auto; font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums;}
.nav-item.is-active .count{color:var(--green-text);}

.content{padding:28px; overflow:auto;}
.content__wrap{max-width:1040px; margin:0 auto;}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px;}
.page-head h1{font-size:28px; font-weight:700; letter-spacing:-.01em; margin:0;}
.page-head p{margin:6px 0 0; color:var(--muted); font-size:14px; max-width:60ch;}

.table-wrap{overflow-x:auto;}
table.tbl{width:100%; border-collapse:collapse; min-width:680px;}
.tbl thead th{text-align:left; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); padding:14px 16px; border-bottom:1px solid var(--line); white-space:nowrap;}
.tbl tbody td{padding:14px 16px; border-bottom:1px solid var(--line-2); font-size:14px; vertical-align:middle;}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr:hover{background:var(--row-hover);}
.tbl .num{font-variant-numeric:tabular-nums;}
.cell-sub{display:flex; flex-direction:column;}
.cell-sub b{font-weight:600;}
.cell-sub span{color:var(--muted); font-size:13px;}
.actions-cell{text-align:right; white-space:nowrap;}
.row-actions{display:inline-flex; gap:6px; align-items:center; justify-content:flex-end;}
.row-actions form{display:inline;}
.muted{color:var(--muted);}

.empty{padding:56px 20px; text-align:center; color:var(--muted);}
.empty h3{margin:14px 0 4px; color:var(--ink); font-size:18px;}
.empty p{margin:0 0 18px; font-size:14px;}

/* flash banner */
.flash{display:flex; gap:12px; align-items:flex-start; border-radius:var(--r); padding:13px 15px; margin-bottom:18px; font-size:14px;}
.flash--ok{background:var(--ok-bg); color:var(--ok-ink);}
.flash--warn{background:var(--warn-bg); color:var(--warn-ink);}
.flash--error{background:var(--err-bg); color:var(--err-ink);}
.flash--invite{background:var(--green-soft); color:var(--ink); border:1px solid var(--green-soft-line); flex-direction:column;}
.flash__link{display:flex; gap:8px; width:100%; margin-top:8px;}
.flash__link .input{font-family:var(--font-mono); font-size:12.5px; height:40px;}

/* activity feed */
.feed__row{display:grid; grid-template-columns:30px 1fr auto; gap:14px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line-2);}
.feed__row:last-child{border-bottom:0;}
.feed__ic{width:30px;height:30px;border-radius:8px; display:grid; place-items:center; font-size:12px; font-weight:700;}
.feed__ic.ok{background:var(--ok-bg); color:var(--ok-ink);}
.feed__ic.warn{background:var(--warn-bg); color:var(--warn-ink);}
.feed__ic.err{background:var(--err-bg); color:var(--err-ink);}
.feed__ic.info{background:var(--line-2); color:var(--muted);}
.feed__txt{font-size:14px;} .feed__txt b{font-weight:600;} .feed__txt span{color:var(--muted);}
.feed__when{color:var(--faint); font-size:12.5px; white-space:nowrap;}

/* drawer */
.scrim{position:fixed; inset:0; background:rgba(11,19,13,.45); z-index:60; opacity:0; pointer-events:none; transition:opacity .18s ease;}
.scrim.open{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(440px,100%); z-index:61; background:var(--panel);
  box-shadow:var(--sh-pop); transform:translateX(100%); transition:transform .2s ease; display:flex; flex-direction:column;}
.drawer.open{transform:none;}
.drawer__head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line);}
.drawer__head h2{margin:0; font-size:19px; font-weight:700;}
.drawer__body{padding:22px; overflow:auto; flex:1; display:flex; flex-direction:column; gap:16px;}
.drawer__foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line);}
.radio-row{display:flex; gap:10px;}
.radio-card{flex:1; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; cursor:pointer; display:flex; gap:10px; align-items:flex-start;}
.radio-card:hover{background:var(--row-hover);}
.radio-card.sel{border-color:var(--brand-green); background:var(--green-soft); box-shadow:0 0 0 1px var(--brand-green) inset;}
.radio-card input{margin-top:3px; accent-color:var(--green-cta);}
.radio-card b{display:block; font-size:14px;} .radio-card small{color:var(--muted); font-size:12.5px;}
.assign-note{font-size:13px; color:var(--muted); background:var(--line-2); border-radius:var(--r); padding:11px 12px;}
.hint{font-size:12.5px; color:var(--muted); margin-top:6px;}

/* forbidden */
.center-page{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--dark);}
.notice{width:min(440px,100%); background:var(--panel); border-radius:var(--r-lg); padding:32px 30px; text-align:center; box-shadow:var(--sh-pop);}
.notice img{height:34px; width:auto; margin:0 auto 20px;}
.notice .ic{width:54px;height:54px;border-radius:14px;background:var(--warn-bg); color:var(--warn-ink); display:grid; place-items:center; margin:0 auto 14px;}
.notice h1{margin:0 0 8px; font-size:21px; font-weight:700;}
.notice p{margin:0 0 22px; color:var(--muted); font-size:14px;}
.notice .row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* set-password card (on the dark brand ground) */
.auth-card{width:min(400px,100%); background:var(--panel); border-radius:var(--r-lg); padding:30px 28px; box-shadow:var(--sh-pop);}
.auth-card img{height:32px; width:auto; margin:0 auto 18px;}
.auth-card h1{font-size:22px; font-weight:700; margin:0 0 4px; text-align:center;}
.auth-card .sub{color:var(--muted); font-size:14px; margin:0 0 20px; text-align:center;}

@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }