/* WOTTT 04.55.2 r1 — Phase A · Shared visual chrome
 * Presentation-only CSS. Existing routing, permission checks, data tables,
 * action handlers, provider controls and working dialogs remain unchanged.
 * Decorative hues identify modules, NOT operational status or permissions.
 */
:root{--chrome-ocean:#427ade;--chrome-teal:#128e9d;--chrome-rose:#c6588e;--chrome-violet:#7d65cf;--chrome-amber:#bd7b23;--chrome-green:#268c6d;--chrome-indigo:#5871d8;--chrome-slate:#567891;--chrome-line:color-mix(in srgb,var(--ui-line) 83%,#9bb6da);--chrome-elevate:0 10px 30px rgba(37,67,111,.065)}
/* 1. Consistent, lively but compact navigation rail. */
.app-rail{background:linear-gradient(175deg,color-mix(in srgb,var(--ui-rail) 91%,#d4e4ff),var(--ui-rail) 45%,color-mix(in srgb,var(--ui-rail) 92%,#ebe3ff));border-color:var(--chrome-line)}
.app-rail .rail-logo{box-shadow:0 4px 12px #6e8b4a22,0 0 0 1px #e1eab2;transition:transform .18s ease}
.app-rail .rail-logo:hover{transform:translateY(-1px)}
.app-rail .rail-item{--nav-hue:var(--chrome-slate);position:relative;isolation:isolate;color:var(--nav-hue)!important;font-weight:650;transition:background-color .18s ease,transform .18s ease;overflow:visible}
.app-rail .rail-item:after{content:"";position:absolute;z-index:-1;top:2px;left:50%;transform:translateX(-50%);width:32px;height:29px;border-radius:10px;background:color-mix(in srgb,var(--nav-hue) 12%,var(--ui-surface));border:1px solid color-mix(in srgb,var(--nav-hue) 13%,transparent);transition:background-color .18s ease,box-shadow .18s ease}
.app-rail .rail-item .ui-icon{width:21px;height:21px;filter:drop-shadow(0 1px 0 #ffffff66)}
.app-rail .rail-item small{position:relative;z-index:1;font-size:8px;color:var(--ui-muted);font-weight:620;letter-spacing:-.09px}
.app-rail .rail-item:hover:not(:disabled){background:color-mix(in srgb,var(--nav-hue) 8%,var(--ui-rail))!important;transform:translateY(-1px);border-color:transparent}
.app-rail .rail-item:hover:not(:disabled):after{background:color-mix(in srgb,var(--nav-hue) 19%,var(--ui-surface));box-shadow:0 2px 8px color-mix(in srgb,var(--nav-hue) 11%,transparent)}
.app-rail .rail-item.active{background:color-mix(in srgb,var(--nav-hue) 12%,var(--ui-rail))!important}
.app-rail .rail-item.active:before{background:var(--nav-hue);border-radius:6px;width:3px}
.app-rail .rail-item.active:after{background:color-mix(in srgb,var(--nav-hue) 23%,var(--ui-surface));border-color:color-mix(in srgb,var(--nav-hue) 26%,transparent)}
.app-rail .rail-item.active small{color:var(--nav-hue);font-weight:760}
.app-rail .rail-item[data-action=show-dashboard]{--nav-hue:var(--chrome-ocean)}
.app-rail .rail-item[data-action=show-inbox]{--nav-hue:var(--chrome-teal)}
.app-rail .rail-item[data-action=show-social]{--nav-hue:var(--chrome-rose)}
.app-rail .rail-item[data-action=show-leads]{--nav-hue:var(--chrome-indigo)}
.app-rail .rail-item[data-action=show-opportunities]{--nav-hue:var(--chrome-amber)}
.app-rail .rail-item[data-action=show-contacts]{--nav-hue:var(--chrome-violet)}
.app-rail .rail-item[data-action=show-tasks]{--nav-hue:var(--chrome-green)}
.app-rail .rail-item[data-action=show-workflows]{--nav-hue:#8c70b4}
.app-rail .rail-item[data-action=show-reports]{--nav-hue:var(--chrome-slate)}
.app-rail .rail-item[data-action=show-settings]{--nav-hue:#778398}
/* notification counts remain authoritative, never generated by CSS */
.app-rail .rail-count{z-index:3;box-shadow:0 0 0 1px var(--ui-rail)}
.app-rail .rail-mini-action{border-radius:11px;color:var(--chrome-violet);background:color-mix(in srgb,var(--chrome-violet) 10%,var(--ui-rail))}
.app-rail .rail-mini-action[data-panel=notifications]{color:var(--chrome-rose);background:color-mix(in srgb,var(--chrome-rose) 10%,var(--ui-rail))}
.app-rail .rail-mini-action:hover:not(:disabled){background:color-mix(in srgb,var(--chrome-violet) 18%,var(--ui-rail))}
.app-rail .rail-avatar-button{border-radius:50%;box-shadow:0 0 0 2px color-mix(in srgb,var(--chrome-ocean) 20%,transparent)}
/* 2. Shared workspace headers with visual hierarchy, no structural changes. */
.workspace .professional-topbar,
.workspace .ow-header,
.workspace .tw-head,
.workspace .rh-top,
.workspace .sw-top,
.workspace .ww-title{background:linear-gradient(110deg,color-mix(in srgb,var(--ui-surface) 92%,#dbeaff),var(--ui-surface) 53%,color-mix(in srgb,var(--ui-surface) 95%,#efe7ff));border-bottom-color:var(--chrome-line)}
.workspace .professional-topbar .topbar-title h2,
.workspace .ow-header h1,
.workspace .tw-head h1,
.workspace .rh-top h1,
.workspace .sw-top h1,
.workspace .ww-title h1{color:var(--ui-ink);letter-spacing:-.35px;font-weight:760}
.workspace .professional-topbar .topbar-title h2:before{content:"";display:inline-block;width:8px;height:8px;vertical-align:2px;margin-right:9px;border-radius:3px;background:linear-gradient(145deg,var(--ui-accent),var(--chrome-violet));box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 9%,transparent)}
/* 3. Lightweight secondary navigation and general information surfaces. */
.workspace :is(.ow-sidebar,.tw-sidebar,.rh-report-nav,.sw-nav){background:color-mix(in srgb,var(--ui-surface) 96%,#eaf1ff);border-color:var(--chrome-line)}
.workspace :is(.ow-nav-item,.tw-nav-item,.rh-report-nav nav button,.sw-nav button).active{border-radius:10px;background:color-mix(in srgb,var(--ui-accent) 10%,var(--ui-surface));color:var(--ui-accent);font-weight:700}
.workspace :is(.ow-nav-item,.tw-nav-item,.rh-report-nav nav button,.sw-nav button):hover:not(:disabled){border-radius:10px}
.workspace :is(.db-card,.ow-card,.tw-task-card,.cw-table,.rh-kpi,.sw-channel-admin-card){border-color:var(--chrome-line);box-shadow:var(--chrome-elevate)}
/* 4. Shared overlays and dialogs, retain widths, focus trap, layering and scroll. */
.workspace .global-panel,.workspace .db-modal,.workspace .action-dialog{border-color:var(--chrome-line);box-shadow:0 24px 70px rgba(27,48,84,.18);border-radius:16px}
.workspace .global-panel>header,
.workspace .db-modal .db-drill>header,
.workspace .action-dialog>header{background:linear-gradient(110deg,color-mix(in srgb,var(--ui-surface) 88%,#dfebff),color-mix(in srgb,var(--ui-surface) 95%,#f1e6ff));border-bottom-color:var(--chrome-line)}
.workspace .global-panel>header h2,.workspace .db-modal .db-drill>header h3{color:var(--ui-ink);font-weight:750}
.workspace .global-panel>header h2:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--chrome-violet);margin-right:9px;vertical-align:2px}
/* Leave danger, destructive, message-send, and guarded conversion buttons untouched. */
.workspace .global-panel-body :is(.settings-shortcuts>button,.mode-option,.accent-option){border-radius:11px;border-color:var(--chrome-line)}
.workspace .global-panel-body :is(.settings-shortcuts>button,.mode-option,.accent-option):hover:not(:disabled){border-color:color-mix(in srgb,var(--ui-accent) 35%,var(--ui-line))}
/* 5. Dark theme and a11y */
html[data-theme=dark] .app-rail{background:linear-gradient(180deg,#171f30,var(--ui-rail));border-color:var(--ui-line)}
html[data-theme=dark] .app-rail .rail-item{color:color-mix(in srgb,var(--nav-hue) 65%,#c8d7f6)!important}
html[data-theme=dark] .app-rail .rail-item:after{background:color-mix(in srgb,var(--nav-hue) 19%,var(--ui-rail));border-color:color-mix(in srgb,var(--nav-hue) 18%,var(--ui-rail))}
html[data-theme=dark] .app-rail .rail-item.active small{color:color-mix(in srgb,var(--nav-hue) 60%,#d4dfff)}
html[data-theme=dark] .app-rail .rail-item small{color:#aebdd4}
html[data-theme=dark] .workspace .global-panel,
html[data-theme=dark] .workspace .db-modal,
html[data-theme=dark] .workspace .action-dialog{box-shadow:0 22px 66px #0008}
html[data-theme=dark] .workspace .professional-topbar,
html[data-theme=dark] .workspace .ow-header,
html[data-theme=dark] .workspace .tw-head,
html[data-theme=dark] .workspace .rh-top,
html[data-theme=dark] .workspace .sw-top,
html[data-theme=dark] .workspace .ww-title,
html[data-theme=dark] .workspace .global-panel>header,
html[data-theme=dark] .workspace .db-modal .db-drill>header,
html[data-theme=dark] .workspace .action-dialog>header{background:linear-gradient(100deg,#242f46,var(--ui-surface) 76%,#2a2641);border-color:var(--ui-line)}
@media(max-width:720px){.app-rail .rail-item:after{width:29px;height:27px;top:1px}.app-rail .rail-item{transition:none}.app-rail .rail-item.active:before{width:auto}.app-rail .rail-item .ui-icon{width:19px;height:19px}.app-rail .rail-item small{font-size:7px}.app-rail .rail-logo{display:none}}
@media(prefers-reduced-motion:reduce){.app-rail .rail-item,.app-rail .rail-item:after,.app-rail .rail-logo{transition:none}}