/* Responsive adjustments for list view */

/* Make container padding smaller on small screens and ensure elements fit */
@media (max-width: 900px) {
  .container {
    padding: 12px 16px;
  }

  .navbar {
    padding: 0.5rem 1rem;
  }

  /* Hide long nav links on small screens to save space */
  .nav-links {
    display: none;
  }

  .nav-actions {
    gap: 0.5rem;
  }

  /* Stack search inputs and controls */
  .search-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
  }

  .search-box .form-control,
  .search-box .btn {
    flex: 1 1 100%;
    min-width: 0;
  }

  .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .card-header .btn {
    width: 100%;
  }

  /* Make table more flexible: allow wrapping and remove forced min width */
  .table-container table {
    min-width: 0 !important;
    table-layout: auto;
    width: 100%;
  }

    /* Filled badges for data types */
    .badge {
      display: inline-block;
      padding: 0.22rem 0.6rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      line-height: 1;
    }

    .badge-type-laptop,
    .badge-type-printer,
    .badge-type-desktop,
    .badge-type-computer,
    .badge-type-unknown {
      /* unified lavender palette for all Type badges */
      background: linear-gradient(180deg, #f3e8ff 0%, #e9d5ff 50%, #d6bbff 100%);
      color: #2b0b3a;
      border: 1px solid rgba(88, 24, 69, 0.08);
      box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset;
    }

    /* Make sure badges inside table cells don't push row height excessively */
    .table-container td .badge {
      display: inline-block;
      padding: 0.18rem 0.55rem;
      font-size: 0.78rem;
    }

  .table-container td,
  .table-container th {
    white-space: normal;
    word-break: break-word;
    padding: 0.75rem;
  }

  /* Reduce card and table paddings for smaller viewports */
  .card {
    padding: 1rem;
  }

  body.list-page .card {
    min-height: auto;
  }

  /* Compact table rows for denser list view */
  .table-container table,
  .table-container thead,
  .table-container tbody,
  .table-container tr,
  .table-container th,
  .table-container td {
    border-collapse: collapse;
    vertical-align: middle;
  }

  .table-container th,
  .table-container td {
    padding: 0.45rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1.15;
  }

  /* Slightly smaller header/title when compact */
  .card-title { font-size: 1.2rem; }

  /* Make images or thumbnails in table smaller */
  .table-container img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
  }
}

/* Very small screens tweaks */
@media (max-width: 520px) {
  .logo { font-size: 1.1rem; }
  .theme-toggle { padding: 0.4rem 0.6rem; font-size: 0.82rem; }
  .card-title { font-size: 1.15rem; }
  .btn { padding: 0.5rem 0.85rem; font-size: 0.85rem; }
}

/* Keep the list card header visible when scrolling the page or the table */
.header {
  /* expose a CSS variable for header height so sticky elements can offset below it */
  --site-header-height: 72px;
}

.card {
  position: relative;
}

/* Make the list blend with the page background on the list page.
   Remove card surface (background, shadow, border) but preserve
   spacing inside the table container for readability. Scoped to
   `body.list-page` to avoid affecting other pages. */
body.list-page .card {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0; /* table container will provide inner padding */
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow children (table-container) to size and scroll correctly */
}

body.list-page .card-header {
  background: transparent;
  border-bottom: none;
  /* keep the header spacing so title and actions remain readable */
  padding: 0.75rem 1rem;
}

/* Group header: visually join the title/actions and search box into one block */
.card-header {
  display: flex;
  align-items: flex-start; /* align title to top so it lines up with the table header */
  justify-content: space-between;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 12px 12px 0 0;
  padding: 0.45rem 0.8rem; /* reduce vertical padding so header is tighter */
  box-shadow: var(--shadow-sm);
}

.card-header .card-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.1; }

/* Place the search box directly under the header so they appear as a single group */
.search-box {
  margin-top: 0;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 0.6rem;
}

/* When the header is sticky, keep border-radius aligned and avoid double border */
.card-header.is-sticky {
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Ensure the controls in the header keep their spacing on small screens */
@media (max-width: 900px) {
  .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    border-radius: 10px;
  }
  .search-box {
    border-radius: 0 0 10px 10px;
  }
}

/* --- Small header adjustments (compact visual) --- */
.card-header.small, body.list-page .card-header {
  /* tighter vertical rhythm */
  padding: 0.35rem 0.6rem;
}

.card-header.small .card-title, body.list-page .card-header .card-title {
  font-size: 0.98rem;
  font-weight: 600;
}

.card-header.small > div, body.list-page .card-header > div {
  gap: 0.4rem;
}

.card-header.small .btn, body.list-page .card-header .btn {
  padding: 0.28rem 0.45rem;
  font-size: 0.82rem;
}

.search-box { padding: 0.45rem; }

/* Header filters wrapper: when `.search-box` is moved into header,
   this wrapper keeps it visually joined with the header and handles layout. */
.header-filters {
  width: 100%;
  margin-top: 0; /* keep filters flush with the table header */
  /* default display will be controlled by `.card.filters-open` class */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent; /* search-box itself provides surface/border */
  padding: 0; /* remove extra top/bottom spacing */
}

/* Hide filters by default; toggle via `.card.filters-open` when the user clicks the filter button */
.card:not(.filters-open) .header-filters {
  display: none !important;
}
.card.filters-open .header-filters {
  display: flex !important;
}

/* When search-box is inside header, reduce its top border so it appears as part of the header */
.card-header .search-box {
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding-top: 0.45rem;
}

/* Ensure header layout stacks nicely on narrow screens */
@media (max-width: 900px) {
  .card-header { flex-direction: column; align-items: stretch; }
  .header-filters { order: 2; }
  .card-actions { order: 1; align-self: flex-end; }
}

/* Compact filter variant: smaller inputs and tighter spacing for dense headers */
.search-box.compact {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0.28rem;
}
.search-box.compact .form-control {
  padding: 0.28rem 0.45rem;
  font-size: 0.82rem;
  height: 34px;
  line-height: 1;
  border-radius: 6px;
  min-width: 0;
}
.search-box.compact input[type="date"],
.search-box.compact input[type="tel"],
.search-box.compact input[type="text"] {
  height: 34px;
}
.search-box.compact select.form-control {
  height: 34px;
}
.search-box.compact .btn {
  padding: 0.28rem 0.5rem;
  font-size: 0.82rem;
}

/* Allow filters to shrink on very small screens into a stacked layout while keeping compact styles */
@media (max-width: 520px) {
  .search-box.compact {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .search-box.compact .form-control { flex: 1 1 100%; }
}

@media (max-width: 900px) {
  .card-header.small, body.list-page .card-header { padding: 0.5rem; }
  .card-header.small .card-title, body.list-page .card-header .card-title { font-size: 1.05rem; }
}

/* Keep sensible inner padding for the data area now that the card
   background is removed. This keeps rows readable against the page
   background. */
body.list-page .table-container {
  /* outer padding removed so the table edge aligns with card header
     and header-filters; internal spacing is handled by table cells */
  padding: 0;
}

/* Make the table itself stretch to the container width so it visually
   integrates with the background. */
body.list-page .table-container table {
  width: 100%;
  background: transparent;
  /* ensure cells align exactly with headers and there is no gap */
  border-collapse: collapse;
  border-spacing: 0;
}

/* Make sure table participates in box-sizing so padding computations are predictable */
.table-container table,
.table-container th,
.table-container td {
  box-sizing: border-box;
}

.card-header {
  position: sticky;
  top: var(--site-header-height);
  z-index: 40;
  background: var(--surface);
  /* ensure border and spacing remain consistent when sticky */
  border-bottom: 2px solid var(--border-color);
}

/* When the table-container itself scrolls, keep the header inside the card pinned to the top of the card */
.table-container {
  /* ensure the container creates a new stacking context for sticky to work inside it */
  position: relative;
}

/* Keep the table container visible and make only the data inside scrollable.
   The container height is calculated from viewport minus header heights. */
.table-container {
  max-height: calc(100vh - var(--site-header-height, 72px) - var(--card-header-height, 56px));
  overflow: auto;
}

/* Force table rows to a fixed physical height of 2cm */
/* 1cm = 37.795px (at 96dpi), so 2cm ≈ 75.59px */
.table-container tr,
.table-container th,
.table-container td {
  /* allow rows to size to content */
  height: auto !important;
  min-height: 0 !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

/* Keep compact cell padding and readable text */
.table-container th,
.table-container td {
  padding: 0.45rem 0.5rem !important;
  font-size: 0.9rem !important;
  line-height: 1.15 !important;
}

/* Constrain images so they don't enlarge rows excessively */
.table-container img {
  max-height: 36px !important;
  width: auto !important;
  object-fit: cover !important;
  display: inline-block;
  vertical-align: middle;
}

/* When images are disabled via settings, hide attachment thumbnails in lists */
:root.no-images .table-container img,
.no-images .table-container img {
  display: none !important;
}

/* Compact mode: reduce paddings and font sizes for denser display */
.compact-mode .table-container th,
.compact-mode .table-container td {
  padding: 0.25rem 0.35rem !important;
  font-size: 0.82rem !important;
}

.compact-mode .card-title { font-size: 1.05rem; }
.compact-mode .table-container img { max-height: 28px !important; }

/* When badges are hidden via settings, hide the badge elements */
:root.hide-badges .badge,
.hide-badges .badge {
  display: none !important;
}

/* Icon button styles */
.btn.btn-icon {
  padding: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.btn-icon svg { display: block; }

/* Action buttons fitter: when horizontal space is tight, collapse labels to icons */
.card-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.card-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.card-actions .btn .btn-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  line-height: 1;
  text-align: center;
  font-weight: 700;
}
.card-actions .btn .btn-label {
  display: inline-block;
  white-space: nowrap;
  transition: opacity 120ms ease, width 120ms ease, margin 120ms ease;
}
.card-header.actions-fitted .btn .btn-label {
  opacity: 0;
  width: 0;
  margin: 0;
  overflow: hidden;
}
.card-header.actions-fitted .btn {
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

/* For very small screens ensure icon-only buttons align well */
@media (max-width: 420px) {
  .card-header.actions-fitted .btn { padding: 0.28rem; }
  .card-actions .btn .btn-icon { font-size: 1rem; }
}

/* Make the list page use internal scrolling only: disable body scroll and
   let the `.table-container` handle vertical scrolling. This keeps the site
   header and card header fixed while only the data area scrolls. */
html, body {
  height: 100%;
}

/* Limit page scroll only on the list page so other pages are unaffected */
body.list-page {
  overflow: hidden;
}

/* Main container should fill remaining viewport below site header */
main.list-container {
  height: calc(100vh - var(--site-header-height, 72px));
  display: flex;
  flex-direction: column;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Allow the table container to expand and be the only scrollable area */
.table-container {
  /* create stacking context and allow the container to size within the card
     while remaining the only scrollable region */
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* constrain height so the table body scrolls while headers remain sticky */
  max-height: calc(100vh - var(--site-header-height, 72px) - var(--card-header-height, 56px));
  min-height: 0; /* important for correct flex overflow behavior */
  overflow: auto;
}

/* Keep existing sticky header behavior but ensure it sits below the site header */
.card-header {
  position: sticky;
  top: var(--site-header-height);
  /* bring card header to the top of the stacking order so nothing overlaps it */
  z-index: 1000;
  background: var(--surface);
}

/* Pin the table column headers (thead) to the top of the scrolling data area
   so the column names (Type, Brand, Model, Serial, Location, Assigned To, etc.)
   remain visible while only the rows scroll. Works when `.table-container` is
   the scrolling element (it already has `overflow: auto`). */
.table-container thead th {
  position: sticky;
  top: 0; /* stick to top of the scrolling container */
  /* sit below the card header and header-filters but above table rows */
  z-index: 900;
  /* create an isolated stacking context so descendants can't paint above this */
  isolation: isolate;
  /* Ensure the header is fully opaque so rows don't show through */
  background: var(--surface);
  /* header text color requested by user */
  color: #00B0F0 !important;
  /* increase header font size for better legibility */
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  /* Use adjustable CSS variables for header padding so it's easy to tune */
  --table-header-vertical-padding: 0.45rem;
  --table-header-horizontal-padding: 0.6rem;
  padding: var(--table-header-vertical-padding) var(--table-header-horizontal-padding);
  vertical-align: middle;
  /* prevent labels from wrapping and show ellipsis for overflow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* visual separation from rows */
  box-shadow: inset 0 -1px 0 var(--border-color), 0 6px 14px rgba(0,0,0,0.04);
  transition: box-shadow 140ms ease;
}

/* Ensure children (like inline elements) don't break ellipsis behavior */
.table-container thead th > * {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ensure thead row doesn't collapse or wrap awkwardly on small screens */
.table-container thead tr {
  display: table-row;
}

/* When the table container is scrolled, apply a subtle drop shadow to the
   sticky column headers to visually separate them from the scrolling rows. */
.table-container.table-scrolled thead th {
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
}

/* Soft-blue row tint for the data rows */
.table-container tbody tr {
  background-color: rgba(99, 130, 255, 0.02); /* very subtle blue tint for dark/light */
  transition: background-color 160ms ease;
}

.table-container tbody tr:hover {
  background-color: rgba(99, 130, 255, 0.06);
}

/* Stronger, but still soft, blue rows in light theme */
:root:not([data-theme="dark"]) .table-container tbody tr {
  /* reduce opacity so sticky headers remain visually dominant */
  background-color: rgba(227, 241, 255, 0.18);
}

/* Ensure the Type header cell fits its badge/text without underflowing */
.table-container thead th:first-child {
  white-space: nowrap;
  padding-right: 0.6rem;
  min-width: 110px;
}

/* Align Type column (first column) to the left for header and cells.
   Use !important to ensure this rule wins over other cell font/align rules. */
.table-container thead th:first-child {
  text-align: left !important;
  padding-left: 0.6rem !important;
}
.table-container tbody td:first-child {
  text-align: left !important;
  padding-left: 0.6rem !important;
}

/* Ensure both header and body first column use the same horizontal padding so
   the header label sits exactly above the column content. Also remove any
   unexpected centering for badges inside the first column. */
.table-container thead th:first-child,
.table-container tbody td:first-child {
  padding-right: 0.6rem !important;
  padding-left: 0.6rem !important;
}
.table-container tbody td:first-child .badge {
  margin: 0; /* remove extra offsets */
  display: inline-block; /* keep badges inline with text */
  vertical-align: middle;
}

/* Prevent badges or long values from rendering behind the header by ensuring
   table cells create their own stacking context when near the top. */
.table-container tbody td,
.table-container tbody th {
  position: relative;
  z-index: 1;
}
:root:not([data-theme="dark"]) .table-container tbody tr:hover {
  background-color: rgba(210, 232, 255, 0.85);
}

/* Keep the table header clearly separated: ensure header row stays primary surface */
.table-container thead th {
  background: var(--surface);
}

/* In light theme, emphasize the first header (Type) with the primary blue */
:root:not([data-theme="dark"]) .table-container thead th:first-child {
  color: #00B0F0;
  font-weight: 700;
}

/* When compact, keep the Type header emphasized as well */
:root:not([data-theme="dark"]) .compact-mode .table-container thead th:first-child {
  color: #00B0F0;
}

/* Header filters (moved Type filter) */
.header-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  /* visually join with the card header: same horizontal padding and rounded bottom corners */
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--surface);
  /* keep filters between card header and table headers */
  z-index: 950; /* below card-header (1000) but above table headers (900) */
  /* Keep filters visible while scrolling the table - stick below the card header */
  position: sticky;
  top: calc(var(--site-header-height, 72px) + var(--card-header-height, 48px));
}

/* When the search box is placed into `.header-filters` we want it to
   visually sit flush with the card header: remove its own border and
   rely on the wrapper for padding and surface. */
.header-filters .search-box {
  margin: 0;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0; /* wrapper handles padding */
}

/* Keep individual filter controls compact and responsive */
.header-filters .form-control {
  margin: 0 0.35rem 0 0;
  min-width: 140px;
}

.header-filters .form-control {
  width: 180px;
  min-width: 120px;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.92rem;
}

/* Explicit light-theme header background and text color to ensure
   a consistent filled header appearance in light mode */
:root:not([data-theme="dark"]) .table-container thead th {
  background: #ffffff !important;
  color: #00B0F0 !important;
}

@media (max-width: 900px) {
  .header-filters { order: 2; margin-left: 0; padding: 0.4rem 0.6rem; }
  .header-filters .form-control { width: 100%; min-width: 0; }
  /* reduce header padding on small screens to keep layout compact */
  .table-container thead th { --table-header-vertical-padding: 0.28rem; --table-header-horizontal-padding: 0.45rem; }
}

/* Show header filters by default on wide screens (desktop) unless explicitly hidden by user preference */
@media (min-width: 1200px) {
  .card .header-filters { display: flex !important; }
}