/* =========================================================
   LIKEDROM — DATATABLES (FINAL SINGLE BLOCK) — MODERN THEME
   Scope: body.ld (НЕ auth)
   ========================================================= */

/* =============== 0) Scope guard =============== */
body.ld:not(.ld-auth) .dataTables_wrapper,
body.ld:not(.ld-auth) table.dataTable{
  font-family: 'Nunito', sans-serif !important;
}

body.ld:not(.ld-auth) table.dataTable th:focus,
body.ld:not(.ld-auth) table.dataTable td:focus,
body.ld:not(.ld-auth) table.dataTable th:active,
body.ld:not(.ld-auth) table.dataTable td:active{
  outline: none !important;
  box-shadow: none !important;
}

body.ld:not(.ld-auth) table.dataTable *{
  -webkit-tap-highlight-color: transparent !important;
}

body.ld:not(.ld-auth) table.dataTable tbody td::selection{
  background: transparent !important;
}
body.ld:not(.ld-auth) table.dataTable tbody td::-moz-selection{
  background: transparent !important;
}

/* =============== 1) Tokens (LIGHT) =============== */
body.ld:not(.ld-auth){
  --dt-wrap-bg: rgba(255,255,255,.72);
  --dt-wrap-brd: rgba(15,23,42,.10);
  --dt-wrap-shadow: 0 20px 55px rgba(15,23,42,.10);

  --dt-head-bg: rgba(255,255,255,.72);
  --dt-head-txt: rgba(15,23,42,.78);
  --dt-head-brd: rgba(15,23,42,.10);

  --dt-category-bg: rgba(15,23,42,.06);

  --dt-row-hover: transparent;
  --dt-row-brd: rgba(15,23,42,.08);

  --dt-cell-txt: rgba(15,23,42,.86);
  --dt-muted: rgba(15,23,42,.58);

  --dt-pill-bg: rgba(15,23,42,.06);
  --dt-pill-brd: rgba(15,23,42,.10);
  --dt-pill-txt: rgba(15,23,42,.72);

  --dt-input-bg: rgba(255,255,255,.70);
  --dt-input-brd: rgba(15,23,42,.12);
  --dt-input-brd-hover: rgba(15,23,42,.18);
  --dt-input-txt: rgba(15,23,42,.86);
  --dt-input-ph: rgba(15,23,42,.45);
  --dt-input-focus-ring: rgba(74,163,255,.22);
  --dt-input-focus-brd: rgba(74,163,255,.45);

  --dt-page-bg: rgba(255,255,255,.60);
  --dt-page-brd: rgba(15,23,42,.12);
  --dt-page-txt: rgba(15,23,42,.78);
  --dt-page-shadow: 0 12px 28px rgba(15,23,42,.10);

  --dt-page-hover-bg: rgba(255,255,255,.78);
  --dt-page-hover-brd: rgba(15,23,42,.16);
  --dt-page-hover-txt: rgba(15,23,42,.92);

  --dt-page-active-bg: rgba(74,163,255,.14);
  --dt-page-active-brd: rgba(74,163,255,.30);
  --dt-page-active-txt: rgba(15,23,42,.92);

  --dt-danger: rgba(239,68,68,.92);
  --dt-success: rgba(34,197,94,.92);
  --dt-info: rgba(74,163,255,.95);

  /* ТОКЕНЫ КНОПОК: Светлая тема (Дизайн) */
  --dt-btn-star-bg: rgba(15,23,42,.06);
  --dt-btn-star-txt: rgba(15,23,42,.5);
  --dt-btn-star-hover-bg: rgba(15,23,42,.12);
  --dt-btn-star-hover-txt: rgba(15,23,42,.9);

  --dt-btn-cart-bg: rgba(74,163,255,.15);
  --dt-btn-cart-txt: rgba(74,163,255,.95);
  --dt-btn-cart-hover-bg: rgba(74,163,255,.95);
  --dt-btn-cart-hover-txt: #ffffff;

  --dt-radius: 18px;
  --dt-radius-sm: 14px;
}

/* =============== 1.1) Tokens (DARK) =============== */
html[data-theme="dark"] body.ld:not(.ld-auth),
body.ld:not(.ld-auth)[data-theme="dark"]{
  --dt-wrap-bg: rgba(15,23,42,.92);
  --dt-wrap-brd: rgba(255,255,255,.10);
  --dt-wrap-shadow: 0 40px 100px rgba(0,0,0,.60);

  --dt-head-bg: rgba(15,23,42,.92);
  --dt-head-txt: rgba(255,255,255,.78);
  --dt-head-brd: rgba(255,255,255,.12);

  /* Категории (Разделители) - светлый оверлей для темной темы */
  --dt-category-bg: rgba(255,255,255,.06);
  
  --dt-row-hover: transparent;
  --dt-row-brd: rgba(255,255,255,.08);

  --dt-cell-txt: rgba(255,255,255,.86);
  --dt-muted: rgba(255,255,255,.58);

  --dt-pill-bg: rgba(255,255,255,.08);
  --dt-pill-brd: rgba(255,255,255,.14);
  --dt-pill-txt: rgba(255,255,255,.72);

  --dt-input-bg: rgba(255,255,255,.06);
  --dt-input-brd: rgba(255,255,255,.14);
  --dt-input-brd-hover: rgba(255,255,255,.20);
  --dt-input-txt: rgba(255,255,255,.88);
  --dt-input-ph: rgba(255,255,255,.45);
  --dt-input-focus-ring: rgba(74,163,255,.26);
  --dt-input-focus-brd: rgba(74,163,255,.55);

  --dt-page-bg: rgba(255,255,255,.07);
  --dt-page-brd: rgba(255,255,255,.14);
  --dt-page-txt: rgba(255,255,255,.78);
  --dt-page-shadow: 0 22px 60px rgba(0,0,0,.55);

  --dt-page-hover-bg: rgba(255,255,255,.08);
  --dt-page-hover-brd: rgba(255,255,255,.16);
  --dt-page-hover-txt: rgba(255,255,255,.92);

  --dt-page-active-bg: rgba(74,163,255,.18);
  --dt-page-active-brd: rgba(74,163,255,.34);
  --dt-page-active-txt: rgba(255,255,255,.92);

  --dt-btn-star-bg: rgba(255,255,255,.08);
  --dt-btn-star-txt: rgba(255,255,255,.5);
  --dt-btn-star-hover-bg: rgba(255,255,255,.15);
  --dt-btn-star-hover-txt: rgba(255,255,255,.95);

  --dt-btn-cart-bg: rgba(74,163,255,.15);
  --dt-btn-cart-txt: rgba(74,163,255,.95);
  --dt-btn-cart-hover-bg: rgba(74,163,255,.95);
  --dt-btn-cart-hover-txt: #ffffff;
}

/* =============== 2) Wrapper “card” =============== */
body.ld:not(.ld-auth) .dataTables_wrapper{
  position: relative !important;
  background: var(--dt-wrap-bg) !important;
  border: 1px solid var(--dt-wrap-brd) !important;
  border-radius: var(--dt-radius) !important;
  box-shadow: var(--dt-wrap-shadow) !important;

  padding: 14px 14px 12px !important;
  margin: 0 0 22px !important;

  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

html[data-theme="dark"] body.ld:not(.ld-auth) .dataTables_wrapper,
body.ld:not(.ld-auth)[data-theme="dark"] .dataTables_wrapper{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =============== 3) Top controls layout =============== */
body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_length,
body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_filter{
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 10px 0 !important;
}

body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_length{
  justify-content: flex-end !important;
}

body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_filter{
  width: 100% !important;
  justify-content: flex-start !important;
}

body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_length label,
body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_filter label{
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--dt-muted) !important;
}

/* =============== 4) Select / Search input (modern) =============== */
body.ld:not(.ld-auth) .dataTables_wrapper select,
body.ld:not(.ld-auth) .dataTables_wrapper input[type="search"]{
  background: var(--dt-input-bg) !important;
  border: 1px solid var(--dt-input-brd) !important;
  color: var(--dt-input-txt) !important;

  border-radius: var(--dt-radius-sm) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.08) !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  height: 42px !important;
  padding: 9px 12px !important;

  outline: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

body.ld:not(.ld-auth) .dataTables_wrapper input[type="search"]{
  width: 100% !important;
  max-width: 420px !important;
}

body.ld:not(.ld-auth) .dataTables_wrapper select:hover,
body.ld:not(.ld-auth) .dataTables_wrapper input[type="search"]:hover{
  border-color: var(--dt-input-brd-hover) !important;
}

body.ld:not(.ld-auth) .dataTables_wrapper select:focus,
body.ld:not(.ld-auth) .dataTables_wrapper input[type="search"]:focus{
  border-color: var(--dt-input-focus-brd) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.08), 0 0 0 4px var(--dt-input-focus-ring) !important;
}

body.ld:not(.ld-auth) .dataTables_wrapper input[type="search"]::placeholder{
  color: var(--dt-input-ph) !important;
  opacity: 1 !important;
}

/* =============== 5) Scroll container =============== */
body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_scroll{
  box-shadow: none !important;
  margin-bottom: 12px !important;
  border-radius: var(--dt-radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--dt-row-brd) !important;
  background: transparent !important;
}

/* =============== 6) Table base =============== */
body.ld:not(.ld-auth) table.dataTable{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* header */
body.ld:not(.ld-auth) table.dataTable thead th,
body.ld:not(.ld-auth) table.dataTable thead td{
  background: var(--dt-head-bg) !important;
  color: var(--dt-head-txt) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;

  border-bottom: 1px solid var(--dt-head-brd) !important;
  border-top: 0 !important;
  border-right: 1px solid var(--dt-head-brd) !important;
  padding: 12px 14px !important;
}

body.ld:not(.ld-auth) table.dataTable thead th:first-child,
body.ld:not(.ld-auth) table.dataTable thead td:first-child{
  border-left: 0 !important;
}

body.ld:not(.ld-auth) table.dataTable thead th:last-child,
body.ld:not(.ld-auth) table.dataTable thead td:last-child{
  border-right: 0 !important;
}

body.ld:not(.ld-auth) .dataTables_scrollBody table.dataTable thead tr{
  height: 0 !important;
}
body.ld:not(.ld-auth) .dataTables_scrollBody table.dataTable thead th,
body.ld:not(.ld-auth) .dataTables_scrollBody table.dataTable thead td{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  height: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}
body.ld:not(.ld-auth) .dataTables_scrollBody table.dataTable thead th::before,
body.ld:not(.ld-auth) .dataTables_scrollBody table.dataTable thead th::after,
body.ld:not(.ld-auth) .dataTables_scrollBody table.dataTable thead td::before,
body.ld:not(.ld-auth) .dataTables_scrollBody table.dataTable thead td::after{
  display: none !important;
}

/* Базовые стили ячеек */
body.ld:not(.ld-auth) table.dataTable tbody td,
body.ld:not(.ld-auth) table.dataTable tbody th{
  color: var(--dt-cell-txt) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;

  padding: 12px 14px !important;
  border-top: 1px solid var(--dt-row-brd) !important;
  border-right: 1px solid var(--dt-row-brd) !important;
  border-left: none !important;
  border-bottom: none !important;
  vertical-align: middle !important;
  
  transition: none !important;
}

body.ld:not(.ld-auth) table.dataTable tbody td:last-child,
body.ld:not(.ld-auth) table.dataTable tbody th:last-child{
  border-right: 0 !important;
}

/* =========================================================
   KILL HOVER & ZEBRA FOR OLD DATATABLES
   ========================================================= */

body.ld:not(.ld-auth) table.dataTable tbody tr,
body.ld:not(.ld-auth) table.dataTable tbody tr > *,
body.ld:not(.ld-auth) table.dataTable tbody tr.odd > *,
body.ld:not(.ld-auth) table.dataTable tbody tr.even > *,
body.ld:not(.ld-auth) table.dataTable tbody tr:hover > *,
body.ld:not(.ld-auth) table.dataTable.display tbody tr:hover > *,
body.ld:not(.ld-auth) table.dataTable.hover tbody tr:hover > * {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* icons in first column */
body.ld:not(.ld-auth) table.dataTable tbody td img{
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  display: inline-block !important;
}

/* =============== 7) Pagination (capsules) =============== */
body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_paginate{
  float: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  padding-top: 8px !important;
  white-space: nowrap !important;
}

body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_paginate .paginate_button{
  border: 1px solid var(--dt-page-brd) !important;
  background: var(--dt-page-bg) !important;
  color: var(--dt-page-txt) !important;

  border-radius: 999px !important;
  padding: 8px 12px !important;
  min-width: 38px !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  text-align: center !important;

  box-shadow: var(--dt-page-shadow) !important;
  cursor: pointer !important;

  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: var(--dt-page-hover-bg) !important;
  border-color: var(--dt-page-hover-brd) !important;
  color: var(--dt-page-hover-txt) !important;
  transform: translateY(-1px) !important;
}

body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_paginate .paginate_button:active{
  transform: none !important;
  box-shadow: none !important;
}

body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: var(--dt-page-active-bg) !important;
  border-color: var(--dt-page-active-brd) !important;
  color: var(--dt-page-active-txt) !important;
  box-shadow: var(--dt-page-shadow), 0 0 0 4px rgba(74,163,255,.18) !important;
}

body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
  opacity: .45 !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: var(--dt-page-shadow) !important;
}

/* ellipsis */
body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_paginate .ellipsis{
  color: var(--dt-muted) !important;
  padding: 0 2px !important;
  font-weight: 900 !important;
}

/* =============== 8) Info line =============== */
body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_info{
  float: none !important;
  text-align: center !important;
  color: var(--dt-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  padding-top: 10px !important;
}

/* =============== 9) Processing overlay (center glass chip) =============== */
body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_processing{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 14px !important;

  border-radius: 999px !important;
  border: 1px solid var(--dt-wrap-brd) !important;
  background: var(--dt-wrap-bg) !important;
  box-shadow: var(--dt-wrap-shadow) !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--dt-cell-txt) !important;
  white-space: nowrap !important;

  z-index: 20 !important;

  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

html[data-theme="dark"] body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_processing,
body.ld:not(.ld-auth)[data-theme="dark"] .dataTables_wrapper .dataTables_processing{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =============== 10) Remove legacy sorting icons (image-based) =============== */
body.ld:not(.ld-auth) table.dataTable thead .sorting,
body.ld:not(.ld-auth) table.dataTable thead .sorting_asc,
body.ld:not(.ld-auth) table.dataTable thead .sorting_desc,
body.ld:not(.ld-auth) table.dataTable thead .sorting_asc_disabled,
body.ld:not(.ld-auth) table.dataTable thead .sorting_desc_disabled{
  background-image: none !important;
}

/* =============== 11) “Status chips” (универсально) =============== */
body.ld:not(.ld-auth) table.dataTable tbody td span{
  border-radius: 10px !important;
}

body.ld:not(.ld-auth) .service-enabled,
body.ld:not(.ld-auth) .service-disabled,
body.ld:not(.ld-auth) .service-price-down,
body.ld:not(.ld-auth) .service-quantity{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  border-radius: 999px !important;
  border: 1px solid var(--dt-pill-brd) !important;
  background: var(--dt-pill-bg) !important;
  color: var(--dt-pill-txt) !important;
  white-space: nowrap !important;
}

body.ld:not(.ld-auth) .service-enabled{
  border-color: rgba(34,197,94,.30) !important;
  background: rgba(34,197,94,.16) !important;
  color: rgba(34,197,94,.95) !important;
}

body.ld:not(.ld-auth) .service-disabled{
  border-color: rgba(239,68,68,.30) !important;
  background: rgba(239,68,68,.16) !important;
  color: rgba(239,68,68,.95) !important;
}

body.ld:not(.ld-auth) .service-price-down{
  border-color: rgba(74,163,255,.30) !important;
  background: rgba(74,163,255,.16) !important;
  color: rgba(74,163,255,.98) !important;
}

/* =============== 12) Remove button (x) modern =============== */
body.ld:not(.ld-auth) .update__remove-button{
  color: var(--dt-muted) !important;
  cursor: pointer !important;
  margin-left: 10px !important;
  opacity: .85 !important;
  transition: color .16s ease, opacity .16s ease, transform .16s ease !important;
}
body.ld:not(.ld-auth) .update__remove-button:hover{
  color: rgba(239,68,68,.95) !important;
  opacity: 1 !important;
  transform: scale(1.06) !important;
}

/* =============== 13) Mobile tuning =============== */
@media (max-width: 767px){
  body.ld:not(.ld-auth) .dataTables_wrapper{
    padding: 12px 12px 10px !important;
    border-radius: 16px !important;
  }

  body.ld:not(.ld-auth) table.dataTable thead th,
  body.ld:not(.ld-auth) table.dataTable thead td{
    padding: 10px 10px !important;
    font-size: 11px !important;
  }

  body.ld:not(.ld-auth) table.dataTable tbody td,
  body.ld:not(.ld-auth) table.dataTable tbody th{
    padding: 10px 10px !important;
    font-size: 13.5px !important;
  }

  body.ld:not(.ld-auth) .dataTables_wrapper input[type="search"]{
    max-width: none !important;
    width: 100% !important;
  }

  body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_paginate{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding: 10px 4px 12px !important;
    gap: 4px !important;
    width: 100% !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_paginate::-webkit-scrollbar{
    display: none !important;
  }

  body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_paginate::after{
    content: "" !important;
    display: block !important;
    flex: 0 0 4px !important;
  }

  body.ld:not(.ld-auth) .dataTables_wrapper .dataTables_paginate .paginate_button{
    flex: 0 0 auto !important;
    padding: 5px 8px !important;
    min-width: 30px !important;
    font-size: 12px !important;
  }
}

/* =============== 14) Category / Group Rows (colspan) =============== */
body.ld:not(.ld-auth) table.dataTable tbody tr td[colspan],
body.ld:not(.ld-auth) table.dataTable tbody tr.odd td[colspan],
body.ld:not(.ld-auth) table.dataTable tbody tr.even td[colspan],
body.ld:not(.ld-auth) table.dataTable tbody tr.odd:hover td[colspan],
body.ld:not(.ld-auth) table.dataTable tbody tr.even:hover td[colspan],
body.ld:not(.ld-auth) table.dataTable tbody tr:hover td[colspan] {
  background-color: var(--dt-category-bg) !important;
  background: var(--dt-category-bg) !important;
  color: var(--dt-head-txt) !important;
  border-top: 1px solid var(--dt-row-brd) !important;
  border-bottom: 1px solid var(--dt-row-brd) !important;
  box-shadow: none !important;
}

/* =============== 15) Action Buttons (Star & Cart) =============== */
body.ld:not(.ld-auth) table.dataTable tbody td .favorite-toggler,
body.ld:not(.ld-auth) table.dataTable tbody td .order-now {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  transition: transform .16s ease, background .16s ease, filter .16s ease !important;
  outline: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body.ld:not(.ld-auth) table.dataTable tbody td .favorite-toggler:active,
body.ld:not(.ld-auth) table.dataTable tbody td .order-now:active {
  transform: scale(0.92) !important;
}

body.ld:not(.ld-auth) table.dataTable tbody td .favorite-toggler {
  background: var(--dt-btn-star-bg) !important;
  color: var(--dt-btn-star-txt) !important;
  margin-bottom: 6px !important;
}

body.ld:not(.ld-auth) table.dataTable tbody td .favorite-toggler:hover {
  background: var(--dt-btn-star-hover-bg) !important;
  color: var(--dt-btn-star-hover-txt) !important;
  transform: translateY(-1px) !important;
}

body.ld:not(.ld-auth) table.dataTable tbody td .order-now {
  background: var(--dt-btn-cart-bg) !important;
  color: var(--dt-btn-cart-txt) !important;
  margin-top: 0 !important; 
}

body.ld:not(.ld-auth) table.dataTable tbody td .order-now:hover {
  background: var(--dt-btn-cart-hover-bg) !important;
  color: var(--dt-btn-cart-hover-txt) !important;
  transform: translateY(-1px) !important;
}