/**
 * @file
 * Digital Asset Inventory - Admin Styles
 *
 * Admin-specific styles for inventory, archive management, and settings.
 * Used on admin pages only (e.g., /admin/digital-asset-inventory/*).
 *
 * CSS Scoping:
 * - Admin views use the .dai--admin wrapper class for theme override support.
 * - View-specific selectors (.view-digital-assets, .view-id-digital_assets)
 *   provide additional specificity when needed.
 *
 * ============================================================================
 * THEME OVERRIDE GUIDE
 * ============================================================================
 *
 * This module is designed to work with any Drupal admin theme (Claro, Seven,
 * Gin, etc.). All colors use CSS variables defined in dai-base.css, making
 * customization straightforward.
 *
 * METHOD 1: Override CSS Variables (Recommended)
 * -----------------------------------------------
 * Add to your theme's CSS file to change colors globally:
 *
 *   :root {
 *     --dai-surface-bg: var(--gin-bg-secondary, #f5f5f5);
 *     --dai-accent-info: var(--gin-color-primary, #003ecc);
 *     --dai-badge-danger-bg: var(--gin-color-danger, #d72222);
 *   }
 *
 * Available variables (defined in dai-base.css):
 *   --dai-surface-bg          Background for info boxes, cards
 *   --dai-surface-border      Border color for dividers
 *   --dai-surface-radius      Border radius for containers
 *   --dai-accent-info         Left border accent color
 *   --dai-text-muted          Secondary/muted text color
 *   --dai-badge-info-bg       Info badges (blue)
 *   --dai-badge-success-bg    Success badges (green)
 *   --dai-badge-warning-bg    Warning badges (yellow)
 *   --dai-badge-danger-bg     Danger badges (red)
 *   --dai-badge-neutral-bg    Neutral badges (gray)
 *   --dai-btn-secondary-*     Secondary button colors
 *   --dai-btn-intentional-*   Intentional action button colors
 *   --dai-btn-danger-*        Danger button colors
 *
 * METHOD 2: Extend the Library
 * ----------------------------
 * Add to your theme's .info.yml to load additional CSS after the module:
 *
 *   libraries-extend:
 *     digital_asset_inventory/admin:
 *       - mytheme/dai_admin_overrides
 *
 * Then create css/dai_admin_overrides.css in your theme:
 *
 *   .dai--admin .digital-asset-scan-info {
 *     background-color: var(--gin-bg-secondary);
 *     border-left-color: var(--gin-color-primary);
 *   }
 *
 * METHOD 3: Direct Selector Override
 * ----------------------------------
 * Use .dai--admin prefix for specificity:
 *
 *   .dai--admin .dai-badge--filesystem_only {
 *     background-color: #custom-color;
 *   }
 *
 * ============================================================================
 */

/* ===== Toolbar Icon ===== */
/* Archive icon for Digital Asset Inventory toolbar menu item */
.toolbar-icon-digital-asset-inventory-view::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M14 2H2c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zM8 12H3V9h5v3zm0-4H3V5h5v3zm5 4H9V9h4v3zm0-4H9V5h4v3z'/%3e%3c/svg%3e");
}

.toolbar-icon-digital-asset-inventory-view:active::before,
.toolbar-icon-digital-asset-inventory-view.is-active::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M14 2H2c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zM8 12H3V9h5v3zm0-4H3V5h5v3zm5 4H9V9h4v3zm0-4H9V5h4v3z'/%3e%3c/svg%3e");
}

/* ===== Error Message (Drupal Core Alert Style) ===== */
/* Custom styles for the important error/warning message */
.view-header .messages--error {
  margin-bottom: 1.5rem;
}

.view-header .messages--error strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.view-header .messages--error p {
  margin: 0.5rem 0;
  line-height: 1.5;
}

.view-header .messages--error p:last-of-type {
  margin-bottom: 0;
}

/* ===== Scan Info Box ===== */
.digital-asset-scan-info {
  background-color: var(--dai-surface-bg);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: var(--dai-surface-radius);
  border-left: 3px solid var(--dai-accent-info);
}

.digital-asset-scan-info p {
  margin: 0.25rem 0;
}

/* Mobile: Stack buttons and add spacing */
@media (max-width: 768px) {
  .digital-asset-scan-info p:last-child {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .digital-asset-scan-info .button {
    display: block;
    text-align: center;
  }
}

/* Header area - no additional border since we style the inner elements */
.view-digital-assets .view-header {
  margin-bottom: 0.5rem;
}

/* ===== Digital Assets Inventory View ===== */
/* Exposed filter form container */
.view-digital-assets .views-exposed-form {
  margin-bottom: 2rem;
}

/* Filter form items - stack on mobile, inline on desktop */
.view-digital-assets .views-exposed-form .form-item {
  display: block;
  margin-bottom: 1rem;
}

/* Form actions */
.view-digital-assets .views-exposed-form .form-actions {
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .view-digital-assets .views-exposed-form .form-item {
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    vertical-align: top;
  }

  /* Form actions below filters on their own line */
  .view-digital-assets .views-exposed-form .form-actions {
    display: block;
    margin-top: 1rem;
    clear: both;
  }
}

/* Category grouping headers - style caption as h2 */
.view-digital-assets caption {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--dai-surface-border);
  text-align: left;
  caption-side: top;
}

.view-digital-assets table:first-of-type caption {
  margin-top: 0;
}

/* Style optgroup labels in filter dropdown */
.view-digital-assets .views-exposed-form select optgroup {
  font-weight: bold;
  font-style: normal;
  background-color: var(--dai-surface-bg);
}

/* Asset link - allow wrapping for long URLs */
.view-digital-assets .asset-link {
  display: inline;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ===== Badge Styles for Source Type ===== */
/*
 * Badges use 5 semantic colors:
 * - Info (blue): file_managed, media_managed
 * - Danger (red): filesystem_only
 * - Success (green): external
 * - Warning (yellow): queued
 * - Neutral (gray): archived_deleted
 */
.dai-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 3px;
  white-space: nowrap;
}

/* Info badges (blue) - managed files */
.dai-badge--file_managed,
.dai-badge--media_managed {
  background-color: var(--dai-badge-info-bg);
  color: var(--dai-badge-text-light);
}

/* Success badges (green) - external resources */
.dai-badge--external {
  background-color: var(--dai-badge-success-bg);
  color: var(--dai-badge-text-light);
}

/* Danger badges (red) - manual uploads requiring attention */
.dai-badge--filesystem_only {
  background-color: var(--dai-badge-danger-bg);
  color: var(--dai-badge-text-light);
}

/* ===== Row Indicator System ===== */
/*
 * Row indicators reserved for critical/error states only.
 * - Inventory view: No row indicators (badges + text communicate status)
 * - Archive view: Critical states only (red status rail)
 *
 * Design rationale:
 * - Row styling should not look like clickable buttons
 * - Advisory/informational states use badges and text
 * - Critical states use a thin "status rail" (inset box-shadow)
 */

/* Row indicators removed - status badges provide sufficient visual indication */
/* Previously used box-shadow inset for critical rows, but this was redundant with badges */

/* Usage count styling */
.dai-usage-none {
  color: var(--dai-text-muted);
  font-style: italic;
}

/* ===== Table Structural Overrides ===== */
/* Let themes handle row colors and header styling. Module provides structure only. */

/* WCAG 2.5.5: Ensure sortable table headers meet 44px minimum touch target */
.dai--admin table.views-table thead th {
  min-height: 44px;
}

.dai--admin table.views-table thead th a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.5rem;
}

/* Operations column - adequate spacing for touch targets (WCAG 2.5.8 Level AA: 24px) */
/* Note: 44px is Level AAA; inline controls in tables have spacing exceptions */
@media (min-width: 1024px) {
  .dai--admin .views-field-operations .dropbutton-widget {
    white-space: nowrap;
  }
}

/* Hide File URL column on page display - it's only needed for CSV export */
.view-id-digital_assets .views-field-file-path,
.view-id-digital_assets th.views-field-file-path {
  display: none;
}

/* ===== Table Column Alignment (Desktop Only) ===== */
/* Fixed layout only on larger screens (1024px+) - ensures reflow at 400% zoom */
/* 1024px breakpoint = mobile layout up to 4096px screens at 400% zoom */
/*
 * Column order in inventory table:
 * 1. File Name (file_name)
 * 2. File URL (file_path) - hidden via CSS, only for CSV export
 * 3. Type (mime_type)
 * 4. File Size (filesize)
 * 5. Source (source_type)
 * 6. Used In (used_in)
 * 7. Operations
 *
 * Uses CSS variables with rem units for theme-agnostic column widths.
 * Themes can override these variables to customize column sizing.
 */
@media (min-width: 1024px) {
  .view-id-digital_assets {
    /* Column width variables - themes can override these */
    --dai-col-filename: 18rem;
    --dai-col-type: 9rem;
    --dai-col-size: 5rem;
    --dai-col-source: 7.5rem;
    --dai-col-used: 5rem;
    --dai-col-operations: 10rem;
  }

  .view-id-digital_assets table.views-table {
    table-layout: fixed;
    width: 100%;
  }

  /* File Name - allow wrapping */
  .view-id-digital_assets th.views-field-file-name,
  .view-id-digital_assets td.views-field-file-name {
    width: var(--dai-col-filename);
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Type (MIME type) */
  .view-id-digital_assets th.views-field-mime-type,
  .view-id-digital_assets td.views-field-mime-type {
    width: var(--dai-col-type);
  }

  /* File Size - compact numeric column */
  .view-id-digital_assets th.views-field-filesize,
  .view-id-digital_assets td.views-field-filesize {
    width: var(--dai-col-size);
  }

  /* Source - badge column */
  .view-id-digital_assets th.views-field-source-type,
  .view-id-digital_assets td.views-field-source-type {
    width: var(--dai-col-source);
  }

  /* Used In - numeric with link */
  .view-id-digital_assets th.views-field-used-in,
  .view-id-digital_assets td.views-field-used-in {
    width: var(--dai-col-used);
    text-align: center;
  }

  /* Operations - dropbutton column */
  .view-id-digital_assets th.views-field-operations,
  .view-id-digital_assets td.views-field-operations {
    width: var(--dai-col-operations);
    white-space: nowrap;
  }
}

/* Responsive table container */
.view-id-digital_assets .view-content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Allow text wrapping for long content */
.view-id-digital_assets td,
.view-id-digital_assets th {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* ===== CSS-Only Stacked Mode (Mobile: 640px and below) ===== */
/* Standard mobile breakpoint - CSS handles stacking via data-label attributes */
@media (max-width: 640px) {
  .dai--admin table.dai-stack-table {
    display: block !important;
    table-layout: auto !important;
    width: 100% !important;
  }

  /* Hide table header - labels shown per cell via data-label */
  .dai--admin table.dai-stack-table thead {
    display: none !important;
  }

  /* Force block display on all table elements */
  .dai--admin table.dai-stack-table tbody,
  .dai--admin table.dai-stack-table tr {
    display: block !important;
    width: 100% !important;
  }

  .dai--admin table.dai-stack-table tbody tr {
    display: block !important;
    position: relative !important;
    border-bottom: 2px solid var(--dai-surface-border);
    margin-bottom: 1rem;
    padding: 0.5rem 0;
  }

  /* Block display - theme agnostic approach */
  .dai--admin table.dai-stack-table td {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    position: static !important;
    white-space: normal !important;
    overflow: visible !important;
    box-sizing: border-box;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
    line-height: 1.4;
  }

  /* Show labels from data-label attribute (CSS-only mode) */
  .dai--admin table.dai-stack-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--dai-text-primary);
  }

  /* Hide empty labels */
  .dai--admin table.dai-stack-table td[data-label=""]::before {
    display: none;
  }

  /* Tablesaw coexistence: If Tablesaw is also present, hide our ::before labels
     and let Tablesaw handle labels. This prevents duplicate labels. */
  .dai--admin table.dai-stack-table td:has(.tablesaw-cell-label)::before {
    display: none !important;
  }

  /* Style Tablesaw elements when present (fallback for sites with responsive_tables_filter) */
  .dai--admin table.dai-stack-table .tablesaw-cell-label,
  .dai--admin table.dai-stack-table .tablesaw-cell-content {
    float: none !important;
    width: 100% !important;
    display: block !important;
    position: static !important;
  }

  .dai--admin table.dai-stack-table .tablesaw-cell-label {
    font-weight: 700;
    margin-bottom: 0.25rem;
  }

  .dai--admin table.dai-stack-table td.views-field-file-name {
    word-break: break-word;
    overflow-wrap: anywhere;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--dai-surface-border);
  }

  .dai--admin table.dai-stack-table td.views-field-file-path,
  .dai--admin table.dai-stack-table th.views-field-file-path {
    display: none !important;
  }

  .dai--admin table.dai-stack-table .asset-link {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  /* Operations cell - no borders, extra bottom padding for multiple links */
  .dai--admin table.dai-stack-table td.views-field-operations {
    width: 100% !important;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    padding-bottom: 1rem;
    border: 0 !important;
  }

  /* Remove all borders from operations cell descendants */
  .dai--admin table.dai-stack-table td.views-field-operations *,
  .dai--admin table.dai-stack-table td.views-field-operations *::before,
  .dai--admin table.dai-stack-table td.views-field-operations *::after {
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Mobile: Show operations as simple stacked links (no dropbutton styling) */
  .dai--admin table.dai-stack-table .dropbutton-wrapper,
  .dai--admin table.dai-stack-table .dropbutton-widget,
  .dai--admin table.dai-stack-table .dropbutton {
    all: unset !important;
    display: block !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide the toggle button */
  .dai--admin table.dai-stack-table .dropbutton-toggle,
  .dai--admin table.dai-stack-table .dropbutton__toggle {
    display: none !important;
  }

  /* Reset all list items - target both old and new BEM classes */
  .dai--admin table.dai-stack-table .dropbutton li,
  .dai--admin table.dai-stack-table .dropbutton > li,
  .dai--admin table.dai-stack-table .dropbutton-action,
  .dai--admin table.dai-stack-table .dropbutton__item {
    all: unset !important;
    display: block !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Remove any pseudo-element separators */
  .dai--admin table.dai-stack-table .dropbutton li::before,
  .dai--admin table.dai-stack-table .dropbutton li::after,
  .dai--admin table.dai-stack-table .dropbutton__item::before,
  .dai--admin table.dai-stack-table .dropbutton__item::after {
    display: none !important;
    content: none !important;
  }

  /* Style all action links */
  .dai--admin table.dai-stack-table .dropbutton li a,
  .dai--admin table.dai-stack-table .dropbutton__item a {
    display: inline-block !important;
    padding: 0.5rem 0.5rem 0.5rem 0 !important;
    text-decoration: underline !important;
    color: var(--dai-accent-info, #003ecc) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  /* Hover state */
  .dai--admin table.dai-stack-table .dropbutton li a:hover,
  .dai--admin table.dai-stack-table .dropbutton__item a:hover {
    color: var(--dai-accent-info-hover, #002d99) !important;
    text-decoration-thickness: 2px !important;
  }

  /* Focus state for keyboard navigation */
  .dai--admin table.dai-stack-table .dropbutton li a:focus,
  .dai--admin table.dai-stack-table .dropbutton__item a:focus {
    outline: 2px solid var(--dai-accent-info, #003ecc) !important;
    outline-offset: 2px !important;
  }

  /* Active/pressed state */
  .dai--admin table.dai-stack-table .dropbutton li a:active,
  .dai--admin table.dai-stack-table .dropbutton__item a:active {
    color: var(--dai-accent-info-active, #001f66) !important;
  }
}

/* ===== CSS-Only Stacked Mode (Tablet/Zoom: 641px to 1023px) ===== */
/* For larger screens at 400% zoom */
/* Provides WCAG 1.4.10 reflow support */
/* Card-based layout matching public archive registry */
@media (min-width: 641px) and (max-width: 1023px) {
  .dai--admin table.dai-stack-table {
    table-layout: auto !important;
    border: 0 !important;
  }

  /* Hide table header - labels shown per cell via data-label */
  .dai--admin table.dai-stack-table thead {
    display: none;
  }

  /* Force block display on tbody */
  .dai--admin table.dai-stack-table tbody {
    display: block;
  }

  /* Each row becomes a card */
  .dai--admin table.dai-stack-table tbody tr {
    display: block;
    border: 1px solid var(--dai-surface-border);
    border-radius: var(--dai-surface-radius);
    margin-bottom: 1rem;
    padding: 0;
    background-color: var(--dai-surface-bg-alt);
  }

  /* Each cell becomes a block with separator */
  .dai--admin table.dai-stack-table td {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-sizing: border-box;
    padding: 0.75rem !important;
    border: none !important;
    border-bottom: 1px solid var(--dai-surface-border) !important;
    text-align: left !important;
    line-height: 1.4;
  }

  /* Last cell - no bottom border */
  .dai--admin table.dai-stack-table td:last-child {
    border-bottom: none !important;
  }

  /* Show labels from data-label attribute */
  .dai--admin table.dai-stack-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--dai-text-primary);
  }

  /* Hide empty labels */
  .dai--admin table.dai-stack-table td[data-label=""]::before {
    display: none;
  }

  /* Tablesaw coexistence: If Tablesaw is also present, hide our ::before labels */
  .dai--admin table.dai-stack-table td:has(.tablesaw-cell-label)::before {
    display: none !important;
  }

  /* Style Tablesaw elements when present (fallback for sites with responsive_tables_filter) */
  .dai--admin table.dai-stack-table .tablesaw-cell-label,
  .dai--admin table.dai-stack-table .tablesaw-cell-content {
    float: none !important;
    width: 100% !important;
    display: block !important;
    position: static !important;
  }

  .dai--admin table.dai-stack-table .tablesaw-cell-label {
    font-weight: 700;
    margin-bottom: 0.25rem;
  }

  /* Operations cell - last in card, no bottom border */
  .dai--admin table.dai-stack-table td.views-field-operations {
    border-bottom: none !important;
  }

  /* Remove all borders from operations cell descendants */
  .dai--admin table.dai-stack-table td.views-field-operations *,
  .dai--admin table.dai-stack-table td.views-field-operations *::before,
  .dai--admin table.dai-stack-table td.views-field-operations *::after {
    border: 0 !important;
    box-shadow: none !important;
  }

  /* File name field - word wrapping */
  .dai--admin table.dai-stack-table td.views-field-file-name {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Keep File URL column hidden (CSV export only) */
  .dai--admin table.dai-stack-table td.views-field-file-path {
    display: none !important;
  }

  /* Asset links - force wrapping */
  .dai--admin table.dai-stack-table .asset-link {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  /* Operations column - proper padding in card layout */
  .dai--admin table.dai-stack-table td.views-field-operations,
  .dai--admin table.dai-stack-table td.views-field-nothing {
    padding: 0.75rem !important;
    border-bottom: none !important;
  }

  /* Show operations as simple stacked links (no dropbutton styling) */
  .dai--admin table.dai-stack-table .dropbutton-wrapper,
  .dai--admin table.dai-stack-table .dropbutton-widget,
  .dai--admin table.dai-stack-table .dropbutton {
    all: unset !important;
    display: block !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide the toggle button */
  .dai--admin table.dai-stack-table .dropbutton-toggle,
  .dai--admin table.dai-stack-table .dropbutton__toggle {
    display: none !important;
  }

  /* Reset all list items - target both old and new BEM classes */
  .dai--admin table.dai-stack-table .dropbutton li,
  .dai--admin table.dai-stack-table .dropbutton > li,
  .dai--admin table.dai-stack-table .dropbutton-action,
  .dai--admin table.dai-stack-table .dropbutton__item {
    all: unset !important;
    display: block !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Remove any pseudo-element separators */
  .dai--admin table.dai-stack-table .dropbutton li::before,
  .dai--admin table.dai-stack-table .dropbutton li::after,
  .dai--admin table.dai-stack-table .dropbutton__item::before,
  .dai--admin table.dai-stack-table .dropbutton__item::after {
    display: none !important;
    content: none !important;
  }

  /* Style all action links */
  .dai--admin table.dai-stack-table .dropbutton li a,
  .dai--admin table.dai-stack-table .dropbutton__item a {
    display: inline-block !important;
    padding: 0.5rem 0.5rem 0.5rem 0 !important;
    text-decoration: underline !important;
    color: var(--dai-accent-info, #003ecc) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  /* Hover state */
  .dai--admin table.dai-stack-table .dropbutton li a:hover,
  .dai--admin table.dai-stack-table .dropbutton__item a:hover {
    color: var(--dai-accent-info-hover, #002d99) !important;
    text-decoration-thickness: 2px !important;
  }

  /* Focus state for keyboard navigation */
  .dai--admin table.dai-stack-table .dropbutton li a:focus,
  .dai--admin table.dai-stack-table .dropbutton__item a:focus {
    outline: 2px solid var(--dai-accent-info, #003ecc) !important;
    outline-offset: 2px !important;
  }

  /* Active/pressed state */
  .dai--admin table.dai-stack-table .dropbutton li a:active,
  .dai--admin table.dai-stack-table .dropbutton__item a:active {
    color: var(--dai-accent-info-active, #001f66) !important;
  }
}

/* ===== Archive Management Styles ===== */

/* Status label styling - badge style */
/*
 * Status labels use semantic colors:
 * - Warning (yellow): queued
 * - Success (green): archived_public, archived_admin
 * - Neutral (gray): archived_deleted
 * - Danger (red): exemption_void
 */
.dai-status-label {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 3px;
  white-space: nowrap;
  background-color: var(--dai-badge-neutral-bg);
  color: var(--dai-badge-text-light);
}

.dai-status-label--queued {
  background-color: var(--dai-badge-warning-bg);
  color: var(--dai-badge-text-dark);
}

.dai-status-label--archived,
.dai-status-label--archived_public,
.dai-status-label--archived_admin {
  background-color: var(--dai-badge-success-bg);
  color: var(--dai-badge-text-light);
}

.dai-status-label--archived_deleted {
  background-color: var(--dai-badge-neutral-bg);
  color: var(--dai-badge-text-light);
}

.dai-status-label--exemption_void {
  background-color: var(--dai-badge-danger-bg);
  color: var(--dai-badge-text-light);
}

/* Warning Badges - outlined style to differentiate from status badges */
/*
 * Status badges use solid fills to indicate lifecycle state;
 * Warning badges use outlined styles to indicate detected issues
 * without overriding status severity.
 *
 * - Critical (red outline): missing, integrity, usage, modified
 * - Advisory (yellow outline): late
 */
.dai-warning-badge {
  display: inline-block;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 3px;
  white-space: nowrap;
  margin-right: 4px;
  margin-bottom: 4px;
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
}

/* Critical warning badges (red outline) - problem detected */
.dai-warning-badge--usage,
.dai-warning-badge--missing,
.dai-warning-badge--integrity,
.dai-warning-badge--modified,
.dai-warning-badge--blocked {
  border-color: var(--dai-badge-danger-bg);
  color: var(--dai-badge-danger-bg);
}

/* Advisory warning badges (yellow outline) - informational */
.dai-warning-badge--late,
.dai-warning-badge--prior-void {
  border-color: var(--dai-badge-advisory-border);
  color: var(--dai-badge-advisory-text);
}

/* No warnings placeholder */
.dai-no-warnings {
  color: var(--dai-text-muted);
  font-style: italic;
}

/* ===== Archive Badges (for inventory view) ===== */
/*
 * Archive badges use semantic colors:
 * - Success (green): public, admin
 * - Neutral (gray): deleted
 * - Warning (yellow): queued, modified
 * - Danger (red): exemption_void
 */
.dai-archive-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 3px;
  white-space: nowrap;
  margin-left: 6px;
  vertical-align: middle;
}

.dai-archive-badge--public,
.dai-archive-badge--admin {
  background-color: var(--dai-badge-success-bg);
  color: var(--dai-badge-text-light);
}

.dai-archive-badge--deleted {
  background-color: var(--dai-badge-neutral-bg);
  color: var(--dai-badge-text-light);
}

.dai-archive-badge--queued,
.dai-archive-badge--modified {
  background-color: var(--dai-badge-warning-bg);
  color: var(--dai-badge-text-dark);
}

.dai-archive-badge--exemption_void,
.dai-archive-badge--void {
  background-color: var(--dai-badge-danger-bg);
  color: var(--dai-badge-text-light);
}

/* ===== Hide filters when views are empty ===== */
/* When the view shows the empty area, hide the exposed form */
.view-digital-assets:has(.view-empty) .views-exposed-form,
.view-digital-asset-archive:has(.view-empty) .views-exposed-form {
  display: none;
}

/* ===== Archive Views Responsive Tables ===== */

/* Archive & public archive tables - desktop defaults */
.view-digital-asset-archive .view-content {
  overflow-x: visible; /* no horizontal scroll on desktop */
}

/* Let the table size naturally and fill the container */
.view-digital-asset-archive table.views-table {
  table-layout: auto;
  width: 100%;
}

/* Allow text wrapping for long content */
.view-digital-asset-archive td,
.view-digital-asset-archive th {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* Let dropbutton size within the column instead of forcing the table wider */
.view-digital-asset-archive .dropbutton-wrapper,
.view-digital-asset-archive .dropbutton-widget {
  min-width: 0;
}

/* Archive view desktop-only styles */
@media (min-width: 1024px) {
  /* Wrap long file names to prevent horizontal scrolling */
  .view-digital-asset-archive td.views-field-file-name {
    max-width: 280px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Archive view CSS-only stacked mode (Mobile: 640px and below) */
@media (max-width: 640px) {
  .view-digital-asset-archive table.dai-stack-table {
    display: block !important;
    width: 100% !important;
  }

  /* Hide table header - labels shown per cell via data-label */
  .view-digital-asset-archive table.dai-stack-table thead {
    display: none !important;
  }

  /* Force block display on all table elements */
  .view-digital-asset-archive table.dai-stack-table tbody,
  .view-digital-asset-archive table.dai-stack-table tr {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
  }

  .view-digital-asset-archive table.dai-stack-table tbody tr {
    display: block !important;
    position: relative !important;
    border-bottom: 2px solid var(--dai-surface-border) !important;
    margin-bottom: 2rem;
    padding: 0.5rem 0 1.5rem 0;
  }

  /* Block display - theme agnostic approach */
  .view-digital-asset-archive table.dai-stack-table td {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    position: static !important;
    white-space: normal !important;
    overflow: visible !important;
    box-sizing: border-box;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
    line-height: 1.4;
    border: 0 !important;
  }

  /* Show labels from data-label attribute */
  .view-digital-asset-archive table.dai-stack-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--dai-text-primary);
  }

  /* Hide empty labels */
  .view-digital-asset-archive table.dai-stack-table td[data-label=""]::before {
    display: none;
  }

  .view-digital-asset-archive table.dai-stack-table td.views-field-file-name {
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--dai-surface-border) !important;
  }

  /* Operations cell - no borders, extra bottom padding for multiple links */
  .view-digital-asset-archive table.dai-stack-table td.views-field-operations {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    padding-bottom: 1rem;
    border: 0 !important;
  }

  /* Remove all borders from operations cell descendants */
  .view-digital-asset-archive table.dai-stack-table td.views-field-operations *,
  .view-digital-asset-archive table.dai-stack-table td.views-field-operations *::before,
  .view-digital-asset-archive table.dai-stack-table td.views-field-operations *::after {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* Mobile: Show operations as simple stacked links (no dropbutton styling) */
  .view-digital-asset-archive table.dai-stack-table .dropbutton-wrapper,
  .view-digital-asset-archive table.dai-stack-table .dropbutton-widget,
  .view-digital-asset-archive table.dai-stack-table .dropbutton {
    all: unset !important;
    display: block !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide the toggle button */
  .view-digital-asset-archive table.dai-stack-table .dropbutton-toggle,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__toggle {
    display: none !important;
  }

  /* Reset all list items - target both old and new BEM classes */
  .view-digital-asset-archive table.dai-stack-table .dropbutton li,
  .view-digital-asset-archive table.dai-stack-table .dropbutton > li,
  .view-digital-asset-archive table.dai-stack-table .dropbutton-action,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item {
    all: unset !important;
    display: block !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Remove any pseudo-element separators */
  .view-digital-asset-archive table.dai-stack-table .dropbutton li::before,
  .view-digital-asset-archive table.dai-stack-table .dropbutton li::after,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item::before,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item::after {
    display: none !important;
    content: none !important;
  }

  /* Style all action links */
  .view-digital-asset-archive table.dai-stack-table .dropbutton li a,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item a {
    display: inline-block !important;
    padding: 0.5rem 0.5rem 0.5rem 0 !important;
    text-decoration: underline !important;
    color: var(--dai-accent-info, #003ecc) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  /* Hover state */
  .view-digital-asset-archive table.dai-stack-table .dropbutton li a:hover,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item a:hover {
    color: var(--dai-accent-info-hover, #002d99) !important;
    text-decoration-thickness: 2px !important;
  }

  /* Focus state for keyboard navigation */
  .view-digital-asset-archive table.dai-stack-table .dropbutton li a:focus,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item a:focus {
    outline: 2px solid var(--dai-accent-info, #003ecc) !important;
    outline-offset: 2px !important;
  }

  /* Active/pressed state */
  .view-digital-asset-archive table.dai-stack-table .dropbutton li a:active,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item a:active {
    color: var(--dai-accent-info-active, #001f66) !important;
  }
}

/* Archive view CSS-only stacked mode (Tablet/Zoom: 641px to 1023px) */
/* Card-based layout matching public archive registry */
@media (min-width: 641px) and (max-width: 1023px) {
  .view-digital-asset-archive table.dai-stack-table {
    table-layout: auto !important;
    border: 0 !important;
  }

  .view-digital-asset-archive table.dai-stack-table thead {
    display: none;
  }

  /* Force block display on tbody */
  .view-digital-asset-archive table.dai-stack-table tbody {
    display: block;
  }

  /* Each row becomes a card */
  .view-digital-asset-archive table.dai-stack-table tbody tr {
    display: block;
    border: 1px solid var(--dai-surface-border);
    border-radius: var(--dai-surface-radius);
    margin-bottom: 1rem;
    padding: 0;
    background-color: var(--dai-surface-bg-alt);
  }

  /* Each cell becomes a block with separator */
  .view-digital-asset-archive table.dai-stack-table td {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-sizing: border-box;
    padding: 0.75rem !important;
    border: none !important;
    border-bottom: 1px solid var(--dai-surface-border) !important;
    text-align: left !important;
    line-height: 1.4;
  }

  /* Last cell - no bottom border */
  .view-digital-asset-archive table.dai-stack-table td:last-child {
    border-bottom: none !important;
  }

  /* Show labels from data-label attribute */
  .view-digital-asset-archive table.dai-stack-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--dai-text-primary);
  }

  /* Hide empty labels */
  .view-digital-asset-archive table.dai-stack-table td[data-label=""]::before {
    display: none;
  }

  .view-digital-asset-archive table.dai-stack-table td.views-field-file-name {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Operations cell - last in card, no bottom border */
  .view-digital-asset-archive table.dai-stack-table td.views-field-operations {
    border-bottom: none !important;
  }

  /* Remove all borders from operations cell descendants */
  .view-digital-asset-archive table.dai-stack-table td.views-field-operations *,
  .view-digital-asset-archive table.dai-stack-table td.views-field-operations *::before,
  .view-digital-asset-archive table.dai-stack-table td.views-field-operations *::after {
    border: 0 !important;
    box-shadow: none !important;
  }

  .view-digital-asset-archive table.dai-stack-table .asset-link {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  /* Show operations as simple stacked links (no dropbutton styling) */
  .view-digital-asset-archive table.dai-stack-table .dropbutton-wrapper,
  .view-digital-asset-archive table.dai-stack-table .dropbutton-widget,
  .view-digital-asset-archive table.dai-stack-table .dropbutton {
    all: unset !important;
    display: block !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide the toggle button */
  .view-digital-asset-archive table.dai-stack-table .dropbutton-toggle,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__toggle {
    display: none !important;
  }

  /* Reset all list items - target both old and new BEM classes */
  .view-digital-asset-archive table.dai-stack-table .dropbutton li,
  .view-digital-asset-archive table.dai-stack-table .dropbutton > li,
  .view-digital-asset-archive table.dai-stack-table .dropbutton-action,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item {
    all: unset !important;
    display: block !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Remove any pseudo-element separators */
  .view-digital-asset-archive table.dai-stack-table .dropbutton li::before,
  .view-digital-asset-archive table.dai-stack-table .dropbutton li::after,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item::before,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item::after {
    display: none !important;
    content: none !important;
  }

  /* Style all action links */
  .view-digital-asset-archive table.dai-stack-table .dropbutton li a,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item a {
    display: inline-block !important;
    padding: 0.5rem 0.5rem 0.5rem 0 !important;
    text-decoration: underline !important;
    color: var(--dai-accent-info, #003ecc) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  /* Hover state */
  .view-digital-asset-archive table.dai-stack-table .dropbutton li a:hover,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item a:hover {
    color: var(--dai-accent-info-hover, #002d99) !important;
    text-decoration-thickness: 2px !important;
  }

  /* Focus state for keyboard navigation */
  .view-digital-asset-archive table.dai-stack-table .dropbutton li a:focus,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item a:focus {
    outline: 2px solid var(--dai-accent-info, #003ecc) !important;
    outline-offset: 2px !important;
  }

  /* Active/pressed state */
  .view-digital-asset-archive table.dai-stack-table .dropbutton li a:active,
  .view-digital-asset-archive table.dai-stack-table .dropbutton__item a:active {
    color: var(--dai-accent-info-active, #001f66) !important;
  }
}

/* ===== Link Accessibility ===== */
/* Ensure links have underlines as secondary visual identifier (not just color) */

/* Archive management page links (admin) */
.view-digital-asset-archive .view-header a:link,
.view-digital-asset-archive .view-header a:visited {
  text-decoration: underline;
}

.view-digital-asset-archive .view-header a:hover,
.view-digital-asset-archive .view-header a:focus {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Exclude button-styled links from underline */
.view-digital-asset-archive .view-header a.button {
  text-decoration: none;
}

.view-digital-asset-archive .view-header a.button:hover,
.view-digital-asset-archive .view-header a.button:focus {
  text-decoration: none;
}

/* ===== Archive Warning Text ===== */
.archive-warning {
  color: var(--dai-badge-danger-bg);
}

/* ===== Archive Options - Side-by-Side Bordered Boxes ===== */
.archive-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 48rem) {
  .archive-options {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.archive-option {
  background-color: var(--dai-surface-bg);
  padding: 1rem 1.25rem;
  border-radius: var(--dai-surface-radius);
  border-left: 3px solid var(--dai-accent-info);
}

.archive-option h3 {
  margin-top: 0;
}

.archive-option p {
  margin-bottom: 0.75rem;
}

.archive-option:focus-within {
  outline: 2px solid var(--dai-accent-info);
  outline-offset: 2px;
}

/* ===== Archive Asset Form - File Info Container ===== */
/* Light, read-only container for file information display */
.file-info-container {
  background-color: var(--dai-surface-bg);
  padding: 0.75rem 1rem;
  border-radius: var(--dai-surface-radius);
  border: 1px solid var(--dai-surface-border);
  margin-bottom: 1.5rem;
}

.file-info-container h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.file-info-container ul {
  margin: 0;
  padding-left: 1.25rem;
}

.file-info-container li {
  margin-bottom: 0.25rem;
  line-height: 1.5;
}

.file-info-container a {
  word-break: break-all;
}

/* Archive details section label */
.archive-details-label {
  margin: 1.5rem 0 0.5rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--dai-surface-border);
  font-size: 1.1rem;
}

.archive-details-label + p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #666;
}

/* Queue/Archive page header */
.dai-page-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.5rem;
}

.dai-page-subtitle {
  margin: 0 0 1.5rem 0;
  color: #666;
  font-size: 0.95rem;
}

/* Helper text above form actions */
.form-actions-helper {
  color: var(--dai-text-muted);
  font-size: 0.9em;
  margin-bottom: 0.5rem;
}

/* Archive validation panel (execute archive form) */
.archive-validation-panel {
  background-color: var(--dai-surface-bg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: var(--dai-surface-radius);
  border-left: 3px solid var(--dai-badge-success-bg);
}

.archive-validation-panel p:first-child {
  margin-top: 0;
}

.archive-validation-panel ul {
  margin: 0.75rem 0;
  padding-left: 0;
  list-style: none;
}

.archive-validation-panel ul li {
  margin-bottom: 0.25rem;
}

.archive-validation-note {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--dai-surface-border);
  margin-bottom: 0;
  font-size: 0.9em;
}

.archive-validation-panel h2 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1em;
  font-weight: 600;
}

/* In-use warning panel (archive-in-use feature) */
.dai-in-use-warning {
  background-color: #fef9e7;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: var(--dai-surface-radius);
  border-left: 3px solid #f0c36d;
}

.dai-in-use-warning h2 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1em;
  font-weight: 600;
  color: #6c5700;
}

.dai-in-use-warning p {
  margin: 0 0 0.5rem 0;
}

.dai-in-use-warning p:last-child {
  margin-bottom: 0;
}

.dai-in-use-location {
  margin-top: 0.75rem;
  font-weight: 500;
}

.dai-in-use-public-note {
  margin-top: 0.75rem;
  font-size: 0.875em;
  color: #666;
}

/* Policy notice panel (action limited by settings) */
.dai-policy-notice {
  background-color: #fef9e7;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: var(--dai-surface-radius);
  border-left: 3px solid #f0c36d;
}

.dai-notice-title {
  margin: 0 0 0.75rem 0;
  font-size: 1.1em;
  font-weight: 600;
}

.dai-policy-notice .dai-notice-title {
  color: #453600;
}

.dai-policy-notice p {
  margin: 0 0 0.5rem 0;
}

.dai-policy-notice ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.dai-policy-notice ul li {
  margin-bottom: 0.35rem;
}

.dai-policy-notice__contact {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.875em;
  color: #666;
  font-style: italic;
}

/* Archive description and notes blockquotes */
.archive-description-block,
.archive-notes-block {
  margin: 0.75rem 0;
  padding: 1rem;
  line-height: 1.5;
  quotes: none;
}

/* Remove Claro's quotation marks */
.archive-description-block::before,
.archive-description-block::after,
.archive-notes-block::before,
.archive-notes-block::after {
  content: none;
}

.archive-description-block {
  background-color: var(--dai-surface-bg);
  border-left: 4px solid var(--dai-accent-info);
}

.archive-notes-block {
  background-color: var(--dai-notes-bg);
  border-left: 4px solid var(--dai-notes-border);
}

/* Policy notice error variant (blocked action) */
.dai-policy-notice--error {
  background-color: #fef2f2;
  border-left-color: #dc2626;
}

.dai-policy-notice--error .dai-notice-title {
  color: #7f1d1d;
}

.dai-policy-notice--error h4 {
  color: #991b1b;
}

/* Consequences notice (what happens after action) */
.dai-consequences-notice {
  background-color: var(--dai-surface-bg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: var(--dai-surface-radius);
  border-left: 3px solid var(--dai-surface-border);
}


.dai-consequences-notice ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.dai-consequences-notice ul li {
  margin-bottom: 0.35rem;
}

.dai-consequences-notice ul ul {
  margin-top: 0.35rem;
}

/* Action helper text (below action buttons) */
.dai-action-helper-text {
  margin-top: 1rem;
  font-size: 0.875em;
  color: #666;
  font-style: italic;
}

/* Disclaimer example blockquote */
.disclaimer-example {
  background-color: var(--dai-surface-bg);
  padding: 1rem;
  border-left: 4px solid var(--dai-accent-info);
  margin: 0.75rem 0;
  line-height: 1.5;
}

/* ===== Archive Edit Form Warning ===== */
/* Warning shown when editing archived content */
.archive-edit-warning {
  margin-bottom: 1.5rem;
}

.archive-edit-warning strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.archive-edit-warning p {
  margin: 0.5rem 0 0 0;
  line-height: 1.5;
}

/* Archive acknowledgment checkbox - prominent styling */
.archive-acknowledgment-checkbox {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}

/* Wrapper for the acknowledgment field */
/* Handles both old location and new location inside actions container */
.form-item-archive-acknowledgment,
.form-item-actions-archive-acknowledgment {
  background-color: var(--dai-surface-bg);
  padding: 1rem 1.25rem 1rem 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: var(--dai-surface-radius);
  border-left: 3px solid var(--dai-badge-warning-bg);
}

.form-item-archive-acknowledgment label,
.form-item-actions-archive-acknowledgment label {
  font-weight: 600;
}

/* ===== Manual Archive Form Intro Box ===== */
.manual-archive-intro-box {
  background-color: var(--dai-surface-bg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: var(--dai-surface-radius);
  border-left: 3px solid var(--dai-accent-info);
}

.manual-archive-intro-box h3 {
  margin-top: 0;
}

.manual-archive-intro-box p:last-child {
  margin-bottom: 0;
}

.manual-archive-intro-box ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.manual-archive-intro-box li {
  margin-bottom: 0.5rem;
}

.manual-archive-intro-box li:last-child {
  margin-bottom: 0;
}

/* Manual Archive Form - Visibility fieldset spacing */
.manual-archive-form fieldset .description {
  margin-top: 0.25rem;
}

/* ===== Settings Form Accessibility ===== */
/* Ensure WCAG 1.4.12 compliance: line-height at least 1.5 for paragraphs */
#digital-asset-inventory-settings .messages p,
#digital-asset-inventory-settings p {
  line-height: 1.5;
}

/* ===== Archive Forms Accessibility ===== */
/* Ensure WCAG 1.4.8 compliance: line-height at least 1.5 for paragraphs and blockquotes */
#digital-asset-inventory-execute-archive-form p,
#digital-asset-inventory-execute-archive-form blockquote,
#digital-asset-inventory-execute-archive-form li,
#digital-asset-inventory-manual-archive-form p,
#digital-asset-inventory-manual-archive-form blockquote,
#digital-asset-inventory-manual-archive-form li,
#digital-asset-inventory-unarchive-form p,
#digital-asset-inventory-unarchive-form blockquote,
#digital-asset-inventory-unarchive-form li,
#digital-asset-inventory-toggle-archive-visibility-form p,
#digital-asset-inventory-toggle-archive-visibility-form blockquote,
#digital-asset-inventory-toggle-archive-visibility-form li,
#digital-asset-inventory-archive-asset-form p,
#digital-asset-inventory-archive-asset-form blockquote,
#digital-asset-inventory-archive-asset-form li,
#digital-asset-inventory-cancel-archive-form p,
#digital-asset-inventory-cancel-archive-form blockquote,
#digital-asset-inventory-cancel-archive-form li,
#digital-asset-inventory-delete-archived-file-form p,
#digital-asset-inventory-delete-archived-file-form blockquote,
#digital-asset-inventory-delete-archived-file-form li,
#digital-asset-inventory-delete-manual-archive-form p,
#digital-asset-inventory-delete-manual-archive-form blockquote,
#digital-asset-inventory-delete-manual-archive-form li,
.confirm-form p,
.confirm-form blockquote,
.confirm-form li {
  line-height: 1.5;
}

/* ===== Asset Usage View Responsive Tables ===== */

/* Usage view desktop styles */
@media (min-width: 1024px) {
  .view-digital-asset-usage table.views-table {
    table-layout: auto;
    width: 100%;
  }

  .view-digital-asset-usage td,
  .view-digital-asset-usage th {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }
}

/* Usage view CSS-only stacked mode (Mobile: 640px and below) */
@media (max-width: 640px) {
  .view-digital-asset-usage table.dai-stack-table {
    display: block !important;
    width: 100% !important;
  }

  /* Hide table header - labels shown per cell via data-label */
  .view-digital-asset-usage table.dai-stack-table thead {
    display: none !important;
  }

  /* Force block display on all table elements */
  .view-digital-asset-usage table.dai-stack-table tbody,
  .view-digital-asset-usage table.dai-stack-table tr {
    display: block !important;
    width: 100% !important;
  }

  .view-digital-asset-usage table.dai-stack-table tbody tr {
    border-bottom: 2px solid var(--dai-surface-border);
    margin-bottom: 1rem;
    padding: 0.5rem 0;
  }

  /* Use flexbox on td to force vertical stacking */
  .view-digital-asset-usage table.dai-stack-table td {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    box-sizing: border-box;
    padding: 0.5rem 0;
    line-height: 1.4;
  }

  /* Show labels from data-label attribute */
  .view-digital-asset-usage table.dai-stack-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--dai-text-primary);
    order: 1;
  }

  /* Hide empty labels */
  .view-digital-asset-usage table.dai-stack-table td[data-label=""]::before {
    display: none;
  }
}

/* Usage view CSS-only stacked mode (Tablet/Zoom: 641px to 1023px) */
/* Card-based layout matching public archive registry */
@media (min-width: 641px) and (max-width: 1023px) {
  .view-digital-asset-usage table.dai-stack-table {
    table-layout: auto !important;
    border: 0 !important;
  }

  .view-digital-asset-usage table.dai-stack-table thead {
    display: none;
  }

  /* Force block display on tbody */
  .view-digital-asset-usage table.dai-stack-table tbody {
    display: block;
  }

  /* Each row becomes a card */
  .view-digital-asset-usage table.dai-stack-table tbody tr {
    display: block;
    border: 1px solid var(--dai-surface-border);
    border-radius: var(--dai-surface-radius);
    margin-bottom: 1rem;
    padding: 0;
    background-color: var(--dai-surface-bg-alt);
  }

  /* Each cell becomes a block with separator */
  .view-digital-asset-usage table.dai-stack-table td {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-sizing: border-box;
    padding: 0.75rem !important;
    border: none !important;
    border-bottom: 1px solid var(--dai-surface-border) !important;
    text-align: left !important;
    line-height: 1.4;
  }

  /* Last cell - no bottom border */
  .view-digital-asset-usage table.dai-stack-table td:last-child {
    border-bottom: none !important;
  }

  /* Show labels from data-label attribute */
  .view-digital-asset-usage table.dai-stack-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--dai-text-primary);
  }

  /* Hide empty labels */
  .view-digital-asset-usage table.dai-stack-table td[data-label=""]::before {
    display: none;
  }

  .view-digital-asset-usage table.dai-stack-table td.views-field-usage-title {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ===== Asset Usage Info Header ===== */
/* Header displayed on asset usage detail page */
.asset-info-header {
  margin-bottom: 1.5em;
}

.asset-info-header__wrapper {
  background-color: var(--dai-surface-bg);
  padding: 1rem 1.25rem;
  border-radius: var(--dai-surface-radius);
  border-left: 3px solid var(--dai-accent-info);
}

/* Note: .asset-info-header__content nested container removed for surface-first pattern */

.asset-info-header__title {
  margin-bottom: 0.4em;
}

.asset-info-header__name {
  font-size: 1.1em;
  font-weight: 700;
}

.asset-info-header__filename {
  color: var(--dai-text-muted);
  font-size: 0.9em;
}

.asset-info-header__meta {
  color: var(--dai-text-muted);
  font-size: 0.9em;
}

.asset-info-header__divider {
  color: var(--dai-text-muted);
  padding: 0 0.25em;
}

.asset-info-header__url {
  margin-top: 0.4em;
  font-size: 0.85em;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.asset-info-header__url a {
  text-decoration: underline;
}

.asset-info-header__url a:hover,
.asset-info-header__url a:focus {
  text-decoration-thickness: 2px;
}

.asset-info-header__url-label {
  color: var(--dai-text-muted);
}

.asset-info-header__back {
  margin: 0.75em 0 0 0;
}

.asset-info-header__back a {
  text-decoration: underline;
}

.asset-info-header__back a:hover,
.asset-info-header__back a:focus {
  text-decoration-thickness: 2px;
}

/* ===== Enhanced Asset Info Header (Media-Aware) ===== */
/* Flex layout for header with thumbnail on the left */
.asset-info-header__content--with-thumbnail {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.asset-info-header__thumbnail {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dai-surface-border);
  border-radius: 4px;
  overflow: hidden;
}

.asset-info-header__thumbnail img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.asset-info-header__thumbnail--placeholder {
  color: var(--dai-text-muted);
  font-size: 0.75em;
  text-align: center;
  padding: 0.5em;
}

.asset-info-header__details {
  flex: 1;
  min-width: 0;
}

/* Media info section in header */
.asset-info-header__media {
  margin-top: 0.75em;
  padding-top: 0.5em;
  border-top: 1px solid var(--dai-surface-border);
  font-size: 0.9em;
}

/* Media ID inline in metadata - muted technical info */
.asset-info-header__media-id {
  color: var(--dai-text-muted);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.95em;
}

/* Alt text status in header: "Media alt text: detected" */
.asset-info-header__alt-status {
  margin-top: 0.25em;
}

.asset-info-header__alt-label {
  color: var(--dai-text-muted);
}

.asset-info-header__alt-value {
  font-weight: 500;
}

.asset-info-header__alt-value--detected {
  color: var(--clr-green-dark, #2e7d32);
}

.asset-info-header__alt-value--not-detected {
  color: var(--clr-text-warning, #b26a00);
}

/* Media actions in header: View Media | Edit Media */
.asset-info-header__media-actions {
  margin-top: 0.5em;
}

.asset-info-header__action {
  display: inline-block;
  padding: 0.2em 0.5em;
  text-decoration: underline;
  font-weight: 500;
  color: var(--color-link, #0073bd);
  border-radius: 3px;
}

.asset-info-header__action:hover,
.asset-info-header__action:focus {
  text-decoration-thickness: 2px;
  background-color: rgba(0, 115, 189, 0.08);
}

.asset-info-header__action-divider {
  margin: 0 0.25em;
  color: var(--dai-text-muted);
}

/* Alt text summary (inline): "Alt text summary: 1 with alt · 2 not evaluated" */
.asset-info-header__alt-summary {
  margin-top: 0.25em;
  font-size: 0.9em;
}

.asset-info-header__alt-summary-label {
  color: var(--dai-text-muted);
}

.asset-info-header__alt-summary-sep {
  margin: 0 0.35em;
  color: var(--dai-text-muted);
}

/* Alt text column in usage table
 * UI Spec: Value first, label second. No color-coding.
 * - Detected: normal text + muted source label
 * - Decorative: italic, muted
 * - Template: italic, muted
 * - Not evaluated/missing: muted, not italic
 */
.alt-cell {
  font-size: 0.9em;
  line-height: 1.4;
}

/* Alt text value - normal body text, wrap allowed */
.alt-cell__value {
  color: inherit;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Source label - small, muted, secondary line */
.alt-cell__source {
  font-size: 0.85em;
  color: var(--dai-text-muted);
  margin-top: 0.15em;
}

/* Decorative image - italic, muted */
.alt-cell__decorative {
  color: var(--dai-text-muted);
  font-style: italic;
}

/* Template-controlled - italic, muted */
.alt-cell__template {
  color: var(--dai-text-muted);
  font-style: italic;
}

/* Not evaluated/unknown - muted, not italic */
.alt-cell__unknown {
  color: var(--dai-text-muted);
}

/* Not detected/missing - muted, not italic */
.alt-cell__missing {
  color: var(--dai-text-muted);
}

/* Media actions in table cells */
.media-actions {
  white-space: nowrap;
}

.media-action {
  text-decoration: underline;
}

.media-action:hover,
.media-action:focus {
  text-decoration-thickness: 2px;
}

.media-actions__divider {
  margin: 0 0.25em;
  color: var(--dai-text-muted);
}

/* Responsive: stack thumbnail on mobile */
@media (max-width: 640px) {
  .asset-info-header__content--with-thumbnail {
    flex-direction: column;
    align-items: stretch;
  }

  .asset-info-header__thumbnail {
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1;
    margin-bottom: 0.5em;
  }
}

/* ===== Intentional Action Button ===== */
/* Button style for actions that are serious but not destructive.
 * Used for "Remove from Public View" and similar intentional actions.
 * Amber/dark gray color signals "think before clicking" without
 * implying data loss (which red would suggest).
 */
.button--intentional {
  background-color: var(--dai-btn-intentional-bg);
  border-color: var(--dai-btn-intentional-bg);
  color: var(--dai-btn-primary-text);
}

.button--intentional:hover,
.button--intentional:focus {
  background-color: var(--dai-btn-intentional-hover-bg);
  border-color: var(--dai-btn-intentional-hover-bg);
  color: var(--dai-btn-primary-text);
}

.button--intentional:active {
  background-color: var(--dai-btn-intentional-active-bg);
  border-color: var(--dai-btn-intentional-active-bg);
}

/* Secondary button - quieter visual weight */
.button--secondary {
  background-color: var(--dai-btn-secondary-bg);
  border: 1px solid var(--dai-btn-secondary-border);
  color: var(--dai-btn-secondary-text);
}

.button--secondary:hover,
.button--secondary:focus {
  background-color: var(--dai-btn-secondary-hover-bg);
  border-color: var(--dai-btn-secondary-hover-border);
  color: var(--dai-btn-secondary-text);
}

.button--secondary:active {
  background-color: var(--dai-btn-secondary-hover-bg);
  filter: brightness(0.95);
}

/* Danger button - destructive actions */
.button--danger {
  background-color: var(--dai-btn-danger-bg);
  border-color: var(--dai-btn-danger-bg);
  color: var(--dai-btn-primary-text);
}

.button--danger:hover,
.button--danger:focus {
  background-color: var(--dai-btn-danger-hover-bg);
  border-color: var(--dai-btn-danger-hover-bg);
  color: var(--dai-btn-primary-text);
}

.button--danger:active {
  background-color: var(--dai-btn-danger-active-bg);
  border-color: var(--dai-btn-danger-active-bg);
}

/* ===== Notes Page ===== */
/* Styles for the internal notes page (/admin/digital-asset-inventory/archive/{id}/notes) */

.dai-notes-page__back {
  margin-bottom: 1.5rem;
}

.dai-notes-page__back a {
  color: var(--dai-accent-info);
  text-decoration: underline;
}

.dai-notes-page__back a:hover,
.dai-notes-page__back a:focus {
  text-decoration-thickness: 2px;
}

/* Helper text explaining the page purpose */
.dai-notes-page__helper-text {
  color: var(--dai-text-muted);
  font-size: 0.95em;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.dai-notes-page__section {
  margin-bottom: 2rem;
}

.dai-notes-page__section-title {
  font-size: 1.1rem;
  margin: 0 0 0.5rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--dai-surface-border);
}

/* Initial note section - context area with more breathing room */
.dai-notes-page__section--initial {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--dai-surface-border);
}

.dai-notes-page__initial-note {
  background-color: var(--dai-surface-bg);
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--dai-surface-border);
  line-height: 1.5;
  font-weight: 400;
  max-width: 48rem;
}

.dai-notes-page__empty {
  color: var(--dai-text-muted);
  font-style: italic;
}

.dai-notes-page__add-form {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: var(--dai-surface-bg);
  border-radius: var(--dai-surface-radius);
}

.dai-notes-page__add-form textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
}

/* Notes list - activity record with tighter spacing */
.dai-notes-page__notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dai-notes-page__note {
  background-color: var(--dai-surface-bg);
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--dai-accent-info);
}

.dai-notes-page__note-content {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.dai-notes-page__note-text {
  line-height: 1.5;
  font-weight: 500;
}

/* Note metadata - lighter and smaller */
.dai-notes-page__note-meta {
  font-size: 0.8rem;
  color: var(--dai-text-muted);
  font-weight: 400;
}

.dai-notes-page__note-author {
  font-weight: 500;
}

.dai-notes-page__note-separator {
  margin: 0 0.25rem;
  opacity: 0.6;
}

/* Notes link in views */
.dai-notes-link {
  white-space: nowrap;
}

/* =============================================================================
   SUGGESTED TEXT BOX (Archive In-Use)
   ============================================================================= */

.dai-suggested-text-box {
  background-color: var(--dai-surface-bg);
  border: 1px solid var(--dai-surface-border);
  border-left: 3px solid var(--dai-accent-info);
  border-radius: var(--dai-surface-radius);
  padding: 1rem;
  margin: 1rem 0;
}

.dai-suggested-text-box blockquote {
  margin: 0.75rem 0 0 0;
  padding: 0.75rem 1rem;
  background-color: #fff;
  border: 1px dashed var(--dai-surface-border);
  border-radius: var(--dai-surface-radius);
  font-style: normal;
}

.dai-suggested-text-box blockquote p {
  margin: 0.5rem 0;
  line-height: 1.5;
}

.dai-suggested-text-box blockquote p:first-child {
  margin-top: 0;
}

.dai-suggested-text-box blockquote p:last-child {
  margin-bottom: 0;
}

/* =============================================================================
   AUDIO/VIDEO ACCESSIBILITY SIGNALS
   ============================================================================= */

/* Signal cells in usage table */
.signal-cell {
  font-size: 0.9em;
  line-height: 1.4;
}

.signal-cell__embed-type {
  color: inherit;
}

.signal-cell__value {
  white-space: nowrap;
}

/* Signal value states - use color coding for quick scanning */
.signal-cell__value--detected {
  color: var(--dai-badge-success-text, #155724);
}

.signal-cell__value--not_detected {
  color: var(--dai-text-muted);
}

.signal-cell__value--unknown {
  color: var(--dai-badge-warning-text, #856404);
}

.signal-cell__value--not_applicable {
  color: var(--dai-text-muted);
}