/* Plumbline. Sign-in follows the Ai Voice Analysis portal (navy, periwinkle button, Poppins).
   Dashboard: Asset Tree Homes indigo #28316f with gold #f4ab1c, light sheet so the grid reads like Excel. */
:root{
  color-scheme:light;
  --brand:#28316f; --brand-deep:#1c2354; --gold:#f4ab1c; --gold-pale:#ffde9c;
  --bg:#f5f6fb; --sheet:#ffffff; --line:#d9dcea; --line-strong:#aeb3cc;
  --ink:#14161f; --muted:#616161; --head:#eceef7;
  --accent:#28316f; --accent-ink:#ffffff; --sel:#e8ebf8;
  --bad:#b3261e; --bad-bg:#fbeceb; --warn:#8a5a00; --warn-bg:#fdf1d4; --good:#1f6b45;
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  /* sign-in, light */
  --a-page:#f3f4f6; --a-card:#ffffff; --a-border:#e5e7eb; --a-input-border:#d1d5db;
  --a-text:#111827; --a-label:#374151; --a-muted:#6b7280; --a-icon:#9ca3af;
  --a-primary:#505fc0; --a-primary-hover:#27316f; --a-ring:rgba(80,95,192,.28);
  --a-shadow:0 20px 25px -5px rgba(15,23,42,.1),0 8px 10px -6px rgba(15,23,42,.1);
  --a-err-bg:#fef2f2; --a-err-border:#fecaca; --a-err:#dc2626;
}
html.auth-dark{
  --a-page:#142239; --a-card:#142239; --a-border:#274363; --a-input-border:#274363;
  --a-text:#e7eef9; --a-label:#e7eef9; --a-muted:#93a9c9; --a-icon:#93a9c9;
  --a-primary:#6675d6; --a-primary-hover:#7d89d9; --a-ring:rgba(102,117,214,.45);
  --a-shadow:0 4px 8px rgba(2,6,23,.64),0 26px 46px rgba(2,6,23,.58);
  --a-err-bg:rgba(248,113,113,.14); --a-err-border:rgba(248,113,113,.4); --a-err:#fca5a5;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:13px/1.4 var(--sans)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
[hidden]{display:none!important}

/* ---------- sign-in ---------- */
.auth{position:relative;min-height:100%;background:var(--a-page);color:var(--a-text);display:flex;flex-direction:column;align-items:center;padding:48px 16px 32px;font-size:14px}
html.auth-dark .auth{color-scheme:dark}
.theme{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:1px solid var(--a-input-border);background:transparent;color:var(--a-muted);display:grid;place-items:center;cursor:pointer}
.theme:hover{color:var(--a-text)}
.theme svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme .moon{display:none}
html:not(.auth-dark) .theme .sun{display:none}
html:not(.auth-dark) .theme .moon{display:block}
.auth-logo{padding-bottom:24px}
.auth-logo img{width:280px;max-width:72vw;height:auto;display:block}
.auth-logo .for-light{display:none}
html:not(.auth-dark) .auth-logo .for-light{display:block}
html:not(.auth-dark) .auth-logo .for-dark{display:none}
.card{width:100%;max-width:448px;background:var(--a-card);border:1px solid var(--a-border);border-radius:20px;box-shadow:var(--a-shadow);padding:32px}
.card-head{text-align:center;margin-bottom:28px}
.card-head h1{font-size:24px;font-weight:700;margin:0 0 8px;color:var(--a-text);letter-spacing:-.01em}
.card-head p{margin:0;color:var(--a-muted);font-size:13.5px;text-wrap:balance}
.field{margin-bottom:20px}
.field label{display:block;font-size:14px;font-weight:500;color:var(--a-label);margin-bottom:8px}
.in{position:relative}
.in > svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;fill:none;stroke:var(--a-icon);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.in input{width:100%;padding:12px 48px 12px 48px;border:1px solid var(--a-input-border);border-radius:10px;background:transparent;color:var(--a-text);font-size:15px;transition:border-color .15s,box-shadow .15s}
.in input::placeholder{color:var(--a-icon)}
.in input:focus{outline:none;border-color:var(--a-primary);box-shadow:0 0 0 3px var(--a-ring)}
.eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--a-icon);cursor:pointer;padding:4px;display:grid;place-items:center;border-radius:6px}
.eye:hover,.eye[aria-pressed="true"]{color:var(--a-text)}
.eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.primary{width:100%;margin-top:8px;padding:14px;border:0;border-radius:10px;background:var(--a-primary);color:#fff;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 4px 6px -1px rgba(15,23,42,.18);transition:background .15s,box-shadow .15s}
.primary:hover{background:var(--a-primary-hover);box-shadow:0 10px 15px -3px rgba(15,23,42,.22)}
.primary:disabled{opacity:.55;cursor:not-allowed}
.link{display:block;margin:12px auto 0;border:0;background:transparent;color:var(--a-muted);cursor:pointer;text-decoration:underline}
.alert{margin-bottom:16px;padding:12px;border:1px solid var(--a-err-border);background:var(--a-err-bg);color:var(--a-err);border-radius:10px;font-size:13.5px}
.shield{width:60px;height:60px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;background:color-mix(in srgb,var(--a-primary),transparent 82%)}
.shield svg{width:30px;height:30px;fill:none;stroke:var(--a-primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.steps{margin:0 0 16px;padding-left:20px;color:var(--a-label);font-size:13.5px;display:grid;gap:4px}
.qr{display:grid;place-items:center;margin-bottom:12px}
.qr img{width:180px;height:180px;background:#fff;padding:10px;border-radius:12px;border:1px solid var(--a-border)}
.secret{text-align:center;color:var(--a-muted);font-size:12.5px;margin:0 0 20px;word-break:break-all}
.secret code{font-family:var(--mono);color:var(--a-text);font-size:13px;letter-spacing:.06em}
.copybtn{border:1px solid var(--a-input-border);background:transparent;color:var(--a-text);border-radius:6px;padding:1px 8px;font-size:12px;cursor:pointer;margin-left:4px}
.in input.otp{font-family:var(--mono);font-size:20px;letter-spacing:.5em;text-align:center;padding-right:16px}
.copy{text-align:center;color:var(--a-muted);font-size:13px;margin:28px 0 0}
@media (max-width:480px){.card{padding:24px 20px}.auth{padding-top:64px}}

/* ---------- dashboard ---------- */
.app{display:grid;grid-template-columns:220px minmax(0,1fr);height:100%}
.menu{background:var(--brand);color:#fff;overflow-y:auto;display:flex;flex-direction:column}
.brand{padding:12px 14px 10px;background:var(--sheet);border-bottom:3px solid var(--gold);border-right:1px solid var(--line)}
.brand img{height:auto;width:110px;display:block}
.brand strong{display:block;color:var(--brand);font-size:16px;font-weight:600;margin-top:8px;line-height:1.2}
.brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.menu h2{margin:0;padding:12px 14px 4px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-pale)}
.menu a{display:flex;justify-content:space-between;gap:8px;padding:6px 14px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1);border-left:3px solid transparent}
.menu a:hover{background:var(--brand-deep)}
.menu a[aria-current="page"]{background:var(--brand-deep);border-left-color:var(--gold);font-weight:600}
.menu a span{font-family:var(--mono);font-size:12px;color:var(--gold-pale)}

.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--sheet)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 12px;border-bottom:1px solid var(--line-strong)}
.bar h1{margin:0;font-size:15px;font-weight:600;margin-right:auto;color:var(--brand)}
.who{color:var(--muted);font-size:12px}
.tools{display:flex;flex-wrap:wrap;gap:6px 8px;padding:6px 12px;border-bottom:1px solid var(--line);background:var(--bg)}
.tools label{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12px}
.tools input,.tools select,.detail input[type=text],.detail select,.cellin{background:var(--sheet);border:1px solid var(--line-strong);padding:4px 6px;border-radius:0;min-height:28px}
.tools input[type=search]{width:190px}
.cellin{min-height:24px;padding:2px 6px;width:180px}

.grid{flex:1;overflow:auto;min-height:260px}
table{border-collapse:collapse;width:max-content;min-width:100%;font-variant-numeric:tabular-nums}
th,td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 8px;white-space:nowrap;text-align:left;height:27px}
thead th{position:sticky;top:0;z-index:2;background:var(--head);color:var(--brand);border-bottom:2px solid var(--brand);font-weight:600;font-size:12px;cursor:pointer;user-select:none}
thead th:hover{background:var(--sel)}
thead th[aria-sort="ascending"]::after{content:" \25B2";font-size:9px;color:var(--gold)}
thead th[aria-sort="descending"]::after{content:" \25BC";font-size:9px;color:var(--gold)}
td.n,th.n{text-align:right}
td.n{font-family:var(--mono);font-size:12px}
td.rn,th.rn{background:var(--head);color:var(--muted);text-align:center;font-family:var(--mono);font-size:11.5px;width:42px;cursor:default;border-right:1px solid var(--line-strong)}
td.m{font-family:var(--mono);font-size:12px}
td.mail,th.mail{text-align:center;cursor:default}
.ic{border:1px solid var(--line-strong);background:var(--sheet);color:var(--brand);cursor:pointer;min-width:28px;height:21px;padding:0 5px;font-size:13px;line-height:1}
.ic:hover{background:var(--gold);border-color:var(--gold)}
.cnt{font-family:var(--mono);font-size:11px;color:var(--warn);margin-left:4px;font-weight:600}
tbody tr.row{cursor:pointer}
tbody tr.row:hover td:not(.rn){background:var(--sel)}
tbody tr.open td:not(.rn){background:var(--sel);border-bottom-color:var(--line-strong)}
td.fake{color:var(--bad);background:var(--bad-bg);font-weight:600}
td.num{color:var(--warn);background:var(--warn-bg);font-weight:600}
td.ok{color:var(--good)}
td.pend{color:var(--muted)}
td.low{color:var(--bad);font-weight:600}
td.remark{max-width:260px;overflow:hidden;text-overflow:ellipsis}
td.wrap{white-space:normal;max-width:420px}
tr.add td{background:var(--bg)}
.empty td{padding:18px 12px;color:var(--muted);white-space:normal}

tr.detail td{padding:0;white-space:normal;background:var(--bg)}
.detail dl{margin:0;display:grid;grid-template-columns:170px minmax(0,1fr);max-width:920px;border-left:3px solid var(--gold)}
.detail dt,.detail dd{margin:0;padding:6px 10px;border-bottom:1px solid var(--line)}
.detail dt{color:var(--muted);border-right:1px solid var(--line);font-size:12px}
.detail dd{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.detail dd.col{flex-direction:column;align-items:flex-start;flex-wrap:nowrap}
.detail dd.col input[type=text]{width:100%;max-width:560px}
.detail input[type=text]{flex:1;min-width:200px}
.rc{display:flex;gap:7px;align-items:center;cursor:pointer}
.rc span{color:var(--muted);font-family:var(--mono);font-size:12px}
.btn{border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);padding:4px 12px;min-height:28px;cursor:pointer;font-weight:500}
.btn:hover{background:var(--brand-deep)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--sel)}
.btn.sm{min-height:23px;padding:1px 9px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.note{color:var(--muted);font-size:12px}

.status{display:flex;flex-wrap:wrap;gap:4px 18px;padding:5px 12px;border-top:2px solid var(--brand);background:var(--head);font-size:12px;color:var(--muted)}
.status b{color:var(--brand);font-family:var(--mono);font-weight:500}

@media (max-width:760px){
  html,body{height:auto}
  .app{display:block;height:auto}
  .menu{flex-direction:row;overflow-x:auto;border-bottom:3px solid var(--gold)}
  .brand,.menu h2{display:none}
  .menu a{border-bottom:0;border-left:0;border-right:1px solid rgba(255,255,255,.12);border-top:3px solid transparent;white-space:nowrap;padding:8px 12px}
  .menu a[aria-current="page"]{border-top-color:var(--gold)}
  .grid{max-height:70vh}
  .detail dl{grid-template-columns:110px minmax(0,1fr)}
  .tools input[type=search]{width:150px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}