/* Cairo, self-hosted: one variable woff2 covering weights 400-700, Arabic
   subset only. The default system Arabic faces render poorly, which is why it
   is here; Latin text keeps the system stack below, so no Latin subset is
   needed. Served locally rather than from Google so no third-party request is
   made on any page load — see public/vendor/README.md. */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/vendor/cairo/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* --- CSS Variables & Design System --- */
:root {
  /* Inter was dropped: it is not installed on any OS, so it always cost a
     download, and the system UI faces below (San Francisco, Roboto, Segoe UI)
     are what it was designed to resemble. */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Color Palette - Premium Slate & Emerald */
  --bg-dark: #0f1015;
  --bg-radial: radial-gradient(circle at center, #1a1c24 0%, #08090c 100%);
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-border: rgba(255, 255, 255, 0.08);
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --success: #10b981;
  --success-glow: rgba(16, 185, 129, 0.2);
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #06b6d4;

  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --glass-blur: blur(16px);
}

/* --- Base Styles --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Hard stop: nothing may cause the page to be wider than the screen */
html {
  overflow-x: hidden;
}


body {
  font-family: var(--font-family);
  background: var(--bg-radial);
  color: var(--text-primary);
  min-height: 100vh;
  /* On a phone 100vh is the height with the address bar hidden, so a page
     that fits still scrolls by the bar's height; dvh tracks the visible area. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
  padding: calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Chrome on Android resolves dvh to the large viewport in an installed app,
   as if there were an address bar to hide, so the page scrolled by 56px.
   With no bar, svh is the visible area. */
@media (display-mode: standalone) {
  body {
    min-height: 100svh;
  }
}

/* --- Header & Layout Container --- */
.container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.guest-container {
  width: 100%;
  max-width: 450px;
  margin: auto;
  text-align: center;
}

.header {
  margin-bottom: 30px;
  text-align: center;
}

.header h1 {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, #fff 0%, var(--text-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.header p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* Admin header — title left, logout right; stacks on mobile */
.header-admin {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 30px;
}

.header-admin-text {
  text-align: left;
  flex: 1;
}

.header-admin-text h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, #fff 0%, var(--text-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}

.header-admin-text p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* --- Glassmorphic Cards --- */
.card {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 30px;
  box-shadow: var(--glass-shadow);
  margin-bottom: 25px;
  transition: var(--transition-smooth);
}

.card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

/* --- Admin Tabs Navigation --- */
.tabs {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 25px;
  backdrop-filter: var(--glass-blur);
  flex-wrap: wrap;
}

.tab-btn {
  flex: 1;
  min-width: 80px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-smooth);
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.tab-btn.active {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.tab-content {
  display: none;
  animation: fadeIn 0.4s ease-out forwards;
}

.tab-content.active {
  display: block;
}

/* --- Form Fields & Inputs --- */
.form-group {
  margin-bottom: 20px;
  text-align: left;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 16px;
  transition: var(--transition-smooth);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

select.form-control option {
  background-color: var(--bg-dark);
  color: var(--text-primary);
}

/* Two-column date grid — collapses to single column on mobile */
.date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* Button row for forms — wraps cleanly on mobile */
.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form-actions .btn {
  flex: 1;
  min-width: 140px;
}

.form-actions .btn-cancel {
  flex: 0 0 auto;
  width: auto;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  width: 100%;
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}


/* --- Compact row actions (table rows) --- */
.btn-sm {
  width: auto;
  padding: 7px 12px;
  font-size: 0.82rem;
  border-radius: 8px;
  gap: 6px;
  border: 1px solid transparent;
  line-height: 1.2;
}

.btn-sm svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.btn-square {
  padding: 7px 9px;
}

.btn-square svg {
  width: 16px;
  height: 16px;
}

.btn-sm:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.btn-share {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.3);
  color: #4ade80;
}

.btn-share:hover {
  background: rgba(37, 211, 102, 0.2);
}

.btn-neutral {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.btn-neutral:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-ghost-danger {
  background: transparent;
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.btn-ghost-danger:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.6);
}

.row-actions {
  display: inline-flex;
  gap: 6px;
  justify-content: flex-end;
}

/* Logout button — always auto-width, never stretches full-width */
.btn-logout {
  width: auto !important;
  white-space: nowrap;
}

/* --- UI Lists and Tables --- */
.table-wrapper {
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: rgba(0, 0, 0, 0.1);
  margin-top: 15px;
  /* On desktop: normal table scroll container */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

th,
td {
  padding: 14px 18px;
  font-size: 0.9rem;
}

th {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--card-border);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
}

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

tr:hover td {
  background: rgba(255, 255, 255, 0.01);
}

/* Status Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}

.badge-danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}

.badge-info {
  background: rgba(6, 182, 212, 0.12);
  color: var(--info);
}

.badge-accent {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

.badge-sm {
  padding: 2px 8px;
  font-size: 0.68rem;
}

/* --- Collapsible card (guest key form) --- */
.collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.collapsible-summary::-webkit-details-marker {
  display: none;
}

.collapsible-summary h2 {
  font-size: 1.4rem;
  flex: 1;
}

.collapsible-plus {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
}

.collapsible-plus svg {
  width: 18px;
  height: 18px;
}

/* Closed, the card is the page's main call to action rather than a heading. */
.collapsible-card:not([open]) {
  padding-top: 20px;
  padding-bottom: 20px;
  background: rgba(79, 70, 229, 0.1);
  border-color: rgba(129, 120, 255, 0.45);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.collapsible-card:not([open]):hover {
  background: rgba(79, 70, 229, 0.16);
  border-color: rgba(129, 120, 255, 0.7);
}

.collapsible-card:not([open]) .collapsible-plus {
  display: inline-flex;
}

.collapsible-card:not([open]) .collapsible-chevron {
  color: #a5b4fc;
}

.collapsible-summary:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 6px;
  border-radius: 6px;
}

.collapsible-chevron {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.collapsible-summary:hover .collapsible-chevron {
  color: var(--text-primary);
}

.collapsible-card[open] .collapsible-chevron {
  transform: rotate(180deg);
}

.collapsible-card[open] .collapsible-summary {
  margin-bottom: 20px;
}

/* --- Guest keys table --- */
.guest-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-weight: 600;
}

.guest-meta {
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.stay-dates {
  white-space: nowrap;
}

.stay-times {
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.stay-arrow {
  color: var(--text-muted);
  margin: 0 4px;
}

/* --- Log tables --- */
.log-time {
  font-family: monospace;
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.log-mono {
  font-family: monospace;
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.log-muted {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.log-who {
  font-weight: 500;
}

.table-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 22px 18px;
}

/* --- Generated Result Card (Admin) --- */
.result-card {
  background: rgba(79, 70, 229, 0.08);
  border: 1px dashed var(--primary);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  animation: slideUp 0.3s ease-out;
}

.link-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 15px 0;
}

.link-input {
  flex: 1;
  min-width: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px;
  color: #fff;
  font-family: monospace;
  font-size: 0.85rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.btn-icon {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  color: #fff;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Dark label, not white: white on #25d366 is 1.98:1. */
.btn-whatsapp {
  background: #25d366;
  color: #0b2e1a;
  font-weight: 600;
}

.btn-whatsapp:hover {
  background: #3ddc7a;
}

.btn-whatsapp:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.btn-whatsapp svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --- GUEST UNLOCK INTERFACE --- */

.welcome-info {
  margin-bottom: 40px;
}

.welcome-info h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.welcome-info p {
  color: var(--text-secondary);
}

/* Big Circular Unlock Button */
.unlock-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
}

.unlock-btn {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #312e81 0%, #1e1b4b 100%);
  border: 4px solid var(--primary);
  color: #fff;
  font-family: var(--font-family);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3);
  /* Not `all`: the size follows the screen height, and when a phone's visible
     height settles during load the button visibly grew (and overshot). */
  transition-property: transform, border-color, box-shadow, color;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.unlock-btn svg {
  width: 48px;
  height: 48px;
  fill: currentColor;
  transition: transform 0.5s var(--transition-smooth);
}

.unlock-btn:hover:not(:disabled) {
  transform: scale(1.05);
  border-color: #6366f1;
  box-shadow: 0 15px 40px rgba(79, 70, 229, 0.5);
}

.unlock-btn:disabled {
  cursor: not-allowed;
}

/* Successful Unlock State */
.unlock-btn.unlocked {
  background: radial-gradient(circle at center, #064e3b 0%, #062f21 100%);
  border-color: var(--success);
  box-shadow: 0 0 40px var(--success-glow);
  animation: pulse 1.5s infinite;
}

.unlock-btn.unlocked svg {
  transform: rotate(360deg);
}

/* Debouncing/Rate Limit State */
.unlock-btn.cooldown {
  background: radial-gradient(circle at center, #451a03 0%, #2c0e02 100%);
  border-color: var(--warning);
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2);
}

/* Countdown Label */
.countdown-lbl {
  margin-top: 15px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--success);
  min-height: 27px;
}

.countdown-lbl.error {
  color: var(--danger);
}

/* Offline Fallback Card */
.fallback-card {
  background: rgba(239, 68, 68, 0.05);
  border: 2px solid var(--danger);
  border-radius: 16px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.15);
  animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

.fallback-card svg {
  width: 48px;
  height: 48px;
  color: var(--danger);
  margin-bottom: 15px;
}

.fallback-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.fallback-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* --- KEYFRAME ANIMATIONS --- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(16, 185, 129, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* Toast Messages */
.toast {
  position: fixed;
  bottom: 25px;
  right: 25px;
  left: 25px;
  max-width: 420px;
  margin-left: auto;
  background: #1f2937;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  color: #fff;
  padding: 14px 20px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.toast-success {
  border-left-color: var(--success);
}

.toast.toast-danger {
  border-left-color: var(--danger);
}

/* =====================================================
   RESPONSIVE BREAKPOINTS
   ===================================================== */

/* Tablet (<=768px) */
@media (max-width: 768px) {
  body {
    padding: 16px 12px;
  }

  .header-admin {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .header-admin-text {
    text-align: center;
  }

  .header-admin-text h1 {
    font-size: 1.7rem;
  }

  .header-admin .btn-logout {
    width: auto;
    align-self: center;
    padding: 10px 24px;
    font-size: 0.9rem;
    border-radius: 10px;
  }

  .card {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .date-grid {
    grid-template-columns: 1fr;
  }

  .logs-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

/* Mobile (<=480px) */
@media (max-width: 480px) {
  /* Keeps the safe-area insets: with viewport-fit=cover a bare 12px puts the
     top bar under an iPhone's status bar. */
  body {
    padding: calc(12px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  }

  /* Top-aligned, with the unlock card taking the rest of the screen, rather
     than centred with empty bands above and below. */
  .guest-container {
    margin: 0 auto;
    flex: 1;
  }

  #state-active {
    flex: 1;
  }

  #unlock-card {
    flex: 1;
    justify-content: center;
    margin-bottom: 0;
  }

  .header h1 {
    font-size: 1.6rem;
  }

  .header-admin-text h1 {
    font-size: 1.4rem;
  }

  .header p,
  .header-admin-text p {
    font-size: 0.82rem;
  }

  .card {
    padding: 16px 12px;
    border-radius: 12px;
    margin-bottom: 14px;
  }

  .tabs {
    gap: 4px;
    padding: 5px;
  }

  .tab-btn {
    font-size: 0.78rem;
    padding: 8px 6px;
    min-width: 60px;
  }

  /* Prevent iOS Safari zoom on input focus */
  .form-control {
    font-size: 16px;
    padding: 11px 14px;
  }

  .form-group label {
    font-size: 0.76rem;
  }

  .btn {
    padding: 11px 18px;
    font-size: 0.88rem;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn-cancel {
    width: 100%;
  }

  .link-input {
    font-size: 0.72rem;
    padding: 8px;
  }

  th,
  td {
    padding: 10px 10px;
    font-size: 0.78rem;
  }

  /* Guest unlock page */
  .guest-container {
    padding: 0 4px;
  }

  .unlock-btn {
    width: 165px;
    height: 165px;
    font-size: 0.9rem;
  }

  .unlock-btn svg {
    width: 38px;
    height: 38px;
  }

  .welcome-info h2 {
    font-size: 1.35rem;
  }

  .toast {
    left: 10px;
    right: 10px;
    bottom: 14px;
    font-size: 0.82rem;
    padding: 12px 14px;
  }
}

/* =====================================================
   TABLE → STACKED CARDS ON MOBILE
   At ≤600px the table becomes a list of labeled cards.
   This completely eliminates horizontal overflow and the
   zoom-out problem on phones.
   ===================================================== */
@media (max-width: 600px) {
  .table-wrapper {
    overflow-x: visible;
    border: none;
    background: transparent;
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  /* Hide the header row visually — labels come from data-label */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tbody tr {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 4px 0;
    overflow: hidden;
  }

  tbody tr:last-child {
    margin-bottom: 0;
  }

  td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: 10px 14px;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: right;
  }

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

  /* Inject the column label from the data-label attribute */
  td[data-label]::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    flex-shrink: 0;
    text-align: left;
  }

  /* Action cell: center buttons */
  td[data-label="Action"] {
    justify-content: flex-end;
    gap: 6px;
  }

  td[data-label="Action"]::before {
    display: none;
  }

  td[data-label="Guest"] {
    justify-content: flex-start;
    text-align: left;
  }

  td[data-label="Guest"]::before {
    display: none;
  }

  .table-empty,
  #toggle-expired-row td {
    justify-content: center;
  }

  .log-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    padding: 6px 0;
  }

  .log-table td {
    display: block;
    border-bottom: none;
    padding: 6px 14px;
    text-align: left;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .log-table td[data-label]::before {
    display: block;
    margin-bottom: 3px;
    font-size: 0.65rem;
  }

  .log-table td[colspan] {
    grid-column: 1 / -1;
    text-align: center;
  }

  .log-table .log-mono {
    font-size: 0.72rem;
    white-space: normal;
    overflow-wrap: normal;
  }

  /* A zero-width space, so the break exists only here: Chrome honours <wbr>
     even under nowrap, which wrapped every IP in the desktop table. */
  .log-table .ip-break::after {
    content: "\200B";
  }

  .collapsible-summary h2 {
    font-size: 1.15rem;
  }
}

/* --- Pagination Styles --- */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--card-border);
  flex-wrap: wrap;
  gap: 12px;
}

.pagination-info {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.pagination-buttons {
  display: flex;
  gap: 6px;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  padding: 0 10px;
  font-family: var(--font-family);
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  height: 32px;
  min-width: 20px;
  padding-bottom: 8px;
  color: var(--text-muted);
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.pagination-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.logs-header .limit-select,
.logs-header .btn-sm,
.logs-header .btn-icon {
  height: 36px;
}

.logs-header .btn-icon {
  width: 36px;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .pagination-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Custom Select for Page Limit */
.limit-select {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  padding: 8px 32px 8px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  height: 40px;
  width: auto;
  transition: var(--transition-smooth);
  
  /* Remove default arrow and add custom SVG chevron */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

.limit-select:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.limit-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

.limit-select option {
  background-color: var(--bg-dark);
  color: var(--text-primary);
}

/* --- Modal Overlay & Content --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: #15161c;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  width: 90%;
  max-width: 520px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.01);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.75rem;
  cursor: pointer;
  line-height: 1;
  transition: var(--transition-smooth);
  padding: 0 4px;
}

.modal-close-btn:hover {
  color: var(--danger);
  transform: scale(1.1);
}

.modal-body {
  padding: 24px;
}

.modal-body p {
  line-height: 1.5;
}

/* --- Language Selector --- */
.guest-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#state-active {
  flex-direction: column;
}

#unlock-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
}

.lang-selector-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 6px 12px;
  margin-inline-start: auto; /* stays at the row's end when the pill is hidden */
  transition: var(--transition-smooth);
}

/* Connection pill and language selector share one row; dir="rtl" mirrors it. */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
}

/* --- Connection status --- */
.conn-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 8px 12px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* display: inline-flex above would otherwise override the hidden attribute. */
.conn-status[hidden] {
  display: none;
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--warning);
}

.conn-status[data-state="checking"] .conn-dot {
  animation: conn-blink 1.4s ease-in-out infinite;
}

@keyframes conn-blink {
  50% {
    opacity: 0.3;
  }
}

.conn-status[data-state="online"] .conn-dot {
  background: var(--success);
  box-shadow: 0 0 8px var(--success-glow);
}

.conn-status[data-state="offline"] {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.35);
}

.conn-status[data-state="offline"] .conn-dot {
  background: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  .conn-status .conn-dot {
    animation: none;
  }
}

.lang-selector-container:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.lang-icon {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

#lang-selector {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 0.85rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  padding: 0 4px;
}

#lang-selector option {
  background: #15161c;
  color: var(--text-primary);
}

/* --- RTL Support --- */
[dir="rtl"] {
  text-align: right;
  --font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--font-family);
}


[dir="rtl"] .guest-container,
[dir="rtl"] .header,
[dir="rtl"] #state-error,
[dir="rtl"] #unlock-card,
[dir="rtl"] #fallback-card {
  text-align: center; /* Keep guest portal cards centered */
}

/* --- Source link (AGPL section 13 notice) --- */
.source-footer {
  margin-top: 28px;
  padding: 14px 0 4px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0.65;
}

.source-footer a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.source-footer a:hover {
  color: var(--text-secondary);
}

/* Guest page on a short screen (any phone, or a laptop under ~860px tall):
   the default spacing needs about 840px and would make the page scroll. */
@media (max-width: 480px), (max-height: 860px) {
  .guest-container .top-bar {
    margin-bottom: 16px;
  }

  .guest-container .header {
    margin-bottom: 18px;
  }

  #unlock-card {
    padding: 24px 16px;
  }

  #unlock-card .unlock-wrapper {
    margin: 28px 0;
  }
}

/* A tall phone has room the 165px button leaves empty inside the unlock card. */
@media (max-width: 480px) and (min-height: 740px) {
  .unlock-btn {
    width: 210px;
    height: 210px;
    font-size: 1rem;
  }

  .unlock-btn svg {
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 480px) and (min-height: 880px) {
  .unlock-btn {
    width: 230px;
    height: 230px;
    font-size: 1.05rem;
  }

  .unlock-btn svg {
    width: 50px;
    height: 50px;
  }
}