/* =======================================================
   Law Enforcement Portal – Mobile Layout Enhancements
   Applies automatically on screens ≤820px wide
   - Always-vertical header labels (no horizontal fallback)
   - Sticky first column (75px on phones)
   - Smooth horizontal scroll; no clipping
======================================================= */

/* ===== Base (≤768px) ===== */
@media (max-width: 768px) {
  html, body {
    background: var(--dst-surface, #f9fafb);
    font-size: 15px;
    line-height: 1.4;
    margin: 0;
    padding: 0;
  }

  .dst-card, .lep-card {
    padding: 12px !important;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    margin-bottom: 14px;
  }

  h1, h2, h3 { font-size: 1.1rem !important; margin-bottom: 8px !important; }
  p, label, select, input, button { font-size: 15px !important; }

  /* Filters */
  .dst-card select, .dst-card button { width: 100%; margin-top: 6px; }
  .dst-card form > * + * { margin-top: 10px; }
  button.button, .button { padding: .5rem 1rem; border-radius: 10px; }

  /* Generic WP tables in cards */
  table.widefat { font-size: 13px !important; width: 100%; }
  table.widefat th, table.widefat td {
    padding: 6px 8px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Footer */
  footer, .lep-footer { text-align: center; font-size: 13px; color: #555; padding: 1rem 0; }

  /* Header Tabs */
  .dst-tabs, .lep-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .dst-tabs button, .lep-tabs button, .dst-tabs a, .lep-tabs a {
    font-size: 14px !important; padding: 8px 10px; flex: 1 0 45%; text-align: center;
  }

  /* Warning Banner */
  .dst-warning, .lep-warning { font-size: 14px; padding: 10px; border-radius: 8px; }
}

/* ===== Department Stats table (≤820px) ===== */
@media (max-width: 820px) {
  /* Scroll container */
  #department-stats-section .dst-admin-table-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;       /* avoid clipping rotated headers */
    -webkit-overflow-scrolling: touch;
  }

  /* Table core: fixed layout so widths are respected */
  #department-stats-section .dst-api-totals-table {
    table-layout: fixed !important;
    width: max-content !important;        /* allow horizontal scroll if needed */
    min-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: visible !important;
  }

  /* Header row stays above body */
  #department-stats-section .dst-api-totals-table thead,
  #department-stats-section .dst-api-totals-table thead tr,
  #department-stats-section .dst-api-totals-table thead th {
    position: sticky;
    top: 0;
    z-index: 6;
    background: #e6f0fa;
    overflow: visible !important;
  }

  /* ============================
     1) Sticky FIRST COLUMN (75px)
     ============================ */
  /* Header cell of first column */
  #department-stats-section .dst-api-totals-table thead th.dst-sticky {
    left: 0 !important;
    z-index: 9 !important;
    width: 75px !important; min-width: 75px !important; max-width: 75px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    white-space: nowrap !important;
    text-align: left !important;
    background: #fff !important;
  }
  /* Body cells of first column */
  #department-stats-section .dst-api-totals-table tbody td.dst-sticky {
    position: sticky !important;
    left: 0 !important;
    z-index: 8 !important;
    width: 75px !important; min-width: 75px !important; max-width: 75px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: #fff !important;
  }

  /* Also lock by index in case a row lacks .dst-sticky */
  #department-stats-section .dst-api-totals-table tr > :first-child {
    width: 75px !important; min-width: 75px !important; max-width: 75px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ============================
     2) ALWAYS-VERTICAL CATEGORY HEADERS
        - Centered, never horizontal
     ============================ */
  #department-stats-section .dst-api-totals-table thead th.dst-vert {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    background: #e6f0fa !important;

    /* Column width (horizontal space taken by the rotated label) */
    width: 44px !important; min-width: 44px !important; max-width: 44px !important;

    /* Vertical space for the rotated text */
    height: clamp(120px, 22vw, 220px) !important;

    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    overflow: visible !important;         /* allow rotated child to render fully */
  }

  /* Rotated inner label (requires <span class="dst-vertical-text">) */
  #department-stats-section .dst-api-totals-table thead th.dst-vert > .dst-vertical-text,
  #department-stats-section .dst-api-totals-table thead th.dst-vert > span {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
  }

  /* ============================
     3) BODY CELLS (match header widths)
     ============================ */
  #department-stats-section .dst-api-totals-table tbody td:not(.dst-sticky) {
    width: 44px !important; min-width: 44px !important; max-width: 44px !important;
    text-align: center !important;
    padding: 6px 2px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: #fff;
  }

  /* General cell padding — do NOT pad the sticky first column */
  #department-stats-section .dst-api-totals-table th:not(.dst-sticky),
  #department-stats-section .dst-api-totals-table td:not(.dst-sticky) {
    padding: 6px 6px !important;
  }
}

/* ===== Extra-tight phones (≤600px) ===== */
@media (max-width: 600px) {
  #department-stats-section .dst-api-totals-table thead th.dst-vert {
    height: clamp(110px, 26vw, 200px) !important;
    width: 38px !important; min-width: 38px !important; max-width: 38px !important;
  }
  #department-stats-section .dst-api-totals-table tbody td:not(.dst-sticky) {
    width: 38px !important; min-width: 38px !important; max-width: 38px !important;
  }
}

/* ===== Safety: never clip rotated headers in ancestors ===== */
#department-stats-section,
#department-stats-section .dst-admin-table-scroll,
#department-stats-section .dst-api-totals-table,
#department-stats-section .dst-api-totals-table thead,
#department-stats-section .dst-api-totals-table thead tr {
  overflow: visible !important;
}

/* ===== Date-range banner alignment (≤820px) ===== */
@media (max-width: 820px){
  /* Shift the entire bar to account for the 75px sticky first column.
     Keeps the right edge aligned and inner padding consistent. */
  #department-stats-section .dst-range-header{
    display: block;
    margin: 0 0 8px 75px !important;        /* shift bar right by sticky width */
    width: calc(100% - 75px) !important;    /* maintain right alignment */
    padding: 8px 12px !important;           /* standard inner padding */
    border-radius: 8px;
    box-sizing: border-box !important;
    position: relative;
    z-index: 5;
  }
}
/* HARD OVERRIDE: lock first column to 75px (beats 38vw) */
@media (max-width: 820px){
  body #department-stats-section#department-stats-section .dst-api-totals-table thead tr > th.dst-sticky,
  body #department-stats-section#department-stats-section .dst-api-totals-table tbody tr > td.dst-sticky,
  body #department-stats-section#department-stats-section .dst-api-totals-table tr > :first-child{
    width:75px !important;
    min-width:75px !important;
    max-width:75px !important;
    padding:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}