/* ── TOKENS ── */
:root{
  --teal:#0F6E56;--teal-m:#1D9E75;--teal-l:#E1F5EE;--teal-d:#0A4F3D;
  --amber:#BA7517;--amber-l:#FAEEDA;
  --coral:#993C1D;--coral-l:#FAECE7;
  --blue:#1a6fad;--blue-l:#deeef9;
  --bg:#F6F8F7;--surface:#ffffff;--surface2:#F0F4F2;
  --border:#DDE6E2;--border2:#C8D6D1;
  --txt:#1A2620;--txt2:#4A6558;--txt3:#8AA89D;
  --shadow:0 1px 3px rgba(15,110,86,.08),0 4px 12px rgba(15,110,86,.05);
  --shadow-lg:0 8px 32px rgba(15,110,86,.12);
  --r:10px;--r-sm:6px;--r-lg:14px;
  --font:'Inter',sans-serif;
  --sidebar:220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);background:var(--bg);color:var(--txt);font-size:14px}

/* ── LAYOUT ── */
.app{display:flex;height:100vh}
.sidebar{width:var(--sidebar);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.content{flex:1;overflow-y:auto;padding:20px;background:var(--bg)}

/* ── SIDEBAR ── */
.logo{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.logo-icon{font-size:26px;line-height:1}
.logo-text{min-width:0}
.logo-name{font-size:13px;font-weight:600;color:var(--teal);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-sub{font-size:10px;color:var(--txt3);margin-top:2px;letter-spacing:.04em;white-space:nowrap}
.nav{padding:10px 8px;flex:1;overflow-y:auto}
.nav-sec{font-size:10px;font-weight:600;color:var(--txt3);padding:10px 8px 4px;letter-spacing:.08em;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;font-size:13px;color:var(--txt2);transition:all .15s;white-space:nowrap;user-select:none;text-decoration:none}
.nav-item:hover{background:var(--surface2);color:var(--txt)}
.nav-item.active{background:var(--teal-l);color:var(--teal);font-weight:500}
.nav-item i{font-size:16px;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--coral);color:#fff;font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px}
.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--txt3)}
.pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;margin-right:5px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── TOPBAR ── */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.page-title{font-size:15px;font-weight:600;color:var(--txt)}
.topbar-right{display:flex;gap:8px;align-items:center}
.resort-tag{font-size:11px;padding:4px 10px;background:var(--teal-l);border-radius:20px;color:var(--teal);font-weight:500;display:flex;align-items:center;gap:4px}
.btn{padding:7px 14px;border-radius:var(--r-sm);font-size:12px;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--txt);transition:all .15s;display:inline-flex;align-items:center;gap:5px;font-family:var(--font);white-space:nowrap}
.btn:hover{background:var(--surface2);border-color:var(--border2)}
.btn-primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-primary:hover{background:var(--teal-d);border-color:var(--teal-d)}
.btn-sm{padding:5px 10px;font-size:11px}

/* ── PANELS ── */
.panel{display:none}
.panel.active{display:block}

/* ── METRICS ── */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.metric{background:var(--surface);border-radius:var(--r);padding:16px;border:1px solid var(--border);box-shadow:var(--shadow);position:relative;overflow:hidden}
.metric::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r) var(--r) 0 0}
.metric.green::before{background:var(--teal-m)}
.metric.amber::before{background:#f59e0b}
.metric.coral::before{background:var(--coral)}
.metric.blue::before{background:var(--blue)}
.metric-icon{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px}
.metric.green .metric-icon{background:var(--teal-l);color:var(--teal)}
.metric.amber .metric-icon{background:#fef3c7;color:#d97706}
.metric.coral .metric-icon{background:var(--coral-l);color:var(--coral)}
.metric.blue .metric-icon{background:var(--blue-l);color:var(--blue)}
.metric-label{font-size:11px;color:var(--txt2);font-weight:500;letter-spacing:.02em}
.metric-val{font-size:24px;font-weight:700;margin:4px 0;line-height:1}
.metric.green .metric-val{color:var(--teal)}
.metric.amber .metric-val{color:#d97706}
.metric.coral .metric-val{color:var(--coral)}
.metric.blue .metric-val{color:var(--blue)}
.metric-sub{font-size:11px;color:var(--txt3)}
.metric-trend{font-size:10px;font-weight:600;margin-top:4px}
.metric-trend.up{color:#059669}.metric-trend.down{color:var(--coral)}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow)}
.card-title{font-size:13px;font-weight:600;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;color:var(--txt)}
.card-title span{font-size:11px;font-weight:400;color:var(--txt3)}

/* ── ROOM GRID ── */
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.room-card{border:1px solid var(--border);border-radius:var(--r);padding:12px;cursor:pointer;transition:all .15s;position:relative;overflow:hidden}
.room-card::after{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;border-radius:var(--r) 0 0 var(--r)}
.room-card.available::after{background:var(--teal-m)}
.room-card.occupied::after{background:#f59e0b}
.room-card.maintenance::after{background:var(--coral)}
.room-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.room-card-id{font-size:10px;font-weight:700;color:var(--txt3);letter-spacing:.06em;margin-bottom:4px}
.room-card-name{font-size:12px;font-weight:600;color:var(--txt);margin-bottom:2px}
.room-card-type{font-size:11px;color:var(--txt2)}
.room-card-rate{font-size:11px;font-weight:600;color:var(--teal);margin-top:4px}
.room-card-guest{font-size:10px;color:var(--txt2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── BOOKING ITEMS ── */
.booking-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.booking-item:last-child{border-bottom:none}
.guest-avatar{width:36px;height:36px;border-radius:50%;background:var(--teal-l);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.booking-info{flex:1;min-width:0}
.booking-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.booking-detail{font-size:11px;color:var(--txt2);margin-top:1px}
.booking-price{font-size:13px;font-weight:700;color:var(--teal)}
.chip{font-size:10px;padding:3px 9px;border-radius:20px;font-weight:600;white-space:nowrap}
.chip-confirmed{background:var(--teal-l);color:#085041}
.chip-checkin{background:#fef3c7;color:#92400e}
.chip-checkout{background:var(--coral-l);color:var(--coral)}
.chip-cancelled{background:#f1f5f9;color:#64748b}

/* ── CALENDAR ── */
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-nav{display:flex;gap:6px;align-items:center}
.cal-nav button{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt2);transition:all .15s}
.cal-nav button:hover{background:var(--surface2)}
.cal-month-label{font-size:15px;font-weight:600;min-width:140px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{font-size:10px;color:var(--txt3);text-align:center;padding:5px 0;font-weight:600;letter-spacing:.04em}
.cal-day{min-height:72px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);padding:5px;cursor:pointer;transition:all .12s}
.cal-day:hover{border-color:var(--teal-m);box-shadow:0 0 0 2px var(--teal-l)}
.cal-day.today{border-color:var(--teal-m);background:var(--teal-l)}
.cal-day.empty{background:transparent;border-color:transparent;cursor:default;pointer-events:none}
.day-num{font-size:11px;font-weight:600;margin-bottom:2px;color:var(--txt2)}
.day-num.today-num{color:var(--teal)}
.pill{font-size:9px;padding:2px 5px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px;display:block}
.pill-ci{background:#9FE1CB;color:#085041}
.pill-st{background:#B5D4F4;color:#0C447C}
.pill-co{background:#FAC775;color:#633806}

/* ── ACTIVITY ── */
.activity-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.activity-item:last-child{border-bottom:none}
.act-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.act-icon.green{background:var(--teal-l);color:var(--teal)}
.act-icon.amber{background:#fef3c7;color:#d97706}
.act-icon.coral{background:var(--coral-l);color:var(--coral)}
.act-icon.blue{background:var(--blue-l);color:var(--blue)}
.act-text{font-size:12px;line-height:1.5;color:var(--txt)}
.act-time{font-size:10px;color:var(--txt3);margin-top:2px}

/* ── OCCUPANCY TIMELINE ── */
.occ-timeline{overflow-x:auto;-webkit-overflow-scrolling:touch}
.occ-table{border-collapse:collapse;font-size:11px;width:100%;min-width:700px}
.occ-table th{padding:5px 8px;font-weight:600;color:var(--txt3);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;font-size:10px}
.occ-table td{padding:4px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
.occ-table td.room-label{font-weight:600;color:var(--txt);font-size:12px;min-width:140px;background:var(--surface);position:sticky;left:0;z-index:1}
.occ-cell{display:inline-block;padding:2px 5px;border-radius:3px;font-size:9px;font-weight:600}
.occ-ci{background:#9FE1CB;color:#085041}
.occ-st{background:#B5D4F4;color:#0C447C}
.occ-co{background:#FAC775;color:#633806}
.occ-av{color:var(--txt3);font-size:9px}

/* ── REPORTS ── */
.report-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
.report-row:last-child{border-bottom:none}
.report-label{color:var(--txt2);font-size:12px}
.report-val{font-weight:600;font-size:13px}
.progress-bar{height:5px;background:var(--surface2);border-radius:3px;margin-top:3px;overflow:hidden;width:100%}
.progress-fill{height:100%;border-radius:3px;background:var(--teal-m);transition:width .4s}

/* ── MODAL ── */
.overlay{position:fixed;inset:0;background:rgba(15,40,30,.45);display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(2px)}
.modal{background:var(--surface);border-radius:var(--r-lg);width:460px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-size:15px;font-weight:600}
.modal-body{padding:20px}
.modal-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:11px;font-weight:600;color:var(--txt2);margin-bottom:4px;letter-spacing:.03em}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--txt);font-size:13px;font-family:var(--font);transition:border .15s}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--teal-m);box-shadow:0 0 0 3px var(--teal-l)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.price-preview{background:var(--teal-l);padding:12px;border-radius:var(--r-sm);display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.price-preview-label{font-size:12px;color:var(--teal-d)}
.price-preview-val{font-size:15px;font-weight:700;color:var(--teal)}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--txt);color:#fff;padding:12px 16px;border-radius:var(--r);font-size:13px;box-shadow:var(--shadow-lg);z-index:999;display:flex;align-items:center;gap:8px;transform:translateY(80px);transition:transform .3s;max-width:320px}
.toast.show{transform:translateY(0)}
.toast.success{background:var(--teal-d)}
.toast.error{background:var(--coral)}

/* ── SEARCH ── */
.search-box{padding:7px 10px 7px 32px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--txt);font-size:12px;font-family:var(--font);width:200px;transition:border .15s}
.search-box:focus{outline:none;border-color:var(--teal-m);box-shadow:0 0 0 3px var(--teal-l)}
.search-wrap{position:relative}
.search-wrap i{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--txt3);font-size:14px}

/* ── LIVE TICKER ── */
.live-bar{background:var(--teal-d);color:#fff;padding:6px 20px;font-size:11px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.live-bar i{color:#9FE1CB}

/* ── TABLE ── */
.data-table{width:100%;border-collapse:collapse;font-size:12px}
.data-table th{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);font-size:11px;color:var(--txt2);font-weight:600;background:var(--bg)}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--border)}
.data-table tr:hover td{background:var(--surface2)}

/* ── DAY DETAIL ── */
.day-pill{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.day-pill:last-child{border-bottom:none}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-ci{background:var(--teal-m)}.dot-st{background:var(--blue)}.dot-co{background:#f59e0b}

/* ── DELETE BUTTON ── */
.btn-delete{width:28px;height:28px;border-radius:50%;border:1px solid var(--coral-l);background:var(--coral-l);color:var(--coral);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;transition:all .15s;flex-shrink:0;opacity:0.7}
.booking-item:hover .btn-delete{opacity:1}
.btn-delete:hover{background:var(--coral);color:#fff;border-color:var(--coral)}
@media(hover:none){.btn-delete{opacity:1}}

/* ── CONFIRM DIALOG ── */
.confirm-overlay{position:fixed;inset:0;background:rgba(15,40,30,.5);display:flex;align-items:center;justify-content:center;z-index:300;backdrop-filter:blur(2px)}
.confirm-box{background:var(--surface);border-radius:var(--r-lg);padding:24px;width:340px;box-shadow:var(--shadow-lg);text-align:center}
.confirm-box h4{font-size:15px;font-weight:600;margin-bottom:8px}
.confirm-box p{font-size:13px;color:var(--txt2);margin-bottom:20px;line-height:1.5}
.confirm-actions{display:flex;gap:10px;justify-content:center}

/* ── STORAGE BANNER ── */
.storage-badge{background:var(--teal-l);color:var(--teal);font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;display:inline-flex;align-items:center;gap:3px}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}::-webkit-scrollbar-track{background:transparent}

/* ── ONLINE BOOKING FORM ── */
.online-booking-form{background:linear-gradient(135deg,var(--teal-d) 0%,var(--teal) 100%);border-radius:var(--r-lg);padding:24px;color:#fff;margin-bottom:18px}
.ob-title{font-family:'DM Serif Display',serif;font-size:22px;margin-bottom:4px}
.ob-sub{font-size:12px;opacity:.8;margin-bottom:16px}
.ob-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.ob-field{display:flex;flex-direction:column;gap:4px}
.ob-field label{font-size:10px;font-weight:600;letter-spacing:.06em;opacity:.8}
.ob-field input,.ob-field select{padding:8px 10px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-sm);background:rgba(255,255,255,.12);color:#fff;font-size:12px;font-family:var(--font)}
.ob-field input::placeholder{color:rgba(255,255,255,.6)}
.ob-field select option{background:var(--teal-d);color:#fff}
.ob-field input:focus,.ob-field select:focus{outline:none;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.2)}
.btn-white{background:#fff;color:var(--teal);border:none;font-weight:700;padding:9px 20px;border-radius:var(--r-sm);cursor:pointer;font-family:var(--font);font-size:13px;transition:all .15s}
.btn-white:hover{background:var(--teal-l)}

/* ── SYNC INDICATOR ── */
.sync-dot{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--txt3)}
.sync-dot.syncing .dot-anim{animation:spin .7s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── LOGIN PAGE ── */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0A4F3D 0%,#0F6E56 30%,#1D9E75 70%,#0F6E56 100%);overflow:auto;padding:20px}
.login-card{background:var(--surface);border-radius:var(--r-lg);padding:40px;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}
.login-logo{text-align:center;margin-bottom:24px}
.login-logo .logo-emoji{font-size:48px;display:block;margin-bottom:8px}
.login-logo h1{font-family:'DM Serif Display',serif;font-size:22px;color:var(--teal);margin-bottom:2px}
.login-logo p{font-size:12px;color:var(--txt3);letter-spacing:.04em}
.login-form .form-group{margin-bottom:16px}
.login-form .form-group label{display:block;font-size:11px;font-weight:600;color:var(--txt2);margin-bottom:5px;letter-spacing:.03em}
.login-form .form-group input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--txt);font-size:13px;font-family:var(--font);transition:border .15s}
.login-form .form-group input:focus{outline:none;border-color:var(--teal-m);box-shadow:0 0 0 3px var(--teal-l)}
.login-btn{width:100%;padding:11px;background:var(--teal);color:#fff;border:none;border-radius:var(--r-sm);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);transition:background .15s}
.login-btn:hover{background:var(--teal-d)}
.login-error{background:var(--coral-l);color:var(--coral);padding:10px 14px;border-radius:var(--r-sm);font-size:12px;margin-bottom:16px;display:flex;align-items:center;gap:6px}
.remember-row{display:flex;align-items:center;gap:6px;margin-bottom:20px;font-size:12px;color:var(--txt2)}
.remember-row input[type="checkbox"]{accent-color:var(--teal)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .sidebar{width:60px}
  .nav-item span,.logo-text,.nav-sec,.sidebar-footer{display:none}
  .logo-icon{font-size:22px}
}
@media(max-width:600px){
  .grid-4{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .modal{width:95vw}
  .topbar{padding:8px 12px}
  .content{padding:12px}
  .live-bar{display:none}

}

/* ── PERMISSIONS & STAFF STYLES ── */
.permissions-matrix-container th {
  font-weight: 600;
  letter-spacing: .03em;
}
.perm-cb {
  width: 15px;
  height: 15px;
  accent-color: var(--teal);
  cursor: pointer;
}
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 15px;
  color: var(--txt3);
  transition: color 0.1s, transform 0.1s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.btn-icon:hover {
  color: var(--teal);
  background: var(--bg);
}
.btn-icon.text-coral:hover {
  color: var(--coral);
  background: var(--coral-l);
}

/* ── OCCUPANCY GRID TIMELINE STYLES ── */
.timeline-container-scroll {
  background: var(--surface);
}
.timeline-row {
  min-height: 48px;
  align-items: center;
}
.timeline-row.header {
  min-height: 38px;
  background: var(--bg);
}
.timeline-cell {
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border);
  height: 100%;
}
.timeline-cell.header-cell {
  justify-content: center;
  border-right: 1px solid var(--border);
  color: var(--txt2);
}
.timeline-cell.room-label {
  padding: 8px 10px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.03);
  border-right: 1px solid var(--border);
}
.timeline-cell.bg-cell {
  border-right: 1px dashed var(--border2);
  pointer-events: auto;
}
.timeline-booking-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin: 10px 0;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  font-size: 11px;
  font-weight: 600;
  padding: 0 12px;
  transition: transform 0.1s, filter 0.1s;
}
.timeline-booking-bar:hover {
  transform: scaleY(1.06);
  filter: brightness(0.97);
}
.timeline-bar-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Status colors */
.timeline-bar-confirmed {
  background: #deeef9;
  border: 1px solid #1a6fad;
  color: #1a6fad;
}
.timeline-bar-checkin {
  background: #D1FAE5;
  border: 1px solid #10B981;
  color: #065F46;
}
.timeline-bar-checkout {
  background: #F3F4F6;
  border: 1px solid #9CA3AF;
  color: #374151;
}

/* Modal updates */
.tb-select {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  outline: none;
  font-family: inherit;
  cursor: pointer;
}