/* Page shell around the schematic. Colours and type follow the design (Loadbank Overview.dc.html). */
* { box-sizing: border-box; }
body { margin: 0; background: #E4E9ED; color: #263547; font-family: 'Lufthansa Text', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; }
a { color: #163C68; } a:hover { color: #04123E; }

.ov-top { display: flex; align-items: center; gap: 24px; padding: 10px 24px; background: #04123E; color: #fff; }
.ov-top b { font-size: 16px; font-weight: 600; }
.ov-top nav { display: flex; gap: 18px; font-size: 14px; }
.ov-top nav a { color: #C9D6E3; text-decoration: none; } .ov-top nav a:hover { color: #fff; }
.ov-top .here { color: #fff; font-weight: 600; border-bottom: 2px solid #fff; padding-bottom: 2px; }

.ov-main { padding: 16px 24px 32px; display: flex; flex-direction: column; gap: 14px; }
.ov-bar { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; }
.ov-group { display: flex; flex-direction: column; gap: 6px; }
.ov-label { font-size: 12px; color: #52677B; }
.ov-seg { display: flex; gap: 4px; flex-wrap: wrap; }
.ov-confirm { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-left: auto; align-items: flex-end; }
.ov-confirm .ov-label b { color: #176644; font-weight: 600; }

/* the design's toggle buttons */
.ov-btn { height: 32px; padding: 0 12px; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid #B8C2CD; background: #fff; color: #263547; font-weight: 400; }
.ov-btn[aria-pressed="true"] { border-color: #163C68; background: #163C68; color: #fff; font-weight: 600; }
.ov-btn:disabled { cursor: not-allowed; opacity: .55; }
.ov-btn:focus-visible { outline: 2px solid #215BA0; outline-offset: 2px; }
.ov-preset { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid #718295; background: #fff; color: #163C68;
  font: inherit; font-size: 13px; cursor: pointer; }

.ov-panel { background: #fff; border: 1px solid #BCC8D3; border-radius: 10px; padding: 16px 20px; display: flex;
  flex-direction: column; gap: 12px; max-width: 1462px; }
.ov-panel[hidden] { display: none; }
.ov-preview-note { font-size: 13px; font-weight: 600; color: #80500A; background: #FFF3D6; border: 1px solid #80500A;
  border-radius: 4px; padding: 6px 10px; align-self: flex-start; }
.ov-groups { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.ov-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid #E1E7EC; padding-top: 12px; }
.ov-presets #preview-presets { display: contents; }

/* fixed-size 1462 px drawing, scaled to the available width by overview.js */
.ov-stage { position: relative; overflow: hidden; }
.ov-stage-inner { width: 1462px; transform-origin: 0 0; }

/* signed-in user and logout, right side of the top bar */
.ov-user { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 13px; color: #C9D6E3; }
.ov-user button { font: inherit; color: #fff; background: transparent; border: 1px solid #52677B; border-radius: 4px; padding: 3px 10px; cursor: pointer; }
.ov-user button:hover { border-color: #fff; }

/* login page */
.ov-login { display: flex; justify-content: center; padding: 64px 16px; }
.ov-login form { width: min(360px, 100%); gap: 14px; }
.ov-login h1 { margin: 0; font-size: 20px; color: #04123E; }
.ov-login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #52677B; }
.ov-login input { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #B8C2CD; border-radius: 6px; color: #263547; }
.ov-login input:focus { outline: 2px solid #215BA0; outline-offset: 1px; }
.ov-login button { height: 38px; }
.ov-login-error { margin: 0; color: #A92B35; font-weight: 600; font-size: 13px; }

/* active events (AP2 events library), below the drawing */
.ov-events { max-width: 1462px; gap: 8px; }
.ov-events-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ov-events-head h2 { margin: 0; font-size: 16px; color: #04123E; font-weight: 600; }
.ov-events-head #ack-all { margin-left: auto; }
.ov-events-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ov-events-list li { display: grid; grid-template-columns: 112px 1fr auto; gap: 4px 14px; align-items: center;
  padding: 6px 10px; border-left: 5px solid #9AA8B6; background: #F4F6F8; border-radius: 0 4px 4px 0; font-size: 13px; }
.ov-events-list li.Alarm { border-left-color: #A92B35; }
.ov-events-list li.Warning { border-left-color: #C98A0B; }
.ov-events-list li.ActionRequest { border-left-color: #215BA0; }
.ov-events-list li.cleared { opacity: .8; }
.ov-ev-cat { font-weight: 600; color: #263547; }
.ov-ev-text b { font-weight: 600; color: #04123E; }
.ov-ev-meta { grid-column: 2; color: #52677B; font-size: 12px; }
.ov-ev-ack { grid-row: 1 / span 2; grid-column: 3; }
.ov-events-empty { color: #52677B; font-size: 13px; padding: 4px 0; }
@media (max-width: 700px) { .ov-events-list li { grid-template-columns: 1fr auto; } .ov-ev-meta { grid-column: 1; } }