@font-face {
  font-family: 'NG Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/styles/default/fonts/montserrat/montserrat-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'NG Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/styles/default/fonts/montserrat/montserrat-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.client-body {
  --ng-brand: #00ade9;
  --ng-brand-btn: #0a8fd1;
  --ng-brand-soft: #e3f5fc;
  --ng-bg: #eef3f7;
  --ng-card: #ffffff;
  --ng-text: #102233;
  --ng-muted: #5f7184;
  --ng-line: #dce5ed;
  --ng-side: rgba(255,255,255,.78);
  --ng-page: radial-gradient(110% 85% at 0% 0%, #cdeaf8 0%, rgba(205,234,248,0) 65%), #eef3f7;
  --ng-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 40px -24px rgba(7,26,43,.22);
}
body.client-body.dark-mode {
  --ng-brand-btn: #0b9be0;
  --ng-brand-soft: #0b2a3d;
  --ng-bg: #06111c;
  --ng-card: #0d1d2d;
  --ng-text: #e4eef6;
  --ng-muted: #8aa1b5;
  --ng-line: #1d3247;
  --ng-side: rgba(9,24,38,.85);
  --ng-page: radial-gradient(120% 90% at 0% 0%, #0d3a5c 0%, #071a2b 50%, #06111c 100%);
  --ng-shadow: 0 16px 40px -24px rgba(0,0,0,.6);
}

/* ---------- Page ---------- */
body.client-body {
  max-width: none !important;
  background: var(--ng-page) !important;
  background-attachment: fixed !important;
  color: var(--ng-text);
  font-family: 'NG Montserrat', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body.client-body .wrapper,
body.client-body .content-wrapper,
body.client-body .main-footer { background: transparent !important; }
body.client-body .content-wrapper { color: var(--ng-text); }
body.client-body h1, body.client-body h2, body.client-body h3, body.client-body h4,
body.client-body .btn, body.client-body .form-control, body.client-body .nav-link { font-family: inherit; }

/* ---------- Top bar ---------- */
body.client-body .main-header.navbar {
  background: var(--ng-side) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ng-line) !important;
  box-shadow: none;
}
body.client-body .main-header .nav-link,
body.client-body .main-header .navbar-nav .nav-link { color: var(--ng-muted) !important; font-size: 13px; }
body.client-body .main-header .nav-link strong { color: var(--ng-text); font-weight: 700; }
body.client-body .main-header .nav-link:hover { color: var(--ng-text) !important; }
body.client-body .main-header .form-control,
body.client-body .main-header select {
  background: var(--ng-card); color: var(--ng-text); border: 1px solid var(--ng-line); border-radius: 10px;
}

/* ---------- Sidebar ---------- */
body.client-body .main-sidebar {
  background: var(--ng-side) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--ng-line);
  box-shadow: none !important;
}
body.client-body .main-sidebar .brand-link { border-bottom: 0 !important; padding-top: 18px; }
body.client-body .main-sidebar .brand-link .brand-text { color: var(--ng-text) !important; }
body.client-body .main-sidebar .sidebar { padding: 0 10px; }
body.client-body .nav-sidebar .nav-link {
  color: var(--ng-muted) !important;
  border-radius: 12px !important;
  font-weight: 600;
  margin-bottom: 2px;
  transition: background .15s, color .15s;
}
body.client-body .nav-sidebar .nav-link .nav-icon { color: inherit !important; }
body.client-body .nav-sidebar .nav-link:hover { background: rgba(0,173,233,.08) !important; color: var(--ng-text) !important; }
body.client-body .nav-sidebar .nav-link.active,
body.client-body .nav-sidebar > .nav-item.menu-open > .nav-link {
  background: var(--ng-brand-soft) !important;
  color: var(--ng-brand-btn) !important;
  box-shadow: none !important;
}
body.client-body .nav-sidebar .nav-treeview { padding-left: 6px; }
body.client-body .nav-sidebar .nav-treeview .nav-link { font-weight: 500; font-size: 13.5px; }
body.client-body .nav-sidebar .nav-treeview .nav-link.active { background: transparent !important; color: var(--ng-brand-btn) !important; font-weight: 700; }

/* ---------- Common blocks on every page ---------- */
body.client-body .content-wrapper .card {
  background: var(--ng-card);
  border: 1px solid var(--ng-line);
  border-radius: 18px;
  box-shadow: var(--ng-shadow);
  overflow: hidden;
}
body.client-body .content-wrapper .card-header { background: transparent; border-bottom: 1px solid var(--ng-line); }
body.client-body .content-wrapper .card-title { font-weight: 800; font-size: 16px; }
body.client-body .content-wrapper .card-outline { border-top-width: 1px !important; }
body.client-body .content-wrapper .btn { border-radius: 10px; font-weight: 700; }
body.client-body .content-wrapper .btn-primary { background: var(--ng-brand-btn); border-color: var(--ng-brand-btn); }
body.client-body .content-wrapper .form-control { border-radius: 10px; border-color: var(--ng-line); }
body.client-body .content-wrapper .form-control:focus { border-color: var(--ng-brand); box-shadow: 0 0 0 3px rgba(0,173,233,.16); }
body.client-body .content-wrapper .table { color: var(--ng-text); }
body.client-body .content-wrapper .table td, body.client-body .content-wrapper .table th { border-color: var(--ng-line); }
body.client-body .modal-content { border-radius: 18px; border: 1px solid var(--ng-line); }

/* ---------- Depth: fiber background, shadows, accents ---------- */
body.client-body > svg.ng-fibers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.ng-fiber { fill: none; stroke-width: 1.4; }
.ng-pulse { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 90 2600; animation: ng-run 10s linear infinite; }
.ng-pulse.p2 { animation-duration: 13s; animation-delay: -5s; }
.ng-pulse.p3 { animation-duration: 15s; animation-delay: -9s; }
@keyframes ng-run { from { stroke-dashoffset: 2690; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ng-pulse { display: none; } }

body.client-body {
  --ng-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 20px -10px rgba(7,26,43,.12), 0 28px 60px -28px rgba(7,26,43,.28);
}
body.client-body.dark-mode {
  --ng-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -24px rgba(0,0,0,.75);
}
body.client-body .content-wrapper .card { transition: box-shadow .18s ease; }

body.client-body .main-sidebar { box-shadow: 8px 0 30px -20px rgba(7,26,43,.25) !important; }
body.client-body .nav-sidebar .nav-link.active { position: relative; box-shadow: inset 3px 0 0 var(--ng-brand) !important; }
body.client-body .main-header.navbar { box-shadow: 0 6px 24px -18px rgba(7,26,43,.35); }
body.client-body .main-header .navbar-nav .nav-item > span.nav-link {
  background: var(--ng-card); border: 1px solid var(--ng-line); border-radius: 99px;
  padding: 4px 12px !important; margin: 0 3px; line-height: 1.4;
}

/* ---------- Breadcrumb and modals ---------- */
body.client-body .content-wrapper .breadcrumb,
body.client-body .content-wrapper .breadcrumb.card {
  background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important;
  padding: 4px 2px; margin-bottom: 8px; font-size: 13px;
}
body.client-body .content-wrapper .breadcrumb:empty { display: none; }
body.client-body .content-wrapper .breadcrumb a { color: var(--ng-muted); }
body.client-body .modal-content {
  background: var(--ng-card); color: var(--ng-text); box-shadow: 0 30px 60px -20px rgba(7,26,43,.45); overflow: hidden;
}
body.client-body .modal-header { border-bottom: 1px solid var(--ng-line); padding: 18px 20px; }
body.client-body .modal-title { font-weight: 800; font-size: 18px; line-height: 1.3; }
body.client-body .modal-body { padding: 18px 20px; }
body.client-body .modal-footer { border-top: 0; padding: 0 20px 20px; }
body.client-body .modal-footer .btn { min-height: 42px; padding: 0 18px; border-radius: 12px; }
body.client-body .modal-footer .btn-primary { background: var(--ng-brand-btn); border-color: var(--ng-brand-btn); }
body.client-body .modal input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ng-brand-btn); }
body.client-body .modal-backdrop.show { opacity: .55; background: #04101c; }

/* ---------- Table toolbars (filters like Всі / Відкрито / В обробці) ---------- */
body.client-body .content-wrapper .card-header.d-flex { flex-wrap: wrap !important; gap: 10px; align-items: center; }
body.client-body .abills-table-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
body.client-body .abills-table-bar .btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
body.client-body .abills-table-bar .btn-group > .btn,
body.client-body .abills-table-bar .btn-group > .btn-group > .btn {
  height: 32px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: 99px !important; margin: 0 !important;
  background: var(--ng-card); color: var(--ng-muted); border: 1px solid var(--ng-line) !important;
  font-size: 12.5px; font-weight: 600; box-shadow: none !important; white-space: nowrap;
}
body.client-body .abills-table-bar .btn-group > .btn:hover { color: var(--ng-text); border-color: var(--ng-muted) !important; }
body.client-body .abills-table-bar .btn-group > .btn.active {
  background: var(--ng-brand-btn) !important; color: #fff !important; border-color: var(--ng-brand-btn) !important;
}
body.client-body .abills-table-bar .dropdown-toggle::after { margin-left: 0; }
body.client-body .dropdown-menu { border-radius: 12px; border: 1px solid var(--ng-line); box-shadow: 0 16px 40px -16px rgba(7,26,43,.35); padding: 6px; }
body.client-body .dropdown-item { border-radius: 8px; font-size: 13.5px; padding: 8px 12px; }
body.client-body .dropdown-item:active, body.client-body .dropdown-item.active { background: var(--ng-brand-btn); }
body.client-body .content-wrapper .card-tools .btn-tool { color: var(--ng-muted); border-radius: 8px; }
body.client-body .content-wrapper .card-tools .btn-tool:hover { background: rgba(0,173,233,.08); color: var(--ng-text); }

/* ---------- Forms ---------- */
body.client-body .content-wrapper .card-footer { background: transparent; border-top: 1px solid var(--ng-line); }
body.client-body .content-wrapper .card-footer .btn { min-height: 40px; padding: 0 20px; border-radius: 12px; }
body.client-body .content-wrapper label.col-form-label,
body.client-body .content-wrapper .control-label { font-weight: 600; color: var(--ng-muted); }
body.client-body .content-wrapper .form-control { min-height: 40px; }
body.client-body .content-wrapper .input-group-append .btn,
body.client-body .content-wrapper .input-group-append .input-group-text {
  border-radius: 0 10px 10px 0 !important; border-color: var(--ng-line); background: var(--ng-brand-soft); color: var(--ng-brand-btn);
}
body.client-body .content-wrapper .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.client-body .select2-container--default .select2-selection--single,
body.client-body .select2-container--default .select2-selection--multiple {
  min-height: 40px; border-radius: 10px !important; border-color: var(--ng-line) !important; background: var(--ng-card);
}
body.client-body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; color: var(--ng-text); }
body.client-body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
body.client-body .select2-dropdown { border-radius: 12px; border-color: var(--ng-line); overflow: hidden; }
body.client-body .select2-results__option--highlighted { background: var(--ng-brand-btn) !important; }
body.client-body .content-wrapper input[type=file] { font: inherit; font-size: 13.5px; color: var(--ng-muted); }
body.client-body .content-wrapper input[type=file]::file-selector-button {
  height: 38px; padding: 0 16px; margin-right: 12px; border-radius: 10px; cursor: pointer;
  border: 1.5px dashed var(--ng-brand); background: var(--ng-brand-soft); color: var(--ng-brand-btn); font: inherit; font-weight: 700;
}
body.client-body .content-wrapper input[type=file]::file-selector-button:hover { background: rgba(0,173,233,.18); }
body.client-body .content-wrapper .table thead th { border-top: 0; font-size: 12.5px; text-transform: none; color: var(--ng-muted); }
body.client-body .content-wrapper .table thead th a { color: var(--ng-brand-btn); }
body.client-body .content-wrapper .card-header.d-flex > .card-title { flex: 1 0 100%; }
body.client-body .content-wrapper .card-header.d-flex > .card-tools { margin-left: auto; }