/* Camera workspace: institutional header, readable icon groups and state labels. */
.leal-route-event-marker { display:flex!important;align-items:center;justify-content:center;border:2px solid #fff;border-radius:50%;background:#a76908;color:#fff;box-shadow:0 2px 7px #132a4c55; }
.leal-route-event-dms { background:#7144ac; }
.leal-route-event-adas { background:#2454ae; }
.leal-route-event-marker:focus { outline:3px solid #182b54;outline-offset:2px; }
.leal-route-camera-events { width:270px;max-width:calc(100vw - 80px);padding:12px;background:#fff;color:#213047;border:1px solid #d7dfeb;border-radius:10px;box-shadow:0 3px 14px #15274326; }
.leal-route-camera-title { display:block;font:600 14px/1.4 Arial,sans-serif; }
.leal-route-camera-events p { font:12px/1.5 Arial,sans-serif;margin:5px 0 8px; }
.leal-route-camera-events button { background:#f2f6ff;color:#244e9e;border:1px solid #cbd8ed;border-radius:6px;min-height:32px;padding:5px 10px;cursor:pointer; }
.leal-route-camera-events button:focus-visible { outline:3px solid #729ce7;outline-offset:2px; }
.leal-route-camera-list { max-height:min(320px,45vh);overflow-y:auto;overscroll-behavior:contain;margin-top:8px; }
.leal-route-camera-events [hidden] { display:none!important; }
.leal-route-camera-events .leal-route-event-row { display:block;text-align:left;width:100%;background:#fff;margin-bottom:6px; }
.leal-route-event-row strong,.leal-route-event-row span,.leal-route-event-row small { display:block;white-space:normal;overflow-wrap:anywhere; }
.leal-route-event-row span { color:#5a6575;font-size:11px;margin-top:3px; }
.leal-route-event-row small { color:#2a559d;margin-top:3px; }
.leal-route-event-pages { display:flex;gap:6px;align-items:center;flex-wrap:wrap; }
.leal-route-event-pages button:disabled { opacity:.45;cursor:default; }
html[data-leal-theme="dark"] .leal-route-camera-events { background:#192438;color:#e5edf9;border-color:#40516b; }
html[data-leal-theme="dark"] .leal-route-camera-events button { background:#243754;color:#bcd2ff;border-color:#4a6185; }
html[data-leal-theme="dark"] .leal-route-event-row span { color:#ccd5e4; }
html[data-leal-theme="dark"] .leal-route-event-row small { color:#a6c6ff; }
.leal-video-workspace {
  --camera-icon-blue: #2855b4;
  --camera-icon-blue-bg: #eaf0ff;
  --camera-icon-teal: #087b78;
  --camera-icon-teal-bg: #e4f5f2;
  --camera-icon-amber: #946000;
  --camera-icon-amber-bg: #fff3ce;
  --camera-icon-violet: #6d46a5;
  --camera-icon-violet-bg: #f0eafa;
}
.leal-video-workspace .lvw-main { background: var(--vc-canvas, #f5f7fb); }
.leal-video-workspace .lvw-navigation > nav { gap: 10px; }
.leal-video-workspace .lvw-navigation > nav button {
  gap: 10px; padding: 9px 14px; min-height: 54px;
  border: 1px solid transparent; border-radius: 12px;
  transition: background-color .15s, border-color .15s;
}
.leal-video-workspace .lvw-navigation > nav button > i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 10px; font-size: 16px;
  background: var(--camera-icon-blue-bg); color: var(--camera-icon-blue);
}
.leal-video-workspace .lvw-navigation .fa-film {
  color: var(--camera-icon-teal); background: var(--camera-icon-teal-bg);
}
.leal-video-workspace .lvw-navigation .fa-list-alt,
.leal-video-workspace .lvw-navigation .fa-list,
.leal-video-workspace .lvw-navigation .fa-bell-o {
  color: var(--camera-icon-amber); background: var(--camera-icon-amber-bg);
}
.leal-video-workspace .lvw-navigation .fa-cog {
  color: var(--vc-muted, #59667b); background: var(--vc-canvas, #eef1f6);
}
.leal-video-workspace .lvw-navigation > nav button.lvw-current {
  border-color: var(--vc-border, #d6dfed);
  color: var(--vc-blue-text, #234991);
  background: var(--vc-blue-soft, #edf3ff);
}
.leal-video-workspace .lvw-page-header h1 { font-weight: 700; letter-spacing: -.4px; }
.leal-video-workspace .lvw-context {
  background: var(--vc-surface, #fff); border: 1px solid var(--vc-border, #dce3ee);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
}
.leal-video-workspace .lvw-context label,
.leal-video-workspace .clw-sd-controls label { color: var(--vc-muted, #56627a); font-size: 12px; font-weight: 600; }
.leal-video-workspace .form-control { border-radius: 8px; }
.leal-video-workspace .lvw-recording-status {
  border-radius: 14px; padding: 14px 16px; border-left-width: 4px;
  background: var(--vc-surface, #fff); box-shadow: 0 2px 8px rgba(22, 45, 80, .025);
}
.leal-video-workspace .lvw-recording-status > div { padding-left: 52px; position: relative; min-height: 40px; }
.leal-video-workspace .lvw-recording-status > div::before {
  content: '\f0c2'; font-family: FontAwesome; position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 11px; font-size: 18px; color: var(--camera-icon-blue); background: var(--camera-icon-blue-bg);
}
.leal-video-workspace .lvw-recording-status[data-storage-state="disabled"] { border-left-color: #bd881a; }
.leal-video-workspace .lvw-recording-status[data-storage-state="disabled"] > div::before {
  color: var(--camera-icon-amber); background: var(--camera-icon-amber-bg);
}
.leal-video-workspace .lvw-recording-status[data-storage-state="enabled"] { border-left-color: var(--camera-icon-teal); }
.leal-video-workspace .lvw-recording-status[data-storage-state="enabled"] > div::before {
  color: var(--camera-icon-teal); background: var(--camera-icon-teal-bg);
}
.leal-video-workspace [aria-label="Origem das gravações"] {
  display: flex; gap: 10px; border: 0; padding: 0; margin: 14px 0 18px; flex-wrap: wrap;
}
.leal-video-workspace [aria-label="Origem das gravações"] > button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 8px 16px 8px 10px; background: var(--vc-surface, #fff);
  border: 1px solid var(--vc-border, #dce3ee); border-radius: 10px;
  color: var(--vc-text, #29384c); font-size: 13px; font-weight: 600;
}
.leal-video-workspace [aria-label="Origem das gravações"] .lvw-source-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; font-size: 14px;
  color: var(--camera-icon-blue); background: var(--camera-icon-blue-bg);
}
.leal-video-workspace [aria-label="Origem das gravações"] .fa-hdd-o {
  color: var(--camera-icon-teal); background: var(--camera-icon-teal-bg);
}
.leal-video-workspace [aria-label="Origem das gravações"] > button.lvw-current,
.leal-video-workspace [aria-label="Origem das gravações"] > button.btn-primary {
  border-color: var(--vc-blue, #2855b4); color: var(--vc-blue-text, #21489c);
  background: var(--vc-blue-soft, #edf3ff); box-shadow: 0 0 0 1px var(--vc-blue, #2855b4);
}
.leal-video-workspace .vc-native-note { color: var(--vc-muted, #59677e); font-size: 13px; line-height: 1.5; }
.leal-video-workspace .clw-sd-controls,
.leal-video-workspace .clw-recording-detail {
  border: 1px solid var(--vc-border, #dce3ee); border-radius: 14px;
  background: var(--vc-surface, #fff);
}
.leal-video-workspace .clw-sd-controls h4 {
  display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700;
}
.leal-video-workspace .clw-sd-controls h4 .fa { color: var(--camera-icon-blue); }
.leal-video-workspace .clw-recording-card,
.leal-video-workspace .clw-event-card {
  background: var(--vc-surface, #fff); border-color: var(--vc-border, #dce3ee);
  box-shadow: 0 2px 7px rgba(22, 45, 80, .035);
}
.leal-video-workspace .clw-recording-info strong { color: var(--vc-text, #29384c); }
.leal-video-workspace .clw-sd-card .clw-recording-preview { color: var(--camera-icon-blue); background: var(--camera-icon-blue-bg); }
.leal-video-workspace .clw-sd-card .clw-recording-preview > i { color: inherit; }
.leal-video-workspace .clw-event-card { position: relative; border-radius: 13px; padding: 16px; }
.leal-video-workspace .clw-event-card::before {
  content: '\f0f3'; font-family: FontAwesome; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 8px;
  color: var(--camera-icon-amber); background: var(--camera-icon-amber-bg); font-size: 15px;
}
.leal-video-workspace .clw-event-card[data-event-family="dms"]::before { content: '\f007'; color: var(--camera-icon-violet); background: var(--camera-icon-violet-bg); }
.leal-video-workspace .clw-event-card[data-event-family="adas"]::before { content: '\f018'; color: var(--camera-icon-blue); background: var(--camera-icon-blue-bg); }
.leal-video-workspace .clw-event-card h4 { line-height: 1.4; font-weight: 650; margin: 4px 0 7px; }
.leal-video-workspace .clw-event-card time { font-size: 12px; line-height: 1.5; }
.leal-video-workspace .clw-event-card .clw-card-actions { padding: 12px 0 0; gap: 8px; }
.leal-video-workspace .camera-event-more > summary { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--vc-border, #dce3ee); border-radius: 8px; padding: 7px 10px; margin-top: 12px; font-weight: 600; }
.leal-video-workspace button:focus-visible { outline: 3px solid var(--vc-blue, #2855b4); outline-offset: 3px; }
html[data-leal-theme="dark"] .leal-video-workspace {
  --camera-icon-blue: #afc8ff; --camera-icon-blue-bg: #243a60;
  --camera-icon-teal: #9ee0d5; --camera-icon-teal-bg: #1b423f;
  --camera-icon-amber: #ffda92; --camera-icon-amber-bg: #4a391e;
  --camera-icon-violet: #d7bdff; --camera-icon-violet-bg: #3e3058;
}
@media (prefers-reduced-motion: reduce) { .leal-video-workspace .lvw-navigation > nav button { transition: none; } }
@media (max-width: 650px) {
  .leal-video-workspace .lvw-navigation > nav { gap: 5px; }
  .leal-video-workspace .lvw-navigation > nav button { flex-direction: column; gap: 6px; padding: 8px 4px; min-height: 75px; white-space: normal; line-height: 1.25; }
  .leal-video-workspace .lvw-navigation > nav button > i { width: 28px; height: 28px; flex-basis: 28px; font-size: 14px; border-radius: 9px; }
  .leal-video-workspace .lvw-context { padding: 12px; }
  .leal-video-workspace .lvw-recording-status { gap: 10px; padding: 12px; }
  .leal-video-workspace .lvw-recording-status > div { padding-left: 42px; }
  .leal-video-workspace .lvw-recording-status > div::before { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
  .leal-video-workspace [aria-label="Origem das gravações"] { gap: 8px; }
  .leal-video-workspace [aria-label="Origem das gravações"] > button { flex: 1; justify-content: center; padding: 8px; }
}