:root{
  --bg:#071014;
  --panel:#0a1a20;
  --panel2:#0d222a;
  --line:#173640;
  --text:#f5f5f3;
  --muted:#8d9ba2;
  --green:#25d678;
  --red:#ef3d46;
  --blue:#2588ff;
  --amber:#ffc55c;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
button{font:inherit}
[hidden]{display:none!important}

/* ONLOOKER ADMIN HEADER — independent from public style.css */
.nav{
  position:relative;
  width:calc(100% - 48px);
  max-width:1000px;
  margin:0 auto;
  padding:22px 0;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  gap:28px;
  align-items:center;
  background:var(--bg);
  border-bottom:1px solid #292929;
  z-index:30;
}
.brand{display:block;text-decoration:none;white-space:nowrap}
.brand-logo{display:block;width:210px;height:auto}
.nav-links{display:flex;gap:34px;align-self:end;align-items:center;padding-bottom:1px}
.nav-links a{color:#d5d6d6;text-decoration:none;font-size:17px}
.nav-separator{display:block;width:1px;height:12px;flex:0 0 1px;background:#555}
.header-live-dot{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#e60000;vertical-align:middle}
.menu-wrap{position:relative;transform:translateY(9px)}
.menu{width:27px;height:20px;padding:0;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between}
.menu span{height:2px;width:27px;background:#fff;display:block;transition:transform .2s ease,opacity .2s ease}
.menu.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu.open span:nth-child(2){opacity:0}
.menu.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.dropdown{
  position:absolute;
  top:38px;
  width:190px;
  padding:8px;
  background:#111719;
  border:1px solid #2b3337;
  border-radius:12px;
  box-shadow:0 12px 35px rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  z-index:50;
}
.dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.admin-nav-menu{left:0;right:auto}
.dropdown a,.role-choice{display:block;width:100%;padding:13px 14px;color:#f2f2f2;text-decoration:none;font-size:15px;border:0;border-radius:8px;background:transparent;text-align:left;cursor:pointer}
.dropdown a:hover,.role-choice:hover,.role-choice.active{background:#20282c}
.admin-role-wrap{position:relative;justify-self:end;top:4px}
.header-user-avatar{
  width:42px;
  height:42px;
  padding:0;
  border:1px solid #394247;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#26313a;
  color:#fff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.admin-role-menu{top:52px;right:0;left:auto;width:160px}

/* Canonical Admin header placement */
.nav > .menu-wrap{grid-column:1;grid-row:1;justify-self:start}
.nav > .brand{grid-column:2;grid-row:1;justify-self:start}
.nav > .nav-links{grid-column:3;grid-row:1;justify-self:end}
.nav > .admin-role-wrap{grid-column:4;grid-row:1;justify-self:end}

/* ADMIN DASHBOARD */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr)}
.sidebar{border-right:1px solid var(--line);min-height:calc(100vh - 87px);padding:25px 12px}
.side-title{font-size:14px;color:#9fb5c0;font-weight:700;margin:0 15px 16px}
.navitem{min-height:49px;padding:0 16px;border-radius:6px;display:flex;align-items:center;gap:14px;color:#e7ecef;text-decoration:none;margin:4px 0}
.navitem.active{background:#0d2630}
.icon{width:26px;text-align:center;font-size:21px;color:#aac0cb}
.badge{margin-left:auto;background:var(--red);padding:4px 8px;border-radius:15px;font-size:12px}
.main{padding:25px 30px 40px;min-width:0}
.heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
h1{font-size:30px;margin:0 0 4px}.sub{color:#aab6bc}
.heading-right{display:flex;gap:14px;align-items:center;color:#aab6bc;font-size:13px}
.btn{border:1px solid #45616d;background:#0c2028;color:#fff;border-radius:7px;padding:9px 15px;cursor:pointer}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:22px 0}
.card{background:linear-gradient(145deg,var(--panel),#09181d);border:1px solid var(--line);border-radius:10px}
.stat{min-height:100px;padding:18px;display:flex;align-items:center;gap:16px}
.stat-icon{width:45px;height:45px;border-radius:12px;background:#102c36;display:grid;place-items:center;font-size:22px}
.stat-label{font-size:13px}.stat-value{font-size:28px;font-weight:700;margin-top:8px}
.growth{font-size:12px;color:var(--green);margin-left:10px}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px}
.panel{padding:16px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.panel-head h2{font-size:19px;margin:0}.panel-note{color:#9aa8af;font-size:13px;margin-top:4px}
.mod-row{display:grid;grid-template-columns:72px minmax(110px,1fr) minmax(95px,.8fr) 125px 220px;gap:12px;align-items:center;padding:8px;border-top:1px solid #12313a;font-size:13px}
.mod-row.header{background:#102a34;border:0;color:#b9c8ce}
.thumb{width:64px;height:48px;border-radius:5px;background:linear-gradient(135deg,#385967,#142b34);display:grid;place-items:center;color:#a9bdc6;font-size:11px}
.actions{display:flex;gap:10px}.approve,.reject{border:0;color:#fff;border-radius:6px;padding:10px 16px;font-weight:700}
.approve{background:#159b59}.reject{background:#d8323c}.more{padding:9px 12px}
.status-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #14333c;font-size:13px}
.status-row:last-child{border:0}.online{color:var(--green)}.green-dot{width:11px;height:11px;background:var(--green);border-radius:50%;display:inline-block;margin-right:10px}
.quick{display:grid;gap:9px}.quick .btn{text-align:left;padding:14px}
.lower{display:grid;grid-template-columns:1fr 1.25fr;gap:20px;margin-top:20px}
.simple-table{width:100%;border-collapse:collapse;font-size:12px}
.simple-table th,.simple-table td{padding:10px;border-bottom:1px solid #14333c;text-align:left}
.role{padding:4px 8px;border-radius:6px;background:#324b57}.role.admin{background:#0874d1}
.mobile-nav{display:none}

@media(max-width:850px){
  .nav{width:calc(100% - 40px);padding:22px 0;grid-template-columns:auto auto 1fr auto;gap:14px}
  .nav-links,.menu-wrap{position:relative;left:0}
  .nav-links{gap:15px;position:relative;top:7px}
  .nav-links a{font-size:12px}
  .brand-logo{width:165px;position:relative;top:7px}
  .header-user-avatar{width:38px;height:38px;font-size:13px}
  .admin-role-menu{top:48px}
  .shell{display:block}.sidebar{display:none}.main{padding:20px 14px 88px}
  .heading h1{font-size:26px}.heading .sub{display:none}.heading-right{flex-direction:column;align-items:flex-end}.heading-right .date{font-size:12px}
  .stats{grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
  .stat{min-height:78px;padding:12px;gap:9px}.stat-icon{width:36px;height:36px}.stat-value{font-size:20px;margin-top:5px}.growth{font-size:10px;margin-left:5px}
  .dashboard-grid{display:block}.rightcol{margin-top:16px}
  .mod-row{grid-template-columns:58px minmax(0,1fr) 90px;padding:9px 4px}
  .mod-row.header{display:none}.mod-row .host,.mod-row .requested{display:none}.thumb{width:54px;height:44px}
  .actions{gap:7px}.approve,.reject{font-size:0;padding:0;width:40px;height:40px}.approve:after{content:"✓";font-size:22px}.reject:after{content:"×";font-size:24px}.more{display:none}
  .lower{display:none}.quick-card{display:none}
  .mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);bottom:0;left:0;right:0;height:70px;background:#081820;border-top:1px solid var(--line);z-index:20}
  .mobile-nav a{color:#aabac2;text-decoration:none;font-size:10px;display:grid;place-items:center;padding:8px 2px}.mobile-nav a.active{color:#35a0ff}.mobile-nav b{font-size:21px;line-height:1}
}

@media(max-width:700px) and (orientation:portrait){
  .nav-separator{margin-left:1px;margin-right:-1px} 
  .brand-logo{top:4px}
}

 

@media(max-width:409px){
  .brand-logo{width:155px;transform:translateY(3px)}
  .nav-links{gap:10px}
  .nav-links a{font-size:11px}
  .menu{width:18px;height:20px}
}

@media(max-width:349px){
  .nav-links,.menu-wrap{left:0}
  .nav-links{flex-direction:column;gap:2px;align-items:flex-end}
}

@media(max-width:950px) and (orientation:landscape){
  .nav{grid-template-columns:auto auto 1fr auto}
  .menu-wrap{transform:translateY(12px)}
  .nav-links{position:relative;top:6px;justify-self:end}
}


/* ADMIN CAMERAS */
.admin-page{grid-column:2}
.cameras-admin-panel{margin-top:22px}
.admin-camera-list{display:grid}
.admin-camera-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px 100px;
  gap:18px;
  align-items:center;
  min-height:72px;
  padding:12px 8px;
  border-top:1px solid #12313a;
}
.admin-camera-row:first-child{border-top:0}
.admin-camera-name{font-size:15px;font-weight:700;color:var(--text)}
.admin-camera-meta{margin-top:6px;font-size:12px;color:var(--muted)}
.admin-camera-online{color:var(--green)}
.admin-camera-offline{color:var(--red)}
.admin-camera-catalog-state{font-size:12px;font-weight:700}
.admin-camera-catalog-state.visible{color:var(--green)}
.admin-camera-catalog-state.hidden{color:var(--red)}
.admin-camera-toggle{min-width:92px;font-weight:700}
.admin-camera-toggle.hide{border-color:#7c3439;color:#ff8b91}
.admin-camera-toggle.restore{border-color:#246b49;color:#6ee7a5}
.admin-camera-toggle:disabled{opacity:.5;cursor:wait}
.admin-camera-empty{padding:24px 8px;color:var(--muted)}
.admin-camera-empty.error{color:var(--red)}

@media(max-width:850px){
  .admin-page{grid-column:auto}
  .admin-camera-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    padding:13px 4px;
  }
  .admin-camera-catalog-state{
    grid-column:1;
    grid-row:2;
  }
  .admin-camera-toggle{
    grid-column:2;
    grid-row:1 / span 2;
  }
}