/* =========================================================
   Josephat Pallangyo Rental MIS
   Palette carried over from the Ekema house style so the two
   systems read as siblings; gold is reserved for one thing —
   money that is being held (the deposit).
   ========================================================= */
:root{
  --forest:#14402C;
  --forest-deep:#0B2A1C;
  --forest-soft:#1D5638;
  --gold:#C79A3B;
  --gold-soft:#F6EDD6;
  --paper:#F4F7F5;
  --card:#FFFFFF;
  --ink:#14231C;
  --muted:#6C7F76;
  --line:#E3EBE6;
  --blue:#2F6FD0;
  --green:#1E9E5A;
  --amber:#D9822B;
  --purple:#7A4FD0;
  --teal:#159B94;
  --rose:#C43B33;
  --shadow:0 1px 2px rgba(20,64,44,.06), 0 8px 24px rgba(20,64,44,.07);
  --radius:14px;
  --sidebar:264px;
  --bottombar:0px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--paper); color:var(--ink);
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Playfair Display',Georgia,serif; font-weight:700; letter-spacing:-.01em}
.mono,.ref{font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.86em; letter-spacing:-.02em}
a{color:var(--forest)}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ------------------------------------------------ sign in */
.auth{min-height:100dvh; display:grid; place-items:center; padding:20px;
  background:radial-gradient(120% 90% at 50% 0%, #1D5638 0%, var(--forest) 45%, var(--forest-deep) 100%)}
.auth-card{width:min(430px,100%); background:var(--card); border-radius:22px; padding:38px 32px 28px; box-shadow:0 30px 70px rgba(0,0,0,.3)}
.auth-mark{width:60px;height:60px;margin:0 auto 14px;display:grid;place-items:center;border-radius:16px;
  background:var(--gold-soft); font-size:30px}
.auth h1{text-align:center; font-size:27px; margin:0 0 2px; color:var(--forest)}
.auth .sub{text-align:center; color:var(--muted); font-size:13.5px; margin-bottom:26px}
.auth .foot{text-align:center; color:var(--muted); font-size:12px; margin-top:22px}
.lang-toggle{position:absolute; top:22px; right:22px}

/* ------------------------------------------------ shell */
.shell{display:flex; min-height:100dvh}
.side{
  width:var(--sidebar); flex:0 0 var(--sidebar); background:var(--forest-deep);
  display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:40;
}
.side-head{padding:22px 20px 18px; border-bottom:1px solid rgba(255,255,255,.08)}
.side-head .mark{font-size:26px}
.side-head .name{font-family:'Playfair Display',serif; color:var(--gold); font-size:19px; line-height:1.15; margin-top:8px}
.side-head .kicker{color:rgba(255,255,255,.55); font-size:10px; letter-spacing:.16em; text-transform:uppercase; margin-top:4px}
.nav{flex:1; padding:12px 0; overflow-y:auto}
.nav button{
  width:100%; display:flex; align-items:center; gap:12px; padding:12px 20px;
  background:none; border:0; color:rgba(255,255,255,.78); font:inherit; font-size:15px;
  cursor:pointer; text-align:left; border-left:3px solid transparent; transition:background .15s;
}
.nav button:hover{background:rgba(255,255,255,.06); color:#fff}
.nav button.on{background:var(--forest); color:var(--gold); border-left-color:var(--gold); font-weight:600}
.nav .ico{width:20px; text-align:center; font-size:16px}
.side-foot{padding:16px 20px; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.55); font-size:12px}
.side-foot .who{color:#fff; font-weight:600; font-size:14px; margin:2px 0}
.side-foot .role{color:var(--gold); font-size:12px}
.side-foot button{width:100%; margin-top:12px; background:var(--forest-soft); color:#fff; border:0; padding:10px; border-radius:9px; font:inherit; cursor:pointer}
.side-foot button:hover{background:var(--gold); color:var(--forest-deep)}

.main{flex:1; margin-left:var(--sidebar); padding:30px 34px calc(40px + var(--bottombar)); min-width:0}
.page-head{border-bottom:2px solid var(--gold); padding-bottom:14px; margin-bottom:24px}
.page-head h1{font-size:34px; margin:0; color:var(--forest)}
.page-head p{margin:2px 0 0; color:var(--muted); font-size:14px}

/* ------------------------------------------------ stats */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-bottom:22px}
.stat{background:var(--card); border-radius:var(--radius); padding:18px 18px 16px; box-shadow:var(--shadow); border-left:5px solid var(--forest)}
.stat b{display:block; font-size:29px; font-weight:700; line-height:1.1; font-family:'Playfair Display',serif}
.stat span{color:var(--muted); font-size:13px}
.stat.blue{border-left-color:var(--blue)}   .stat.blue b{color:var(--blue)}
.stat.green{border-left-color:var(--green)} .stat.green b{color:var(--green)}
.stat.amber{border-left-color:var(--amber)} .stat.amber b{color:var(--amber)}
.stat.purple{border-left-color:var(--purple)} .stat.purple b{color:var(--purple)}
.stat.gold{border-left-color:var(--gold)}   .stat.gold b{color:var(--gold)}
.stat.teal{border-left-color:var(--teal)}   .stat.teal b{color:var(--teal)}
.stat b.sm{font-size:23px}

/* ------------------------------------------------ cards / panels */
.panel{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; margin-bottom:18px}
.panel h3{margin:0 0 14px; font-size:19px; color:var(--forest)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px}
.toolbar .spacer{flex:1}

/* ------------------------------------------------ controls */
input,select,textarea{
  font:inherit; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink); width:100%; max-width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--forest); outline:none; box-shadow:0 0 0 3px rgba(20,64,44,.1)}
label{display:block; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; font-weight:600}
.field{margin-bottom:14px}
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:11px 18px; border:0; border-radius:10px;
  background:var(--forest); color:#fff; font:inherit; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--forest-soft)}
.btn.ghost{background:#fff; color:var(--forest); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--paper)}
.btn.ghost.on{background:var(--forest); color:#fff; border-color:var(--forest)}
.btn.gold{background:var(--gold); color:var(--forest-deep)}
.btn.danger{background:var(--rose)}
.btn.sm{padding:7px 12px; font-size:13px; border-radius:8px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-row{display:flex; flex-wrap:wrap; gap:8px}
.search{max-width:320px}

/* ------------------------------------------------ tables */
.table-wrap{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
table{width:100%; border-collapse:collapse}
thead th{
  background:#EEF4F0; text-align:left; padding:13px 16px; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--forest); font-weight:700; white-space:nowrap;
}
tbody td{padding:14px 16px; border-top:1px solid var(--line); vertical-align:middle}
tbody tr:hover{background:#FAFCFB}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.empty{padding:44px 20px; text-align:center; color:var(--muted)}
.empty .big{font-size:34px; display:block; margin-bottom:8px; opacity:.5}

/* ------------------------------------------------ chips */
.chip{display:inline-block; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap}
.chip.ok{background:#E3F5EA; color:#12703F}
.chip.warn{background:#FDF0DC; color:#96551A}
.chip.bad{background:#FBE5E3; color:#992722}
.chip.info{background:#E5EEFB; color:#20509C}
.chip.gold{background:var(--gold-soft); color:#7A5C12}
.chip.mute{background:#EDF1EF; color:var(--muted)}

/* ------------------------------------------------ SIGNATURE: deposit meter */
.deposit-meter{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:linear-gradient(180deg,#FFFDF7,#fff)}
.deposit-meter .dm-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px}
.deposit-meter .dm-label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700}
.deposit-meter .dm-figure{font-family:'Playfair Display',serif; font-size:19px; color:var(--forest)}
.dm-track{height:9px; border-radius:99px; background:#EDE4CD; overflow:hidden}
.dm-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold),#E0B95C); transition:width .5s ease}
.dm-fill.full{background:linear-gradient(90deg,var(--green),#38B872)}
.dm-note{margin-top:8px; font-size:12.5px; color:var(--muted)}
.dm-note.locked{color:#96551A; font-weight:600}

/* ------------------------------------------------ modal */
.veil{position:fixed; inset:0; background:rgba(11,42,28,.55); display:grid; place-items:center; padding:18px; z-index:80; overflow-y:auto}
.modal{background:var(--card); border-radius:18px; width:min(620px,100%); max-height:92dvh; overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,.35)}
.modal-head{padding:20px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background:#fff; z-index:2}
.modal-head h3{margin:0; font-size:21px; color:var(--forest)}
.modal-head .x{background:none; border:0; font-size:26px; line-height:1; color:var(--muted); cursor:pointer}
.modal-body{padding:22px 24px}
.modal-foot{padding:16px 24px; border-top:1px solid var(--line); display:flex; gap:9px; justify-content:flex-end; position:sticky; bottom:0; background:#fff}

/* ------------------------------------------------ toast */
.toasts{position:fixed; top:16px; right:16px; z-index:120; display:flex; flex-direction:column; gap:9px; max-width:min(380px,92vw)}
.toast{background:var(--forest); color:#fff; padding:13px 17px; border-radius:11px; box-shadow:0 12px 34px rgba(0,0,0,.25); font-size:14px; animation:pop .22s ease}
.toast.bad{background:var(--rose)} .toast.warn{background:var(--amber)}
@keyframes pop{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}

/* ------------------------------------------------ misc */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.bar{height:26px; border-radius:6px; background:var(--forest); min-width:3px}
.kv{display:grid; grid-template-columns:150px 1fr; gap:8px 14px; font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0; font-weight:600}
.mobile-only{display:none}
.hint{font-size:12.5px; color:var(--muted); margin-top:6px}
.sheet-list button{display:flex; align-items:center; gap:12px; width:100%; padding:15px 20px; background:none; border:0; border-bottom:1px solid var(--line); font:inherit; font-size:16px; text-align:left; cursor:pointer; color:var(--ink)}

/* =========================================================
   MOBILE — the sidebar becomes a bottom bar
   ========================================================= */
@media (max-width:900px){
  :root{--sidebar:0px; --bottombar:66px}
  .side{
    position:fixed; inset:auto 0 0 0; width:100%; height:var(--bottombar);
    flex-direction:row; background:var(--forest-deep);
    border-top:1px solid rgba(255,255,255,.12); box-shadow:0 -6px 22px rgba(0,0,0,.2);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .side-head,.side-foot{display:none}
  .nav{display:flex; padding:0; width:100%; overflow:visible}
  .nav button{
    flex:1; flex-direction:column; gap:3px; justify-content:center; padding:9px 2px;
    border-left:0; border-top:3px solid transparent; font-size:10.5px; letter-spacing:.01em;
  }
  .nav button.on{background:transparent; border-top-color:var(--gold); color:var(--gold)}
  .nav .ico{font-size:19px}
  .nav .lbl{display:block}

  .main{margin-left:0; padding:18px 15px calc(24px + var(--bottombar))}
  .page-head h1{font-size:26px}
  .page-head{margin-bottom:16px}
  .stat-grid{grid-template-columns:repeat(2,1fr); gap:11px}
  .stat{padding:14px} .stat b{font-size:24px}
  .grid2{grid-template-columns:1fr}
  .search{max-width:none; flex:1 1 100%}
  .toolbar .btn{flex:1 1 auto; justify-content:center}
  .panel{padding:16px}
  .kv{grid-template-columns:1fr; gap:2px 0}
  .kv dd{margin-bottom:10px}
  .mobile-only{display:block}
  .modal{border-radius:18px 18px 0 0; align-self:flex-end; max-height:88dvh}
  .veil{align-items:flex-end; padding:0}

  /* Tables reflow into stacked records — no horizontal scrolling on a phone */
  table.stacked thead{display:none}
  table.stacked tbody tr{display:block; border-top:1px solid var(--line); padding:14px 16px}
  table.stacked tbody tr:first-child{border-top:0}
  table.stacked tbody td{display:flex; justify-content:space-between; gap:14px; padding:4px 0; border:0; text-align:right}
  table.stacked tbody td::before{content:attr(data-l); color:var(--muted); font-size:11.5px;
    letter-spacing:.08em; text-transform:uppercase; font-weight:700; text-align:left; flex:0 0 auto}
  table.stacked tbody td.rowact{justify-content:flex-end; padding-top:11px; margin-top:8px; border-top:1px dashed var(--line)}
  table.stacked tbody td.rowact::before{content:''}
  table.stacked tbody td.lead{display:block; text-align:left; font-weight:700; font-size:16px; margin-bottom:6px}
  table.stacked tbody td.lead::before{content:''}
}

/* =========================================================
   PRINT — bilingual contract + receipts
   ========================================================= */
.doc{background:#fff; color:#000; font-family:'Outfit',sans-serif; font-size:12px; line-height:1.6}
.doc-head{text-align:center; border-bottom:2.5px solid var(--forest); padding-bottom:12px; margin-bottom:18px}
.doc-head h2{font-family:'Playfair Display',serif; margin:0; font-size:19px; color:var(--forest)}
.doc-head .sub{font-size:12px; color:#444; margin-top:3px}
.bi{display:grid; grid-template-columns:1fr 1fr; gap:0 26px}
.bi > div{min-width:0}
.bi h4{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--forest); border-bottom:1px solid #ccc; padding-bottom:4px; margin:0 0 8px}
.bi ol{padding-left:17px; margin:0}
.bi li{margin-bottom:7px}
.doc table{width:100%; border-collapse:collapse; margin:12px 0; font-size:11.5px}
.doc table td,.doc table th{border:1px solid #bbb; padding:6px 9px; text-align:left}
.doc table th{background:#EEF4F0; width:32%}
.sign-grid{display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:34px}
.sign-line{border-top:1px solid #000; padding-top:5px; margin-top:46px; font-size:11px}
.doc-foot{margin-top:26px; padding-top:10px; border-top:1px solid #ccc; text-align:center; font-size:10px; color:#666}
.deposit-clause{background:var(--gold-soft); border-left:4px solid var(--gold); padding:11px 14px; margin:12px 0}

@media print{
  .side,.toasts,.no-print,.modal-head .x,.modal-foot{display:none!important}
  body{background:#fff}
  .main{margin:0; padding:0}
  .veil{position:static; background:none; padding:0; display:block}
  .modal{box-shadow:none; border-radius:0; width:100%; max-height:none; overflow:visible}
  .modal-body{padding:0}
  .bi{page-break-inside:auto}
  @page{size:A4; margin:14mm}
}