/* =====================================================
   MedSina Vue /admin/ — точная копия стиля panel-m3d
   Scope: body.admin-page (добавляет admin-vue-init.js)
   ===================================================== */

@keyframes adm-stat-in {
  from { opacity:0; transform:scale(.94) translateY(12px) }
  to   { opacity:1; transform:scale(1)   translateY(0)    }
}
@keyframes adm-fade-up {
  from { opacity:0; transform:translateY(16px) }
  to   { opacity:1; transform:translateY(0)    }
}
@keyframes adm-row-in {
  from { opacity:0; transform:translateX(8px) }
  to   { opacity:1; transform:translateX(0)   }
}
@keyframes adm-logo-glow {
  0%,100% { box-shadow:0 4px 12px rgba(37,99,235,.4) }
  50%     { box-shadow:0 4px 26px rgba(37,99,235,.75) }
}

/* ═══════════════ BODY & WRAPPER ═══════════════ */
body.admin-page {
  background: #f0f4f8 !important;
}
body.admin-page .min-h-screen.flex,
body.admin-page .bg-slate-50 {
  background: #f0f4f8 !important;
}

/* ═══════════════ SIDEBAR ═══════════════ */
body.admin-page aside {
  background: linear-gradient(180deg,
    #0f172a 0%, #1a2744 35%, #1e293b 65%, #0f2027 100%) !important;
  border-right: none !important;
  box-shadow: 4px 0 24px rgba(0,0,0,.28) !important;
  width: 210px !important;
  min-width: 210px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

/* Logo */
body.admin-page aside > div:first-child {
  padding: 18px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.025) !important;
}
body.admin-page aside .bg-sky-500.rounded-lg {
  background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
  animation: adm-logo-glow 3s ease-in-out infinite !important;
  width: 28px !important; height: 28px !important;
  border-radius: 7px !important;
  flex-shrink: 0 !important;
}
body.admin-page aside .text-lg.font-bold {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  font-size: 15px !important;
}
body.admin-page aside span.text-sky-500 {
  color: #60a5fa !important;
  -webkit-text-fill-color: #60a5fa !important;
}

/* Nav */
body.admin-page aside nav {
  padding: 10px 8px !important;
  flex: 1 !important;
  overflow-y: auto !important;
}
body.admin-page aside nav a {
  border-radius: 8px !important;
  padding: 9px 12px !important;
  margin: 1px 0 !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: all .18s ease !important;
  position: relative !important;
  border-left: 3px solid transparent !important;
}
body.admin-page aside nav a span.w-5 {
  width: 16px !important; height: 16px !important;
  flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: transform .2s !important;
}
body.admin-page aside nav a:hover {
  background: rgba(255,255,255,.07) !important;
  color: #e2e8f0 !important;
  text-decoration: none !important;
  transform: translateX(2px) !important;
}
body.admin-page aside nav a:hover span.w-5 { transform: scale(1.12) !important }

/* Active nav item — gradient как в panel-m3d */
body.admin-page aside nav a.bg-sky-50,
body.admin-page aside nav a.text-sky-600 {
  background: linear-gradient(135deg,
    rgba(37,99,235,.30) 0%,
    rgba(13,148,136,.18) 100%) !important;
  color: #e0f2fe !important;
  -webkit-text-fill-color: #e0f2fe !important;
  font-weight: 600 !important;
  border-left: 3px solid #0d9488 !important;
  box-shadow: 0 2px 12px rgba(37,99,235,.15),
              inset 0 0 20px rgba(37,99,235,.07) !important;
}

/* User footer */
body.admin-page aside > div:last-child {
  padding: 14px 16px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(0,0,0,.14) !important;
}
body.admin-page aside .bg-slate-200.rounded-full {
  background: linear-gradient(135deg, #2563eb, #0d9488) !important;
  color: #fff !important; font-weight: 700 !important;
}
body.admin-page aside .text-sm.font-medium.truncate {
  color: #f1f5f9 !important; -webkit-text-fill-color: #f1f5f9 !important;
}
body.admin-page aside .text-xs.text-slate-400.truncate {
  color: #64748b !important; -webkit-text-fill-color: #64748b !important;
}
body.admin-page aside button {
  color: #f87171 !important; font-size: 12px !important; font-weight: 600 !important;
}
body.admin-page aside button:hover { color: #ef4444 !important }

/* ═══════════════ MAIN CONTENT ═══════════════ */
body.admin-page main {
  background: #f0f4f8 !important;
  flex: 1 !important;
  overflow: auto !important;
}
body.admin-page main > div {
  padding: 28px 32px !important;
  animation: adm-fade-up .4s ease both !important;
}

/* Page title */
body.admin-page main .text-2xl.font-bold,
body.admin-page main h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  letter-spacing: -.025em !important;
}
body.admin-page .flex.items-center.justify-between.mb-6 {
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(226,232,240,.7) !important;
  margin-bottom: 22px !important;
}

/* ═══════════════ STAT CARDS ═══════════════
   CSS trick: make card flex-row so icon sits LEFT
   and value sits RIGHT — matching panel-m3d layout
   ═══════════════════════════════════════════════ */
body.admin-page .bg-white.rounded-2xl.p-5.border.border-slate-100.shadow-sm {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(226,232,240,.8) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.07) !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease !important;
  animation: adm-stat-in .45s ease both !important;
  /* ★ KEY: make it flex-row so icon is left, value is right */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 90px !important;
}
/* stagger */
body.admin-page .grid.gap-4.mb-8 > div:nth-child(1) { animation-delay:.04s !important }
body.admin-page .grid.gap-4.mb-8 > div:nth-child(2) { animation-delay:.08s !important }
body.admin-page .grid.gap-4.mb-8 > div:nth-child(3) { animation-delay:.12s !important }
body.admin-page .grid.gap-4.mb-8 > div:nth-child(4) { animation-delay:.16s !important }

/* Gradient top-line on hover */
body.admin-page .bg-white.rounded-2xl.p-5::before {
  content:'' !important; position:absolute !important;
  top:0; left:0; right:0 !important; height:3px !important;
  background: linear-gradient(90deg, #2563eb, #0d9488) !important;
  opacity:0 !important; transition:opacity .22s !important;
}
body.admin-page .bg-white.rounded-2xl.p-5:hover::before { opacity:1 !important }
body.admin-page .bg-white.rounded-2xl.p-5:hover {
  transform:translateY(-4px) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.11) !important;
}

/* Inner flex row (icon + label): becomes the LEFT column */
body.admin-page .bg-white.rounded-2xl.p-5 > .flex.items-center.justify-between {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  padding: 18px 16px 18px 20px !important;
  margin-bottom: 0 !important;
}

/* Icon (w-10 h-10) */
body.admin-page .w-10.h-10.rounded-xl {
  width: 48px !important; height: 48px !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.1) !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1) !important;
  flex-shrink: 0 !important;
}
body.admin-page .bg-white.rounded-2xl.p-5:hover .w-10.h-10.rounded-xl {
  transform: scale(1.1) rotate(-5deg) !important;
}
body.admin-page .w-5.h-5 { width:20px !important; height:20px !important }

/* Label (text-xs text-slate-400) sits below icon in left column */
body.admin-page .bg-white.rounded-2xl.p-5 > .flex > span.text-xs.text-slate-400 {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  max-width: 56px !important;
}

/* Value (text-3xl font-bold): RIGHT column */
body.admin-page .bg-white.rounded-2xl.p-5 > .text-3xl.font-bold {
  flex: 1 !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
}

/* Icon bg colours */
body.admin-page .bg-sky-50    { background:linear-gradient(135deg,#dbeafe,#bfdbfe) !important }
body.admin-page .bg-emerald-50 { background:linear-gradient(135deg,#dcfce7,#bbf7d0) !important }
body.admin-page .bg-violet-50  { background:linear-gradient(135deg,#f3e8ff,#e9d5ff) !important }
body.admin-page .bg-amber-50   { background:linear-gradient(135deg,#ffedd5,#fed7aa) !important }
body.admin-page .bg-pink-50    { background:linear-gradient(135deg,#fce7f3,#fbcfe8) !important }
body.admin-page .bg-teal-50    { background:linear-gradient(135deg,#ccfbf1,#99f6e4) !important }
/* Icon colours */
body.admin-page .text-sky-500    { color:#2563eb !important }
body.admin-page .text-emerald-500{ color:#059669 !important }
body.admin-page .text-violet-500 { color:#7c3aed !important }
body.admin-page .text-amber-500  { color:#d97706 !important }
body.admin-page .text-pink-500   { color:#db2777 !important }
body.admin-page .text-teal-500   { color:#0d9488 !important }

/* ═══════════════ CONTENT CARDS (p-6) ═══════════════ */
body.admin-page .bg-white.rounded-2xl.p-6.border.border-slate-100 {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(226,232,240,.8) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.06) !important;
  padding: 22px !important;
  animation: adm-fade-up .45s ease both !important;
  animation-delay: .1s !important;
}
body.admin-page main h2.text-lg {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  letter-spacing: -.01em !important;
  margin-bottom: 16px !important;
}

/* ═══════════════ RECENT ARTICLES LIST ═══════════════ */
body.admin-page a.flex.items-center.gap-3 {
  padding: 10px 12px !important;
  margin: 0 -12px !important;
  border-radius: 8px !important;
  border-left: 3px solid transparent !important;
  transition: all .15s ease !important;
  text-decoration: none !important;
}
body.admin-page a.flex.items-center.gap-3:hover {
  background: #f8faff !important;
  border-left-color: #2563eb !important;
  transform: translateX(3px) !important;
  text-decoration: none !important;
}
/* Status dot */
body.admin-page .w-1.h-10.rounded-full { width:3px !important; flex-shrink:0 !important }
body.admin-page .bg-emerald-400 { background:#10b981 !important; box-shadow:0 0 6px rgba(16,185,129,.4) !important }
body.admin-page .bg-amber-400   { background:#f59e0b !important; box-shadow:0 0 5px rgba(245,158,11,.35) !important }

/* Article title in dashboard list (font-medium text-sm truncate) */
body.admin-page .font-medium.text-sm.truncate {
  font-weight: 600 !important;
  color: #1e40af !important;
  -webkit-text-fill-color: #1e40af !important;
  font-size: 13px !important;
}
body.admin-page a.flex.items-center.gap-3:hover .font-medium.text-sm.truncate {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}
/* Meta text */
body.admin-page .flex-1.min-w-0 .text-xs.text-slate-400 {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  font-size: 11px !important;
  margin-top: 2px !important;
}

/* ★ "Опубликовано" → "Опубл." via CSS content trick (dashboard list only) */
body.admin-page .space-y-3 .bg-emerald-50.text-emerald-600.rounded-full {
  font-size: 0 !important;
  background: linear-gradient(135deg,#dcfce7,#bbf7d0) !important;
  color: transparent !important;
  border: 1px solid rgba(134,239,172,.3) !important;
  border-radius: 6px !important;
  padding: 3px 9px !important;
}
body.admin-page .space-y-3 .bg-emerald-50.text-emerald-600.rounded-full::after {
  content: 'Опубл.' !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #15803d !important;
  letter-spacing: .01em !important;
}
body.admin-page .space-y-3 .bg-amber-50.text-amber-600.rounded-full {
  font-size: 0 !important;
  background: linear-gradient(135deg,#fef9c3,#fef08a) !important;
  color: transparent !important;
  border: 1px solid rgba(253,224,71,.3) !important;
  border-radius: 6px !important;
  padding: 3px 9px !important;
}
body.admin-page .space-y-3 .bg-amber-50.text-amber-600.rounded-full::after {
  content: 'Черн.' !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #92400e !important;
}

/* Article list entrance */
body.admin-page .space-y-3 > * { animation: adm-row-in .3s ease both !important }
body.admin-page .space-y-3 > *:nth-child(1) { animation-delay:.10s !important }
body.admin-page .space-y-3 > *:nth-child(2) { animation-delay:.15s !important }
body.admin-page .space-y-3 > *:nth-child(3) { animation-delay:.20s !important }
body.admin-page .space-y-3 > *:nth-child(4) { animation-delay:.25s !important }
body.admin-page .space-y-3 > *:nth-child(5) { animation-delay:.30s !important }

/* ═══════════════ QUICK ACTION CARDS ═══════════════ */
body.admin-page .p-4.border.border-slate-200.rounded-xl {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(226,232,240,.9) !important;
  box-shadow: 0 1px 6px rgba(15,23,42,.05) !important;
  padding: 16px !important;
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s !important;
  text-decoration: none !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}
body.admin-page .p-4.border.border-slate-200.rounded-xl::after {
  content:'' !important; position:absolute !important;
  top:0; left:0; right:0 !important; height:2px !important;
  background: linear-gradient(90deg,#2563eb,#0d9488) !important;
  opacity:0 !important; transition:opacity .2s !important;
}
body.admin-page .p-4.border.border-slate-200.rounded-xl:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.1) !important;
  text-decoration: none !important;
}
body.admin-page .p-4.border.border-slate-200.rounded-xl:hover::after { opacity:1 !important }
body.admin-page .p-4.border.border-slate-200.rounded-xl .w-6.h-6 {
  transition:transform .2s cubic-bezier(.34,1.56,.64,1) !important;
  margin-bottom:10px !important;
}
body.admin-page .p-4.border.border-slate-200.rounded-xl:hover .w-6.h-6 { transform:scale(1.2) !important }
body.admin-page .p-4 .font-medium.text-sm { color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; font-weight:600 !important; font-size:13px !important }
body.admin-page .p-4 .text-xs.text-slate-400 { color:#94a3b8 !important; -webkit-text-fill-color:#94a3b8 !important; font-size:11px !important }
body.admin-page .w-6.h-6.text-sky-500    { color:#2563eb !important }
body.admin-page .w-6.h-6.text-emerald-500{ color:#059669 !important }
body.admin-page .w-6.h-6.text-violet-500 { color:#7c3aed !important }
body.admin-page .w-6.h-6.text-amber-500  { color:#d97706 !important }

/* ═══════════════ PRIMARY BUTTON ═══════════════ */
body.admin-page button.bg-sky-500,
body.admin-page a.bg-sky-500 {
  background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  box-shadow: 0 3px 12px rgba(37,99,235,.35) !important;
  border: none !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
  transition: all .18s !important;
}
body.admin-page button.bg-sky-500:hover,
body.admin-page a.bg-sky-500:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(37,99,235,.45) !important;
}

/* ═══════════════ TOOLBAR ═══════════════ */
body.admin-page main .flex.gap-3.mb-4 {
  background: #fff !important;
  border: 1px solid rgba(226,232,240,.8) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.05) !important;
  margin-bottom: 20px !important;
}
body.admin-page input.border.border-slate-200,
body.admin-page select.border.border-slate-200 {
  background: #fff !important;
  border-color: #e2e8f0 !important;
  border-radius: 8px !important;
  transition: border-color .18s, box-shadow .18s !important;
}
body.admin-page input.border.border-slate-200:focus,
body.admin-page select.border.border-slate-200:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none !important;
}

/* ═══════════════ TABLE ═══════════════ */
body.admin-page .bg-white.rounded-2xl.border.border-slate-100.overflow-hidden {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(226,232,240,.8) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.06) !important;
  animation: adm-fade-up .4s ease both !important;
  animation-delay: .1s !important;
}
body.admin-page table { border-collapse:separate !important; border-spacing:0 !important }
body.admin-page th {
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  padding: 13px 16px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  text-transform: uppercase !important;
}
body.admin-page td {
  padding: 13px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}
body.admin-page tbody tr {
  animation: adm-row-in .28s ease both !important;
  transition: background .12s !important;
}
body.admin-page tbody tr:nth-child(1){animation-delay:.05s!important}
body.admin-page tbody tr:nth-child(2){animation-delay:.09s!important}
body.admin-page tbody tr:nth-child(3){animation-delay:.13s!important}
body.admin-page tbody tr:nth-child(4){animation-delay:.17s!important}
body.admin-page tbody tr:nth-child(5){animation-delay:.21s!important}
body.admin-page tbody tr:nth-child(6){animation-delay:.25s!important}
body.admin-page tbody tr:nth-child(7){animation-delay:.29s!important}
body.admin-page tbody tr:nth-child(8){animation-delay:.33s!important}
body.admin-page tbody tr:hover td { background:#f8faff !important }

/* Article title in table (just .font-medium) */
body.admin-page td .font-medium {
  color: #1e40af !important;
  -webkit-text-fill-color: #1e40af !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  transition: color .15s !important;
}
body.admin-page tr:hover td .font-medium {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}
/* Excerpt */
body.admin-page td .text-xs.text-slate-400.truncate {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  font-size: 11.5px !important;
  margin-top: 2px !important;
}
/* Category badge */
body.admin-page .bg-slate-100.text-slate-600.rounded-full {
  background: linear-gradient(135deg,#f1f5f9,#e2e8f0) !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 2px 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
/* Status badges in table */
body.admin-page td .rounded-full.bg-emerald-50,
body.admin-page td .bg-emerald-50.text-emerald-600 {
  background: linear-gradient(135deg,#dcfce7,#bbf7d0) !important;
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
  border: 1px solid rgba(134,239,172,.3) !important;
  border-radius: 6px !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
body.admin-page td .rounded-full.bg-amber-50,
body.admin-page td .bg-amber-50.text-amber-600 {
  background: linear-gradient(135deg,#fef9c3,#fef08a) !important;
  color: #92400e !important;
  -webkit-text-fill-color: #92400e !important;
  border: 1px solid rgba(253,224,71,.3) !important;
  border-radius: 6px !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
/* Views/Date cells */
body.admin-page td.px-4.py-3.text-slate-600 { color:#475569 !important; font-weight:500 !important }
body.admin-page td.px-4.py-3.text-slate-500.text-xs { color:#64748b !important; font-size:12px !important }

/* Action links */
body.admin-page .text-sky-500.mr-3.text-xs {
  color: #2563eb !important; -webkit-text-fill-color: #2563eb !important;
  font-weight: 600 !important; text-decoration: none !important;
}
body.admin-page .text-sky-500.mr-3.text-xs:hover { color:#1d4ed8 !important; -webkit-text-fill-color:#1d4ed8 !important }
body.admin-page button.text-red-500.text-xs { font-weight:600 !important }

/* ═══════════════ FORMS ═══════════════ */
body.admin-page input.w-full,
body.admin-page textarea.w-full,
body.admin-page select.w-full {
  background: #fff !important;
  border-color: #e2e8f0 !important;
  border-radius: 8px !important;
  transition: border-color .18s, box-shadow .18s !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
}
body.admin-page input.w-full:focus,
body.admin-page textarea.w-full:focus,
body.admin-page select.w-full:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none !important;
}
body.admin-page label.block.text-sm {
  font-weight: 600 !important;
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

/* ═══════════════ SCROLLBAR ═══════════════ */
body.admin-page ::-webkit-scrollbar { width:5px; height:5px }
body.admin-page ::-webkit-scrollbar-track { background:transparent }
body.admin-page ::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:10px }
body.admin-page aside ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14) }