@layer c4-linear-base, c4-linear-components;

@layer c4-linear-base {
  body.c4-body.c4-linear {
    background: var(--c4-bg, #f8f9fb);
    color: var(--c4-text, #0f172a);
  }

  .c4-linear .c4-page {
    width: min(1200px, 100% - 2rem);
    margin-inline: auto;
    padding: 1.5rem 0 2.25rem;
  }

  .c4-linear .c4-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border: 1px solid var(--c4-border, #dfe4ea);
    border-radius: 12px;
    background: var(--c4-surface, #ffffff);
    box-shadow: var(--c4-shadow, 0 4px 14px rgba(15, 23, 42, 0.06));
    padding: 1rem 1.1rem;
  }

  .c4-linear .c4-hero h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--c4-text, #0f172a);
  }

  .c4-linear .c4-hero p {
    margin: 0.35rem 0 0;
    color: var(--c4-text-muted, #475569);
  }
}

@layer c4-linear-components {
  .c4-linear .c4-card,
  .c4-linear .c4-panel,
  .c4-linear .c4-view-shell,
  .c4-linear .c4-group,
  .c4-linear .c4-search,
  .c4-linear .c4-builder-head,
  .c4-linear .c4-table-wrap,
  .c4-linear .c4-toolbar,
  .c4-linear .c4-filters,
  .c4-linear .c4-finish,
  .c4-linear .c4-add-cards-modal__dialog {
    border: 1px solid var(--c4-border, #dfe4ea) !important;
    border-radius: 12px;
    background: var(--c4-surface, #ffffff) !important;
    box-shadow: var(--c4-shadow, 0 4px 14px rgba(15, 23, 42, 0.06)) !important;
    color: var(--c4-text, #0f172a) !important;
  }

  .c4-linear .c4-card,
  .c4-linear .c4-panel,
  .c4-linear .c4-table-wrap,
  .c4-linear .c4-toolbar,
  .c4-linear .c4-filters,
  .c4-linear .c4-finish {
    padding: 0.8rem;
  }

  .c4-linear .c4-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .c4-linear .c4-table th {
    background: var(--c4-surface-2, #f8fafc) !important;
    color: var(--c4-text-muted, #334155) !important;
    border-bottom: 1px solid var(--c4-border, #e5e7eb) !important;
  }

  .c4-linear .c4-table td {
    color: var(--c4-text, #0f172a) !important;
    border-bottom: 1px solid var(--c4-border, #eef2f7) !important;
    background: var(--c4-surface, #ffffff);
  }

  .c4-linear .c4-table tr:hover td {
    background: var(--c4-surface-2, #f8fbff) !important;
  }

  .c4-linear .c4-card-name {
    color: var(--c4-text, #111827) !important;
  }

  .c4-linear .c4-sub,
  .c4-linear .c4-card-meta,
  .c4-linear .c4-count {
    color: var(--c4-text-muted, #64748b) !important;
  }

  .c4-linear .c4-tab {
    border: 1px solid var(--c4-border-strong, #cfd8e3);
    background: var(--c4-surface, #ffffff);
    color: var(--c4-text-muted, #334155);
    box-shadow: var(--c4-shadow, 0 2px 10px rgba(15, 23, 42, 0.06));
  }

  .c4-linear .c4-tab.active {
    border-color: transparent !important;
    background: var(--brand-primary, #4b0082) !important;
    color: #ffffff !important;
    box-shadow:
      var(--c4-shadow, 0 6px 14px rgba(15, 23, 42, 0.22)),
      0 0 0 1px var(--c4-glow-soft, rgba(75,0,130,.18)) !important;
  }

  .c4-linear .c4-empty {
    border: 1px dashed var(--c4-border-strong, #cbd5e1) !important;
    border-radius: 10px;
    background: var(--c4-surface-2, #f8fafc) !important;
    color: var(--c4-text-muted, #64748b) !important;
  }

  .c4-linear .c4-infinite-scroll__status {
    color: var(--c4-text-muted, #334155);
    font-weight: 650;
  }

  .c4-linear .filter-dropdown {
    position: relative;
  }

  .c4-linear .filter-dropdown__button {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
  }

  .c4-linear .filter-dropdown__button::after {
    content: "v";
    font-size: 0.8rem;
    opacity: 0.8;
  }

  .c4-linear .filter-dropdown__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: min(340px, 88vw);
    max-height: 300px;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--c4-border-strong, #c6d5ef);
    border-radius: 10px;
    background: var(--c4-surface-2, #ffffff);
    box-shadow: var(--c4-shadow, 0 12px 26px rgba(12, 22, 40, 0.15));
    z-index: 40;
  }

  .c4-linear .filter-dropdown__search {
    margin-bottom: 8px;
  }

  .c4-linear .filter-dropdown__any {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-primary, #4b0082);
    margin: 2px 0 8px;
  }

  .c4-linear .filter-dropdown__option {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--c4-border, #e0e7f6);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--c4-text, #0f172a);
    background: var(--c4-surface-3, #fbfdff);
  }

  .c4-linear .filter-dropdown__option .badge {
    margin-left: auto;
    background: var(--brand-overlay, rgba(75,0,130,.08));
    color: var(--brand-primary, #4b0082);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
  }

  .c4-linear .selected-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .c4-linear .selected-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid var(--brand-focus, #7c3aed);
    background: var(--brand-overlay, rgba(75,0,130,.08));
    color: var(--brand-primary, #4b0082);
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1;
  }

  .c4-linear .selected-filter-chip button {
    border: 0;
    background: transparent;
    color: var(--brand-primary, #4b0082);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }

  .c4-linear .selected-filter-clear {
    border-radius: 999px;
    border: 1px solid var(--c4-border-strong, #e6b8be);
    background: var(--c4-surface-2, #fff0f2);
    color: #8b1f2a;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
  }

  .c4-linear .c4-result-card:hover,
  .c4-linear .c4-row:hover,
  .c4-linear .c4-row:focus-visible,
  .c4-linear .c4-deck-row:hover,
  .c4-linear .c4-deck-row:focus-visible,
  .c4-linear .c4-add-cards-modal__card:hover,
  .c4-linear .c4-add-cards-modal__card.selected {
    border-color: var(--brand-focus, #7c3aed) !important;
    box-shadow:
      var(--c4-shadow, 0 8px 18px rgba(15, 23, 42, 0.12)),
      0 0 0 1px var(--brand-focus, #7c3aed) !important;
  }

  .c4-linear .c4-add-cards-modal__search {
    background: var(--c4-surface-2, #f8fafc);
    border-bottom-color: var(--c4-border, #e2e8f0);
  }

  @media (max-width: 720px) {
    .c4-linear .c4-page {
      width: min(1200px, 100% - 1rem);
      padding-top: 1rem;
    }
  }
}