/* Shared CRM shell. Navigation state and dimensions never depend on the current page. */
body[data-crm-shell="unified"]{--crm-rail:218px;--crm-rail-closed:64px;--crm-top:52px;--crm-footer:34px;--crm-ink:#102d50;--crm-line:#d4e0ec;font-family:'Segoe UI',Arial,sans-serif;font-size:13px;height:100dvh;margin:0;background:#eaf0f6}
body[data-crm-shell="unified"].pilot-collapsed{--crm-rail:var(--crm-rail-closed)}
body[data-crm-shell="unified"] #app.app-shell{display:grid;width:100%;max-width:100%;height:100dvh;grid-template-columns:var(--crm-rail) minmax(0,1fr);grid-template-rows:var(--crm-top) minmax(0,1fr) var(--crm-footer);min-width:0}
body[data-crm-shell="unified"] #app>.app-top{grid-column:1/-1;grid-row:1;height:var(--crm-top);min-height:0;padding:0 18px;box-sizing:border-box;font:13px 'Segoe UI',Arial,sans-serif}
body[data-crm-shell="unified"] #app>.workspace{grid-column:2;grid-row:2;min-width:0;width:auto;max-width:100%;margin:0;padding:12px 16px;box-sizing:border-box;overflow:auto;font:13px 'Segoe UI',Arial,sans-serif;background:#eaf0f6}
body[data-crm-shell="unified"] #app>.crm-pilot-footer{grid-column:2;grid-row:3;min-width:0;padding:6px 16px;box-sizing:border-box;font-size:10px}
#crm-navigation.pilot-nav{grid-column:1;grid-row:2;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:14px 10px;background:#002050;color:#edf5ff;border-right:1px solid #ffffff1c;overflow-y:auto;overflow-x:hidden;font:13px 'Segoe UI',Arial,sans-serif;z-index:50}
#crm-navigation .pilot-nav-group{width:100%;flex:none;margin:0;position:static}
#crm-navigation .pilot-rail-button{display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:40px;margin:0;padding:10px 9px;background:transparent;border:0;border-radius:5px;color:#edf5ff;font:500 13px/20px 'Segoe UI',Arial,sans-serif;text-align:left;white-space:nowrap;box-sizing:border-box}
#crm-navigation .pilot-rail-button>span{display:block;width:22px;font-size:19px;line-height:20px;color:inherit;flex:none;text-align:center}
#crm-navigation .pilot-rail-button>b{font:600 13px/20px 'Segoe UI',Arial,sans-serif;color:inherit}
#crm-navigation .pilot-rail-button>small{margin-left:auto;font-size:12px;color:inherit}
#crm-navigation .pilot-rail-button:hover,#crm-navigation .pilot-submenu button:hover{background:#ffffff13;color:#fff}
#crm-navigation .pilot-rail-button[aria-current],#crm-navigation .pilot-submenu button[aria-current],#crm-navigation .pilot-submenu button.active{background:#88c7ff24;color:#fff;box-shadow:inset 3px 0 #80bfff;border-color:transparent}
#crm-navigation .pilot-submenu{position:static;width:auto;max-width:none;max-height:none;margin:3px 0 0;padding:3px 0 4px 26px;border:0;border-radius:4px;background:transparent;box-shadow:none;overflow:visible}
#crm-navigation .pilot-submenu[hidden]{display:none!important}
#crm-navigation .pilot-submenu:not([hidden]){display:block!important}
#crm-navigation .pilot-submenu button{display:block;width:100%;height:auto;min-height:34px;margin:0;padding:7px 10px;border:0;border-radius:4px;background:transparent;color:#e5f0fc;font:400 12px/20px 'Segoe UI',Arial,sans-serif;text-align:left;white-space:normal;box-sizing:border-box}
#crm-navigation .pilot-nav-status{margin-top:auto;padding:14px 6px 0;font-size:10px;line-height:1.5;color:#bfd3eb;white-space:normal}
#crm-navigation button:focus-visible{outline:2px solid #a5ddff;outline-offset:1px}
body.pilot-collapsed #crm-navigation{padding:14px 8px;overflow:visible}
body.pilot-collapsed #crm-navigation .pilot-rail-button{justify-content:center;padding:10px 0}
body.pilot-collapsed #crm-navigation .pilot-rail-button>b,body.pilot-collapsed #crm-navigation .pilot-rail-button>small,body.pilot-collapsed #crm-navigation .pilot-nav-status{display:none!important}
body.pilot-collapsed #crm-navigation .pilot-submenu:not([hidden]){position:fixed;left:calc(var(--crm-rail-closed) + 8px);right:auto;width:218px;max-width:calc(100vw - 84px);max-height:calc(100dvh - 76px);overflow:auto;padding:7px;background:#082b55;border:1px solid #31517a;border-radius:7px;box-shadow:0 8px 25px #00205030;z-index:100}
/* All command bars reuse one sizing and typography contract, including registry screens. */
body[data-crm-shell] #app .crm-commandbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:58px!important;height:auto;padding:10px 12px!important;margin:0 0 10px!important;box-sizing:border-box;border:1px solid var(--crm-line);border-radius:7px;background:#fff;color:var(--crm-ink);font:13px 'Segoe UI',Arial,sans-serif}
body[data-crm-shell] #app .crm-commandbar h1{font:650 21px/26px 'Segoe UI',Arial,sans-serif!important;margin:0;padding:0 12px 0 0;border-right:1px solid #dce5ef;color:var(--crm-ink)}
body[data-crm-shell] #app .crm-commandbar .legacy-commands{display:flex;align-items:center;flex:0 1 auto;gap:8px;margin-left:auto;min-width:0;max-width:100%}
body[data-crm-shell] #app .crm-commandbar :is(.people-count,.onex-header-count){font:400 12px/18px 'Segoe UI',Arial,sans-serif;color:#526b85}
body[data-crm-shell] #app .crm-commandbar :is(button,input,select){font:400 12px/18px 'Segoe UI',Arial,sans-serif;min-height:34px;box-sizing:border-box;border-radius:5px}
body[data-crm-shell] #app .crm-commandbar :is(button,.top-search){height:34px;padding:6px 10px}
body[data-crm-shell] #app .crm-commandbar :is(.people-search,.funnel-command-search){height:34px;min-height:34px;box-sizing:border-box}
body[data-crm-shell] #app .crm-commandbar .people-search input{min-height:0;height:30px}
body[data-crm-shell] #app .content-card{min-width:0;max-width:100%;box-sizing:border-box}
body[data-crm-shell] #app .workspace :is(input,select,textarea){font-family:'Segoe UI',Arial,sans-serif;max-width:100%;box-sizing:border-box}
body[data-crm-shell] #app .workspace table{font-family:'Segoe UI',Arial,sans-serif;font-size:12px}
body[data-crm-shell] #app .workspace :is(.filters,.people-filters,.onex-screen-filters){font:12px 'Segoe UI',Arial,sans-serif;gap:8px;padding:10px 12px;margin:0 0 10px;box-sizing:border-box}
/* The board alone owns horizontal overflow. Column width follows available workspace. */
body[data-crm-shell] #app>.workspace:has(.board){display:flex;flex-direction:column}
body[data-crm-shell] #app>.workspace:has(.board)>.content-card{display:flex;flex-direction:column;flex:1;min-height:260px;gap:6px;container:crm-funnel / inline-size}
body[data-crm-shell] #app .board{display:grid;grid-template-columns:repeat(7,minmax(160px,1fr))!important;grid-template-rows:minmax(0,1fr);gap:6px;min-width:0;width:100%;height:auto;min-height:230px;max-height:none;flex:1;overflow:auto;align-items:stretch;padding:0 0 4px;box-sizing:border-box;scrollbar-width:auto;scrollbar-color:#7195b7 #dce6f0}
body[data-crm-shell] #app .board>.column{display:flex;flex-direction:column;min-width:0;width:auto;max-width:none;min-height:0;height:auto;padding:0;overflow:visible}
body[data-crm-shell] #app .board .column-head{flex:none;min-height:34px;height:auto;padding:7px 8px;box-sizing:border-box}
body[data-crm-shell] #app .board .column-list{flex:1;min-height:0;height:auto;max-height:none;overflow-y:auto;padding:7px;box-sizing:border-box}
body[data-crm-shell] #app .board .deal-card{width:auto;max-width:100%;min-width:0;box-sizing:border-box}
.kanban-navigation{display:flex;align-items:center;gap:6px;min-height:28px;flex:none;color:#536b81;font:11px 'Segoe UI',Arial,sans-serif}
.kanban-navigation span{margin-right:auto}.kanban-navigation button{min-height:28px;padding:3px 9px;font:12px 'Segoe UI',Arial,sans-serif;background:#fff;color:#25496a;border:1px solid #c2d2e2;border-radius:4px}
body[data-crm-shell] #app .won-period{display:flex;flex-wrap:wrap;align-items:center;flex:none;gap:4px;padding:5px 7px;min-height:0;height:auto;background:#f5f9fc;border-bottom:1px solid var(--crm-line);font:11px 'Segoe UI',Arial,sans-serif}
body[data-crm-shell] #app .won-period>label{display:flex;align-items:center;gap:5px;flex:1 1 auto;min-width:0;margin:0;padding:0;font:11px 'Segoe UI',Arial,sans-serif}
body[data-crm-shell] #app .won-period :is(select,input){width:auto;min-width:0;max-width:100%;height:26px;min-height:26px;margin:0;padding:3px 5px;background:#fff;color:#21415f;border:1px solid #bdcfe0;border-radius:4px;font:11px 'Segoe UI',Arial,sans-serif}
body[data-crm-shell] #app .won-period>small{display:none}
body[data-crm-shell] #app .won-period label:not(:first-child){flex-basis:100%}
body[data-crm-shell] #app .won-period [role=status]{display:block;flex-basis:100%;font-size:10px}
@media(max-width:700px){body[data-crm-shell] #app.app-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--crm-top) 54px minmax(0,1fr) var(--crm-footer)}body[data-crm-shell] #app>.workspace{grid-column:1;grid-row:3;padding:10px}body[data-crm-shell] #app>.crm-pilot-footer{grid-column:1;grid-row:4;padding:5px 10px}#crm-navigation.pilot-nav,body.pilot-collapsed #crm-navigation{grid-column:1;grid-row:2;display:flex;flex-direction:row;align-items:center;width:100%;padding:5px 8px;gap:6px;overflow:visible}#crm-navigation .pilot-nav-group{width:auto}#crm-navigation .pilot-rail-button{width:auto;min-height:38px;padding:8px;gap:5px}#crm-navigation .pilot-rail-button>b,#crm-navigation .pilot-rail-button>small,#crm-navigation .pilot-nav-status{display:none!important}#crm-navigation .pilot-submenu:not([hidden]),body.pilot-collapsed #crm-navigation .pilot-submenu:not([hidden]){position:fixed;left:10px;right:10px;width:auto;max-width:none;max-height:50dvh;padding:7px;background:#082b55;border:1px solid #31517a;border-radius:7px;overflow:auto;z-index:100}body[data-crm-shell] #app .crm-commandbar .legacy-commands{width:100%;margin-left:0;flex-wrap:wrap}body[data-crm-shell] #app .crm-commandbar .people-search{flex-basis:100%;max-width:none}body[data-crm-shell] #app .crm-commandbar h1{font-size:20px!important}}/* Shared data/control sizing; content and permissions remain owned by existing views. */
body[data-crm-shell] #app .workspace table th{font:600 11px/16px 'Segoe UI',Arial,sans-serif;letter-spacing:.3px;padding:8px;color:#405c77;background:#f1f5f9}
body[data-crm-shell] #app .workspace table td{font:400 12px/18px 'Segoe UI',Arial,sans-serif;padding:8px}
body[data-crm-shell] #app .workspace :is(.filters,.people-filters,.onex-screen-filters) :is(input:not([type=checkbox]),select){height:34px;min-height:34px;font:12px 'Segoe UI',Arial,sans-serif;border:1px solid #c1d1df;border-radius:5px;padding:6px 9px;color:#24435e;background:#fff}
@media(max-width:700px){body[data-crm-shell] #app .people-table td{padding:0}}
/* Seven equal tracks when the actual workspace can hold compact readable cards. */
@container crm-funnel (min-width:840px){body[data-crm-shell] #app .board{grid-template-columns:repeat(7,minmax(0,1fr))!important}}
body[data-crm-shell] #app .board .column-head{display:flex;flex-wrap:wrap;align-content:start;align-items:baseline;gap:3px 5px;min-height:56px;padding:6px;overflow:visible}
body[data-crm-shell] #app .board .stage-name{flex-basis:100%;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font-size:11px;line-height:15px}
body[data-crm-shell] #app .board .stage-count{flex:none;font-size:10px;white-space:normal}
body[data-crm-shell] #app .board .stage-total{margin-left:auto;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:10px;line-height:14px}
body[data-crm-shell] #app .board .column-list{padding:5px}
body[data-crm-shell] #app .board .deal-card{padding:7px 6px;overflow:visible}
body[data-crm-shell] #app .board .deal-card :is(h3,p,strong,small,span){white-space:normal;text-overflow:clip;overflow-wrap:anywhere;max-width:100%}
body[data-crm-shell] #app .board .deal-card h3{font-size:12px;line-height:1.35}
body[data-crm-shell] #app .board .deal-card .onex-op-value{font-size:14px;letter-spacing:0}
body[data-crm-shell] #app .board .deal-card .row-actions{display:flex;flex-wrap:wrap;gap:4px}
body[data-crm-shell] #app .board .deal-card .row-actions button{min-width:0;max-width:100%;height:auto;min-height:26px;white-space:normal;overflow-wrap:anywhere;padding:4px 5px!important}
body[data-crm-shell] #app .won-period>label{flex-wrap:wrap;max-width:100%}
body[data-crm-shell] #app .won-period select{flex:1 1 90px;width:100%}