/* Angan Rosarium — pine green + rose accent, Fraunces display / Inter body */
* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 14.5px;
  color: #21302A; background: #F2F4F1;
}
h1,h2,h3 { font-family: 'Fraunces', Georgia, serif; color: var(--primary); margin: 0 0 .5em; }
a { color: var(--primary); }

.shell { display: flex; min-height: 100vh; }
.side {
  width: 230px; flex-shrink: 0; background: var(--primary); color: #EAF2ED;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { display:flex; align-items:center; gap:10px; padding: 20px 18px 14px;
  font-family:'Fraunces',serif; font-size: 1.15rem; font-weight:700; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand img { height: 34px; width:34px; object-fit: contain; border-radius: 6px; background:#fff; }
.side nav { flex: 1; padding: 8px 0; overflow-y:auto; }
.side nav a { display:block; padding: 9px 18px 9px 30px; color:#CFE0D6; text-decoration:none; font-weight:500;
  border-left: 3px solid transparent; font-size:.92rem; }
.side nav a:hover { background: rgba(255,255,255,.07); color:#fff; }
.side nav a.on { background: rgba(255,255,255,.1); color:#fff; border-left-color: var(--accent); }

/* Accordion groups (vertical) */
.acc-flat { padding: 4px 0 8px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:4px; }
.acc-flat a { padding-left:18px; font-weight:600; }
.acc-group { border-bottom:1px solid rgba(255,255,255,.05); }
.acc-head { width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:#EAF2ED; font-weight:600; font-size:.82rem; letter-spacing:.03em; text-transform:uppercase;
  padding:11px 18px; display:flex; align-items:center; justify-content:space-between; font-family:inherit; }
.acc-head:hover { background:rgba(255,255,255,.06); }
.acc-head i { font-style:normal; font-size:.7rem; transition:transform .18s ease; opacity:.7; }
.acc-group.open > .acc-head i { transform:rotate(180deg); }
.acc-group.open > .acc-head { color:#fff; background:rgba(255,255,255,.05); }
.acc-body { max-height:0; overflow:hidden; transition:max-height .22s ease; }
.acc-group.open > .acc-body { max-height:600px; }
.acc-body a { padding-top:8px; padding-bottom:8px; }
.side-foot { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.85rem; }
.side-foot small { color:#9FBCAC; }

.main { flex: 1; padding: 26px 30px; max-width: 1200px; }
.main-public { max-width: 440px; margin: 6vh auto; padding: 20px; }
.pg-title { font-size: 1.5rem; margin-bottom: 18px; }

.card { background:#fff; border:1px solid #E1E6E1; border-radius:10px; padding:20px; margin-bottom:18px; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.grid3 { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }

/* stats */
.stat { background:#fff; border:1px solid #E1E6E1; border-left: 4px solid var(--primary);
  border-radius:8px; padding:14px 16px; }
.stat.accent { border-left-color: var(--accent); }
.stat .v { font-family:'Fraunces',serif; font-size:1.45rem; font-weight:700; color:var(--primary); }
.stat .l { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:#6B7A72; }

/* signature: building grid */
.building { display:grid; grid-template-columns: 56px repeat(3, 1fr); gap:8px; max-width: 480px; }
.building .fl { display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:600; color:#6B7A72; font-size:.85rem; }
.building .u { border-radius:8px; padding:10px 8px; text-align:center; text-decoration:none;
  border:1.5px solid #DCE3DD; background:#FBFDFB; transition: transform .08s ease; }
.building .u:hover { transform: translateY(-2px); }
.building .u b { display:block; font-family:'Fraunces',serif; font-size:1.05rem; color:#21302A; }
.building .u small { color:#6B7A72; font-size:.72rem; }
.building .u.paid   { background:#EAF5EC; border-color:#9CC7A6; }
.building .u.due    { background:#FBEEF1; border-color:#E0A5B4; }
.building .u.vacant { background:#F4F4F4; border-color:#DDD; color:#999; }
.legend { display:flex; gap:16px; margin-top:12px; font-size:.8rem; color:#5C6B63; }
.legend i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-1px; }

/* tables */
table.tbl { width:100%; border-collapse: collapse; background:#fff; }
.tbl th { text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em;
  color:#5C6B63; padding:9px 10px; border-bottom:2px solid #E1E6E1; }
.tbl td { padding:9px 10px; border-bottom:1px solid #EEF1EE; }
.tbl tr:hover td { background:#F7FAF7; }
.tr-inactive td { color:#999; }

/* forms & buttons */
label { display:block; font-weight:600; font-size:.82rem; margin:10px 0 4px; color:#3B4A42; }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=color],select,textarea {
  width:100%; padding:9px 10px; border:1px solid #CBD4CD; border-radius:7px; font:inherit; background:#fff;
}
input:focus,select:focus,textarea:focus { outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary); }
.btn { display:inline-block; background:var(--primary); color:#fff; border:none; padding:10px 18px;
  border-radius:7px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
.btn:hover { filter:brightness(1.12); }
.btn-accent { background:var(--accent); }
.btn-sm { padding:5px 11px; font-size:.82rem; }
.btn-outline { background:transparent; border:1.5px solid currentColor; color:inherit; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.row > div { flex:1; min-width:140px; }

.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:.75rem; font-weight:600; }
.b-paid { background:#EAF5EC; color:#256A38; }
.b-partial { background:#FFF4E0; color:#8A5A00; }
.b-unpaid { background:#FBEEF1; color:#9A2E4A; }
.b-active { background:#EAF5EC; color:#256A38; }
.b-inactive { background:#EEE; color:#777; }
.b-pending { background:#FFF4E0; color:#8A5A00; }

.flash { padding:11px 15px; border-radius:8px; margin-bottom:16px; font-weight:500; }
.flash-ok { background:#EAF5EC; color:#215D31; border:1px solid #B7DBC0; }
.flash-err { background:#FBEEF1; color:#8E2B45; border:1px solid #E8B7C3; }

.login-card { background:#fff; border:1px solid #E1E6E1; border-radius:12px; padding:30px; }
.login-brand { text-align:center; margin-bottom:18px; }
.login-brand h1 { font-size:1.6rem; margin-bottom:2px; }
.login-brand p { color:#6B7A72; margin:0; font-size:.86rem; }

/* ============ MOBILE ============ */
/* Sticky bar with hamburger — only on small screens */
.mobile-bar { display:none; }
.drawer-backdrop { display:none; }

@media (max-width: 900px) {
  html, body { max-width:100%; }
  body { overflow-x:clip; }   /* 'clip' contains overflow WITHOUT breaking position:sticky */

  /* --- sticky mobile header --- */
  .mobile-bar {
    display:flex; align-items:center; gap:12px;
    position:sticky; top:0; z-index:60;
    background:var(--primary); color:#fff;
    padding:10px 14px; box-shadow:0 2px 8px rgba(0,0,0,.18);
  }
  .mobile-bar .mb-burger {
    background:transparent; border:1.5px solid rgba(255,255,255,.45); color:#fff;
    border-radius:8px; width:42px; height:42px; font-size:1.25rem; line-height:1;
    cursor:pointer; flex:none;
  }
  .mobile-bar .mb-title {
    font-weight:600; font-size:1rem; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; flex:1;
  }
  .mobile-bar img { height:26px; border-radius:4px; flex:none; }
  .mobile-bar .bell { position:static; flex:none; }

  /* --- off-canvas drawer (vertical layout) --- */
  .shell { flex-direction:row; }
  .side {
    position:fixed; top:0; left:0; z-index:80;
    width:82%; max-width:320px; height:100vh; height:100dvh;
    transform:translateX(-102%); transition:transform .22s ease;
    box-shadow:2px 0 18px rgba(0,0,0,.28); overflow-y:auto;
  }
  body.nav-open .side { transform:translateX(0); }
  .side nav.acc { display:block; }
  .drawer-backdrop {
    display:block; position:fixed; inset:0; z-index:70;
    background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  body.nav-open .drawer-backdrop { opacity:1; pointer-events:auto; }
  body.nav-open { overflow:hidden; }

  /* --- horizontal layout collapses into the same drawer pattern --- */
  .topbar { display:none; }
  body.nav-open .topbar {
    display:block; position:fixed; top:0; left:0; z-index:80;
    width:82%; max-width:320px; height:100vh; height:100dvh; overflow-y:auto;
  }
  body.nav-open .topbar .topnav { display:flex; flex-direction:column; align-items:stretch; }
  body.nav-open .topbar .topgroup-menu { position:static; display:block; box-shadow:none; min-width:0; }
  body.nav-open .topbar .topuser { flex-wrap:wrap; padding:10px 14px; }

  /* --- content --- */
  .main, .main-top { padding:14px 12px; max-width:100%; }
  .pg-title { font-size:1.32rem; margin:2px 0 12px; }
  .card { padding:14px; border-radius:9px; margin-bottom:13px; }

  /* stat cards stay 2-up (1-up wastes the screen), other grids stack */
  .grid2 { grid-template-columns:1fr !important; gap:13px; }
  .grid3 { grid-template-columns:1fr 1fr !important; gap:10px; }
  .stat .v { font-size:1.22rem; }

  /* --- forms: full-width fields, no iOS zoom, big tap targets --- */
  .row { gap:10px; }
  .row > div { flex:1 1 100%; min-width:0; }
  input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
  input[type=color],select,textarea { font-size:16px; padding:11px 12px; }
  .btn { padding:12px 18px; min-height:44px; }
  .btn-sm { padding:9px 13px; min-height:38px; font-size:.85rem; }
  .side nav a { padding:12px 18px 12px 30px; }
  .acc-head, .topgroup-btn { min-height:46px; }

  /* --- tables scroll sideways instead of breaking the layout --- */
  .tbl-scroll {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin:0 -14px; padding:0 14px; max-width:100vw;
  }
  .tbl-scroll table.tbl { min-width:max-content; }
  .tbl th, .tbl td { padding:9px 10px; white-space:nowrap; }
  .tbl-scroll::-webkit-scrollbar { height:5px; }
  .tbl-scroll::-webkit-scrollbar-thumb { background:#C3D2C7; border-radius:3px; }
  .tbl-hint { display:block; font-size:.74rem; color:#8FA096; margin:-4px 0 6px; }

  .login-card { padding:22px; }
  .main-public { margin:3vh auto; }
}

@media (max-width: 420px) {
  .grid3 { grid-template-columns:1fr !important; }
  .main, .main-top { padding:12px 10px; }
}
@media print {
  .side, .btn, .flash, .no-print, .mobile-bar, .drawer-backdrop, .tbl-hint { display:none !important; }
  .tbl-scroll { overflow:visible; margin:0; padding:0; }
  .main { padding:0; max-width:100%; }
  body { background:#fff; }
  .card { border:none; }
}

/* avatars */
.avatar-sm { height:34px; width:34px; object-fit:cover; border-radius:50%; border:1px solid #DCE3DD; }
.avatar-lg { height:96px; width:96px; object-fit:cover; border-radius:10px; border:1px solid #DCE3DD; }
.avatar-blank { display:flex; align-items:center; justify-content:center; background:var(--primary);
  color:#fff; font-family:'Fraunces',serif; font-weight:700; }
.avatar-sm.avatar-blank { font-size:.95rem; }
.avatar-lg.avatar-blank { font-size:2.4rem; }

/* horizontal menu layout */
.topbar { display:flex; align-items:center; gap:18px; background:var(--primary); color:#EAF2ED;
  padding:0 18px; flex-wrap:wrap; position:sticky; top:0; z-index:10; }
.topbar .brand { border:none; padding:12px 0; white-space:nowrap; }
.topnav { display:flex; flex:1; flex-wrap:wrap; gap:2px; align-items:center; }
.topnav > a { padding:9px 11px; color:#CFE0D6; text-decoration:none; font-weight:500; font-size:.9rem;
  border-bottom:3px solid transparent; }
.topnav > a:hover { color:#fff; background:rgba(255,255,255,.07); }
.topnav > a.on { color:#fff; border-bottom-color:var(--accent); background:rgba(255,255,255,.1); }
/* dropdown group on the top bar */
.topgroup { position:relative; }
.topgroup-btn { background:none; border:none; cursor:pointer; color:#CFE0D6; font-family:inherit;
  font-weight:500; font-size:.9rem; padding:9px 11px; border-bottom:3px solid transparent; display:flex; align-items:center; gap:5px; }
.topgroup-btn i { font-style:normal; font-size:.65rem; opacity:.7; }
.topgroup:hover .topgroup-btn, .topgroup.open .topgroup-btn { color:#fff; background:rgba(255,255,255,.08); }
.topgroup.has-active .topgroup-btn { border-bottom-color:var(--accent); color:#fff; }
.topgroup-menu { position:absolute; top:100%; left:0; min-width:190px; background:#fff;
  border:1px solid #D9E0DA; border-radius:0 0 10px 10px; box-shadow:0 10px 26px rgba(0,0,0,.16);
  padding:6px; display:none; z-index:40; }
.topgroup:hover .topgroup-menu, .topgroup.open .topgroup-menu { display:block; }
.topgroup-menu a { display:block; padding:8px 12px; color:#21302A; text-decoration:none; border-radius:6px; font-size:.88rem; }
.topgroup-menu a:hover { background:#EEF3EF; }
.topgroup-menu a.on { background:var(--primary); color:#fff; }
.topuser { display:flex; align-items:center; gap:10px; font-size:.85rem; white-space:nowrap; }
.main-top { max-width:1200px; margin:0 auto; padding:24px 26px; }

/* notification bell */
.bell { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
  padding:0 6px; border-radius:11px; background:var(--accent); color:#fff !important;
  font-size:.75rem; font-weight:700; text-decoration:none; }
.bell:hover { filter:brightness(1.15); }

/* use the chosen display font */
h1,h2,h3, .stat .v, .building .u b, .brand { font-family: var(--display, 'Fraunces', Georgia, serif); }

.verfoot { text-align:center; color:#9FB0A6; font-size:.78rem; margin-top:28px; padding-top:12px; border-top:1px solid #E8ECE8; }

/* searchable select */
.ss-wrap { display:flex; flex-direction:column; gap:3px; }
.ss-box { padding:6px 9px; border:1px solid #D6DED7; border-radius:6px 6px 0 0; font-size:.85rem;
  background:#FAFCFA; border-bottom:none; }
.ss-box:focus { outline:none; border-color:var(--primary); background:#fff; }
.ss-wrap select { border-radius:0 0 6px 6px; }

/* table search box */
.search-box { width:100%; max-width:340px; padding:9px 12px 9px 34px; border:1px solid #D6DED7;
  border-radius:8px; font-size:.9rem; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center; }
.search-box:focus { outline:none; border-color:var(--primary); }