/* ─── Design tokens ──────────────────────────────────────────────────────── */
:root {
    --color-bg:            #0c0f14;
    --color-surface:       #141920;
    --color-surface-2:     #1a2130;
    --color-surface-input: #080b0f;
    --color-border:        #252e3d;
    --color-divider:       #1c2535;

    --color-text:          #d0dae8;
    --color-text-muted:    #6e7f96;
    --color-text-faint:    #37485c;

    --color-primary:       #1fa393;
    --color-primary-hover: #178476;
    --color-primary-dim:   #0d6358;
    --color-primary-glow:  rgba(31,163,147,0.12);
    --color-primary-text:  #05110f;

    --color-secondary-bg:    #1a2030;
    --color-secondary-hover: #212840;
    --color-secondary-text:  #8a9fb8;

    --color-error:   #e06060;
    --color-success: #3a9e6e;

    --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
    --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
    --space-8: 2rem;

    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
    --ease-ui:    180ms cubic-bezier(0.16,1,0.3,1);

    --side-nav-width:  60px;
    --filter-col-width:160px;
    --topbar-height:   54px;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body {
    font-family:'Satoshi','Segoe UI',system-ui,sans-serif;
    font-size:0.9375rem; line-height:1.55;
    color:var(--color-text); background:var(--color-bg); min-height:100dvh;
}
img  { display:block; max-width:100%; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; }
:focus-visible {
    outline:2px solid var(--color-primary);
    outline-offset:3px; border-radius:var(--radius-sm);
}

/* ─── Skip link ──────────────────────────────────────────────────────────── */
.skip-link {
    position:absolute; left:-9999px; top:var(--space-2);
    background:var(--color-surface); color:var(--color-primary);
    padding:var(--space-2) var(--space-4); border-radius:var(--radius-sm);
    z-index:100; font-weight:600;
}
.skip-link:focus { left:var(--space-4); }

/* ─── App shell grid ─────────────────────────────────────────────────────── */
/*
  Full layout for the catalog page (with filter column):
    Column 1: icon rail (60px)
    Column 2: filter sidebar (160px)
    Column 3: main content (rest)
    Row 1: topbar — spans columns 2+3 (does NOT overlap the rail)
    Row 2: filter + content

  "simple" layout for pages without a filter sidebar:
    Column 1: icon rail
    Column 2: main content
    Row 1: topbar — spans column 2 only
    Row 2: content
*/
.app-shell {
    display:grid;
    grid-template-columns: var(--side-nav-width) var(--filter-col-width) 1fr;
    grid-template-rows:    var(--topbar-height) 1fr;
    grid-template-areas:
        "sidenav topbar  topbar"
        "sidenav filter  content";
    height:100dvh;
    overflow:hidden;
}

.app-shell--simple {
    grid-template-columns: var(--side-nav-width) 1fr;
    grid-template-areas:
        "sidenav topbar"
        "sidenav content";
}

#side-nav     { grid-area: sidenav; }
.topbar       { grid-area: topbar;  }
#filter-col   { grid-area: filter;  }
.content-area { grid-area: content; }

/* ─── Icon rail ──────────────────────────────────────────────────────────── */
#side-nav {
    background:var(--color-surface);
    border-right:1px solid var(--color-border);
    display:flex; flex-direction:column; align-items:center;
    padding-top:var(--space-4); gap:var(--space-2); overflow:hidden;
    /* Rail height spans the full viewport, independent of topbar */
    grid-row: 1 / -1;
}

.logo-mark {
    color:var(--color-primary);
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; margin-bottom:var(--space-3);
}

#side-nav nav {
    display:flex; flex-direction:column; align-items:center;
    gap:var(--space-1); width:100%; padding:0 var(--space-2);
}

.nav-item {
    position:relative;
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:var(--radius-md);
    color:var(--color-text-muted); text-decoration:none;
    transition:background var(--ease-ui), color var(--ease-ui);
}
.nav-item:hover  { background:var(--color-surface-2); color:var(--color-text); }
.nav-item.active { background:var(--color-primary-glow); color:var(--color-primary); }

/* Tooltip label on hover */
.nav-item::after {
    content:attr(data-label);
    position:absolute; left:calc(100% + 10px); top:50%;
    transform:translateY(-50%);
    background:var(--color-surface-2); color:var(--color-text);
    font-size:0.8rem; font-weight:600; white-space:nowrap;
    padding:var(--space-1) var(--space-3);
    border-radius:var(--radius-sm); border:1px solid var(--color-border);
    pointer-events:none; opacity:0;
    transition:opacity var(--ease-ui); z-index:50;
}
.nav-item:hover::after { opacity:1; }

/* ─── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 var(--space-6);
    background:var(--color-surface); border-bottom:1px solid var(--color-border);
}
.topbar h1 { font-size:1rem; font-weight:700; letter-spacing:0.01em; }

.topbar-user {
    display:flex; align-items:center; gap:var(--space-2); flex-shrink:0;
}
.topbar-username {
    font-size:0.8125rem; font-weight:600; color:var(--color-text-muted);
}
.role-badge {
    font-size:0.6875rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.06em; padding:2px var(--space-2); border-radius:var(--radius-sm);
}
.role-badge--admin {
    background:rgba(31,163,147,0.15); color:var(--color-primary);
    border:1px solid var(--color-primary-dim);
}
.role-badge--user {
    background:rgba(110,127,150,0.15); color:var(--color-text-muted);
    border:1px solid var(--color-border);
}

/* ─── Logout nav item ────────────────────────────────────────────────────── */
.nav-spacer { flex:1; }

.nav-item--logout {
    margin-bottom:var(--space-4);
}
.nav-item--logout:hover { color:var(--color-error); background:rgba(224,96,96,0.08); }

/* ─── Filter sidebar ─────────────────────────────────────────────────────── */
#filter-col {
    background:var(--color-surface); border-right:1px solid var(--color-border);
    overflow-y:auto; padding:var(--space-4) var(--space-3);
}
.filter-panel   { display:flex; flex-direction:column; gap:var(--space-3); }
.filter-title   {
    font-size:0.75rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.07em; color:var(--color-text-muted);
    padding-bottom:var(--space-3); border-bottom:1px solid var(--color-border);
}
.filter-field   { display:flex; flex-direction:column; gap:var(--space-1); }
.filter-label   { font-size:0.75rem; font-weight:600; color:var(--color-text-muted); line-height:1.2; }

.filter-form input,
.filter-form select {
    width:100%; height:30px; padding:0 var(--space-2);
    background:var(--color-surface-input); border:1px solid var(--color-border);
    border-radius:var(--radius-sm); color:var(--color-text); font-size:0.8rem;
    transition:border-color var(--ease-ui), box-shadow var(--ease-ui);
    -moz-appearance:textfield;
}
.filter-form input::-webkit-outer-spin-button,
.filter-form input::-webkit-inner-spin-button { -webkit-appearance:none; }
.filter-form input:focus,
.filter-form select:focus {
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px var(--color-primary-glow); outline:none;
}
.filter-form input::placeholder { color:var(--color-text-faint); }
.filter-actions {
    display:flex; flex-direction:column; gap:var(--space-2);
    padding-top:var(--space-2); padding-bottom:var(--space-3);
    border-top:1px solid var(--color-border);
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display:flex; align-items:center; justify-content:center;
    width:100%; height:32px; border-radius:var(--radius-sm);
    font-size:0.8375rem; font-weight:700; letter-spacing:0.02em;
    transition:background var(--ease-ui), color var(--ease-ui), border-color var(--ease-ui);
}
.btn-primary {
    background:var(--color-primary); color:var(--color-primary-text);
    border:2px solid var(--color-primary);
}
.btn-primary:hover { background:var(--color-primary-hover); border-color:var(--color-primary-hover); }
.btn-secondary {
    background:var(--color-secondary-bg); color:var(--color-secondary-text);
    border:2px solid var(--color-border);
}
.btn-secondary:hover {
    background:var(--color-secondary-hover);
    border-color:var(--color-text-faint); color:var(--color-text);
}

/* ─── Content area ───────────────────────────────────────────────────────── */
.content-area { overflow-y:auto; padding:var(--space-5); }

/* ─── Program cards ──────────────────────────────────────────────────────── */
.program-list { display:flex; flex-direction:column; gap:var(--space-2); }

.program-card {
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--radius-md); overflow:hidden;
    transition:border-color var(--ease-ui), box-shadow var(--ease-ui);
}
.program-card:hover { border-color:var(--color-primary-dim); box-shadow:var(--shadow-sm); }

.program-header {
    display:flex; align-items:center; gap:var(--space-2);
    padding:var(--space-3) var(--space-4);
}

.expand-btn {
    flex-shrink:0; width:24px; height:24px; border-radius:50%;
    border:1px solid var(--color-border); background:var(--color-surface-2);
    display:flex; align-items:center; justify-content:center; color:var(--color-primary);
    transition:background var(--ease-ui), border-color var(--ease-ui);
}
.expand-btn:hover { background:var(--color-primary-glow); border-color:var(--color-primary-dim); }
.expand-btn svg   { transition:transform var(--ease-ui); pointer-events:none; }
.program-card.open .expand-btn svg { transform:rotate(180deg); }

.program-name {
    flex:1; font-weight:600; font-size:0.9375rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.program-details {
    display:none; border-top:1px solid var(--color-divider);
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
}
.program-card.open .program-details {
  display: flex;
}
.program-image { width: 100%; max-width: 510px; overflow:hidden; border-radius: var(--radius-sm); }
.program-image img {
    width:100%; height:auto; min-height:170px; object-fit:cover; display:block;
}
.image-fallback {
    width:100%; min-height:170px; height:100%;
    background:var(--color-surface-2);
    display:flex; align-items:center; justify-content:center;
    color:var(--color-text-faint); font-size:0.82rem;
    text-align:center; padding:var(--space-4);
}

/* 2×2 detail grid — Type/Heating rate in left column, Tmax/Tmin in right */
.detail-grid {
    padding:var(--space-3) var(--space-4);
    display:grid; grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:auto auto auto;
    gap:var(--space-2); align-content:start; max-width:510px;
}

.detail-row {
    display:flex; flex-direction:column; gap:2px;
    padding:var(--space-2) var(--space-3);
    background:var(--color-surface-2); border-radius:var(--radius-sm);
    font-size:0.85rem;
}
.detail-label {
    color:var(--color-text-muted); font-weight:600;
    font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em;
}
.detail-value       { color:var(--color-text); text-align:left; font-variant-numeric:tabular-nums; }
.detail-value.num   { color:var(--color-text); font-weight:normal; font-variant-numeric:tabular-nums; }

.detail-row--type { grid-column:1; grid-row:1; }
.detail-row--rate { grid-column:2; grid-row:1; }
.detail-row--tmax { grid-column:1; grid-row:1; }
.detail-row--tmin { grid-column:2; grid-row:1; }
.detail-row--duration { grid-column:3; grid-row:1; }
.detail-row--deleteButton { grid-column:3; grid-row:2; }

/* Meta sections - Type/Rate and Tmax/Tmin/Duration rows */
.meta-section {
    display:grid; grid-template-columns:1fr 1fr 1fr;
    gap:var(--space-2); width:100%; max-width:510px;
}

/* Steps table */
.steps-table-wrapper {
    width:100%; max-width:510px;
}

.steps-table {
    width:100%; border-collapse:collapse;
    font-size:0.8rem; background:var(--color-surface);
    border:1px solid var(--color-border); border-radius:var(--radius-sm);
    overflow:hidden;
}

.steps-table th {
    background:var(--color-surface-2); text-align:left;
    padding:var(--space-2) var(--space-3);
    color:var(--color-text-muted); font-weight:600;
    font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em;
    border-bottom:1px solid var(--color-border);
}

.steps-table td {
    padding:var(--space-2) var(--space-3);
    border-bottom:1px solid var(--color-divider);
    color:var(--color-text); font-variant-numeric:tabular-nums;
}

.steps-table tr:last-child td {
    border-bottom:none;
}

/* Inline row for action buttons inside expanded card */
.card-actions {
    display:flex; flex-direction:row; gap:var(--space-2); align-items:center;
}

/* Action buttons (Edit/Delete) */
.btn-action {
    display:inline-flex; align-items:center; justify-content:center;
    width:70px; height:32px; padding:var(--space-1) var(--space-2);
    border-radius:var(--radius-sm);
    font-size:0.75 rem; font-weight:600;letter-spacing:0.02em;
    border:1px solid;
    transition:background var(--ease-ui), border-color var(--ease-ui), color var(--ease-ui);
    gap:var(--space-1);
    line-height:1;
}

.btn-edit {
    background:var(--color-primary); color:var(--color-primary-text);
    border-color:var(--color-primary);
    margin-right:var(--space-1);
}
.btn-edit:hover { background:var(--color-primary-hover); border-color:var(--color-primary-hover); }

.btn-delete {
    background:var(--color-error); color:#fff;
    border-color:var(--color-error);
}
.btn-delete:hover { background:rgba(224, 96, 96, 0.8); border-color:var(--color-error); }

/* Edit modal */
dialog.edit-modal {
    position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
    max-width:900px; width:90%; max-height:90vh;
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--radius-lg); padding:var(--space-6);
    overflow-y:auto; z-index:1000;
}

dialog.edit-modal::backdrop {
    background:rgba(0,0,0,0.5);
}

.edit-modal-content {
    display:flex; flex-direction:column; gap:var(--space-4);
}

.edit-modal-content h2 {
    font-size:1rem; font-weight:700; color:var(--color-text);
}

.edit-section {
    display:flex; flex-direction:column; gap:var(--space-2);
}

.edit-section label {
    color:var(--color-text-muted); font-weight:600; font-size:0.75rem;
    text-transform:uppercase; letter-spacing:0.04em;
}

.edit-section input,
.edit-section select {
    height:34px; padding:0 var(--space-3);
    background:var(--color-surface-input); border:1px solid var(--color-border);
    border-radius:var(--radius-sm); color:var(--color-text);
    font-size:0.875rem; transition:border-color var(--ease-ui);
}

.edit-section input:focus,
.edit-section select:focus {
    border-color:var(--color-primary);
    outline:none; box-shadow:0 0 0 3px var(--color-primary-glow);
}

.edit-step-rows {
    display:flex; flex-direction:column; gap:var(--space-2);
}

.step-row {
    display:grid; grid-template-columns:32px 100px 100px 100px 80px 32px;
    gap:var(--space-2); align-items:center;
    padding:var(--space-2); background:var(--color-surface-2);
    border-radius:var(--radius-sm); border:1px solid var(--color-border);
}

.step-row input,
.step-row select {
    height:30px; padding:0 var(--space-2);
    background:var(--color-surface-input); border:1px solid var(--color-border);
    border-radius:var(--radius-sm); font-size:0.8rem;
}

.step-number {
    display:flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:50%;
    background:var(--color-surface); border:1px solid var(--color-border);
    font-size:0.75rem; font-weight:700; color:var(--color-text-muted);
}

.btn-remove-step {
    display:flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%;
    border:1px solid var(--color-border); color:var(--color-text-faint);
    font-size:1rem; line-height:1;
    transition:background var(--ease-ui), color var(--ease-ui), border-color var(--ease-ui);
}

.btn-remove-step:hover {
    background:rgba(224, 96, 96, 0.12);
    border-color:var(--color-error); color:var(--color-error);
}

.btn-add-step {
    align-self:flex-start; height:34px; padding:0 var(--space-4);
    border-radius:var(--radius-sm); border:1px dashed var(--color-border);
    color:var(--color-text-muted); font-size:0.875rem; font-weight:600;
    transition:background var(--ease-ui), border-color var(--ease-ui), color var(--ease-ui);
}

.btn-add-step:hover {
    background:var(--color-primary-glow);
    border-color:var(--color-primary-dim); color:var(--color-primary);
}

.edit-actions {
    display:flex; gap:var(--space-3); padding-top:var(--space-4);
    border-top:1px solid var(--color-border);
}

.edit-actions .btn {
    flex:1; height:36px;
}

.empty-message {
    padding:var(--space-8) var(--space-6); color:var(--color-text-muted);
    font-size:0.9rem; text-align:center;
    border:1px dashed var(--color-border); border-radius:var(--radius-md); line-height:1.7;
}

/* ─── Favorites star button ──────────────────────────────────────────────── */
.fav-btn {
    flex-shrink:0; width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    border-radius:var(--radius-sm);
    font-size:1.1rem; line-height:1;
    color:var(--color-text-faint);
    transition:color var(--ease-ui), background var(--ease-ui);
}
.fav-btn:hover          { color:#f5a623; background:rgba(245,166,35,0.1); }
.fav-btn--active        { color:#f5a623; }
.fav-btn--active:hover  { color:#d08810; background:rgba(245,166,35,0.12); }

/* ─── Temperature range filter ───────────────────────────────────────────── */
.filter-temp-range {
    display:flex; align-items:center; gap:var(--space-1);
}
.filter-temp-range input {
    flex:1; min-width:0;
}
.filter-temp-dash {
    color:var(--color-text-muted); font-size:0.875rem; flex-shrink:0;
}

/* ─── Filter checkbox ────────────────────────────────────────────────────── */
.filter-check-label {
    display:flex; align-items:center; gap:var(--space-2);
    cursor:pointer; user-select:none;
}
.filter-check-label input[type="checkbox"] {
    width:14px; height:14px; cursor:pointer; accent-color:var(--color-primary);
}

/* ─── Admin page ─────────────────────────────────────────────────────────── */
.admin-wrap {
    display:flex; flex-direction:column; gap:var(--space-5);
    max-width:720px; padding:var(--space-5);
}
.admin-toolbar {
    display:flex; justify-content:flex-end;
}
.admin-new-btn {
    width:auto; padding:0 var(--space-5); height:34px;
}
.create-user-card {
    background:var(--color-surface-2); border:1px solid var(--color-border);
    border-radius:var(--radius-md); padding:var(--space-4) var(--space-5);
    display:flex; flex-direction:column; gap:var(--space-3);
}
.create-user-title {
    font-size:0.8125rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--color-text-muted);
}
.create-user-fields {
    display:flex; gap:var(--space-3); align-items:flex-end; flex-wrap:wrap;
}
.cu-field { display:flex; flex-direction:column; gap:var(--space-1); flex:1; min-width:120px; }
.cu-label { font-size:0.7rem; font-weight:600; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.04em; }
.cu-input {
    height:34px; padding:0 var(--space-3);
    background:var(--color-surface-input); border:1px solid var(--color-border);
    border-radius:var(--radius-sm); color:var(--color-text); font-size:0.875rem;
    transition:border-color var(--ease-ui);
}
.cu-input:focus { border-color:var(--color-primary); outline:none; box-shadow:0 0 0 3px var(--color-primary-glow); }
.cu-submit { width:auto; padding:0 var(--space-5); height:34px; flex-shrink:0; }
.admin-error {
    color:var(--color-error); font-size:0.8rem; padding:var(--space-2) var(--space-3);
    background:rgba(224,96,96,0.08); border-radius:var(--radius-sm);
    border:1px solid rgba(224,96,96,0.2);
}
.users-table {
    width:100%; border-collapse:collapse;
    font-size:0.875rem; background:var(--color-surface);
    border:1px solid var(--color-border); border-radius:var(--radius-md);
    overflow:hidden;
}
.users-table th {
    background:var(--color-surface-2); text-align:left;
    padding:var(--space-2) var(--space-4);
    color:var(--color-text-muted); font-weight:600;
    font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em;
    border-bottom:1px solid var(--color-border);
}
.users-table td {
    padding:var(--space-2) var(--space-4);
    border-bottom:1px solid var(--color-divider);
    vertical-align:middle;
}
.users-table tr:last-child td { border-bottom:none; }
.td-username { font-weight:600; }
.table-empty {
    text-align:center; color:var(--color-text-muted);
    padding:var(--space-6); font-size:0.875rem;
}
.role-select {
    height:30px; padding:0 var(--space-2);
    background:var(--color-surface-input); border:1px solid var(--color-border);
    border-radius:var(--radius-sm); color:var(--color-text); font-size:0.8rem;
    transition:border-color var(--ease-ui);
}
.role-select:focus { border-color:var(--color-primary); outline:none; box-shadow:0 0 0 3px var(--color-primary-glow); }
.btn-delete-user {
    height:28px; padding:0 var(--space-3);
    border-radius:var(--radius-sm); border:1px solid var(--color-error);
    background:transparent; color:var(--color-error);
    font-size:0.75rem; font-weight:600;
    transition:background var(--ease-ui), color var(--ease-ui);
}
.btn-delete-user:hover { background:var(--color-error); color:#fff; }
.btn-delete-user:disabled { opacity:0.35; cursor:not-allowed; }

/* ─── Materials table ────────────────────────────────────────────────────── */
.materials-search-bar {
    max-width:360px;
}
.materials-search-bar input {
    width:100%; height:34px; padding:0 var(--space-3);
}
.materials-table .td-check   { text-align:center; color:var(--color-primary); }
.materials-table .td-notes   { color:var(--color-text-muted); font-size:0.8rem; max-width:220px; }
.materials-table .td-actions { white-space:nowrap; display:flex; gap:var(--space-1); align-items:center; }

/* ─── Modal textarea ─────────────────────────────────────────────────────── */
.edit-section textarea {
    padding:var(--space-2) var(--space-3);
    background:var(--color-surface-input); border:1px solid var(--color-border);
    border-radius:var(--radius-sm); color:var(--color-text);
    font-size:0.875rem; resize:vertical; min-height:72px;
    transition:border-color var(--ease-ui);
}
.edit-section textarea:focus {
    border-color:var(--color-primary);
    outline:none; box-shadow:0 0 0 3px var(--color-primary-glow);
}
.mat-checks {
    display:flex; gap:var(--space-5); flex-direction:row; flex-wrap:wrap;
}

/* ─── Submit page ────────────────────────────────────────────────────────── */
.submit-wrap {
    display:flex; flex-direction:column; gap:var(--space-5);
    padding:var(--space-5); max-width:1200px;
}

.submit-header {
    padding-bottom:var(--space-4);
    border-bottom:1px solid var(--color-border);
}

/* Each sample row */
.sample-row {
    display:flex; align-items:flex-start; gap:var(--space-3);
    padding:var(--space-4);
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    position:relative;
}
.sample-row + .sample-row { margin-top:var(--space-2); }

.sample-row-inner {
    flex:1; display:grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap:var(--space-3);
}

.sample-field {
    display:flex; flex-direction:column; gap:var(--space-1);
    position:relative;
}
.sample-field--method { min-width:180px; }

.sample-field-label {
    font-size:0.72rem; font-weight:600; color:var(--color-text-muted);
    text-transform:uppercase; letter-spacing:0.04em;
}
.req-mark { color:var(--color-error); margin-left:1px; }

.sample-error {
    font-size:0.75rem; color:var(--color-error); margin-top:2px;
    line-height:1.3;
}

/* Remove row button */
.remove-sample-btn {
    flex-shrink:0; align-self:flex-start; margin-top:26px;
    width:28px; height:28px; border-radius:50%;
    border:1px solid var(--color-border); color:var(--color-text-faint);
    font-size:1.1rem; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:background var(--ease-ui), color var(--ease-ui), border-color var(--ease-ui);
}
.remove-sample-btn:hover:not(:disabled) {
    background:rgba(224,96,96,0.12);
    border-color:var(--color-error); color:var(--color-error);
}
.remove-sample-btn:disabled { opacity:0.3; cursor:not-allowed; }

/* Add row / submit buttons */
.submit-row-actions { display:flex; }
.btn-add-sample {
    height:34px; padding:0 var(--space-4);
    border-radius:var(--radius-sm); border:1px dashed var(--color-border);
    color:var(--color-text-muted); font-size:0.875rem; font-weight:600;
    transition:background var(--ease-ui), border-color var(--ease-ui), color var(--ease-ui);
}
.btn-add-sample:hover {
    background:var(--color-primary-glow);
    border-color:var(--color-primary-dim); color:var(--color-primary);
}

.submit-footer {
    display:flex; flex-direction:column; gap:var(--space-3);
    padding-top:var(--space-4); border-top:1px solid var(--color-border);
}
.submit-all-btn {
    width:auto; align-self:flex-start; padding:0 var(--space-6); height:38px;
}
.submit-all-btn:disabled { opacity:0.5; cursor:not-allowed; }

.submit-success-msg {
    font-size:0.875rem; color:var(--color-success); padding:var(--space-2) var(--space-3);
    background:rgba(58,158,110,0.1); border-radius:var(--radius-sm);
    border:1px solid rgba(58,158,110,0.25);
}

/* ─── Searchable method dropdown ─────────────────────────────────────────── */
.method-dropdown { position:relative; }

.method-dropdown-list {
    position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:200;
    background:var(--color-surface-2); border:1px solid var(--color-border);
    border-radius:var(--radius-sm); max-height:220px; overflow-y:auto;
    box-shadow:0 4px 16px rgba(0,0,0,0.4);
}

.method-item {
    padding:var(--space-2) var(--space-3);
    font-size:0.85rem; cursor:pointer; color:var(--color-text);
    transition:background var(--ease-ui);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.method-item:hover        { background:var(--color-primary-glow); color:var(--color-primary); }
.method-item--fav         { color:var(--color-text); }
.method-item--fav:hover   { background:rgba(245,166,35,0.12); color:#f5a623; }

.method-separator {
    height:1px; background:var(--color-border);
    margin:var(--space-1) 0;
}

.method-empty {
    padding:var(--space-3); font-size:0.8rem;
    color:var(--color-text-muted); text-align:center;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:700px) {
    .app-shell {
        grid-template-columns:var(--side-nav-width) 1fr;
        grid-template-rows:var(--topbar-height) auto 1fr;
        grid-template-areas:
            "sidenav topbar"
            "sidenav filter"
            "sidenav content";
    }
    #filter-col { border-right:none; border-bottom:1px solid var(--color-border); }
    .program-card.open .program-details { grid-template-columns:1fr; }
    .program-image { width: 100%; max-width: none; }
    .detail-grid { max-width:100%; }
    .meta-section { max-width:100%; }
    .steps-table-wrapper { max-width:100%; }
    .btn-delete { max-width:100%; }
}