/* ══════════════════════════════════════════════════════════════════════
   CamLog v3 — Camera Log Dashboard
   Theme-aware: dark by default, light via body.light-mode
   ══════════════════════════════════════════════════════════════════════ */

/* ── CSS custom properties (dark mode defaults) ──────────────────────── */
#camlog-overlay {
  /* backgrounds */
  --cl-bg:          #0d1914;
  --cl-bg2:         #12201a;
  --cl-surface:     #1a2b24;
  --cl-surface2:    #0e1b16;
  /* borders */
  --cl-border:      rgba(44,221,127,.12);
  --cl-border2:     rgba(44,221,127,.06);
  /* text */
  --cl-text:        #cee2d8;
  --cl-text2:       #7ac89e;
  --cl-muted:       #57b282;
  /* accent */
  --cl-accent:      #32de82;
  --cl-accent-dim:  rgba(44,221,127,.10);
  --cl-accent-brdr: rgba(44,221,127,.22);
  /* inputs */
  --cl-input-bg:    rgba(0,0,0,.28);
  --cl-input-brdr:  rgba(44,221,127,.18);
  /* table */
  --cl-thead:       rgba(44,221,127,.06);
  --cl-row-hover:   rgba(44,221,127,.05);
  /* misc */
  --cl-snap-bg:     #12201a;
  --cl-tog-off:     rgba(239,68,68,.55);
}

/* ── Light mode variable overrides ───────────────────────────────────── */
body.light-mode #camlog-overlay {
  --cl-bg:          #f9f7f2;
  --cl-bg2:         #f7f5ee;
  --cl-surface:     #ffffff;
  --cl-surface2:    #fcfcfa;
  --cl-border:      #ece7dc;
  --cl-border2:     #f6f4ed;
  --cl-text:        #1a3228;
  --cl-text2:       #334c40;
  --cl-muted:       #486457;
  --cl-accent:      #167b4c;
  --cl-accent-dim:  rgba(27,151,93,.07);
  --cl-accent-brdr: rgba(27,151,93,.22);
  --cl-input-bg:    #ffffff;
  --cl-input-brdr:  #d3e2d8;
  --cl-thead:       #f7f5ee;
  --cl-row-hover:   #faf9f5;
  --cl-snap-bg:     #ffffff;
  --cl-tog-off:     #fca5a5;
}

/* ── Panel container ─────────────────────────────────────────────────── */
#camlog-overlay {
  position: fixed;
  top: 56px; bottom: 0; left: 220px; right: 0;
  z-index: 1050;
  background: var(--cl-bg);
  display: none;
  flex-direction: column;
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transition: background .2s;
}
#camlog-overlay.open { display: flex; }
body.sb-icon-only #camlog-overlay { left: 68px; }

/* ── Header bar ──────────────────────────────────────────────────────── */
#camlog-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 58px;
  flex-shrink: 0;
  background: var(--cl-bg2);
  border-bottom: 1.5px solid var(--cl-border);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  transition: background .2s, border-color .2s;
}
.camlog-icon-box {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--cl-accent-dim);
  border: 1px solid var(--cl-accent-brdr);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.camlog-title  { font-size: .94rem; font-weight: 700; color: var(--cl-text); letter-spacing: .3px; }
.camlog-sub    { font-size: .71rem; color: var(--cl-text2); margin-top: 1px; }
.camlog-count-badge {
  display: inline-block;
  background: var(--cl-accent-dim);
  border: 1px solid var(--cl-accent-brdr);
  color: var(--cl-accent);
  font-size: .72rem; font-weight: 600;
  border-radius: 20px;
  padding: 3px 12px;
  letter-spacing: .03em;
  white-space: nowrap;
}
.camlog-exit-btn {
  background: rgba(220,50,50,.10);
  border: 1px solid rgba(220,50,50,.28);
  border-radius: 8px;
  color: #f87171;
  padding: 7px 20px;
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.camlog-exit-btn:hover { background: rgba(220,50,50,.22); border-color: rgba(220,50,50,.50); }
body.light-mode .camlog-exit-btn { color: #dc2626; background: rgba(220,50,50,.08); }

/* ── Breadcrumb bar ──────────────────────────────────────────────────── */
#camlog-breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 24px;
  background: var(--cl-surface2);
  border-bottom: 1px solid var(--cl-border);
  flex-shrink: 0;
  font-size: .8rem;
  transition: background .2s, border-color .2s;
}
.cl-bc      { color: var(--cl-muted); font-weight: 500; }
.cl-bc-link { color: var(--cl-accent); cursor: pointer; text-decoration: none; font-weight: 600; }
.cl-bc-link:hover { text-decoration: underline; }
.cl-bc-sep  { color: var(--cl-muted); font-size: .75rem; }

/* ── View container ──────────────────────────────────────────────────── */
#camlog-view-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Stats chips strip ───────────────────────────────────────────────── */
.cl-stats-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--cl-bg2);
  border-bottom: 1px solid var(--cl-border);
  flex-shrink: 0;
  flex-wrap: wrap;
  transition: background .2s, border-color .2s;
}
.cl-stat-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--cl-accent-dim);
  border: 1px solid var(--cl-accent-brdr);
  border-radius: 8px;
}
.cl-chip-num {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--cl-accent);
  line-height: 1;
}
.cl-chip-lbl {
  font-size: .72rem;
  font-weight: 600;
  color: var(--cl-text2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cl-stat-chip-link {
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cl-stat-chip-link:hover {
  background: rgba(44,221,127,.18);
  border-color: rgba(44,221,127,.40);
}
body.light-mode .cl-stat-chip-link:hover {
  background: rgba(27,151,93,.16);
  border-color: rgba(27,151,93,.45);
}
.cl-stat-chip-link:hover .cl-chip-lbl { color: var(--cl-accent); }

/* ── Dashboard toolbar ───────────────────────────────────────────────── */
.cl-dash-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--cl-surface2);
  border-bottom: 1px solid var(--cl-border);
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
#cl-dash-search {
  flex: 1;
  max-width: 320px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--cl-input-brdr);
  border-radius: 8px;
  font-size: .83rem;
  color: var(--cl-text);
  background: var(--cl-input-bg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#cl-dash-search::placeholder { color: var(--cl-muted); }
#cl-dash-search:focus { border-color: var(--cl-accent); box-shadow: 0 0 0 3px var(--cl-accent-dim); }
.cl-dash-total { font-size: .78rem; color: var(--cl-text2); white-space: nowrap; margin-right: 4px; }

/* ── Status filter toggle ────────────────────────────────────────────── */
.cl-tog {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  flex-shrink: 0;
}
.cl-tog-track {
  position: relative;
  width: 46px; height: 26px;
  border-radius: 13px;
  background: var(--cl-tog-off);
  transition: background .22s;
  flex-shrink: 0;
}
.cl-tog-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .22s;
}
.cl-tog.on .cl-tog-track        { background: #22c55e; }
.cl-tog.on .cl-tog-track::after { transform: translateX(20px); }
.cl-tog-label {
  font-size: .70rem; font-weight: 700; letter-spacing: .05em;
  color: #f87171; transition: color .22s;
}
.cl-tog.on .cl-tog-label { color: #22c55e; }
body.light-mode .cl-tog-label    { color: #dc2626; }
body.light-mode .cl-tog.on .cl-tog-label { color: #16a34a; }

/* ── Room card grid ──────────────────────────────────────────────────── */
.cl-room-grid {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  gap: 14px;
  align-content: start;
  background: var(--cl-bg);
  transition: background .2s;
}

.cl-room-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: 12px;
  padding: 18px 20px 14px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  box-shadow: 0 2px 10px rgba(0,0,0,.20);
}
.cl-room-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
  border-color: rgba(44,221,127,.30);
}
body.light-mode .cl-room-card { box-shadow: 0 2px 8px rgba(17,98,60,.07); }
body.light-mode .cl-room-card:hover { box-shadow: 0 8px 24px rgba(22,122,75,.14); border-color: #92b69e; }

.cl-no-cam { cursor: default; opacity: .50; }
.cl-no-cam:hover { transform: none; box-shadow: 0 2px 10px rgba(0,0,0,.20); border-color: var(--cl-border); }

/* card header */
.cl-card-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.cl-card-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--cl-text);
  line-height: 1.3;
  word-break: break-word;
}
.cl-card-st {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--cl-text2);
  white-space: nowrap;
  flex-shrink: 0;
}

/* card stats row */
.cl-card-stats {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.cl-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cl-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cl-accent);
  line-height: 1;
}
.cl-stat-lbl {
  font-size: .68rem;
  font-weight: 600;
  color: var(--cl-text2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cl-stat-sep {
  width: 1px;
  height: 38px;
  background: var(--cl-border);
  margin: 0 14px;
  flex-shrink: 0;
}

/* card footer */
.cl-card-ft {
  font-size: .72rem;
  color: var(--cl-text2);
  border-top: 1px solid var(--cl-border2);
  padding-top: 10px;
}

/* ── Status dots ─────────────────────────────────────────────────────── */
.cl-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cl-dot-active  { background: #22c55e; animation: cl-pulse 1.8s ease-in-out infinite; }
.cl-dot-offline { background: #ef4444; }
.cl-dot-none    { background: #2b453a; }
body.light-mode .cl-dot-none { background: #ceded3; }

@keyframes cl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

/* ── Camera strip ────────────────────────────────────────────────────── */
.cl-cam-strip {
  display: flex;
  gap: 12px;
  padding: 14px 24px;
  background: var(--cl-surface2);
  border-bottom: 1px solid var(--cl-border);
  flex-shrink: 0;
  overflow-x: auto;
  transition: background .2s, border-color .2s;
}
.cl-cam-card {
  min-width: 180px;
  padding: 14px 16px;
  border: 1px solid var(--cl-border);
  border-radius: 10px;
  background: var(--cl-surface);
  cursor: default;
  flex-shrink: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
  transition: background .2s, border-color .2s;
}
.cl-cam-nm  { font-size: .82rem; font-weight: 700; color: var(--cl-text); margin-bottom: 6px; }
.cl-cam-st  { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--cl-text2); margin-bottom: 4px; }
.cl-cam-det { font-size: .72rem; color: var(--cl-muted); }
.cl-no-cam-msg { font-size: .82rem; color: var(--cl-muted); align-self: center; padding: 8px 0; }

/* ── Filter bar ──────────────────────────────────────────────────────── */
.cl-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: var(--cl-surface2);
  border-bottom: 1px solid var(--cl-border);
  flex-shrink: 0;
  flex-wrap: wrap;
  transition: background .2s, border-color .2s;
}
#cl-search {
  flex: 1;
  min-width: 140px;
  max-width: 260px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--cl-input-brdr);
  border-radius: 8px;
  font-size: .82rem;
  color: var(--cl-text);
  background: var(--cl-input-bg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#cl-search::placeholder { color: var(--cl-muted); }
#cl-search:focus { border-color: var(--cl-accent); box-shadow: 0 0 0 3px var(--cl-accent-dim); }

#cl-type,
.cl-date-input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--cl-input-brdr);
  border-radius: 8px;
  font-size: .8rem;
  color: var(--cl-text);
  background: var(--cl-input-bg);
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.cl-date-input { min-width: 168px; }
#cl-type:focus, .cl-date-input:focus { border-color: var(--cl-accent); }
.cl-date-input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; opacity: .5; }
body.light-mode .cl-date-input::-webkit-calendar-picker-indicator { filter: none; opacity: .6; }

#cl-type option { background: var(--cl-surface); color: var(--cl-text); }

.cl-btn-export {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--cl-accent-brdr);
  border-radius: 8px;
  background: var(--cl-accent-dim);
  color: var(--cl-accent);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.cl-btn-export:hover { background: rgba(44,221,127,.18); border-color: rgba(44,221,127,.45); }
body.light-mode .cl-btn-export:hover { background: rgba(27,151,93,.16); border-color: rgba(27,151,93,.50); }

/* ── Scrollable table area ───────────────────────────────────────────── */
.cl-table-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 32px;
  background: var(--cl-bg);
  transition: background .2s;
}

/* ── Table ───────────────────────────────────────────────────────────── */
.cl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  background: var(--cl-surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.22);
  transition: background .2s, box-shadow .2s;
}
body.light-mode .cl-table { box-shadow: 0 2px 12px rgba(17,98,60,.08); }

.cl-table thead th {
  background: var(--cl-thead);
  color: var(--cl-accent);
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--cl-border);
  text-align: left;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
body.light-mode .cl-table thead th { color: #334c40; }

.cl-row { border-bottom: 1px solid var(--cl-border2); transition: background .10s; }
.cl-row:last-child { border-bottom: none; }
.cl-row:hover { background: var(--cl-row-hover); }
.cl-row td { padding: 10px 14px; color: var(--cl-text2); vertical-align: middle; }

.cl-badge {
  display: inline-block;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 5px;
  padding: 3px 8px;
  letter-spacing: .06em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.cl-td-ev   { color: var(--cl-text2); font-size: .82rem; white-space: nowrap; }
.cl-td-room { color: var(--cl-text);  font-size: .78rem; font-weight: 600; }
.cl-td-cam  { font-size: .74rem; color: var(--cl-accent); font-family: monospace; white-space: nowrap; }
.cl-td-ts   { color: var(--cl-text2); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-td-cls  { font-weight: 700; color: var(--cl-text); font-size: .82rem; text-transform: capitalize; }
.cl-td-cnt  { color: #b3d2c2; font-size: .85rem; font-weight: 800; text-align: center; }
.cl-td-conf { color: var(--cl-accent); font-size: .78rem; font-weight: 600; }
body.light-mode .cl-td-cnt  { color: #20b597; }
body.light-mode .cl-td-conf { color: #12643e; }
.cl-td-dur  { color: #22c55e; font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.light-mode .cl-td-dur  { color: #16a34a; }
.cl-td-det  { color: var(--cl-text2); font-size: .76rem; max-width: 200px; }

/* ── Snapshot button ─────────────────────────────────────────────────── */
.cl-snap-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--cl-input-brdr);
  border-radius: 6px;
  background: var(--cl-surface2);
  color: var(--cl-text2);
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.cl-snap-btn:hover { background: var(--cl-accent-dim); border-color: var(--cl-accent-brdr); color: var(--cl-accent); }

/* ── Empty state ─────────────────────────────────────────────────────── */
.cl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 0;
  color: var(--cl-muted);
  font-size: .88rem;
  text-align: center;
  gap: 10px;
}
.cl-empty-icon { font-size: 2.5rem; opacity: .35; }

/* ── Pagination ──────────────────────────────────────────────────────── */
.cl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 0 4px;
}
.cl-pg-btn {
  padding: 6px 18px;
  border: 1px solid var(--cl-border);
  border-radius: 8px;
  background: var(--cl-surface);
  color: var(--cl-text2);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.cl-pg-btn:hover:not(:disabled) { background: var(--cl-accent-dim); border-color: var(--cl-accent-brdr); color: var(--cl-accent); }
.cl-pg-btn:disabled { opacity: .30; cursor: default; }
.cl-pg-info { font-size: .78rem; color: var(--cl-text2); }

/* ── Snapshot modal ──────────────────────────────────────────────────── */
#camlog-snapshot-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
#camlog-snapshot-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,20,16,.75);
  cursor: pointer;
}
#camlog-snapshot-box {
  position: relative;
  background: var(--cl-snap-bg);
  border-radius: 14px;
  padding: 12px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  border: 1px solid var(--cl-border);
  z-index: 1;
}
#camlog-snapshot-close {
  position: absolute;
  top: -12px; right: -12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff;
  color: #fff;
  font-size: .9rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: background .15s;
}
#camlog-snapshot-close:hover { background: #dc2626; }
#camlog-snapshot-img {
  max-width: 80vw;
  max-height: 72vh;
  border-radius: 8px;
  object-fit: contain;
  display: block;
  background: var(--cl-surface2);
  min-width: 320px;
  min-height: 180px;
}
#camlog-snapshot-label {
  font-size: .75rem;
  color: var(--cl-text2);
  text-align: center;
  padding-bottom: 4px;
}