/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  --primary: #0d6e6e;
  --primary-dark: #0a5656;
  --primary-light: #e0f5f5;
  --accent: #d4a84b;
  --accent-light: #f5ecd7;
  --navy: #1a2332;
  --navy-light: #243044;
  --bg-body: #f4f6f9;
  --card-shadow: 0 2px 12px rgba(0,0,0,.08);
  --card-shadow-hover: 0 8px 30px rgba(0,0,0,.12);
  --radius: 12px;
  --radius-sm: 8px;
  --transition: all .25s ease;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
}

/* ===== BASE ===== */
html {
  font-size: 14px;
  min-height: 100%;
}
@media (min-width: 768px) {
  html { font-size: 15px; }
}

body {
  font-family: var(--font-body);
  background: var(--bg-body);
  color: #2d3748;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > .container.mt-4 {
  flex: 1;
}

h1, h2, h3 {
  font-family: var(--font-display);
}

/* ===== FOCUS RING ===== */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(13,110,110,.25);
  border-color: var(--primary);
}

/* ===== NAVBAR ===== */
.navbar-portal {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: .75rem 0;
  box-shadow: 0 2px 15px rgba(0,0,0,.15);
}
.navbar-portal .navbar-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.02em;
}
.navbar-portal .navbar-brand .brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 8px;
  margin-right: 10px;
  font-size: 1rem;
}
.navbar-portal .nav-link {
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem .85rem !important;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  margin: 0 2px;
}
.navbar-portal .nav-link:hover {
  background: rgba(255,255,255,.1);
}
.navbar-portal .dropdown-menu {
  border: none;
  box-shadow: var(--card-shadow-hover);
  border-radius: var(--radius-sm);
  padding: .5rem;
}
.navbar-portal .dropdown-item {
  border-radius: 6px;
  padding: .45rem .75rem;
  font-size: .9rem;
  transition: var(--transition);
}
.navbar-portal .dropdown-item:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* ===== LOGIN PAGE ===== */
.login-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--navy) 0%, #1e3a5f 50%, var(--primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.login-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(13,110,110,.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(212,168,75,.2) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 0%, transparent 70%);
  animation: loginAmbient 12s ease-in-out infinite alternate;
}
@keyframes loginAmbient {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 1;  transform: scale(1.1); }
}
.login-wrapper .login-shape {
  position: absolute;
  border-radius: 50%;
  opacity: .06;
  border: 2px solid #fff;
}
.login-shape-1 {
  width: 400px; height: 400px;
  top: -100px; right: -100px;
  animation: floatShape 20s ease-in-out infinite;
}
.login-shape-2 {
  width: 300px; height: 300px;
  bottom: -80px; left: -80px;
  animation: floatShape 16s ease-in-out infinite reverse;
}
.login-shape-3 {
  width: 150px; height: 150px;
  top: 40%; left: 10%;
  animation: floatShape 14s ease-in-out infinite 2s;
}
@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(20px, -30px) rotate(5deg); }
  66%      { transform: translate(-15px, 15px) rotate(-3deg); }
}
.login-card {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,.3);
  padding: 3rem;
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.2);
}
.login-card .brand-logo {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.75rem;
  color: #fff;
  box-shadow: 0 8px 24px rgba(13,110,110,.3);
}
.login-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
}
.login-card .form-control {
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  border: 2px solid #e2e8f0;
  transition: var(--transition);
}
.login-card .form-control:focus {
  border-color: var(--primary);
}
.login-card .btn-login {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none;
  border-radius: var(--radius-sm);
  padding: .75rem;
  font-weight: 600;
  font-size: 1rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.login-card .btn-login::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.login-card .btn-login:hover::after {
  transform: translateX(100%);
}
.login-card .btn-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13,110,110,.35);
}

/* ===== CARDS (GLOBAL) ===== */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}
.card:hover {
  box-shadow: var(--card-shadow-hover);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
}

/* ===== STAT CARDS (DASHBOARD) ===== */
.stat-card {
  border: none;
  border-radius: var(--radius);
  color: #fff;
  overflow: hidden;
  position: relative;
  transition: var(--transition);
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}
.stat-card .stat-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3.5rem;
  opacity: .15;
}
.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
}
.stat-card .stat-label {
  font-size: .85rem;
  font-weight: 500;
  opacity: .9;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.stat-card.stat-primary { background: linear-gradient(135deg, var(--primary), #0f8585); }
.stat-card.stat-success { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.stat-card.stat-info    { background: linear-gradient(135deg, #2980b9, #3498db); }
.stat-card.stat-accent  { background: linear-gradient(135deg, var(--accent), #e0b85c); }

.stat-card .card-footer {
  background: rgba(0,0,0,.1);
  border: none;
  padding: .5rem 1.25rem;
}
.stat-card .card-footer a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  transition: var(--transition);
}
.stat-card .card-footer a:hover {
  color: #fff;
}

/* ===== HERO / SEARCH BANNER ===== */
.search-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius);
  padding: 2.5rem 2.5rem 2rem;
  color: #fff;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.search-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 10%, rgba(212,168,75,.15) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.search-hero > * {
  position: relative;
  z-index: 1;
}
.search-hero h2 {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: .25rem;
  font-size: 1.65rem;
}
.search-hero p {
  opacity: .8;
  margin-bottom: 1.5rem;
}
.search-hero .form-control,
.search-hero .form-select {
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: .65rem 1rem;
  backdrop-filter: blur(5px);
}
.search-hero .form-control::placeholder { color: rgba(255,255,255,.6); }
.search-hero .form-control:focus,
.search-hero .form-select:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,.15);
  box-shadow: 0 0 0 .2rem rgba(212,168,75,.25);
  color: #fff;
}
.search-hero .form-select option { color: #333; background: #fff; }
.search-hero .form-label { font-weight: 500; font-size: .85rem; opacity: .9; }
.search-hero .btn-search {
  background: linear-gradient(135deg, var(--accent), #c09a3e);
  border: none;
  color: var(--navy);
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: .65rem 1.5rem;
  transition: var(--transition);
}
.search-hero .btn-search:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212,168,75,.4);
}
.search-hero .input-group-text {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.search-hero #dateRangePicker {
  cursor: pointer;
}

/* Flatpickr overrides */
.flatpickr-calendar {
  border-radius: var(--radius) !important;
  box-shadow: var(--card-shadow-hover) !important;
  border: none !important;
  font-family: var(--font-body) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.flatpickr-day.inRange {
  background: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
  box-shadow: -5px 0 0 var(--primary-light), 5px 0 0 var(--primary-light) !important;
}
.flatpickr-day:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
}

/* ===== HOTEL CARDS (SEARCH RESULTS) ===== */
.hotel-card {
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
  border-left: 4px solid var(--primary);
}
.hotel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}
.hotel-card.stars-5 { border-left-color: var(--accent); }
.hotel-card.stars-4 { border-left-color: var(--primary); }
.hotel-card.stars-3 { border-left-color: #6c757d; }
.hotel-card .card-body { padding: 1.25rem; }
.hotel-card .hotel-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: .25rem;
}
.hotel-card .hotel-meta {
  font-size: .85rem;
  color: #718096;
  margin-bottom: .5rem;
}
.hotel-card .availability-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: #e6f7ee;
  color: #1a7a42;
  padding: .35rem .75rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
}
.hotel-card .card-footer {
  background: #fafbfc;
  border-top: 1px solid #edf2f7;
  padding: .75rem 1.25rem;
}
.hotel-card .btn-detail {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.hotel-card .btn-detail:hover {
  background: var(--primary);
  color: #fff;
}

/* ===== TABLES ===== */
.table-portal {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border-collapse: separate;
  border-spacing: 0;
}
.table.table-portal thead,
.table-portal thead {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, #2c3e5a 100%) !important;
}
.table.table-portal thead th,
.table-portal thead th {
  color: #ffffff !important;
  background: transparent !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .9rem 1rem;
  border: none !important;
  position: relative;
}
.table-portal thead th:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: rgba(255,255,255,.15);
}
.table-portal tbody tr {
  transition: var(--transition);
  background: #fff;
}
.table-portal tbody tr:nth-child(even) {
  background: #f8fafb;
}
.table-portal tbody tr:hover {
  background: var(--primary-light);
  box-shadow: inset 3px 0 0 var(--primary);
}
.table-portal tbody td {
  padding: .75rem 1rem;
  vertical-align: middle;
  border-color: #edf2f7;
  font-size: .92rem;
}

/* Sortable header links */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  padding: .2rem .3rem;
  border-radius: 4px;
  transition: background .2s ease;
}
.th-sort:hover {
  color: var(--accent) !important;
  background: rgba(255,255,255,.1);
}
.th-sort:active {
  background: rgba(255,255,255,.18);
}
.th-sort i {
  font-size: .6rem;
  color: var(--accent);
  flex-shrink: 0;
}

/* ===== BADGES ===== */
.badge-status {
  padding: .35rem .75rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .02em;
}
.badge-active { background: #e6f7ee; color: #1a7a42; }
.badge-inactive { background: #f0f0f0; color: #6c757d; }
.badge-role { background: var(--primary-light); color: var(--primary-dark); }

/* ===== BUTTONS ===== */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark), #084a4a);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(13,110,110,.3);
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: var(--transition);
}
.btn-outline-primary:hover {
  background: var(--primary);
  border-color: var(--primary);
}
.btn-secondary {
  border-radius: var(--radius-sm);
}

/* Action buttons in tables */
.btn-action {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0;
  border: 1.5px solid #cbd5e0;
  background: #fff;
  color: #4a5568;
  cursor: pointer;
  transition: var(--transition);
}
.btn-action:hover {
  transform: scale(1.1);
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 2px 8px rgba(13,110,110,.15);
}

/* ===== FORM CONTROLS ===== */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 2px solid #e2e8f0;
  padding: .55rem .85rem;
  transition: var(--transition);
}
.form-label {
  font-weight: 600;
  font-size: .85rem;
  color: #4a5568;
  margin-bottom: .3rem;
}

/* ===== AVAILABILITY CALENDAR ===== */
.calendar-grid {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.calendar-grid thead {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: #fff;
}
.calendar-grid thead th {
  padding: .6rem .25rem;
  font-size: .75rem;
  font-weight: 600;
  text-align: center;
  border: none;
  min-width: 58px;
}
.calendar-grid tbody td {
  padding: 4px;
  text-align: center;
  border-color: #edf2f7;
}
.calendar-grid .day-input {
  width: 50px;
  text-align: center;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: .35rem .2rem;
  font-weight: 600;
  font-size: .9rem;
  transition: var(--transition);
  background: transparent;
}
.calendar-grid .day-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .15rem rgba(13,110,110,.2);
  background: #fff;
}
.calendar-grid .day-input:disabled {
  opacity: .5;
}
.day-full   { background: #e6f7ee; }
.day-partial { background: #fff8e6; }
.day-empty  { background: #fde8e8; }
.day-past   { background: #f0f0f0; }

.calendar-legend {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.calendar-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 500;
  color: #718096;
}
.calendar-legend .legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.legend-dot.full    { background: #c6f0d5; }
.legend-dot.partial { background: #ffeeba; }
.legend-dot.empty   { background: #f5c6cb; }
.legend-dot.past    { background: #d6d6d6; }

/* ===== DETAIL PAGE ===== */
.detail-header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
  color: #fff;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.detail-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 100% 0%, rgba(212,168,75,.15) 0%, transparent 60%);
  pointer-events: none;
}
.detail-header > * { position: relative; z-index: 1; }
.detail-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: .25rem;
  font-size: 1.75rem;
}
.detail-header .detail-meta { opacity: .85; font-size: .95rem; }

.contact-card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.contact-card .card-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-weight: 600;
  border: none;
}
.contact-card .contact-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
}
.contact-card .contact-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  border-radius: 8px;
  color: var(--primary);
}

/* Availability table on detail page */
.avail-table {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.avail-table thead {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: #fff;
}
.avail-table thead th {
  font-weight: 600;
  font-size: .75rem;
  padding: .7rem .5rem;
  text-align: center;
  border: none;
}
.avail-table tbody td {
  padding: .6rem .5rem;
  text-align: center;
  vertical-align: middle;
  border-color: #edf2f7;
  font-weight: 600;
  font-size: .85rem;
}
.avail-cell-good    { background: #e6f7ee; color: #1a7a42; }
.avail-cell-low     { background: #fff8e6; color: #92600a; }
.avail-cell-none    { background: #fde8e8; color: #9b2c2c; }

/* ===== PAGE HEADERS ===== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.page-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

/* ===== ROOM TYPE CARDS ===== */
.room-card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transition: var(--transition);
  overflow: hidden;
}
.room-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}
.room-card .room-header {
  background: linear-gradient(135deg, var(--primary-light), #f0fafa);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}
.room-card .room-header h5 {
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.room-card .room-body {
  padding: 1.25rem;
}
.room-card .room-stat {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  font-size: .9rem;
  color: #4a5568;
}
.room-card .room-stat i {
  color: var(--primary);
  width: 20px;
  text-align: center;
}

/* ===== LOOKUP CARDS ===== */
.lookup-add-card {
  border: 2px dashed #cbd5e0;
  border-radius: var(--radius);
  background: #fff;
  transition: var(--transition);
}
.lookup-add-card:hover {
  border-color: var(--primary);
}

/* ===== ALERTS ===== */
.alert {
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

/* ===== FOOTER ===== */
.footer-portal {
  background: var(--navy);
  color: rgba(255,255,255,.6);
  padding: 1.25rem 0;
  font-size: .85rem;
}

/* ===== EMPTY STATES ===== */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #a0aec0;
}
.empty-state i { font-size: 3rem; margin-bottom: .75rem; }
.empty-state p { font-size: 1rem; }

/* ===== STAGGERED ANIMATIONS ===== */
.fade-in {
  animation: fadeIn .5s cubic-bezier(.22,1,.36,1);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered card reveal */
.row > [class*="col-"] {
  animation: staggerIn .5s cubic-bezier(.22,1,.36,1) both;
}
.row > [class*="col-"]:nth-child(1)  { animation-delay: .05s; }
.row > [class*="col-"]:nth-child(2)  { animation-delay: .1s; }
.row > [class*="col-"]:nth-child(3)  { animation-delay: .15s; }
.row > [class*="col-"]:nth-child(4)  { animation-delay: .2s; }
.row > [class*="col-"]:nth-child(5)  { animation-delay: .25s; }
.row > [class*="col-"]:nth-child(6)  { animation-delay: .3s; }
.row > [class*="col-"]:nth-child(7)  { animation-delay: .35s; }
.row > [class*="col-"]:nth-child(8)  { animation-delay: .4s; }
.row > [class*="col-"]:nth-child(9)  { animation-delay: .45s; }

@keyframes staggerIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered table rows */
.table-portal tbody tr,
.avail-table tbody tr {
  animation: rowSlide .4s cubic-bezier(.22,1,.36,1) both;
}
.table-portal tbody tr:nth-child(1), .avail-table tbody tr:nth-child(1) { animation-delay: .05s; }
.table-portal tbody tr:nth-child(2), .avail-table tbody tr:nth-child(2) { animation-delay: .08s; }
.table-portal tbody tr:nth-child(3), .avail-table tbody tr:nth-child(3) { animation-delay: .11s; }
.table-portal tbody tr:nth-child(4), .avail-table tbody tr:nth-child(4) { animation-delay: .14s; }
.table-portal tbody tr:nth-child(5), .avail-table tbody tr:nth-child(5) { animation-delay: .17s; }
.table-portal tbody tr:nth-child(6), .avail-table tbody tr:nth-child(6) { animation-delay: .2s; }
.table-portal tbody tr:nth-child(7), .avail-table tbody tr:nth-child(7) { animation-delay: .23s; }
.table-portal tbody tr:nth-child(8), .avail-table tbody tr:nth-child(8) { animation-delay: .26s; }
.table-portal tbody tr:nth-child(9), .avail-table tbody tr:nth-child(9) { animation-delay: .29s; }
.table-portal tbody tr:nth-child(10), .avail-table tbody tr:nth-child(10) { animation-delay: .32s; }

@keyframes rowSlide {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===== MOBILE RESPONSIVE ===== */

/* --- Small screens (phones) --- */
@media (max-width: 575.98px) {
  /* Tighter container padding */
  .container { padding-left: 12px; padding-right: 12px; }
  body > .container.mt-4 { margin-top: 1rem !important; }

  /* Navbar */
  .navbar-portal { padding: .5rem 0; }
  .navbar-portal .navbar-brand { font-size: 1.05rem; }
  .navbar-portal .navbar-brand .brand-icon { width: 30px; height: 30px; font-size: .85rem; margin-right: 8px; }

  /* Search hero */
  .search-hero { padding: 1.5rem 1.25rem 1.25rem; margin-bottom: 1.25rem; border-radius: var(--radius-sm); }
  .search-hero h2 { font-size: 1.25rem; }
  .search-hero p { font-size: .85rem; margin-bottom: 1rem; }
  .search-hero .form-label { font-size: .78rem; }
  .search-hero .form-control,
  .search-hero .form-select { padding: .55rem .75rem; font-size: .9rem; }
  .search-hero .btn-search { padding: .6rem 1rem; font-size: .9rem; }

  /* Toolbar: stack sort & view vertically */
  .d-flex.justify-content-between.align-items-center.mb-3 {
    flex-direction: column;
    align-items: flex-start !important;
    gap: .75rem !important;
  }
  .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex {
    flex-wrap: wrap;
    gap: .5rem !important;
    width: 100%;
  }
  .btn-group-sm > .btn, .btn-group-sm > a.btn { padding: .3rem .5rem; font-size: .78rem; }

  /* Day navigation */
  .d-flex.justify-content-center.align-items-center.gap-3.mb-3 {
    gap: .5rem !important;
    flex-wrap: nowrap;
  }
  .d-flex.justify-content-center.align-items-center.gap-3.mb-3 .btn-sm { padding: .25rem .5rem; font-size: .75rem; }
  .d-flex.justify-content-center.align-items-center.gap-3.mb-3 .fw-semibold { font-size: .8rem; text-align: center; }

  /* Table: compact on mobile */
  .table-portal thead th,
  .table.table-portal thead th { padding: .6rem .5rem; font-size: .68rem; letter-spacing: .04em; }
  .table-portal tbody td { padding: .5rem .5rem; font-size: .82rem; }
  .th-sort { padding: .15rem .2rem; gap: .2rem; font-size: .68rem; }

  /* Hotel cards */
  .hotel-card .card-body { padding: 1rem; }
  .hotel-card .hotel-name { font-size: 1.05rem; }
  .hotel-card .hotel-meta { font-size: .8rem; }

  /* Grid view: single column already via Bootstrap; improve card spacing */
  .row.g-4 { --bs-gutter-y: 1rem; }

  /* Detail page */
  .detail-header { padding: 1.5rem 1.25rem; border-radius: var(--radius-sm); }
  .detail-header h2 { font-size: 1.35rem; }
  .detail-header .detail-meta { font-size: .85rem; }

  /* Stat cards */
  .stat-card .stat-value { font-size: 1.8rem; }
  .stat-card .stat-label { font-size: .75rem; }
  .stat-card .stat-icon { font-size: 2.5rem; }

  /* Page headers */
  .page-header { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .page-header h2 { font-size: 1.3rem; }

  /* Calendar grid */
  .calendar-grid thead th { min-width: 48px; font-size: .65rem; padding: .5rem .15rem; }
  .calendar-grid .day-input { width: 40px; font-size: .8rem; padding: .25rem .1rem; }

  /* Availability calendar toolbar */
  .d-flex.justify-content-between.align-items-center.mt-3 {
    flex-direction: column;
    gap: .75rem;
    align-items: stretch !important;
  }
  .calendar-legend { justify-content: center; }

  /* Login card */
  .login-card { padding: 2rem 1.5rem; }
  .login-card .brand-logo { width: 52px; height: 52px; font-size: 1.4rem; border-radius: 12px; }

  /* Footer */
  .footer-portal { font-size: .78rem; padding: 1rem 0; }

  /* Empty states */
  .empty-state { padding: 2rem .75rem; }
  .empty-state i { font-size: 2.25rem; }

  /* Flatpickr: single month on mobile */
  .flatpickr-calendar { max-width: 100vw !important; }
  .flatpickr-months { font-size: .85rem; }
}

/* --- Medium screens (tablets) --- */
@media (min-width: 576px) and (max-width: 767.98px) {
  .search-hero { padding: 2rem 1.75rem 1.5rem; }
  .search-hero h2 { font-size: 1.4rem; }

  /* Toolbar wrapping */
  .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex { flex-wrap: wrap; }

  /* Grid cards: 2 columns */
  .row.g-4 > .col-md-4 { flex: 0 0 50%; max-width: 50%; }

  /* Detail header */
  .detail-header { padding: 1.75rem 2rem; }
  .detail-header h2 { font-size: 1.5rem; }

  /* Page headers */
  .page-header h2 { font-size: 1.4rem; }

  .stat-card .stat-value { font-size: 2rem; }
}

/* --- Touch-friendly targets for all mobile --- */
@media (max-width: 767.98px) {
  /* Minimum tap target size */
  .btn-action { width: 40px; height: 40px; }
  .btn-group-sm > .btn, .btn-group-sm > a.btn { min-height: 36px; min-width: 36px; }

  /* Improve form spacing */
  .row.g-3 > [class*="col-"] { margin-bottom: .25rem; }

  /* Search form: full-width stacked inputs */
  .search-hero .row.g-3 > [class*="col-md"] { flex: 0 0 100%; max-width: 100%; }

  /* Force flatpickr to 1 month on smaller screens */
  .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { display: block; }
  .flatpickr-wrapper { width: 100%; }

  /* Scroll hint for tables */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table-responsive::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,.04));
    pointer-events: none;
    z-index: 1;
  }
  .table-responsive { position: relative; }

  /* Contact card stacking */
  .contact-card .contact-item { gap: .5rem; }
  .contact-card .contact-icon { width: 32px; height: 32px; font-size: .85rem; }

  /* Room cards */
  .room-card .room-body { padding: 1rem; }
  .room-card .room-header { padding: .75rem 1rem; }
}