/* ============================================================
   e-Sophia :: Админ панел
   ============================================================ */
:root {
  --bg:        #0a0a14;
  --panel:     #11111f;
  --panel-2:   #171728;
  --line:      #24243c;
  --ink:       #e8e5f2;
  --ink-soft:  #a8a2c0;
  --ink-faint: #6f6a8c;
  --gold:      #d8bd7e;
  --gold-deep: #8f7940;
  --ok:        #5fbf87;
  --warn:      #e0a94b;
  --err:       #e0605f;
  --el-earth:#7ea86a; --el-air:#8fc6e8; --el-water:#5a9bc4; --el-fire:#e07a45; --el-soul:#b08ad6;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 6px;
  --sidebar: 250px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Оформление ---------- */
.admin { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar);
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 1.6rem 0;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.sidebar-brand {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: .12em;
  color: var(--gold);
  padding: 0 1.5rem 1.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
  display: block;
}
.sidebar-brand small { display: block; font-family: var(--sans); font-size: .6rem; letter-spacing: .28em; color: var(--ink-faint); text-transform: uppercase; margin-top: .2rem; }
.side-nav { list-style: none; margin: 0; padding: 0 .7rem; }
.side-nav li { margin-bottom: .15rem; }
.side-nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .62rem .8rem;
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: .9rem;
  transition: background .2s, color .2s;
}
.side-nav a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.side-nav a.active { background: rgba(216,189,126,.12); color: var(--gold); }
.side-nav .ico { width: 18px; text-align: center; opacity: .85; }
.side-sep { margin: 1rem .7rem .5rem; padding: 0 .8rem; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); }
.sidebar-foot { margin-top: auto; padding: 1rem 1.5rem 0; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-faint); }

.content { flex: 1; min-width: 0; padding: 2rem 2.4rem 5rem; }
.topbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.topbar h1 { margin: 0; }
.topbar .spacer { flex: 1; }

/* ---------- Панели ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  margin-bottom: 1.5rem;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.card-head .spacer { flex: 1; }
.muted { color: var(--ink-faint); font-size: .86rem; }
.hint { color: var(--ink-faint); font-size: .8rem; margin-top: .3rem; display: block; }

/* ---------- Форми ---------- */
label { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=url], input[type=datetime-local], select, textarea {
  width: 100%;
  padding: .62rem .8rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  transition: border-color .2s, background .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold-deep); outline: none; background: #0d0d18; }
textarea { min-height: 130px; resize: vertical; line-height: 1.65; }
textarea.tall { min-height: 300px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a8a2c0' fill='none' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 10px; padding-right: 2rem; }
input[type=file] { font-size: .85rem; color: var(--ink-soft); }
input[type=range] { width: 100%; accent-color: var(--gold); }

.field { margin-bottom: 1.1rem; }
.grid  { display: grid; gap: 1.1rem; }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }

.check { display: flex; align-items: center; gap: .6rem; }
.check input { width: 18px; height: 18px; accent-color: var(--gold); }
.check label { margin: 0; text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--ink); }

/* Езикови табове */
.lang-tabs { display: flex; gap: .3rem; margin-bottom: .6rem; }
.lang-tab {
  padding: .3rem .8rem;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink-faint); cursor: pointer;
}
.lang-tab.active { background: var(--gold); border-color: var(--gold); color: #0a0a14; }
.lang-pane { display: none; }
.lang-pane.active { display: block; }

/* ---------- Бутони ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit; font-size: .86rem;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.btn:hover { border-color: var(--gold-deep); color: var(--gold); text-decoration: none; }
.btn-primary { background: var(--gold); border-color: var(--gold); color: #0a0a14; font-weight: 500; }
.btn-primary:hover { background: #eed7a2; border-color: #eed7a2; color: #0a0a14; }
.btn-danger { color: var(--err); border-color: rgba(224,96,95,.35); }
.btn-danger:hover { background: rgba(224,96,95,.14); color: var(--err); border-color: var(--err); }
.btn-sm { padding: .35rem .7rem; font-size: .78rem; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1.4rem; }

/* ---------- Таблици ---------- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
  text-align: left; padding: .7rem .8rem;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
  border-bottom: 1px solid var(--line);
}
td { padding: .8rem; border-bottom: 1px solid rgba(36,36,60,.6); vertical-align: middle; }
tr:hover td { background: rgba(255,255,255,.018); }
td.actions { text-align: right; white-space: nowrap; }
.thumb-sm { width: 56px; height: 40px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); }

/* ---------- Значки ---------- */
.badge {
  display: inline-block;
  padding: .18rem .55rem;
  font-size: .68rem; letter-spacing: .06em;
  border-radius: 20px;
  border: 1px solid currentColor;
  opacity: .9;
}
.badge.pub   { color: var(--ok); }
.badge.draft { color: var(--ink-faint); }
.badge.el    { color: var(--el); border-color: currentColor; }
.dot-el { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--el, var(--ink-faint)); margin-right: .45rem; vertical-align: middle; }

/* ---------- Съобщения ---------- */
.flash { padding: .85rem 1.1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .9rem; border: 1px solid; }
.flash.ok   { color: var(--ok);   border-color: rgba(95,191,135,.35); background: rgba(95,191,135,.08); }
.flash.err  { color: var(--err);  border-color: rgba(224,96,95,.35);  background: rgba(224,96,95,.08); }
.flash.warn { color: var(--warn); border-color: rgba(224,169,75,.35); background: rgba(224,169,75,.08); }

/* ---------- Статистики ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; }
.stat .n { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--gold); }
.stat .k { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-top: .5rem; }

/* ---------- Галерия със снимки ---------- */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
.img-tile {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel-2);
}
.img-tile img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.img-tile .bar { display: flex; gap: .3rem; padding: .45rem; align-items: center; }
.img-tile .bar input[type=text] { padding: .25rem .4rem; font-size: .72rem; }
.img-tile .ord { font-size: .7rem; color: var(--ink-faint); padding: 0 .3rem; }
.img-drop {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  text-align: center;
  color: var(--ink-faint);
  font-size: .86rem;
}

/* ---------- Вход ---------- */
.login-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(90,60,150,.28), transparent 65%),
    var(--bg);
}
.login-box {
  width: 100%; max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem;
}
.login-box h1 { text-align: center; font-size: 2rem; letter-spacing: .1em; color: var(--gold); }
.login-box .sub { text-align: center; color: var(--ink-faint); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 2rem; }

/* ---------- Адаптивност ---------- */
@media (max-width: 900px) {
  .admin { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-nav { display: flex; flex-wrap: wrap; gap: .2rem; }
  .side-sep { display: none; }
  .sidebar-foot { margin-top: 1rem; }
  .content { padding: 1.5rem 1.2rem 4rem; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  table { font-size: .84rem; }
}