/* ==========================================================================
   Safety Huddle HSE — Design System
   Paleta teal (marca HSE) com profundidade em verde-floresta.
   ========================================================================== */

:root {
  /* Teal — cor da marca */
  --teal-50:#eef7f6; --teal-100:#d9eeed; --teal-200:#bbe0df; --teal-300:#92cccb;
  --teal-400:#5cabaa; --teal-500:#469b9a; --teal-600:#388483; --teal-700:#2f6d6c;

  /* Acentos da paleta secundária */
  --forest:#2a4736; --forest-700:#21392b; --sage:#688f77; --coral:#f2754c; --cream:#fcf6e8;

  /* Identidade das UTIs (distinta da cor do app) */
  --geral:#1e9e73; --geral-ink:#157a58; --geral-tint:#e1f4ec; --geral-border:#b6e3d2;  /* UTI Geral — esmeralda */
  --cir:#3f5a86;   --cir-ink:#3f5a86;   --cir-tint:#e9eef6;   --cir-border:#c7d3e6;     /* UTI Cirúrgica — azul */

  /* Neutros */
  --ink:#212829; --muted:#697074; --faint:#99a1a6;
  --line:#e4e9ea; --line-strong:#cfd7d8;
  --bg:#f3f6f6; --surface:#ffffff;

  /* Semânticos */
  --danger:#d83a3a; --danger-bg:#fdecec; --danger-border:#f5c6c6;
  --warn:#c97a1f; --warn-bg:#fbf1e3;
  --ok:#2f9e6f; --ok-bg:#e6f5ee;

  /* Elevação / forma */
  --shadow-sm:0 1px 2px rgba(16,40,40,.06), 0 1px 3px rgba(16,40,40,.05);
  --shadow:0 6px 20px rgba(16,40,40,.09);
  --shadow-lg:0 16px 40px rgba(16,40,40,.16);
  --radius:14px; --radius-sm:10px; --radius-lg:22px; --radius-pill:999px;

  --header-h:66px;
  --container:1180px;
  --font:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  font-size:15px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img, svg { display:block; max-width:100%; }
a { color:var(--teal-600); text-decoration:none; }
a:hover { color:var(--teal-700); }
button { font:inherit; cursor:pointer; }
h1,h2,h3,h4 { line-height:1.2; font-weight:700; color:var(--ink); }

/* Fundo decorativo sutil */
body::before {
  content:""; position:fixed; inset:0 0 auto 0; height:340px; z-index:-1;
  background:
    radial-gradient(900px 340px at 12% -40%, rgba(92,171,170,.18), transparent 60%),
    radial-gradient(700px 300px at 95% -60%, rgba(42,71,54,.10), transparent 60%);
}

/* ==========================================================================
   Cabeçalho / navegação
   ========================================================================== */
.appbar {
  position:sticky; top:0; z-index:50; isolation:isolate;
  color:#fff;
  background:
    radial-gradient(130% 210% at 90% -70%, rgba(92,171,170,.20), transparent 55%),
    linear-gradient(100deg, #14302600 0%, transparent 100%),
    linear-gradient(100deg, #153026 0%, #21453a 52%, #28564799 100%, #285647 100%);
  background-color:#1c3e32;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(13,32,26,.26);
  border-bottom:1px solid rgba(255,255,255,.06);
}
/* fio de destaque teal (a marca como acento, não como fundo) */
.appbar::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent 6%, rgba(92,171,170,.55) 38%, rgba(146,204,203,.9) 50%, rgba(92,171,170,.55) 62%, transparent 94%);
}
.appbar__inner {
  max-width:var(--container); margin:0 auto; height:var(--header-h);
  display:flex; align-items:center; gap:18px; padding:0 20px;
}
.brand { display:flex; align-items:center; gap:11px; color:#fff; font-weight:700; letter-spacing:.2px; }
.brand:hover { color:#fff; }
.brand__mark {
  width:38px; height:38px; border-radius:11px; flex:none;
  background:linear-gradient(150deg, rgba(146,204,203,.28), rgba(92,171,170,.12));
  border:1px solid rgba(146,204,203,.32); color:#cdeeed;
  display:grid; place-items:center; backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.brand__mark svg { width:21px; height:21px; }
.brand__text { display:flex; flex-direction:column; line-height:1.05; }
.brand__text b { font-size:15px; }
.brand__text span { font-size:11px; font-weight:500; color:rgba(255,255,255,.72); letter-spacing:.3px; }

.nav { display:flex; align-items:center; gap:4px; margin-left:6px; }
.nav a {
  display:inline-flex; align-items:center; gap:8px;
  color:rgba(255,255,255,.82); padding:9px 15px; border-radius:var(--radius-pill);
  font-weight:600; font-size:14px; transition:.16s; white-space:nowrap;
}
.nav a svg { width:17px; height:17px; opacity:.9; }
.nav a:hover { background:rgba(255,255,255,.12); color:#fff; }

.appbar__spacer { flex:1; }

.user { display:flex; align-items:center; gap:11px; }
.user__meta { text-align:right; line-height:1.15; }
.user__meta b { display:block; font-size:13.5px; font-weight:600; }
.user__meta span { font-size:11.5px; color:rgba(255,255,255,.7); }
.avatar {
  width:38px; height:38px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-weight:700; font-size:13px; display:none; place-items:center;  /* oculto no desktop */
}
.user__logout {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(146,204,203,.14); color:#cdeeed; border:1px solid rgba(146,204,203,.32);
  padding:8px 13px; border-radius:var(--radius-pill); font-weight:600; font-size:13px; transition:.16s;
}
.user__logout:hover { background:rgba(146,204,203,.24); color:#fff; border-color:rgba(146,204,203,.5); }
.user__logout svg { width:16px; height:16px; }

/* Navegação inferior (mobile) */
.botnav { display:none; }

/* ==========================================================================
   Layout / containers
   ========================================================================== */
.container { max-width:var(--container); margin:0 auto; padding:26px 20px 64px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.page-head h1 { font-size:25px; letter-spacing:-.3px; }
.page-head p { color:var(--muted); font-size:14px; margin-top:3px; }
.page-head__actions { display:flex; gap:10px; flex-wrap:wrap; }
.eyebrow { text-transform:uppercase; letter-spacing:1.4px; font-size:11px; font-weight:700; color:var(--teal-600); }

/* ==========================================================================
   Botões
   ========================================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 17px; border-radius:var(--radius-pill); border:1px solid transparent;
  font-weight:600; font-size:14px; line-height:1; transition:.16s; white-space:nowrap;
  background:var(--surface); color:var(--ink); border-color:var(--line-strong);
}
.btn svg { width:17px; height:17px; }
.btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn:active { transform:translateY(0); }
.btn:focus-visible { outline:3px solid var(--teal-200); outline-offset:1px; }
.btn-primary { background:#fff; color:var(--teal-700); border:2px solid var(--teal-400); box-shadow:none; }
.btn-primary:hover { background:var(--teal-50); color:var(--teal-700); border-color:var(--teal-500); }
.btn-forest { background:var(--forest); color:#fff; border-color:var(--forest); }
.btn-forest:hover { background:var(--forest-700); color:#fff; }
.btn-ghost { background:transparent; border-color:transparent; color:var(--muted); }
.btn-ghost:hover { background:#fff; color:var(--ink); }
.btn-outline { background:#fff; border-color:var(--line-strong); color:var(--ink); }
.btn-outline:hover { border-color:var(--teal-400); color:var(--teal-700); }
.btn-danger { background:#fff; color:var(--danger); border-color:var(--danger-border); }
.btn-danger:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-sm { padding:7px 12px; font-size:13px; }
.btn-lg { padding:13px 24px; font-size:15.5px; }
.btn-block { width:100%; }
.btn[disabled] { opacity:.55; pointer-events:none; }

/* ==========================================================================
   Cartões
   ========================================================================== */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card__head { padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card__head h2 { font-size:16px; }
.card__head .sub { color:var(--muted); font-size:13px; font-weight:500; }
.card__body { padding:22px; }

/* ==========================================================================
   Formulários
   ========================================================================== */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field > label { font-size:13px; font-weight:600; color:var(--ink); }
.field .hint { font-size:12px; color:var(--faint); }
.input, .select, .textarea {
  width:100%; padding:11px 13px; font:inherit; color:var(--ink);
  background:#fff; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  transition:.15s; appearance:none;
}
.input:focus, .select:focus, .textarea:focus {
  outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3.5px var(--teal-100);
}
.textarea { resize:vertical; min-height:84px; line-height:1.55; }
.select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697074' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:38px;
}
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }

/* ==========================================================================
   Badges / pílulas de unidade e status
   ========================================================================== */
.badge {
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:700; letter-spacing:.2px; white-space:nowrap;
}
.badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.85; }
.badge-geral { background:var(--geral-tint); color:var(--geral-ink); }
.badge-cirurgica { background:var(--cir-tint); color:var(--cir-ink); }
.badge-cancel { background:var(--danger-bg); color:var(--danger); }
.badge-soft { background:var(--bg); color:var(--muted); }
.badge-cancel::before { background:var(--danger); }

/* ==========================================================================
   Flash messages
   ========================================================================== */
.flash-stack { position:fixed; top:calc(var(--header-h) + 14px); right:20px; z-index:120; display:flex; flex-direction:column; gap:10px; max-width:380px; }
.flash {
  display:flex; gap:11px; align-items:flex-start; padding:13px 15px; border-radius:var(--radius-sm);
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--muted);
  box-shadow:var(--shadow); font-size:14px; animation:flashIn .28s ease both;
}
.flash svg { width:19px; height:19px; flex:none; margin-top:1px; }
.flash-success { border-left-color:var(--ok); } .flash-success svg { color:var(--ok); }
.flash-error { border-left-color:var(--danger); } .flash-error svg { color:var(--danger); }
.flash-info { border-left-color:var(--teal-500); } .flash-info svg { color:var(--teal-500); }
.flash-warn { border-left-color:var(--warn); } .flash-warn svg { color:var(--warn); }
.flash__close { margin-left:auto; background:none; border:none; color:var(--faint); font-size:18px; line-height:1; padding:0 2px; }
@keyframes flashIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }

/* ==========================================================================
   Tabela / listagem
   ========================================================================== */
.table-wrap { overflow-x:auto; border-radius:var(--radius); }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table thead th {
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); font-weight:700; padding:13px 16px; border-bottom:1px solid var(--line);
  background:var(--bg); white-space:nowrap;
}
.table tbody td { padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tbody tr { transition:background .12s; }
.table tbody tr:hover { background:var(--teal-50); }
.table tbody tr:last-child td { border-bottom:none; }
.table .col-actions { text-align:right; white-space:nowrap; }
.row-actions { display:inline-flex; gap:6px; justify-content:flex-end; }
.icon-btn {
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line-strong); color:var(--muted); transition:.15s;
}
.icon-btn svg { width:16px; height:16px; }
.icon-btn:hover { border-color:var(--teal-400); color:var(--teal-700); background:var(--teal-50); }
.icon-btn.danger:hover { border-color:var(--danger); color:var(--danger); background:var(--danger-bg); }

/* Linha cancelada — feedback fino e elegante */
tr.is-cancelled td { color:var(--faint); }
tr.is-cancelled td:first-child { box-shadow:inset 3px 0 0 var(--coral); }
.cancel-tag {
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  color:var(--coral); background:#fdeee7; padding:2px 8px; border-radius:var(--radius-pill); margin-left:8px;
}
.cancel-tag svg { width:12px; height:12px; }
.strike { text-decoration:line-through; text-decoration-color:var(--line-strong); }

/* Tabela vira cards no mobile — [UTI | data] / [REGISTRADO POR + nome | ações] */
@media (max-width:720px) {
  .container { padding-left:14px; padding-right:14px; }
  .table--cards thead { display:none; }
  .table--cards, .table--cards tbody { display:block; }
  .table--cards tr {
    display:grid; grid-template-columns:minmax(0,1fr) 140px; align-items:center; column-gap:8px;
    background:#fff; border:1px solid var(--line); border-radius:14px;
    margin-bottom:10px; padding:12px 13px; box-shadow:var(--shadow-sm);
  }
  .table--cards tbody tr:hover { background:#fff; }
  .table--cards td { display:block; border:none !important; padding:0; min-width:0; }
  .table--cards td:first-child { justify-self:start; }                          /* UTI */
  .table--cards td:nth-child(2) { justify-self:end; text-align:right; color:var(--muted); font-size:11.5px; white-space:nowrap; } /* data */
  .table--cards td.col-creator {
    font-weight:600; color:var(--ink); font-size:14px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;        /* nome em uma linha */
  }
  .table--cards td.col-actions { justify-self:end; }
  .table--cards .col-creator::before {
    content:"Registrado por"; display:block; font-size:10px; letter-spacing:.5px; font-weight:700;
    text-transform:uppercase; color:var(--faint); margin-bottom:2px; white-space:nowrap;
  }
  .row-actions { justify-content:flex-end; gap:5px; }
  .row-actions .icon-btn { width:30px; height:30px; }
  .row-actions .icon-btn svg { width:15px; height:15px; }
  /* Cancelado: data riscada em coral + borda + tom quente — não altera tamanho/alinhamento */
  .table--cards .cancel-tag { display:none; }
  .table--cards tr.is-cancelled { border-left:3px solid var(--coral); background:#fffaf8; }
  .table--cards tr.is-cancelled td:first-child { box-shadow:none; }
  .table--cards tr.is-cancelled td:nth-child(2),
  .table--cards tr.is-cancelled td:nth-child(2) .muted { color:var(--coral); }
  .table--cards tr.is-cancelled .strike { text-decoration-color:var(--coral); }
}

/* ==========================================================================
   Paginação
   ========================================================================== */
.pager { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; flex-wrap:wrap; }
.pager__info { color:var(--muted); font-size:13px; }
.pager__pages { display:flex; gap:6px; align-items:center; }
.pager__pages a, .pager__pages span {
  min-width:36px; height:36px; padding:0 10px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:600; border:1px solid var(--line); background:#fff; color:var(--muted);
}
.pager__pages a:hover { border-color:var(--teal-400); color:var(--teal-700); }
.pager__pages .is-current { background:var(--teal-500); border-color:var(--teal-500); color:#fff; }
.pager__pages .gap { border:none; background:none; }

/* ==========================================================================
   Toolbar de filtros
   ========================================================================== */
.toolbar { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.toolbar .field { margin-bottom:0; }
.toolbar .field--grow { flex:1; min-width:150px; }
/* Switch elegante — ex.: "Mostrar cancelados" (desligado por padrão) */
.switch {
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
  padding:8px 15px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line-strong); background:#fff; transition:.18s;
}
.switch:hover { border-color:var(--coral); }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch__track {
  position:relative; flex:none; width:40px; height:23px; border-radius:999px;
  background:var(--line-strong); transition:background .2s;
}
.switch__thumb {
  position:absolute; top:2.5px; left:2.5px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(16,40,40,.32); transition:transform .2s cubic-bezier(.3,.8,.4,1.4);
}
.switch__label { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--muted); transition:color .18s; }
.switch__label svg { width:15px; height:15px; }
.switch:has(input:checked) { border-color:var(--coral); background:#fdeee7; }
.switch:has(input:checked) .switch__track { background:var(--coral); }
.switch:has(input:checked) .switch__thumb { transform:translateX(17px); }
.switch:has(input:checked) .switch__label { color:var(--coral); }
.switch:focus-within { box-shadow:0 0 0 3px rgba(242,117,76,.22); }

/* ==========================================================================
   Estados vazios
   ========================================================================== */
.empty { text-align:center; padding:54px 20px; color:var(--muted); }
.empty svg { width:46px; height:46px; color:var(--teal-300); margin:0 auto 14px; }
.empty h3 { font-size:17px; margin-bottom:5px; }
.empty p { font-size:14px; max-width:380px; margin:0 auto 18px; }

/* ==========================================================================
   Utilidades
   ========================================================================== */
.muted { color:var(--muted); }
.text-sm { font-size:13px; }
.flex { display:flex; } .items-center { align-items:center; } .gap-2 { gap:8px; } .gap-3 { gap:12px; }
.mt-3 { margin-top:12px; } .mt-4 { margin-top:18px; } .mb-0 { margin-bottom:0; }
.hide { display:none !important; }
@media (max-width:720px) { .hide-mobile { display:none !important; } }

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-backdrop {
  position:fixed; inset:0; z-index:200; background:rgba(20,34,32,.46); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:20px; animation:fade .2s ease both;
}
.modal-backdrop.open { display:flex; }
.modal {
  width:100%; max-width:460px; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  overflow:hidden; animation:pop .22s cubic-bezier(.2,.9,.3,1.2) both;
}
.modal__head { padding:20px 22px 0; }
.modal__head h3 { font-size:18px; display:flex; align-items:center; gap:9px; }
.modal__head .ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; }
.modal__body { padding:14px 22px 6px; color:var(--muted); font-size:14px; }
.modal__body .input, .modal__body .textarea { color:var(--ink); }
.modal__foot { padding:16px 22px 20px; display:flex; gap:10px; justify-content:flex-end; }
.modal__head .ic svg { width:18px; height:18px; }
.modal-meta { font-size:13px; font-weight:600; color:var(--ink); background:var(--bg);
  border-radius:8px; padding:8px 12px; margin:4px 0 14px; }
.modal .textarea { width:100%; min-height:96px; }
.counter { font-size:12px; color:var(--faint); margin-top:6px; text-align:right; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes pop { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width:860px) {
  .nav { display:none; }
  .user__meta { display:none; }
  .avatar { display:grid; }   /* no mobile o avatar volta como referência do usuário */
  .botnav {
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:#fff; border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(16,40,40,.08);
    padding:6px max(env(safe-area-inset-left),8px) calc(6px + env(safe-area-inset-bottom)) max(env(safe-area-inset-right),8px);
  }
  .botnav a {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 4px;
    color:var(--muted); font-size:11px; font-weight:600; border-radius:12px;
  }
  .botnav a svg { width:21px; height:21px; }
  .botnav a.is-active { color:var(--teal-600); background:var(--teal-50); }
  .container { padding-bottom:88px; }
  .flash-stack { left:14px; right:14px; max-width:none; top:calc(var(--header-h) + 10px); }
}
@media (max-width:520px) {
  .page-head h1 { font-size:21px; }
  .brand__text span { display:none; }
}