/* Admin UI — Space Creative Türkiye */
:root{ color-scheme: dark; }
.admin-shell{max-width:1180px;margin:0 auto;padding:18px}
.admin-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.admin-brand{display:flex;align-items:center;gap:12px}
.admin-nav{display:flex;gap:10px;flex-wrap:wrap}
.admin-nav a{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:rgba(255,255,255,.84);font-weight:700}
.admin-nav a.active{border-color:rgba(57,230,198,.45);background:linear-gradient(90deg, rgba(57,230,198,.18), rgba(139,92,255,.14))}
.codebox{font-family:var(--mono);font-size:12px;line-height:1.6;padding:12px;border-radius:16px;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);overflow:auto}
.small{font-size:12px;color:rgba(255,255,255,.65)}


/* Print styles for Offer/Proforma */
@media print{
  .announce, .admin-top, .admin-nav, #btnLogout, .btn, .icon-btn, .drawer, .toast, .hr{display:none !important}
  body{background:white !important;color:black !important}
  .card{box-shadow:none !important;border:1px solid #ddd !important;background:white !important}
  .muted{color:#444 !important}
  a{color:black !important;text-decoration:none !important}
  .admin-shell{max-width:none;margin:0;padding:0}
}


/* Brand logo in admin */
.admin-logo{height:38px;width:auto;display:block}
.admin-brand-mark{display:flex;align-items:center;gap:10px}
@media (max-width:720px){ .admin-logo{height:32px} }


/* ===== Brand Intro Overlay (v6) ===== */
#brandIntroOverlay{
  position:fixed; inset:0;
  z-index:99999;
  display:none;
  align-items:center; justify-content:center;
  background: radial-gradient(1200px 700px at 50% 40%, rgba(122,49,255,.20), rgba(8,10,20,.96));
  backdrop-filter: blur(6px);
}
#brandIntroOverlay.show{ display:flex; }
#brandIntroOverlay.instant{ background: rgba(8,10,20,.92); }
.brandIntroInner{ display:flex; align-items:center; justify-content:center; }
.brandIntroLogo{
  width:min(220px, 58vw);
  height:auto;
  transform: translateY(8px) scale(.96);
  opacity:0;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
  animation: brandIntroEnter 650ms ease-out forwards;
}
#brandIntroOverlay.exit .brandIntroLogo{
  animation: brandIntroExit 280ms ease-in forwards;
}
@keyframes brandIntroEnter{
  0%{ opacity:0; transform: translateY(14px) scale(.92); }
  55%{ opacity:1; transform: translateY(-6px) scale(1.02); }
  100%{ opacity:1; transform: translateY(-2px) scale(1.00); }
}
@keyframes brandIntroExit{
  0%{ opacity:1; transform: translateY(-2px) scale(1.00); }
  100%{ opacity:0; transform: translateY(-18px) scale(.92); }
}



/* ===== Admin Sidebar Layout (v9) ===== */
.admin-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:18px;
  align-items:start;
}
.admin-sidebar{
  position:sticky;
  top:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,18,30,.75);
  border-radius:18px;
  padding:14px;
  backdrop-filter: blur(10px);
}
.admin-sidebar .sb-title{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:10px;
}
.admin-sidebar .sb-title img{height:34px;width:auto}
.admin-sidebar .sb-title .t{
  font-weight:800; letter-spacing:.02em;
  line-height:1.1;
}
.admin-sidebar nav{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.sb-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  color: rgba(255,255,255,.88);
  text-decoration:none;
  border:1px solid transparent;
}
.sb-item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
.sb-item.active{
  background: rgba(122,49,255,.18);
  border-color: rgba(122,49,255,.45);
  color:#fff;
}
.sb-ico{
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius:10px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  font-size:14px;
}
.sb-section{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
}
.sb-small{font-size:12px; opacity:.75; margin:8px 10px 6px}
/* Responsive: collapse sidebar into top "drawer" */
@media (max-width: 980px){
  .admin-layout{ grid-template-columns: 1fr; }
  .admin-sidebar{ position:relative; top:auto; }
}

.btn.active{outline:2px solid rgba(122,49,255,.55)}

/* ===== Mobile: inline grid stacking (admin pages) ===== */
/* Admin screens include several inline grid-template-columns declarations.
   Override them on smaller screens to keep everything fully responsive. */
@media (max-width: 980px){
  [style*="grid-template-columns: 1fr 420px"],
  [style*="grid-template-columns: 1fr 420px;"],
  [style*="grid-template-columns:1fr 420px"],
  [style*="grid-template-columns:1fr 420px;"]{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 720px){
  /* Any inline grid columns become single column */
  [style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
  /* Live preview iframe: avoid oversized height on small screens */
  #livePreview{ height: 420px !important; }
}


/* V19 responsive patch */
@media (max-width: 900px){
  .admin-layout{grid-template-columns: 1fr !important;}
  .admin-sidebar{position: sticky; top:0; z-index:10;}
}
@media (max-width: 560px){
  .admin-top{flex-direction:column; align-items:flex-start; gap:10px;}
  .admin-top-actions{width:100%; flex-wrap:wrap;}
  .admin-top-actions .btn{width:100%;}
}