/* ═══════════════════════════════════════════════════════════════
   RecipeBrowserPage  (rb__)
   BEM prefix: rb__
   Route: /recipe/recipe-browser-page
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.rb__ {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    height: 100%;
    overflow: hidden;
    color: var(--slm-color-text-primary);
    background: var(--v2-panel-bg);
}

/* ── Header row ── */
.rb__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.rb__header h1 {
    margin: 0;
    font-size: 1.4rem;
    line-height: 2rem;
    white-space: nowrap;
}

.rb__header-spacer {
    flex: 1 1 auto;
}

/* ── Error display ── */
.rb__error {
    border: 1px solid #dc3545;
    background: #fff5f5;
    color: #dc3545;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    white-space: pre-wrap;
    font-size: 0.9rem;
}

/* ── Main 2-column layout (tree + grid) ── */
.rb__layout {
    display: flex;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ── Left panel: category tree ── */
.rb__tree {
    flex: 0 0 260px;
    min-width: 200px;
    overflow-y: auto;
    border-right: 1px solid var(--slm-color-border);
    padding-right: 0.5rem;
}

.rb__tree-selection {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
    background: rgba(79,163,255,0.15);
    border: 1px solid var(--slm-color-accent);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--slm-color-accent);
}

/* ── Right panel: recipe grid + controls + detail ── */
.rb__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
}

/* ── Controls row (search, filters) ── */
.rb__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.rb__controls-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

/* ── Recipe grid table ── */
.rb__grid {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.rb__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

.rb__table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.rb__table th {
    background: var(--slm-color-surface);
    padding: 4px 8px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--slm-color-border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.rb__table th:hover {
    background: rgba(128,128,128,0.1);
}

.rb__table td {
    padding: 3px 8px;
    border-bottom: 1px solid var(--slm-color-border);
    vertical-align: middle;
}

.rb__table tr {
    cursor: pointer;
}

.rb__table tr:hover td {
    background: rgba(128,128,128,0.1);
}

.rb__table tr.rb__row--selected td {
    background: rgba(79,163,255,0.15);
}

.rb__sort-glyph {
    margin-left: 4px;
    font-size: 0.8rem;
}

.rb__fav-icon {
    color: #e8a100;
}

.rb__time-cell {
    white-space: nowrap;
}

/* ── Detail panel (selected recipe) ── */
.rb__detail {
    border: 1px solid var(--slm-color-border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    background: var(--slm-color-surface);
}

.rb__detail-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.rb__detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.9rem;
    color: var(--slm-color-text-muted);
}

.rb__detail-meta span {
    white-space: nowrap;
}

/* ── Children panels (ingredients + steps) ── */
.rb__children {
    display: flex;
    gap: 0.75rem;
    min-height: 0;
    overflow: hidden;
}

.rb__ing-panel,
.rb__step-panel {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
    max-height: 250px;
}

.rb__child-header {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--slm-color-border);
}

.rb__child-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.rb__child-table th {
    text-align: left;
    font-weight: 600;
    padding: 2px 6px;
    border-bottom: 1px solid var(--slm-color-border);
    background: var(--slm-color-surface);
}

.rb__child-table td {
    padding: 2px 6px;
    border-bottom: 1px solid var(--slm-color-border);
}

.rb__qty-cell {
    text-align: right;
    white-space: nowrap;
    width: 60px;
}

.rb__unit-cell {
    white-space: nowrap;
    width: 60px;
}

.rb__step-num {
    text-align: center;
    width: 30px;
    font-weight: 600;
    color: var(--slm-color-text-muted);
}

/* ── Loading / empty states ── */
.rb__loading {
    padding: 1rem;
    color: var(--slm-color-text-muted);
}

.rb__empty {
    padding: 1rem;
    color: var(--slm-color-text-muted);
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════
   RecipeEditorPage  (re__)
   BEM prefix: re__
   Route: /recipe/recipe-editor-page
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.re__ {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    max-width: 960px;
    color: var(--slm-color-text-primary);
    background: var(--v2-panel-bg);
}

/* ── Header row ── */
.re__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.re__header h1 {
    margin: 0;
    font-size: 1.4rem;
    line-height: 2rem;
    white-space: nowrap;
}

.re__header-spacer {
    flex: 1 1 auto;
}

/* ── Error display ── */
.re__error {
    border: 2px solid var(--v2-danger, #dc3545);
    color: var(--v2-danger, #dc3545);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    white-space: pre-wrap;
    font-size: 0.9rem;
    background: var(--v2-panel-bg, #fff5f5);
}

.re__loading {
    padding: 1rem;
    color: var(--slm-color-text-muted);
}

/* ── Recipe fields layout ── */
.re__fields {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.re__fields-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

/* V3 fields use InnerTextMinWidth parameter for sizing -- no page-level width overrides needed */

/* ── Section container (Notes, Ingredients, Steps) ── */
.re__section {
    border: 1px solid var(--slm-color-border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    background: var(--slm-color-surface);
}

.re__section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--slm-color-border);
    margin-bottom: 0.35rem;
}

.re__hint {
    font-size: 0.8rem;
    font-weight: 400;
    font-style: italic;
    color: var(--slm-color-text-muted);
}

/* ── Save prompt (new recipe, before ingredients) ── */
.re__save-prompt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 2px dashed var(--slm-color-border);
    border-radius: 4px;
    background: var(--slm-color-surface);
}

/* ── Child tables (ingredients, steps) ── */
.re__child-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.re__child-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.re__child-table th {
    background: var(--slm-color-surface);
    padding: 3px 6px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--slm-color-border);
    white-space: nowrap;
}

.re__child-table td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--slm-color-border);
    vertical-align: middle;
}

.re__child-table tr:hover td {
    background: rgba(128,128,128,0.1);
}

.re__qty-col {
    text-align: right;
    white-space: nowrap;
    width: 60px;
}

.re__unit-col {
    white-space: nowrap;
    width: 60px;
}

.re__step-num {
    text-align: center;
    width: 30px;
    font-weight: 600;
    color: var(--slm-color-text-muted);
}

.re__dur-col {
    white-space: nowrap;
    width: 60px;
}

.re__ord-col {
    text-align: center;
    width: 50px;
    color: var(--slm-color-text-muted);
}

.re__act-col {
    white-space: nowrap;
    width: 60px;
    text-align: right;
}

.re__step-desc {
    font-size: 0.8rem;
    color: var(--slm-color-text-muted);
}

/* ── Inline edit form ── */
.re__inline-form {
    border: 1px solid var(--slm-color-border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.35rem;
    background: var(--v2-panel-bg);
}

.re__inline-title {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.re__inline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.re__inline-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.re__step-html {
    margin-top: 0.35rem;
}