/* Muted section colours: consistent in navigation, headers and cards. */
html{--rc-tone-blue:#84b5d5;--rc-tone-mint:#8cbfaa;--rc-tone-amber:#d0b27b;--rc-tone-teal:#7fbdbb;--rc-tone-orange:#cb9d7e;--rc-tone-violet:#b5a3cf}
[data-rc-tone=blue]{--section-color:var(--rc-tone-blue)}[data-rc-tone=mint]{--section-color:var(--rc-tone-mint)}[data-rc-tone=amber]{--section-color:var(--rc-tone-amber)}[data-rc-tone=teal]{--section-color:var(--rc-tone-teal)}[data-rc-tone=orange]{--section-color:var(--rc-tone-orange)}[data-rc-tone=violet]{--section-color:var(--rc-tone-violet)}
html[data-theme=light] #main,html[data-theme=light] .app .shell{--rc-tone-blue:#42789c;--rc-tone-mint:#4c806a;--rc-tone-amber:#947335;--rc-tone-teal:#3e807d;--rc-tone-orange:#a16c49;--rc-tone-violet:#80669e}
.rc-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}
.rc-icon svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
html[data-theme] body .sidebar :is(#main-nav,#crm-main-nav) a[data-rc-tone]{color:var(--rail-ink);border:1px solid transparent;transition:background-color .16s,border-color .16s;box-shadow:none}
html[data-theme] body .sidebar :is(#main-nav,#crm-main-nav) a[data-rc-tone] i.rc-icon{display:inline-flex;flex:0 0 26px;width:26px;height:26px;margin:0;border:1px solid color-mix(in srgb,var(--section-color) 22%,transparent);border-radius:7px;background:color-mix(in srgb,var(--section-color) 12%,transparent);color:var(--section-color);box-shadow:inset 0 1px 0 #ffffff08;font-style:normal}
html[data-theme] body .sidebar :is(#main-nav,#crm-main-nav) a[data-rc-tone] i svg{width:16px;height:16px}
html[data-theme] body .sidebar :is(#main-nav,#crm-main-nav) a[data-rc-tone]:is(.active,[aria-current=page]){background:color-mix(in srgb,var(--section-color) 13%,var(--rail));border-color:color-mix(in srgb,var(--section-color) 26%,transparent);box-shadow:inset 2px 0 var(--section-color);color:#e3e6e8}
html[data-theme] body .sidebar :is(#main-nav,#crm-main-nav) a[data-rc-tone]:is(.active,[aria-current=page]) i{background:color-mix(in srgb,var(--section-color) 22%,transparent);border-color:color-mix(in srgb,var(--section-color) 40%,transparent)}
html[data-theme] body .sidebar :is(#main-nav,#crm-main-nav) a[data-rc-tone]:hover{background:color-mix(in srgb,var(--section-color) 9%,var(--rail));border-color:color-mix(in srgb,var(--section-color) 21%,transparent)}
html body .sidebar #crm-main-nav a{gap:8px;min-height:36px;border-radius:7px}
html body .rc-page-heading{display:flex;align-items:center;gap:11px;letter-spacing:-.4px}
html body .rc-heading-icon{width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:color-mix(in srgb,var(--section-color) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--section-color) 24%,var(--line));color:var(--section-color);box-shadow:inset 0 1px 0 #ffffff08,0 2px 4px #0000000c}
html body .rc-heading-icon svg{width:21px;height:21px}
html[data-theme] body .dashboard-tile[data-rc-tone]{border-radius:11px;border-color:var(--line);box-shadow:inset 0 1px 0 #ffffff06,0 2px 5px #0000000a}
html[data-theme] body .dashboard-tile[data-rc-tone] .dashboard-icon{background:color-mix(in srgb,var(--section-color) 11%,var(--surface));color:var(--section-color);border:1px solid color-mix(in srgb,var(--section-color) 24%,var(--line));box-shadow:inset 0 1px 0 #ffffff08,0 2px 4px #0000000c;border-radius:9px}
html body .dashboard-icon svg{width:21px;height:21px}
html[data-theme] .dashboard-tile[data-rc-tone] .dashboard-link{color:var(--section-color)}
html body .dashboard-stats>a[data-rc-tone]{border-top:2px solid color-mix(in srgb,var(--section-color) 65%,var(--line))}
html[data-theme] body .dashboard-reference a[data-rc-tone]{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--section-color)}
html body button.rc-action{display:inline-flex;align-items:center;justify-content:center;gap:6px}
html body .rc-action-icon svg{width:15px;height:15px;stroke-width:1.8}
html[data-theme] body #main :is(.primary,.kb-create){background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent));border:1px solid color-mix(in srgb,var(--accent) 75%,#000);color:var(--accent-ink);box-shadow:inset 0 1px 0 #ffffff20,0 2px 3px #0000001c}
html[data-theme] body #main :is(.secondary,.quiet){box-shadow:inset 0 1px 0 #ffffff08,0 1px 2px #0000000c}
html[data-theme] body #main :is(.kb-column,.pipeline>section,.crm-pipeline>section){border-radius:10px}
html[data-theme] body #main .kb-col-head{border-bottom:1px solid var(--line);padding-bottom:9px}
html[data-theme] body #main .kb-col-head>div>i{background:var(--stage);box-shadow:0 0 0 4px color-mix(in srgb,var(--stage) 12%,transparent)}
html[data-theme] body #main .kb-col-head>div>span{background:color-mix(in srgb,var(--stage) 13%,var(--surface));color:var(--ink);border-radius:6px;padding:2px 7px}
html[data-theme] body #main :is(.kb-card,.deal,.stock-card){border-radius:9px;box-shadow:0 2px 4px #0000000a}
html[data-theme] body #main :is(.work-table,.kb-list-table,.stock-table) thead th{background:var(--raised);color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
html[data-theme] body #main :is(.crm-tabs,.doc-tabs,.cmp-tabs) button.active{background:color-mix(in srgb,var(--section-color,var(--focus)) 13%,var(--surface));border-color:color-mix(in srgb,var(--section-color,var(--focus)) 40%,var(--line));color:var(--ink)}
html[data-theme] .rail nav button[data-rc-tone] svg{padding:5px;box-sizing:content-box;border-radius:8px;background:color-mix(in srgb,var(--section-color) 13%,transparent);color:var(--section-color);border:1px solid color-mix(in srgb,var(--section-color) 22%,transparent)}
html[data-theme] .rail nav button[data-rc-tone].selected{background:color-mix(in srgb,var(--section-color) 12%,var(--rail));box-shadow:inset 2px 0 var(--section-color);border-color:color-mix(in srgb,var(--section-color) 28%,transparent)}
@media(hover:hover){html[data-theme] body .dashboard-tile[data-rc-tone]:hover{border-color:color-mix(in srgb,var(--section-color) 50%,var(--line));background:var(--raised);transform:none}html[data-theme] body #main :is(.primary,.kb-create):hover:not(:disabled){background:var(--accent-hover)}}
@media(max-width:760px){html body .rc-heading-icon{width:32px;height:32px;flex-basis:32px;border-radius:9px}html body .rc-page-heading{gap:9px}html body .sidebar :is(#main-nav,#crm-main-nav) a[data-rc-tone]{min-height:40px}}
@media(prefers-reduced-motion:reduce){html body [data-rc-tone]{transition:none!important}}
@media print{.rc-heading-icon,.rc-action-icon{display:none!important}}

html[data-theme] body .branch-head[data-rc-tone] .branch-icon{background:color-mix(in srgb,var(--section-color) 12%,var(--surface));color:var(--section-color);border:1px solid color-mix(in srgb,var(--section-color) 26%,var(--line));box-shadow:inset 0 1px 0 #ffffff08,0 2px 3px #0001;border-radius:9px}
html body .branch-icon svg{width:20px;height:20px}

html[data-theme] body #main .card[data-rc-tone] .card-icon{width:34px;height:34px;margin-bottom:12px;background:color-mix(in srgb,var(--section-color) 11%,var(--surface));color:var(--section-color);border:1px solid color-mix(in srgb,var(--section-color) 24%,var(--line));border-radius:9px;box-shadow:inset 0 1px 0 #ffffff08,0 2px 3px #0000000c}

/* Conversation lists use the same surfaces as the rest of the application. */
html[data-theme] body #main .room-item{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:9px;box-shadow:inset 0 1px 0 #ffffff05}
html[data-theme] body #main .room-item strong{color:var(--ink)}
html[data-theme] body #main .room-item small{color:var(--muted)}
html[data-theme] body #main .room-item.active{background:var(--selected);border-color:var(--focus);box-shadow:inset 2px 0 var(--focus)}
html[data-theme] body #main .room-item:hover{background:var(--raised);border-color:var(--field-line)}

/* Durable tabs and personal bookmarks. */
html body .office-tab-strip .office-favorites-button{flex:0 0 30px;min-width:30px;padding:4px;font-size:20px;line-height:1;color:var(--rail-muted)}
html body .office-tab-strip .office-favorites-button[data-saved=true]{color:#d0b27b;background:#d0b27b14}
html body .office-tab-strip .office-add-tab{flex:0 0 auto;white-space:nowrap}
html body .office-tab-strip>span.office-tab-group{flex:0 1 160px;min-width:42px}
html body .office-tab-group>button:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme] body dialog.office-favorites-dialog{width:min(560px,calc(100vw - 28px));max-height:80dvh;overflow:auto;padding:20px;border:1px solid var(--line)!important;border-radius:14px!important;background:var(--surface);color:var(--ink);box-shadow:0 18px 60px #0005!important}
.office-favorites-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;background:none}
.office-favorites-dialog h2{margin:0;font-size:20px}.office-favorites-dialog>p{font-size:13px;line-height:1.6;margin:0 0 16px}
html body .office-favorites-dialog button{font-family:inherit;border:1px solid var(--line);border-radius:7px;background:var(--raised);color:var(--ink);padding:7px 11px;min-height:34px;box-shadow:none}
html body .office-favorites-dialog>.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.office-favorites-list{display:grid;gap:6px;margin-top:16px}.office-favorite-row{display:flex;align-items:center;gap:5px;padding:5px;border:1px solid var(--line);border-radius:9px;background:var(--inset)}
html body .office-favorite-row .office-favorite-open{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent;border-color:transparent}
.office-favorite-edit{display:flex;flex:1;gap:6px;flex-wrap:wrap}.office-favorite-edit input{flex:1;min-width:140px}.office-favorites-empty{padding:20px 10px;text-align:center;color:var(--muted);font-size:13px}
@media(max-width:760px){html body .office-favorites-dialog button{min-height:44px}.office-favorites-dialog{padding:15px!important}html body .office-tab-strip .office-add-tab{max-width:85px;font-size:11px}}

html body .office-tab-strip{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}

.office-workspace-sync-status{font-size:12px;color:var(--muted);padding:9px 11px;background:var(--inset);border:1px solid var(--line);border-radius:7px}
