/* =========================
   Theme / Base
   ========================= */
:root{
  --bg:#111; --card:#1a1a1a; --muted:#bbb; --text:#eee; --line:#333;
  --chip:#181818; --link:#4af; --link-hover:#7bb7ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-hover)}

/* =========================
   Top Nav & Footer
   ========================= */
.topbar{
  position:sticky; top:0; z-index:100;
  background:#0d0d0d; border-bottom:1px solid var(--line);
}
.nav{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
}
.nav .brand{color:#fff; font-weight:600}
.nav .links{display:flex; gap:14px; flex-wrap:wrap}
.nav .links a{color:var(--link)}
.nav .links a:hover{color:var(--link-hover)}

.footer{
  margin-top:32px; border-top:1px solid var(--line);
  padding:16px; text-align:center; color:var(--muted)
}

/* =========================
   Layout Helpers
   ========================= */
.container{max-width:1200px; margin:24px auto; padding:0 16px}

/* =========================
   Controls / Forms
   ========================= */
.controls{
  margin:10px 0; display:flex; gap:10px;
  flex-wrap:wrap; justify-content:center
}
input[type="text"], input[type="date"], select{
  padding:8px; background:var(--chip); color:var(--text);
  border:1px solid var(--line); border-radius:4px;
}
button{
  padding:8px 12px; background:var(--chip); color:var(--text);
  border:1px solid var(--line); border-radius:4px; cursor:pointer
}
button:hover{background:#202020}

/* =========================
   Table (Dashboard)
   ========================= */
.table-wrap{overflow:auto}
table{
  margin:auto; border-collapse:collapse; width:100%;
  background:var(--card)
}
th,td{border:1px solid var(--line); padding:10px; text-align:left}
th{
  background:#222; position:sticky;
  z-index:10
}
tr:nth-child(even){background:#181818}

/* =========================
   Pagination (shared macro)
   ========================= */
.pagination{margin:16px 0; text-align:center}
.pagination a,.pagination span{
  display:inline-block; background:var(--chip); color:var(--text);
  border:1px solid var(--line); margin:0 5px; padding:6px 12px; text-decoration:none;
  border-radius:4px;
}
.pagination .active{background:#333}

/* =========================
   Status dots
   ========================= */
.status-dot{
  display:inline-block; width:10px; height:10px;
  border-radius:50%; margin-left:6px; vertical-align:middle
}
.dot-online{background:#22c55e}
.dot-record{background:#ef4444}
.dot-offline{background:#666}

/* =========================
   Grid container (shared)
   ========================= */
.grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}

/* =========================
   Card base (shared)
   ========================= */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:8px; padding:10px; min-height:120px;
}

/* =========================
   Users grid (users.html)
   Two-column card with tall thumbnail
   ========================= */
.user-card{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:12px; align-items:stretch;
}

/* =========================
   Video grids (favorites, user_page)
   Stacked card (thumb on top, meta below)
   ========================= */
.video-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Thumbnails (shared) */
.thumb{
  position:relative;
  height:100%; min-height:120px;
  background:#222; border:1px solid var(--line);
  border-radius:6px; overflow:hidden;
}
.thumb img,.thumb .fallback{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.thumb .fallback{
  display:none; align-items:center; justify-content:center; font-size:28px;
}

/* Taller thumbs on video cards */
.grid.videos .thumb{ min-height:140px; }

/* Meta panel */
.meta{
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
.meta h3{margin:0; font-size:16px; display:flex; align-items:center; gap:6px}
.row{font-size:14px}
.muted{color:var(--muted)}

/* Favorite star overlay (works for both grids) */
.fav-btn{
  position:absolute; top:8px; right:8px; z-index:2;
  font-size:18px; line-height:1;
  border:none; border-radius:6px; padding:.25rem .45rem; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(2px)
}
.fav-btn[aria-pressed="true"]{color:gold}
.fav-btn:hover{transform:scale(1.05)}

/* =========================
   Responsive tweaks
   ========================= */
@media (max-width: 900px){
  .user-card{grid-template-columns:150px 1fr}
  th{top:56px}
}
@media (max-width: 640px){
  .user-card{grid-template-columns:1fr}
  .thumb{min-height:160px}
  th{top:60px}
}