@layer components {
  /* ==========================================================================
   * Templates — redesign shell.
   *
   * Supports:
   *   - Templates index (project & task lists)
   *   - Project / task template show header
   *   - Work Items tab (tree-table + inline edit)
   * ========================================================================== */

  /* ---------- Index: archive toggle ---------- */
  .rd-archive-toggle {
    cursor: pointer;
    font-size: var(--rd-text-sm);
  }
  .rd-archive-toggle input[type="checkbox"] {
    accent-color: var(--rd-accent);
  }

  /* ---------- Index: template list rows ---------- */
  .rd-template-list {
    display: flex;
    flex-direction: column;
  }

  .rd-template-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--rd-border);
    color: inherit;
    text-decoration: none;
    transition: background var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-template-row:first-child {
    border-top: 0;
  }
  .rd-template-row:hover {
    background: var(--rd-bg-hover);
  }
  .rd-template-row.is-archived {
    opacity: 0.65;
  }

  .rd-template-row-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rd-radius-md);
    background: var(--rd-accent-soft);
    color: var(--rd-accent);
  }
  .rd-template-row-icon-task {
    background: color-mix(in oklch, var(--rd-accent) 18%, transparent);
  }
  .rd-template-row-icon-project {
    background: color-mix(in oklch, var(--rd-success) 22%, transparent);
    color: var(--rd-success);
  }

  .rd-template-row-body {
    flex: 1;
    min-width: 0;
  }
  .rd-template-row-title {
    font-weight: 600;
    font-size: var(--rd-text-sm);
    color: var(--rd-fg);
    line-height: 1.3;
  }
  .rd-template-row-desc {
    font-size: var(--rd-text-xs);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rd-template-row-meta {
    gap: 6px;
    flex-shrink: 0;
    font-size: var(--rd-text-xs);
  }
  .rd-template-row-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }

  /* ---------- Statuses tab rows ---------- */
  .rd-status-list {
    display: flex;
    flex-direction: column;
  }
  .rd-status-row {
    border-top: 1px solid var(--rd-border);
  }
  .rd-status-row:first-child {
    border-top: 0;
  }
  .rd-status-row-display,
  .rd-status-row-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
  }
  .rd-status-row-drag {
    color: var(--rd-fg-subtle);
    cursor: grab;
    display: inline-flex;
  }
  .rd-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rd-fg-subtle);
    flex-shrink: 0;
  }
  .rd-status-dot-gray   { background: oklch(0.70 0.01 250); }
  .rd-status-dot-red    { background: oklch(0.63 0.22 25); }
  .rd-status-dot-orange { background: oklch(0.72 0.18 55); }
  .rd-status-dot-yellow { background: oklch(0.85 0.16 90); }
  .rd-status-dot-green  { background: oklch(0.68 0.17 155); }
  .rd-status-dot-blue   { background: oklch(0.60 0.17 250); }
  .rd-status-dot-purple { background: oklch(0.60 0.20 310); }
  .rd-status-dot-pink   { background: oklch(0.67 0.20 350); }

  .rd-status-row-name {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--rd-text-sm);
    color: var(--rd-fg);
  }
  .rd-status-row-count {
    font-size: var(--rd-text-xs);
    flex-shrink: 0;
  }
  .rd-status-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .rd-status-row-fields {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
  }

  /* ---------- Template-item detail panel ---------- */
  .wi-detail-panel {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .wi-detail-panel .wi-detail-title {
    margin: 0;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-text-lg);
    font-weight: 600;
    color: var(--rd-fg);
  }
  .wi-detail-section {
    border-top: 1px solid var(--rd-border);
    padding-top: 12px;
  }
  .wi-detail-section:first-of-type {
    border-top: 0;
    padding-top: 0;
  }
  .wi-detail-section-title {
    margin: 0 0 8px;
    font-family: var(--rd-font-sans);
    font-size: var(--rd-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rd-fg-muted);
    font-weight: 600;
  }
  .wi-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .wi-detail-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--rd-text-sm);
    color: var(--rd-fg);
  }

  /* ---------- Todolists section ---------- */
  .rd-todolist-list {
    display: flex;
    flex-direction: column;
  }
  .rd-todolist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid var(--rd-border);
    font-size: var(--rd-text-sm);
  }
  .rd-todolist-row:first-child {
    border-top: 0;
  }
  .rd-todolist-row:hover {
    background: var(--rd-bg-hover);
  }
  .rd-todolist-icon {
    color: var(--rd-fg-subtle);
    display: inline-flex;
  }
  .rd-todolist-name {
    flex: 1;
    min-width: 0;
    color: var(--rd-fg);
  }
  .rd-todolist-count {
    font-size: var(--rd-text-xs);
  }
  .rd-todolist-new {
    padding: 10px 14px;
    border-top: 1px solid var(--rd-border);
  }

  /* ---------- Show header breadcrumb ---------- */
  .rd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--rd-text-xs);
    color: var(--rd-fg-muted);
    margin-bottom: 8px;
  }
  .rd-breadcrumb a {
    color: inherit;
    text-decoration: none;
  }
  .rd-breadcrumb a:hover {
    color: var(--rd-accent);
  }
  .rd-breadcrumb-sep {
    color: var(--rd-fg-subtle);
  }

  /* ---------- Overview tab: Quick actions list ---------- */
  .rd-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .rd-action-list li {
    border-top: 1px solid var(--rd-border);
  }
  .rd-action-list li:first-child {
    border-top: 0;
  }
  .rd-action-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--rd-fg);
    text-decoration: none;
    font-size: var(--rd-text-sm);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-action-link:hover {
    background: var(--rd-bg-hover);
    color: var(--rd-accent);
  }
  .rd-action-link svg {
    color: var(--rd-fg-muted);
    flex: 0 0 auto;
  }
  .rd-action-link:hover svg {
    color: var(--rd-accent);
  }
  .rd-action-form {
    margin: 0;
    display: block;
  }
}