:root {
  --navy:#173653;
  --blue:#28628f;
  --light:#f3f6f8;
  --border:#d8e1e8;
  --green:#247a45;
  --red:#b42318;
  --amber:#986400;
  --text:#1f2937;
  --muted:#667085;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,system-ui,-apple-system,sans-serif; background:var(--light); color:var(--text); display:flex; min-height:100vh; }
.sidebar { width:220px; background:var(--navy); color:white; padding:22px 14px; position:fixed; inset:0 auto 0 0; overflow:auto; }
.brand { font-size:26px; font-weight:800; }
.subtitle { opacity:.78; font-size:12px; margin-bottom:24px; }
.nav { width:100%; border:0; background:transparent; color:white; padding:10px 12px; margin:3px 0; border-radius:8px; text-align:left; cursor:pointer; font-size:14px; }
.nav:hover,.nav.active { background:rgba(255,255,255,.14); }
.content { margin-left:220px; width:calc(100% - 220px); padding:24px; }
header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px; }
h1 { margin:0; color:var(--navy); font-size:30px; }
header p { margin:.25rem 0 0; color:var(--muted); }
.badge { background:#dcecf6; color:var(--navy); padding:6px 10px; border-radius:8px; font-weight:700; white-space:nowrap; }
.view { display:none; }
.view.active { display:block; }
.simple-hidden,.admin-advanced { display:none !important; }
.cards { display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); gap:12px; margin-bottom:14px; }
.ops-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ops-grid .ops-panel:first-child { grid-column:1 / -1; }
.card,.panel { background:white; border:1px solid var(--border); border-radius:8px; box-shadow:0 1px 3px rgba(16,24,40,.05); }
.card { padding:14px 16px; min-height:92px; }
.card .label { color:var(--muted); font-size:12px; }
.card .value { font-size:24px; font-weight:800; color:var(--navy); margin-top:8px; }
.kpi-card { cursor:help; }
.kpi-help {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  margin-left:4px;
  border-radius:50%;
  background:#e5eef6;
  color:var(--navy);
  font-size:10px;
  font-weight:800;
}
.panel { padding:16px; margin-bottom:14px; min-width:0; }
.panel h2 { margin:0 0 12px; color:var(--navy); font-size:21px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 10px; }
.section-heading h3 { margin:0; }
.ops-panel .table-wrap { max-height:300px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:9px 10px; border-bottom:1px solid #e5e7eb; text-align:left; white-space:nowrap; font-size:14px; }
th { background:#f8fafc; color:#475467; font-size:12px; position:sticky; top:0; z-index:1; }
.muted { color:#667085; text-align:center; }
.status { padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; }
.status.ok { background:#e2f0d9; color:var(--green); }
.status.alert { background:#fff2cc; color:var(--amber); }
.status.critical { background:#fce4d6; color:var(--red); }
.semaphore { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:7px; vertical-align:middle; box-shadow:0 0 0 2px rgba(0,0,0,.04); }
.semaphore.green { background:var(--green); }
.semaphore.yellow { background:#f6c343; }
.semaphore.red { background:var(--red); }
.alert-list { display:grid; gap:8px; margin:10px 0 18px; }
.alert-item { padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:#fffaf0; color:var(--navy); }
.modal { position:fixed; inset:0; background:rgba(15,23,42,.72); z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; }
.modal.hidden { display:none; }
.modal-content { width:90vw; height:90vh; background:#fff; border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.modal-content iframe,.modal-content img { width:100%; height:100%; object-fit:contain; border:1px solid var(--border); }
#ops-alerts td:nth-child(3), #ops-alerts td:nth-child(4) { white-space:normal; min-width:220px; line-height:1.35; }
.grid-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:end; }
.wide-field { grid-column:span 2; }
label { font-size:13px; color:#475467; display:flex; flex-direction:column; gap:5px; }
input,select { border:1px solid #cfd8e1; border-radius:8px; padding:10px; font:inherit; background:white; }
label.required-field { background:#fff8e1; border:1px solid #f6c343; border-radius:8px; padding:8px; color:#7a4b00; }
label.required-field select { border-color:#d99a00; box-shadow:0 0 0 2px rgba(246,195,67,.22); }
button[type=submit], .action { background:var(--blue); color:white; border:0; border-radius:8px; padding:11px 14px; cursor:pointer; font-weight:700; }
.action.secondary { background:#e9eff5; color:var(--navy); padding:7px 10px; }
@media (max-width:1000px) {
  .sidebar { width:190px; }
  .content { margin-left:190px; width:calc(100% - 190px); padding:18px; }
  .cards,.grid-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wide-field { grid-column:span 2; }
  .ops-grid { grid-template-columns:1fr; }
  header { flex-direction:column; }
}
@media (max-width:700px) {
  body { display:block; }
  .sidebar { position:static; width:100%; }
  .content { margin:0; width:100%; }
  .cards,.grid-form { grid-template-columns:1fr; }
  .wide-field { grid-column:span 1; }
  h1 { font-size:26px; }
}

.header-user { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; min-width:260px; }
#current-user { color:#344054; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.logout-link { color:var(--navy); text-decoration:none; font-weight:700; }
.login-page { min-height:100vh; display:grid; place-items:center; background:#eef3f7; }
.login-card { width:min(420px,92vw); background:white; padding:32px; border-radius:16px; box-shadow:0 14px 40px rgba(22,50,79,.12); }
.login-brand { color:var(--navy); }
.login-card h1 { margin-top:24px; }
.login-form { display:grid; gap:16px; margin:22px 0; }
.login-form button { background:var(--blue); color:white; border:0; padding:12px; border-radius:8px; font-weight:700; cursor:pointer; }
.login-error { background:#fce4d6; color:var(--red); padding:10px; border-radius:8px; margin:12px 0; }

.panel-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.success-message{margin:12px 0;padding:10px;background:#e2f0d9;color:#2e7d32;border-radius:8px}.error-message{margin:12px 0;padding:10px;background:#fce4d6;color:#b42318;border-radius:8px}

.action.danger{background:#b42318;margin-left:6px}.panel-header label{min-width:220px}
input[type=file]{background:#fff}
.compact-field{max-width:220px;margin-bottom:16px}
.dre-actions{display:flex;gap:8px;align-items:end;flex-wrap:wrap;justify-content:flex-end}
.dre-actions label{min-width:150px}
.dre-tabs{display:flex;gap:8px;flex-wrap:wrap}
.dre-tab.active{background:var(--navy);color:#fff}
.dre-tab-view{display:none}
.dre-tab-view.active{display:block}
.dre-total-row td{font-weight:800;background:#f8fafc;color:var(--navy)}
.dre-bold{font-weight:800}
.dre-indent-1{padding-left:18px;display:inline-block}
.dre-indent-2{padding-left:36px;display:inline-block}
.muted-left{color:#667085;margin:4px 0 0;text-align:left}
.form-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.form-card{border:1px solid var(--border);background:#fff;border-radius:8px;padding:13px;text-align:left;display:grid;gap:8px;min-height:145px;cursor:pointer;box-shadow:0 1px 3px rgba(16,24,40,.05)}
.form-card:hover{border-color:#9db8ce;box-shadow:0 8px 18px rgba(16,24,40,.08)}
.form-card.busy{background:#fffaf0;border-color:#f4d58d}
.form-card.confirmed{background:#eaf6ef;border-color:#7fc394}
.form-card.free{background:#f7fbf8;border-color:#b9dec5}
.form-name{font-size:22px;font-weight:800;color:var(--navy)}
.form-rate{display:inline-flex;width:max-content;background:#dcecf6;color:var(--navy);border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800}
.form-subtitle{font-weight:700;color:#344054;white-space:normal}
.form-detail{font-size:12px;color:var(--muted);white-space:normal}
.form-action{display:inline-flex;justify-content:center;background:var(--blue);color:#fff;border-radius:8px;padding:8px 10px;font-weight:800;font-size:13px}
.form-tools{display:flex;gap:6px;flex-wrap:wrap}
.form-tool{display:inline-flex;background:#e9eff5;color:var(--navy);border-radius:8px;padding:6px 9px;font-weight:800;font-size:12px}
.form-tool.danger{background:#fce4d6;color:var(--red)}