/* ==========================================================================
   Kost Marjan — Portal & Admin app styles (loaded after styles.css)
   ========================================================================== */

body.app{background:linear-gradient(180deg,var(--mint-50),var(--cream));min-height:100vh}

/* ---------- Login screen ---------- */
.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 80% -10%,#0f7a3d 0%,#0b5b31 45%,#083f24 100%)}
.login-card{width:100%;max-width:410px;background:#fff;border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-lg)}
.login-card .brand{justify-content:center;margin-bottom:6px;font-size:1.25rem}
.login-card h1{font-size:1.5rem;text-align:center;font-family:var(--serif);font-weight:600}
.login-card .muted{text-align:center;margin-bottom:22px}
.login-hint{margin-top:16px;background:var(--mint-50);border:1px dashed var(--lime-300);border-radius:12px;padding:12px 14px;font-size:.82rem;color:var(--ink-soft)}
.login-hint b{color:var(--green-700)}
.login-tabs{display:flex;background:var(--mint-100);border-radius:var(--radius-pill);padding:4px;margin-bottom:20px}
.login-tabs button{flex:1;border:none;background:none;padding:.6em;border-radius:var(--radius-pill);font-weight:700;color:var(--ink-soft);font-size:.9rem}
.login-tabs button.on{background:#fff;color:var(--green-700);box-shadow:var(--shadow-sm)}

/* ---------- App shell ---------- */
.shell{display:grid;min-height:100vh;grid-template-columns:1fr}
.sidebar{display:none}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:12px 18px}
.topbar .brand{font-size:1rem}
.topbar-actions{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--green-600),var(--lime-500));
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.main{padding:20px 18px 96px}
.page-title{font-size:1.4rem;font-family:var(--serif);font-weight:600;margin-bottom:2px}
.page-sub{color:var(--muted);font-size:.92rem;margin-bottom:20px}

/* bottom tab nav (mobile) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 6px 10px}
.tabbar button{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--muted);font-size:.68rem;font-weight:700;padding:4px 8px;border-radius:12px;flex:1}
.tabbar button svg{width:22px;height:22px}
.tabbar button.on{color:var(--green-700)}
.tabbar button.on svg{transform:translateY(-1px)}

.page{display:none;animation:fadeUp .4s ease}
.page.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Stat tiles ---------- */
.stat-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
.stat .lbl{font-size:.76rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.stat .val{font-size:1.7rem;font-weight:800;font-family:var(--serif);color:var(--green-700);line-height:1.2;margin-top:4px}
.stat .val.sm{font-size:1.2rem}
.stat .foot{font-size:.8rem;color:var(--muted);margin-top:2px}
@media(min-width:720px){.stat-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- Dashboard status hero ---------- */
.status-hero{border-radius:var(--radius-lg);padding:24px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.status-hero.ok{background:linear-gradient(135deg,var(--green-600),var(--green-800))}
.status-hero.warn{background:linear-gradient(135deg,#e0952b,#b9741a)}
.status-hero.danger{background:linear-gradient(135deg,#d64545,#a5302f)}
.status-hero.info{background:linear-gradient(135deg,#2b7fd6,#1f5da0)}
.status-hero .big{font-size:1.8rem;font-weight:800;font-family:var(--serif);margin:.2em 0}
.status-hero .sub{opacity:.92;font-size:.95rem}
.status-hero .ring{position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.12)}
.due-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.due-meta .pill{background:rgba(255,255,255,.16);border-radius:12px;padding:8px 12px;font-size:.82rem}
.due-meta .pill b{display:block;font-size:1rem}

/* ---------- Lists / rows ---------- */
.row-list{display:grid;gap:10px}
.row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:.2s}
.row:hover{box-shadow:var(--shadow-sm)}
.row .rleft{display:flex;align-items:center;gap:12px;min-width:0}
.room-badge{width:42px;height:42px;flex:none;border-radius:12px;background:var(--mint-100);color:var(--green-700);display:grid;place-items:center;font-weight:800;font-family:var(--serif)}
.row .name{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta{font-size:.8rem;color:var(--muted)}
.row .rright{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}

/* ---------- Table (admin) ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.tbl{width:100%;border-collapse:collapse;min-width:560px}
table.tbl th,table.tbl td{padding:12px 14px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--line)}
table.tbl th{background:var(--mint-50);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);position:sticky;top:0}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tr:hover td{background:var(--mint-50)}

/* segmented filter */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filterbar button{border:1.5px solid var(--line);background:#fff;border-radius:var(--radius-pill);padding:.5em 1em;font-weight:600;font-size:.85rem;color:var(--ink-soft)}
.filterbar button.on{background:var(--green-700);color:#fff;border-color:var(--green-700)}

/* ---------- Room grid (availability) ---------- */
.room-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.room-cell{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:16px;transition:.2s}
.room-cell.kosong{border-color:var(--lime-400);background:linear-gradient(135deg,#fff,var(--lime-100))}
.room-cell .rnum{font-family:var(--serif);font-weight:800;font-size:1.3rem;color:var(--green-700)}
.room-cell .rname{font-size:.85rem;color:var(--ink-soft);margin:4px 0 8px;min-height:1.2em}
@media(min-width:640px){.room-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.room-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(6,38,23,.5);z-index:100;display:none;place-items:center;padding:20px}
.modal-backdrop.open{display:grid;animation:fadeUp .25s}
.modal{background:#fff;border-radius:var(--radius-lg);width:100%;max-width:460px;box-shadow:var(--shadow-lg);max-height:90vh;overflow:auto}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:1.15rem}
.modal-body{padding:22px}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.x-btn{background:var(--mint-100);border:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--green-800)}
.x-btn:hover{background:var(--line)}

/* upload dropzone */
.dropzone{border:1.5px dashed var(--lime-400);border-radius:14px;padding:22px;text-align:center;background:var(--mint-50);cursor:pointer;transition:.2s}
.dropzone:hover{background:var(--lime-100)}
.dropzone.has{border-style:solid;border-color:var(--green-500)}
.dropzone svg{width:34px;height:34px;color:var(--green-600);margin-bottom:8px}
.dropzone .fn{font-weight:700;color:var(--green-700);font-size:.9rem;margin-top:6px;word-break:break-all}

/* history timeline */
.hist{display:grid;gap:8px}
.hist-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.hist-item .mo{font-weight:700;font-size:.92rem}
.hist-item .yr{font-size:.78rem;color:var(--muted)}

/* info cards */
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.info-card .ico{width:44px;height:44px;flex:none;border-radius:12px;background:var(--mint-100);color:var(--green-700);display:grid;place-items:center}
.info-card .ico svg{width:22px;height:22px}
.info-card code{background:var(--mint-50);border:1px solid var(--line);padding:2px 8px;border-radius:6px;font-size:.9rem;color:var(--green-800);font-weight:700}

.section-label{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:24px 0 12px}
.deposit-bar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:center;gap:14px}
.deposit-bar .ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--lime-100),var(--mint-100));color:var(--green-700);display:grid;place-items:center;flex:none}

/* demo banner */
.demo-banner{background:var(--warn-bg);color:#7a5312;border:1px solid #f0d9a8;border-radius:12px;padding:10px 14px;font-size:.82rem;display:flex;gap:.6em;align-items:center;margin-bottom:16px}
.demo-banner svg{width:18px;height:18px;flex:none}