/* =========================================================
   THEME.CSS (Dark modern dashboard skin + layout modes)
   - Safe override on top of style.css
   - Keeps your layout/logic intact
   ========================================================= */

/* =========================
   THEME TOKENS
   ========================= */
:root{
  /* Dark background system */
  --bg: #0b1220;
  --bg2:#0f1a2e;

  /* Surfaces */
  --panel: #0f1b31;
  --panel2:#12213c;
  --panel3:#0d172b;

  /* Text */
  --text:#e7eefc;
  --muted: rgba(231,238,252,.68);

  /* Borders / shadows */
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.16);

  --shadow: 0 16px 44px rgba(0,0,0,.35);
  --shadow2: 0 8px 18px rgba(0,0,0,.28);

  /* Accents */
  --accent:#31d6c8;
  --accent2:#4ea1ff;

  --danger:#ff5a7a;
  --warn:#ffb020;
  --success:#43e58a;

  /* Shape */
  --radius: 14px;
  --radius2: 18px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* =========================
   BASE / BACKGROUND
   ========================= */
html, body{
  font-family: var(--font);
  color: var(--text);
}

body{
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(49,214,200,.12), transparent 55%),
    radial-gradient(900px 520px at 85% 25%, rgba(78,161,255,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

/* Base text */
h1,h2,h3{ letter-spacing: .2px; }
p, small{ color: var(--muted); }
a{ text-decoration: none; color: inherit; }

/* Selection + focus polish */
::selection{ background: rgba(78,161,255,.28); }
:focus-visible{
  outline: 2px solid rgba(78,161,255,.55);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Scrollbar (Chromium/Edge) */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 99px;
  border: 2px solid rgba(0,0,0,.0);
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.16); }

/* =========================
   LAYOUT DEFAULT
   ========================= */
/* Main area: dark + less empty */
.main-content{
  background: transparent !important;
  padding: 24px !important;
}

/* Default: keep max width for “normal pages” */
.main-content > *{
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   SIDEBAR
   ========================= */
.sidebar{
  background: linear-gradient(180deg, #0a1020, #0e1830) !important;
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 10px 0 30px rgba(0,0,0,.30) !important;
}

.sidebar-header{
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  padding: 22px 18px !important;
  font-size: 18px !important;
  letter-spacing: 1.2px !important;
}

.toggle-btn{
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.toggle-btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

/* Sidebar links */
.sidebar-menu{ padding: 14px 10px !important; }

.sidebar-menu li a{
  position: relative;
  color: rgba(255,255,255,.74) !important;
  margin: 0 6px 8px 6px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(6px);
  transition: transform .10s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.sidebar-menu li a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

.sidebar-menu li a.active{
  background: linear-gradient(135deg, rgba(49,214,200,.18), rgba(78,161,255,.14)) !important;
  border-color: rgba(49,214,200,.30) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.34);
}

.sidebar-menu li a.active::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
}

/* Footer */
.sidebar-footer{
  background: rgba(255,255,255,.03) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

.sidebar-footer a{
  color: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.sidebar-footer a:hover{
  background: rgba(255,255,255,.06) !important;
}

/* Resizer */
.resizer{ width: 6px !important; background: transparent !important; }
.resizer:hover, .resizer.resizing{
  background: linear-gradient(180deg, rgba(49,214,200,.60), rgba(78,161,255,.60)) !important;
}

/* Mobile header matches sidebar */
.mobile-header{
  background: linear-gradient(180deg, #0a1020, #0e1830) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* =========================
   GENERIC CARDS / LOGIN
   ========================= */
.card{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius2) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
.card:hover{
  transform: none !important;
  border-color: var(--border2) !important;
  box-shadow: none !important;
}

.login-container{
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent), var(--panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.login-container input{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--text) !important;
}
.login-container input:focus{
  border-color: rgba(49,214,200,.55) !important;
  box-shadow: 0 0 0 3px rgba(49,214,200,.12) !important;
}
.login-container button{
  background: linear-gradient(135deg, rgba(49,214,200,.90), rgba(78,161,255,.85)) !important;
}

/* =========================
   MODALS (match theme)
   ========================= */
.modal{
  background-color: rgba(0,0,0,0.80) !important;
  backdrop-filter: blur(6px);
}
.modal-content{
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--panel) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 18px !important;
}
.close-btn{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.12);
}

/* =========================
   STYRNING PAGE (rooms overview) - dark version
   ========================= */
.page{ padding: 6px 0 10px; }

.page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;

  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);

  padding: 18px;
  margin: 0 0 18px 0;
}

.page-title h1{
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  color: var(--text);
}

.status-row{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.status-label{
  color: var(--muted);
  font-size: 13px;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding: 8px 12px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 700;

  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}

.status-pill .dot{
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}

.status-pill.is-online{
  color: var(--success);
  border-color: rgba(67,229,138,.22);
  background: linear-gradient(135deg, rgba(67,229,138,.12), rgba(49,214,200,.08));
}

.status-pill.is-offline{
  color: var(--danger);
  border-color: rgba(255,90,122,.22);
  background: linear-gradient(135deg, rgba(255,90,122,.12), rgba(255,176,32,.06));
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding: 10px 14px;
  border-radius: 12px;

  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor: pointer;

  transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: var(--border2);
  box-shadow: var(--shadow2);
}
.btn:active{ transform: translateY(0); }
.btn-ghost{ background: rgba(255,255,255,.03); }
.btn-ico{ opacity: .9; }

/* Rooms grid */
.rooms-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.room-link{ color: inherit; }

.room-card{
  position: relative;
  border-radius: var(--radius2);
  padding: 18px;

  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.room-card::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.room-card.is-active::before{
  background: linear-gradient(180deg, rgba(67,229,138,.95), rgba(49,214,200,.85));
}
.room-card.is-inactive::before{
  background: linear-gradient(180deg, rgba(255,90,122,.92), rgba(255,176,32,.80));
}

.room-card:hover{
  transform: translateY(-4px);
  border-color: var(--border2);
  box-shadow: var(--shadow);
}

.room-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.room-name{
  margin: 0;
  font-size: 18px;
  color: var(--text);
}

.room-arrow{
  font-size: 18px;
  opacity: .75;
}

.room-meta{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.meta-text{
  color: var(--muted);
  font-size: 13px;
}

.meta-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;

  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}

.meta-badge.ok{
  color: var(--success);
  border-color: rgba(67,229,138,.22);
}

.meta-badge.bad{
  color: var(--danger);
  border-color: rgba(255,90,122,.22);
}

/* =========================
   LAYOUT MODES (FULLSCREEN / KIOSK / FULLBLEED)
   ========================= */
.fullbleed .main-content{
  padding: 0 !important;
  overflow: hidden;
}
.fullbleed .main-content > *{
  max-width: none !important;
  margin: 0 !important;
}

.page-workspace .main-content{
  padding: 12px !important;
  overflow: auto;
}

.kiosk .sidebar,
.kiosk .resizer{
  display: none !important;
}

.kiosk .app-wrapper{
  height: 100vh;
}

.kiosk .main-content{
  height: 100vh;
  padding: 0 !important;
}

/* =========================
   MONITOR PAGE: FILL SCREEN CAMERA GRID
   - Works with .camera-grid/.camera-card/.camera-feed
   ========================= */
.page-monitor .camera-grid{
  height: 100vh;
  padding: 12px;
  box-sizing: border-box;

  display: grid;
  gap: 12px;

  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

/* Fix: ensure cards can expand properly */
.page-monitor .camera-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 18px !important;
  overflow: hidden;
}

.page-monitor .camera-header{
  flex: 0 0 auto;
}

/* IMPORTANT: remove 16:9 padding trick only on monitor page */
.page-monitor .camera-feed{
  flex: 1 1 auto;
  padding-top: 0 !important;
  height: 100% !important;
  position: relative; /* make iframe absolute work reliably */
}

/* iframe/video fill */
.page-monitor .video-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =========================
   MONITOR EXTRA UI (actions overlay)
   ========================= */
.monitor-shell{
  height: 100vh;
  width: 100%;
  position: relative;
}

.monitor-actions{
  position: fixed;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 10px;
  z-index: 1200;
}

/* =========================
   Mobile fallback
   ========================= */
@media (max-width: 768px){
  .main-content{ padding: 16px !important; }

  .page-header{
    flex-direction: column;
    align-items: stretch;
  }

  .btn{
    width: 100%;
    justify-content: center;
  }

  .page-monitor .camera-grid{
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}