/* Hero */
.hero { position: relative; min-height: 28vh; height: 28vh; min-height: 240px; overflow: hidden; margin-top: 0; }
.navbar.fixed-top + .hero { margin-top: 56px; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 100%); display:flex; align-items:flex-end; }
.hero .hero-content { width: 100%; padding: 1.25rem 0 1.75rem; }
.hero .hero-chip { display:inline-block; background: rgba(0,0,0,.64); border: 1px solid rgba(255,255,255,.15); padding: .5rem .75rem; border-radius: .5rem; backdrop-filter: blur(4px) saturate(1.1); }
.text-light-50 { color: rgba(255,255,255,.8); }

/* Navbar fixed and semi-transparent */
.navbar.fixed-top { backdrop-filter: saturate(1.2) blur(2px); }
.navbar.bg-dark.bg-opacity-75 { background-color: rgba(33,37,41,.75)!important; }

/* Chip-like links */
.navbar .nav-link { border-radius:.5rem; padding:.35rem .6rem; }
.navbar .nav-link:hover, .navbar .nav-link:focus { background-color: rgba(255,255,255,.08); }

/* Multilevel dropdowns (desktop-only) */
@media (min-width: 992px) {
  .dropdown-submenu { position: relative; }
  .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-left: .1rem; margin-right: .1rem; }
  .dropdown-menu > .dropdown-submenu > a.dropdown-toggle::after { content: '\203A'; float: right; }
  .dropdown-menu li:hover > .dropdown-menu { display: block; }
}

/* Glass dropdown palette — ограничено навбаром */
.navbar .dropdown-menu {
  background-color: rgba(33,37,41,.85);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px) saturate(1.1);
}
.navbar .dropdown-item { color:#fff; }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background-color: rgba(255,255,255,.12); color:#fff; }

/* Page title chip */
.page-chip { display:block; width:100%; background: rgba(0,0,0,.64); border:1px solid rgba(255,255,255,.15); border-radius:.6rem; padding:.6rem .9rem; color:#fff; backdrop-filter: blur(4px) saturate(1.1); margin-right: 6rem; }
@media (max-width: 991.98px){
  .page-chip { margin-right: 0; }
}

/* Glass card utility (reusable) */
.glass-card { background: rgba(0,0,0,.64); border:1px solid rgba(255,255,255,.15); border-radius:.6rem; color:#fff; backdrop-filter: blur(4px) saturate(1.05); }
.glass-card .text-muted { color: rgba(255,255,255,.75)!important; }

/* News list and article styling */
.news-list .news-card { overflow: hidden; display:flex; flex-direction:column; height:100%; }
.news-card .news-cover { position: relative; width:100%; padding-top:52%; background-size:cover; background-position:center; }
.news-card .news-card-body { padding:.9rem 1rem; }
.news-card .news-card-title { font-weight:600; margin:0 0 .25rem; color:#fff; }
.news-card .news-card-excerpt { color: rgba(255,255,255,.9); font-size:.95rem; }
.news-card .news-meta { color: rgba(255,255,255,.8); font-size:.85rem; }

.news-article { padding: 1rem 1.2rem; }
@media (min-width: 768px){ .news-article { padding: 1.25rem 1.5rem; } }
.news-article .news-header { margin-bottom:.5rem; }
.news-article .news-content img { max-width:100%; height:auto; border-radius:.4rem; }

/* Readable rich text */
.prose { line-height:1.65; color: rgba(255,255,255,.92); }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color:#fff; margin: .8rem 0 .5rem; font-weight:700; }
.prose p { margin:.5rem 0 1rem; }
.prose a { color:#7cc7ff; text-decoration-color: rgba(124,199,255,.4); }
.prose a:hover { text-decoration-color: rgba(124,199,255,.8); }
.prose blockquote { border-left:3px solid rgba(255,255,255,.3); padding-left:.75rem; color:rgba(255,255,255,.9); margin:.75rem 0; }
.prose code { background: rgba(255,255,255,.08); padding:.1rem .3rem; border-radius:.25rem; }
.prose pre { background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); padding:.75rem; border-radius:.5rem; overflow:auto; }
.prose ul, .prose ol { padding-left:1.25rem; margin-bottom:1rem; }
.prose table { width:100%; border-collapse: collapse; margin: .75rem 0 1rem; }
.prose table th, .prose table td { border:1px solid rgba(255,255,255,.15); padding:.5rem .6rem; }
.prose hr { border-color: rgba(255,255,255,.2); opacity:1; }

/* --- Login Liquid Glass --- */
.login-modal .modal-dialog { max-width: 420px; }

.login-glass {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-radius: 18px;
  color: #f1f1f1;
  padding-top: 10px; /* место под chip */
}

.login-glass .modal-header,
.login-glass .modal-footer {
  background: transparent;
  border: 0;
}

.login-glass .modal-title {
  color: #fff;
  letter-spacing: .3px;
}

.login-glass .form-control {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #eaeaea;
}
.login-glass .form-control::placeholder { color: rgba(255,255,255,.55); }
.login-glass .form-control:focus {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* читабельное автозаполнение на стекле (Chrome) */
.login-glass input.form-control:-webkit-autofill,
.login-glass input.form-control:-webkit-autofill:hover,
.login-glass input.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.06) inset;
}

.login-glass .btn-primary {
  background: linear-gradient(180deg, rgba(13,110,253,1), rgba(13,110,253,.85));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px rgba(13,110,253,.35);
}

.login-glass .btn-success {
  background: linear-gradient(180deg, rgba(25,135,84,1), rgba(25,135,84,.88));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px rgba(25,135,84,.35);
}

.login-glass .text-danger.small { color: #ff6b6b !important; }

/* Chip (как у hero-chip, но для модалки) */
.login-chip {
  position: absolute;
  top: -12px; left: 18px;
  padding: 6px 10px;
  font-size: .8rem;
  line-height: 1;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.login-chip .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: baseline; background: #58d26b;
}
.login-chip.maintenance { background: rgba(255, 196, 0, .14); border-color: rgba(255,196,0,.35); }
.login-chip.maintenance .dot { background: #ffc107; }

/* Тонкие скроллы внутри модалки (если понадобится) */
.login-glass .modal-body { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.login-glass .modal-body::-webkit-scrollbar { height: 6px; width: 6px; }
.login-glass .modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 8px; }

/* ==== Liquid Glass ListGroup ==== */
.glass-list .list-group {
  background: transparent;
}

.glass-list .list-group-item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: .5rem;
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}

.glass-list .list-group-item + .list-group-item {
  margin-top: .5rem;
}

.glass-list .list-group-item:hover,
.glass-list .list-group-item:focus {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  text-decoration: none;
  transform: translateY(-1px);
}

.glass-list .list-group-item h6 {
  color:#fff;
  margin:0;
}

.glass-list .list-group-item .text-muted {
  color: rgba(255,255,255,.75) !important;
}

.glass-list .card-title {
  color:#fff;
}

.glass-list a.small {
  color:#7cc7ff;
  text-decoration: none;
}

.glass-list a.small:hover {
  text-decoration: underline;
}

.glass-list img.news-cover {
  max-width:100%;
  height:auto;
  border-radius:.35rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}


/* === DataTables x Liquid Glass (вписываем в карточки) === */
.glass-card .dataTables_wrapper { color: #fff; }

.glass-card table.dataTable {
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

.glass-card table.dataTable thead th {
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 600;
}

.glass-card table.dataTable tbody td {
  border-top: 1px solid rgba(255,255,255,.10);
}

.glass-card table.dataTable tbody tr:hover > * {
  background-color: rgba(255,255,255,.06) !important;
}

.glass-card .dataTables_wrapper .dataTables_paginate,
.glass-card .dataTables_wrapper .dataTables_info,
.glass-card .dataTables_wrapper .dataTables_length,
.glass-card .dataTables_wrapper .dataTables_filter {
  display: none; /* на главной не показываем управление */
}

/* стрелочки сортировки — делаем чуть заметнее на тёмном */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
  opacity: .7;
}


/* Добавьте эти стили в ваш app.css файл */

/* DataTables Liquid Glass Styles */
.glass-card .dataTables_wrapper {
  color: #fff;
}

.glass-card table.dataTable {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  border: none;
}

.glass-card table.dataTable thead th {
  background: rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 600;
  padding: 0.75rem;
}

.glass-card table.dataTable tbody td {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 0.75rem;
  color: #fff;
  background: transparent;
}

.glass-card table.dataTable tbody tr {
  background: transparent;
  transition: background .2s ease;
}

.glass-card table.dataTable tbody tr:hover {
  background: rgba(255,255,255,.08) !important;
}

.glass-card table.dataTable tbody tr:hover td {
  background: transparent !important;
}

/* Скрываем элементы управления DataTables, которые не нужны */
.glass-card .dataTables_wrapper .dataTables_paginate,
.glass-card .dataTables_wrapper .dataTables_info,
.glass-card .dataTables_wrapper .dataTables_length,
.glass-card .dataTables_wrapper .dataTables_filter {
  display: none;
}

/* Стили для сортировки */
.glass-card table.dataTable thead .sorting:before,
.glass-card table.dataTable thead .sorting:after,
.glass-card table.dataTable thead .sorting_asc:before,
.glass-card table.dataTable thead .sorting_asc:after,
.glass-card table.dataTable thead .sorting_desc:before,
.glass-card table.dataTable thead .sorting_desc:after {
  opacity: 0.7;
  color: rgba(255,255,255,.7);
}