/* Classic GMS-like look (approx) */
:root{
  --c-bg:#d4d0c8;
  --c-panel:#e6e3dc;
  --c-border-dark:#808080;
  --c-border-light:#ffffff;
  --c-text:#000;
  --c-head:#c0c0c0;
  --c-blue:#0a3d91;
  --c-blue2:#123f7a;
  --c-row-sel:#0b61d6;
  --c-row-sel-text:#fff;
  --c-row-alert:#c00000;
  --c-row-alert-text:#fff;
  --c-input:#fff;
  --c-input-border:#7f9db9;
  --c-font: Tahoma, Verdana, Arial, sans-serif;
}

body.gms-app{
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--c-font);
  overflow:hidden;
}

/* Top menu bar */
.gms-menubar{
  height: 28px;
  background: var(--c-head);
  border-bottom:1px solid var(--c-border-dark);
  display:flex;
  align-items:center;
  padding:0 8px;
  gap:14px;
  font-size:12px;
}
.gms-menubar .item{ cursor:default; }
.gms-menubar .item:hover{ text-decoration:underline; }

.gms-toolbar{
  height: 32px;
  /* Slightly darker than buttons so buttons remain clearly visible */
  background: var(--c-head);
  border-bottom:1px solid var(--c-border-dark);
  display:flex;
  align-items:center;
  padding:0 8px;
  gap:6px;
  font-size:12px;
}
.gms-btn{
  background: #f1f1f1;
  color: var(--c-text);
  border-top:1px solid var(--c-border-light);
  border-left:1px solid var(--c-border-light);
  border-right:1px solid #5a5a5a;
  border-bottom:1px solid #5a5a5a;
  padding:4px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  /* Extra depth/contrast (classic Windows look) */
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.9),
    inset -1px -1px 0 rgba(0,0,0,.08);
  min-height: 24px;
}
.gms-btn:active{
  border-top:1px solid var(--c-border-dark);
  border-left:1px solid var(--c-border-dark);
  border-right:1px solid var(--c-border-light);
  border-bottom:1px solid var(--c-border-light);
  box-shadow:
    inset 1px 1px 0 rgba(0,0,0,.12),
    inset -1px -1px 0 rgba(255,255,255,.85);
}

/* Visible focus (keyboard) */
.gms-btn:focus{
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.gms-statusbar{
  height: 24px;
  background: var(--c-head);
  border-top:1px solid var(--c-border-dark);
  display:flex;
  align-items:center;
  padding:0 8px;
  gap:10px;
  font-size:12px;
}

.gms-shell{
  height: calc(100vh - 28px - 32px - 24px);
  display:grid;
  grid-template-columns: 52% 48%;
  gap:6px;
  padding:6px;
}

.gms-col{
  display:flex;
  flex-direction:column;
  min-height:0;
  gap:6px;
}

.gms-window{
  background: var(--c-panel);
  border-top:1px solid var(--c-border-light);
  border-left:1px solid var(--c-border-light);
  border-right:1px solid var(--c-border-dark);
  border-bottom:1px solid var(--c-border-dark);
  min-height:0;
  display:flex;
  flex-direction:column;
}
.gms-title{
  background: var(--c-head);
  border-bottom:1px solid var(--c-border-dark);
  padding:4px 6px;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.gms-content{
  padding:0;
  overflow:auto;
  min-height:0;
  flex:1;
}

.gms-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  background:#fff;
}
.gms-table th{
  position:sticky; top:0;
  background:#efefef;
  border-bottom:1px solid #bdbdbd;
  padding:3px 4px;
  text-align:left;
  font-weight:700;
}
.gms-table td{
  border-bottom:1px solid #e2e2e2;
  padding:3px 4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gms-row:hover{ background:#dde9ff; cursor:pointer; }
.gms-row.selected{ background: var(--c-row-sel); color: var(--c-row-sel-text); }
.gms-row.alert{ background: var(--c-row-alert); color: var(--c-row-alert-text); }

.gms-form{
  padding:6px;
  display:grid;
  grid-template-columns: 90px 1fr 60px 1fr;
  gap:6px 8px;
  font-size:12px;
}
.gms-form label{ align-self:center; }
.gms-input, .gms-select, .gms-textarea{
  background: var(--c-input);
  border:1px solid var(--c-input-border);
  padding:2px 4px;
  font-size:12px;
  font-family: var(--c-font);
}
.gms-textarea{ min-height:72px; resize:vertical; grid-column:1/-1; }

.gms-tabs{
  display:flex;
  gap:2px;
  padding:4px 4px 0 4px;
  background: var(--c-panel);
}
.gms-tab{
  padding:4px 8px;
  background:#efefef;
  border-top:1px solid var(--c-border-light);
  border-left:1px solid var(--c-border-light);
  border-right:1px solid var(--c-border-dark);
  border-bottom:0;
  font-size:12px;
}
.gms-tab.active{
  background:#fff;
}
.gms-tabpanel{
  background:#fff;
  border-top:1px solid var(--c-border-dark);
  padding:6px;
  min-height:0;
  flex:1;
  overflow:auto;
}

/* Map area */
#map{ width:100%; height:100%; }
.leaflet-container{ background:#bdbdbd; font-family: var(--c-font); }

/* Oproepen layout */
.gms-shell.calls{
  grid-template-columns: 34% 66%;
}
.call-right{
  display:grid;
  grid-template-rows: 48% 52%;
  gap:6px;
  min-height:0;
}

/* === Centralist typveld (onder Hist. kladblok) === */
.centralist-wrap{
  margin-top:10px;
  width:100%;
}
.centralist-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.centralist-title{
  font-size:12px;
  font-weight:700;
}
.centralist-meta{
  font-size:11px;
  color:#666;
}
.centralist-input{
  width:100%;
  box-sizing:border-box;
  padding:6px 8px;
  border-radius:4px;
}
.centralist-input:focus{
  outline:none;
  border-color: rgba(74,163,255,.65);
  box-shadow: 0 0 0 2px rgba(74,163,255,.18);
}
.centralist-suggest{ position:relative; }
.centralist-suggestbox{
  position:absolute;
  left:0;
  right:0;
  margin-top:4px;
  background:#fff;
  border:1px solid rgba(0,0,0,.18);
  border-radius:6px;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  z-index:1000;
  max-height:220px;
  overflow-y:auto;
}
.centralist-suggestitem{
  padding:6px 8px;
  cursor:pointer;
  font-size:12px;
  display:flex;
  gap:10px;
  align-items:center;
}
.centralist-suggestitem:hover{ background: rgba(0,0,0,.04); }
.centralist-suggestitem.active{ background: rgba(0,0,0,.06); }
.centralist-hint{
  margin-top:6px;
  font-size:11px;
  color:#a33;
}


/* Ensure readable text */
.gms-menubar, .gms-toolbar, .gms-statusbar{ color: var(--c-text); }
.gms-btn{ color: var(--c-text); }
.gms-btn:disabled{
  color:#666;
  background:#dcd9d2;
  opacity:1;
  cursor:default;
}


/* Incidenten table: kleurregels (hard requirement)
   Rood = A0 en Prio 1
   Oranje = A1 en Prio 2
   Geel = A2
   Prio 3 = groen
   B1 = lichtblauw
   B2 = donkerderblauw
   Prio 4 en C1 = grijs
*/
.gms-row.prio-red{ background:#ffe0e0; }
.gms-row.prio-red td{ color:#a00000; font-weight:700; }

.gms-row.prio-orange{ background:#ffe6c7; }
.gms-row.prio-orange td{ color:#7a3b00; font-weight:700; }

.gms-row.prio-yellow{ background:#fff6c9; }
.gms-row.prio-yellow td{ color:#6a5a00; font-weight:700; }

.gms-row.prio-green{ background:#e2f4df; }
.gms-row.prio-green td{ color:#145c14; font-weight:700; }

.gms-row.prio-b1{ background:#dff4ff; }
.gms-row.prio-b1 td{ color:#034a6c; font-weight:700; }

.gms-row.prio-b2{ background:#c7e7ff; }
.gms-row.prio-b2 td{ color:#033f66; font-weight:700; }

.gms-row.prio-grey{ background:#e6e6e6; }
.gms-row.prio-grey td{ color:#555; font-weight:700; }

/* Backwards compat: previous "prio-urgent" highlight behaves like prio-red */
.gms-row.prio-urgent{ background:#ffe0e0; }
.gms-row.prio-urgent td{ color:#a00000; font-weight:700; }

/* Ensure selection always wins */
.gms-row.selected{ background: var(--c-row-sel) !important; color: var(--c-row-sel-text) !important; }
.gms-row.selected td{ color: var(--c-row-sel-text) !important; }

/* KARAK kolom: compacte afkortingen (geen badges/labels) */
.mk-karak-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  line-height:1.1;
}
.mk-karak-code{
  font-family: Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  white-space: nowrap;
  opacity: .95;
}

/* Blink highlight (3x) when characteristics are added to an incident */
.gms-row.mk-blink{
  animation: mkBlink 0.6s ease-in-out 0s 3;
}
@keyframes mkBlink{
  0%,100%{ filter:none; }
  50%{ filter: brightness(1.55) saturate(1.2); }
}


/* === Hist. kladblok (notes) layout: tekst links, meta rechts === */
.notes-box{
  width:100%;
  height:260px;
  overflow-y:auto;
  border:1px solid rgba(0,0,0,.25);
  border-radius:4px;
  background:#fff;
  padding:6px 8px;
  box-sizing:border-box;
  font-family:Consolas, monospace;
  font-size:12px;
}
.note-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:2px 0;
  border-bottom:1px dotted rgba(0,0,0,.08);
}
.note-row:last-child{ border-bottom:none; }
.note-text{
  flex:1 1 auto;
  min-width:0;
  white-space:pre-wrap;
  word-break:break-word;
}
.note-meta{
  flex:0 0 auto;
  white-space:nowrap;
  color:#555;
}