/* RentalKey design tokens
   paper #FFFFFF · sky #EAF1FB · ink #1B2A41 · blue #1D5FC2 · deep #123E8A
   orange #F57A1F · amber #FFF3E8 · line #D9E2EF · slate #5B6B85 */
:root{
  --paper:#fff; --sky:#EAF1FB; --ink:#1B2A41; --blue:#1D5FC2; --deep:#123E8A;
  --orange:#F57A1F; --amber:#FFF3E8; --line:#D9E2EF; --slate:#5B6B85;
  --r:12px; --shadow:0 2px 10px rgba(18,62,138,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:15px/1.55 Inter,system-ui,sans-serif;color:var(--ink);background:var(--paper)}
h1,h2,h3{font-family:Sora,Inter,sans-serif;color:var(--deep);line-height:1.2}
h1{font-size:26px;margin:0 0 4px}
h2{font-size:18px;margin:26px 0 10px}
.sub{color:var(--slate);margin:0 0 20px}
a{color:var(--blue)}

.shell{display:flex;min-height:100vh}
.side{width:270px;flex:0 0 270px;background:linear-gradient(180deg,var(--deep),#0D2F6B);color:#fff;padding:18px 14px;display:flex;flex-direction:column}
.brand img{width:100%;background:#fff;border-radius:12px;padding:14px 16px;display:block}
.side nav{margin-top:18px;flex:1}
.navgroup{font-family:Sora;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9DB6E4;margin:16px 8px 6px}
.navlink{display:flex;align-items:center;gap:10px;color:#E6EEFB;text-decoration:none;padding:8px 10px;border-radius:8px;font-size:14px}
.navlink:hover{background:rgba(255,255,255,.10)}
.navlink.on{background:rgba(255,255,255,.16);font-weight:600}
.kh{width:9px;height:13px;flex:0 0 9px;border-radius:50% 50% 2px 2px/60% 60% 2px 2px;background:#7FA3DF;position:relative}
.navlink.on .kh,.navlink:hover .kh{background:var(--orange)}
.logout{margin-top:10px;border-top:1px solid rgba(255,255,255,.18);border-radius:0;padding-top:12px}
.main{flex:1;min-width:0;padding:26px 30px 60px;background:var(--paper)}

.menu-toggle{display:none}
@media (max-width:860px){
  .shell{flex-direction:column}
  .side{width:100%;flex:none;display:none}
  .side.open{display:flex}
  .menu-toggle{display:block;position:fixed;top:10px;right:10px;z-index:50;background:var(--blue);color:#fff;border:0;border-radius:8px;font-size:20px;padding:6px 12px}
  .main{padding:18px 14px 60px}
}

/* Cards, tables, forms */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin-bottom:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:16px 0 22px}
.kpi{background:var(--sky);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.kpi b{font-family:Sora;font-size:24px;color:var(--deep);display:block}
.kpi.orange{background:var(--amber)}
.kpi.orange b{color:var(--orange)}
.kpi span{font-size:12px;color:var(--slate);text-transform:uppercase;letter-spacing:.06em}

table.grid{width:100%;border-collapse:collapse;background:#fff}
.grid th{font-family:Sora;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--deep);text-align:left;background:var(--sky);padding:9px 10px;border-bottom:2px solid var(--line)}
.grid td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.grid tr:hover td{background:#F7FAFF}
.grid .num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto}

form label{display:block;font-size:13px;font-weight:600;color:var(--deep);margin:10px 0 3px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus,button:focus{outline:2px solid var(--orange);outline-offset:1px}
textarea{min-height:80px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 16px}
.fgrid .wide2{grid-column:1/-1}
.check{display:flex;align-items:center;gap:8px;font-weight:400;width:fit-content;max-width:100%;cursor:pointer}   /* RK-17: only the box and its words are clickable, not the whole row */
.check input{width:auto}

.btn{display:inline-block;border:1px solid var(--blue);color:var(--blue);background:#fff;border-radius:8px;padding:8px 16px;font:600 14px Inter;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--sky)}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--deep)}
.btn.accent{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.accent:hover{filter:brightness(.94)}
.btn.small{padding:4px 10px;font-size:13px}
.btn.danger{border-color:#C43D3D;color:#C43D3D}
.btn.wide{width:100%;margin-top:14px}
.actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}

.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600}
.badge.Active,.badge.Completed,.badge.paid{background:#E4F6E8;color:#1D7A38}
.badge.Prospect,.badge.Assigned{background:var(--amber);color:var(--orange)}
.badge.Inactive,.badge.Open,.badge.unpaid{background:var(--sky);color:var(--deep)}
.badge.Emergency,.badge.High{background:#FBE4E4;color:#C43D3D}

.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:18px 0 0;flex-wrap:wrap}
.tab{padding:9px 16px;border:0;background:none;font:600 14px Inter;color:var(--slate);cursor:pointer;border-radius:8px 8px 0 0}
.tab.on{color:var(--deep);background:var(--sky);box-shadow:inset 0 -3px 0 var(--orange)}
.tabpane{display:none;padding-top:16px}
.tabpane.on{display:block}

.flash{background:#E6F4EA;border:1px solid #2E8540;color:#14532D;border-radius:8px;padding:10px 14px;margin-bottom:16px}   /* RK-101: success is green */
.flash.warn{background:var(--amber);border-color:var(--orange);color:#8A4406}
.flash.err{background:#FBE4E4;border-color:#C43D3D;color:#8A1F1F}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.searchbox{max-width:280px}

/* Modal (AP paid-status popup etc.) */
.modal-back{display:none;position:fixed;inset:0;background:rgba(18,42,65,.5);z-index:90}
.modal-back.open{display:flex;align-items:center;justify-content:center}
.modal{background:#fff;border-radius:var(--r);max-width:440px;width:92%;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.25)}

/* Login */
.login-body{background:linear-gradient(150deg,var(--sky),#fff 55%,var(--amber));min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:34px;width:360px}
.login-logo{width:100%;max-width:420px;margin:0 auto;display:block}
.login-sub{color:var(--slate);text-align:center;margin:6px 0 18px}

/* Letters print view */
.letter{max-width:720px;margin:0 auto;background:#fff;padding:40px;border:1px solid var(--line)}
@media print{ .side,.menu-toggle,.no-print{display:none!important} .main{padding:0} .letter{border:0} }
/* (the cards used to fade in from fully transparent on every page - with a save's redirect that read as a blank
   white page, RK-26; pages now change in place, see the 2026-10-18 block) */

/* --- v2: notifications, priorities, org, public site --- */
.notifybar{display:block;background:#FBE4E4;color:#C43D3D;border:1px solid #F3C3C3;border-radius:12px;
  padding:10px 16px;font-weight:600;text-decoration:none;margin-bottom:16px}
.notifybar:hover{background:#F8D6D6}
.badge.Medium{background:var(--amber);color:var(--orange)}
.badge.Low{background:var(--sky);color:var(--deep)}
.badge.overdue{background:#FBE4E4;color:#C43D3D}
.kpi.red b{color:#C43D3D}
.orgtag{font-size:12px;color:var(--slate);padding:0 18px 12px;font-weight:600;letter-spacing:.02em}

body.pub{display:block;background:var(--paper)}
.pubnav{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 5vw;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fffffff2;backdrop-filter:blur(6px);z-index:5}
.pubbrand img{height:64px;display:block}
.pubnav nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pubnav nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.pubnav nav a:hover{color:var(--blue)}
.pubmain{max-width:1080px;margin:0 auto;padding:34px 5vw 60px}
.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:center;padding:26px 0 40px}
.hero h1{font-family:Sora,sans-serif;font-size:clamp(30px,4.4vw,50px);line-height:1.12;margin:0 0 16px;color:var(--deep)}
.hero .hl{color:var(--orange)}
.hero p{font-size:17px;color:var(--slate);max-width:56ch}
.heroimg{width:100%;max-width:380px;justify-self:center}
.featgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin:8px 0 30px}
.featgrid h2{font-size:19px;margin:0 0 8px;color:var(--deep)}
.featgrid p{margin:0;color:var(--slate)}
.cta{text-align:center;padding:38px}
.cta h2{margin-top:0;color:var(--deep)}
.pubarticle{max-width:760px;margin:0 auto}
.pubarticle h1{font-family:Sora,sans-serif;color:var(--deep);font-size:clamp(26px,3.6vw,40px)}
.pubarticle h2{color:var(--deep);margin-top:26px}
.pubarticle p{line-height:1.65;color:#33415C}
.pubfoot{border-top:1px solid var(--line);text-align:center;padding:28px 5vw;color:var(--slate);font-size:14px}
.pubfoot nav{margin:10px 0}
.pubfoot a{color:var(--blue);text-decoration:none}
@media(max-width:760px){.hero{grid-template-columns:1fr}.heroimg{max-width:240px}}

/* ---- QA fixes 2026-10-15 ---- */
/* RK-9: the organization name under the logo was slate-on-navy and cramped */
.orgtag{color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.01em;line-height:1.35;padding:12px 6px 14px;margin:12px 4px 0;
  border-bottom:1px solid rgba(255,255,255,.18);overflow-wrap:anywhere;text-align:center}
.orgtag:empty{display:none}
/* RK-19: links and buttons styled .btn are the same height and size side by side */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-height:38px;line-height:1.2;vertical-align:middle;font-family:Inter,sans-serif}
.btn.small{min-height:30px}
.actions .btn{min-width:120px}
.btn[disabled],.btn.busy{opacity:.6;cursor:wait}
/* sign-in pages */
.login-title{font:600 22px Sora,sans-serif;text-align:center;margin:4px 0 6px;color:var(--deep)}
.forgot{text-align:right;margin:-4px 0 8px;font-size:13px}
.pwrules{font-size:12.5px;color:var(--slate);margin:-4px 0 10px;line-height:1.4}
.pwrules.ok{color:#1E7B3A}
.login-card{max-width:calc(100vw - 32px);box-sizing:border-box}

/* ---- QA fixes 2026-10-18 ---- */
/* RK-26: going from page to page (a save, a delete, a redirect) changes the page in place - never a blank white
   screen in between - and a bar along the top shows the server is working */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
.loadbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;overflow:hidden;background:rgba(29,95,194,.15)}
.loadbar::before{content:"";position:absolute;inset:0 auto 0 0;width:40%;background:var(--orange);animation:rk-load 1.1s ease-in-out infinite}
.loadbar[hidden]{display:none}
@keyframes rk-load{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
html.is-loading,html.is-loading *{cursor:progress!important}
@media (prefers-reduced-motion:reduce){.loadbar::before{animation:none;width:100%;opacity:.6}}

/* RK-3 / RK-22 / RK-32: required fields carry a red asterisk; the form says what it means */
.req{color:#C43D3D;font-weight:700;margin-left:2px}
.reqnote{font-size:12px;color:var(--slate);margin:0 0 4px;text-align:right}

/* RK-4: the show / hide password eye is styled in pw-toggle.css */

/* RK-34: long occupant names wrap inside their card */
ul.people{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:6px}
ul.people li{display:flex;align-items:flex-start;gap:10px;min-width:0;max-width:100%}
ul.people .who{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word;padding-top:4px}
ul.people .btn{flex:0 0 auto}
.card,.tabpane,.fgrid label{min-width:0}
.grid td{overflow-wrap:anywhere}

/* RK-41: rent schedules keep their columns whatever the notes say */
table.grid.rents{table-layout:fixed;min-width:640px}
.rents col.c-amt{width:12%}.rents col.c-acct{width:16%}.rents col.c-per{width:12%}.rents col.c-date{width:12%}
.rents col.c-notes{width:auto}.rents col.c-act{width:96px}
.rents td.notes{white-space:normal;overflow-wrap:anywhere}
.rents th.act,.rents td.act{text-align:right;white-space:nowrap}

/* RK-27: a notes box only grows or shrinks downwards, never pushes the page sideways or under its neighbours */
textarea{resize:vertical;max-width:100%;min-height:80px;display:block}
textarea.notes-box{min-height:160px}

/* RK-39: the late-charge boxes line up on one row, whatever the label */
.fgrid.late{align-items:end}
.fgrid.late label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint{font-size:12.5px;color:var(--slate);margin:6px 0 0}

/* RK-40: toolbar controls (filters, search, the "+ New" button) sit on one line at one height */
.toolbar > div:last-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toolbar select,.toolbar .searchbox{width:auto;min-width:170px;height:38px;padding-top:0;padding-bottom:0}
.toolbar .btn{height:38px;white-space:nowrap}

/* RK-20: the complex you picked stands out in the list */
.grid tr.picked td{background:var(--amber)}
#complex-detail{scroll-margin-top:12px}
#complex-detail:focus{outline:none}

/* RK-31 / RK-38: menus open below their box (or above, when there's no room), never over it, and a long name
   can't stretch them across the page. (Chrome's customizable select; other browsers keep their own menus, which
   the shortened option names already keep narrow.) */
select{max-width:100%;text-overflow:ellipsis}
@supports (appearance:base-select){
  select{appearance:base-select;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;cursor:pointer}
  select::picker-icon{color:var(--slate);transition:transform .15s}
  select:open::picker-icon{transform:rotate(180deg)}
  select::picker(select){appearance:base-select;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(18,62,138,.16);
    padding:4px 0;max-height:min(320px,55vh);max-width:min(460px,92vw);min-width:anchor-size(width);margin:4px 0;
    position-try-fallbacks:flip-block}
  select option{padding:7px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(460px,92vw)}
  select option:checked{font-weight:600;background:var(--sky)}
  select option:hover,select option:focus-visible{background:var(--sky)}
  select option::checkmark{display:none}
  .toolbar select{min-height:38px}
  /* RK-103: the chosen text shortens with "…" before the arrow instead of running under it */
  select > button{all:unset;display:flex;align-items:center;flex:1 1 auto;min-width:0;overflow:hidden}
  select selectedcontent{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:400}
  select::picker-icon{flex:none}
}
.nomatch td{color:var(--slate);font-style:italic;text-align:center;padding:16px}

/* RK-12 / RK-14: the complexes table has named action columns and keeps its shape with long notes */
table.grid.complexes{table-layout:fixed;width:100%}
table.grid.complexes col.c-name{width:26%} table.grid.complexes col.c-num{width:11%}
table.grid.complexes col.c-notes{width:auto} table.grid.complexes col.c-act{width:96px}
table.grid.complexes td,table.grid.complexes th{overflow-wrap:anywhere;word-break:break-word;vertical-align:top}
table.grid.complexes td.notes small{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
table.grid.complexes th.act,table.grid.complexes td.act{text-align:center;white-space:nowrap}

/* ---- QA 2026-10-20 ---------------------------------------------------------------------------------------------- */
/* RK-80 / RK-76 / RK-64: a page's subtitle sits under its heading. Only the right-hand side of a toolbar (search, filters,
   "+ Add") is a row; the heading block never is, even when it is the toolbar's only child. */
.toolbar > div:first-child{display:block;min-width:0}
h1,h2{overflow-wrap:anywhere}

/* RK-44 / RK-65: buttons and tick boxes show the orange focus ring for keyboard users only, not after a mouse click */
button:focus,.btn:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:none}
button:focus-visible,.btn:focus-visible,input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* RK-60 / RK-66 / RK-45 / RK-82 / RK-79 / RK-57 / RK-75: tables keep their shape with long text. Headers, amounts, dates,
   phone numbers, status pills and buttons stay on one line; only free text (descriptions, names, notes) wraps, and it
   wraps inside its own column instead of pushing the others out of the way. */
.grid th{white-space:nowrap}
.grid td.num,.grid td.nw,.grid td.act{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.grid .btn,.grid .badge{white-space:nowrap}
.grid td.act{text-align:right;width:1%}
.grid td.act .btn + .btn{margin-left:6px}
.grid td.txt{min-width:140px}
.grid .badge.cx{white-space:normal;overflow-wrap:break-word;word-break:normal;max-width:220px;border-radius:10px;line-height:1.35}
.grid td small{overflow-wrap:anywhere}

/* RK-59: a big amount never spills out of its dashboard card (app.js shrinks the figure to fit) */
.kpi{min-width:0;overflow:hidden}
.kpi b{white-space:nowrap;line-height:1.2}

/* RK-58: the late-charge boxes stay boxes - the labels wrap above them instead of clipping the box itself */
.fgrid.late label{white-space:normal;overflow:visible;text-overflow:clip;display:flex;flex-direction:column;justify-content:flex-end}
.fgrid.late label input{margin-top:3px}
.latenow{background:var(--sky);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:0 0 6px;font-size:14px}

/* RK-51 / RK-81: text and placeholders that don't fit end in "…", never mid-word */
input{text-overflow:ellipsis}
input::placeholder{text-overflow:ellipsis}

/* RK-70 / RK-47: a field's problem is shown right under that field */
.ferr{display:block;color:#C43D3D;font-size:12.5px;font-weight:500;margin-top:4px;line-height:1.35}
input.bad,select.bad,textarea.bad{border-color:#C43D3D;background:#FFF8F8}
.pwagain{display:block;color:var(--orange);font-size:12.5px;font-weight:500;margin-top:4px}

/* RK-48: menus with groups (the Payee list) use the browser's own menu, which always lets an option be picked */
@supports (appearance:base-select){ select:has(optgroup){appearance:auto;display:block;min-height:0} }

/* RK-61: Bank Reconcile actions are one tidy row of buttons; the choices open in a small dialog */
.recon-acts{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
.recon-acts .btn{min-width:0}

/* RK-71: a delete that's refused explains itself */
.grid tr.picked td{transition:background .6s}
.grid span.nw{white-space:nowrap}
/* RK-67: to-dos are real tick boxes */
.todos{list-style:none;margin:0 0 12px;padding:0}
.todos li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.todos li form{margin:0;flex:1;min-width:0}
.todos li .check{margin:0;font-size:14px;font-weight:400;color:var(--ink);overflow-wrap:anywhere}
.todos li.done .check span{text-decoration:line-through;color:var(--slate)}
.todos li input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;cursor:pointer}
/* RK-75: long building or tenant names: two lines at most in the complaints table (full name on hover), menus end in "…" */
.grid td.clip{max-width:200px}
.grid td.clip span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
select{overflow:hidden;white-space:nowrap}
/* RK-73 / RK-77: the required-fields note reads as a note, not a heading */
.reqnote{text-align:left!important;font-size:12.5px;color:var(--slate);margin:0 0 8px}
.sub,.flash,.hint{overflow-wrap:anywhere}
.grid td.txt{min-width:90px}
/* RK-57: the work-orders table has set column widths, so a long description wraps in its own column */
table.grid.wo{table-layout:fixed;min-width:860px}
table.grid.wo th{overflow:hidden;text-overflow:ellipsis}
table.grid.wo td{overflow-wrap:anywhere}
form.inline{display:inline}
/* RK-92: long unbroken text (a 40-digit account number, a long email) wraps inside the contact card */
.contactcard .fgrid > div, .contactcard p, .toolbar h1{overflow-wrap:anywhere;min-width:0}
/* RK-87: a table's own search and filter sit together, right above it */
.tablebar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.tablebar .searchbox{flex:1 1 220px;width:auto;margin:0}
.tablebar select{flex:0 0 auto;width:auto;min-width:170px}
/* RK-99: the home page buttons sit in one row with even gaps (wrapping evenly on a phone); the search icon is drawn, not an emoji */
.heroacts{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.heroacts .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;white-space:nowrap}
.heroacts .btn svg{flex:0 0 auto}
@media(max-width:520px){.heroacts .btn{flex:1 1 100%}}
/* RK-48: the side menu stays the height of the window (scrolling on its own if it must) instead of stretching down
   the whole length of a long page */
@media (min-width:861px){
  .side{position:sticky;top:0;height:100vh;overflow-y:auto;align-self:flex-start}
}
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;margin-top:12px}
/* RK-105: complexes have one Actions column (Rename, Delete) like every other list */
table.grid.complexes col.c-act2{width:170px}