/* ═══════════════════════════════════════════════════════════
   Property app — light theme
   Palette: river blue on a cool canvas, navy ink.
   System fonts only (no download) so pages open instantly.
   ═══════════════════════════════════════════════════════════ */
:root {
  --blue:       #1D4ED8;
  --blue-dark:  #1E3FAE;
  --blue-tint:  #EAF0FF;
  --blue-ring:  rgba(29,78,216,.18);
  --ink:        #14213D;
  --ink-2:      #3B4763;
  --muted:      #6B7590;
  --line:       #E3E8F2;
  --line-2:     #EEF1F7;
  --canvas:     #F5F7FB;
  --surface:    #FFFFFF;
  --green:      #16A34A;  --green-tint: #E8F7EE;  --green-ink: #166534;
  --amber:      #D97706;  --amber-tint: #FEF4E6;  --amber-ink: #92400E;
  --red:        #DC2626;  --red-tint:   #FDECEC;  --red-ink:   #991B1B;
  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(20,33,61,.04), 0 6px 20px rgba(20,33,61,.05);
  --shadow-up:  0 12px 32px rgba(20,33,61,.14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* Smooth cross-page fade in browsers that support it (Chrome, Edge, Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { max-width:100%; overflow-x:hidden; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font);
  background:var(--canvas);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
  padding-top:60px;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
body.public { padding-top:0; }
[hidden] { display:none !important; }
a { color:var(--blue); }
:focus-visible { outline:3px solid var(--blue-ring); outline-offset:2px; border-radius:6px; }

/* ══════════════ NAVBAR ══════════════ */
.rv-nav {
  position:fixed; top:0; left:0; right:0; z-index:9999;
  height:60px; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; gap:10px;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.rv-brand { display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.rv-brand-mark {
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:var(--blue); color:#fff; display:grid; place-items:center;
  font-weight:800; font-size:15px; letter-spacing:-.5px;
}
.rv-brand-name { font-weight:750; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.2px; }
.rv-nav-right { display:flex; align-items:center; gap:6px; }
.rv-icon-btn {
  position:relative; width:40px; height:40px; border-radius:12px; border:none; background:transparent;
  display:grid; place-items:center; cursor:pointer; color:var(--ink-2); transition:background .15s;
}
.rv-icon-btn:hover { background:var(--line-2); }
.rv-icon-btn svg { width:22px; height:22px; }
.rv-badge {
  position:absolute; top:4px; right:4px; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--red); color:#fff; font-size:10px; font-weight:800;
  display:grid; place-items:center; border:2px solid #fff;
}
.rv-badge.pop { animation:rvPop .4s var(--ease); }
@keyframes rvPop { 0%{transform:scale(.4)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }
.rv-avatar {
  width:34px; height:34px; border-radius:50%; color:#fff; font-weight:700; font-size:14px;
  display:grid; place-items:center; flex-shrink:0;
}
.rv-burger span { display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s; }
.rv-burger { display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; }
.rv-burger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.rv-burger.open span:nth-child(2) { opacity:0; }
.rv-burger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

.rv-committee-bar {
  position:fixed; top:60px; left:0; right:0; z-index:9990;
  background:#4C1D95; color:#fff; font-size:12.5px; font-weight:600;
  padding:7px 16px; display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.rv-committee-bar a { color:#fff; }
.rv-committee-spacer { height:32px; }

/* Drawer */
.rv-drawer {
  position:fixed; top:60px; left:0; bottom:0; width:min(320px, 86vw); z-index:9998;
  background:var(--surface); border-right:1px solid var(--line);
  transform:translateX(-102%); transition:transform .28s var(--ease);
  overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:var(--shadow-up);
}
.rv-drawer.open { transform:translateX(0); }
.rv-drawer-head { display:flex; gap:12px; align-items:center; padding:18px 16px 14px; border-bottom:1px solid var(--line-2); }
.rv-drawer-head .rv-avatar { width:44px; height:44px; border-radius:14px; font-size:18px; }
.rv-drawer-name { font-weight:700; font-size:15px; color:var(--ink); line-height:1.3; }
.rv-drawer-role { font-size:12px; color:var(--muted); margin-top:2px; }
.rv-drawer-nav { padding:8px; }
.rv-link {
  display:flex; align-items:center; gap:12px; padding:11px 12px; margin:2px 0; border-radius:12px;
  color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:550; transition:background .15s, color .15s;
}
.rv-link:hover { background:var(--line-2); color:var(--ink); }
.rv-link.active { background:var(--blue-tint); color:var(--blue); font-weight:700; }
.rv-link-icon { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:16px; background:var(--line-2); flex-shrink:0; }
.rv-link.active .rv-link-icon { background:#fff; }
.rv-link small { color:var(--muted); font-weight:500; }
.rv-link.logout { color:var(--red); margin-top:8px; border-top:1px solid var(--line-2); border-radius:0 0 12px 12px; padding-top:14px; }
.rv-link.logout .rv-link-icon { background:var(--red-tint); }
.rv-overlay { position:fixed; inset:60px 0 0 0; z-index:9997; background:rgba(20,33,61,.32); opacity:0; pointer-events:none; transition:opacity .25s; }
.rv-overlay.open { opacity:1; pointer-events:auto; }

/* Notification panel */
.rv-notif-panel {
  position:fixed; top:66px; right:10px; left:10px; margin-left:auto; max-width:380px; z-index:99999;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-up);
  overflow:hidden; transform-origin:top right; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none;
  transition:opacity .18s, transform .18s var(--ease);
}
.rv-notif-panel.open { opacity:1; transform:none; pointer-events:auto; }
.rv-notif-head { padding:12px 16px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:700; }
.rv-notif-head button { background:none; border:none; color:var(--blue); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.rv-notif-list { max-height:340px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.rv-notif-foot { padding:11px 14px; border-top:1px solid var(--line-2); text-align:center; }
.rv-notif-foot a { font-size:13px; font-weight:600; text-decoration:none; }
.notif-item {
  display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border-bottom:1px solid var(--line-2);
  text-decoration:none; color:var(--ink); background:var(--surface); transition:background .15s; cursor:pointer;
}
.notif-item:hover { background:#FAFBFE; }
.notif-item.unread { background:#F5F8FF; }
.notif-icon { width:36px; height:36px; border-radius:10px; background:var(--line-2); display:grid; place-items:center; font-size:17px; flex-shrink:0; }
.notif-item.unread .notif-icon { background:var(--blue-tint); }
.notif-body { flex:1; min-width:0; }
.notif-msg { font-size:13.5px; line-height:1.45; }
.notif-item.unread .notif-msg { font-weight:600; }
.notif-time { font-size:11.5px; color:var(--muted); margin-top:3px; }
.notif-dot { width:8px; height:8px; border-radius:50%; background:var(--blue); flex-shrink:0; margin-top:6px; }
.notif-empty { padding:28px 16px; text-align:center; color:var(--muted); font-size:13.5px; }

/* Floating toasts */
.rv-toasts {
  position:fixed; z-index:100000; top:70px; right:12px; left:12px; margin-left:auto; max-width:380px;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
body.public .rv-toasts { top:14px; }
.rv-toast {
  pointer-events:auto; position:relative; overflow:hidden; display:flex; gap:11px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-up);
  padding:13px 38px 13px 14px; font-size:13.5px; line-height:1.45; color:var(--ink);
  animation:rvToastIn .32s var(--ease) both; cursor:default;
}
.rv-toast.leaving { animation:rvToastOut .25s ease-in both; }
.rv-toast-icon { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; font-size:14px; font-weight:800; }
.rv-toast.success .rv-toast-icon { background:var(--green-tint); color:var(--green); }
.rv-toast.info    .rv-toast-icon { background:var(--blue-tint);  color:var(--blue); }
.rv-toast.warning .rv-toast-icon { background:var(--amber-tint); color:var(--amber); }
.rv-toast.danger  .rv-toast-icon { background:var(--red-tint);   color:var(--red); }
.rv-toast a { font-weight:600; }
.rv-toast-close { position:absolute; top:8px; right:8px; width:26px; height:26px; border:none; background:none; color:var(--muted); font-size:18px; cursor:pointer; border-radius:8px; }
.rv-toast-close:hover { background:var(--line-2); }
.rv-toast-bar { position:absolute; left:0; bottom:0; height:3px; background:var(--blue); opacity:.35; transform-origin:left; animation:rvBar linear forwards; }
.rv-toast.success .rv-toast-bar { background:var(--green); }
.rv-toast.danger  .rv-toast-bar { background:var(--red); }
@keyframes rvToastIn  { from { opacity:0; transform:translateY(-10px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes rvToastOut { to   { opacity:0; transform:translateX(24px); } }
@keyframes rvBar      { from { transform:scaleX(1); } to { transform:scaleX(0); } }

/* Watermark (brand short name) */
.pprv-watermark { position:fixed; bottom:8px; right:12px; z-index:100; font-size:10px; font-weight:700; letter-spacing:2px; color:rgba(107,117,144,.25); pointer-events:none; user-select:none; }

/* ══════════════ LAYOUT ══════════════ */
.container { max-width:1100px; margin:0 auto; padding:20px 16px 80px; animation:rvEnter .28s var(--ease) both; }
@keyframes rvEnter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.page-title { font-size:22px; font-weight:780; color:var(--ink); margin-bottom:18px; letter-spacing:-.4px; line-height:1.25; }
.page-sub { color:var(--muted); font-size:14px; margin:-12px 0 18px; }

/* ══════════════ CARDS ══════════════ */
.card {
  background:var(--surface); border-radius:var(--radius); padding:18px 16px; margin-bottom:16px;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.card-title { font-size:15px; font-weight:700; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line-2); color:var(--ink); letter-spacing:-.1px; }

/* ══════════════ FORMS ══════════════ */
.form-group { margin-bottom:14px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-size:15px; font-family:inherit; text-transform:uppercase; background:#FBFCFE; color:var(--ink);
  transition:border-color .15s, background .15s, box-shadow .15s; -webkit-appearance:none; appearance:none;
}
.form-group textarea { text-transform:none; }
.form-group select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7590' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px var(--blue-ring); }
.form-group input[type="password"], .form-group input[type="file"], .form-group input[type="number"],
.form-group input[type="month"], .form-group input[type="date"], .form-group input[type="email"] { text-transform:none; }
.form-hint { font-size:12px; color:var(--muted); margin-top:5px; line-height:1.45; }

/* ══════════════ BUTTONS ══════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 18px;
  border-radius:var(--radius-sm); border:1px solid transparent; font-size:14px; font-weight:650; cursor:pointer;
  text-decoration:none; font-family:inherit; -webkit-appearance:none; white-space:nowrap;
  transition:background .15s, box-shadow .15s, transform .08s;
}
.btn:active { transform:scale(.97); }
.btn-primary   { background:var(--blue); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 4px 12px rgba(29,78,216,.25); }
.btn-primary:hover { background:var(--blue-dark); }
.btn-success   { background:var(--green); color:#fff; }
.btn-success:hover { background:#13883E; }
.btn-danger    { background:var(--red); color:#fff; }
.btn-danger:hover { background:#B91C1C; }
.btn-warning   { background:var(--amber); color:#fff; }
.btn-secondary { background:var(--line-2); color:var(--ink-2); border-color:var(--line); }
.btn-secondary:hover { background:var(--line); }
.btn-outline   { background:#fff; border:1.5px solid var(--line); color:var(--ink-2); }
.btn-outline:hover { border-color:#C9D2E3; }
.btn-sm   { padding:7px 12px; font-size:12.5px; border-radius:9px; }
.btn-full { width:100%; }
.btn[disabled], .btn.loading { opacity:.6; pointer-events:none; }

/* ══════════════ TABLES ══════════════ */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; border:1px solid var(--line); background:#fff; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
.table-wrap > table { min-width:500px; }
th { background:#F8FAFD; padding:10px 12px; text-align:left; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); font-weight:650; white-space:nowrap; }
td { padding:11px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tbody tr:hover td, tr:hover td { background:#FAFBFE; }

/* ══════════════ ALERTS ══════════════ */
.alert { padding:12px 14px; border-radius:12px; margin-bottom:14px; font-size:14px; font-weight:500; border:1px solid; display:block; line-height:1.5; }
.alert-success { background:var(--green-tint); color:var(--green-ink); border-color:#C6EBD3; }
.alert-danger  { background:var(--red-tint);   color:var(--red-ink);   border-color:#F6C9C9; }
.alert-warning { background:var(--amber-tint); color:var(--amber-ink); border-color:#F7DDB5; }
.alert-info    { background:var(--blue-tint);  color:#1E3A8A;          border-color:#CFDBFB; }

/* ══════════════ BADGES ══════════════ */
.badge { padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; display:inline-block; white-space:nowrap; letter-spacing:.1px; }
.badge-success { background:var(--green-tint); color:var(--green-ink); }
.badge-danger  { background:var(--red-tint);   color:var(--red-ink); }
.badge-warning { background:var(--amber-tint); color:var(--amber-ink); }
.badge-info    { background:var(--blue-tint);  color:#1E3A8A; }
.badge-grey    { background:var(--line-2);     color:var(--muted); }

/* ══════════════ STATS ══════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:20px; }
.stat-card { background:var(--surface); border-radius:var(--radius); padding:16px; border:1px solid var(--line); }
.stat-label { font-size:12.5px; color:var(--muted); font-weight:600; }
.stat-value { font-size:26px; font-weight:780; margin-top:4px; color:var(--ink); line-height:1.1; letter-spacing:-.5px; }

/* ══════════════ QR / SLIP ══════════════ */
.qr-wrap { text-align:center; padding:20px; background:#FBFCFE; border-radius:12px; border:1px solid var(--line); margin:12px 0; }
.qr-wrap img { max-width:200px; border-radius:8px; }
.slip-preview { max-width:100%; max-height:240px; border-radius:8px; border:2px solid var(--line); margin-top:8px; display:block; }

/* ══════════════ PAGING / FILTER CHIPS ══════════════ */
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chip { padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink-2); font-size:13px; font-weight:600; text-decoration:none; }
.chip.on { background:var(--blue); border-color:var(--blue); color:#fff; }
.pager { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; font-size:13px; color:var(--muted); }

/* ══════════════ PUBLIC PAGES (login, gate, pass, payment result) ══════════════ */
.pub-wrap { max-width:460px; margin:0 auto; padding:22px 16px 70px; animation:rvEnter .3s var(--ease) both; }
.pub-brand { display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.pub-brand .rv-brand-mark { width:42px; height:42px; border-radius:12px; font-size:17px; }
.pub-brand-name { font-size:16px; font-weight:780; color:var(--ink); letter-spacing:-.2px; line-height:1.2; }
.pub-brand-sub { font-size:12.5px; color:var(--muted); }
.pub-card { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:22px 18px; margin-bottom:14px; }
.pub-title { font-size:20px; font-weight:780; letter-spacing:-.3px; margin-bottom:6px; color:var(--ink); }
.pub-text { font-size:14px; color:var(--ink-2); line-height:1.55; }
.pprv { text-align:center; font-size:11px; letter-spacing:2px; color:#A3ACC2; font-weight:700; margin-top:20px; }

/* ══════════════ MOTION PREFERENCES ══════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (min-width:768px) {
  .container { padding:26px 22px 60px; }
  .form-row { gap:16px; }
  .stats-grid { grid-template-columns:repeat(4,1fr); }
  .card { padding:22px 20px; }
}
@media (max-width:480px) {
  .form-row { grid-template-columns:1fr; }
  .btn { padding:12px 16px; }
  .page-title { font-size:20px; }
  table { font-size:12.5px; }
  .table-wrap > table { min-width:400px; }
  th, td { padding:9px 10px; }
}
@media print {
  .rv-nav, .rv-drawer, .rv-overlay, .rv-toasts, .pprv-watermark, .rv-committee-bar { display:none !important; }
  body { padding-top:0; background:#fff; }
}