/* aqargo admin portal — Paper & Crimson, the shipped brand system.
   Red is a scalpel: one primary action per screen, under 10% of pixels.
   Never pure black. Latin numerals in both languages. Borders over shadows. */

:root{
  --paper:#FAFAF8; --soft:#F7F6F4; --raised:#FFFFFF;
  --ink:#171717; --muted:#707070; --dim:#8A8A88;
  --line:#E6E4E1; --line-soft:#EFEDEA;
  --red:#C0272D; --red-ink:#C0272D; --red-dk:#8E1F23; --red-tint:#FAE9E9;
  --ok-ink:#2A6B45; --ok-tint:#EAF3ED; --ok-line:#BFDCC9;
  --warn-ink:#8A5E0D; --warn-tint:#FBF3E2; --warn-line:#E7D6AC;
  --r-sm:12px; --r-md:14px; --r-lg:24px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#121212; --soft:#1A1A1A; --raised:#1E1E1E;
    --ink:#E8E8E6; --muted:#9A9A98; --dim:#7A7A78;
    --line:#2A2A2A; --line-soft:#242424;
    /* Brand red as text fails contrast on dark — #E8686C is the verified swap. */
    --red-ink:#E8686C; --red-dk:#A82228; --red-tint:#2A1618;
    --ok-ink:#7FC79B; --ok-tint:#15251B; --ok-line:#2C4735;
    --warn-ink:#DDB765; --warn-tint:#241E12; --warn-line:#463A22;
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6;
  font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.num{direction:ltr; unicode-bidi:embed; font-variant-numeric:lining-nums tabular-nums;}

/* ------------------------------------------------------------------ shell */
.app{display:grid; grid-template-columns:216px 1fr; min-height:100vh;}
.side{
  background:var(--soft); border-inline-end:1px solid var(--line);
  padding:18px 12px; display:flex; flex-direction:column; gap:22px;
  position:sticky; top:0; height:100vh;
}
.brand{padding:0 8px; font-weight:700; font-size:1.02rem; letter-spacing:-.02em;
       text-decoration:none; direction:ltr;}
.brand i{font-style:normal; color:var(--red-ink);}
.nav{display:flex; flex-direction:column; gap:2px;}
.nav a{display:flex; align-items:center; justify-content:space-between; gap:8px;
       padding:9px 11px; border-radius:9px; color:var(--muted);
       text-decoration:none; font-size:.9rem;}
.nav a:hover{color:var(--ink);}
.nav a.on{background:var(--raised); color:var(--ink); font-weight:600;
          border:1px solid var(--line);}
.nav .ct{font-size:.75rem; color:var(--dim);}
.whoami{margin-top:auto; padding:11px; border:1px solid var(--line);
        border-radius:10px; font-size:.79rem; color:var(--muted); background:var(--raised);}
.whoami b{display:block; color:var(--ink); font-size:.87rem; font-weight:600;}
.linkish{background:none; border:0; padding:6px 0 0; color:var(--muted);
         font:inherit; font-size:.79rem; cursor:pointer; text-decoration:underline;}
.linkish:hover{color:var(--ink);}

.work{padding:24px clamp(16px,2.4vw,30px) 72px; display:flex; flex-direction:column;
      gap:20px; min-width:0;}
.worktop{display:flex; align-items:center; justify-content:space-between; gap:14px;
         flex-wrap:wrap;}
.worktop h1{margin:0; font-size:1.35rem; font-weight:700; letter-spacing:-.02em;}
.worktop .sub{margin:2px 0 0; font-size:.85rem; color:var(--muted);}

/* ------------------------------------------------------------------- bits */
h2.section{margin:6px 0 0; font-size:1.05rem; font-weight:700; letter-spacing:-.01em;}
.btn{font:inherit; font-weight:600; font-size:.88rem; border-radius:var(--r-sm);
     padding:10px 17px; border:1px solid var(--line); background:var(--raised);
     color:var(--ink); cursor:pointer; text-decoration:none;
     display:inline-flex; align-items:center; justify-content:center; gap:7px;}
.btn:hover{border-color:var(--dim);}
.btn.primary{background:var(--red); border-color:var(--red); color:#fff;}
.btn.primary:hover{background:var(--red-dk); border-color:var(--red-dk);}
.btn.quiet{background:transparent;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.small{padding:6px 12px; font-size:.8rem;}

.pill{padding:4px 10px; border-radius:999px; font-weight:600; font-size:.68rem;
      letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
      border:1px solid transparent; display:inline-block;}
.pill.ok{background:var(--ok-tint); color:var(--ok-ink); border-color:var(--ok-line);}
.pill.warn{background:var(--warn-tint); color:var(--warn-ink); border-color:var(--warn-line);}
.pill.mute{background:var(--soft); color:var(--muted); border-color:var(--line);}
.pill.bad{background:var(--red-tint); color:var(--red-dk); border-color:var(--red-tint);}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:11px;}
.kpi{border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px;
     background:var(--raised); display:flex; flex-direction:column; gap:1px;}
.kpi .n{font-size:1.45rem; font-weight:600; letter-spacing:-.02em; direction:ltr;}
.kpi .n.ok{color:var(--ok-ink);} .kpi .n.warn{color:var(--warn-ink);}
.kpi .l{font-size:.76rem; color:var(--muted); line-height:1.35;}

.tablewrap{border:1px solid var(--line); border-radius:var(--r-sm); overflow-x:auto;
           background:var(--raised);}
table{border-collapse:collapse; width:100%; min-width:760px; font-size:.87rem;}
th{text-align:start; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
   color:var(--muted); font-weight:600; padding:11px 13px;
   border-bottom:1px solid var(--line); white-space:nowrap; background:var(--soft);}
td{padding:11px 13px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
tr:last-child td{border-bottom:0;}
td.num{direction:ltr; white-space:nowrap;}
tbody tr:hover{background:var(--soft);}
td a{font-weight:600; text-decoration:none;}
td a:hover{text-decoration:underline;}

.meter{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
       border:1px solid var(--line); border-radius:var(--r-sm); background:var(--raised);
       padding:14px 16px;}
.bar{flex:1 1 200px; height:7px; border-radius:99px; background:var(--soft);
     overflow:hidden; min-width:140px; border:1px solid var(--line);}
.bar i{display:block; height:100%; background:var(--ok-ink);}
.meter .txt{font-size:.85rem; color:var(--muted);}
.meter .txt b{color:var(--ink); font-weight:600;}
.meter .outstanding{flex:1 1 100%; font-size:.83rem; color:var(--muted);}

.note{border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 16px;
      font-size:.86rem; line-height:1.6; background:var(--raised);}
.note b{font-weight:600;}
.note.warn{background:var(--warn-tint); border-color:var(--warn-line); color:var(--warn-ink);}
.note.bad{background:var(--red-tint); border-color:var(--red-tint); color:var(--red-dk);}
.note.ok{background:var(--ok-tint); border-color:var(--ok-line); color:var(--ok-ink);}
.note ul{margin:6px 0 0; padding-inline-start:18px;}

.empty{border:1px dashed var(--line); border-radius:var(--r-md); padding:40px 24px;
       text-align:center; color:var(--muted); background:var(--raised);}
.empty h3{margin:0 0 6px; color:var(--ink); font-size:1rem;}
.empty p{margin:0 0 16px; font-size:.88rem;}

/* ------------------------------------------------------------------- form */
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;}
fieldset{border:1px solid var(--line); border-radius:var(--r-sm); padding:0; margin:0;
         background:var(--raised);}
legend{margin-inline-start:14px; padding:0 8px; font-size:.68rem; font-weight:600;
       letter-spacing:.1em; text-transform:uppercase; color:var(--red-ink);}
.fields{padding:8px 16px 16px; display:flex; flex-direction:column; gap:12px;}
.f{display:flex; flex-direction:column; gap:5px;}
.f label{font-size:.77rem; color:var(--muted);}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.f3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
input[type=text], input[type=number], input[type=date], input[type=email],
input[type=password], select, textarea{
  border:1px solid var(--line); border-radius:9px; background:var(--paper);
  padding:9px 11px; font:inherit; font-size:.87rem; color:var(--ink); width:100%;
  min-height:38px;
}
textarea{min-height:74px; resize:vertical; line-height:1.5;}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--red); outline-offset:1px;
}
.hint{font-size:.73rem; color:var(--dim); line-height:1.45;}
.req{color:var(--red-ink);}
.opt{color:var(--dim); font-size:.7rem;}
.calc{border:1px solid var(--ok-line); background:var(--ok-tint); color:var(--ok-ink);
      border-radius:9px; padding:9px 11px; font-size:.85rem; font-weight:600;
      min-height:38px; display:flex; align-items:center; direction:ltr;}
.survey-missing{border-color:var(--warn-line); background:var(--warn-tint);}

.uses{display:flex; flex-direction:column; gap:14px; padding:14px 16px 16px;}
.usegroup h4{margin:0 0 8px; font-size:.78rem; font-weight:600; color:var(--muted);}
.chips{display:flex; flex-wrap:wrap; gap:7px;}
.chip{display:inline-flex; align-items:center; gap:7px; font-size:.83rem;
      padding:6px 12px; border-radius:9px; border:1px solid var(--line);
      background:var(--paper); cursor:pointer;}
.chip input{margin:0; accent-color:var(--red);}
.chip:has(input:checked){border-color:var(--ok-line); background:var(--ok-tint);
                         color:var(--ok-ink); font-weight:600;}
.chip .prov{color:var(--dim); font-size:.7rem;}

.stickybar{position:sticky; bottom:0; display:flex; gap:10px; align-items:center;
           flex-wrap:wrap; background:var(--paper); border-top:1px solid var(--line);
           padding:14px 0 0; margin-top:4px;}
.stickybar .spacer{flex:1 1 auto;}

.docrow{display:grid; grid-template-columns:1.1fr .9fr .8fr .8fr auto; gap:10px;
        align-items:center; padding:11px 0; border-bottom:1px solid var(--line-soft);
        font-size:.86rem;}
.docrow:last-of-type{border-bottom:0;}
.docrow .k{font-weight:600;}
.docadd{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; align-items:end;
        padding-top:14px; border-top:1px solid var(--line);}

/* ------------------------------------------------------------------ intake */
/* The owner conversation, nine steps. One page; the script only hides the steps
   that are not current, so with it off the whole form is still there. */
.intake{display:flex; flex-direction:column; gap:18px;}
.intake .worktop{align-items:flex-start;}
.lbl-primary{color:var(--ink); font-weight:600;}
.lbl-second{color:var(--dim); font-size:.72rem; margin-inline-start:6px;}
.qtext{margin:0; font-size:.98rem; font-weight:600; line-height:1.5;}
.qwhy{margin:0 0 4px; font-size:.81rem; color:var(--muted); line-height:1.6;}
legend .qn{color:var(--dim); margin-inline-end:6px;}

.steplist{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.steplist li{display:inline-flex; align-items:center; gap:7px; font-size:.78rem;
             color:var(--muted); border:1px solid var(--line); border-radius:999px;
             padding:5px 12px; background:var(--raised); cursor:pointer;}
.steplist li .num{color:var(--dim); font-size:.72rem;}
.steplist li.on{border-color:var(--red); color:var(--ink); font-weight:600;}
.steplist li.done{color:var(--ok-ink); border-color:var(--ok-line); background:var(--ok-tint);}
.step{display:block;}
.step[hidden]{display:none;}

/* An internal field is marked at the point of entry, not only in a comment. */
.f.internal input, .f.internal select{border-color:var(--warn-line); background:var(--warn-tint);}
.internal-mark{color:var(--warn-ink);}

/* A password shown exactly once. It has to be readable and obviously copyable. */
.credential dl{margin:10px 0 8px; display:flex; flex-direction:column; gap:4px;}
.credential dl > div{display:flex; gap:10px; font-size:.88rem;}
.credential dt{min-width:88px; color:var(--muted);}
.credential dd{margin:0; font-weight:600;}
.credential .secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                    font-size:1rem; letter-spacing:.02em; user-select:all;
                    background:var(--raised); border:1px solid var(--ok-line);
                    border-radius:8px; padding:3px 9px;}
/* The applications queue. One card per landlord waiting on an answer, because each is
   a decision rather than a row to scan past. */
.note.ok .secret{display:inline-block; margin:8px 0 4px;
                 font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                 font-size:1rem; letter-spacing:.02em; user-select:all;
                 background:var(--raised); border:1px solid var(--ok-line);
                 border-radius:8px; padding:4px 10px;}
.stack{display:flex; flex-direction:column; gap:14px;}
.stack fieldset{margin:0;}

.whoami .linkish{display:inline-block; margin-inline-end:10px;}

.loginrow{display:grid; grid-template-columns:1.4fr 1.6fr auto auto; gap:10px;
           align-items:center; padding:11px 0;
           border-bottom:1px solid var(--line-soft); font-size:.86rem;}
.loginrow:last-of-type{border-bottom:0;}
.loginrow .sub2{display:block; font-size:.75rem; color:var(--dim);}
.inlineform{display:flex; gap:6px; align-items:center;}
.inlineform input{min-height:34px; font-size:.83rem;}
@media (max-width:980px){ .loginrow{grid-template-columns:1fr;} }

/* ------------------------------------------------------------------ signin */
.signin{min-height:100vh; display:flex; align-items:center; justify-content:center;
        padding:24px;}
.signin form{width:100%; max-width:360px; border:1px solid var(--line);
             border-radius:var(--r-md); background:var(--raised); padding:28px;
             display:flex; flex-direction:column; gap:14px;}
.signin .brand{padding:0; font-size:1.3rem;}
.signin p.lead{margin:0; font-size:.86rem; color:var(--muted);}

/* --------------------------------------------------------------- responsive
   Below 1100px the sidebar stops being a column and becomes a bar.

   It used to stack as a full-width column — brand, five links, and the account
   box — roughly 300px of navigation sitting above the content. On an iPad in
   portrait that is most of the viewport, so the page opened on the navigation
   and "Add unit" was below the fold: present in the DOM, invisible in the room.

   1100 and not 980 because an iPad in landscape is 1024px CSS pixels and was
   getting the full desktop layout on a device with no mouse. */
@media (max-width:1100px){
  .app{grid-template-columns:1fr;}
  .side{
    position:sticky; top:0; z-index:20; height:auto;
    flex-direction:row; align-items:center; flex-wrap:wrap; gap:10px;
    padding:10px clamp(14px,2.4vw,22px);
    border-inline-end:0; border-bottom:1px solid var(--line);
  }
  .nav{flex-direction:row; flex-wrap:wrap; gap:4px; flex:1 1 auto;}
  .nav a{padding:8px 12px;}
  .whoami{margin-top:0; margin-inline-start:auto; padding:6px 10px; border:0;
          background:transparent; display:flex; align-items:center; gap:10px;
          font-size:.76rem;}
  .whoami b{display:inline; font-size:.8rem;}
  .whoami > span{display:none;}   /* the role line; the visible nav already says it */
  .work{padding-top:18px;}
}

/* Two columns of form fields stop helping once each one is under ~300px. */
@media (max-width:760px){
  .formgrid{grid-template-columns:1fr;}
  .f2, .f3{grid-template-columns:1fr;}
  .docadd{grid-template-columns:1fr;}
  .kpis{grid-template-columns:1fr 1fr;}
  .docrow{grid-template-columns:1fr; gap:5px;}
  .docrow form{justify-self:start;}
  .worktop h1{font-size:1.2rem;}
}

/* Phone. The primary action becomes thumb-sized rather than a link-sized target
   floating at the end of a heading. */
@media (max-width:480px){
  .work{padding:16px 14px 64px; gap:16px;}
  .worktop{align-items:stretch;}
  .worktop > .btn{width:100%;}
  .kpis{grid-template-columns:1fr 1fr;}
  .nav{width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .nav a{white-space:nowrap;}
  .stickybar{gap:8px;}
  .stickybar .btn{flex:1 1 auto;}
  /* 44px is the smallest target a thumb hits reliably, and these are filled in
     standing in a warehouse. */
  .btn{min-height:44px;}
  input[type=text], input[type=number], input[type=date], input[type=email],
  input[type=password], select{min-height:44px; font-size:16px;}
  /* 16px is not a style choice: iOS Safari zooms the page on focus for anything
     smaller, and the layout never comes back. */
}