/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:#0f172a; color:#1f2933; }
a { color: inherit; text-decoration: none; }

:root {
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-accent: #f97316;
  --color-bg-soft: #0b1220;
  --color-surface: #0b1220;
  --color-surface-alt: #020617;
  --color-border-subtle: #1e293b;
  --color-text-main: #e5e7eb;
  --color-text-muted: #9ca3af;
}

/* Login */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#2563eb,#1d4ed8); }
.login-wrapper { width:100%; max-width:420px; padding:16px; }
.login-card { background:#fff; border-radius:12px; padding:32px 28px; box-shadow:0 10px 30px rgba(15,23,42,0.25); }
.login-title { font-size:24px; font-weight:700; margin-bottom:8px; }
.login-subtitle { font-size:14px; color:#6b7280; margin-bottom:24px; }
.login-form label { display:block; font-size:13px; margin-bottom:4px; margin-top:12px; }
.login-form input { width:100%; padding:10px 12px; border-radius:8px; border:1px solid #d1d5db; font-size:14px; }
.login-form input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 1px #2563eb33; }
.btn { display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:8px; padding:10px 16px; font-size:14px; cursor:pointer; transition:background .15s, box-shadow .15s; }
.btn-primary { background:#2563eb; color:#fff; }
.btn-primary:hover { background:#1d4ed8; }
.btn-ghost { background:transparent; color:#111827; padding:6px 10px; }
.btn-block { width:100%; margin-top:20px; }
.alert { padding:10px 12px; border-radius:8px; font-size:13px; margin-bottom:8px; }
.alert-error { background:#fee2e2; color:#b91c1c; }
.alert-success { background:#dcfce7; color:#166534; }
.login-hint { margin-top:12px; font-size:12px; color:#6b7280; text-align:center; }

/* App shell */
.app-shell { min-height:100vh; display:flex; flex-direction:column; color:var(--color-text-main); background:radial-gradient(circle at top left,#1e293b 0,#020617 55%,#000 100%); }
.topbar { height:60px; background:rgba(15,23,42,0.96); color:#f9fafb; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--color-border-subtle); backdrop-filter:blur(14px); position:sticky; top:0; z-index:20; }
.brand { font-weight:700; letter-spacing:0.08em; font-size:15px; text-transform:uppercase; color:#e5e7eb; }
.topbar-right { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--color-text-muted); }
.layout { display:flex; min-height:calc(100vh - 60px); }

.sidebar { width:240px; background:linear-gradient(to bottom,#020617,#020617 40%,#020617); color:#e5e7eb; padding:18px 14px; border-right:1px solid var(--color-border-subtle); }
.nav { display:flex; flex-direction:column; gap:4px; font-size:14px; }
.nav-item { padding:8px 11px; border-radius:8px; color:#d1d5db; display:flex; align-items:center; gap:8px; transition:background .15s, color .15s, transform .08s; }
.nav-item:hover, .nav-item.active { background:rgba(37,99,235,0.12); color:#ffffff; transform:translateX(1px); }
.nav-section-title { margin-top:18px; margin-bottom:4px; font-size:10px; text-transform:uppercase; letter-spacing:0.16em; color:#6b7280; }

.main-content { flex:1; padding:24px 32px; overflow-x:auto; background:radial-gradient(circle at top,#020617 0,#020617 60%,#020617 100%); }
.page-title { font-size:32px; font-weight:800; margin-bottom:32px; color:#f9fafb; letter-spacing:-0.03em; background:linear-gradient(135deg,#f9fafb 0%,#cbd5e1 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Reservation stepper */
.reservation-steps { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.reservation-step { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:13px; background:#e5e7eb; color:#374151; }
.reservation-step.active { background:#2563eb; color:#fff; }
.reservation-step-index { font-weight:600; }

/* Cards Grid */
.cards-grid { 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); 
  gap:24px; 
  margin-bottom:32px; 
}

.analysis-grid {
  grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
}

/* Base Card Styles */
.card { 
  position:relative;
  background:linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%);
  border-radius:16px; 
  padding:24px; 
  box-shadow:0 4px 6px rgba(0,0,0,0.1), 0 20px 40px rgba(15,23,42,0.4);
  border:1px solid rgba(148,163,184,0.12);
  color:var(--color-text-main);
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow:hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 12px rgba(0,0,0,0.15), 0 30px 60px rgba(37,99,235,0.25);
  border-color:rgba(59,130,246,0.3);
}

.card:hover::before {
  opacity: 1;
}

/* Stat Cards with Icons */
.stat-card {
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.card-icon {
  font-size:36px;
  line-height:1;
  opacity:0.9;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.card-content {
  flex:1;
}

.card-title { 
  font-size:11px; 
  text-transform:uppercase; 
  letter-spacing:0.1em; 
  color:#94a3b8; 
  margin-bottom:8px; 
  font-weight:600;
}

.card-value { 
  font-size:36px; 
  font-weight:800; 
  background:linear-gradient(135deg,#f9fafb 0%,#e2e8f0 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.03em;
  line-height:1.1;
  margin-bottom:8px;
}

/* Trend Indicators */
.card-trend {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  margin-top:8px;
}

.card-trend.positive {
  color:#4ade80;
}

.card-trend.negative {
  color:#f87171;
}

.trend-arrow {
  font-size:16px;
  font-weight:bold;
}

.trend-value {
  font-weight:700;
}

.trend-label {
  color:#9ca3af;
  font-size:11px;
}

/* Quick Stats */
.quick-stats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:24px;
  margin-bottom:32px;
  padding:24px;
  background:linear-gradient(135deg, rgba(30,41,59,0.6) 0%, rgba(15,23,42,0.9) 100%);
  border-radius:16px;
  border:1px solid rgba(148,163,184,0.12);
}

.quick-stat-item {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.quick-stat-label {
  font-size:12px;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:600;
}

.quick-stat-value {
  font-size:24px;
  font-weight:700;
  color:#f9fafb;
}

.progress-bar {
  height:8px;
  background:rgba(15,23,42,0.8);
  border-radius:999px;
  overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);
}

.progress-fill {
  height:100%;
  background:linear-gradient(90deg,#2563eb,#3b82f6);
  border-radius:999px;
  transition:width 1s cubic-bezier(0.4, 0, 0.2, 1);
  animation:progressLoad 1.5s ease-out;
}

.progress-fill.success {
  background:linear-gradient(90deg,#16a34a,#22c55e);
}

@keyframes progressLoad {
  from { width:0; }
}

/* Analysis Cards */
.analysis-card .card-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(148,163,184,0.12);
}

.card-header-title {
  font-size:16px;
  font-weight:700;
  color:#f9fafb;
  display:flex;
  align-items:center;
  gap:8px;
}

/* Table wrapper */
.table-wrapper { 
  background:transparent;
  border-radius:12px; 
  padding:0;
  box-shadow:none;
  border:none;
  overflow:hidden;
}

table { 
  width:100%; 
  border-collapse:collapse; 
  font-size:14px; 
  color:var(--color-text-main); 
}

th, td { 
  padding:14px 16px; 
  border-bottom:1px solid rgba(51,65,85,0.4); 
  text-align:left; 
  transition:background-color 0.2s ease;
}

th { 
  background:rgba(15,23,42,0.6); 
  font-weight:700; 
  text-transform:uppercase; 
  font-size:10px; 
  letter-spacing:0.1em; 
  color:#94a3b8; 
  border-bottom:2px solid rgba(37,99,235,0.3);
}

tr:nth-child(even) td { 
  background:rgba(15,23,42,0.25); 
}

tr:hover td { 
  background:rgba(37,99,235,0.15); 
  color:#f9fafb;
}

tr:last-child td {
  border-bottom:none;
}

/* Recent Activity */
.recent-activity {
  animation-delay:0.3s;
}

.recent-activity .card-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(148,163,184,0.12);
}

.view-all-link {
  font-size:13px;
  color:#3b82f6;
  font-weight:600;
  transition:color 0.2s;
}

.view-all-link:hover {
  color:#60a5fa;
}

.activity-list {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.activity-item {
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:12px;
  border-radius:10px;
  transition:background 0.2s;
}

.activity-item:hover {
  background:rgba(37,99,235,0.08);
}

.activity-icon {
  font-size:24px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(37,99,235,0.12);
  flex-shrink:0;
}

.activity-content {
  flex:1;
}

.activity-title {
  font-size:14px;
  font-weight:600;
  color:#f9fafb;
  margin-bottom:4px;
}

.activity-time {
  font-size:12px;
  color:#94a3b8;
}

/* Housekeeping room chips */
.room-chip { border:none; border-radius:999px; padding:8px 14px; font-size:13px; cursor:pointer; background:#1e293b; color:#e5e7eb; box-shadow:0 8px 20px rgba(15,23,42,0.6); }
.room-chip.room-clean { background:#16a34a; color:#ecfdf3; }
.room-chip.room-dirty { background:#b91c1c; color:#fee2e2; }
.room-chip.room-maint { background:#0ea5e9; color:#e0f2fe; }

/* Badges */
.badge { 
  display:inline-flex; 
  align-items:center; 
  padding:4px 12px; 
  border-radius:999px; 
  font-size:11px; 
  font-weight:600; 
  border:1px solid transparent; 
  transition:all 0.2s ease;
}
.badge-success { background:rgba(22,163,74,0.15); color:#4ade80; border-color:rgba(34,197,94,0.4); }
.badge-success:hover { background:rgba(22,163,74,0.25); }
.badge-danger { background:rgba(239,68,68,0.15); color:#fca5a5; border-color:rgba(248,113,113,0.4); }
.badge-danger:hover { background:rgba(239,68,68,0.25); }
.badge-warning { background:rgba(245,158,11,0.15); color:#fbbf24; border-color:rgba(251,191,36,0.4); }
.badge-warning:hover { background:rgba(245,158,11,0.25); }
.badge-info { background:rgba(59,130,246,0.15); color:#93c5fd; border-color:rgba(96,165,250,0.45); }
.badge-info:hover { background:rgba(59,130,246,0.25); }

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeInUp 0.6s ease-out;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }

.quick-stats {
  animation: fadeInUp 0.6s ease-out 0.25s backwards;
}

.analysis-card:nth-child(1) { animation-delay: 0.3s; }
.analysis-card:nth-child(2) { animation-delay: 0.35s; }

/* Responsive */
@media (max-width: 768px) {
  .layout { flex-direction:column; }
  .sidebar { width:100%; display:flex; overflow-x:auto; }
  .nav { flex-direction:row; flex-wrap:wrap; }
  .nav-section-title { flex-basis:100%; }
  .main-content { padding:16px 20px; }
  .cards-grid { grid-template-columns:1fr; gap:16px; }
  .analysis-grid { grid-template-columns:1fr; }
  .stat-card { flex-direction:row; }
  .card { padding:20px; }
  .card-value { font-size:28px; }
  .page-title { font-size:24px; }
  .quick-stats { grid-template-columns:1fr; padding:20px; }
  .activity-icon { width:36px; height:36px; font-size:20px; }
}

/* ========================= */
/* Global UI components      */
/* ========================= */

/* Form controls */
label { display:block; font-size:12px; color:#94a3b8; margin-bottom:6px; font-weight:600; letter-spacing:0.02em; }
input[type="text"], input[type="email"], input[type="number"], input[type="date"],
input[type="password"], select, textarea {
  width:100%;
  appearance:none;
  background:rgba(2,6,23,0.7);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,0.18);
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  transition:border .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color:#6b7280; }
select { background-image:linear-gradient(45deg, transparent 50%, #94a3b8 50%), linear-gradient(135deg, #94a3b8 50%, transparent 50%); background-position:right 12px top 50%, right 7px top 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:28px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:rgba(59,130,246,0.6); box-shadow:0 0 0 3px rgba(59,130,246,0.2); background:rgba(2,6,23,0.85); }
input.is-error, select.is-error, textarea.is-error { border-color:rgba(239,68,68,0.6); box-shadow:0 0 0 3px rgba(239,68,68,0.15); }
input.is-success, select.is-success, textarea.is-success { border-color:rgba(34,197,94,0.6); box-shadow:0 0 0 3px rgba(34,197,94,0.15); }

/* Form layouts */
.form-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.col-12 { grid-column:span 12; }
.col-6 { grid-column:span 6; }
.col-4 { grid-column:span 4; }
.col-3 { grid-column:span 3; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; }
@media (max-width: 768px) {
  .form-grid { grid-template-columns:repeat(6,1fr); }
  .col-6 { grid-column:span 6; }
  .col-4 { grid-column:span 6; }
  .col-3 { grid-column:span 6; }
}

/* Button variants */
.btn-secondary { background:#1f2937; color:#e5e7eb; }
.btn-secondary:hover { background:#374151; }
.btn-outline { background:transparent; color:#93c5fd; border:1px solid rgba(59,130,246,0.45); }
.btn-outline:hover { background:rgba(59,130,246,0.12); }
.btn-danger { background:#ef4444; color:#fff; }
.btn-danger:hover { background:#dc2626; }
.btn-sm { padding:6px 10px; font-size:12px; border-radius:7px; }
.btn-lg { padding:12px 18px; font-size:15px; border-radius:10px; }

/* Tabs */
.tabs { display:flex; gap:6px; border-bottom:1px solid rgba(148,163,184,0.18); margin-bottom:16px; }
.tab { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px 10px 0 0; color:#94a3b8; position:relative; cursor:pointer; }
.tab:hover { color:#e5e7eb; }
.tab.active { color:#e5e7eb; }
.tab.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:linear-gradient(90deg,#2563eb,#60a5fa); border-radius:2px; }

/* Toolbar / Filter bar */
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.toolbar-group { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.input-search { min-width:220px; }

/* Breadcrumbs */
.breadcrumbs { display:flex; align-items:center; gap:8px; color:#94a3b8; font-size:12px; margin-bottom:8px; }
.breadcrumbs a { color:#cbd5e1; }
.breadcrumbs .sep { opacity:0.5; }

/* Pagination */
.pagination { display:flex; gap:6px; align-items:center; justify-content:flex-end; margin-top:12px; }
.page-link { padding:6px 10px; border-radius:8px; background:rgba(2,6,23,0.6); color:#cbd5e1; border:1px solid rgba(148,163,184,0.18); font-size:12px; }
.page-link.active { background:#2563eb; color:#fff; border-color:#2563eb; }
.page-link:hover { background:rgba(37,99,235,0.15); }

/* Modals */
.modal-backdrop { position:fixed; inset:0; background:rgba(2,6,23,0.7); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:60; }
.modal { background:linear-gradient(135deg, rgba(30,41,59,0.95), rgba(15,23,42,0.98)); border:1px solid rgba(148,163,184,0.18); border-radius:16px; width:min(560px,92vw); box-shadow:0 30px 80px rgba(0,0,0,0.5); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(148,163,184,0.15); }
.modal-body { padding:18px; }
.modal-footer { padding:14px 18px; border-top:1px solid rgba(148,163,184,0.15); display:flex; justify-content:flex-end; gap:8px; }
.modal-backdrop.show { display:flex; }

/* Tooltips (data-tooltip attr) */
[data-tooltip] { position:relative; }
[data-tooltip]:hover::after { content:attr(data-tooltip); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); white-space:nowrap; background:#111827; color:#e5e7eb; font-size:11px; padding:6px 8px; border-radius:6px; border:1px solid rgba(148,163,184,0.2); box-shadow:0 10px 30px rgba(0,0,0,0.3); margin-bottom:8px; z-index:50; }

/* Toasts */
.toast-container { position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:10px; z-index:70; }
.toast { background:linear-gradient(135deg, rgba(30,41,59,0.95), rgba(15,23,42,0.98)); border:1px solid rgba(148,163,184,0.18); color:#e5e7eb; padding:12px 14px; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,0.45); display:flex; align-items:center; gap:10px; min-width:220px; animation:fadeInUp .4s ease-out; }
.toast.success { border-color:rgba(34,197,94,0.4); }
.toast.error { border-color:rgba(239,68,68,0.4); }

/* Tables: sticky header + responsive */
.table-responsive { overflow:auto; border-radius:12px; border:1px solid rgba(148,163,184,0.12); }
table.sticky thead th { position:sticky; top:0; z-index:1; }

/* Skeletons */
.skeleton { position:relative; overflow:hidden; background:rgba(148,163,184,0.12); border-radius:8px; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); animation:skeleton 1.2s infinite; }
@keyframes skeleton { 100% { transform:translateX(100%); } }