/*
 * Layout Component Styles - Pop Art Edition
 * Page structure, headers, breadcrumbs, callouts with bold styling
 */

@layer components {
  /* ==========================================================================
     Page Container
     ========================================================================== */

  .page-container {
    max-inline-size: var(--max-width-6xl);
    margin-inline: auto;
    padding: var(--space-8) var(--space-4);
  }

  /* ==========================================================================
     Page Header
     ========================================================================== */

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-block-end: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .page-header-content {
    /* Flexible content area */
  }

  .page-subtitle {
    color: var(--color-ink-muted);
    margin-block-start: var(--space-1);
  }

  .page-header-actions {
    display: flex;
    gap: var(--space-2);
  }

  /* ==========================================================================
     Section Label - Pop Art badge style for headings
     ========================================================================== */

  /* Standalone section label - use directly without wrapper
     When applied to h1/h2/h3, inherits font-size from the heading */
  .section-label {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: var(--font-normal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1_5) var(--space-3);
    background: var(--color-zap-yellow);
    color: black;
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-sm);
  }

  /* Default size when not on a heading element */
  span.section-label,
  div.section-label,
  p.section-label,
  h4.section-label,
  h5.section-label,
  h6.section-label {
    font-size: var(--text-xl);
  }

  /* Small section label - for use inside cards/modals */
  .section-label.section-label-sm {
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
    border-width: var(--border-medium);
    box-shadow: 2px 2px 0 var(--comic-shadow-color);
  }

  /* Section label color variants */
  .section-label-blue {
    background: var(--color-wham-blue);
    color: white;
  }

  .section-label-pink {
    background: var(--color-kapow-pink);
    color: white;
  }

  .section-label-green {
    background: var(--color-boom-green);
    color: black;
  }

  .section-label-red {
    background: var(--color-pow-red);
    color: white;
  }

  .section-label-orange {
    background: var(--color-whoosh-orange);
    color: black;
  }

  /* ==========================================================================
     Section - Content container (no hover, not interactive)
     Use for grouping related content. Cards are for interactive elements.
     ========================================================================== */

  .section {
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
  }

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-block-end: var(--border-thick) solid var(--color-comic-border);
  }

  .section-body {
    padding: var(--space-4);
  }

  /* No padding variant for tables/lists that handle their own padding */
  .section-body-flush {
    padding: 0;
  }

  /* ==========================================================================
     Breadcrumb - Pop Art style
     ========================================================================== */

  .breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    margin-block-end: var(--space-4);

    & a {
      color: var(--color-ink);
      font-weight: var(--font-bold);
      text-decoration: none;
      transition: color 0.15s ease;

      &:hover {
        color: var(--color-wham-blue);
      }
    }

    & .breadcrumb-current {
      color: var(--color-kapow-pink);
      font-weight: var(--font-bold);
    }

    & .breadcrumb-separator {
      color: var(--color-ink-muted);
    }
  }

  /* ==========================================================================
     Callouts - Alert style with Pop Art borders
     ========================================================================== */

  .callout {
    padding: var(--space-4);
    margin-block-end: var(--space-6);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-sm);
    transition: transform 0.15s ease;

    &:hover {
      transform: translateX(4px);
    }

    & a {
      color: inherit;
      font-weight: var(--font-bold);
      text-decoration: underline;
    }

    & strong {
      text-transform: uppercase;
    }
  }

  .callout-warning {
    --callout-bg: light-dark(oklch(0.96 0.08 85), oklch(0.28 0.08 85));
    background-color: var(--callout-bg);
  }

  .callout-info {
    --callout-bg: light-dark(oklch(0.96 0.05 250), oklch(0.28 0.05 250));
    background-color: var(--callout-bg);
  }

  .callout-error {
    --callout-bg: light-dark(oklch(0.95 0.06 25), oklch(0.25 0.06 25));
    background-color: var(--callout-bg);
  }

  .callout-success {
    --callout-bg: light-dark(oklch(0.96 0.05 145), oklch(0.28 0.05 145));
    background-color: var(--callout-bg);
  }

  /* ==========================================================================
     Empty State - Pop Art style
     ========================================================================== */

  .empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);

    & h2,
    & h3 {
      font-size: var(--text-xl);
      font-weight: var(--font-bold);
      margin-block-end: var(--space-2);
    }

    & p {
      color: var(--color-ink-muted);
      margin-block-end: var(--space-6);
    }

    & p:last-child {
      margin-block-end: 0;
    }
  }

  .empty-state-icon {
    display: inline-block;
    padding: var(--space-4);
    background: var(--color-border-muted);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-sm);
    margin-block-end: var(--space-4);
    color: var(--color-ink-muted);
  }

  .empty-state-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
  }

  /* ==========================================================================
     Content Grid - Responsive two-column layout for detail cards
     ========================================================================== */

  .content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-block-end: var(--space-6);
  }

  /* ==========================================================================
     Detail Cards - Pop Art card style
     ========================================================================== */

  .detail-card {
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
    padding: var(--space-4);

    & h2 {
      font-size: var(--text-base);
      font-weight: var(--font-bold);
      text-transform: uppercase;
      letter-spacing: 0.025em;
      margin: 0 0 var(--space-3) 0;
    }

    /* When detail-list is direct child with no h2, no extra spacing needed */
    & > .detail-list:first-child {
      margin-top: 0;
    }
  }

  /*
   * Detail List Pattern
   * Uses padding only (no gap) so borders sit cleanly between items.
   * Each item has equal padding top/bottom for consistent row height.
   */
  .detail-list {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--space-10);
    padding: var(--space-3) 0;
    border-block-start: var(--border-thin) solid var(--color-comic-border);

    &:first-child {
      border-block-start: none;
    }

    & dt {
      color: var(--color-ink-muted);
      font-size: var(--text-sm);
      font-weight: var(--font-bold);
      flex-shrink: 0;
      min-width: 80px;
    }

    & dd {
      font-size: var(--text-sm);
      text-align: end;
      margin: 0;
    }

    & code {
      background: var(--color-border-muted);
      padding: var(--space-0_5) var(--space-1_5);
      border: 1px solid var(--color-border);
      font-size: var(--text-xs);
      font-weight: var(--font-bold);
    }
  }

  /* Full-width item within detail list (no label/value split) */
  .detail-item-full {
    padding: var(--space-3) 0;
    border-block-start: var(--border-thin) solid var(--color-comic-border);

    &:first-child {
      border-block-start: none;
    }
  }

  /* Inline detail list - horizontal wrapping layout */
  .detail-list-inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);

    & .detail-item {
      flex: 0 0 auto;
      min-height: auto;
      padding: 0;
      border: none;
      gap: var(--space-2);

      & dd {
        text-align: start;
      }
    }
  }

  /* Stacked detail list - label above value */
  .detail-list-stacked {
    & .detail-item {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-1);

      & dd {
        text-align: start;
      }
    }
  }

  /* ==========================================================================
     Settings Container & Cards
     ========================================================================== */

  .settings-container {
    min-block-size: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
  }

  /* Settings page wrapper - centers content within page-container */
  .settings-page {
    display: flex;
    justify-content: center;
    padding-block-start: var(--space-8);
  }

  .settings-card {
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
    padding: var(--space-8);
    inline-size: 100%;
    max-inline-size: var(--max-width-lg);
  }

  .settings-header {
    margin-block-end: var(--space-6);

    & h1 {
      font-size: var(--text-2xl);
      font-weight: var(--font-bold);
      text-transform: uppercase;
      letter-spacing: 0.025em;
      margin-block-end: var(--space-2);
    }

    & p {
      color: var(--color-ink-muted);
    }
  }

  /* ==========================================================================
     Stepper / Progress Steps
     ========================================================================== */

  .stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-6);
  }

  .stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;

    & .step-number {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--space-8);
      height: var(--space-8);
      font-weight: var(--font-bold);
      font-size: var(--text-sm);
      border: var(--border-thick) solid var(--color-comic-border);
      background: var(--color-surface);
      box-shadow: 2px 2px 0 var(--comic-shadow-color);
    }

    & .step-label {
      margin-block-start: var(--space-1);
      font-size: var(--text-xs);
      font-weight: var(--font-bold);
      color: var(--color-ink-muted);
    }

    &.step-complete .step-number {
      background: var(--color-boom-green);
      color: white;
    }

    &.step-current .step-number {
      background: var(--color-wham-blue);
      color: white;
    }
  }

  .stepper-connector {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    margin-inline: var(--space-2);

    &.connector-complete {
      background: var(--color-boom-green);
    }
  }

  /* ==========================================================================
     Timeline
     ========================================================================== */

  .timeline {
    display: flex;
    flex-direction: column;
  }

  .timeline-item {
    display: flex;
    gap: var(--space-3);

    &:hover .timeline-dot {
      transform: scale(1.3);
    }
  }

  .timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .timeline-dot {
    padding: var(--space-1_5);
    border: var(--border-thin) solid var(--color-comic-border);
    transition: transform 0.2s ease;

    &.dot-green {
      background: var(--color-boom-green);
    }

    &.dot-blue {
      background: var(--color-wham-blue);
    }

    &.dot-yellow {
      background: var(--color-zap-yellow);
    }

    &.dot-pink {
      background: var(--color-kapow-pink);
    }
  }

  .timeline-line {
    width: 2px;
    flex: 1;
    min-height: var(--space-8);
    background: var(--color-border);
  }

  .timeline-content {
    padding-block-end: var(--space-4);

    & .timeline-title {
      font-weight: var(--font-bold);
      font-size: var(--text-sm);
    }

    & .timeline-time {
      font-size: var(--text-xs);
      color: var(--color-ink-muted);
    }
  }

  /* ==========================================================================
     Accordion
     ========================================================================== */

  .accordion {
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
    background: var(--color-surface);
  }

  .accordion-item {
    &:not(:first-child) {
      border-block-start: var(--border-thick) solid var(--color-comic-border);
    }
  }

  .accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;

    &:hover {
      background-color: light-dark(#FEF3C7, #374151);
    }

    & .accordion-icon {
      transition: transform 0.2s ease;
    }

    &[aria-expanded="true"] .accordion-icon {
      transform: rotate(180deg);
    }
  }

  .accordion-content {
    padding: 0 var(--space-3) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  /* ==========================================================================
     Tooltips
     ========================================================================== */

  .tooltip {
    position: relative;
    display: inline-block;
  }

  .tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--color-ink);
    color: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border: var(--border-thin) solid var(--color-comic-border);
    white-space: nowrap;
    box-shadow: 2px 2px 0 var(--comic-shadow-color);
    z-index: 50;

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 4px solid transparent;
      border-top-color: var(--color-ink);
    }
  }

  /* ==========================================================================
     Dropdown Menus
     ========================================================================== */

  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--space-2);
    min-width: 160px;
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-sm);
    z-index: 40;
  }

  .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    color: var(--color-ink);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.1s ease, padding-left 0.1s ease;

    &:hover {
      background-color: light-dark(#FEF3C7, #374151);
      padding-left: var(--space-4);
    }

    &.dropdown-item-danger:hover {
      color: var(--color-pow-red);
    }
  }

  /* ==========================================================================
     View Toggle (Grid/List)
     ========================================================================== */

  .view-toggle {
    display: flex;
    border: var(--border-thick) solid var(--color-comic-border);
  }

  .view-toggle-btn {
    padding: var(--space-1_5);
    background: var(--color-surface);
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;

    &:not(:last-child) {
      border-inline-end: var(--border-thick) solid var(--color-comic-border);
    }

    &:hover:not(.view-toggle-active) {
      background-color: var(--color-border-muted);
    }

    &.view-toggle-active {
      background: var(--color-wham-blue);
      color: white;
    }
  }

  /* ==========================================================================
     Modal / Dialog - Pop Art Style
     ========================================================================== */

  /* Modal overlay - covers entire screen */
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
  }

  .modal-overlay[hidden] {
    display: none;
  }

  /* Backdrop - semi-transparent background */
  .modal-backdrop {
    position: absolute;
    inset: 0;
    background: oklch(0 0 0 / 0.6);
    animation: modal-fade-in 0.2s ease;
  }

  @keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Modal box */
  .modal {
    position: relative;
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-lg);
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    animation: modal-pop-in 0.25s ease;
  }

  /* Size variants */
  .modal-sm { max-width: 360px; }
  .modal-md { max-width: 480px; }
  .modal-lg { max-width: 640px; }

  @keyframes modal-pop-in {
    from {
      opacity: 0;
      transform: scale(0.9) translateY(-10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  /* Modal header with title */
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-kapow-pink);
    color: white;
    border-block-end: var(--border-thick) solid var(--color-comic-border);

    & h3 {
      font-family: var(--font-display);
      font-weight: normal;
      font-size: var(--text-lg);
      letter-spacing: 0.025em;
      text-transform: uppercase;
      margin: 0;
    }

    & .modal-close {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-1);
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      transition: transform 0.15s ease;

      &:hover {
        transform: rotate(90deg);
      }
    }
  }

  /* Floating close button (when no header) */
  .modal-close-floating {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--color-pow-red);
    color: white;
    border: var(--border-thin) solid var(--color-comic-border);
    box-shadow: 2px 2px 0 var(--comic-shadow-color);
    cursor: pointer;
    transition: all 0.15s ease;

    &:hover {
      transform: translate(-1px, -1px);
      box-shadow: 3px 3px 0 var(--comic-shadow-color);
    }

    &:active {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0 var(--comic-shadow-color);
    }
  }

  /* Modal body */
  .modal-body {
    padding: var(--space-4);
  }

  /* Modal footer actions */
  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4);
    padding-block-start: 0;
  }

  /* Modal footer with border */
  .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4);
    border-block-start: var(--border-thin) solid var(--color-comic-border);
  }
}