/**
 * RootReal Layout Modules — CSS token vars + module classes
 *
 * Phase 1 backlog + Phase 5.2: CSS for the five MUI-inspired layout modules
 * (Box, Container, Grid, Stack, ImageList) plus slot-relationship/anchor
 * wrappers, elevation, surface, responsive breakpoint prefix classes,
 * ImageListItemBar styling, responsive gap utilities, and column-count stubs.
 * Loaded via <link data-trunk> in crates/ux/dashboard/shell/index.html.
 */

/* ============================================================================
 * Token Variables
 * ========================================================================== */

:root {
  /* Spacing scale */
  --rr-spacing-1: 4px;
  --rr-spacing-2: 8px;
  --rr-spacing-3: 12px;
  --rr-spacing-4: 16px;
  --rr-spacing-6: 24px;
  --rr-spacing-8: 32px;

  /* Elevation (box-shadow) tokens */
  --rr-elevation-none: none;
  --rr-elevation-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --rr-elevation-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --rr-elevation-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --rr-elevation-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --rr-elevation-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* Surface (background) tokens */
  --rr-surface-default: #ffffff;
  --rr-surface-subtle: #f8fafc;
  --rr-surface-raised: #ffffff;
  --rr-surface-sunken: #f1f5f9;
  --rr-surface-accent: #eff6ff;
  --rr-surface-inverse: #0f172a;

  /* Container max-width breakpoints (px) — default fallbacks */
  --rr-container-xs: 0px;
  --rr-container-sm: 600px;
  --rr-container-md: 900px;
  --rr-container-lg: 1200px;
  --rr-container-xl: 1536px;

  /* Responsive breakpoints */
  --rr-bp-xs: 0px;
  --rr-bp-sm: 600px;
  --rr-bp-md: 900px;
  --rr-bp-lg: 1200px;
  --rr-bp-xl: 1536px;
}

/* ============================================================================
 * Display utilities
 * ========================================================================== */

.rr-display-block      { display: block; }
.rr-display-flex       { display: flex; }
.rr-display-grid       { display: grid; }
.rr-display-inline-flex    { display: inline-flex; }
.rr-display-inline-block   { display: inline-block; }
.rr-display-none       { display: none; }

/* ============================================================================
 * Margin utilities (maps to --rr-spacing-*)
 * ========================================================================== */

.rr-m-none { margin: 0; }
.rr-m-xs   { margin: var(--rr-spacing-1, 4px); }
.rr-m-sm   { margin: var(--rr-spacing-2, 8px); }
.rr-m-md   { margin: var(--rr-spacing-3, 12px); }
.rr-m-lg   { margin: var(--rr-spacing-4, 16px); }
.rr-m-xl   { margin: var(--rr-spacing-6, 24px); }
.rr-m-xxl  { margin: var(--rr-spacing-8, 32px); }

/* ============================================================================
 * Elevation (box-shadow) classes
 * ========================================================================== */

.rr-elevation-none { box-shadow: var(--rr-elevation-none); }
.rr-elevation-xs   { box-shadow: var(--rr-elevation-xs); }
.rr-elevation-sm   { box-shadow: var(--rr-elevation-sm); }
.rr-elevation-md   { box-shadow: var(--rr-elevation-md); }
.rr-elevation-lg   { box-shadow: var(--rr-elevation-lg); }
.rr-elevation-xl   { box-shadow: var(--rr-elevation-xl); }

/* ============================================================================
 * Surface (background) classes
 * ========================================================================== */

.rr-surface-none     { background: transparent; }
.rr-surface-default   { background: var(--rr-surface-default); }
.rr-surface-subtle    { background: var(--rr-surface-subtle); }
.rr-surface-raised    { background: var(--rr-surface-raised); }
.rr-surface-sunken    { background: var(--rr-surface-sunken); }
.rr-surface-accent    { background: var(--rr-surface-accent); }
.rr-surface-inverse   { background: var(--rr-surface-inverse); color: #ffffff; }

/* ============================================================================
 * Stack module classes
 * ========================================================================== */

.rr-stack {
  display: flex;
}

.rr-stack-row             { flex-direction: row; }
.rr-stack-col             { flex-direction: column; }
.rr-stack-row-reverse     { flex-direction: row-reverse; }
.rr-stack-col-reverse     { flex-direction: column-reverse; }

.rr-stack-flex-gap        { gap: inherit; }
.rr-stack-no-flex-gap     { gap: 0; }
.rr-stack-no-flex-gap > * { margin: 0; }

.rr-stack-divided > :not(:last-child)::after {
  content: "";
  display: block;
  border-bottom: 1px solid var(--rr-surface-sunken, #f1f5f9);
}

/* ============================================================================
 * Grid v2 module classes
 * ========================================================================== */

.rr-grid2 {
  display: grid;
}

.rr-grid2-item {
  min-width: 0;
  min-height: 0;
}

/* Responsive per-breakpoint spans (mobile-first cascade).
 *
 * `grid_item_style` emits one `--rr-gc-<bp>` custom property per DECLARED
 * breakpoint (the full `grid-column` value — `span n` / `auto` / offset form).
 * These rules resolve the correct value at each width, cascading to the
 * nearest lower declared breakpoint — mirroring `ResponsiveValue::resolve` in
 * `crates/ux/component/layout/src/primitives/responsive.rs`. Breakpoint px
 * thresholds mirror `Breakpoint::default_max_width_px` (sm 444 / md 600 /
 * lg 900 / xl 1200). Items with a Uniform span keep an inline `grid-column`
 * (which beats these rules), so only per-breakpoint items flow through here.
 */
.rr-grid2-item { grid-column: var(--rr-gc-xs, span 12); }
@media (min-width: 444px) {
  .rr-grid2-item { grid-column: var(--rr-gc-sm, var(--rr-gc-xs, span 12)); }
}
@media (min-width: 600px) {
  .rr-grid2-item { grid-column: var(--rr-gc-md, var(--rr-gc-sm, var(--rr-gc-xs, span 12))); }
}
@media (min-width: 900px) {
  .rr-grid2-item { grid-column: var(--rr-gc-lg, var(--rr-gc-md, var(--rr-gc-sm, var(--rr-gc-xs, span 12)))); }
}
@media (min-width: 1200px) {
  .rr-grid2-item { grid-column: var(--rr-gc-xl, var(--rr-gc-lg, var(--rr-gc-md, var(--rr-gc-sm, var(--rr-gc-xs, span 12))))); }
}

.rr-grid2-cols-1  { grid-template-columns: repeat(1, 1fr); }
.rr-grid2-cols-2  { grid-template-columns: repeat(2, 1fr); }
.rr-grid2-cols-3  { grid-template-columns: repeat(3, 1fr); }
.rr-grid2-cols-4  { grid-template-columns: repeat(4, 1fr); }
.rr-grid2-cols-5  { grid-template-columns: repeat(5, 1fr); }
.rr-grid2-cols-6  { grid-template-columns: repeat(6, 1fr); }
.rr-grid2-cols-7  { grid-template-columns: repeat(7, 1fr); }
.rr-grid2-cols-8  { grid-template-columns: repeat(8, 1fr); }
.rr-grid2-cols-9  { grid-template-columns: repeat(9, 1fr); }
.rr-grid2-cols-10 { grid-template-columns: repeat(10, 1fr); }
.rr-grid2-cols-11 { grid-template-columns: repeat(11, 1fr); }
.rr-grid2-cols-12 { grid-template-columns: repeat(12, 1fr); }
.rr-grid2-cols-16 { grid-template-columns: repeat(16, 1fr); }
.rr-grid2-cols-24 { grid-template-columns: repeat(24, 1fr); }

.rr-grid2-flow-row    { grid-auto-flow: row; }
.rr-grid2-flow-col    { grid-auto-flow: column; }
.rr-grid2-flow-dense  { grid-auto-flow: row dense; }

.rr-grid2-item-span-1  { grid-column: span 1; }
.rr-grid2-item-span-2  { grid-column: span 2; }
.rr-grid2-item-span-3  { grid-column: span 3; }
.rr-grid2-item-span-4  { grid-column: span 4; }
.rr-grid2-item-span-5  { grid-column: span 5; }
.rr-grid2-item-span-6  { grid-column: span 6; }
.rr-grid2-item-span-7  { grid-column: span 7; }
.rr-grid2-item-span-8  { grid-column: span 8; }
.rr-grid2-item-span-9  { grid-column: span 9; }
.rr-grid2-item-span-10 { grid-column: span 10; }
.rr-grid2-item-span-11 { grid-column: span 11; }
.rr-grid2-item-span-12 { grid-column: span 12; }

.rr-grid2-item-offset-1  { grid-column-start: 2; }
.rr-grid2-item-offset-2  { grid-column-start: 3; }
.rr-grid2-item-offset-3  { grid-column-start: 4; }
.rr-grid2-item-offset-4  { grid-column-start: 5; }
.rr-grid2-item-offset-5  { grid-column-start: 6; }
.rr-grid2-item-offset-6  { grid-column-start: 7; }
.rr-grid2-item-offset-7  { grid-column-start: 8; }
.rr-grid2-item-offset-8  { grid-column-start: 9; }
.rr-grid2-item-offset-9  { grid-column-start: 10; }
.rr-grid2-item-offset-10 { grid-column-start: 11; }
.rr-grid2-item-offset-11 { grid-column-start: 12; }

/* ============================================================================
 * Container module classes
 * ========================================================================== */

.rr-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.rr-container-xs  { max-width: var(--rr-container-xs, 0px); }
.rr-container-sm  { max-width: var(--rr-container-sm, 600px); }
.rr-container-md  { max-width: var(--rr-container-md, 900px); }
.rr-container-lg  { max-width: var(--rr-container-lg, 1200px); }
.rr-container-xl  { max-width: var(--rr-container-xl, 1536px); }
.rr-container-none  { max-width: none; }

.rr-container-fixed {
  max-width: var(--rr-container-fixed, 1200px);
}

.rr-container-gutters {
  padding-left: var(--rr-spacing-3, 12px);
  padding-right: var(--rr-spacing-3, 12px);
}

.rr-container-no-gutters {
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================================
 * ImageList module classes
 * ========================================================================== */

.rr-imagelist {
  overflow-y: auto;
}

.rr-imagelist-standard {
  display: grid;
}

.rr-imagelist-quilted {
  display: grid;
}

.rr-imagelist-woven {
  display: grid;
}

.rr-imagelist-masonry {
  column-count: 3;
  column-gap: var(--rr-spacing-1, 4px);
}

.rr-imagelist-masonry > * {
  break-inside: avoid;
  margin-bottom: var(--rr-spacing-1, 4px);
}

.rr-imagelist-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.rr-imagelist-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rr-imagelist-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rr-imagelist-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rr-imagelist-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rr-imagelist-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rr-imagelist-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rr-imagelist-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.rr-imagelist-cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.rr-imagelist-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.rr-imagelist-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.rr-imagelist-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.rr-imagelist-item {
  position: relative;
}

.rr-imagelist-item-col-1  { grid-column: span 1; }
.rr-imagelist-item-col-2  { grid-column: span 2; }
.rr-imagelist-item-col-3  { grid-column: span 3; }
.rr-imagelist-item-col-4  { grid-column: span 4; }
.rr-imagelist-item-col-5  { grid-column: span 5; }
.rr-imagelist-item-col-6  { grid-column: span 6; }
.rr-imagelist-item-col-7  { grid-column: span 7; }
.rr-imagelist-item-col-8  { grid-column: span 8; }
.rr-imagelist-item-col-9  { grid-column: span 9; }
.rr-imagelist-item-col-10 { grid-column: span 10; }
.rr-imagelist-item-col-11 { grid-column: span 11; }
.rr-imagelist-item-col-12 { grid-column: span 12; }

.rr-imagelist-item-row-1  { grid-row: span 1; }
.rr-imagelist-item-row-2  { grid-row: span 2; }
.rr-imagelist-item-row-3  { grid-row: span 3; }
.rr-imagelist-item-row-4  { grid-row: span 4; }
.rr-imagelist-item-row-5  { grid-row: span 5; }
.rr-imagelist-item-row-6  { grid-row: span 6; }

/* ============================================================================
 * Slot relationship / anchor wrapper classes
 * ========================================================================== */

.rr-slot {
  display: flex;
  flex-direction: column;
}

.rr-slot-rel-detached       { align-self: auto; }
.rr-slot-rel-shared-surface { align-self: stretch; }
.rr-slot-rel-connected      { align-self: center; }
.rr-slot-rel-docked         { align-self: auto; }

/* ============================================================================
 * Direct-manipulation affordances (design canvas 5.3a — select-first pattern)
 * ========================================================================== */

.rr-slot-selectable {
  cursor: pointer;
  border-radius: 0.5rem;
  transition: outline-color 120ms ease-in-out;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.rr-slot-selectable:hover {
  outline-color: rgb(165 180 252); /* indigo-300: hover affordance */
}

.rr-slot-selectable:focus-visible {
  outline-color: rgb(99 102 241); /* indigo-500: keyboard focus visibility (WCAG 2.2) */
}

.rr-slot-selected,
.rr-slot-selected:hover {
  outline-color: rgb(79 70 229); /* indigo-600: the selected slot */
}

.rr-slot-selectable[draggable="true"] {
  cursor: grab;
}

.rr-slot-selectable[draggable="true"]:active {
  cursor: grabbing;
}

.rr-slot-anchor-start  { align-items: flex-start; justify-content: flex-start; }
.rr-slot-anchor-center { align-items: center; justify-content: center; }
.rr-slot-anchor-end    { align-items: flex-end; justify-content: flex-end; }

/* ============================================================================
 * ImageListItemBar classes
 * ========================================================================== */

.rr-imagelist-bar {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.rr-imagelist-bar-below {
  position: static;
}

.rr-imagelist-bar-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.3) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  color: #ffffff;
}

.rr-imagelist-bar-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.3) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  color: #ffffff;
}

.rr-imagelist-bar-text {
  flex: 1 1 auto;
  overflow: hidden;
}

.rr-imagelist-bar-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.5;
}

.rr-imagelist-bar-subtitle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.7;
}

.rr-imagelist-bar-action {
  flex: 0 0 auto;
  align-self: center;
}

.rr-imagelist-action-left {
  order: -1;
  margin-right: var(--rr-spacing-1, 4px);
}

.rr-imagelist-action-right {
  order: 1;
  margin-left: var(--rr-spacing-1, 4px);
}

/* ============================================================================
 * Responsive breakpoint prefix classes
 * ========================================================================== */

/* xs (0px+) — no prefix needed; base classes are xs */

@media (min-width: 600px) {
  .rr-sm-flex-row        { flex-direction: row; }
  .rr-sm-flex-col        { flex-direction: column; }
  .rr-sm-flex-row-reverse    { flex-direction: row-reverse; }
  .rr-sm-flex-col-reverse    { flex-direction: column-reverse; }
  .rr-sm-display-block       { display: block; }
  .rr-sm-display-flex        { display: flex; }
  .rr-sm-display-grid        { display: grid; }
  .rr-sm-display-none        { display: none; }
  .rr-sm-m-none  { margin: 0; }
  .rr-sm-m-xs    { margin: var(--rr-spacing-1, 4px); }
  .rr-sm-m-sm    { margin: var(--rr-spacing-2, 8px); }
  .rr-sm-m-md    { margin: var(--rr-spacing-3, 12px); }
  .rr-sm-m-lg    { margin: var(--rr-spacing-4, 16px); }
  .rr-sm-m-xl    { margin: var(--rr-spacing-6, 24px); }
  .rr-sm-gap-none  { gap: 0; }
  .rr-sm-gap-xs    { gap: var(--rr-spacing-1, 4px); }
  .rr-sm-gap-sm    { gap: var(--rr-spacing-2, 8px); }
  .rr-sm-gap-md    { gap: var(--rr-spacing-3, 12px); }
  .rr-sm-gap-lg    { gap: var(--rr-spacing-4, 16px); }
  .rr-sm-gap-xl    { gap: var(--rr-spacing-6, 24px); }
}

@media (min-width: 900px) {
  .rr-md-flex-row        { flex-direction: row; }
  .rr-md-flex-col        { flex-direction: column; }
  .rr-md-flex-row-reverse    { flex-direction: row-reverse; }
  .rr-md-flex-col-reverse    { flex-direction: column-reverse; }
  .rr-md-display-block       { display: block; }
  .rr-md-display-flex        { display: flex; }
  .rr-md-display-grid        { display: grid; }
  .rr-md-display-none        { display: none; }
  .rr-md-m-none  { margin: 0; }
  .rr-md-m-xs    { margin: var(--rr-spacing-1, 4px); }
  .rr-md-m-sm    { margin: var(--rr-spacing-2, 8px); }
  .rr-md-m-md    { margin: var(--rr-spacing-3, 12px); }
  .rr-md-m-lg    { margin: var(--rr-spacing-4, 16px); }
  .rr-md-gap-none  { gap: 0; }
  .rr-md-gap-xs    { gap: var(--rr-spacing-1, 4px); }
  .rr-md-gap-sm    { gap: var(--rr-spacing-2, 8px); }
  .rr-md-gap-md    { gap: var(--rr-spacing-3, 12px); }
  .rr-md-gap-lg    { gap: var(--rr-spacing-4, 16px); }
  .rr-md-gap-xl    { gap: var(--rr-spacing-6, 24px); }
}

@media (min-width: 1200px) {
  .rr-lg-flex-row        { flex-direction: row; }
  .rr-lg-flex-col        { flex-direction: column; }
  .rr-lg-flex-row-reverse    { flex-direction: row-reverse; }
  .rr-lg-flex-col-reverse    { flex-direction: column-reverse; }
  .rr-lg-display-block       { display: block; }
  .rr-lg-display-flex        { display: flex; }
  .rr-lg-display-grid        { display: grid; }
  .rr-lg-display-none        { display: none; }
  .rr-lg-m-none  { margin: 0; }
  .rr-lg-m-xs    { margin: var(--rr-spacing-1, 4px); }
  .rr-lg-m-sm    { margin: var(--rr-spacing-2, 8px); }
  .rr-lg-m-md    { margin: var(--rr-spacing-3, 12px); }
  .rr-lg-m-lg    { margin: var(--rr-spacing-4, 16px); }
  .rr-lg-gap-none  { gap: 0; }
  .rr-lg-gap-xs    { gap: var(--rr-spacing-1, 4px); }
  .rr-lg-gap-sm    { gap: var(--rr-spacing-2, 8px); }
  .rr-lg-gap-md    { gap: var(--rr-spacing-3, 12px); }
  .rr-lg-gap-lg    { gap: var(--rr-spacing-4, 16px); }
  .rr-lg-gap-xl    { gap: var(--rr-spacing-6, 24px); }
}

@media (min-width: 1536px) {
  .rr-xl-flex-row        { flex-direction: row; }
  .rr-xl-flex-col        { flex-direction: column; }
  .rr-xl-flex-row-reverse    { flex-direction: row-reverse; }
  .rr-xl-flex-col-reverse    { flex-direction: column-reverse; }
  .rr-xl-display-block       { display: block; }
  .rr-xl-display-flex        { display: flex; }
  .rr-xl-display-grid        { display: grid; }
  .rr-xl-display-none        { display: none; }
  .rr-xl-gap-none  { gap: 0; }
  .rr-xl-gap-xs    { gap: var(--rr-spacing-1, 4px); }
  .rr-xl-gap-sm    { gap: var(--rr-spacing-2, 8px); }
  .rr-xl-gap-md    { gap: var(--rr-spacing-3, 12px); }
  .rr-xl-gap-lg    { gap: var(--rr-spacing-4, 16px); }
  .rr-xl-gap-xl    { gap: var(--rr-spacing-6, 24px); }
}

/* ---- IIIF slot containers ---- */
.rr-iiif-slot {
  width: 100%;
  height: 100%;
  min-height: 120px;
  overflow: hidden;
  position: relative;
  border-radius: var(--rr-radius-sm, 4px);
}

.rr-iiif-slot.rr-iiif-image {
  background: #e8e8e8;
}

.rr-iiif-slot.rr-iiif-manifest {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.rr-iiif-slot.rr-iiif-av {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: #fff;
}

.rr-iiif-slot.rr-iiif-georef {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: #fff;
}

.rr-iiif-slot.rr-iiif-missing {
  background: #fff3cd;
  border: 2px dashed #ffc107;
  border-radius: 4px;
  color: #856404;
}

.rr-iiif-image-tile {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rr-iiif-image-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #666;
  font-size: 0.75rem;
}

.rr-iiif-image-error[hidden] {
  display: none;
}

.rr-iiif-slot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rr-iiif-slot-label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 4px;
  text-align: center;
}

.rr-iiif-slot-url {
  display: block;
  font-size: 0.65rem;
  opacity: 0.75;
  word-break: break-all;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}