/*
 * =============================================================
 * xfact-custom-style.css - Keycloak Compliance Reports
 * =============================================================
 *
 * PURPOSE
 * -------
 * Application-specific styles that supplement the Massachusetts
 * Design System (xfact-mds.css). This file contains ONLY styles
 * that are not provided by MDS components.
 *
 * Contents:
 *   1.  Reset & Base Elements
 *   2.  Layout Containers
 *   3.  Headings (H1 parallelogram, H2 green underline, H3)
 *   4.  Data Tables (report-specific table styling)
 *   5.  Report Section
 *   6.  Search Parameters
 *   7.  Filter Panel
 *   8.  Topic Cards (Home page)
 *   9.  Callout Cards
 *   10. Links
 *   11. Responsive Breakpoints
 *   12. Report Selector / Report Panel Accordion
 *   13. Print
 *
 * DEPENDENCIES
 * ------------
 * Requires xfact-mds.css to be loaded first. Uses MDS design
 * tokens (--color-*, --font-*, --space-*, etc.) for all values.
 * =============================================================
 */


/* =============================================================
   0. MDS COMPONENT OVERRIDES
   Application-specific overrides for MDS components.
   ============================================================= */

/* Site header: app name in Berkshires Green per design doc */
.mds-site-header__name {
  color: var(--color-accent);
}

/* Give the header a stacking context so popup menus float above page content */
.mds-site-header {
  position: relative;
  z-index: var(--z-sticky);
}

/* Reset button-element defaults for dropdown trigger buttons in the nav */
button.mds-site-header__utility-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  appearance: none;
  -webkit-appearance: none;
}

/* Additional design-doc color token not in MDS */
:root {
  --color-overcast-gray: #DCDCDC;
}


/* =============================================================
   1. RESET & BASE ELEMENTS
   ============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.8;
  color: var(--color-text-primary);
  background-color: var(--color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

img, svg {
  display: block;
  max-width: 100%;
}

*:focus-visible {
  outline: 3px solid var(--color-focus-light);
  outline-offset: 2px;
}


/* =============================================================
   2. LAYOUT CONTAINERS
   ============================================================= */
.xf-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.xf-page-content {
  max-width: 1200px;
  margin: var(--space-8) auto;
  padding: 0 var(--space-6);
  min-height: 50vh;
}

/* Page description - wrapper between H1 and page content */
.xf-page-description {
  margin: var(--space-3) 0 var(--space-3);
}

/* Page content layout - flexible row/column grid */
.xf-page-content-area {
  margin-top: var(--space-4);
}

.xf-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.xf-col {
  flex: 1 1 0%;
  min-width: 0;
}

.xf-col-1  { flex: 0 0 calc(8.333%  - var(--space-6)); min-width: 0; }
.xf-col-2  { flex: 0 0 calc(16.667% - var(--space-6)); min-width: 0; }
.xf-col-3  { flex: 0 0 calc(25%     - var(--space-6)); min-width: 0; }
.xf-col-4  { flex: 0 0 calc(33.333% - var(--space-6)); min-width: 0; }
.xf-col-5  { flex: 0 0 calc(41.667% - var(--space-6)); min-width: 0; }
.xf-col-6  { flex: 0 0 calc(50%     - var(--space-6)); min-width: 0; }
.xf-col-7  { flex: 0 0 calc(58.333% - var(--space-6)); min-width: 0; }
.xf-col-8  { flex: 0 0 calc(66.667% - var(--space-6)); min-width: 0; }
.xf-col-9  { flex: 0 0 calc(75%     - var(--space-6)); min-width: 0; }
.xf-col-10 { flex: 0 0 calc(83.333% - var(--space-6)); min-width: 0; }
.xf-col-11 { flex: 0 0 calc(91.667% - var(--space-6)); min-width: 0; }
.xf-col-12 { flex: 0 0 100%;                           min-width: 0; }

/*
 * Section header row - heading far-left, action (button/link) far-right,
 * both vertically centered on the same line. Example:
 *
 *   ┌─────────────────────────────────────────────────────────┐
 *   │  Account Settings ______________________[Cancel Account]│
 *   └─────────────────────────────────────────────────────────┘
 *
 * Grid overlap: the heading spans all columns (full width) so its
 * border-bottom runs edge-to-edge. The action element is placed on
 * the same row in column 2, visually overlaying the heading's right side.
 * No border is added to any element other than the heading itself.
 *
 * Works with any heading level (h2, h3, h4). The heading retains its
 * MDS typography; the container adds no color or size of its own.
 */
.xfact-h-container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 0.75rem;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: 0.75rem;
}

.xfact-h-container h2,
.xfact-h-container h3,
.xfact-h-container h4 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.xfact-h-container > *:not(h2):not(h3):not(h4) {
  grid-column: 2;
  grid-row: 1;
}

.xfact-h-container > a,
.xfact-h-container > button.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #14558f;
  font-size: var(--type-size-base);
  text-decoration: underline;
}

.xfact-h-container > button.inline-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.xfact-h-container > a svg,
.xfact-h-container .inline-link svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

/*Page Layout style*/
.xfact-section {
  margin-bottom:2.5rem;
}
.xfact-section-body {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.75rem 1.5rem;
  padding:0.5rem 0 0 0;
}


/* =============================================================
   3. HEADINGS
   H1: Bay Blue parallelogram banner
   H2: Dark text with short Berkshires Green underline
   H3: Full-width bottom border with optional collapse chevron
   ============================================================= */

/* H1 outer bar - flex row for title + optional action buttons */
.xf-page-title-bar {
  display: flex;
  align-items: self-start;
}

.xf-page-title-bar + .xf-page-title-description {
  margin-top: 0;
}

.xf-page-title-bar:has(+ .xf-page-title-description) {
  margin-bottom: 0;
}

.xf-page-title-description {
  margin-bottom: var(--space-8);
  font-size: 95%;
}

.xf-page-title-description:has(+ .mds-inline-message) {
  margin-bottom: 0;
}

/* H1 - Bay Blue (primary) background, white text, diagonal right edge */
.xf-page-title {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-family);
  font-size: var(--type-size-lg-plus);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  padding: var(--space-2) var(--space-12) var(--space-2) var(--space-5);
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
  display: flex;
  align-items: center;
  flex: 1;
  letter-spacing: -0.01em;
}

/* Count label within H1 - lighter weight */
.xf-page-title__count {
  font-weight: var(--font-weight-regular);
  margin-left: var(--space-2);
}

/* Count chip - white pill with dark Berkshires Green text, sits alongside
   the page title text (e.g. "CORI results list  [2 requests]"). */
.icori-count-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  background-color: var(--color-white);
  color: var(--color-berkshires-green-1000);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid var(--color-berkshires-green-200);
  margin-left: var(--space-3);
}

/* H2 - Component heading with short primary underline */
.xf-h2 {
  font-family: var(--font-family);
  font-size: var(--type-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-3);
  /*padding-bottom: var(--space-2);*/
  /*position: relative;*/
}

.xf-h2--no-btm-padding {
  padding-bottom: 0;
}
/*Removed to align with MDS*/
/*.xf-h2::after {*/
/*  content: '';*/
/*  display: block;*/
/*  width: 2.5rem;*/
/*  height: 4px;*/
/*  background-color: var(--color-primary);*/
/*  opacity: 0.6;*/
/*  margin-top: var(--space-2);*/
/*  transform: skewX(-20deg);*/
/*}*/

.xf-h3--no-btm-padding {
  padding-bottom: 0;
}

/* H3 - List heading with full-width bottom border */
.xf-h3 {
  font-family: var(--font-family);
  font-size: var(--type-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-berkshires-green);
  line-height: var(--line-height-tight);
  padding: 0 0 var(--space-2) 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  width: 100%;
  margin-bottom: 0.75rem;
}

/* Chevron icon for collapsible H3 sections */
.xf-h3__chevron {
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--color-gray-500);
  border-bottom: 2px solid var(--color-gray-500);
  transform: rotate(-135deg);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.xf-h3__chevron--down {
  transform: rotate(45deg);
  margin-bottom: 3px;
}

.xf-h__margin-bottom {
  margin-bottom: var(--space-4);
}

/* Full-width utility - forces element to span 100% of its container */
.xf-max-width {
  max-width: 100%;
}

/* =============================================================
   BUTTONS
   ============================================================= */

/* Cancel button - grey fill with black text */
.xf-btn--cancel {
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-300);
  color: var(--color-black);
}

.xf-btn--cancel:hover {
  background-color: var(--color-gray-400);
  border-color: var(--color-gray-400);
  color: var(--color-black);
}

.xf-btn--cancel:active {
  background-color: var(--color-gray-500);
  border-color: var(--color-gray-500);
  color: var(--color-black);
}


/* Page subtitle - secondary description below H1 */
.xf-page-subtitle {
  font-size: var(--type-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  line-height: var(--line-height-normal);
}



/* =============================================================
   4. DATA TABLES
   Bay Blue header, sortable columns, hover rows, and a
   responsive card layout on mobile (≤767px).

   Responsive card layout requires data-label="Column Name" on
   each body <td> (except first and last). Example:
     <td data-label="Created By" th:text="${row.createdBy}"></td>
   ============================================================= */

/* Table scroll wrapper */
.xf-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.xf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-size-sm);
  background-color: var(--color-white);
}

/* Header row - Bay Blue background, white text */
.xf-table thead tr {
  background-color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary-active);
}

.xf-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-size-base);
  color: var(--color-text-inverse);
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  transition: background-color var(--transition-fast);
}

.xf-table thead th:last-child {
}


/* Sortable column header link - white, no underline */
.xf-table__sort-header {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.xf-table__sort-header:hover {
  color: var(--color-text-inverse);
  opacity: 0.9;
}

/* Sort icon - white CSS triangle arrows on blue header.
   Opacity lives on each span (not the container) so individual
   arrows can be fully opaque when active. */
.xf-table__sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}

.xf-table__sort-icon span {
  display: block;
  width: 0;
  height: 0;
  opacity: 0.45;
}

.xf-table__sort-icon span:first-child {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--color-white);
}

.xf-table__sort-icon span:last-child {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-white);
}

/* Active sort direction: brighten the relevant arrow */
.xf-table__sort-icon--asc span:first-child,
.xf-table__sort-icon--desc span:last-child {
  opacity: 1;
}

/* Body rows */
.xf-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

.xf-table tbody tr:last-child {
  border-bottom: none;
}

.xf-table tbody tr:hover {
  background-color: var(--color-bg-secondary);
}

.xf-table tbody td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  color: var(--color-text-primary);
  font-size: var(--type-size-base);
  line-height: var(--line-height-snug);
}

/* "No results" row, spanning every column */
.xf-table__empty {
  text-align: center;
  padding: 1.5rem 0;
}

/* Row number column */
.xf-table__col-no {
  width: 3rem;
}

/* Subject/name column - enough width that a typical name doesn't wrap */
.xf-table__col-subject {
  min-width: 9rem;
}

.xf-table__no {
  color: var(--color-text-secondary);
  font-size: var(--type-size-sm);
  text-align: right;
  padding-right: var(--space-2);
}

/* Actions column */
.xf-table td:last-child {
  text-align: left;
  white-space: nowrap;
}

.xf-table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}


/* =============================================================
   4A. PAGINATOR
   Centered record-navigation strip rendered below a data table.
   Layout (left → right, all on one baseline):
     [record range]  [«]  [‹]  [1]  [2]  [3]  [4]  [5]  [›]  [»]  [size ˅]

   Expected markup:
   ─────────────────────────────────────────────────────────────
   <div class="xf-paginator">

     <span class="xf-paginator__summary">1–10 of 50 records</span>

     <nav class="xf-paginator__nav" aria-label="Pagination">
       <!--
         Arrow buttons: use <button> so disabled is native;
         use <a> when the page is reachable (not disabled).
         Add xf-paginator__btn--disabled + disabled attr when
         already on first/last page.
       -->
       <button type="button"
               class="xf-paginator__btn xf-paginator__btn--arrow"
               aria-label="First page" disabled>«</button>
       <button type="button"
               class="xf-paginator__btn xf-paginator__btn--arrow"
               aria-label="Previous page" disabled>‹</button>

       <!-- Current page: button (no href) + --active modifier -->
       <button type="button"
               class="xf-paginator__btn xf-paginator__btn--page
                      xf-paginator__btn--active"
               aria-current="page">1</button>

       <!-- Other visible pages: anchor links -->
       <a href="?page=1&amp;size=10&amp;sort=…&amp;order=…"
          class="xf-paginator__btn xf-paginator__btn--page">2</a>
       <a href="…" class="xf-paginator__btn xf-paginator__btn--page">3</a>
       <a href="…" class="xf-paginator__btn xf-paginator__btn--page">4</a>
       <a href="…" class="xf-paginator__btn xf-paginator__btn--page">5</a>

       <a href="…" class="xf-paginator__btn xf-paginator__btn--arrow"
          aria-label="Next page">›</a>
       <a href="…" class="xf-paginator__btn xf-paginator__btn--arrow"
          aria-label="Last page">»</a>
     </nav>

     <!--
       Size form: resets to page 0, carries sort/order through.
       onchange auto-submits without a visible submit button.
     -->
     <form class="xf-paginator__size-form" method="get"
           th:action="@{/your-route}">
       <input type="hidden" name="page" value="0"/>
       <input type="hidden" name="sort"  th:value="${sortField}"/>
       <input type="hidden" name="order" th:value="${sortOrder}"/>
       <select class="xf-paginator__size-select" name="size"
               aria-label="Rows per page"
               onchange="this.form.submit()">
         <option value="1"  th:selected="${pageSize == 1}">1</option>
         <option value="5"  th:selected="${pageSize == 5}">5</option>
         <option value="10" th:selected="${pageSize == 10}">10</option>
         <option value="25" th:selected="${pageSize == 25}">25</option>
         <option value="50" th:selected="${pageSize == 50}">50</option>
       </select>
     </form>

   </div>
   ─────────────────────────────────────────────────────────────
   ============================================================= */

/* Outer strip - centered, wraps on narrow viewports */
.xf-paginator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-2);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
}

/* "1–10 of 50 records" - secondary text, right-padded for breathing room */
.xf-paginator__summary {
  color: var(--color-text-secondary);
  font-size: var(--type-size-sm);
  white-space: nowrap;
  padding-right: var(--space-2);
}

/* Arrow + page-number row */
.xf-paginator__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}

/* ---- Base button / anchor ---- */
.xf-paginator__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}

/* Page-number hover - light bay-blue tint circle */
.xf-paginator__btn--page:not(.xf-paginator__btn--active):hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Arrow hover */
.xf-paginator__btn--arrow:not(:disabled):not(.xf-paginator__btn--disabled):hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Active page - filled bay-blue-light circle, semibold */
.xf-paginator__btn--active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  cursor: default;
  pointer-events: none;
}

/* Arrow glyphs - secondary color, slightly larger for legibility */
.xf-paginator__btn--arrow {
  color: var(--color-text-secondary);
  font-size: 1rem;
  letter-spacing: -0.05em;
}

/* Disabled arrow (first page → first/prev; last page → next/last) */
.xf-paginator__btn:disabled,
.xf-paginator__btn--disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background: transparent;
}

/* Focus ring - matches MDS 2px outline style */
.xf-paginator__btn:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* ---- Rows-per-page select ---- *
 * Mirrors mds-select visually (same border, chevron SVG, radius)
 * but auto-sizes to its content instead of stretching full width.
 */
.xf-paginator__size-form {
  display: inline-flex;
  align-items: center;
  padding-left: var(--space-2);
}

.xf-paginator__size-select {
  /* Layout */
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 2rem;
  min-width: 3.25rem;
  padding: 0 calc(var(--space-3) + 12px) 0 var(--space-3);

  /* Typography - matches MDS select-sm */
  font-family: var(--font-family);
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);

  /* Appearance - same chevron SVG and border as .mds-select */
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23535353' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  background-size: 10px;

  cursor: pointer;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.xf-paginator__size-select:hover:not(:disabled) {
  border-color: var(--color-border-dark);
}

.xf-paginator__size-select:focus,
.xf-paginator__size-select:focus-visible {
  border-color: var(--color-focus-light);
  outline: 2px solid var(--color-focus-light);
  outline-offset: 0;
  box-shadow: none;
}

/* ---- Mobile: summary on its own line, tighter gaps ---- */
@media (max-width: 480px) {
  .xf-paginator {
    gap: var(--space-2);
  }

  .xf-paginator__summary {
    flex: 0 0 100%;
    text-align: center;
    padding-right: 0;
  }

  .xf-paginator__size-form {
    padding-left: 0;
  }
}

/* ---- Print: paginator is not meaningful on paper ---- */
@media print {
  .xf-paginator {
    display: none;
  }
}


/* =============================================================
   5. REPORT SECTION
   ============================================================= */
.xf-report-section {
  margin-bottom: var(--space-10);
}


/* =============================================================
   6. SEARCH PARAMETERS
   ============================================================= */
.xf-search-params {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  padding: var(--space-2) 0 var(--space-4);
  line-height: var(--line-height-normal);
}

.xf-search-params strong {
  color: var(--color-text-primary);
}


/* =============================================================
   7. FILTER PANEL
   ============================================================= */
.xf-filter-panel {
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.xf-filter-panel__fields {
  display: flex;
  gap: var(--space-4);
  flex: 1;
  flex-wrap: wrap;
}

/* Override MDS form-group margin inside filter panel */
.xf-filter-panel .mds-form-group {
  min-width: 10rem;
  flex: 1;
  margin-bottom: 0;
}

/* Override MDS text-input max-width inside filter panel */
.xf-filter-panel .mds-text-input {
  max-width: none;
}

.xf-filter-panel__actions {
  display: flex;
  align-items: flex-end;
}


/* =============================================================
   8. TOPIC CARDS (Home page)
   Mass.gov decorative-link card pattern: white background,
   subtle border, bold Bay Blue title with arrow, muted description.
   ============================================================= */
.xf-topic-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.xf-topic-card {
  display: block;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  padding: var(--space-5) var(--space-5) var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast);
}

.xf-topic-card:hover {
  border-color: var(--color-primary);
}

.xf-topic-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-snug);
}

.xf-topic-card:hover .xf-topic-card__title {
  color: var(--color-primary-hover);
}

.xf-topic-card__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.xf-topic-card__desc {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin: 0;
}


/* =============================================================
   9. CALLOUT CARDS
   Two-column grid of quick-navigation cards.
   ============================================================= */
.xf-callout-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.xf-callout-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  background: var(--color-white);
}

.xf-callout-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.xf-callout-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--type-size-sm);
  margin-bottom: var(--space-1);
}

.xf-callout-card__desc {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}


/* =============================================================
   10. LINKS
   ============================================================= */
a.xf-link,
.xf-link {
  color: var(--color-primary);
  text-decoration: underline;
}

a.xf-link:hover,
.xf-link:hover {
  color: var(--color-primary-hover);
}


/* =============================================================
   11. RESPONSIVE BREAKPOINTS
   ============================================================= */

/* Tablet (<=1024px) */
@media (max-width: 1024px) {
  .xf-container,
  .xf-page-content {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

/* Mobile (<=767px) */
@media (max-width: 767px) {
  .xf-col-1, .xf-col-2, .xf-col-3, .xf-col-4,
  .xf-col-5, .xf-col-6, .xf-col-7, .xf-col-8,
  .xf-col-9, .xf-col-10, .xf-col-11, .xf-col-12 {
    flex: 0 0 100%;
  }
}

@media (max-width: 767px) {
  .xf-container,
  .xf-page-content {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .xf-page-content {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
  }

  /* H1: remove diagonal clip, full width, smaller text */
  .xf-page-title {
    clip-path: none;
    width: 100%;
    padding-right: var(--space-5);
    font-size: var(--type-size-md);
  }

  /* Columns: stack vertically on mobile */
  .xf-col {
    flex: 1 1 100%;
  }

  /* Tables: card layout on mobile.
     Each row becomes a self-contained card. First td is the card
     header (primary identifier, left side). Last td (actions)
     shares that header row on the right. All middle tds stack
     as label/value pairs beneath using data-label="…" on each td. */

  .xf-table-wrapper {
    border: none;
    border-radius: 0;
    overflow: visible;
    margin: 0;
    width: 100%;
  }

  .xf-table,
  .xf-table tbody {
    display: block;
    width: 100%;
  }

  .xf-table thead {
    display: none;
  }

  .xf-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--color-white);
  }

  /* Card header - primary cell: left, grows to fill */
  .xf-table tbody td:first-child {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    order: 1;
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-semibold);
    font-size: var(--type-size-sm);
    padding: var(--space-3) var(--space-4);
  }

  /* Card header - actions cell: right side, same row */
  .xf-table tbody td:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    order: 1;
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-3);
    gap: var(--space-2);
    white-space: nowrap;
    text-align: right;
  }

  /* Card body - data cells: full-width label/value rows */
  .xf-table tbody td:not(:first-child):not(:last-child) {
    display: flex;
    order: 2;
    flex: 0 0 100%;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--type-size-sm);
    gap: var(--space-4);
    min-height: 2.5rem;
  }

  /* Divider between consecutive body rows (not before the first) */
  .xf-table tbody td:not(:first-child):not(:last-child)
    ~ td:not(:first-child):not(:last-child) {
    border-top: 1px solid var(--color-gray-200);
  }

  /* Column label rendered from data-label attribute */
  .xf-table tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Disable table hover on mobile - cards don't need row highlights */
  .xf-table tbody tr:hover {
    background-color: var(--color-white);
  }

  /* Topic cards: single column */
  .xf-topic-cards {
    grid-template-columns: 1fr;
  }

  /* Callout cards: single column */
  .xf-callout-cards {
    grid-template-columns: 1fr;
  }
}

/* Topic cards: 2 columns on tablet */
@media (max-width: 900px) {
  .xf-topic-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small mobile (<=480px) */
@media (max-width: 480px) {
  .xf-h2 {
    font-size: var(--type-size-base);
  }
}


/* =============================================================
   12. REPORT SELECTOR / REPORT PANEL ACCORDION
   Replaces the static filter panel + table on list.html with a
   report-first accordion: click a panel to expand filters, then
   click Download. Stub panels are disabled (grayed out, no click).
   ============================================================= */

/* Vertical stack of report panels */
.xf-report-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

/* Individual panel card */
.xf-report-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.xf-report-panel:not(.xf-report-panel--stub):hover {
  box-shadow: var(--shadow-md);
}

/* Stub panel - grayed out, not interactive */
.xf-report-panel--stub {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Panel header - the always-visible clickable row */
.xf-report-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  gap: var(--space-4);
  transition: background-color var(--transition-fast);
  user-select: none;
}

.xf-report-panel:not(.xf-report-panel--stub) .xf-report-panel__header:hover {
  background-color: var(--color-bg-secondary);
}

.xf-report-panel--stub .xf-report-panel__header {
  cursor: not-allowed;
}

/* Meta block - report name + description */
.xf-report-panel__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.xf-report-panel__name {
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  line-height: var(--line-height-snug);
}

.xf-report-panel__desc {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

/* Right side of header - badge + chevron */
.xf-report-panel__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Status badge */
.xf-report-panel__badge {
  font-size: var(--type-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.xf-report-panel__badge--available {
  background-color: var(--color-feedback-success-light);
  color: var(--color-feedback-success);
}

.xf-report-panel__badge--pending {
  background-color: var(--color-feedback-caution-light);
  color: var(--color-feedback-caution-dark);
}

/* Chevron icon - rotates 180° when panel is open */
.xf-report-panel__chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.xf-report-panel--open .xf-report-panel__chevron {
  transform: rotate(180deg);
}

/* Panel body - hidden by default, revealed when open */
.xf-report-panel__body {
  display: none;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-secondary);
}

.xf-report-panel--open .xf-report-panel__body {
  display: block;
}

/* Filter fields: column layout - dates together, username separate below */
.xf-report-panel__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Date from + Date to side by side */
.xf-report-panel__date-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.xf-report-panel__date-row .mds-form-group {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

/* Username on its own row, constrained width */
.xf-report-panel__username-row .mds-form-group {
  margin-bottom: 0;
  max-width: 280px;
}

.xf-report-panel__username-row .mds-text-input {
  max-width: none;
}

/* No-filter note */
.xf-report-panel__no-filters {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

/* Actions row - Download button, right-aligned */
.xf-report-panel__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}


/* =============================================================
   13. PRINT
   ============================================================= */
@media print {
  /* Hide navigation chrome */
  .mds-state-banner,
  .mds-utility-nav,
  .mds-site-header,
  .mds-nav,
  .xf-nav {
    display: none;
  }

  /* Footer: simplify for print */
  .mds-footer {
    background: none;
    border-top: 1px solid var(--color-gray-300);
    margin-top: var(--space-4);
    padding: var(--space-3) 0;
  }

  .mds-footer__legal {
    display: none;
  }

  /* Tables: no hover highlight */
  .xf-table tbody tr:hover {
    background: none;
  }

  /* Inline messages: remove background */
  .mds-inline-message--info {
    background: none;
  }
}

/* ================================================================
   Filter group accordion panels
   Overrides mds-details-toggle link styling to render as a
   bordered card with a full-width header bar.
   ================================================================ */

.cjis-filter-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 0;
}

.cjis-filter-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.cjis-filter-group[open] > summary {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 1px solid var(--color-border);
}

.cjis-filter-group summary:hover {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.cjis-filter-group .mds-details-toggle__content {
  padding: var(--space-6) var(--space-4);
}

/* ================================================================
   Required fields section
   Visually distinct card that wraps required search fields,
   anchoring the user's eye before the optional filter groups.
   ================================================================ */

.cjis-required-section {
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

/* =============================================================
   Registration action button group
   ============================================================= */

.xf-subsection-label {
  padding-top: 1rem;
}

.xf-btn-group {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  width: fit-content;
}

.xf-btn-group > .mds-btn {
  flex: 1;
}


/* =============================================================
   Read-only field display
   ============================================================= */
.mds-form-group__container .mds-form-group__label {
  margin-bottom: var(--space-1);
}

.mds-form-group__value {
  font-family: var(--font-family);
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  margin: 0;
}

.mds-helper-text {
  margin-bottom: 2rem;
}

#error-msg-container {
  margin-top: 0;
}