/* ==========================================================
   NOS MEDIA — ADMIN RESTYLE
   File: /css/admin-panel.css
   Scope: Admin pages only (login + admin panels)
   ========================================================== */

:root{
  --adm-bg-0: #070a12;
  --adm-bg-1: #0b1020;
  --adm-bg-2: #0f1630;

  --adm-card: rgba(255,255,255,.06);
  --adm-card-2: rgba(255,255,255,.085);
  --adm-border: rgba(255,255,255,.12);
  --adm-border-2: rgba(255,255,255,.18);

  --adm-text: rgba(255,255,255,.92);
  --adm-muted: rgba(255,255,255,.66);

  --adm-accent: #00d4ff;
  --adm-accent-2: #ff2d2d;
  --adm-good: #35ff9a;
  --adm-warn: #ffd166;

  --adm-radius: 18px;
  --adm-radius-lg: 26px;

  --adm-shadow: 0 18px 60px rgba(0,0,0,.55);
  --adm-shadow-soft: 0 10px 30px rgba(0,0,0,.35);

  --adm-blur: 14px;
  --adm-max: 1200px;
  --adm-pad: clamp(14px, 2.2vw, 22px);
}

html, body{ height: 100%; }
body{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(0,212,255,.20), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, rgba(255,45,45,.14), transparent 62%),
    linear-gradient(180deg, var(--adm-bg-0), var(--adm-bg-1) 40%, var(--adm-bg-2));
  color: var(--adm-text);
}

.adm-shell{
  max-width: var(--adm-max);
  margin: 0 auto;
  padding: calc(var(--adm-pad) + 6px) var(--adm-pad) 64px;
}

.adm-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--adm-shadow-soft);
  backdrop-filter: blur(var(--adm-blur));
}

.adm-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.adm-brand img{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  border: 1px solid var(--adm-border);
}
.adm-brand .adm-title{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  min-width: 0;
}
.adm-brand .adm-title strong{
  font-size: 15px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.adm-brand .adm-title span{
  font-size: 12px;
  color: var(--adm-muted);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.adm-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.adm-btn, button, .btn, a.btn{
  appearance:none;
  border: 1px solid var(--adm-border);
  background: rgba(255,255,255,.06);
  color: var(--adm-text);
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 600;
  letter-spacing:.2px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.adm-btn:hover, button:hover, .btn:hover, a.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.095);
  border-color: var(--adm-border-2);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.adm-btn:active, button:active, .btn:active, a.btn:active{
  transform: translateY(0);
}

.adm-btn--primary{
  border-color: rgba(0,212,255,.35);
  background: linear-gradient(180deg, rgba(0,212,255,.22), rgba(0,212,255,.10));
}
.adm-btn--danger{
  border-color: rgba(255,45,45,.35);
  background: linear-gradient(180deg, rgba(255,45,45,.18), rgba(255,45,45,.08));
}

.adm-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.adm-card{
  grid-column: span 12;
  border: 1px solid var(--adm-border);
  background: linear-gradient(180deg, var(--adm-card-2), var(--adm-card));
  border-radius: var(--adm-radius-lg);
  padding: 16px;
  box-shadow: var(--adm-shadow);
  backdrop-filter: blur(var(--adm-blur));
  overflow:hidden;
  position:relative;
}
.adm-card::before{
  content:"";
  position:absolute;
  inset: -2px;
  background:
    radial-gradient(400px 220px at 15% 10%, rgba(0,212,255,.18), transparent 65%),
    radial-gradient(420px 260px at 85% 20%, rgba(255,45,45,.12), transparent 70%);
  pointer-events:none;
  opacity:.9;
}
.adm-card > *{ position:relative; }

.adm-card h1, .adm-card h2, .adm-card h3{
  margin: 0 0 10px;
  letter-spacing:.2px;
}
.adm-card p, .adm-muted{ color: var(--adm-muted); }

input, select, textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--adm-border);
  background: rgba(10, 14, 28, .55);
  color: var(--adm-text);
  padding: 11px 12px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(0,212,255,.55);
  box-shadow: 0 0 0 4px rgba(0,212,255,.14);
  background: rgba(10, 14, 28, .70);
}
label{ color: rgba(255,255,255,.84); font-weight: 600; }

table{
  width: 100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 16px;
  border: 1px solid var(--adm-border);
  background: rgba(255,255,255,.04);
}
thead th{
  text-align:left;
  font-size: 12px;
  letter-spacing:.25px;
  color: rgba(255,255,255,.72);
  padding: 12px 12px;
  background: rgba(255,255,255,.06);
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: blur(10px);
}
tbody td{
  padding: 12px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
tbody tr:hover{
  background: rgba(255,255,255,.05);
}

.adm-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--adm-border);
  background: rgba(255,255,255,.06);
  font-weight: 700;
  font-size: 12px;
}
.adm-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--adm-accent);
  box-shadow: 0 0 0 3px rgba(0,212,255,.15);
}
.adm-dot--good{ background: var(--adm-good); box-shadow: 0 0 0 3px rgba(53,255,154,.16); }
.adm-dot--warn{ background: var(--adm-warn); box-shadow: 0 0 0 3px rgba(255,209,102,.16); }
.adm-dot--bad{ background: var(--adm-accent-2); box-shadow: 0 0 0 3px rgba(255,45,45,.16); }

.adm-login{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 26px;
}
.adm-login .adm-card{
  max-width: 520px;
  width: 100%;
  padding: 20px;
}
.adm-login .adm-brand{
  justify-content:center;
  margin-bottom: 10px;
}
.adm-login form{
  display:grid;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 760px){
  .adm-card{ padding: 18px; }
  .adm-grid{ gap: 16px; }
}
@media (min-width: 1020px){
  .adm-grid .adm-card--half{ grid-column: span 6; }
  .adm-grid .adm-card--third{ grid-column: span 4; }
}

/* ==========================
   ADMIN DASHBOARD (home-admin.php)
   ========================== */

main.admin-shell{
  padding: 22px 0 0;
}

.container.admin-wide{
  max-width: 1180px; /* a bit wider for big screens */
}

.dash-top{
  margin: 18px 0 16px;
  padding: 18px 18px 16px;
  border-radius: var(--adm-radius-lg);
  border: 1px solid var(--adm-border);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow: var(--adm-shadow-soft);
  backdrop-filter: blur(var(--adm-blur));
  position: relative;
  overflow: hidden;
}
.dash-top::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 280px at 12% 18%, rgba(0,212,255,.22), transparent 65%),
    radial-gradient(520px 320px at 86% 22%, rgba(255,45,45,.16), transparent 70%);
  opacity:.9;
  pointer-events:none;
}
.dash-top > *{ position:relative; }

.dash-top h1{
  margin: 0 0 6px;
  font-size: clamp(34px, 4.6vw, 56px);
  letter-spacing: -0.02em;
}
.dash-top .muted{
  margin: 0;
  color: var(--adm-muted);
  font-size: 14px;
  line-height: 1.5;
}

.dash-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
  padding-bottom: 18px;
}

.dash-card{
  border: 1px solid var(--adm-border);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border-radius: var(--adm-radius-lg);
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.36);
  backdrop-filter: blur(var(--adm-blur));
  position: relative;
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.dash-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 240px at 18% 10%, rgba(0,212,255,.14), transparent 60%),
    radial-gradient(420px 260px at 82% 18%, rgba(255,45,45,.10), transparent 70%);
  opacity:.55;
  pointer-events:none;
}
.dash-card > *{ position:relative; }

.dash-card:hover{
  transform: translateY(-2px);
  border-color: var(--adm-border-2);
  box-shadow: 0 26px 70px rgba(0,0,0,.48);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
}

.dash-card h2{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: .1px;
}
.dash-card h2 i{
  width: 36px;
  height: 36px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  border: 1px solid rgba(0,212,255,.22);
  background: linear-gradient(180deg, rgba(0,212,255,.18), rgba(0,212,255,.06));
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

.dash-card p{
  margin: 0 0 12px;
  color: var(--adm-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.dash-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

a.btn, .btn{
  border: 1px solid var(--adm-border);
  background: rgba(255,255,255,.06);
  color: var(--adm-text);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing:.15px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
a.btn:hover, .btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.095);
  border-color: var(--adm-border-2);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
a.btn.primary, .btn.primary{
  border-color: rgba(0,212,255,.35);
  background: linear-gradient(180deg, rgba(0,212,255,.20), rgba(0,212,255,.08));
}

/* Header polish inside Admin */
#site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(var(--adm-blur));
  background: linear-gradient(180deg, rgba(10,14,28,.68), rgba(10,14,28,.22));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#site-header .container.nav{
  padding-top: 10px;
  padding-bottom: 10px;
}