/* GS Rental — one hand-written stylesheet, palette and layout from the Rent Register mockup. */
:root{
  --ink:#1c2b22; --ink-soft:#56604F;
  --paper:#EEECE1; --paper-raised:#F7F5EC; --surface:#fffef9;
  --green-deep:#3B5166; --green-mid:#4C6B82;
  --brass:#A97A34; --brass-light:#D9B672; --maroon:#7A2E2E;
  --line:#cfc9b4; --line-soft:#e2ddc9;
  --radius:3px;
  --serif:"Lora", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.5;}
::selection{background:var(--brass-light);}
a{color:var(--green-deep);}

/* ---- shell ---- */
.shell{display:flex; min-height:100vh;}
.sidebar{width:210px; flex-shrink:0; background:var(--green-deep); color:#EDEAD9; padding:26px 0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;}
.brand{padding:0 22px 22px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:18px;}
.brand .mark{font-family:var(--serif); font-size:19px; color:var(--brass-light); text-decoration:none; display:block;}
.brand .sub{font-size:11px; color:#B9C4B6; margin-top:3px;}
.nav{display:flex; flex-direction:column; gap:2px; padding:0 12px;}
.nav a{padding:10px 12px; border-radius:var(--radius); font-size:13.5px; color:#D8DED2; display:flex; align-items:center; gap:10px; text-decoration:none;}
.nav a:hover{background:rgba(255,255,255,.06);}
.nav a.active{background:rgba(217,182,114,.16); color:#F4E6C4; font-weight:600;}
.nav .dot{width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.7;}
.sidebar-foot{margin-top:auto; padding:16px 22px 0; font-size:12px; color:#B9C4B6; border-top:1px solid rgba(255,255,255,.1);}
.sidebar-foot strong{display:block; color:#F4E6C4; font-size:13px;}
.linkbtn{all:unset; cursor:pointer; color:var(--brass-light); font-size:12px; text-decoration:underline;}
.main{flex:1; min-width:0; padding:28px 36px 60px;}
@media(max-width:820px){
  .shell{flex-direction:column;}
  .sidebar{width:100%; height:auto; position:static; padding:14px 0;}
  .nav{flex-direction:row; flex-wrap:wrap;}
  .main{padding:20px 16px 48px;}
}

/* ---- type ---- */
h1{font-family:var(--serif); font-size:24px; margin:0 0 4px; color:var(--green-deep); font-weight:600;}
h2{font-family:var(--serif); font-size:17px; margin:0 0 14px; color:var(--green-deep); font-weight:600;}
h3{font-size:14px; margin:0 0 8px; color:var(--green-deep);}
.lede{color:var(--ink-soft); margin:0 0 22px; font-size:13.5px;}
.muted{color:var(--ink-soft);}
.helptext{font-size:12px; color:var(--ink-soft); margin:4px 0 0;}
.warn{color:var(--maroon); font-weight:600;}
.ok{color:#2C5A3E; font-weight:600;}
.section-divider{border:none; border-top:1px solid var(--line-soft); margin:26px 0;}

/* ---- layout bits ---- */
.toolbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; gap:12px; flex-wrap:wrap;}
.toolbar-left{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.toolbar-left select, .toolbar-left input{width:auto; min-width:150px;}
.grid{display:grid; gap:14px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
.card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;}
.card.flush{padding:0;}
.card + .card{margin-top:16px;}
.grid > .card + .card, .grid > form.card + .card, .grid > .card + form.card{margin-top:0;}
.stat-card{position:relative; padding-left:20px; overflow:hidden;}
.stat-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--brass-light);}
.stat-card.warn-card::before{background:var(--maroon);}
.stat-card .label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
.stat-card .value{font-family:var(--serif); font-size:26px; margin-top:6px; color:var(--green-deep);}
.stat-card .value.warn{color:var(--maroon);}
.stat-card .foot{font-size:11.5px; color:var(--ink-soft); margin-top:4px;}
a.card{text-decoration:none; color:inherit; display:block;}
a.card:hover{border-color:var(--brass);}
.kv{display:grid; grid-template-columns:150px 1fr; gap:4px 12px; font-size:13px;}
.kv dt{color:var(--ink-soft);}
.kv dd{margin:0;}
.empty{text-align:center; padding:36px 20px; color:var(--ink-soft); border:1px dashed var(--line); border-radius:var(--radius); background:var(--paper-raised);}

/* ---- tables ---- */
.table-scroll{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); border-bottom:1px solid var(--line); padding:9px 10px; white-space:nowrap;}
td{padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tfoot td{background:var(--paper); font-weight:700; border-top:1px solid var(--line);}
.num{text-align:right; white-space:nowrap;}
tr.dim td{opacity:.55;}
tr.picked td{background:#FBF3DF;}
.row-actions{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}

/* ---- badges ---- */
.badge{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap;}
.badge.paid{background:#E1EDE3; color:#2C5A3E;}
.badge.unpaid{background:#F2DEDA; color:#8A3A3A;}
.badge.partial{background:#F5E7C9; color:#8A5B14;}
.badge.terminated{background:#e3e0d3; color:#6b6b5a;}
.badge.owner{background:#EFE3CC; color:var(--brass); border:1px solid var(--brass-light);}
.badge.advance{background:#DCEAF5; color:#2A5B7A;}
.badge.admin{background:var(--brass); color:#fff;}
.badge.staff{background:var(--green-mid); color:#fff;}
.chip{display:inline-flex; align-items:center; font-size:11px; color:var(--green-deep); background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:1px 8px; margin:0 4px 4px 0; text-decoration:none;}

/* ---- buttons ---- */
.btn{display:inline-block; font-family:var(--sans); font-size:13px; font-weight:600; cursor:pointer; padding:8px 15px; border-radius:var(--radius); border:1px solid var(--green-deep); background:var(--green-deep); color:#F4F1E4; text-decoration:none; line-height:1.3;}
.btn:hover{background:var(--green-mid); border-color:var(--green-mid);}
.btn.ghost{background:transparent; color:var(--green-deep);}
.btn.ghost:hover{background:rgba(59,81,102,.08);}
.btn.brass{background:var(--brass); border-color:var(--brass); color:#fff;}
.btn.brass:hover{background:#8f6a2c;}
.btn.danger{background:transparent; border-color:var(--maroon); color:var(--maroon);}
.btn.danger:hover{background:rgba(122,46,46,.08);}
.btn.small{padding:4px 10px; font-size:12px;}
form.inline{display:inline;}

/* ---- forms ---- */
label{display:block; font-size:12px; color:var(--ink-soft); margin-bottom:4px; font-weight:600;}
label.check{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink); cursor:pointer;}
label.check input{width:auto; margin:0;}
input, select, textarea{width:100%; padding:8px 10px; font-family:var(--sans); font-size:13.5px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink);}
input[type=checkbox], input[type=radio]{width:auto;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--brass-light); outline-offset:1px; border-color:var(--brass);}
.field{margin-bottom:14px;}
.field.has-error input, .field.has-error select, .field.has-error textarea{border-color:var(--maroon);}
.field-error{color:var(--maroon); font-size:12px; margin-top:3px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field-row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media(max-width:620px){.field-row,.field-row3{grid-template-columns:1fr;}}
fieldset{border:1px solid var(--line-soft); border-radius:var(--radius); padding:12px 14px 2px; margin:0 0 16px; background:var(--surface);}
legend{font-weight:700; font-size:12.5px; color:var(--green-deep); padding:0 6px;}
.form-foot{display:flex; justify-content:flex-end; gap:10px; margin-top:8px; padding-top:14px; border-top:1px solid var(--line-soft); flex-wrap:wrap;}
details.more{margin-bottom:16px;}
details.more summary{cursor:pointer; font-weight:600; color:var(--green-deep); margin-bottom:10px;}
.unit-picker{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:4px 12px; max-height:240px; overflow:auto; padding:8px; border:1px solid var(--line-soft); background:var(--surface);}
.unit-picker .floor-h{grid-column:1/-1; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-top:4px;}

/* ---- flash ---- */
.flash div{padding:10px 14px; border-radius:var(--radius); margin-bottom:14px; font-size:13px;}
.flash .success{background:#E1EDE3; color:#2C5A3E; border:1px solid #b9d3c0;}
.flash .error{background:#F2DEDA; color:#8A3A3A; border:1px solid #e0b9b2;}

/* ---- floor map ---- */
.floor{margin-bottom:16px;}
.floor h3{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px;}
.units{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;}
.unit{border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; background:var(--surface); font-size:12.5px; min-height:62px;}
.unit.vacant{background:#F6EFE0; border-style:dashed;}
.unit .u-label{font-weight:700; color:var(--green-deep);}
.unit .u-actions{margin-top:4px; font-size:11.5px;}

/* ---- tenant header / avatar ---- */
.tenant-bar{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.avatar{width:54px; height:54px; border-radius:50%; background:var(--brass); color:#3a2c10; font-family:var(--serif); font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;}
.avatar img{width:100%; height:100%; object-fit:cover;}
.tenant-bar .figures{display:flex; gap:22px; margin-left:auto; flex-wrap:wrap;}
.tenant-bar .figures div{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}
.tenant-bar .figures b{display:block; font-family:var(--serif); font-size:18px; color:var(--green-deep); text-transform:none; letter-spacing:0;}
.tenant-bar .figures b.warn{color:var(--maroon);}

/* ---- auth ---- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.auth-card{width:100%; max-width:380px;}

@media print{
  .no-print, .sidebar{display:none !important;}
  .main{padding:0;}
  body{background:#fff;}
  .card{border:none; background:#fff;}
}

/* ---- admin pages, shared with GS Ledger's markup ---- */
.section-title{font-family:var(--serif); font-size:20px; color:var(--green-deep); margin:0 0 4px;}
.section-title .n{display:none;}
.sub{color:var(--ink-soft); margin:0 0 16px; font-size:13px;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap;}
.form-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px 14px; margin-bottom:16px; align-items:end;}
.form-grid .wide{grid-column:1/-1;}
.opt{font-weight:400; color:var(--ink-soft);}
.hint{font-size:11.5px; color:var(--ink-soft); margin-top:3px;}
.table-wrap{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; margin-bottom:16px;}
.filterbar{display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin-bottom:14px;}
.filterbar > *{width:auto;}
.pagination{display:flex; gap:6px; margin-top:10px;}
.pagination a, .pagination span{padding:4px 10px; border:1px solid var(--line); border-radius:var(--radius); text-decoration:none;}
.pagination .current{background:var(--green-deep); color:#fff;}
.empty-row{text-align:center; color:var(--ink-soft); padding:20px;}
.inline-edit{display:flex; gap:6px; align-items:center;}
.inline-edit input{width:auto;}
.stockhead-form{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:16px;}
input.has-error{border-color:var(--maroon);}
.badge.good{background:#E1EDE3; color:#2C5A3E;}
.badge.bad{background:#F2DEDA; color:#8A3A3A;}
.badge.warn{background:#F5E7C9; color:#8A5B14;}