/* Tema OFFICE CONT (claro + azul) */
:root{
  --bg: #dfe9f5;            /* fundo azulado claro */
  --panel: #ffffff;         /* cartões/painéis brancos */
  --border: #d6deea;        /* bordas suaves */
  --text: #0f1b2d;          /* texto primário (azul marinho) */
  --muted: #5e6e85;         /* texto secundário */
  --accent: #0b6edc;        /* azul principal (botões, foco) */
  --accent-ink: #ffffff;    /* texto sobre o accent */
  --accent-hover: #095bb5;  /* hover do botão primário */
  --row-hover: #eef4fb;     /* hover da linha da lista */
  --input-bg: #ffffff;      /* campos */
  --input-border: #cfd9e8;
  --danger: #e11d48;        /* botão perigoso */
  --ok-bg: #e7f6f2;         /* badge OK bg */
  --ok-border: #b7e3d9;
  --ok-ink: #0f766e;
  --warn-bg: #fdecec;       /* badge WARN bg */
  --warn-border: #f5b5b5;
  --warn-ink: #b42318;
}

* { box-sizing: border-box; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
}

/* Topbar clara, com leve sombra como no seu app */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  background:transparent;
  position:sticky; top:0; z-index:5;
}
.topbar h1{ font-size:22px; margin:0; color:#123765; }
.topbar .actions{ display:flex; gap:12px; align-items:center; }
.topbar button{
  background:var(--accent); color:var(--accent-ink);
  border:none; padding:10px 14px; border-radius:12px; cursor:pointer;
  font-weight:600;
}
.topbar button:hover{ background:var(--accent-hover); }
.topbar input[type=search]{
  background:var(--input-bg); color:var(--text);
  border:1px solid var(--input-border);
  padding:10px 12px; border-radius:12px; min-width:280px;
  box-shadow: 0 1px 0 rgba(16,24,40,.02);
}

.container{ display:flex; gap:16px; padding:16px; }

/* Lista com cartões brancos e borda suave */
.list{
  flex:1 1 60%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  box-shadow: 0 2px 10px rgba(21, 31, 53, 0.05);
}
.list-header, .row{
  display:grid; grid-template-columns: 1fr 120px 120px;
  gap:12px; padding:12px 16px; align-items:center;
}
.list-header{
  background:#f4f7fc; color:#223a5f; font-weight:700;
  border-bottom:1px solid var(--border);
}
.row{
  border-top:1px solid var(--border); cursor:pointer; background:#fff;
}
.row:hover{ background:var(--row-hover); }

/* Badges claras */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--border); background:#f8fafc; color:#274060;
}
.badge.ok{ background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok-ink); }
.badge.warn{ background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-ink); }

.empty-state{ padding:20px; color:var(--muted); }

/* Painel de detalhe */
.detail-panel{
  flex:1 1 40%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px; padding:12px 16px;
  height: calc(100vh - 120px); position:sticky; top:88px; overflow:auto;
  box-shadow: 0 2px 10px rgba(21, 31, 53, 0.05);
}
.hidden{ display:none; }
.detail-header{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border); padding-bottom:8px; margin-bottom:12px;
}
.detail-header h2{ font-size:18px; margin:6px 0; color:#123765; }
.detail-header button{
  background:#f0f4fb; color:#355a8a;
  border:1px solid var(--border); border-radius:10px;
  padding:6px 10px; cursor:pointer;
}

.meta .badge-row{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.meta select{
  background:var(--input-bg); color:var(--text);
  border:1px solid var(--input-border); border-radius:10px; padding:6px 10px;
}

/* Campos */
.fields h3, .occurrences h3{ margin:12px 0; font-size:14px; color:#274060; }
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field input, .field select, textarea{
  background:var(--input-bg); color:var(--text);
  border:1px solid var(--input-border); border-radius:10px; padding:10px 12px;
}
.field input:focus, .field select:focus, textarea:focus{
  outline:2px solid rgba(11,110,220,.15);
  border-color:#9cc3f7;
}

/* Botões */
.buttons{ display:flex; gap:10px; margin-top:10px; }
.buttons .danger{
  background:var(--danger); color:#fff;
  border:none; padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:600;
}
.buttons button:not(.danger){
  background:var(--accent); color:var(--accent-ink);
  border:none; padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:600;
}
.buttons button:not(.danger):hover{ background:var(--accent-hover); }

/* Ocorrências */
.occ-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.occ-item{
  border:1px solid var(--border); border-radius:12px; padding:10px; background:#fff;
}
.occ-item header{ display:flex; gap:8px; align-items:center; justify-content:space-between; color:#274060; font-size:14px; }
.occ-item p{ margin:8px 0 0 0; color:#334b6a; }
.occ-item a{ color:var(--accent); text-decoration:none; }

/* Modal */
dialog::backdrop{ background: rgba(0,0,0,.35); }
dialog{
  border:none; border-radius:16px; padding:0; background:var(--panel); color:var(--text);
  width: min(820px, 96vw); box-shadow: 0 12px 40px rgba(16,24,40,.18);
}
.modal-content{ padding:16px; }
.modal-content h3{ margin:0 0 12px 0; color:#123765; }
.modal-content .grid{ grid-template-columns: 1fr 1fr; }
.modal-content menu{ display:flex; gap:12px; justify-content:flex-end; padding-top:12px; }
.modal-content button{
  background:var(--accent); color:var(--accent-ink);
  border:none; padding:10px 12px; border-radius:12px; cursor:pointer;
}
.modal-content button[value="cancel"]{
  background:#e6eef8; color:#274060;
  border:1px solid var(--border);
}