/* ManajIt — Base CSS
   No hardcoded surface colours. Uses CSS custom properties for theming.
   Dark mode default, light mode via prefers-color-scheme or data-theme attribute. */

:root {
    --accent:           #4b8bd4;
    --accent-hover:     rgba(75, 139, 212, 0.25);
    --error:            #e35d4f;
    --warning:          #f27e3f;

    /* Dark theme defaults */
    --bg:               #383838;
    --bg-surface:       #404040;
    --bg-widget:        #2e2e2e;
    --bg-panel:         rgba(46, 46, 46, 0.4);
    --bg-sidebar:       rgba(64, 64, 64, 0.7);
    --text-primary:     #f0f0f0;
    --text-secondary:   #939393;
    --text-muted:       #c6c6c6;
    --border:           #1f1f1f;
    --border-soft:      #2e2e2e;
    --btn-bg:           #525252;
    --btn-hover:        #5c5c5c;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg:           #f5f5f5;
        --bg-surface:   #ffffff;
        --bg-widget:    #ebebeb;
        --bg-panel:     rgba(240, 240, 240, 0.85);
        --bg-sidebar:   rgba(232, 232, 232, 0.85);
        --text-primary: #1a1a1a;
        --text-secondary:#888888;
        --text-muted:   #444444;
        --border:       #d0d0d0;
        --border-soft:  #e0e0e0;
        --btn-bg:       #f0f0f0;
        --btn-hover:    #f4f4f4;
    }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.5;
}

/* ── Navigation ────────────────────────────────────────────────────────────── */
.topnav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    height: 48px;
    background: var(--bg-widget);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.topnav__brand {
    font-weight: 700;
    font-size: 16px;
    color: var(--accent);
    margin-right: 1rem;
}

.topnav__workspaces {
    display: flex;
    gap: 2px;
    flex: 1;
}

.ws-tab {
    padding: 6px 16px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.1s, color 0.1s;
}

.ws-tab:hover { background: var(--accent-hover); color: var(--text-primary); }
.ws-tab.active { background: var(--accent); color: #fff; }

.topnav__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 13px;
}

.topnav__actions a { color: var(--text-secondary); text-decoration: none; }
.topnav__actions a:hover { color: var(--text-primary); }

.btn-scan {
    background: var(--accent);
    color: #fff !important;
    padding: 4px 12px;
    border-radius: 4px;
}

/* ── Main content ──────────────────────────────────────────────────────────── */
.main-content {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn, button[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--btn-bg);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s;
}

.btn:hover, button[type="submit"]:hover { background: var(--btn-hover); }

.btn-primary, button[type="submit"].primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-primary:hover { background: #3a7ac0; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
label { display: block; margin-bottom: 1rem; font-size: 13px; color: var(--text-secondary); }
label input, label select, label textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 7px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 14px;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-hover);
}

/* ── Login ─────────────────────────────────────────────────────────────────── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-wrap { width: 320px; }
.login-wrap h1 { margin-bottom: 2rem; color: var(--accent); }
.login-wrap form { display: flex; flex-direction: column; gap: 0; }
.login-wrap button { margin-top: 1rem; width: 100%; justify-content: center; }

/* ── Notices ───────────────────────────────────────────────────────────────── */
.error  { color: var(--error); font-size: 13px; margin-bottom: 1rem; }
.notice { color: var(--accent); font-size: 13px; margin-bottom: 1rem; }

/* ── Dashboard ─────────────────────────────────────────────────────────────── */
.dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.dash-title  { font-size:22px; font-weight:600; }
.dash-actions { display:flex; gap:8px; }

.widget-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    gap:1rem;
}

.widget {
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:8px;
    padding:1rem;
}

.widget--alert  { border-color:var(--error); }
.widget--warning{ border-color:var(--warning); }

.widget-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:0.75rem;
}

.widget-title { font-size:13px; font-weight:600; text-transform:uppercase;
                letter-spacing:0.04em; color:var(--text-secondary); }
.widget-count { font-size:13px; font-weight:700; }
.widget-footer { margin-top:0.75rem; border-top:1px solid var(--border-soft); padding-top:0.5rem; }

/* ── Log list ──────────────────────────────────────────────────────────────── */
.log-list { list-style:none; }
.log-row  {
    display:flex; align-items:center; gap:8px;
    padding:6px 0; border-bottom:1px solid var(--border-soft);
    font-size:13px;
}
.log-row:last-child { border-bottom:none; }
.log-row--overdue { background:rgba(227,93,79,0.06); border-radius:4px; padding:6px 4px; }

.log-type-badge {
    font-size:10px; font-weight:700; text-transform:uppercase;
    padding:2px 6px; border-radius:3px; letter-spacing:0.04em;
    background:var(--bg-widget); flex-shrink:0;
}
.log-type--feed          { background:rgba(75,139,212,0.2); color:var(--accent); }
.log-type--water_change  { background:rgba(61,186,126,0.2); color:#3dba7e; }
.log-type--water_params  { background:rgba(61,186,126,0.15); color:#3dba7e; }
.log-type--treatment     { background:rgba(227,93,79,0.2); color:var(--error); }
.log-type--observation   { background:rgba(242,126,63,0.2); color:var(--warning); }
.log-type--maintenance   { background:rgba(147,147,147,0.2); color:var(--text-secondary); }

.log-note { flex:1; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.log-due  { font-size:11px; color:var(--text-muted); flex-shrink:0; }

.btn-complete {
    width:24px; height:24px; border-radius:50%;
    border:1px solid var(--border-soft);
    background:var(--bg-widget); color:var(--text-secondary);
    font-size:11px; cursor:pointer; display:flex; align-items:center;
    justify-content:center; flex-shrink:0; transition:all 0.1s;
}
.btn-complete:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.log-row.done .btn-complete { background:var(--accent); color:#fff; }

/* ── Calendar ──────────────────────────────────────────────────────────────── */
.cal-nav {
    display:flex; align-items:center; gap:8px; margin-bottom:1rem;
}
.cal-month-label { font-size:16px; font-weight:600; min-width:160px; text-align:center; }

.cal-month-grid {
    display:grid; grid-template-columns:repeat(7, 1fr);
    gap:2px; margin-bottom:1.5rem;
}

.cal-day-header {
    text-align:center; font-size:11px; font-weight:600;
    color:var(--text-muted); padding:6px 0; text-transform:uppercase;
}

.cal-cell {
    min-height:80px; background:var(--bg-surface);
    border:1px solid var(--border-soft); border-radius:4px;
    padding:4px; cursor:pointer; transition:background 0.1s;
}
.cal-cell:hover { background:var(--bg-widget); }
.cal-cell--empty { background:transparent; border-color:transparent; cursor:default; }
.cal-cell--today { border-color:var(--accent); }

.cal-day-num {
    font-size:12px; font-weight:600; color:var(--text-muted);
    margin-bottom:4px;
}
.cal-cell--today .cal-day-num { color:var(--accent); }

.cal-event {
    display:flex; align-items:center; gap:4px;
    font-size:10px; padding:2px 4px; border-radius:3px;
    margin-bottom:2px; text-decoration:none; color:var(--text-primary);
    background:var(--accent); color:#fff;
    overflow:hidden;
}
.cal-event--done    { background:var(--bg-widget); color:var(--text-muted); }
.cal-event--spawn   { background:rgba(61,186,126,0.7); }
.cal-event--project { background:rgba(242,126,63,0.7); }
.cal-event--note    { background:rgba(147,147,147,0.4); }
.cal-event-time { font-size:9px; opacity:0.8; flex-shrink:0; }
.cal-event-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cal-sidebar { margin-top:1rem; }
.sidebar-header { font-size:12px; font-weight:600; text-transform:uppercase;
                  color:var(--text-muted); margin-bottom:0.5rem; }

.upcoming-list { list-style:none; }
.upcoming-row {
    display:flex; align-items:center; gap:8px; padding:6px 0;
    border-bottom:1px solid var(--border-soft); font-size:13px;
}
.upcoming-date { color:var(--text-muted); font-size:12px; min-width:50px; }
.upcoming-time { color:var(--text-muted); font-size:12px; min-width:40px; }
.upcoming-name { flex:1; color:var(--text-primary); text-decoration:none; }
.upcoming-name:hover { color:var(--accent); }

/* ── Overdue banner ────────────────────────────────────────────────────────── */
.overdue-banner {
    background:rgba(227,93,79,0.1); border:1px solid rgba(227,93,79,0.3);
    border-radius:6px; padding:8px 12px; margin-bottom:1rem;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px;
}
.overdue-event { color:var(--error); text-decoration:none; }
.overdue-event:hover { text-decoration:underline; }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal {
    position:fixed; inset:0; display:flex;
    align-items:center; justify-content:center; z-index:200;
}
.modal-overlay {
    position:absolute; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(2px);
}
.modal-card {
    position:relative; background:var(--bg-surface);
    border:1px solid var(--border-soft); border-radius:10px;
    padding:1.5rem; width:100%; max-width:480px; max-height:90vh;
    overflow-y:auto; z-index:1;
}
.modal-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:1.25rem; font-size:16px; font-weight:600;
}
.modal-close {
    background:none; border:none; color:var(--text-muted);
    cursor:pointer; font-size:16px; padding:2px 6px;
}
.modal-close:hover { color:var(--text-primary); }

/* ── Location detail ───────────────────────────────────────────────────────── */
.location-detail-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }

.params-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
    gap:8px; margin-bottom:0.75rem;
}
.param { text-align:center; background:var(--bg-widget); border-radius:6px; padding:8px 4px; }
.param-label { display:block; font-size:10px; color:var(--text-muted); text-transform:uppercase; }
.param-value { display:block; font-size:16px; font-weight:600; color:var(--text-primary); margin-top:2px; }

/* ── Stock list ────────────────────────────────────────────────────────────── */
.stock-section-label { font-size:11px; text-transform:uppercase; color:var(--text-muted);
                       font-weight:600; margin:0.5rem 0 0.25rem; }
.stock-list { list-style:none; }
.stock-row {
    display:flex; align-items:center; gap:8px; padding:5px 0;
    border-bottom:1px solid var(--border-soft); font-size:13px;
}
.stock-row:last-child { border-bottom:none; }
.tag-id { font-family:monospace; font-size:12px; background:var(--bg-widget);
          padding:2px 6px; border-radius:3px; }
.stock-species { flex:1; }
.stock-count { color:var(--text-muted); font-size:12px; }
.sex-m { color:var(--accent); }
.sex-f { color:#e06b8a; }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge-alert   { background:rgba(227,93,79,0.2);  color:var(--error);   font-size:11px; padding:2px 6px; border-radius:3px; font-weight:700; }
.badge-warning { background:rgba(242,126,63,0.2); color:var(--warning); font-size:11px; padding:2px 6px; border-radius:3px; font-weight:700; }
.badge-spawn   { background:rgba(61,186,126,0.2); color:#3dba7e;        font-size:11px; padding:2px 6px; border-radius:3px; }
.badge-operation { background:rgba(75,139,212,0.2); color:var(--accent); font-size:11px; padding:2px 6px; border-radius:3px; }
.badge-project { background:rgba(242,126,63,0.2); color:var(--warning); font-size:11px; padding:2px 6px; border-radius:3px; }
.badge-note    { background:rgba(147,147,147,0.2); color:var(--text-secondary); font-size:11px; padding:2px 6px; border-radius:3px; }

/* ── Breadcrumb ────────────────────────────────────────────────────────────── */
.breadcrumb { font-size:13px; color:var(--text-muted); margin-bottom:1rem; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.breadcrumb a { color:var(--text-secondary); text-decoration:none; }
.breadcrumb a:hover { color:var(--accent); }
.crumb-sep { color:var(--border-soft); }

/* ── Panel ─────────────────────────────────────────────────────────────────── */
.panel { background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:1rem; }
.panel-header { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
                color:var(--text-muted); margin-bottom:0.75rem;
                display:flex; justify-content:space-between; align-items:center; }

/* ── Log form ──────────────────────────────────────────────────────────────── */
.log-form { max-width:640px; }
.params-input-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:0.75rem; }
.params-input-grid label { font-size:12px; }
.params-input-grid input { margin-top:3px; }

/* ── Filter bar ────────────────────────────────────────────────────────────── */
.filter-bar { display:flex; gap:8px; margin-bottom:1rem; }
.filter-bar select { padding:6px 10px; background:var(--bg-surface);
                     border:1px solid var(--border); border-radius:4px; color:var(--text-primary); }

/* ── Log section ───────────────────────────────────────────────────────────── */
.log-section { margin-bottom:1.5rem; }
.log-section-header { font-size:12px; font-weight:700; text-transform:uppercase;
                      color:var(--text-muted); margin-bottom:0.5rem; padding-bottom:4px;
                      border-bottom:1px solid var(--border); }
.overdue-header { color:var(--error); }

/* ── Misc ──────────────────────────────────────────────────────────────────── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.page-header h1 { font-size:20px; font-weight:600; }
.page-actions { display:flex; gap:8px; align-items:center; }
.empty-state { color:var(--text-muted); font-size:13px; padding:0.5rem 0; }
.link-small { font-size:12px; color:var(--accent); text-decoration:none; }
.link-small:hover { text-decoration:underline; }
.level-badge { font-size:11px; background:var(--bg-widget); padding:2px 6px;
               border-radius:3px; color:var(--text-muted); margin-left:8px; }
.detail-grid { display:grid; gap:2px; max-width:560px; margin-bottom:1.5rem; }
.detail-row { display:grid; grid-template-columns:160px 1fr; padding:6px 0;
              border-bottom:1px solid var(--border-soft); font-size:13px; }
.detail-label { color:var(--text-muted); }
.detail-section-label { font-size:11px; font-weight:700; text-transform:uppercase;
                        color:var(--text-muted); margin:1rem 0 0.25rem; }
.mt-1 { margin-top:1rem; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { margin-bottom:1rem; }
.field label { display:block; font-size:13px; color:var(--text-secondary); }
.field input, .field select, .field textarea {
    display:block; width:100%; margin-top:4px; padding:7px 10px;
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:4px; color:var(--text-primary); font-size:14px;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-hover);
}
.field--inline { display:flex; gap:1rem; align-items:center; }
.radio-label { display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }
.btn-row { display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; }
.event-meta { display:flex; gap:1rem; font-size:13px; color:var(--text-muted); margin-bottom:1.5rem; }
.recurring-badge { color:var(--accent); }
.btn-small { font-size:12px; padding:4px 10px; }

/* ── Stock workspace ───────────────────────────────────────────────────────── */
.stock-layout  { display:grid; gap:1rem; }
.stock-panel   { background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:1rem; }

.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase;
                 color:var(--text-muted); padding:6px 8px; border-bottom:2px solid var(--border); }
.data-table td { padding:7px 8px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--bg-widget); }
.data-table--compact td, .data-table--compact th { padding:5px 6px; }

.row-anomaly td { background:rgba(242,126,63,0.06); }

.tag-link { text-decoration:none; }
.tag-xl   { font-size:24px; font-weight:700; letter-spacing:2px; font-family:monospace; }
.identifier-full { font-size:11px; color:var(--text-muted); font-family:monospace; margin-top:2px; }

.count-display { text-align:center; padding:1.5rem; margin:1rem 0; }
.count-number  { font-size:72px; font-weight:700; color:var(--accent); line-height:1; }
.count-label   { font-size:14px; color:var(--text-muted); margin-top:4px; }
.count-badge   { font-size:11px; background:var(--bg-widget); color:var(--text-secondary);
                 padding:2px 6px; border-radius:10px; font-weight:600; }
.count-cell    { font-weight:700; color:var(--accent); }

.qty-pos { color:#3dba7e; font-weight:600; }
.qty-neg { color:var(--error); font-weight:600; }

/* Scan screen */
.scan-screen   { max-width:480px; margin:0 auto; padding:2rem 0; }
.scan-header   { text-align:center; margin-bottom:2rem; }
.scan-header h1 { font-size:28px; margin-bottom:0.5rem; }
.scan-hint     { font-size:13px; color:var(--text-muted); }
.scan-input-wrap { display:flex; gap:8px; margin-bottom:4px; }
.scan-input    { flex:1; font-size:32px; font-family:monospace; font-weight:700;
                 text-align:center; padding:12px; background:var(--bg-surface);
                 border:2px solid var(--accent); border-radius:8px; color:var(--text-primary);
                 letter-spacing:6px; text-transform:uppercase; }
.scan-input:focus { outline:none; box-shadow:0 0 0 3px var(--accent-hover); }
.scan-submit   { padding:12px 20px; font-size:14px; }
.scan-sub      { text-align:center; font-size:11px; color:var(--text-muted); margin-bottom:1.5rem; }
.scan-error    { background:rgba(227,93,79,0.1); border:1px solid rgba(227,93,79,0.3);
                 color:var(--error); padding:10px 14px; border-radius:6px; margin-bottom:1rem; font-size:13px; }
.scan-camera-section { text-align:center; margin-bottom:1.5rem; }
.scan-recent   { text-align:center; }
.btn-scan-lg   { background:var(--accent); color:#fff; font-size:14px; padding:8px 20px; }

/* Specimen detail */
.specimen-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.lineage-block { display:flex; flex-direction:column; gap:0.75rem; }
.lineage-parent { display:flex; align-items:center; gap:10px; font-size:13px; }
.lineage-role  { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-muted);
                 min-width:32px; }
.lineage-link  { display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--text-primary); }
.lineage-link:hover { color:var(--accent); }
.lineage-phenotype { font-size:12px; color:var(--text-muted); }
.lineage-external  { display:flex; align-items:center; gap:6px; color:var(--text-secondary); }
.lineage-note  { font-size:11px; color:var(--text-muted); font-style:italic; }
.lineage-unknown   { font-size:12px; color:var(--text-muted); font-style:italic; }
.lineage-cohort    { margin-top:0.75rem; font-size:12px; color:var(--text-muted);
                     border-top:1px solid var(--border-soft); padding-top:0.5rem; }

.offspring-list { list-style:none; }
.offspring-row  { display:flex; align-items:center; gap:8px; padding:5px 0;
                  border-bottom:1px solid var(--border-soft); font-size:13px; }
.offspring-row:last-child { border-bottom:none; }

.anomaly-badge { font-size:12px; color:var(--warning); margin-left:8px; }
.panel--anomaly { border-color:rgba(242,126,63,0.4); background:rgba(242,126,63,0.06); }
.anomaly-notes  { font-size:13px; color:var(--text-secondary); }

/* Cohort */
.cohort-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1rem; }
.adj-badge   { font-size:10px; padding:2px 5px; border-radius:3px; text-transform:uppercase;
               font-weight:600; background:var(--bg-widget); }
.adj-cull    { color:var(--error); }
.adj-death   { color:var(--text-muted); }
.adj-sale    { color:var(--accent); }
.adj-addition{ color:#3dba7e; }

.promote-row { margin-bottom:0.5rem; }
.modal-hint  { font-size:13px; color:var(--text-muted); margin-bottom:1rem; }

/* Basket */
.basket-layout { display:grid; gap:1rem; }
.basket-item-list { list-style:none; margin-bottom:0.75rem; }
.basket-item { display:flex; align-items:center; gap:8px; padding:6px 0;
               border-bottom:1px solid var(--border-soft); font-size:13px; }
.basket-item:last-child { border-bottom:none; }
.item-type-badge { font-size:10px; text-transform:uppercase; padding:2px 6px;
                   background:var(--bg-widget); border-radius:3px; color:var(--text-secondary); }
.btn-remove { background:none; border:none; color:var(--text-muted); cursor:pointer;
              font-size:12px; padding:2px 4px; margin-left:auto; }
.btn-remove:hover { color:var(--error); }

.add-item-form { border-top:1px solid var(--border-soft); padding-top:0.75rem; }
.inline-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.inline-form select, .inline-form input { padding:6px 8px; background:var(--bg-surface);
                      border:1px solid var(--border); border-radius:4px; color:var(--text-primary);
                      font-size:13px; }

.basket-list  { list-style:none; }
.basket-row   { display:flex; align-items:center; gap:8px; padding:6px 0;
                border-bottom:1px solid var(--border-soft); font-size:13px; }
.basket-row:last-child { border-bottom:none; }

/* Status badges */
.status-badge { font-size:10px; padding:2px 6px; border-radius:3px;
                text-transform:uppercase; font-weight:600; }
.status-grow_out      { background:rgba(75,139,212,0.15); color:var(--accent); }
.status-active_breeder{ background:rgba(61,186,126,0.2); color:#3dba7e; }
.status-reserve       { background:rgba(242,126,63,0.2); color:var(--warning); }
.status-retired       { background:rgba(147,147,147,0.2); color:var(--text-secondary); }
.status-sold          { background:rgba(75,139,212,0.15); color:var(--accent); }
.status-culled        { background:rgba(227,93,79,0.15); color:var(--error); }
.status-deceased      { background:rgba(147,147,147,0.15); color:var(--text-muted); }
.status-scheduled     { background:rgba(75,139,212,0.15); color:var(--accent); }
.status-complete      { background:rgba(61,186,126,0.2); color:#3dba7e; }
.status-missed        { background:rgba(227,93,79,0.15); color:var(--error); }

/* Forms */
.record-form  { max-width:640px; }
.field-disabled { opacity:0.5; cursor:not-allowed; background:var(--bg-widget) !important; }
.hint { font-size:11px; color:var(--text-muted); margin-top:3px; display:block; }
.info-box { background:rgba(75,139,212,0.1); border:1px solid rgba(75,139,212,0.3);
            border-radius:6px; padding:10px 14px; font-size:13px; color:var(--text-secondary);
            margin-bottom:1.5rem; }
.page-hint { font-size:13px; color:var(--text-muted); margin-bottom:1.5rem; }
.field--checkbox { margin-bottom:0.5rem; }
.checkbox-label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; }
.text-muted { color:var(--text-muted); font-size:12px; }
.notes-text { font-size:13px; color:var(--text-secondary); line-height:1.6; }

/* ── Pedigree workspace ────────────────────────────────────────────────────── */
.pedigree-dash  { display:grid; gap:1rem; }
.pairing-x      { margin:0 8px; color:var(--text-muted); }
.breeding-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }

.parent-block   { display:flex; flex-direction:column; gap:0.75rem; }
.parent-row     { display:flex; flex-direction:column; gap:4px; padding:8px 0;
                  border-bottom:1px solid var(--border-soft); }
.parent-row:last-child { border-bottom:none; }
.parent-role    { font-size:10px; text-transform:uppercase; font-weight:700;
                  color:var(--text-muted); letter-spacing:0.06em; }
.parent-link    { display:flex; align-items:center; gap:8px; text-decoration:none;
                  color:var(--text-primary); font-size:13px; }
.parent-link:hover { color:var(--accent); }
.condition-note { font-size:12px; color:var(--text-secondary); margin-top:2px; }

.spawn-row      { display:flex; align-items:center; gap:10px; padding:6px 0;
                  border-bottom:1px solid var(--border-soft); font-size:13px; }
.spawn-row:last-child { border-bottom:none; }
.cohort-row     { display:flex; align-items:center; gap:10px; padding:6px 0;
                  border-bottom:1px solid var(--border-soft); font-size:13px; }
.cohort-row:last-child { border-bottom:none; }
.treatment-row  { display:flex; align-items:center; gap:10px; padding:5px 0;
                  border-bottom:1px solid var(--border-soft); font-size:13px; }
.treatment-row:last-child { border-bottom:none; }
.treatment-role { font-size:10px; text-transform:uppercase; font-weight:700;
                  color:var(--text-muted); min-width:30px; }

/* D3 pedigree overrides */
#pedigree-svg { cursor:grab; }
#pedigree-svg:active { cursor:grabbing; }
.gen-label { font-weight:600; color:var(--text-secondary); vertical-align:top; }
.tree-controls { margin-bottom:0.75rem; }

/* ── Settings workspace ────────────────────────────────────────────────────── */
.settings-layout { display:grid; grid-template-columns:200px 1fr; gap:1.5rem; min-height:60vh; }
.settings-nav    { background:var(--bg-surface); border:1px solid var(--border);
                   border-radius:8px; padding:0.5rem; align-self:start; }
.settings-nav-item { display:block; padding:8px 12px; border-radius:4px;
                     text-decoration:none; color:var(--text-secondary); font-size:13px; }
.settings-nav-item:hover { background:var(--bg-widget); color:var(--text-primary); }
.settings-nav-item.active { background:var(--accent); color:#fff; }
.settings-nav-group { font-size:10px; text-transform:uppercase; font-weight:700;
                      color:var(--text-muted); padding:8px 12px 4px; letter-spacing:0.06em; }

.settings-content { }
.settings-section { background:var(--bg-surface); border:1px solid var(--border);
                    border-radius:8px; padding:1.5rem; margin-bottom:1rem; }
.settings-section h2 { font-size:15px; font-weight:600; margin-bottom:1rem; }

/* Profile field editor */
.field-editor    { margin-top:1rem; }
.field-row-edit  { display:flex; align-items:center; gap:8px; padding:6px 0;
                   border-bottom:1px solid var(--border-soft); }
.field-row-edit:last-child { border-bottom:none; }
.field-drag-handle { cursor:grab; color:var(--text-muted); font-size:14px;
                     padding:0 4px; user-select:none; }
.field-locked    { opacity:0.5; }
.field-key-badge { font-family:monospace; font-size:11px; background:var(--bg-widget);
                   padding:2px 6px; border-radius:3px; color:var(--text-muted); min-width:100px; }
.field-label-input { flex:1; padding:4px 8px; background:var(--bg-surface);
                     border:1px solid var(--border); border-radius:4px;
                     color:var(--text-primary); font-size:13px; }
.field-label-input:focus { outline:none; border-color:var(--accent); }
.field-type-badge { font-size:10px; text-transform:uppercase; background:var(--bg-widget);
                    color:var(--text-secondary); padding:2px 6px; border-radius:3px; }
.field-lock-icon { color:var(--text-muted); font-size:12px; padding:0 4px; }
.btn-delete-field { background:none; border:none; color:var(--text-muted);
                    cursor:pointer; padding:2px 6px; font-size:14px; }
.btn-delete-field:hover { color:var(--error); }

.add-field-row   { display:flex; gap:8px; align-items:center; padding-top:0.75rem;
                   border-top:1px solid var(--border-soft); margin-top:0.25rem; flex-wrap:wrap; }
.add-field-row input, .add-field-row select {
    padding:5px 8px; background:var(--bg-surface); border:1px solid var(--border);
    border-radius:4px; color:var(--text-primary); font-size:13px; }

/* User management */
.user-table td, .user-table th { padding:8px 10px; }
.role-badge { font-size:10px; text-transform:uppercase; font-weight:700;
              padding:2px 6px; border-radius:3px; }
.role-admin   { background:rgba(227,93,79,0.15); color:var(--error); }
.role-manager { background:rgba(242,126,63,0.15); color:var(--warning); }
.role-member  { background:rgba(75,139,212,0.15); color:var(--accent); }

/* Notification setup */
.callmebot-setup { background:var(--bg-widget); border-radius:6px; padding:1rem;
                   font-size:13px; line-height:1.7; margin-bottom:1rem; }
.callmebot-setup ol { margin-left:1.2rem; }
.callmebot-setup code { background:var(--bg-surface); padding:1px 5px; border-radius:3px;
                        font-size:12px; }
.error-box { background:rgba(227,93,79,0.1); border:1px solid rgba(227,93,79,0.3);
             color:var(--error); padding:10px 14px; border-radius:6px;
             font-size:13px; margin-bottom:1rem; }

/* ── Notice box ────────────────────────────────────────────────────────────── */
.notice-box { background:rgba(61,186,126,0.12); border:1px solid rgba(61,186,126,0.35);
              color:#3dba7e; padding:10px 14px; border-radius:6px;
              font-size:13px; margin-bottom:1rem; }

/* ── v1.5 — Subnav ─────────────────────────────────────────────────────────── */
.subnav { display:flex; gap:1.25rem; padding:0.4rem 1.5rem;
    background:var(--bg-sidebar); border-bottom:1px solid var(--border, #3a3a3a);
    font-size:13px; }
.subnav a { color:var(--text-secondary); text-decoration:none; padding:0.2rem 0; }
.subnav a:hover { color:var(--text-primary); }

/* ── v1.5 — Dashboard (FO model) ───────────────────────────────────────────── */
.dash-layout { display:grid; grid-template-columns:230px 1fr; gap:1.25rem;
    align-items:start; }
.dash-tree { background:var(--bg-sidebar); border-radius:8px; padding:0.75rem;
    position:sticky; top:1rem; max-height:calc(100vh - 6rem); overflow-y:auto; }
.tree-header { font-size:12px; font-weight:600; text-transform:uppercase;
    color:var(--text-secondary); margin-bottom:0.5rem; display:flex;
    justify-content:space-between; align-items:center; }
.tree-node { display:inline-block; padding:0.25rem 0.4rem; border-radius:5px;
    color:var(--text-primary); text-decoration:none; font-size:13.5px;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-node:hover { background:rgba(128,128,128,0.15); }
.tree-node.active { background:var(--accent, #4b8bd4); color:#fff; }
.tree-all { display:block; margin-bottom:0.35rem; font-weight:600; }
.tree-branch { position:relative; }
.tree-branch .tree-manage { visibility:hidden; font-size:12px; text-decoration:none;
    color:var(--text-secondary); margin-left:0.2rem; }
.tree-branch:hover > .tree-manage { visibility:visible; }
.tree-children { margin-left:0.9rem; border-left:1px solid rgba(128,128,128,0.25);
    padding-left:0.45rem; }
.tree-dot { display:inline-block; width:7px; height:7px; border-radius:50%;
    margin-right:0.35rem; vertical-align:middle; background:var(--text-secondary); }
.tree-dot--spawn { background:#e06b8a; }
.tree-dot--operation { background:#4b8bd4; }
.tree-dot--project { background:#1f9d55; }

.scope-banner { background:rgba(75,139,212,0.12); border:1px solid rgba(75,139,212,0.4);
    border-radius:6px; padding:0.4rem 0.75rem; margin-bottom:0.75rem;
    font-size:13.5px; display:flex; gap:0.5rem; align-items:center; }

.dash-tabs { display:flex; gap:0.25rem; border-bottom:2px solid rgba(128,128,128,0.25);
    margin-bottom:1rem; flex-wrap:wrap; }
.dash-tab { padding:0.45rem 0.9rem; border-radius:6px 6px 0 0; font-size:14px;
    color:var(--text-secondary); text-decoration:none; }
.dash-tab:hover { color:var(--text-primary); background:rgba(128,128,128,0.1); }
.dash-tab.active { color:var(--text-primary); font-weight:600;
    border-bottom:2px solid var(--accent, #4b8bd4); margin-bottom:-2px; }

.tab-actions { display:flex; gap:0.6rem; align-items:center; margin-bottom:1rem;
    flex-wrap:wrap; }
.panel-alert { border:1px solid rgba(224,107,107,0.5); }

/* ── v1.5 — Notes ──────────────────────────────────────────────────────────── */
.notes-filters { display:flex; gap:0.3rem; }
.chip { padding:0.2rem 0.65rem; border-radius:99px; font-size:12.5px;
    color:var(--text-secondary); text-decoration:none;
    border:1px solid rgba(128,128,128,0.35); }
.chip.active { background:var(--accent, #4b8bd4); color:#fff; border-color:transparent; }
.notes-search input { padding:0.35rem 0.6rem; border-radius:6px;
    border:1px solid rgba(128,128,128,0.35); background:transparent;
    color:var(--text-primary); min-width:200px; }
.search-context { font-size:13px; color:var(--text-secondary); margin-bottom:0.5rem; }
.note-list { list-style:none; margin:0; padding:0; }
.note-row { display:grid; grid-template-columns:minmax(140px, 240px) 1fr auto;
    gap:0.75rem; padding:0.55rem 0.75rem; align-items:baseline;
    border-bottom:1px solid rgba(128,128,128,0.15); }
.note-row:last-child { border-bottom:none; }
.note-title { font-weight:600; text-decoration:none; color:var(--text-primary); }
.note-title:hover { color:var(--accent, #4b8bd4); }
.note-excerpt { font-size:13px; color:var(--text-secondary); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
.note-date { font-size:12px; color:var(--text-secondary); }
.note-title-input { width:100%; font-size:1.15rem; font-weight:600;
    padding:0.5rem 0.7rem; border-radius:6px;
    border:1px solid rgba(128,128,128,0.35); background:transparent;
    color:var(--text-primary); }

/* ── v1.5 — Editor (Squire) ────────────────────────────────────────────────── */
.editor-toolbar { display:flex; gap:0.25rem; align-items:center;
    padding:0.35rem; margin:0.75rem 0 0; background:var(--bg-sidebar);
    border-radius:8px 8px 0 0; border:1px solid rgba(128,128,128,0.3);
    border-bottom:none; flex-wrap:wrap; }
.editor-toolbar button { min-width:30px; height:28px; border:none; cursor:pointer;
    background:transparent; border-radius:5px; color:var(--text-primary);
    font-size:14px; }
.editor-toolbar button:hover { background:rgba(128,128,128,0.2); }
.tb-sep { width:1px; height:18px; background:rgba(128,128,128,0.35);
    margin:0 0.25rem; }
.tb-color { width:20px !important; min-width:20px !important; height:20px !important;
    border-radius:50% !important; border:1px solid rgba(128,128,128,0.4) !important; }
.note-editor { min-height:320px; padding:0.9rem 1rem;
    border:1px solid rgba(128,128,128,0.3); border-radius:0 0 8px 8px;
    background:var(--bg-card, transparent); color:var(--text-primary);
    line-height:1.55; outline:none; overflow-y:auto; }
.note-editor img { max-width:100%; height:auto; border-radius:4px; }
.note-editor a { color:var(--accent, #4b8bd4); }

/* ── v1.5 — File manager ───────────────────────────────────────────────────── */
.docs-layout { display:grid; grid-template-columns:210px 1fr; gap:1rem;
    align-items:start; }
.folder-tree { background:var(--bg-sidebar); border-radius:8px; padding:0.75rem; }
.docs-breadcrumb { font-size:13.5px; margin-bottom:0.6rem;
    color:var(--text-secondary); }
.docs-breadcrumb a { color:var(--text-primary); text-decoration:none; }
.docs-breadcrumb a:hover { color:var(--accent, #4b8bd4); }
.folder-ops { margin-left:0.75rem; }
.file-list { list-style:none; margin:0; padding:0; }
.file-row { display:grid; grid-template-columns:44px 1fr auto auto; gap:0.75rem;
    align-items:center; padding:0.45rem 0.6rem;
    border-bottom:1px solid rgba(128,128,128,0.15); }
.file-row:last-child { border-bottom:none; }
.file-icon { font-size:20px; text-align:center; }
.file-thumb { width:40px; height:40px; object-fit:cover; border-radius:4px;
    cursor:pointer; }
.file-name { text-decoration:none; color:var(--text-primary); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
.file-name:hover { color:var(--accent, #4b8bd4); }
.file-meta { font-size:12px; color:var(--text-secondary); }
.file-ops { display:flex; gap:0.5rem; }
.file-ops button, .folder-ops button { background:none; border:none; cursor:pointer;
    padding:0; font:inherit; }
.link-small.danger { color:#e06b6b; }
.inline-add { display:flex; gap:0.35rem; margin-top:0.6rem; }
.inline-add input[type=text], .inline-add select { flex:1; min-width:0;
    padding:0.3rem 0.5rem; border-radius:5px;
    border:1px solid rgba(128,128,128,0.35); background:transparent;
    color:var(--text-primary); font-size:13px; }
.dropzone { border:2px dashed rgba(128,128,128,0.35); transition:border-color .15s,
    background .15s; }
.dropzone.drag-over { border-color:var(--accent, #4b8bd4);
    background:rgba(75,139,212,0.08); }
.dropzone .hint { font-size:12.5px; color:var(--text-secondary); margin-left:0.6rem; }

/* ── v1.5 — Gallery + lightbox ─────────────────────────────────────────────── */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:0.75rem; }
.gallery-cell { margin:0; }
.gallery-cell img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px;
    cursor:pointer; transition:transform .1s; }
.gallery-cell img:hover { transform:scale(1.02); }
.gallery-cell figcaption { font-size:12px; color:var(--text-secondary);
    margin-top:0.25rem; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:200;
    display:flex; align-items:center; justify-content:center; }
.lightbox img { max-width:88vw; max-height:84vh; border-radius:6px; }
.lb-close, .lb-prev, .lb-next { position:absolute; background:none; border:none;
    color:#fff; font-size:2rem; cursor:pointer; opacity:0.8; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { opacity:1; }
.lb-close { top:1rem; right:1.5rem; }
.lb-prev { left:1rem; top:50%; transform:translateY(-50%); font-size:3rem; }
.lb-next { right:1rem; top:50%; transform:translateY(-50%); font-size:3rem; }
.lb-caption { position:absolute; bottom:1.25rem; color:#ddd; font-size:13.5px; }

/* ── v1.5 — Picker modal grid ──────────────────────────────────────────────── */
.picker-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr));
    gap:0.5rem; max-height:50vh; overflow-y:auto; padding:0.5rem 0; }
.picker-thumb { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px;
    cursor:pointer; border:2px solid transparent; }
.picker-thumb:hover { border-color:var(--accent, #4b8bd4); }

/* ── v1.5 — Todos ──────────────────────────────────────────────────────────── */
.todo-add { display:flex; gap:0.5rem; margin-bottom:1rem; }
.todo-add input[type=text] { flex:1; padding:0.45rem 0.7rem; border-radius:6px;
    border:1px solid rgba(128,128,128,0.35); background:transparent;
    color:var(--text-primary); }
.todo-add select { padding:0.35rem; border-radius:6px;
    border:1px solid rgba(128,128,128,0.35); background:transparent;
    color:var(--text-primary); }
.todo-list { list-style:none; margin:0; padding:0; }
.todo-row { display:grid; grid-template-columns:auto 1fr auto auto; gap:0.6rem;
    align-items:center; padding:0.45rem 0.6rem;
    border-bottom:1px solid rgba(128,128,128,0.15); }
.todo-row:last-child { border-bottom:none; }
.todo-row.done .todo-title { text-decoration:line-through;
    color:var(--text-secondary); }
.todo-check { background:none; border:none; font-size:17px; cursor:pointer;
    color:var(--text-primary); }
.todo-date { font-size:12px; color:var(--text-secondary); }
.linked-list { list-style:none; margin:0 0 0.5rem; padding:0; }
.linked-list li { display:flex; gap:0.5rem; align-items:center;
    padding:0.3rem 0; }

@media (max-width: 860px) {
    .dash-layout, .docs-layout { grid-template-columns:1fr; }
    .dash-tree { position:static; max-height:none; }
}

/* ── v1.5.1 — Media Library ────────────────────────────────────────────────── */
.media-toolbar { display:flex; gap:0.5rem; align-items:center; margin-bottom:0.75rem;
    flex-wrap:wrap; }
.tb-spacer { flex:1; }
.view-toggle { padding:0.25rem 0.55rem; border-radius:6px; text-decoration:none;
    color:var(--text-secondary); border:1px solid rgba(128,128,128,0.3);
    font-size:15px; }
.view-toggle.active { color:var(--text-primary); background:rgba(128,128,128,0.15);
    border-color:var(--accent, #4b8bd4); }

.media-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:0.85rem; }
.media-cell { position:relative; }
.media-cell img, .media-tile { width:100%; aspect-ratio:1; object-fit:cover;
    border-radius:8px; cursor:pointer; display:flex; align-items:center;
    justify-content:center; font-size:2rem; background:rgba(128,128,128,0.12);
    text-decoration:none; color:var(--text-secondary); }
.media-tile--video { background:rgba(0,0,0,0.55); color:#fff; }
.gallery-video { min-height:150px; }
.media-select { position:absolute; top:6px; left:6px; z-index:2; }
.media-select input, .media-select-inline input { width:16px; height:16px;
    accent-color:var(--accent, #4b8bd4); cursor:pointer; }
.media-name { font-size:12px; margin-top:0.25rem; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary); }
.media-ops { display:flex; gap:0.45rem; margin-top:0.15rem; }
.media-ops button { background:none; border:none; cursor:pointer; padding:0;
    font:inherit; }
.file-row--select { grid-template-columns:auto 44px 1fr auto auto; }

.move-tree { max-height:55vh; overflow-y:auto; padding:0.25rem 0; }
.move-tree .tree-node { display:block; width:100%; text-align:left;
    background:none; border:none; cursor:pointer; font:inherit;
    padding:0.35rem 0.5rem; }
.move-tree .tree-node:hover { background:rgba(75,139,212,0.15); }

.lightbox video { max-width:88vw; max-height:84vh; border-radius:6px; }

/* ── v1.6 — Missing files + relocate + disk tree ───────────────────────────── */
.media-tile--missing { flex-direction:column; gap:0.2rem;
    background:rgba(224,150,60,0.15); color:#e0963c; border:2px dashed #e0963c;
    font-size:1.6rem; cursor:pointer; }
.media-tile--missing span { font-size:11px; letter-spacing:0.02em; }
.file-name--missing { background:none; border:none; cursor:pointer; padding:0;
    font:inherit; text-align:left; color:#e0963c; }
.disk-dir { padding:0.3rem 0.5rem; color:var(--text-secondary); font-size:13.5px; }
.disk-file { display:block; width:100%; text-align:left; }