/* ============================================================
   REG 1PLUS - Design System
   Professional Security Management CSS
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS Custom Properties
   ------------------------------------------------------------ */
:root {
  /* Primary */
  /* Cor da marca. Passou de vermelho (#e74c3c / #c0392b) a cinzento azulado
     em 03/08/2026: o vermelho so dava 3.82 de contraste com texto branco por
     cima, abaixo do 4.5 exigido. O vermelho ficou reservado ao que significa
     perigo ou saida — critico, erro, emergencia e movimentos de saida. */
  --color-primary: #5B6B7A;
  --color-primary-hover: #44515C;

  /* Backgrounds & Surfaces */
  --color-bg: #FFFFFF;
  --color-surface: #F5F7FA;
  --color-input-bg: #FCFCFC;

  /* Text */
  --color-text: #2C3E50;
  --color-text-secondary: #7F8C8D;

  /* Borders */
  --color-border: #E8ECEF;
  --color-border-input: #D1D8E0;

  /* Sidebar */
  --color-sidebar: #19232D;
  --color-sidebar-text-inactive: #C9D1D6;
  --color-sidebar-text-active: #FFFFFF;
  /* Active item: a soft wash. A barra branca a esquerda saiu em 03/08/2026,
     com todas as outras barras de destaque — decisao do dono. */
  --color-sidebar-active-bg: rgba(255, 255, 255, 0.10);

  /* Action buttons of a page header */
  --color-action: #2C3E50;
  --color-action-text: #FFFFFF;

  /* Stat tiles: a tinted background per kind, with the number in the strong
     tone of the same family */
  --color-tile-blue-bg: #EAF2FA;
  --color-tile-blue: #2980B9;
  /* Amber and green come darker than the mockup: the original tones give
     2.11 and 2.72 of contrast on their own backgrounds, below the 3.0 that
     big text needs. These reach 4.83 and 4.75 and read the same. */
  --color-tile-amber-bg: #FFFAF0;
  --color-tile-amber: #B45309;
  --color-tile-green-bg: #F2FBF6;
  --color-tile-green: #15803D;
  --color-tile-red-bg: #FDEDEC;
  --color-tile-red: #C0392B;

  /* Pending approvals banner */
  --color-notice-bg: #FFFBEB;
  --color-notice-text: #92400E;

  /* Severity */
  /* Escureceu em 03/08/2026: como texto da etiqueta sobre --color-surface, o
     tom antigo (#95A5A6) dava 2.38 de contraste. Este da 4.96. */
  --color-severity-low: #5F6E6F;
  --color-severity-medium: #F1C40F;
  --color-severity-high: #E67E22;
  --color-severity-high-bg: #FDF2E9;
  /* Vermelho sobrio, 03/08/2026. Substituiu o #E74C3C vivo em tudo o que e
     vermelho: critico, erro, emergencia e saida falam agora o mesmo tom.
     Ganhou-se contraste de caminho — branco por cima passou de 3.82 a 5.44. */
  --color-severity-critical: #C0392B;
  --color-severity-critical-hover: #A93226;

  /* Status */
  --color-success: #2ECC71;
  /* Saida deixou de ser cinzenta em 03/08/2026: sair passou a ter cor propria,
     o mesmo vermelho sobrio do resto. Entrada continua verde. */
  --color-exit: #C0392B;
  --color-warning: #F1C40F;
  --color-info: #3498DB;

  /* Status - darker variants for small marks (icons) and small text on light
     backgrounds. Escurecidos em 03/08/2026: os tons de 02/08 ainda davam 2.19 e
     2.87 de contraste sobre branco, abaixo do minimo. Estes dao 5.02 nos dois
     sentidos — como texto sobre branco e como fundo com texto branco por cima
     (a pastilha de entrada do painel usa-os assim). Sao os mesmos valores dos
     cartoes de numeros, --color-tile-amber e --color-tile-green. */
  --color-warning-strong: #B45309;
  --color-success-strong: #15803D;

  /* Spacing (Golden Scale ~ 1.618) */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 26px;
  --space-5: 42px;
  --space-6: 68px;
  --space-7: 110px;

  /* Radius (Golden Scale) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 26px;
  --radius-full: 50%;

  /* Shadows (Modern Premium) */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  --shadow-modal: 0 16px 50px rgba(0, 0, 0, 0.12), 0 4px 15px rgba(0, 0, 0, 0.06);

  /* Typography (Golden Scale) */
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 26px;
  --font-size-2xl: 42px;
  --font-size-hero: 68px;

  /* Sidebar width based on Golden Proportion */
  --sidebar-width: 260px;
}

/* ------------------------------------------------------------
   2. Reset & Base
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
}

img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font-family: inherit; }

/* ------------------------------------------------------------
   3. Login Page
   ------------------------------------------------------------ */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--color-surface);
  padding: var(--space-4);
}

.login-container {
  width: 100%;
  max-width: 400px;
}

.login-logo {
  text-align: center;
  margin-bottom: var(--space-6);
}

.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: var(--color-primary);
  border-radius: var(--radius-xl);
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.login-logo h1 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.login-logo p {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.login-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-7);
}

.login-tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--space-4);
}

/* ------------------------------------------------------------
   4. App Layout
   ------------------------------------------------------------ */
.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background-color: var(--color-sidebar);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Moldura da pagina. 03/08/2026: passou de --space-5 (42px) para --space-4
   (26px) — a moldura era maior do que o espaco entre as proprias seccoes,
   o que fazia a pagina ler-se solta. Ritmo unico: 26 fora, 16 entre seccoes. */
.content-body {
  padding: var(--space-4);
  flex: 1;
  background-color: var(--color-surface);
}

/* ------------------------------------------------------------
   5. Sidebar
   ------------------------------------------------------------ */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
}

.sidebar-header .logo-icon {
  width: 36px;
  height: 36px;
  font-size: 13px;
  margin-bottom: 0;
}

.sidebar-header .logo-text {
  color: #FFFFFF;
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-left: var(--space-2);
}

.sidebar-close {
  display: none;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 22px;
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: var(--color-sidebar-text-inactive);
  text-decoration: none;
  font-size: var(--font-size-md);
  transition: background-color 0.15s, color 0.15s;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.nav-item.active {
  background-color: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-text-active);
}

/* Wide logo: fits the space by height or width, whichever runs out first,
   so any logo shape keeps its proportion and is never squashed. */
.brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Sidebar logo: takes the whole width the menu gives it and is capped by
   height, so a wide logo fills the bar and a square one grows to a sensible
   size instead of hugging the corner. object-fit centres it either way. */
.brand-logo-sidebar {
  width: 100%;
  max-height: 104px;
  margin: 0 auto;
}

/* Divider above the developer-only links */
.nav-section {
  margin-top: var(--space-3);
  padding: var(--space-2) 16px var(--space-1) 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-sidebar-text-inactive);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-label {
  font-size: var(--font-size-md);
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-radius: 9px;
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.nav-item.active .nav-badge {
  background-color: rgba(255, 255, 255, 0.25);
}

.sidebar-emergency {
  padding: var(--space-4);
  margin-top: auto;
}

.btn-emergency {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: var(--color-severity-critical);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  animation: pulse 2s infinite;
}

.btn-emergency:hover {
  background-color: var(--color-severity-critical-hover);
}

.sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-3) var(--space-4);
}

.sidebar-lang {
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-3);
}

.sidebar-lang a {
  color: var(--color-sidebar-text-inactive);
  text-decoration: none;
  margin-right: var(--space-2);
}

.sidebar-lang a.active {
  color: var(--color-primary);
  font-weight: 600;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-secondary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.user-role {
  color: var(--color-sidebar-text-inactive);
  font-size: var(--font-size-xs);
  line-height: 1.3;
}

.user-logout {
  color: #FFFFFF;
  text-decoration: none;
  font-size: var(--font-size-base);
  opacity: 0.7;
  transition: opacity 0.15s;
}

.user-logout:hover {
  opacity: 1;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

.sidebar-overlay.visible {
  display: block;
}

/* ------------------------------------------------------------
   6. Header Bar
   ------------------------------------------------------------ */
.content-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 1px;
}

.header-search input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-input-bg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 220px;
}

.header-search input::placeholder {
  color: var(--color-text-secondary);
}

.header-search input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(91, 107, 122, 0.1);
}

.header-location-switcher select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-bg);
  cursor: pointer;
  outline: none;
}

/* ------------------------------------------------------------
   7. Content Header
   ------------------------------------------------------------ */
/* Titulo da pagina. 03/08/2026: a distancia ate a primeira seccao passou de
   42px para 16px — a mesma que separa as seccoes umas das outras. */
.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* O titulo e so texto: os icones sairam dos titulos em 03/08/2026 (o icone
   ja esta no menu lateral, ao lado do mesmo nome — repeti-lo nao informava). */
.content-header h2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ------------------------------------------------------------
   8. Cards
   ------------------------------------------------------------ */
.card {
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

/* Label de seccao dentro de um cartao. 03/08/2026: 22px de folga ate ao
   conteudo passaram a 18px, e sem icone (ver .content-header h2). */
.card-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

/* Section 9 (Stat Cards) removed: the dashboard now uses the
   .premium-stat-* classes, styled in app/Views/dashboard/index.php. */

/* ------------------------------------------------------------
   10. Forms
   ------------------------------------------------------------ */
.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background-color: var(--color-input-bg);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

select {
  width: 100%;
  padding: 10px 36px 10px 14px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background-color: var(--color-input-bg);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232c3e50%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  cursor: pointer;
}

.form-group input:focus,
select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(91, 107, 122, 0.15);
}

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

/* ------------------------------------------------------------
   11. Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--font-size-md);
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  line-height: 1.4;
  gap: var(--space-1);
}

.btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-secondary {
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-input);
}

.btn-secondary:hover {
  background-color: var(--color-surface);
}

/* Action button of a page header (New Resident, New Incident). Dark instead
   of red so the red stays reserved for what is urgent — emergency, delete,
   critical incidents. */
.btn-action {
  background-color: var(--color-action);
  color: var(--color-action-text);
}

.btn-action:hover {
  background-color: var(--color-sidebar);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn-sm {
  padding: 4px 10px;
  font-size: var(--font-size-sm);
}

/* ── Botoes de accao em linha de lista ────────────────────────────────
   Compactos, para caberem varios numa linha sem a inchar. O projecto exige
   alvos de 44px; num rato isso e exagero e come o ecra, num dedo e o minimo.
   Por isso: compacto por defeito e 44px automatico em ecra tactil. */
.btn-xs {
  padding: 4px 6px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  /* 28px de altura: a linha de texto sozinha ocupa 19px, por isso sobram 4px
     de folga de cada lado. Abaixo de 26px o rotulo comeca a colar as bordas.
     Em ecra tactil isto e ignorado — a regra de baixo poe 44px. */
  min-height: 28px;
  /* Todos com a mesma largura, seja qual for a etiqueta: numa linha de accoes
     botoes de tamanhos diferentes leem-se como importancias diferentes, e nao
     sao. 84px e o minimo real, medido no catalogo: e o que o rotulo mais longo
     ("Check out") ocupa com este espacamento e o icone ao tamanho do texto.
     Abaixo disto so tirando o icone (73px) ou saindo da escala de letra. */
  min-width: 84px;
  gap: 3px;
  /* O .btn traz --radius-md (10px), pensado para botoes de 40px ou mais. Num
     botao de 28px esse canto le-se como capsula e sai do padrao. A escala do
     projecto da --radius-sm aos elementos pequenos — e o mesmo canto das
     etiquetas e da paginacao, que tem esta altura. */
  border-radius: var(--radius-sm);
}
.btn-xs i { font-size: var(--font-size-sm); }

@media (pointer: coarse) {
  .btn-xs {
    min-height: 44px;
    padding: 10px 14px;
  }
}

/* Intencao pela cor, com a mesma forma: contornado por defeito, cheio quando
   e a accao provavel. Verde = entrar, vermelho = sair ou recusar. */
.btn-success {
  background-color: var(--color-bg);
  color: var(--color-success-strong);
  border: 1px solid var(--color-success-strong);
}
.btn-success:hover { background-color: var(--color-tile-green-bg); }

.btn-danger {
  background-color: var(--color-bg);
  color: var(--color-severity-critical);
  border: 1px solid var(--color-severity-critical);
}
.btn-danger:hover { background-color: var(--color-tile-red-bg); }

/* Fundo esbatido: accoes que nao devem competir pelo olhar com a accao
   provavel, mas que TEM de se ler como botao. Transparente nao serve — sem
   fundo nem contorno, o botao desaparece dentro da linha.
   O cinzento e o do contorno de campos (--color-border-input): da 1.40 de
   diferenca contra a linha de uma lista, e o texto por cima da 7.64.
   Ao passar o rato enche, para nao restar duvida de que e um botao. */
.btn-soft {
  background-color: var(--color-border-input);
  color: var(--color-text);
  border: 1px solid var(--color-border-input);
}
.btn-soft:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

/* A accao provavel fica cheia — uma so por linha */
.btn-filled.btn-success {
  background-color: var(--color-success-strong);
  color: #FFFFFF;
}
.btn-filled.btn-success:hover { background-color: #126B33; }
.btn-filled.btn-danger {
  background-color: var(--color-severity-critical);
  color: #FFFFFF;
}
.btn-filled.btn-danger:hover { background-color: var(--color-severity-critical-hover); }

/* ------------------------------------------------------------
   12. Tables
   ------------------------------------------------------------ */
table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: var(--color-input-bg);
  border-bottom: 1px solid var(--color-border);
}

thead th {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: 0.3px;
}

th, td {
  padding: 10px 16px;
  text-align: left;
}

tbody tr {
  border-bottom: 1px solid var(--color-surface);
}

tbody tr:hover {
  background-color: var(--color-input-bg);
}

/* ------------------------------------------------------------
   13. Badges
   ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.5;
}

.badge-success {
  background-color: #DCFCE7;
  color: #166534;
}

.badge-gray {
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
}

/* Saida de um movimento (a par da .badge-success, que marca a entrada).
   Nao confundir com .badge-gray, que marca o ESTADO 'checked out'. */
.badge-exit {
  background-color: var(--color-tile-red-bg);
  color: var(--color-severity-critical);
}

.badge-severity-low {
  background-color: var(--color-surface);
  color: var(--color-severity-low);
}

.badge-severity-medium {
  background-color: #FFFBEB;
  color: #92400E;
}

.badge-severity-high {
  background-color: #FEF2F2;
  color: #991B1B;
}

.badge-severity-critical {
  background-color: var(--color-severity-critical);
  color: #FFFFFF;
  animation: pulse 2s infinite;
}

/* ------------------------------------------------------------
   14. Alerts
   ------------------------------------------------------------ */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.alert-success {
  background-color: #F0FDF4;
  color: #166534;
}

.alert-error {
  background-color: #FEF2F2;
  color: #991B1B;
}

.alert-warning {
  background-color: #FFFBEB;
  color: #92400E;
}

.alert-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: inherit;
  opacity: 0.6;
  padding: 0;
  line-height: 1;
}

.alert-close:hover {
  opacity: 1;
}

/* ------------------------------------------------------------
   15. Modal
   ------------------------------------------------------------ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 200;
}

.modal.active {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.modal-content {
  background-color: var(--color-bg);
  border-radius: var(--radius-xl);
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

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

.modal-header h3 {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  background-color: var(--color-input-bg);
}

/* ------------------------------------------------------------
   16. Pagination
   ------------------------------------------------------------ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-input-bg);
}

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

.pagination-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-links a,
.pagination-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg);
  transition: background-color 0.15s;
}

.pagination-links a:hover {
  background-color: var(--color-surface);
}

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

/* ------------------------------------------------------------
   17. Movement & Incident Lists
   ------------------------------------------------------------ */
.movement-list,
.incident-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.movement-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background-color: var(--color-input-bg);
  border-radius: var(--radius-md);
}

.movement-name { font-weight: 700; }

.movement-room,
.movement-method,
.movement-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.incident-card {
  padding: 8px 10px;
  border-radius: var(--radius-md);
}

.incident-low {
  background-color: var(--color-bg);
}

.incident-medium {
  background-color: #FFFBEB;
}

.incident-high {
  background-color: #FEF2F2;
}

.incident-critical {
  background-color: #FEF2F2;
  animation: pulse 2s infinite;
}

.incident-title {
  font-size: 12px;
  font-weight: 700;
}

.incident-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------
   18. Dashboard Grid
   ------------------------------------------------------------ */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* ------------------------------------------------------------
   19. Error Pages
   ------------------------------------------------------------ */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--color-surface);
}

.error-container {
  text-align: center;
}

.error-container h1 {
  font-size: var(--font-size-hero);
  font-weight: 700;
  color: var(--color-text-secondary);
  line-height: 1;
}

.error-container p {
  color: var(--color-text-secondary);
  margin: 12px 0;
}

/* ------------------------------------------------------------
   20. Utility Classes
   ------------------------------------------------------------ */
.text-muted { color: var(--color-text-secondary); }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.hidden { display: none !important; }

/* ------------------------------------------------------------
   21. Animations
   ------------------------------------------------------------ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pulse {
  animation: pulse 2s infinite;
}

/* ------------------------------------------------------------
   22. Responsive - Tablet (max-width: 1023px)
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ------------------------------------------------------------
   23. Responsive - Mobile (max-width: 767px)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .sidebar {
    transform: translateX(-100%);
    position: fixed;
    width: 260px;
    transition: transform 0.3s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.visible {
    display: block;
  }

  .sidebar-close {
    display: block;
  }

  .main-content {
    margin-left: 0;
  }

  .hamburger {
    display: flex;
  }

  .content-header-bar {
    padding: 10px 16px;
  }

  .header-search {
    display: none;
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .content-body {
    padding: var(--space-2);
  }
}

/* ------------------------------------------------------------
   24. Print Styles
   ------------------------------------------------------------ */
@media print {
  .sidebar,
  .content-header-bar,
  .hamburger,
  .sidebar-overlay {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  body {
    background: #FFFFFF;
  }
}

/* === Top Header Bar === */
.top-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    min-height: 56px;
}

.header-search {
    flex: 1;
    max-width: 420px;
}
.header-search .search-input {
    width: 100%;
    padding: 0.5rem 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    font-size: 0.875rem;
    color: #374151;
}
.header-search .search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
}
.header-search .search-input::placeholder {
    color: #9ca3af;
}

.header-location {
    margin-left: auto;
}
.location-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    min-width: 160px;
}
.location-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

@media (max-width: 768px) {
    .top-header .hamburger { display: flex; }
    .header-search { max-width: none; }
}

/* Choices.js Premium Overrides (Golden Ratio Theme) */
.choices {
  margin-bottom: 0;
}
.choices__inner {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background-color: var(--color-input-bg) !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-base) !important;
  padding: 0 36px 0 16px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.3s ease !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}
.choices__inner .choices__item,
.choices__placeholder,
.is-placeholder {
  opacity: 1 !important;
  color: var(--color-text) !important;
}
.choices[data-type*="select-one"]::after {
  content: "";
  height: 24px;
  width: 24px;
  right: 14px;
  top: 50% !important;
  margin-top: -12px !important;
  border: none !important;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232c3e50%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
  pointer-events: none;
}
.choices[data-type*="select-one"].is-open::after {
  transform: rotate(180deg);
  margin-top: -12px !important;
}
.choices.is-focused.is-open .choices__inner {
  border-color: var(--color-primary) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.choices.is-focused .choices__inner {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(91, 107, 122, 0.15) !important;
}
/* Dropdown List */
.choices__list--dropdown {
  border: 1px solid var(--color-border) !important;
  border-top: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  background: var(--color-bg) !important;
  z-index: 99 !important;
  padding: 8px 0 !important;
  word-break: break-word !important;
}
/* Dropdown Items */
.choices__list--dropdown .choices__item {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-base) !important;
  color: var(--color-text) !important;
  padding: 10px 16px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--color-surface) !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

/* File picker: the browser draws its native button in the language of the
   browser, not of the app. The real input is hidden and this button and
   file name take its place, so the screen stays in one language. */
.file-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.file-field .file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.file-field .file-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--font-size-md);
}
.file-field .file-name {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  word-break: break-word;
  min-width: 0;
}
.file-field .file-input:focus-visible + .file-button {
  box-shadow: 0 0 0 3px rgba(91, 107, 122, 0.25);
}

/* Location switcher: the open list widens to the longest site name so a name
   never breaks into two lines. It hangs from the right edge to stay on
   screen, and only wraps if a name is wider than the screen itself. */
.header-location .choices__list--dropdown {
  width: auto !important;
  min-width: 100% !important;
  max-width: calc(100vw - 32px) !important;
  left: auto !important;
  right: 0 !important;
}
.header-location .choices__list--dropdown .choices__item {
  white-space: nowrap !important;
}

/* Flatpickr Premium Overrides (Golden Ratio Theme) */
.flatpickr-calendar {
  font-family: var(--font-family) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
  background: var(--color-bg) !important;
  padding: 16px !important;
  width: auto !important; /* Evita que os dias fiquem espremidos */
}
.flatpickr-innerContainer {
  /* Pushes the day grid away from the month/year header */
}

/* Header Month / Arrows */
.flatpickr-months .flatpickr-month {
  color: var(--color-text) !important;
  fill: var(--color-text) !important;
  height: 36px !important;
}
.flatpickr-current-month {
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 800 !important;
  font-size: 17px !important;
  color: var(--color-text) !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
}

/* Year Input Fixes */
.flatpickr-current-month .numInputWrapper {
  width: auto !important;
}
.flatpickr-current-month input.cur-year {
  font-family: inherit !important;
  font-weight: 800 !important;
  color: var(--color-text) !important;
  font-size: 17px !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  height: auto !important;
  display: inline-block !important;
}
.flatpickr-current-month input.cur-year:focus {
  outline: none !important;
}
/* Hide the ugly spinner up/down arrows natively */
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  display: none !important;
}

/* Weekday Labels */
.flatpickr-weekday {
  color: var(--color-text-secondary) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}

/* Days Symmetry */
.flatpickr-day {
  color: var(--color-text) !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.2s ease !important;
  /* Golden-ratio spacing between day cells */
  height: 40px !important;
  line-height: 40px !important;
  flex-basis: 40px !important;
  max-width: 40px !important;
}
.flatpickr-day.flatpickr-disabled {
  color: var(--color-text-secondary) !important;
  opacity: 0.4 !important;
}
.flatpickr-day:hover {
  background: var(--color-surface) !important;
  border-color: transparent !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

/* Today Indicator Fix */
.flatpickr-day.today {
  border-color: var(--color-primary) !important;
  border-width: 2px !important;
  color: var(--color-primary) !important;
  font-weight: 800 !important;
  background: rgba(91, 107, 122, 0.05) !important; /* Fundo suave vermelho no tema */
}
.flatpickr-day.today:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* Selected Day */
.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 10px rgba(91, 107, 122, 0.3) !important;
}

/* Prev / Next Arrows */
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  fill: var(--color-text-secondary) !important;
  transition: fill 0.2s ease !important;
  /* Widens the click target while keeping the grid symmetric */
}
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
  fill: var(--color-primary) !important;
}

/* === Nav: Emergency link (inside sidebar-nav) === */
.nav-emergency {
  display: block;
  margin: 16px 12px 8px 12px;
  padding: 10px 14px;
  background-color: var(--color-severity-critical);
  color: #ffffff !important;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(91, 107, 122, 0.35);
}
.nav-emergency:hover {
  background-color: var(--color-severity-critical-hover);
  transform: translateY(-1px);
}
.nav-emergency:active {
  transform: translateY(0);
}

/* Sidebar language toggle removed: the app ships in English only. */

/* ------------------------------------------------------------
   21. Componentes de lista partilhados
   Estavam copiados, iguais linha a linha, nos blocos <style> das paginas
   Activity, Alerts, Incidents, Locations e Residents. Vieram para aqui em
   03/08/2026 (regra dos padroes). Ficam no FIM do ficheiro de proposito:
   e a posicao que ocupavam na cascata, por isso nada muda de aspecto.
   ------------------------------------------------------------ */

/* Etiqueta que identifica o contexto de uma seccao — hoje diz que ponto de
   acesso este ecra esta a servir. Nasceu no terminal em 03/08/2026 e vive
   aqui porque serve qualquer pagina que precise de dizer "estas a ver X". */
.context-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.context-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}
.context-banner-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.context-banner-kicker {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
.context-banner-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.context-banner-aside {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Aviso por baixo de um campo: nao e erro, nao bloqueia — explica a
   consequencia de deixar aquele campo como esta. Nasceu no campo da foto do
   residente em 03/08/2026 (sem foto, o terminal nao desempata homonimos). */
.field-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-tile-amber);
}
.field-warning i { flex-shrink: 0; margin-top: 2px; }

/* Estado vazio de uma lista: icone grande esbatido + mensagem */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    color: var(--color-text-secondary);
}
.empty-state i {
    font-size: 48px;
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

/* Barra de filtros por cima de uma lista.
   16px ate a lista — a mesma distancia que separa duas seccoes. */
.filter-bar {
    margin-bottom: var(--space-3);
}

/* Rodape de paginacao: contagem a esquerda, paginas a direita */
.pagination-container {
    padding: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.pagination-links {
    display: flex;
    gap: 6px;
}
.pagination-links .btn {
    min-width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: var(--font-size-md);
}


/* Tarja de resposta a uma accao: aparece por baixo do que se fez, diz o que
   ficou registado e desaparece sozinha. Nasceu no terminal do ponto de acesso
   (03/08/2026); subiu para aqui quando ganhou tons, porque qualquer ecra de
   accao rapida precisa do mesmo.

   A COR DIZ O QUE ACONTECEU, a mesma linguagem dos botoes:
     .success-flash  entrada registada        verde
     .exit-flash     saida registada          vermelho
     .neutral-flash  recusa, correccao, anulacao   cinzento
     .error-shake    falhou                   vermelho, a abanar */
.station-status {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-align: center;
}
.station-status.success-flash {
    background: var(--color-tile-green-bg);
    color: var(--color-tile-green);
}
.station-status.exit-flash {
    background: var(--color-tile-red-bg);
    color: var(--color-exit);
}
.station-status.neutral-flash {
    background: var(--color-surface);
    color: var(--color-text);
}
.station-status.error-shake {
    background: var(--color-tile-red-bg);
    color: var(--color-severity-critical);
    animation: shake 0.4s ease;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

/* Tabela que nao cabe: o corpo dela desliza na horizontal em vez de empurrar
   a pagina toda. Estava copiado a mao em 6 paginas (uma delas com uma margem
   a mais); subiu para aqui em 03/08/2026, quando a pagina dos cartoes NFC
   precisou dele e nao existia em lado nenhum central. */
.table-responsive {
    overflow-x: auto;
}

/* Confirmacao de uma accao sem volta, dentro da propria pagina: abre por baixo
   do botao, diz o que vai acontecer, pede o motivo e so entao deixa avancar.
   Nasceu no cancelamento de cartoes NFC (03/08/2026). Fundo vermelho esbatido
   porque nao e um formulario qualquer — e o ultimo passo antes de algo que
   nao se desfaz. */
.confirm-panel {
    display: none;
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-tile-red-bg);
}
.confirm-panel.is-open { display: block; }
.confirm-panel .form-control { margin-bottom: var(--space-2); }

/* Estado de um aparelho ligado ao computador (leitor NFC): bolinha de estado,
   o que esta a acontecer, e o botao de accao. Nasceu na pagina dos cartoes. */
.reader-panel {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    flex-wrap: wrap;
}
.reader-dot {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-text-secondary);
}
.reader-panel.is-ready   .reader-dot { background: var(--color-success-strong); }
.reader-panel.is-card    .reader-dot { background: var(--color-primary); }
.reader-panel.is-blocked .reader-dot { background: var(--color-severity-critical); }
.reader-panel.is-off     .reader-dot { background: var(--color-border-input); }
.reader-text  { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.reader-title { font-weight: 700; color: var(--color-text); }
.reader-sub   { font-size: var(--font-size-sm); color: var(--color-primary); }

/* ── Linha de pessoa com accoes ────────────────────────────────────────
   Uma pessoa numa linha: foto, quem e, e os botoes de decisao encostados a
   direita. Nasceu nos resultados do terminal e passou a servir tambem a fila
   de tags encostadas ao leitor. Ficha em public/design.html.
   Veio do bloco <style> de app/Views/kiosk/station.php em 04/08/2026, sem
   mudar uma declaracao — repetia-se em dois sitios da mesma pagina. */
.res-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-input-bg);
    box-shadow: inset 0 0 0 1px var(--color-border);
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.res-photo {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-text-secondary);
}
.res-info { flex: 1; min-width: 160px; }
.res-name { font-size: var(--font-size-md); font-weight: 600; color: var(--color-text); }
.res-meta {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: 2px;
}
/* Coluna da direita: a informacao que ajuda a decidir por cima, os botoes por
   baixo, os dois encostados a direita. */
.res-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-left: auto;
}
.res-last {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: right;
}
.res-last strong { color: var(--color-text); font-weight: 600; }

/* Os botoes vem do sistema (.btn-xs e as variantes de cor); aqui so se diz
   como se arrumam na linha. */
.res-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Realce do pedaco que bateu com a pesquisa */
.res-row mark {
    background: var(--color-tile-amber-bg);
    color: var(--color-tile-amber);
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 700;
}
/* Etiqueta que diz PORQUE e que esta linha apareceu */
.match-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-text-secondary);
    vertical-align: middle;
}
/* Homonimos: o nome sozinho nao chega para decidir */
.res-row.is-ambiguous { box-shadow: inset 0 0 0 1px var(--color-warning-strong); }
.same-name-warning {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-tile-amber);
}

/* Painel do motivo, dentro da propria linha. Recusar e anular pedem sempre
   uma razao antes de confirmar. */
.reason-panel {
    flex-basis: 100%;
    display: none;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    padding-top: var(--space-2);
    margin-top: var(--space-2);
    border-top: 1px dashed var(--color-border-input);
}
.reason-panel.is-open { display: flex; }
.reason-panel select { flex: 1; min-width: 180px; margin: 0; }
.reason-panel .hint {
    flex-basis: 100%;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* ── Fila de decisoes pendentes ────────────────────────────────────────
   Coisas que aconteceram sozinhas e que ficam a espera de uma pessoa. Nasceu
   com as tags NFC encostadas ao leitor do ponto de acesso: enquanto o
   funcionario faz outra coisa, os toques empilham-se aqui e nenhum se perde.
   So aparece quando ha alguma coisa por decidir. */
.pending-queue {
    padding: var(--space-2);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-tile-amber-bg);
}
.pending-queue-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}
.pending-queue-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--color-text);
}
.pending-queue-count {
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--color-warning-strong);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
}
.pending-queue-hint {
    flex-basis: 100%;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
/* A linha e a mesma `.res-row`; a pastilha e que diz que ainda esta por
   decidir. Fundo branco dentro do painel ambar, para a linha se ler. */
.pending-queue .res-row { background: var(--color-bg); margin-bottom: var(--space-2); }
.pending-queue .res-row:last-child { margin-bottom: 0; }
.pending-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-warning-strong);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
}
/* Duas gravidades, porque nao sao a mesma coisa:
   · is-alarm — alguem tentou passar com uma tag roubada, perdida ou
     falsificada. Fundo vermelho cheio, para saltar a vista de longe.
   · is-warn  — a tag nao serve mas nao acusa ninguem: expirada, sem dono,
     de outro hotel. Contorno ambar, sem alarme.
   Distinguem-se pelo fundo e pelo icone — nunca por barra a esquerda. */
.res-row.is-alarm {
    background: var(--color-tile-red-bg);
    box-shadow: inset 0 0 0 1px var(--color-severity-critical);
}
.pending-queue .res-row.is-alarm { background: var(--color-tile-red-bg); }
.res-row.is-alarm .res-photo {
    background: var(--color-severity-critical);
    color: #fff;
    font-size: var(--font-size-lg);
}
.res-row.is-alarm .res-name { color: var(--color-severity-critical); }

.res-row.is-warn { box-shadow: inset 0 0 0 1px var(--color-warning-strong); }
.res-row.is-warn .res-photo {
    background: var(--color-tile-amber-bg);
    color: var(--color-warning-strong);
    font-size: var(--font-size-lg);
}
.res-row.is-warn .res-name { color: var(--color-warning-strong); }