/* Tailwind-first UI layer (CDN) + compatibility shims */

:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  /* Убрали сильную прозрачность (по просьбе пользователя) */
  --glass: rgba(255,255,255,.94);
  --glass-dark: rgba(17,24,39,.92);
  --glass-border: rgba(15,23,42,.12);
  --shadow1: 0 8px 30px rgba(0,0,0,.08);
  --shadow2: 0 18px 60px rgba(0,0,0,.14);
}

html, body{height:100%;}
body{
  font-family: var(--font-sans);
  overflow-x: hidden; /* убираем отдельный горизонтальный скролл */
  background: radial-gradient(1200px 700px at 15% 10%, rgba(59,130,246,.18), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(34,197,94,.12), transparent 60%),
              radial-gradient(900px 600px at 60% 90%, rgba(245,158,11,.10), transparent 60%),
              linear-gradient(180deg, #f5f7fb, #eef2ff);
  background-attachment: fixed;
}

/* --- Mobile menu scroll fix --- */
.bon-mobile-menu{
  max-height: calc(100vh - 92px); /* header + margins */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* prevent scroll chaining to body */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Ensure dropdowns are not cropped inside filter cards */
.filters-wrap{ overflow: visible !important; }

.dark body{
  background: radial-gradient(1200px 700px at 15% 10%, rgba(59,130,246,.20), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(34,197,94,.14), transparent 60%),
              radial-gradient(900px 600px at 60% 90%, rgba(245,158,11,.12), transparent 60%),
              linear-gradient(180deg, #0b1220, #0f172a);
}

.glass{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow1);
  /* фон почти непрозрачный — blur оставляем минимально, чтобы было мягко, но без мутности */
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.dark .glass{ background: var(--glass-dark); border-color: rgba(148,163,184,.18); }

/* Lightweight Bootstrap class shims (чтобы старые страницы не «ломались» мгновенно) */
.container{ max-width: 1100px; margin-left:auto; margin-right:auto; padding-left: 16px; padding-right: 16px; }
.container-fluid{ width:100%; padding-left:16px; padding-right:16px; }
.mt-4{ margin-top: 16px; } .mt-5{ margin-top: 24px; }
.mb-3{ margin-bottom: 12px; } .mb-5{ margin-bottom: 24px; }
.d-flex{ display:flex; } .align-items-center{ align-items:center; }
.justify-content-between{ justify-content:space-between; }
.gap-2{ gap: 8px; }

.card{ border-radius: 18px; overflow:hidden; }
.card, .jumbotron, .alert{ background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow1); }
.dark .card, .dark .jumbotron, .dark .alert{ background: var(--glass-dark); border-color: rgba(148,163,184,.18); }
.card-body{ padding: 16px; }

.form-control, .form-select, textarea, select, input[type="text"], input[type="password"], input[type="date"], input[type="time"], input[type="number"]{
  width:100%; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.75);
}
.dark .form-control, .dark .form-select, .dark textarea, .dark select, .dark input[type="text"], .dark input[type="password"], .dark input[type="date"], .dark input[type="time"], .dark input[type="number"]{
  background: rgba(17,24,39,.65); border-color: rgba(148,163,184,.20); color: rgba(248,250,252,.92);
}

.btn{ display:inline-flex; align-items:center; justify-content:center; border-radius: 999px; padding: 10px 14px; border: 1px solid rgba(15,23,42,.14); background: rgba(255,255,255,.65); box-shadow: var(--shadow1); cursor:pointer; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.32); }
.btn-warning{ background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.34); }
.btn-outline-secondary{ background: rgba(255,255,255,.40); }
.btn-secondary{ background: rgba(255,255,255,.40); }
.btn-danger{ background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.30); }
.btn-success{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.30); }

.badge{ display:inline-flex; align-items:center; justify-content:center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; background: rgba(15,23,42,.08); }
.dark .badge{ background: rgba(148,163,184,.18); }

.badge-danger{ background: rgba(239,68,68,.16); border: 1px solid rgba(239,68,68,.30); }
.badge-success{ background: rgba(34,197,94,.16); border: 1px solid rgba(34,197,94,.30); }

/* Stronger borders + list/table shims for legacy pages */
.border{ border: 1px solid rgba(15,23,42,.14) !important; border-radius: 14px; }
.dark .border{ border-color: rgba(148,163,184,.22) !important; }

.list-group{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.list-group-item{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.65);
  box-shadow: var(--shadow1);
}
.dark .list-group-item{ background: rgba(17,24,39,.65); border-color: rgba(148,163,184,.20); }

.table{ width:100%; border-collapse: separate; border-spacing:0; }
.table thead th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
  color: rgba(51,65,85,.95);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,.14);
}
.dark .table thead th{ color: rgba(226,232,240,.9); border-bottom-color: rgba(148,163,184,.22); }
.table tbody td{ padding: 10px 12px; border-bottom: 1px solid rgba(15,23,42,.10); }
.dark .table tbody td{ border-bottom-color: rgba(148,163,184,.18); }
.table tbody tr:hover{ background: rgba(15,23,42,.03); }
.dark .table tbody tr:hover{ background: rgba(148,163,184,.08); }

.table-bordered{ border: 1px solid rgba(15,23,42,.14); border-radius: 16px; overflow:hidden; }
.dark .table-bordered{ border-color: rgba(148,163,184,.22); }

.nav-scroll{ overflow-x:auto; white-space:nowrap; scrollbar-width: none; }
.nav-scroll::-webkit-scrollbar{ display:none; }
.nav-scroll a{ white-space:nowrap; }

/* Progress overlay for uploads */
#progressOverlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:99999; background: rgba(0,0,0,.30); padding: 16px; }
#progressContainer{ width: min(520px, 92vw); }
.progress{ height: 14px; border-radius: 999px; overflow:hidden; background: rgba(255,255,255,.55); border: 1px solid rgba(15,23,42,.12); }
.progress-bar{ height: 100%; width: 0%; border-radius: 999px; background: rgba(59,130,246,.65); color:#0f172a; font-size: 11px; display:flex; align-items:center; justify-content:center; }


/* Graphite-level microinteractions + skeletons */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(148,163,184,.18);
  border-radius: 0.75rem;
}
.dark .skeleton { background: rgba(148,163,184,.12); }
.skeleton::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.2s infinite;
}
.dark .skeleton::after{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

@keyframes floatIn {
  0% { opacity: 0; transform: translateY(10px) scale(.99); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.animate-in { animation: floatIn .35s ease-out both; }
.stagger > * { animation: floatIn .35s ease-out both; }
.stagger > *:nth-child(2){ animation-delay: .04s }
.stagger > *:nth-child(3){ animation-delay: .08s }
.stagger > *:nth-child(4){ animation-delay: .12s }
.stagger > *:nth-child(5){ animation-delay: .16s }

@keyframes kpiFlash {
  0% { box-shadow: 0 0 0 0 rgba(99,102,241,.0); }
  30% { box-shadow: 0 0 0 6px rgba(99,102,241,.22); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,.0); }
}
.kpi-flash { animation: kpiFlash .65s ease-out; }

@keyframes warnPulse {
  0%,100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.warn-dot { animation: warnPulse 1s infinite; }

.tooltip{
  position: fixed;
  z-index: 60;
  pointer-events: none;
  padding: .5rem .65rem;
  border-radius: .75rem;
  font-size: .75rem;
  max-width: 18rem;
  background: rgba(15, 23, 42, .92);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transform: translate(-50%, -120%);
  opacity: 0;
  transition: opacity .12s ease;
}
.tooltip.show{ opacity: 1; }

.table-sticky thead th{
  position: sticky; top: 0;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
}
.dark .table-sticky thead th{
  background: rgba(2,6,23,.6);
}
.sortable{ cursor: pointer; user-select: none; }
.sortable .sort-ind{ opacity: .45; }
.sortable.sorted-asc .sort-ind{ opacity: 1; transform: rotate(180deg); }
.sortable.sorted-desc .sort-ind{ opacity: 1; }

.empty-state{
  border: 1px dashed rgba(148,163,184,.45);
  background: rgba(148,163,184,.12);
}
.dark .empty-state{ background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.28); }




@media (max-width: 640px){
  :root{ --glass: rgba(255,255,255,.92); --glass-dark: rgba(17,24,39,.92); }
}


/* Bootstrap collapse shim */
.collapse{ display:none; }
.collapse.show{ display:block; }

/* Legacy text helpers (Bootstrap-like) */
.text-danger{ color: rgb(220,38,38) !important; font-weight:700; }
.text-muted{ color: rgba(100,116,139,.95) !important; }
.dark .text-muted{ color: rgba(148,163,184,.85) !important; }

/* Global table borders (even without .table class) */
table{ width:100%; border-collapse: separate; border-spacing:0; }
table thead th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
  color: rgba(51,65,85,.95);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,.14);
}
.dark table thead th{ color: rgba(226,232,240,.9); border-bottom-color: rgba(148,163,184,.22); }
table tbody td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}
.dark table tbody td{ border-bottom-color: rgba(148,163,184,.18); }
table tbody tr:hover{ background: rgba(15,23,42,.03); }
.dark table tbody tr:hover{ background: rgba(148,163,184,.08); }

/* Modal base */
.bon-modal{ position: fixed; inset:0; z-index: 9999; display:flex; align-items:center; justify-content:center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.bon-modal.hidden{ display:none; }
.bon-modal.is-open{ opacity: 1; pointer-events: auto; }
.bon-modal__backdrop{ position:absolute; inset:0; background: rgba(2,6,23,.55); opacity: 0; transition: opacity .16s ease; }
.bon-modal.is-open .bon-modal__backdrop{ opacity: 1; }
.bon-modal__panel{ position:relative; width: min(920px, 96vw); max-height: 92vh; overflow: hidden; transform: translateY(8px) scale(.985); opacity: 0; transition: transform .16s ease, opacity .16s ease; }
.bon-modal.is-open .bon-modal__panel{ transform: translateY(0) scale(1); opacity: 1; }
.bon-modal__body{ max-height: calc(92vh - 56px); overflow:auto; }

/* Modal readability: less transparency ("глаза не режет") */
.bon-modal__panel.glass{ background: rgba(255,255,255,.92); }
.dark .bon-modal__panel.glass{ background: rgba(15,23,42,.92); }

/* Bootstrap modal compatibility (Bootstrap removed, but some pages still render .modal markup) */
.modal{ position: fixed; inset:0; z-index: 9998; display:none; overflow:auto; padding: 16px; }
.modal.show{ display:block; }
.modal-dialog{ width: min(920px, 96vw); margin: 40px auto; }
.modal-content{ background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow1); border-radius: 18px; overflow:hidden; }
.dark .modal-content{ background: var(--glass-dark); border-color: rgba(148,163,184,.18); }
.modal-header, .modal-footer{ padding: 14px 16px; border-color: rgba(15,23,42,.10); }
.dark .modal-header, .dark .modal-footer{ border-color: rgba(148,163,184,.20); }
.modal-body{ padding: 16px; }
.bon-bs-backdrop{ position: fixed; inset:0; z-index: 9997; background: rgba(2,6,23,.55); }
body.modal-open{ overflow:hidden; }

/* Make desktop menu wrap instead of scroll */
.nav-scroll{ overflow: visible !important; white-space: normal !important; }