:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e8f1fa;
  background: #071a2d;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --navy-950: #061421;
  --navy-900: #071a2d;
  --navy-800: #0d2943;
  --navy-700: #12395c;
  --blue: #2f9bff;
  --blue-soft: #8fc8ff;
  --white: #ffffff;
  --muted: #9fb2c4;
  --border: rgba(255, 255, 255, 0.12);
  --success: #27c281;
  --danger: #ff6b6b;
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--navy-950); }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--navy-900); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.62; }
h1, h2, h3, p { margin-top: 0; }
a { color: inherit; }

.product-mark { font-size: 16px; font-weight: 900; letter-spacing: 2px; color: #fff; }
.product-mark span { color: var(--blue); }
.product-mark.large { font-size: clamp(28px, 6vw, 42px); letter-spacing: 4px; }
.customer-name { margin-top: 5px; color: var(--muted); font-size: 14px; }

.button {
  border: 0;
  border-radius: 10px;
  min-height: 48px;
  padding: 12px 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  transition: transform 150ms ease, background 150ms ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--blue); color: #fff; }
.button.secondary { background: #e9f4ff; color: #0a3152; }
.button.ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid var(--border); }
.button.danger { background: rgba(255,107,107,0.16); color: #ffc5c5; border: 1px solid rgba(255,107,107,0.35); }
.button.compact { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.button.wide { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.button-row.end { justify-content: flex-end; }

.text-link { border: 0; background: transparent; color: var(--blue-soft); text-decoration: underline; text-underline-offset: 4px; padding: 10px; }

.status-page, .landing-page, .login-page, .kiosk-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 80% 0%, rgba(47,155,255,0.17), transparent 35%),
    linear-gradient(145deg, #061421 0%, #0a2a43 100%);
}
.message-card { width: min(100%, 520px); padding: 30px; background: var(--navy-700); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }

.landing-card, .login-card {
  width: min(100%, 540px);
  text-align: center;
  padding: clamp(28px, 6vw, 48px);
  background: rgba(13,41,67,0.93);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.nicholson-logo { display: block; width: min(280px, 80%); max-height: 120px; object-fit: contain; margin: 0 auto 20px; }
.landing-copy { max-width: 430px; margin: 18px auto 26px; color: var(--muted); line-height: 1.6; }
.site-code-form, .login-card { display: flex; flex-direction: column; gap: 14px; }
.site-code-form label, .login-card label { text-align: left; color: var(--blue-soft); font-size: 13px; font-weight: 800; letter-spacing: 0.7px; }
.site-code-form input, .login-card input { margin-top: 7px; }
.login-card h1 { margin: 12px 0 0; font-size: 28px; }
.login-card > p { color: var(--muted); margin-bottom: 8px; }
.account-email { padding: 11px 13px; border-radius: 9px; background: rgba(255,255,255,0.08); color: var(--blue-soft); overflow-wrap: anywhere; }

input, select, textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid #8aa4ba;
  border-radius: 9px;
  padding: 11px 13px;
  background: #fff;
  color: #102235;
}
textarea { resize: vertical; min-height: 96px; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(47,155,255,0.25); border-color: var(--blue); }

.kiosk-card {
  width: min(100%, 700px);
  background: rgba(9,32,52,0.96);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 24px;
  padding: clamp(26px, 6vw, 54px);
  box-shadow: var(--shadow);
}
.kiosk-card.home, .completion-card { text-align: center; }
.customer-logo { width: min(260px, 70%); max-height: 120px; object-fit: contain; margin-bottom: 18px; }
.eyebrow { margin-bottom: 10px; color: var(--site-accent); font-size: 14px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; }
.kiosk-card h1 { margin-bottom: 14px; font-size: clamp(34px, 7vw, 58px); line-height: 1.05; color: #fff; }
.kiosk-intro { color: #c3d2df; font-size: clamp(17px, 3vw, 22px); line-height: 1.55; }
.kiosk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.kiosk-button { min-height: 82px; border: 0; border-radius: 14px; padding: 18px 24px; color: #fff; font-size: clamp(20px, 4vw, 27px); font-weight: 900; box-shadow: 0 9px 24px rgba(0,0,0,0.24); }
.kiosk-button.check-in { background: var(--site-accent); }
.kiosk-button.check-out { background: #e45f49; }
.powered-by { margin: 30px 0 0; color: #88a1b6; font-size: 13px; }
.form-card.narrow { max-width: 560px; }
.kiosk-form { display: flex; flex-direction: column; gap: 17px; margin-top: 24px; }
.kiosk-form label { display: block; color: #d9e6f1; font-weight: 800; }
.kiosk-form label > input, .kiosk-form label > select { margin-top: 8px; font-size: 19px; min-height: 58px; }
.kiosk-form label > span { color: #ffd3ce; }
.code-input { text-align: center; text-transform: uppercase; font-size: 34px !important; font-weight: 900; letter-spacing: 9px; }
.safety-box { padding: 18px; border-radius: 12px; background: rgba(255,255,255,0.07); border: 1px solid var(--border); }
.safety-box p { margin: 8px 0 14px; color: #c3d2df; font-weight: 400; line-height: 1.55; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; color: #fff !important; }
.checkbox-row input, .check-row input { width: 22px; min-height: 22px; flex: 0 0 22px; margin-top: 1px; }
.success-icon { width: 78px; height: 78px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(39,194,129,0.18); border: 2px solid var(--success); color: #7ef0bb; font-size: 42px; }
.completion-card > p { color: #c3d2df; font-size: 20px; }
.checkout-code-card { width: min(100%, 360px); margin: 28px auto; padding: 21px; border-radius: 14px; background: #fff; color: #102235; }
.checkout-code-card span, .checkout-code-card small { display: block; }
.checkout-code-card strong { display: block; margin: 8px 0; color: #0a5b9d; font-size: 40px; letter-spacing: 7px; }

.admin-layout { min-height: 100vh; background: #081c2e; }
.admin-topbar { min-height: 74px; padding: 14px max(20px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--navy-950); border-bottom: 1px solid var(--border); }
.admin-nav { display: flex; gap: 4px; padding: 0 max(14px, calc((100vw - 1180px) / 2)); overflow-x: auto; background: #0b263d; border-bottom: 1px solid var(--border); }
.admin-nav a { flex: 0 0 auto; padding: 14px 12px 12px; color: #a9bdce; text-decoration: none; font-size: 13px; font-weight: 800; border-bottom: 3px solid transparent; }
.admin-nav a.active { color: #fff; border-color: var(--blue); }
.admin-main { width: min(100%, 1180px); margin: 0 auto; padding: 30px 20px 60px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.page-heading h1 { margin-bottom: 7px; color: var(--blue); font-size: clamp(30px, 5vw, 43px); line-height: 1.1; }
.page-heading p { margin-bottom: 0; color: var(--muted); }
.heading-actions { flex: 0 0 auto; }

.panel { margin-bottom: 20px; padding: 22px; background: var(--navy-800); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.13); }
.panel h2 { margin-bottom: 16px; color: var(--blue-soft); font-size: 20px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.panel-header h2 { margin-bottom: 4px; }
.panel-header p, .helper { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.notice-panel { border-color: rgba(47,155,255,0.35); background: rgba(47,155,255,0.08); }
.notice-panel p { margin: 6px 0 0; color: #b7c9d7; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.metric-card { min-height: 132px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 14px; background: linear-gradient(150deg, #123e64, #0e304e); border: 1px solid rgba(143,200,255,0.18); }
.metric-card.green { background: linear-gradient(150deg, #174c48, #103a38); border-color: rgba(39,194,129,0.3); }
.metric-card span { color: #c4d4e2; font-size: 13px; font-weight: 700; }
.metric-card strong { font-size: 42px; color: #fff; line-height: 1; }
.metric-card strong small { font-size: 16px; color: #bfd0dd; }
.data-list { display: flex; flex-direction: column; }
.data-row { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--border); }
.data-row:first-child { border-top: 0; }
.data-row strong, .data-row span, .data-row small { display: block; }
.data-row span, .data-row small { margin-top: 4px; color: var(--muted); font-size: 13px; }
.row-end { text-align: right; }
.quick-actions > h2 { margin-bottom: 14px; }
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.action-grid button, .action-grid a { min-height: 118px; padding: 18px; text-align: left; display: flex; flex-direction: column; gap: 8px; border-radius: 12px; border: 1px solid rgba(47,155,255,0.25); background: #103352; color: #fff; text-decoration: none; }
.action-grid button strong, .action-grid a strong { color: var(--blue); }
.action-grid button span, .action-grid a span { color: var(--muted); line-height: 1.45; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid.spaced { margin-top: 20px; }
.form-grid label, .panel > label { color: var(--blue-soft); font-size: 13px; font-weight: 800; }
.form-grid input, .form-grid select, .form-grid textarea, .panel > label > input, .panel > label > select, .panel > label > textarea { margin-top: 7px; }
.form-grid .full { grid-column: 1 / -1; }
.site-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.site-card { padding: 18px; border-radius: 12px; background: #0b2c47; border: 1px solid var(--border); }
.site-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.site-card h3 { margin-bottom: 5px; }
.site-card-top span { color: var(--muted); font-size: 13px; }
.kiosk-link { margin: 16px 0; padding: 10px; border-radius: 8px; background: rgba(0,0,0,0.2); color: #bdd6ea; font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }
.status-pill { display: inline-flex !important; align-items: center; justify-content: center; width: fit-content; padding: 5px 8px; border-radius: 999px; background: rgba(143,200,255,0.13); color: var(--blue-soft) !important; font-size: 11px !important; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.status-pill.checked_in, .status-pill.active { background: rgba(39,194,129,0.14); color: #7ef0bb !important; }
.status-pill.inactive { background: rgba(255,107,107,0.14); color: #ffaaaa !important; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.check-row { min-height: 50px; padding: 11px 13px; display: flex !important; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,0.04); color: #dbe8f2 !important; font-size: 14px !important; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tag { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 999px; background: rgba(47,155,255,0.13); color: #dcecff; font-size: 13px; }
.tag button { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.filter-bar { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 820px; }
th, td { padding: 13px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--blue-soft); font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; }
td { color: #dae6ef; font-size: 14px; }
td strong, td small { display: block; }
td small { margin-top: 4px; color: var(--muted); }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.summary-grid > div { padding: 16px; border-radius: 10px; background: #0b2c47; }
.summary-grid span, .summary-grid strong { display: block; }
.summary-grid span { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.summary-grid strong { color: #fff; }
.platform-layout { background: #061827; }
.platform-topbar { border-bottom-color: rgba(47,155,255,0.26); }
.platform-kicker { margin-bottom: 7px !important; color: var(--blue-soft) !important; font-size: 11px; font-weight: 900; letter-spacing: 1.6px; }
.platform-create-panel { border-color: rgba(47,155,255,0.28); }
.platform-form-note { padding: 13px 14px; border-radius: 9px; background: rgba(255,255,255,0.05); color: var(--muted); font-size: 13px; line-height: 1.5; }
.platform-search { width: min(100%, 280px); }
.customer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.customer-card { padding: 18px; border-radius: 12px; background: #0b2c47; border: 1px solid var(--border); }
.customer-card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.customer-card-heading h3 { margin-bottom: 4px; }
.customer-card-heading > div > span { color: var(--muted); font-size: 12px; font-family: ui-monospace, monospace; }
.status-pill.not-enabled { color: #d1d9e0 !important; background: rgba(255,255,255,0.08); }
.customer-detail { margin: 17px 0; padding: 12px; border-radius: 9px; background: rgba(0,0,0,0.16); }
.customer-detail span, .customer-detail strong, .customer-detail small { display: block; }
.customer-detail span { margin-bottom: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; }
.customer-detail small { margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.customer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.empty-state { padding: 26px; text-align: center; color: var(--muted); border: 1px dashed rgba(255,255,255,0.2); border-radius: 10px; }
.alert { margin: 14px 0; padding: 13px 15px; border-radius: 9px; font-weight: 700; }
.alert.error { background: #fff0f0; color: #9d2424; }
.alert.success { background: #e3f9ee; color: #176b47; }

@media (max-width: 820px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .action-grid, .summary-grid { grid-template-columns: 1fr; }
  .site-grid { grid-template-columns: 1fr; }
  .customer-grid { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .status-page, .landing-page, .login-page, .kiosk-page { padding: 14px; }
  .kiosk-card { border-radius: 17px; }
  .kiosk-actions { grid-template-columns: 1fr; }
  .admin-topbar { padding: 12px 16px; }
  .admin-main { padding: 22px 14px 45px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .panel-header { align-items: flex-start; flex-direction: column; }
  .platform-search { width: 100%; }
  .heading-actions, .heading-actions .button { width: 100%; }
  .metric-grid, .form-grid, .check-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .data-row { flex-direction: column; }
  .row-end { text-align: left; }
  .button-row.end > .button { flex: 1 1 100%; }
}


/* Express VisitorOps kiosk */
.express-form { gap: 22px; }
.express-label { margin-bottom: 10px; color: #d9e6f1; font-weight: 800; }
.express-label span { color: #ffd3ce; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.choice-grid.hosts { grid-template-columns: repeat(2, 1fr); }
.choice-button { min-height: 64px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(143,200,255,0.3); background: #103352; color: #fff; font-size: 17px; font-weight: 800; }
.choice-button.selected { background: var(--site-accent); border-color: var(--site-accent); box-shadow: 0 0 0 3px rgba(255,255,255,0.12) inset; }
.checkout-text-card { width: min(100%, 430px); margin: 24px auto; padding: 20px; border-radius: 14px; background: rgba(47,155,255,0.10); border: 1px solid rgba(47,155,255,0.3); text-align: left; }
.checkout-text-card strong { display: block; margin-bottom: 7px; color: #fff; font-size: 20px; }
.checkout-text-card p { color: #c3d2df; }
.checkout-text-card small { display: block; margin-top: 10px; color: #b8d7ee; }
.backup-code { width: min(100%, 430px); margin: 18px auto 28px; color: #b8cbd9; }
.backup-code summary { cursor: pointer; font-weight: 800; }

@media (max-width: 600px) {
  .choice-grid, .choice-grid.hosts { grid-template-columns: 1fr; }
}


/* Configurable checkout methods */
.checkout-mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0; }
.visitor-match-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.visitor-match { width: 100%; padding: 15px 16px; text-align: left; border-radius: 12px; border: 1px solid rgba(143,200,255,0.25); background: #103352; color: #fff; }
.visitor-match strong, .visitor-match span { display: block; }
.visitor-match span { margin-top: 4px; color: #b9cad8; font-size: 13px; }
.checkout-confirm-card { padding: 22px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); text-align: center; }
.checkout-confirm-card span, .checkout-confirm-card strong, .checkout-confirm-card small { display: block; }
.checkout-confirm-card strong { margin: 8px 0; font-size: 30px; color: #fff; }
.checkout-confirm-card small { margin-bottom: 18px; color: #b8cbd9; }
.checkout-help-card { width: min(100%, 430px); margin: 18px auto; padding: 18px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); text-align: left; }
.checkout-help-card strong { display: block; margin-bottom: 6px; color: #fff; }
.checkout-help-card p { margin: 0; color: #c3d2df; }

@media (max-width: 600px) {
  .checkout-mode-grid { grid-template-columns: 1fr; }
}


/* Kiosk device authorization */
.kiosk-activation-card { width: min(560px, 100%); display: flex; flex-direction: column; gap: 16px; }
.kiosk-activation-card label { display: flex; flex-direction: column; gap: 7px; text-align: left; font-weight: 800; color: #dbe8f2; }
.kiosk-activation-result { margin-top: 14px; }
.activation-code { margin: 10px 0; font-family: ui-monospace, monospace; font-size: 28px; font-weight: 900; letter-spacing: 3px; }


.offline-status {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  box-sizing: border-box;
  background: #101820;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}