/* ════════════════════════════════════════════════════════════════════════════
   PANOU DE ADMIN — platformă multi-site
   Păstrează numele de clase folosite de paginile existente (.layout, .main,
   .sidebar, .topbar, .card, .btn, .flash, .filters, .pillrow …) și le dă un
   aspect nou. Nicio pagină veche nu trebuie modificată ca să arate bine.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --p:#E0552B;          /* accent principal */
  --p-d:#B83E19;
  --d:#14202B;          /* bară laterală */
  --d-2:#1D2D3B;
  --bg:#F4F6F8;
  --card:#ffffff;
  --line:#E3E8EC;
  --ink:#12202A;
  --muted:#697B87;
  --ok:#15803D;   --ok-bg:#DCFCE7;
  --warn:#92400E; --warn-bg:#FEF3C7;
  --err:#991B1B;  --err-bg:#FEE2E2;
  --info:#1D4ED8; --info-bg:#DBEAFE;
  --r:12px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.6;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
input,select,textarea,button{font:inherit;color:inherit;}
ul{list-style:none;}
h1,h2,h3{line-height:1.25;letter-spacing:-.02em;}

/* ── LAYOUT ───────────────────────────────────────────────────────────── */
.layout{display:grid;grid-template-columns:248px 1fr;min-height:100vh;}
.main{min-width:0;display:flex;flex-direction:column;}

.sidebar{background:var(--d);color:rgba(255,255,255,.72);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;}
.sidebar h2{padding:22px 20px;margin:0;border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff;font-size:16px;font-weight:800;letter-spacing:-.01em;}
.sidebar h2 small{display:block;margin-top:3px;font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--p);}
.sidebar nav{padding:12px 10px;display:grid;gap:2px;align-content:start;overflow-y:auto;flex:1;}
.sidebar nav a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:9px;
  font-size:13.8px;font-weight:600;transition:background .2s,color .2s;}
.sidebar nav a .ic{width:18px;text-align:center;font-size:14px;opacity:.85;}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff;}
.sidebar nav a.active{background:var(--p);color:#fff;}
.sidebar nav a.nav-sep{margin-top:10px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px;border-radius:0;}
.sidebar nav .group{margin:14px 0 4px;padding:0 13px;font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.34);}
.sidebar-foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;
  color:rgba(255,255,255,.4);}
.sidebar-foot a{color:var(--p);font-weight:700;}
.sidebar-toggle{display:none;position:fixed;top:12px;left:12px;z-index:60;width:44px;height:44px;
  border:0;border-radius:10px;background:var(--d);color:#fff;font-size:19px;cursor:pointer;}

/* ── TOPBAR ───────────────────────────────────────────────────────────── */
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:15px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  position:sticky;top:0;z-index:20;}
.topbar h1{font-size:20px;font-weight:800;}
.topbar .actions{display:flex;gap:9px;flex-wrap:wrap;}

/* conținutul paginii: orice după topbar */
.main > :not(.topbar){margin:0 26px;}
.main > :not(.topbar):first-of-type{margin-top:22px;}
.main > *:last-child{margin-bottom:30px;}

/* ── CARD ─────────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;margin-bottom:20px;}
.card > h2{font-size:15px;font-weight:700;margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--line);}
.card.flush{padding:0;}
.card.flush > h2{padding:16px 20px;margin-bottom:0;}

/* ── STATISTICI ───────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:20px;}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:19px;
  position:relative;overflow:hidden;}
.stat::after{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--p);}
.stat .k{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);}
.stat .v{font-size:31px;font-weight:800;letter-spacing:-.03em;margin-top:5px;line-height:1;}
.stat .s{font-size:12.5px;color:var(--muted);margin-top:5px;}
.stat a{color:var(--p);font-weight:700;}

/* ── TABELE ───────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;}
th{text-align:left;padding:11px 16px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:#FAFBFC;border-bottom:1px solid var(--line);
  white-space:nowrap;}
td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle;}
tr:last-child td{border-bottom:0;}
tbody tr:hover{background:#FAFBFC;}
td img.thumb,img.thumb{width:58px;height:44px;object-fit:cover;border-radius:7px;background:var(--bg);}
.table-wrap{overflow-x:auto;}

/* ── BUTOANE ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;
  padding:0 16px;border:0;border-radius:9px;background:var(--p);color:#fff;font-size:13.5px;
  font-weight:700;cursor:pointer;transition:filter .18s,transform .18s;white-space:nowrap;}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px);}
.btn.secondary{background:#fff;border:1.5px solid var(--line);color:var(--ink);}
.btn.secondary:hover{border-color:var(--p);color:var(--p);}
.btn.dark{background:var(--d);color:#fff;}
.btn.danger{background:#DC2626;color:#fff;}
.btn.small,.btn-s{min-height:32px;padding:0 11px;font-size:12px;border-radius:7px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;}
.btnrow{display:flex;gap:7px;flex-wrap:wrap;}

/* ── FORMULARE ────────────────────────────────────────────────────────── */
label{display:block;margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=url],input[type=tel],input[type=file],select,textarea{
  width:100%;min-height:44px;padding:10px 13px;border:1.5px solid var(--line);border-radius:9px;
  background:#fff;outline:none;margin-bottom:15px;transition:border-color .18s,box-shadow .18s;}
textarea{min-height:120px;resize:vertical;line-height:1.7;}
input:focus,select:focus,textarea:focus{border-color:var(--p);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 14%,transparent);}
input[type=color]{width:64px;height:44px;padding:4px;border:1.5px solid var(--line);border-radius:9px;
  background:#fff;margin-bottom:15px;cursor:pointer;}
input[type=checkbox],input[type=radio]{width:17px;height:17px;min-height:0;margin:0;vertical-align:middle;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 16px;}
.full{grid-column:1/-1;}
.hint{font-size:12px;color:var(--muted);margin:-9px 0 15px;}
.check{display:flex;align-items:center;gap:10px;margin-bottom:15px;
  font-size:14px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;}
.sticky-save{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);
  padding:14px 22px;margin:0 -22px -22px;display:flex;gap:10px;flex-wrap:wrap;border-radius:0 0 var(--r) var(--r);}

/* ── MESAJE ───────────────────────────────────────────────────────────── */
.flash{padding:12px 16px;border-radius:9px;font-weight:600;font-size:13.5px;margin-bottom:18px;
  background:var(--ok-bg);color:var(--ok);border-left:4px solid var(--ok);}
.flash.error{background:var(--err-bg);color:var(--err);border-left-color:#DC2626;}
.flash.info{background:var(--info-bg);color:var(--info);border-left-color:#2563EB;}

/* ── BADGE-URI ────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;
  font-size:11.5px;font-weight:700;white-space:nowrap;}
.badge.ok{background:var(--ok-bg);color:var(--ok);}
.badge.warn{background:var(--warn-bg);color:var(--warn);}
.badge.err{background:var(--err-bg);color:var(--err);}
.badge.info{background:var(--info-bg);color:var(--info);}
.badge.off{background:#F1F5F9;color:#64748B;}
.badge.hot{background:color-mix(in srgb,var(--p) 15%,#fff);color:var(--p-d);}

/* clasele folosite de paginile existente */
.pillrow{display:flex;flex-wrap:wrap;gap:5px;}
.pillrow .p{background:#EEF2FF;color:#33408A;font-size:11.5px;font-weight:700;padding:3px 9px;
  border-radius:20px;white-space:nowrap;}
.pillrow .none{background:var(--err-bg);color:var(--err);}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.filters select,.filters input{margin-bottom:0;min-height:40px;max-width:260px;}
.msgbox{white-space:pre-wrap;background:#FAFBFC;border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;margin-top:8px;font-size:13.5px;}
.unread{font-weight:800;}
.muted{color:var(--muted);font-size:12.5px;}
.sitechecks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:15px;}
.sitechecks label{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:9px;cursor:pointer;background:#fff;font-size:14px;font-weight:600;color:var(--ink);
  text-transform:none;letter-spacing:0;margin:0;transition:border-color .18s,background .18s;}
.sitechecks label:hover{border-color:var(--p);background:#FFFBF9;}
.sitechecks input:checked + span{font-weight:800;color:var(--p-d);}
.sitechecks .dom{display:block;font-size:12px;color:var(--muted);font-weight:500;}

/* ── GALERIE ──────────────────────────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;}
.gallery figure{position:relative;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--bg);}
.gallery img{width:100%;height:98px;object-fit:cover;}
.gallery .x{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  background:#DC2626;color:#fff;border:0;cursor:pointer;font-size:14px;line-height:1;
  display:grid;place-items:center;}

/* ── EMPTY ────────────────────────────────────────────────────────────── */
.empty{padding:56px 24px;text-align:center;color:var(--muted);}
.empty h3{font-size:18px;color:var(--ink);margin-bottom:8px;}

/* ── LOGIN ────────────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(60rem 40rem at 12% -10%,color-mix(in srgb,var(--p) 30%,transparent),transparent 60%),
             linear-gradient(160deg,var(--d),var(--d-2));}
.login-box{width:100%;max-width:420px;background:#fff;border-radius:18px;padding:36px 32px;
  box-shadow:0 30px 80px rgba(0,0,0,.38);}
.login-box h1{font-size:23px;font-weight:800;margin-bottom:6px;}
.login-box p.sub{color:var(--muted);font-size:14px;margin-bottom:24px;}
.login-box .btn{width:100%;min-height:48px;font-size:15px;}
.login-box label{margin-top:2px;}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .layout{grid-template-columns:1fr;}
  .sidebar{position:static;height:auto;}
  .sidebar h2{padding-left:66px;}
  .sidebar nav{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;}
  .sidebar nav .group,.sidebar-foot{display:none;}
  .sidebar-toggle{display:none;}
  .grid2,.grid3,.grid4{grid-template-columns:1fr;}
  .main > :not(.topbar){margin:0 16px;}
  .topbar{padding:14px 16px;}
}

/* ════════════════════════════════════════════════════════════════════════════
   PLOAIA DE COD
   Un singur <canvas> fix, sub tot conținutul. Cardurile și bara de sus rămân
   opace, deci textul de citit nu are peste el nimic care se mișcă — ploaia se
   vede doar în spațiile libere și, mai tare, prin bara laterală, care devine
   ușor transparentă. Se oprește singură când fila nu e la vedere și dacă
   sistemul cere mai puțină mișcare.
   ════════════════════════════════════════════════════════════════════════════ */
#codeRain{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:0;transition:opacity .8s ease;
}
/* Destul cât să se vadă, nu cât să te împiedice la citit. */
#codeRain.on{opacity:.5;}

/* Conținutul stă deasupra ploii. */
.layout{position:relative;z-index:1;}

/* Bara laterală lasă ploaia să se vadă prin ea — acolo arată cel mai bine,
   fiind fundal închis. Fără `backdrop-filter` rămâne doar mai transparentă,
   ceea ce e în regulă. */
body.rain-on .sidebar{
  background:rgba(20,32,43,.74);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
body.rain-on .sidebar nav a.active{background:rgba(224,85,43,.92);}

/* Comutatorul din subsolul barei laterale. */
.rain-toggle{
  display:flex;align-items:center;gap:8px;margin-top:9px;
  background:none;border:0;padding:0;cursor:pointer;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.45);transition:color .2s;
}
.rain-toggle:hover{color:rgba(255,255,255,.8);}
.rain-toggle i{
  width:26px;height:15px;border-radius:99px;flex:0 0 auto;
  background:rgba(255,255,255,.18);position:relative;transition:background .25s;
}
.rain-toggle i::after{
  content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:#fff;transition:transform .25s;
}
.rain-toggle[aria-pressed="true"] i{background:var(--p);}
.rain-toggle[aria-pressed="true"] i::after{transform:translateX(11px);}

@media(prefers-reduced-motion:reduce){
  #codeRain{display:none;}
  body.rain-on .sidebar{background:var(--d);backdrop-filter:none;}
}

/* ═══ PREVIZUALIZAREA DESIGN-ULUI, în formularul de site ═══════════════════
   Poza e a paginii ÎNTREGI, făcută din șablonul real. Aici intră într-o
   fereastră mică prin care se derulează până jos — nu se micșorează toată
   pagina, fiindcă atunci n-ar mai fi lizibil nimic din ea. */
.theme-preview{
  display:grid;grid-template-columns:400px minmax(0,1fr);
  gap:20px;align-items:start;
  margin:6px 0 20px;padding:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
}
.theme-preview-shot{
  position:relative;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg);
}
/* Fereastra prin care se vede pagina. Înălțimea e fixă; restul se derulează. */
.theme-preview-scroll{
  height:300px;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;
  /* pe iPad și pe touch, derularea cu degetul în interior */
  -webkit-overflow-scrolling:touch;
}
.theme-preview-scroll img{width:100%;height:auto;display:block;}
.theme-preview-scroll img:not([src]){visibility:hidden;}
.theme-preview-zoom{
  position:absolute;right:9px;bottom:9px;
  padding:6px 11px;border:0;border-radius:99px;cursor:pointer;
  background:rgba(18,32,42,.86);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s;
}
.theme-preview-zoom:hover{background:var(--p);}
.theme-preview-side h4{margin:0 0 5px;font-size:15px;}
.theme-preview-side p{margin:0 0 8px;font-size:12.5px;line-height:1.6;}
.theme-preview-side .hint{color:var(--muted);font-size:11.5px;}

/* Mărirea: aceeași poză, pe lățime mai mare, tot cu derulare.
   Se închide cu clic pe fundal sau cu Escape. */
.theme-zoom{
  position:fixed;inset:0;z-index:9000;
  background:rgba(10,18,24,.92);
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px;overflow-y:auto;cursor:zoom-out;
}
.theme-zoom[hidden]{display:none;}
.theme-zoom img{
  max-width:940px;width:100%;height:auto;
  border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5);
}

@media(max-width:1100px){
  .theme-preview{grid-template-columns:1fr;}
  .theme-preview-shot{max-width:400px;}
}