/* ============ Tonga Kost — Brand Stylesheet ============ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Mulish:wght@400;500;600;700;800&display=swap');

:root{
  --espresso:#3B2A1E; --coffee:#6F4E37; --mocha:#8B6F52; --caramel:#A88763;
  --latte:#C7B299; --cream:#F4EEE4; --parchment:#FCFAF5; --border:#E7DBC8;
  --borderDk:#D8C7AC; --mute:#8C7A63;
  --green:#5E7E4F; --greenBg:#EBF0E3; --amber:#B5831C; --amberBg:#F6ECD4;
  --terra:#A8542F; --terraBg:#F3E1D6; --blue:#5E7384; --blueBg:#E7EDF0;
  --shadow:0 1px 2px rgba(59,42,30,.06),0 6px 18px rgba(59,42,30,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--espresso);
  background:var(--cream);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
.serif{font-family:'Fraunces',Georgia,serif}

/* ---------- Header / nav ---------- */
.topbar{background:linear-gradient(180deg,var(--espresso),#2C1F16);color:#F3E9DA;
  position:sticky;top:0;z-index:30;box-shadow:0 2px 14px rgba(44,31,22,.25)}
.topbar-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:13px 24px}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{flex-shrink:0}
.brand .n{font-size:21px;font-weight:600;letter-spacing:.2px;line-height:1}
.brand .k{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--latte);margin-top:3px}
.nav{display:flex;gap:4px;margin-left:14px;flex-wrap:wrap}
.nav a{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;font-size:14px;
  font-weight:600;color:#E4D7C4;transition:.15s;border:1px solid transparent;white-space:nowrap}
.nav a:hover{background:rgba(199,178,153,.12)}
.nav a.on{background:rgba(199,178,153,.18);border-color:rgba(199,178,153,.22);color:#fff}
.nav .ct{background:var(--terra);color:#fff;font-size:11px;font-weight:800;min-width:19px;height:19px;
  border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.topbar .who{font-size:12px;color:var(--latte)}
.logout{background:rgba(199,178,153,.14);border:1px solid rgba(199,178,153,.2);color:#E6DAC8;
  padding:8px 12px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.logout:hover{background:rgba(199,178,153,.24)}

/* ---------- Layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:26px 24px 64px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:26px;font-weight:600;letter-spacing:.2px}
.page-head .sub{font-size:13.5px;color:var(--mute);margin-top:2px}

/* ---------- Flash ---------- */
.flash{display:flex;align-items:center;gap:10px;background:var(--greenBg);border:1px solid #CBD9BC;
  color:#3E5733;padding:12px 16px;border-radius:12px;margin-bottom:20px;font-weight:600;font-size:14px}
.flash.err{background:var(--terraBg);border-color:#E2BBA6;color:#7E331A}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;border-radius:10px;
  font-family:inherit;font-weight:700;font-size:13.5px;padding:10px 16px;transition:.15s;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn.pri{background:var(--coffee);color:#fff}
.btn.pri:hover{background:#5E4230}
.btn.ghost{background:#fff;color:var(--coffee);border:1px solid var(--borderDk)}
.btn.ghost:hover{background:var(--parchment)}
.btn.danger{background:var(--terra);color:#fff}
.btn.danger:hover{background:#8E4527}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn.block{width:100%;justify-content:center}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--borderDk);background:#fff;color:var(--coffee);cursor:pointer;transition:.15s}
.iconbtn:hover{background:var(--parchment)}
.iconbtn svg{width:16px;height:16px}

/* ---------- Cards ---------- */
.card{background:var(--parchment);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.card-pad{padding:20px}
.grid{display:grid;gap:16px}
.stat-grid{grid-template-columns:repeat(4,1fr)}
.room-grid{grid-template-columns:repeat(4,1fr)}
.cols-2{grid-template-columns:1.6fr 1fr}

/* stat card */
.stat{position:relative;overflow:hidden;background:var(--parchment);border:1px solid var(--border);
  border-radius:16px;padding:18px 18px 16px;box-shadow:var(--shadow)}
.stat .roof{position:absolute;top:0;right:14px;opacity:.5}
.stat .lab{font-size:12.5px;color:var(--mute);font-weight:600;letter-spacing:.2px}
.stat .val{font-size:30px;font-weight:600;margin-top:7px;line-height:1}
.stat .meta{font-size:12px;color:var(--mute);margin-top:5px}
.stat.alert .val{color:var(--terra)} .stat.warn .val{color:var(--amber)} .stat.ok .val{color:var(--green)}

/* section title */
.sec-h{display:flex;align-items:center;gap:9px;margin:4px 0 14px;font-size:17px;font-weight:600}
.sec-h .ic{color:var(--mocha)}

/* ---------- Room cards ---------- */
.room{background:var(--parchment);border:1px solid var(--border);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);transition:.16s;display:block}
.room:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(59,42,30,.12);border-color:var(--borderDk)}
.room .top{padding:11px 14px;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#fff,var(--parchment));border-bottom:1px solid var(--border)}
.room .rno{font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}
.room .body{padding:13px 14px}
.room .nm{font-weight:700;font-size:15px;margin-bottom:2px}
.room .ph{font-size:12.5px;color:var(--mute)}
.room.empty{border-style:dashed;background:#fff}
.room.empty .body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:22px 14px;color:var(--mute);text-align:center}
.room .due{font-size:12px;color:var(--mute);margin-top:9px;display:flex;align-items:center;gap:6px}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:20px;letter-spacing:.2px;white-space:nowrap}
.badge svg{width:12px;height:12px}
.b-paid{background:var(--greenBg);color:var(--green)}
.b-upcoming{background:var(--blueBg);color:var(--blue)}
.b-grace{background:var(--amberBg);color:var(--amber)}
.b-overdue{background:var(--terraBg);color:var(--terra)}
.b-yearly{background:#EFE7DC;color:var(--coffee)}
.b-monthly{background:#EFE7DC;color:var(--coffee)}

/* ---------- Tables / list rows ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--mute);
  font-weight:700;padding:10px 14px;border-bottom:1px solid var(--border)}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(199,178,153,.07)}
.num{font-family:'Fraunces',serif;font-weight:600}

.avatar{width:38px;height:38px;border-radius:10px;background:var(--coffee);color:#fff;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.who-cell{display:flex;align-items:center;gap:11px}
.who-cell .nm{font-weight:700} .who-cell .m8{font-size:12px;color:var(--mute)}

/* ---------- Forms ---------- */
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--coffee);margin-bottom:6px}
.field .req{color:var(--terra)}
.input,select,textarea{width:100%;font-family:inherit;font-size:14px;color:var(--espresso);
  background:#fff;border:1px solid var(--borderDk);border-radius:10px;padding:11px 13px;transition:.15s}
.input:focus,select:focus,textarea:focus{outline:none;border-color:var(--coffee);box-shadow:0 0 0 3px rgba(111,78,55,.12)}
textarea{resize:vertical;min-height:74px}
.hint{font-size:11.5px;color:var(--mute);margin-top:5px}
.err-msg{font-size:12px;color:var(--terra);margin-top:5px;font-weight:600}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.seg{display:flex;gap:8px}
.seg label{flex:1;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg .opt{display:flex;flex-direction:column;gap:2px;border:1px solid var(--borderDk);border-radius:11px;
  padding:11px 13px;background:#fff;transition:.15s;text-align:center}
.seg .opt .t{font-weight:700;font-size:14px} .seg .opt .d{font-size:11.5px;color:var(--mute)}
.seg input:checked + .opt{border-color:var(--coffee);background:var(--parchment);box-shadow:0 0 0 3px rgba(111,78,55,.1)}
.rooms-pick{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.rooms-pick label{cursor:pointer}
.rooms-pick .opt{border:1px solid var(--borderDk);border-radius:10px;padding:12px 0;text-align:center;
  font-weight:700;background:#fff;font-family:'Fraunces',serif;transition:.15s}
.rooms-pick input:checked + .opt{background:var(--coffee);color:#fff;border-color:var(--coffee)}
.rooms-pick input:disabled + .opt{background:#EFE7DC;color:var(--latte);cursor:not-allowed;text-decoration:line-through}
.rooms-pick input{position:absolute;opacity:0;pointer-events:none}

/* file upload */
.upload{border:1.5px dashed var(--borderDk);border-radius:12px;padding:16px;text-align:center;
  background:#fff;cursor:pointer;display:block;transition:.15s;color:var(--mute)}
.upload:hover{border-color:var(--coffee);background:var(--parchment)}
.upload input{display:none}
.upload .u-ic{color:var(--mocha);margin-bottom:6px}
.upload b{color:var(--coffee)}

/* ---------- Detail page ---------- */
.kv{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--border);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--mute)} .kv .v{font-weight:600;text-align:right}
.idimg{width:100%;border-radius:12px;border:1px solid var(--border);margin-top:8px}
.pill-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--coffee);font-weight:700}

/* ---------- Filter pills ---------- */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:22px;font-size:13px;
  font-weight:700;border:1px solid var(--borderDk);background:#fff;color:var(--coffee);cursor:pointer;transition:.15s}
.pill:hover{background:var(--parchment)}
.pill.on{background:var(--espresso);color:#fff;border-color:var(--espresso)}
.pill .n{background:rgba(0,0,0,.12);border-radius:11px;font-size:11px;padding:1px 7px}
.pill.on .n{background:rgba(255,255,255,.2)}

/* ---------- disclosure pay form ---------- */
details.pay{margin-top:0}
details.pay > summary{list-style:none;cursor:pointer}
details.pay > summary::-webkit-details-marker{display:none}
.paybox{margin-top:12px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px}

/* ---------- search ---------- */
.search{position:relative;max-width:340px;width:100%}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mute);width:16px;height:16px}
.search input{padding-left:36px}

/* ---------- empty ---------- */
.empty-state{text-align:center;padding:54px 20px;color:var(--mute)}
.empty-state .ic{color:var(--latte);margin-bottom:12px}
.empty-state h3{font-size:17px;color:var(--coffee);margin-bottom:5px;font-weight:600}

/* ---------- misc ---------- */
.muted{color:var(--mute)} .right{text-align:right} .mt{margin-top:18px} .mb{margin-bottom:18px}
.flexrow{display:flex;align-items:center;gap:8px}
.divider{height:1px;background:var(--border);margin:18px 0}
.tag-italic{font-style:italic;color:var(--caramel);font-size:12px}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .room-grid{grid-template-columns:repeat(2,1fr)}
  .cols-2{grid-template-columns:1fr}
}
@media(max-width:620px){
  .topbar-in{flex-wrap:wrap;gap:10px}
  .nav{margin-left:0;order:3;width:100%}
  .topbar .right{margin-left:auto}
  .form-grid{grid-template-columns:1fr}
  .rooms-pick{grid-template-columns:repeat(4,1fr)}
  .page-head h1{font-size:22px}
  .hide-sm{display:none}
}