/* Safety Incident Reporting - CSS (no framework) */
:root{
  --bg: #f6f7fb;
  --fg: #1f2430;
  --muted: #667085;
  --card: #ffffff;
  --border: rgba(25, 33, 56, 0.10);
  --shadow: 0 10px 30px rgba(18, 23, 38, 0.10);

  --primary: #1f3b7a;   /* deep navy */
  --primary-fg: #ffffff;

  --accent: #f08b2d;    /* warm orange */
  --accent-fg: #ffffff;

  --danger: #d1363c;
  --success: #2f9d6a;
  --warning: #d49b2d;

  --radius: 18px;
  --radius-sm: 12px;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--sans);
  color: var(--fg);
  background: var(--bg);
}

h1{
  margin:0;
  font-size: 30px;
  letter-spacing:-0.02em;
  font-weight: 700;
}
.muted{color:var(--muted); font-size:14px; line-height:1.5}

.app{display:flex; min-height:100vh;}

/* Sidebar */
.sidebar{
  width: 280px;
  background: linear-gradient(180deg, #0f1f45 0%, #142b5c 100%);
  color:#fff;
  padding: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.brand{display:flex; gap:12px; align-items:center; padding: 10px 10px;}
.brand-icon{
  width:44px;height:44px;border-radius:14px;
  background: rgba(255,255,255,0.12);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.brand-title{font-weight:700; font-size:16px; line-height:1}
.brand-sub{font-size:12px; opacity:.75; margin-top:4px}

.nav{display:flex; flex-direction:column; gap:8px}
.nav-item{
  border:0;
  background: rgba(255,255,255,0.08);
  color:#fff;
  padding: 12px 12px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
}
.nav-item:hover{background: rgba(255,255,255,0.12); transform: translateY(-1px)}
.nav-item.active{background: rgba(240,139,45,0.22); outline: 1px solid rgba(240,139,45,0.35)}
.nav-ico{width:22px; display:inline-flex; justify-content:center}

.sidebar-footer{margin-top:auto}
.session-pill{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 12px;
}
.pill-label{font-size:12px; opacity:.8}
.pill-row{display:flex; gap:8px; margin-top:8px}
.pill-hint{font-size:11px; opacity:.65; margin-top:8px}

/* Main */
.main{flex:1; padding: 22px; max-width: 1180px; margin: 0 auto; width:100%;}
.topbar{display:flex; align-items:flex-start; justify-content:space-between; gap: 18px; margin-bottom: 18px;}
.topbar-actions{display:flex; align-items:center; gap:10px;}

.tab{display:none}
.tab.active{display:block}

.grid{display:grid; gap: 14px}
.stats{grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px;}
@media (max-width: 1100px){ .stats{grid-template-columns: repeat(2, minmax(0, 1fr));} .sidebar{position:fixed; transform: translateX(-110%);} .main{padding-left:22px;} }
@media (max-width: 620px){ .stats{grid-template-columns: 1fr;} .topbar{flex-direction:column;} }

/* Card */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(18,23,38,0.06);
  overflow:hidden;
}
.card-head{
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom: 1px solid var(--border);
}
.card-title{font-size:16px; font-weight:700}
.card-sub{font-size:13px; color:var(--muted); margin-top:4px}
.card-actions,.filters{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.stat-card{
  padding: 16px 18px;
  display:flex; flex-direction:column; gap:10px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover{box-shadow: var(--shadow); transform: translateY(-2px);}
.stat-top{display:flex; align-items:center; justify-content:space-between;}
.stat-title{font-size:13px; color:var(--muted); font-weight:600}
.stat-icon{
  width:36px;height:36px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(31,59,122,0.10);
}
.stat-value{font-size:28px; font-weight:700; letter-spacing:-0.02em}
.stat-split{display:flex; gap:10px; flex-wrap:wrap}
.pill{
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.02);
}
.pill.open{border-color: rgba(212,155,45,.35); background: rgba(212,155,45,.10)}
.pill.closed{border-color: rgba(47,157,106,.35); background: rgba(47,157,106,.10)}

/* Buttons & Inputs */
.btn{
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover{transform: translateY(-1px); filter: brightness(0.98)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn-ico{font-weight:900}
.btn-primary{background: var(--accent); color: var(--accent-fg)}
.btn-outline{
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
}
.btn-danger{background: var(--danger); color:#fff}
.icon-btn{
  border: 1px solid var(--border);
  width: 38px; height: 38px;
  border-radius: 14px;
  background: transparent;
  cursor:pointer;
}

.input, .select, .textarea{
  width:100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;
}
.select{appearance:none; background-image: linear-gradient(45deg, transparent 50%, #7a8299 50%), linear-gradient(135deg, #7a8299 50%, transparent 50%); background-position: calc(100% - 16px) calc(1em + 2px), calc(100% - 11px) calc(1em + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px;}
.textarea{resize:vertical}
label{font-size:12px; font-weight:700; letter-spacing: 0.06em; text-transform:uppercase; color: #48526a}
.req{color: var(--danger)}

/* Forms */
.form{padding: 16px 18px}
.form-grid{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px}
@media (max-width: 720px){ .form-grid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:8px; margin-bottom: 12px}

/* Table */
.table-wrap{position:relative}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table thead th{
  text-align:left;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: #54607a;
  padding: 12px 18px;
  background: rgba(15, 23, 42, 0.02);
  border-bottom: 1px solid var(--border);
}
.table tbody td{
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size:14px;
  vertical-align:top;
}
.table tbody tr:hover td{background: rgba(31,59,122,0.03)}
.mono{font-family: var(--mono); font-size: 12px; color:#44506a}
.actions{display:flex; gap:8px; justify-content:flex-end}
.link-btn{border:0; background:transparent; color: var(--primary); font-weight:700; cursor:pointer}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}
.badge.sev-low{background: rgba(47,157,106,.12); border-color: rgba(47,157,106,.25); color: #176445}
.badge.sev-medium{background: rgba(212,155,45,.14); border-color: rgba(212,155,45,.28); color: #7a5408}
.badge.sev-high{background: rgba(209,76,61,.12); border-color: rgba(209,76,61,.25); color: #7e1f18}
.badge.sev-critical{background: rgba(209,54,60,.14); border-color: rgba(209,54,60,.30); color: #7d0f13; animation: pulse 1.8s ease-in-out infinite}
.badge.status-open{background: rgba(212,155,45,.14); border-color: rgba(212,155,45,.28); color: #7a5408}
.badge.status-closed{background: rgba(47,157,106,.12); border-color: rgba(47,157,106,.25); color: #176445}
.badge.status-force_closed{background: rgba(209,54,60,.14); border-color: rgba(209,54,60,.30); color: #7d0f13}
@keyframes pulse{
  0%,100%{filter: none}
  50%{filter: brightness(1.06)}
}

/* Modals */
.modal{position:fixed; inset:0; display:none; z-index:50}
.modal.open{display:block}
.modal-backdrop{position:absolute; inset:0; background: rgba(16, 24, 40, 0.55)}
.modal-card{
  position:relative;
  width: min(920px, calc(100% - 32px));
  margin: 36px auto;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-head{
  padding: 16px 18px;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px;
  border-bottom: 1px solid var(--border);
}
.modal-title{font-size:18px; font-weight:800}
.modal-sub{font-size:13px; color: var(--muted); margin-top:4px}
.modal-foot{
  padding: 14px 18px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  border-top: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.02);
}
.detail-body{padding: 16px 18px}

.empty{
  padding: 26px 18px;
  text-align:center;
}
.empty-title{font-weight:800; font-size:16px}
.empty-sub{color:var(--muted); margin-top:6px}

/* Uploader */
.uploader{
  border: 1px dashed rgba(31,59,122,0.25);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: rgba(31,59,122,0.03);
  margin-top: 8px;
}
.uploader-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.uploader-title{font-weight:800}
.uploader-sub{color:var(--muted); font-size:13px; margin-top:4px}
.file-list{display:flex; flex-direction:column; gap:10px; margin-top: 10px;}
.file-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
}
.file-name{font-weight:700}
.file-meta{font-family: var(--mono); font-size:12px; color:#44506a}
.file-remove{border:0; background:transparent; color: var(--danger); font-weight:800; cursor:pointer}

.shake{
  animation: shake .28s linear;
  border-color: rgba(209,54,60,.55) !important;
}
@keyframes shake{
  0%,100%{transform: translateX(0)}
  20%{transform: translateX(-3px)}
  40%{transform: translateX(3px)}
  60%{transform: translateX(-2px)}
  80%{transform: translateX(2px)}
}

/* Toast */
.toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(420px, calc(100% - 32px));
  display:flex;
  flex-direction:column;
  gap: 10px;
  z-index: 60;
  pointer-events:none;
}
.toast-item{
  pointer-events:auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.toast-title{font-weight:900}
.toast-sub{color:var(--muted); font-size:13px; margin-top:4px}
.toast-item.ok{border-color: rgba(47,157,106,.25)}
.toast-item.err{border-color: rgba(209,54,60,.30)}