:root{
  --card-bg: #111318;
  --card-brd: rgba(255,255,255,.10);
  --muted: rgba(255,255,255,.70);
  --accent: #20c997;
}
.card-dark{ background: var(--card-bg); border: 1px solid var(--card-brd); }
.text-muted2{ color: rgba(255,255,255,.70) !important; }
.badge-soft{ background: rgba(32,201,151,.12); color: #7ef0c9; border: 1px solid rgba(32,201,151,.25); }
.badge-pending{ background: rgba(255,193,7,.12); color: #ffd666; border: 1px solid rgba(255,193,7,.25); }
.badge-cancel{ background: rgba(220,53,69,.12); color: #ff8a98; border: 1px solid rgba(220,53,69,.25); }
.table-dark th, .table-dark td { vertical-align: middle; }
.form-control, .form-select{ background:#0b0d12; border-color: rgba(255,255,255,.12); color:#fff; }
.form-control:focus, .form-select:focus{ background:#0b0d12; color:#fff; border-color: rgba(32,201,151,.55); box-shadow: 0 0 0 .2rem rgba(32,201,151,.15);}
a{ text-decoration: none; }
.small2{ font-size: .92rem; color: rgba(255,255,255,.80); }
.kpi{ font-size:1.4rem; font-weight:800; }
.kpi-label{ color: var(--muted); font-size:.85rem; }
.sticky-actions{ position: sticky; bottom: 12px; z-index: 20; }
.calendar-grid{ overflow:auto; border:1px solid rgba(255,255,255,.10); border-radius: 14px; }
.cal-table{ min-width: 1050px; margin:0; }
.cal-table th, .cal-table td{ border-color: rgba(255,255,255,.08) !important; }
.cal-house{ position: sticky; left:0; background:#0b0d12; z-index:3; min-width: 170px; max-width: 240px; }
.cal-day{ width: 36px; height: 32px; text-align:center; font-size:.82rem; }
.cal-dow-row th{ padding-top: 0 !important; padding-bottom: .2rem !important; }
.cal-dow{ font-size: .68rem; color: rgba(255,255,255,.72); letter-spacing: .2px; }
/* no more dots — blocks show occupancy */

/* Booking cells (color comes from CSS vars set inline)
   We remove inner vertical borders so consecutive days look like a single block. */
.cal-booked{ background: var(--bkfill, rgba(32,201,151,.18)) !important; border-color: var(--bkbrd, rgba(32,201,151,.22)) !important; cursor: pointer; position: relative; }
.cal-booked{ border-left-color: transparent !important; border-right-color: transparent !important; }
.cal-pos-start{ border-left-color: var(--bkbrd, rgba(32,201,151,.22)) !important; }
.cal-pos-end{ border-right-color: var(--bkbrd, rgba(32,201,151,.22)) !important; }
.cal-pos-single{ border-left-color: var(--bkbrd, rgba(32,201,151,.22)) !important; border-right-color: var(--bkbrd, rgba(32,201,151,.22)) !important; }

/* Marker-only day (check-in/out day with no occupied night) */
.cal-marker-only{ cursor: pointer; position: relative; background: transparent !important; }

/* Selected booking highlight */
.cal-selected{ box-shadow: inset 0 0 0 2px rgba(255,255,255,.25) !important; }

/* Check-in / check-out markers (triangles)
   User preference: show markers without rounding and without covering the whole day.
   - check-in: top-left triangle
   - check-out: bottom-left triangle (at the beginning of the day, not at the end) */
.cal-checkin::before{content:"";position:absolute;left:0;top:0;width:0;height:0;border-top:12px solid var(--bk, rgba(32,201,151,.85));border-right:12px solid transparent;opacity:.95;}
.cal-checkout::after{content:"";position:absolute;left:0;bottom:0;width:0;height:0;border-bottom:12px solid var(--bk, rgba(32,201,151,.85));border-right:12px solid transparent;opacity:.95;}

/* Turnover day (check-in + check-out same date): show ONE marker only */
.cal-turnover::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(45deg);width:10px;height:10px;background:var(--bk, rgba(32,201,151,.85));opacity:.95;}

/* No rounded edges on blocks (consistent across browsers) */
.cal-booked, .cal-marker-only{ border-radius: 0 !important; }
.cal-pos-start, .cal-pos-end, .cal-pos-single{ border-radius: 0 !important; }

/* Mini availability strip on Home */
.mini-cal{ overflow:auto; border:1px solid rgba(255,255,255,.10); border-radius: 14px; }
.mini-cal table{ min-width: 950px; margin:0; }
.mini-cal th,.mini-cal td{ border-color: rgba(255,255,255,.08) !important; }
.mini-cal th.mini-dow{ font-size: 11px; font-weight: 600; letter-spacing: .2px; color: rgba(255,255,255,.65); padding-top: 4px; padding-bottom: 6px; }
.mini-cell{ width: 34px; height: 28px; text-align:center; font-size:.8rem;  border-radius:0 !important; }
.mini-house{ position: sticky; left:0; background:#0b0d12; z-index:2; min-width: 170px; }
.mini-free{ background: transparent !important; }
.mini-occ{ background: var(--bkfill, rgba(220,53,69,.10)) !important; border-color: var(--bkbrd, rgba(255,255,255,.10)) !important; }
.mini-today{ box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }

/* --- Top menu always visible (no hamburger) --- */
.topnav-scroll{
  display:flex;
  gap:.4rem;
  align-items:center;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  white-space:nowrap;
  padding: .35rem .15rem;
}
.topnav-scroll::-webkit-scrollbar{ height: 6px; }
.topnav-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 99px; }
.navlink-btn{
  display:inline-flex;
  align-items:center;
  padding:.45rem .7rem;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
}
.navlink-btn:hover{ color:#fff; border-color: rgba(255,255,255,.18); }
.navlink-btn.active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

/* --- Home summary stronger colors --- */
.entry-item{ color: rgba(255,255,255,.92) !important; }
.exit-item{ color: rgba(255,140,140,.92) !important; }



.badge-payall{ background: rgba(32,201,151,.18); color:#9fffe3; border:1px solid rgba(32,201,151,.40); }
.badge-due{ background: rgba(255,193,7,.14); color:#ffd37a; border:1px solid rgba(255,193,7,.28); }
.badge-depok{ background: rgba(13,202,240,.12); color:#8be9ff; border:1px solid rgba(13,202,240,.28); }
.badge-nodep{ background: rgba(255,255,255,.08); color: rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.14); }



.fab-new{position:fixed;right:18px;bottom:18px;z-index:9999;background:#14b86e;color:#000;text-decoration:none;font-weight:800;padding:12px 14px;border-radius:999px;box-shadow:0 10px 25px rgba(0,0,0,.35);}
.fab-new:active{transform:scale(.98)}
@media (min-width: 992px){.fab-new{display:none;}}

.move-in{color:#ffffff;}
.move-out{color:#ffb3b3;}



/* ===== Visibility patch (global) ===== */
:root{
  --muted: rgba(231,237,246,.92);
}
.text-muted, .text-muted2, .small2, .muted, .helptext,
label, .form-label{
  color: rgba(231,237,246,.92) !important;
  opacity: 1 !important;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  color:#ffffff !important;
}
.form-control, .form-select, textarea{
  color:#ffffff !important;
}
.form-control::placeholder, textarea::placeholder{
  color: rgba(159,179,200,.95) !important;
  opacity: 1 !important;
}
/* Booking edit page specific labels (some are inside .field-label spans) */
.field-label, .input-label{
  color: rgba(231,237,246,.95) !important;
  opacity: 1 !important;
}