/* The dashboard's one stylesheet (parent spec §9: no build step, no SCSS toolchain).

   The sign-in page is ported from materia's (src/app/[locale]/(non-navigation)/login/
   Login.module.scss and src/app/components/loginForm/LoginForm.module.scss), with materia's
   SCSS variables resolved to their values (src/styles/variables.scss) and the Ant Design theme
   tokens its form controls render with (src/providers/AndtConfigProvider.tsx: font size 13,
   radius 8, primary #003cc7, hover #004dff, active #85a9ff) written out by hand.

   Materia loads Inter through next/font. Nothing here loads a web font - no third-party
   request from this origin - so Inter is used where the machine has it, and the system face
   otherwise. */

:root {
  --primary600: #003cc7;
  --primary500: #004dff;
  --primary-active: #85a9ff;
  --primary-outline: rgba(5, 145, 255, 0.1);
  --secondary400: #253746;
  --secondary300: #3e596f;
  --secondary200: #75a3c9;
  --success600: #1c6c09;
  --success100: #d9fbd0;
  --warning600: #bc3803;
  --warning100: #ffefca;
  --warning50: #fff6e0;
  --primary100: #e5edff;
  --gray6: #6e7891;
  --gray1: #eff2f6;
  --error600: #b81800;
  --error100: #ffe0db;
  --gray11: #141824;
  --gray10: #222834;
  --gray7: #525b75;
  --gray3: #cbd0dd;
  --gray2: #e3e6ed;
  --gray05: #f5f7fa;
  --white: #ffffff;
  --control-border: #d9d9d9;
  --radius: 8px;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; font-family: var(--font); }

html, body { width: 100%; min-height: 100%; margin: 0; }

body {
  font-size: 14px;
  line-height: 1.4;
  color: var(--gray10);
  background: var(--gray05);
}

h1 { font-size: 24px; font-weight: 700; margin: 0 0 16px; color: var(--gray11); }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; color: var(--gray11); }
a { color: var(--primary600); }

.brand { margin: 0; font-size: 24px; font-weight: 800; color: var(--primary500); letter-spacing: -0.5px; }
.brand span { color: var(--gray11); }

/* --- form controls: materia's Ant Design inputs and primary button ----------------------- */

.field { margin-bottom: 24px; }
.field label { display: block; margin-bottom: 4px; color: var(--gray11); font-size: 13px; line-height: 1.5715; }
.field input {
  width: 100%;
  height: 32px;
  padding: 4px 11px;
  font-size: 13px;
  color: var(--gray11);
  background: var(--white);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input::placeholder { color: rgba(0, 0, 0, 0.25); }
.field input:hover { border-color: var(--primary500); }
.field input:focus { outline: 0; border-color: var(--primary600); box-shadow: 0 0 0 2px var(--primary-outline); }
.field.invalid input { border-color: var(--error600); }
.field .error { margin: 4px 0 0; color: var(--error600); font-size: 13px; }
.field .help { margin-top: 6px; color: var(--gray7); font-size: 12px; }
.field .help ul { margin: 0; padding-left: 18px; }

button { cursor: pointer; }
button.primary {
  width: 100%;
  height: 38px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--white);
  background: var(--primary600);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: 0 2px 0 var(--primary-outline);
  transition: background 0.2s;
}
button.primary:hover { background: var(--primary500); }
button.primary:active { background: var(--primary-active); }
button.link { padding: 0; border: 0; background: none; color: var(--primary600); font-size: inherit; text-decoration: underline; }
form.inline { display: inline; }

.alert { margin-bottom: 16px; padding: 10px 12px; border-radius: 6px; background: var(--error100); color: var(--error600); }
.alert p { margin: 0; }
.notice { margin-bottom: 16px; padding: 10px 12px; border-radius: 6px; background: var(--primary100); color: var(--primary600); }
.notice p { margin: 0; }

/* --- sign-in: materia's split page ------------------------------------------------------ */

body.sign-in { background: var(--white); }

.sign-in-page { display: flex; justify-content: space-between; width: 100%; min-height: 100vh; overflow: hidden; }

.sign-in-page__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
  max-width: 464px;
  margin: auto;
  padding: 48px 0;
}

.sign-in-page__titles { display: flex; flex-direction: column; align-items: center; gap: 48px; }

.wordmark {
  margin: 0;
  color: var(--primary600);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1.6px;
  text-align: center;
}

.sign-in-page__subtitles { display: flex; flex-direction: column; align-items: center; }
.sign-in-page__subtitles h2 { margin: 0 0 8px; font-size: 25px; font-weight: 800; line-height: 1.2; color: var(--gray11); }
.sign-in-page__subtitles p { margin: 0; color: var(--gray7); font-size: 16px; line-height: 1.4; }

.sign-in-form { display: flex; flex-direction: column; width: 100%; padding: 0 32px; }
.sign-in-form .field:last-of-type { margin-bottom: 20px; }
.sign-in-form__error { margin-bottom: 24px; text-align: center; font-weight: 700; color: var(--error600); }
.sign-in-form__error p { margin: 0; }

.sign-in-page__hero { position: relative; display: none; width: 50%; aspect-ratio: 720 / 1000; max-height: 100vh; overflow: hidden; }
.sign-in-page__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .sign-in-form { max-width: 400px; padding: 0; }
  .sign-in-page__hero { display: flex; }
}

/* --- change password, no access: a card on the page ---------------------------------------- */

body.auth { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }

.card {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--gray2);
  border-radius: var(--radius);
}
.card .brand { margin-bottom: 24px; }
.card-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--gray2); }
.lede { margin: 0 0 20px; color: var(--gray7); }

/* --- the signed-in chrome: materia's Navbar and GlobalBar ----------------------------------- */

body.app { height: 100vh; overflow: hidden; }
.app-shell { display: flex; height: 100vh; }

.navbar { display: flex; flex-direction: column; flex-shrink: 0; width: 240px; background: var(--secondary400); color: var(--white); }
.navbar_header { padding: 20px 16px; }
.navbar_title { font-size: 24px; font-weight: 700; color: var(--white); }
.navbar_menu { flex: 1; margin: 0; padding: 4px 8px 16px; list-style: none; }
.navbar_item { display: flex; align-items: center; gap: 12px; margin: 2px 0; padding: 10px 12px; border-radius: 6px; color: #cbd6e2; font-weight: 500; text-decoration: none; }
.navbar_item:hover { background: var(--secondary300); color: var(--white); }
.navbar_item.active { background: var(--primary500); color: var(--white); }
.navbar_footer { padding: 16px; border-top: 1px solid var(--secondary300); color: var(--secondary200); font-size: 11px; line-height: 1.6; }
.navbar_footer p { margin: 0; }

.app-main { display: flex; flex: 1; flex-direction: column; min-width: 0; background: var(--white); }
.app-content { flex: 1; overflow: auto; }

.globalBar { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--white); border-bottom: 1px solid var(--gray3); }
.globalBar_left { display: flex; align-items: center; min-height: 38px; }
.globalBar_options { display: flex; align-items: center; gap: 16px; }

/* A <details> menu: the popover materia opens with JavaScript, opened here by the browser. */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.popover { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 220px; max-width: 360px; overflow: hidden; background: var(--white); border: 1px solid var(--gray2); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(20, 24, 36, 0.16); }
.popover--right, .account-menu .popover { left: auto; right: 0; }
.popover_titleRow { padding: 16px; border-bottom: 1px solid var(--gray2); }
.popover_title { margin: 0; color: var(--gray10); font-size: 13px; font-weight: 700; }
.popover_btn { display: block; width: 100%; padding: 12px 16px; border: 0; background: none; color: var(--gray10); font-size: 14px; text-align: left; text-decoration: none; }
.popover_btn:hover { background: var(--primary100); }
.popover_btn.is-current { background: var(--gray05); }

/* HotelButton.module.scss */
.hotelButton, .barButton { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border: 1px solid var(--gray2); border-radius: 6px; background: var(--gray05); color: var(--primary600); font-size: 13px; font-weight: 700; line-height: 1.2; }
.hotelButton:hover, .barButton:hover { background: var(--gray1); }
.site-prefix { font-weight: 400; }
.site-distinct { font-weight: 800; }

/* --- page furniture ---------------------------------------------------------------------------- */

.page-header { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-bottom: 1px solid var(--gray1); }
.titleRow { display: flex; align-items: center; gap: 12px; }
.titleRow h1 { margin: 0; }
.countPill { display: flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 4px; background: var(--secondary400); color: var(--white); font-size: 13px; font-weight: 700; line-height: 1.2; }
.siteName { margin: 0; color: var(--gray7); font-size: 16px; font-weight: 600; }
.backLink { color: var(--gray7); font-size: 13px; text-decoration: none; }
.searchBar input { width: 100%; max-width: 420px; height: 40px; padding: 0 14px; font-size: 14px; border: 1px solid var(--gray2); border-radius: var(--radius); }
.searchBar input:focus { outline: 0; border-color: var(--primary500); box-shadow: 0 0 0 2px var(--primary100); }
.freshness { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; color: var(--gray7); font-size: 13px; }
.freshness_warning { color: var(--warning600); font-weight: 700; }
.tabs { display: flex; gap: 8px; }
.tab { padding: 8px 12px; border-radius: 6px; color: var(--gray7); font-weight: 600; text-decoration: none; }
.tab.is-current { background: var(--primary100); color: var(--primary600); }
.tableWrap { padding: 24px; }
.tableWrap h2 { margin: 8px 0 12px; }
.empty, .rowEmpty { color: var(--gray6); }
.rowEmpty { padding: 48px 16px; text-align: center; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px 0; color: var(--gray7); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- tables: materia's Ant Design table ------------------------------------------------------- */

table.locks, table.codes, table.activity { width: 100%; border-collapse: collapse; background: var(--white); }
table.locks th, table.codes th, table.activity th { padding: 16px; background: var(--gray05); border-bottom: 1px solid var(--gray2); color: var(--gray7); font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; }
table.locks td, table.codes td, table.activity td { padding: 14px 16px; border-bottom: 1px solid #f0f0f0; color: var(--gray10); vertical-align: middle; font-variant-numeric: tabular-nums; }
table.locks tbody tr:hover td { background: var(--gray05); }
table.locks .room { font-weight: 600; }
table.locks .actions { width: 48px; text-align: right; }
table.activity .lockName, table.activity th:last-child { text-align: right; }
table.activity .lockName { color: var(--gray7); }
table.activity .when { white-space: nowrap; }
tr.group td { padding-top: 18px; background: var(--gray05); }
tr.group-member td:first-child { padding-left: 32px; }

/* Low battery or offline tints the row (materia's doorLocksPage_rowLowBattery); stale greys it. */
tr.row-alert td { background: var(--warning50); }
tr.row-stale td { background: var(--gray1); }

.codePill { display: inline-block; padding: 4px 10px; border-radius: 4px; background: var(--success100); color: var(--success600); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }
.codePill--warn { background: var(--warning100); color: var(--warning600); }
.codePill--muted, .codePill--na { background: var(--gray1); color: var(--gray6); letter-spacing: 0; }
.more { color: var(--gray7); font-size: 12px; }
.statusText { font-size: 12px; font-weight: 700; }
.statusText.muted { color: var(--gray6); }
.alertChip { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 4px; background: var(--warning100); color: var(--warning600); font-size: 12px; font-weight: 700; }
.stale { color: var(--warning600); font-weight: 700; }
.stateChip { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.stateChip--good { background: var(--success100); color: var(--success600); }
.stateChip--warn { background: var(--warning100); color: var(--warning600); }
.stateChip--bad { background: var(--error100); color: var(--error600); }
.stateChip--muted { background: var(--gray1); color: var(--gray7); }
.stateDetail { display: block; margin-top: 4px; color: var(--gray7); font-size: 12px; }
.dotBtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; color: var(--gray7); font-size: 18px; }
.dotBtn:hover { background: var(--gray1); }

/* --- the code forms: materia's create row, and a confirmation card ------------------------------ */

.createCode { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.createCode .field { flex: 1; min-width: 240px; margin-bottom: 0; }
.createCode .field input { height: 46px; }
.createCode_button { width: auto; height: 46px; padding: 0 24px; font-size: 14px; font-weight: 700; }
.confirmCard { max-width: 640px; padding: 24px; border: 1px solid var(--gray2); border-radius: var(--radius); }
.confirmCard h2 { font-size: 18px; line-height: 1.3; }
.confirmActions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; }
.confirmActions button.primary { width: auto; padding: 0 24px; }
a.secondary { color: var(--gray7); font-weight: 600; text-decoration: none; }