/* ==========================================================================
   DataTables — narocitermin.si theme
   Dark-only luxury look per documents/styling.md: pure black canvas,
   hairline dividers, muted uppercase micro-labels, one champagne-gold
   accent (#d6b36a) used sparingly. This file overrides the gray/blue
   utility classes injected by datatables.tailwindcss.js — visual only.
   ========================================================================== */

:root {
    --dt-row-selected: 214, 179, 106;
    --dt-row-selected-text: 244, 231, 198;
    --dt-row-selected-link: 214, 179, 106;
    --dt-row-stripe: 0, 0, 0;
    --dt-row-hover: 0, 0, 0;
    --dt-column-ordering: 0, 0, 0;
    --dt-html-background: #000000;
  }
  :root.dark {
    --dt-html-background: #000000;
  }

  /* Native controls (select dropdowns, scrollbars) render for a dark UI */
  div.dt-container {
    color-scheme: dark;
  }

  /* --------------------------------------------------------------------
     Structural: child-row control arrows
     -------------------------------------------------------------------- */
  table.dataTable td.dt-control {
    text-align: center;
    cursor: pointer;
  }
  table.dataTable td.dt-control:before {
    display: inline-block;
    box-sizing: border-box;
    content: "";
    border-top: 5px solid transparent;
    border-left: 10px solid rgba(255, 255, 255, 0.5);
    border-bottom: 5px solid transparent;
    border-right: 0px solid transparent;
  }
  table.dataTable tr.dt-hasChild td.dt-control:before {
    border-top: 10px solid rgba(255, 255, 255, 0.5);
    border-left: 5px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 5px solid transparent;
  }
  table.dataTable tfoot:empty {
    display: none;
  }

  /* --------------------------------------------------------------------
     Structural: scrolling
     -------------------------------------------------------------------- */
  div.dt-scroll {
    width: 100%;
  }

  div.dt-scroll-body thead tr,
  div.dt-scroll-body tfoot tr {
    height: 0;
  }
  div.dt-scroll-body thead tr th, div.dt-scroll-body thead tr td,
  div.dt-scroll-body tfoot tr th,
  div.dt-scroll-body tfoot tr td {
    height: 0 !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border-top-width: 0px !important;
    border-bottom-width: 0px !important;
  }

  div.dt-scroll-body thead tr th div.dt-scroll-sizing, div.dt-scroll-body thead tr td div.dt-scroll-sizing,
  div.dt-scroll-body tfoot tr th div.dt-scroll-sizing,
  div.dt-scroll-body tfoot tr td div.dt-scroll-sizing {
    height: 0 !important;
    overflow: hidden !important;
  }

  div.dt-scroll-body > table.dataTable > thead > tr > th,
  div.dt-scroll-body > table.dataTable > thead > tr > td {
    overflow: hidden;
  }

  /* --------------------------------------------------------------------
     Table surface — black canvas, hairline dividers, no boxes
     -------------------------------------------------------------------- */
  table.dataTable {
    background-color: transparent;
  }

  /* Kill the injected zebra striping (even:bg-gray-50 / dark:even:bg-gray-900/50) */
  table.dataTable > tbody > tr {
    background-color: transparent !important;
  }

  /* Quiet row hover — light on black, not a gray fill */
  table.dataTable > tbody > tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
  }

  /* Header: muted uppercase eyebrow labels over a hairline divider */
  table.dataTable > thead > tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  table.dataTable > thead > tr > th,
  table.dataTable > thead > tr > td {
    background: #000000 !important;
    color: #888888 !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }

  /* Body cells: secondary text, divider hairlines between rows */
  table.dataTable > tbody > tr > td {
    color: #D4D4D4;
    border-bottom: 1px solid #1A1A1A;
  }

  table.dataTable > tfoot > tr > th,
  table.dataTable > tfoot > tr > td {
    background: transparent !important;
    color: #888888 !important;
    border-top: 1px solid #1A1A1A;
  }

  /* Empty-table message */
  table.dataTable td.dt-empty {
    text-align: center;
    color: #888888;
    padding: 2.5rem 1rem;
  }

  /* Selected rows — gold wash + gold-tinted text, never a solid fill */
  table.dataTable > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px rgba(214, 179, 106, 0.10) !important;
    color: #f4e7c6 !important;
  }
  table.dataTable > tbody > tr.selected a {
    color: #d6b36a;
  }

  /* --------------------------------------------------------------------
     Ordering (sort) indicators
     -------------------------------------------------------------------- */
  table.dataTable thead > tr > th:active,
  table.dataTable thead > tr > td:active {
    outline: none;
  }
  table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
  table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
  table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before {
    position: absolute;
    display: block;
    bottom: 50%;
    content: "\25B2";
    content: "\25B2"/"";
  }
  table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
  table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
  table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    position: absolute;
    display: block;
    top: 50%;
    content: "\25BC";
    content: "\25BC"/"";
  }
  table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc, table.dataTable thead > tr > th.dt-ordering-asc, table.dataTable thead > tr > th.dt-ordering-desc,
  table.dataTable thead > tr > td.dt-orderable-asc,
  table.dataTable thead > tr > td.dt-orderable-desc,
  table.dataTable thead > tr > td.dt-ordering-asc,
  table.dataTable thead > tr > td.dt-ordering-desc {
    position: relative;
    padding-right: 30px;
  }
  table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order,
  table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order,
  table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order,
  table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order,
  table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    width: 12px;
  }
  table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
  table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
  table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after,
  table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before,
  table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
  table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
  table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after,
  table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before,
  table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    left: 0;
    opacity: 0.2;
    line-height: 9px;
    font-size: 0.8em;
  }
  table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc,
  table.dataTable thead > tr > td.dt-orderable-asc,
  table.dataTable thead > tr > td.dt-orderable-desc {
    cursor: pointer;
  }
  table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover,
  table.dataTable thead > tr > td.dt-orderable-asc:hover,
  table.dataTable thead > tr > td.dt-orderable-desc:hover {
    outline: none;
    color: #D4D4D4 !important;
  }
  /* Active sort arrow picks up the gold accent */
  table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
  table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
  table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    opacity: 1;
    color: #d6b36a;
  }
  /* Actively sorted column header reads slightly brighter */
  table.dataTable thead > tr > th.dt-ordering-asc,
  table.dataTable thead > tr > th.dt-ordering-desc,
  table.dataTable thead > tr > td.dt-ordering-asc,
  table.dataTable thead > tr > td.dt-ordering-desc {
    color: #D4D4D4 !important;
  }
  table.dataTable thead > tr > th.sorting_desc_disabled span.dt-column-order:after, table.dataTable thead > tr > th.sorting_asc_disabled span.dt-column-order:before,
  table.dataTable thead > tr > td.sorting_desc_disabled span.dt-column-order:after,
  table.dataTable thead > tr > td.sorting_asc_disabled span.dt-column-order:before {
    display: none;
  }

  /* --------------------------------------------------------------------
     Search input & length select — the house .input treatment:
     black fill, inset hairline ring, no borders, gold caret
     -------------------------------------------------------------------- */
  div.dt-search input,
  div.dt-length select {
    background: rgba(0, 0, 0, 0.025) !important;
    border: none !important;
    border-radius: 0.75rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    color: #FFFFFF;
    padding: 0.5rem 0.75rem;
    caret-color: #d6b36a;
    transition: box-shadow 200ms ease-out, background-color 200ms ease-out;
  }

  div.dt-search input::placeholder {
    color: #505050 !important;
  }

  div.dt-search input:hover,
  div.dt-length select:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  }

  /* Focus: quiet gold ring — no loud blue */
  div.dt-search input:focus,
  div.dt-length select:focus {
    outline: none !important;
    background: #000000 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        inset 0 0 0 1px rgba(214, 179, 106, 0.45) !important;
  }

  div.dt-length select option {
    background-color: #000000;
    color: #FFFFFF;
  }

  /* Labels ("Išči:", "Prikaži:") — muted uppercase micro-labels */
  div.dt-search label,
  div.dt-length label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #888888;
  }

  /* --------------------------------------------------------------------
     Info text ("Prikazujem X do Y od Z zapisov")
     -------------------------------------------------------------------- */
  div.dt-info {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #888888;
    padding-top: 0.75rem;
  }

  /* --------------------------------------------------------------------
     Pagination — editorial text buttons, no boxes; gold marks the
     current page
     -------------------------------------------------------------------- */
  div.dt-paging {
    padding-top: 0.25rem;
  }

  div.dt-paging ul.pagination {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  /* The tailwind renderer emits <a> buttons with gray box utilities —
     dissolve them into quiet editorial text buttons */
  div.dt-paging ul.pagination > a {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0.5rem;
    margin: 0 !important;
    color: #888888 !important;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 200ms ease-out, background-color 200ms ease-out;
  }

  div.dt-paging ul.pagination > a svg {
    width: 1rem;
    height: 1rem;
  }

  div.dt-paging ul.pagination > a[href]:not(.font-semibold):hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.03) !important;
  }

  div.dt-paging ul.pagination > a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(214, 179, 106, 0.18) !important;
  }

  /* Current page — the renderer marks it with the font-semibold class */
  div.dt-paging ul.pagination > a.font-semibold {
    color: #d6b36a !important;
    background: rgba(214, 179, 106, 0.10) !important;
  }

  /* Disabled buttons are rendered without an href */
  div.dt-paging ul.pagination > a:not([href]) {
    color: #505050 !important;
    cursor: not-allowed;
  }

  /* --------------------------------------------------------------------
     Processing overlay
     -------------------------------------------------------------------- */
  div.dt-processing {
    background: #000000;
    color: #D4D4D4;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 24px 60px -30px rgba(0, 0, 0, 0.9);
    border-radius: 1rem;
  }

  /* --------------------------------------------------------------------
     FixedColumns / FixedHeader — fixed cells must stay opaque black so
     content doesn't bleed through while scrolling
     -------------------------------------------------------------------- */
  table.dataTable thead tr > .dtfc-fixed-left,
  table.dataTable thead tr > .dtfc-fixed-right,
  table.dataTable tfoot tr > .dtfc-fixed-left,
  table.dataTable tfoot tr > .dtfc-fixed-right,
  table.dataTable tbody tr > .dtfc-fixed-left,
  table.dataTable tbody tr > .dtfc-fixed-right {
    background-color: #000000 !important;
  }

  table.dataTable.fixedHeader-floating {
    background-color: #000000;
  }