/* =========================================================
   Admin Graphite Glass — unified theme (light/dark), convex chrome
   ========================================================= */

:root{
  /* rhythm */
  --space: clamp(16px, 1.4vw, 22px);
  --radius: 14px;
  --ui-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  /* ===== LIGHT (graphite) ===== */
  --bg: radial-gradient(1400px 1200px at -10% -10%, rgba(30,33,40,.06), transparent 42%) fixed,
        radial-gradient(1200px 1000px at 110% 10%, rgba(50,54,64,.05), transparent 40%) fixed,
        #f3f4f6;

  /* glass tiles */
  --card: rgba(255,255,255,.56);
  --card-strong: rgba(255,255,255,.72);

  /* neutrals */
  --stroke: rgba(20,24,32,.10);
  --text: #1c2027;
  --muted: #707786;
  --icon: #9aa1b2;

  /* menu active */
  --menu-pill-radius: 12px;
  --menu-active-bg: color-mix(in oklab, var(--card-strong) 42%, transparent);
  --menu-active-ring: 0 0 0 3px rgba(120,124,142,.18);
  --menu-active-glow: 0 6px 14px rgba(20,24,32,.10);

  /* accent & focus */
  --accent-grad: linear-gradient(135deg,#8e90a1,#b5b8c7);
  --accent-focus: 0 0 0 3px rgba(120,124,142,.22);

  /* depth/blur */
  --shadow: 0 14px 36px rgba(19,23,31,.12), 0 4px 12px rgba(19,23,31,.06);
  --blur: 14px;

  /* convex chrome (sidebar/topbar) */
  --chrome-gloss: inset 0 1px 0 rgba(255,255,255,.20),
                  inset 0 -1px 0 rgba(0,0,0,.10);
  --chrome-shadow: 0 22px 44px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08);
}

html[data-theme="dark"],
[data-theme="dark"],
[data-bs-theme="dark"]{
  /* ===== DARK (deep graphite) ===== */
  --bg: radial-gradient(1100px 900px at -15% -10%, rgba(90,95,115,.06), transparent 45%) fixed,
        radial-gradient(900px 900px at 120% 0%, rgba(120,125,145,.06), transparent 40%) fixed,
        #0f141a;

  --card: rgba(24,28,36,.52);
  --card-strong: rgba(24,28,36,.68);

  --stroke: rgba(255,255,255,.10);
  --text: #e6e9ef;
  --muted: #a5aab8;
  --icon: #b6bccb;

  --accent-grad: linear-gradient(135deg,#7b7f92,#a8acbd);
  --accent-focus: 0 0 0 3px rgba(150,154,170,.28);

  --shadow: 0 18px 44px rgba(0,0,0,.46), 0 8px 18px rgba(0,0,0,.32);
  --blur: 16px;

  --chrome-gloss: inset 0 1px 0 rgba(255,255,255,.08),
                  inset 0 -1px 0 rgba(0,0,0,.35);
  --chrome-shadow: 0 28px 56px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.32);
}

/* ===== SHELL ===== */
html, body{
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body{
  background: var(--ac-bg);
  color: var(--text);
  font-weight: 400;
  line-height: 1.5;
  font-variation-settings: "wght" 400;
}
h1,h2,h3,h4,h5,h6,
.btn,
.menu-item span{
  font-weight: 600;
  letter-spacing: -0.2px;
  font-variation-settings: "wght" 600;
}

.admin-shell{
  display:flex;
  min-height:100vh;
  overflow:hidden;
}
@media (max-width: 992px){
  .admin-shell{ grid-template-columns: 1fr; }
}

/* ===== SIDEBAR — convex glass, no borders ===== */
.sidebar{
  position: fixed;
  top: var(--space);
  left: var(--space);
  bottom: var(--space);
  width: 270px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  overflow: hidden;
  backdrop-filter: blur(calc(var(--blur) + 2px)) saturate(140%);
  -webkit-backdrop-filter: blur(calc(var(--blur) + 2px)) saturate(140%);
  isolation: isolate;
  box-shadow: none;
  z-index: 1040;
  display:flex; flex-direction:column;
}
.sidebar::before{
  content:"";
  position:absolute; inset:0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 10% -20%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(180deg, var(--card-strong) 0%, var(--card) 100%);
  box-shadow: var(--chrome-shadow);
}
.sidebar::after{
  content:"";
  position:absolute; inset:0;
  z-index: 0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: var(--chrome-gloss);
}
.sidebar > *{ position: relative; z-index: 1; }

.sidebar .brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; letter-spacing:.2px; font-size:1.1rem; color: var(--text);
}
.brand-dot{
  width:12px; height:12px; border-radius:50%;
  background: var(--accent-grad);
  box-shadow: 0 0 0 3px rgba(120,124,142,.18);
}

/* ===== MENU ===== */
.menu{ padding: 6px; }
.menu-item{
  display:flex; align-items:center; gap:12px;
  padding: 9px 12px;
  color: var(--text); text-decoration:none;
  border-radius: var(--menu-pill-radius);
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .06s ease;
}
.menu-item i{
  color: var(--icon);
  transition: opacity .18s ease, transform .12s ease, color .18s ease;
  opacity: .9;
}
.menu-item:hover{
  background: color-mix(in oklab, var(--card-strong) 60%, transparent);
  border-color: color-mix(in oklab, var(--stroke) 60%, transparent);
}

/* Активный пункт — тонкая стеклянная капсула */
.menu-item.active{
  position: relative;
  background: linear-gradient(180deg,
               color-mix(in oklab, var(--card-strong) 55%, transparent),
               color-mix(in oklab, var(--card) 40%, transparent));
  border-color: color-mix(in oklab, var(--stroke) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30),
              inset 0 -1px 0 rgba(0,0,0,.08),
              var(--menu-active-glow);
}
.menu-item.active::before{
  content:"";
  position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: radial-gradient(140% 80% at 12% -20%, rgba(255,255,255,.14), transparent 58%);
  mix-blend-mode: screen;
}
.menu-item.active::after{
  content:"";
  position:absolute; left:8px; top:9px; bottom:9px; width:1px;
  border-radius: 1px;
  background: linear-gradient(180deg, #cfd3e0, #aeb2c3);
  opacity:0;
}
.menu-item.active i{ color: color-mix(in oklab, var(--icon) 60%, #d7dbe6 40%); opacity:1; }

/* Тогглер раздела */
.menu .menu-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding: 9px 12px; border:0; background: transparent; color: var(--text);
  border-radius: var(--menu-pill-radius);
}
.menu .menu-toggle:hover{ background: color-mix(in oklab, var(--card-strong) 70%, transparent); }
.caret{ transition: transform .2s ease; transform: rotate(0deg); }
.menu .menu-toggle[aria-expanded="true"] .caret{ transform: rotate(90deg); }

.submenu{ display:flex; flex-direction:column; gap:.25rem; margin:.35rem 0 .35rem 1.6rem; }
.submenu .menu-item{ padding: 8px 10px; border-radius: 10px; }
.submenu .menu-item.active::after{ left: 4px; top:8px; bottom:8px; }

/* ===== TOPBAR — convex glass, no borders ===== */
.main{
  flex: 1;
  margin-left: calc(270px + 2*var(--space));
  padding: calc(64px + 2*var(--space)) var(--space) var(--space);
  min-height: 100vh;
  overflow-y: auto;
}
.topbar{
  position: fixed;
  top: var(--space);
  left: calc(270px + 2*var(--space));
  right: var(--space);
  height: 64px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  padding: 10px var(--space);
  backdrop-filter: blur(calc(var(--blur) + 2px)) saturate(140%);
  -webkit-backdrop-filter: blur(calc(var(--blur) + 2px)) saturate(140%);
  isolation: isolate;
  box-shadow: none;
  z-index: 1030;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar::before{
  content:"";
  position:absolute; inset:0; border-radius: inherit; z-index:0;
  background:
    radial-gradient(90% 70% at 0% -40%, rgba(255,255,255,.16), transparent 58%),
    linear-gradient(180deg, var(--card-strong) 0%, var(--card) 100%);
  box-shadow: var(--chrome-shadow);
}
.topbar::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit; z-index:0; pointer-events:none;
  box-shadow: var(--chrome-gloss);
}
.topbar > *{ position: relative; z-index: 1; }

/* Buttons */
.btn-icon{
  --size:38px; width:var(--size); height:var(--size);
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:12px;
  background: linear-gradient(180deg, var(--card-strong), var(--card));
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.20);
}
.btn-icon:hover{
  filter: brightness(1.04);
  box-shadow: 0 8px 20px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-icon:active{ transform: scale(.98); }
.btn-outline-secondary{
  border-color: transparent;
  color: var(--text);
  background: linear-gradient(180deg, var(--card-strong), var(--card));
  box-shadow: 0 4px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-outline-secondary:hover{
  /*box-shadow: var(--accent-focus), 0 1px 3px rgba(0,0,0,.12);*/
}
.btn-primary{
  background-image: var(--accent-grad);
  border: 0;
  color: #1c1f26;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.btn-primary:hover{ filter: brightness(1.05); }

/* ===== DROPDOWN / DARK FIXES ===== */
[data-bs-theme="dark"] .dropdown-menu{
  background: rgba(32,36,44,.95);
  border-color: transparent;
  backdrop-filter: blur(8px);
}
[data-bs-theme="dark"] .dropdown-item{ color: var(--text); }
[data-bs-theme="dark"] .dropdown-item:hover{ background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .text-muted{ color: var(--muted) !important; }

/* ===== CONTENT / CARDS ===== */
.content{ padding-block: 1.25rem 2rem; }
.content .card{
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.content .card-header{
  background: transparent;
  border-bottom: 1px solid var(--stroke);
  padding: 14px 18px;
}
.content .card-body{ padding: 18px; }
.content .card + .card{ margin-top: 16px; }

/* ===== FORMS ===== */
.form-control,.form-select,.form-check-input,
.form-control:focus,.form-select:focus{
  border-radius: 12px; border-color: var(--stroke);
  background: transparent;
  box-shadow: none;
  color: var(--text);
}
textarea.form-control{ min-height: 140px; }
.small-muted{ color: var(--muted); }

/* ===== TABLES ===== */
.table{ --bs-table-bg: transparent; color: inherit; }
.table thead th{
  background: rgba(140,144,160,.14);
  border-bottom: 1px solid var(--stroke);
}
.table td,.table th{ border-color: var(--stroke); }

/* ===== CodeMirror ===== */
.CodeMirror{
  border-radius: 12px; border:1px solid var(--stroke);
  background: transparent; color: var(--text);
}

/* ===== MOBILE STACK TABLES ===== */
.table-mobile-stack thead{ background: transparent; }
@media (max-width: 576px){
  .table-mobile-stack thead{ display:none; }
  .table-mobile-stack,
  .table-mobile-stack tbody,
  .table-mobile-stack tr,
  .table-mobile-stack td{ display:block; width:100%; }
  .table-mobile-stack tr{
    border:1px solid var(--stroke);
    border-radius:12px;
    background: var(--card);
    box-shadow: var(--shadow);
    margin:10px 0;
    overflow:hidden;
  }
  .table-mobile-stack td{
    border:0; border-bottom:1px solid var(--stroke);
    padding:10px 14px;
  }
  .table-mobile-stack td:last-child{ border-bottom:0; }
  .table-mobile-stack td::before{
    content: attr(data-label);
    display:block; font-size:.8rem; color: var(--muted);
    margin-bottom:4px;
  }
  .table-mobile-stack td[data-actions]{
    display:flex; gap:8px; align-items:center; justify-content:flex-end;
    padding:12px 12px;
  }
}

/* ===== MOBILE: floating glass sidebar ===== */
@media (max-width: 992px){
  .sidebar{
    left: var(--space);
    right: auto;
    width: min(78%, 320px);
    transform: translateX(-120%);
    transition: transform .24s ease;
  }
  .admin-shell.sidebar-open .sidebar{ transform: translateX(0); }

  .topbar{ left: var(--space); right: var(--space); }
  .main{
    margin-left: 0;
    padding: calc(64px + 2*var(--space)) var(--space) var(--space);
  }
}

/* ===== SCROLLBARS (WebKit) ===== */
*::-webkit-scrollbar{ height:12px; width:12px; }
*::-webkit-scrollbar-thumb{
  background: rgba(120,130,155,.35);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(120,130,155,.5); }