/* Saverbro OS UI standard — structural additions and new components only.
   Visual style comes from legacy/saverbro.css. This file adds components
   that did not exist in the legacy design and keeps dark-mode working. */

/* ── Fonts ──────────────────────────────────────────────────────────────── */
#saverbro-r0 { font-family:'Open Sans',system-ui,sans-serif; font-size:14px; }
#saverbro-r0 h1, #saverbro-r0 h2, #saverbro-r0 h3 { font-family:Montserrat,'Open Sans',system-ui,sans-serif; }

/* ── Sidebar nav: grouped sections with headings ─────────────────────────── */
#saverbro-r0 .sb-nav { display:flex; flex-direction:column; gap:16px; }
#saverbro-r0 .sb-nav-section { display:flex; flex-direction:column; gap:2px; }
#saverbro-r0 .sb-nav-heading { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#1643b8; padding:4px 11px 6px; }
html[data-theme="dark"] #saverbro-r0 .sb-nav-heading { color:#5b82e8 !important; }
#saverbro-r0 .sb-nav-mark { flex:0 0 16px; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; }
#saverbro-r0 .sb-nav-mark svg { width:16px; height:16px; }
#saverbro-r0 .sb-nav-text { display:block; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#saverbro-r0 .sb-nav-purpose { display:none; }
#saverbro-r0 .sb-nav-chevron { color:#8fa8df; }
#saverbro-r0 .sb-nav-chevron svg { width:14px; height:14px; }
/* Sub-navigation */
#saverbro-r0 .sb-subnav { margin:2px 0 4px; display:flex; flex-direction:column; gap:0; }
#saverbro-r0 .sb-sidebar .sb-subnav-item { min-height:30px; padding:5px 11px 5px 38px !important; font-size:13px; font-weight:400; color:#c9d8f0; background:transparent; border:0 !important; box-shadow:none !important; border-radius:6px !important; display:flex; align-items:center; }
#saverbro-r0 .sb-sidebar .sb-subnav-item:hover { background:rgba(255,255,255,.06); color:#fff; }
#saverbro-r0 .sb-sidebar .sb-subnav-item[aria-pressed="true"] { color:#7ecfff; font-weight:600; background:transparent; }
#saverbro-r0 .sb-sidebar .sb-nav button:focus-visible { outline:2px solid #7ecfff; outline-offset:-2px; }

/* ── Top-bar search extras ──────────────────────────────────────────────── */
#saverbro-r0 .sb-search-icon { width:16px; height:16px; color:var(--c-text-3); flex:0 0 16px; }
#saverbro-r0 .sb-search-kbd { font:600 12px 'Open Sans',system-ui,sans-serif; color:var(--c-text-3); border:1px solid var(--c-border); border-radius:4px; padding:2px 6px; white-space:nowrap; }
#saverbro-r0 .sb-feedback-icon { position:relative; }
#saverbro-r0 .sb-badge-neutral { background:var(--c-text-2) !important; }

/* ── Page layout helpers ────────────────────────────────────────────────── */
#saverbro-r0 .sb-page-purpose { margin:0 0 16px; padding:0; background:none; border:0; font-size:14px; color:var(--c-text-3); }
#saverbro-r0 .sb-footnote { font-size:12px; color:var(--c-text-3); margin:24px 0 0; }
#saverbro-r0 .rd-full { grid-column:1 / -1; }

/* ── Segmented control + overflow menu ──────────────────────────────────── */
#saverbro-r0 .sb-segmented { display:inline-flex; height:32px; border:1px solid var(--c-border-strong); border-radius:8px; overflow:hidden; background:var(--c-surface); }
#saverbro-r0 .sb-segmented button { border:0; background:transparent; padding:0 16px; font:600 13px 'Open Sans',system-ui,sans-serif; color:var(--c-text-2); cursor:pointer; transition:background-color .15s ease; }
#saverbro-r0 .sb-segmented button + button { border-left:1px solid var(--c-border-strong); }
#saverbro-r0 .sb-segmented button[aria-pressed="true"] { background:var(--c-accent-soft); color:var(--c-accent-text); }
#saverbro-r0 .sb-more { position:relative; }
#saverbro-r0 .sb-more-btn { width:32px; height:32px; border:1px solid var(--c-border-strong); border-radius:8px; background:var(--c-surface); color:var(--c-text); font-size:18px; line-height:1; cursor:pointer; }
#saverbro-r0 .sb-more-menu { position:absolute; right:0; top:calc(100% + 8px); background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px; box-shadow:0 8px 24px var(--c-shadow); padding:4px; z-index:20; min-width:176px; }
#saverbro-r0 .sb-more-menu button { display:block; width:100%; text-align:left; border:0; background:none; padding:8px 12px; border-radius:6px; font-size:14px; cursor:pointer; }
#saverbro-r0 .sb-more-menu .sb-danger { color:var(--c-bad); }
#saverbro-r0 .sb-more-menu button:hover { background:var(--c-surface-2); }

/* ── Status chip ────────────────────────────────────────────────────────── */
#saverbro-r0 .rd-status, #saverbro-r0 .sb-state { display:inline-flex; align-items:center; gap:6px; background:transparent !important; border:0; padding:0; font-size:12px; font-weight:600; color:var(--c-text-2) !important; text-transform:none; white-space:nowrap; }
#saverbro-r0 .rd-status::before, #saverbro-r0 .sb-state::before { content:""; width:6px; height:6px; border-radius:50%; background:#009EE7; flex:0 0 6px; }
#saverbro-r0 .rd-status.rd-green::before { background:#1E8E3E; } #saverbro-r0 .rd-status.rd-amber::before { background:#C77700; }
#saverbro-r0 .rd-status.rd-red::before { background:#C62828; } #saverbro-r0 .rd-status.rd-grey::before { background:var(--c-border-strong); }

/* ── Project board (new grid-based layout) ───────────────────────────────── */
#saverbro-r0 .sb-section-title { font-size:18px; font-weight:700; margin:0 0 16px; color:var(--c-text); }
#saverbro-r0 .sb-board-cols { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; align-items:start; }
#saverbro-r0 .sb-board-col { background:var(--c-surface-2); border-radius:12px; padding:16px; min-height:320px; }
#saverbro-r0 .sb-board-col h3 { display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:700; margin:0 0 16px; color:var(--c-text); }
#saverbro-r0 .sb-count { font:600 12px 'Open Sans',system-ui,sans-serif; background:var(--c-surface); border:1px solid var(--c-border); border-radius:999px; padding:0 8px; color:var(--c-text-2); font-variant-numeric:tabular-nums; }
#saverbro-r0 .sb-board-empty { font-size:12px; color:var(--c-text-3); margin:0; }
#saverbro-r0 .sb-board-card { background:var(--c-surface); border:1px solid var(--c-border); border-top:3px solid var(--c-accent); border-radius:8px; padding:16px; margin-bottom:16px; display:flex; flex-direction:column; gap:8px; transition:box-shadow .15s ease; }
#saverbro-r0 .sb-board-card:hover { box-shadow:0 4px 12px var(--c-shadow); }
#saverbro-r0 .sb-top-green { border-top-color:#1E8E3E; } #saverbro-r0 .sb-top-amber { border-top-color:#C77700; } #saverbro-r0 .sb-top-grey { border-top-color:var(--c-border-strong); }
#saverbro-r0 .sb-board-card strong { font-size:14px; }
#saverbro-r0 .sb-board-id { font:12px ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--c-text-3); }
#saverbro-r0 .sb-board-meta { font-size:12px; color:var(--c-text-3); }
#saverbro-r0 .sb-board-foot { display:flex; align-items:center; gap:8px; margin-top:4px; }
#saverbro-r0 .sb-board-owner { font-size:12px; color:var(--c-text-2); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#saverbro-r0 .sb-avatar-sm { width:24px; height:24px; border-radius:50%; background:var(--c-accent-soft); color:var(--c-accent-text); font:700 10px Montserrat,system-ui,sans-serif; display:inline-grid; place-items:center; flex:0 0 24px; }
#saverbro-r0 .sb-list-row { display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--c-border); align-items:center; }

/* ── Dashboard (rd-*) ────────────────────────────────────────────────────── */
#saverbro-r0 .rd-link { color:var(--c-accent-text); font-size:13px; }
#saverbro-r0 .rd-code, #saverbro-r0 .rd-code-after { font:12px ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--c-text-3); }
#saverbro-r0 .rd-section-title { font-size:12px; letter-spacing:.06em; }
#saverbro-r0 .rd-role-chip { font-size:12px; }
#saverbro-r0 .rd-bignum small { font:600 14px 'Open Sans',system-ui,sans-serif; color:var(--c-text-3); }
#saverbro-r0 .rd-tabs button { font-size:12px; }
#saverbro-r0 .rd-purpose, #saverbro-r0 .rd-row-meta, #saverbro-r0 .rd-tile-label, #saverbro-r0 .rd-tile-note { font-size:12px; }
#saverbro-r0 .rd-row-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
#saverbro-r0 .rd-tile-note { display:inline-flex; align-items:center; gap:6px; color:var(--c-text-3); }
#saverbro-r0 .rd-tile-note.rd-red { color:var(--c-bad); } #saverbro-r0 .rd-tile-note.rd-amber { color:var(--c-warn); }
#saverbro-r0 .rd-dot { width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; }
#saverbro-r0 .rd-list li { grid-template-columns:minmax(0,1fr) auto auto; gap:16px; }
#saverbro-r0 .rd-list li:has(.rd-row-btn) { transition:background-color .15s ease; margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:6px; }
#saverbro-r0 .rd-list li:has(.rd-row-btn):hover { background:var(--c-surface-2); }
#saverbro-r0 .rd-list li:has(.rd-row-btn):hover .rd-row-title { color:var(--c-text); }
#saverbro-r0 .rd-primary { font:600 14px 'Open Sans',system-ui,sans-serif; background:var(--c-accent-strong,#0077B3); border-radius:8px; padding:8px 16px; min-height:40px; transition:background-color .15s ease; }
#saverbro-r0 .rd-primary:hover { background:#00679B; }
#saverbro-r0 .rd-ghost { font:600 14px 'Open Sans',system-ui,sans-serif; border-radius:8px; padding:8px 16px; min-height:40px; transition:background-color .15s ease, border-color .15s ease; }
#saverbro-r0 .rd-ghost:hover { background:var(--c-surface-2); }

/* ── CRUD / Modal ────────────────────────────────────────────────────────── */
#saverbro-r0 .sb-crud { margin-bottom:16px; }
#saverbro-r0 .sb-crud-tools { display:flex; align-items:center; gap:12px; }
#saverbro-r0 .sb-toggle { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--c-text-2); white-space:nowrap; }
#saverbro-r0 .sb-crud-table { width:100%; border-collapse:collapse; font-size:14px; }
#saverbro-r0 .sb-crud-table th { text-align:left; font-size:12px; font-weight:600; color:var(--c-text-3); padding:8px; border-bottom:1px solid var(--c-border); white-space:nowrap; }
#saverbro-r0 .sb-crud-table td { padding:8px; border-bottom:1px solid var(--c-border); white-space:nowrap; }
#saverbro-r0 .sb-crud-actions { text-align:right; display:flex; gap:8px; justify-content:flex-end; }
#saverbro-r0 .sb-crud-actions button { padding:4px 10px; font-size:13px; }
#saverbro-r0 .sb-danger-text { color:var(--c-bad); }
#saverbro-r0 .sb-modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:100; }
#saverbro-r0 .sb-modal { background:var(--c-surface); color:var(--c-text); border-radius:8px; padding:24px; width:min(480px, 92vw); box-shadow:0 16px 48px rgba(0,0,0,.25); }
#saverbro-r0 .sb-modal h2 { margin:0 0 16px; font-size:18px; }
#saverbro-r0 .sb-crud-form { display:flex; flex-direction:column; gap:12px; }
#saverbro-r0 .sb-crud-form label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; }
#saverbro-r0 .sb-crud-form input, #saverbro-r0 .sb-crud-form select { padding:8px 10px; border:1px solid var(--c-border-strong); border-radius:6px; font:inherit; font-weight:400; background:var(--c-surface); color:var(--c-text); }
#saverbro-r0 .sb-crud-form .sb-crud-check { flex-direction:row; align-items:center; gap:8px; font-weight:400; }
#saverbro-r0 .sb-crud-error { color:var(--c-bad); font-size:13px; margin:0; }
#saverbro-r0 .sb-crud-note { margin:0 0 16px; font-size:14px; color:var(--c-text-2); }
#saverbro-r0 .sb-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
#saverbro-r0 .sb-danger-bg { background:var(--c-bad); border-color:var(--c-bad); }
#saverbro-r0 .sb-tag-paid { display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; background:var(--c-accent-soft); color:var(--c-accent-text); }

/* ── Finance / payment tables ─────────────────────────────────────────────── */
#saverbro-r0 .sb-payment-table { min-width:0; max-width:100%; overflow-x:auto; }
#saverbro-r0 .sb-payment-table .sb-payment-head, #saverbro-r0 .sb-payment-table .sb-payment-row { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(96px,1fr); min-width:720px; }
#saverbro-r0 .sb-payment-table .sb-payment-row { min-height:44px; }
#saverbro-r0 .sb-grid > .sb-panel { min-width:0; }

/* ── Marketing / project banner dark-safe ────────────────────────────────── */
#saverbro-r0 .sb-marketing-focus { background:radial-gradient(circle at 88% 16%,rgba(61,221,171,.22),transparent 29%),linear-gradient(135deg,#005A87,var(--c-sidebar) 55%,var(--c-sidebar)); color:#fff; }
#saverbro-r0 .sb-marketing-focus .sb-eyebrow, #saverbro-r0 .sb-marketing-focus p, #saverbro-r0 .sb-marketing-focus h2, #saverbro-r0 .sb-marketing-focus-progress strong, #saverbro-r0 .sb-marketing-focus-meta span { color:#fff; }
#saverbro-r0 .sb-project-board-toolbar { background:linear-gradient(100deg,#005A87,var(--c-sidebar) 62%,var(--c-sidebar)); color:#fff; }
#saverbro-r0 .sb-project-board-toolbar strong, #saverbro-r0 .sb-project-board-toolbar span, #saverbro-r0 .sb-project-board-toolbar small, #saverbro-r0 .sb-project-board-toolbar .sb-filter-chip { color:#fff; }
#saverbro-r0 .sb-project-board-toolbar .sb-filter-chip.active { color:var(--c-text); }
#saverbro-r0 .sb-project-board-toolbar span { font-size:11px; }

/* ── Pipeline board ────────────────────────────────────────────────────────── */
#saverbro-r0 .sb-pipeline { display:grid; grid-template-columns:repeat(4,minmax(200px,1fr)); gap:12px; margin-bottom:16px; }
#saverbro-r0 .sb-pipeline-col { background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:8px; padding:10px; min-height:220px; }
#saverbro-r0 .sb-pipeline-col > header { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:13px; margin-bottom:8px; }
#saverbro-r0 .sb-pipeline-col > header span { font-weight:600; color:var(--c-text-2); }
#saverbro-r0 .sb-pipeline-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:6px; padding:10px; margin-bottom:8px; font-size:13px; }
#saverbro-r0 .sb-pipeline-card strong { display:block; margin-bottom:2px; }
#saverbro-r0 .sb-pipeline-card small { display:block; color:var(--c-text-2); }
#saverbro-r0 .sb-pipeline-card .sb-crud-actions { justify-content:flex-start; flex-wrap:wrap; margin-top:8px; display:flex; }

/* ── Organisation tabs / tables ──────────────────────────────────────────── */
#saverbro-r0 .sb-tabs { display:flex; gap:4px; border-bottom:1px solid var(--c-border); margin:0 0 16px; }
#saverbro-r0 .sb-tabs button { border:0; background:none; padding:8px 14px; font:inherit; font-size:14px; color:var(--c-text-2); border-bottom:2px solid transparent; cursor:pointer; }
#saverbro-r0 .sb-tabs button[aria-selected="true"] { color:var(--c-text); font-weight:700; border-bottom-color:var(--c-accent-text); }
#saverbro-r0 .sb-org-table { width:100%; border-collapse:collapse; font-size:14px; }
#saverbro-r0 .sb-org-table th { text-align:left; font-size:12px; color:var(--c-text-3); padding:8px; border-bottom:1px solid var(--c-border); }
#saverbro-r0 .sb-org-table td { padding:8px; border-bottom:1px solid var(--c-border); vertical-align:top; }
#saverbro-r0 .sb-initials { width:32px; height:32px; border-radius:50%; display:inline-grid; place-items:center; background:var(--c-accent-soft); color:var(--c-accent-text); font-weight:700; font-size:12px; flex:0 0 32px; }
#saverbro-r0 .sb-grid.sb-grid-stack { grid-template-columns:minmax(0,1fr); }

/* ── Text wrapping fixes ─────────────────────────────────────────────────── */
#saverbro-r0 .rd-row-title, #saverbro-r0 .rd-chip-card strong, #saverbro-r0 .sb-board-card strong { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere; }
#saverbro-r0 .sb-page-head > div { display:flex; flex-direction:column; }
#saverbro-r0 .sb-page-head h1 + .sb-subtitle { margin-top:4px; }
#saverbro-r0 .sb-user strong, #saverbro-r0 .sb-user span { line-height:1.35; display:block; padding-top:1px; overflow:visible; }
#saverbro-r0 .sb-page-head .sb-work-toolbar { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; }

/* ── Dark-mode text/border fixes for old elements that used light-dark() ─── */
html[data-theme="dark"] #saverbro-r0 .rd-link { color:#5CC8F5; }
html[data-theme="dark"] #saverbro-r0 .sb-work-row:hover, html[data-theme="dark"] #saverbro-r0 .sb-customer-row:hover { background:var(--c-surface-2); }