/* App Shell */ .soc-app-shell { min-height: 100dvh; height: 100dvh; display: grid; grid-template-rows: auto 1fr; overflow: hidden; } .soc-profile-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;position:relative;z-index:25} .soc-profile-page-header h1,.soc-profile-card-heading h2{margin:0;color:var(--soc-text);letter-spacing:-.03em} .soc-profile-page-header h1{font-size:clamp(1.55rem,2.8vw,2rem)} .soc-profile-page-header p{margin:6px 0 0;color:var(--soc-text-sub);font-size:var(--soc-text-sm)} .soc-profile-scope-shell{position:relative;width:min(300px,100%)} .soc-profile-scope-trigger{width:100%;display:flex;align-items:center;gap:12px;min-height:66px;padding:10px 14px;border:1px solid var(--soc-border);border-radius:16px;background:#fff;color:var(--soc-text);text-align:left;box-shadow:0 8px 24px rgba(16,36,64,.06);cursor:pointer} .soc-profile-scope-trigger:hover,.soc-profile-scope-trigger:focus-visible{border-color:color-mix(in srgb,var(--soc-primary) 42%,var(--soc-border));outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--soc-primary) 12%,transparent)} .soc-profile-scope-trigger-icon{width:42px;height:42px;flex:0 0 42px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--soc-primary);background:color-mix(in srgb,var(--soc-primary) 12%,#fff)} .soc-profile-scope-trigger-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .soc-profile-scope-trigger-copy{display:grid;gap:3px;min-width:0;flex:1} .soc-profile-scope-trigger-copy small{color:var(--soc-text-sub);font-size:11px;font-weight:700} .soc-profile-scope-trigger-copy strong{overflow:hidden;color:var(--soc-text);font-size:15px;text-overflow:ellipsis;white-space:nowrap} .soc-profile-scope-chevron{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2} .soc-profile-scope-trigger[aria-expanded="true"] .soc-profile-scope-chevron{transform:rotate(180deg)} .soc-profile-scope-popover{position:absolute;top:calc(100% + 10px);right:0;width:min(370px,calc(100vw - 32px));padding:22px 22px 0;border:1px solid var(--soc-border);border-radius:22px;background:#fff;box-shadow:0 18px 46px rgba(16,36,64,.16);z-index:40} .soc-profile-scope-popover-head,.soc-profile-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px} .soc-profile-scope-popover-head h2{margin:0 0 16px;font-size:20px} .soc-profile-scope-close{border:0;background:transparent;color:var(--soc-text-sub);font-size:25px;line-height:1;cursor:pointer} .soc-profile-scope-popover .soc-master-query-scope{display:block;margin:0;padding:0;border:0;background:transparent} .soc-profile-scope-popover .soc-master-query-scope-fields{display:grid;gap:14px} .soc-profile-scope-popover .soc-master-query-scope-field{display:grid;gap:7px} .soc-profile-scope-popover .soc-master-query-scope-field>span{color:var(--soc-text-sub);font-size:13px;font-weight:700} .soc-profile-scope-popover .soc-master-query-scope-field select{min-height:48px;width:100%;padding:0 14px;border:1px solid var(--soc-border);border-radius:12px;background:#fff;color:var(--soc-text);font-size:14px;font-weight:650} .soc-profile-scope-popover #masterQueryScopeReloadBtn,.soc-profile-scope-popover .soc-master-query-scope-status{display:none} .soc-profile-scope-current{margin:18px -22px 0;padding:17px 22px 18px;color:var(--soc-text-sub);background:#f7f9fc;border-top:1px solid #edf0f5;font-size:14px;font-weight:700} .soc-profile-top-shell{grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr);gap:16px;padding:20px 22px;border:0;background:transparent;overflow:visible} .soc-profile-account-strip,.soc-profile-security-card,.soc-profile-kpi-card,.soc-profile-activity-card,.soc-profile-operations-card{border:1px solid var(--soc-border);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(16,36,64,.04)} .soc-profile-account-strip{display:flex;align-items:center;justify-content:flex-start;gap:22px;padding:20px 22px} .soc-profile-account-strip .soc-profile-hero-avatar{width:120px;height:120px;flex:0 0 120px;border-radius:50%} .soc-profile-identity-copy{min-width:0;display:grid;gap:9px} .soc-profile-identity-copy .soc-profile-account-head h3{margin:0;font-size:clamp(1.35rem,2.4vw,1.75rem)} .soc-profile-identity-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:10px;padding-top:12px;border-top:1px solid #edf0f5} .soc-profile-identity-facts>span{display:grid;gap:5px}.soc-profile-identity-facts small{color:var(--soc-text-sub);font-size:11px}.soc-profile-identity-facts strong{color:var(--soc-text);font-size:14px} .soc-profile-identity-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:5px} .soc-profile-status-value{display:inline-flex;align-items:center;gap:6px}.soc-profile-status-value i,.soc-profile-security-dot{width:9px;height:9px;display:inline-block;border-radius:50%;background:#2fb344} .soc-profile-security-card{display:grid;align-content:start;gap:16px;padding:20px 22px}.soc-profile-card-heading h2{font-size:18px}.soc-profile-security-icon{color:var(--soc-text);font-size:27px} .soc-profile-security-card dl,.soc-profile-operations-list{display:grid;gap:0;margin:0}.soc-profile-security-card dl>div,.soc-profile-operations-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;border-top:1px solid #edf0f5}.soc-profile-security-card dt,.soc-profile-operations-list dt{color:var(--soc-text-sub);font-size:13px}.soc-profile-security-card dd,.soc-profile-operations-list dd{margin:0;color:var(--soc-text);font-size:13px;font-weight:650;text-align:right}.soc-profile-security-card dd{display:inline-flex;align-items:center;gap:6px} .soc-profile-kpi-shell{padding:0 22px}.soc-profile-kpi-shell .soc-profile-counter-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .soc-profile-kpi-card{min-height:120px;display:flex;align-items:center;gap:14px;padding:18px 20px;color:var(--soc-text);text-align:left;cursor:pointer}.soc-profile-kpi-card>span:last-child{display:grid;gap:5px;min-width:0}.soc-profile-kpi-card small,.soc-profile-kpi-card em{color:var(--soc-text-sub);font-size:12px;font-style:normal}.soc-profile-kpi-card strong{display:block;font-size:25px;line-height:1.05}.soc-profile-kpi-card em b{color:var(--soc-primary)}.soc-profile-kpi-card em b.is-positive{color:#2fb344} .soc-profile-kpi-icon{width:52px;height:52px;flex:0 0 52px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--soc-border);border-radius:50%;color:var(--soc-text);font-size:22px}.soc-profile-kpi-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.soc-profile-kpi-card:focus-visible{outline:2px solid color-mix(in srgb,var(--soc-primary) 42%,transparent);outline-offset:2px} .soc-profile-main-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr);gap:16px;padding:0 22px}.soc-profile-activity-card,.soc-profile-operations-card{min-width:0;padding:20px 22px}.soc-profile-text-link{border:0;background:transparent;color:var(--soc-primary);font-size:13px;font-weight:700;cursor:pointer}.soc-profile-activity-table{margin-top:13px}.soc-profile-activity-table-head,.soc-profile-activity-table-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(126px,.9fr) minmax(86px,.75fr) minmax(64px,.45fr);gap:12px;align-items:center}.soc-profile-activity-table-head{padding:9px 8px;border-top:1px solid var(--soc-border);border-bottom:1px solid var(--soc-border);color:var(--soc-text-sub);font-size:12px;font-weight:700}.soc-profile-activity-table-row{min-height:44px;padding:8px;border-bottom:1px solid #edf0f5;color:var(--soc-text);font-size:13px}.soc-profile-activity-table-row>span:first-child{position:relative;padding-left:16px;font-weight:650}.soc-profile-activity-table-row>span:first-child::before{content:"";position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;background:#7a879c;transform:translateY(-50%)}.soc-profile-activity-table-row.is-primary>span:first-child::before{background:var(--soc-primary)}.soc-profile-activity-status{justify-self:start;padding:4px 9px;border:1px solid #bde8c7;border-radius:999px;color:#25833a;background:#effbf2;font-size:11px;font-weight:700}.soc-profile-operations-card .soc-profile-card-heading{margin-bottom:8px}.soc-profile-operations-list>div{min-height:48px}.soc-profile-legacy-data{display:none!important} @media (max-width:1100px){.soc-profile-top-shell,.soc-profile-main-grid{grid-template-columns:1fr}.soc-profile-scope-shell{width:min(270px,100%)}} @media (max-width:760px){.soc-profile-page-header{display:grid}.soc-profile-scope-shell{width:100%}.soc-profile-account-strip{align-items:flex-start;flex-direction:column}.soc-profile-identity-facts,.soc-profile-kpi-shell .soc-profile-counter-row{grid-template-columns:repeat(2,minmax(0,1fr))}.soc-profile-main-grid{padding-inline:0}.soc-profile-kpi-shell,.soc-profile-top-shell{padding-inline:0}.soc-profile-activity-table{overflow-x:auto}.soc-profile-activity-table-head,.soc-profile-activity-table-row{min-width:540px}} /* Dashboard is now a Home breadcrumb subview; keep the legacy Analytics sidebar entry hidden globally. */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-item-key="hq-ops-analytics"], html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-item-key="field-ops-analytics"] { display: none !important; } /* ===== Analytics dashboard compact layout final load-order guard (2026-04-27) ===== */ @media screen and (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) main.container.ds-page.admin-layout:has(#analyticsView.is-active) { overflow-x: hidden !important; overflow-y: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel:has(#analyticsView.is-active) { height: auto !important; max-height: none !important; min-height: 100% !important; overflow: visible !important; padding: 10px 14px 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsDashboardV2, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsContentWrap, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-board { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsDashboardV2 { padding: 12px 16px 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-v2-header { margin-bottom: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-board, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroRow { gap: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsAnalysisBoard { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.36fr) !important; gap: 14px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active :is(#analyticsTrendPanel, #analyticsPatternPanel) { min-height: 348px !important; height: auto !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsTrendPanel .soc-analytics-chart-shell { flex: 1 1 auto !important; min-height: 0 !important; display: grid !important; grid-template-rows: minmax(0, 1fr) auto !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 20px 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsTrendPanel .soc-analytics-line-chart { align-self: end !important; width: 100% !important; height: 176px !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsTrendAxis { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 4px 0 0 !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsLiveActivityBreakdown { flex: 0 0 auto !important; margin: 0 20px 14px !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPatternPanel .soc-analytics-pattern-shell { flex: 1 1 auto !important; min-height: 0 !important; display: grid !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto !important; justify-items: stretch !important; overflow: hidden !important; padding: 0 18px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-pattern-grid-board { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; align-content: start !important; grid-template-columns: 30px repeat(24, minmax(0, 1fr)) !important; gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-pattern-cell-board { min-height: 22px !important; border-radius: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPatternPanel .soc-analytics-pattern-footer { align-self: end !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-top: 6px !important; padding: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPatternPanel .soc-analytics-pattern-legend { flex: 0 1 auto !important; flex-wrap: wrap !important; min-width: 0 !important; max-width: 100% !important; } } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 { --dashboard-card-border: #dce4ee; --dashboard-card-radius: 12px; --dashboard-card-bg: #ffffff; --dashboard-gap: 12px; gap: var(--dashboard-gap) !important; padding: 14px 18px 20px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRow#analyticsHeroRow { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: var(--dashboard-gap) !important; align-items: stretch !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack { grid-column: span 8 !important; display: block !important; height: 172px !important; min-height: 172px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-board-card-body { width: 100% !important; height: 100% !important; padding: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-rack { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--dashboard-gap) !important; width: 100% !important; height: 100% !important; margin: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile { min-width: 0 !important; height: 172px !important; min-height: 172px !important; padding: 18px 18px 16px !important; border: 1px solid var(--dashboard-card-border) !important; border-radius: var(--dashboard-card-radius) !important; background: var(--dashboard-card-bg) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important; cursor: pointer !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile:hover { border-color: #ffb181 !important; box-shadow: 0 6px 18px rgba(255, 102, 20, 0.08) !important; transform: translateY(-1px) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile:focus-visible, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsLiveActivityBreakdown:focus-visible, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-pattern-cell:focus-visible { outline: 3px solid rgba(255, 102, 20, 0.28) !important; outline-offset: 2px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard { grid-column: span 4 !important; height: 172px !important; min-height: 172px !important; padding: 0 !important; border: 1px solid var(--dashboard-card-border) !important; border-radius: var(--dashboard-card-radius) !important; background: var(--dashboard-card-bg) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-board-card-body--health { width: 100% !important; height: 100% !important; padding: 14px 18px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-panel { grid-template-rows: auto auto minmax(0, 1fr) !important; gap: 8px !important; height: 100% !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-legend { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-item { min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(360px, var(--soc-dashboard-risk-score-column)) minmax(0, var(--soc-dashboard-risk-trend-column)) !important; gap: var(--soc-dashboard-gap) !important; height: var(--soc-dashboard-risk-height) !important; min-height: var(--soc-dashboard-risk-height) !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-score-pane, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-trend-pane { min-width: 0 !important; height: var(--soc-dashboard-risk-height) !important; min-height: var(--soc-dashboard-risk-height) !important; overflow: hidden !important; border: 1px solid var(--dashboard-card-border) !important; border-radius: var(--soc-dashboard-panel-radius) !important; background: var(--dashboard-card-bg) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-score-pane { padding: 16px 18px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-score-content { display: grid !important; grid-template-columns: var(--soc-dashboard-risk-gauge-size) minmax(0, 1fr) !important; align-items: center !important; gap: 22px !important; height: calc(100% - 34px) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-wrap, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-v2-risk-gauge { width: var(--soc-dashboard-risk-gauge-size) !important; height: var(--soc-dashboard-risk-gauge-size) !important; min-width: var(--soc-dashboard-risk-gauge-size) !important; min-height: var(--soc-dashboard-risk-gauge-size) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-v2-risk-gauge .progress { transform: none !important; transform-origin: 60px 60px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria { align-self: center !important; padding-left: 22px !important; border-left: 1px solid #e3e9f1 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-level-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria-list { display: grid !important; gap: 6px !important; margin-top: 12px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria-item { display: grid !important; grid-template-columns: 8px 42px 1fr !important; align-items: center !important; gap: 8px !important; min-height: 24px !important; border-bottom: 1px solid #edf1f6 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-trend-pane { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; padding: 14px 16px 10px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-trend-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; min-height: 30px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-legend { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 14px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-spark-panel { height: var(--soc-dashboard-risk-plot-height) !important; min-height: var(--soc-dashboard-risk-plot-height) !important; padding: 2px 0 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-sparkline { width: 100% !important; height: calc(var(--soc-dashboard-risk-plot-height) - 26px) !important; min-height: calc(var(--soc-dashboard-risk-plot-height) - 26px) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRiskSparkAxis#analyticsRiskSparkAxis { display: flex !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsAnalysisBoard#analyticsAnalysisBoard { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: var(--dashboard-gap) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel { grid-column: span 5 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel { grid-column: span 7 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel { height: 236px !important; min-height: 236px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel { height: 162px !important; min-height: 162px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsAnalysisBoard#analyticsAnalysisBoard .soc-analytics-board-card { border: 1px solid var(--dashboard-card-border) !important; border-radius: var(--dashboard-card-radius) !important; background: var(--dashboard-card-bg) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsAnalysisBoard#analyticsAnalysisBoard .soc-analytics-board-card-head { padding: 12px 14px 6px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsAnalysisBoard#analyticsAnalysisBoard .soc-analytics-board-card-body { padding: 0 14px 10px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsLiveActivityBreakdown { cursor: pointer !important; } html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 { --dashboard-card-border: #2f3b4d; --dashboard-card-bg: #16202d; } html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria { border-left-color: #344154 !important; } @media (min-width: 1200px) and (max-width: 1439px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard { grid-template-columns: minmax(330px, 4.4fr) minmax(0, 7.6fr) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-board-card-body--health { padding-left: 14px !important; padding-right: 14px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-legend { gap: 4px !important; } } @media (min-width: 1440px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel { grid-area: trend !important; grid-column: auto !important; grid-row: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel { grid-area: pattern !important; grid-column: auto !important; grid-row: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel { grid-area: cause !important; grid-column: auto !important; grid-row: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel { grid-area: people !important; grid-column: auto !important; grid-row: auto !important; } } @media (max-width: 767px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView { width: 100% !important; min-width: 0 !important; max-width: 100vw !important; overflow-x: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 { width: 100% !important; min-width: 0 !important; max-width: 100vw !important; grid-template-columns: minmax(0, 1fr) !important; padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box !important; overflow-x: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsAnalysisBoard#analyticsAnalysisBoard { width: 100% !important; min-width: 0 !important; max-width: 100% !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "trend" "pattern" "cause" "people" !important; overflow-x: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel { width: 100% !important; min-width: 0 !important; max-width: 100% !important; grid-column: 1 / -1 !important; grid-row: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel { grid-area: trend !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel { grid-area: pattern !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel { grid-area: cause !important; height: 306px !important; min-height: 306px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel { grid-area: people !important; height: 430px !important; min-height: 430px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-shell { width: 100% !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-grid-board { grid-template-columns: minmax(40px, 40px) repeat(var(--analytics-pattern-columns, 24), 44px) !important; width: max-content !important; min-width: calc(40px + (24 * 44px)) !important; max-width: none !important; overflow-x: visible !important; overflow-y: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-cell-board { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-shell, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-list, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel .soc-analytics-hotspot-shell, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeopleHotspotList#analyticsPeopleHotspotList .soc-analytics-hotspot-list { min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-list { max-height: 236px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-row { min-height: 38px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeopleHotspotList#analyticsPeopleHotspotList .soc-analytics-hotspot-list { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; max-height: 356px !important; align-content: start !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeopleHotspotList#analyticsPeopleHotspotList .soc-analytics-hotspot-row { height: auto !important; min-height: 112px !important; background: var(--soc-surface) !important; } } @media (min-width: 768px) and (max-width: 1199px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel { grid-column: 1 / -1 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-rack { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack { height: auto !important; min-height: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard { grid-template-columns: 1fr !important; height: auto !important; min-height: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-score-pane, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-trend-pane { height: 252px !important; min-height: 252px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel { overflow-x: auto !important; } } @media (max-width: 767px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 { padding: 12px 12px 96px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsDashboardToolbar#analyticsDashboardToolbar { align-items: stretch !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsDashboardToolbar#analyticsDashboardToolbar > * { min-height: 44px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRow#analyticsHeroRow, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsAnalysisBoard#analyticsAnalysisBoard { grid-template-columns: 1fr !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel { grid-column: 1 / -1 !important; height: auto !important; min-height: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-rack { grid-template-columns: 1fr !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard { height: auto !important; min-height: 148px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-legend { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard { grid-template-columns: 1fr !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-score-pane, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-trend-pane { height: auto !important; min-height: 272px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-score-content { grid-template-columns: 1fr !important; justify-items: center !important; height: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria { width: 100% !important; padding: 16px 0 0 !important; border-top: 1px solid #e3e9f1 !important; border-left: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-trend-head { align-items: flex-start !important; flex-direction: column !important; gap: 8px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-legend { justify-content: flex-start !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel { overflow-x: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternBoard#analyticsPatternBoard { min-width: 780px !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions { position: sticky !important; bottom: 0 !important; display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; gap: 0 !important; margin: 0 !important; padding: 6px 0 8px !important; border-top: 1px solid var(--soc-border, #e3e8f0) !important; background: var(--soc-nav-sheet-bg, #fff) !important; z-index: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions .mobile-nav-actions-divider { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions .mobile-nav-action-btn--plain.soc-menu-item { display: flex !important; width: auto !important; min-width: 0 !important; min-height: 24px !important; height: 24px !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 2px 8px !important; color: var(--soc-text-secondary, #697286) !important; text-align: center !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested { position: relative !important; padding: 0 14px 0 50px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested::before { display: block !important; content: "" !important; position: absolute !important; left: 34px !important; top: 50% !important; width: 6px !important; height: 6px !important; transform: translateY(-50%) !important; border-radius: 999px !important; background: var(--soc-accent, #ff5b1a) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested.is-active { background: #fff0eb !important; box-shadow: none !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions { position: sticky !important; bottom: 0 !important; display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; gap: 0 !important; margin: 0 !important; padding: 6px 0 8px !important; border-top: 1px solid var(--soc-border, #e3e8f0) !important; background: var(--soc-nav-sheet-bg, #fff) !important; z-index: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions .mobile-nav-actions-divider { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions .mobile-nav-action-btn--plain.soc-menu-item { display: flex !important; width: auto !important; min-width: 0 !important; min-height: 24px !important; height: 24px !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 2px 8px !important; color: var(--soc-text-secondary, #697286) !important; text-align: center !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested { position: relative !important; width: auto !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding: 0 14px 0 50px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested::before { display: block !important; content: "" !important; position: absolute !important; left: 34px !important; top: 50% !important; width: 6px !important; height: 6px !important; transform: translateY(-50%) !important; border-radius: 50% !important; background: var(--sx-orange, #ff5a16) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested.is-active { background: #fff0eb !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested.is-active::before { display: block !important; background: var(--sx-orange, #ff5a16) !important; } } html body:not(.soc-auth-shell-active) #dashboardPanel.soc-workspace-profile-subview > .panel-title-row, html body:not(.soc-auth-shell-active) #dashboardPanel:has(#myProfileView:not(.hidden)) > .panel-title-row { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel.soc-workspace-profile-subview { padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) { width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-command-stage { display: block !important; width: min(100%, 1363px) !important; max-width: 1363px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-overview { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; width: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-page-header { position: static !important; z-index: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-page-header + .soc-profile-top-shell { margin-top: -5px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-page-header h1 { margin: 0 !important; color: var(--soc-text, #101828) !important; font-size: 24px !important; font-weight: 800 !important; line-height: 32px !important; letter-spacing: -0.04em !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-page-header p { margin: 6px 0 0 !important; color: var(--soc-text-sub, #667085) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-top-shell { display: grid !important; grid-template-columns: minmax(0, 1.745fr) minmax(360px, 1fr) !important; gap: 18px !important; height: 285px !important; min-height: 285px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) :is( .soc-profile-account-strip, .soc-profile-security-card, .soc-profile-kpi-card, .soc-profile-activity-card, .soc-profile-operations-card ) { border: 1px solid var(--soc-border, #dce3ed) !important; border-radius: 10px !important; background: var(--soc-block-bg, #fff) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-account-strip { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 28px !important; height: 285px !important; min-height: 285px !important; margin: 0 !important; padding: 20px 24px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-photo-shell { display: grid !important; flex: 0 0 120px !important; place-items: center !important; width: 120px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-account-strip .soc-profile-hero-avatar { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 120px !important; height: 120px !important; flex: 0 0 120px !important; border: 1px solid color-mix(in srgb, var(--soc-primary, #ff5a1f) 54%, var(--soc-border, #dce3ed)) !important; border-radius: 50% !important; overflow: hidden !important; background: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-account-strip .soc-profile-hero-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-copy { display: grid !important; flex: 1 1 auto !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-account-head { display: flex !important; align-items: center !important; gap: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-account-head h3 { margin: 0 !important; color: var(--soc-text, #101828) !important; font-size: 25px !important; font-weight: 800 !important; line-height: 32px !important; letter-spacing: -0.035em !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-account-badge { display: inline-flex !important; align-items: center !important; min-height: 28px !important; padding: 4px 10px !important; border: 1px solid color-mix(in srgb, var(--soc-primary, #ff5a1f) 30%, #fff) !important; border-radius: 8px !important; color: var(--soc-primary, #ff5a1f) !important; background: #fff !important; font-size: 13px !important; font-weight: 700 !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-facts { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; margin: 18px 0 0 !important; padding: 16px 0 0 !important; border-top: 1px solid var(--soc-border, #dce3ed) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-facts > span { display: grid !important; gap: 6px !important; min-width: 0 !important; padding: 0 18px !important; border-left: 1px solid var(--soc-border, #dce3ed) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-facts > span:first-child { padding-left: 0 !important; border-left: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-facts small { color: #61708a !important; font-size: 12px !important; font-weight: 500 !important; line-height: 17px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-facts strong { overflow: hidden !important; color: var(--soc-text, #101828) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 21px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-actions { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; margin: 14px 0 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-actions .ds-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-security-card > .ds-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; min-height: 44px !important; padding: 0 17px !important; border: 1px solid #aebbd0 !important; border-radius: 6px !important; color: var(--soc-text, #101828) !important; background: var(--soc-block-bg, #fff) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-actions .soc-profile-photo-action { color: var(--soc-primary, #ff5a1f) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-actions .ds-btn svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-security-card > .ds-btn svg { display: block !important; width: 18px !important; height: 18px !important; flex: 0 0 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-security-card { display: grid !important; align-content: start !important; grid-template-rows: auto 1fr auto !important; gap: 12px !important; height: 285px !important; min-height: 285px !important; margin: 0 !important; padding: 20px 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-card-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-card-heading h2 { margin: 0 !important; color: var(--soc-text, #101828) !important; font-size: 18px !important; font-weight: 800 !important; line-height: 25px !important; letter-spacing: -0.025em !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-security-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; flex: 0 0 32px !important; color: var(--soc-text, #101828) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-security-icon svg { display: block !important; width: 28px !important; height: 28px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-security-card dl, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-operations-list { display: grid !important; gap: 0 !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-security-card dl > div, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-operations-list > div { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; min-height: 49px !important; border-top: 1px solid var(--soc-border, #dce3ed) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-security-card dl > div:first-child, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-operations-list > div:first-child { border-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) :is(.soc-profile-security-card dt, .soc-profile-operations-list dt) { color: #61708a !important; font-size: 13px !important; font-weight: 500 !important; line-height: 19px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) :is(.soc-profile-security-card dd, .soc-profile-operations-list dd) { margin: 0 !important; color: var(--soc-text, #101828) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 19px !important; text-align: right !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-kpi-shell { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-kpi-shell .soc-profile-counter-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 16px !important; width: 100% !important; height: 120px !important; min-height: 120px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-counter-row > .soc-profile-kpi-card { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 18px !important; height: 120px !important; min-height: 120px !important; margin: 0 !important; padding: 18px 22px !important; color: var(--soc-text, #101828) !important; text-align: left !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-kpi-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 64px !important; height: 64px !important; min-width: 64px !important; flex: 0 0 64px !important; border: 1px solid var(--soc-border, #dce3ed) !important; border-radius: 50% !important; color: var(--soc-text, #101828) !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-kpi-icon svg { display: block !important; width: 30px !important; height: 30px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.75 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-kpi-card > span:last-of-type { display: grid !important; gap: 3px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-kpi-card small, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-kpi-card em { color: #61708a !important; font-size: 12px !important; font-style: normal !important; font-weight: 500 !important; line-height: 17px !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-kpi-card strong { display: block !important; color: var(--soc-text, #101828) !important; font-size: 28px !important; font-weight: 800 !important; line-height: 32px !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-kpi-card em b { color: var(--soc-primary, #ff5a1f) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-kpi-card em b.is-positive { color: #2fb344 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-score-popover-wrap { position: absolute !important; right: 18px !important; top: 50% !important; transform: translateY(-50%) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-score-info-btn { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 8px !important; color: var(--soc-primary, #ff5a1f) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-main-grid { display: grid !important; grid-template-columns: minmax(0, 1.43fr) minmax(360px, 1fr) !important; align-items: stretch !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) :is(.soc-profile-activity-card, .soc-profile-operations-card) { min-width: 0 !important; height: 293px !important; min-height: 293px !important; margin: 0 !important; padding: 18px 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-activity-card { display: flex !important; flex-direction: column !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-activity-table { width: 100% !important; margin: 4px 0 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) :is(.soc-profile-activity-table-head, .soc-profile-activity-table-row) { display: grid !important; grid-template-columns: minmax(0, 1.45fr) minmax(150px, 0.96fr) minmax(90px, 0.7fr) minmax(66px, 0.42fr) !important; align-items: center !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-activity-table-head { min-height: 31px !important; padding: 5px 8px !important; border-top: 1px solid var(--soc-border, #dce3ed) !important; border-bottom: 1px solid var(--soc-border, #dce3ed) !important; color: #61708a !important; font-size: 11px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-activity-table-row { min-height: 39px !important; padding: 5px 8px !important; border-bottom: 1px solid var(--soc-border, #dce3ed) !important; color: var(--soc-text, #101828) !important; font-size: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-activity-footer-link { align-self: flex-start !important; margin: auto 0 0 !important; padding: 8px 0 0 !important; color: var(--soc-text, #101828) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-activity-footer-link span { color: var(--soc-primary, #ff5a1f) !important; font-size: 20px !important; line-height: 12px !important; vertical-align: -2px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-operations-card .soc-profile-card-heading { margin-bottom: 5px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-operations-list > div { min-height: 54px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-legacy-data { display: none !important; } #myProfileScopeShell.soc-global-scope-overlay { position: fixed !important; right: 24px !important; bottom: 24px !important; left: auto !important; top: auto !important; display: block !important; width: 216px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 1250 !important; pointer-events: auto !important; } #myProfileScopeShell.soc-global-scope-overlay.hidden { display: none !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-trigger { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; height: 56px !important; min-height: 56px !important; margin: 0 !important; padding: 8px 12px !important; border: 1px solid var(--soc-border, #dce3ed) !important; border-radius: 18px !important; color: var(--soc-text, #101828) !important; background: var(--soc-block-bg, #fff) !important; box-shadow: 0 14px 38px rgba(16, 36, 64, 0.16) !important; text-align: left !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-trigger-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; flex: 0 0 36px !important; border-radius: 50% !important; color: var(--soc-primary, #ff5a1f) !important; background: #fff0e8 !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-trigger-icon svg { width: 20px !important; height: 20px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.85 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-trigger-copy { display: grid !important; flex: 1 1 auto !important; gap: 2px !important; min-width: 0 !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-trigger-copy strong { margin: 0 !important; color: var(--soc-text, #101828) !important; font-size: 15px !important; font-weight: 800 !important; line-height: 20px !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-trigger-copy small { overflow: hidden !important; color: #61708a !important; font-size: 12px !important; font-weight: 700 !important; line-height: 17px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-chevron { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-popover { position: absolute !important; right: 0 !important; bottom: calc(100% + 12px) !important; left: auto !important; top: auto !important; display: block !important; width: min(300px, calc(100vw - 32px)) !important; max-width: none !important; margin: 0 !important; padding: 18px 18px 0 !important; border: 1px solid var(--soc-border, #dce3ed) !important; border-radius: 22px !important; background: var(--soc-block-bg, #fff) !important; box-shadow: 0 22px 58px rgba(16, 36, 64, 0.22) !important; z-index: 1260 !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-popover.hidden { display: none !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-popover-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-popover-head h2 { margin: 0 0 16px !important; color: var(--soc-text, #101828) !important; font-size: 18px !important; font-weight: 800 !important; line-height: 24px !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-close { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; color: #61708a !important; background: transparent !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-close svg { display: block !important; width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-master-query-scope, #myProfileScopeShell.soc-global-scope-overlay .soc-master-query-scope-fields, #myProfileScopeShell.soc-global-scope-overlay .soc-master-query-scope-field { width: 100% !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-master-query-scope { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-master-query-scope-fields { display: grid !important; gap: 12px !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-master-query-scope-field { display: grid !important; gap: 6px !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-master-query-scope-field > span { color: #42526a !important; font-size: 13px !important; font-weight: 800 !important; line-height: 18px !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-master-query-scope-field select { width: 100% !important; min-height: 44px !important; padding: 0 12px !important; border: 1px solid var(--soc-border, #dce3ed) !important; border-radius: 14px !important; color: var(--soc-text, #101828) !important; background-color: var(--soc-block-bg, #fff) !important; font-size: 14px !important; font-weight: 700 !important; } #myProfileScopeShell.soc-global-scope-overlay :is(#masterQueryScopeReloadBtn, .soc-master-query-scope-status) { display: none !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-current { margin: 18px -18px 0 !important; padding: 14px 18px 16px !important; border-top: 1px solid var(--soc-border, #dce3ed) !important; border-radius: 0 0 22px 22px !important; color: #42526a !important; background: #f7f9fc !important; font-size: 13px !important; font-weight: 700 !important; line-height: 18px !important; } @media (max-width: 1100px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-top-shell, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-main-grid { grid-template-columns: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-kpi-shell .soc-profile-counter-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px) { html body:not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) { padding: 16px 14px calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 24px) !important; } html body:not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-overview { gap: 14px !important; } html body:not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-account-strip { align-items: flex-start !important; flex-direction: column !important; gap: 18px !important; padding: 20px !important; } html body:not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-facts, html body:not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-kpi-shell .soc-profile-counter-row { grid-template-columns: minmax(0, 1fr) !important; } html body:not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-facts > span { padding: 12px 0 !important; border-top: 1px solid var(--soc-border, #dce3ed) !important; border-left: 0 !important; } html body:not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-identity-facts > span:first-child { border-top: 0 !important; } html body:not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) .soc-profile-activity-table { overflow-x: auto !important; } html body:not(.soc-auth-shell-active) #myProfileView#myProfileView:not(.hidden) :is(.soc-profile-activity-table-head, .soc-profile-activity-table-row) { min-width: 560px !important; } #myProfileScopeShell.soc-global-scope-overlay { right: 16px !important; bottom: calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 14px) !important; width: min(216px, calc(100vw - 32px)) !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-trigger { height: 56px !important; min-height: 56px !important; padding: 8px 12px !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-trigger-icon { width: 36px !important; height: 36px !important; flex-basis: 36px !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-popover { width: min(300px, calc(100vw - 32px)) !important; padding: 18px 18px 0 !important; } #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-current { margin-inline: -18px !important; padding-inline: 18px !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions { position: sticky !important; bottom: 0 !important; display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; gap: 0 !important; margin: 0 !important; padding: 6px 0 8px !important; border-top: 1px solid var(--soc-border, #e3e8f0) !important; background: var(--soc-nav-sheet-bg, #fff) !important; z-index: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions .mobile-nav-divider { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions .mobile-nav-action-btn--plain.soc-menu-item { display: flex !important; width: auto !important; min-width: 0 !important; min-height: 24px !important; height: 24px !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 2px 8px !important; color: var(--soc-text-secondary, #697286) !important; text-align: center !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested { position: relative !important; padding: 0 14px 0 50px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested::before { display: block !important; content: "" !important; position: absolute !important; left: 34px !important; top: 50% !important; width: 6px !important; height: 6px !important; transform: translateY(-50%) !important; border-radius: 999px !important; background: var(--soc-accent, #ff5b1a) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested.is-active { background: #fff0eb !important; box-shadow: none !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions { position: sticky !important; bottom: 0 !important; display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; gap: 0 !important; margin: 0 !important; padding: 6px 0 8px !important; border-top: 1px solid var(--soc-border, #e3e8f0) !important; background: var(--soc-nav-sheet-bg, #fff) !important; z-index: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions .mobile-nav-divider { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions .mobile-nav-action-btn--plain.soc-menu-item { display: flex !important; width: auto !important; min-width: 0 !important; min-height: 24px !important; height: 24px !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 2px 8px !important; color: var(--soc-text-secondary, #697286) !important; text-align: center !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested { position: relative !important; padding: 0 14px 0 50px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested::before { display: block !important; content: "" !important; position: absolute !important; left: 34px !important; top: 50% !important; width: 6px !important; height: 6px !important; transform: translateY(-50%) !important; border-radius: 999px !important; background: var(--soc-accent, #ff5b1a) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested.is-active { background: #fff0eb !important; box-shadow: none !important; } } /* ===== Apple weekly exception schedule list reference authority ===== */ #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--exceptions { gap: 26px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--exceptions .soc-apple-weekly-flow-header { align-items: center; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--exceptions .soc-apple-weekly-flow-header h3 { font-size: clamp(28px, 2.3vw, 38px); letter-spacing: -0.04em; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--exceptions .soc-apple-weekly-flow-header .meta { margin-top: 6px; font-size: 15px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--exceptions .soc-apple-weekly-flow-main:has(.soc-apple-weekly-exception-list) { padding: 0 !important; border: 0; background: transparent; box-shadow: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-create { min-height: 44px; padding-inline: 16px; border-radius: 9px; gap: 8px; font-size: 14px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-create svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-list { display: grid; gap: 28px; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filters, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table-card { border: 1px solid var(--soc-border); border-radius: 14px; background: var(--soc-card-bg); box-shadow: var(--soc-shadow-soft); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filters { display: grid; grid-template-columns: minmax(150px, 0.85fr) minmax(150px, 0.85fr) minmax(300px, 1.4fr) minmax(210px, 1fr) auto; align-items: end; gap: 20px; padding: 22px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filter-field { display: grid; gap: 9px; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filter-field > span:first-child { color: var(--soc-text-soft-6); font-size: 13px; font-weight: 750; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filter-field :is(.ds-select, .ds-input) { min-height: 46px; border-radius: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-date-range { display: grid; grid-template-columns: minmax(124px, 1fr) auto minmax(124px, 1fr); align-items: center; gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-date-range > span { color: var(--soc-muted); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-search-control { position: relative; display: block; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-search-control .ds-input { width: 100%; padding-right: 42px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-search-control svg { position: absolute; top: 50%; right: 14px; width: 19px; height: 19px; transform: translateY(-50%); fill: none; stroke: var(--soc-text-soft-6); stroke-width: 1.7; stroke-linecap: round; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filter-actions { display: flex; gap: 10px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filter-actions .ds-btn { min-height: 46px; min-width: 76px; border-radius: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table-card { overflow: hidden; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table-scroll { width: 100%; overflow-x: auto; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table { width: 100%; min-width: 1020px; border-collapse: collapse; color: var(--soc-text); font-size: 13px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table th, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table td { padding: 18px 20px; border-bottom: 1px solid var(--soc-divider); text-align: left; vertical-align: middle; white-space: nowrap; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table th { color: var(--soc-text-soft-6); background: color-mix(in srgb, var(--soc-card-bg) 94%, var(--soc-border)); font-weight: 750; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table th:first-child { width: 21%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table th:last-child, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table td:last-child { text-align: right; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-status { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 800; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-status.is-active { border-color: color-mix(in srgb, var(--soc-primary) 26%, transparent); background: var(--soc-primary-soft-bg); color: var(--soc-primary-deep); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-status.is-scheduled { border-color: color-mix(in srgb, var(--soc-info) 25%, transparent); background: color-mix(in srgb, var(--soc-info) 10%, var(--soc-card-bg)); color: var(--soc-info); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-status.is-complete { border-color: color-mix(in srgb, var(--soc-success) 25%, transparent); background: color-mix(in srgb, var(--soc-success) 10%, var(--soc-card-bg)); color: var(--soc-success); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-row-actions button { min-height: 30px; padding: 0 12px; border: 0; border-left: 1px solid var(--soc-divider); background: transparent; color: var(--soc-text); font: inherit; font-weight: 700; cursor: pointer; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-row-actions button:first-child { border-left: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-row-actions button.is-danger { color: var(--soc-danger-deep); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 14px 24px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table-footer > strong { font-size: 14px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-pagination { display: flex; align-items: center; gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-page { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--soc-border); border-radius: 8px; background: var(--soc-card-bg); color: var(--soc-text); font: inherit; font-weight: 750; cursor: pointer; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-page.is-active { border-color: var(--soc-primary); background: var(--soc-primary); color: var(--soc-on-primary); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-page:disabled { opacity: 0.42; cursor: default; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-page svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 1180px) { #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filter-period, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filter-search { grid-column: span 2; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filter-actions { grid-column: span 2; justify-content: flex-end; } } @media (max-width: 767px) { #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--exceptions { gap: 18px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--exceptions .soc-apple-weekly-flow-header { grid-template-columns: minmax(0, 1fr); gap: 14px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--exceptions .soc-apple-weekly-flow-context { justify-self: stretch; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-create { width: 100%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-list { gap: 18px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filters { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; } #googleSheetsPanel.soc-apple-weekly-mode :is( .soc-apple-weekly-exception-filter-period, .soc-apple-weekly-exception-filter-search, .soc-apple-weekly-exception-filter-actions ) { grid-column: auto; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-date-range { grid-template-columns: minmax(0, 1fr); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-date-range > span { display: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filter-actions .ds-btn { flex: 1; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table-footer { align-items: flex-start; flex-direction: column; padding: 16px; } } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active), body.dark:not(.soc-auth-shell-active) { background: var(--soc-bg) !important; background-color: var(--soc-bg) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) .soc-app-shell, body.dark:not(.soc-auth-shell-active) .soc-app-shell, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) .soc-app-shell > main.container.ds-page, body.dark:not(.soc-auth-shell-active) .soc-app-shell > main.container.ds-page, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) .soc-app-shell > main.container.ds-page.admin-layout, body.dark:not(.soc-auth-shell-active) .soc-app-shell > main.container.ds-page.admin-layout { background: var(--soc-bg) !important; background-color: var(--soc-bg) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #menuSheetPanel, body.dark:not(.soc-auth-shell-active) #menuSheetPanel, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) :is(.mobile-menu-pager, .mobile-type-flow-track, .mobile-menu-root-page, .mobile-admin-shortcuts), body.dark:not(.soc-auth-shell-active) :is(.mobile-menu-pager, .mobile-type-flow-track, .mobile-menu-root-page, .mobile-admin-shortcuts) { background: var(--soc-surface) !important; background-color: var(--soc-surface) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-section-label, .soc-menu-group-label), body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-section-label, .soc-menu-group-label) { color: var(--soc-text-muted) !important; opacity: 1 !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item-label, .soc-menu-sub-item-icon, .soc-menu-group-toggle, .soc-menu-group-toggle-icon), body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item-label, .soc-menu-sub-item-icon, .soc-menu-group-toggle, .soc-menu-group-toggle-icon) { color: var(--soc-text-primary) !important; opacity: 1 !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item.is-active, .soc-menu-group-toggle.is-active), body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item.is-active, .soc-menu-group-toggle.is-active) { background: var(--soc-table-row-selected) !important; background-color: var(--soc-table-row-selected) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference :is(.soc-summary-value, .soc-summary-label, .soc-situation-empty-title, .soc-situation-empty-copy), body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference :is(.soc-summary-value, .soc-summary-label, .soc-situation-empty-title, .soc-situation-empty-copy), html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #ticketsView :is(.soc-ticket-reference-summary-value, .soc-ticket-reference-summary-label, .soc-ticket-empty-title, .soc-ticket-empty-copy), body.dark:not(.soc-auth-shell-active) #ticketsView :is(.soc-ticket-reference-summary-value, .soc-ticket-reference-summary-label, .soc-ticket-empty-title, .soc-ticket-empty-copy) { color: var(--soc-text-primary) !important; -webkit-text-fill-color: var(--soc-text-primary) !important; opacity: 1 !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-summary-label, body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-summary-label, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-label, body.dark:not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-label, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-empty-copy, body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-empty-copy, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #ticketsView .soc-ticket-empty-copy, body.dark:not(.soc-auth-shell-active) #ticketsView .soc-ticket-empty-copy { color: var(--soc-text-secondary) !important; -webkit-text-fill-color: var(--soc-text-secondary) !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) :is(#alertsView.soc-situation-reference .soc-situation-page-size select, #ticketsView .soc-ticket-reference-page-size select), body.dark:not(.soc-auth-shell-active) :is(#alertsView.soc-situation-reference .soc-situation-page-size select, #ticketsView .soc-ticket-reference-page-size select) { background: var(--soc-control-bg) !important; background-color: var(--soc-control-bg) !important; border-color: var(--soc-control-border) !important; color: var(--soc-text-primary) !important; -webkit-text-fill-color: var(--soc-text-primary) !important; } html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel { background: var(--soc-bg, #f4f7fb) !important; background-color: var(--soc-bg, #f4f7fb) !important; color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; } html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( #noticesWorkspace, .sentrix-announcement-workspace, #noticesListPanel, #noticesDetailPanel, #noticesComposePanel, .notices-panel, .notices-compose-panel, .notices-compose-settings-panel, .notices-compose-document, .notices-compose-document-flow, .notices-compose-inline-block, .notices-compose-footer, .notices-compose-image-preview-shell, .notices-compose-poll-modal ) { background: var(--soc-card-bg, #ffffff) !important; background-color: var(--soc-card-bg, #ffffff) !important; border-color: var(--soc-border, #dbe3ef) !important; color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; box-shadow: none !important; } html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( .notices-compose-toolbar, .notices-compose-toolbar-group, .notices-compose-image-dropzone, .notices-compose-table-picker, .notices-compose-poll-option, .notices-compose-format-menu, .notices-compose-link-modal, .notices-compose-empty-state ) { background: var(--soc-subtle-bg, #f7f9fc) !important; background-color: var(--soc-subtle-bg, #f7f9fc) !important; border-color: var(--soc-border, #dbe3ef) !important; color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; box-shadow: none !important; } html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( h1, h2, h3, h4, label, .notices-compose-label, .notices-compose-section-title, .notices-compose-title-input, .notices-compose-body-input, .notices-compose-editor, .notices-compose-toolbar button, input, select, textarea ) { color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; opacity: 1 !important; } html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( input, select, textarea, #noticesComposeTitle, #noticesComposeBody, #noticesComposeDocumentFlow, .notices-compose-editor, .notices-compose-title-input, .notices-compose-body-input ) { background: #ffffff !important; background-color: #ffffff !important; border-color: var(--soc-border, #dbe3ef) !important; caret-color: var(--soc-text, #0f1b2d) !important; } html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel input::placeholder, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel textarea::placeholder { color: var(--soc-muted, #7a8799) !important; -webkit-text-fill-color: var(--soc-muted, #7a8799) !important; opacity: 1 !important; } @media (min-width: 1024px) { html body.soc-topbar-home-breadcrumb-visible:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarBreadcrumb.topbar-breadcrumb, html body.soc-topbar-home-breadcrumb-visible:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarBreadcrumb.topbar-breadcrumb.hidden { display: inline-flex !important; visibility: visible !important; align-items: center !important; gap: 10px !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; opacity: 1 !important; color: var(--soc-text, #0f1b2d) !important; } html body.soc-topbar-home-breadcrumb-visible:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarBreadcrumb .topbar-breadcrumb-link { display: inline-flex !important; align-items: center !important; color: var(--soc-muted, #6b7687) !important; opacity: 1 !important; } html body.soc-topbar-home-breadcrumb-visible:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarBreadcrumb .topbar-breadcrumb-link.is-active, html body.soc-topbar-home-breadcrumb-visible:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarBreadcrumb .topbar-breadcrumb-link[aria-current="page"] { color: var(--soc-text, #0f1b2d) !important; font-weight: 800 !important; } html body.soc-topbar-home-breadcrumb-visible:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarBreadcrumb .topbar-breadcrumb-separator { display: inline-flex !important; color: var(--soc-border-strong, #c7d1df) !important; opacity: 1 !important; } html body.soc-topbar-home-breadcrumb-visible:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarCurrentTitle.topbar-current-title, html body.soc-topbar-home-breadcrumb-visible:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarCurrentTitle.topbar-current-title.hidden { display: none !important; } } html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesWorkspace, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .sentrix-announcement-workspace { background: var(--soc-bg, #f4f7fb) !important; background-color: var(--soc-bg, #f4f7fb) !important; color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; } html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesListPanel, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesDetailPanel, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesComposePanel, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-panel, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-panel, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-settings-panel, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-document, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-document-flow, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-inline-block, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-footer, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-image-preview-shell, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-poll-modal { background: var(--soc-card-bg, #ffffff) !important; background-color: var(--soc-card-bg, #ffffff) !important; border-color: var(--soc-border, #dbe3ef) !important; color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; box-shadow: none !important; } html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-toolbar, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-toolbar-group, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-image-dropzone, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-table-picker, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-poll-option, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-format-menu, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-link-modal, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-empty-state { background: var(--soc-subtle-bg, #f7f9fc) !important; background-color: var(--soc-subtle-bg, #f7f9fc) !important; border-color: var(--soc-border, #dbe3ef) !important; color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; box-shadow: none !important; } html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel h1, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel h2, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel h3, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel h4, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel label, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-label, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-section-title, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-title-input, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-body-input, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-editor, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-toolbar button, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel input, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel select, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel textarea { color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; opacity: 1 !important; } html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel input, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel select, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel textarea, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesComposeTitle, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesComposeBody, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesComposeDocumentFlow, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-editor, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-title-input, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-body-input { background: #ffffff !important; background-color: #ffffff !important; border-color: var(--soc-border, #dbe3ef) !important; caret-color: var(--soc-text, #0f1b2d) !important; } html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel input::placeholder, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel textarea::placeholder, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesComposeTitle::placeholder, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesComposeBody::placeholder, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-title-input::placeholder, html[data-theme="light"] body.light.soc-desktop-shell:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-body-input::placeholder { color: var(--soc-text-muted, #8a96a8) !important; -webkit-text-fill-color: var(--soc-text-muted, #8a96a8) !important; opacity: 1 !important; } @media (min-width: 1024px) { html body.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarBreadcrumb.topbar-breadcrumb, html body.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarBreadcrumb.topbar-breadcrumb.hidden { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 0 40px !important; min-height: 24px !important; width: auto !important; max-width: none !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; color: var(--soc-text, #0f1b2d) !important; } html body.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarBreadcrumb .topbar-breadcrumb-link { color: var(--soc-text-muted, #6b7890) !important; -webkit-text-fill-color: var(--soc-text-muted, #6b7890) !important; opacity: 1 !important; } html body.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarBreadcrumb .topbar-breadcrumb-link.is-active, html body.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarBreadcrumb .topbar-breadcrumb-link[aria-current="page"] { color: var(--soc-primary, #ff6b1a) !important; -webkit-text-fill-color: var(--soc-primary, #ff6b1a) !important; } html body.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarCurrentTitle.topbar-current-title, html body.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarCurrentTitle.topbar-current-title.hidden { display: none !important; visibility: hidden !important; } } html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel, html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesWorkspace, html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .sentrix-announcement-workspace { background: var(--soc-bg, #f4f7fb) !important; background-color: var(--soc-bg, #f4f7fb) !important; color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; } html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( #noticesListPanel, #noticesDetailPanel, #noticesComposePanel, .notices-panel, .notices-compose-panel, .notices-compose-settings-panel, .notices-compose-document, .notices-compose-document-flow, .notices-compose-footer, .notices-compose-image-preview-shell, .notices-compose-poll-modal ) { background: var(--soc-card-bg, #ffffff) !important; background-color: var(--soc-card-bg, #ffffff) !important; border-color: var(--soc-border, #dbe3ef) !important; color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important; } html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( .notices-compose-toolbar, .notices-compose-toolbar-group, .notices-compose-inline-block, .notices-compose-image-dropzone, .notices-compose-table-picker, .notices-compose-poll-option, .notices-compose-format-menu, .notices-compose-link-modal, .notices-compose-empty-state ) { background: var(--soc-subtle-bg, #f7f9fc) !important; background-color: var(--soc-subtle-bg, #f7f9fc) !important; border-color: var(--soc-border, #dbe3ef) !important; color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; box-shadow: none !important; } html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( h1, h2, h3, h4, label, .notices-compose-label, .notices-compose-section-title, .notices-compose-title-input, .notices-compose-body-input, .notices-compose-editor, .notices-compose-editor [contenteditable="true"], .notices-compose-document [contenteditable="true"], .notices-compose-document-flow [contenteditable="true"], .notices-compose-inline-block [contenteditable="true"], .notices-compose-toolbar button, .notices-compose-toolbar .button, .notices-compose-format-select, .notices-compose-color-button, .notices-compose-field, .notices-compose-control, input, select, textarea ) { color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; opacity: 1 !important; } html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( input, select, textarea, .notices-compose-title-input, .notices-compose-body-input, .notices-compose-editor, .notices-compose-format-select, .notices-compose-color-button ) { background: #ffffff !important; background-color: #ffffff !important; border-color: var(--soc-border, #dbe3ef) !important; caret-color: var(--soc-text, #0f1b2d) !important; } html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel input::placeholder, html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel textarea::placeholder, html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-title-input::placeholder, html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-body-input::placeholder { color: var(--soc-text-muted, #8a96a8) !important; -webkit-text-fill-color: var(--soc-text-muted, #8a96a8) !important; opacity: 1 !important; } html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( .notices-compose-meta, .notices-compose-help, .notices-compose-subtitle, .notices-compose-muted, .notices-compose-toolbar-separator ) { color: var(--soc-text-muted, #66748a) !important; -webkit-text-fill-color: var(--soc-text-muted, #66748a) !important; opacity: 1 !important; } html:not([data-theme="dark"]) body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( .notices-compose-toolbar button:hover, .notices-compose-toolbar button:focus-visible, .notices-compose-format-select:focus, input:focus, select:focus, textarea:focus ) { border-color: var(--soc-primary, #ff6b1a) !important; box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.14) !important; } body.soc-topbar-home-breadcrumb-visible #topbarCurrentTitle { display: none !important; } body.soc-topbar-home-breadcrumb-visible #topbarBreadcrumb { display: inline-flex !important; } html body:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( #noticesWorkspace, #noticesListPanel, #noticesDetailPanel, #noticesComposePanel, .notices-panel, .notices-compose-panel, .notices-compose-settings-panel, .notices-compose-document, .notices-compose-document-flow, .notices-compose-inline-block, .notices-compose-footer, .notices-compose-poll-modal, .notices-compose-image-preview-shell, .notices-compose-image-dropzone ) { background: #ffffff !important; background-color: #ffffff !important; border-color: rgba(148, 163, 184, 0.28) !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } html body:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( .notices-compose-settings-panel, .notices-compose-toolbar, .notices-compose-toolbar-group, .notices-compose-title-input, .notices-compose-rich-editor, .notices-compose-flow-textarea, .notices-compose-body-input, .notices-toolbar-popover, .notices-color-palette, .notices-table-picker, .notices-compose-poll-option-input, .notices-switch-button, .notices-toolbar-item, .notices-toolbar-floating-toggle, .notices-toolbar-color-trigger, .notices-toolbar-highlight-trigger, .notices-toolbar-font-size-trigger ) { background: #ffffff !important; background-color: #ffffff !important; border-color: rgba(148, 163, 184, 0.32) !important; color: #334155 !important; -webkit-text-fill-color: #334155 !important; opacity: 1 !important; } html body:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( .notices-compose-toolbar, .notices-compose-toolbar-group, .notices-compose-document-flow, .notices-compose-footer ) { box-shadow: none !important; } html body:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( .notices-compose-field-label, .notices-compose-category-label, .notices-compose-pin-label, .notices-compose-rich-label, .notices-toolbar-label, .notices-compose-meta, .notices-compose-helper ) { color: #475569 !important; -webkit-text-fill-color: #475569 !important; opacity: 1 !important; } html body:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( #noticesComposeTitle, #noticesComposeTitle::placeholder, #noticesComposeDocumentFlow, #noticesComposeDocumentFlow::placeholder, #noticesComposeBody, #noticesComposeBody::placeholder, .notices-compose-title-input, .notices-compose-title-input::placeholder, .notices-compose-rich-editor, .notices-compose-rich-editor::placeholder, .notices-compose-flow-textarea, .notices-compose-flow-textarea::placeholder ) { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; opacity: 1 !important; } html body:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( #noticesComposeTitle::placeholder, #noticesComposeDocumentFlow::placeholder, #noticesComposeBody::placeholder, .notices-compose-title-input::placeholder, .notices-compose-rich-editor::placeholder, .notices-compose-flow-textarea::placeholder ) { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } html body:not(.dark):not(.soc-auth-shell-active) #announcementPanel :is( .notices-toolbar-item:hover, .notices-toolbar-item:focus-visible, .notices-toolbar-item.is-active, .notices-toolbar-floating-toggle:hover, .notices-toolbar-floating-toggle:focus-visible, .notices-toolbar-color-trigger:hover, .notices-toolbar-highlight-trigger:hover, .notices-toolbar-font-size-trigger:hover ) { background: #f1f5f9 !important; background-color: #f1f5f9 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .soc-app-shell.soc-app-shell, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .soc-app-shell.soc-app-shell, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active):has(#peopleView:not(.hidden)) .soc-app-shell.soc-app-shell, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active):has(#reportWizard:not(.hidden)) .soc-app-shell.soc-app-shell, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active):has(#notificationSettingsPanel:not(.hidden)) .soc-app-shell.soc-app-shell, body.dark:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .soc-app-shell.soc-app-shell, body.dark:not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .soc-app-shell.soc-app-shell, body.dark:not(.soc-auth-shell-active):has(#peopleView:not(.hidden)) .soc-app-shell.soc-app-shell, body.dark:not(.soc-auth-shell-active):has(#reportWizard:not(.hidden)) .soc-app-shell.soc-app-shell, body.dark:not(.soc-auth-shell-active):has(#notificationSettingsPanel:not(.hidden)) .soc-app-shell.soc-app-shell { background: var(--soc-bg) !important; background-color: var(--soc-bg) !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) .ds-btn.ds-btn-primary, body.dark:not(.soc-auth-shell-active) .ds-btn.ds-btn-primary { background: #c2410c !important; background-color: #c2410c !important; border-color: #fb923c !important; color: #fff7ed !important; -webkit-text-fill-color: #fff7ed !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRefreshBtn.ds-btn-primary, body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRefreshBtn.ds-btn-primary { background: #c2410c !important; background-color: #c2410c !important; border-color: #fb923c !important; color: #fff7ed !important; -webkit-text-fill-color: #fff7ed !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #homeView :is(#sentrixHomeDashboardRoot, .sentrix-home-dashboard, .sentrix-home-kpi-grid, .sentrix-home-main-grid, .sentrix-home-bottom-grid, .sentrix-home-card, .sentrix-home-table, .sentrix-home-table *), body.dark:not(.soc-auth-shell-active) #homeView :is(#sentrixHomeDashboardRoot, .sentrix-home-dashboard, .sentrix-home-kpi-grid, .sentrix-home-main-grid, .sentrix-home-bottom-grid, .sentrix-home-card, .sentrix-home-table, .sentrix-home-table *) { color: var(--soc-text-primary) !important; -webkit-text-fill-color: var(--soc-text-primary) !important; opacity: 1 !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #homeView :is(.sentrix-home-kpi-label, .sentrix-home-kpi-meta, .sentrix-home-card-subtitle, .sentrix-home-inline-empty p, .sentrix-home-table td[data-muted="true"]), body.dark:not(.soc-auth-shell-active) #homeView :is(.sentrix-home-kpi-label, .sentrix-home-kpi-meta, .sentrix-home-card-subtitle, .sentrix-home-inline-empty p, .sentrix-home-table td[data-muted="true"]) { color: var(--soc-text-secondary) !important; -webkit-text-fill-color: var(--soc-text-secondary) !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #analyticsView :is(.soc-analytics-pattern-axis, .soc-analytics-pattern-header, .soc-analytics-pattern-row-label, .soc-analytics-pattern-corner, .soc-analytics-pattern-legend, .soc-analytics-pattern-legend *), body.dark:not(.soc-auth-shell-active) #analyticsView :is(.soc-analytics-pattern-axis, .soc-analytics-pattern-header, .soc-analytics-pattern-row-label, .soc-analytics-pattern-corner, .soc-analytics-pattern-legend, .soc-analytics-pattern-legend *) { color: var(--soc-text-secondary) !important; -webkit-text-fill-color: var(--soc-text-secondary) !important; opacity: 1 !important; } /* EOF ticket/situation detail stability and typography parity (2026-04-27). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar { width: 100vw !important; max-width: 100vw !important; box-sizing: border-box !important; padding-right: 14px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout { width: calc(100vw - var(--sentrix-shell-sidebar-w, 214px)) !important; max-width: calc(100vw - var(--sentrix-shell-sidebar-w, 214px)) !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-right { flex: 0 0 auto !important; margin-left: auto !important; padding-right: 0 !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-admin-profile-btn { margin-right: 0 !important; padding-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-admin-profile-copy { padding-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#alertsView.soc-situation-reference, #ticketsView) :is(.soc-situation-table-body, .soc-ticket-reference-list) { display: block !important; align-content: start !important; overflow-y: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row { height: 52px !important; min-height: 52px !important; max-height: 52px !important; flex: 0 0 52px !important; align-items: center !important; box-sizing: border-box !important; line-height: 18px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row :is(.soc-situation-cell, .incident-location, .incident-type, .incident-created-at), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row :is(.soc-ticket-reference-cell, .ticket-type-cell, .ticket-site-cell, .ticket-time-cell) { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row :is(.incident-title, .incident-title-text, .title-cell), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--title { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference :is(.soc-situation-table-header, .soc-situation-table-header > span), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(.soc-ticket-reference-table-header, .soc-ticket-reference-table-header > span) { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-detail-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-card { min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; word-break: keep-all !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanelTitle, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanelTitle { display: block !important; max-width: 100% !important; max-height: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: keep-all !important; line-height: 22px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference :is(#opsCommentPanelAttachments, .soc-pc-side-panel-attachments, .soc-pc-side-panel-attachment-empty), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(#ticketCommentPanelAttachments, .soc-pc-side-panel-attachments, .soc-pc-side-panel-attachment-empty) { min-height: 64px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanelForm:not(.hidden), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanelForm:not(.hidden) { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; align-items: center !important; padding: 10px 0 0 !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanelForm.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanelForm.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanelForm :is(input, textarea), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanelForm :is(input, textarea) { min-width: 0 !important; height: 36px !important; min-height: 36px !important; resize: none !important; font-size: 12px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-actions { width: 100% !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-action { min-width: 0 !important; padding: 0 4px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; font-size: 12px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference :is(.soc-situation-list-footer, #situationIncidentTotalCount), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(.soc-ticket-reference-list-footer, #ticketReferenceTotalCount) { font-weight: 500 !important; } } /* Final home KPI / realtime alert and KPI icon parity (2026-04-27). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions .soc-menu-item { color: #111827 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section-label { color: #111827 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item-icon, .soc-menu-group-icon, .soc-menu-group-chevron) { color: #111827 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item-icon, .soc-menu-group-icon, .soc-menu-group-chevron) svg { width: 18px !important; height: 18px !important; stroke-width: 1.65 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-dashboard { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 20px 24px 42px !important; gap: 14px !important; overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card { min-height: 96px !important; height: 96px !important; display: flex !important; align-items: center !important; gap: 18px !important; padding: 0 18px !important; border: 1px solid #e8edf5 !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; background: #fff1e8 !important; color: #ff5c00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="ticket"] .sentrix-home-kpi-icon { background: #eaf5ff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="support"] .sentrix-home-kpi-icon { background: #e8f7ef !important; color: #18a36b !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="notice"] .sentrix-home-kpi-icon { background: #f3eeff !important; color: #7a52f4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon svg { width: 24px !important; height: 24px !important; stroke: currentColor !important; stroke-width: 1.85 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-label { color: #102b55 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-value { color: #0b2d5c !important; font-size: 29px !important; line-height: 32px !important; font-weight: 700 !important; letter-spacing: -0.2px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-meta { color: #365071 !important; font-size: 12px !important; line-height: 17px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alerts { padding: 17px 18px 15px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile { min-width: 0 !important; min-height: 68px !important; grid-template-columns: 34px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon { align-self: center !important; width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; background: #fff6ed !important; color: #ff6a00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile[data-type="ticket"] .sentrix-home-alert-icon { background: #eef6ff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; stroke-width: 1.85 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-title-row strong { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: #102b55 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-main p { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-site, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile time { color: #60708f !important; font-size: 11px !important; line-height: 16px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile.is-new-alert { animation: sentrixHomeAlertCardEnter 520ms cubic-bezier(0.19, 1, 0.22, 1) both !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon svg { width: 24px !important; height: 24px !important; stroke: currentColor !important; stroke-width: 1.85 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(1) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--pending { background: #fff1e8 !important; color: #ff5c00 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(2) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--danger { background: #fff0f0 !important; color: #ff1f1f !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(3) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--total { background: #eef6ff !important; color: #1684ff !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(4) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--approved { background: #e8f7ef !important; color: #18a36b !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(5) .soc-situation-kpi-icon { background: #f3eeff !important; color: #7a52f4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--cancelled { background: #f3f5f8 !important; color: #7a8ba5 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-label { color: #102b55 !important; font-weight: 600 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-value, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-value, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView [data-ticket-summary-filter] .soc-ticket-reference-summary-value { color: #0b2d5c !important; font-weight: 700 !important; } } /* EOF semantic KPI selector lock (2026-04-27). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-home-sidebar-w: 214px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-card[data-summary-filter="total"] .soc-situation-kpi-icon { background: #fff1e8 !important; color: #ff5c00 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-card[data-summary-filter="important"] .soc-situation-kpi-icon { background: #fff0f0 !important; color: #ff1f1f !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-card[data-summary-filter="status-received"] .soc-situation-kpi-icon { background: #eef6ff !important; color: #1684ff !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-card[data-summary-filter="status-progress"] .soc-situation-kpi-icon { background: #e8f7ef !important; color: #18a36b !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-card[data-summary-filter="status-closed"] .soc-situation-kpi-icon { background: #f3eeff !important; color: #7a52f4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--unavailable, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--danger { background: #fff0f0 !important; color: #ff1f1f !important; } } @media (prefers-reduced-motion: reduce) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile.is-new-alert { animation: none !important; transform: none !important; } } /* Final home KPI / realtime alert and KPI icon parity (2026-04-27). Backend/realtime payloads stay untouched; this locks the visual mapping to the reference. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions .soc-menu-item { color: #111827 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section-label { color: #111827 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 500 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item-icon, .soc-menu-group-icon, .soc-menu-group-chevron) { color: #111827 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item-icon, .soc-menu-group-icon, .soc-menu-group-chevron) svg { width: 18px !important; height: 18px !important; stroke-width: 1.65 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .container.admin-layout, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #dashboardPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #sentrixHomeDashboardRoot { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-dashboard { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 20px 24px 42px !important; gap: 14px !important; overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card { min-height: 96px !important; height: 96px !important; display: flex !important; align-items: center !important; gap: 18px !important; padding: 0 18px !important; border: 1px solid #e8edf5 !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; background: #fff1e8 !important; color: #ff5c00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="ticket"] .sentrix-home-kpi-icon { background: #eaf5ff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="support"] .sentrix-home-kpi-icon { background: #e8f7ef !important; color: #18a36b !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="notice"] .sentrix-home-kpi-icon { background: #f3eeff !important; color: #7a52f4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon svg { width: 24px !important; height: 24px !important; stroke: currentColor !important; stroke-width: 1.85 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-copy { gap: 4px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-label { color: #102b55 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-value { color: #0b2d5c !important; font-size: 29px !important; line-height: 32px !important; font-weight: 700 !important; letter-spacing: -0.2px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-meta { color: #365071 !important; font-size: 12px !important; line-height: 17px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-badge { min-width: 18px !important; height: 18px !important; padding: 0 6px !important; font-size: 11px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alerts { padding: 17px 18px 15px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile { min-width: 0 !important; min-height: 68px !important; grid-template-columns: 34px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon { align-self: center !important; width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; background: #fff6ed !important; color: #ff6a00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile[data-type="ticket"] .sentrix-home-alert-icon { background: #eef6ff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; stroke-width: 1.85 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-main { gap: 5px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-title-row { gap: 7px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-label { min-height: 18px !important; padding: 0 7px !important; font-size: 10px !important; line-height: 18px !important; font-weight: 600 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-title-row strong { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: #102b55 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-main p { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-site, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile time { color: #60708f !important; font-size: 11px !important; line-height: 16px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile.is-new-alert { animation: sentrixHomeAlertCardEnter 520ms cubic-bezier(0.19, 1, 0.22, 1) both !important; will-change: transform, opacity !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon svg { width: 24px !important; height: 24px !important; stroke: currentColor !important; stroke-width: 1.85 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(1) .soc-situation-kpi-icon { background: #fff1e8 !important; color: #ff5c00 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(2) .soc-situation-kpi-icon { background: #fff0f0 !important; color: #ff1f1f !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(3) .soc-situation-kpi-icon { background: #eef6ff !important; color: #1684ff !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(4) .soc-situation-kpi-icon { background: #e8f7ef !important; color: #18a36b !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(5) .soc-situation-kpi-icon { background: #f3eeff !important; color: #7a52f4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--total { background: #eef6ff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--pending { background: #fff1e8 !important; color: #ff5c00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--approved { background: #e8f7ef !important; color: #18a36b !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--danger { background: #fff0f0 !important; color: #ff1f1f !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--cancelled { background: #f3f5f8 !important; color: #7a8ba5 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-label { color: #102b55 !important; font-weight: 600 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-value, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-value, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView [data-ticket-summary-filter] .soc-ticket-reference-summary-value { color: #0b2d5c !important; font-weight: 700 !important; } } @media (prefers-reduced-motion: reduce) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile.is-new-alert { animation: none !important; transform: none !important; } } @media (min-width: 1024px) and (max-width: 1440px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView.is-active #analyticsAnalysisBoard { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "trend" "pattern" "cause" "people" !important; } } /* True-final topbar typography lock (2026-04-27). Keep the SENTRIX wordmark in the global topbar, separated from the page title by one vertical line, and keep the desktop sidebar below that topbar. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-shell-topbar-h: 68px; --sentrix-shell-sidebar-w: 214px; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar { position: sticky !important; top: 0 !important; z-index: 90 !important; width: 100% !important; max-width: 100% !important; height: var(--sentrix-shell-topbar-h) !important; min-height: var(--sentrix-shell-topbar-h) !important; margin-left: 0 !important; padding: 0 28px 0 30px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border: 0 !important; border-bottom: 1px solid var(--sx-line, #e8edf5) !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-left, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-left, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-left, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-left { display: flex !important; flex: 1 1 auto !important; min-width: 0 !important; height: 100% !important; align-items: center !important; gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-heading, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-brand-heading { width: var(--sentrix-shell-sidebar-w) !important; min-width: var(--sentrix-shell-sidebar-w) !important; max-width: var(--sentrix-shell-sidebar-w) !important; height: 100% !important; margin: 0 !important; padding: 0 24px 0 0 !important; display: inline-flex !important; flex: 0 0 var(--sentrix-shell-sidebar-w) !important; align-items: center !important; border-right: 1px solid #d7deea !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-link { width: 100% !important; height: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-wordmark { display: block !important; width: auto !important; height: 30px !important; max-width: 166px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-wordmark-dark { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-current-title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-current-title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-current-title { margin: 0 0 0 24px !important; padding: 0 !important; border-left: 0 !important; color: var(--sx-navy, #0b2d5c) !important; font-size: 20px !important; line-height: 24px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb { display: inline-flex !important; align-items: center !important; gap: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):not(.soc-topbar-home-breadcrumb-visible) .topbar-breadcrumb, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title:not(.hidden) { display: inline-flex !important; align-items: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-link { color: inherit !important; font: inherit !important; text-decoration: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-home-link { color: var(--sx-navy, #0b2d5c) !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-divider { color: #d7deea !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #menuSheetPanel { position: fixed !important; inset: var(--sentrix-shell-topbar-h) auto 0 0 !important; top: var(--sentrix-shell-topbar-h) !important; right: auto !important; bottom: 0 !important; left: 0 !important; z-index: 80 !important; display: flex !important; flex-direction: column !important; width: var(--sentrix-shell-sidebar-w) !important; min-width: var(--sentrix-shell-sidebar-w) !important; max-width: var(--sentrix-shell-sidebar-w) !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; transform: none !important; border-radius: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-sidebar-header, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel .soc-sidebar-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-sidebar-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #menuSheetPanel .soc-sidebar-header { display: none !important; } } /* Final topbar/sidebar geometry pin. Home still inherits older role-HQ sidebar geometry, so keep the desktop panel physically below the global topbar after every page-specific override. */ @media (min-width: 1024px) { html body.soc-desktop-shell:not(.soc-auth-shell-active) #menuSheetPanel, html body.soc-desktop-shell:not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel, html body.soc-desktop-shell.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) #menuSheetPanel, html body.soc-desktop-shell.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel, html body.soc-desktop-shell.role-hq.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) #menuSheetPanel, html body.soc-desktop-shell.role-hq.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #menuSheetPanel { position: fixed !important; inset: var(--sentrix-shell-topbar-h) auto 0 0 !important; top: var(--sentrix-shell-topbar-h) !important; right: auto !important; bottom: 0 !important; left: 0 !important; z-index: 80 !important; display: flex !important; flex-direction: column !important; width: var(--sentrix-shell-sidebar-w) !important; min-width: var(--sentrix-shell-sidebar-w) !important; max-width: var(--sentrix-shell-sidebar-w) !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; transform: none !important; border-radius: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } /* Last-pass home KPI and alert parity lock (2026-04-27). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions .soc-menu-item { color: #111827 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section-label { color: #111827 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item-icon, .soc-menu-group-icon, .soc-menu-group-chevron) svg { width: 18px !important; height: 18px !important; stroke-width: 1.65 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-dashboard { padding: 20px 24px 42px !important; gap: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card { min-height: 96px !important; height: 96px !important; gap: 18px !important; padding: 0 18px !important; border: 1px solid #e8edf5 !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon svg, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon svg { width: 24px !important; height: 24px !important; stroke: currentColor !important; stroke-width: 1.85 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon svg :is(path, circle, rect, line, polyline, polygon), html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon svg :is(path, circle, rect, line, polyline, polygon), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon svg :is(path, circle, rect, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(1) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--pending { background: #fff1e8 !important; color: #ff5c00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="ticket"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(3) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--total { background: #eaf5ff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="support"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(4) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--approved { background: #e8f7ef !important; color: #18a36b !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="notice"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(5) .soc-situation-kpi-icon { background: #f3eeff !important; color: #7a52f4 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(2) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--danger { background: #fff0f0 !important; color: #ff1f1f !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--cancelled { background: #f3f5f8 !important; color: #7a8ba5 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-label, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-label { color: #102b55 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-value { color: #0b2d5c !important; font-size: 29px !important; line-height: 32px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-meta { font-size: 12px !important; line-height: 17px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alerts { padding: 17px 18px 15px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile { min-height: 68px !important; grid-template-columns: 34px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon { align-self: center !important; width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; background: #fff6ed !important; color: #ff6a00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile[data-type="ticket"] .sentrix-home-alert-icon { background: #eef6ff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; stroke-width: 1.85 !important; fill: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-title-row strong { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-main p { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-site, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile time { font-size: 11px !important; line-height: 16px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile.is-new-alert { animation: sentrixHomeAlertCardEnter 520ms cubic-bezier(0.19, 1, 0.22, 1) both !important; } } /* True-final home KPI / realtime alert and KPI icon parity (2026-04-27). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions .soc-menu-item { color: #111827 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section-label { color: #111827 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item-icon, .soc-menu-group-icon, .soc-menu-group-chevron) svg { width: 18px !important; height: 18px !important; stroke-width: 1.65 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-dashboard { padding: 20px 24px 42px !important; gap: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card { min-height: 96px !important; height: 96px !important; gap: 18px !important; padding: 0 18px !important; border: 1px solid #e8edf5 !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon svg, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon svg { width: 24px !important; height: 24px !important; stroke: currentColor !important; stroke-width: 1.85 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(1) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--pending { background: #fff1e8 !important; color: #ff5c00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="ticket"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(3) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--total { background: #eaf5ff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="support"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(4) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--approved { background: #e8f7ef !important; color: #18a36b !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="notice"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(5) .soc-situation-kpi-icon { background: #f3eeff !important; color: #7a52f4 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(2) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--danger { background: #fff0f0 !important; color: #ff1f1f !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--cancelled { background: #f3f5f8 !important; color: #7a8ba5 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-label, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-label { color: #102b55 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-value { color: #0b2d5c !important; font-size: 29px !important; line-height: 32px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-meta { font-size: 12px !important; line-height: 17px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alerts { padding: 17px 18px 15px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile { min-height: 68px !important; grid-template-columns: 34px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon { align-self: center !important; width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; background: #fff6ed !important; color: #ff6a00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile[data-type="ticket"] .sentrix-home-alert-icon { background: #eef6ff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; stroke-width: 1.85 !important; fill: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-title-row strong { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-main p { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-site, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile time { font-size: 11px !important; line-height: 16px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile.is-new-alert { animation: sentrixHomeAlertCardEnter 520ms cubic-bezier(0.19, 1, 0.22, 1) both !important; } } @media (prefers-reduced-motion: reduce) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile.is-new-alert { animation: none !important; transform: none !important; } } /* Final topbar brand/title separation lock (2026-04-27). Brand typography lives in the global topbar; the desktop sidebar starts below it. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-shell-topbar-h: 68px; --sentrix-shell-sidebar-w: 214px; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar { position: sticky !important; top: 0 !important; z-index: 90 !important; width: 100% !important; max-width: 100% !important; height: var(--sentrix-shell-topbar-h) !important; min-height: var(--sentrix-shell-topbar-h) !important; margin-left: 0 !important; padding: 0 28px 0 30px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border: 0 !important; border-bottom: 1px solid var(--sx-line, #e8edf5) !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-left { display: flex !important; flex: 1 1 auto !important; min-width: 0 !important; height: 100% !important; align-items: center !important; gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-heading, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-brand-heading { width: var(--sentrix-shell-sidebar-w) !important; min-width: var(--sentrix-shell-sidebar-w) !important; max-width: var(--sentrix-shell-sidebar-w) !important; height: 100% !important; margin: 0 !important; padding: 0 24px 0 0 !important; display: inline-flex !important; flex: 0 0 var(--sentrix-shell-sidebar-w) !important; align-items: center !important; border-right: 1px solid #d7deea !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-link { width: 100% !important; height: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-wordmark { display: block !important; width: auto !important; height: 30px !important; max-width: 166px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-wordmark-dark { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-current-title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-current-title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-current-title { margin: 0 0 0 24px !important; padding: 0 !important; border-left: 0 !important; color: var(--sx-navy, #0b2d5c) !important; font-size: 20px !important; line-height: 24px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb { display: inline-flex !important; align-items: center !important; gap: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):not(.soc-topbar-home-breadcrumb-visible) .topbar-breadcrumb, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title:not(.hidden) { display: inline-flex !important; align-items: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-link { color: inherit !important; font: inherit !important; text-decoration: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-home-link { color: var(--sx-navy, #0b2d5c) !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-divider { color: #d7deea !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel { top: var(--sentrix-shell-topbar-h) !important; bottom: 0 !important; inset: var(--sentrix-shell-topbar-h) auto 0 0 !important; z-index: 80 !important; width: var(--sentrix-shell-sidebar-w) !important; min-width: var(--sentrix-shell-sidebar-w) !important; max-width: var(--sentrix-shell-sidebar-w) !important; height: auto !important; min-height: 0 !important; max-height: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-sidebar-header, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel .soc-sidebar-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-sidebar-header { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #mobileMenuPager, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #mobileTypeFlowTrack, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #mobileMenuRootPage { min-height: 0 !important; } } /* ===== Report tab icon visibility guard (2026-04-27) ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #reportPanel .report-choice-icon { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; color: var(--soc-primary) !important; opacity: 1 !important; visibility: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #reportPanel .report-choice-icon > svg.report-choice-icon-svg { display: block !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; color: currentColor !important; stroke: currentColor !important; fill: none !important; opacity: 1 !important; visibility: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #reportFlowTypeStep .report-choice-icon > svg.report-choice-icon-svg--ticket-template { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; } /* ===== Analytics dashboard compact layout / single-scroll guard (2026-04-27) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) main.container.ds-page.admin-layout:has(#analyticsView.is-active) { overflow-x: hidden !important; overflow-y: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel:has(#analyticsView.is-active) { height: auto !important; max-height: none !important; min-height: 100% !important; overflow: visible !important; padding: 10px 14px 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsDashboardV2, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsContentWrap, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-board { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsDashboardV2 { padding: 12px 16px 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-v2-header { margin-bottom: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-board { gap: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroRow { gap: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsAnalysisBoard { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.36fr) !important; gap: 14px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active :is(#analyticsTrendPanel, #analyticsPatternPanel) { min-height: 348px !important; height: auto !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsTrendPanel .soc-analytics-chart-shell { flex: 1 1 auto !important; min-height: 0 !important; display: grid !important; grid-template-rows: minmax(0, 1fr) auto !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 20px 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsTrendPanel .soc-analytics-line-chart { align-self: end !important; width: 100% !important; height: 176px !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsTrendAxis { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 4px 0 0 !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsLiveActivityBreakdown { flex: 0 0 auto !important; margin: 0 20px 14px !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPatternPanel .soc-analytics-pattern-shell { flex: 1 1 auto !important; min-height: 0 !important; display: grid !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto !important; justify-items: stretch !important; overflow: hidden !important; padding: 0 18px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-pattern-grid-board { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; align-content: start !important; grid-template-columns: 30px repeat(24, minmax(0, 1fr)) !important; gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-pattern-cell-board { min-height: 22px !important; border-radius: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPatternPanel .soc-analytics-pattern-footer { align-self: end !important; min-width: 0 !important; margin-top: 6px !important; padding: 0 !important; } } @media (min-width: 1024px) and (max-width: 1360px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsAnalysisBoard { grid-template-columns: minmax(0, 1fr) !important; } } /* ===== Analytics dashboard reference parity: home dashboard click target ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView { background: #f7f8fb !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsDashboardV2 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 22px 28px 30px !important; box-sizing: border-box !important; background: #f7f8fb !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-v2-header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 18px !important; margin: 0 0 20px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-workspace-page-title { margin: 0 !important; color: #111827 !important; font-size: 27px !important; line-height: 34px !important; font-weight: 760 !important; letter-spacing: -0.02em !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeaderSummary { margin-top: 6px !important; color: #64748b !important; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-v2-toolbar { display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; gap: 12px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-v2-toolbar-group { display: grid !important; gap: 6px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-v2-toolbar-label { color: #0f172a !important; font-size: 11px !important; line-height: 14px !important; font-weight: 650 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRangeQuick { display: flex !important; gap: 7px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRangeQuick [data-range="custom"] { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRangeQuick button, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsSitePickerButton, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(#analyticsExportBtn, #analyticsRefreshBtn) { height: 38px !important; min-height: 38px !important; border-radius: 8px !important; border: 1px solid #dfe6f1 !important; background: #ffffff !important; color: #172b4d !important; box-shadow: none !important; font-size: 12px !important; line-height: 16px !important; font-weight: 650 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRangeQuick button { width: 48px !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRangeQuick button.active { border-color: #ff6a00 !important; background: #fff7f0 !important; color: #ff5c00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsSitePickerButton { width: 180px !important; justify-content: space-between !important; padding: 0 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRefreshBtn { width: 82px !important; border-color: #ff6a00 !important; background: #ff6a00 !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsExportBtn { width: 82px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-board { display: grid !important; gap: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-board-card { border: 1px solid #e5eaf2 !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-board-card-head { min-height: 0 !important; margin: 0 !important; padding: 18px 20px 10px !important; border: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-board-card-head h3 { color: #111827 !important; font-size: 17px !important; line-height: 22px !important; font-weight: 720 !important; letter-spacing: -0.01em !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRow { display: grid !important; grid-template-columns: minmax(420px, 1.06fr) minmax(340px, 0.9fr) minmax(390px, 1fr) !important; gap: 16px !important; align-items: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(#analyticsHeroRiskCard, #analyticsHeroKpiRack, #analyticsHeroHealthCard) { min-height: 288px !important; height: 288px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard { border-color: transparent !important; background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.18), transparent 27%), linear-gradient(137deg, #5aa8ff 0%, #2e82ff 43%, #126df5 100%) !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-board-card-head { padding: 22px 22px 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-board-card-head h3, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-risk-info-trigger { color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-board-card-body--risk { padding: 8px 22px 22px !important; height: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-hero-core { display: grid !important; grid-template-columns: 178px minmax(0, 1fr) !important; align-items: center !important; gap: 22px !important; height: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-wrap, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge { width: 168px !important; height: 168px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard :is(.soc-analytics-v2-risk-gauge-track, .soc-analytics-v2-risk-gauge-arc) { stroke-width: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track { stroke: rgba(255, 255, 255, 0.28) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc { stroke: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRiskScoreValue { color: #ffffff !important; font-size: 43px !important; line-height: 1 !important; font-weight: 760 !important; letter-spacing: -0.03em !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-risk-grade { min-height: 27px !important; padding: 0 13px !important; border: 1px solid rgba(255, 255, 255, 0.54) !important; background: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; font-size: 12px !important; line-height: 27px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-spark-panel { display: grid !important; align-content: center !important; gap: 10px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline { width: 100% !important; height: 150px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .grid { stroke: rgba(255, 255, 255, 0.13) !important; stroke-width: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .line { fill: none !important; stroke: #ffffff !important; stroke-width: 2.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .dot { fill: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .highlight-line { stroke: rgba(255, 255, 255, 0.7) !important; stroke-width: 1.2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .tooltip rect { fill: #ffffff !important; filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.18)) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .tooltip text { fill: #64748b !important; font-size: 11px !important; font-weight: 650 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .tooltip text:last-child { fill: #111827 !important; font-size: 13px !important; font-weight: 760 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-spark-axis { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 10px !important; color: rgba(255, 255, 255, 0.86) !important; font-size: 11px !important; line-height: 14px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-rack { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; height: 100% !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-board-card-body, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-board-card-body--health { padding: 8px 20px 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile { min-height: 86px !important; padding: 16px 18px !important; border: 1px solid #e6ebf2 !important; border-radius: 10px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .label::before { content: "" !important; display: inline-block !important; width: 7px !important; height: 7px !important; margin-right: 8px !important; border-radius: 999px !important; background: #ff7a1a !important; vertical-align: 1px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile[data-tone="warning"] .label::before { background: #ffbe55 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile[data-tone="danger"] .label::before { background: #f75b69 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .label { color: #64748b !important; font-size: 12px !important; line-height: 16px !important; font-weight: 620 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile strong { margin-top: 8px !important; color: #111827 !important; font-size: 28px !important; line-height: 31px !important; font-weight: 760 !important; letter-spacing: -0.02em !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .meta { margin-top: 3px !important; color: #64748b !important; font-size: 12px !important; line-height: 16px !important; font-weight: 520 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-panel { display: grid !important; grid-template-rows: auto auto 1fr !important; gap: 18px !important; height: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head .label { color: #64748b !important; font-size: 12px !important; line-height: 17px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head strong { margin-top: 6px !important; color: #111827 !important; font-size: 27px !important; line-height: 32px !important; font-weight: 760 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head .meta { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-bar { height: 9px !important; margin: 0 !important; border-radius: 999px !important; background: #eef2f7 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-segment.is-safe { background: #28c6a2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-legend { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; align-self: end !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item { min-height: 66px !important; padding: 13px 15px !important; border: 1px solid #e6ebf2 !important; border-radius: 10px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item .label { color: #64748b !important; font-size: 11px !important; line-height: 15px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item .meta { color: #64748b !important; font-size: 11px !important; line-height: 15px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item strong { color: #111827 !important; font-size: 19px !important; line-height: 22px !important; font-weight: 760 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsAnalysisBoard { display: grid !important; grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.35fr) !important; gap: 18px !important; align-items: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(#analyticsTrendPanel, #analyticsPatternPanel) { min-height: 326px !important; height: 326px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(#analyticsCausePanel, #analyticsPeoplePanel) { min-height: 234px !important; height: 234px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsTrendPanel .soc-analytics-chart-shell { padding: 0 22px 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-line-chart { height: 182px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsLiveActivityBreakdown { margin: 8px 22px 0 !important; padding: 12px 16px !important; border: 1px solid #e6ebf2 !important; border-radius: 9px !important; background: #fbfcff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-live-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-live-head span { color: #111827 !important; font-size: 13px !important; font-weight: 670 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-live-head strong { color: #ff5c00 !important; font-size: 24px !important; line-height: 26px !important; font-weight: 760 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-live-head small, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-live-grid { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-shell { padding: 0 22px 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-head-actions { height: 34px !important; padding: 0 !important; gap: 6px !important; border: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-head-actions button { height: 32px !important; padding: 0 12px !important; border: 1px solid #dfe6f1 !important; border-radius: 8px !important; background: #ffffff !important; color: #64748b !important; font-size: 12px !important; font-weight: 620 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-head-actions button.is-active { border-color: #ff6a00 !important; background: #fff7f0 !important; color: #ff5c00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-pattern-grid-board { grid-template-columns: 34px repeat(24, minmax(18px, 1fr)) !important; gap: 5px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-pattern-cell-board { min-height: 24px !important; border-radius: 7px !important; font-size: 11px !important; font-weight: 620 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-sort-field { display: inline-flex !important; align-items: center !important; gap: 7px !important; margin-left: auto !important; color: #64748b !important; font-size: 11px !important; line-height: 14px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-sort-field select { width: 106px !important; height: 30px !important; min-height: 30px !important; padding: 0 24px 0 9px !important; border: 1px solid #dfe6f1 !important; border-radius: 7px !important; background: #ffffff !important; color: #172b4d !important; font-size: 11px !important; line-height: 14px !important; font-weight: 620 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsCausePanel .soc-analytics-cause-shell, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-shell { padding: 0 22px 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-list { display: grid !important; gap: 13px !important; max-height: 166px !important; overflow-y: auto !important; overscroll-behavior: contain !important; padding-right: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-row { display: grid !important; gap: 7px !important; min-height: 30px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-head { color: #111827 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 620 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-head strong { font-weight: 670 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-head span { color: #64748b !important; font-weight: 560 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-track { height: 7px !important; background: #e9edf3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-track span { background: #ff671a !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPeopleHotspotList .soc-analytics-hotspot-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPeopleHotspotList .soc-analytics-hotspot-row { min-height: 160px !important; padding: 14px 16px !important; border: 1px solid #e6ebf2 !important; border-radius: 10px !important; background: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-hotspot-rank { width: 30px !important; height: 30px !important; display: inline-grid !important; place-items: center !important; border-radius: 999px !important; background: #f1f5f9 !important; color: #172b4d !important; font-size: 13px !important; line-height: 15px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-hotspot-score-badge { border-color: #ffd6c4 !important; background: #fff7f0 !important; color: #ff5c00 !important; font-size: 12px !important; font-weight: 660 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-hotspot-head strong { color: #111827 !important; font-size: 14px !important; line-height: 19px !important; font-weight: 720 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-hotspot-role, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-hotspot-last, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-hotspot-metric-chip { color: #64748b !important; font-size: 11px !important; line-height: 15px !important; font-weight: 540 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(#analyticsSiteTable, #analyticsFollowupBand) { display: none !important; } } /* Final shell navigation override: Dashboard is opened from Home, not from a sidebar Analytics entry. */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-item-key="hq-ops-analytics"], html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-item-key="field-ops-analytics"] { display: none !important; } @media (min-width: 1024px) and (max-width: 1420px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsDashboardV2 { padding-inline: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRow, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsAnalysisBoard { grid-template-columns: 1fr !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(#analyticsHeroRiskCard, #analyticsHeroKpiRack, #analyticsHeroHealthCard, #analyticsTrendPanel, #analyticsPatternPanel, #analyticsCausePanel, #analyticsPeoplePanel) { height: auto !important; } } /* ===== Sentrix ticket reference final alignment (2026-04-25) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) { --sx-navy: #0b2d5c; --sx-text: #102b55; --sx-muted: #7c8daa; --sx-line: #e8edf5; --sx-soft-line: #eef2f8; --sx-bg: #fbfcff; --sx-orange: #ff4b16; --sx-orange-bg: #fff2eb; --sx-red: #ff1f1f; --sx-red-bg: #fff0f0; --sx-green: #18ad56; --sx-green-bg: #e9f8ef; --sx-blue-gray: #64748b; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel { width: 214px !important; min-width: 214px !important; max-width: 214px !important; flex: 0 0 214px !important; border-right: 1px solid var(--sx-line) !important; background: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-sidebar-header { height: 76px !important; min-height: 76px !important; padding: 26px 0 0 27px !important; border: 0 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-sidebar-logo-img { width: 152px !important; height: auto !important; max-height: 29px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileMenuRootPage { padding: 0 13px 12px 13px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList { gap: 1px !important; padding: 0 0 12px 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList::-webkit-scrollbar { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-menu-section-label { margin: 12px 2px 7px !important; color: #7c8daa !important; font-size: 12px !important; line-height: 17px !important; font-weight: 700 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel :is(.soc-menu-group-toggle, .soc-menu-sub-item) { min-height: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #173866 !important; grid-template-columns: 22px minmax(0, 1fr) !important; gap: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-menu-group-toggle { grid-template-columns: 22px minmax(0, 1fr) 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label) { color: inherit !important; font-size: 14px !important; line-height: 18px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) { width: 19px !important; min-width: 19px !important; height: 19px !important; color: inherit !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) :is(svg, img, .sentrix-theme-icon) { width: 19px !important; height: 19px !important; transform: none !important; stroke-width: 1.9 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-menu-sub-item.is-active { position: relative !important; background: #fff0eb !important; color: var(--sx-orange) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-menu-sub-item.is-active::before { display: block !important; left: 0 !important; top: 7px !important; bottom: auto !important; width: 3px !important; height: 22px !important; border-radius: 999px !important; background: var(--sx-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .mobile-nav-actions { padding: 14px 18px 16px !important; background: #ffffff !important; border-top: 1px solid var(--sx-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar { width: calc(100vw - 214px) !important; max-width: calc(100vw - 214px) !important; height: 68px !important; min-height: 68px !important; margin-left: 214px !important; padding: 0 28px 0 26px !important; border-bottom: 1px solid var(--sx-line) !important; background: #ffffff !important; box-shadow: none !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #topbarBreadcrumb { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-left { display: flex !important; align-items: center !important; gap: 0 !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-current-title { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; border-left: 0 !important; color: var(--sx-navy) !important; font-size: 20px !important; line-height: 24px !important; font-weight: 800 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .container.admin-layout { width: calc(100vw - 214px) !important; max-width: calc(100vw - 214px) !important; min-width: 0 !important; height: calc(100dvh - 68px) !important; min-height: calc(100dvh - 68px) !important; margin-left: 214px !important; padding: 0 !important; background: var(--sx-bg) !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #dashboardPanel { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView { height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 20px 24px 24px 19px !important; background: var(--sx-bg) !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-phase1-ticket-surface { height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-shell { height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; max-width: none !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-grid { flex: 0 0 92px !important; display: grid !important; grid-template-columns: repeat(6, 208px) !important; gap: 22px !important; width: 100% !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-card.is-active, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-card:first-child { height: 92px !important; display: flex !important; align-items: center !important; gap: 18px !important; padding: 0 28px !important; border: 1px solid var(--sx-soft-line) !important; border-radius: 4px !important; background: #ffffff !important; color: var(--sx-text) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon { width: 38px !important; height: 38px !important; min-width: 38px !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-size: 0 !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon svg { width: 38px !important; height: 38px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon--total { color: var(--sx-navy) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon--pending { color: var(--sx-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon--approved { color: var(--sx-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon--danger { color: var(--sx-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon--cancelled { color: var(--sx-blue-gray) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-copy { display: grid !important; gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-label { color: var(--sx-text) !important; font-size: 14px !important; line-height: 18px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-value, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView [data-ticket-summary-filter] .soc-ticket-reference-summary-value { color: var(--sx-navy) !important; font-size: 31px !important; line-height: 31px !important; font-weight: 800 !important; letter-spacing: -0.5px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-filterbar { flex: 0 0 82px !important; height: 82px !important; min-height: 82px !important; display: grid !important; grid-template-columns: 247px 170px 170px 170px 170px 170px 104px !important; align-items: end !important; gap: 16px !important; padding: 16px 14px 18px !important; border: 1px solid var(--sx-soft-line) !important; border-radius: 4px !important; background: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-search, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-field { min-width: 0 !important; width: auto !important; display: grid !important; gap: 5px !important; color: #7b8aa7 !important; font-size: 12px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-search { position: relative !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-search > span { position: absolute !important; left: 13px !important; bottom: 11px !important; width: 18px !important; height: 18px !important; color: #60708f !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-search > span svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-reset svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView :is(.soc-ticket-reference-search input, .soc-ticket-reference-field select, .soc-ticket-reference-reset, .soc-ticket-reference-page-size select) { height: 40px !important; border: 1px solid #dfe6f1 !important; border-radius: 5px !important; background: #ffffff !important; color: var(--sx-text) !important; font-size: 13px !important; font-weight: 600 !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-search input { width: 100% !important; padding: 0 12px 0 38px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-field select, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-page-size select { width: 100% !important; padding: 0 34px 0 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-reset { min-width: 104px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 0 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-main { position: relative !important; flex: 1 1 auto !important; min-height: 0 !important; margin-top: -8px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 484px !important; gap: 16px !important; align-items: stretch !important; height: auto !important; max-height: none !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-main.is-detail-collapsed { grid-template-columns: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-main.is-detail-collapsed .soc-ticket-reference-detail-card { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-list-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-detail-card { border: 1px solid var(--sx-soft-line) !important; border-radius: 4px !important; background: #ffffff !important; box-shadow: none !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-list-card { display: flex !important; flex-direction: column !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-table-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row { display: grid !important; grid-template-columns: 64px 142px 140px minmax(240px, 1fr) 112px 118px 136px !important; align-items: center !important; column-gap: 0 !important; min-width: 952px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-table-header { flex: 0 0 40px !important; height: 40px !important; padding: 0 16px !important; border-bottom: 1px solid var(--sx-soft-line) !important; background: #fafbfc !important; color: #52627a !important; font-size: 12px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-list { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; scrollbar-width: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-list::-webkit-scrollbar { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row { position: relative !important; min-height: 42px !important; padding: 0 16px !important; border: 0 !important; border-bottom: 1px solid #f0f3f8 !important; border-radius: 0 !important; background: #ffffff !important; color: #284161 !important; font-size: 12px !important; font-weight: 700 !important; text-align: left !important; box-shadow: none !important; outline: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row:hover { background: #fbfcff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row.is-selected, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row.is-selected:hover, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row.is-important.is-selected { background: var(--sx-orange-bg) !important; outline: none !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row.is-important, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row.is-important:hover { background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell--importance { display: grid !important; place-items: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-star { display: inline-grid !important; place-items: center !important; width: 18px !important; height: 18px !important; color: #9aa8bd !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-star svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-star.is-important, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-star.is-important svg { color: var(--sx-red) !important; fill: currentColor !important; stroke: currentColor !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell--site, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell--type, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell--time { color: #40567a !important; font-size: 12px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell--title { color: #122f58 !important; font-size: 13px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell--requested { text-align: center !important; color: #40567a !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell--requested.has-count { color: var(--sx-orange) !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 56px !important; height: 24px !important; padding: 0 8px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-pill.status-pending { border: 1px solid #ffd6c4 !important; background: #fff2eb !important; color: var(--sx-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-pill.status-approved { border: 1px solid #cdeedc !important; background: #e9f8ef !important; color: var(--sx-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-pill.status-rejected, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-pill.status-unavailable { border: 1px solid #ffd0d0 !important; background: #fff0f0 !important; color: var(--sx-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-pill.status-cancelled { border: 1px solid #dfe6f1 !important; background: #f8fafc !important; color: #64748b !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-list-footer { flex: 0 0 56px !important; height: 56px !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 12px !important; padding: 0 16px !important; border-top: 1px solid #f0f3f8 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-page-btn { width: 32px !important; height: 32px !important; border: 1px solid #dfe6f1 !important; border-radius: 6px !important; background: #ffffff !important; color: var(--sx-text) !important; font-size: 13px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-page-btn.is-active { border-color: var(--sx-orange) !important; background: var(--sx-orange) !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-detail-card { width: 484px !important; min-width: 484px !important; max-width: 484px !important; min-height: 0 !important; height: 100% !important; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 17px !important; overflow: auto !important; scrollbar-width: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-detail-card::-webkit-scrollbar { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-detail-head { display: flex !important; align-items: center !important; gap: 14px !important; min-height: 28px !important; margin: 0 0 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-type-badge { min-width: 70px !important; height: 28px !important; padding: 0 11px !important; border: 1px solid rgba(255, 75, 22, 0.35) !important; border-radius: 5px !important; background: var(--sx-orange-bg) !important; color: var(--sx-orange) !important; font-size: 13px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanelTitle { margin: 0 !important; min-width: 0 !important; color: #122f58 !important; font-size: 16px !important; line-height: 22px !important; font-weight: 900 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-actions { height: 32px !important; min-height: 32px !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 0 18px !important; overflow: hidden !important; border: 1px solid var(--sx-line) !important; border-radius: 5px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-actions .soc-ticket-reference-status-action { height: 30px !important; min-height: 30px !important; padding: 0 8px !important; border: 0 !important; border-right: 1px solid var(--sx-line) !important; border-radius: 0 !important; background: #ffffff !important; color: #485b78 !important; font-size: 12px !important; font-weight: 800 !important; opacity: 1 !important; cursor: pointer !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-actions .soc-ticket-reference-status-action:last-child { border-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-actions .soc-ticket-reference-status-action:is(.status-pending, .status-approved, .status-rejected, .status-unavailable, .status-cancelled):not(.is-active) { border-top: 0 !important; border-bottom: 0 !important; background: #ffffff !important; color: #485b78 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action.is-active.status-pending { border: 1px solid #ffd6c4 !important; background: #fff2eb !important; color: var(--sx-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action.is-active.status-approved { border: 1px solid #cdeedc !important; background: #e9f8ef !important; color: var(--sx-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action.is-active.status-rejected, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action.is-active.status-unavailable { border: 1px solid #ffd0d0 !important; background: #fff0f0 !important; color: var(--sx-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action.is-active.status-cancelled { border: 1px solid #dfe6f1 !important; background: #f8fafc !important; color: #64748b !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-section { padding: 0 0 18px !important; margin: 0 0 18px !important; border: 0 !important; border-bottom: 1px solid var(--sx-soft-line) !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-section:last-of-type { margin-bottom: 0 !important; border-bottom: 0 !important; padding-bottom: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-pc-side-panel-section-title { margin: 0 0 14px !important; color: #122f58 !important; font-size: 14px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanelSummary, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-basic-info, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-timeline { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-info-list { display: grid !important; gap: 8px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-info-list div { display: grid !important; grid-template-columns: 88px minmax(0, 1fr) !important; gap: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-info-list dt { color: #7b8aa7 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-info-list dd { margin: 0 !important; color: #486080 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-timeline-list { display: grid !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-timeline-list li { display: grid !important; grid-template-columns: 10px 48px minmax(0, 1fr) !important; gap: 10px !important; align-items: start !important; color: #486080 !important; font-size: 12px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-timeline-dot { width: 8px !important; height: 8px !important; margin-top: 5px !important; border-radius: 50% !important; background: #ff6b16 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-comments { min-height: 24px !important; display: flex !important; align-items: center !important; padding: 0 10px !important; border: 1px solid var(--sx-line) !important; border-radius: 5px !important; background: #ffffff !important; color: #7b8aa7 !important; font-size: 12px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-comment-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; width: 100% !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-attachments { display: block !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-attachment-empty { height: 75px !important; display: grid !important; place-items: center !important; gap: 4px !important; border: 1px dashed #dce4ef !important; border-radius: 6px !important; color: #8a9ab8 !important; font-size: 13px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-attachment-empty span, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-attachment-empty svg { width: 26px !important; height: 26px !important; color: #8a9ab8 !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-attachment-empty p { margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-collapse-btn { position: absolute !important; right: 476px !important; top: 50% !important; transform: translate(50%, -50%) !important; width: 32px !important; min-width: 32px !important; height: 32px !important; padding: 0 !important; display: grid !important; place-items: center !important; border-radius: 999px !important; border: 1px solid var(--sx-soft-line) !important; background: #ffffff !important; color: var(--sx-orange) !important; box-shadow: 0 4px 12px rgba(16, 43, 85, 0.12) !important; z-index: 20 !important; cursor: pointer !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-collapse-btn svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.3 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-main.is-detail-collapsed .soc-ticket-reference-collapse-btn { right: 0 !important; } } @media (min-width: 1024px) and (max-width: 1439px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-filterbar { overflow-x: auto !important; scrollbar-width: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-grid::-webkit-scrollbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-filterbar::-webkit-scrollbar { display: none !important; } } /* Sentrix Web situation-room reference UI. Frontend-only presentation layer. */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference { --situation-bg: #fbfcff; --situation-surface: #ffffff; --situation-border: #e8edf5; --situation-border-soft: #eef2f8; --situation-text: #102b55; --situation-muted: #7c8daa; --situation-orange: #ff4b16; --situation-red: #ff1f1f; --situation-green: #18ad56; --situation-blue: #3897ff; --situation-purple: #8a35ff; display: block !important; min-height: 0 !important; height: calc(100% + 32px) !important; margin-top: -32px !important; padding: 0 20px 14px !important; background: var(--situation-bg) !important; color: var(--situation-text) !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-reference-surface { display: flex !important; flex-direction: column !important; gap: 18px !important; height: 100% !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-reference-hidden-control { display: none !important; position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #realtimeActiveFilters { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-grid.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card { position: relative !important; display: grid !important; grid-template-columns: 56px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-items: center !important; column-gap: 18px !important; height: 106px !important; padding: 20px 26px !important; border: 1px solid var(--situation-border-soft) !important; border-radius: 4px !important; background: var(--situation-surface) !important; box-shadow: none !important; color: var(--situation-text) !important; text-align: left !important; cursor: pointer !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card.is-active { border-color: rgba(255, 75, 22, 0.42) !important; background: #fff7f2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-icon { grid-row: 1 / span 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; border: 3px solid currentColor !important; border-radius: 12px !important; color: var(--situation-text) !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(2) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card--important .soc-summary-value { color: var(--situation-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(4) .soc-situation-kpi-icon { color: var(--situation-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(5) .soc-situation-kpi-icon { color: var(--situation-purple) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-summary-label { align-self: end !important; color: var(--situation-text) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.25 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-summary-value { align-self: start !important; color: var(--situation-text) !important; font-size: 33px !important; font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-card { display: grid !important; grid-template-columns: minmax(190px, 1.2fr) repeat(5, minmax(90px, 0.72fr)) !important; gap: 12px !important; align-items: end !important; height: 81px !important; min-height: 81px !important; padding: 12px 14px !important; border: 1px solid var(--situation-border-soft) !important; border-radius: 4px !important; background: var(--situation-surface) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-search-field, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-field { display: flex !important; flex-direction: column !important; gap: 6px !important; color: var(--situation-muted) !important; font-size: 12px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-search-field { position: relative !important; justify-content: flex-end !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-search-icon { position: absolute !important; left: 14px !important; bottom: 10px !important; color: #60708f !important; font-size: 18px !important; line-height: 1 !important; pointer-events: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-search-field input, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-field select, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-page-size select { width: 100% !important; height: 40px !important; border: 1px solid var(--situation-border) !important; border-radius: 6px !important; background: #ffffff !important; color: var(--situation-text) !important; font-size: 13px !important; font-weight: 500 !important; outline: none !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-search-field input { padding: 0 14px 0 42px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-field select, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-page-size select { padding: 0 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-main-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 416px !important; gap: 16px !important; align-items: stretch !important; min-height: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-left-stack { display: flex !important; flex-direction: column !important; gap: 16px !important; min-width: 0 !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-table-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-detail-card { min-width: 0 !important; min-height: 0 !important; border: 1px solid var(--situation-border-soft) !important; border-radius: 4px !important; background: var(--situation-surface) !important; box-shadow: none !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-table-card { flex: 1 1 auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-alerts-feed-section { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-table-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row { display: grid !important; grid-template-columns: 48px 118px 154px minmax(170px, 1fr) 56px 74px 126px !important; align-items: center !important; column-gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-table-header { flex: 0 0 40px !important; min-height: 40px !important; padding: 0 18px !important; border-bottom: 1px solid var(--situation-border-soft) !important; background: #fafbfc !important; color: var(--situation-muted) !important; font-size: 12px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-table-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row { position: relative !important; min-height: 48px !important; padding: 0 18px !important; border: 0 !important; border-bottom: 1px solid #f0f3f8 !important; border-radius: 0 !important; background: #ffffff !important; color: #244064 !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row:hover { background: #fbfcff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row.is-selected::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3px !important; background: var(--situation-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row.is-critical-incident { background: #fff1f0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row.is-critical-incident:hover { background: #ffe8e5 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row > span, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row > strong { grid-column: auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row .soc-situation-star { grid-column: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row .incident-location { grid-column: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row .incident-type { grid-column: 3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row .incident-title { grid-column: 4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row .incident-severity { grid-column: 5 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row .incident-status { grid-column: 6 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row .incident-created-at { grid-column: 7 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-star { color: #9fb0c9 !important; font-size: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-star.is-important { color: var(--situation-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .incident-title { color: var(--situation-text) !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .incident-created-at, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .incident-type, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .incident-location { color: #4c6388 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .eci { font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .eci--lv4 { color: var(--situation-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .eci--lv3 { color: #ff8a00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .eci--default { color: #111827 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .status-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: fit-content !important; min-width: 44px !important; height: 24px !important; padding: 0 10px !important; border: 1px solid transparent !important; border-radius: 7px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .status-badge--received { border-color: #cce5ff !important; background: #eaf4ff !important; color: #1f83ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .status-badge--progress { border-color: #ffd9c8 !important; background: #fff0e8 !important; color: var(--situation-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .status-badge--closed { border-color: #ccefd9 !important; background: #eaf8f0 !important; color: var(--situation-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-table-footer { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; flex: 0 0 58px !important; padding: 0 18px !important; border-top: 1px solid var(--situation-border-soft) !important; background: #ffffff !important; color: var(--situation-text) !important; font-size: 13px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-pagination { display: inline-flex !important; align-items: center !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-pagination button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border: 1px solid var(--situation-border) !important; border-radius: 6px !important; background: #ffffff !important; color: #3c4f70 !important; font-size: 14px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-pagination button.is-active { border-color: var(--situation-orange) !important; background: var(--situation-orange) !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-page-size { justify-self: end !important; width: 112px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-detail-card { display: flex !important; flex-direction: column !important; width: 416px !important; min-width: 416px !important; max-width: 416px !important; padding: 16px !important; overflow: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-detail-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; flex: 0 0 auto !important; padding: 0 0 18px !important; border: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-detail-heading { display: flex !important; align-items: flex-start !important; gap: 10px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-important-pill { display: inline-flex !important; align-items: center !important; height: 28px !important; padding: 0 9px !important; border: 1px solid rgba(255, 31, 31, 0.72) !important; border-radius: 4px !important; color: var(--situation-red) !important; background: #fff8f8 !important; font-size: 13px !important; font-weight: 800 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-important-pill.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanelTitle { margin: 2px 0 0 !important; color: var(--situation-text) !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.35 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-pc-side-panel-head-actions { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanelOpenDetailBtn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanelDeleteBtn { height: 36px !important; min-width: 54px !important; border-radius: 5px !important; padding: 0 14px !important; font-size: 13px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanelDeleteBtn { border-color: rgba(255, 31, 31, 0.55) !important; color: var(--situation-red) !important; background: #fffafa !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-pc-side-panel-kpi { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-pc-side-panel-section { padding: 16px 0 !important; border-top: 1px solid var(--situation-border-soft) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-pc-side-panel-section-title { margin: 0 0 12px !important; color: var(--situation-text) !important; font-size: 15px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-basic-info { display: grid !important; gap: 8px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-basic-row { display: grid !important; grid-template-columns: 92px minmax(0, 1fr) !important; align-items: center !important; gap: 14px !important; min-height: 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-basic-row dt { color: var(--situation-muted) !important; font-size: 13px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-basic-row dd { margin: 0 !important; color: #4c6388 !important; font-size: 13px !important; font-weight: 600 !important; min-width: 0 !important; overflow-wrap: anywhere !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-timeline-list { display: grid !important; gap: 9px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-timeline-item { display: grid !important; grid-template-columns: 9px 48px minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; color: #4c6388 !important; font-size: 13px !important; line-height: 1.45 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-timeline-dot { width: 8px !important; height: 8px !important; margin-top: 5px !important; border-radius: 50% !important; background: var(--situation-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-timeline-item time { color: var(--situation-text) !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-timeline-item p { margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-comment-list { display: grid !important; gap: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-comment-item { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) 20px !important; gap: 12px !important; align-items: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-comment-avatar { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #edf2f8 !important; color: #60708f !important; font-size: 13px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-comment-body header { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-comment-body strong { color: var(--situation-text) !important; font-size: 13px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-comment-body span, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-comment-body time { color: var(--situation-muted) !important; font-size: 12px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-comment-body p { margin: 0 0 4px !important; color: #4c6388 !important; font-size: 13px !important; line-height: 1.5 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-comment-more { border: 0 !important; background: transparent !important; color: #7c8daa !important; font-size: 18px !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-comment-empty, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-attachment-empty { margin: 0 !important; color: var(--situation-muted) !important; font-size: 13px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-attachment-empty { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 70px !important; border: 1px dashed var(--situation-border) !important; border-radius: 6px !important; background: #ffffff !important; text-align: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-attachment-empty span { color: #7c8daa !important; font-size: 26px !important; line-height: 1 !important; } @media (max-width: 1280px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-card { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-main-grid { grid-template-columns: minmax(720px, 1fr) 380px !important; overflow-x: auto !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView { --ticket-ref-bg: #fafbfc; --ticket-ref-surface: #ffffff; --ticket-ref-border: #e8eef4; --ticket-ref-line: #eef2f6; --ticket-ref-text: #172b4d; --ticket-ref-muted: #60708f; --ticket-ref-orange: #ff5c00; --ticket-ref-orange-soft: #fff0e8; --ticket-ref-green: #00b673; --ticket-ref-green-soft: #e8f8f0; --ticket-ref-red: #f1000e; --ticket-ref-red-soft: #fff1f1; --ticket-ref-slate: #7a8ba5; --ticket-ref-slate-soft: #f3f5f8; background: var(--ticket-ref-bg) !important; padding: 20px 20px 12px !important; min-width: 0 !important; overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-phase1-ticket-surface { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-hidden-controls, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-hidden-actions { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-shell { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100% !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 22px !important; width: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-card { height: 92px !important; display: flex !important; align-items: center !important; gap: 20px !important; padding: 16px 26px !important; border: 1px solid var(--ticket-ref-border) !important; border-radius: 7px !important; background: var(--ticket-ref-surface) !important; color: var(--ticket-ref-text) !important; box-shadow: none !important; cursor: pointer !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-card.is-active { border-color: rgba(255, 92, 0, 0.42) !important; background: #fff8f3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon { width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 44px !important; border: 3px solid currentColor !important; border-radius: 999px !important; font-size: 27px !important; font-weight: 700 !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon--total { color: #0b3765 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon--pending { color: var(--ticket-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon--approved { color: var(--ticket-ref-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon--danger { color: var(--ticket-ref-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-icon--cancelled { color: var(--ticket-ref-slate) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-copy { display: grid !important; gap: 2px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-label { font-size: 14px !important; font-weight: 650 !important; color: var(--ticket-ref-text) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-value { font-size: 30px !important; line-height: 1 !important; font-weight: 760 !important; color: var(--ticket-ref-text) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView [data-ticket-summary-filter="pending"] .soc-ticket-reference-summary-value { color: var(--ticket-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView [data-ticket-summary-filter="approved"] .soc-ticket-reference-summary-value { color: var(--ticket-ref-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView [data-ticket-summary-filter="unavailable"] .soc-ticket-reference-summary-value, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView [data-ticket-summary-filter="rejected"] .soc-ticket-reference-summary-value { color: var(--ticket-ref-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView [data-ticket-summary-filter="cancelled"] .soc-ticket-reference-summary-value { color: var(--ticket-ref-text) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-filterbar { box-sizing: border-box !important; height: 84px !important; min-height: 0 !important; display: flex !important; align-items: center !important; gap: 20px !important; padding: 12px 16px !important; border: 1px solid var(--ticket-ref-border) !important; border-radius: 7px !important; background: var(--ticket-ref-surface) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-search, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-field { display: grid !important; gap: 5px !important; color: var(--ticket-ref-muted) !important; font-size: 13px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-search { width: 250px !important; position: relative !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-search > span { position: absolute !important; left: 13px !important; bottom: 9px !important; color: var(--ticket-ref-muted) !important; font-size: 20px !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-search input, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-field select, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-reset, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-page-size select { height: 40px !important; border: 1px solid var(--ticket-ref-border) !important; border-radius: 6px !important; background: #ffffff !important; color: var(--ticket-ref-text) !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-search input { width: 100% !important; padding: 0 12px 0 38px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-field { min-width: 164px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-field select, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-page-size select { width: 100% !important; padding: 0 34px 0 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-reset { margin-left: auto !important; min-width: 96px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 0 14px !important; cursor: pointer !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-main { display: grid !important; grid-template-columns: minmax(0, 1fr) 484px !important; gap: 16px !important; align-items: stretch !important; height: calc(100vh - 305px) !important; min-height: 540px !important; max-height: 640px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-list-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-detail-card { border: 1px solid var(--ticket-ref-border) !important; border-radius: 7px !important; background: var(--ticket-ref-surface) !important; box-shadow: none !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-list-card { display: flex !important; flex-direction: column !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-table-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row { display: grid !important; grid-template-columns: 70px 146px 146px minmax(230px, 1fr) 128px 128px 154px !important; align-items: center !important; column-gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-table-header { height: 40px !important; padding: 0 16px !important; background: #fafbfc !important; border-bottom: 1px solid var(--ticket-ref-line) !important; color: var(--ticket-ref-muted) !important; font-size: 13px !important; font-weight: 650 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-list { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-list::-webkit-scrollbar { width: 0 !important; height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row { min-height: 43px !important; padding: 0 16px !important; border: 0 !important; border-bottom: 1px solid var(--ticket-ref-line) !important; border-radius: 0 !important; background: #ffffff !important; color: var(--ticket-ref-muted) !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row:hover { background: #fff8f3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row.is-selected { background: var(--ticket-ref-orange-soft) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row.is-important { background: var(--ticket-ref-red-soft) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row.is-important:hover { background: #ffeaea !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row.is-important.is-selected { background: #ffe3e3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell--importance { text-align: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-star { font-size: 18px !important; color: #9aacbf !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-star.is-important { color: var(--ticket-ref-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell--title { color: var(--ticket-ref-text) !important; font-weight: 730 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell--requested { text-align: center !important; color: var(--ticket-ref-muted) !important; font-weight: 650 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-cell--requested.has-count { color: var(--ticket-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-pill, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 24px !important; padding: 3px 10px !important; border: 1px solid transparent !important; border-radius: 7px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-pill.status-pending, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action.status-pending { color: var(--ticket-ref-orange) !important; border-color: rgba(255, 92, 0, 0.28) !important; background: var(--ticket-ref-orange-soft) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-pill.status-approved, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action.status-approved { color: #0b9f68 !important; border-color: rgba(0, 182, 115, 0.24) !important; background: var(--ticket-ref-green-soft) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-pill.status-unavailable, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-pill.status-rejected, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action.status-unavailable, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action.status-rejected { color: var(--ticket-ref-red) !important; border-color: rgba(241, 0, 14, 0.22) !important; background: var(--ticket-ref-red-soft) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-pill.status-cancelled, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action.status-cancelled { color: #65758b !important; border-color: #e1e7ef !important; background: var(--ticket-ref-slate-soft) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-list-footer { height: 64px !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 12px !important; padding: 0 16px !important; border-top: 1px solid var(--ticket-ref-line) !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-total { color: var(--ticket-ref-text) !important; font-size: 13px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-pagination { display: inline-flex !important; align-items: center !important; gap: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-page-btn { width: 34px !important; height: 34px !important; border: 1px solid var(--ticket-ref-border) !important; border-radius: 7px !important; background: #ffffff !important; color: var(--ticket-ref-text) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-page-btn.is-active { border-color: var(--ticket-ref-orange) !important; background: var(--ticket-ref-orange) !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-page-btn:disabled { opacity: 0.5 !important; cursor: default !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-page-size { justify-self: end !important; width: 124px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-detail-card { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 16px 18px 18px !important; overflow: auto !important; max-height: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-detail-card::-webkit-scrollbar { width: 0 !important; height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-detail-head { display: flex !important; align-items: center !important; gap: 14px !important; min-height: 34px !important; margin-bottom: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-type-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 70px !important; height: 28px !important; padding: 0 11px !important; border: 1px solid rgba(255, 92, 0, 0.34) !important; border-radius: 6px !important; background: var(--ticket-ref-orange-soft) !important; color: var(--ticket-ref-orange) !important; font-size: 13px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanelTitle { margin: 0 !important; min-width: 0 !important; color: var(--ticket-ref-text) !important; font-size: 16px !important; font-weight: 760 !important; line-height: 1.25 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-actions { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important; height: 36px !important; min-height: 36px !important; margin-bottom: 12px !important; border: 1px solid var(--ticket-ref-line) !important; border-radius: 7px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action { height: 34px !important; border: 0 !important; border-right: 1px solid var(--ticket-ref-line) !important; border-radius: 0 !important; background: #ffffff !important; color: var(--ticket-ref-muted) !important; cursor: pointer !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action:last-child { border-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-status-action.is-active { background: var(--ticket-ref-orange-soft) !important; color: var(--ticket-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-section { padding: 0 0 10px !important; margin: 0 0 10px !important; border-bottom: 1px solid var(--ticket-ref-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-section:last-of-type { margin-bottom: 0 !important; border-bottom: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-pc-side-panel-section-title { margin: 0 0 8px !important; color: var(--ticket-ref-text) !important; font-size: 14px !important; font-weight: 760 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-info-list { display: grid !important; gap: 5px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-info-list div { display: grid !important; grid-template-columns: 90px minmax(0, 1fr) !important; gap: 10px !important; align-items: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-info-list dt, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-info-list dd { margin: 0 !important; font-size: 13px !important; line-height: 1.35 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-info-list dt { color: var(--ticket-ref-muted) !important; font-weight: 650 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-info-list dd { color: var(--ticket-ref-muted) !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-timeline-list { display: grid !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-timeline-list li { display: grid !important; grid-template-columns: 10px 46px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; color: var(--ticket-ref-muted) !important; font-size: 13px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-timeline-dot { width: 7px !important; height: 7px !important; border-radius: 999px !important; background: var(--ticket-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-comments { min-height: 26px !important; display: grid !important; align-items: center !important; padding: 4px 10px !important; border: 1px solid var(--ticket-ref-line) !important; border-radius: 5px !important; color: var(--ticket-ref-muted) !important; font-size: 13px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-comment-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-attachments { display: block !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-attachment-empty { height: 44px !important; display: grid !important; place-items: center !important; gap: 2px !important; border: 1px dashed var(--ticket-ref-line) !important; border-radius: 7px !important; color: var(--ticket-ref-muted) !important; font-size: 13px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-attachment-empty span { font-size: 16px !important; transform: rotate(-35deg) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-attachment-empty p { margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-empty { margin: 16px !important; border: 1px solid var(--ticket-ref-line) !important; border-radius: 7px !important; background: #ffffff !important; color: var(--ticket-ref-muted) !important; } } @media (min-width: 1024px) and (max-width: 1320px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-filterbar { flex-wrap: wrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-main { grid-template-columns: minmax(760px, 1fr) 420px !important; overflow-x: auto !important; } } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-shell { padding: 0 20px 14px !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-list { display: grid !important; gap: 6px !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; width: 100% !important; padding: 10px 14px !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #ffffff !important; text-align: left !important; box-shadow: none !important; transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row.is-actionable { cursor: pointer !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row.is-actionable:hover, html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row.is-actionable:focus-visible { border-color: rgba(255, 106, 19, 0.42) !important; box-shadow: 0 8px 20px rgba(24, 39, 75, 0.08) !important; transform: translateY(-1px) !important; outline: none !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-rank { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; border-radius: 10px !important; background: #f6f7fb !important; color: #697286 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 800 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-main { display: grid !important; gap: 2px !important; min-width: 0 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-head { display: flex !important; align-items: baseline !important; gap: 8px !important; min-width: 0 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-head strong { min-width: 0 !important; color: #202430 !important; font-size: 16px !important; line-height: 21px !important; font-weight: 800 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-role, html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-summary, html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-last { margin: 0 !important; min-width: 0 !important; color: #697286 !important; font-size: 12px !important; line-height: 17px !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-last { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score { display: grid !important; justify-items: end !important; gap: 2px !important; min-width: 72px !important; padding-left: 8px !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score strong { color: #202430 !important; font-size: 20px !important; line-height: 22px !important; font-weight: 800 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score span { color: #697286 !important; font-size: 11px !important; line-height: 16px !important; font-weight: 700 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score[data-tone="focus"] strong { color: #202430 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score[data-tone="warning"] strong { color: #c26b09 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score[data-tone="danger"] strong { color: #d04f4f !important; } #analyticsHotspotModal .soc-analytics-hotspot-modal-panel { width: min(860px, calc(100vw - 32px)); max-width: 860px; max-height: min(88vh, 880px); padding: 0; border-radius: 18px; overflow: hidden; } #analyticsHotspotModal .soc-analytics-hotspot-modal-head { align-items: flex-start; padding: 20px 24px 16px; border-bottom: 1px solid #edf1f6; } .soc-analytics-hotspot-modal-headline { display: grid; gap: 4px; } .soc-analytics-hotspot-modal-headline h2 { margin: 0; } .soc-analytics-hotspot-modal-body { display: grid; gap: 18px; padding: 22px 24px 24px; overflow: auto; max-height: calc(min(88vh, 880px) - 84px); background: #ffffff; } .soc-analytics-hotspot-modal-hero { display: grid; grid-template-columns: 84px minmax(0, 1fr) 108px; gap: 16px; align-items: center; padding: 18px 20px; border: 1px solid #e7edf4; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 247, 251, 0.92) 100%); } .soc-analytics-hotspot-modal-rank, .soc-analytics-hotspot-modal-score { display: grid; gap: 4px; align-content: start; } .soc-analytics-hotspot-modal-rank strong, .soc-analytics-hotspot-modal-score strong { color: #202430; font-size: 28px; line-height: 32px; font-weight: 800; } .soc-analytics-hotspot-modal-rank .label, .soc-analytics-hotspot-modal-score .label, .soc-analytics-hotspot-modal-summary-item .label, .soc-analytics-hotspot-modal-breakdown-item .label { color: #697286; font-size: 12px; line-height: 16px; font-weight: 700; } .soc-analytics-hotspot-modal-identity { display: grid; gap: 6px; min-width: 0; } .soc-analytics-hotspot-modal-identity strong { color: #202430; font-size: 24px; line-height: 30px; font-weight: 800; } .soc-analytics-hotspot-modal-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .soc-analytics-hotspot-modal-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid #e6eaf1; border-radius: 999px; background: #f8fafc; color: #5f697d; font-size: 12px; line-height: 16px; font-weight: 700; } .soc-analytics-hotspot-modal-summary { display: grid; gap: 14px; } .soc-analytics-hotspot-modal-summary-grid, .soc-analytics-hotspot-modal-breakdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .soc-analytics-hotspot-modal-summary-item, .soc-analytics-hotspot-modal-breakdown-item { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid #e7edf4; border-radius: 14px; background: #ffffff; } .soc-analytics-hotspot-modal-summary-item strong, .soc-analytics-hotspot-modal-breakdown-item strong { color: #202430; font-size: 18px; line-height: 22px; font-weight: 800; } .soc-analytics-hotspot-modal-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .soc-analytics-hotspot-modal-section-head h3 { margin: 0; color: #202430; font-size: 16px; line-height: 22px; font-weight: 800; } .soc-analytics-hotspot-modal-incidents { display: grid; gap: 12px; } .soc-analytics-hotspot-modal-incident-list { display: grid; gap: 10px; } .soc-analytics-hotspot-modal-incident-row { display: block; width: 100%; padding: 14px 16px; border: 1px solid #e7edf4; border-radius: 14px; background: #ffffff; text-align: left; } .soc-analytics-hotspot-modal-incident-main { display: grid; gap: 6px; min-width: 0; } .soc-analytics-hotspot-modal-incident-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .soc-analytics-hotspot-modal-incident-head strong { min-width: 0; color: #202430; font-size: 15px; line-height: 20px; font-weight: 800; } .soc-analytics-hotspot-modal-incident-points { flex: 0 0 auto; color: #ff6a13; font-size: 13px; line-height: 18px; font-weight: 800; } .soc-analytics-hotspot-modal-incident-meta, .soc-analytics-hotspot-modal-empty { color: #697286; font-size: 13px; line-height: 18px; font-weight: 600; } @media (max-width: 1023px) { #analyticsHotspotModal .soc-analytics-hotspot-modal-panel { width: calc(100vw - 20px); max-height: min(92vh, 920px); } .soc-analytics-hotspot-modal-body { padding: 18px; } .soc-analytics-hotspot-modal-hero, .soc-analytics-hotspot-modal-summary-grid, .soc-analytics-hotspot-modal-breakdown-grid { grid-template-columns: minmax(0, 1fr); } } /* ops support desktop authority moved to file end */ /* ===== Ops support final lock (2026-04-02) ===== */ @media (min-width: 1024px) { html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) minmax(344px, 360px) !important; align-items: stretch !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet { min-height: var(--ops-support-shared-height, 620px) !important; height: var(--ops-support-shared-height, 620px) !important; max-height: var(--ops-support-shared-height, 620px) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main { display: flex !important; flex-direction: column !important; gap: 10px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-view { flex: 1 1 auto !important; min-height: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: 8px !important; min-height: 0 !important; overflow: auto !important; padding-right: 2px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportListView.soc-ops-support-view { min-height: 0 !important; overflow: auto !important; padding-right: 2px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid { align-content: stretch !important; grid-auto-rows: minmax(0, 1fr) !important; min-height: 0 !important; height: 100% !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell { min-height: 0 !important; height: auto !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; align-content: stretch !important; gap: 6px !important; overflow: hidden !important; padding: 8px 7px !important; border-radius: 12px !important; border-color: var(--ops-support-rail-border) !important; background: var(--ops-support-rail-surface) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-body { min-height: 0 !important; gap: 4px !important; align-content: start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet { width: min(100%, 360px) !important; min-width: 0 !important; max-width: 360px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 14px 15px !important; overflow: hidden !important; border: 1px solid var(--ops-support-rail-border) !important; border-radius: 14px !important; background: var(--ops-support-rail-surface) !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; padding: 0 0 10px !important; border-bottom: 1px solid var(--ops-support-rail-border) !important; flex: 0 0 auto !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head-copy { display: grid !important; gap: 2px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetTitle { margin: 0 !important; font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-sheet-head-copy > .meta { display: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-status-wrap { position: relative !important; flex: 0 0 auto !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; padding-right: 2px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-tab { min-height: 100% !important; padding: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet :is( .soc-ops-support-sheet-head-actions .ds-btn, .worker-row-actions .ds-btn, .worker-add-btn, [data-action="ops-support-enter-worker-edit"], .soc-ops-support-open-ticket-btn ) { min-height: 34px !important; height: 34px !important; line-height: 1 !important; white-space: nowrap !important; flex: 0 0 auto !important; padding-inline: 12px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action { border-color: var(--ops-support-neutral-border) !important; background: var(--ops-support-neutral-bg) !important; color: #445067 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action:focus-visible { border-color: #c6d0dc !important; background: var(--ops-support-neutral-hover) !important; color: #2f3a4d !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn { border-color: var(--ops-support-strong-danger-border) !important; background: var(--ops-support-strong-danger) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn:focus-visible, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn:focus-visible, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn:focus-visible { border-color: color-mix(in srgb, var(--ops-support-strong-danger-border) 86%, black) !important; background: var(--ops-support-strong-danger-hover) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn { border-color: var(--ops-support-strong-primary-border) !important; background: var(--ops-support-strong-primary) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn:focus-visible, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn:focus-visible, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn:focus-visible { border-color: var(--ops-support-strong-primary-border) !important; background: var(--ops-support-strong-primary-hover) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-summary-content { gap: 10px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section { display: grid !important; gap: 8px !important; padding: 12px 0 0 !important; border-top: 1px solid #eef2f6 !important; background: transparent !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section--summary { padding-top: 0 !important; border-top: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-title { font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-head .meta, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-context { font-size: 12px !important; line-height: 17px !important; color: var(--ops-support-rail-subtle) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-context { display: flex !important; flex-wrap: wrap !important; gap: 4px 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metrics { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric { min-height: 74px !important; gap: 5px !important; padding: 10px 11px !important; border: 1px solid var(--ops-support-rail-border) !important; border-radius: 12px !important; background: var(--ops-support-rail-muted) !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric.is-requested { border-color: #ffd0a8 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric.is-self-staff { border-color: #dce3ec !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-label { font-size: 10px !important; line-height: 14px !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: #7d8699 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric strong { min-height: 20px !important; font-size: 16px !important; line-height: 20px !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-purpose { padding: 11px 12px !important; border: 1px solid var(--ops-support-rail-border) !important; border-radius: 12px !important; background: var(--ops-support-rail-surface) !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-purpose p { margin: 0 !important; font-size: 13px !important; line-height: 19px !important; color: var(--ops-support-rail-text) !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-more summary { font-size: 12px !important; line-height: 17px !important; font-weight: 700 !important; color: #445067 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet :is( .soc-ops-support-confirmed-block, .soc-ops-support-confirmed-disabled, .soc-ops-support-detail-timeline-body, .soc-ops-support-day-summary > div ) { border: 1px solid var(--ops-support-rail-border) !important; border-radius: 12px !important; background: var(--ops-support-rail-surface) !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-confirmed-block { padding: 12px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline { gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline-body { padding: 10px 11px !important; background: var(--ops-support-rail-muted) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline-copy { font-size: 12px !important; line-height: 18px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-day-row-actions { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line, html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more { border-radius: 10px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line { position: relative !important; padding: 7px 8px 7px 12px !important; border: 1px solid var(--ops-support-line-border, var(--ops-support-rail-border)) !important; background: var(--ops-support-line-bg, var(--ops-support-rail-surface)) !important; color: var(--ops-support-line-color, var(--ops-support-rail-text)) !important; box-shadow: none !important; overflow: hidden !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--ops-support-line-accent, var(--ops-support-cancelled-accent)); } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line:hover { border-color: color-mix(in srgb, var(--ops-support-line-accent, #ff6a13) 36%, var(--ops-support-rail-border)) !important; background: color-mix(in srgb, var(--ops-support-line-bg, var(--ops-support-rail-surface)) 92%, white) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-selected { border-color: color-mix(in srgb, var(--ops-support-line-accent, #ff6a13) 46%, #ffb57d) !important; box-shadow: 0 0 0 2px rgba(255, 106, 19, 0.12) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-over-assigned { --ops-support-line-accent: var(--ops-support-danger-accent); --ops-support-line-border: var(--ops-support-danger-border); --ops-support-line-bg: color-mix(in srgb, var(--ops-support-danger-bg) 92%, white); --ops-support-line-color: var(--ops-support-danger-text); } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main { gap: 8px !important; align-items: flex-start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy { gap: 4px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-top-row { gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-top-side { gap: 5px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-meta-row { justify-content: space-between !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-status { flex: 0 0 auto !important; } html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) { display: inline-flex !important; align-items: center !important; gap: 6px !important; border-radius: 999px !important; border: 1px solid transparent !important; white-space: nowrap !important; font-weight: 700 !important; } html body.soc-desktop-shell #opsSupportPanel .support-status-inline { min-height: 26px !important; padding: 0 9px !important; font-size: 11px !important; line-height: 1 !important; } html body.soc-desktop-shell #opsSupportPanel .support-status-chip { min-height: 22px !important; padding: 0 7px !important; font-size: 10px !important; line-height: 1 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-text { display: inline-block !important; white-space: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot { width: 7px !important; height: 7px !important; flex: 0 0 7px !important; margin-top: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending, html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-pending, html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-pending { --ops-support-line-accent: var(--ops-support-pending-accent); --ops-support-line-border: var(--ops-support-pending-border); --ops-support-line-bg: var(--ops-support-pending-bg); --ops-support-line-color: var(--ops-support-pending-text); border-color: var(--ops-support-pending-border) !important; background: var(--ops-support-pending-bg) !important; color: var(--ops-support-pending-text) !important; } html body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved, html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-approved, html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-approved { --ops-support-line-accent: var(--ops-support-approved-accent); --ops-support-line-border: var(--ops-support-approved-border); --ops-support-line-bg: var(--ops-support-approved-bg); --ops-support-line-color: var(--ops-support-approved-text); border-color: var(--ops-support-approved-border) !important; background: var(--ops-support-approved-bg) !important; color: var(--ops-support-approved-text) !important; } html body.soc-desktop-shell #opsSupportPanel :is(.cal-line.state-unavailable, .cal-line.state-rejected), html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) { --ops-support-line-accent: var(--ops-support-danger-accent); --ops-support-line-border: var(--ops-support-danger-border); --ops-support-line-bg: var(--ops-support-danger-bg); --ops-support-line-color: var(--ops-support-danger-text); border-color: var(--ops-support-danger-border) !important; background: var(--ops-support-danger-bg) !important; color: var(--ops-support-danger-text) !important; } html body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled, html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-cancelled, html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-cancelled { --ops-support-line-accent: var(--ops-support-cancelled-accent); --ops-support-line-border: var(--ops-support-cancelled-border); --ops-support-line-bg: var(--ops-support-cancelled-bg); --ops-support-line-color: var(--ops-support-cancelled-text); border-color: var(--ops-support-cancelled-border) !important; background: var(--ops-support-cancelled-bg) !important; color: var(--ops-support-cancelled-text) !important; } } /* ===== Ops support Shople rail lock (2026-04-02) ===== */ body.soc-desktop-shell #opsSupportPanel { --ops-support-rail-surface: #ffffff; --ops-support-rail-muted: #fafbfd; --ops-support-rail-border: #e6eaf1; --ops-support-rail-text: #202430; --ops-support-rail-subtle: #697286; --ops-support-neutral-border: #d7dee8; --ops-support-neutral-bg: #ffffff; --ops-support-neutral-hover: #f8fafc; --ops-support-pending-accent: #ffbf3c; --ops-support-pending-bg: #fff7e8; --ops-support-pending-border: #ffd79c; --ops-support-pending-text: #a15b00; --ops-support-approved-accent: #1ebfa3; --ops-support-approved-bg: #ebfbf7; --ops-support-approved-border: #9ae4d5; --ops-support-approved-text: #127c69; --ops-support-danger-accent: #ff6b6b; --ops-support-danger-bg: #fff0f0; --ops-support-danger-border: #ffc3c3; --ops-support-danger-text: #c24755; --ops-support-cancelled-accent: #7c8798; --ops-support-cancelled-bg: #f4f6f9; --ops-support-cancelled-border: #d6dde8; --ops-support-cancelled-text: #586578; --ops-support-strong-danger: #ff6b6b; --ops-support-strong-danger-border: #d85151; --ops-support-strong-danger-hover: #e65555; --ops-support-strong-primary: #ff6a13; --ops-support-strong-primary-border: #dc5b11; --ops-support-strong-primary-hover: #ea5d08; } [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel { --ops-support-rail-surface: var(--soc-card-bg); --ops-support-rail-muted: color-mix(in srgb, var(--soc-card-bg) 88%, white); --ops-support-rail-border: var(--ops-support-border, #334155); --ops-support-rail-text: var(--ui-text-primary, #f8fafc); --ops-support-rail-subtle: var(--ui-text-secondary, #cbd5e1); --ops-support-neutral-border: color-mix(in srgb, var(--ops-support-rail-border) 82%, white); --ops-support-neutral-bg: var(--soc-card-bg); --ops-support-neutral-hover: color-mix(in srgb, var(--soc-card-bg) 86%, white); --ops-support-pending-bg: color-mix(in srgb, #ffbf3c 16%, var(--soc-card-bg)); --ops-support-pending-border: color-mix(in srgb, #ffbf3c 36%, var(--ops-support-rail-border)); --ops-support-pending-text: #ffd08a; --ops-support-approved-bg: color-mix(in srgb, #1ebfa3 16%, var(--soc-card-bg)); --ops-support-approved-border: color-mix(in srgb, #1ebfa3 36%, var(--ops-support-rail-border)); --ops-support-approved-text: #9ce8d9; --ops-support-danger-bg: color-mix(in srgb, #ff6b6b 16%, var(--soc-card-bg)); --ops-support-danger-border: color-mix(in srgb, #ff6b6b 36%, var(--ops-support-rail-border)); --ops-support-danger-text: #ffc3c8; --ops-support-cancelled-bg: color-mix(in srgb, #94a3b8 16%, var(--soc-card-bg)); --ops-support-cancelled-border: color-mix(in srgb, #94a3b8 34%, var(--ops-support-rail-border)); --ops-support-cancelled-text: #d7e0eb; --ops-support-strong-danger: #ff7b7b; --ops-support-strong-danger-border: #ff6363; --ops-support-strong-danger-hover: #ff6c6c; --ops-support-strong-primary: #ff7a29; --ops-support-strong-primary-border: #f56c17; --ops-support-strong-primary-hover: #ff6d16; } @media (min-width: 1024px) { html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) minmax(344px, 360px) !important; align-items: stretch !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet { min-height: var(--ops-support-shared-height, 620px) !important; height: var(--ops-support-shared-height, 620px) !important; max-height: var(--ops-support-shared-height, 620px) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main { display: flex !important; flex-direction: column !important; gap: 10px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-view { flex: 1 1 auto !important; min-height: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: 8px !important; min-height: 0 !important; overflow: auto !important; padding-right: 2px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportListView.soc-ops-support-view { min-height: 0 !important; overflow: auto !important; padding-right: 2px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid { align-content: stretch !important; grid-auto-rows: minmax(0, 1fr) !important; min-height: 0 !important; height: 100% !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell { min-height: 0 !important; height: auto !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; align-content: stretch !important; gap: 6px !important; overflow: hidden !important; padding: 8px 7px !important; border-radius: 12px !important; border-color: var(--ops-support-rail-border) !important; background: var(--ops-support-rail-surface) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-body { min-height: 0 !important; gap: 4px !important; align-content: start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet { width: min(100%, 360px) !important; min-width: 0 !important; max-width: 360px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 14px 15px !important; overflow: hidden !important; border: 1px solid var(--ops-support-rail-border) !important; border-radius: 14px !important; background: var(--ops-support-rail-surface) !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; padding: 0 0 10px !important; border-bottom: 1px solid var(--ops-support-rail-border) !important; flex: 0 0 auto !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head-copy { display: grid !important; gap: 2px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetTitle { margin: 0 !important; font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-sheet-head-copy > .meta { display: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-status-wrap { position: relative !important; flex: 0 0 auto !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; padding-right: 2px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-tab { min-height: 100% !important; padding: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet :is( .soc-ops-support-sheet-head-actions .ds-btn, .worker-row-actions .ds-btn, .worker-add-btn, [data-action="ops-support-enter-worker-edit"], .soc-ops-support-open-ticket-btn ) { min-height: 34px !important; height: 34px !important; line-height: 1 !important; white-space: nowrap !important; flex: 0 0 auto !important; padding-inline: 12px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action { border-color: var(--ops-support-neutral-border) !important; background: var(--ops-support-neutral-bg) !important; color: #445067 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action:focus-visible { border-color: #c6d0dc !important; background: var(--ops-support-neutral-hover) !important; color: #2f3a4d !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn { border-color: var(--ops-support-strong-danger-border) !important; background: var(--ops-support-strong-danger) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn:focus-visible, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn:focus-visible, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn:focus-visible { border-color: color-mix(in srgb, var(--ops-support-strong-danger-border) 86%, black) !important; background: var(--ops-support-strong-danger-hover) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn { border-color: var(--ops-support-strong-primary-border) !important; background: var(--ops-support-strong-primary) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn:focus-visible, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn:focus-visible, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn:focus-visible { border-color: var(--ops-support-strong-primary-border) !important; background: var(--ops-support-strong-primary-hover) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn { border-color: var(--ops-support-strong-primary-border) !important; background: var(--ops-support-strong-primary) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-summary-content { gap: 10px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section { display: grid !important; gap: 8px !important; padding: 12px 0 0 !important; border-top: 1px solid #eef2f6 !important; background: transparent !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section--summary { padding-top: 0 !important; border-top: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-title { font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-head .meta, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-context { font-size: 12px !important; line-height: 17px !important; color: var(--ops-support-rail-subtle) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-context { display: flex !important; flex-wrap: wrap !important; gap: 4px 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metrics { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric { min-height: 74px !important; gap: 5px !important; padding: 10px 11px !important; border: 1px solid var(--ops-support-rail-border) !important; border-radius: 12px !important; background: var(--ops-support-rail-muted) !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric.is-requested { border-color: #ffd0a8 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric.is-self-staff { border-color: #dce3ec !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-label { font-size: 10px !important; line-height: 14px !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: #7d8699 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric strong { min-height: 20px !important; font-size: 16px !important; line-height: 20px !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-purpose { padding: 11px 12px !important; border: 1px solid var(--ops-support-rail-border) !important; border-radius: 12px !important; background: var(--ops-support-rail-surface) !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-purpose p { margin: 0 !important; font-size: 13px !important; line-height: 19px !important; color: var(--ops-support-rail-text) !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-more { padding-top: 2px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-more summary { font-size: 12px !important; line-height: 17px !important; font-weight: 700 !important; color: #445067 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-kv { gap: 8px !important; padding-top: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet :is( .soc-ops-support-confirmed-block, .soc-ops-support-confirmed-disabled, .soc-ops-support-detail-timeline-body, .soc-ops-support-day-summary > div ) { border: 1px solid var(--ops-support-rail-border) !important; border-radius: 12px !important; background: var(--ops-support-rail-surface) !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-confirmed-block { padding: 12px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline { gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline-body { padding: 10px 11px !important; background: var(--ops-support-rail-muted) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline-copy { font-size: 12px !important; line-height: 18px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-day-row-actions { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line, html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more { border-radius: 10px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line { position: relative !important; padding: 7px 8px 7px 12px !important; border: 1px solid var(--ops-support-line-border, var(--ops-support-rail-border)) !important; background: var(--ops-support-line-bg, var(--ops-support-rail-surface)) !important; color: var(--ops-support-line-color, var(--ops-support-rail-text)) !important; box-shadow: none !important; overflow: hidden !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--ops-support-line-accent, var(--ops-support-cancelled-accent)); } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line:hover { border-color: color-mix(in srgb, var(--ops-support-line-accent, #ff6a13) 36%, var(--ops-support-rail-border)) !important; background: color-mix(in srgb, var(--ops-support-line-bg, var(--ops-support-rail-surface)) 92%, white) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-selected { border-color: color-mix(in srgb, var(--ops-support-line-accent, #ff6a13) 46%, #ffb57d) !important; box-shadow: 0 0 0 2px rgba(255, 106, 19, 0.12) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-over-assigned { --ops-support-line-accent: var(--ops-support-danger-accent); --ops-support-line-border: var(--ops-support-danger-border); --ops-support-line-bg: color-mix(in srgb, var(--ops-support-danger-bg) 92%, white); --ops-support-line-color: var(--ops-support-danger-text); } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main { gap: 8px !important; align-items: flex-start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy { gap: 4px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-top-row { gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-top-side { gap: 5px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-meta-row { justify-content: space-between !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-status { flex: 0 0 auto !important; } html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) { display: inline-flex !important; align-items: center !important; gap: 6px !important; border-radius: 999px !important; border: 1px solid transparent !important; white-space: nowrap !important; font-weight: 700 !important; } html body.soc-desktop-shell #opsSupportPanel .support-status-inline { min-height: 26px !important; padding: 0 9px !important; font-size: 11px !important; line-height: 1 !important; } html body.soc-desktop-shell #opsSupportPanel .support-status-chip { min-height: 22px !important; padding: 0 7px !important; font-size: 10px !important; line-height: 1 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-text { display: inline-block !important; white-space: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot { width: 7px !important; height: 7px !important; flex: 0 0 7px !important; margin-top: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending, html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-pending, html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-pending { --ops-support-line-accent: var(--ops-support-pending-accent); --ops-support-line-border: var(--ops-support-pending-border); --ops-support-line-bg: var(--ops-support-pending-bg); --ops-support-line-color: var(--ops-support-pending-text); border-color: var(--ops-support-pending-border) !important; background: var(--ops-support-pending-bg) !important; color: var(--ops-support-pending-text) !important; } html body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved, html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-approved, html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-approved { --ops-support-line-accent: var(--ops-support-approved-accent); --ops-support-line-border: var(--ops-support-approved-border); --ops-support-line-bg: var(--ops-support-approved-bg); --ops-support-line-color: var(--ops-support-approved-text); border-color: var(--ops-support-approved-border) !important; background: var(--ops-support-approved-bg) !important; color: var(--ops-support-approved-text) !important; } html body.soc-desktop-shell #opsSupportPanel :is(.cal-line.state-unavailable, .cal-line.state-rejected), html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) { --ops-support-line-accent: var(--ops-support-danger-accent); --ops-support-line-border: var(--ops-support-danger-border); --ops-support-line-bg: var(--ops-support-danger-bg); --ops-support-line-color: var(--ops-support-danger-text); border-color: var(--ops-support-danger-border) !important; background: var(--ops-support-danger-bg) !important; color: var(--ops-support-danger-text) !important; } html body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled, html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-cancelled, html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-cancelled { --ops-support-line-accent: var(--ops-support-cancelled-accent); --ops-support-line-border: var(--ops-support-cancelled-border); --ops-support-line-bg: var(--ops-support-cancelled-bg); --ops-support-line-color: var(--ops-support-cancelled-text); border-color: var(--ops-support-cancelled-border) !important; background: var(--ops-support-cancelled-bg) !important; color: var(--ops-support-cancelled-text) !important; } } /* ===== Pass38 Home + Analytics v2 final ===== */ @media (min-width: 1024px) { html body.soc-desktop-shell #homeView .soc-home-hub, html body.soc-desktop-shell #analyticsView .soc-analytics-board { display: grid !important; gap: 18px !important; } html body.soc-desktop-shell #homeView .soc-home-hub-header-main { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px 18px !important; } html body.soc-desktop-shell #homeView .soc-home-hub-header-meta { display: inline-flex !important; align-items: center !important; gap: 10px !important; } html body.soc-desktop-shell #homeView .soc-home-hub-live-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 28px !important; padding: 0 12px !important; border: 1px solid rgba(255, 106, 19, 0.18) !important; border-radius: 999px !important; background: #fff4eb !important; color: #ff6a13 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 800 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } html body.soc-desktop-shell #homeView .soc-home-hub-header-note { color: #697286 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body.soc-desktop-shell #homeView .soc-home-hub .soc-home-hub-kpis { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; } html body.soc-desktop-shell :is(#homeView .soc-home-hub-card, #analyticsView .soc-analytics-board-card) { border: 1px solid #e6eaf1 !important; border-radius: 18px !important; background: #ffffff !important; box-shadow: 0 10px 28px rgba(32, 36, 48, 0.05) !important; } html body.soc-desktop-shell #homeView .soc-home-hub-card.soc-home-hub-kpi { display: grid !important; grid-template-rows: auto auto minmax(0, 1fr) !important; gap: 14px !important; min-height: 148px !important; padding: 18px !important; overflow: hidden !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi.is-secondary-emphasis { background: linear-gradient(180deg, #fffaf2 0%, #ffffff 100%) !important; border-color: #f6d9a8 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi.is-emphasis { background: linear-gradient(180deg, #fff7f0 0%, #fff2e7 100%) !important; border-color: #ffcfb0 !important; box-shadow: 0 14px 32px rgba(255, 106, 19, 0.1) !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-top { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-icon { position: relative !important; width: 38px !important; height: 38px !important; border-radius: 0 !important; flex: 0 0 38px !important; background: transparent !important; box-shadow: none !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-icon::before, html body.soc-desktop-shell #homeView .soc-home-hub-kpi-icon::after { content: "" !important; position: absolute !important; border-radius: 999px !important; background: currentColor !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-icon::before { inset: 9px 11px auto !important; height: 7px !important; opacity: 0.95 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-icon::after { inset: auto 11px 9px !important; height: 7px !important; opacity: 0.48 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi[data-tone="intake"] .soc-home-hub-kpi-icon { color: #2563eb !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi[data-tone="critical"] .soc-home-hub-kpi-icon { color: #d97706 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi[data-tone="pending"] .soc-home-hub-kpi-icon { color: #64748b !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi[data-tone="urgent"] .soc-home-hub-kpi-icon { color: #dc2626 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-label { color: #697286 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-main { display: grid !important; gap: 6px !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-value { color: #202430 !important; font-size: 36px !important; line-height: 40px !important; font-weight: 800 !important; letter-spacing: -0.04em !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-meta { color: #697286 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-visual { display: grid !important; align-content: end !important; gap: 10px !important; min-width: 0 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-visual--inline { align-content: start !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-meter { display: flex !important; gap: 2px !important; width: 100% !important; height: 10px !important; border-radius: 999px !important; overflow: hidden !important; background: #edf1f6 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-kpi-meter > span { display: block !important; height: 100% !important; min-width: 0 !important; border-radius: inherit !important; background: linear-gradient(90deg, #ff8d47 0%, #ff6a13 100%) !important; } html body.soc-desktop-shell #homeView #homeHubKpiIntakeIncidentBar { background: linear-gradient(90deg, #ff924f 0%, #ff6a13 100%) !important; } html body.soc-desktop-shell #homeView #homeHubKpiIntakeTicketBar { background: linear-gradient(90deg, #6ca6ff 0%, #2f80ff 100%) !important; } html body.soc-desktop-shell #homeView #homeHubKpiCriticalBar { background: linear-gradient(90deg, #ffd56b 0%, #ffbf3c 100%) !important; } html body.soc-desktop-shell #homeView .soc-home-hub-status-chip { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: fit-content !important; min-height: 28px !important; padding: 0 12px !important; border: 1px solid #dbe1ea !important; border-radius: 999px !important; background: #f8fafc !important; color: #697286 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-status-chip.is-warning, html body.soc-desktop-shell #homeView .soc-home-hub-status-chip.is-active.is-warning { border-color: #f5d59b !important; background: #fff8ee !important; color: #b76a11 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-status-chip.is-alert, html body.soc-desktop-shell #homeView .soc-home-hub-status-chip.is-active.is-alert { border-color: #ffd2b2 !important; background: #fff1e7 !important; color: #d85c15 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-status-chip.is-neutral { border-color: #dbe1ea !important; background: #f8fafc !important; color: #697286 !important; } html body.soc-desktop-shell #homeView .soc-home-hub .soc-home-hub-main { display: grid !important; grid-template-columns: minmax(0, 1.72fr) minmax(300px, 0.96fr) !important; gap: 16px !important; align-items: stretch !important; } html body.soc-desktop-shell #homeView .soc-home-hub .soc-home-hub-secondary { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch !important; } html body.soc-desktop-shell #homeView .soc-home-hub .soc-home-hub-card-head, html body.soc-desktop-shell #analyticsView .soc-analytics-board-card-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 18px 20px 10px !important; background: transparent !important; border: 0 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-card-head h3, html body.soc-desktop-shell #analyticsView .soc-analytics-board-card-head h3 { margin: 0 !important; color: #202430 !important; font-size: 18px !important; line-height: 26px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } html body.soc-desktop-shell #homeView .soc-home-hub-card-head .meta, html body.soc-desktop-shell #analyticsView .soc-analytics-board-card-head .meta { margin: 2px 0 0 !important; color: #7b869d !important; font-size: 12px !important; line-height: 18px !important; font-weight: 600 !important; } html body.soc-desktop-shell #homeView .soc-home-hub-card-body { padding: 0 20px 18px !important; } html body.soc-desktop-shell #homeView :is(.soc-home-priority-list, .soc-home-ticket-queue, .soc-home-mini-list) { display: grid !important; gap: 10px !important; } html body.soc-desktop-shell #homeView .soc-home-list-empty { display: grid !important; place-items: center !important; min-height: 132px !important; padding: 18px !important; border: 1px dashed #dbe1ea !important; border-radius: 16px !important; background: #fafbfd !important; color: #697286 !important; font-size: 13px !important; line-height: 19px !important; font-weight: 600 !important; text-align: center !important; } html body.soc-desktop-shell #homeView .soc-home-priority-row { display: grid !important; grid-template-columns: 6px minmax(0, 1fr) auto !important; gap: 12px !important; align-items: center !important; width: 100% !important; padding: 12px 14px !important; border: 1px solid #edf1f6 !important; border-radius: 16px !important; background: #ffffff !important; text-align: left !important; } html body.soc-desktop-shell #homeView .soc-home-priority-rail { align-self: stretch !important; border-radius: 999px !important; background: #d7dee8 !important; } html body.soc-desktop-shell #homeView .soc-home-priority-rail[data-tone="warning"] { background: linear-gradient(180deg, #ffd673 0%, #ffbf3c 100%) !important; } html body.soc-desktop-shell #homeView .soc-home-priority-rail[data-tone="danger"] { background: linear-gradient(180deg, #ff924f 0%, #ff6a13 100%) !important; } html body.soc-desktop-shell #homeView .soc-home-priority-main, html body.soc-desktop-shell #homeView .soc-home-mini-main, html body.soc-desktop-shell #homeView .soc-home-watch-main, html body.soc-desktop-shell #homeView .soc-home-ticket-main { display: grid !important; gap: 4px !important; min-width: 0 !important; } html body.soc-desktop-shell #homeView .soc-home-priority-main-top, html body.soc-desktop-shell #homeView .soc-home-watch-top { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; } html body.soc-desktop-shell #homeView .soc-home-watch-top { justify-content: space-between !important; } html body.soc-desktop-shell #homeView .soc-home-priority-main-top .soc-home-priority-title, html body.soc-desktop-shell #homeView .soc-home-watch-top .soc-home-watch-main { flex: 1 1 auto !important; min-width: 0 !important; } html body.soc-desktop-shell #homeView .soc-home-priority-title, html body.soc-desktop-shell #homeView .soc-home-ticket-title, html body.soc-desktop-shell #homeView .soc-home-mini-title, html body.soc-desktop-shell #homeView .soc-home-watch-title { min-width: 0 !important; color: #202430 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 700 !important; } html body.soc-desktop-shell #homeView .soc-home-priority-meta, html body.soc-desktop-shell #homeView .soc-home-ticket-meta, html body.soc-desktop-shell #homeView .soc-home-mini-meta, html body.soc-desktop-shell #homeView .soc-home-watch-meta, html body.soc-desktop-shell #homeView :is(.soc-home-priority-age, .soc-home-ticket-age, .soc-home-mini-age) { color: #697286 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 600 !important; } html body.soc-desktop-shell #homeView :is(.soc-home-priority-chip, .soc-home-watch-chip, .soc-home-ticket-state, .soc-home-priority-badge) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: fit-content !important; min-height: 24px !important; padding: 0 10px !important; border-radius: 999px !important; font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; white-space: nowrap !important; } html body.soc-desktop-shell #homeView .soc-home-priority-chip[data-tone="incident"] { background: #fff1e6 !important; color: #ff6a13 !important; } html body.soc-desktop-shell #homeView .soc-home-priority-chip[data-tone="ticket"] { background: #eef4ff !important; color: #2f80ff !important; } html body.soc-desktop-shell #homeView .soc-home-priority-side, html body.soc-desktop-shell #homeView .soc-home-ticket-side { display: grid !important; justify-items: end !important; gap: 6px !important; min-width: 80px !important; } html body.soc-desktop-shell #homeView .soc-home-priority-badge[data-tone="warning"] { background: #fff7eb !important; color: #b76a11 !important; } html body.soc-desktop-shell #homeView .soc-home-priority-badge[data-tone="danger"] { background: #fff1e6 !important; color: #d85c15 !important; } html body.soc-desktop-shell #homeView .soc-home-priority-badge[data-tone="neutral"] { background: #f4f7fa !important; color: #5f6b81 !important; } html body.soc-desktop-shell #homeView .soc-home-ticket-row, html body.soc-desktop-shell #homeView .soc-home-mini-row, html body.soc-desktop-shell #homeView .soc-home-watch-row { display: grid !important; width: 100% !important; padding: 12px 14px !important; border: 1px solid #edf1f6 !important; border-radius: 16px !important; background: #ffffff !important; text-align: left !important; } html body.soc-desktop-shell #homeView .soc-home-ticket-row { grid-template-columns: minmax(0, 1fr) auto !important; gap: 12px !important; align-items: center !important; } html body.soc-desktop-shell #homeView .soc-home-ticket-state { background: #f8fafc !important; color: #697286 !important; border: 1px solid #dbe1ea !important; } html body.soc-desktop-shell #homeView .soc-home-mini-row { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 12px !important; align-items: start !important; } html body.soc-desktop-shell #homeView .soc-home-mini-marker { width: 10px !important; height: 10px !important; margin-top: 5px !important; border-radius: 999px !important; background: #c6ced9 !important; } html body.soc-desktop-shell #homeView .soc-home-mini-marker[data-tone="warning"] { background: #ffbf3c !important; } html body.soc-desktop-shell #homeView .soc-home-mini-marker[data-tone="danger"] { background: #ff6a13 !important; } html body.soc-desktop-shell #homeView .soc-home-watch-row { gap: 10px !important; } html body.soc-desktop-shell #homeView .soc-home-watch-chip[data-tone="danger"] { background: #fff1f1 !important; color: #d83a3a !important; } html body.soc-desktop-shell #homeView .soc-home-watch-chip[data-tone="caution"] { background: #fff7eb !important; color: #b76a11 !important; } html body.soc-desktop-shell #homeView .soc-home-watch-score { color: #202430 !important; font-size: 20px !important; line-height: 24px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; white-space: nowrap !important; } html body.soc-desktop-shell #homeView .soc-home-watch-meter { width: 100% !important; height: 8px !important; border-radius: 999px !important; background: #edf1f6 !important; overflow: hidden !important; } html body.soc-desktop-shell #homeView .soc-home-watch-meter > span { display: block !important; height: 100% !important; border-radius: inherit !important; background: linear-gradient(90deg, #ffbf3c 0%, #ff8d47 100%) !important; } html body.soc-desktop-shell #homeView .soc-home-watch-meter > span[data-tone="danger"] { background: linear-gradient(90deg, #ff8d47 0%, #ff6a13 100%) !important; } html body.soc-desktop-shell #homeView .soc-home-priority-row:hover, html body.soc-desktop-shell #homeView .soc-home-ticket-row:hover, html body.soc-desktop-shell #homeView .soc-home-mini-row:hover, html body.soc-desktop-shell #homeView .soc-home-watch-row:hover { border-color: #ffd2b2 !important; box-shadow: 0 10px 24px rgba(255, 106, 19, 0.09) !important; transform: translateY(-1px) !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-v2-header { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 18px !important; align-items: start !important; margin-bottom: 18px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 10px 12px !important; padding: 12px 14px !important; border: 1px solid #e6eaf1 !important; border-radius: 16px !important; background: #ffffff !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-group { gap: 6px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-label { color: #7b869d !important; font-size: 11px !important; line-height: 16px !important; font-weight: 700 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRow { display: grid !important; grid-template-columns: minmax(340px, 0.86fr) minmax(0, 1.36fr) !important; gap: 16px !important; align-items: stretch !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-board-card-body--risk { display: grid !important; gap: 14px !important; padding: 0 20px 18px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-risk-scope-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 28px !important; padding: 0 12px !important; border: 1px solid #e6eaf1 !important; border-radius: 999px !important; background: #f8fafc !important; color: #445067 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-hero-core { display: grid !important; grid-template-columns: 168px minmax(0, 1fr) !important; gap: 18px !important; align-items: start !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-wrap { position: relative !important; width: 168px !important; height: 168px !important; display: grid !important; place-items: center !important; justify-self: center !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge { width: 168px !important; height: 168px !important; overflow: visible !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard :is(.soc-analytics-v2-risk-gauge-track, .soc-analytics-v2-risk-gauge-arc) { fill: none !important; stroke-width: 10 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track { stroke: #edf1f6 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc { stroke-linecap: round !important; transform: rotate(-90deg) !important; transform-origin: 50% 50% !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-value-wrap { position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important; padding: 0 !important; text-align: center !important; } html body.soc-desktop-shell #analyticsView #analyticsRiskScoreValue { color: #202430 !important; font-size: 54px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -0.06em !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-hero-side { display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; align-self: start !important; padding-top: 10px !important; min-width: 0 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-risk-grade { min-height: 34px !important; padding: 0 14px !important; border-radius: 999px !important; font-size: 13px !important; line-height: 34px !important; font-weight: 800 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-summary-line { margin: 0 !important; color: #5f697d !important; font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; padding-top: 2px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-board-card-body, html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-board-card-body, html body.soc-desktop-shell #analyticsView #analyticsFollowupBand .soc-analytics-followup-columns, html body.soc-desktop-shell #analyticsView :is(#analyticsTrendPanel .soc-analytics-chart-shell, #analyticsPatternPanel .soc-analytics-pattern-shell, #analyticsCausePanel .soc-analytics-cause-shell, #analyticsPeoplePanel .soc-analytics-hotspot-shell) { padding: 0 20px 14px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-rack { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 14px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile { min-height: 88px !important; padding: 14px 16px !important; border: 1px solid #edf1f6 !important; border-radius: 14px !important; background: #ffffff !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .label { color: #697286 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile strong { color: #202430 !important; font-size: 26px !important; line-height: 30px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-health-panel { padding: 12px 0 0 !important; border: 0 !important; border-top: 1px solid #edf1f6 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-health-bar { height: 8px !important; margin-bottom: 10px !important; background: #e6eaf1 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-health-legend { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-table-toolbar { padding: 0 20px 12px !important; } html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-table-controls { gap: 10px !important; } html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-table-shell { overflow: hidden !important; border: 1px solid #eef1f6 !important; border-radius: 14px !important; background: #ffffff !important; } html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-table-head { min-height: 44px !important; padding: 0 16px !important; background: #f7f9fc !important; } html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-table-body { display: grid !important; grid-auto-rows: var(--analytics-comparison-row-height, 68px) !important; min-height: calc(var(--analytics-comparison-row-height, 68px) * 5) !important; max-height: calc(var(--analytics-comparison-row-height, 68px) * 5) !important; height: calc(var(--analytics-comparison-row-height, 68px) * 5) !important; overflow: hidden !important; } html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-site-row { min-height: var(--analytics-comparison-row-height, 68px) !important; height: var(--analytics-comparison-row-height, 68px) !important; padding: 0 16px !important; } html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer { min-height: 56px !important; padding: 10px 16px !important; border-top: 1px solid #eef2f6 !important; background: #fbfcfe !important; } html body.soc-desktop-shell #analyticsView #analyticsAnalysisBoard { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } html body.soc-desktop-shell #analyticsView :is(#analyticsTrendPanel, #analyticsPatternPanel) { min-height: 286px !important; } html body.soc-desktop-shell #analyticsView :is(#analyticsCausePanel, #analyticsPeoplePanel) { min-height: 168px !important; } html body.soc-desktop-shell #analyticsView #analyticsPatternPanel .soc-analytics-pattern-toolbar { display: grid !important; gap: 8px !important; align-items: stretch !important; } html body.soc-desktop-shell #analyticsView #analyticsPatternPanel .soc-analytics-pattern-toolbar-top { display: flex !important; justify-content: flex-end !important; align-items: center !important; } html body.soc-desktop-shell #analyticsView #analyticsPatternPanel .soc-analytics-pattern-toolbar-bottom { display: flex !important; justify-content: flex-start !important; align-items: center !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-line-chart { width: 100% !important; height: 220px !important; display: block !important; overflow: visible !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-line-chart .grid { stroke: #e9edf4 !important; stroke-width: 1 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-line-chart .area { fill: rgba(255, 111, 26, 0.12) !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-line-chart .line { fill: none !important; stroke: #ff6f1a !important; stroke-width: 3 !important; stroke-linejoin: round !important; stroke-linecap: round !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-line-axis { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 10px !important; color: #8b93a6 !important; font-size: 11px !important; line-height: 16px !important; font-weight: 600 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-grid-board { display: grid !important; grid-template-columns: 44px repeat(12, minmax(0, 1fr)) !important; gap: 6px !important; align-items: center !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-axis, html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-row-label { color: #7b869d !important; font-size: 11px !important; line-height: 16px !important; font-weight: 700 !important; text-align: center !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-cell-board { min-height: 32px !important; border-radius: 8px !important; border: 1px solid #edf0f6 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #202430 !important; font-size: 11px !important; line-height: 14px !important; font-weight: 700 !important; background: #ffffff !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-cell-board.i1 { background: #fff6ee !important; border-color: #ffd8bf !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-cell-board.i2 { background: #ffe8d1 !important; border-color: #ffca9d !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-cell-board.i3 { background: #ffd4ae !important; border-color: #ffb068 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-cell-board.i4 { background: #ffb67d !important; border-color: #ff8f3d !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-cell-board.i5 { background: #ff8a3d !important; border-color: #ff6f1a !important; color: #ffffff !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-cause-list, html body.soc-desktop-shell #analyticsView .soc-analytics-followup-columns, html body.soc-desktop-shell #analyticsView .soc-analytics-hotspot-list { display: grid !important; gap: 6px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-cause-row { display: grid !important; gap: 6px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-cause-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; color: #202430 !important; font-size: 12px !important; line-height: 17px !important; font-weight: 700 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-cause-track { height: 8px !important; border-radius: 999px !important; background: #edf0f6 !important; overflow: hidden !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-cause-track span { display: block !important; height: 100% !important; border-radius: inherit !important; background: linear-gradient(90deg, #ff9143 0%, #ff6f1a 100%) !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-hotspot-row, html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item { display: grid !important; gap: 2px !important; padding: 10px 14px !important; border: 1px solid #edf0f6 !important; border-radius: 12px !important; background: #ffffff !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-hotspot-rank { color: #8b93a6 !important; font-size: 11px !important; line-height: 15px !important; font-weight: 800 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-hotspot-head strong { font-size: 16px !important; line-height: 21px !important; } html body.soc-desktop-shell #analyticsView :is(.soc-analytics-hotspot-role, .soc-analytics-hotspot-summary) { font-size: 12px !important; line-height: 17px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-hotspot-score strong { font-size: 20px !important; line-height: 22px !important; } html body.soc-desktop-shell #analyticsView #analyticsFollowupBand .soc-analytics-followup-columns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } html body.soc-desktop-shell #analyticsView #analyticsFollowupBand .soc-analytics-followup-column { padding: 14px !important; border: 1px solid #edf1f6 !important; border-radius: 14px !important; background: #fcfdff !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-column h4 { margin: 0 0 10px !important; color: #202430 !important; font-size: 15px !important; line-height: 22px !important; font-weight: 800 !important; } } /* ===== Pass26 ops detail cleanup ===== */ @media (min-width: 1024px) { body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 40px !important; min-width: 0 !important; padding: 0 12px !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #ffffff !important; flex: 1 1 460px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main:has(.soc-phase1-toolbar-summary.hidden) { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-topbar .soc-realtime-date-display { flex: 0 0 auto !important; width: auto !important; min-height: 36px !important; height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions { gap: 6px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions .ds-btn { min-height: 36px !important; height: 36px !important; padding: 0 12px !important; border-radius: 10px !important; font-size: 13px !important; line-height: 18px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; min-height: 82px !important; height: 82px !important; padding: 14px 16px 10px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head h3 { font-size: 16px !important; line-height: 24px !important; font-weight: 700 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-workspace-inline-summary { justify-content: flex-end !important; flex-wrap: wrap !important; gap: 6px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel { display: grid !important; align-content: start !important; gap: 12px !important; padding: 16px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; gap: 12px !important; padding: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 { font-size: 16px !important; line-height: 24px !important; font-weight: 700 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions { justify-content: flex-end !important; gap: 6px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions .ds-btn { min-height: 36px !important; height: 36px !important; padding: 0 12px !important; border-radius: 10px !important; font-size: 13px !important; line-height: 18px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-danger-btn { color: #d46464 !important; border-color: #f1d6d6 !important; background: #fffafa !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel > .meta { margin: 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 17px !important; color: #697286 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty { display: none; gap: 4px; padding-top: 2px; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-title { font-size: 15px; line-height: 22px; font-weight: 700; color: #202430; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-copy { margin: 0; font-size: 13px; line-height: 19px; color: #697286; word-break: keep-all; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #fafbfd !important; overflow: hidden !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item { min-width: 0 !important; min-height: 0 !important; padding: 12px 14px !important; border: 0 !important; border-right: 1px solid #e6eaf1 !important; border-bottom: 1px solid #e6eaf1 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:first-child { grid-column: 1 / -1 !important; border-right: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(2) { border-bottom: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(3) { border-right: 0 !important; border-bottom: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-label { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 11px !important; line-height: 15px !important; color: #7d8699 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-value { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 14px !important; line-height: 20px !important; font-weight: 700 !important; color: #202430 !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section { gap: 6px !important; margin: 0 !important; padding: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title { font-size: 12px !important; line-height: 17px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: #525d73 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary { min-height: 0 !important; max-height: none !important; padding: 12px !important; border-radius: 12px !important; background: #fafbfd !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv { gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) !important; gap: 10px !important; align-items: start !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row dt { font-size: 12px !important; line-height: 17px !important; color: #7d8699 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row dd { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 12px !important; line-height: 18px !important; color: #202430 !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread { min-height: 112px !important; padding: 12px !important; border-radius: 12px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form { margin: 0 !important; padding: 10px 0 0 !important; border: 0 !important; border-top: 1px solid #edf1f6 !important; border-radius: 0 !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions { margin: 0 !important; padding: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel { gap: 10px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-empty { display: grid !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-head-actions, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-section, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-form, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-actions, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection > .meta { display: none !important; } } /* ===== Ops support final lock tail (2026-04-02) ===== */ @media (min-width: 1024px) { html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) minmax(344px, 360px) !important; align-items: stretch !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet { min-height: var(--ops-support-shared-height, 620px) !important; height: var(--ops-support-shared-height, 620px) !important; max-height: var(--ops-support-shared-height, 620px) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main { display: flex !important; flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view, html body.soc-desktop-shell #opsSupportPanel #opsSupportListView.soc-ops-support-view { min-height: 0 !important; overflow: auto !important; padding-right: 2px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid { align-content: stretch !important; grid-auto-rows: minmax(0, 1fr) !important; min-height: 0 !important; height: 100% !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell { min-height: 0 !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; align-content: stretch !important; gap: 6px !important; overflow: hidden !important; padding: 8px 7px !important; border-radius: 12px !important; border-color: var(--ops-support-rail-border) !important; background: var(--ops-support-rail-surface) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet { width: min(100%, 360px) !important; min-width: 0 !important; max-width: 360px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 14px 15px !important; overflow: hidden !important; border: 1px solid var(--ops-support-rail-border) !important; border-radius: 14px !important; background: var(--ops-support-rail-surface) !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; padding: 0 0 10px !important; border-bottom: 1px solid var(--ops-support-rail-border) !important; flex: 0 0 auto !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetTitle { margin: 0 !important; font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-sheet-head-copy > .meta { display: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-sheet-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; padding-right: 2px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet :is( .soc-ops-support-sheet-head-actions .ds-btn, .worker-row-actions .ds-btn, .worker-add-btn, [data-action="ops-support-enter-worker-edit"] ) { min-height: 34px !important; height: 34px !important; line-height: 1 !important; white-space: nowrap !important; flex: 0 0 auto !important; padding-inline: 12px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action { border-color: var(--ops-support-neutral-border) !important; background: var(--ops-support-neutral-bg) !important; color: #445067 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn { border-color: var(--ops-support-strong-danger-border) !important; background: var(--ops-support-strong-danger) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn { border-color: var(--ops-support-strong-primary-border) !important; background: var(--ops-support-strong-primary) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section { display: grid !important; gap: 8px !important; padding: 12px 0 0 !important; border-top: 1px solid #eef2f6 !important; background: transparent !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section--summary { padding-top: 0 !important; border-top: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metrics { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-purpose, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet :is(.soc-ops-support-confirmed-block, .soc-ops-support-confirmed-disabled, .soc-ops-support-detail-timeline-body, .soc-ops-support-day-summary > div) { border: 1px solid var(--ops-support-rail-border) !important; border-radius: 12px !important; background: var(--ops-support-rail-surface) !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric { min-height: 74px !important; padding: 10px 11px !important; background: var(--ops-support-rail-muted) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-purpose { padding: 11px 12px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line { position: relative !important; padding: 7px 8px 7px 12px !important; border: 1px solid var(--ops-support-line-border, var(--ops-support-rail-border)) !important; background: var(--ops-support-line-bg, var(--ops-support-rail-surface)) !important; color: var(--ops-support-line-color, var(--ops-support-rail-text)) !important; box-shadow: none !important; overflow: hidden !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--ops-support-line-accent, var(--ops-support-cancelled-accent)); } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main { gap: 8px !important; align-items: flex-start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-meta-row { justify-content: space-between !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-status { flex: 0 0 auto !important; } html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) { display: inline-flex !important; align-items: center !important; gap: 6px !important; border-radius: 999px !important; border: 1px solid transparent !important; white-space: nowrap !important; font-weight: 700 !important; } html body.soc-desktop-shell #opsSupportPanel .support-status-inline { min-height: 26px !important; padding: 0 9px !important; font-size: 11px !important; line-height: 1 !important; } html body.soc-desktop-shell #opsSupportPanel .support-status-chip { min-height: 22px !important; padding: 0 7px !important; font-size: 10px !important; line-height: 1 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot { width: 7px !important; height: 7px !important; flex: 0 0 7px !important; margin-top: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending, html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-pending, html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-pending { --ops-support-line-accent: var(--ops-support-pending-accent); --ops-support-line-border: var(--ops-support-pending-border); --ops-support-line-bg: var(--ops-support-pending-bg); --ops-support-line-color: var(--ops-support-pending-text); border-color: var(--ops-support-pending-border) !important; background: var(--ops-support-pending-bg) !important; color: var(--ops-support-pending-text) !important; } html body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved, html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-approved, html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-approved { --ops-support-line-accent: var(--ops-support-approved-accent); --ops-support-line-border: var(--ops-support-approved-border); --ops-support-line-bg: var(--ops-support-approved-bg); --ops-support-line-color: var(--ops-support-approved-text); border-color: var(--ops-support-approved-border) !important; background: var(--ops-support-approved-bg) !important; color: var(--ops-support-approved-text) !important; } html body.soc-desktop-shell #opsSupportPanel :is(.cal-line.state-unavailable, .cal-line.state-rejected), html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) { --ops-support-line-accent: var(--ops-support-danger-accent); --ops-support-line-border: var(--ops-support-danger-border); --ops-support-line-bg: var(--ops-support-danger-bg); --ops-support-line-color: var(--ops-support-danger-text); border-color: var(--ops-support-danger-border) !important; background: var(--ops-support-danger-bg) !important; color: var(--ops-support-danger-text) !important; } html body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled, html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-cancelled, html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-cancelled { --ops-support-line-accent: var(--ops-support-cancelled-accent); --ops-support-line-border: var(--ops-support-cancelled-border); --ops-support-line-bg: var(--ops-support-cancelled-bg); --ops-support-line-color: var(--ops-support-cancelled-text); border-color: var(--ops-support-cancelled-border) !important; background: var(--ops-support-cancelled-bg) !important; color: var(--ops-support-cancelled-text) !important; } } /* ===== Pass27 ticket + alerts rhythm eof overrides ===== */ @media (min-width: 1024px) { body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar { min-height: 54px !important; padding: 8px 12px !important; border: 1px solid #e6eaf1 !important; border-radius: 14px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; flex: 1 1 auto !important; min-height: 0 !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main:has(.soc-phase1-toolbar-summary.hidden) { flex: 1 1 auto !important; width: auto !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-summary { min-width: 0 !important; margin: 0 !important; font-size: 12px !important; line-height: 18px !important; color: #697286 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions .ds-btn { min-height: 32px !important; height: 32px !important; padding: 0 10px !important; border-radius: 9px !important; font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head { min-height: 64px !important; padding: 12px 16px 8px !important; background: #f7f9fc !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel { width: 324px !important; min-width: 324px !important; max-width: 324px !important; border-radius: 14px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel { gap: 10px !important; padding: 14px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; padding: 0 0 4px !important; border-bottom: 0 !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 { font-size: 18px !important; line-height: 26px !important; font-weight: 800 !important; color: #202430 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions .ds-btn { min-height: 32px !important; height: 32px !important; padding: 0 11px !important; border-radius: 10px !important; font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-danger-btn { color: #d45b5b !important; border-color: #efd0d0 !important; background: #fff8f8 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty { gap: 3px !important; padding: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-title { font-size: 14px !important; line-height: 20px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-copy { font-size: 12px !important; line-height: 18px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding: 0 !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #fafbfd !important; overflow: hidden !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:first-child, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(2), body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(3) { display: grid !important; grid-template-columns: 62px minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; min-height: 0 !important; padding: 10px 12px !important; border: 0 !important; border-bottom: 1px solid #e6eaf1 !important; border-right: 0 !important; border-radius: 0 !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:last-child { border-bottom: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-label { align-self: start !important; margin: 0 !important; font-size: 11px !important; line-height: 17px !important; font-weight: 700 !important; color: #7a8499 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-value { align-self: start !important; margin: 0 !important; font-size: 13px !important; line-height: 19px !important; font-weight: 700 !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section { gap: 5px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title { font-size: 13px !important; line-height: 19px !important; color: #525d73 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary { min-height: 0 !important; padding: 10px 12px !important; border-radius: 12px !important; background: #fafbfd !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv { gap: 7px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row { grid-template-columns: 66px minmax(0, 1fr) !important; gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread { min-height: 104px !important; padding: 10px 12px !important; border: 1px solid #eef2f6 !important; border-radius: 12px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form { padding-top: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions { margin-top: 2px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel { gap: 8px !important; } } /* ===== Pass27 ticket + alerts rhythm eof overrides ===== */ @media (min-width: 1024px) { body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar { min-height: 54px !important; padding: 8px 12px !important; border: 1px solid #e6eaf1 !important; border-radius: 14px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; flex: 1 1 auto !important; min-height: 0 !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main:has(.soc-phase1-toolbar-summary.hidden) { flex: 1 1 auto !important; width: auto !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-summary { min-width: 0 !important; margin: 0 !important; font-size: 12px !important; line-height: 18px !important; color: #697286 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions .ds-btn { min-height: 32px !important; height: 32px !important; padding: 0 10px !important; border-radius: 9px !important; font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head { min-height: 64px !important; padding: 12px 16px 8px !important; background: #f7f9fc !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel { width: 324px !important; min-width: 324px !important; max-width: 324px !important; border-radius: 14px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel { gap: 10px !important; padding: 14px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; padding: 0 0 4px !important; border-bottom: 0 !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 { font-size: 18px !important; line-height: 26px !important; font-weight: 800 !important; color: #202430 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions .ds-btn { min-height: 32px !important; height: 32px !important; padding: 0 11px !important; border-radius: 10px !important; font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-danger-btn { color: #d45b5b !important; border-color: #efd0d0 !important; background: #fff8f8 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty { gap: 3px !important; padding: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-title { font-size: 14px !important; line-height: 20px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-copy { font-size: 12px !important; line-height: 18px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding: 0 !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #fafbfd !important; overflow: hidden !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:first-child, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(2), body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(3) { display: grid !important; grid-template-columns: 62px minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; min-height: 0 !important; padding: 10px 12px !important; border: 0 !important; border-bottom: 1px solid #e6eaf1 !important; border-right: 0 !important; border-radius: 0 !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:last-child { border-bottom: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-label { align-self: start !important; margin: 0 !important; font-size: 11px !important; line-height: 17px !important; font-weight: 700 !important; color: #7a8499 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-value { align-self: start !important; margin: 0 !important; font-size: 13px !important; line-height: 19px !important; font-weight: 700 !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section { gap: 5px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title { font-size: 13px !important; line-height: 19px !important; color: #525d73 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary { min-height: 0 !important; padding: 10px 12px !important; border-radius: 12px !important; background: #fafbfd !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv { gap: 7px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row { grid-template-columns: 66px minmax(0, 1fr) !important; gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread { min-height: 104px !important; padding: 10px 12px !important; border: 1px solid #eef2f6 !important; border-radius: 12px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form { padding-top: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions { margin-top: 2px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel { gap: 8px !important; } } /* ===== Pass27 ticket + alerts rhythm final ===== */ @media (min-width: 1024px) { body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar { min-height: 54px !important; padding: 8px 12px !important; border: 1px solid #e6eaf1 !important; border-radius: 14px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; flex: 1 1 auto !important; min-height: 0 !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main:has(.soc-phase1-toolbar-summary.hidden) { flex: 1 1 auto !important; width: auto !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-summary { min-width: 0 !important; margin: 0 !important; font-size: 12px !important; line-height: 18px !important; color: #697286 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions .ds-btn { min-height: 32px !important; height: 32px !important; padding: 0 10px !important; border-radius: 9px !important; font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head { min-height: 64px !important; padding: 12px 16px 8px !important; background: #f7f9fc !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel { width: 324px !important; min-width: 324px !important; max-width: 324px !important; border-radius: 14px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel { gap: 10px !important; padding: 14px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; padding: 0 0 4px !important; border-bottom: 0 !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 { font-size: 18px !important; line-height: 26px !important; font-weight: 800 !important; color: #202430 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions .ds-btn { min-height: 32px !important; height: 32px !important; padding: 0 11px !important; border-radius: 10px !important; font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-danger-btn { color: #d45b5b !important; border-color: #efd0d0 !important; background: #fff8f8 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty { gap: 3px !important; padding: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-title { font-size: 14px !important; line-height: 20px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-copy { font-size: 12px !important; line-height: 18px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding: 0 !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #fafbfd !important; overflow: hidden !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:first-child, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(2), body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(3) { display: grid !important; grid-template-columns: 62px minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; min-height: 0 !important; padding: 10px 12px !important; border: 0 !important; border-bottom: 1px solid #e6eaf1 !important; border-right: 0 !important; border-radius: 0 !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:last-child { border-bottom: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-label { align-self: start !important; margin: 0 !important; font-size: 11px !important; line-height: 17px !important; font-weight: 700 !important; color: #7a8499 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-value { align-self: start !important; margin: 0 !important; font-size: 13px !important; line-height: 19px !important; font-weight: 700 !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section { gap: 5px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title { font-size: 13px !important; line-height: 19px !important; color: #525d73 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary { min-height: 0 !important; padding: 10px 12px !important; border-radius: 12px !important; background: #fafbfd !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv { gap: 7px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row { grid-template-columns: 66px minmax(0, 1fr) !important; gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread { min-height: 104px !important; padding: 10px 12px !important; border: 1px solid #eef2f6 !important; border-radius: 12px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form { padding-top: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions { margin-top: 2px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel { gap: 8px !important; } } /* ===== Phase 3 rebuild loop 3: stats + score eof overrides ===== */ body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card { padding: 0 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card .soc-workspace-card-head { padding: 14px 16px 6px !important; border: 0 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card .soc-workspace-card-head .meta { margin-top: 2px !important; color: #8b93a6 !important; font-size: 11px !important; line-height: 15px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell { padding: 2px 16px 16px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell > .soc-people-kpi-card, body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell > article.soc-people-kpi-card { padding: 2px 0 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-head { margin-bottom: 10px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-subsection { margin-top: 10px !important; padding-top: 10px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut { width: 88px !important; height: 88px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut::after { inset: 10px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut-center strong { font-size: 26px !important; line-height: 30px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-bar-list { gap: 9px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card { min-height: 184px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-visual { min-height: 72px !important; } body.soc-desktop-shell #employeeScorePanel:not(.has-score-focus) .soc-employee-score-detail-panel, body.soc-desktop-shell #employeeScorePanel:not(.has-score-focus) aside.soc-employee-score-detail-panel { display: none !important; } body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-detail-panel, body.soc-desktop-shell #employeeScorePanel.has-score-focus aside.soc-employee-score-detail-panel { display: grid !important; } /* ===== Phase 3 rebuild loop 2b: people accounts / stats / score final desktop overrides ===== */ @media (min-width: 1200px) { body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-people-kpi-strip, body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid, body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card { border: 1px solid #e7ecf3 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-wrap { border-top: 1px solid #eef2f6; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table th, body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table td { padding: 10px 12px !important; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table thead th { background: #fbfcfe; font-size: 10px; line-height: 13px; letter-spacing: 0.04em; color: #7d8699; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table tbody td { font-size: 12px; line-height: 17px; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-primary { color: #202430; font-size: 13px; line-height: 18px; font-weight: 700; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-secondary { color: #7d8699; font-size: 11px; line-height: 15px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 14px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(1) { order: 3 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(2) { order: 2 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(3) { order: 1 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(4) { order: 4 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-workspace-card-head { padding: 14px 16px 10px !important; border: 0 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-workspace-card-head h3 { color: #202430; font-size: 15px; line-height: 20px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell { padding: 4px 16px 16px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-trend-chart { min-height: 180px !important; align-items: end; gap: 10px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-trend-bars { height: 112px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card:nth-child(4) { display: none !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-main-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-main-grid { grid-template-columns: minmax(0, 1fr) 360px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel { position: static !important; top: auto !important; max-height: none !important; align-self: stretch !important; } body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-detail-panel { position: sticky !important; top: 16px !important; align-self: start !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-filter-bar, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-primary-card, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-ranking-section, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel { border: 1px solid #e7ecf3 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card { min-height: 184px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-visual { min-height: 72px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-site-row { padding: 12px 14px !important; border-radius: 12px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table th, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table td { padding: 10px 12px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table th { background: #fbfcfe; font-size: 10px; line-height: 13px; letter-spacing: 0.04em; color: #7d8699; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table td { font-size: 12px; line-height: 17px; } body.soc-desktop-shell #employeeScorePanel:not(.has-score-focus) .soc-employee-score-detail-panel { display: none !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell > .soc-people-kpi-card { min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-head { margin-bottom: 10px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-subsection { margin-top: 10px; padding-top: 10px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut { width: 94px; height: 94px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut::after { inset: 11px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut-center strong { font-size: 28px; line-height: 30px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-number-block strong { font-size: 26px; line-height: 30px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-bar-list { gap: 10px; } } /* ===== Phase 3 rebuild loop 2: people accounts / stats / score rhythm ===== */ @media (min-width: 1200px) { body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-people-kpi-strip, body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid, body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card { border: 1px solid #e7ecf3 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-wrap { border-top: 1px solid #eef2f6; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table th, body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table td { padding: 10px 12px !important; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table thead th { background: #fbfcfe; font-size: 10px; line-height: 13px; letter-spacing: 0.04em; color: #7d8699; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table tbody td { font-size: 12px; line-height: 17px; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-primary { color: #202430; font-size: 13px; line-height: 18px; font-weight: 700; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-secondary { color: #7d8699; font-size: 11px; line-height: 15px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 14px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(1) { order: 3; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(2) { order: 2; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(3) { order: 1; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(4) { order: 4; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-workspace-card-head { padding: 14px 16px 10px !important; border: 0 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-workspace-card-head h3 { color: #202430; font-size: 15px; line-height: 20px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell { padding: 4px 16px 16px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-trend-chart { min-height: 180px !important; align-items: end; gap: 10px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-trend-bars { height: 112px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card:nth-child(4) { display: none !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-main-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-main-grid { grid-template-columns: minmax(0, 1fr) 360px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel { position: static !important; top: auto !important; max-height: none !important; align-self: stretch !important; } body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-detail-panel { position: sticky !important; top: 16px !important; align-self: start !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-filter-bar, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-primary-card, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-ranking-section, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel { border: 1px solid #e7ecf3 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card { min-height: 214px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-visual { min-height: 100px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-site-row { padding: 12px 14px !important; border-radius: 12px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table th, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table td { padding: 10px 12px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table th { background: #fbfcfe; font-size: 10px; line-height: 13px; letter-spacing: 0.04em; color: #7d8699; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table td { font-size: 12px; line-height: 17px; } } /* ===== Pass20 corrective winner overrides: approval queue / analytics / support / people ===== */ @media (min-width: 1024px) { body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header { padding: 0 20px 6px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header-main { gap: 3px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-main { grid-template-columns: minmax(0, 1fr) 320px !important; gap: 14px !important; align-items: start !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-panel, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel { min-height: 500px !important; border-radius: 12px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-panel { width: auto !important; min-width: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel { width: 320px !important; min-width: 320px !important; max-width: 320px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head { min-height: 56px !important; padding: 14px 18px 12px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header { min-height: 36px !important; padding: 0 18px 10px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card, .ticket-list > .ticket-card) { min-height: 60px !important; padding: 9px 18px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card { min-height: 66px !important; padding: 9px 12px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill, .incident-card .incident-ticket-status), body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge, body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge { background: #ffffff !important; box-shadow: none !important; font-weight: 700 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-pending, .incident-card .incident-ticket-status.status-pending) { border-color: #ff6a13 !important; color: #c95400 !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-approved, .incident-card .incident-ticket-status.status-approved), body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge.is-confirmed, body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-confirmed { border-color: #16a34a !important; color: #15803d !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-unavailable, .ticket-status-pill.status-rejected, .incident-card .incident-ticket-status.status-unavailable, .incident-card .incident-ticket-status.status-rejected), body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge.is-unconfirmed, body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-unconfirmed { border-color: #ef4444 !important; color: #c81e1e !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-cancelled, .ticket-status-pill.status-done, .incident-card .incident-ticket-status.status-cancelled, .incident-card .incident-ticket-status.status-done) { border-color: #94a3b8 !important; color: #475569 !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-card.status-unavailable::before, .ticket-card.status-rejected::before, .incident-card.incident-ticket-card.status-unavailable::before, .incident-card.incident-ticket-card.status-rejected::before) { background: #ef4444 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--hero { padding: 14px 16px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body { grid-template-columns: 112px minmax(0, 1fr) !important; gap: 12px !important; align-items: center !important; min-height: 0 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap { display: grid !important; place-items: center !important; width: 112px !important; height: 112px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge { width: 112px !important; height: 112px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap { position: absolute !important; inset: 50% auto auto 50% !important; width: auto !important; height: auto !important; padding: 0 !important; gap: 0 !important; transform: translate(-50%, -50%) !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-label { display: none !important; } body.soc-desktop-shell #analyticsView #analyticsRiskScoreValue { display: block !important; font-size: 28px !important; line-height: 1 !important; letter-spacing: -0.04em !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary { gap: 8px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary-copy { font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell #analyticsView .soc-risk-grade.safe, body.soc-desktop-shell #analyticsView .soc-risk-grade.stable { border-color: rgba(22, 163, 74, 0.3) !important; background: #ffffff !important; color: #15803d !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-safe { background: #16a34a !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot { background: #16a34a !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] strong { color: #15803d !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-approved { background: #16a34a !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-pending { background: #ff6a13 !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-unavailable, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-rejected { background: #ef4444 !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-cancelled { background: #64748b !important; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending { --ops-support-line-accent: #ff6a13 !important; --ops-support-line-border: rgba(255, 106, 19, 0.72) !important; --ops-support-line-bg: #ffffff !important; --ops-support-line-color: #c95400 !important; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved { --ops-support-line-accent: #16a34a !important; --ops-support-line-border: rgba(22, 163, 74, 0.68) !important; --ops-support-line-bg: #ffffff !important; --ops-support-line-color: #15803d !important; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-unavailable, body.soc-desktop-shell #opsSupportPanel .cal-line.state-rejected { --ops-support-line-accent: #ef4444 !important; --ops-support-line-border: rgba(239, 68, 68, 0.72) !important; --ops-support-line-bg: #ffffff !important; --ops-support-line-color: #c81e1e !important; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled { --ops-support-line-accent: #64748b !important; --ops-support-line-border: rgba(100, 116, 139, 0.5) !important; --ops-support-line-bg: #ffffff !important; --ops-support-line-color: #475569 !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) { background: #ffffff !important; font-weight: 700 !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-pending, .support-status-chip.state-pending) { border-color: #ff6a13 !important; color: #c95400 !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-approved, .support-status-chip.state-approved) { border-color: #16a34a !important; color: #15803d !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) { border-color: #ef4444 !important; color: #c81e1e !important; } body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 10px !important; } body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card { min-height: 188px !important; height: 100% !important; align-content: start !important; } body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card.is-progress .soc-people-kpi-inline-list, body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card.is-bars .soc-people-bar-list { gap: 8px !important; align-content: start !important; } body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card.is-bars .soc-people-bar-row { gap: 5px !important; } body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card.is-bars .soc-people-bar-track, body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card.is-progress .soc-people-progress { height: 8px !important; } } /* ===== Pass19 winner overrides at EOF ===== */ body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header { padding: 0 16px 2px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header-main { gap: 4px; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill, .incident-card .incident-ticket-status), body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge, body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge { background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-pending, .incident-card .incident-ticket-status.status-pending) { color: #d65c00 !important; border-color: #ff8a1f !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-needs-info, .incident-card .incident-ticket-status.status-needs-info) { color: #2f80ff !important; border-color: #2f80ff !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-approved, .incident-card .incident-ticket-status.status-approved), body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge.is-confirmed, body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-confirmed { color: #15803d !important; border-color: #16a34a !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-unavailable, .ticket-status-pill.status-rejected, .incident-card .incident-ticket-status.status-unavailable, .incident-card .incident-ticket-status.status-rejected), body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge.is-unconfirmed, body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-unconfirmed { color: #c81e1e !important; border-color: #ef4444 !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-cancelled, .ticket-status-pill.status-done, .incident-card .incident-ticket-status.status-cancelled, .incident-card .incident-ticket-status.status-done) { color: #475569 !important; border-color: #94a3b8 !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-card.status-unavailable, .ticket-card.status-rejected, .incident-card.incident-ticket-card.status-unavailable, .incident-card.incident-ticket-card.status-rejected) { opacity: 1 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-card.status-unavailable::before, .ticket-card.status-rejected::before, .incident-card.incident-ticket-card.status-unavailable::before, .incident-card.incident-ticket-card.status-rejected::before) { background: #ef4444 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; min-height: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap, body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge { width: 120px !important; height: 120px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap { inset: 0 !important; padding-top: 0 !important; } body.soc-desktop-shell #analyticsView #analyticsRiskScoreValue { font-size: 30px !important; line-height: 1 !important; letter-spacing: -0.04em; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary { gap: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item { min-height: 52px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item:last-child { grid-column: auto !important; } body.soc-desktop-shell #analyticsView .soc-risk-grade.safe, body.soc-desktop-shell #analyticsView .soc-risk-grade.stable { border-color: rgba(22, 163, 74, 0.28) !important; background: #ffffff !important; color: #15803d !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-safe, body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot { background: #16a34a !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-approved { background: #16a34a !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-pending { background: #ff6a13 !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-unavailable, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-rejected { background: #ef4444 !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-cancelled { background: #64748b !important; } body.soc-desktop-shell #opsSupportPanel :is(.cal-line.state-pending, .cal-line.state-approved, .cal-line.state-unavailable, .cal-line.state-rejected, .cal-line.state-cancelled) { background: #ffffff !important; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending { --ops-support-line-accent: #ff6a13; border-color: rgba(255, 106, 19, 0.68) !important; color: #c2410c !important; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved { --ops-support-line-accent: #16a34a; border-color: rgba(22, 163, 74, 0.58) !important; color: #15803d !important; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-unavailable, body.soc-desktop-shell #opsSupportPanel .cal-line.state-rejected { --ops-support-line-accent: #ef4444; border-color: rgba(239, 68, 68, 0.62) !important; color: #c81e1e !important; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled { --ops-support-line-accent: #64748b; border-color: rgba(100, 116, 139, 0.48) !important; color: #475569 !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line:hover, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line.is-selected { background: #ffffff !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) { background: #ffffff !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-pending, .support-status-chip.state-pending) { border-color: #ff6a13 !important; color: #c2410c !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-approved, .support-status-chip.state-approved) { border-color: #16a34a !important; color: #15803d !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) { border-color: #ef4444 !important; color: #c81e1e !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-cancelled, .support-status-chip.state-cancelled) { border-color: #94a3b8 !important; color: #475569 !important; } body.soc-desktop-shell #peopleView :is(#peopleHubEmployeesPane, #peopleHubAccountsPane, #peopleHubHrPane) .soc-people-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-card { align-content: start; } body.soc-desktop-shell #peopleView .soc-people-kpi-card.is-bars .soc-people-bar-list { display: grid; align-content: start; gap: 10px; } @media (min-width: 1024px) { body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card { min-height: 74px !important; padding: 10px 12px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label { font-size: 11px !important; line-height: 14px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value { font-size: 24px !important; line-height: 1 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-main { grid-template-columns: minmax(0, 1fr) 320px !important; gap: 12px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-panel { min-height: 500px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head { min-height: 58px !important; padding: 14px 16px 10px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header { min-height: 38px !important; padding: 0 16px 9px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card, .ticket-list > .ticket-card) { min-height: 64px !important; padding: 9px 16px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel { width: 320px !important; min-width: 320px !important; max-width: 320px !important; min-height: 500px !important; } } /* ===== Phase 3 rebuild loop 3b: final winner overrides ===== */ body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card { padding: 0 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card .soc-workspace-card-head { padding: 14px 16px 6px !important; border: 0 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card .soc-workspace-card-head .meta { margin-top: 2px !important; color: #8b93a6 !important; font-size: 11px !important; line-height: 15px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell { padding: 2px 16px 16px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell > .soc-people-kpi-card, body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell > article.soc-people-kpi-card { min-height: 0 !important; padding: 2px 0 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-head { margin-bottom: 10px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-subsection { margin-top: 10px !important; padding-top: 10px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut { width: 88px !important; height: 88px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut::after { inset: 10px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut-center strong { font-size: 26px !important; line-height: 30px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-bar-list { gap: 9px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card { min-height: 184px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-visual { min-height: 72px !important; } body.soc-desktop-shell #employeeScorePanel:not(.has-score-focus) .soc-employee-score-detail-panel, body.soc-desktop-shell #employeeScorePanel:not(.has-score-focus) aside.soc-employee-score-detail-panel { display: none !important; } body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-detail-panel, body.soc-desktop-shell #employeeScorePanel.has-score-focus aside.soc-employee-score-detail-panel { display: grid !important; } /* ===== Analytics workspace refactor ===== */ #analyticsView { display: grid; gap: 18px; position: relative; } #analyticsView .soc-analytics-workspace-header { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } #analyticsView .soc-analytics-workspace-header h3 { margin: 0; } #analyticsView .soc-analytics-workspace-header .meta { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-filter-bar { display: grid; gap: 12px; padding: 18px 20px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface, var(--soc-panel-bg)); box-shadow: var(--ui-shadow-1, var(--soc-shadow-soft)); } #analyticsView .soc-analytics-filter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(220px, 280px); gap: 12px; align-items: end; } #analyticsView .soc-analytics-filter-group { display: grid; gap: 8px; min-width: 0; } #analyticsView .soc-analytics-filter-label, #analyticsView .soc-analytics-control-field > label { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-range-quick { display: flex; flex-wrap: wrap; gap: 8px; } #analyticsView .soc-analytics-filter-bar .ds-btn, #analyticsView .soc-analytics-filter-bar input[type="date"], #analyticsView .soc-analytics-filter-bar select, #analyticsView .soc-analytics-comparison-toolbar select { min-height: 40px; height: 40px; } #analyticsView .soc-analytics-custom-range { display: inline-flex; align-items: center; gap: 8px; } #analyticsView .soc-analytics-site-filter { display: grid; gap: 8px; width: 100%; max-width: none; } #analyticsView .soc-analytics-site-filter label { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-workspace { display: grid; gap: 20px; } #analyticsView .soc-analytics-summary-zone { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(320px, 0.94fr); gap: 18px; align-items: start; } #analyticsView .soc-analytics-summary-primary, #analyticsView .soc-analytics-zone, #analyticsView .soc-analytics-trend-card, #analyticsView #analyticsScoreTopBlock, #analyticsView #analyticsStoreInsightPanel { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface, var(--soc-panel-bg)); box-shadow: var(--ui-shadow-1, var(--soc-shadow-soft)); } #analyticsView .soc-analytics-summary-primary { display: grid; grid-template-rows: auto auto; gap: 16px; padding: 20px 24px 24px; min-width: 0; overflow: hidden; min-height: 0; } #analyticsView .soc-risk-overview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex: 0 0 auto; } #analyticsView .soc-risk-overview-side { display: grid; align-content: start; justify-items: center; gap: 12px; min-width: 0; } #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar { justify-content: flex-end; width: 100%; } #analyticsView .soc-analytics-summary-primary-body { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 18px; align-items: start; min-width: 0; } #analyticsView .soc-analytics-summary-primary-head { display: grid; gap: 12px; min-width: 0; padding-bottom: 16px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } #analyticsView .soc-analytics-summary-headline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; min-width: 0; } #analyticsView .soc-analytics-summary-title-wrap { display: grid; gap: 8px; min-width: 0; } #analyticsView .soc-analytics-summary-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; } #analyticsView .soc-analytics-summary-meta-row .meta { margin: 0; } #analyticsView .soc-risk-gauge-wrap { width: 168px; height: 168px; justify-self: end; align-self: start; margin: 0; } #analyticsView .soc-risk-gauge, #analyticsView .soc-risk-gauge-value-wrap { width: 168px; height: 168px; } #analyticsView .soc-risk-gauge-value-wrap strong { font-size: 32px; line-height: 1; } #analyticsView .soc-analytics-summary-content { display: grid; gap: 12px; min-width: 0; align-content: start; } #analyticsView .soc-analytics-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } #analyticsView .soc-analytics-summary-kicker { margin: 0 0 4px; font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); text-transform: uppercase; letter-spacing: 0.04em; } #analyticsView .soc-risk-overview-title { margin: 0; text-align: left; white-space: normal; } #analyticsView .soc-analytics-summary-lead { margin: 0; font-size: var(--type-body-md-size, 14px); line-height: var(--type-body-md-line, 20px); color: var(--ui-text-primary, var(--soc-text)); max-width: 56ch; } #analyticsView .soc-analytics-summary-subsection { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ui-divider-default, var(--soc-divider)); } #analyticsView .soc-analytics-summary-subsection--drivers { padding-top: 0; border-top: 0; gap: 12px; } #analyticsView .soc-analytics-summary-subsection > h5 { margin: 0; font-size: var(--type-section-md-size, 16px); line-height: var(--type-section-md-line, 24px); font-weight: var(--type-section-md-weight, 600); } #analyticsView .soc-analytics-driver-list { padding-left: 18px; gap: 8px; margin: 0; } #analyticsView .soc-analytics-driver-list li { color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; align-content: start; align-self: start; grid-auto-rows: minmax(124px, auto); } #analyticsView .soc-analytics-kpi-grid .soc-kpi-card, #analyticsView .soc-analytics-kpi-card { min-height: 124px; padding: 18px 20px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface, var(--soc-panel-bg)); box-shadow: var(--ui-shadow-1, var(--soc-shadow-soft)); display: flex; flex-direction: column; justify-content: flex-start; align-self: start; gap: 8px; } #analyticsView .soc-analytics-kpi-grid .soc-kpi-label { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-weight: 600; } #analyticsView .soc-analytics-kpi-grid .soc-kpi-value { margin: 0; font-size: var(--type-display-lg-size, 28px); line-height: var(--type-display-lg-line, 36px); font-weight: 700; } #analyticsView .soc-analytics-zone { display: grid; gap: 16px; padding: 20px 24px 24px; } #analyticsView .soc-analytics-zone-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } #analyticsView .soc-analytics-zone-head h3, #analyticsView .soc-analytics-zone-head h4 { margin: 0; } #analyticsView .soc-analytics-zone-head .meta { margin: 6px 0 0; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-trend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } #analyticsView .soc-analytics-trend-card { min-height: 240px; padding: 20px 24px 24px; } #analyticsView .soc-analytics-trend-card .soc-block-head { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } #analyticsView .soc-analytics-trend-card .soc-sparkline-lg { height: 96px; min-height: 96px; margin-top: 12px; } #analyticsView .soc-analytics-trend-card .soc-sparkline-line { stroke-width: 2.6; } #analyticsView .soc-analytics-trend-card .soc-sparkline-area { opacity: 0.14; } #analyticsView .soc-analytics-heatmap-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #analyticsView .soc-heatmap-day-tabs { margin: 0; } #analyticsView .soc-heatmap-legend { margin: 0; } #analyticsView .soc-heatmap-scroll { min-height: 248px; padding: 6px 0 0; } #analyticsView .soc-analytics-comparison-toolbar { display: grid; gap: 12px; } #analyticsView .soc-store-comparison-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)) auto; gap: 12px; align-items: end; width: 100%; } #analyticsView .soc-analytics-control-field { display: grid; gap: 8px; min-width: 0; } #analyticsView .soc-analytics-comparison-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 16px; align-items: start; } #analyticsView .soc-analytics-comparison-main, #analyticsView .soc-analytics-comparison-side { display: grid; gap: 14px; min-width: 0; } #analyticsView .soc-analytics-comparison-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-comparison-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } #analyticsView .soc-analytics-comparison-stat, #analyticsView .soc-analytics-insight-stat { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } #analyticsView .soc-analytics-comparison-stat .label, #analyticsView .soc-analytics-insight-stat .label { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); } #analyticsView .soc-analytics-comparison-stat strong, #analyticsView .soc-analytics-insight-stat strong { font-size: var(--type-body-md-size, 14px); line-height: var(--type-body-md-line, 20px); font-weight: 700; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-comparison-stat.is-empty { grid-column: 1 / -1; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-store-list { display: grid; gap: 10px; } #analyticsView .soc-store-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease; } #analyticsView .soc-store-row:hover { border-color: var(--ui-border-default, var(--soc-divider)); background: var(--ui-bg-surface, var(--soc-panel-bg)); } #analyticsView .soc-store-row.is-selected { border-color: color-mix(in srgb, var(--soc-primary) 42%, var(--ui-border-default, var(--soc-divider))); box-shadow: 0 0 0 1px color-mix(in srgb, var(--soc-primary) 14%, transparent); background: var(--ui-bg-surface, var(--soc-panel-bg)); } #analyticsView .soc-store-row-rank { display: grid; place-items: center; min-height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface-subtle, var(--soc-card-bg))); color: var(--soc-primary); font-weight: 700; } #analyticsView .soc-store-row-main { display: grid; gap: 10px; min-width: 0; } #analyticsView .soc-store-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; } #analyticsView .soc-store-row strong { font-size: var(--type-body-md-size, 14px); line-height: var(--type-body-md-line, 20px); font-weight: 700; } #analyticsView .soc-store-main-metric { align-items: baseline; } #analyticsView .soc-store-row-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); } #analyticsView .soc-store-row-meta span { white-space: nowrap; } #analyticsView .soc-analytics-single-site-card { display: grid; gap: 14px; padding: 16px 18px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } #analyticsView .soc-analytics-single-site-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } #analyticsView .soc-analytics-single-site-head h4 { margin: 0; font-size: var(--type-section-md-size, 16px); line-height: var(--type-section-md-line, 24px); } #analyticsView .soc-analytics-single-site-head .meta { margin: 4px 0 0; } #analyticsView .soc-analytics-single-site-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #analyticsView .soc-analytics-single-site-metric { display: grid; gap: 4px; padding: 12px 13px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface, var(--soc-panel-bg)); } #analyticsView .soc-analytics-single-site-metric .label { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); } #analyticsView .soc-analytics-single-site-metric strong { font-size: var(--type-body-md-size, 14px); line-height: var(--type-body-md-line, 20px); font-weight: 700; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-driver-pill-list { display: flex; flex-wrap: wrap; gap: 8px; } #analyticsView .soc-analytics-driver-pill { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface, var(--soc-panel-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #analyticsView .soc-store-bar { height: 10px; background: color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 80%, transparent); } #analyticsView .soc-analytics-comparison-side { position: sticky; top: 0; } #analyticsView .soc-analytics-insight-card { display: grid; gap: 14px; padding: 20px; } #analyticsView .soc-analytics-insight-card > .soc-block-head { margin-bottom: 0; padding-bottom: 14px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } #analyticsView .soc-analytics-insight-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #analyticsView .soc-analytics-insight-empty { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); } #analyticsView #analyticsScoreTopList, #analyticsView #analyticsStoreInsightDelta { display: grid; gap: 8px; } #analyticsView #analyticsScoreTopList .soc-mini-row, #analyticsView #analyticsStoreInsightDelta .soc-mini-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } #analyticsView .soc-store-info-popover { top: 0; right: auto; } @media (max-width: 1279.98px) { #analyticsView .soc-analytics-filter-row, #analyticsView .soc-analytics-summary-zone, #analyticsView .soc-analytics-comparison-body, #analyticsView .soc-analytics-trend-grid, #analyticsView .soc-store-comparison-actions { grid-template-columns: 1fr; } #analyticsView .soc-analytics-comparison-summary, #analyticsView .soc-analytics-insight-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } #analyticsView .soc-analytics-comparison-side { position: static; } } @media (max-width: 767.98px) { #analyticsView .soc-analytics-summary-primary-body { grid-template-columns: 1fr; } #analyticsView .soc-risk-gauge-wrap { margin: 0 auto; } #analyticsView .soc-analytics-comparison-summary, #analyticsView .soc-analytics-insight-metrics { grid-template-columns: 1fr; } #analyticsView .soc-store-row { grid-template-columns: 1fr; } #analyticsView .soc-store-row-rank { width: 40px; } } .soc-app-shell { --soc-tabbar-h: 54px; --soc-tabbar-bottom-offset: 0px; --tabbar-h: var(--soc-tabbar-h, 54px); } @supports (height: 100svh) { .soc-app-shell { min-height: 100svh; height: 100svh; } } .soc-startup-overlay { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 24px; background: var(--soc-bg, #f9fafc); -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; transition: opacity 0.2s ease, visibility 0.2s ease; } .soc-startup-overlay:not(.is-hidden) ~ .soc-app-shell { visibility: hidden; } .soc-startup-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .soc-startup-panel { width: min(100%, 662px); min-height: 435px; display: grid; grid-template-rows: auto auto auto auto auto 1fr; justify-items: center; align-content: start; padding: 20px 45px 20px; border: 1px solid rgba(211, 216, 223, 0.9); border-radius: 14px; background: rgba(253, 251, 253, 0.98); box-shadow: 0 20px 64px rgba(32, 43, 57, 0.11), 0 3px 12px rgba(32, 43, 57, 0.05); text-align: center; color: #273344; transform: translateY(8px); } .soc-startup-brand { display: grid; justify-items: center; gap: 14px; } .soc-startup-logo { width: 80px; height: 72px; object-fit: contain; } .soc-startup-wordmark { width: 164px; height: 22px; object-fit: contain; } .soc-startup-status-dots { display: flex; gap: 5px; margin-top: 12px; } .soc-startup-status-dots span { width: 7px; height: 7px; border-radius: 50%; background: #ffd9bd; } .soc-startup-status-dots span.is-active { background: #ff7a00; animation: soc-startup-dot-pulse 1.25s ease-in-out infinite; } .soc-startup-copy { margin-top: 23px; } .soc-startup-title { margin: 0; font-size: 21px; line-height: 1.35; font-weight: 750; letter-spacing: -0.35px; color: #273344; } .soc-startup-message { margin: 7px 0 0; min-height: 20px; font-size: 14px; line-height: 1.4; font-weight: 500; color: #7d8490; letter-spacing: -0.15px; } .soc-startup-progress-wrap { width: calc(100% - 6px); display: flex; align-items: center; gap: 16px; margin-top: 15px; } .soc-startup-progress-track { flex: 1 1 auto; height: 7px; border-radius: 999px; background: #e6e5e9; overflow: hidden; } .soc-startup-progress-bar { width: 0%; height: 100%; border-radius: inherit; background: #fd800a; transition: width 0.2s ease-out; } .soc-startup-progress-track.is-indeterminate .soc-startup-progress-bar { width: 36%; animation: soc-startup-indeterminate 1.15s ease-in-out infinite; } .soc-startup-progress-percent { flex: 0 0 27px; min-width: 27px; font-size: 12px; line-height: 1; font-weight: 800; color: #fd800a; text-align: right; } .soc-startup-stages { width: 100%; min-height: 85px; display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.14fr) 32px minmax(0, 1.12fr); align-items: center; margin-top: 31px; padding: 14px 12px; border: 1px solid #dfe2e7; border-radius: 11px; background: #fff; } .soc-startup-stage { min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; } .soc-startup-stage-icon { position: relative; flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #cbd0d8; border-radius: 50%; color: #a8afb9; background: #fff; box-shadow: inset 0 0 0 4px #f5f6f8; } .soc-startup-stage-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .soc-startup-stage-copy { min-width: 0; display: grid; gap: 4px; } .soc-startup-stage-copy strong { overflow: hidden; font-size: 11px; line-height: 1.25; font-weight: 700; color: #303844; white-space: nowrap; text-overflow: ellipsis; } .soc-startup-stage-copy small { font-size: 11px; line-height: 1.2; font-weight: 700; color: #a7adb6; } .soc-startup-stage-connector { height: 2px; margin: 0 7px; background: radial-gradient(circle, #303844 1px, transparent 1.5px) 0 50% / 7px 2px repeat-x; } .soc-startup-stage.is-completed .soc-startup-stage-icon { border-color: #c9ded3; color: #54a77f; background: #f7fcf9; box-shadow: inset 0 0 0 4px #edf6f1; } .soc-startup-stage.is-completed .soc-startup-stage-copy small { color: #54a77f; } .soc-startup-stage.is-running .soc-startup-stage-icon { border-color: transparent; color: #fd800a; box-shadow: none; } .soc-startup-stage.is-running .soc-startup-stage-icon::before { content: ""; position: absolute; inset: -1px; box-sizing: border-box; border: 1px solid currentColor; border-left-color: transparent; border-radius: inherit; pointer-events: none; animation: soc-startup-stage-spin 1.1s linear infinite; } .soc-startup-stage.is-running .soc-startup-stage-copy small { color: #fd800a; } .soc-startup-stage.is-failed .soc-startup-stage-icon { border-color: #e44e4e; color: #d92f2f; background: #fff7f7; box-shadow: none; } .soc-startup-stage.is-failed .soc-startup-stage-copy small { color: #d92f2f; } .soc-startup-error { width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px solid #f1caca; border-radius: 9px; background: #fff8f8; text-align: left; } .soc-startup-error p { display: grid; gap: 2px; margin: 0; color: #7e2e2e; } .soc-startup-error p strong, .soc-startup-error p span { font-size: 12px; line-height: 1.35; } .soc-startup-error-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; } .soc-startup-error-actions small { color: #8a6a6a; } .soc-startup-error-actions code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .soc-startup-error-actions button { min-height: 30px; padding: 5px 11px; border: 1px solid #d92f2f; border-radius: 7px; background: #d92f2f; color: #fff; font-size: 11px; font-weight: 750; cursor: pointer; } .soc-startup-security { align-self: end; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 20px 0 0; font-size: 12px; line-height: 1.4; font-weight: 500; color: #9ea5af; } .soc-startup-security svg { width: 15px; height: 15px; fill: none; stroke: #9ea5af; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } @keyframes soc-startup-dot-pulse { 0%, 100% { transform: scale(0.9); opacity: 0.72; } 50% { transform: scale(1.16); opacity: 1; } } @keyframes soc-startup-stage-spin { to { transform: rotate(360deg); } } @keyframes soc-startup-indeterminate { 0% { transform: translateX(-115%); } 100% { transform: translateX(320%); } } @media (max-width: 620px) { .soc-startup-overlay { padding: max(16px, env(safe-area-inset-top, 0px)) 14px max(16px, env(safe-area-inset-bottom, 0px)); } .soc-startup-panel { width: 100%; min-height: 0; padding: 18px 18px 17px; transform: none; } .soc-startup-brand { gap: 10px; } .soc-startup-logo { width: 70px; height: 63px; } .soc-startup-wordmark { width: 143px; height: 19px; } .soc-startup-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 12px 7px; } .soc-startup-stage { display: grid; justify-items: center; gap: 7px; text-align: center; } .soc-startup-stage-connector { display: none; } .soc-startup-stage-copy strong { white-space: normal; word-break: keep-all; } .soc-startup-security { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .soc-startup-status-dots span.is-active, .soc-startup-stage.is-running .soc-startup-stage-icon::before, .soc-startup-progress-track.is-indeterminate .soc-startup-progress-bar { animation: none; } } .topbar { position: sticky; top: 0; z-index: 60; min-height: 58px; padding: calc(var(--soc-safe-top) + 10px) 14px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--soc-border); background: linear-gradient(180deg, var(--soc-topbar-bg-1), var(--soc-topbar-bg-2)); } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; } .topbar-left { flex: 1 1 auto; gap: 0; } .topbar-right { flex: 0 1 auto; justify-content: flex-end; overflow: visible; } .topbar-utility-cluster { display: inline-flex; align-items: center; gap: 6px; padding: 0; } .topbar-utility-btn { width: 34px; height: 34px; min-height: 34px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--soc-text); display: inline-flex; align-items: center; justify-content: center; } .topbar-utility-btn:hover, .topbar-utility-btn:focus-visible { outline: none; } .topbar-utility-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } .topbar-utility-icon svg { width: 18px; height: 18px; } .topbar-profile-btn { width: 38px; height: 38px; min-height: 38px; padding: 0; border: 0; border-radius: 999px; background: transparent; display: inline-flex; align-items: center; justify-content: center; } .topbar-profile-btn:hover, .topbar-profile-btn:focus-visible { background: color-mix(in srgb, var(--soc-card-bg) 92%, transparent); outline: none; } .topbar-profile-avatar, .topbar-profile-drawer-avatar { width: 32px; height: 32px; border-radius: 999px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #f7f8fb 0%, #eef2f7 100%); color: #4a5265; border: 1px solid color-mix(in srgb, var(--soc-border) 80%, transparent); } .topbar-profile-avatar img, .topbar-profile-drawer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .topbar-profile-avatar svg, .topbar-profile-drawer-avatar svg { width: 18px; height: 18px; } .topbar-profile-avatar-initial { font-size: 13px; font-weight: 800; line-height: 1; } .topbar h1 { font-size: var(--soc-text-lg); font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-brand-heading { margin: 0; display: inline-flex; align-items: center; min-width: 0; } .topbar-brand-link { border: 0; background: transparent; padding: 0; margin: 0; display: inline-flex; align-items: center; cursor: pointer; } .topbar-brand-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--ui-accent, #ff6b00) 45%, transparent); outline-offset: 4px; border-radius: 8px; } .topbar-current-title { display: inline-flex; align-items: center; min-height: 28px; margin-left: 24px; padding-left: 24px; border-left: 1px solid var(--ui-border); color: var(--ui-text); font-size: 18px; line-height: 24px; font-weight: 900; letter-spacing: 0; white-space: nowrap; } .topbar-brand-wordmark { display: block; height: 22px; width: auto; max-width: min(40vw, 220px); object-fit: contain; } .topbar-brand-wordmark-dark { display: none; } [data-theme="dark"] .topbar-brand-wordmark-light { display: none; } [data-theme="dark"] .topbar-brand-wordmark-dark { display: block; } .session-info { color: var(--soc-muted); font-size: var(--soc-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; } #menuToggleBtn { display: none !important; } .container.ds-page { width: 100%; max-width: none; margin: 0; padding: 14px 12px calc(72px + var(--soc-safe-bottom)); display: grid; gap: var(--soc-space-4); min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; } .container.admin-layout { grid-template-columns: minmax(250px, 280px) minmax(0, 1fr); align-items: start; } /* Global overflow / alignment guardrails */ body, html, #dashboardPanel, #reportPanel, #excelPanel, #notificationPanel, #notificationSettingsPanel, #typeReportsPanel, #reportsHubView, #analyticsView, #reportsView, #adminView, #homeView, #alertsView, #ticketsView, #weeklyView, #peopleView, #myProfileView, #accountPanel, #employeeSection, #peopleCreateSheet { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: hidden; } .view, .scroller { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: hidden; } #dashboardPanel > :is(#homeView, #alertsView, #ticketsView, #weeklyView, #peopleView, #myProfileView, #analyticsView, #adminView, #reportsView) { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: hidden; } body.auth-switching #dashboardPanel, body.auth-switching #reportPanel { visibility: hidden; } #dashboardPanel.is-switching { opacity: 0.01; pointer-events: none; } .soc-app-shell button + button { margin-left: 0 !important; } #dashboardPanel :is( .soc-kpi-grid, .soc-home-grid, .soc-summary-grid, .soc-list-mini, .incident-list, .ticket-list, .soc-grid, .soc-flex, .soc-analytics-kpi-grid, .soc-analytics-trend-grid, .soc-reports-site-multi, .soc-reports-section-toggles, .report-choice-grid, .admin-tab-list ) > * { min-width: 0; margin-left: 0 !important; box-sizing: border-box; } /* Text overflow guardrails */ #dashboardPanel :is( .incident-title, .incident-type, .incident-created-at, .incident-severity, .incident-location, .incident-status, .incident-urgent-badge, .incident-type-badge, .incident-category-badge, .status-badge, .ds-badge, .incident-more-menu-head, .ticket-title, .ticket-urgent-pill, .ticket-status-pill, .ticket-meta > span, .case-timeline-title, .case-status-badge, .case-eci-badge, .case-meta-text, .soc-summary-label, .soc-summary-value, .soc-kpi-label, .soc-kpi-value, .soc-block-value, .chip, .soc-active-filter-chip, .report-choice-label, #reportSummaryText, #reportHeaderSummary, .soc-report-header-left .meta, .notification-feed-type, #menuSheetPanel .admin-tab-btn, #menuSheetPanel .mobile-menu-view-btn, #menuSheetPanel .mobile-menu-view-back, #menuSheetPanel .mobile-nav-action-btn, .topbar h1, .session-info ) { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is( .announcement-mode-btn, .site-filter-btn, .date-filter-btn, .report-tab, .sla-page-btn, .soc-bottom-tab-btn ) { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-app-shell button { overflow: hidden; } .btn-label { display: inline-block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-label-short { display: none; } #dashboardPanel :is( .report-choice-sub, .soc-hero-comment, .soc-insight-item, .ticket-desc, .ticket-meta-line ) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } #dashboardPanel :is( .incident-card-head, .incident-card-badges, .ticket-card-head, .ticket-meta, .case-timeline-meta, .panel-title-row, .soc-block-head, .soc-report-headerbar, .soc-report-header-left, .soc-report-header-actions, .soc-analytics-header, .soc-analytics-header-left, .soc-analytics-header-right, .chip-row, .date-filter-group, #menuSheetPanel .mobile-menu-view-header ) > * { min-width: 0; } /* Spacing compaction guardrails */ .soc-home-view, .soc-alerts-view, .soc-tickets-view, .soc-analytics-view, .soc-reports-view, .soc-admin-view { gap: 10px; } .panel, .panel.ds-card, .ds-card { padding: 14px; } .panel, .panel.ds-card, .ds-card { border-radius: var(--soc-radius-card); border: 1px solid var(--soc-border); background: var(--soc-panel-bg); box-shadow: var(--soc-shadow-soft); padding: 16px; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.16s ease; } .panel:hover, .ds-card:hover { border-color: var(--soc-border-strong); } .ds-card-title, .panel h2 { font-size: var(--soc-text-lg); font-weight: 700; color: var(--soc-text); } .panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--soc-divider); } #dashboardPanel.hidden, #dashboardPanel[hidden], #dashboardPanel[aria-hidden="true"], #dashboardPanel > .panel-title-row.hidden, #dashboardPanel > .panel-title-row[hidden], #dashboardPanel > .panel-title-row[aria-hidden="true"] { display: none !important; } .title-inline { display: inline-flex; align-items: center; gap: 8px; } .panel-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .admin-sub-topbar .title-inline { flex: 1 1 auto; min-width: 0; } .admin-sub-topbar h2, #accountPanelTitle { margin: 0; } .admin-back-btn { flex: 0 0 auto; white-space: nowrap; } body.role-field #dashboardPanel .soc-filterbar, body.role-field #dashboardPanel .date-filter-custom { display: none !important; } body.role-hq .soc-realtime-datebar { gap: 8px; } body.role-hq #realtimeDateDisplayBtn { flex: 1 1 220px; width: auto; } .soc-realtime-date-display.is-full { flex: 1 1 100%; width: 100%; } /* Buttons */ .ds-btn, button, .report-tab, .announcement-mode-btn, .site-filter-btn, .date-filter-btn, .sla-page-btn { width: auto; min-height: 40px; border-radius: 10px; border: 1px solid transparent; padding: 9px 12px; font-size: var(--soc-text-sm); font-weight: 700; transition: border-color 0.15s ease, background-color 0.15s ease, filter 0.15s ease; } .ds-btn-sm, .report-tab.ds-btn-sm, .announcement-mode-btn.ds-btn-sm, .site-filter-btn.ds-btn-sm, .date-filter-btn.ds-btn-sm, .sla-page-btn.ds-btn-sm { min-height: 34px; padding: 6px 10px; font-size: var(--soc-text-xs); } .ds-btn-primary { background: var(--soc-primary); border-color: var(--soc-primary-deep); color: var(--soc-on-primary); } .ds-btn-primary:hover { filter: brightness(1.08); } .ds-btn-secondary, .report-tab, .announcement-mode-btn, .site-filter-btn, .date-filter-btn, .sla-page-btn { background: var(--soc-secondary-bg); border-color: var(--soc-secondary-border); color: var(--soc-secondary-text); } .ds-btn-secondary:hover, .report-tab:hover, .announcement-mode-btn:hover, .site-filter-btn:hover, .date-filter-btn:hover, .sla-page-btn:hover { background: var(--soc-secondary-bg-hover); } .ds-btn-danger, .btn-danger { background: var(--soc-danger); border-color: var(--soc-danger-deep); color: var(--soc-on-danger); } .ds-btn-danger:hover, .btn-danger:hover { filter: brightness(1.08); } .ds-btn-ghost { background: transparent; border-color: var(--soc-ghost-border); color: var(--soc-ghost-text); } .ds-btn-ghost:hover { background: var(--soc-border); } .ds-btn-icon, .icon-btn { width: 36px; min-width: 36px; height: 36px; border-radius: var(--soc-radius-pill); display: inline-flex; align-items: center; justify-content: center; padding: 0; } #refreshBtn.icon-btn { width: 40px; min-width: 40px; height: 40px; border-radius: 999px; background: transparent; border: 1px solid transparent; color: var(--soc-text-sub); display: inline-flex; align-items: center; justify-content: center; } #refreshBtn.icon-btn:hover { background: var(--soc-primary-soft-bg); border-color: var(--soc-border); color: var(--soc-primary); filter: none; } #refreshBtn.icon-btn:active { transform: scale(0.98); } #refreshBtn.icon-btn:focus-visible { box-shadow: 0 0 0 3px var(--soc-focus); } #topbarMyProfileBtn { white-space: nowrap; } #refreshBtn .refresh-icon { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #refreshBtn.is-loading .refresh-icon { animation: socRefreshSpin 1s linear infinite; } @keyframes socRefreshSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Badge */ .ds-badge, .status-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--soc-radius-pill); border: 1px solid transparent; min-height: 24px; padding: 4px 10px; font-size: var(--soc-text-xs); font-weight: 700; } .status-online { background: var(--soc-status-closed-bg); color: var(--soc-status-closed-fg); border-color: var(--soc-status-online-border); } .status-offline { background: var(--soc-severity-high-bg); color: var(--soc-severity-high-fg); border-color: var(--soc-status-offline-border); } /* Navigation */ .admin-tab-list { display: grid; gap: 8px; } .admin-tab-btn, .ds-nav-item { width: 100%; text-align: left; background: var(--soc-nav-item-bg); border: 1px solid var(--soc-border); color: var(--soc-nav-item-text); } .soc-menu-item { position: relative; padding-right: 28px !important; } .soc-menu-item::before { content: attr(data-subtitle); display: block; margin-top: 2px; font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--soc-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-menu-item::after { content: "›"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--soc-text-sub); font-size: 16px; line-height: 1; pointer-events: none; } .admin-tab-btn.active, .ds-nav-item.active, .ds-nav-item.is-active { background: var(--soc-nav-item-active-bg); border-color: var(--soc-nav-item-active-border); } .mobile-nav-actions { margin-top: 12px; display: grid; gap: 8px; } #menuSheetPanel .mobile-nav-actions { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; } #menuSheetPanel .mobile-nav-actions-divider { display: block; width: min(220px, 72%); height: 1px; margin: 6px auto; padding: 0; border: 0; background: var(--soc-divider-strong, var(--soc-divider)); color: transparent; font-size: 0; line-height: 0; user-select: none; pointer-events: none; } body.role-hq #menuSheetPanel .mobile-nav-actions-divider { display: none !important; } .mobile-menu-view { display: none; } .nav-sheet-handle { display: none; } .mobile-menu-pager { position: relative; } .mobile-menu-root-page { display: contents; } .mobile-menu-view strong, .mobile-menu-view-header, .mobile-menu-view-btn, .mobile-menu-view-back { color: var(--soc-nav-item-text); } .mobile-menu-view-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--soc-divider); } .mobile-menu-view-list { display: grid; gap: 8px; margin-top: 4px; } .mobile-menu-view-btn, .mobile-menu-view-back { border: 1px solid var(--soc-border); background: var(--soc-panel-bg); color: var(--soc-text); } .mobile-menu-view-btn.active { background: var(--soc-primary-soft-bg); border-color: var(--soc-primary); color: var(--soc-primary); } .mobile-type-selected-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; } .mobile-type-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--soc-filter-chip-active-border); background: var(--soc-filter-chip-active-bg); color: var(--soc-text-accent-soft); font-size: var(--soc-text-xs); font-weight: 700; } .mobile-excel-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; gap: 8px; } .mobile-excel-config-wrap { display: grid; gap: 10px; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(28px + var(--soc-safe-bottom)); } .mobile-excel-config { display: grid; gap: 10px; align-content: start; min-width: 0; overflow: hidden; background: var(--soc-panel-bg); border: 1px solid var(--soc-border); border-radius: 10px; padding: 10px; } .mobile-excel-download-cta { position: sticky; bottom: 0; z-index: 4; margin-top: 2px; padding-top: 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--soc-panel-bg) 36%); } .mobile-excel-config label { display: grid; gap: 6px; color: var(--soc-nav-item-text); font-size: var(--soc-text-sm); } .mobile-excel-config input[type="month"] { width: 100%; min-height: 38px; max-width: 100%; box-sizing: border-box; position: static; overflow: hidden; } #excelPanel { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } #excelAppleWrap { display: grid; gap: 10px; align-content: start; width: 100%; min-width: 0; overflow: hidden; padding-bottom: 24px; } .excel-download-cta { position: sticky; bottom: 0; z-index: 4; margin-top: 2px; padding-top: 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--soc-panel-bg) 36%); } .excel-download-cta #excelAppleDownloadBtn { width: 100%; } #excelAppleWrap .excel-field { display: grid; gap: 6px; min-width: 0; overflow: hidden; } #excelAppleWrap input[type="month"] { width: 100%; min-height: 40px; max-width: 100%; box-sizing: border-box; position: static; overflow: hidden; } .mobile-menu-view-btn.active { background: var(--soc-primary-soft-bg); border-color: var(--soc-primary); color: var(--soc-primary); } .mobile-excel-download { margin-top: 2px; text-align: center; width: 100%; } #excelAppleDownloadBtn, #mobileExcelDownloadBtn { background: var(--soc-primary); border-color: var(--soc-primary-deep); color: var(--soc-on-primary); } #excelAppleDownloadBtn.is-loading, #mobileExcelDownloadBtn.is-loading { pointer-events: none; } #excelAppleDownloadBtn.is-loading::before, #mobileExcelDownloadBtn.is-loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--soc-on-primary) 40%, transparent); border-top-color: var(--soc-on-primary); vertical-align: -2px; animation: soc-btn-spinner 0.7s linear infinite; } #mobileExcelBackBtn, #mobileExcelAppleBtn, #mobileExcelInternalBtn { background: transparent; border: 1px solid var(--soc-border); color: var(--soc-text); } .mobile-nav-action-btn { width: 100%; border-radius: 9px; border: 1px solid var(--soc-border); background: var(--soc-panel-bg); color: var(--soc-text); min-height: 36px; padding: 8px 10px; font-size: var(--soc-text-xs); } #menuSheetPanel .mobile-nav-action-btn--plain { width: auto; min-height: 24px; height: auto; margin: 0; padding: 2px 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--soc-text); font-size: var(--soc-text-sm); font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; } #menuSheetPanel .mobile-nav-action-btn--plain.soc-menu-item::before, #menuSheetPanel .mobile-nav-action-btn--plain.soc-menu-item::after { display: none !important; content: none !important; } #menuSheetPanel .soc-sidebar-header { display: none; } .nav-backdrop { position: fixed; inset: 0; z-index: 50; background: var(--soc-overlay-soft); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } body.role-hq #menuToggleBtn { display: none !important; } body.role-hq:not(.nav-open) #menuSheetPanel { display: none !important; } body.role-hq .container.admin-layout { grid-template-columns: 1fr; } /* Bottom Tab */ .soc-bottom-tab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--soc-border); background: linear-gradient(180deg, var(--soc-tabbar-bg-1), var(--soc-tabbar-bg-2)); min-height: 56px; height: 56px; padding: 3px 6px 3px; box-shadow: 0 -10px 24px var(--soc-tabbar-shadow-color); } .soc-bottom-tab.hq-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.role-hq:not(.nav-open) #bottomTabNav.soc-bottom-tab, body.role-field:not(.nav-open) #bottomTabNav.soc-bottom-tab { display: grid !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .soc-bottom-tab-btn { min-height: 42px; height: 42px; background: transparent; border: 0; border-radius: 10px; display: grid; align-content: center; justify-items: center; gap: 0; color: var(--soc-tabbar-icon); font-size: 11px; font-weight: 700; line-height: 1.1; } .soc-bottom-tab-btn > span:last-child { font-size: 11px; line-height: 1.15; } .soc-bottom-tab-btn.hidden { display: none !important; } .soc-bottom-tab-icon { font-size: 18px; line-height: 1; } .soc-bottom-tab-icon svg, .report-choice-icon svg { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; } .soc-bottom-tab-icon svg { width: 18px; height: 18px; } .soc-bottom-tab-icon-img { width: 18px; height: 18px; display: block; object-fit: contain; } .soc-bottom-tab-btn.is-active { color: var(--soc-text-accent-soft); background: var(--soc-tabbar-active-bg); } /* Home */ .soc-home-view, .soc-alerts-view, .soc-weekly-view, .soc-people-view, .soc-profile-view { display: grid; gap: 12px; } .soc-home-view { align-content: start; } .soc-home-row { display: grid; gap: 12px; width: 100%; min-width: 0; } .soc-home-row > * { min-width: 0; } .soc-analytics-view, .soc-reports-view, .soc-admin-view, .soc-weekly-view, .soc-people-view, .soc-profile-view { display: grid; gap: 12px; align-content: start; width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; box-sizing: border-box; } .soc-reports-view { grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: hidden; } .soc-analytics-view *, .soc-reports-view *, .soc-admin-view *, .soc-weekly-view *, .soc-people-view *, .soc-profile-view * { box-sizing: border-box; min-width: 0; } .soc-profile-view { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 16px); } .soc-profile-command-stage { display: grid; gap: 14px; } #myProfileView .soc-block:hover, #myProfileView .soc-block:active { transform: none; box-shadow: none; } .soc-profile-hero-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.75fr); align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--soc-border); border-radius: 14px; background: var(--soc-block-bg); box-shadow: none; } .soc-profile-hero-clickable { cursor: pointer; } .soc-profile-hero-clickable:focus-visible { outline: 2px solid var(--soc-primary); outline-offset: 2px; } .soc-profile-hero-main { display: flex; align-items: center; gap: 14px; min-width: 0; } .soc-profile-hero-avatar { width: 68px; height: 68px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: 20px; font-weight: 700; border: 1px solid var(--soc-border); background: var(--soc-card-bg); box-shadow: none; } .soc-profile-hero-avatar svg { display: block; width: 34px; height: 34px; } .soc-profile-hero-avatar.is-glyph { background: #ffffff; border-color: var(--soc-border); color: #98a2b3; font-size: 0; line-height: 1; } .soc-profile-photo-edit-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding-bottom: 8px; } .soc-profile-edit-avatar-preview { width: 64px; height: 64px; } .soc-profile-photo-edit-actions { display: grid; gap: 6px; } .soc-profile-photo-edit-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .soc-profile-hero-content h3 { margin: 0; font-size: clamp(1.2rem, 3vw, 1.55rem); line-height: 1.12; letter-spacing: -0.02em; } .soc-profile-eyebrow, .soc-profile-section-label { margin: 0; color: var(--soc-primary-deep); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; } .soc-profile-hero-aside { display: grid; justify-items: end; gap: 6px; text-align: right; } .soc-profile-identity-meta { display: grid; gap: 4px; } .soc-profile-identity-meta strong { font-size: var(--soc-text-lg); line-height: 1.1; } .soc-profile-identity-label { color: var(--soc-text-sub); font-size: var(--soc-text-xs); font-weight: 600; } .soc-profile-overview { display: grid; gap: 14px; } .soc-profile-top-shell { display: grid; gap: 0; border: 1px solid var(--soc-border); border-radius: 16px; background: var(--soc-block-bg); overflow: visible; } .soc-profile-photo-shell { display: grid; justify-items: center; gap: 10px; } .soc-profile-photo-btn { min-width: 92px; } .soc-profile-hero-content--center { justify-items: center; text-align: center; gap: 8px; } .soc-profile-counter-shell { display: grid; gap: 10px; } .soc-profile-counter-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .soc-profile-counter-item { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 8px; padding: 14px 12px; border: 1px solid var(--soc-border); border-radius: 14px; background: #fff; } .soc-profile-counter-item.is-score { justify-content: space-between; } .soc-profile-counter-button { width: 100%; min-width: 0; border: 0; appearance: none; background: transparent; display: grid; justify-items: center; gap: 6px; padding: 0; color: var(--soc-text); text-align: center; cursor: pointer; } .soc-profile-counter-button strong { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.1; } .soc-profile-counter-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--soc-primary) 42%, transparent); outline-offset: 2px; } .soc-profile-counter-label { color: var(--soc-text-sub); font-size: var(--soc-text-sm); line-height: 1.35; } .soc-profile-counter-meta { margin: 0; color: var(--soc-text-sub); font-size: var(--soc-text-sm); text-align: center; } .soc-profile-info-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .soc-profile-info-item { display: grid; gap: 6px; padding: 14px 12px; border: 1px solid var(--soc-border); border-radius: 14px; background: #fff; } .soc-profile-info-item > span { color: var(--soc-text-sub); font-size: var(--soc-text-xs); font-weight: 600; } .soc-profile-info-item > strong { font-size: var(--soc-text-sm); line-height: 1.45; } .soc-profile-overview-shell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border: 0; border-radius: 0; background: transparent; overflow: visible; } .soc-profile-score { display: grid; gap: 12px; padding: 18px 20px 20px; border: 0; border-top: 1px solid color-mix(in srgb, var(--soc-border) 74%, transparent); border-radius: 0; background: transparent; box-shadow: none; } .soc-profile-score-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: stretch; } .soc-profile-score-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .soc-profile-score-title-wrap { display: grid; gap: 4px; } .soc-profile-score-title-wrap h3 { margin: 0; } .soc-profile-score-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; } .soc-profile-score-head-actions .meta { margin: 0; max-width: 260px; text-align: right; } .soc-profile-score-info-btn { min-width: 30px; width: 30px; height: 30px; padding: 0; border-radius: 50%; font-weight: 700; border-color: color-mix(in srgb, var(--soc-primary) 28%, var(--soc-border)); color: var(--soc-primary-deep); background: #fff; } .soc-profile-score-popover-wrap { position: relative; } .soc-profile-score-hero { width: 100%; border: 1px solid color-mix(in srgb, var(--soc-primary) 22%, var(--soc-border)); border-radius: 14px; background: #fff; display: grid; gap: 12px; min-height: 0; padding: 18px 18px 18px; text-align: left; color: var(--soc-text); box-shadow: none; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; height: 100%; } .soc-profile-score-hero:hover { border-color: color-mix(in srgb, var(--soc-primary) 42%, var(--soc-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--soc-primary) 16%, transparent); } .soc-profile-score-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .soc-profile-score-hero-copy { display: grid; gap: 6px; } .soc-profile-score-label { font-size: var(--soc-text-sm); color: var(--soc-text-sub); } .soc-profile-score-total { font-size: clamp(1.95rem, 4.4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1; color: var(--soc-primary-deep); } .soc-profile-score-rank-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--soc-primary-deep); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .soc-profile-score-gauge { width: 100%; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--soc-border) 56%, transparent); } .soc-profile-score-gauge > span { display: block; width: 0%; height: 100%; border-radius: inherit; transition: width 180ms ease; background: #9aa1ad; } .soc-profile-score-gauge > span.is-low { background: #475467; } .soc-profile-score-gauge > span.is-mid { background: #c2410c; } .soc-profile-score-gauge > span.is-high { background: #b45309; } .soc-profile-score-summary-grid { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid color-mix(in srgb, var(--soc-primary) 20%, var(--soc-border)); border-radius: 14px; background: #fff; overflow: hidden; } .soc-profile-score-summary-item { background: transparent; padding: 14px 16px 15px; display: grid; gap: 4px; } .soc-profile-score-summary-item:nth-child(odd) { border-right: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent); } .soc-profile-score-summary-item:nth-child(n + 3) { border-top: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent); } .soc-profile-score-summary-label { margin: 0; font-size: var(--soc-text-xs); color: var(--soc-text-sub); } .soc-profile-score-summary-item > strong { font-size: clamp(1.1rem, 2vw, 1.25rem); line-height: 1.1; color: var(--soc-text); } .soc-profile-score-breakdown-popover { position: absolute; top: calc(100% + 10px); right: 0; width: min(320px, calc(100vw - 72px)); border: 1px solid color-mix(in srgb, var(--soc-primary) 18%, var(--soc-border)); border-radius: 12px; background: var(--soc-card-bg); box-shadow: var(--soc-shadow-card); padding: 10px 10px 12px; z-index: 16; } .soc-profile-score-breakdown-popover::before { content: ""; position: absolute; top: -6px; right: 9px; width: 12px; height: 12px; border-left: 1px solid color-mix(in srgb, var(--soc-primary) 18%, var(--soc-border)); border-top: 1px solid color-mix(in srgb, var(--soc-primary) 18%, var(--soc-border)); background: var(--soc-card-bg); transform: rotate(45deg); } .soc-profile-score-breakdown-title { margin: 0 0 6px; font-weight: 700; font-size: var(--soc-text-sm); } .soc-profile-score-breakdown-list { display: grid; gap: 6px; } .soc-profile-score-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--soc-text-sm); } .soc-profile-score-breakdown-row > strong { text-align: right; } .soc-profile-score-error { color: #e14141; margin: -4px 0 0; } .soc-profile-record-section, #myProfileAccountSection, #myProfileDetailSection { border-radius: 14px; box-shadow: none; } .soc-profile-record-section { display: grid; gap: 12px; padding: 18px 20px 16px; border: 1px solid var(--soc-border); border-radius: 14px; background: #fff; align-content: start; } .soc-profile-record-section + .soc-profile-record-section { border-top: 0; } .soc-profile-record-head { align-items: start; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .soc-profile-record-head-copy { display: grid; gap: 4px; } .soc-profile-record-head-copy h3 { margin: 0; } .soc-profile-record-head-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; flex-wrap: wrap; } .soc-profile-record-summary { margin: 0; color: var(--soc-text-sub); font-size: var(--soc-text-sm); white-space: nowrap; } .soc-profile-record-list { display: grid; gap: 0; } .soc-profile-record-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent); } .soc-profile-record-row-button { width: 100%; border: 0; appearance: none; background: transparent; cursor: pointer; text-align: left; } .soc-profile-record-row-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--soc-primary) 42%, transparent); outline-offset: 2px; } .soc-profile-record-row:first-child { border-top: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent); } .soc-profile-record-row:hover { background: color-mix(in srgb, var(--soc-primary) 5%, #fff); } .soc-profile-record-row-main { display: grid; gap: 4px; } .soc-profile-record-row-main strong { font-size: var(--soc-text-sm); line-height: 1.45; color: var(--soc-text); } .soc-profile-record-row-main span, .soc-profile-record-row-side span { color: var(--soc-text-sub); font-size: var(--soc-text-xs); line-height: 1.4; } .soc-profile-record-row-side { display: grid; gap: 4px; justify-items: end; text-align: right; } .soc-profile-record-status { color: var(--soc-text); font-weight: 700; } .soc-profile-record-empty { margin: 0; padding: 14px 0 2px; color: var(--soc-text-sub); font-size: var(--soc-text-sm); } .soc-profile-account-strip { display: grid; justify-items: center; gap: 16px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .soc-profile-account-strip .soc-profile-hero-avatar { width: 104px; height: 104px; border-radius: 999px; font-size: 38px; border-color: color-mix(in srgb, var(--soc-primary) 28%, var(--soc-border)); } .soc-profile-account-strip .soc-profile-hero-avatar.is-glyph { border-color: var(--soc-border); } .soc-profile-account-strip .soc-profile-hero-content h3 { font-size: clamp(1.38rem, 2.8vw, 1.76rem); } .soc-profile-account-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .soc-profile-account-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--soc-primary-deep); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; } .soc-profile-account-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--soc-primary) 22%, var(--soc-border)); border-radius: 999px; color: var(--soc-primary-deep); font-size: 12px; font-weight: 700; background: #fff; } .soc-profile-detail-list { width: 100%; min-width: 0; box-sizing: border-box; } .soc-profile-detail-sheet { width: 100%; min-width: 0; box-sizing: border-box; border: 0; border-radius: 0; background: transparent; overflow: hidden; } .soc-profile-detail-sheet-head, .soc-profile-detail-sheet-row { box-sizing: border-box; width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(88px, 0.55fr) minmax(110px, 0.65fr) minmax(146px, 0.8fr); gap: 12px; align-items: center; } .soc-profile-detail-sheet.is-reports .soc-profile-detail-sheet-head, .soc-profile-detail-sheet.is-reports .soc-profile-detail-sheet-row { grid-template-columns: minmax(0, 1.7fr) minmax(78px, 0.48fr) minmax(98px, 0.56fr) minmax(130px, 0.78fr) minmax(92px, 0.56fr) minmax(146px, 0.74fr); } .soc-profile-detail-sheet-head { padding: 0 18px 10px; border-bottom: 0; background: transparent; color: var(--soc-text-sub); font-size: var(--soc-text-sm); font-weight: 700; } .soc-profile-detail-sheet-head > span, .soc-profile-detail-sheet-row > span { min-width: 0; } .soc-profile-detail-sheet-body { width: 100%; min-width: 0; box-sizing: border-box; display: grid; border: 1px solid var(--soc-border); border-radius: 16px; background: #fff; overflow: hidden auto; } .soc-profile-detail-sheet-row { margin: 0; padding: 14px 16px; border: 0; appearance: none; border-top: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent); background: transparent; color: var(--soc-text); text-align: left; } .soc-profile-detail-sheet-row:first-child { border-top: 0; } .soc-profile-detail-sheet-row:not(.is-static) { cursor: pointer; } .soc-profile-detail-sheet-row:not(.is-static):hover { background: color-mix(in srgb, var(--soc-primary) 5%, #fff); } .soc-profile-detail-sheet-row:not(.is-static):focus-visible { outline: 2px solid color-mix(in srgb, var(--soc-primary) 42%, transparent); outline-offset: -2px; } .soc-profile-detail-sheet-title { display: block; min-width: 0; font-weight: 700; line-height: 1.45; } .soc-profile-detail-sheet-row > span:not(.soc-profile-detail-sheet-title) { color: var(--soc-text-sub); font-size: var(--soc-text-sm); } .soc-profile-activity-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-block: 2px 4px; } .soc-profile-activity-item { display: grid; gap: 6px; align-content: start; border: 0; border-top: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent); background: transparent; padding: 12px 0; color: var(--soc-text); } .soc-profile-tile-btn { width: 100%; text-align: left; cursor: pointer; } .soc-profile-tile-btn:hover { border-top-color: color-mix(in srgb, var(--soc-primary) 58%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--soc-primary) 8%, transparent), transparent 82%); } .soc-profile-tile-label { margin: 0; font-size: var(--soc-text-xs); color: var(--soc-muted); } .soc-profile-tile-value { margin: 0; font-size: var(--soc-text-md); color: var(--soc-text); } #myProfileAccountSection { display: grid; gap: 16px; padding: 18px 20px 20px; } .soc-profile-detail-overlay { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; width: auto; max-width: none; height: auto; max-height: none; margin: 0; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(6px); overflow: auto; contain: none; } .soc-profile-detail-overlay-panel { min-width: 0; width: min(960px, calc(100vw - 48px)); max-width: 960px; height: auto; min-height: 0; max-height: min(720px, calc(100dvh - 64px)); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding: 18px 18px 20px; border-radius: 18px; background: var(--soc-card-bg); box-shadow: var(--soc-shadow-card); overflow: hidden; } #myProfileAccountForm { min-height: 0; padding-bottom: 0; } #myProfileAccountForm textarea { min-height: 132px; resize: vertical; } .soc-profile-account-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .soc-profile-edit-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; } .soc-profile-detail-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .soc-profile-detail-list { overflow: auto; min-height: 0; max-height: calc(min(720px, 100dvh - 64px) - 82px); padding-right: 2px; } #myProfileDetailTitle { margin: 0; font-size: clamp(1.18rem, 1.8vw, 1.36rem); letter-spacing: -0.02em; line-height: 1.12; } #myProfileAccountSection > .soc-block-head > h3 { margin: 0; font-size: clamp(1.48rem, 2.6vw, 1.92rem); letter-spacing: -0.02em; line-height: 1.08; } .soc-profile-back-btn { min-width: 38px; padding-inline: 0; font-size: 20px; line-height: 1; } @media (max-width: 820px) { .soc-profile-counter-row, .soc-profile-info-list, .soc-profile-overview-shell { grid-template-columns: 1fr; } .soc-profile-detail-overlay { padding-inline: 12px; } .soc-profile-detail-overlay-panel { padding: 16px 14px 18px; } } .soc-profile-account-workspace { display: grid; gap: 16px; } .soc-profile-account-editor-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr); gap: 16px; align-items: start; } .soc-profile-account-panel, .soc-profile-account-form { border: 1px solid var(--soc-border); border-radius: 16px; background: #fff; overflow: hidden; } .soc-profile-account-card { display: grid; gap: 0; } .soc-profile-account-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 20px; border-bottom: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent); } .soc-profile-account-card-hero { display: flex; gap: 16px; align-items: flex-start; min-width: 0; } .soc-profile-account-card-copy { display: grid; gap: 6px; min-width: 0; } .soc-profile-account-card-copy h3 { margin: 0; } .soc-profile-account-card-copy .meta { margin: 0; } .soc-profile-account-panel.is-editing .soc-profile-account-card-head { padding-bottom: 16px; border-bottom: 0; } .soc-profile-account-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .soc-profile-account-image-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .soc-profile-account-form { display: grid; gap: 0; padding: 18px 20px 20px; } .soc-profile-account-form-section { display: grid; gap: 14px; } .soc-profile-account-subform { padding-top: 18px; } .soc-profile-account-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .soc-profile-account-section-head h4 { margin: 0; } .soc-profile-account-section-head .meta { margin: 6px 0 0; } .soc-profile-account-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .soc-profile-account-read-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .soc-profile-account-read-item { display: grid; gap: 5px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent); } .soc-profile-account-read-item:last-child, .soc-profile-account-read-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; } .soc-profile-account-read-item span { color: var(--soc-text-sub); font-size: var(--soc-text-xs); font-weight: 600; } .soc-profile-account-read-item strong { font-size: var(--soc-text-md); line-height: 1.35; color: var(--soc-text); } .soc-profile-account-field-grid.is-password-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .soc-profile-account-field-grid.is-withdraw-grid { grid-template-columns: minmax(0, 1fr); } .soc-profile-account-field { display: grid; gap: 7px; min-width: 0; } .soc-profile-account-field.is-wide { grid-column: 1 / -1; } .soc-profile-account-field span { color: var(--soc-text-sub); font-size: var(--soc-text-sm); font-weight: 600; } .soc-profile-account-field input, .soc-profile-account-field textarea { width: 100%; background: #fbfcfd; border-color: color-mix(in srgb, var(--soc-border) 78%, #cbd5e1); } .soc-profile-withdraw-note { margin: 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--soc-danger) 24%, var(--soc-border)); border-radius: 12px; background: color-mix(in srgb, var(--soc-danger) 6%, #fff); color: color-mix(in srgb, var(--soc-danger) 82%, #5b1b1b); font-size: var(--soc-text-sm); line-height: 1.5; } .soc-profile-account-security-panel { align-self: start; } .soc-profile-security-stack { display: grid; gap: 12px; } .soc-profile-security-action { display: grid; gap: 14px; padding: 16px; border: 1px solid color-mix(in srgb, var(--soc-border) 80%, #e2e8f0); border-radius: 14px; background: #fbfcfd; } .soc-profile-security-action.is-danger { border-color: color-mix(in srgb, var(--soc-danger) 20%, var(--soc-border)); background: color-mix(in srgb, var(--soc-danger) 4%, #fff); } .soc-profile-security-copy { display: grid; gap: 6px; } .soc-profile-security-copy strong { font-size: var(--soc-text-md); line-height: 1.25; } .soc-profile-security-copy p { margin: 0; color: var(--soc-text-sub); font-size: var(--soc-text-sm); line-height: 1.55; } .soc-profile-modal-panel { width: min(560px, calc(100vw - 32px)); } .soc-profile-modal-panel .modal-head { align-items: flex-start; } .soc-profile-modal-panel .modal-head .desc { margin: 6px 0 0; color: var(--soc-text-sub); } .soc-profile-password-panel { width: min(594px, calc(100vw - 32px)); } .modal-panel.soc-profile-password-panel { width: min(594px, calc(100vw - 32px)); max-width: 594px; } .soc-profile-password-panel .modal-head { align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--soc-border); } .soc-profile-password-title { display: flex; align-items: flex-start; gap: 12px; } .soc-profile-password-heading-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: transparent; color: var(--soc-text, #162033); } .soc-profile-password-heading-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .soc-profile-password-title h2 { margin: 0; } .soc-profile-password-title .desc { margin-top: 6px; } .soc-profile-password-panel .modal-close { min-width: 32px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--soc-text, #162033); } .soc-profile-password-panel .modal-close:hover { background: #eef1f5; } .soc-profile-password-panel .modal-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; } .soc-profile-password-form { display: grid; gap: 14px; } .soc-profile-password-field { display: grid; gap: 7px; } .soc-profile-password-field > span { color: var(--soc-text-sub); font-size: var(--soc-text-sm); font-weight: 600; } .soc-profile-password-input { position: relative; } .soc-profile-password-input input { width: 100%; min-height: 42px; padding-right: 46px; background: #fbfcfd; } .soc-profile-password-toggle { position: absolute; top: 50%; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--soc-text-sub); transform: translateY(-50%); cursor: pointer; } .soc-profile-password-toggle:hover, .soc-profile-password-toggle:focus-visible { background: #eef1f5; color: var(--soc-text); } .soc-profile-password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .soc-profile-password-toggle svg.is-hidden, .soc-profile-password-toggle svg.is-visible { display: none; } .soc-profile-password-toggle:not(.is-visible) svg.is-hidden, .soc-profile-password-toggle.is-visible svg.is-visible { display: block; } .soc-profile-password-strength { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 10px; margin-top: -2px; } .soc-profile-password-strength-segment { display: block; height: 4px; border-radius: 999px; background: #dfe4ec; } .soc-profile-password-strength-segment.is-active { background: #ff5b18; } .soc-profile-password-strength-label { color: #ff5b18; font-size: var(--soc-text-sm); font-weight: 700; white-space: nowrap; } .soc-profile-password-criteria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 24px; margin-top: -2px; } .soc-profile-password-criterion { display: inline-flex; align-items: center; gap: 8px; color: var(--soc-text-sub); font-size: var(--soc-text-sm); } .soc-profile-password-criterion-icon { display: grid; place-items: center; flex: 0 0 17px; width: 17px; height: 17px; border: 1.7px solid #718096; border-radius: 50%; color: #2fb344; } .soc-profile-password-criterion.is-met { color: var(--soc-text); } .soc-profile-password-criterion.is-met .soc-profile-password-criterion-icon { border-color: #2fb344; } .soc-profile-password-criterion.is-met .soc-profile-password-criterion-icon::after { content: "✓"; font-size: 12px; font-weight: 800; line-height: 1; } .soc-profile-password-confirm-status { display: flex; align-items: center; gap: 8px; margin: -4px 0 0; color: #2fb344; font-size: var(--soc-text-sm); font-weight: 600; } .soc-profile-password-confirm-status.is-hidden { display: none; } .soc-profile-password-note { display: flex; align-items: flex-start; gap: 8px; margin: -1px 0 0; padding: 11px 12px; border-radius: 8px; background: #f1f3f7; color: var(--soc-text-sub); font-size: var(--soc-text-xs); line-height: 1.5; } .soc-profile-password-note svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .soc-profile-password-actions { display: flex; justify-content: flex-end; gap: 12px; margin: 2px -24px -24px; padding: 16px 24px; border-top: 1px solid var(--soc-border); } .soc-profile-password-actions .ds-btn-primary { border-color: #ff5b18; background: #ff5b18; color: #fff; } .soc-profile-password-actions .ds-btn-primary:disabled { opacity: .65; cursor: wait; } @media (max-width: 640px) { .soc-profile-password-panel { max-height: calc(100vh - 24px); overflow-y: auto; } .soc-profile-password-criteria { gap: 10px 14px; } .soc-profile-password-actions { margin-right: -18px; margin-bottom: -18px; margin-left: -18px; padding-right: 18px; padding-left: 18px; } } .soc-profile-modal-panel-danger .modal-head h2 { color: color-mix(in srgb, var(--soc-danger) 82%, var(--soc-text)); } .soc-profile-modal-form { display: grid; gap: 16px; } .soc-profile-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .soc-profile-edit-modal-panel { max-height: min(760px, calc(100vh - 32px)); overflow: auto; } .soc-profile-modal-grid select { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--soc-border) 78%, #cbd5e1); border-radius: 10px; background: #fbfcfd; color: var(--soc-text); font: inherit; } .soc-profile-edit-helper { margin: -4px 0 0; color: var(--soc-text-sub); font-size: var(--soc-text-xs); } .soc-profile-notification-toggle { display: flex; align-items: center; gap: 10px; padding-top: 2px; cursor: pointer; } .soc-profile-notification-toggle-control { position: relative; display: inline-flex; } .soc-profile-notification-toggle-control input { position: absolute; opacity: 0; pointer-events: none; } .soc-profile-notification-toggle-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1; transition: background .18s ease; } .soc-profile-notification-toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(15 23 42 / 22%); transition: transform .18s ease; } .soc-profile-notification-toggle-control input:checked + .soc-profile-notification-toggle-track { background: var(--soc-primary, #ff5b18); } .soc-profile-notification-toggle-control input:checked + .soc-profile-notification-toggle-track::after { transform: translateX(16px); } .soc-profile-notification-toggle-copy { display: grid; gap: 2px; } .soc-profile-notification-toggle-copy strong { font-size: var(--soc-text-sm); } .soc-profile-notification-toggle-copy small { color: var(--soc-text-sub); } @media (max-width: 1100px) { .soc-profile-overview-shell, .soc-profile-score-main, .soc-profile-account-card-head, .soc-profile-account-field-grid.is-password-grid, .soc-profile-account-editor-grid { grid-template-columns: 1fr; } .soc-profile-score-head { align-items: start; flex-direction: column; } .soc-profile-score-head-actions { width: 100%; justify-content: space-between; } .soc-profile-account-summary-grid { grid-template-columns: 1fr; } .soc-profile-account-summary-item + .soc-profile-account-summary-item { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent); } } @media (max-width: 720px) { .soc-profile-record-row, .soc-profile-account-field-grid, .soc-profile-modal-grid { grid-template-columns: 1fr; } .soc-profile-record-row-side { justify-items: start; text-align: left; } .soc-profile-account-card-head, .soc-profile-account-form, #myProfileAccountSection, .soc-profile-record-section, .soc-profile-detail-sheet-head { padding-inline: 16px; } .soc-profile-account-card-actions, .soc-profile-edit-actions { justify-content: stretch; } } .soc-kpi-grid.soc-kpi-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .soc-weekly-view { grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; } .soc-weekly-headerbar { top: 0; display: grid; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--soc-divider, var(--soc-border)); } .soc-weekly-header-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .soc-weekly-header-copy { display: grid; gap: 6px; min-width: 0; } .soc-weekly-eyebrow { margin: 0; color: #c2410c; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; } .soc-weekly-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; flex-shrink: 0; } .soc-weekly-header-meta { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; } #weeklyBuilderSummaryText { margin: 0; } .soc-weekly-workspace-shell { min-height: 0; display: grid; grid-template-columns: minmax(280px, 336px) minmax(0, 1fr); gap: 16px; align-items: start; } .soc-weekly-setup-column, .soc-weekly-main-column { min-width: 0; min-height: 0; display: grid; gap: 16px; align-content: start; } .soc-weekly-main-column { overflow: hidden; } .soc-weekly-control-card, .soc-weekly-review-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--soc-border); border-radius: 14px; background: var(--soc-card-bg); box-shadow: var(--soc-shadow-soft); } .soc-weekly-control-card-head, .soc-weekly-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .soc-weekly-control-card-head h4, .soc-weekly-review-head h4 { margin: 0; color: var(--soc-text); font-size: 18px; line-height: 1.35; } .soc-weekly-flow-list { display: grid; gap: 10px; } .soc-weekly-flow-item { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--soc-border); border-radius: 12px; background: color-mix(in srgb, var(--soc-card-bg) 86%, var(--soc-panel-bg)); color: var(--soc-text); text-align: left; transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease; } .soc-weekly-flow-item:hover, .soc-weekly-flow-item:focus-visible { border-color: color-mix(in srgb, var(--soc-primary) 48%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary) 10%, var(--soc-card-bg)); transform: translateY(-1px); outline: none; } .soc-weekly-flow-item.is-active { border-color: color-mix(in srgb, var(--soc-primary) 58%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary) 14%, var(--soc-card-bg)); } .soc-weekly-flow-item.is-static { cursor: default; } .soc-weekly-flow-item.is-static:hover, .soc-weekly-flow-item.is-static:focus-visible { transform: none; border-color: var(--soc-border); background: color-mix(in srgb, var(--soc-card-bg) 86%, var(--soc-panel-bg)); } .soc-weekly-flow-index { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in srgb, var(--soc-primary) 14%, var(--soc-card-bg)); color: #c2410c; font-size: 13px; font-weight: 800; } .soc-weekly-flow-copy { display: grid; gap: 3px; min-width: 0; } .soc-weekly-flow-copy strong { min-width: 0; color: var(--soc-text); font-size: 14px; line-height: 1.3; } .soc-weekly-flow-copy small { min-width: 0; color: var(--soc-text-sub); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; } .soc-weekly-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .soc-weekly-config-item { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--soc-border); border-radius: 12px; background: color-mix(in srgb, var(--soc-panel-bg) 88%, var(--soc-card-bg)); } .soc-weekly-config-item > span { color: var(--soc-text-sub); font-size: 12px; font-weight: 600; line-height: 1.3; } .soc-weekly-config-item > strong { min-width: 0; color: var(--soc-text); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; } #weeklyPreviewScroller { min-height: 0; } .soc-weekly-preview-viewport { display: grid; gap: 12px; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } .soc-weekly-section-card { border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-card-bg); box-shadow: var(--soc-shadow-soft); padding: 12px; display: grid; gap: 8px; } .soc-weekly-section-card[data-weekly-section="heatmap"] { min-height: 360px; } .soc-weekly-section-card[data-weekly-section="tickets"] { align-content: start; } .soc-weekly-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .soc-weekly-section-head h4 { margin: 0; padding-left: 8px; border-left: 2px solid var(--soc-primary); font-size: var(--soc-text-sm); } .soc-weekly-summary-preline { margin: 0; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; } .soc-weekly-ticket-total { font-size: var(--soc-text-base); font-weight: 800; color: var(--soc-primary); } .soc-weekly-ticket-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .soc-weekly-ticket-summary-card { border: 1px solid var(--soc-border); border-radius: 12px; background: color-mix(in srgb, var(--soc-card-bg) 84%, var(--soc-panel-bg)); padding: 10px 12px; display: grid; gap: 4px; } .soc-weekly-ticket-summary-label { font-size: var(--soc-text-xs); color: var(--soc-text-sub); } .soc-weekly-ticket-summary-card strong { font-size: var(--soc-text-lg); font-weight: 800; color: var(--soc-text); } .soc-weekly-ticket-list-block { display: grid; gap: 8px; } .soc-weekly-ticket-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .soc-weekly-ticket-list { display: grid; gap: 8px; } .soc-weekly-ticket-item { border: 1px solid var(--soc-border); border-radius: 12px; background: color-mix(in srgb, var(--soc-panel-bg) 86%, var(--soc-card-bg)); padding: 10px 12px; display: grid; gap: 6px; } .soc-weekly-ticket-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .soc-weekly-ticket-item-title { font-size: var(--soc-text-sm); font-weight: 800; color: var(--soc-text); } .soc-weekly-ticket-item-meta { font-size: var(--soc-text-xs); color: var(--soc-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-weekly-ticket-empty { margin: 0; } .soc-weekly-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .soc-weekly-review-field { display: grid; gap: 6px; min-width: 0; } .soc-weekly-review-field-full { grid-column: 1 / -1; } .soc-weekly-review-field > span { color: var(--soc-text-sub); font-size: 12px; font-weight: 700; line-height: 1.3; } .soc-weekly-review-field textarea { width: 100%; min-width: 0; min-height: 136px; resize: vertical; } .soc-weekly-action-list { display: grid; gap: 8px; } .soc-weekly-kpi-row { display: grid; gap: 4px; } .soc-weekly-kpi-main { color: var(--soc-text); } .soc-weekly-kpi-wow { font-size: var(--soc-text-xs); font-weight: 700; } .soc-weekly-kpi-wow.is-up { color: #16a34a; } .soc-weekly-kpi-wow.is-down { color: #dc2626; } .soc-weekly-kpi-wow.is-flat { color: var(--soc-text-sub); } .soc-weekly-kpi-wow-footnote { margin: 2px 2px 0; font-size: var(--soc-text-xs); color: var(--soc-text-sub); } #weeklyPreviewHeatmap { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 8px; min-height: 0; } .soc-weekly-heatmap-scroll { width: 100%; max-width: 100%; min-height: 230px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .soc-weekly-heatmap-table { border-collapse: collapse; width: max-content; min-width: 700px; border: 1px solid var(--soc-divider-strong); background: var(--soc-card-bg); } .soc-weekly-heatmap-table th, .soc-weekly-heatmap-table td { border: 1px solid var(--soc-divider-strong); min-width: 24px; height: 22px; text-align: center; font-size: 10px; font-weight: 600; padding: 0; } .soc-weekly-heatmap-table th { background: color-mix(in srgb, var(--soc-panel-bg) 92%, var(--soc-card-bg)); color: var(--soc-text-sub); } .soc-weekly-heatmap-table tbody th { min-width: 38px; } .soc-weekly-heatmap-cell { background: color-mix(in srgb, var(--soc-border) 64%, transparent); } .soc-weekly-heatmap-cell.i1 { background: color-mix(in srgb, var(--soc-primary) 16%, transparent); } .soc-weekly-heatmap-cell.i2 { background: color-mix(in srgb, var(--soc-primary) 28%, transparent); } .soc-weekly-heatmap-cell.i3 { background: color-mix(in srgb, var(--soc-primary) 40%, transparent); } .soc-weekly-heatmap-cell.i4 { background: color-mix(in srgb, var(--soc-primary) 56%, transparent); } .soc-weekly-heatmap-cell.i5 { background: color-mix(in srgb, var(--soc-primary) 72%, var(--soc-accent) 28%); } @keyframes socWeeklyHourFocusPulse { 0% { box-shadow: inset 0 0 0 0 color-mix(in srgb, var(--soc-primary) 40%, transparent); } 60% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--soc-primary) 78%, var(--soc-accent) 22%); } 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 60%, transparent); } } .soc-weekly-heatmap-table [data-weekly-hour].is-hour-focus { position: relative; outline: 2px solid color-mix(in srgb, var(--soc-primary) 78%, var(--soc-accent) 22%); outline-offset: -2px; animation: socWeeklyHourFocusPulse 1.4s ease-out 1; } .soc-weekly-heatmap-table th[data-weekly-hour].is-hour-focus { background: color-mix(in srgb, var(--soc-primary) 22%, var(--soc-card-bg)); color: var(--soc-text); } .soc-weekly-heatmap-table [data-weekly-day].is-peak-day, .soc-weekly-heatmap-table [data-weekly-hour].is-peak-hour { transition: background-color 160ms ease, box-shadow 160ms ease, outline-color 160ms ease; } .soc-weekly-heatmap-table.is-weekly-peak-blink-on [data-weekly-day].is-peak-day { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-accent) 62%, var(--soc-primary) 38%); background: color-mix(in srgb, var(--soc-primary) 24%, transparent); } .soc-weekly-heatmap-table.is-weekly-peak-blink-on [data-weekly-hour].is-peak-hour { outline: 2px solid color-mix(in srgb, var(--soc-accent) 58%, var(--soc-primary) 42%); outline-offset: -2px; } .soc-weekly-heatmap-table.is-weekly-peak-blink-on th[data-weekly-day].is-peak-day, .soc-weekly-heatmap-table.is-weekly-peak-blink-on th[data-weekly-hour].is-peak-hour { color: var(--soc-text); background: color-mix(in srgb, var(--soc-primary) 22%, var(--soc-card-bg)); } .soc-weekly-heatmap-peak { font-size: var(--soc-text-xs); color: var(--soc-text-sub); } .soc-weekly-footer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .soc-weekly-builder-scope-card { border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); padding: 10px; display: flex; align-items: center; justify-content: space-between; min-height: 42px; } .soc-weekly-builder-scope-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; } .soc-weekly-builder-scope-option, .soc-weekly-builder-section-option { display: inline-flex; align-items: center; gap: 8px; color: var(--soc-text); font-size: var(--soc-text-sm); } .soc-weekly-builder-scope-option input, .soc-weekly-builder-section-option input { margin: 0; } .soc-weekly-builder-site-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .soc-weekly-builder-site-options .soc-site-chip-btn { width: 100%; min-width: 0; } .soc-weekly-builder-section-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .soc-weekly-builder-panel { min-height: min(65dvh, 680px); height: min(70dvh, 820px); max-height: 84dvh; } #weeklyBuilderSheet { z-index: 360; background: transparent; pointer-events: none; } #weeklyBuilderSheet.open { pointer-events: none; } #weeklyBuilderSheet .soc-bottom-sheet-panel { position: relative; z-index: 1; pointer-events: auto; } #weeklyBuilderBackdrop { z-index: 359; } #weeklyBuilderSheet .soc-report-builder-stepper { position: relative; z-index: 2; pointer-events: auto; } #weeklyBuilderSheet .soc-report-builder-step-tab { pointer-events: auto; } #weeklyBuilderSheet .soc-report-builder-steps { position: relative; z-index: 1; } html.weekly-builder-open, body.weekly-builder-open { overflow: hidden !important; overscroll-behavior: none; } .soc-briefing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #homeOpenWeeklyBtn { margin-top: 5px; } .soc-weekly-template-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 10px; } .soc-weekly-action-item { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-bottom: 8px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); padding: 8px; } .soc-weekly-action-item input, .soc-weekly-action-item select { width: 100%; min-width: 0; } .soc-weekly-action-check { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border: 1px solid var(--soc-border); border-radius: 8px; padding: 0 8px; background: var(--soc-surface-overlay-11); white-space: nowrap; } .soc-weekly-action-check input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; } #weeklyWeekSummary { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } .soc-weekly-site-section { display: grid; gap: 8px; border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-panel-bg); padding: 10px; } .soc-weekly-site-list { display: grid; gap: 8px; } .soc-weekly-site-card { display: grid; gap: 7px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); padding: 10px; } .soc-weekly-site-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .soc-weekly-status-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; min-height: 26px; border-radius: 999px; padding: 0 10px; font-size: 12px; font-weight: 700; line-height: 1; border: 1px solid var(--soc-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-weekly-status-chip.is-submitted { color: var(--soc-success); background: color-mix(in srgb, var(--soc-success) 14%, transparent); border-color: color-mix(in srgb, var(--soc-success) 35%, var(--soc-border)); } .soc-weekly-status-chip.is-draft { color: var(--soc-primary); background: var(--soc-primary-soft-bg); border-color: color-mix(in srgb, var(--soc-primary) 38%, var(--soc-border)); } .soc-weekly-status-chip.is-not-started { color: var(--soc-text-sub); background: var(--soc-surface-overlay-11); border-color: var(--soc-border); } .soc-weekly-site-top-title { margin: 0; font-size: 12px; color: var(--soc-text-sub); } .soc-weekly-site-top-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; } .soc-weekly-site-top-btn { width: 100%; text-align: left; min-height: 34px; border-radius: 8px; border: 1px solid var(--soc-border); background: var(--soc-surface-overlay-11); color: var(--soc-text); padding: 6px 10px; font-size: 12px; font-weight: 600; } .soc-weekly-site-top-btn:hover { border-color: color-mix(in srgb, var(--soc-primary) 45%, var(--soc-border)); background: var(--soc-primary-soft-bg); color: var(--soc-primary); } .soc-analytics-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; border: 1px solid var(--soc-border); border-radius: var(--soc-radius-card); background: var(--soc-panel-bg); padding: 12px; box-shadow: var(--soc-shadow-soft); } .soc-analytics-header-left h3 { margin: 0; font-size: var(--soc-text-lg); } .soc-analytics-header-left .meta { margin-top: 4px; } .soc-analytics-header-right { display: grid; gap: 8px; justify-items: end; } .soc-analytics-range-quick { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .soc-analytics-range-quick .ds-btn.active { background: var(--soc-primary-soft-bg); color: var(--soc-primary); border-color: var(--soc-primary); } .soc-analytics-custom-range { display: inline-flex; align-items: center; gap: 6px; } .soc-analytics-custom-range input[type="date"] { min-height: 34px; } .soc-analytics-site-filter { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 320px; min-width: 0; flex-wrap: nowrap; } .soc-analytics-site-filter label { font-size: var(--soc-text-xs); color: var(--soc-text-sub); flex: 0 0 auto; line-height: 1.2; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; } .soc-analytics-site-filter select { flex: 1 1 auto; min-width: 0; max-width: 100%; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; } .soc-analytics-site-filter button { white-space: nowrap; word-break: keep-all; overflow-wrap: normal; } .soc-analytics-site-filter .soc-analytics-site-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-analytics-state { border: 1px solid var(--soc-border); border-radius: var(--soc-radius-card); background: var(--soc-panel-bg); padding: 16px; display: grid; gap: 10px; } .soc-analytics-skeleton { border-radius: 12px; min-height: 68px; background: linear-gradient( 90deg, color-mix(in srgb, var(--soc-border) 55%, transparent) 0%, color-mix(in srgb, var(--soc-border) 20%, transparent) 48%, color-mix(in srgb, var(--soc-border) 55%, transparent) 100% ); background-size: 220% 100%; animation: skeleton-wave 1.1s ease infinite; } @keyframes skeleton-wave { from { background-position: 100% 0; } to { background-position: 0 0; } } @keyframes soc-btn-spinner { to { transform: rotate(360deg); } } .soc-analytics-content { display: grid; gap: 12px; width: 100%; max-width: 100%; min-width: 0; } .soc-analytics-hero { border: 1px solid var(--soc-border); border-radius: var(--soc-radius-card); background: var(--soc-panel-bg); box-shadow: var(--soc-shadow-soft); padding: 12px; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; position: relative; width: 100%; max-width: 100%; min-width: 0; } .risk-overview-card { grid-template-columns: 180px minmax(0, 1fr); grid-template-areas: "toolbar toolbar" "gauge meta" "title title"; row-gap: 10px; } .soc-risk-overview-toolbar { grid-area: toolbar; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; } .soc-risk-gauge-wrap { grid-area: gauge; position: relative; width: 160px; height: 160px; margin: 0 auto; } .soc-risk-gauge { width: 160px; height: 160px; transform: rotate(-90deg); overflow: visible; } .soc-risk-gauge-track { fill: none; stroke: color-mix(in srgb, var(--soc-border) 70%, transparent); stroke-width: 10; vector-effect: non-scaling-stroke; } .soc-risk-gauge-arc { fill: none; stroke: var(--soc-primary); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.28s ease, stroke 0.2s ease; vector-effect: non-scaling-stroke; } .soc-risk-gauge-value-wrap { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; justify-items: center; gap: 4px; color: var(--soc-text); text-align: center; padding: 22px; } .soc-risk-gauge-value-wrap strong { font-size: 30px; line-height: 1; } .soc-risk-gauge-value-wrap span { font-size: var(--soc-text-xs); color: var(--soc-text-sub); } .soc-risk-gauge-value-wrap .soc-risk-grade { min-height: 24px; padding: 3px 10px; font-size: 11px; } .soc-analytics-hero-meta { grid-area: meta; display: grid; gap: 8px; min-width: 0; padding-right: 0; } .soc-analytics-hero-head { display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-between; gap: 10px; min-width: 0; } .soc-analytics-hero-head h4 { margin: 0; font-size: var(--soc-text-lg); white-space: nowrap; } .soc-risk-overview-title { grid-area: title; width: 100%; text-align: center; margin: 0; font-size: var(--soc-text-lg); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-risk-overview-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; min-width: fit-content; } .soc-risk-info-trigger, .risk-info-btn { position: static; z-index: 1; transform: none; width: 28px; height: 28px; min-width: 28px; padding: 0; border-radius: 999px; border-color: color-mix(in srgb, var(--soc-primary) 34%, var(--soc-border)); color: color-mix(in srgb, var(--soc-primary) 85%, var(--soc-text-sub)); background: color-mix(in srgb, var(--soc-primary-soft-bg) 58%, transparent); opacity: 0.85; font-weight: 800; font-size: 16px; line-height: 1; white-space: nowrap; flex: 0 0 auto; transition: transform 0.16s ease, box-shadow 0.16s ease; } .soc-risk-info-trigger:hover, .soc-risk-info-trigger:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--soc-primary) 24%, transparent); } .soc-risk-info-popover { position: absolute; left: 0; top: 0; right: auto; width: min(288px, calc(100vw - 24px)); max-width: min(288px, calc(100vw - 24px)); border-radius: 14px; border: 1px solid color-mix(in srgb, var(--soc-primary) 16%, var(--soc-border)); background: var(--soc-card-bg); box-shadow: 0 18px 40px color-mix(in srgb, var(--soc-shadow) 46%, transparent); padding: 12px 14px 14px; display: grid; gap: 10px; z-index: 80; --soc-risk-popover-arrow-left: 28px; } .soc-risk-info-popover::before { content: ""; position: absolute; left: var(--soc-risk-popover-arrow-left); width: 14px; height: 14px; border-left: 1px solid color-mix(in srgb, var(--soc-primary) 16%, var(--soc-border)); border-top: 1px solid color-mix(in srgb, var(--soc-primary) 16%, var(--soc-border)); background: var(--soc-card-bg); transform: translateX(-50%) rotate(45deg); pointer-events: none; } .soc-risk-overview-toolbar .soc-risk-grade, .soc-risk-overview-toolbar .ds-btn { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; min-width: fit-content; flex: 0 0 auto; } .soc-risk-info-popover h5 { margin: 0; font-size: 12px; line-height: 16px; font-weight: 800; color: var(--soc-text); } .soc-risk-info-popover p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--soc-text-sub); word-break: keep-all; overflow-wrap: break-word; } .soc-risk-level-criteria { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--soc-primary) 10%, var(--soc-border)); } .soc-risk-info-actions { display: flex; justify-content: flex-end; padding-top: 2px; } .soc-risk-info-popover[data-placement="bottom"]::before { top: -8px; } .soc-risk-info-popover[data-placement="top"]::before { bottom: -8px; transform: translateX(-50%) rotate(225deg); } @media (max-width: 768px) { .soc-risk-info-popover { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom) + 12px); width: auto; max-height: 48dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 100; } .soc-risk-info-popover::before { display: none; } } .soc-risk-grade { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 4px 11px; border-radius: var(--soc-radius-pill); border: 1px solid var(--soc-border); font-size: var(--soc-text-xs); font-weight: 700; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; line-height: 1; flex: 0 0 auto; } #analyticsRiskGrade.soc-risk-grade.safe, #analyticsRiskGrade.soc-risk-grade.stable, #analyticsRiskGrade.soc-risk-grade.is-safe, #analyticsRiskGrade.soc-risk-grade[data-risk-level="safe"], .soc-risk-grade.safe, .soc-risk-grade.stable, .soc-risk-grade.is-safe, .soc-risk-grade[data-risk-level="safe"] { color: var(--soc-success) !important; background: color-mix(in srgb, var(--soc-success) 12%, transparent) !important; border-color: color-mix(in srgb, var(--soc-success) 30%, var(--soc-border)) !important; } #analyticsRiskGrade.soc-risk-grade.caution, #analyticsRiskGrade.soc-risk-grade.is-caution, #analyticsRiskGrade.soc-risk-grade[data-risk-level="caution"], .soc-risk-grade.caution, .soc-risk-grade.is-caution, .soc-risk-grade[data-risk-level="caution"] { color: var(--soc-warning) !important; background: color-mix(in srgb, var(--soc-warning) 14%, transparent) !important; border-color: color-mix(in srgb, var(--soc-warning) 35%, var(--soc-border)) !important; } #analyticsRiskGrade.soc-risk-grade.danger, #analyticsRiskGrade.soc-risk-grade.risk, #analyticsRiskGrade.soc-risk-grade.critical, #analyticsRiskGrade.soc-risk-grade.is-danger, #analyticsRiskGrade.soc-risk-grade[data-risk-level="danger"], .soc-risk-grade.danger, .soc-risk-grade.risk, .soc-risk-grade.critical, .soc-risk-grade.is-danger, .soc-risk-grade[data-risk-level="danger"] { color: var(--soc-danger) !important; background: color-mix(in srgb, var(--soc-danger) 14%, transparent) !important; border-color: color-mix(in srgb, var(--soc-danger) 35%, var(--soc-border)) !important; } .soc-analytics-driver-list { margin: 0; padding-left: 16px; display: grid; gap: 4px; } .soc-analytics-driver-list li { color: var(--soc-text-sub); font-size: var(--soc-text-sm); } .soc-analytics-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 100%; min-width: 0; } .soc-analytics-kpi-grid .soc-kpi-card { cursor: pointer; } .soc-analytics-kpi-grid .soc-kpi-card.is-active { border-color: var(--soc-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--soc-primary) 16%, transparent); } .soc-analytics-trend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 100%; min-width: 0; } .soc-analytics-trend-grid > .soc-block { min-height: 168px; } .soc-analytics-trend-grid > .soc-block .soc-sparkline-lg { min-height: 78px; } .soc-heatmap-legend { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; color: var(--soc-text-sub); font-size: var(--soc-text-xs); } .soc-heatmap-day-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .soc-heatmap-day-btn { min-height: 30px; padding: 4px 10px; border-radius: var(--soc-radius-pill); border: 1px solid var(--soc-border); background: var(--soc-card-bg); color: var(--soc-text-sub); font-size: var(--soc-text-xs); font-weight: 700; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s ease; } .soc-heatmap-day-btn:hover { background: var(--soc-primary-soft-bg); color: var(--soc-primary); border-color: color-mix(in srgb, var(--soc-primary) 45%, var(--soc-border)); } .soc-heatmap-day-btn:active { transform: scale(0.98); } .soc-heatmap-day-btn.active { background: var(--soc-primary-soft-bg); color: var(--soc-primary); border-color: var(--soc-primary); } .soc-heatmap-grid { display: grid; grid-template-columns: 48px repeat(24, minmax(0, 1fr)); gap: 3px; width: 100%; } .soc-heatmap-scroll { width: 100%; max-width: 100%; min-height: 212px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .soc-heatmap-scroll.is-mobile-day { overflow-x: hidden; } #analyticsHeatmapBlock .soc-heatmap-grid { min-height: 188px; } #analyticsPeakWindow { font-size: 0.5em; line-height: 1.15; } .soc-heatmap-header, .soc-heatmap-row-label { font-size: 10px; color: var(--soc-text-sub); display: grid; place-items: center; } .soc-heatmap-cell { border-radius: 4px; min-height: 16px; background: color-mix(in srgb, var(--soc-border) 65%, transparent); } .soc-heatmap-cell.i1 { background: color-mix(in srgb, var(--soc-primary) 18%, var(--soc-card-bg)); } .soc-heatmap-cell.i2 { background: color-mix(in srgb, var(--soc-primary) 30%, var(--soc-card-bg)); } .soc-heatmap-cell.i3 { background: color-mix(in srgb, var(--soc-primary) 42%, var(--soc-card-bg)); } .soc-heatmap-cell.i4 { background: color-mix(in srgb, var(--soc-primary) 56%, var(--soc-card-bg)); } .soc-heatmap-cell.i5 { background: color-mix(in srgb, var(--soc-primary) 72%, var(--soc-card-bg)); } .soc-heatmap-grid.is-mobile-day { min-width: 0; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; } .soc-heatmap-grid.is-mobile-day .soc-heatmap-cell { min-height: 14px; } .soc-analytics-store-list { display: grid; gap: 8px; } .soc-store-comparison-head { position: relative; align-items: center; flex-wrap: wrap; column-gap: 10px; row-gap: 8px; z-index: 1; } .soc-store-comparison-head > h3 { flex: 1 1 220px; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-store-comparison-actions { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 100%; width: 100%; margin-left: 0; justify-content: flex-start; position: relative; z-index: 2; } .soc-store-comparison-actions .analytics-store-metric-select { flex: 1 1 auto; width: 100% !important; min-width: 0; max-width: none; min-height: 34px; height: 34px; padding: 0 28px 0 10px; line-height: 1.2; } .soc-info-icon-btn { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 999px; color: color-mix(in srgb, var(--soc-primary) 85%, var(--soc-text)); } .soc-store-summary-kpis { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; margin: 8px 0 10px; width: 100%; min-width: 0; } .soc-store-summary-chip { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 calc((100% - 12px) / 3); min-width: 0; border-radius: 999px; border: 1px solid var(--soc-border); background: var(--soc-surface-overlay-11); color: var(--soc-text-sub); font-size: 10.5px; line-height: 1.25; padding: 4px 7px; max-width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-store-summary-chip.is-empty { flex: 1 1 100%; justify-content: flex-start; text-align: left; color: var(--soc-muted); } .soc-store-info-popover { position: fixed; top: 0; left: 0; right: auto; z-index: 40; width: min(280px, calc(100vw - 24px)); max-width: min(280px, calc(100vw - 24px)); border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-panel-bg); box-shadow: 0 10px 26px var(--soc-shadow); padding: 10px 12px; display: grid; gap: 6px; } .soc-store-info-popover p { margin: 0; color: var(--soc-text-sub); font-size: 12px; line-height: 1.4; white-space: normal; word-break: keep-all; overflow-wrap: break-word; } .soc-store-row { border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); padding: 8px 10px; display: grid; gap: 6px; cursor: pointer; min-width: 0; } .soc-store-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .soc-store-row strong { font-size: var(--soc-text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-store-main-metric { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; flex: 0 0 auto; } .soc-store-main-metric-label { color: var(--soc-text-sub); font-size: 11px; white-space: nowrap; } .soc-store-main-metric-value { font-size: 13px; font-weight: 700; color: var(--soc-text); white-space: nowrap; } .soc-store-row-kpis { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .soc-store-kpi-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--soc-border); border-radius: 999px; background: var(--soc-surface-overlay-11); padding: 2px 8px; max-width: 100%; } .soc-store-kpi-label { color: var(--soc-text-sub); font-size: 11px; white-space: nowrap; } .soc-store-kpi-value { color: var(--soc-text); font-size: 12px; font-weight: 700; white-space: nowrap; } .soc-ratio-value--safe { color: var(--soc-success) !important; } .soc-ratio-value--caution { color: var(--soc-warning) !important; } .soc-ratio-value--danger { color: var(--soc-danger) !important; } .soc-store-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--soc-border) 75%, transparent); overflow: hidden; } .soc-store-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--soc-primary), var(--soc-accent)); } .soc-analytics-store-drawer { position: fixed; top: calc(var(--soc-safe-top) + 64px); right: 10px; width: min(420px, calc(100vw - 20px)); max-height: calc(100dvh - 140px); border: 1px solid var(--soc-border); border-radius: var(--soc-radius-card); background: var(--soc-panel-bg); box-shadow: var(--soc-shadow-card); padding: 10px; z-index: 85; display: grid; gap: 10px; transform: translate3d(0, 0, 0); transition: transform 0.24s ease, opacity 0.24s ease; } .soc-analytics-store-drawer.dragging { transition: none; } .soc-analytics-store-drawer:not(.hidden) { transform: translate3d(0, var(--soc-analytics-drawer-drag, 0), 0); } .soc-drawer-backdrop { position: fixed; inset: 0; z-index: 84; background: var(--soc-overlay-soft); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .soc-drawer-backdrop.open { opacity: 1; pointer-events: auto; } #reportBuilderBackdrop { z-index: 359; } #peopleCreateBackdrop { z-index: 349; } #employeeDetailBackdrop { z-index: 351; } #reportParticipantPickerBackdrop { z-index: 347; } #participantsSheetBackdrop { z-index: 345; } #homeTrendInsightBackdrop { z-index: 343; } #homeTrendInsightSheet { z-index: 344; background: transparent; pointer-events: none; } #homeTrendInsightSheet.open { pointer-events: none; } #homeTrendInsightSheet .soc-bottom-sheet-panel { pointer-events: auto; } #participantsSheet { z-index: 346; background: transparent; pointer-events: none; } #participantsSheet.open { pointer-events: none; } #participantsSheet .soc-bottom-sheet-panel { pointer-events: auto; } #reportParticipantPickerSheet { z-index: 348; background: transparent; pointer-events: none; } #reportParticipantPickerSheet.open { pointer-events: none; } #reportParticipantPickerSheet .soc-bottom-sheet-panel { pointer-events: auto; } #reportParticipantPickerSheet .soc-bottom-sheet-panel.soc-report-participant-panel { min-height: min(70dvh, 720px); max-height: min(86dvh, 860px); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; gap: 8px; overflow: hidden; overflow-x: hidden; min-width: 0; touch-action: pan-y; -webkit-overflow-scrolling: touch; } .soc-report-participant-tab-row { display: flex; gap: 8px; min-width: 0; } .soc-report-participant-tab-row .chip { flex: 1 1 0; min-width: 0; min-height: 34px; } .soc-report-participant-search-label { font-size: var(--soc-text-sm); color: var(--soc-text-sub); } .soc-report-participant-search { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; } .soc-report-participant-list { min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: grid; gap: 8px; padding-right: 2px; padding-bottom: 6px; } .soc-participant-row { width: 100%; max-width: 100%; min-width: 0; display: flex; align-items: center; gap: 10px; border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-card-bg); color: var(--soc-text); padding: 10px; text-align: left; box-sizing: border-box; } .soc-participant-row.is-selected { border-color: var(--soc-primary); background: var(--soc-primary-soft-bg); } .soc-participant-avatar { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--soc-primary) 16%, var(--soc-panel-bg)); color: var(--soc-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex: 0 0 auto; } .soc-participant-main { min-width: 0; display: grid; gap: 2px; flex: 1 1 auto; } .soc-participant-main strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-participant-main .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-participant-role-pill { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; min-width: 0; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--soc-border); background: var(--soc-panel-bg); color: var(--soc-text-sub); font-size: 11px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-participant-state-pill { flex: 0 0 auto; border: 1px solid var(--soc-border); border-radius: 999px; padding: 3px 8px; font-size: 12px; color: var(--soc-text-sub); white-space: nowrap; } .soc-participant-row.is-selected .soc-participant-state-pill { border-color: var(--soc-primary); color: var(--soc-primary); background: color-mix(in srgb, var(--soc-primary) 12%, transparent); } .soc-report-participant-selected { border: 1px solid var(--soc-divider); border-radius: 12px; background: var(--soc-card-bg); padding: 10px; display: grid; gap: 8px; min-width: 0; } .soc-report-participant-selected-row { display: grid; gap: 6px; min-width: 0; } .soc-report-participant-pill-wrap { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .soc-participant-pill { border: 1px solid var(--soc-border); border-radius: 999px; background: var(--soc-panel-bg); color: var(--soc-text); padding: 5px 10px; font-size: 12px; line-height: 1.2; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-participant-pill.is-primary { display: inline-flex; align-items: center; gap: 6px; border-color: var(--soc-primary); background: color-mix(in srgb, var(--soc-primary) 11%, transparent); } .soc-participant-pill.is-primary strong { color: var(--soc-primary); font-size: 11px; white-space: nowrap; } .soc-report-participant-footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; position: sticky; bottom: 0; left: 0; right: 0; border-top: 1px solid var(--soc-divider); background: var(--soc-panel-bg); padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); } .soc-report-participant-footer .ds-btn { min-width: 96px; } html.report-participant-picker-open, body.report-participant-picker-open { overflow: hidden !important; overscroll-behavior: none; } html.report-participant-picker-open .container.ds-page, body.report-participant-picker-open .container.ds-page { overflow: hidden !important; } body.analytics-drawer-open, html.analytics-drawer-open { overflow: hidden; } .soc-analytics-store-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--soc-divider); } #analyticsStoreDrawerHandle { display: none; } .soc-analytics-store-drawer-head h4 { margin: 0; } .soc-analytics-store-drawer-body { overflow-y: auto; display: grid; gap: 10px; min-height: 0; } .soc-analytics-store-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .soc-analytics-store-mini article { border: 1px solid var(--soc-border); border-radius: 8px; background: var(--soc-card-bg); padding: 8px; } .soc-analytics-store-mini h5, .soc-analytics-store-incidents h5 { margin: 0 0 6px; font-size: var(--soc-text-xs); color: var(--soc-text-sub); } .soc-reports-builder, .soc-report-preview { border: 1px solid var(--soc-border); border-radius: var(--soc-radius-card); background: var(--soc-panel-bg); box-shadow: var(--soc-shadow-soft); padding: 12px; } .soc-reports-form-grid { margin-top: 8px; display: grid; gap: 8px; } .soc-reports-site-multi, .soc-reports-section-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .soc-reports-scope-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .soc-reports-section-toggles.field-invalid { border: 1px solid var(--soc-field-invalid-border); border-radius: 10px; padding: 6px; box-shadow: 0 0 0 2px var(--soc-field-invalid-ring); } .soc-reports-scope-toggle label { display: flex; align-items: center; gap: 7px; min-height: 34px; border: 1px solid var(--soc-border); border-radius: 8px; background: var(--soc-card-bg); padding: 6px 8px; font-size: var(--soc-text-sm); } .soc-site-chip-btn { min-height: 36px; border: 1px solid var(--soc-border); border-radius: 9px; background: var(--soc-card-bg); color: var(--soc-text); font-size: var(--soc-text-sm); padding: 6px 10px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-site-chip-btn.is-selected { border-color: var(--soc-primary); background: var(--soc-primary-soft-bg); color: var(--soc-primary); } .soc-report-section-row { width: 100%; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; text-align: left; } .soc-report-section-icon { flex: 0 0 auto; font-size: 9px; color: var(--soc-primary); line-height: 1; } .soc-report-section-row.is-on { border-color: color-mix(in srgb, var(--soc-primary) 55%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary-soft-bg) 65%, var(--soc-card-bg)); } .soc-report-section-copy { min-width: 0; display: grid; gap: 2px; } .soc-report-section-copy strong { font-size: var(--soc-text-sm); } .soc-report-section-copy small { color: var(--soc-text-sub); font-size: var(--soc-text-xs); line-height: 1.25; } .soc-report-section-switch { flex: 0 0 auto; width: 34px; height: 20px; border-radius: 999px; border: 1px solid var(--soc-border); background: var(--soc-card-bg); position: relative; transition: background 0.2s ease, border-color 0.2s ease; } .soc-report-section-switch-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--soc-text-sub); transition: transform 0.2s ease, background 0.2s ease; } .soc-report-section-row.is-on .soc-report-section-switch { border-color: var(--soc-primary); background: color-mix(in srgb, var(--soc-primary) 20%, var(--soc-card-bg)); } .soc-report-section-row.is-on .soc-report-section-switch-thumb { transform: translateX(14px); background: var(--soc-primary); } .soc-reports-site-picker { display: grid; gap: 8px; } .soc-reports-site-actions { display: inline-flex; align-items: center; gap: 6px; } .soc-reports-selected-sites { min-height: 26px; } .soc-reports-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .soc-report-headerbar { position: sticky; top: 0; z-index: 50; border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-topbar-bg); box-shadow: var(--soc-shadow-soft); padding: 10px 12px; display: grid; gap: 8px; } .soc-report-header-main { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; } .soc-report-title-wrap { flex: 0 0 auto; min-width: 0; } .soc-report-title-wrap h3 { margin: 0; font-size: var(--soc-text-lg); } #reportSummaryText, #reportHeaderSummary { flex: 1 1 auto; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-report-header-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; max-width: 100%; overflow: hidden; } .soc-report-header-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; overflow: hidden; } .soc-report-header-chip .chip-close { font-weight: 700; line-height: 1; } .soc-report-header-actions, .report-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; flex: 0 0 auto; max-width: 100%; } .soc-report-header-actions .ds-btn, .report-actions .ds-btn { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; } .soc-report-header-chip .chip { max-width: 100%; } .soc-export-menu-wrap { position: relative; display: inline-flex; } .soc-export-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 80; min-width: 154px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); box-shadow: var(--soc-shadow-soft); padding: 4px; display: grid; gap: 2px; } .soc-export-menu-item { min-height: 34px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--soc-text); text-align: left; padding: 0 10px; cursor: pointer; } .soc-export-menu-item:hover { background: var(--soc-primary-soft-bg); border-color: var(--soc-border); } .soc-report-preview-viewport { display: grid; gap: 10px; min-height: 0; height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; scroll-padding-top: 64px; padding-right: 2px; padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 16px); -webkit-overflow-scrolling: touch; } #reportPreviewScroller, #reportPreview { width: 100%; max-width: 100%; min-width: 0; } #reportStatusBanner { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); padding: 10px; } #reportStatusBanner p { margin: 0; } .soc-report-empty-card { border: 1px solid var(--soc-border); border-radius: 12px; background: linear-gradient(170deg, var(--soc-card-bg), var(--soc-panel-bg)); box-shadow: var(--soc-shadow-soft); padding: 14px; display: grid; gap: 10px; } .soc-report-empty-card h4 { margin: 0; font-size: var(--soc-text-lg); } .soc-report-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; } .soc-reports-mode-toggle { margin-top: 2px; align-items: center; } .soc-reports-mode-toggle .chip { flex: 1 1 0; min-width: 0; min-height: 32px; } .soc-report-browse { border: 1px solid var(--soc-border); border-radius: 12px; background: linear-gradient(165deg, var(--soc-card-bg), var(--soc-panel-bg)); box-shadow: var(--soc-shadow-soft); padding: 12px; display: grid; gap: 10px; } .soc-report-browse-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .soc-report-browse-card { border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); padding: 10px; display: grid; gap: 8px; } .soc-report-browse-card h4 { margin: 0; font-size: var(--soc-text-sm); white-space: nowrap; } .soc-report-browse-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--soc-text-sub); font-size: var(--soc-text-xs); } .soc-report-browse-actions { display: flex; flex-wrap: wrap; gap: 6px; } .soc-report-last-preset { border-top: 1px dashed var(--soc-divider); padding-top: 10px; display: grid; gap: 8px; } .report-section-card summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .soc-report-section-toggle { flex: 0 0 auto; font-size: var(--soc-text-xs); color: var(--soc-text-sub); } .report-heatmap-scroll { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .report-heatmap-table { border-collapse: collapse; min-width: 760px; width: max-content; } .report-heatmap-table th, .report-heatmap-table td { border: 1px solid var(--soc-border); min-width: 20px; height: 20px; text-align: center; font-size: 10px; padding: 0; } .report-heatmap-table td.i1 { background: color-mix(in srgb, var(--soc-primary) 16%, transparent); } .report-heatmap-table td.i2 { background: color-mix(in srgb, var(--soc-primary) 28%, transparent); } .report-heatmap-table td.i3 { background: color-mix(in srgb, var(--soc-primary) 40%, transparent); } .report-heatmap-table td.i4 { background: color-mix(in srgb, var(--soc-primary) 54%, transparent); } .report-heatmap-table td.i5 { background: color-mix(in srgb, var(--soc-primary) 70%, var(--soc-accent) 30%); } .soc-report-builder-panel { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 7px; min-height: min(65dvh, 680px); height: min(70dvh, 820px); max-height: 84dvh; transition: height 0.22s ease, transform 0.22s ease; overflow: hidden; touch-action: pan-y; overscroll-behavior: contain; } #reportBuilderSheet.mode-expanded .soc-report-builder-panel { min-height: min(68dvh, 700px); height: min(78dvh, 860px); } #reportBuilderSheet.dragging .soc-report-builder-panel { transform: translate3d(0, var(--soc-report-builder-drag, 0), 0); transition: none; } .soc-report-builder-steps { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: grid; gap: 8px; padding-right: 2px; padding-bottom: 4px; } .soc-report-builder-step { display: grid; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-panel-bg); padding: 9px; gap: 7px; } .soc-report-builder-step.is-active { border-color: color-mix(in srgb, var(--soc-primary) 55%, var(--soc-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--soc-primary) 22%, transparent); } .soc-report-builder-step h4 { margin: 0; font-size: var(--soc-text-sm); color: var(--soc-text-accent-soft); } .rb-section { gap: 10px; } .rb-section > .meta { margin: -2px 0 0; } .soc-report-builder-section-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .soc-report-builder-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .soc-report-builder-step-tab { min-height: 34px; border-radius: 8px; border: 1px solid var(--soc-border); background: var(--soc-card-bg); color: var(--soc-text-sub); font-size: var(--soc-text-xs); font-weight: 700; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .soc-report-builder-step-tab.is-active { border-color: var(--soc-primary); background: var(--soc-primary-soft-bg); color: var(--soc-primary); } .soc-report-builder-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; position: sticky; bottom: 0; z-index: 4; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--soc-divider); background: var(--soc-panel-bg); } .soc-report-builder-nav { display: inline-flex; align-items: center; gap: 6px; } .soc-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .soc-admin-grid-grouped { gap: 12px; } .soc-admin-group { display: grid; gap: 8px; } .soc-admin-group-title { margin: 0; font-size: var(--soc-text-sm); font-weight: 800; color: var(--soc-text-sub); } .soc-admin-group-list { display: grid; gap: 10px; } .soc-admin-card-logout { margin-top: 2px; } .soc-admin-card { border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-card-bg); padding: 12px 32px 12px 12px; text-align: left; display: grid; gap: 4px; color: var(--soc-text); transition: transform 0.22s ease, box-shadow 0.22s ease; position: relative; min-width: 0; } #adminHomePanelSoc .soc-admin-card .meta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; } .soc-admin-card:hover { transform: translateY(-1px); box-shadow: 0 8px 18px var(--soc-shadow); } .soc-admin-card-readonly { cursor: default; padding-right: 12px; } .soc-admin-card-readonly:hover { transform: none; box-shadow: none; } .soc-menu-group { display: grid; gap: 2px; } .soc-menu-group-title { margin: 0; padding: 10px 4px 6px; font-size: 12px; font-weight: 800; color: var(--soc-text-sub); letter-spacing: 0.02em; } #menuSheetPanel .pc-sidebar-only { display: none !important; } .soc-admin-subview { display: grid; gap: 10px; } .soc-admin-sub-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--soc-divider); } .soc-admin-sub-head h3 { margin: 0; font-size: var(--soc-text-lg); } .soc-admin-sub-body { display: grid; gap: 10px; } .soc-admin-sub-content { display: grid; gap: 10px; } .soc-report-templates-tabs { margin: 2px 0 4px; min-width: 0; display: grid; gap: 8px; } .soc-report-templates-tab { width: 100%; min-width: 0; min-height: 44px; border-radius: 10px; border: 1px solid var(--soc-border); background: var(--soc-card-bg); color: var(--soc-text); font-size: var(--soc-text-sm); font-weight: 700; padding: 10px 12px; line-height: 1.2; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease; } .soc-report-templates-tab-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-report-templates-tab-arrow { flex: 0 0 auto; color: var(--soc-text-sub); font-size: var(--soc-text-md); line-height: 1; } .soc-report-templates-tab:hover { transform: translateY(-1px); border-color: var(--soc-primary); box-shadow: var(--soc-shadow-soft); } .soc-report-templates-tab.is-active, .soc-report-templates-tab[aria-selected="true"] { border-color: var(--soc-primary); background: var(--soc-primary-soft-bg); color: var(--soc-primary); } .soc-report-templates-tab.is-active .soc-report-templates-tab-arrow, .soc-report-templates-tab[aria-selected="true"] .soc-report-templates-tab-arrow { color: var(--soc-primary); } .soc-report-templates-tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--soc-primary) 56%, transparent); outline-offset: 1px; } .soc-report-templates-panes { display: grid; gap: 10px; min-width: 0; border: 1px solid var(--soc-border); border-radius: 12px; background: linear-gradient(168deg, var(--soc-card-bg), var(--soc-panel-bg)); box-shadow: var(--soc-shadow-soft); padding: 10px; } .soc-report-templates-pane-head { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .soc-report-templates-pane { display: grid; gap: 10px; min-width: 0; } .soc-report-templates-weekly-list { display: grid; gap: 8px; } .soc-report-templates-weekly-card { border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-card-bg); box-shadow: var(--soc-shadow-soft); padding: 10px 12px; display: grid; gap: 6px; min-width: 0; } .soc-report-templates-weekly-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .soc-report-templates-weekly-card-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-report-templates-site-chips { min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .soc-report-templates-trend-chart { display: grid; gap: 6px; } .soc-report-templates-trend-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; } .soc-report-templates-trend-label { color: var(--soc-text-sub); font-size: 12px; white-space: nowrap; } .soc-report-templates-trend-track { height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--soc-primary) 10%, transparent); overflow: hidden; min-width: 0; } .soc-report-templates-trend-fill { display: block; height: 100%; border-radius: inherit; background: var(--soc-primary); } .soc-report-templates-trend-value { font-size: 12px; color: var(--soc-text-sub); white-space: nowrap; } .soc-report-templates-trend-list { display: grid; gap: 6px; } .soc-report-templates-trend-item { min-width: 0; } .soc-report-templates-trend-open { width: 100%; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-panel-bg); color: var(--soc-text); text-align: left; padding: 8px 10px; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-admin-link-grid { display: grid; gap: 8px; } .soc-admin-link-btn { border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); color: var(--soc-text); text-align: left; padding: 10px 32px 10px 12px; display: grid; gap: 4px; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; position: relative; min-width: 0; } .soc-admin-link-btn[data-action], .soc-admin-card[data-action] { position: relative; z-index: 2; pointer-events: auto; } .soc-admin-link-btn:hover { transform: translateY(-1px); border-color: var(--soc-primary); box-shadow: var(--soc-shadow-soft); } .soc-admin-link-btn .meta { color: var(--soc-text-sub); } .soc-admin-card::after, .soc-admin-link-btn::after { content: "›"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--soc-text-sub); font-size: 16px; line-height: 1; pointer-events: none; } .soc-admin-card-readonly::after { display: none; } body:not(.role-hq) [data-hq-only="true"] { display: none !important; } .soc-report-preview { display: grid; gap: 10px; width: 100%; max-width: 100%; min-width: 0; } .soc-report-preview .report-section-card, .soc-report-preview details.report-section-card { border: 1px solid var(--soc-border); border-radius: 14px; background: var(--soc-card-bg); overflow: hidden; box-shadow: var(--soc-shadow-soft); } .soc-report-cover-card { display: grid; gap: 8px; padding: 12px; } .soc-report-cover-card h4 { margin: 0; font-size: var(--soc-text-lg); } .report-cover-meta { display: grid; gap: 2px; color: var(--soc-text-sub); font-size: var(--soc-text-xs); } .report-cover-highlights { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--soc-text); } .soc-report-preview details summary { cursor: pointer; list-style: none; padding: 10px 12px; font-weight: 700; font-size: var(--soc-text-sm); border-bottom: 1px solid var(--soc-divider); } .soc-report-preview details summary::-webkit-details-marker { display: none; } .soc-report-preview details > div { padding: 10px 12px; display: grid; gap: 8px; } .soc-report-preview .soc-report-store-filter { display: flex; flex-wrap: wrap; gap: 6px; } .soc-report-preview .soc-report-store-filter-btn { appearance: none; border: 1px solid var(--soc-border); background: var(--soc-surface-overlay-11); color: var(--soc-text-sub); border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; padding: 7px 10px; cursor: pointer; } .soc-report-preview .soc-report-store-filter-btn.is-active { border-color: color-mix(in srgb, var(--soc-primary) 75%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary) 16%, var(--soc-card-bg)); color: var(--soc-text); } .soc-report-preview .soc-report-store-chart-list { display: grid; gap: 8px; } .soc-report-preview .soc-report-store-chart-row { border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-surface-overlay-11); padding: 8px 10px; display: grid; gap: 6px; } .soc-report-preview .soc-report-store-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .soc-report-preview .soc-report-store-chart-head strong { font-size: var(--soc-text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-report-preview .soc-report-store-chart-metric { display: inline-flex; align-items: baseline; gap: 6px; color: var(--soc-text-sub); font-size: 11px; white-space: nowrap; } .soc-report-preview .soc-report-store-chart-metric b { color: var(--soc-text); font-size: 13px; font-weight: 700; } .soc-report-preview .soc-report-store-chart-track { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--soc-border) 74%, transparent); overflow: hidden; } .soc-report-preview .soc-report-store-chart-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--soc-primary), var(--soc-accent)); } .soc-report-preview .soc-report-store-chart-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--soc-text-sub); font-size: 11px; } .soc-hero-status { display: grid; gap: 10px; border: 1px solid var(--soc-border); border-radius: var(--soc-radius-card); background: var(--soc-primary-soft-bg); padding: 12px; box-shadow: var(--soc-shadow-soft); } .soc-hero-status-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .soc-hero-status h3 { font-size: var(--soc-text-lg); } .soc-hero-comment { margin-top: 6px; color: var(--soc-text-sub); font-size: var(--soc-text-sm); } .soc-home-briefing-title { display: grid; gap: 4px; min-width: 0; } .soc-home-briefing-title h3, .soc-home-briefing-period { margin: 0; } .soc-hero-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 4px 11px; border-radius: var(--soc-radius-pill); border: 1px solid var(--soc-border); font-size: var(--soc-text-xs); font-weight: 700; } .soc-hero-chip.stable { background: var(--soc-status-closed-bg); color: var(--soc-status-closed-fg); } .soc-hero-chip.caution { background: var(--soc-status-progress-bg); color: var(--soc-status-progress-fg); } .soc-hero-chip.risk { background: var(--soc-status-received-bg); color: var(--soc-status-received-fg); } .soc-home-state { border: 1px solid var(--soc-border); border-radius: var(--soc-radius-md); background: var(--soc-panel-bg); padding: 12px; display: grid; gap: 8px; } .soc-home-skeleton { height: 54px; border-radius: var(--soc-radius-sm); border: 1px solid var(--soc-border); background: linear-gradient( 110deg, var(--soc-shimmer-1) 15%, var(--soc-shimmer-2) 30%, var(--soc-shimmer-1) 45% ); background-size: 220% 100%; animation: socShimmer 1.25s linear infinite; } .soc-kpi-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .soc-kpi-card { border: 1px solid var(--soc-border); border-radius: var(--soc-radius-card); background: var(--soc-kpi-bg); padding: 11px 12px; min-width: 0; box-shadow: var(--soc-shadow-soft); transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.22s ease; } .soc-kpi-card.is-clickable { cursor: pointer; } .soc-home-trend-block.is-clickable { cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .soc-home-trend-block.is-clickable:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--soc-shadow); } .soc-home-trend-block.is-clickable:active { transform: scale(0.995); } .soc-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--soc-shadow); } .soc-kpi-card:active { transform: scale(0.99); } .soc-kpi-label { color: var(--soc-muted); font-size: var(--soc-text-xs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-kpi-value { margin-top: 4px; font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--soc-kpi-value); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-kpi-subtext { margin-top: 4px; color: var(--soc-text-sub); font-size: 11px; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-kpi-trend { margin-top: 8px; min-height: 34px; } #homeView .soc-kpi-grid { gap: 12px; } #homeView .soc-kpi-card { display: grid; align-content: start; gap: 6px; min-height: 146px; padding: 18px 18px 14px; } #homeView .soc-kpi-label { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); color: var(--ui-text-secondary); } #homeView .soc-kpi-value { margin-top: 0; font-size: 30px; line-height: 1.05; letter-spacing: -0.03em; } #homeView .soc-kpi-subtext { margin-top: 0; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); color: var(--ui-text-secondary); } #homeView .soc-kpi-trend { margin-top: auto; min-height: 22px; opacity: 0.42; } #homeView .soc-kpi-trend .soc-sparkline { height: 22px; } #homeView .soc-kpi-trend .soc-sparkline-area { fill: color-mix(in srgb, var(--soc-primary) 10%, transparent); } #homeView .soc-kpi-trend .soc-sparkline-line { stroke-width: 1.8; } .soc-sparkline { width: 100%; height: 34px; display: block; } .soc-sparkline-lg { height: 78px; margin-top: 8px; } .soc-sparkline-area { fill: var(--soc-primary-soft-bg); } .soc-sparkline-line { fill: none; stroke: var(--soc-primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .soc-home-grid { display: grid; gap: 10px; grid-template-columns: 1.15fr 1fr; } .soc-home-support-stack { display: grid; gap: 12px; align-content: start; } .soc-block { border: 1px solid var(--soc-border); border-radius: var(--soc-radius-card); background: var(--soc-block-bg); padding: 12px; box-shadow: var(--soc-shadow-soft); transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.22s ease; } .soc-block:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--soc-shadow); } .soc-block:active { transform: scale(0.99); } .soc-block.is-active { border-color: var(--soc-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--soc-primary) 16%, transparent), 0 10px 26px var(--soc-shadow); } .soc-block h3 { font-size: var(--soc-text-md); margin-bottom: 8px; } .soc-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; min-width: 0; } .soc-block-head--briefing { align-items: flex-start; } .soc-home-ticket-summary-list { display: grid; gap: 6px; margin: 8px 0; width: 100%; max-width: 100%; min-width: 0; } .soc-home-ticket-summary-item { width: 100%; max-width: 100%; min-width: 0; min-height: 34px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--soc-border); border-radius: var(--soc-radius-pill); background: var(--soc-surface-overlay-11); color: var(--soc-text); padding: 6px 10px; text-align: left; } .soc-home-ticket-summary-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.35; } .soc-home-ticket-summary-site { flex: 0 0 auto; white-space: nowrap; font-size: 11px; line-height: 1.2; color: var(--soc-text-sub); border: 1px solid var(--soc-border); border-radius: var(--soc-radius-pill); background: var(--soc-panel-bg); padding: 2px 7px; } .soc-ticket-mini-dist { width: 100%; max-width: 100%; min-width: 0; margin: 8px 0 10px; display: grid; gap: 8px; } .soc-ticket-mini-bar { width: 100%; max-width: 100%; min-width: 0; height: 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--soc-border) 80%, transparent); background: color-mix(in srgb, var(--soc-border) 54%, transparent); display: flex; align-items: stretch; overflow: hidden; } .soc-ticket-mini-segment { display: block; height: 100%; min-width: 0; transition: width 180ms ease; } .soc-ticket-mini-segment.is-pending { background: var(--soc-warning); } .soc-ticket-mini-segment.is-needs-info { background: var(--soc-info); } .soc-ticket-mini-segment.is-done { background: var(--soc-success); } .soc-ticket-mini-segment.is-other { background: color-mix(in srgb, var(--soc-text-sub) 26%, var(--soc-border)); } .soc-ticket-mini-legend { width: 100%; max-width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .soc-ticket-mini-legend-item { min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--soc-text-sub); white-space: nowrap; } .soc-ticket-mini-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .soc-ticket-mini-dot.is-pending { background: var(--soc-warning); } .soc-ticket-mini-dot.is-needs-info { background: var(--soc-info); } .soc-ticket-mini-dot.is-done { background: var(--soc-success); } .soc-ticket-mini-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .soc-ticket-mini-legend-item strong { font-size: 12px; color: var(--soc-text); font-weight: 700; } .soc-weekly-briefing .soc-block-head > h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #homeWeeklyBriefing .soc-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #homeWeeklyBriefing .soc-home-weekly-ratio-pill { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; border: 1px solid color-mix(in srgb, var(--soc-primary) 26%, var(--soc-border)); border-radius: 999px; background: color-mix(in srgb, var(--soc-primary) 12%, #ffffff 88%); color: var(--soc-primary); font-size: 11px; font-weight: 700; line-height: 1; padding: 6px 10px; white-space: nowrap; } #homeWeeklyBriefing #homeWeeklySummaryLine { margin: 0 0 8px; padding: 0; min-height: 24px; display: flex; align-items: center; line-height: 1.25; } #homeWeeklyBriefing { display: grid; align-content: start; gap: 8px; padding: 20px 22px 18px; } #homeHeroStatus { min-height: 100%; align-content: start; padding: 18px 20px; } #homeHeroStatus .soc-hero-comment { margin-top: 0; } #homeWeeklyBriefing .soc-home-weekly-chart { margin-top: 4px; margin-bottom: 6px; border: 1px solid var(--soc-border); border-radius: var(--soc-radius-card); background: var(--soc-panel-bg); padding: 12px 14px 10px; box-shadow: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } #homeWeeklyBriefing .soc-home-weekly-chart-item { min-width: 0; display: grid; justify-items: center; align-content: end; gap: 5px; } #homeWeeklyBriefing .soc-home-weekly-chart-value { margin: 0; font-size: var(--soc-text-xs); font-weight: 800; color: var(--soc-text); line-height: 1.2; white-space: nowrap; } #homeWeeklyBriefing .soc-home-weekly-chart-bar { width: 100%; max-width: 20px; height: 116px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--soc-border) 78%, transparent); background: color-mix(in srgb, var(--soc-border) 38%, transparent); overflow: hidden; display: flex; align-items: flex-end; } #homeWeeklyBriefing .soc-home-weekly-chart-fill { width: 100%; min-height: 2px; border-radius: 2px; transition: height 620ms cubic-bezier(0.2, 0.7, 0.2, 1); box-shadow: none; background: color-mix(in srgb, var(--soc-text-sub) 56%, transparent); } #homeWeeklyBriefing .soc-home-weekly-chart-fill.is-incidents { background: color-mix(in srgb, var(--soc-text-sub) 56%, transparent); } #homeWeeklyBriefing .soc-home-weekly-chart-fill.is-critical { background: color-mix(in srgb, var(--soc-text-sub) 56%, transparent); } #homeWeeklyBriefing .soc-home-weekly-chart-fill.is-ticket { background: color-mix(in srgb, var(--soc-text-sub) 56%, transparent); } #homeWeeklyBriefing .soc-home-weekly-chart-fill.is-peak { background: var(--soc-primary); } #homeWeeklyBriefing .soc-home-weekly-chart-label { margin: 2px 0 0; font-size: 11px; font-weight: 700; color: var(--soc-text-sub); letter-spacing: -0.01em; white-space: nowrap; } #homeWeeklyBriefing .soc-home-weekly-chart-wow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } #homeWeeklyBriefing .soc-home-weekly-chart-wow.is-up { color: var(--soc-success); } #homeWeeklyBriefing .soc-home-weekly-chart-wow.is-down { color: var(--soc-danger); } #homeWeeklyBriefing .soc-home-weekly-chart-wow.is-flat { color: var(--soc-text-sub); } #homeTrend7d { padding: 20px 22px 18px; } #homeTrend7d .soc-sparkline-lg { height: 120px; margin-top: 10px; } #homeRiskSignals, #homeActionNeededBlock, #homeRecentBlock { padding: 16px 18px; } #homeRiskSignals > h3, #homeActionNeededBlock > h3, #homeRecentBlock > h3 { margin: 0 0 10px; } #homeTicketBlock { padding: 20px 22px 18px; } #homeTicketBlock .soc-home-ticket-summary-list, .soc-home-activity-list .soc-list-mini, #homeRiskSignals .soc-list-mini, #homeActionNeededBlock .soc-list-mini { gap: 8px; } .soc-people-head-actions { display: inline-flex; align-items: center; gap: 8px; } .soc-people-admin-header-wrap { display: grid; gap: 10px; margin-bottom: 0; } .soc-people-admin-title-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; } .soc-people-admin-title-row h3 { margin: 0; min-width: 0; } .soc-people-admin-back-row { display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; margin-bottom: 0; } .people-admin-back-btn { min-height: 44px; padding: 10px 12px; white-space: nowrap; touch-action: manipulation; } .soc-people-hub-tabs { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 8px; width: fit-content; max-width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .soc-people-hub-tabs .chip { flex: 0 0 auto; min-width: 0; } .soc-people-hub-switch-btn { min-height: 32px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); font-weight: 600; box-shadow: none; } .soc-people-hub-switch-btn.is-active { background: var(--ui-bg-surface, var(--soc-panel-bg)); color: var(--ui-text-primary, var(--soc-text)); } .soc-people-hub-pane { width: 100%; max-width: 100%; min-width: 0; display: grid; gap: 18px; } .soc-people-pane-summary { display: grid; gap: 12px; padding: 14px 16px; min-width: 0; } .soc-people-pane-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; } .soc-people-pane-summary-head > div { display: grid; gap: 4px; min-width: 0; } .soc-people-pane-summary-eyebrow { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .soc-people-pane-summary-head h3 { margin: 0; min-width: 0; font-size: 17px; line-height: 24px; color: var(--ui-text-primary, var(--soc-text)); overflow-wrap: anywhere; } .soc-people-pane-summary-badges { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; min-width: 0; } .soc-people-pane-summary-badge { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 10px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 999px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; line-height: 18px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .soc-people-directory-layout { display: grid; gap: 22px; min-width: 0; align-items: start; } .soc-people-directory-layout > * { min-width: 0; } #peopleView { --soc-people-accent: #f97316; --soc-people-accent-strong: #c2410c; --soc-people-accent-soft: #fb923c; --soc-people-accent-muted: #fdba74; --soc-people-accent-surface: rgba(249, 115, 22, 0.12); --soc-people-accent-surface-strong: rgba(249, 115, 22, 0.18); } .soc-people-detail-panel { display: none; } @keyframes socPeopleDetailPanelSlideIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { body.soc-desktop-shell #peopleView .soc-people-detail-panel { animation: none !important; transition: none !important; } } .soc-people-detail-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; min-width: 0; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } .soc-people-detail-panel-heading { display: grid; gap: 2px; min-width: 0; } .soc-people-detail-panel-heading .meta:empty { display: none; } .soc-people-detail-panel-heading h3 { margin: 0; min-width: 0; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ui-text-secondary, var(--soc-text-sub)); letter-spacing: 0.01em; overflow-wrap: anywhere; } .soc-people-detail-close { flex-shrink: 0; } .soc-people-detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 18px 14px; } .soc-people-detail-summary-card { display: grid; gap: 4px; min-width: 0; padding: 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } .soc-people-detail-summary-card span { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 600; } .soc-people-detail-summary-card strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; } .soc-people-detail-panel-body { min-height: 0; padding: 16px 20px 20px; overflow-y: auto; overflow-x: hidden; } .soc-people-dashboard-summary { display: grid; gap: 14px; } .soc-people-segment-rail { display: flex; flex-wrap: wrap; gap: 8px; } .soc-people-segment-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 999px; background: var(--ui-bg-surface, var(--soc-card-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; font-weight: 700; line-height: 18px; transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; } .soc-people-segment-btn.is-active, .soc-people-segment-btn[aria-pressed="true"] { border-color: rgba(249, 115, 22, 0.3); background: rgba(249, 115, 22, 0.12); color: #c2410c; box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.12); } .soc-people-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .soc-people-kpi-card { display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 16px; background: var(--ui-bg-surface, var(--soc-card-bg)); } .soc-people-kpi-card.tone-primary { border-color: rgba(249, 115, 22, 0.2); background: linear-gradient(180deg, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0.015) 100%), var(--ui-bg-surface, var(--soc-card-bg)); } .soc-people-kpi-card.tone-success { border-color: rgba(34, 197, 94, 0.18); background: linear-gradient(180deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.01) 100%), var(--ui-bg-surface, var(--soc-card-bg)); } .soc-people-kpi-card.tone-accent { border-color: rgba(249, 115, 22, 0.18); background: linear-gradient(180deg, rgba(249, 115, 22, 0.06) 0%, rgba(249, 115, 22, 0.01) 100%), var(--ui-bg-surface, var(--soc-card-bg)); } .soc-people-kpi-card.is-empty { align-content: center; min-height: 140px; } .soc-people-kpi-card.is-empty strong { font-size: 15px; line-height: 22px; } .soc-people-kpi-head { display: flex; align-items: center; gap: 10px; min-width: 0; } .soc-people-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; background: var(--soc-people-accent-surface); color: var(--soc-people-accent); flex-shrink: 0; } .soc-people-kpi-icon svg { width: 22px; height: 22px; } .soc-people-kpi-copy { min-width: 0; } .soc-people-kpi-copy h4 { margin: 0; font-size: 14px; line-height: 20px; } .soc-people-kpi-number-block { display: grid; gap: 4px; } .soc-people-kpi-number-block strong { font-size: 30px; line-height: 34px; letter-spacing: -0.03em; } .soc-people-kpi-number-block span { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; line-height: 18px; } .soc-people-progress { position: relative; height: 10px; border-radius: 999px; background: rgba(148, 163, 184, 0.18); overflow: hidden; } .soc-people-progress-bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--soc-people-accent-soft) 0%, var(--soc-people-accent) 100%); } .soc-people-kpi-inline-list { display: grid; gap: 8px; } .soc-people-kpi-inline-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; } .soc-people-kpi-inline-row strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 14px; line-height: 20px; } .soc-people-summary-grid { display: grid; gap: 8px; } .soc-people-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; line-height: 18px; } .soc-people-summary-row strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 14px; line-height: 20px; } .soc-people-sparkline-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .soc-people-sparkline-shell { border-radius: 14px; background: linear-gradient(180deg, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0.02) 100%); padding: 8px 10px 6px; } .soc-people-sparkline { display: block; width: 100%; height: 72px; overflow: visible; } .soc-people-sparkline-area { fill: rgba(249, 115, 22, 0.16); stroke: none; } .soc-people-sparkline-line { fill: none; stroke: #f97316; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .soc-people-sparkline-dot { fill: #f97316; stroke: #ffffff; stroke-width: 2; } .soc-people-sparkline-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .soc-people-sparkline-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 17px; } .soc-people-sparkline-meta-row strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 13px; line-height: 18px; } .soc-people-rank-list { display: grid; gap: 10px; } .soc-people-rank-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 10px 0; border-top: 1px solid rgba(230, 234, 241, 0.9); } .soc-people-rank-row:first-child { border-top: 0; padding-top: 0; } .soc-people-rank-index { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: rgba(249, 115, 22, 0.1); color: #c2410c; font-size: 12px; font-weight: 800; } .soc-people-rank-copy { display: grid; gap: 2px; min-width: 0; } .soc-people-rank-copy strong { font-size: 13px; line-height: 18px; color: var(--ui-text-primary, var(--soc-text)); } .soc-people-rank-copy span { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; } .soc-people-rank-value { color: var(--ui-text-primary, var(--soc-text)); font-size: 15px; line-height: 20px; font-weight: 800; } .soc-people-segmented-track { display: flex; gap: 4px; width: 100%; height: 12px; padding: 2px; border-radius: 999px; background: rgba(148, 163, 184, 0.14); overflow: hidden; } .soc-people-segmented-fill { display: block; height: 100%; min-width: 10px; border-radius: 999px; } .soc-people-segmented-fill.tone-primary { background: linear-gradient(90deg, #fb923c 0%, #f97316 100%); } .soc-people-segmented-fill.tone-neutral { background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 100%); } .soc-people-segmented-fill.tone-secondary { background: linear-gradient(90deg, #fdba74 0%, #fb923c 100%); } .soc-people-segmented-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .soc-people-segmented-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .soc-people-segmented-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 17px; } .soc-people-kpi-dot.tone-primary { background: #f97316; } .soc-people-kpi-dot.tone-neutral { background: #94a3b8; } .soc-people-kpi-dot.tone-secondary { background: #fb923c; } .soc-people-kpi-donut-row { display: grid; grid-template-columns: minmax(0, 112px) minmax(0, 1fr); gap: 14px; align-items: center; } .soc-people-donut { position: relative; width: 112px; height: 112px; border-radius: 50%; background: var(--soc-people-donut, conic-gradient(#e5e7eb 0turn, #e5e7eb 1turn)); } .soc-people-donut::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--ui-bg-surface, var(--soc-card-bg)); } .soc-people-donut-center { position: absolute; top: 50%; left: 50%; width: min(72px, calc(100% - 34px)); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; z-index: 1; text-align: center; pointer-events: none; } .soc-people-donut-center span { display: block; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 700; } .soc-people-donut-center strong { display: block; font-size: 24px; line-height: 28px; letter-spacing: -0.03em; } .soc-people-kpi-legend { display: grid; gap: 8px; min-width: 0; } .soc-people-kpi-legend-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; } .soc-people-kpi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--soc-kpi-dot, #94a3b8); } .soc-people-kpi-legend-row strong { color: var(--ui-text-primary, var(--soc-text)); } .soc-people-bar-list { display: grid; gap: 10px; } .soc-people-bar-row { display: grid; gap: 6px; } .soc-people-bar-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; line-height: 18px; } .soc-people-bar-track { position: relative; height: 10px; border-radius: 999px; background: rgba(148, 163, 184, 0.18); overflow: hidden; } .soc-people-bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fb923c 0%, #f97316 100%); } .soc-people-table-identity { display: flex; align-items: center; gap: 12px; min-width: 0; } .soc-people-avatar, .soc-people-employee-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; flex-shrink: 0; font-weight: 800; letter-spacing: 0.02em; overflow: hidden; } .soc-people-avatar { width: 42px; height: 42px; background: var(--soc-people-accent-surface); color: var(--soc-people-accent-strong); font-size: 12px; } .soc-people-avatar img, .soc-people-employee-avatar img, .soc-profile-hero-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .soc-people-table-identity-copy { display: grid; gap: 2px; min-width: 0; } .soc-people-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); background: rgba(148, 163, 184, 0.1); color: var(--ui-text-primary, var(--soc-text)); font-size: 12px; line-height: 16px; font-weight: 700; } .soc-people-pill.is-link-linked { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.22); color: #15803d; } .soc-people-pill.is-link-unlinked { background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.24); color: #c2410c; } .soc-people-stats-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .soc-people-stats-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.9fr); gap: 14px; } .soc-people-stats-card { display: grid; gap: 14px; } .soc-people-chart-shell { display: grid; gap: 12px; } .soc-people-trend-chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); gap: 10px; align-items: end; min-height: 240px; } .soc-people-trend-col { display: grid; gap: 10px; min-width: 0; } .soc-people-trend-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 6px; min-height: 180px; } .soc-people-trend-bar { display: block; min-height: 8px; border-radius: 999px 999px 6px 6px; background: #94a3b8; } .soc-people-trend-bar.is-hire { background: linear-gradient(180deg, var(--soc-people-accent-muted) 0%, var(--soc-people-accent) 100%); } .soc-people-trend-bar.is-leave { background: linear-gradient(180deg, #fdba74 0%, #f97316 100%); } .soc-people-trend-bar.is-empty { opacity: 0.18; } .soc-people-trend-meta { display: grid; gap: 2px; justify-items: center; text-align: center; } .soc-people-trend-meta strong { font-size: 12px; line-height: 16px; } .soc-people-trend-meta span { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; } .soc-people-employee-detail-shell { display: grid; gap: 20px; min-height: 0; } .soc-people-employee-hero { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 2px 0 16px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } .soc-people-employee-avatar { width: 72px; height: 72px; background: linear-gradient(180deg, rgba(249, 115, 22, 0.14) 0%, rgba(249, 115, 22, 0.08) 100%); color: var(--soc-people-accent-strong); font-size: 19px; box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.08); } .soc-people-employee-hero-copy { display: grid; gap: 6px; min-width: 0; } .soc-people-employee-hero-eyebrow { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .soc-people-employee-hero-headline { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .soc-people-employee-hero-copy strong { font-size: 27px; line-height: 31px; letter-spacing: -0.03em; min-width: 0; overflow-wrap: anywhere; } .soc-people-employee-hero-copy .meta { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; line-height: 18px; } .soc-people-employee-hero-context { margin: 0; color: var(--ui-text-primary, var(--soc-text)); font-size: 12px; line-height: 16px; font-weight: 700; } .soc-people-employee-badges { display: flex; flex-wrap: wrap; gap: 8px; } .soc-people-employee-stat-grid, .soc-people-employee-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .soc-people-employee-stat, .soc-people-employee-info-card { display: grid; gap: 6px; min-width: 0; padding: 13px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 14px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } .soc-people-employee-stat { grid-template-columns: auto minmax(0, 1fr); align-items: center; } .soc-people-employee-stat > span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--soc-people-accent-surface); color: var(--soc-people-accent); } .soc-people-employee-stat > span svg { width: 16px; height: 16px; } .soc-people-employee-stat strong, .soc-people-employee-info-card strong { display: block; font-size: 17px; line-height: 23px; overflow-wrap: anywhere; } .soc-people-employee-stat small, .soc-people-employee-info-card span { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 600; } .soc-people-employee-section { display: grid; gap: 0; min-height: 0; } .soc-people-employee-action-row { display: flex; justify-content: flex-start; padding-top: 14px; } .soc-people-employee-tab-rail { display: flex; align-items: center; gap: 18px; min-width: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } .soc-people-employee-tab-btn { position: relative; padding: 2px 0 12px; border: 0; background: transparent; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 14px; line-height: 20px; font-weight: 700; cursor: pointer; transition: color .18s ease; } .soc-people-employee-tab-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 2px; border-radius: 999px; background: transparent; } .soc-people-employee-tab-btn.is-active, .soc-people-employee-tab-btn[aria-pressed="true"] { color: var(--ui-text-primary, var(--soc-text)); } .soc-people-employee-tab-btn:hover { color: var(--ui-text-primary, var(--soc-text)); } .soc-people-employee-tab-btn.is-active::after, .soc-people-employee-tab-btn[aria-pressed="true"]::after { background: var(--soc-people-accent); } .soc-people-employee-tab-pane { display: grid; gap: 12px; min-height: 0; align-content: start; animation: socPeopleDetailPaneReveal 180ms ease; } .soc-people-employee-info-list, .soc-people-employee-info-grid { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); } .soc-people-employee-stat-grid, .soc-people-employee-stat { display: none; } .soc-people-detail-panel-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid var(--ui-divider-default, var(--soc-divider)); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--ui-bg-surface, var(--soc-card-bg)) 22%); } .soc-people-detail-empty { min-height: 196px; display: grid; align-content: center; gap: 6px; padding: 18px; border: 1px dashed var(--ui-divider-default, var(--soc-divider)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } .soc-people-detail-empty strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 16px; line-height: 24px; } .soc-people-employee-info-card { display: grid; grid-template-columns: minmax(88px, auto) minmax(0, 1fr); gap: 12px; min-width: 0; align-items: baseline; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); border-radius: 0; background: transparent; } .soc-people-employee-info-card:last-child { border-bottom: 0; } .soc-people-employee-info-card.is-stack { grid-template-columns: minmax(0, 1fr); gap: 4px; } .soc-people-employee-info-card.is-prominent { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 4px; padding-bottom: 14px; } .soc-people-employee-info-card strong { display: block; font-size: 16px; line-height: 22px; font-weight: 700; overflow-wrap: anywhere; } .soc-people-employee-info-card.is-prominent strong { font-size: 22px; line-height: 28px; letter-spacing: -0.02em; } .soc-people-employee-info-card span { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 600; } .soc-people-employee-hero-headline .soc-directory-status { flex-shrink: 0; min-height: 28px; padding: 4px 10px; border-radius: 999px; background: rgba(34, 197, 94, 0.1); color: #166534; font-size: 12px; line-height: 16px; font-weight: 700; } @keyframes socPeopleDetailPaneReveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .soc-employee-create-view { width: 100%; max-width: 100%; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } .soc-employee-create-page { display: grid; gap: 12px; width: 100%; max-width: 100%; min-width: 0; } .soc-employee-create-header { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--soc-divider); background: var(--soc-bg); } .soc-employee-create-header h3 { margin: 0; min-width: 0; font-size: 17px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-employee-create-form { display: grid; gap: 12px; margin: 0; } .soc-employee-create-view.is-edit-mode .soc-employee-create-form { padding-bottom: calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 88px); } .soc-employee-form-footer { position: sticky; left: 0; right: 0; bottom: 0; z-index: 9; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; max-width: 100%; min-width: 0; border-top: 1px solid var(--soc-divider); background: var(--soc-panel-bg); padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); transform: none !important; filter: none !important; } .soc-employee-form-footer .ds-btn { width: 100%; min-width: 0; min-height: 44px; } .soc-employee-create-section { border: 1px solid var(--soc-border); border-radius: 14px; background: var(--soc-card-bg); padding: 12px; display: grid; gap: 8px; min-width: 0; } .soc-employee-create-section h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--soc-text); } .soc-employee-login-id-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; max-width: 100%; min-width: 0; } .soc-employee-login-id-status { margin: -2px 0 2px; font-size: 12px; line-height: 1.3; min-height: 16px; color: var(--soc-text-sub); } .soc-employee-login-id-status.is-error { color: var(--soc-danger); } .soc-employee-login-id-status.is-success { color: var(--soc-success); } .soc-employee-login-id-status.is-info { color: var(--soc-text-sub); } .soc-employee-account-password-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; max-width: 100%; min-width: 0; } .soc-employee-form-edit-only { display: grid; gap: 8px; min-width: 0; } .soc-employee-account-reset-row { display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .soc-employee-account-reset-row .ds-btn { width: auto; min-width: 128px; } #peopleView.is-employee-create-open { overflow-y: hidden !important; padding-bottom: 0 !important; } #peopleView.is-employee-create-open #employeeCreateView { display: block; min-height: 0; height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } #accountPanel, #employeeSection, #employeeList { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; } .soc-employee-directory-toolbar { display: grid; gap: 10px; padding: 18px 20px; } #peopleView .soc-people-workspace-toolbar { display: grid; gap: 12px; padding: 18px 20px; } #peopleView .soc-people-admin-title-block { display: grid; gap: 4px; } #peopleView .soc-people-workspace-toolbar-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; } #peopleView .soc-people-workspace-toolbar-main { display: flex; align-items: flex-end; gap: 14px; flex: 1 1 720px; min-width: 0; flex-wrap: wrap; } #peopleView .soc-people-workspace-toolbar-utility { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-left: auto; } #peopleView :is(.soc-employee-directory-toolbar-main, .soc-monitoring-toolbar-controls) .soc-inline-field { align-items: center; gap: 10px; } #peopleView :is(.soc-employee-directory-toolbar-main, .soc-monitoring-toolbar-controls) :is(input, select, .ds-input, .ds-select) { min-height: 44px; height: 44px; padding: 0 14px; line-height: 20px; box-sizing: border-box; } #peopleView :is(.soc-employee-directory-toolbar-main, .soc-monitoring-toolbar-controls) :is(select, .ds-select) { padding-right: 38px; } #peopleView .soc-people-workspace-toolbar-cluster { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } #peopleView .soc-people-workspace-danger-cluster { display: flex; align-items: center; gap: 8px; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--ui-divider-default, var(--soc-divider)); } #peopleView .soc-people-workspace-badges { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; min-width: 0; } #peopleView .soc-people-workspace-badge { display: grid; gap: 2px; min-width: 76px; padding: 6px 9px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 9px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); box-shadow: none; } #peopleView .soc-people-workspace-badge strong { font-size: 15px; line-height: 22px; color: var(--ui-text-primary, var(--soc-text)); } #peopleView :is(.soc-employee-directory-toolbar-label, .soc-monitoring-toolbar-label) { font-size: 11px; line-height: 14px; } #peopleView .soc-people-danger-utility { border-color: rgba(180, 35, 24, 0.18); background: transparent; color: #b42318; box-shadow: none; } #peopleView .soc-people-danger-utility:hover { background: rgba(180, 35, 24, 0.06); border-color: rgba(180, 35, 24, 0.26); } #peopleView .soc-people-pane-summary { padding: 16px 18px; } #peopleView .soc-people-pane-summary-head .meta, #peopleView .soc-employee-directory-toolbar-note, #peopleView .soc-employee-directory-grid .soc-workspace-card-head .meta, #peopleView .soc-monitoring-grid .soc-workspace-card-head .meta { display: none; } #peopleView .soc-people-detail-panel-heading .meta { display: block; } .soc-employee-directory-toolbar-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .soc-employee-directory-toolbar-main { display: flex; align-items: flex-end; gap: 8px; flex: 1 1 720px; min-width: 0; flex-wrap: wrap; } .soc-employee-directory-field { display: grid; gap: 9px; min-width: 136px; align-items: stretch; } .soc-employee-directory-field > span, .soc-employee-directory-toolbar-label { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; padding-left: 2px; } .soc-employee-directory-search { min-width: min(280px, 100%); flex: 1 1 280px; } .soc-employee-directory-toolbar-summary { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; } .soc-employee-directory-summary-block { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } .soc-employee-directory-summary-block strong { font-size: var(--type-section-md-size, 16px); line-height: var(--type-section-md-line, 24px); color: var(--ui-text-primary, var(--soc-text)); } .soc-employee-directory-toolbar-note { margin: 0; } .soc-employee-directory-grid { display: grid; gap: 16px; min-height: 0; } .soc-employee-directory-state { min-height: 144px; display: grid; place-items: center; text-align: center; gap: 4px; padding: 18px; border: 1px dashed var(--ui-divider-default, var(--soc-divider)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } .soc-employee-directory-state strong { font-size: var(--type-section-md-size, 16px); line-height: var(--type-section-md-line, 24px); color: var(--ui-text-primary, var(--soc-text)); } .soc-employee-directory-grid-wrap { min-width: 0; overflow: auto; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px 12px 0 0; background: var(--ui-bg-surface, #fff); } .soc-employee-directory-pagination { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-top: 0; border-radius: 0 0 12px 12px; background: color-mix(in srgb, var(--ui-bg-surface, #fff) 94%, rgba(249, 115, 22, 0.06)); } .soc-employee-directory-pagination-summary { display: inline-flex; align-items: baseline; gap: 4px; justify-self: start; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; line-height: 18px; } .soc-employee-directory-pagination-summary strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 14px; line-height: 20px; } .soc-employee-directory-pagination-controls { display: inline-flex; align-items: center; justify-content: center; justify-self: center; flex-wrap: wrap; gap: 8px; } .soc-employee-directory-page-nav, .soc-employee-directory-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 999px; background: var(--ui-bg-surface, var(--soc-card-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; line-height: 18px; font-weight: 700; transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; } .soc-employee-directory-page-nav { min-width: auto; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--ui-text-secondary, var(--soc-text-sub)); box-shadow: none; } .soc-employee-directory-page-btn { border-radius: 12px; } .soc-employee-directory-page-nav:hover, .soc-employee-directory-page-btn:hover { border-color: rgba(249, 115, 22, 0.28); color: var(--soc-people-accent-strong); } .soc-employee-directory-page-nav:hover { border-color: transparent; background: rgba(249, 115, 22, 0.08); } .soc-employee-directory-page-nav:disabled { opacity: 0.4; cursor: not-allowed; } .soc-employee-directory-page-btn.is-active, .soc-employee-directory-page-btn[aria-current="page"] { border-color: rgba(249, 115, 22, 0.32); background: rgba(249, 115, 22, 0.12); color: var(--soc-people-accent-strong); box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.12); } .soc-employee-directory-pagination-spacer { min-height: 1px; } .soc-employee-directory-page-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; line-height: 18px; font-weight: 700; } .soc-employee-directory-table { width: 100%; min-width: 940px; border-collapse: collapse; } .soc-employee-directory-table th, .soc-employee-directory-table td { padding: 12px 14px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); text-align: left; vertical-align: middle; } .soc-employee-directory-table thead th { position: sticky; top: 0; z-index: 1; background: var(--ui-bg-surface, #fff); font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; } .soc-employee-directory-table tbody td { font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); color: var(--ui-text-primary, var(--soc-text)); } .soc-employee-directory-table tbody tr { cursor: pointer; transition: background 0.16s ease; } .soc-employee-directory-table tbody tr:hover, .soc-employee-directory-table tbody tr:focus-visible, .soc-employee-directory-table tbody tr.is-selected, .soc-employee-directory-table tbody tr.is-context-open { background: color-mix(in srgb, var(--soc-primary-soft-bg) 44%, var(--ui-bg-surface, #fff)); outline: none; } .soc-people-context-menu { position: fixed; z-index: 2600; display: grid; gap: 4px; min-width: 212px; max-width: min(280px, calc(100vw - 24px)); padding: 8px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 92%, rgba(15, 23, 42, 0.08)); border-radius: 16px; background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-card-bg)) 94%, rgba(255, 255, 255, 0.96)); box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16); backdrop-filter: blur(12px); } .soc-people-context-menu.hidden { display: none; } .soc-people-context-menu-item { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ui-text-primary, var(--soc-text)); text-align: left; transition: background-color 0.16s ease, color 0.16s ease; } .soc-people-context-menu-item strong { display: block; font-size: 14px; line-height: 20px; } .soc-people-context-menu-item span { display: block; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; } .soc-people-context-menu-item:hover, .soc-people-context-menu-item:focus-visible { background: color-mix(in srgb, var(--soc-primary-soft-bg) 44%, var(--ui-bg-surface, #fff)); outline: none; } .soc-people-context-menu-item.is-danger { color: #b91c1c; } .soc-people-context-menu-item.is-danger span { color: color-mix(in srgb, #b91c1c 68%, var(--ui-text-secondary, var(--soc-text-sub))); } .soc-people-context-menu-item:disabled { cursor: not-allowed; opacity: 0.56; } .soc-directory-sort-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } .soc-directory-sort-button.is-active { color: var(--ui-text-primary, var(--soc-text)); } .soc-directory-sort-indicator { display: inline-flex; min-width: 10px; justify-content: center; } .soc-directory-grid-primary { font-weight: 600; color: var(--ui-text-primary, var(--soc-text)); overflow-wrap: anywhere; } .soc-directory-grid-secondary { margin-top: 2px; color: var(--ui-text-secondary, var(--soc-text-sub)); overflow-wrap: anywhere; } .soc-directory-status { display: inline-flex; align-items: center; gap: 6px; } .soc-directory-status.is-active { color: #166534; } .soc-directory-status.is-terminated { color: #7c2d12; } #peopleView .soc-status-dot.is-active { background: #16a34a; } #peopleView .soc-status-dot.is-terminated { background: #c2410c; } .soc-people-create-actions { display: flex; justify-content: flex-end; flex-wrap: nowrap; align-items: center; gap: 8px; position: sticky; bottom: 0; left: 0; right: 0; z-index: 3; margin-top: 6px; border-top: 1px solid var(--soc-divider); background: var(--soc-panel-bg); transform: none; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); } .employee-form { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; } .employee-form input, .employee-form select, .employee-form textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border-radius: 10px; line-height: 1.2; } .employee-form select { min-height: 46px; font-size: 15px; line-height: 1.35; padding-right: 34px; } .employee-form .form-row { margin-bottom: 10px; } .soc-employee-site-filter { display: inline-flex; align-items: center; gap: 8px; } .soc-employee-site-filter label { font-size: 12px; font-weight: 600; color: var(--soc-text-sub); } .soc-employee-site-filter select { min-width: 148px; min-height: 34px; border: 1px solid var(--soc-border); border-radius: 10px; padding: 6px 10px; background: var(--soc-input-bg); color: var(--soc-text); } @media (max-width: 768px) { #peopleHubEmployeesPane > .soc-block > .soc-block-head { flex-wrap: wrap; align-items: flex-start; gap: 8px; } .soc-employee-site-filter { width: 100%; margin-left: 0; } .soc-employee-site-filter select { width: 100%; min-width: 0; } } .soc-block-value { font-size: 18px; color: var(--soc-primary); } .soc-weekly-status-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; min-height: 26px; border-radius: 999px; padding: 0 10px; font-size: 12px; font-weight: 700; line-height: 1; border: 1px solid var(--soc-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-weekly-status-badge.is-submitted { color: var(--soc-success); background: color-mix(in srgb, var(--soc-success) 14%, transparent); border-color: color-mix(in srgb, var(--soc-success) 35%, var(--soc-border)); } .soc-weekly-status-badge.is-draft { color: var(--soc-primary); background: var(--soc-primary-soft-bg); border-color: color-mix(in srgb, var(--soc-primary) 38%, var(--soc-border)); } .soc-weekly-status-badge.is-not-started { color: var(--soc-text-sub); background: var(--soc-surface-overlay-11); border-color: var(--soc-border); } .soc-list-mini { display: grid; gap: 8px; align-content: start; width: 100%; min-width: 0; } .soc-list-mini > * { width: 100%; min-width: 0; margin-left: 0 !important; justify-self: stretch; } .soc-danger-panel { margin: 10px 0 14px; border: 1px solid color-mix(in srgb, var(--soc-danger) 45%, var(--soc-border)); border-radius: 12px; background: color-mix(in srgb, var(--soc-danger-soft-bg) 45%, var(--soc-card-bg)); padding: 10px; display: grid; gap: 8px; } .soc-purge-scope { display: grid; gap: 6px; } .soc-purge-scope-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } .soc-purge-scope label { display: flex; align-items: center; gap: 8px; min-height: 34px; border: 1px solid var(--soc-border); border-radius: 8px; padding: 6px 8px; background: var(--soc-card-bg); } .purge-site-modal-panel { width: min(560px, 96vw); max-height: min(88vh, 760px); overflow: hidden; } .purge-site-modal-body { display: grid; gap: 10px; padding: 12px 14px calc(env(safe-area-inset-bottom) + 14px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .purge-site-modal-body > * { min-width: 0; } .purge-site-modal-actions { display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; padding-top: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-surface) 40%, transparent), var(--soc-surface)); } @media (min-width: 720px) { .soc-purge-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .soc-mini-row { display: block; width: 100%; min-width: 0; margin: 0 !important; border: 1px solid var(--soc-border); border-radius: var(--soc-radius-sm); background: var(--soc-mini-row-bg); box-sizing: border-box; padding: 8px 10px; font-size: var(--soc-text-sm); text-align: left; color: var(--soc-text); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; transform: none; } .soc-list-mini > .soc-mini-row + .soc-mini-row, button.soc-mini-row + button.soc-mini-row { margin-left: 0 !important; } .soc-mini-row:hover { transform: translateY(-1px); box-shadow: 0 8px 18px var(--soc-shadow); } .soc-mini-row:active { transform: scale(0.99); } .soc-mini-row strong { color: var(--soc-text-accent-soft); } .soc-mini-row .meta { margin-top: 3px; } .soc-insight-item { border: 1px dashed var(--soc-border); border-radius: var(--soc-radius-sm); background: var(--soc-panel-bg); padding: 8px 10px; color: var(--soc-text-sub); font-size: var(--soc-text-sm); } .soc-insight-item-button { width: 100%; display: block; appearance: none; text-align: left; cursor: pointer; font: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .soc-insight-item-button:hover { border-color: color-mix(in srgb, var(--soc-primary) 42%, var(--soc-border)); box-shadow: 0 10px 20px var(--soc-shadow); transform: translateY(-1px); } .soc-insight-item-button:active { transform: scale(0.99); } .soc-focus-cta { border: 1px solid var(--soc-border); border-radius: var(--soc-radius-md); background: var(--soc-panel-bg); padding: 10px; display: grid; gap: 8px; } .soc-focus-cta-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* Filter + Chips */ .soc-filterbar { display: grid; gap: 8px; grid-template-columns: 1.7fr 1fr 1fr 1fr; border: 1px solid var(--soc-border); border-radius: 12px; padding: 10px; background: var(--soc-filterbar-bg); } .soc-filter-item { display: grid; gap: 6px; } .soc-filter-item label { font-size: var(--soc-text-xs); color: var(--soc-muted); } .date-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .date-filter-btn.active, .site-filter-btn.active, .sla-page-btn.active, .report-tab.active, .announcement-mode-btn.active { background: var(--soc-nav-item-active-bg); border-color: var(--soc-nav-item-active-border); } .date-filter-btn.active { min-height: 32px; padding: 6px 12px; line-height: 1.2; white-space: nowrap; } .chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .chip { display: inline-flex; align-items: center; justify-content: center; height: auto; min-height: 32px; padding: 6px 12px; border-radius: var(--soc-radius-pill); border: 1px solid var(--soc-border); background: var(--soc-surface-overlay-8); color: var(--soc-filter-chip-text); font-size: var(--soc-text-xs); font-weight: 700; line-height: 1.2; white-space: nowrap; } .soc-chip { display: inline-flex; align-items: center; justify-content: center; align-self: center; gap: 8px; height: 32px; min-height: 32px; max-height: 32px; padding: 0 12px; line-height: 1.2; min-width: 0; max-width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-chip > span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip.is-active { border-color: var(--soc-filter-chip-active-border); color: var(--soc-filter-chip-active-text); background: var(--soc-filter-chip-active-bg); min-height: 32px; padding: 6px 12px; } .soc-chip.is-active, .soc-chip.active { height: 32px; min-height: 32px; max-height: 32px; padding: 0 12px; line-height: 1.2; } .soc-realtime-datebar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; } .soc-realtime-datebar > * { min-width: 0; } .soc-realtime-date-display { flex: 1 1 220px; width: 100%; min-width: 0; min-height: 42px; border-radius: 12px; border: 1px solid var(--soc-border); background: var(--soc-date-display-bg); color: var(--soc-date-display-text); display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 12px; font-size: var(--soc-text-sm); font-weight: 700; text-align: left; } .soc-realtime-filter-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--soc-text-sub); } .soc-realtime-date-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .soc-realtime-date-icon-img { width: 18px; height: 18px; display: block; object-fit: contain; } .soc-realtime-announce-btn { flex: 0 0 auto; min-height: 42px; white-space: nowrap; } .soc-chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .soc-realtime-active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } #topbarNotificationsBtn { position: relative; overflow: visible !important; z-index: 3; min-width: 42px; min-height: 42px; height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; font-weight: 600; line-height: 1; } .topbar-notification-icon { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 1; } .topbar-notification-icon-img { width: 28px; height: 28px; display: block; object-fit: contain; } .topbar-notification-badge { position: absolute; top: -4px; right: -5px; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; border: 1px solid var(--soc-card-bg); background: var(--soc-danger); color: var(--soc-on-primary); font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0; text-align: center; pointer-events: none; box-sizing: border-box; z-index: 4; } .soc-active-filter-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: var(--soc-radius-pill); border: 1px solid var(--soc-filter-chip-active-border); background: var(--soc-filter-chip-active-bg); color: var(--soc-filter-chip-active-text); font-size: 11px; font-weight: 700; } .soc-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; } .soc-summary-card { min-height: 82px; border-radius: 12px; border: 1px solid var(--soc-border); background: linear-gradient(180deg, var(--soc-summary-grad-1), var(--soc-summary-grad-2)); box-shadow: 0 6px 18px var(--soc-shadow); padding: 10px 12px; display: grid; align-content: space-between; justify-items: start; text-align: left; color: var(--soc-text); transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.22s ease, background-color 0.22s ease; } .soc-summary-card.is-active { border-color: var(--soc-summary-active-border); background: linear-gradient(175deg, var(--soc-summary-active-grad-1), var(--soc-summary-active-grad-2)); } .soc-summary-card.is-active .soc-summary-value { color: var(--soc-primary); } .soc-summary-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--soc-shadow); } .soc-summary-card:active { transform: scale(0.99); } .soc-summary-label { font-size: 12px; color: var(--soc-summary-label); font-weight: 700; } .soc-summary-value { font-size: 30px; line-height: 1; color: var(--soc-summary-value); } .soc-summary-grid-skeleton { pointer-events: none; } .soc-summary-card-skeleton { min-height: 82px; border-radius: 12px; border: 1px solid var(--soc-border); background: linear-gradient( 110deg, var(--soc-shimmer-1) 15%, var(--soc-shimmer-2) 30%, var(--soc-shimmer-1) 45% ); background-size: 220% 100%; animation: socShimmer 1.2s linear infinite; } /* Incident cards */ .incident-list { display: grid; gap: 10px; } .soc-alerts-feed-section { display: grid; gap: 8px; margin-top: 10px; } .soc-alerts-feed-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .soc-alerts-feed-head h3 { margin: 0; font-size: 13px; font-weight: 800; color: var(--soc-text); } .incident-card { position: relative; overflow: hidden; border-radius: var(--soc-radius-card); border: 1px solid var(--soc-border); background: var(--soc-card-bg); box-shadow: var(--soc-shadow-soft); padding: 12px 12px 12px 18px; transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.22s ease; } .incident-card.incident-focus, .incident-card.highlight-pulse { border-color: color-mix(in srgb, var(--soc-primary) 70%, var(--soc-border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--soc-primary) 28%, transparent), var(--soc-shadow-soft); } @keyframes socIncidentFocusPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--soc-primary) 34%, transparent), var(--soc-shadow-soft); border-color: color-mix(in srgb, var(--soc-primary) 75%, var(--soc-border)); } 60% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--soc-primary) 0%, transparent), 0 12px 22px var(--soc-shadow); border-color: color-mix(in srgb, var(--soc-primary) 65%, var(--soc-border)); } 100% { box-shadow: var(--soc-shadow-soft); border-color: var(--soc-border); } } .incident-card.highlight-pulse { animation: socIncidentFocusPulse 1.6s ease-out 1; } .ticket-card.ticket-focus, .ticket-card.ticket-highlight-pulse { border-color: color-mix(in srgb, var(--soc-primary) 70%, var(--soc-border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--soc-primary) 28%, transparent), var(--soc-shadow-soft); } @keyframes socTicketFocusPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--soc-primary) 34%, transparent), var(--soc-shadow-soft); border-color: color-mix(in srgb, var(--soc-primary) 75%, var(--soc-border)); } 60% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--soc-primary) 0%, transparent), 0 12px 22px var(--soc-shadow); border-color: color-mix(in srgb, var(--soc-primary) 65%, var(--soc-border)); } 100% { box-shadow: var(--soc-shadow-soft); border-color: var(--soc-border); } } .ticket-card.ticket-highlight-pulse { animation: socTicketFocusPulse 1.6s ease-out 1; } .incident-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--soc-primary); border-radius: 14px 0 0 14px; opacity: 0.9; } .incident-card[data-severity="eci3"]::before, .incident-card[data-severity="eci4"]::before { width: 4px; opacity: 1; } .incident-card[data-critical="1"]::before, .incident-card.is-critical-incident::before { width: 5px; opacity: 1; background: var(--soc-primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--soc-primary) 22%, transparent); } .incident-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--soc-shadow); } .incident-card:active { transform: scale(0.99); } .incident-card.deleted { opacity: 0.45; } .incident-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 5px; } .incident-head-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; min-width: 0; } .incident-critical-star { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; color: var(--soc-danger); font-size: 15px; font-weight: 700; line-height: 1; padding: 0; } #incidentList .incident-card[data-critical="1"] .incident-title, #incidentList .incident-card.is-critical-incident .incident-title, #incidentList .incident-card[data-critical="1"] .incident-type, #incidentList .incident-card.is-critical-incident .incident-type { color: var(--soc-danger); } .incident-title { margin: 0; min-width: 0; flex: 1 1 auto; font-size: var(--soc-text-md); font-weight: 800; color: var(--soc-incident-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .incident-type { margin: 0 0 4px; color: var(--soc-incident-type); font-size: var(--soc-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .incident-created-at { margin: 0 0 8px; color: var(--soc-muted); text-align: left; font-size: var(--soc-text-sm); white-space: nowrap; font-weight: 400; } .incident-card-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .incident-severity, .incident-location, .incident-status, .incident-urgent-badge, .incident-type-badge, .incident-category-badge { margin: 0; border-radius: var(--soc-radius-pill); border: 1px solid var(--soc-incident-pill-border); background: var(--soc-incident-pill-bg); color: var(--soc-incident-pill-text); font-size: var(--soc-text-xs); padding: 4px 10px; width: fit-content; } .incident-urgent-badge { color: var(--soc-danger); border-color: color-mix(in srgb, var(--soc-danger) 40%, var(--soc-border)); background: color-mix(in srgb, var(--soc-danger) 12%, transparent); font-weight: 700; } .incident-severity.eci-level-2 { background: var(--eci2-bg); border-color: var(--eci2-border); color: var(--eci2-fg); } .incident-severity.eci-level-3 { background: var(--eci3-bg); border-color: var(--eci3-border); color: var(--eci3-fg); } .incident-severity.eci-level-4 { background: var(--eci4-bg); border-color: var(--eci4-border); color: var(--eci4-fg); } .incident-card[data-severity="eci3"] .incident-title, .incident-card[data-severity="eci3"] .incident-type, .incident-card[data-severity="eci4"] .incident-title, .incident-card[data-severity="eci4"] .incident-type { color: var(--eci3-fg); } .incident-card.incident-ticket-card.status-pending::before { background: var(--soc-warning); } .incident-card.incident-ticket-card.status-needs-info::before { background: var(--soc-primary); } .incident-card.incident-ticket-card.status-approved::before { background: var(--soc-success); } .incident-card.incident-ticket-card.status-unavailable::before { background: var(--soc-warning); } .incident-card.incident-ticket-card.status-rejected::before { background: var(--soc-danger); } .incident-card.incident-ticket-card.status-cancelled::before { background: var(--soc-text-sub); } .incident-card.incident-ticket-card.status-done::before { background: var(--soc-text-sub); } .incident-card.incident-ticket-card.status-unavailable, .incident-card.incident-ticket-card.status-rejected, .incident-card.incident-ticket-card.status-cancelled { opacity: 0.72; } .incident-card .incident-ticket-status { background: var(--soc-surface-overlay-11); } .incident-card .incident-ticket-status.status-pending { color: var(--soc-warning); border-color: color-mix(in srgb, var(--soc-warning) 36%, var(--soc-border)); background: color-mix(in srgb, var(--soc-warning) 12%, transparent); } .incident-card .incident-ticket-status.status-needs-info { color: var(--soc-primary); border-color: color-mix(in srgb, var(--soc-primary) 36%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary) 12%, transparent); } .incident-card .incident-ticket-status.status-approved { color: var(--soc-success); border-color: color-mix(in srgb, var(--soc-success) 36%, var(--soc-border)); background: color-mix(in srgb, var(--soc-success) 12%, transparent); } .incident-card .incident-ticket-status.status-unavailable { color: var(--soc-warning); border-color: color-mix(in srgb, var(--soc-warning) 36%, var(--soc-border)); background: color-mix(in srgb, var(--soc-warning) 12%, transparent); } .incident-card .incident-ticket-status.status-rejected { color: var(--soc-danger); border-color: color-mix(in srgb, var(--soc-danger) 36%, var(--soc-border)); background: color-mix(in srgb, var(--soc-danger) 12%, transparent); } .incident-card .incident-ticket-status.status-cancelled { color: var(--soc-text-sub); border-color: color-mix(in srgb, var(--soc-text-sub) 35%, var(--soc-border)); background: color-mix(in srgb, var(--soc-text-sub) 12%, transparent); } .incident-card .incident-ticket-status.status-done { color: var(--soc-text-sub); } #alertsTicketList .incident-ticket-card .incident-ticket-description { margin-top: 0; } .incident-more-btn { min-width: 32px; width: 32px; height: 32px; line-height: 1; padding: 0; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--soc-border) !important; background: transparent !important; color: var(--soc-text) !important; } .incident-more-btn:hover, .incident-more-btn:focus-visible { background: var(--soc-primary-soft-bg) !important; border-color: var(--soc-border-strong) !important; } .incident-more-menu { position: absolute; top: 44px; right: 14px; z-index: 12; min-width: 190px; border-radius: 12px; border: 1px solid var(--soc-border); background: var(--soc-panel-bg); box-shadow: 0 10px 18px var(--soc-menu-shadow-color); padding: 10px; display: grid; gap: 8px; } .incident-more-menu-head { font-size: var(--soc-text-xs); color: var(--soc-text-soft); font-weight: 700; } .incident-menu-status-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; } .incident-menu-status-wrap .status-label { color: var(--soc-text-accent-soft); font-size: var(--soc-text-xs); font-weight: 700; } .incident-menu-status-wrap .statusSelect { min-width: 0; } .critical-text { color: var(--soc-critical-text); } .controls, .instruction-form, .incident-actions, .notification-actions, .confirm-actions, .attachment-preview-controls, .attachment-preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .controls .statusSelect, .instruction-form .instructionInput { flex: 1; min-width: 160px; } .controls { align-items: center; margin-top: 6px; } .controls .status-label { color: var(--soc-text-accent-soft); font-size: var(--soc-text-sm); font-weight: 700; } .controls .statusSelect { flex: 0 0 auto; min-width: 122px; } .instruction-list { margin-top: 10px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-panel-bg); color: var(--soc-text); padding: 10px; white-space: pre-wrap; } .notification-feed-type { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--soc-border); background: var(--soc-surface-overlay-10); color: var(--soc-text-accent-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 6px; min-width: 0; max-width: 100%; justify-self: start; } .notification-feed-type.critical { border-color: var(--soc-primary); background: var(--soc-primary-soft-bg); color: var(--soc-primary); } .notification-critical-icon { flex: 0 0 auto; color: var(--soc-primary); font-size: 13px; line-height: 1; } .notification-empty-state { border: 1px dashed var(--soc-border); border-radius: 12px; background: var(--soc-card-bg); padding: 12px; display: grid; gap: 8px; } .notification-empty-state p { margin: 0; } .ticket-list { display: grid; gap: 10px; } .soc-pc-list-header { display: none; } .soc-pc-side-panel { display: none; } .incident-comment-preview { display: none; } .ticket-row-summary { display: none; } .ticket-requested-count-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--soc-warning) 46%, var(--soc-border)); background: color-mix(in srgb, var(--soc-warning) 14%, transparent); color: color-mix(in srgb, var(--soc-warning) 86%, #7c3f00); font-size: 11px; font-weight: 700; line-height: 1.15; padding: 2px 7px; white-space: nowrap; max-width: 100%; } .ticket-requested-count-badge.is-empty { border-color: var(--soc-border); background: var(--soc-surface-overlay-11); color: var(--soc-text-sub); } .ticket-list-compact .ticket-card { padding: 10px 10px 10px 12px; gap: 8px; } .ticket-list-compact .ticket-title { font-size: 14px; } .ticket-list-compact .ticket-desc { margin: 0; font-size: 12px; color: var(--soc-text-sub); } .ticket-card { position: relative; border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-card-bg); padding: 12px; display: grid; gap: 10px; box-sizing: border-box; box-shadow: 0 8px 20px var(--soc-shadow); } .ticket-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 12px 0 0 12px; background: var(--soc-warning); } .ticket-card.status-needs-info::before { background: var(--soc-primary); } .ticket-card.status-approved::before { background: var(--soc-success); } .ticket-card.status-unavailable::before { background: var(--soc-warning); } .ticket-card.status-rejected::before { background: var(--soc-danger); } .ticket-card.status-cancelled::before { background: var(--soc-text-sub); } .ticket-card.status-done::before { background: var(--soc-text-sub); } .ticket-card.deleted { opacity: 0.68; } .ticket-card.status-unavailable, .ticket-card.status-rejected, .ticket-card.status-cancelled { opacity: 0.66; } .ticket-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .ticket-head-pills { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } .ticket-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--soc-text); line-height: 1.3; } .ticket-title.is-urgent { color: var(--soc-danger); } .ticket-status-pill { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; border: 1px solid var(--soc-border); padding: 3px 8px; font-size: 11px; font-weight: 700; color: var(--soc-text); background: var(--soc-surface-overlay-13); } .ticket-urgent-pill { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--soc-danger) 36%, var(--soc-border)); padding: 3px 8px; font-size: 11px; font-weight: 700; color: var(--soc-danger); background: color-mix(in srgb, var(--soc-danger) 12%, transparent); } .ticket-status-pill.status-pending { color: var(--soc-warning); border-color: color-mix(in srgb, var(--soc-warning) 36%, var(--soc-border)); background: color-mix(in srgb, var(--soc-warning) 12%, transparent); } .ticket-status-pill.status-needs-info { color: var(--soc-primary); border-color: color-mix(in srgb, var(--soc-primary) 36%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary) 12%, transparent); } .ticket-status-pill.status-approved { color: var(--soc-success); border-color: color-mix(in srgb, var(--soc-success) 36%, var(--soc-border)); background: color-mix(in srgb, var(--soc-success) 12%, transparent); } .ticket-status-pill.status-unavailable { color: var(--soc-warning); border-color: color-mix(in srgb, var(--soc-warning) 36%, var(--soc-border)); background: color-mix(in srgb, var(--soc-warning) 12%, transparent); } .ticket-status-pill.status-rejected { color: var(--soc-danger); border-color: color-mix(in srgb, var(--soc-danger) 36%, var(--soc-border)); background: color-mix(in srgb, var(--soc-danger) 12%, transparent); } .ticket-status-pill.status-cancelled { color: var(--soc-text-sub); border-color: color-mix(in srgb, var(--soc-text-sub) 35%, var(--soc-border)); background: color-mix(in srgb, var(--soc-text-sub) 12%, transparent); } .ticket-status-pill.status-done { color: var(--soc-text-sub); } .ticket-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--soc-text-sub); } .ticket-meta > span { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--soc-border); padding: 2px 8px; background: var(--soc-surface-overlay-11); } .ticket-desc, .ticket-meta-line { margin: 0; font-size: 13px; line-height: 1.45; color: var(--soc-text); } .ticket-kv-list { display: grid; gap: 7px; } .ticket-kv-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; align-items: start; } .ticket-kv-label, .ticket-kv-value { margin: 0; font-size: 13px; line-height: 1.45; } .ticket-kv-label { color: var(--soc-text-sub); font-weight: 700; } .ticket-kv-value { color: var(--soc-text); min-width: 0; white-space: normal; word-break: keep-all; overflow-wrap: break-word; } .ticket-card.ticket-work-support-card .ticket-final-need-number { color: var(--soc-warning); font-weight: 800; } .ticket-long-text { border: 1px solid var(--soc-border); border-radius: 8px; background: var(--soc-surface-overlay-11); padding: 8px 10px; } .ticket-reason-text { background: none; border: none; padding: 0; white-space: normal; word-break: break-word; } .ticket-actions-row { display: flex; align-items: center; justify-content: flex-end; } .ticket-action-row { display: flex; align-items: center; justify-content: flex-start; } .ticket-location-pill { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--soc-border); background: var(--soc-surface-overlay-11); color: var(--soc-text-sub); font-size: 12px; font-weight: 600; line-height: 1.25; padding: 4px 10px; white-space: nowrap; } .ticket-location-btn { white-space: nowrap; } .ticket-full-content-actions { margin-top: 2px; } #ticketStatusFilterChips { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } #ticketStatusFilterChips .chip { flex: 0 0 auto; } #ticketsView .soc-ticket-datebar, #ticketsView .soc-ticket-summary-grid { margin-bottom: 10px; } #ticketsView .soc-ticket-filter-compact-row { display: flex; align-items: center; gap: 8px; padding: 0 0 4px; min-width: 0; } #ticketsView .soc-ticket-filter-compact-summary { margin: 0; min-width: 0; flex: 1 1 auto; font-size: var(--ui-text-12, 12px); line-height: 1.35; color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ticketsView .soc-ticket-filter-compact-btn { flex: 0 0 auto; min-height: 36px; padding-inline: 10px; } #ticketsView .soc-ticket-active-filters { margin-bottom: 10px; } .ticket-status-select { min-width: 132px; } .ticket-attachments, .ticket-comments { border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-panel-bg); padding: 9px; } .ticket-comments-title { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--soc-text-accent-soft); } .ticket-comment-list { display: grid; gap: 8px; } .ticket-comment-item { border: 1px solid var(--soc-border); border-radius: 8px; background: var(--soc-card-bg); padding: 8px; display: grid; gap: 3px; } .ticket-comment-item strong { color: var(--soc-text); font-size: 12px; } .ticket-comment-body { min-width: 0; } .ticket-comment-item span { color: var(--soc-text); font-size: 12px; line-height: 1.4; } .ticket-comment-item small { color: var(--soc-text-sub); font-size: 11px; } .soc-support-confirmed-comment { display: grid; gap: 4px; } .soc-support-confirmed-title { margin: 0; font-size: 12px; font-weight: 700; color: var(--soc-text); } .soc-support-confirmed-summary { margin: 0; font-size: 12px; color: var(--soc-text-sub); } .soc-support-confirmed-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; } .soc-support-confirmed-item { margin: 0; font-size: 12px; line-height: 1.35; color: var(--soc-text); } .ticket-comment-form, .ticket-attachment-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; } .ticket-comment-input, .ticket-attachment-input { min-width: 0; } .ticket-comment-input.is-required { border-color: var(--soc-danger) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--soc-danger) 20%, transparent); } @media (max-width: 768px) { #ticketsView .ticket-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } #ticketsView .ticket-card-head { width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 6px; } #ticketsView .ticket-card-head .ticket-title { flex: 1 1 auto; min-width: 0; } #ticketsView .ticket-card-head .ticket-head-pills { flex: 0 0 auto; margin-left: 8px; justify-content: flex-end; align-items: flex-start; } #ticketsView .ticket-card-head .ticket-status { order: 0; align-self: auto; } #ticketsView .ticket-meta { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; } #ticketsView .ticket-meta-item, #ticketsView .ticket-title, #ticketsView .ticket-extra { width: 100%; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word !important; overflow-wrap: anywhere; } #ticketsView .ticket-meta-item { display: block; justify-content: flex-start; border: 0; border-radius: 0; background: transparent; padding: 0; color: var(--soc-text-sub); font-size: 12px; line-height: 1.45; } #ticketsView .ticket-desc, #ticketsView .ticket-meta-line { display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial; } #ticketsView .ticket-actions-row { width: 100%; justify-content: flex-start; } #ticketsView .ticket-action-row { width: 100%; } #ticketsView .ticket-location-btn { max-width: 100%; white-space: normal; word-break: break-word; } #ticketsView .ticket-location-pill { max-width: 100%; white-space: normal; word-break: break-word; } #ticketsView .ticket-status-select { width: 100%; min-width: 0; } #ticketsView .ticket-title { font-size: 14px; line-height: 1.35; } #ticketsView .ticket-kv-row { display: flex; flex-direction: row; align-items: flex-start; gap: 6px; } #ticketsView .ticket-kv-label { font-size: 12px; white-space: nowrap; flex: 0 0 auto; } #ticketsView .ticket-kv-value { font-size: 13px; flex: 1 1 auto; min-width: 0; white-space: normal; word-break: break-word; overflow-wrap: break-word; } } .notification-panel-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .panel-title-row .soc-page-header-main, .notification-panel-head .soc-page-header-main, .soc-announcement-header .soc-page-header-main, .soc-sla-header-bar .soc-page-header-main { display: grid; gap: 4px; min-width: 0; } .soc-view-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .soc-view-page-header .soc-page-header-main { display: grid; gap: 4px; min-width: 0; } .soc-view-page-header .chip-row { flex-shrink: 0; } .notification-panel-head-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } #notificationPermissionQuickBtn.is-disabled { opacity: 0.7; cursor: default; pointer-events: none; } .notification-timeline-toolbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 0; } .notification-timeline-toolbar label { display: grid; gap: 6px; font-size: var(--soc-text-xs); color: var(--soc-text-accent-muted); } .notification-filter-backdrop { position: fixed; inset: 0; z-index: 331; background: var(--soc-overlay-soft); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .notification-filter-backdrop.open { opacity: 1; pointer-events: auto; } .notification-filter-panel { position: fixed; left: clamp(10px, 3vw, 18px); right: clamp(10px, 3vw, 18px); top: calc(var(--soc-safe-top) + 68px); z-index: 332; border: 1px solid var(--soc-border); border-radius: 12px; background: linear-gradient(175deg, var(--soc-surface), var(--soc-surface-2)); box-shadow: 0 14px 28px var(--soc-overlay-soft); padding: 10px 10px 8px; opacity: 0; pointer-events: none; transform: translateY(-118%); transition: transform 0.24s ease, opacity 0.2s ease; overflow-x: hidden; overflow-y: auto; max-height: min(62dvh, 460px); -webkit-overflow-scrolling: touch; touch-action: pan-y; } .notification-filter-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); } .notification-filter-panel.dragging { transition: none; transform: translateY(var(--soc-notification-filter-drag, 0px)); } .notification-filter-handle { display: flex; justify-content: center; align-items: center; margin-top: 14px; min-height: 38px; padding: 10px 0 8px; border-top: 1px solid var(--soc-divider-strong); touch-action: none; cursor: n-resize; user-select: none; -webkit-user-select: none; } .notification-filter-handle span { display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--soc-handle-bg-strong); } .notification-timeline-list { display: grid; gap: 10px; min-width: 0; } .case-timeline-card { border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-card-bg); padding: 11px; display: grid; gap: 8px; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .case-timeline-card.deleted { opacity: 0.72; } .case-timeline-head { display: grid; gap: 6px; } .case-timeline-title { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-width: 0; font-size: 15px; font-weight: 800; color: var(--soc-incident-title); } .case-timeline-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .case-timeline-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .case-status-badge, .case-eci-badge, .case-meta-text { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--soc-border); padding: 3px 8px; font-size: 11px; color: var(--soc-text-accent-soft); background: var(--soc-surface-overlay-14); } .case-eci-badge.eci2 { background: var(--soc-severity-mid-bg); border-color: var(--eci2-border); color: var(--eci2-fg); } .case-eci-badge.eci3 { background: var(--eci3-bg); border-color: var(--eci3-border); color: var(--eci3-fg); } .case-eci-badge.eci4 { background: var(--eci4-bg); border-color: var(--eci4-border); color: var(--eci4-fg); } .case-timeline-events { position: relative; display: grid; gap: 10px; padding-left: 18px; } .case-timeline-events::before { content: ""; position: absolute; left: 6px; top: 2px; bottom: 2px; width: 1px; background: var(--soc-timeline-line); } .case-timeline-event-row { display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: start; min-width: 0; } .case-timeline-dot { width: 10px; height: 10px; border-radius: 999px; margin-top: 4px; background: var(--soc-dot-default); } .case-timeline-dot.status { background: var(--soc-dot-status); } .case-timeline-dot.status-pending { background: var(--soc-warning); } .case-timeline-dot.status-approved { background: var(--soc-success); } .case-timeline-dot.status-rejected, .case-timeline-dot.status-unavailable, .case-timeline-dot.status-cancelled, .case-timeline-dot.status-done, .case-timeline-dot.status-needs_info, .case-timeline-dot.status-needs-info { background: var(--soc-danger); } .case-timeline-dot.status-received { background: var(--status-dot-received); } .case-timeline-dot.status-inprogress { background: var(--status-dot-inprogress); } .case-timeline-dot.status-closed { background: var(--status-dot-closed); } .case-timeline-dot.instruction { background: var(--soc-dot-instruction); } .case-timeline-dot.attachment { background: var(--soc-dot-attachment); } .case-timeline-dot.deleted { background: var(--soc-dot-deleted); } .case-timeline-event-body { display: grid; gap: 2px; min-width: 0; } .case-timeline-event-message { margin: 0; color: var(--soc-text-soft-8); font-size: 13px; line-height: 1.35; width: 100%; min-width: 0; max-width: 100%; white-space: normal; word-break: keep-all; overflow-wrap: normal; line-break: auto; hyphens: none; display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial; } #dashboardPanel .case-timeline-event-message { display: block; width: 100%; min-width: 0; max-width: 100%; white-space: normal; word-break: keep-all; overflow-wrap: normal; line-break: auto; hyphens: none; -webkit-line-clamp: unset; -webkit-box-orient: initial; } #dashboardPanel .global-notice-body { display: block; width: 100%; min-width: 0; max-width: 100%; white-space: normal; word-break: keep-all; overflow-wrap: break-word; line-break: auto; -webkit-line-clamp: unset; -webkit-box-orient: initial; } .notification-timeline-list .alert-item, .notification-timeline-list .case-timeline-event-message, .global-notice-body { white-space: normal; word-break: keep-all; overflow-wrap: normal; line-break: auto; hyphens: none; } .notification-timeline-list .alert-item, .notification-timeline-list .case-timeline-card { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .case-timeline-event-time { color: var(--soc-text-soft-4); font-size: 11px; } .case-timeline-actions { display: flex; justify-content: flex-end; } .alerts { display: grid; gap: 8px; min-width: 0; width: 100%; max-width: 100%; overflow-x: hidden; } .alert-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--soc-border); background: var(--soc-card-bg); padding: 9px 10px; font-size: var(--soc-text-sm); } .alert-time { flex: 0 0 auto; color: var(--soc-text-sub); white-space: nowrap; } .alert-text { flex: 1 1 auto; width: 0; min-width: 0; max-width: 100%; white-space: normal; word-break: keep-all; overflow-wrap: normal; line-break: auto; hyphens: none; } .alert-item.emergency { border-color: var(--soc-danger-soft-border); color: var(--eci34-fg); } .soc-realtime-state { border-radius: 12px; border: 1px solid var(--soc-border); background: var(--soc-panel-bg); color: var(--soc-text); padding: 14px; margin-bottom: 10px; display: grid; gap: 8px; justify-items: start; } .incident-list-skeleton { margin-bottom: 10px; } .incident-card-skeleton { min-height: 140px; background: linear-gradient( 110deg, var(--soc-shimmer-1) 15%, var(--soc-shimmer-2) 30%, var(--soc-shimmer-1) 45% ); background-size: 220% 100%; animation: socShimmer 1.2s linear infinite; } @keyframes socShimmer { from { background-position: 200% 0; } to { background-position: -20% 0; } } .alert-item.clickable { cursor: pointer; } /* Forms */ .ds-form-grid, #notificationSettingsForm, #accountPasswordForm, #userCreateForm, #employeeForm, #passwordChangeForm, #announcementForm, #incidentForm, #quickIncidentForm, #slaSettingsForm { display: grid; gap: 10px; } .soc-site-field-help { margin-top: -6px; } [data-theme="light"] #authView input[type="text"], [data-theme="light"] #authView input[type="password"] { color: var(--soc-text); caret-color: var(--soc-text); } [data-theme="light"] #authView input[type="text"]::placeholder, [data-theme="light"] #authView input[type="password"]::placeholder { color: var(--soc-text-sub); } body.soc-auth-shell-active .topbar, body.soc-auth-shell-active #globalNoticeHost, body.soc-auth-shell-active #navBackdrop, body:has(#authView:not(.hidden)) .topbar, body:has(#authView:not(.hidden)) #globalNoticeHost, body:has(#authView:not(.hidden)) #navBackdrop { display: none !important; } body.soc-auth-shell-active #longTaskProgressModal, body.soc-auth-shell-active #longTaskProgressMini, body:has(#authView:not(.hidden)) #longTaskProgressModal, body:has(#authView:not(.hidden)) #longTaskProgressMini { display: none !important; } body.soc-auth-shell-active, body:has(#authView:not(.hidden)) { overflow: auto; overscroll-behavior: auto; background: #f6f7f9; } body.soc-auth-shell-active .soc-app-shell, body:has(#authView:not(.hidden)) .soc-app-shell { min-height: 100dvh; grid-template-rows: minmax(0, 1fr); background: #f6f7f9; } body.soc-auth-shell-active .container.ds-page, body.soc-auth-shell-active .container.admin-layout, body:has(#authView:not(.hidden)) .container.ds-page, body:has(#authView:not(.hidden)) .container.admin-layout { width: 100%; max-width: none; margin: 0; min-height: 100dvh; padding: 16px !important; display: grid; place-items: center; overflow-y: auto; overscroll-behavior-y: contain; } body.soc-auth-shell-active .container.ds-page > :not(#authView), body.soc-auth-shell-active .container.admin-layout > :not(#authView), body:has(#authView:not(.hidden)) .container.ds-page > :not(#authView), body:has(#authView:not(.hidden)) .container.admin-layout > :not(#authView) { display: none !important; } body.soc-auth-shell-active #authView, body:has(#authView:not(.hidden)) #authView { position: relative; width: min(1180px, calc(100% - 32px)); min-height: min(840px, calc(100svh - 32px)); margin: 0; padding: 0; border: none; border-radius: 32px; background: radial-gradient(circle at 50% 46%, rgba(255, 107, 44, 0.12), transparent 26%), radial-gradient(circle at 50% 58%, rgba(34, 51, 72, 0.08), transparent 36%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 248, 251, 0.92)); box-shadow: 0 30px 80px rgba(24, 39, 75, 0.12); overflow: hidden; } body.soc-auth-shell-active #authView.hidden, body:has(#authView.hidden) #authView.hidden { display: none !important; } .auth-shell { position: relative; min-height: inherit; padding: clamp(24px, 4vw, 40px); } .auth-stage-grid { position: relative; z-index: 1; min-height: calc(min(840px, calc(100svh - 32px)) - (clamp(24px, 4vw, 40px) * 2)); display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(380px, 0.95fr); align-items: center; gap: clamp(28px, 4vw, 56px); } .auth-stage-glow { position: absolute; border-radius: 999px; filter: blur(10px); pointer-events: none; } .auth-stage-glow-left { inset: 50% auto auto 50%; width: 420px; height: 420px; transform: translate(-62%, -53%); background: radial-gradient(circle, rgba(255, 107, 44, 0.16), rgba(255, 107, 44, 0.04) 58%, transparent 72%); } .auth-stage-glow-right { inset: 50% auto auto 50%; width: 560px; height: 560px; transform: translate(-35%, -41%); background: radial-gradient(circle, rgba(189, 201, 222, 0.2), rgba(189, 201, 222, 0.04) 60%, transparent 76%); } .auth-hero { display: grid; align-items: center; justify-items: center; min-height: 100%; } .auth-brand-lockup { display: grid; justify-items: center; gap: 22px; text-align: center; animation: auth-fade-up 0.55s ease; } .auth-logo-mark { width: clamp(192px, 22vw, 276px); aspect-ratio: 380 / 411; display: grid; place-items: center; animation: auth-logo-drift 6s ease-in-out infinite; } .auth-logo-mark-image, .auth-wordmark-image { width: 100%; height: auto; display: block; } .auth-logo-mark-image-dark, .auth-wordmark-image-dark { display: none !important; } [data-theme="dark"] .auth-logo-mark-image-light, [data-theme="dark"] .auth-wordmark-image-light { display: none !important; } [data-theme="dark"] .auth-logo-mark-image-dark, [data-theme="dark"] .auth-wordmark-image-dark { display: block !important; } .auth-brand-copy { display: grid; gap: 14px; max-width: 460px; justify-items: center; } .auth-wordmark { width: min(100%, 332px); aspect-ratio: 346 / 46; display: block; } .auth-intro { margin: 0; color: #5d6878; font-size: clamp(15px, 1.55vw, 18px); line-height: 1.7; } .auth-form-panel { justify-self: stretch; width: min(100%, 470px); background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(215, 221, 229, 0.8); border-radius: 28px; padding: clamp(24px, 3vw, 34px); box-shadow: 0 28px 56px rgba(20, 34, 61, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8); backdrop-filter: blur(16px); animation: auth-fade-up 0.65s ease; } .auth-panel-head { display: grid; gap: 8px; margin-bottom: 22px; } #authView .auth-panel-head h2 { margin: 0; color: #1f2937; font-size: clamp(28px, 2.5vw, 34px); line-height: 1.05; letter-spacing: -0.03em; } #authView .auth-panel-head p { margin: 0; color: #7a8594; font-size: 14px; line-height: 1.65; } #authView .auth-form { gap: 16px; } #authView .auth-input-field { gap: 8px; } #authView .auth-field-label { color: #223348; font-size: 13px; line-height: 18px; font-weight: 700; } #authView .auth-input-field input { min-height: 56px; padding: 0 16px; border: 1px solid #d8dee8; border-radius: 16px; background: rgba(245, 247, 251, 0.95); color: #1f2937; font-size: 15px; line-height: 20px; transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } #authView .auth-input-field input::placeholder { color: #a0aaba; } #authView .auth-input-field input:hover:not(:disabled) { border-color: #c7d0dd; background: #f8fafc; } #authView .auth-input-field input:focus { border-color: rgba(255, 107, 44, 0.7); background: #ffffff; box-shadow: 0 0 0 4px rgba(255, 107, 44, 0.12); transform: translateY(-1px); } #authView .auth-input-field input:disabled { border-color: #e2e8f0; background: #edf1f6; color: #94a3b8; } #authView .input-helper { font-size: 12px; line-height: 18px; color: #7a8594; } #authView .tenant-helper-success { color: var(--soc-success); } #authView .tenant-helper-error { color: var(--soc-danger); } #authView .input-error { font-size: 12px; line-height: 18px; color: var(--soc-danger); } #authView .auth-input-field.auth-credential-shake { animation: auth-credential-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); } #authView .auth-input-field input.auth-credential-invalid, #authView .auth-password-wrap.auth-credential-invalid #password { border-color: rgba(239, 68, 68, 0.82); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14); } #authView .auth-input-field input.auth-credential-invalid:not(:disabled), #authView .auth-password-wrap.auth-credential-invalid #password:not(:disabled) { background: rgba(255, 246, 246, 0.98); } #authView .auth-password-wrap { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; } #authView .password-toggle { width: 40px; min-width: 40px; min-height: 40px; padding: 0; border: none; border-radius: 12px; background: transparent; box-shadow: none; color: #5f6b7d; display: grid; place-items: center; flex: 0 0 auto; } #authView .password-toggle:hover:not(:disabled) { background: transparent; border-color: transparent; box-shadow: none; color: #f97316; } #authView .password-toggle:focus-visible { outline: 2px solid rgba(249, 115, 22, 0.28); outline-offset: 2px; } #authView .password-toggle:disabled { color: #a0aaba; } #authView .password-toggle svg { width: 20px; height: 20px; display: block; } #authView .auth-options { margin-top: 8px; padding: 0; border: none; border-radius: 0; background: transparent; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } #authView .choice-row { min-height: 32px; gap: 10px; font-size: 13px; line-height: 18px; color: #344256; cursor: pointer; user-select: none; } #authView .choice-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; min-width: 16px; min-height: 16px; flex: 0 0 16px; aspect-ratio: 1 / 1; box-sizing: border-box; margin: 0; padding: 0; border: 1.5px solid #cad3df; border-radius: 4px; background: #ffffff; box-shadow: 0 4px 10px rgba(17, 24, 39, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); display: inline-grid; place-items: center; align-self: center; vertical-align: middle; line-height: 0; transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } #authView .choice-row input[type="checkbox"]::after { content: ""; width: 7px; height: 4px; border-left: 1.8px solid #ffffff; border-bottom: 1.8px solid #ffffff; transform: rotate(-45deg) translate(0, -1px) scale(0.82); opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; } #authView .choice-row input[type="checkbox"]:hover:not(:disabled) { border-color: #ffb08a; background: #fff8f4; } #authView .choice-row input[type="checkbox"]:checked { border-color: #ff6b2c; background: linear-gradient(135deg, #ff6b2c, #ff8b3d); box-shadow: 0 6px 14px rgba(255, 107, 44, 0.22); } #authView .choice-row input[type="checkbox"]:checked:hover:not(:disabled) { border-color: #ff6b2c; background: linear-gradient(135deg, #ff6b2c, #ff8b3d); box-shadow: 0 6px 14px rgba(255, 107, 44, 0.22); } #authView .choice-row input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(-45deg) translate(0, -1px) scale(1); } #authView .choice-row input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 107, 44, 0.16), 0 10px 20px rgba(255, 107, 44, 0.16); } #authView .choice-row input[type="checkbox"]:disabled { opacity: 0.58; cursor: not-allowed; } #authView .auth-submit-btn { width: 100%; min-height: 58px; border: none; border-radius: 18px; background: linear-gradient(135deg, #ff6b2c, #ff8b3d); box-shadow: 0 18px 30px rgba(255, 107, 44, 0.24); color: #ffffff; font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: -0.01em; justify-content: center; } #authView .auth-submit-btn:hover:not(:disabled) { background: linear-gradient(135deg, #ff5c18, #ff7d22); color: #ffffff; transform: translateY(-1px); } #authView .auth-submit-btn:disabled { background: #cfd7e3; box-shadow: none; color: #ffffff; } #authView .auth-form:has(#username:disabled) .auth-submit-btn { background: #cfd7e3; box-shadow: none; color: #ffffff; pointer-events: none; } #authView #authMessage { margin-top: 14px; font-size: 13px; line-height: 19px; } #authMessage.auth-info { color: #7a8594; } #authMessage.auth-success { color: var(--soc-success); font-weight: 600; } #authMessage.auth-error { color: var(--soc-danger); font-weight: 600; } [data-theme="dark"] body.soc-auth-shell-active #authView, [data-theme="dark"] body:has(#authView:not(.hidden)) #authView { background: radial-gradient(circle at 50% 46%, rgba(255, 122, 26, 0.18), transparent 26%), radial-gradient(circle at 50% 58%, rgba(118, 138, 161, 0.14), transparent 34%), linear-gradient(180deg, rgba(30, 36, 44, 0.98), rgba(24, 29, 36, 0.95)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34); } [data-theme="dark"] #authView .auth-intro, [data-theme="dark"] #authView .auth-panel-head p, [data-theme="dark"] #authView .input-helper, [data-theme="dark"] #authView .choice-row { color: #b1bccb; } [data-theme="dark"] #authView .auth-field-label, [data-theme="dark"] #authView .auth-panel-head h2 { color: #f4f7fb; } [data-theme="dark"] #authView .auth-form-panel { background: rgba(29, 35, 44, 0.88); border-color: rgba(84, 96, 112, 0.78); box-shadow: 0 28px 56px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.03); } [data-theme="dark"] #authView .auth-input-field input { background: rgba(34, 42, 53, 0.96); border-color: #445063; color: #eef2f7; } [data-theme="dark"] #authView .auth-input-field input::placeholder { color: #8894a7; } [data-theme="dark"] #authView .auth-input-field input:disabled { background: #2a3340; color: #7f8a9a; } [data-theme="dark"] #authView .auth-input-field input.auth-credential-invalid, [data-theme="dark"] #authView .auth-password-wrap.auth-credential-invalid #password { border-color: rgba(248, 113, 113, 0.82); box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.16); background: rgba(77, 37, 42, 0.45); } [data-theme="dark"] #authView .password-toggle { background: transparent; border-color: transparent; box-shadow: none; color: #c7d1de; } [data-theme="dark"] #authView .choice-row input[type="checkbox"] { background: rgba(34, 42, 53, 0.96); border-color: #556377; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.03); } [data-theme="dark"] #authView .choice-row input[type="checkbox"]:hover:not(:disabled) { border-color: #ff9a69; background: rgba(45, 53, 66, 0.98); } [data-theme="dark"] #authView .choice-row input[type="checkbox"]:checked { border-color: #ff7f44; background: linear-gradient(135deg, #ff6b2c, #ff8b3d); } [data-theme="dark"] #authView .choice-row input[type="checkbox"]:checked:hover:not(:disabled) { border-color: #ff7f44; background: linear-gradient(135deg, #ff6b2c, #ff8b3d); } @media (max-width: 960px) { body.soc-auth-shell-active .container.ds-page, body.soc-auth-shell-active .container.admin-layout, body:has(#authView:not(.hidden)) .container.ds-page, body:has(#authView:not(.hidden)) .container.admin-layout { place-items: start center; } body.soc-auth-shell-active #authView, body:has(#authView:not(.hidden)) #authView { width: min(100%, calc(100% - 20px)); min-height: calc(100svh - 20px); margin: 10px auto; border-radius: 28px; } .auth-shell { padding: 22px 18px; } .auth-stage-grid { min-height: auto; grid-template-columns: 1fr; gap: 22px; } .auth-brand-lockup { gap: 18px; } .auth-brand-copy { max-width: 100%; } .auth-form-panel { width: 100%; max-width: none; } } @media (max-width: 640px) { body.soc-auth-shell-active #authView, body:has(#authView:not(.hidden)) #authView { width: min(100%, calc(100% - 12px)); min-height: calc(100svh - 12px); margin: 6px auto; border-radius: 24px; } .auth-shell { padding: 12px 12px 14px; } .auth-stage-grid { gap: 14px; } .auth-logo-mark { width: 148px; } .auth-brand-lockup { gap: 12px; } .auth-wordmark { width: min(100%, 250px); } .auth-brand-copy { gap: 6px; } .auth-intro { font-size: 14px; line-height: 1.45; } .auth-panel-head { gap: 6px; margin-bottom: 14px; } #authView .auth-panel-head h2 { font-size: 24px; } #authView .auth-panel-head p { font-size: 13px; line-height: 1.5; } .auth-form-panel { padding: 20px 18px; } #authView .auth-options { gap: 8px 14px; } #authView .auth-password-wrap { grid-template-columns: 1fr auto; } #authView .password-toggle, #authView .auth-submit-btn, #authView .auth-input-field input { min-height: 50px; } #authView .choice-row { min-height: 32px; font-size: 12px; line-height: 16px; } } @media (max-width: 430px) { #authView .auth-options { gap: 8px 12px; } } @keyframes auth-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes auth-logo-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes auth-credential-shake { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(-6px); } 36% { transform: translateX(5px); } 54% { transform: translateX(-4px); } 72% { transform: translateX(3px); } 90% { transform: translateX(-2px); } } @media (prefers-reduced-motion: reduce) { #authView .auth-input-field.auth-credential-shake { animation: none; } } #quickIncidentForm .time-desktop, #quickIncidentForm .time-mobile { width: 100%; min-height: 42px; margin: 0; padding: 10px 12px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-surface-overlay-7); color: var(--soc-text); box-sizing: border-box; line-height: 1.2; } #quickIncidentForm input[type="time"] { appearance: none; -webkit-appearance: none; } #quickIncidentForm input[type="time"]::-webkit-date-and-time-value { text-align: left; } @media (min-width: 901px) { #reportPanel #reportView { gap: 14px; } #reportPanel.report-selection-active #reportView { gap: 14px; } #reportPanel.report-selection-active #reportFlowStart { min-height: auto; max-height: none; overflow: visible; gap: 14px; } #reportPanel.report-selection-active .report-flow-step { height: auto; min-height: 0; gap: 10px; grid-template-rows: auto auto; } #reportPanel .report-choice-grid-1col.selectable-card-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(114px, auto); gap: 12px; } #reportPanel .report-choice-grid-2col { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); grid-auto-rows: minmax(108px, auto); gap: 12px; } #reportPanel .report-choice-card, #reportPanel .report-choice-grid-1col .report-choice-card, #reportPanel .report-choice-grid-2col .report-choice-card { aspect-ratio: auto; min-height: 0; padding: 16px 16px 14px; justify-items: start; align-content: start; text-align: left; gap: 8px; } #reportPanel .report-choice-icon { font-size: 24px; } #reportPanel .report-choice-icon-img { width: 32px; height: 32px; } #reportPanel .report-choice-icon-img--ticket-template { width: 30px; height: 30px; } #reportPanel .report-choice-label, #reportPanel .report-choice-sub { text-align: left; padding: 0; } #reportPanel .report-choice-label { font-size: 14px; } #reportPanel .report-choice-sub { font-size: 12px; line-height: 1.4; } #reportPanel .report-mode-tabs { gap: 8px; } #reportPanel .report-tab { min-height: 36px; padding: 0 14px; } #reportPanel #quickIncidentForm, #reportPanel #incidentForm, #reportPanel #ticketForm { padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 28px); } #reportPanel .report-composer-form { gap: 16px; } #reportPanel .report-form-section { padding: 18px 20px; } } .soc-participant-picker-trigger { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-panel-bg); color: var(--soc-text); padding: 10px 12px; text-align: left; box-sizing: border-box; min-width: 0; } .soc-participant-picker-trigger::after { content: "열기"; font-size: 12px; font-weight: 700; color: var(--soc-primary); flex: 0 0 auto; white-space: nowrap; } body[data-display-language="en"] .soc-participant-picker-trigger::after { content: "Open"; } .soc-participant-picker-trigger.is-disabled { opacity: 0.56; cursor: not-allowed; } .soc-participant-picker-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-ticket-template-fields { display: grid; gap: 10px; min-width: 0; } .soc-ticket-form-group { display: grid; gap: 8px; min-width: 0; } .soc-ticket-inline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; } .soc-ticket-readonly-value { min-height: 44px; display: flex; align-items: center; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-surface-overlay-7); color: var(--soc-text-sub); padding: 10px 12px; box-sizing: border-box; } .soc-ticket-employee-trigger { width: 100%; min-height: 44px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); color: var(--soc-text); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; text-align: left; box-sizing: border-box; min-width: 0; } .soc-ticket-employee-trigger::after { content: "열기"; color: var(--soc-primary); font-size: 12px; font-weight: 700; white-space: nowrap; } body[data-display-language="en"] .soc-ticket-employee-trigger::after { content: "Open"; } .soc-ticket-employee-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-ticket-chip-summary { display: flex; flex-wrap: wrap; gap: 6px; } .soc-ticket-chip { display: inline-flex; align-items: center; border: 1px solid var(--soc-border); border-radius: 999px; background: var(--soc-card-bg); color: var(--soc-text-sub); font-size: 12px; line-height: 1.2; padding: 4px 10px; } .soc-ticket-reason-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 10px; min-width: 0; } .soc-ticket-reason-checks label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } #ticketEmployeePickerModal { z-index: 260; } #ticketEmployeePickerModal.hidden { display: none; } #ticketReasonPickerModal { z-index: 260; } #ticketReasonPickerModal.hidden { display: none; } #ticketCancelReasonModal { z-index: 265; } #ticketCancelReasonModal.hidden { display: none; } .soc-ticket-employee-modal-panel { width: min(620px, 96vw); max-height: min(88vh, 760px); display: grid; grid-template-rows: auto 1fr auto; } .soc-ticket-cancel-modal-panel { width: min(520px, 94vw); } .soc-ticket-employee-modal-body { padding: 12px; display: grid; gap: 10px; min-width: 0; overflow-y: auto; overflow-x: hidden; } .soc-ticket-employee-picker-list { display: grid; gap: 8px; min-width: 0; } .soc-ticket-reason-picker-list { display: grid; gap: 8px; min-width: 0; } .soc-ticket-employee-picker-list .soc-report-section-row { width: 100%; justify-content: space-between; } .soc-ticket-reason-picker-list .soc-report-section-row { width: 100%; justify-content: space-between; min-height: 40px; padding-block: 10px; } .soc-ticket-employee-picker-list .soc-report-section-copy { flex: 1 1 auto; } .soc-ticket-reason-picker-list .soc-report-section-copy { flex: 1 1 auto; display: flex; align-items: center; min-height: 20px; } .soc-ticket-reason-picker-list .soc-report-section-copy strong { display: block; line-height: 1.35; } .soc-ticket-employee-picker-list .soc-report-section-switch { align-self: center; } .soc-ticket-reason-check-wrap { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; } .soc-ticket-reason-check { width: 18px; height: 18px; accent-color: var(--soc-primary); pointer-events: none; } .soc-ticket-employee-modal-actions { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--soc-border); display: flex; justify-content: flex-end; gap: 8px; } .soc-ticket-cancel-modal-body { gap: 12px; } .soc-ticket-cancel-field { display: grid; gap: 6px; } .soc-ticket-cancel-field > span { font-size: 12px; font-weight: 700; color: var(--soc-text-sub); } .soc-ticket-cancel-field select, .soc-ticket-cancel-field textarea { width: 100%; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-panel-bg); color: var(--soc-text); font: inherit; padding: 10px 12px; } .soc-ticket-cancel-field textarea { min-height: 96px; resize: vertical; } body.ticket-employee-picker-open, html.ticket-employee-picker-open { overflow: hidden; } body.ticket-reason-picker-open, html.ticket-reason-picker-open { overflow: hidden; } body.ticket-cancel-reason-open, html.ticket-cancel-reason-open { overflow: hidden; } @media (max-width: 680px) { .soc-ticket-inline-grid { grid-template-columns: minmax(0, 1fr); } } .soc-report-critical-slot { display: grid; min-width: 0; } .soc-report-critical-btn { justify-self: start; min-width: 0; white-space: nowrap; } .soc-report-critical-btn.is-on { border-color: var(--soc-primary); background: var(--soc-primary-soft-bg); color: var(--soc-primary); } .multi-check-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .report-step-shell { display: grid; align-items: start; gap: 8px; min-width: 0; padding: 0; } .report-step-progress { display: flex; align-self: start; align-items: flex-end; gap: 18px; min-width: 0; padding: 0 0 2px; border-bottom: 1px solid color-mix(in srgb, var(--soc-border) 70%, transparent); overflow-x: auto; scrollbar-width: none; } .report-step-progress-item { position: relative; display: flex; flex: 1 1 0; min-width: fit-content; gap: 0; align-items: flex-end; min-width: 0; border: 0; border-radius: 0; background: transparent; padding: 0 0 10px; box-shadow: none; } .report-step-progress-item::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; border-radius: 999px; background: transparent; } .report-step-progress-item.is-complete { border-color: transparent; background: transparent; } .report-step-progress-item.is-current::after { background: color-mix(in srgb, var(--soc-primary) 88%, #ff8400); } .report-step-progress-item.is-current { border-color: transparent; box-shadow: none; } .report-step-progress-item.is-upcoming { opacity: 1; } .report-step-progress-no { display: none; } .report-step-progress-copy { display: flex; align-items: center; min-width: 0; } .report-step-progress-copy strong { min-width: 0; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--soc-text-sub) 80%, var(--soc-text)); line-height: 1.15; letter-spacing: -0.01em; } .report-step-progress-copy span { display: none; } .report-step-progress-item.is-complete .report-step-progress-copy strong { color: var(--soc-text); } .report-step-progress-item.is-current .report-step-progress-copy strong { color: var(--soc-primary); } .report-step-progress-item.is-upcoming .report-step-progress-copy strong { color: color-mix(in srgb, var(--soc-text-sub) 86%, white); } .report-step-context { display: grid; gap: 2px; min-width: 0; } .report-step-context-eyebrow { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--soc-primary) 62%, var(--soc-text-sub)); } .report-step-context-title { margin: 0; font-size: clamp(18px, 2vw, 24px); line-height: 1.08; letter-spacing: -0.03em; color: var(--soc-text); } .report-step-context-copy { margin: 0; font-size: 12px; line-height: 1.45; color: var(--soc-text-sub); max-width: 42ch; } .report-flow-start, .report-flow-step { display: grid; gap: 12px; width: 100%; min-width: 0; justify-items: stretch; } .report-view { display: grid; gap: 10px; min-width: 0; width: 100%; } .selectable-card-grid { width: 100%; margin: 0; padding: 0; } .selectable-card-grid > .selectable-card { justify-self: stretch; align-self: stretch; margin: 0 !important; } .report-flow-title { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--soc-text); letter-spacing: -0.04em; line-height: 1.02; } .report-choice-grid { display: grid; gap: 10px; width: 100%; overflow-x: hidden; overflow-y: visible; padding-top: 0; grid-auto-flow: row; align-content: start; justify-items: stretch; align-items: stretch; } .report-choice-grid > * { width: 100%; min-width: 0; margin-left: 0 !important; justify-self: stretch; align-self: stretch; } .report-choice-grid-1col { grid-template-columns: 1fr; grid-auto-rows: 1fr; } .report-choice-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(118px, auto); align-content: start; align-items: stretch; } .report-choice-card { position: relative; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--soc-border) 68%, transparent); background: color-mix(in srgb, var(--soc-card-bg) 98%, white); display: grid; align-content: start; justify-items: start; gap: 6px; width: 100%; min-width: 0; overflow: hidden; padding: 16px 16px 14px; text-align: left; box-shadow: none; transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease; -webkit-tap-highlight-color: var(--soc-tap-highlight); } .report-choice-card::after { content: ""; position: absolute; inset: auto 16px 0; height: 2px; border-radius: 999px; background: transparent; } .report-choice-card.active { border-color: color-mix(in srgb, var(--soc-primary) 26%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary-soft-bg) 34%, white); box-shadow: none; } .report-choice-card.active::after { background: color-mix(in srgb, var(--soc-primary) 90%, #ff8400); } .report-choice-card.active .report-choice-label { color: var(--soc-text); } .report-choice-card.active .report-choice-icon { color: var(--soc-primary); } .report-choice-grid-1col .report-choice-card { width: 100%; aspect-ratio: auto; min-height: 126px; } .report-choice-grid-2col .report-choice-card { width: 100%; aspect-ratio: auto; min-height: 118px; } .report-choice-card:hover { border-color: color-mix(in srgb, var(--soc-primary) 28%, var(--soc-border)); background: color-mix(in srgb, var(--soc-panel-bg) 86%, white); } .report-choice-card:focus-visible, .report-choice-card:active { outline: none; box-shadow: inset 0 0 0 2px var(--soc-focus-inset); } .report-choice-icon { display: inline-flex; align-items: center; justify-content: flex-start; font-size: 26px; line-height: 1; } .report-choice-icon-svg { width: 28px; height: 28px; } .report-choice-icon-svg--ticket-template { width: 26px; height: 26px; } .report-choice-icon-img { width: 34px; height: 32px; display: block; object-fit: contain; } .report-choice-icon-img--ticket-template { width: 30px; height: 30px; } .report-choice-label { font-size: 15px; font-weight: 700; color: var(--soc-text); text-align: left; width: 100%; padding: 0; overflow-wrap: anywhere; } .report-choice-sub { font-size: 12px; color: var(--soc-text-sub); text-align: left; width: 100%; padding: 0; line-height: 1.45; } .report-flow-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; min-width: 0; margin: 0; border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; } .report-flow-summary-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0; flex: 1 1 auto; min-width: 0; } .report-flow-summary-label { display: none; } .report-flow-summary-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0; min-width: 0; } .report-flow-summary-pill { position: relative; display: inline-flex; align-items: center; min-width: 0; min-height: 0; border-radius: 0; padding: 0; border: 0; background: transparent; color: var(--soc-text-sub); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; } .report-flow-summary-pill + .report-flow-summary-pill { margin-left: 9px; padding-left: 11px; } .report-flow-summary-pill + .report-flow-summary-pill::before { content: "/"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: color-mix(in srgb, var(--soc-text-sub) 78%, white); font-weight: 600; } .report-flow-summary-pill.is-active { color: var(--soc-primary); } .report-flow-summary-text { min-width: 0; margin: 0; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #reportPanel:not(.report-selection-active) #reportView { gap: 10px; } #reportPanel.report-selection-active { border: 0; background: transparent; box-shadow: none; padding: 0; max-height: none; overflow: visible; } #reportPanel.report-selection-active #reportView { width: min(1120px, calc(100% - 24px)); margin-inline: auto; padding: 8px 0 28px; gap: 16px; } #reportPanel.report-selection-active .report-step-shell { gap: 12px; } #reportPanel.report-selection-active .report-step-progress { gap: clamp(18px, 3vw, 30px); } #reportPanel.report-selection-active .report-step-context { display: none; } #reportPanel.report-selection-active #reportFlowStart { gap: 18px; max-width: 100%; min-height: 0; overflow: visible; } #reportPanel.report-selection-active .report-flow-step:not(.hidden) { gap: 16px; align-content: start; grid-template-rows: auto auto; height: auto; } #reportPanel.report-selection-active .report-flow-title { max-width: 18ch; font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -0.05em; } #reportPanel:not(.report-selection-active) #reportFlowSummary { margin-bottom: 0; } #reportPanel:not(.report-selection-active) #reportFlowStart, #reportPanel.report-selection-active :is(#quickIncidentForm, #incidentForm, #ticketForm, #reportModeTabs) { display: none !important; } #reportFlowBackBtn { flex-shrink: 0; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--soc-text-sub); white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1.2; border-radius: 0; } @media (max-width: 520px) { .report-step-progress { gap: 14px; padding-bottom: 1px; } #reportFlowSummary { gap: 8px; } .report-flow-summary-text { font-size: 11px; } #reportFlowBackBtn { font-size: 11px; } } #reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(188px, auto); gap: 14px; } #reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-card { min-height: 188px; padding: 22px 22px 20px; gap: 10px; justify-content: flex-start; align-content: flex-start; } #reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-icon { font-size: 1.75rem; } #reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-icon-img { width: 42px; height: 40px; } #reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-label { font-size: clamp(19px, 2vw, 24px); line-height: 1.05; letter-spacing: -0.03em; } #reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-sub { max-width: 28ch; font-size: 13px; line-height: 1.5; } #reportPanel.report-selection-active #reportFlowTypeStep { height: auto; } #reportPanel.report-selection-active #reportFlowTypeStep .report-choice-grid-2col { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: minmax(132px, auto); max-height: none; overflow: visible; gap: 14px; padding-top: 0; } #reportPanel.report-selection-active #reportFlowTypeStep .report-choice-grid-2col .report-choice-card { min-height: 132px; padding: 18px 16px 16px; gap: 8px; } #reportPanel.report-selection-active #reportFlowTypeStep .report-choice-grid-2col .report-choice-label { font-size: 16px; line-height: 1.1; } #reportPanel.report-selection-active #reportFlowTypeStep .report-choice-grid-2col .report-choice-sub { font-size: 12px; } @media (max-width: 900px) { #reportPanel.report-selection-active #reportFlowTypeStep .report-choice-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .report-composer-form { display: grid; gap: 18px; min-width: 0; } .report-form-sections { display: grid; gap: 14px; min-width: 0; } .report-form-section { display: grid; gap: 14px; min-width: 0; border: 1px solid color-mix(in srgb, var(--soc-border) 80%, transparent); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-card-bg) 96%, white), color-mix(in srgb, var(--soc-panel-bg) 88%, white)); padding: 18px 18px 17px; box-shadow: 0 1px 0 color-mix(in srgb, var(--soc-border) 46%, transparent); } .report-form-section-head { display: grid; gap: 4px; min-width: 0; } .report-form-section-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--soc-primary) 62%, var(--soc-text-sub)); } .report-form-section-head h3 { margin: 0; font-size: 18px; line-height: 1.1; } .report-form-section-head p { margin: 0; color: var(--soc-text-sub); font-size: 12px; line-height: 1.45; max-width: 52ch; } .report-form-section-body { display: grid; gap: 10px; min-width: 0; } .report-form-section-body > .help { margin-top: -4px; } .report-form-section-body--ticket { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; } .report-form-section-body--incident-grid, .report-quick-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; } .report-form-section-body--incident-stack, .report-quick-structured-fields { display: grid; gap: 12px; min-width: 0; } .report-form-field { display: grid; gap: 6px; min-width: 0; } .report-form-field--span-2, .report-form-field--full { grid-column: 1 / -1; } .report-form-section--post-narrative textarea { min-height: 164px; resize: vertical; } .report-quick-detail-group { display: grid; gap: 12px; min-width: 0; } .report-quick-detail-head { display: grid; gap: 4px; } .report-quick-detail-head .meta { margin: 0; } .report-quick-structured-group { display: grid; gap: 8px; min-width: 0; border: 1px solid color-mix(in srgb, var(--soc-border) 70%, transparent); border-radius: 16px; padding: 12px 13px; background: color-mix(in srgb, var(--soc-panel-bg) 72%, white); } .report-quick-structured-group > label, .report-quick-structured-group > .report-form-label { font-size: 13px; font-weight: 700; color: var(--soc-text); } .report-quick-chip-row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .report-quick-chip-btn { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--soc-border) 84%, transparent); background: color-mix(in srgb, var(--soc-card-bg) 96%, white); color: var(--soc-text-sub); font-size: 12px; font-weight: 700; line-height: 1; transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .report-quick-chip-btn.is-active, .report-quick-chip-btn[aria-pressed="true"] { border-color: color-mix(in srgb, var(--soc-primary) 52%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary) 10%, var(--soc-panel-bg)); color: var(--soc-primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--soc-primary) 14%, transparent); } .report-quick-select { width: 100%; } .report-quick-structured-note { margin: -2px 0 0; font-size: 11px; line-height: 1.45; color: var(--soc-text-sub); } .soc-ticket-duration-choice { display: grid; gap: 10px; min-width: 0; } .soc-ticket-duration-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .soc-ticket-duration-preset-list { display: inline-flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .soc-ticket-duration-btn { min-height: 38px; padding: 0 14px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-surface-overlay-13); color: var(--soc-text); font-size: var(--soc-text-sm); font-weight: 600; cursor: pointer; transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .soc-ticket-duration-btn:hover { border-color: color-mix(in srgb, var(--soc-accent, #ff8400) 38%, var(--soc-border)); } .soc-ticket-duration-btn.is-active { border-color: color-mix(in srgb, var(--soc-accent, #ff8400) 58%, var(--soc-border)); background: color-mix(in srgb, var(--soc-accent, #ff8400) 10%, var(--soc-panel-bg)); color: var(--soc-text-strong, var(--soc-text)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--soc-accent, #ff8400) 18%, transparent); } .soc-ticket-duration-custom { display: none; grid-template-columns: repeat(2, minmax(0, 156px)); align-items: start; gap: 10px 12px; } .soc-ticket-duration-custom.is-active { display: grid; } .soc-ticket-duration-timefield { display: grid; gap: 4px; min-width: 0; } .soc-ticket-duration-timefield span { font-size: 11px; font-weight: 600; color: var(--soc-text-sub); line-height: 1.2; } .soc-ticket-duration-custom input { min-width: 0; width: 100%; } .soc-ticket-duration-toggle > .soc-ticket-duration-btn:last-child { flex: 0 0 auto; } .report-form-sticky-footer { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0 0; background: transparent; box-shadow: none; border: 0; } .report-form-sticky-footer .ds-btn { min-height: 40px; } .multi-check-item { display: flex; align-items: center; gap: 7px; border: 1px solid var(--soc-border); border-radius: 9px; background: var(--soc-surface-overlay-13); padding: 8px 10px; } .multi-check-item input { width: 16px; min-height: 16px; height: 16px; margin: 0; } /* Lists */ .user-list, .manager-status-list, .audit-list, .announcement-list, .sla-overview-list { display: grid; gap: 10px; } .user-item, .employee-item, .manager-item, .announcement-item, .audit-item, .sla-item { border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); padding: 10px 12px; } .user-item.is-selected, .manager-item.is-selected, .audit-item.is-selected { border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 28%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 5%, var(--ui-bg-surface, var(--soc-card-bg))); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 36%, transparent); } .user-item[data-username], .manager-item[data-manager-username] { cursor: pointer; } .audit-item { position: relative; display: grid; gap: 8px; width: 100%; text-align: left; align-content: start; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--ui-bg-surface-subtle, var(--soc-card-bg)) 82%, white); } button.audit-item { cursor: pointer; } .audit-item-head, .audit-item-subline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .audit-item-title, .audit-item-meta, .audit-item-time, .audit-item-actor, .audit-item-target, .audit-item-summary { margin: 0; } .audit-item-title { font-size: 14px; font-weight: 700; } .audit-item-meta, .audit-item-time, .audit-item-actor, .audit-item-target, .audit-item-summary { color: var(--ui-text-secondary, var(--soc-text-sub)); } .audit-item-time, .audit-item-actor { font-size: 12px; } .audit-item-target { font-weight: 600; } .audit-item-summary { line-height: 1.5; font-size: 13px; } .soc-inline-field { display: inline-flex; align-items: center; gap: 8px; } .soc-inline-field > span { font-size: var(--soc-text-xs); color: var(--soc-text-sub); white-space: nowrap; } .soc-manage-detail-body, .soc-audit-detail-body, .soc-sla-detail-panel { display: grid; gap: 8px; } .soc-audit-detail-list { display: grid; gap: 12px; margin: 0; } .soc-audit-detail-list > div { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white); border-radius: 12px; background: color-mix(in srgb, var(--ui-bg-surface-subtle, var(--soc-card-bg)) 88%, white); } .soc-audit-detail-list dt, .soc-audit-detail-list dd { margin: 0; } .soc-audit-detail-list dt { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; font-weight: 700; } .soc-audit-detail-list dd { color: var(--ui-text-primary, var(--soc-text)); line-height: 1.5; } .soc-manage-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; } .soc-drawer-backdrop:not(.hidden) { opacity: 1; pointer-events: auto; } .soc-workspace-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 85; width: min(360px, 100vw); background: var(--ui-bg-surface, var(--soc-panel-bg)); border-left: 1px solid var(--ui-border-subtle, var(--soc-border)); box-shadow: -12px 0 36px rgba(15, 23, 42, 0.16); display: grid; grid-template-rows: auto minmax(0, 1fr); } .topbar-drawer { z-index: calc(var(--ui-z-drawer, 420) + 6); top: calc(var(--soc-safe-top) + 58px); height: calc(100dvh - (var(--soc-safe-top) + 58px)); width: min(352px, 100vw); } #topbarDrawerBackdrop.soc-drawer-backdrop { top: calc(var(--soc-safe-top) + 58px); } .topbar-drawer-head { align-items: center; } .topbar-drawer-title-group { display: grid; gap: 4px; } .topbar-drawer-title-group-compact { display: inline-flex; align-items: center; gap: 8px; } .topbar-drawer-title-group-compact h3 { margin: 0; color: #2f3338; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .topbar-drawer-title-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: #2f3338; } .topbar-drawer-title-icon svg { width: 18px; height: 18px; } .topbar-drawer-kicker { display: none; } .topbar-drawer-close { padding: 0; border: 0; background: transparent; color: #42464d; font-size: 26px; line-height: 1; cursor: pointer; } .topbar-drawer-close:hover, .topbar-drawer-close:focus-visible { color: #111827; outline: none; } .topbar-drawer-body { display: grid; gap: 0; padding: 14px 16px 18px; overflow-x: hidden; overflow-y: auto; } .topbar-notification-tabs { display: flex; align-items: center; gap: 18px; padding: 0 0 12px; border-bottom: 1px solid #ececec; } .topbar-notification-tab { min-height: 0; padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #8d8f94; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .topbar-notification-tab.is-active, .topbar-notification-tab[aria-selected="true"] { color: #2f3338; border-bottom-color: #2f3338; } .topbar-notification-tab-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #d5d7db; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; line-height: 1; } .topbar-notification-tab.is-active .topbar-notification-tab-badge, .topbar-notification-tab[aria-selected="true"] .topbar-notification-tab-badge { background: #2f3338; } .topbar-notification-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; } .topbar-notification-unread-toggle { display: inline-flex; align-items: center; gap: 7px; color: #9b9ea4; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; } .topbar-notification-unread-toggle input { margin: 0; inline-size: 13px; block-size: 13px; accent-color: #2f3338; } .topbar-notification-mark-all { padding: 0; border: 0; background: transparent; color: #9b9ea4; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; } .topbar-notification-mark-all:disabled { cursor: default; opacity: 0.48; } .topbar-notification-drawer-content, .topbar-download-history-list { display: grid; gap: 14px; min-height: 120px; } .topbar-notification-feed-group { display: grid; gap: 8px; } .topbar-notification-feed-group-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 20px; } .topbar-notification-feed-group-head::before, .topbar-notification-feed-group-head::after { content: ""; position: absolute; top: 50%; width: calc(50% - 40px); border-top: 1px solid #ececec; transform: translateY(-50%); } .topbar-notification-feed-group-head::before { left: 0; } .topbar-notification-feed-group-head::after { right: 0; } .topbar-notification-feed-group-title { margin: 0; padding: 0 12px; background: var(--ui-bg-surface, var(--soc-panel-bg)); font-size: 12px; font-weight: 700; color: #c3c6cb; } .topbar-notification-feed-list { display: grid; gap: 0; } .topbar-notification-feed-item, .topbar-download-history-item { width: 100%; display: grid; gap: 10px; padding: 10px 0 12px; border: 0; border-bottom: 1px solid #efefef; border-radius: 0; background: transparent; text-align: left; box-shadow: none; } .topbar-notification-feed-item:hover, .topbar-notification-feed-item:focus-visible, .topbar-download-history-item:hover, .topbar-download-history-item:focus-visible { background: transparent; outline: none; } .topbar-notification-feed-item.is-unread .topbar-notification-feed-title { color: #2f3338; } .topbar-notification-feed-main { min-width: 0; padding: 0; border: 0; background: transparent; display: grid; gap: 5px; text-align: left; cursor: pointer; } .topbar-notification-feed-title-row { display: flex; align-items: flex-start; gap: 7px; min-width: 0; } .topbar-notification-feed-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 999px; background: #ff6f61; margin-top: 7px; } .topbar-notification-feed-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--soc-topbar-bg-2) 88%, transparent); color: var(--soc-text-sub); font-size: 11px; font-weight: 700; } .topbar-notification-feed-title, .topbar-download-history-item strong { margin: 0; color: #4b5563; font-size: 13px; line-height: 1.5; font-weight: 700; letter-spacing: -0.01em; } .topbar-download-history-item strong { font-size: 14px; } .topbar-notification-feed-summary-wrap { display: grid; gap: 2px; } .topbar-notification-feed-summary, .topbar-download-history-item p { margin: 0; color: #5c6470; font-size: 12px; line-height: 1.45; white-space: pre-wrap; letter-spacing: -0.01em; } .topbar-notification-feed-time, .topbar-download-history-time { color: #9ca3af; font-size: 12px; line-height: 1.4; letter-spacing: -0.01em; } .topbar-notification-feed-delete { align-self: start; padding: 0 0 0 10px; border: 0; background: transparent; color: #a4aab4; font-size: 22px; line-height: 1; cursor: pointer; } .topbar-notification-feed-delete:hover, .topbar-notification-feed-delete:focus-visible { color: #2f3338; outline: none; } .topbar-notification-drawer-body { grid-template-rows: 56px 50px minmax(0, 1fr); padding: 0 16px 18px; align-content: start; } .topbar-notification-tabs { height: 56px; padding: 0; align-items: end; } .topbar-notification-tab { position: relative; height: 56px; padding: 0 0 13px; border-bottom-color: transparent; border-radius: 0; cursor: pointer; } .topbar-notification-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 0; background: transparent; } .topbar-notification-tab.is-active, .topbar-notification-tab[aria-selected="true"] { border-bottom-color: transparent; } .topbar-notification-tab.is-active::after, .topbar-notification-tab[aria-selected="true"]::after { background: #2f3338; } .topbar-notification-controls { min-height: 50px; padding: 0; border-bottom: 1px solid #ececec; } #notificationDrawerControls.hidden { display: flex !important; } .topbar-notification-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 132px; } .topbar-notification-action { padding: 0; border: 0; background: transparent; color: #7b818a; font-size: 12px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; } .topbar-notification-action:hover, .topbar-notification-action:focus-visible { color: #2f3338; outline: none; } .topbar-notification-action:disabled { cursor: default; opacity: 0.42; } .topbar-notification-action-divider { color: #d7dbe1; font-size: 11px; font-weight: 700; line-height: 1; } .topbar-notification-drawer-content { padding-top: 12px; align-content: start; } .topbar-notification-drawer-content .notification-empty-state { min-height: 216px; padding: 40px 0 0; border: 0; background: transparent; gap: 8px; } .topbar-notification-drawer-content .notification-empty-state-illustration { width: 84px; height: 84px; margin-bottom: 8px; } .topbar-notification-drawer-content .notification-empty-state-card { width: 42px; height: 10px; } @media (hover: hover) and (pointer: fine) { .topbar-notification-feed-delete { opacity: 0; transition: opacity 140ms ease; } .topbar-notification-feed-item:hover .topbar-notification-feed-delete, .topbar-notification-feed-item:focus-within .topbar-notification-feed-delete { opacity: 1; } } .topbar-download-history-meta { color: #a0a4ab; font-size: 12px; line-height: 1.4; letter-spacing: -0.01em; } .topbar-download-history-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .topbar-download-history-actions { display: inline-flex; align-items: center; gap: 16px; } .topbar-download-history-action { padding: 0; border: 0; background: transparent; color: #5d6470; font-size: 12px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; } .topbar-download-history-action:disabled { color: #c9cdd3; cursor: default; } .topbar-download-history-note { margin-top: 8px; padding: 9px 12px; border-radius: 6px; background: #f4f4f4; color: #b4b8be; font-size: 11px; font-weight: 700; text-align: center; letter-spacing: -0.01em; } .notification-empty-state { min-height: 360px; padding-top: 44px; display: grid; justify-items: center; align-content: start; text-align: center; } .notification-empty-state-illustration { position: relative; width: 120px; height: 120px; margin-bottom: 18px; border-radius: 999px; background: #f0f0f0; } .notification-empty-state-card { position: absolute; left: 50%; width: 54px; height: 13px; border-radius: 4px; background: #ffffff; transform: translateX(-50%); box-shadow: 0 6px 0 rgba(255, 255, 255, 0.8); } .notification-empty-state-card:nth-child(1) { top: 34px; } .notification-empty-state-card:nth-child(2) { top: 50px; width: 60px; opacity: 0.94; } .notification-empty-state-card:nth-child(3) { top: 66px; width: 48px; opacity: 0.88; } .notification-empty-state > p:first-of-type { margin: 0; color: #9ea3aa; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; } .topbar-profile-drawer-body { align-content: start; } .topbar-profile-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid color-mix(in srgb, var(--soc-border) 82%, transparent); border-radius: 16px; background: var(--soc-card-bg); } .topbar-profile-drawer-avatar { width: 52px; height: 52px; } .topbar-profile-card-copy { display: grid; gap: 4px; min-width: 0; } .topbar-profile-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .topbar-profile-actions { display: grid; gap: 10px; } .soc-workspace-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } .soc-workspace-drawer-head > h3 { margin: 0; } .soc-workspace-drawer-head-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; } .soc-workspace-drawer > form { display: grid; gap: 12px; padding: 18px 20px 20px; overflow: auto; } .soc-announcement-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .soc-announcement-header .title-inline { display: flex; align-items: center; gap: 8px; } .announcement-mode-tabs { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid rgba(148, 163, 184, 0.16); } .announcement-mode-btn { min-height: 28px; padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #64748b; font-weight: 600; } .announcement-mode-btn.active { color: #c2410c; border-bottom-color: rgba(234, 88, 12, 0.72); } .soc-announcement-card { display: grid; gap: 8px; border-radius: 12px; padding: 12px; box-shadow: 0 1px 0 color-mix(in srgb, var(--soc-border) 60%, transparent); } .soc-announcement-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .soc-announcement-card-head .incident-title { margin: 0; } .soc-announcement-important-chip { flex-shrink: 0; background: color-mix(in srgb, var(--soc-warning) 18%, transparent); color: var(--soc-warning); border: 1px solid color-mix(in srgb, var(--soc-warning) 40%, var(--soc-border)); } .soc-announcement-preview { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; } .soc-announcement-compose-modal-panel { width: min(560px, 100vw); max-width: 560px; min-height: 100dvh; max-height: 100dvh; margin-left: auto; border-radius: 20px 0 0 20px; display: flex; flex-direction: column; overflow: hidden; } #announcementComposerModal { align-items: stretch; justify-content: flex-end; padding: 0; } .soc-announcement-compose-modal-panel .modal-head { padding: 18px 20px 14px; border-bottom: 1px solid rgba(148, 163, 184, 0.18); } .soc-announcement-compose-modal-panel #announcementForm { display: grid; gap: 12px; padding: 18px 20px 20px; overflow: auto; } .soc-announcement-form-section { display: grid; gap: 8px; } .soc-announcement-form-section .help, .soc-announcement-form-section .meta { margin: 0; } .soc-announcement-form-section .target-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 10px; background: rgba(248, 250, 252, 0.72); } .soc-announcement-compose-status { min-height: 18px; } .soc-announcement-compose-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .soc-announcement-compose-actions .ds-btn { min-width: 92px; } @media (max-width: 768px) { .soc-announcement-header { align-items: stretch; flex-direction: column; gap: 8px; } .soc-announcement-header #announcementCreateBtn { width: 100%; } .soc-announcement-header .title-inline .ds-btn { width: auto; flex: 0 0 auto; } .soc-announcement-compose-modal-panel { width: min(100vw - 16px, 620px); min-height: auto; max-height: calc(100dvh - 16px); border-radius: 18px; } #announcementComposerModal { align-items: center; justify-content: center; padding: 8px; } .soc-announcement-compose-actions { justify-content: stretch; } .soc-announcement-compose-actions .ds-btn { flex: 1 1 0; min-width: 0; } .soc-announcement-compose-modal-panel .modal-head, .soc-announcement-compose-modal-panel #announcementForm { padding-left: 16px; padding-right: 16px; } } #slaPanel { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-height: 0; overflow: hidden; } .soc-sla-header-bar { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; position: sticky; top: 0; z-index: 2; background: var(--soc-panel-bg); border-bottom: 1px solid var(--soc-divider); padding: 2px 0 10px; } .soc-sla-header-title-wrap { flex: 0 0 auto; min-width: 0; } .soc-sla-header-title-wrap h2 { margin: 0; white-space: nowrap; } #slaSummaryText { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-sla-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } .soc-sla-header-btn { min-width: 0; } .soc-sla-header-btn:disabled { opacity: 0.55; } .soc-sla-header-btn.is-loading { animation: socRefreshSpin 0.9s linear infinite; } .soc-sla-preview-scroller { min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom) + 16px); display: grid; gap: 10px; } #slaStatusBanner { margin: 0; } .soc-sla-advanced-settings { border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-card-bg); padding: 8px 10px 10px; } .soc-sla-advanced-settings > summary { cursor: pointer; font-size: var(--soc-text-sm); font-weight: 700; color: var(--soc-text-sub); margin-bottom: 8px; } .soc-sla-advanced-settings[open] > summary { color: var(--soc-text); } .soc-sla-advanced-actions { display: flex; flex-wrap: wrap; gap: 8px; } .soc-sla-advanced-actions .ds-btn { min-width: 0; } .employee-item.is-clickable { cursor: pointer; } .user-actions, .employee-actions, .announcement-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; } .soc-user-site-meta { word-break: break-word; } .soc-site-code-warning-row { margin-top: 6px; } .soc-site-code-missing-badge { background: color-mix(in srgb, var(--soc-danger, #d11f1f) 12%, transparent); color: color-mix(in srgb, var(--soc-danger, #d11f1f) 85%, #4b1111); border-color: color-mix(in srgb, var(--soc-danger, #d11f1f) 45%, var(--soc-border)); } .sla-item { cursor: pointer; } .sla-item.sla-item-btn { width: 100%; text-align: left; border: 1px solid var(--soc-border); background: var(--soc-card-bg); color: var(--soc-text); } .sla-item.sla-item-btn:disabled { opacity: 0.6; cursor: default; } .sla-item-head, .manager-item-head, .employee-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .soc-manager-status-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; min-width: 0; } .soc-manage-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #sessionMonitorView .soc-manager-status-filter-row { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; min-width: 0; padding: 2px 0 4px; scrollbar-width: thin; } #sessionMonitorView .soc-manager-status-filter-row::-webkit-scrollbar { height: 6px; } #sessionMonitorView .soc-manager-status-filter-row::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--soc-border) 70%, transparent); } #sessionMonitorView .soc-manager-status-filter-row .soc-session-site-chip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 32px; min-height: 32px; max-height: 32px; min-width: 0; max-width: 100%; padding: 0 12px; border-radius: 999px; border: 1px solid var(--soc-border); background: var(--soc-surface-overlay-8); color: var(--soc-text-sub); font-size: var(--soc-text-xs); font-weight: 700; line-height: 1; box-sizing: border-box; white-space: nowrap; outline: none; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } #sessionMonitorView .soc-manager-status-filter-row .soc-session-site-chip > span { min-width: 0; max-width: 100%; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #sessionMonitorView .soc-manager-status-filter-row .soc-session-site-chip.is-active, #sessionMonitorView .soc-manager-status-filter-row .soc-session-site-chip[aria-pressed="true"] { border-color: var(--soc-primary); background: var(--soc-primary-soft-bg); color: var(--soc-primary); } #sessionMonitorView .soc-manager-status-filter-row .soc-session-site-chip:focus, #sessionMonitorView .soc-manager-status-filter-row .soc-session-site-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--soc-primary) 26%, transparent); } .soc-session-status-card { display: grid; gap: 8px; min-width: 0; } .soc-session-status-card .manager-item-head { min-width: 0; } .soc-session-status-card .manager-item-head strong { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-session-status-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; color: var(--soc-text-sub); font-size: var(--soc-text-xs); } .soc-role-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--soc-border); background: color-mix(in srgb, var(--soc-primary-soft-bg) 55%, var(--soc-card-bg) 45%); color: var(--soc-primary); font-weight: 700; white-space: nowrap; } .soc-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: currentColor; } .status-idle { background: color-mix(in srgb, var(--soc-warning) 18%, var(--soc-card-bg) 82%); color: var(--soc-warning); border-color: color-mix(in srgb, var(--soc-warning) 45%, var(--soc-border) 55%); } .sla-timer { border-radius: var(--soc-radius-pill); border: 1px solid var(--soc-border); padding: 2px 9px; font-size: var(--soc-text-xs); font-weight: 700; } .sla-normal { color: var(--soc-status-received-fg); } .sla-warning { color: var(--eci2-fg); } .sla-breached { color: var(--eci34-fg); border-color: var(--soc-danger-border-soft); } .sla-closed { color: var(--soc-status-closed-fg); } .sla-overflow { border: 1px dashed var(--soc-border); border-radius: 10px; padding: 10px; display: grid; gap: 9px; } .sla-overflow-list { margin: 0; padding-left: 22px; display: grid; gap: 6px; } .sla-overflow-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sla-overflow-label { background: none; border: 0; color: var(--soc-text-soft-2); font-weight: 600; text-align: left; padding: 0; } .sla-overflow-pager { display: flex; flex-wrap: wrap; gap: 6px; } /* Modal + BottomSheet */ #soc-overlay-root { position: fixed; inset: 0; z-index: 88; pointer-events: none; } #soc-overlay-root:empty { display: none; } #soc-overlay-root > * { pointer-events: auto; } html.soc-overlay-open, body.soc-overlay-open { overflow: hidden; } html.soc-submit-pending, body.soc-submit-pending { overflow: hidden; } html.soc-long-task-open, body.soc-long-task-open { overflow: hidden; } .modal-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--soc-overlay-panel); } .modal-overlay.soc-submit-progress-modal { z-index: 520; background: rgba(8, 13, 28, 0.5); } .soc-submit-progress-panel { width: min(280px, 92vw); max-height: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 20px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--soc-border) 70%, transparent); background: color-mix(in srgb, var(--soc-surface) 88%, #000 12%); box-shadow: var(--soc-shadow-card); overflow: hidden; } .soc-submit-progress-spinner { width: 18px; height: 18px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--soc-primary) 24%, transparent); border-top-color: var(--soc-primary); animation: soc-submit-progress-spin 0.9s linear infinite; } .soc-submit-progress-text { margin: 0; color: var(--soc-text); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; } .modal-overlay.soc-long-task-progress-modal { z-index: 525; padding: 16px; background: rgba(15, 23, 42, 0.48); backdrop-filter: blur(4px); } .soc-long-task-progress-panel { --soc-long-task-fill-start: #ea580c; --soc-long-task-fill-end: #fb923c; --soc-long-task-stage-bg: rgba(255, 107, 0, 0.12); --soc-long-task-stage-text: #c2410c; --soc-long-task-track-bg: rgba(255, 107, 0, 0.16); --soc-long-task-ring-track: rgba(255, 107, 0, 0.14); --soc-long-task-shadow: rgba(255, 107, 0, 0.22); --soc-long-task-core-fill: color-mix(in srgb, var(--soc-surface) 92%, #fff 8%); --soc-long-task-core-border: rgba(255, 107, 0, 0.18); width: min(480px, calc(100vw - 32px)); max-width: 480px; max-height: min(88vh, 640px); overflow: hidden; display: grid; justify-items: center; gap: 12px; padding: 24px; border: 1px solid color-mix(in srgb, var(--soc-border) 72%, rgba(148, 163, 184, 0.28) 28%); border-radius: 24px; background: color-mix(in srgb, var(--soc-surface) 96%, #fff 4%); box-shadow: 0 28px 66px rgba(15, 23, 42, 0.22); text-align: center; } .soc-long-task-progress-panel[data-status="success"] { --soc-long-task-fill-start: #15803d; --soc-long-task-fill-end: #4ade80; --soc-long-task-stage-bg: rgba(22, 163, 74, 0.12); --soc-long-task-stage-text: #15803d; --soc-long-task-track-bg: rgba(22, 163, 74, 0.16); --soc-long-task-ring-track: rgba(22, 163, 74, 0.12); --soc-long-task-shadow: rgba(22, 163, 74, 0.22); --soc-long-task-core-fill: rgba(240, 253, 244, 0.98); --soc-long-task-core-border: rgba(22, 163, 74, 0.18); } .soc-long-task-progress-panel[data-status="error"] { --soc-long-task-fill-start: #dc2626; --soc-long-task-fill-end: #fb7185; --soc-long-task-stage-bg: rgba(220, 38, 38, 0.12); --soc-long-task-stage-text: #b91c1c; --soc-long-task-track-bg: rgba(220, 38, 38, 0.16); --soc-long-task-ring-track: rgba(220, 38, 38, 0.12); --soc-long-task-shadow: rgba(220, 38, 38, 0.2); --soc-long-task-core-fill: color-mix(in srgb, var(--soc-surface) 92%, #fee2e2 8%); --soc-long-task-core-border: rgba(220, 38, 38, 0.18); } .soc-long-task-progress-visual { display: grid; place-items: center; width: 132px; height: 132px; position: relative; animation: soc-long-task-progress-float 2.8s ease-in-out infinite; } .soc-long-task-progress-ring-svg { display: block; width: 120px; height: 120px; overflow: visible; filter: drop-shadow(0 12px 28px var(--soc-long-task-shadow)); } .soc-long-task-progress-ring-track-circle { fill: none; stroke: var(--soc-long-task-ring-track); stroke-width: 12; } .soc-long-task-progress-ring-arc { fill: none; stroke: var(--soc-long-task-fill-start); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 94 170; stroke-dashoffset: 16; transform-box: view-box; transform-origin: center center; animation: soc-long-task-progress-spin-arc 1.15s linear infinite; will-change: transform; transition: opacity 180ms ease, transform 220ms ease; } .soc-long-task-progress-ring-core-circle { fill: var(--soc-long-task-core-fill); stroke: var(--soc-long-task-core-border); stroke-width: 1.5; transition: fill 180ms ease, stroke 180ms ease; } .soc-long-task-progress-check { fill: none; stroke: transparent; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; opacity: 0; transition: opacity 180ms ease, stroke 180ms ease, stroke-dashoffset 260ms ease; } .soc-long-task-progress-stage { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--soc-long-task-stage-bg); color: var(--soc-long-task-stage-text); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } .soc-long-task-progress-title { margin: 0; color: var(--soc-text); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.45; } .soc-long-task-progress-message { margin: 0; color: var(--soc-text-soft-2); font-size: 15px; line-height: 1.64; } .soc-long-task-progress-step { margin: -4px 0 0; color: var(--soc-text-soft); font-size: 13px; line-height: 1.5; } .soc-long-task-progress-steps-host { width: 100%; } .soc-long-task-progress-steps, .soc-apple-weekly-progress-step-list { margin: 0; padding: 0; list-style: none; } .soc-progress-step-item { display: grid; align-items: center; } .soc-progress-step-node { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; } .soc-progress-step-copy { display: grid; gap: 2px; } .soc-progress-step-copy strong, .soc-progress-step-copy .meta { margin: 0; } .soc-progress-step-item.is-complete .soc-progress-step-node { background: #dcfce7; color: #166534; } .soc-progress-step-item.is-error .soc-progress-step-node { background: #fee2e2; color: #b91c1c; } .soc-progress-step-item.is-active .soc-progress-step-node { color: transparent; } .soc-progress-step-item.is-active .soc-progress-step-node::after { content: ""; position: absolute; inset: 4px; border-radius: 999px; border: 2px solid rgba(249, 115, 22, 0.22); border-top-color: #f97316; animation: soc-progress-step-spin 0.9s linear infinite; } .soc-long-task-progress-steps { width: 100%; display: grid; gap: 8px; text-align: left; } .soc-long-task-progress-steps .soc-progress-step-item { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--soc-border) 82%, rgba(148, 163, 184, 0.18) 18%); background: rgba(255, 255, 255, 0.84); } .soc-long-task-progress-steps .soc-progress-step-node { width: 28px; height: 28px; background: rgba(255, 107, 0, 0.1); color: #c2410c; } .soc-long-task-progress-steps .soc-progress-step-item.is-active { border-color: rgba(249, 115, 22, 0.22); background: #fffaf5; } .soc-long-task-progress-steps .soc-progress-step-copy strong { color: var(--soc-text); font-size: 13px; font-weight: 800; } .soc-long-task-progress-steps .soc-progress-step-copy .meta { color: var(--soc-text-soft-2); font-size: 12px; line-height: 1.45; } .soc-long-task-progress-track { position: relative; width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: var(--soc-long-task-track-bg); } .soc-long-task-progress-bar { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: inherit; background: linear-gradient(90deg, var(--soc-long-task-fill-start), var(--soc-long-task-fill-end)); box-shadow: 0 4px 12px var(--soc-long-task-shadow); transition: width 180ms ease; overflow: hidden; } .soc-long-task-progress-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 35%, rgba(255, 255, 255, 0.48) 50%, transparent 100%); transform: translateX(-100%); animation: soc-long-task-progress-sheen 1.15s ease-in-out infinite; } .soc-long-task-progress-track[data-mode="indeterminate"] .soc-long-task-progress-bar { width: 34% !important; animation: soc-long-task-progress-indeterminate 1.18s ease-in-out infinite; } .soc-long-task-progress-track[data-mode="indeterminate"] .soc-long-task-progress-bar::after { display: none; } .soc-long-task-progress-meta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--soc-text-soft); font-size: 13px; font-weight: 700; } .soc-long-task-progress-footer { width: 100%; display: grid; gap: 10px; } .soc-long-task-progress-hint { margin: 0; color: var(--soc-text-soft-2); font-size: 13px; line-height: 1.6; } .soc-long-task-progress-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .soc-long-task-progress-mini { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 526; min-width: 240px; max-width: min(320px, calc(100vw - 28px)); display: inline-flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--soc-border) 78%, rgba(148, 163, 184, 0.22) 22%); border-radius: 16px; background: color-mix(in srgb, var(--soc-surface) 94%, #fff 6%); box-shadow: 0 20px 42px rgba(15, 23, 42, 0.18); color: var(--soc-text); } .soc-long-task-progress-mini-pill { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 999px; background: #ea580c; box-shadow: 0 0 0 5px rgba(234, 88, 12, 0.18); } .soc-long-task-progress-mini[data-status="success"] .soc-long-task-progress-mini-pill { background: #16a34a; box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.18); } .soc-long-task-progress-mini[data-status="error"] .soc-long-task-progress-mini-pill { background: #dc2626; box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.18); } .soc-long-task-progress-mini-copy { min-width: 0; display: grid; gap: 3px; text-align: left; } .soc-long-task-progress-mini-copy strong, .soc-long-task-progress-mini-copy span { min-width: 0; overflow-wrap: anywhere; } .soc-long-task-progress-mini-copy strong { font-size: 13px; font-weight: 800; } .soc-long-task-progress-mini-copy span { color: var(--soc-text-soft-2); font-size: 12px; line-height: 1.45; } .soc-long-task-progress-panel[data-status="success"] .soc-long-task-progress-ring-arc { animation: none; opacity: 0; transform: rotate(-90deg) scale(0.84); } .soc-long-task-progress-panel[data-status="success"] .soc-long-task-progress-bar::after, .soc-long-task-progress-panel[data-status="error"] .soc-long-task-progress-bar::after { display: none; } .soc-long-task-progress-panel[data-status="success"] .soc-long-task-progress-check { opacity: 1; stroke: #16a34a; stroke-dashoffset: 0; } .soc-long-task-progress-panel[data-status="error"] .soc-long-task-progress-ring-arc { animation-duration: 1.45s; } @keyframes soc-submit-progress-spin { to { transform: rotate(360deg); } } @keyframes soc-long-task-progress-spin-arc { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } } @keyframes soc-progress-step-spin { to { transform: rotate(360deg); } } @keyframes soc-long-task-progress-sheen { 0% { transform: translateX(-100%); } 100% { transform: translateX(120%); } } @keyframes soc-long-task-progress-indeterminate { 0% { transform: translateX(-120%); } 50% { transform: translateX(60%); } 100% { transform: translateX(240%); } } @keyframes soc-long-task-progress-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (max-width: 860px) { .modal-overlay.soc-long-task-progress-modal { padding: 12px; } .soc-long-task-progress-panel { width: min(100vw - 24px, 480px); padding: 22px 20px; } .soc-long-task-progress-title { font-size: 1.1rem; } .soc-long-task-progress-mini { right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; } } .modal-panel, .ds-modal { width: min(980px, 96vw); max-height: min(92vh, 920px); overflow: auto; border-radius: var(--soc-radius-card); border: 1px solid var(--soc-border); background: linear-gradient(170deg, var(--soc-surface), var(--soc-surface-2)); box-shadow: var(--soc-shadow-card); } .modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--soc-border); background: var(--soc-surface-overlay-3); } .incident-detail-modal-panel { width: min(1120px, 96vw); } .incident-detail-body.case-file { display: grid; gap: 12px; padding: 12px; } .case-hero, .case-facts, .case-timeline-wrap, .case-sections { position: relative; border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-panel-bg); padding: 12px; box-shadow: var(--soc-shadow-soft); } .case-hero { overflow: hidden; padding-top: 18px; } .case-strip { position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 12px 12px 0 0; background: var(--soc-primary); } .case-strip.eci3 { background: var(--eci3-border); } .case-strip.eci4 { background: var(--eci4-border); } .case-strip.is-critical { background: color-mix(in srgb, var(--soc-primary) 70%, var(--soc-warning)); } .case-title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.35; color: var(--soc-text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .case-title.critical-text { color: var(--eci3-fg); } .case-meta-line { margin: 8px 0 0; color: var(--soc-text-sub); font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .case-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .case-target-line { margin: 8px 0 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--soc-divider); background: var(--soc-card-bg); color: var(--soc-text-sub); font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .incident-detail-action-row { margin-top: 10px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; } .incident-detail-critical-btn { min-height: 32px; border-color: color-mix(in srgb, var(--soc-primary) 46%, var(--soc-border)) !important; color: var(--soc-primary) !important; background: color-mix(in srgb, var(--soc-primary) 8%, transparent) !important; white-space: nowrap; } .incident-detail-critical-btn.is-critical-on { border-color: color-mix(in srgb, var(--soc-warning) 56%, var(--soc-border)) !important; color: var(--soc-warning) !important; background: color-mix(in srgb, var(--soc-warning) 10%, transparent) !important; } .case-chip { margin: 0; display: inline-flex; align-items: center; min-height: 30px; border-radius: var(--soc-radius-pill); border: 1px solid var(--soc-border); background: var(--soc-soft-bg); color: var(--soc-text); font-size: 12px; font-weight: 600; line-height: 1.2; padding: 6px 11px; } .case-chip-severity.eci-level-2 { background: var(--eci2-bg); border-color: var(--eci2-border); color: var(--eci2-fg); } .case-chip-severity.eci-level-3 { background: var(--eci3-bg); border-color: var(--eci3-border); color: var(--eci3-fg); } .case-chip-severity.eci-level-4 { background: var(--eci4-bg); border-color: var(--eci4-border); color: var(--eci4-fg); } .case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; } .case-fact-item { border-radius: 10px; border: 1px solid var(--soc-divider); background: var(--soc-card-bg); padding: 8px 10px; display: grid; gap: 3px; } .case-fact-label { margin: 0; color: var(--soc-text-sub); font-size: 12px; } .case-fact-value { margin: 0; color: var(--soc-text); font-size: 13px; font-weight: 700; word-break: break-word; } .case-section-title { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--soc-divider); font-size: 14px; font-weight: 700; color: var(--soc-text); } .case-timeline { position: relative; display: grid; gap: 10px; padding-left: 18px; } .case-timeline::before { content: ""; position: absolute; left: 6px; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--soc-divider); } .case-timeline-item { position: relative; display: grid; gap: 3px; } .case-timeline-dot { position: absolute; left: -16px; top: 3px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--soc-border-strong); background: var(--soc-primary); } .case-timeline-dot.is-created, .case-timeline-dot.is-pending { background: var(--soc-warning); } .case-timeline-dot.is-action { background: var(--soc-warning); } .case-timeline-dot.is-closed, .case-timeline-dot.is-approved { background: var(--soc-success); } .case-timeline-dot.is-rejected { background: var(--soc-danger); } .case-timeline-dot.is-instruction { background: var(--soc-warning); } .case-timeline-dot.is-attachment { background: var(--soc-accent); } .case-timeline-dot.is-deleted { background: var(--soc-danger); } .case-timeline-message { margin: 0; color: var(--soc-text); font-size: 13px; line-height: 1.45; } .case-timeline-time { margin: 0; color: var(--soc-text-sub); font-size: 12px; } .case-sections { display: grid; gap: 8px; } .case-accordion { border-radius: 10px; border: 1px solid var(--soc-divider); background: var(--soc-card-bg); overflow: hidden; } .case-accordion > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 12px; color: var(--soc-text); font-size: 13px; font-weight: 700; } .case-accordion > summary::-webkit-details-marker { display: none; } .case-section-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--soc-primary); flex: 0 0 auto; } .case-accordion-content { border-top: 1px solid var(--soc-divider); padding: 10px 12px; display: grid; gap: 8px; } .case-accordion-content .desc, .case-accordion-content .instruction-list, .case-accordion-content .incident-detail-times { margin: 0; white-space: pre-wrap; word-break: break-word; } .case-accordion-content .incident-detail-times { color: var(--soc-text-sub); } .case-accordion-content .attachment-upload-form { margin: 0; } .case-sections .attachment-list { margin-top: 0; } .attachment-list { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; } .attachment-upload-form { border: 1px solid var(--soc-border); background: var(--soc-card-bg); border-radius: 10px; padding: 10px; margin-bottom: 8px; } .attachment-upload-form button { margin-top: 8px; } .incident-comment-target, .ticket-comment-target { margin: 0; font-size: 11px; line-height: 1.35; color: var(--soc-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attachment-preview-panel { width: min(920px, 96vw); } .attachment-preview-stage { margin-top: 10px; border: 1px solid var(--soc-border); border-radius: 10px; min-height: 300px; display: grid; place-items: center; background: var(--soc-soft-bg); overflow: auto; } .attachment-preview-image { max-width: 100%; transform-origin: center center; } .soc-bottom-sheet { position: fixed; inset: 0; z-index: 360; background: var(--soc-overlay-backdrop); display: flex; align-items: flex-end; justify-content: stretch; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .soc-bottom-sheet.open { opacity: 1; pointer-events: auto; } .soc-bottom-sheet-panel { position: fixed; inset: auto 0 0; z-index: 361; width: 100%; max-height: min(82dvh, 700px); overflow-y: auto; -webkit-overflow-scrolling: touch; border-top-left-radius: 16px; border-top-right-radius: 16px; border: 1px solid var(--soc-border); background: var(--soc-panel-bg); box-shadow: 0 -12px 30px var(--soc-overlay-soft); padding: 12px 12px calc(12px + var(--soc-safe-bottom)); transform: translateY(105%); transition: transform 0.18s ease; } .soc-bottom-sheet.open .soc-bottom-sheet-panel { transform: translateY(0); } .soc-bottom-sheet.dragging .soc-bottom-sheet-panel { transition: none; transform: translateY(var(--soc-filter-sheet-drag, 0px)); } #reportBuilderSheet { background: transparent; pointer-events: none; } #reportBuilderSheet.open { pointer-events: none; } #reportBuilderSheet .soc-bottom-sheet-panel { pointer-events: auto; } #reportBuilderSheet.open .soc-bottom-sheet-panel { transform: translateY(0); } #reportBuilderSheet.dragging .soc-bottom-sheet-panel { transition: none; transform: translateY(var(--soc-report-builder-drag, 0px)); } html.report-builder-open, body.report-builder-open { overflow: hidden !important; overscroll-behavior: none; } html.people-create-open, body.people-create-open { overflow: hidden !important; overscroll-behavior: none; } html.employee-detail-open, body.employee-detail-open { overflow: hidden !important; overscroll-behavior: none; } html.weekly-detail-open, body.weekly-detail-open { overflow: hidden !important; overscroll-behavior: none; } html.participants-sheet-open, body.participants-sheet-open { overflow: hidden !important; overscroll-behavior: none; } html.home-trend-insight-open, body.home-trend-insight-open { overflow: hidden !important; overscroll-behavior: none; } html.report-builder-open .container.ds-page, body.report-builder-open .container.ds-page { overflow: hidden !important; overscroll-behavior: contain; } html.people-create-open .container.ds-page, body.people-create-open .container.ds-page, html.employee-detail-open .container.ds-page, body.employee-detail-open .container.ds-page, html.weekly-detail-open .container.ds-page, body.weekly-detail-open .container.ds-page { overflow: hidden !important; overscroll-behavior: contain; } html.participants-sheet-open .container.ds-page, body.participants-sheet-open .container.ds-page { overflow: hidden !important; overscroll-behavior: contain; } html.home-trend-insight-open .container.ds-page, body.home-trend-insight-open .container.ds-page { overflow: hidden !important; overscroll-behavior: contain; } #reportBuilderSheet .soc-bottom-sheet-panel, #reportBuilderSheet .soc-report-builder-steps { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } #peopleCreateSheet { z-index: 350; background: transparent; pointer-events: none; } #peopleCreateSheet.open { pointer-events: none; } #peopleCreateSheet .soc-bottom-sheet-panel { pointer-events: auto; } #peopleCreateSheet .soc-bottom-sheet-panel.soc-people-create-panel { min-height: min(56dvh, 560px); max-height: min(84dvh, 760px); display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; overflow: hidden; overflow-x: hidden; min-width: 0; -webkit-overflow-scrolling: touch; filter: none; } #peopleCreateSheet.open .soc-bottom-sheet-panel.soc-people-create-panel { transform: none; filter: none; } #peopleCreateSheet #peopleEmployeeForm { --soc-people-footer-h: 88px; display: flex; flex-direction: column; align-items: stretch; min-height: 0; width: 100%; max-width: 100%; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding-right: 2px; padding-bottom: calc(var(--soc-people-footer-h) + env(safe-area-inset-bottom, 0px) + var(--soc-tabbar-h, 54px)); } #peopleCreateSheet #peopleEmployeeForm :is(input, select, textarea, button) { width: 100%; max-width: 100%; } #peopleCreateSheet #peopleEmployeeForm > * { min-width: 0; } #peopleCreateSheet #peopleEmployeeForm .soc-people-create-actions { position: sticky; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; margin-top: auto; z-index: 8; transform: none !important; filter: none !important; background: var(--soc-panel-bg); padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } #peopleCreateSheet #peopleEmployeeForm .soc-people-create-actions .ds-btn { width: auto; min-width: 104px; } @supports not (position: sticky) { #peopleCreateSheet #peopleEmployeeForm .soc-people-create-actions { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tabbar-h, 54px)); margin-top: 0; z-index: 370; } #peopleCreateSheet #peopleEmployeeForm { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px) + var(--soc-tabbar-h, 54px)); } } #employeeDetailSheet { z-index: 352; background: transparent; pointer-events: none; } #employeeDetailSheet.open { pointer-events: none; } #employeeDetailSheet .soc-bottom-sheet-panel { pointer-events: auto; } #employeeDetailSheet .soc-bottom-sheet-panel.soc-employee-detail-panel { min-height: min(60dvh, 620px); max-height: min(88dvh, 820px); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; overflow: hidden; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #employeeDetailSheet .soc-employee-detail-scroll { min-height: 0; width: 100%; max-width: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding-right: 2px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } #employeeDetailSheet .soc-employee-detail-scroll :is(input, select, textarea, button) { width: 100%; max-width: 100%; } .soc-employee-detail-grid { display: grid; gap: 8px; width: 100%; min-width: 0; } .soc-employee-detail-stack { display: grid; gap: 10px; width: 100%; min-width: 0; } .soc-employee-detail-section { display: grid; gap: 8px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); padding: 10px; width: 100%; min-width: 0; } .soc-employee-detail-section > h4 { margin: 0; font-size: 14px; color: var(--soc-text); } .soc-employee-account-grid .soc-employee-detail-row { background: var(--soc-surface-overlay-11); } .soc-employee-account-note { margin: 0; font-size: 12px; color: var(--soc-text-sub); } .soc-employee-account-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .soc-employee-detail-row { display: grid; gap: 4px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-surface-overlay-13); padding: 9px 10px; width: 100%; min-width: 0; } .soc-employee-detail-row .label { font-size: 12px; color: var(--soc-text-sub); } .soc-employee-detail-row strong { font-size: 14px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .soc-employee-detail-events-block { margin: 0; width: 100%; min-width: 0; } .soc-employee-events-toggle { width: 100%; border: 1px solid var(--soc-border); border-radius: 8px; background: var(--soc-surface-overlay-11); color: var(--soc-text); min-height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; } .soc-employee-events-panel { display: grid; gap: 6px; } .soc-employee-events-panel.hidden { display: none; } .soc-employee-event-list { display: grid; gap: 6px; max-height: 150px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .soc-employee-event-item { display: grid; gap: 2px; border: 1px solid var(--soc-border); border-radius: 8px; background: var(--soc-surface-overlay-11); padding: 8px 10px; } .soc-employee-detail-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; position: sticky; bottom: 0; z-index: 3; border-top: 1px solid var(--soc-divider); background: var(--soc-panel-bg); padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); } .soc-employee-detail-actions .ds-btn { width: auto; min-width: 104px; } @media (max-width: 900px) { .soc-people-pane-summary { padding: 12px 14px; } .soc-people-detail-summary { grid-template-columns: minmax(0, 1fr); } #peopleCreateSheet .soc-people-create-actions, #employeeDetailSheet .soc-employee-detail-actions { bottom: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } } #weeklyDetailSheet { z-index: 354; background: transparent; pointer-events: none; } #weeklyDetailSheet.open { pointer-events: none; } #weeklyDetailSheet .soc-bottom-sheet-panel { pointer-events: auto; } #weeklyDetailSheet .soc-bottom-sheet-panel.soc-weekly-detail-panel { min-height: min(58dvh, 620px); max-height: min(86dvh, 820px); display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; overflow: hidden; -webkit-overflow-scrolling: touch; } #weeklyDetailSheet .soc-weekly-detail-scroll { min-height: 0; width: 100%; max-width: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-right: 2px; padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 12px); display: grid; gap: 8px; } .soc-weekly-detail-section { border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-card-bg); padding: 10px; display: grid; gap: 7px; } .soc-weekly-detail-section h4 { margin: 0; font-size: 14px; } .soc-weekly-detail-summary { display: grid; gap: 6px; } .soc-weekly-detail-summary p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--soc-text); } .soc-weekly-detail-summary-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; } .soc-weekly-kpi-list { display: grid; gap: 6px; } .soc-weekly-detail-top-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; } .soc-weekly-detail-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--soc-border); border-radius: 8px; background: var(--soc-surface-overlay-11); padding: 8px 10px; } .soc-weekly-detail-top-row > span { min-width: 0; font-size: 12px; line-height: 1.35; } #participantsSheet .soc-bottom-sheet-panel.soc-participants-sheet-panel { min-height: min(58dvh, 620px); max-height: min(84dvh, 820px); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 8px; overflow: hidden; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .soc-home-trend-insight-panel { min-height: min(64dvh, 700px); max-height: min(84dvh, 860px); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 8px; overflow: hidden; overflow-x: hidden; min-width: 0; -webkit-overflow-scrolling: touch; } .soc-home-trend-insight-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .soc-home-trend-insight-summary .meta { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-home-trend-insight-scroll { min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: grid; gap: 8px; padding-right: 2px; padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 12px); } .soc-home-trend-insight-section { border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-card-bg); box-shadow: var(--soc-shadow-soft); padding: 10px 12px; display: grid; gap: 7px; min-width: 0; } .soc-home-trend-insight-section h4 { margin: 0; font-size: 13px; color: var(--soc-text); position: relative; padding-left: 8px; } .soc-home-trend-insight-section h4::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 999px; background: var(--soc-primary); } .soc-home-trend-insight-list { display: grid; gap: 6px; min-width: 0; } .soc-home-trend-insight-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-surface-overlay-11); padding: 7px 9px; } .soc-home-trend-insight-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .soc-home-trend-insight-row .meta { margin: 0; flex: 0 0 auto; white-space: nowrap; color: var(--soc-text-sub); font-size: 12px; } .soc-home-trend-insight-footer { position: sticky; bottom: 0; padding-top: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-panel-bg) 0%, transparent), var(--soc-panel-bg)); } #homeTrendInsightPeak { margin: 0; white-space: normal; word-break: keep-all; overflow-wrap: break-word; } .soc-participants-sheet-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .soc-participants-sheet-summary .meta { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-participants-sheet-summary .soc-block-value { margin: 0; flex: 0 0 auto; font-size: 20px; line-height: 1.1; } .soc-participants-top-card { border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-card-bg); box-shadow: var(--soc-shadow-soft); padding: 10px 12px; display: grid; gap: 6px; min-width: 0; } .soc-participants-top-label { margin: 0; color: var(--soc-text-sub); font-size: 12px; font-weight: 700; } .soc-participants-top-main { display: flex; align-items: center; gap: 8px; min-width: 0; } .soc-participants-top-main strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-participants-role-chip { flex: 0 0 auto; border-radius: var(--soc-radius-pill); border: 1px solid var(--soc-border); background: var(--soc-surface-overlay-10); padding: 3px 8px; font-size: 11px; color: var(--soc-text-sub); white-space: nowrap; } .soc-participants-points { margin: 0; color: var(--soc-primary); font-size: 16px; font-weight: 800; line-height: 1.2; } .soc-participants-rank-list { min-height: 0; display: grid; gap: 8px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 12px); } .soc-participants-rank-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-panel-bg); padding: 9px 10px; min-width: 0; } .soc-participants-rank-main { min-width: 0; display: grid; gap: 6px; } .soc-participants-rank-head { display: flex; align-items: center; gap: 8px; min-width: 0; } .soc-participants-rank-no { flex: 0 0 auto; border-radius: var(--soc-radius-pill); border: 1px solid var(--soc-border); background: var(--soc-surface-overlay-8); color: var(--soc-text-sub); font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 7px; white-space: nowrap; } .soc-participants-rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .soc-participants-rank-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } .soc-participants-stat-chip { border-radius: var(--soc-radius-pill); border: 1px solid var(--soc-border); background: var(--soc-surface-overlay-9); color: var(--soc-text-sub); font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 8px; white-space: nowrap; } .soc-participants-stat-chip.is-primary { border-color: var(--soc-primary); background: var(--soc-primary-soft-bg); color: var(--soc-primary); } .soc-participants-stat-chip.is-neutral { background: var(--soc-surface-overlay-13); } .soc-participants-rank-points { flex: 0 0 auto; color: var(--soc-primary); font-size: 15px; font-weight: 800; white-space: nowrap; } @media (min-width: 1024px) { #reportBuilderSheet.mode-drawer { align-items: stretch; justify-content: flex-end; background: transparent; } #reportBuilderSheet.mode-drawer .soc-bottom-sheet-panel.soc-report-builder-panel { inset: 0 0 0 auto; width: min(420px, 92vw); height: 100dvh; max-height: 100dvh; border-top-right-radius: 0; border-bottom-left-radius: 16px; border-left: 1px solid var(--soc-border); border-right: 0; border-top: 0; padding: 12px 12px 14px; transform: translateX(106%); box-shadow: -14px 0 30px var(--soc-overlay-soft); } #reportBuilderSheet.mode-drawer.open .soc-bottom-sheet-panel.soc-report-builder-panel { transform: translateX(0); } #reportBuilderSheet.mode-drawer .soc-sheet-handle { display: none; } #reportBuilderSheet.mode-drawer .soc-report-builder-steps { max-height: calc(100dvh - 190px); } #peopleCreateSheet .soc-bottom-sheet-panel.soc-people-create-panel { inset: auto 16px 16px auto; width: min(520px, 42vw); max-width: calc(100vw - 32px); border-radius: 16px; border: 1px solid var(--soc-border); padding-bottom: 16px; min-height: min(62dvh, 640px); max-height: min(88dvh, 760px); transform: translateY(110%); } #peopleCreateSheet.open .soc-bottom-sheet-panel.soc-people-create-panel { transform: translateY(0); } #employeeDetailSheet .soc-bottom-sheet-panel.soc-employee-detail-panel { inset: auto 16px 16px auto; width: min(560px, 44vw); max-width: calc(100vw - 32px); border-radius: 16px; border: 1px solid var(--soc-border); min-height: min(66dvh, 700px); max-height: min(90dvh, 820px); padding-bottom: 16px; transform: translateY(110%); } #employeeDetailSheet.open .soc-bottom-sheet-panel.soc-employee-detail-panel { transform: translateY(0); } #reportParticipantPickerSheet .soc-bottom-sheet-panel.soc-report-participant-panel { inset: auto 16px 16px auto; width: min(620px, 54vw); max-width: calc(100vw - 32px); border-radius: 16px; border: 1px solid var(--soc-border); min-height: min(68dvh, 760px); max-height: min(90dvh, 900px); padding-bottom: 16px; transform: translateY(110%); } #reportParticipantPickerSheet.open .soc-bottom-sheet-panel.soc-report-participant-panel { transform: translateY(0); } #weeklyDetailSheet .soc-bottom-sheet-panel.soc-weekly-detail-panel { inset: auto 16px 16px auto; width: min(640px, 56vw); max-width: calc(100vw - 32px); border-radius: 16px; border: 1px solid var(--soc-border); min-height: min(66dvh, 700px); max-height: min(90dvh, 860px); padding-bottom: 16px; transform: translateY(110%); } #weeklyDetailSheet.open .soc-bottom-sheet-panel.soc-weekly-detail-panel { transform: translateY(0); } #participantsSheet .soc-bottom-sheet-panel.soc-participants-sheet-panel { inset: auto 16px 16px auto; width: min(560px, 46vw); max-width: calc(100vw - 32px); border-radius: 16px; border: 1px solid var(--soc-border); min-height: min(66dvh, 700px); max-height: min(90dvh, 840px); padding-bottom: 16px; transform: translateY(110%); } #participantsSheet.open .soc-bottom-sheet-panel.soc-participants-sheet-panel { transform: translateY(0); } #homeTrendInsightSheet .soc-bottom-sheet-panel.soc-home-trend-insight-panel { inset: auto 16px 16px auto; width: min(620px, 52vw); max-width: calc(100vw - 32px); border-radius: 16px; border: 1px solid var(--soc-border); min-height: min(66dvh, 720px); max-height: min(90dvh, 860px); padding-bottom: 16px; transform: translateY(110%); } #homeTrendInsightSheet.open .soc-bottom-sheet-panel.soc-home-trend-insight-panel { transform: translateY(0); } } html.filter-sheet-open, body.filter-sheet-open { overflow: hidden; overscroll-behavior: none; touch-action: none; } html.filter-sheet-open .container.ds-page, body.filter-sheet-open .container.ds-page { overflow: hidden !important; overscroll-behavior: contain; } #filterSheet { z-index: 358; } #filterSheet .soc-bottom-sheet-panel.soc-alerts-filter-panel { width: min(900px, 100vw); min-height: 0; max-height: 75dvh; height: auto; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; overflow: hidden; touch-action: pan-y; } #filterSheet.mode-range .soc-bottom-sheet-panel.soc-alerts-filter-panel { max-height: 75dvh; } #filterSheet.alerts-tab-participant .soc-bottom-sheet-panel.soc-alerts-filter-panel { min-height: 65dvh; } .soc-alerts-builder-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .soc-alerts-builder-tabs .chip, .soc-alerts-builder-tabs .soc-chip { display: inline-flex; align-items: center; justify-content: center; align-self: center; height: 30px; min-height: 30px; max-height: 30px; line-height: 30px; padding: 0 10px; min-width: 0; max-width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-alerts-builder-scroller { min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: grid; gap: 10px; padding: 2px 0 calc(env(safe-area-inset-bottom) + 8px); } .soc-alerts-builder-panel { border: 1px solid var(--soc-divider); border-radius: 12px; background: var(--soc-card-bg); padding: 10px; min-width: 0; } #filterSheet .soc-alerts-builder-panel .soc-chip-group { align-items: center; } #filterSheet .soc-alerts-builder-panel .chip, #filterSheet .soc-alerts-builder-panel .soc-chip { display: inline-flex; align-items: center; justify-content: center; align-self: center; height: 30px; min-height: 30px; max-height: 30px; line-height: 30px; padding: 0 10px; min-width: 0; max-width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #filterSheet .date-filter-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px; } #filterSheet .date-filter-group .date-filter-btn, #filterSheet .date-filter-group .date-filter-btn.soc-chip { width: 100%; display: inline-flex; align-items: center; justify-content: center; align-self: center; height: 30px; min-height: 30px; max-height: 30px; padding: 0 10px; line-height: 30px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #filterSheet .date-filter-group .date-filter-btn.active, #filterSheet .soc-alerts-builder-tabs .chip.is-active, #filterSheet .soc-alerts-builder-panel .chip.is-active, #filterSheet .soc-alerts-builder-tabs .soc-chip.is-active, #filterSheet .soc-alerts-builder-panel .soc-chip.is-active, #filterSheet .date-filter-group .date-filter-btn.soc-chip.active { height: 30px; min-height: 30px; max-height: 30px; padding: 0 10px; line-height: 30px; } .soc-realtime-active-filters { align-items: center; } .soc-realtime-active-filters .chip { display: inline-flex; align-items: center; justify-content: center; align-self: center; height: 30px; min-height: 30px; max-height: 30px; line-height: 30px; padding: 0 10px; box-sizing: border-box; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-realtime-active-filters .chip.is-active { height: 30px; min-height: 30px; max-height: 30px; line-height: 30px; padding: 0 10px; } #filterSheet .soc-sheet-range { margin-top: 2px; } .soc-alerts-participant-pickers { display: grid; gap: 8px; } #filterSheet .soc-sheet-actions { margin-top: 0; padding-top: 8px; border-top: 1px solid var(--soc-divider); background: var(--soc-panel-bg); position: sticky; bottom: 0; } #participantFilterSheet { z-index: 359; } #participantFilterSheet .soc-bottom-sheet-panel.soc-participant-filter-panel { width: min(560px, 100vw); min-height: min(65dvh, 620px); max-height: 80dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; overflow: hidden; } .soc-participant-filter-list { min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: grid; gap: 6px; padding: 2px 0 6px; } .soc-participant-filter-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-panel-bg); color: var(--soc-text); padding: 10px 12px; min-width: 0; text-align: left; } .soc-participant-filter-row.is-active { border-color: var(--soc-primary); background: var(--soc-primary-soft-bg); } .soc-participant-filter-copy { min-width: 0; display: grid; gap: 2px; } .soc-participant-filter-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .soc-participant-filter-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soc-text-sub); font-size: 11px; } .soc-participant-filter-state { flex: 0 0 auto; border-radius: var(--soc-radius-pill); border: 1px solid var(--soc-border); background: var(--soc-surface-overlay-8); padding: 3px 8px; font-size: 11px; font-weight: 700; white-space: nowrap; } .soc-participant-filter-row.is-active .soc-participant-filter-state { border-color: var(--soc-primary); color: var(--soc-primary); background: var(--soc-primary-soft-bg); } html.notification-filter-open, body.notification-filter-open { overflow: hidden !important; overscroll-behavior: none; touch-action: none; } .soc-sheet-handle { position: relative; width: 100%; min-height: 36px; margin: 0 auto 6px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; } .soc-sheet-handle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 4px; border-radius: 999px; background: var(--soc-handle-bg); transform: translate(-50%, -50%); } html.notification-filter-open .container.ds-page, body.notification-filter-open .container.ds-page { overflow: hidden !important; overscroll-behavior: contain; } html.notification-filter-open #notificationPanel, body.notification-filter-open #notificationPanel { overscroll-behavior: contain; } .soc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .soc-sheet-head .title-inline h3 { margin: 0; } .soc-sheet-grid { display: grid; gap: 12px; } .soc-sheet-section { display: grid; gap: 8px; } .soc-sheet-label { font-size: var(--soc-text-xs); color: var(--soc-text-soft); font-weight: 700; } .soc-sheet-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; } .soc-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; } .soc-check-grid label { display: inline-flex; align-items: center; gap: 6px; color: var(--soc-text-soft-8); font-size: 12px; } .soc-sheet-actions { margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end; } .field-invalid { border-color: var(--soc-field-invalid-border) !important; box-shadow: 0 0 0 2px var(--soc-field-invalid-ring) !important; } .field-shake { animation: socFieldShake 0.24s ease; } @keyframes socFieldShake { 0% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } 100% { transform: translateX(0); } } .validation-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(8px); z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; min-width: 220px; max-width: min(90vw, 520px); text-align: center; border-radius: 10px; border: 1px solid var(--soc-toast-border); background: var(--soc-toast-bg); color: var(--soc-on-danger); padding: 10px 12px; font-size: 13px; font-weight: 700; } .validation-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .soc-toast { --soc-toast-accent: var(--soc-primary); position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9999; width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 12px 14px 12px 16px; border-radius: 14px; border: 1px solid var(--soc-toast-center-border, rgba(255, 255, 255, 0.12)); background: var(--soc-toast-center-bg, rgba(15, 23, 42, 0.92)); color: var(--soc-toast-center-fg, #fff); box-shadow: var(--soc-toast-center-shadow, 0 12px 30px rgba(0, 0, 0, 0.25)); text-align: center; font-size: 14px; font-weight: 600; line-height: 1.35; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; overflow: hidden; word-break: keep-all; overflow-wrap: break-word; } .soc-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--soc-toast-accent); } .soc-toast.is-show { opacity: 1; transform: translate(-50%, calc(-50% - 2px)); } .soc-toast.is-success { --soc-toast-accent: var(--soc-success); } .soc-toast.is-info { --soc-toast-accent: var(--soc-primary); } .soc-toast.is-warn { --soc-toast-accent: var(--soc-warning); } .soc-toast.is-error { --soc-toast-accent: var(--soc-danger); } /* Toast */ .global-notice-host { position: fixed; top: calc(var(--soc-safe-top) + 72px); right: 12px; z-index: 91; display: grid; gap: 8px; } .global-notice { width: min(350px, 92vw); border-radius: 10px; border: 1px solid var(--soc-border); background: var(--soc-panel-bg); padding: 10px 12px; box-shadow: var(--soc-shadow-card); } /* Light readability hardening (legacy styles.css overrides) */ #dashboardPanel, #excelPanel, #notificationSettingsPanel, #typeReportsPanel, #reportsHubView { color: var(--soc-text); } #dashboardPanel .incident-card { background: var(--soc-card-bg); border-color: var(--soc-border); } #dashboardPanel .incident-title, #dashboardPanel .incident-type, #dashboardPanel .incident-created-at, #dashboardPanel .incident-more-menu-head, #dashboardPanel .incident-menu-status-wrap .status-label, #excelPanel, #notificationSettingsPanel, #typeReportsPanel, #reportsHubView { color: var(--soc-text); } #dashboardPanel .help, #excelPanel .help, #notificationSettingsPanel .help, #hqReminderPanel .help, #typeReportsPanel .help, #reportsHubView .help, #excelPanel .meta, #notificationSettingsPanel .meta, #hqReminderPanel .meta, #typeReportsPanel .meta, #reportsHubView .meta { color: var(--soc-text-sub); } #dashboardPanel .incident-more-btn { border: 1px solid var(--soc-border) !important; background: transparent !important; color: var(--soc-text) !important; } #dashboardPanel .incident-more-btn:hover, #dashboardPanel .incident-more-btn:focus-visible { background: var(--soc-primary-soft-bg) !important; } #dashboardPanel .incident-more-menu, #dashboardPanel .instruction-list { background: var(--soc-panel-bg); border-color: var(--soc-border); } #excelPanel #excelAppleWrap, #excelPanel .excel-field, #excelPanel .soc-table-wrap, #excelPanel .mobile-excel-config, #notificationSettingsPanel .notification-check, #hqReminderPanel .notification-check, #typeReportsPanel #typeFilterButtons, #typeReportsPanel .site-filter-btn { background: var(--soc-panel-bg); border-color: var(--soc-border); color: var(--soc-text); } [data-theme="light"] #dashboardPanel .incident-card, [data-theme="light"] #dashboardPanel .incident-more-menu, [data-theme="light"] #dashboardPanel .instruction-list, [data-theme="light"] #excelPanel #excelAppleWrap, [data-theme="light"] #excelPanel .excel-field, [data-theme="light"] #notificationSettingsPanel .notification-check, [data-theme="light"] #hqReminderPanel .notification-check, [data-theme="light"] #typeReportsPanel #typeFilterButtons, [data-theme="light"] #typeReportsPanel .site-filter-btn { background: var(--soc-card-bg) !important; color: var(--soc-text) !important; border-color: var(--soc-border) !important; } .soc-settings-panel { display: flex; flex-direction: column; gap: 18px; width: min(920px, calc(100vw - 64px)); margin: 0 auto 28px; padding: 24px 28px 28px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 92%, white); border-radius: 22px; background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 92%, white); box-shadow: 0 20px 48px rgba(15, 23, 42, 0.05); } .soc-settings-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 4px; width: 100%; max-width: 720px; margin: 0 auto; } .soc-settings-page-header .soc-page-header-main { display: grid; gap: 4px; } .soc-settings-page-header .meta { margin: 0; font-size: 14px; line-height: 1.55; } .soc-settings-overview-card { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 14px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); overflow: hidden; } .soc-settings-overview-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 999px; background: var(--soc-primary); } .soc-settings-overview-copy { display: grid; gap: 6px; } .soc-settings-overview-copy strong { font-size: 15px; line-height: 1.4; } .soc-settings-overview-copy .meta { margin: 0; display: none; } .soc-settings-badge-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; } .soc-settings-summary-chip { border: 1px solid var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface, var(--soc-panel-bg)); color: var(--ui-text-primary, var(--soc-text)); } .soc-settings-content-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(280px, 0.78fr); gap: 12px; align-items: start; } .soc-settings-content-grid--wide { grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr); } .soc-settings-side-card { min-height: 100%; } .soc-settings-guide-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--soc-text-sub); font-size: var(--soc-text-xs); } #themePanel .soc-theme-choice-grid { display: grid; gap: 10px; } #themePanel .soc-theme-choice-grid .ds-btn { justify-content: flex-start; min-height: 44px; } #themePanel .soc-settings-content-grid, #hqReminderPanel .soc-settings-content-grid { grid-template-columns: minmax(0, 1fr); } #themePanel .soc-settings-side-card, #hqReminderPanel .soc-settings-side-card { display: none; } #themePanel .soc-workspace-card-head .meta, #hqReminderPanel .soc-workspace-card-head .meta, #notificationPanel .soc-workspace-card-head .meta { display: none; } #themePanel .soc-theme-preview-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary-soft-bg) 26%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg))); } #themePanel .soc-theme-preview-top, #themePanel .soc-theme-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #themePanel .soc-theme-preview-label { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; } #hqReminderPanel .hq-reminder-form { display: grid; gap: 12px; } #hqReminderPanel .soc-workspace-card-head { margin-bottom: 12px; } #hqReminderPanel .soc-workspace-card-head .soc-workspace-summary-pill { flex: 0 0 auto; } #hqReminderPanel .soc-hq-reminder-toggle-row { justify-content: flex-start; gap: 10px; font-weight: 600; } #hqReminderPanel .soc-system-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } #hqReminderPanel .hq-reminder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #hqReminderPanel .hq-reminder-field { display: grid; gap: 6px; font-size: var(--soc-text-xs); color: var(--soc-text-sub); } #hqReminderPanel .hq-reminder-field .ds-input { width: 100%; } #hqReminderPanel .hq-reminder-targets { display: grid; gap: 8px; } #hqReminderPanel .soc-hq-reminder-target-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #hqReminderPanel .soc-hq-reminder-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid rgba(148, 163, 184, 0.16); } #hqReminderPanel .soc-hq-reminder-footer .help { margin: 0; min-width: 0; } #themePanel .soc-system-section-card, #hqReminderPanel .soc-system-section-card, #announcementPanel .soc-system-list-card, #notificationPanel .soc-system-list-card { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 14px; background: var(--ui-bg-surface, var(--soc-panel-bg)); padding: 14px; } .soc-system-section-flat { display: grid; gap: 12px; } #hqReminderPanel .soc-system-guide-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--soc-text-sub); font-size: var(--soc-text-xs); } #announcementPanel .soc-system-summary-strip, #notificationPanel .soc-system-summary-strip, #hqReminderPanel .soc-system-summary-strip { margin: 6px 0 12px; } #announcementPanel .soc-system-list-card, #notificationPanel .soc-system-list-card { display: grid; gap: 10px; } #notificationPanel .soc-notification-settings-card, #notificationPanel .soc-notification-timeline-card { min-height: 100%; } #notificationPanel .soc-notification-settings-form { display: grid; gap: 14px; } #notificationPanel .soc-notification-toggle-grid { display: grid; gap: 10px; } #notificationPanel .soc-notification-check-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: flex-start; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } #notificationPanel .soc-notification-check-card span { display: grid; gap: 4px; } #notificationPanel .soc-notification-check-card strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 14px; } #notificationPanel .soc-notification-check-card small { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 1.45; } #notificationPanel .soc-notification-permission-box { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } #notificationPanel .soc-notification-permission-copy { display: grid; gap: 6px; } #notificationPanel .soc-notification-permission-copy .meta, #notificationPanel .soc-notification-permission-copy .help { margin: 0; } #announcementPanel .soc-announcement-workspace { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 16px; align-items: start; } #announcementPanel .soc-announcement-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } #announcementPanel .soc-announcement-header-actions { display: grid; justify-items: end; gap: 10px; } #announcementPanel .soc-announcement-list-card, #announcementPanel .soc-announcement-detail-card { min-height: 100%; } #announcementPanel .soc-announcement-list-wrap { display: grid; gap: 10px; } #announcementPanel .soc-announcement-card { cursor: pointer; transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } #announcementPanel .soc-announcement-card.is-selected { border-color: rgba(255, 132, 0, 0.35); background: rgba(255, 132, 0, 0.05); box-shadow: 0 0 0 1px rgba(255, 132, 0, 0.12); } #announcementPanel .soc-announcement-card:hover { border-color: rgba(148, 163, 184, 0.35); } #announcementPanel .soc-announcement-card-head .incident-title { margin: 0; } #announcementPanel .soc-announcement-card-meta, #announcementPanel .soc-announcement-card-footer { display: flex; flex-wrap: wrap; gap: 8px 12px; color: var(--soc-text-sub); font-size: 12px; } #announcementPanel .soc-announcement-detail-card { position: sticky; top: 16px; gap: 12px; } #announcementPanel .soc-announcement-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #announcementPanel .soc-announcement-detail-actions { display: flex; justify-content: flex-end; gap: 8px; } #announcementPanel .soc-announcement-detail-head h3 { margin: 0; } #announcementPanel .soc-announcement-detail-body { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); padding: 14px; min-height: 180px; } #announcementPanel .soc-announcement-detail-body .desc { margin: 0; line-height: 1.65; } #announcementPanel #announcementListWrap { margin-top: 12px; } #notificationPanel #notificationTimelineList { min-height: 260px; } #notificationPanel .notification-filter-panel { position: static; left: auto; right: auto; top: auto; z-index: auto; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 12px; background: rgba(248, 250, 252, 0.82); box-shadow: none; padding: 12px; opacity: 1; pointer-events: auto; transform: none; max-height: none; overflow: visible; } #notificationPanel .notification-timeline-toolbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; } #notificationPanel .notification-timeline-toolbar label { display: grid; gap: 6px; font-size: 12px; color: var(--soc-text-sub); } #notificationPanel .notification-timeline-toolbar select, #notificationPanel .notification-timeline-toolbar input { width: 100%; min-width: 0; } @media (max-width: 900px) { .soc-settings-page-header, .soc-settings-overview-card, #announcementPanel .soc-announcement-header { flex-direction: column; align-items: stretch; } .soc-settings-badge-row, #announcementPanel .soc-announcement-header-actions { justify-content: flex-start; justify-items: start; } .soc-settings-content-grid, .soc-settings-content-grid--wide { grid-template-columns: minmax(0, 1fr); } #hqReminderPanel .hq-reminder-grid { grid-template-columns: minmax(0, 1fr); } #hqReminderPanel .soc-hq-reminder-target-grid { grid-template-columns: minmax(0, 1fr); } #hqReminderPanel .soc-hq-reminder-footer { align-items: stretch; flex-direction: column; } #announcementPanel .soc-announcement-workspace { grid-template-columns: minmax(0, 1fr); } #announcementPanel .soc-announcement-detail-card { position: static; } #notificationPanel .notification-timeline-toolbar { grid-template-columns: minmax(0, 1fr); } } .global-notice.clickable { cursor: pointer; } .global-notice.emergency { border-color: var(--eci34-border); } .global-notice-title { color: var(--soc-text-accent-soft); font-size: var(--soc-text-sm); font-weight: 800; } .global-notice-body { margin-top: 2px; color: var(--soc-text-soft-3); font-size: var(--soc-text-sm); } /* ARLS notices workspace clone */ #announcementPanel { display: grid; gap: 18px; --notices-list-width: min(1180px, calc(100% - 40px)); --notices-doc-width: min(740px, calc(100% - 96px)); } #announcementPanel .soc-notices-workspace { display: grid; gap: 18px; align-content: start; justify-content: stretch; grid-auto-rows: max-content; } #announcementPanel .workspace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; margin-inline: 0; border-bottom: 1px solid #d0d5dd; padding-bottom: 8px; align-self: start; } #announcementPanel .workspace-head-main { display: grid; gap: 4px; min-width: 0; } #announcementPanel .workspace-head-main h2 { margin: 0; } #announcementPanel .workspace-head-main .muted { margin: 0; font-size: 13px; } #announcementPanel .workspace-head-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } #announcementPanel .workspace-head-actions .btn { min-height: 40px; } #announcementPanel .workspace-tabbar-row { width: var(--notices-list-width); margin-inline: auto; } #announcementPanel .workspace-tabs { display: flex; align-items: flex-end; gap: 0; width: 100%; min-width: 0; flex-wrap: wrap; overflow: visible; border-bottom: 1px solid #d0d5dd; } #announcementPanel .workspace-tab, #announcementPanel .btn, #noticesPollModal .btn, #noticesLinkModal .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(208, 213, 221, 1); background: #ffffff; color: var(--soc-text); font-size: 12px; line-height: 18px; font-weight: 600; text-decoration: none; box-shadow: none; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } #announcementPanel .btn:hover, #announcementPanel .btn:focus-visible, #noticesPollModal .btn:hover, #noticesPollModal .btn:focus-visible, #noticesLinkModal .btn:hover, #noticesLinkModal .btn:focus-visible { background: rgba(249, 115, 22, 0.08); border-color: rgba(208, 213, 221, 1); color: var(--soc-text); box-shadow: none; } #announcementPanel .workspace-tab { position: relative; flex: 0 0 auto; gap: 6px; min-height: 36px; height: 44px; padding: 0 18px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: var(--soc-text-sub); margin-bottom: -1px; white-space: nowrap; } #announcementPanel .workspace-tab:hover, #announcementPanel .workspace-tab:focus-visible { background: transparent; color: var(--soc-text); border-color: transparent; box-shadow: none; } #announcementPanel .workspace-tab.active { color: var(--soc-text); border-bottom-color: #ff6b00; background: transparent; } #announcementPanel .btn-primary, #noticesPollModal .btn-primary, #noticesLinkModal .btn-primary { border-color: #ff6b00; background: #ff6b00; color: #ffffff; box-shadow: none; } #announcementPanel .btn-secondary, #noticesPollModal .btn-secondary, #noticesLinkModal .btn-secondary { background: #ffffff; color: var(--soc-text); border-color: rgba(208, 213, 221, 1); } #announcementPanel .btn-ghost, #noticesPollModal .btn-ghost, #noticesLinkModal .btn-ghost { border-color: transparent; background: transparent; color: var(--soc-text-sub); box-shadow: none; } #announcementPanel .btn-ghost:hover, #announcementPanel .btn-ghost:focus-visible, #noticesPollModal .btn-ghost:hover, #noticesPollModal .btn-ghost:focus-visible, #noticesLinkModal .btn-ghost:hover, #noticesLinkModal .btn-ghost:focus-visible { background: rgba(249, 115, 22, 0.08); border-color: rgba(208, 213, 221, 1); color: var(--soc-text); } #announcementPanel #noticesCreateBtn { min-height: 40px; padding: 0 14px; border-radius: 6px; } #announcementPanel #noticesPublishBtn { min-height: 40px; padding: 0 18px; border-radius: 999px; } #announcementPanel .muted, #noticesPollModal .muted, #noticesLinkModal .muted { margin: 0; color: var(--soc-text-sub); font-size: 14px; line-height: 1.55; } #announcementPanel .status-pill, #noticesPollModal .status-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(255, 255, 255, 0.96); color: var(--soc-text-sub); font-size: 11px; font-weight: 700; letter-spacing: 0.01em; } #announcementPanel .status-pill-neutral, #noticesPollModal .status-pill-neutral { color: #475569; } #announcementPanel .input-field, #noticesPollModal .input-field, #noticesLinkModal .input-field { display: grid; gap: 8px; min-width: 0; } #announcementPanel .input-field > span, #noticesPollModal .input-field > span, #noticesLinkModal .input-field > span { color: var(--soc-text-sub); font-size: 13px; line-height: 1.45; font-weight: 700; } #announcementPanel .input-field input, #announcementPanel .input-field select, #announcementPanel .input-field textarea, #noticesPollModal .input-field input, #noticesPollModal .input-field select, #noticesPollModal .input-field textarea, #noticesLinkModal .input-field input, #noticesLinkModal .input-field select, #noticesLinkModal .input-field textarea { width: 100%; min-width: 0; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(248, 250, 252, 0.86); color: var(--soc-text); } #announcementPanel .input-field textarea, #noticesPollModal .input-field textarea, #noticesLinkModal .input-field textarea { min-height: 140px; padding: 14px; resize: vertical; } #announcementPanel .notices-workspace-head { width: 100%; margin-inline: 0; } .notices-toolbar-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 28px; width: var(--notices-list-width); margin-inline: auto; margin-bottom: 12px; align-self: start; } .notices-panel { display: grid; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .notices-search-form { display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; margin-left: auto; min-width: 0; } .notices-search-input-wrap { width: 0; min-width: 0; overflow: hidden; opacity: 0; pointer-events: none; transform: translateX(8px); border-bottom: 1px solid rgba(15, 23, 42, 0.2); transition: width 180ms ease, opacity 150ms ease, transform 180ms ease; } .notices-search-form.is-expanded .notices-search-input-wrap { width: min(320px, 28vw); opacity: 1; pointer-events: auto; transform: translateX(0); } .notices-search-form input { width: 100%; min-width: 0; padding: 0 0 10px; border: none; border-radius: 0; background: transparent; box-shadow: none; color: var(--ui-text-primary, #101828); font-weight: 500; } .notices-search-form input::placeholder { color: rgba(102, 112, 133, 0.9); } .notices-search-form input:focus { outline: none; box-shadow: none; } .notices-search-form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .notices-search-toggle { width: 32px; min-height: 32px; padding: 0; border: none; border-radius: 999px; background: transparent; color: var(--soc-text); display: inline-flex; align-items: center; justify-content: center; } .notices-search-toggle:hover, .notices-search-toggle:focus-visible { background: rgba(148, 163, 184, 0.1); } .notices-search-toggle-icon { display: inline-flex; align-items: center; justify-content: center; } .notices-search-toggle-icon svg { width: 20px; height: 20px; } .notices-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .notices-section-head h3 { margin: 0; font-size: 20px; line-height: 1.12; } .notices-list-panel { display: grid; width: var(--notices-list-width); margin-inline: auto; padding: 24px 32px 14px; justify-items: stretch; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 28px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04); align-self: start; } .notices-list-rows { list-style: none; width: 100%; margin: 0; padding: 0; border-top: none; display: grid; gap: 0; } .notices-list-item { padding: 0 !important; margin: 0; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; border-bottom: 1px solid rgba(148, 163, 184, 0.24) !important; } .notices-list-button { width: 100%; margin-inline: 0; border: none; background: transparent; display: grid; grid-template-columns: 84px minmax(0, 1fr) 108px; gap: 20px; align-items: center; padding: 22px 0; text-align: left; cursor: pointer; } .notices-list-button:hover, .notices-list-button:focus-visible { background: transparent; } .notices-list-category, .notices-list-date { color: var(--ui-text-secondary, #667085); font-size: 13px; font-weight: 700; } .notices-list-date { text-align: right; white-space: nowrap; } .notices-list-main { display: grid; gap: 6px; min-width: 0; } .notices-list-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .notices-list-title { font-size: 17px; line-height: 1.42; letter-spacing: -0.03em; color: var(--ui-text-primary, #101828); font-weight: 700; } .notice-meta-tag { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(255, 255, 255, 0.96); color: var(--soc-text-sub); font-size: 11px; font-weight: 700; letter-spacing: 0.01em; } .notice-meta-tag-neutral { color: #475569; } .notice-meta-tag-accent { border-color: #f97316; background: #f97316; color: #fff; } .notices-list-title-row .notice-meta-tag-accent { min-width: 22px; width: 22px; height: 22px; min-height: 22px; padding: 0; border-radius: 999px; font-size: 10px; line-height: 1; letter-spacing: 0; } .notices-detail-panel, .notices-compose-panel { display: grid; gap: 0; padding: 24px 0 12px; } .notices-compose-panel { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 28px 32px 24px; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 28px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04); } .notices-detail-body { display: grid; gap: 12px; min-height: 240px; } /* ARLS notices final refinement parity */ #announcementPanel { gap: 14px; --notices-list-width: 100%; --notices-doc-width: min(860px, 100%); } #announcementPanel .workspace-head-main .muted { display: none; } #announcementPanel .workspace-head-actions .btn.btn-primary { min-height: 40px; padding-inline: 16px; } #announcementPanel .notices-toolbar-row { align-items: center; gap: 14px; width: 100%; margin-inline: 0; margin-bottom: 0; padding: 0 0 10px; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)); } #announcementPanel #noticesCategoryTabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0; } #announcementPanel #noticesCategoryTabs .workspace-tab { min-height: 36px; height: 36px; padding: 0 14px 10px; margin: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ui-text-secondary, var(--soc-text-sub)); } #announcementPanel #noticesCategoryTabs .workspace-tab:hover, #announcementPanel #noticesCategoryTabs .workspace-tab:focus-visible { color: var(--ui-text-primary, var(--soc-text)); background: transparent; } #announcementPanel #noticesCategoryTabs .workspace-tab.active { color: var(--ui-text-primary, var(--soc-text)); border-bottom-color: var(--ui-accent, var(--soc-accent)); } #announcementPanel .notices-search-form { align-items: center; gap: 8px; } #announcementPanel .notices-search-input-wrap { border-bottom-color: var(--ui-border-subtle, var(--soc-border)); } #announcementPanel .notices-search-form.is-expanded .notices-search-input-wrap { width: min(280px, 30vw); } #announcementPanel .notices-search-toggle { width: 36px; min-height: 36px; border-radius: 10px; } #announcementPanel .notices-list-panel { width: 100%; margin-inline: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #announcementPanel .notices-list-rows { gap: 0; } #announcementPanel .notices-list-item:first-child { border-top: 0 !important; } #announcementPanel .notices-list-button { grid-template-columns: 88px minmax(0, 1fr) 96px; gap: 18px; padding: 16px 0; } #announcementPanel .notices-list-category, #announcementPanel .notices-list-date { font-size: 12px; line-height: 18px; } @media (max-width: 720px) { #announcementPanel .notices-toolbar-row, #announcementPanel .notices-search-form { align-items: stretch; flex-direction: column; } #announcementPanel .notices-list-button { grid-template-columns: 1fr; gap: 6px; } #announcementPanel .notices-list-date { text-align: left; } } @media (min-width: 721px) { #announcementPanel .notices-search-form { display: grid !important; grid-template-columns: minmax(240px, 280px) !important; } #announcementPanel .notices-search-input-wrap, #announcementPanel .notices-search-form.is-expanded .notices-search-input-wrap { width: min(280px, 30vw) !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; } #announcementPanel .notices-search-toggle { display: none !important; } } .notices-detail-panel > .notices-section-head, .notices-detail-panel > .notices-detail-body, .notices-compose-settings-panel, .notices-compose-document { width: var(--notices-doc-width); margin-inline: auto; } .notices-compose-panel .notices-compose-settings-panel, .notices-compose-panel .notices-compose-document { width: min(1048px, calc(100% - 24px)); } .notices-detail-panel .notices-section-head { padding-bottom: 18px; } .notices-detail-panel .notices-section-head h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -0.04em; } .notices-detail-panel .notices-section-head .muted { margin-top: 8px; font-size: 14px; line-height: 1.5; } .notices-detail-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .notices-detail-actions .btn { min-height: 30px; padding: 0 8px; border: 0; background: transparent; } .notices-detail-prose { display: grid; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(148, 163, 184, 0.16); } .notices-floating-scene { position: relative; width: min(var(--notices-scene-width, 880px), 100%); min-height: var(--notices-scene-min-height, 960px); margin: 0 auto; } .notices-flow-lane-document { display: grid; gap: 18px; width: 100%; max-width: min(1180px, 100%); margin: 0; padding: 0; } .notices-flow-lane-paragraph, .notices-flow-lane-object { width: 100%; min-width: 0; } .notices-compose-flow-lane .notices-compose-flow-lane-paragraph-input { min-height: 1.4lh; padding: 0; } .notices-flow-lane-object { display: block; position: relative; padding-left: var(--notice-flow-object-offset-x, 0px); overflow: hidden; } .notices-flow-lane-object-body { position: relative; width: min(calc(100% - var(--notice-flow-object-offset-x, 0px)), var(--notice-flow-object-width, 640px)); min-width: 180px; max-width: 100%; } .notices-flow-lane-object-image .notices-flow-lane-object-body { width: min(calc(100% - var(--notice-flow-object-offset-x, 0px)), var(--notice-flow-object-width, 420px)); } .notices-flow-lane-object .notices-floating-object-image { width: 100%; height: auto; max-width: 100%; object-fit: contain; } .notices-flow-lane-object .notices-detail-table-wrap, .notices-flow-lane-object .notices-compose-table-shell, .notices-flow-lane-object .notices-poll-card { max-width: 100%; } .notices-compose-table-shell { position: relative; } .notices-table-resize-layer { position: absolute; inset: 0; pointer-events: none; } .notices-table-resize-handle { position: absolute; pointer-events: auto; padding: 0; border: 0; background: transparent; } .notices-table-resize-handle-outer.notices-table-resize-handle-top, .notices-table-resize-handle-outer.notices-table-resize-handle-bottom { left: 0; right: 0; height: 10px; cursor: ns-resize; z-index: 4; } .notices-table-resize-handle-outer.notices-table-resize-handle-top { top: -5px; } .notices-table-resize-handle-outer.notices-table-resize-handle-bottom { bottom: -5px; } .notices-table-resize-handle-outer.notices-table-resize-handle-left, .notices-table-resize-handle-outer.notices-table-resize-handle-right { top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 4; } .notices-table-resize-handle-outer.notices-table-resize-handle-left { left: -5px; } .notices-table-resize-handle-outer.notices-table-resize-handle-right { right: -5px; } .notices-table-resize-handle-outer.notices-table-resize-handle-top-left, .notices-table-resize-handle-outer.notices-table-resize-handle-top-right, .notices-table-resize-handle-outer.notices-table-resize-handle-bottom-left, .notices-table-resize-handle-outer.notices-table-resize-handle-bottom-right { width: 14px; height: 14px; z-index: 5; } .notices-table-resize-handle-outer.notices-table-resize-handle-top-left { top: -7px; left: -7px; cursor: nwse-resize; } .notices-table-resize-handle-outer.notices-table-resize-handle-top-right { top: -7px; right: -7px; cursor: nesw-resize; } .notices-table-resize-handle-outer.notices-table-resize-handle-bottom-left { bottom: -7px; left: -7px; cursor: nesw-resize; } .notices-table-resize-handle-outer.notices-table-resize-handle-bottom-right { right: -7px; bottom: -7px; cursor: nwse-resize; } .notices-table-resize-handle-col { top: 0; bottom: 0; width: 10px; margin-left: -5px; cursor: ew-resize; z-index: 3; } .notices-table-resize-handle-row { left: 0; right: 0; height: 10px; margin-top: -5px; cursor: ns-resize; z-index: 2; } .notices-flow-lane-resize { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 6px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); cursor: nwse-resize; } .notices-flow-lane-resize::before { content: ""; position: absolute; right: 5px; bottom: 5px; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; } .notices-floating-scene-flow { position: relative; z-index: 1; display: grid; gap: 14px; min-height: var(--notices-scene-min-height, 960px); } .notices-floating-scene-objects { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .notices-floating-object { position: absolute; box-sizing: border-box; pointer-events: auto; } .notices-floating-object > :not(.notices-floating-object-chrome):not(.notices-floating-object-resize) { width: 100%; } .notices-floating-object-image { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08); background: rgba(248, 250, 252, 0.96); } .notices-floating-object.notices-floating-object-image[data-notice-scene-drag-body], .notices-floating-object-image[data-notice-scene-drag-body] { cursor: grab; } body.notices-scene-object-dragging .notices-floating-object.notices-floating-object-image[data-notice-scene-drag-body], body.notices-scene-object-dragging .notices-floating-object-image[data-notice-scene-drag-body] { cursor: grabbing; } .notices-floating-object-chrome { position: absolute; top: -12px; right: 8px; z-index: 8; display: inline-flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.14s ease; } .notices-floating-object:hover .notices-floating-object-chrome, .notices-floating-object:focus-within .notices-floating-object-chrome, .notices-flow-lane-object:hover .notices-floating-object-chrome, .notices-flow-lane-object:focus-within .notices-floating-object-chrome { opacity: 1; } .notices-floating-object-handle, .notices-floating-object-edit, .notices-floating-object-remove { position: relative; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .notices-floating-object-handle::before { content: ""; display: block; width: 10px; height: 14px; margin: 0 auto; background: radial-gradient(circle, currentColor 1.1px, transparent 1.2px) 0 0 / 3px 5px repeat-y, radial-gradient(circle, currentColor 1.1px, transparent 1.2px) 7px 0 / 3px 5px repeat-y; opacity: 0.78; } .notices-floating-object-remove::before, .notices-floating-object-remove::after { content: ""; position: absolute; top: 13px; left: 8px; width: 12px; height: 1.5px; border-radius: 999px; background: currentColor; } .notices-floating-object-remove::before { transform: rotate(45deg); } .notices-floating-object-remove::after { transform: rotate(-45deg); } .notices-floating-object-edit::before, .notices-floating-object-edit::after { content: ""; position: absolute; display: block; background: currentColor; } .notices-floating-object-edit::before { width: 10px; height: 2px; top: 13px; left: 8px; transform: rotate(-35deg); border-radius: 999px; } .notices-floating-object-edit::after { width: 4px; height: 4px; top: 8px; right: 7px; transform: rotate(-35deg); clip-path: polygon(0 100%, 50% 0, 100% 100%); } .notices-floating-object-resize { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 6px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); cursor: nwse-resize; } .notices-floating-object-resize::before { content: ""; position: absolute; right: 5px; bottom: 5px; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; } .notices-compose-floating-paragraph-input { min-height: 1.4lh; padding: 0; } .notices-scene-object-dragging, .notices-scene-object-dragging * { user-select: none; } .notices-detail-block { display: grid; gap: 10px; } .notices-detail-block-title { margin: 0; font-size: 18px; line-height: 1.42; letter-spacing: -0.02em; color: var(--soc-text); } .notices-detail-lead { margin: 0; font-size: 17px; line-height: 1.76; color: var(--soc-text); } .notices-detail-prose p { margin: 0; color: var(--soc-text); font-size: 16px; line-height: 1.78; white-space: pre-wrap; } .notices-rich-content, .notices-compose-rich-editor { font-size: 16px; line-height: 1.78; } .notices-rich-content a, .notices-compose-rich-editor a { color: var(--soc-link, #b45309); text-decoration: underline; } .notices-rich-content [data-rt-size="8"], .notices-compose-rich-editor [data-rt-size="8"] { font-size: 8pt; } .notices-rich-content [data-rt-size="10"], .notices-compose-rich-editor [data-rt-size="10"] { font-size: 10pt; } .notices-rich-content [data-rt-size="11"], .notices-compose-rich-editor [data-rt-size="11"] { font-size: 11pt; } .notices-rich-content [data-rt-size="11.5"], .notices-compose-rich-editor [data-rt-size="11.5"] { font-size: 11.5pt; } .notices-rich-content [data-rt-size="12"], .notices-compose-rich-editor [data-rt-size="12"] { font-size: 12pt; } .notices-rich-content [data-rt-size="14"], .notices-compose-rich-editor [data-rt-size="14"] { font-size: 14pt; } .notices-rich-content [data-rt-size="16"], .notices-compose-rich-editor [data-rt-size="16"] { font-size: 16pt; } .notices-rich-content [data-rt-size="18"], .notices-compose-rich-editor [data-rt-size="18"] { font-size: 18pt; } .notices-rich-content [data-rt-size="20"], .notices-compose-rich-editor [data-rt-size="20"] { font-size: 20pt; } .notices-rich-content [data-rt-size="22"], .notices-compose-rich-editor [data-rt-size="22"] { font-size: 22pt; } .notices-rich-content [data-rt-size="24"], .notices-compose-rich-editor [data-rt-size="24"] { font-size: 24pt; } .notices-rich-content [data-rt-size="26"], .notices-compose-rich-editor [data-rt-size="26"] { font-size: 26pt; } .notices-rich-content [data-rt-size="28"], .notices-compose-rich-editor [data-rt-size="28"] { font-size: 28pt; } .notices-rich-content [data-rt-size="36"], .notices-compose-rich-editor [data-rt-size="36"] { font-size: 36pt; } .notices-rich-content [data-rt-size="48"], .notices-compose-rich-editor [data-rt-size="48"] { font-size: 48pt; } .notices-rich-content [data-rt-size="72"], .notices-compose-rich-editor [data-rt-size="72"] { font-size: 72pt; } .notices-rich-content [data-rt-color="default"], .notices-compose-rich-editor [data-rt-color="default"] { color: var(--soc-text); } .notices-rich-content [data-rt-color="orange"], .notices-compose-rich-editor [data-rt-color="orange"] { color: var(--soc-primary, #ff7a00); } .notices-rich-content [data-rt-color="red"], .notices-compose-rich-editor [data-rt-color="red"] { color: var(--soc-danger, #e11d48); } .notices-rich-content [data-rt-color="blue"], .notices-compose-rich-editor [data-rt-color="blue"] { color: var(--soc-info, #2563eb); } .notices-rich-content [data-rt-color="green"], .notices-compose-rich-editor [data-rt-color="green"] { color: var(--soc-success, #16a34a); } .notices-rich-content [data-rt-color="gray"], .notices-compose-rich-editor [data-rt-color="gray"] { color: var(--soc-text-sub, #64748b); } .notices-rich-content [data-rt-bg="none"], .notices-compose-rich-editor [data-rt-bg="none"] { background: transparent; } .notices-rich-content [data-rt-bg="yellow-soft"], .notices-compose-rich-editor [data-rt-bg="yellow-soft"] { background: #fff36a; } .notices-rich-content [data-rt-bg="orange-soft"], .notices-compose-rich-editor [data-rt-bg="orange-soft"] { background: #ffd7b8; } .notices-rich-content [data-rt-bg="red-soft"], .notices-compose-rich-editor [data-rt-bg="red-soft"] { background: #ffc9d2; } .notices-rich-content [data-rt-bg="blue-soft"], .notices-compose-rich-editor [data-rt-bg="blue-soft"] { background: #c7dcff; } .notices-rich-content [data-rt-bg="green-soft"], .notices-compose-rich-editor [data-rt-bg="green-soft"] { background: #cdeec9; } .notices-rich-content [data-rt-bg="gray-soft"], .notices-compose-rich-editor [data-rt-bg="gray-soft"] { background: #d8dde5; } .notices-rich-content mark, .notices-compose-rich-editor mark { padding: 0 0.15em; border-radius: 0.3em; } .notices-compose-rich-editor a { pointer-events: none; } .notices-detail-table-wrap { overflow-x: auto; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 18px; background: rgba(255, 255, 255, 0.96); } .notices-detail-image-wrap { display: grid; gap: 10px; } .notices-detail-image { width: 100%; max-height: 620px; object-fit: contain; border-radius: 18px; border: 1px solid rgba(148, 163, 184, 0.12); background: rgba(248, 250, 252, 0.9); } .notices-detail-image-caption { margin: 0; color: var(--soc-text-sub); font-size: 14px; line-height: 1.65; } .notices-poll-card { display: grid; gap: 14px; padding: 18px 0; border: 0; border-radius: 0; background: transparent; } .notices-poll-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .notices-poll-title-wrap { display: grid; gap: 0; } .notices-poll-meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .notices-poll-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .notices-poll-summary, .notices-poll-hint { margin: 0; } .notices-poll-summary { color: var(--soc-text-sub); font-size: 14px; line-height: 1.55; font-weight: 700; } .notices-poll-complete-pill { background: #f97316; color: #ffffff; } .notices-poll-options { display: grid; gap: 12px; } .notices-poll-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1.5px solid rgba(100, 116, 139, 0.34); border-radius: 18px; background: #ffffff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); } .notices-poll-option-content { display: grid; gap: 8px; min-width: 0; } .notices-poll-option-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .notices-poll-option-label { color: var(--soc-text); font-size: 15px; line-height: 1.5; font-weight: 700; } .notices-poll-option-votes { color: var(--soc-text-sub); font-size: 14px; font-weight: 700; } .notices-poll-result-bar { position: relative; width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: rgba(226, 232, 240, 0.92); } .notices-poll-result-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fb923c, #f97316); min-width: 0; } .notices-poll-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .notices-detail-table { width: 100%; min-width: 560px; border-collapse: collapse; } .notices-detail-table th, .notices-detail-table td { padding: 14px 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.16); border-right: 1px solid rgba(148, 163, 184, 0.16); font-size: 14px; line-height: 1.6; text-align: left; vertical-align: top; white-space: pre-wrap; } .notices-detail-table th:last-child, .notices-detail-table td:last-child { border-right: 0; } .notices-detail-table tbody tr:last-child td { border-bottom: 0; } .notices-detail-table th { background: rgba(248, 250, 252, 0.96); color: var(--soc-text); font-weight: 700; } .notices-detail-table td { color: var(--soc-text-sub); } .notices-compose-settings-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px 18px; flex-wrap: wrap; padding: 4px 0 22px; border-bottom: 1px solid rgba(148, 163, 184, 0.12); } .notices-compose-setting-field { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .notices-compose-setting-field-compact { max-width: none; flex: 0 1 auto; } .notices-compose-setting-field-inline { align-self: center; position: relative; padding-left: 18px; } .notices-compose-setting-field-actions { align-self: center; justify-self: auto; margin-left: auto; } .notices-compose-setting-label, .notices-compose-setting-field > span { color: var(--soc-text-sub); font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: 0.02em; flex: 0 0 auto; } .notices-compose-settings-panel .input-field select { width: 168px; min-width: 168px; min-height: 42px; border-radius: 12px; background: rgba(248, 250, 252, 0.82); } .notices-compose-setting-switchrow { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; flex-wrap: wrap; } .notices-compose-setting-caption { color: var(--soc-text-sub); font-size: 12px; line-height: 1.45; white-space: nowrap; } .notices-compose-setting-field-inline::before { content: '/'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: rgba(100, 116, 139, 0.72); font-size: 14px; font-weight: 700; } .notices-compose-document { display: grid; gap: 20px; padding: 18px 0 0; } .notices-compose-document-flow { display: grid; gap: 0; align-content: start; position: relative; overflow: visible; } .notices-compose-flow-stream { display: grid; gap: 0; align-content: start; width: 100%; min-width: 0; position: relative; } .notices-compose-flow-stream.has-embed { gap: 0; } .notices-compose-title-input { width: 100%; border: 0; padding: 0; background: transparent; resize: none; color: var(--soc-text); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -0.05em; font-weight: 800; } .notices-compose-body-input { min-height: 440px; padding: 10px 0 0; border: 0; border-radius: 0; background: transparent; color: var(--soc-text); font-size: 16px; line-height: 1.78; resize: vertical; } .notices-compose-rich-editor { width: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; color: var(--soc-text); white-space: pre-wrap; word-break: break-word; caret-color: #f97316; outline: none; } .notices-compose-rich-editor[contenteditable="true"]:empty::before { content: attr(data-notice-rich-placeholder); color: var(--soc-placeholder); pointer-events: none; } .notices-compose-editor-surface { display: grid; gap: 18px; min-height: 440px; } .notices-compose-text-block { gap: 0; padding-top: 0; border-top: 0; transition: margin-top 0.08s ease; } .notices-compose-text-block.has-embedded-blocks .notices-compose-editor-surface { min-height: 0; gap: 0; } .notices-compose-text-block.has-embedded-blocks .notices-compose-body-input { min-height: 220px; } .notices-compose-flow-block { width: 100%; max-width: 100%; } .notices-compose-flow-embed-block { position: relative; padding: 0; margin: 8px 0; border-top: 0; } .notices-compose-flow-paragraph { display: block; padding-top: 0; border-top: 0; position: relative; } .notices-compose-flow-surface { min-height: 0; gap: 0; } .notices-compose-flow-textarea { min-height: 40px; height: auto; padding-top: 0; padding-bottom: 0; overflow: hidden; } .notices-compose-flow-textarea.is-primary-body-surface { min-height: 440px; } .notices-compose-flow-paragraph.is-stream-fragment .notices-compose-flow-textarea { min-height: 0; } .notices-compose-flow-stream.has-embed .notices-compose-flow-paragraph.is-stream-fragment .notices-compose-flow-textarea { min-height: 1lh; } .notices-compose-flow-stream.has-embed .notices-compose-flow-paragraph.is-empty-fragment .notices-compose-flow-textarea { min-height: 1.2lh; padding-top: 0; padding-bottom: 0; } .notices-compose-flow-stream.has-embed .notices-compose-flow-paragraph.is-stream-fragment .notices-compose-flow-textarea::placeholder { color: transparent; } .notices-compose-flow-table-block { clear: both; } .notices-compose-flow-table-block .notices-table-panel, .notices-compose-flow-table-block .notices-compose-table-grid, .notices-compose-flow-table-block .notices-compose-table-shell, .notices-compose-flow-poll-block .notices-poll-card { width: 100%; max-width: 100%; } .notices-compose-flow-table-block .notices-table-panel { overflow-x: auto; overflow-y: visible; } .notices-compose-title-input:focus, .notices-compose-body-input:focus, .notices-compose-table-input:focus, .notices-compose-rich-editor:focus { outline: none; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18); } .notices-compose-toolbar { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 12px 0 10px; border-top: 1px solid rgba(148, 163, 184, 0.12); border-bottom: 1px solid rgba(148, 163, 184, 0.12); } .notices-compose-toolbar-group { display: inline-flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; } .notices-compose-toolbar-group--format { flex: 1 1 auto; min-width: 0; } .notices-compose-toolbar-group--insert { border-left: 1px solid rgba(148, 163, 184, 0.12); padding-left: 14px; } .notices-toolbar-item { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0; border: 0; background: transparent; color: var(--soc-text-sub); font-size: 12px; line-height: 1; font-weight: 600; transition: color 0.18s ease; } .notices-toolbar-item:hover, .notices-toolbar-item:focus-visible { color: var(--soc-text); } .notices-toolbar-item.is-active { color: #c2410c; } .notices-toolbar-item-compact { gap: 6px; } .notices-toolbar-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: currentColor; flex: 0 0 auto; } .notices-toolbar-item-icon svg { width: 16px; height: 16px; display: block; } .notices-toolbar-item-glyph { font-size: 14px; font-weight: 800; } .notices-toolbar-item-glyph-italic { font-style: italic; } .notices-toolbar-item-glyph-underline { text-decoration: underline; } .notices-toolbar-floating-control { position: relative; display: inline-flex; align-items: center; min-width: 0; } .notices-toolbar-size-input-wrap { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px 0 10px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04); } .notices-toolbar-size-input { width: 44px; min-width: 44px; padding: 0; border: 0; background: transparent; color: var(--soc-text); font-size: 12px; line-height: 1; font-weight: 700; text-align: center; box-shadow: none; } .notices-toolbar-size-input:focus { outline: none; } .notices-toolbar-floating-toggle, .notices-toolbar-color-trigger, .notices-toolbar-highlight-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 8px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 10px; background: #fff; color: var(--soc-text-sub); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04); transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .notices-toolbar-floating-toggle:hover, .notices-toolbar-floating-toggle:focus-visible, .notices-toolbar-color-trigger:hover, .notices-toolbar-color-trigger:focus-visible, .notices-toolbar-highlight-trigger:hover, .notices-toolbar-highlight-trigger:focus-visible, .notices-toolbar-floating-toggle.is-active, .notices-toolbar-color-trigger.is-active, .notices-toolbar-highlight-trigger.is-active { border-color: rgba(249, 115, 22, 0.32); color: var(--soc-text); box-shadow: 0 10px 24px rgba(249, 115, 22, 0.12); } .notices-toolbar-chevron { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); flex: 0 0 auto; } .notices-toolbar-color-glyph { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 13px; line-height: 1; font-weight: 800; color: var(--notice-toolbar-text-color, #202430); flex: 0 0 auto; } .notices-toolbar-color-line { width: 12px; height: 3px; border-radius: 999px; background: var(--notice-toolbar-text-color, #202430); flex: 0 0 auto; } .notices-toolbar-highlight-chip { width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(148, 163, 184, 0.24); background: var(--notice-toolbar-highlight-color, #fff36a); box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.55); flex: 0 0 auto; } .notices-toolbar-popover { position: absolute; top: calc(100% + 10px); left: 0; z-index: 24; display: grid; gap: 8px; min-width: 120px; padding: 10px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 16px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12); } .notices-toolbar-size-menu { max-height: 320px; overflow-y: auto; } .notices-toolbar-size-option { display: flex; align-items: center; justify-content: flex-start; min-height: 30px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--soc-text); font-size: 13px; line-height: 1; font-weight: 700; } .notices-toolbar-size-option:hover, .notices-toolbar-size-option:focus-visible { background: rgba(249, 115, 22, 0.12); color: #c2410c; } .notices-color-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 152px; } .notices-color-swatch { position: relative; width: 26px; height: 26px; min-height: 26px; padding: 0; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); } .notices-color-swatch:hover, .notices-color-swatch:focus-visible { border-color: rgba(249, 115, 22, 0.42); transform: translateY(-1px); } .notices-color-swatch-default { background: #202430; } .notices-color-swatch-orange { background: #ff7a00; } .notices-color-swatch-red { background: #e11d48; } .notices-color-swatch-blue { background: #2563eb; } .notices-color-swatch-green { background: #16a34a; } .notices-color-swatch-gray { background: #64748b; } .notices-color-swatch-yellow { background: #fff36a; } .notices-color-swatch-orange-soft { background: #ffd7b8; } .notices-color-swatch-red-soft { background: #ffc9d2; } .notices-color-swatch-blue-soft { background: #c7dcff; } .notices-color-swatch-green-soft { background: #cdeec9; } .notices-color-swatch-gray-soft { background: #d8dde5; } .notices-color-swatch-none { background: linear-gradient(135deg, transparent 0 44%, #94a3b8 45% 55%, transparent 56% 100%), #ffffff; } .notices-editor-action { display: inline-flex; align-items: center; min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--soc-text-sub); font-size: 13px; line-height: 1; font-weight: 600; } .notices-editor-action:hover, .notices-editor-action:focus-visible { color: var(--soc-text); } .notices-table-picker { display: grid; gap: 12px; width: fit-content; margin-top: 10px; padding: 14px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 18px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); } .notices-table-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .notices-table-picker-head strong { color: var(--soc-text); font-size: 13px; line-height: 1.2; } .notices-table-picker-head span { color: var(--soc-text-sub); font-size: 12px; line-height: 1.4; } .notices-table-picker-grid { display: grid; grid-template-columns: repeat(6, 22px); grid-auto-rows: 22px; gap: 6px; } .notices-table-picker-cell { display: block; width: 22px; height: 22px; min-height: 0; aspect-ratio: 1 / 1; padding: 0; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 6px; background: rgba(248, 250, 252, 0.9); line-height: 0; } .notices-table-picker-cell.is-active { border-color: rgba(249, 115, 22, 0.42); background: rgba(255, 237, 213, 0.96); } .notices-compose-inline-block { display: grid; gap: 12px; padding: 0; border-top: 0; position: relative; } .notices-compose-inline-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .is-notice-compose-flow-dragging { opacity: 0.72; } .notices-compose-flow-drop-before { box-shadow: inset 0 3px 0 rgba(249, 115, 22, 0.92); } .notices-compose-flow-drop-after { box-shadow: inset 0 -3px 0 rgba(249, 115, 22, 0.92); } .notices-compose-flow-drop-inline::after { content: ""; position: absolute; left: 0; right: 0; top: var(--notice-compose-drop-line-top, 0px); height: 3px; border-radius: 999px; background: rgba(249, 115, 22, 0.96); pointer-events: none; z-index: 3; } .notices-compose-inline-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .notices-compose-flow-block-actions { position: absolute; top: -12px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 0; pointer-events: none; transition: opacity 0.14s ease, transform 0.14s ease; } .notices-compose-flow-embed-block:hover .notices-compose-flow-block-actions, .notices-compose-flow-embed-block:focus-within .notices-compose-flow-block-actions { opacity: 1; pointer-events: auto; } .notices-compose-inline-kind { color: var(--soc-text-sub); font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: 0.04em; } .notices-inline-remove { min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--soc-text-sub); font-size: 13px; line-height: 1; font-weight: 600; } .notices-inline-remove:hover, .notices-inline-remove:focus-visible { color: var(--soc-text); } .notices-inline-drag-handle { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; min-width: 28px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--soc-text-sub); font-size: 13px; line-height: 1; font-weight: 600; cursor: grab; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .notices-inline-drag-handle:hover, .notices-inline-drag-handle:focus-visible { color: var(--soc-text); } .notices-inline-handle-dots { position: relative; width: 10px; height: 14px; display: inline-block; } .notices-inline-handle-dots::before, .notices-inline-handle-dots::after { content: ""; position: absolute; top: 0; width: 3px; height: 14px; border-radius: 999px; background: radial-gradient(circle, currentColor 1.1px, transparent 1.2px) 0 0 / 3px 5px repeat-y; opacity: 0.78; } .notices-inline-handle-dots::before { left: 0; } .notices-inline-handle-dots::after { right: 0; } .notices-inline-remove-icon, .notices-editor-action-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .notices-inline-remove-glyph, .notices-inline-edit-glyph { position: relative; width: 12px; height: 12px; display: inline-block; } .notices-inline-remove-glyph::before, .notices-inline-remove-glyph::after { content: ""; position: absolute; top: 5px; left: 0; width: 12px; height: 1.5px; border-radius: 999px; background: currentColor; } .notices-inline-remove-glyph::before { transform: rotate(45deg); } .notices-inline-remove-glyph::after { transform: rotate(-45deg); } .notices-inline-edit-glyph::before, .notices-inline-edit-glyph::after { content: ""; position: absolute; display: block; background: currentColor; } .notices-inline-edit-glyph::before { width: 10px; height: 2px; top: 6px; left: 1px; transform: rotate(-35deg); border-radius: 999px; } .notices-inline-edit-glyph::after { width: 4px; height: 4px; top: 1px; right: 0; transform: rotate(-35deg); clip-path: polygon(0 100%, 50% 0, 100% 100%); } body.notices-compose-dragging, body.notices-compose-dragging * { user-select: none; } body.notices-compose-dragging .notices-inline-drag-handle { cursor: grabbing; } .notices-poll-panel, .notices-table-panel { display: grid; gap: 12px; position: relative; } .notices-image-dropzone { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0 10px; border: 0; border-bottom: 1px dashed rgba(249, 115, 22, 0.34); border-radius: 0; background: transparent; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease; } .notices-image-dropzone:hover, .notices-image-dropzone:focus-visible { border-bottom-color: rgba(249, 115, 22, 0.52); } .notices-image-dropzone-label { color: #c2410c; font-size: 14px; line-height: 1.45; font-weight: 700; flex: 0 0 auto; } .notices-image-dropzone-helper { color: var(--soc-text-sub); font-size: 13px; line-height: 1.5; } .notices-image-list { display: grid; gap: 18px; margin: 0; padding: 0; } .notices-image-item { display: grid; gap: 10px; align-items: start; padding: 0; border-top: 0; margin: 0; } .notices-image-media { position: relative; display: grid; } .notices-image-preview { width: min(100%, 520px); height: auto; max-height: 460px; object-fit: contain; border-radius: 14px; background: rgba(248, 250, 252, 0.9); border: 1px solid rgba(148, 163, 184, 0.1); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08); } .notices-image-fields { display: grid; gap: 8px; min-width: 0; } .notices-image-actions { position: absolute; top: 10px; right: 10px; display: inline-flex; justify-content: flex-end; align-items: flex-start; } .notices-compose-setting-cluster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; } .notices-compose-toggle-stack { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .notices-compose-toggle-row { display: inline-flex; gap: 12px; align-items: center; padding: 0; border-top: 0; } .notices-compose-toggle-copy strong { color: var(--soc-text); font-size: 14px; line-height: 1.45; } .notices-switch-button { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 0; border: 0; background: transparent; color: var(--soc-text); font-size: 13px; line-height: 1; font-weight: 700; } .notices-switch-track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(148, 163, 184, 0.34); transition: background-color 0.18s ease, box-shadow 0.18s ease; flex: 0 0 auto; } .notices-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18); transition: transform 0.18s ease; } .notices-switch-copy { color: var(--soc-text); font-size: 13px; line-height: 1; font-weight: 700; } .notices-switch-button.is-active .notices-switch-track { background: rgba(249, 115, 22, 0.92); } .notices-switch-button.is-active .notices-switch-track::after { transform: translateX(18px); } .notices-switch-button.is-active .notices-switch-copy { color: #c2410c; } .notices-poll-editor-head, .notices-table-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .notices-poll-editor-head strong, .notices-table-editor-head strong { color: var(--soc-text-sub); font-size: 12px; line-height: 1.4; letter-spacing: 0.03em; } .notices-compose-poll-summary { display: grid; gap: 14px; min-height: 240px; padding: 18px 0; border-top: 1px solid rgba(148, 163, 184, 0.16); border-bottom: 1px solid rgba(148, 163, 184, 0.16); } .notices-compose-poll-question { color: var(--soc-text); font-size: 18px; line-height: 1.5; } .notices-compose-poll-tags { display: flex; flex-wrap: wrap; gap: 8px; } .notices-compose-poll-preview-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--soc-text-sub); font-size: 14px; line-height: 1.6; } .notices-compose-poll-preview-item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 16px; background: rgba(248, 250, 252, 0.78); color: var(--soc-text); font-size: 15px; font-weight: 600; } .notices-compose-poll-preview-item::before { content: ''; width: 10px; height: 10px; border-radius: 999px; background: rgba(249, 115, 22, 0.9); flex: 0 0 auto; } .notices-poll-option-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .notices-poll-option-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 12px 0 0; border-top: 1px solid rgba(148, 163, 184, 0.12); } .notices-poll-option-item:first-child { padding-top: 0; border-top: 0; } .notices-poll-option-actions { display: flex; justify-content: flex-end; } .notices-compose-table-grid { position: relative; overflow: visible; min-height: 0; width: 100%; max-width: 100%; padding-right: 44px; padding-bottom: 44px; background: transparent; box-sizing: border-box; } .notices-compose-table-shell { position: relative; width: 100%; max-width: 100%; } .notices-compose-table { width: 100%; min-width: 0; height: auto; border-collapse: collapse; border-top: 1px solid rgba(148, 163, 184, 0.14); border-bottom: 1px solid rgba(148, 163, 184, 0.14); background: rgba(255, 255, 255, 0.98); table-layout: fixed; } .notices-compose-table th, .notices-compose-table td { padding: 0; border-right: 1px solid rgba(148, 163, 184, 0.16); border-bottom: 1px solid rgba(148, 163, 184, 0.16); } .notices-compose-table th:last-child, .notices-compose-table td:last-child { border-right: 0; } .notices-compose-table tbody tr:last-child td { border-bottom: 0; } .notices-compose-table th { background: rgba(248, 250, 252, 0.92); } .notices-compose-table-input { width: 100%; min-width: 0; min-height: 52px; padding: 14px 16px; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--soc-text); font-size: 15px; line-height: 1.45; } .notices-compose-rich-editor[data-notice-compose-editor-kind="table-header"], .notices-compose-rich-editor[data-notice-compose-editor-kind="table-cell"] { min-height: 24px; } .notices-compose-table-edge-controls { position: absolute; display: inline-flex; align-items: center; gap: 8px; z-index: 4; } .notices-compose-table-edge-controls-rows { top: 50%; right: -40px; transform: translateY(-50%); flex-direction: column; } .notices-compose-table-edge-controls-columns { left: 50%; bottom: -40px; transform: translateX(-50%); } .notices-compose-table-edge-button { width: 28px; height: 28px; min-height: 28px; padding: 0; border: 1px solid rgba(249, 115, 22, 0.26); border-radius: 999px; background: #fff; color: #f97316; font-size: 16px; line-height: 1; font-weight: 700; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); } .notices-compose-table-edge-button:hover, .notices-compose-table-edge-button:focus-visible { border-color: rgba(249, 115, 22, 0.52); background: rgba(255, 247, 237, 0.98); } .notices-compose-footer { display: flex; justify-content: flex-end; padding-top: 18px; border-top: 1px solid rgba(148, 163, 184, 0.12); } .notices-command-link { min-height: 34px; padding-left: 0; padding-right: 0; border-radius: 999px; font-size: 13px; line-height: 1; } .notices-command-publish { min-height: 42px; padding: 0 18px; border: 1px solid color-mix(in srgb, var(--soc-primary, #f97316) 28%, transparent); border-radius: 999px; background: linear-gradient( 180deg, color-mix(in srgb, var(--soc-primary, #f97316) 82%, white) 0%, var(--soc-primary, #f97316) 100% ); color: var(--soc-on-primary, #fff); box-shadow: 0 14px 28px color-mix(in srgb, var(--soc-primary, #f97316) 18%, transparent); font-size: 14px; line-height: 1; font-weight: 800; } .notices-command-publish:hover, .notices-command-publish:focus-visible { background: linear-gradient( 180deg, color-mix(in srgb, var(--soc-primary, #f97316) 72%, white) 0%, var(--soc-primary-deep, var(--soc-primary, #fb7f1f)) 100% ); color: var(--soc-on-primary, #fff); } .notices-command-publish { min-height: 40px; padding: 0 18px; border-radius: 999px; } .notices-compose-draft-meta { margin: 0; font-size: 12px; line-height: 1.4; text-align: right; } .notices-empty-state { display: grid; gap: 6px; min-height: 220px; place-content: center; text-align: center; color: var(--soc-text-sub); } .notices-empty-state strong { color: var(--soc-text); font-size: 16px; } .notices-compose-poll-modal { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 1600; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; display: grid; gap: 0; padding: 24px; border-radius: 24px; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(255, 255, 255, 0.98); box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18); } .notices-compose-link-modal { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 1600; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; display: grid; gap: 0; padding: 24px; border-radius: 24px; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(255, 255, 255, 0.98); box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18); } .notices-link-modal-note { margin: 0; } .notices-compose-poll-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .notices-compose-poll-modal-head h3 { margin: 0; color: var(--soc-text); font-size: 22px; line-height: 1.25; letter-spacing: -0.03em; } .notices-compose-poll-modal-body { display: grid; gap: 16px; padding-top: 16px; } .notices-compose-setting-cluster-modal { grid-template-columns: repeat(2, minmax(0, 1fr)); } .notices-compose-poll-modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; margin-top: 18px; border-top: 1px solid rgba(148, 163, 184, 0.12); } @media (max-width: 1199px) { .notices-compose-settings-panel, .notices-compose-setting-cluster, .notices-compose-setting-cluster-modal { grid-template-columns: 1fr; } .notices-compose-setting-field-actions { justify-self: start; margin-left: 0; } .notices-image-dropzone { flex-wrap: wrap; } } @media (min-width: 1200px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView :is(#analyticsTrendPanel#analyticsTrendPanel, #analyticsPatternPanel#analyticsPatternPanel) { min-height: 292px !important; height: 292px !important; max-height: 292px !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-shell { display: grid !important; grid-template-rows: 197px auto !important; flex: 1 1 auto !important; min-height: 0 !important; height: 248px !important; max-height: 248px !important; padding: 0 12px 10px !important; overflow: hidden !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-grid-board { min-height: 0 !important; height: 197px !important; max-height: 197px !important; overflow-x: auto !important; overflow-y: hidden !important; } } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-shell.soc-analytics-pattern-shell { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-gutter: stable !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView { --sentrix-risk-history-contract: 1; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-grid-board { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-gutter: stable !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-grid-board { grid-template-columns: 64px repeat(var(--analytics-pattern-columns, 24), 36px) !important; grid-auto-rows: 20px !important; column-gap: 4px !important; row-gap: 4px !important; width: max-content !important; min-width: max-content !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-cell-board { width: 36px !important; min-width: 36px !important; height: 20px !important; min-height: 20px !important; aspect-ratio: auto !important; font-size: 10px !important; line-height: 20px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .line.line--safe { stroke: #18a957 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .line.line--caution { stroke: #f59e0b !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .line.line--danger { stroke: #ef4d5d !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .dot.dot--safe { fill: #18a957 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .dot.dot--caution { fill: #f59e0b !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .dot.dot--danger { fill: #ef4d5d !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .line.line--score { stroke: var(--analytics-reference-orange) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .dot.dot--score { fill: var(--analytics-reference-orange) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip .tooltip-score { fill: #ff6418 !important; font-size: 12px !important; font-weight: 900 !important; } @media (min-width: 1200px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView { margin-top: -38px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 { gap: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRangeQuick#analyticsRangeQuick button.ds-btn.ds-btn-sm { min-height: 36px !important; height: 36px !important; max-height: 36px !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile strong { display: block !important; min-height: 0 !important; height: auto !important; max-height: none !important; } } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRangeQuick#analyticsRangeQuick button.active, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRangeQuick#analyticsRangeQuick button.active { border-color: var(--analytics-reference-orange) !important; background: var(--soc-surface) !important; color: var(--analytics-reference-orange) !important; -webkit-text-fill-color: var(--analytics-reference-orange) !important; } /* Sentrix dashboard reference alignment: neutralize legacy workspace spacing. */ @media (min-width: 1200px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView { margin-top: -38px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 { gap: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRangeQuick#analyticsRangeQuick button.ds-btn.ds-btn-sm { min-height: 36px !important; height: 36px !important; max-height: 36px !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile strong { display: block !important; min-height: 0 !important; height: auto !important; max-height: none !important; } } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRangeQuick#analyticsRangeQuick button.active, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRangeQuick#analyticsRangeQuick button.active { border-color: var(--analytics-reference-orange) !important; background: var(--soc-surface) !important; color: var(--analytics-reference-orange) !important; -webkit-text-fill-color: var(--analytics-reference-orange) !important; } @media (min-width: 1200px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView { padding-top: 0 !important; padding-block-start: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 { padding: 12px 16px 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-v2-header { display: block !important; min-height: 36px !important; height: auto !important; margin: 0 0 var(--analytics-reference-gap) !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-v2-toolbar { display: flex !important; align-items: center !important; width: 100% !important; min-height: 36px !important; height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-board-row--hero > .soc-analytics-board-card { height: 268px !important; min-height: 268px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile { display: flex !important; grid-template-columns: none !important; grid-template-rows: none !important; flex-direction: column !important; justify-content: center !important; gap: 0 !important; min-height: 0 !important; padding: 10px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile strong { margin-top: 4px !important; font-size: 24px !important; line-height: 27px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .meta { margin-top: 2px !important; font-size: 10px !important; line-height: 14px !important; } html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-board-card-head h3 { color: #182235 !important; } html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-risk-info-trigger { background: #eef1f5 !important; color: #657085 !important; } html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track { stroke: #e9edf3 !important; } html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc { stroke: var(--analytics-reference-orange) !important; } html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard #analyticsRiskScoreValue#analyticsRiskScoreValue { color: #111827 !important; font-size: 30px !important; line-height: 34px !important; } html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-risk-grade { border-color: var(--analytics-reference-orange) !important; background: #ffffff !important; color: var(--analytics-reference-orange) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRangeQuick#analyticsRangeQuick button.active, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRangeQuick#analyticsRangeQuick button.active { border-color: var(--analytics-reference-orange) !important; background: var(--soc-surface-2) !important; color: var(--analytics-reference-orange) !important; } } @media (max-width: 767px) { #announcementPanel .workspace-head, .notices-toolbar-row, .notices-section-head, .notices-poll-head, .notices-poll-actions, .notices-compose-toggle-row, .notices-compose-poll-modal-head, .notices-compose-poll-modal-actions { flex-direction: column; align-items: stretch; } .notices-search-form { width: 100%; justify-content: flex-end; margin-left: 0; } .notices-search-form.is-expanded .notices-search-input-wrap { width: 100%; } .notices-detail-actions { width: 100%; } .notices-detail-actions .btn { flex: 1 1 auto; } .notices-list-button { grid-template-columns: 1fr; gap: 8px; } .notices-list-panel, .notices-toolbar-row, .notices-detail-panel > .notices-section-head, .notices-detail-panel > .notices-detail-body, .notices-compose-settings-panel, .notices-compose-document { width: calc(100% - 40px); } .notices-list-panel { padding: 16px 18px 8px; border-radius: 24px; } .notices-poll-option, .notices-poll-option-item, .notices-image-item { grid-template-columns: 1fr; } .notices-toolbar-popover { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); top: auto; min-width: 0; max-height: min(46vh, 360px); overflow-y: auto; border-radius: 18px; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18); } .notices-color-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; } .notices-toolbar-size-input-wrap { min-width: 74px; } .notices-compose-panel { width: calc(100% - 24px); padding: 22px 16px 20px; } .notices-compose-settings-panel { margin-left: 0; } .notices-compose-setting-field, .notices-compose-setting-field-compact, .notices-compose-setting-field-inline, .notices-compose-setting-field-actions { width: 100%; margin-left: 0; } .notices-compose-setting-field { justify-content: space-between; flex-wrap: wrap; } .notices-compose-setting-field-inline { padding-left: 0; } .notices-compose-setting-field-inline::before { content: none; } .notices-compose-settings-panel .input-field select { width: 100%; min-width: 0; } .notices-image-preview { width: 100%; max-height: 320px; } .notices-compose-table-grid { padding-right: 0; padding-bottom: 88px; } .notices-compose-table-edge-controls-rows { top: auto; right: auto; left: 50%; bottom: -40px; transform: translateX(-50%); flex-direction: row; } .notices-compose-table-edge-controls-columns { bottom: -80px; } } /* Unified icon tone */ .soc-bottom-tab-icon, .soc-realtime-date-icon, .report-choice-icon, .incident-more-btn, .icon-btn { color: var(--soc-text-sub); } .soc-bottom-tab-btn.is-active .soc-bottom-tab-icon, .report-choice-card .report-choice-icon { color: var(--soc-primary); } /* Responsive */ @media (max-width: 1180px) { .container.admin-layout { grid-template-columns: 1fr; } #menuSheetPanel { display: none !important; } .soc-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soc-home-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .incident-detail-grid { grid-template-columns: 1fr; } .notification-timeline-toolbar { grid-template-columns: 1fr 1fr; } .notification-timeline-toolbar > button { grid-column: 1 / -1; } .notification-filter-panel { left: 8px; right: 8px; top: calc(var(--soc-safe-top) + 60px); padding: 8px 8px 6px; } .soc-realtime-datebar { gap: 8px; } .soc-summary-grid { gap: 8px; } .soc-summary-card { min-height: 76px; padding: 9px 10px; } .soc-summary-value { font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-line); font-weight: var(--type-display-lg-weight); } .soc-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #homeWeeklyBriefing .soc-home-weekly-chart { padding: 10px 10px 8px; gap: 16px; } #homeWeeklyBriefing .soc-home-weekly-chart-bar { max-width: 18px; height: 102px; } #homeWeeklyBriefing .soc-home-weekly-chart-label { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); } #homeWeeklyBriefing .soc-home-weekly-chart-value { font-size: var(--type-title-md-size); line-height: var(--type-title-md-line); font-weight: var(--type-title-md-weight); } #homeWeeklyBriefing .soc-home-weekly-ratio-pill { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); padding: 5px 9px; } .soc-kpi-card { min-height: 116px; } .soc-hero-status-head { align-items: flex-start; flex-direction: column; } .soc-analytics-header { grid-template-columns: 1fr; } .soc-analytics-header-right { justify-items: stretch; } .soc-analytics-site-filter { justify-content: flex-start; gap: 8px; } .soc-analytics-hero { grid-template-columns: 1fr; justify-items: stretch; padding: 10px; } .risk-overview-card { grid-template-columns: 1fr; grid-template-areas: "toolbar" "gauge" "title" "meta"; } .soc-analytics-hero-meta { width: 100%; } .soc-analytics-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .soc-analytics-trend-grid { grid-template-columns: 1fr; gap: 8px; } .soc-analytics-trend-grid > .soc-block { min-height: 158px; } .soc-heatmap-scroll { min-height: 196px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .soc-heatmap-grid { min-width: 760px; grid-template-columns: 42px repeat(24, minmax(28px, 1fr)); } .soc-heatmap-grid.is-mobile-day { min-width: 0; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; } .soc-heatmap-day-tabs { gap: 5px; } .soc-heatmap-day-btn { min-height: 28px; padding: 4px 8px; } .soc-analytics-store-drawer { left: 0; right: 0; width: 100%; max-width: 100%; bottom: 0; top: auto; max-height: 85dvh; border-radius: 16px 16px 0 0; padding: 8px 10px calc(10px + var(--soc-safe-bottom)); transform: translate3d(0, calc(100% + var(--soc-safe-bottom)), 0); } #analyticsStoreDrawerHandle { display: block; margin-bottom: 2px; } .soc-analytics-store-drawer:not(.hidden) { transform: translate3d(0, var(--soc-analytics-drawer-drag, 0), 0); } .soc-analytics-store-mini { grid-template-columns: 1fr; } .soc-analytics-store-drawer-body { max-height: calc(85dvh - 120px); } .soc-store-comparison-actions { width: 100%; justify-content: flex-start; } .soc-store-comparison-actions .analytics-store-metric-select { flex: 1 1 auto; min-width: 0; max-width: none; } .soc-store-info-popover { width: min(280px, calc(100vw - 24px)); } .soc-report-preview .soc-report-store-chart-head { align-items: flex-start; flex-direction: column; } .soc-report-preview .soc-report-store-chart-metric { white-space: normal; } .soc-analytics-view, .soc-reports-view, .soc-admin-view, .soc-weekly-view, .soc-people-view, .soc-profile-view { gap: 10px; width: 100%; max-width: 100%; overflow-x: hidden; } .soc-profile-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #topbarMyProfileBtn { min-height: 34px; padding: 6px 10px; font-size: var(--soc-text-xs); } .soc-reports-site-multi, .soc-reports-section-toggles { grid-template-columns: 1fr; } .soc-reports-site-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soc-report-browse-grid { grid-template-columns: 1fr; } .soc-report-headerbar { top: 0; padding: 9px 10px; border-radius: 12px; } .soc-report-title-wrap h3 { font-size: var(--soc-text-md); } #reportSummaryText, #reportHeaderSummary { font-size: var(--soc-text-xs); } .soc-report-header-actions, .report-actions { justify-content: flex-end; } .soc-report-builder-panel { min-height: min(65dvh, 700px); height: min(70dvh, 760px); max-height: 84dvh; } .soc-weekly-builder-panel { min-height: min(65dvh, 700px); height: min(70dvh, 760px); max-height: 84dvh; } .soc-weekly-workspace-shell { grid-template-columns: minmax(0, 1fr); } .soc-weekly-review-grid, .soc-weekly-config-grid { grid-template-columns: minmax(0, 1fr); } .soc-weekly-builder-site-options { grid-template-columns: 1fr; } .soc-weekly-section-card[data-weekly-section="heatmap"] { min-height: 340px; } .soc-weekly-heatmap-scroll { min-height: 212px; } .soc-weekly-heatmap-table { min-width: 620px; } .soc-weekly-heatmap-table th, .soc-weekly-heatmap-table td { min-width: 21px; height: 20px; font-size: 9px; } .soc-weekly-heatmap-table tbody th { min-width: 34px; } #reportBuilderSheet.mode-expanded .soc-report-builder-panel { min-height: min(70dvh, 760px); height: min(80dvh, 840px); } #reportBuilderSheet.mode-drawer .soc-report-builder-panel { width: 100%; min-height: min(65dvh, 700px); height: min(70dvh, 760px); max-height: 84dvh; border-radius: 16px 16px 0 0; border: 1px solid var(--soc-border); } .soc-report-preview-viewport { height: 100%; min-height: 0; max-height: none; overflow-y: auto; overflow-x: hidden; padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 16px); } .soc-admin-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } } @media (min-width: 1024px) and (max-height: 820px) { .container.ds-page { padding-top: 10px; padding-bottom: calc(64px + var(--soc-safe-bottom)); gap: 10px; } .soc-reports-view { gap: 10px; } .soc-report-headerbar { padding: 8px 10px; } .soc-report-preview-viewport { height: 100%; min-height: 0; padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 16px); } #reportBuilderSheet.mode-drawer .soc-bottom-sheet-panel.soc-report-builder-panel { width: min(392px, 92vw); } #reportBuilderSheet.mode-drawer .soc-report-builder-steps { max-height: calc(100dvh - 176px); } } @media (prefers-reduced-motion: reduce) { .soc-kpi-card, .soc-block, .soc-mini-row { transition: none; } .soc-kpi-card:hover, .soc-kpi-card:active, .soc-block:hover, .soc-block:active, .soc-mini-row:hover, .soc-mini-row:active { transform: none; box-shadow: var(--soc-shadow-soft); } } @media (max-width: 900px) { .soc-app-shell { --soc-tabbar-bottom-offset: 0px; --soc-main-scroll-padding: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 24px); position: fixed; inset: 0; width: 100%; min-height: 100dvh !important; height: 100dvh !important; grid-template-rows: auto minmax(0, 1fr); } .soc-app-shell::after { display: none; } @supports (height: 100svh) { .soc-app-shell { min-height: 100svh !important; height: 100svh !important; } } .topbar { min-height: 56px; padding-left: 10px; padding-right: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; column-gap: 8px; } .topbar h1 { font-size: 15px; max-width: 100%; } .topbar-brand-wordmark { height: 19px; max-width: min(48vw, 180px); } .topbar-left { flex: 1 1 auto; max-width: none; } .topbar-right { flex: 0 0 auto; max-width: none; overflow: visible; padding-right: max(2px, env(safe-area-inset-right, 0px)); } .session-info { display: none; } .container.ds-page { width: 100%; min-height: 0; padding: 8px 8px var(--soc-main-scroll-padding); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; } body.role-field .container.ds-page, body.role-hq .container.ds-page { padding: 8px; overflow-y: hidden; } #dashboardPanel { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; max-height: calc(100dvh - (var(--soc-safe-top) + 66px) - var(--soc-safe-bottom)); overflow-y: hidden; } .admin-tab-content:not(#dashboardPanel), #reportPanel { max-height: calc(100dvh - (var(--soc-safe-top) + 66px) - var(--soc-safe-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--soc-main-scroll-padding); } #homeView, #alertsView, #ticketsView, #weeklyView, #peopleView, #myProfileView, #analyticsView, #adminView { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--soc-main-scroll-padding); } #reportsView { min-height: 0; overflow: hidden; padding-bottom: 0; } #reportSummaryText, #reportHeaderSummary { font-size: 12px; } .report-actions { gap: 4px; } .report-actions .ds-btn { min-height: 34px; padding-left: 8px; padding-right: 8px; } #openReportBuilderBtn .btn-label-full, #reportsGenerateBtn .btn-label-full, #reportsResetBtn .btn-label-full { display: none; } #openReportBuilderBtn .btn-label-short, #reportsGenerateBtn .btn-label-short, #reportsResetBtn .btn-label-short { display: inline-block; } #reportPanel, #reportFlowStart, #reportTypeGrid { width: 100%; min-width: 0; overflow-x: hidden; } .panel, .panel.ds-card, .ds-card { padding: 12px; } .topbar-right .topbar-btn { display: none !important; } .topbar-right #topbarNotificationsBtn.topbar-btn:not(.hidden) { display: inline-flex !important; align-items: center; justify-content: center; min-width: 42px; min-height: 42px !important; height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--soc-text); box-shadow: none; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: visible !important; transform: translateX(-2px); } .topbar-right #topbarNotificationsBtn.topbar-btn:not(.hidden) .topbar-notification-badge { top: -6px; right: -7px; min-width: 16px; height: 16px; padding: 0 3px; font-size: 10px; line-height: 1; } body.nav-open .nav-backdrop { opacity: 1 !important; pointer-events: auto !important; background: var(--soc-overlay-soft) !important; z-index: 300 !important; } body.nav-open { overflow: hidden; overscroll-behavior: none; } body.nav-open .container.ds-page { overflow: hidden; } #menuSheetPanel, .container.admin-layout #menuSheetPanel, body.nav-open .container.admin-layout #menuSheetPanel { display: flex !important; flex-direction: column; position: fixed; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; height: min(50dvh, 50vh) !important; max-height: min(50dvh, 50vh) !important; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; z-index: 400 !important; border-radius: 16px 16px 0 0 !important; background: var(--soc-nav-sheet-bg) !important; background-image: none !important; background-color: var(--soc-nav-sheet-bg) !important; border-left: 1px solid var(--soc-border); border-top: 1px solid var(--soc-border-strong); border-bottom: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(108%) !important; transition: transform 0.24s ease, opacity 0.2s ease; filter: none !important; mix-blend-mode: normal !important; isolation: isolate; } #menuSheetPanel .admin-tab-list, #menuSheetPanel .admin-tab-btn, #menuSheetPanel .mobile-nav-actions { position: relative; z-index: 1; pointer-events: auto; } #menuSheetPanel .admin-tab-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 6px; align-content: start; margin: 0; padding: 0; } /* Keep Admin menu in a single vertical list on mobile. */ #menuSheetPanel .admin-tab-list, #menuSheetPanel .mobile-nav-actions { grid-template-columns: minmax(0, 1fr) !important; } #menuSheetPanel .admin-tab-btn { min-height: 46px; padding: 8px 26px 8px 2px; margin: 0; align-self: start; border: 0 !important; border-bottom: 1px solid var(--soc-nav-sheet-divider) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--soc-nav-item-text) !important; text-align: left; font-size: 13px; font-weight: 700; line-height: 1.25; position: relative; } #menuSheetPanel .admin-tab-btn.soc-menu-item, #menuSheetPanel .mobile-nav-action-btn.soc-menu-item { width: 100%; min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; } #menuSheetPanel .admin-tab-btn.soc-menu-item::before { color: var(--soc-text-sub); max-width: 100%; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; } #menuSheetPanel .mobile-nav-action-btn.soc-menu-item::before { color: var(--soc-text-sub); max-width: 100%; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; } #menuSheetPanel .admin-tab-btn.soc-menu-item::after { right: 4px; color: var(--soc-text-sub); } #menuSheetPanel .admin-tab-btn.active, #menuSheetPanel .admin-tab-btn:active { background: transparent !important; color: var(--soc-nav-item-text) !important; border-bottom-color: var(--soc-nav-sheet-divider-active) !important; } #menuSheetPanel > .ds-card-title { position: relative; z-index: 2; flex: 0 0 auto; margin: 0 0 6px; padding: 0; color: var(--soc-nav-item-text); } #menuSheetPanel .nav-sheet-handle { order: -1; display: flex; align-items: center; justify-content: center; height: 18px; margin: 0 -12px 6px; padding: 8px 0 6px; background: var(--soc-nav-sheet-bg); border-top-left-radius: 16px; border-top-right-radius: 16px; touch-action: none; cursor: grab; user-select: none; } #menuSheetPanel .nav-sheet-handle span { display: block; width: 42px; height: 5px; border-radius: 999px; background: var(--soc-nav-sheet-handle); } #menuSheetPanel.nav-sheet-swiping .nav-sheet-handle span { background: var(--soc-nav-sheet-handle-active); } #menuSheetPanel, #menuSheetPanel .admin-tab-btn, #menuSheetPanel .mobile-menu-view-btn, #menuSheetPanel .mobile-menu-view-header, #menuSheetPanel .mobile-menu-view-back, #menuSheetPanel > .ds-card-title { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .mobile-menu-pager { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; } .mobile-type-flow-track { display: flex; width: 400%; height: 100%; min-height: 0; transform: translateX(0%); transition: transform 0.26s ease; } .mobile-menu-view { display: flex; position: absolute; inset: 0; z-index: 6; background: var(--soc-nav-sheet-bg); padding: 14px 12px; transform: translateX(-108%); opacity: 0; pointer-events: none; transition: transform 0.2s ease, opacity 0.2s ease; flex-direction: column; gap: 10px; } .mobile-menu-root-page { display: flex; flex-direction: column; gap: 8px; min-height: 100%; overflow: hidden; } .mobile-type-flow-track > .mobile-menu-root-page, .mobile-type-flow-track > .mobile-menu-view.mobile-type-page { position: relative; inset: auto; width: 25%; min-width: 25%; height: 100%; min-height: 0; padding: 0 12px 6px; transform: none; opacity: 1; pointer-events: auto; z-index: 1; } .mobile-type-flow-track > .mobile-menu-view.mobile-type-page { background: transparent; transition: none; } #menuSheetPanel .admin-tab-btn[data-tab="realtime"] { display: none !important; } #menuSheetPanel .admin-tab-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } #menuSheetPanel .mobile-admin-shortcuts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } #menuSheetPanel .mobile-admin-shortcut-btn { min-height: 42px; padding: 6px 26px 6px 2px; margin: 0; align-self: start; border: 0 !important; border-bottom: 1px solid var(--soc-nav-sheet-divider) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--soc-nav-item-text) !important; text-align: left; font-size: 13px; font-weight: 700; line-height: 1.25; position: relative; } #menuSheetPanel .mobile-admin-shortcut-btn + .mobile-admin-shortcut-btn { margin-top: -2px; } #menuSheetPanel .mobile-admin-shortcut-btn.soc-menu-item::before { margin-top: 1px; line-height: 1.2; } #menuSheetPanel .mobile-admin-shortcut-btn.soc-menu-item::after { right: 4px; color: var(--soc-text-sub); } #menuSheetPanel .mobile-nav-actions { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; flex: 0 0 auto; margin-top: auto; padding: 10px 0 2px; border-top: 0; } #menuSheetPanel .mobile-nav-action-btn { width: 100%; min-height: 46px; text-align: left; padding: 8px 26px 8px 10px; } #menuSheetPanel .mobile-nav-action-btn--plain { width: auto !important; min-height: 24px !important; height: auto !important; padding: 2px 0 !important; text-align: center !important; font-size: 13px !important; line-height: 1.2 !important; white-space: nowrap !important; } #menuSheetPanel .mobile-nav-actions-divider { width: min(240px, 78%); height: 1px; margin: 8px auto; } #mobileExcelMenuView { transform: translateX(100%); } #mobileAnnouncementMenuView { transform: translateX(-108%); } #menuSheetPanel.menuview-open-announcement #mobileAnnouncementMenuView, #menuSheetPanel.menuview-open-excel #mobileExcelMenuView { transform: translateX(0); opacity: 1; pointer-events: auto; } #menuSheetPanel.menuview-open-announcement .mobile-nav-actions, #menuSheetPanel.menuview-open-excel .mobile-nav-actions, #menuSheetPanel.menuview-open-type .mobile-nav-actions { display: none !important; } #menuSheetPanel.menuview-open-type.menuview-open-type-step-2 #mobileTypeFlowTrack { transform: translateX(-25%); } #menuSheetPanel.menuview-open-type.menuview-open-type-step-3 #mobileTypeFlowTrack { transform: translateX(-50%); } #menuSheetPanel.menuview-open-type.menuview-open-type-step-4 #mobileTypeFlowTrack { transform: translateX(-75%); } body.nav-open #menuSheetPanel, body.nav-open .container.admin-layout #menuSheetPanel { display: flex !important; opacity: 1 !important; visibility: visible; pointer-events: auto !important; transform: translateY(0) !important; filter: none !important; mix-blend-mode: normal !important; z-index: 400 !important; } body.nav-open #menuSheetPanel.nav-sheet-swiping, body.nav-open .container.admin-layout #menuSheetPanel.nav-sheet-swiping { transition: none !important; transform: translateY(var(--soc-nav-sheet-drag, 0px)) !important; } #bottomTabNav.soc-bottom-tab { display: grid; position: fixed !important; inset: auto 0 0 0 !important; top: auto !important; min-height: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px)) !important; height: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px)) !important; max-height: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px)) !important; margin: 0 !important; padding: 0 0 env(safe-area-inset-bottom, 0px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; border-radius: 0 !important; transform: none !important; box-shadow: 0 -6px 16px var(--soc-tabbar-shadow-soft); z-index: 120 !important; } #bottomTabNav.soc-bottom-tab .soc-bottom-tab-btn { min-height: var(--soc-tabbar-h, 54px) !important; height: var(--soc-tabbar-h, 54px) !important; padding: 0 !important; align-content: center !important; gap: 2px; font-size: 12px; } #bottomTabNav.soc-bottom-tab .soc-bottom-tab-icon { font-size: 20px; } #bottomTabNav.soc-bottom-tab .soc-bottom-tab-icon-img { width: 20px; height: 20px; } #bottomTabNav.soc-bottom-tab .soc-bottom-tab-btn > span:last-child { font-size: 12px; line-height: 1.15; } body.nav-open #bottomTabNav.soc-bottom-tab { opacity: 0; pointer-events: none; } .soc-filterbar { display: none; } .incident-card-head { flex-direction: row; align-items: flex-start; } .incident-created-at { text-align: left; margin-top: 0; } .controls, .instruction-form, .notification-actions, .confirm-actions, .attachment-preview-controls, .attachment-preview-actions { flex-direction: column; align-items: stretch; } .ticket-comment-form, .ticket-attachment-form { grid-template-columns: 1fr; } .controls .statusSelect, .instruction-form .instructionInput { min-width: 0; } .soc-stepper { grid-template-columns: 1fr; } .date-filter-group { display: flex; flex-wrap: wrap; gap: 6px; } .date-filter-btn, .site-filter-btn, .announcement-mode-btn, .report-tab, .sla-page-btn { min-height: 40px; padding: 6px 8px; font-size: 11px; } .report-choice-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-auto-rows: 1fr; } .report-choice-grid-1col .report-choice-card { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; } #reportPanel.report-selection-active { overflow: visible; border: 0; box-shadow: none; background: transparent; padding: 0; } #reportPanel.report-selection-active > .ds-card-title { display: none; } #reportPanel.report-selection-active #reportView { width: 100dvw; max-width: 100dvw; margin-left: calc(50% - 50dvw); margin-right: calc(50% - 50dvw); padding: 0 10px 20px; gap: 10px; box-sizing: border-box; overflow-x: clip; } @supports not (width: 100dvw) { #reportPanel.report-selection-active #reportView { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } } #reportPanel.report-selection-active #reportFlowStart { max-height: none; min-height: 0; overflow-x: hidden; overflow-y: visible; touch-action: pan-y; overscroll-behavior: auto; padding-top: 0; } #reportPanel.report-selection-active .report-flow-step { height: auto; min-height: 0; align-content: start; grid-template-rows: auto auto; gap: 10px; } #reportPanel.report-selection-active .report-flow-title { margin: 0; padding: 0; max-width: none; font-size: clamp(24px, 7vw, 32px); } #reportPanel.report-selection-active .report-choice-grid-1col { height: auto; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(150px, auto); overflow: visible; padding-top: 0; gap: 12px; } #reportPanel.report-selection-active .report-choice-grid-1col .report-choice-card { width: 100%; height: auto; min-height: 150px; aspect-ratio: auto; max-height: none; justify-content: flex-start; align-content: flex-start; padding: 18px 16px 16px; } #reportPanel.report-selection-active .report-choice-grid-1col .report-choice-icon { font-size: 1.35rem; } #reportPanel.report-selection-active .report-choice-grid-1col .report-choice-card[data-entry="ticket"] .report-choice-icon-img { width: 40px; height: 36px; } #reportFlowTypeStep .report-choice-grid-2col .report-choice-icon-img--ticket-template { width: 30px; height: 30px; } #reportPanel.report-selection-active .report-choice-grid-1col .report-choice-label { font-size: 17px; font-weight: 750; } #reportPanel.report-selection-active .report-choice-grid-1col .report-choice-sub { font-size: 12px; } #reportFlowTypeStep .report-choice-grid-2col .report-choice-card { width: 100%; min-height: 132px; aspect-ratio: auto; } #reportFlowTypeStep { height: auto; min-height: 0; } #reportFlowTypeStep .report-choice-grid-2col { min-height: 0; max-height: none; overflow-y: visible; overflow-x: hidden; align-content: start; padding-top: 0; -webkit-overflow-scrolling: touch; } #reportFlowTypeStep .report-choice-grid-2col .report-choice-card { min-height: 132px; aspect-ratio: auto; } .case-facts { grid-template-columns: 1fr; } .case-title { font-size: 16px; } .case-chip { font-size: 11px; } .case-timeline { padding-left: 16px; } #reportPanel #quickIncidentForm, #reportPanel #incidentForm { padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px)); } #menuSheetPanel .mobile-menu-view { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; background: var(--soc-nav-sheet-bg) !important; } #menuSheetPanel .mobile-menu-view-btn, #menuSheetPanel .mobile-menu-view-back { background: var(--soc-panel-bg) !important; color: var(--soc-text) !important; border: 1px solid var(--soc-border) !important; } #menuSheetPanel .mobile-menu-view-btn.active { background: var(--soc-primary-soft-bg) !important; border-color: var(--soc-primary) !important; color: var(--soc-primary) !important; } #menuSheetPanel.menuview-open-excel #mobileExcelMenuView { overflow-y: auto; -webkit-overflow-scrolling: touch; } #menuSheetPanel.menuview-open-excel #mobileExcelMenuView .mobile-excel-config-wrap { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(30px + var(--soc-safe-bottom)); } #mobileExcelDownloadBtn { background: var(--soc-primary) !important; border-color: var(--soc-primary-deep) !important; color: var(--soc-on-primary) !important; text-align: center; } #mobileExcelBackBtn, #mobileExcelAppleBtn, #mobileExcelInternalBtn { background: transparent !important; border: 1px solid var(--soc-border) !important; color: var(--soc-text) !important; } } @media (min-width: 901px) { .case-file { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "hero hero" "facts timeline" "sections sections"; } .case-hero { grid-area: hero; } .case-facts { grid-area: facts; } .case-timeline-wrap { grid-area: timeline; } .case-sections { grid-area: sections; } } @media (min-width: 901px) { .topbar .menu-toggle-btn { display: none !important; } } .menu-toggle-icon-img { width: 26px; height: 26px; display: block; object-fit: contain; } [data-theme="light"] .incident-card { border-color: rgba(242, 106, 27, 0.22); } [data-theme="light"] .notification-filter-panel, [data-theme="light"] .modal-panel, [data-theme="light"] .ds-modal { background: var(--soc-panel-bg); } [data-theme="light"] #incidentDetailAttachmentForm, [data-theme="light"] .attachment-upload-form, [data-theme="light"] .attachment-preview-controls button, [data-theme="light"] #dashboardPanel .incident-card, [data-theme="light"] #dashboardPanel .incident-more-menu, [data-theme="light"] #dashboardPanel .instruction-list, [data-theme="light"] #excelPanel #excelAppleWrap, [data-theme="light"] #excelPanel .excel-field, [data-theme="light"] #excelPanel .soc-table-wrap, [data-theme="light"] #excelPanel .announcement-mode-btn, [data-theme="light"] #excelPanel .announcement-mode-btn.active, [data-theme="light"] #notificationSettingsPanel .notification-check, [data-theme="light"] #typeReportsPanel #typeFilterButtons, [data-theme="light"] #typeReportsPanel .site-filter-btn, [data-theme="light"] #menuSheetPanel .mobile-menu-view, [data-theme="light"] #menuSheetPanel .mobile-menu-view-btn, [data-theme="light"] #menuSheetPanel .mobile-menu-view-back { background: var(--soc-card-bg) !important; color: var(--soc-text) !important; border-color: var(--soc-border) !important; } [data-theme="light"] #typeReportsPanel .site-filter-btn.active, [data-theme="light"] #menuSheetPanel .mobile-menu-view-btn.active, [data-theme="light"] #excelPanel .announcement-mode-btn.active { background: var(--soc-primary-soft-bg) !important; border-color: var(--soc-primary) !important; color: var(--soc-primary) !important; } [data-theme="light"] #dashboardPanel .help, [data-theme="light"] #excelPanel .help, [data-theme="light"] #notificationSettingsPanel .help, [data-theme="light"] #typeReportsPanel .help, [data-theme="light"] #reportsHubView .help, [data-theme="light"] #dashboardPanel .meta, [data-theme="light"] #excelPanel .meta, [data-theme="light"] #notificationSettingsPanel .meta, [data-theme="light"] #typeReportsPanel .meta, [data-theme="light"] #reportsHubView .meta { color: var(--soc-text-sub) !important; } #reportsHubView { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; } .soc-hub-header { display: flex; align-items: center; gap: 10px; justify-content: space-between; position: sticky; top: 0; z-index: 2; background: var(--soc-panel-bg); border-bottom: 1px solid var(--soc-border); padding: 4px 0 10px; } .soc-hub-header-left { min-width: 0; flex: 1 1 auto; } .soc-hub-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .soc-hub-title-row h2 { margin: 0; min-width: 0; } #hubSummaryText { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } #hubSummaryMeta { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .soc-hub-header-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .soc-hub-header-actions .ds-btn-primary { box-shadow: none; } .soc-hub-header-actions .ds-btn, .soc-hub-filter-footer .ds-btn { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-hub-mode-tabs { margin-top: 8px; margin-bottom: 0; display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; } .soc-hub-mode-tab { min-height: 28px; padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #64748b; font-size: 13px; font-weight: 600; cursor: pointer; } .soc-hub-mode-tab.is-active { border-color: rgba(234, 88, 12, 0.72); color: #c2410c; } #hubStatusBanner { margin: 0 0 8px; } .soc-hub-preview-scroller { width: 100%; max-width: 100%; min-width: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 0 0 calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom) + 16px); display: grid; gap: 10px; } .soc-hub-preview-scroller[data-hub-mode="weekly"], .soc-hub-preview-scroller[data-hub-mode="apple"] { grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr); align-items: start; } .soc-hub-preview-scroller[data-hub-mode="download"] { grid-template-columns: minmax(0, 1fr); } .soc-hub-section-card { position: relative; border: 1px solid var(--soc-border); border-radius: 14px; background: var(--soc-card-bg); box-shadow: var(--soc-shadow-card); padding: 12px 12px 12px 14px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .soc-hub-section-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--soc-primary); } .soc-hub-section-card h3 { margin: 0 0 8px; } .soc-hub-section-card .help, .soc-hub-section-card .meta { margin: 0; } .soc-hub-top-ordered { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .soc-hub-top-btn { width: 100%; text-align: left; border: 1px solid var(--soc-border); background: var(--soc-panel-bg); border-radius: 10px; color: var(--soc-text); padding: 8px 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-hub-weekly-list { display: grid; gap: 8px; } .soc-hub-weekly-card { border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-panel-bg); padding: 10px; display: grid; gap: 6px; min-width: 0; } .soc-hub-raw-list { display: grid; gap: 8px; } .soc-hub-raw-row { border: 1px solid var(--soc-border); border-radius: 10px; background: var(--soc-panel-bg); padding: 8px 10px; display: grid; gap: 2px; min-width: 0; } .soc-hub-raw-row strong, .soc-hub-raw-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .soc-hub-filter-panel { width: min(860px, 100vw); max-height: 78dvh; min-height: 35dvh; display: grid; grid-template-rows: auto auto 1fr auto; } .soc-hub-filter-scroller { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 8px 0 calc(env(safe-area-inset-bottom) + 8px); display: grid; gap: 8px; } .soc-hub-filter-section { border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-card-bg); overflow: hidden; } .soc-hub-filter-toggle { width: 100%; text-align: left; border: 0; background: transparent; color: var(--soc-text); font-weight: 700; padding: 10px 12px; } .soc-hub-filter-body { display: none; padding: 0 12px 10px; min-width: 0; } .soc-hub-filter-section.is-open .soc-hub-filter-body { display: grid; gap: 8px; } .soc-hub-filter-chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .soc-hub-custom-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .soc-hub-custom-range label { display: grid; gap: 4px; font-size: var(--soc-text-sm); } .soc-hub-site-actions { display: flex; gap: 8px; flex-wrap: wrap; } .soc-hub-filter-option-list { display: grid; gap: 6px; min-width: 0; } .soc-hub-option-group-title { margin: 4px 0 0; font-size: var(--soc-text-sm); font-weight: 700; color: var(--soc-text-sub); } .soc-hub-option-item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--soc-border); border-radius: 10px; padding: 7px 9px; background: var(--soc-panel-bg); min-width: 0; } .soc-hub-option-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-hub-filter-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 0 calc(env(safe-area-inset-bottom) + 4px); border-top: 1px solid var(--soc-border); background: var(--soc-panel-bg); } html.hub-filter-open, body.hub-filter-open { overflow: hidden; } #slaFilterBackdrop { z-index: 357; } #slaFilterSheet { z-index: 358; background: transparent; pointer-events: none; } #slaFilterSheet.open { pointer-events: none; } #slaFilterSheet .soc-bottom-sheet-panel { pointer-events: auto; } #slaFilterSheet .soc-bottom-sheet-panel.soc-sla-filter-panel { width: min(860px, 100vw); min-height: 35dvh; max-height: 75dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; touch-action: pan-y; } #slaFilterSheet.dragging .soc-bottom-sheet-panel.soc-sla-filter-panel { transition: none; transform: translateY(var(--soc-sla-filter-drag, 0px)); } .soc-sla-filter-scroller { min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 6px 0 calc(env(safe-area-inset-bottom) + 8px); display: grid; gap: 10px; } .soc-sla-filter-section { border: 1px solid var(--soc-divider); border-radius: 12px; background: var(--soc-card-bg); padding: 10px; display: grid; gap: 8px; min-width: 0; } .soc-sla-filter-section h4 { margin: 0; font-size: 15px; font-weight: 700; } .soc-sla-chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .soc-sla-chip-row .chip { min-height: 34px; } .soc-sla-custom-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .soc-sla-custom-range label { display: grid; gap: 4px; font-size: var(--soc-text-sm); min-width: 0; } .soc-sla-site-wrap { display: grid; gap: 8px; min-width: 0; } #slaSiteSearchInput { width: 100%; max-width: 100%; min-height: 44px; } .soc-sla-site-options { display: grid; gap: 6px; min-width: 0; max-height: 26dvh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-right: 2px; } .soc-sla-site-option { display: flex; align-items: center; gap: 8px; border: 1px solid var(--soc-border); border-radius: 10px; padding: 8px 9px; background: var(--soc-panel-bg); min-width: 0; } .soc-sla-site-option span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-sla-filter-footer { display: flex; gap: 8px; justify-content: flex-end; align-items: center; border-top: 1px solid var(--soc-divider); background: var(--soc-panel-bg); padding: 8px 0 calc(env(safe-area-inset-bottom) + 4px); } .soc-sla-filter-footer .ds-btn { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.sla-filter-open, body.sla-filter-open { overflow: hidden !important; overscroll-behavior: none; } @media (max-width: 900px) { .soc-hub-header { align-items: flex-start; } .soc-hub-header-actions { flex-direction: row; } .soc-hub-filter-panel { min-height: 65dvh; max-height: 75dvh; } .soc-hub-custom-range { grid-template-columns: 1fr; } #slaHeaderBar { align-items: center; } .soc-sla-header-title-wrap h2 { font-size: 17px; } .soc-sla-custom-range { grid-template-columns: 1fr; } .soc-kpi-grid.soc-kpi-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soc-weekly-template-actions .ds-btn { flex: 1 1 calc(50% - 8px); } .soc-weekly-action-item { grid-template-columns: 1fr; align-items: stretch; } .soc-weekly-action-check { justify-content: flex-start; width: 100%; } .soc-weekly-action-item .ds-btn { width: 100%; } .soc-weekly-detail-top-row { flex-direction: column; align-items: stretch; } .soc-weekly-detail-top-row .ds-btn { width: 100%; } } @media (min-width: 1024px) { #slaFilterSheet.mode-drawer { align-items: stretch; justify-content: flex-end; background: transparent; } #slaFilterSheet.mode-drawer .soc-bottom-sheet-panel.soc-sla-filter-panel { inset: 0 0 0 auto; width: min(430px, 34vw); height: 100dvh; max-height: 100dvh; border-top-right-radius: 0; border-bottom-left-radius: 16px; border-left: 1px solid var(--soc-border); border-right: 0; border-top: 0; transform: translateX(106%); box-shadow: -14px 0 30px var(--soc-overlay-soft); } #slaFilterSheet.mode-drawer.open .soc-bottom-sheet-panel.soc-sla-filter-panel { transform: translateX(0); } #slaFilterSheet.mode-drawer .soc-sheet-handle { display: none; } #slaFilterSheet.mode-drawer .soc-sla-filter-scroller { max-height: calc(100dvh - 148px); } } /* Alerts filter chips: unify period/important/participant metrics */ #filterSheet .soc-alerts-builder-tabs .chip, #filterSheet .soc-alerts-builder-tabs .soc-chip, #filterSheet .soc-alerts-builder-panel .chip, #filterSheet .soc-alerts-builder-panel .soc-chip, #filterSheet .date-filter-group .date-filter-btn, #filterSheet .date-filter-group .date-filter-btn.soc-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 0; height: 32px; min-height: 32px; max-height: 32px; padding: 0 10px; border-radius: 999px; line-height: 1; box-sizing: border-box; white-space: nowrap; transform: none; } #filterSheet .date-filter-group .date-filter-btn, #filterSheet .date-filter-group .date-filter-btn.soc-chip { width: 100%; } #filterSheet .soc-alerts-builder-tabs .chip > span, #filterSheet .soc-alerts-builder-tabs .soc-chip > span, #filterSheet .soc-alerts-builder-panel .chip > span, #filterSheet .soc-alerts-builder-panel .soc-chip > span, #filterSheet .date-filter-group .date-filter-btn > span { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; } #filterSheet .soc-alerts-builder-tabs .chip.is-active, #filterSheet .soc-alerts-builder-tabs .soc-chip.is-active, #filterSheet .soc-alerts-builder-panel .chip.is-active, #filterSheet .soc-alerts-builder-panel .soc-chip.is-active, #filterSheet .date-filter-group .date-filter-btn.active, #filterSheet .date-filter-group .date-filter-btn.soc-chip.active { height: 32px; min-height: 32px; max-height: 32px; padding: 0 10px; line-height: 1; transform: none; } @media (min-width: 1024px) { #filterSheet .soc-alerts-builder-tabs .chip, #filterSheet .soc-alerts-builder-tabs .soc-chip, #filterSheet .soc-alerts-builder-panel .chip, #filterSheet .soc-alerts-builder-panel .soc-chip, #filterSheet .date-filter-group .date-filter-btn, #filterSheet .date-filter-group .date-filter-btn.soc-chip { height: 34px; min-height: 34px; max-height: 34px; padding: 0 10px; line-height: 1; } #filterSheet .soc-alerts-builder-tabs .chip.is-active, #filterSheet .soc-alerts-builder-tabs .soc-chip.is-active, #filterSheet .soc-alerts-builder-panel .chip.is-active, #filterSheet .soc-alerts-builder-panel .soc-chip.is-active, #filterSheet .date-filter-group .date-filter-btn.active, #filterSheet .date-filter-group .date-filter-btn.soc-chip.active { height: 34px; min-height: 34px; max-height: 34px; padding: 0 10px; line-height: 1; } } @media (prefers-reduced-motion: reduce) { .incident-card, .soc-summary-card, .ds-btn, .soc-bottom-tab-btn { transition: none !important; animation: none !important; } #refreshBtn.is-loading .refresh-icon { animation: none !important; } } /* PR-H1R/H1: alerts builder chips lock (period/important/participant) */ #filterSheet .soc-alerts-filter-chip, #filterSheet .soc-alerts-filter-chip.ds-btn, #filterSheet .soc-alerts-filter-chip.ds-btn-sm, #filterSheet .soc-alerts-filter-chip.date-filter-btn, #filterSheet .soc-alerts-filter-chip:active, #filterSheet .soc-alerts-filter-chip.is-active, #filterSheet .soc-alerts-filter-chip.active, #filterSheet .soc-alerts-filter-chip[aria-selected="true"], #filterSheet .soc-alerts-filter-chip[aria-pressed="true"], #filterSheet .soc-alerts-filter-chip[data-state="active"], #filterSheet .soc-alerts-filter-chip.selected { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; gap: 6px !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 10px !important; line-height: 1 !important; border-radius: 999px !important; box-sizing: border-box !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; vertical-align: middle !important; } #filterSheet .date-filter-group .soc-alerts-filter-chip, #filterSheet .date-filter-group .date-filter-btn.soc-alerts-filter-chip { width: 100% !important; } #filterSheet .soc-alerts-filter-chip > *, #filterSheet .soc-alerts-filter-chip > span, #filterSheet .soc-alerts-filter-chip .label { display: inline-flex !important; align-items: center !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } @media (min-width: 1024px) { #filterSheet .soc-alerts-filter-chip, #filterSheet .soc-alerts-filter-chip.ds-btn, #filterSheet .soc-alerts-filter-chip.ds-btn-sm, #filterSheet .soc-alerts-filter-chip.date-filter-btn, #filterSheet .soc-alerts-filter-chip:active, #filterSheet .soc-alerts-filter-chip.is-active, #filterSheet .soc-alerts-filter-chip.active, #filterSheet .soc-alerts-filter-chip[aria-selected="true"], #filterSheet .soc-alerts-filter-chip[aria-pressed="true"], #filterSheet .soc-alerts-filter-chip[data-state="active"], #filterSheet .soc-alerts-filter-chip.selected { height: 34px !important; min-height: 34px !important; max-height: 34px !important; } } /* Notification timeline layout lock (feed panel removed). */ #dashboardPanel .notification-timeline-list, #dashboardPanel .alerts { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; } #dashboardPanel .notification-timeline-list .case-timeline-card, #dashboardPanel .notification-timeline-list .alert-item, #dashboardPanel .alert-item { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } #dashboardPanel .alert-time, #dashboardPanel .case-timeline-event-time { flex: 0 0 auto; min-width: 0; } #dashboardPanel .alert-text, #dashboardPanel .alert-text.notif-text { flex: 1 1 auto !important; min-width: 0 !important; width: 0 !important; max-width: 100% !important; } #dashboardPanel .notif-text, #dashboardPanel .case-timeline-event-message, #dashboardPanel .alert-text { white-space: normal !important; word-break: keep-all !important; overflow-wrap: break-word !important; line-break: auto !important; hyphens: none !important; } #dashboardPanel .case-timeline-event-body { min-width: 0; width: 100%; } /* PR-FIX: Situation Room filter chip wrapper height lock (tablet/desktop only) */ @media (min-width: 769px) { #filterSheet .filter-chip-wrapper, #filterSheet .filter-chip-wrapper.active { display: flex !important; align-items: center !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 0 8px !important; gap: 8px !important; box-sizing: border-box !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } #filterSheet .date-filter-group.filter-chip-wrapper { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: center !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 0 8px !important; gap: 8px !important; overflow: hidden !important; } #filterSheet .filter-chip-wrapper .filter-chip, #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip, #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip:active, #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip.is-active, #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip.active, #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip[aria-selected="true"], #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip[aria-pressed="true"] { height: 32px !important; min-height: 32px !important; max-height: 32px !important; line-height: 32px !important; padding: 0 12px !important; } } /* PR-FIX: notification word-break lock */ #dashboardPanel .notification-item, #dashboardPanel .alert-item { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #dashboardPanel .notification-text, #dashboardPanel .alert-text, #dashboardPanel .notif-text, #dashboardPanel .case-timeline-event-message { width: 100% !important; max-width: 100% !important; min-width: 0 !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: break-word !important; } /* Notification panel: unclip left status dot + keep subtitle single-line with full width. */ #notificationPanel .notification-timeline-list, #notificationPanel .case-timeline-card, #notificationPanel .alert-item { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } #notificationPanel .notification-timeline-list { overflow-x: hidden; } #notificationPanel .case-timeline-event-body, #notificationPanel .alert-text { min-width: 0 !important; max-width: 100% !important; width: 100%; } #notificationPanel .case-timeline-events { padding-left: 0 !important; } #notificationPanel .case-timeline-events::before { left: 5px !important; } #notificationPanel .case-timeline-event-row { display: grid !important; grid-template-columns: 12px minmax(0, 1fr) !important; gap: 8px; align-items: center; min-width: 0; overflow: visible; } #notificationPanel .case-timeline-dot { position: static !important; left: auto !important; top: auto !important; width: 10px; height: 10px; flex-shrink: 0; justify-self: center; align-self: center; margin-top: 0; border: 0 !important; } #notificationPanel .case-timeline-event-message, #notificationPanel .alert-text, #notificationPanel .notif-text { display: block !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: normal !important; overflow-wrap: normal !important; line-break: auto !important; hyphens: none !important; -webkit-line-clamp: unset !important; -webkit-box-orient: initial !important; } #notificationPanel .case-timeline-event-body, #notificationPanel .case-timeline-event-body .case-timeline-event-message.notif-text { flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; } #notificationPanel .case-timeline-event-time, #notificationPanel .alert-time { flex: 0 0 auto !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } /* Back navigation buttons: arrow-only, no box */ .soc-back-arrow-btn, .soc-back-arrow-btn.ds-btn, .soc-back-arrow-btn.ds-btn-secondary, .soc-back-arrow-btn.ds-btn-sm, #menuSheetPanel .mobile-menu-view-back.soc-back-arrow-btn, [data-theme="light"] #menuSheetPanel .mobile-menu-view-back.soc-back-arrow-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 28px !important; min-height: 28px !important; height: 28px !important; padding: 0 !important; border: 0 !important; border-color: transparent !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: transparent !important; font-size: 0 !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; position: relative !important; } .soc-back-arrow-btn::before { content: "" !important; display: block !important; width: 18px !important; height: 18px !important; background: center / contain no-repeat url("/icons/ui-back-arrow.png?v=20260222uiicon07") !important; pointer-events: none !important; } .soc-back-arrow-btn:hover, .soc-back-arrow-btn:active, .soc-back-arrow-btn:focus-visible { border-color: transparent !important; background: transparent !important; box-shadow: none !important; text-decoration: none !important; } /* Keep back arrow hidden where existing UI state uses .hidden */ .soc-back-arrow-btn.hidden, .soc-back-arrow-btn[aria-hidden="true"] { display: none !important; } /* Admin menu sub-page headers: unify size (exclude menu root title) */ #accountPanel .admin-sub-topbar h2, #managerStatusPanel .admin-sub-topbar h2, #auditPanel .admin-sub-topbar h2, #excelPanel .admin-sub-topbar h2, #employeeScorePanel .admin-sub-topbar h2, #hqReminderPanel .admin-sub-topbar h2, #announcementPanel .soc-announcement-header .title-inline h2, #notificationPanel .notification-panel-head .title-inline h2, #reportsHubView .soc-hub-title-row h2, #themePanel > h2, .soc-view-page-header .soc-page-header-main > h2 { font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-line); font-weight: var(--type-title-lg-weight); } #reportBuilderSheet .soc-sheet-head .title-inline h3, .soc-employee-create-header h3 { font-size: var(--type-section-md-size); line-height: var(--type-section-md-line); font-weight: var(--type-section-md-weight); } @media (min-width: 1024px) { body.role-hq.nav-open.admin-menu-sheet-open .container.admin-layout { grid-template-columns: 1fr; align-items: start; } body.role-hq.nav-open.admin-menu-sheet-open .nav-backdrop { opacity: 1 !important; pointer-events: auto !important; background: var(--soc-overlay-soft) !important; } body.role-hq.nav-open.admin-menu-sheet-open #menuSheetPanel, body.role-hq.nav-open.admin-menu-sheet-open .container.admin-layout #menuSheetPanel { display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: 0 !important; width: 320px !important; max-width: 320px !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 16px 16px 0 !important; border: 0 !important; border-right: 1px solid var(--soc-border) !important; transform: translateX(0) !important; overflow: hidden !important; z-index: 400 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } body.role-hq.nav-open.admin-menu-sheet-open #menuSheetPanel .nav-sheet-handle { display: none !important; } body.role-hq.nav-open.admin-menu-sheet-open #menuSheetPanel .admin-tab-list, body.role-hq.nav-open.admin-menu-sheet-open #menuSheetPanel .mobile-admin-shortcuts { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* Admin employee score dashboard (Report Builder style) */ .soc-employee-score-builder { display: grid; gap: 18px; } .soc-employee-score-filter-bar { display: grid; gap: 12px; padding: 12px 14px 14px; } #employeeScorePanel .soc-hub-section-card { padding: 14px 16px 16px; } #employeeScorePanel .soc-hub-section-card::before { display: none; } .soc-employee-score-header { margin-bottom: 0; } .soc-employee-score-controls { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; } .soc-employee-score-control-cluster { display: grid; gap: 10px; min-width: 0; } .soc-employee-score-period-field { min-width: 0; } .soc-employee-score-period-field .soc-analytics-range-quick { min-width: 0; } .soc-employee-score-filter-bar .soc-inline-field { display: grid; gap: 6px; min-width: 0; } .soc-employee-score-control-cluster .soc-inline-field { align-content: start; } .soc-employee-score-filter-bar .soc-inline-field > span { font-size: var(--type-label-sm-size, 12px); line-height: 18px; font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); } .soc-employee-score-filter-bar .soc-workspace-card-head .meta { max-width: 44ch; } .soc-employee-score-filter-bar .ds-input { min-height: 46px; height: 46px; padding: 0 40px 0 14px; line-height: 22px; box-sizing: border-box; } .soc-employee-score-filter-bar .soc-analytics-range-quick { flex-wrap: wrap; } .soc-employee-score-filter-bar .soc-analytics-custom-range { min-width: 0; margin-top: 0; } .soc-employee-score-filter-bar .soc-analytics-custom-range input { min-width: 0; } .soc-employee-score-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .soc-employee-score-summary-card { display: grid; gap: 12px; min-height: 176px; padding: 18px 18px 16px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface, var(--soc-panel-bg)); box-shadow: var(--ui-shadow-1, var(--soc-shadow-soft)); } .soc-employee-score-summary-card.is-hero { background: color-mix(in srgb, var(--soc-primary-soft-bg) 34%, var(--ui-bg-surface, var(--soc-panel-bg))); border-color: color-mix(in srgb, var(--soc-primary) 22%, var(--soc-border)); box-shadow: inset 0 3px 0 0 var(--soc-primary), var(--ui-shadow-1, var(--soc-shadow-soft)); } .soc-employee-score-summary-card .meta { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); } #employeeScorePanel .soc-workspace-card-head .meta { display: block; margin-top: 4px; } .soc-employee-score-summary-label { margin: 0; font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); } .soc-employee-score-summary-value { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; color: var(--ui-text-primary, var(--soc-text)); overflow-wrap: anywhere; } .soc-employee-score-summary-visual { display: grid; align-content: center; min-height: 102px; } .soc-employee-score-bullet-shell { display: grid; gap: 8px; min-width: 0; } .soc-employee-score-bullet-track { position: relative; min-width: 0; height: 14px; border-radius: 999px; background: linear-gradient( 90deg, color-mix(in srgb, #f8fafc 28%, var(--soc-border) 72%) 0%, color-mix(in srgb, #f1f5f9 40%, var(--soc-border) 60%) 100% ); overflow: visible; } .soc-employee-score-bullet-fill { position: absolute; inset: 0 auto 0 0; display: block; min-width: 10px; max-width: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, #fb923c 84%, white 16%), #f97316); } .soc-employee-score-bullet-marker { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 999px; transform: translateX(-50%); background: #334155; box-shadow: none; } .soc-employee-score-bullet-marker.is-reference { background: #0f172a; } .soc-employee-score-bullet-marker.is-benchmark { background: #2563eb; } .soc-employee-score-bullet-scale { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 15px; font-weight: 600; } .soc-employee-score-bullet-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; min-width: 0; } .soc-employee-score-bullet-legend > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 600; } .soc-employee-score-bullet-legend > span > i { display: block; flex: 0 0 auto; } .soc-employee-score-bullet-legend > span.is-current > i { width: 18px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, #fb923c 84%, white 16%), #f97316); } .soc-employee-score-bullet-legend > span.is-reference > i, .soc-employee-score-bullet-legend > span.is-benchmark > i { width: 3px; height: 12px; border-radius: 999px; } .soc-employee-score-bullet-legend > span.is-reference > i { background: #0f172a; } .soc-employee-score-bullet-legend > span.is-benchmark > i { background: #2563eb; } .soc-employee-score-gauge-shell { position: relative; width: min(188px, 100%); height: 108px; justify-self: start; } .soc-employee-score-gauge-svg { width: 100%; height: 100%; overflow: visible; } .soc-employee-score-gauge-track, .soc-employee-score-gauge-fill { fill: none; stroke-width: 12; stroke-linecap: round; } .soc-employee-score-gauge-track { stroke: color-mix(in srgb, var(--soc-border) 60%, transparent); } .soc-employee-score-gauge-fill { stroke: linear-gradient(90deg, #fb923c, #f97316); stroke: #f97316; } .soc-employee-score-gauge-center { position: absolute; inset: auto 0 4px; display: grid; justify-items: center; gap: 2px; } .soc-employee-score-gauge-center strong { font-size: 26px; line-height: 1; letter-spacing: -0.03em; } .soc-employee-score-gauge-center span, .soc-employee-score-mini-donut-center span, .soc-employee-score-breakdown-donut-center span { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 15px; font-weight: 700; } .soc-employee-score-mini-donut-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; } .soc-employee-score-mini-donut, .soc-employee-score-breakdown-donut { position: relative; border-radius: 999px; background: var(--employee-score-donut, conic-gradient(#e5e7eb 0turn, #e5e7eb 1turn)); } .soc-employee-score-mini-donut { width: 88px; height: 88px; } .soc-employee-score-mini-donut.is-empty { background: conic-gradient(#e5e7eb 0turn, #e5e7eb 1turn); } .soc-employee-score-mini-donut::after, .soc-employee-score-breakdown-donut::after { content: ""; position: absolute; inset: 10px; border-radius: inherit; background: var(--ui-bg-surface, var(--soc-panel-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-border) 45%, transparent); } .soc-employee-score-mini-donut-center, .soc-employee-score-breakdown-donut-center { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 2px; z-index: 1; text-align: center; } .soc-employee-score-mini-donut-center strong, .soc-employee-score-breakdown-donut-center strong { font-size: 20px; line-height: 1; letter-spacing: -0.03em; color: var(--ui-text-primary, var(--soc-text)); } .soc-employee-score-mini-legend { display: grid; gap: 8px; } .soc-employee-score-mini-legend-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--ui-text-secondary, var(--soc-text-sub)); } .soc-employee-score-mini-legend-row .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--score-dot, #cbd5e1); } .soc-employee-score-mini-legend-row strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 12px; } .soc-employee-score-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; min-height: 104px; } .soc-employee-score-podium-col { display: grid; gap: 6px; justify-items: center; min-width: 0; } .soc-employee-score-podium-bar-wrap { display: flex; align-items: end; justify-content: center; width: 48px; height: 78px; } .soc-employee-score-podium-bar { display: block; width: 100%; min-height: 18px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, color-mix(in srgb, #fb923c 82%, white 18%), #f97316); } .soc-employee-score-podium-col.is-rank-1 .soc-employee-score-podium-bar { width: 100%; background: linear-gradient(180deg, color-mix(in srgb, #f97316 88%, white 12%), #ea580c); } .soc-employee-score-podium-col strong, .soc-employee-score-podium-col span:last-child { display: block; width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .soc-employee-score-podium-col strong { font-size: 12px; line-height: 16px; } .soc-employee-score-podium-col span:last-child { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 15px; } .soc-employee-score-activity-stack { display: grid; gap: 12px; align-content: start; } .soc-employee-score-activity-track { display: flex; width: 100%; height: 16px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--soc-border) 56%, transparent); } .soc-employee-score-activity-segment { display: block; min-width: 10px; background: var(--activity-bar, #f97316); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.72); } .soc-employee-score-activity-legend { display: grid; gap: 8px; } .soc-employee-score-activity-legend-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; } .soc-employee-score-activity-legend-row .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--activity-dot, #f97316); } .soc-employee-score-activity-legend-row strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; } .soc-employee-score-activity-legend-row strong em { color: var(--ui-text-secondary, var(--soc-text-sub)); font-style: normal; font-size: 11px; font-weight: 600; } .soc-employee-score-summary-bar, .soc-employee-score-summary-stack { width: 100%; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--soc-border) 58%, transparent); overflow: hidden; } .soc-employee-score-summary-bar-fill, .soc-employee-score-summary-stack-segment { display: block; height: 100%; border-radius: inherit; } .soc-employee-score-summary-bar.is-primary .soc-employee-score-summary-bar-fill { background: var(--soc-primary); } .soc-employee-score-summary-bar.is-highlight .soc-employee-score-summary-bar-fill { background: color-mix(in srgb, var(--soc-primary) 82%, #ff9b2f); } .soc-employee-score-summary-bar.is-critical .soc-employee-score-summary-bar-fill { background: #f97316; } .soc-employee-score-summary-bar.is-muted .soc-employee-score-summary-bar-fill { background: color-mix(in srgb, var(--soc-border) 75%, #fff); } .soc-employee-score-summary-stack { display: flex; } .soc-employee-score-summary-stack-segment.tone-0 { background: var(--soc-primary); } .soc-employee-score-summary-stack-segment.tone-1 { background: #ff944d; } .soc-employee-score-summary-stack-segment.tone-2 { background: #f59e0b; } .soc-employee-score-summary-stack-segment.tone-3 { background: #f97316; } .soc-employee-score-summary-stack-segment.tone-4 { background: #fb7185; } .soc-employee-score-content { display: grid; gap: 18px; } .soc-employee-score-main-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; } .soc-employee-score-main-column { display: grid; gap: 18px; min-width: 0; } .soc-employee-score-primary-card, .soc-employee-score-side-card, .soc-employee-score-ranking-section, .soc-employee-score-breakdown-section { display: grid; gap: 14px; min-width: 0; } .soc-employee-score-primary-card { overflow: hidden; } .soc-employee-score-site-list { display: grid; gap: 12px; align-content: start; grid-auto-rows: min-content; } .soc-employee-score-combo-legend { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; } .soc-employee-score-combo-legend span { display: inline-flex; align-items: center; gap: 6px; } .soc-employee-score-combo-legend i { display: inline-block; } .soc-employee-score-combo-legend .is-volume i { width: 10px; height: 10px; border-radius: 3px 3px 0 0; background: #f97316; } .soc-employee-score-combo-legend .is-score i { width: 10px; height: 10px; border-radius: 999px; background: #0f172a; } .soc-employee-score-combo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .soc-employee-score-site-combo-card { display: grid; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--soc-border); border-radius: 14px; background: var(--ui-bg-surface, var(--soc-panel-bg)); text-align: left; color: var(--ui-text-primary, var(--soc-text)); cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .soc-employee-score-site-combo-card:hover, .soc-employee-score-site-combo-card.is-selected { border-color: color-mix(in srgb, var(--soc-primary) 28%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary-soft-bg) 42%, var(--ui-bg-surface, #fff)); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); transform: translateY(-1px); } .soc-employee-score-site-combo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .soc-employee-score-site-combo-head > div { display: grid; gap: 4px; min-width: 0; } .soc-employee-score-site-combo-head .soc-employee-score-rank { width: fit-content; min-width: 26px; height: 26px; } .soc-employee-score-site-combo-head strong { font-size: 18px; line-height: 24px; } .soc-employee-score-site-combo-head em { font-style: normal; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--ui-text-primary, var(--soc-text)); } .soc-employee-score-site-combo-plot { position: relative; display: grid; align-items: end; justify-items: center; height: calc(var(--score-plot-height, 108px) + 28px); padding: 12px 18px 10px; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary-soft-bg) 34%, #fff), color-mix(in srgb, var(--soc-panel-bg) 94%, transparent)); } .soc-employee-score-site-combo-gridlines { position: absolute; inset: 12px 18px 30px; background: repeating-linear-gradient( to top, color-mix(in srgb, var(--soc-border) 28%, transparent) 0, color-mix(in srgb, var(--soc-border) 28%, transparent) 1px, transparent 1px, transparent 25% ); pointer-events: none; } .soc-employee-score-site-combo-bar-wrap { position: relative; z-index: 1; display: grid; justify-items: center; align-content: end; gap: 6px; width: 100%; height: 100%; } .soc-employee-score-site-combo-bar { display: block; width: 68px; min-height: 18px; border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, color-mix(in srgb, #fb923c 86%, white 14%), #f97316); box-shadow: 0 10px 22px rgba(249, 115, 22, 0.18); } .soc-employee-score-site-combo-bar-label { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 15px; font-weight: 700; } .soc-employee-score-site-combo-dot { position: absolute; left: 50%; min-width: 42px; height: 24px; margin-left: 0; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.42); background: #0f172a; color: #fff; font-size: 11px; line-height: 15px; font-weight: 700; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18); z-index: 2; transform: translateX(-50%); } .soc-employee-score-site-combo-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; } .soc-employee-score-site-summary { display: grid; gap: 14px; min-width: 0; } .soc-employee-score-site-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .soc-employee-score-site-summary-head strong { display: block; font-size: var(--type-title-md-size, 20px); line-height: var(--type-title-md-line, 28px); } .soc-employee-score-site-summary-head .meta { margin-top: 4px; } .soc-employee-score-site-summary-score { flex: 0 0 auto; font-size: var(--type-display-lg-size, 28px); line-height: var(--type-display-lg-line, 36px); font-weight: 700; color: var(--ui-text-primary, var(--soc-text)); } .soc-employee-score-site-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .soc-employee-score-site-summary-card { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } .soc-employee-score-site-summary-card strong { font-size: var(--type-title-md-size, 20px); line-height: var(--type-title-md-line, 28px); } .soc-employee-score-site-summary-label { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); } .soc-employee-score-site-summary-meta { display: grid; gap: 8px; } .soc-employee-score-site-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 12px 14px; border: 1px solid var(--soc-border); border-radius: 12px; background: var(--ui-bg-surface, var(--soc-panel-bg)); text-align: left; color: var(--ui-text-primary, var(--soc-text)); cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; } .soc-employee-score-site-row:hover, .soc-employee-score-site-row.is-selected { border-color: color-mix(in srgb, var(--soc-primary) 28%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary-soft-bg) 42%, var(--ui-bg-surface, #fff)); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); } .soc-employee-score-rank { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); font-weight: 700; color: var(--ui-text-secondary, var(--soc-text-sub)); } .soc-employee-score-site-row-main { display: grid; gap: 7px; min-width: 0; } .soc-employee-score-site-row-list { display: grid; gap: 12px; } .soc-employee-score-site-row-head, .soc-employee-score-ranking-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .soc-employee-score-site-row-head strong { min-width: 0; font-size: var(--type-section-md-size, 16px); line-height: var(--type-section-md-line, 24px); overflow-wrap: anywhere; } .soc-employee-score-site-row-score { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 28px; padding: 0 10px; border-radius: 999px; background: #0f172a; color: #fff; font-size: 12px; line-height: 16px; font-weight: 700; } .soc-employee-score-site-row-barline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; } .soc-employee-score-site-row-volume { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ui-text-primary, var(--soc-text)); white-space: nowrap; } .soc-employee-score-site-row-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); } .soc-employee-score-track { width: 100%; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--soc-border) 58%, transparent); overflow: hidden; } .soc-employee-score-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--soc-primary) 68%, #fff), var(--soc-primary)); } .soc-employee-score-track--dense { height: 8px; min-width: 96px; } .soc-employee-score-track--site { height: 12px; } .soc-employee-score-detail-panel { position: relative; gap: 14px; min-height: 0; overflow: visible; } #employeeScoreSiteInsightPanel::before, #employeeScoreCompositionSection::before { display: none; } .soc-employee-score-detail-panel > .soc-workspace-card-head { align-items: start; } .soc-employee-score-detail-tabs { display: inline-flex; align-items: center; gap: 8px; padding: 4px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 999px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); width: fit-content; max-width: 100%; } .soc-employee-score-detail-tab { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .soc-employee-score-detail-tab.is-active { background: color-mix(in srgb, var(--soc-primary-soft-bg) 68%, var(--ui-bg-surface, var(--soc-panel-bg))); color: var(--ui-text-primary, var(--soc-text)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 34%, transparent); } .soc-employee-score-detail-viewport { min-height: 0; overflow: visible; } .soc-employee-score-detail-pane { display: grid; gap: 16px; min-width: 0; align-content: start; } .soc-employee-score-ranking-pane-head h3 { margin: 0; } .soc-employee-score-ranking-pane-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; } .soc-employee-score-ranking-pane-head .meta { margin-top: 4px; } .soc-employee-score-ranking-count-field { width: 100%; } .soc-employee-score-ranking-count-field .ds-input { min-width: 0; } .soc-employee-score-detail-pane .soc-employee-score-table-wrap { min-height: 0; overflow: auto; } .soc-employee-score-site-pager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .soc-employee-score-ranking-pager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; } .soc-employee-score-page-btn { min-width: 34px; min-height: 34px; padding: 0 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; font-weight: 700; cursor: pointer; } .soc-employee-score-page-btn[disabled] { opacity: 0.45; cursor: default; } .soc-employee-score-page-btn.is-active { border-color: color-mix(in srgb, var(--soc-primary) 34%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary-soft-bg) 60%, var(--ui-bg-surface, var(--soc-panel-bg))); color: var(--ui-text-primary, var(--soc-text)); } .soc-employee-score-page-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; font-weight: 700; } .soc-employee-score-insight-body { display: grid; gap: 10px; } .soc-employee-score-insight-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .soc-employee-score-insight-stat { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: color-mix(in srgb, var(--ui-bg-surface-subtle, var(--soc-card-bg)) 82%, #fff); } .soc-employee-score-insight-label { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); } .soc-employee-score-insight-stat strong { font-size: var(--type-title-md-size, 20px); line-height: var(--type-title-md-line, 28px); } .soc-employee-score-insight-list { display: grid; gap: 0; padding-top: 2px; } .soc-employee-score-insight-hero { display: grid; gap: 3px; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); border-radius: 0; background: transparent; } .soc-employee-score-insight-kicker { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 15px; font-weight: 700; } .soc-employee-score-insight-hero strong { font-size: 34px; line-height: 1; letter-spacing: -0.03em; color: var(--ui-text-primary, var(--soc-text)); } .soc-employee-score-insight-hero .meta { margin: 0; font-size: 12px; line-height: 16px; } #employeeScorePanel .soc-mini-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 0; padding: 10px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } #employeeScorePanel .soc-mini-row:last-child { border-bottom: 0; } #employeeScorePanel .soc-mini-row:hover, #employeeScorePanel .soc-mini-row:active { transform: none; box-shadow: none; background: transparent; } #employeeScorePanel .soc-mini-row strong { flex: 1 1 auto; min-width: 0; display: block; color: var(--ui-text-secondary, var(--soc-text-sub)); } #employeeScorePanel .soc-mini-row span { flex: 0 1 auto; min-width: 0; margin-left: auto; padding-left: 10px; text-align: right; line-height: 1.45; word-break: keep-all; font-weight: 600; } .soc-employee-score-table-wrap { min-width: 0; overflow-x: auto; border: 1px solid var(--ui-divider-default, var(--soc-divider)); border-radius: 12px; background: var(--ui-bg-surface, var(--soc-panel-bg)); } .soc-employee-score-table { width: 100%; min-width: 860px; border-collapse: collapse; } .soc-employee-score-table th, .soc-employee-score-table td { padding: 12px 14px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); text-align: left; vertical-align: middle; } .soc-employee-score-table th { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; } .soc-employee-score-table td { font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); color: var(--ui-text-primary, var(--soc-text)); } .soc-employee-score-table tbody tr { cursor: pointer; transition: background 0.16s ease; } .soc-employee-score-table tbody tr:hover, .soc-employee-score-table tbody tr.is-selected { background: color-mix(in srgb, var(--soc-primary-soft-bg) 54%, var(--ui-bg-surface, #fff)); } .soc-employee-score-empty { padding: 24px 0 8px; } .soc-employee-score-breakdown-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; } .soc-employee-score-breakdown-visual { display: grid; gap: 12px; } .soc-employee-score-breakdown-bar { display: grid; place-items: center; min-height: 180px; } .soc-employee-score-breakdown-segment { display: block; min-height: 18px; } .soc-employee-score-breakdown-segment.is-primary { background: #f97316; } .soc-employee-score-breakdown-segment.is-support { background: #2563eb; } .soc-employee-score-breakdown-segment.is-critical { background: #dc2626; } .soc-employee-score-breakdown-segment.is-status { background: #cbd5e1; } .soc-employee-score-breakdown-segment.is-empty { background: color-mix(in srgb, var(--soc-border) 58%, transparent); } .soc-employee-score-breakdown-legend, .soc-employee-score-breakdown-details { display: grid; gap: 10px; } .soc-employee-score-breakdown-donut-shell { display: grid; place-items: center; min-height: 180px; } .soc-employee-score-breakdown-donut { width: 156px; height: 156px; } .soc-employee-score-breakdown-details { gap: 0; } .soc-employee-score-breakdown-details .soc-mini-row { min-width: 0; padding: 8px 0; } .soc-employee-score-breakdown-legend-item { display: flex; align-items: center; gap: 10px; padding: 2px 0; font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); } .soc-employee-score-breakdown-legend-item strong { margin-left: auto; } .soc-employee-score-breakdown-dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; background: var(--score-breakdown-dot, #cbd5e1); } .soc-employee-score-breakdown-dot.is-primary { background: #f97316; } .soc-employee-score-breakdown-dot.is-support { background: #2563eb; } .soc-employee-score-breakdown-dot.is-critical { background: #dc2626; } .soc-employee-score-breakdown-dot.is-status { background: #cbd5e1; } .soc-employee-score-value-scale { display: inline-flex; align-items: center; gap: 10px; min-width: 140px; } .soc-employee-score-value-track { position: relative; width: 100px; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--soc-border) 68%, transparent); } .soc-employee-score-value-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, #fb923c 82%, white 18%), #f97316); } .soc-employee-score-value-scale strong { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 700; } #employeeScorePanel .soc-employee-score-side-card .soc-employee-score-breakdown-section { padding-top: 12px; border-top: 1px solid var(--ui-divider-default, var(--soc-divider)); } @media (max-width: 768px) { .soc-profile-top-shell, .soc-profile-hero-card, .soc-profile-score-main, .soc-profile-activity-strip, .soc-profile-account-strip { grid-template-columns: 1fr; } .soc-profile-hero-card { gap: 12px; } .soc-profile-hero-main { align-items: flex-start; } .soc-profile-score-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soc-profile-score-head { align-items: flex-start; flex-direction: column; } .soc-profile-score-head-actions { width: 100%; justify-content: space-between; } .soc-profile-score-head-actions .meta { max-width: none; text-align: left; } .soc-profile-score-hero-head { flex-wrap: wrap; } .soc-profile-record-row { grid-template-columns: 1fr; gap: 6px; } .soc-profile-detail-sheet-head { display: none; } .soc-profile-detail-sheet-row { grid-template-columns: 1fr; gap: 6px; } .soc-profile-record-row-side { justify-items: start; text-align: left; } .soc-profile-score-breakdown-popover { right: 0; left: auto; width: min(320px, calc(100vw - 40px)); } .soc-profile-score-breakdown-popover::before { right: 9px; } .soc-employee-score-controls, .soc-employee-score-main-grid, .soc-employee-score-breakdown-grid { grid-template-columns: 1fr; } .soc-employee-score-summary-grid, .soc-employee-score-insight-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soc-employee-score-mini-donut-row, .soc-employee-score-combo-grid { grid-template-columns: minmax(0, 1fr); } .soc-employee-score-bullet-legend { display: grid; gap: 6px; } .soc-employee-score-breakdown-donut { width: 136px; height: 136px; } .soc-employee-score-ranking-pane-head { grid-template-columns: 1fr; } .soc-employee-score-ranking-count-field { width: 100%; justify-self: stretch; } .soc-employee-score-table { min-width: 720px; } } /* Menu drawer final */ #menuToggleBtn { align-items: center; justify-content: center; width: 36px; height: 36px; padding: 6px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #6b7280; } #menuToggleBtn:not(.hidden) { display: inline-flex !important; } #menuToggleBtn:hover { background: transparent; box-shadow: none; } #menuToggleBtn:focus-visible { outline: 2px solid color-mix(in srgb, #ff6b00 42%, transparent); outline-offset: 2px; } #menuToggleBtn .menu-toggle-icon-lucide { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } #menuSheetPanel .nav-sheet-handle { display: none !important; } #menuSheetPanel .admin-tab-list[data-legacy-menu="true"], body.role-hq #menuSheetPanel [data-field-only="true"], body.role-field #menuSheetPanel [data-hq-only="true"] { display: none !important; } body.nav-open #menuSheetPanel [data-field-only="true"].hidden, body.nav-open #menuSheetPanel [data-hq-only="true"].hidden, body.nav-open #menuSheetPanel [data-field-only="true"][aria-hidden="true"], body.nav-open #menuSheetPanel [data-hq-only="true"][aria-hidden="true"] { display: none !important; } body.nav-open #menuSheetPanel, body.nav-open .container.admin-layout #menuSheetPanel { position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: 0 !important; width: min(88vw, 360px) !important; max-width: min(88vw, 360px) !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 16px 16px 0 !important; border: 0 !important; border-right: 1px solid var(--soc-border) !important; transform: translateX(0) !important; overflow: hidden !important; background: var(--soc-nav-sheet-bg) !important; } body.nav-open #menuSheetPanel .mobile-menu-pager { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } body.nav-open #menuSheetPanel #mobileMenuRootPage { display: flex; flex-direction: column; min-height: 100%; padding: 4px 8px 8px; gap: 6px; } body.nav-open #menuSheetPanel > .ds-card-title { margin: 4px 8px 4px; padding: 0; font-size: 15px; line-height: 1.2; } body.nav-open #menuSheetPanel #mobileAdminShortcutList { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; padding: 0 0 4px; margin: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.nav-open #menuSheetPanel .soc-menu-group { display: block; margin: 0; } body.nav-open #menuSheetPanel .soc-menu-group + .soc-menu-group { margin-top: 4px; } body.nav-open #menuSheetPanel .soc-menu-group-toggle { width: 100%; border: 0; border-radius: 10px; background: transparent; min-height: 42px; padding: 8px 8px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; align-items: center; gap: 10px; color: #6b7280; text-align: left; } @media (hover: hover) and (pointer: fine) { body.nav-open #menuSheetPanel .soc-menu-group-toggle:hover, body.nav-open #menuSheetPanel .soc-menu-sub-item:hover { background: rgba(0, 0, 0, 0.04); } } body.nav-open #menuSheetPanel .soc-menu-group-label { font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.nav-open #menuSheetPanel .soc-menu-group-icon svg, body.nav-open #menuSheetPanel .soc-menu-group-chevron svg, body.nav-open #menuSheetPanel .soc-menu-sub-item-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } body.nav-open #menuSheetPanel .soc-menu-group-chevron { display: inline-flex; align-items: center; justify-content: center; color: #6b7280; transition: transform 0.18s ease; } body.nav-open #menuSheetPanel .soc-menu-group-toggle.is-open .soc-menu-group-chevron { transform: rotate(180deg); } body.nav-open #menuSheetPanel .soc-menu-group-items { display: grid; gap: 2px; padding: 2px 0 2px; } body.nav-open #menuSheetPanel .soc-menu-group-items[hidden] { display: none !important; } body.nav-open #menuSheetPanel .soc-menu-sub-item { width: 100%; border: 0; border-radius: 10px; background: transparent; min-height: 38px; padding: 6px 8px 6px 10px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 14px; align-items: center; gap: 10px; color: #6b7280; text-align: left; position: relative; } body.nav-open #menuSheetPanel .soc-menu-sub-item::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 999px; background: transparent; } body.nav-open #menuSheetPanel .soc-menu-sub-item-label { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.nav-open #menuSheetPanel .soc-menu-sub-item-chevron { color: #6b7280; font-size: 16px; line-height: 1; } body.nav-open #menuSheetPanel .soc-menu-sub-item.is-active { color: #ff6b00; } body.nav-open #menuSheetPanel .soc-menu-sub-item.is-active::before { background: #ff6b00; } body.nav-open #menuSheetPanel .soc-menu-sub-item.is-active .soc-menu-sub-item-chevron { color: #ff6b00; } body.nav-open #menuSheetPanel .soc-menu-submenu-wrap { display: grid; gap: 2px; } body.nav-open #menuSheetPanel .soc-menu-submenu-list { display: grid; gap: 2px; padding: 2px 0 0 30px; } body.nav-open #menuSheetPanel .soc-menu-submenu-wrap--always-open .soc-menu-submenu-list { padding-top: 4px; } body.nav-open #menuSheetPanel .soc-menu-sub-item--nested { min-height: 34px; padding: 5px 8px 5px 10px; grid-template-columns: 8px minmax(0, 1fr); gap: 8px; } body.nav-open #menuSheetPanel .soc-menu-sub-item--nested::before { display: none; } body.nav-open #menuSheetPanel .soc-menu-submenu-bullet { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.52; } @media (max-width: 900px) { body.nav-open #menuSheetPanel > .ds-card-title { margin: calc(env(safe-area-inset-top, 0px) + 8px) 10px 4px; } body.nav-open #menuSheetPanel #mobileMenuRootPage { min-height: 0; padding: 0 8px 8px; gap: 4px; } body.nav-open #menuSheetPanel #mobileAdminShortcutList { gap: 4px !important; padding: 0 0 2px; align-content: start; align-items: start; grid-auto-rows: min-content; } body.nav-open #menuSheetPanel .soc-menu-group + .soc-menu-group { margin-top: 8px; } body.nav-open #menuSheetPanel .soc-menu-group { align-self: start; } body.nav-open #menuSheetPanel .soc-menu-group-items { margin: 0; padding: 0; } body.nav-open #menuSheetPanel .soc-menu-group-items.is-open:not([hidden]) { padding: 2px 0 4px; } body.role-hq.nav-open #menuSheetPanel .mobile-nav-actions { margin-top: 8px; padding: 6px 0 0; justify-content: flex-start; } } /* PC browser half-width(769~1023): keep same menu composition as full PC */ @media (min-width: 769px) and (max-width: 1023.98px) { body.nav-open #menuSheetPanel .pc-sidebar-only { display: block !important; } body.nav-open #menuSheetPanel #mobileAdminShortcutList > .soc-menu-group:not(.pc-sidebar-only) { display: none !important; } body.nav-open #menuSheetPanel [data-field-only="true"].hidden, body.nav-open #menuSheetPanel [data-hq-only="true"].hidden, body.nav-open #menuSheetPanel [data-field-only="true"][aria-hidden="true"], body.nav-open #menuSheetPanel [data-hq-only="true"][aria-hidden="true"] { display: none !important; } } @media (min-width: 1024px) { body.nav-open #menuSheetPanel, body.nav-open .container.admin-layout #menuSheetPanel { width: 320px !important; max-width: 320px !important; } } /* ===== UI 2026 premium bridge overrides (non-functional) ===== */ .topbar, .soc-bottom-tab, .soc-report-headerbar { background: var(--soc-surface); } .soc-bottom-tab-btn { border-radius: 8px; border-bottom: 2px solid transparent; } .soc-bottom-tab-btn.is-active { background: transparent; color: var(--soc-primary); border-bottom-color: var(--soc-primary); box-shadow: none; } .panel, .panel.ds-card, .ds-card { background: var(--soc-panel-bg); border: 1px solid var(--soc-border); box-shadow: var(--ui-shadow-1); } .panel:hover, .ds-card:hover { transform: none; box-shadow: var(--ui-shadow-1); } .ds-btn, button, .report-tab, .announcement-mode-btn, .site-filter-btn, .date-filter-btn, .sla-page-btn { transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; } .ds-btn-primary:hover, .ds-btn-danger:hover { filter: none; } @media (max-width: 1023px) { .panel, .panel.ds-card, .ds-card { border-radius: 10px; } .ds-btn, button, .report-tab, .announcement-mode-btn, .site-filter-btn, .date-filter-btn, .sla-page-btn { min-height: var(--ui-control-h-mobile, 44px); border-radius: 8px; } input, select, textarea, .ds-input, .ds-select, .ds-textarea { min-height: var(--ui-control-h-mobile, 44px); border-radius: 8px; } } @media (min-width: 1024px) { .ds-btn, button, .report-tab, .announcement-mode-btn, .site-filter-btn, .date-filter-btn, .sla-page-btn { min-height: var(--ui-control-h-desktop, 40px); border-radius: 6px; } input, select, textarea, .ds-input, .ds-select, .ds-textarea { min-height: var(--ui-control-h-desktop, 40px); border-radius: 6px; } } #homeView, #alertsView, #ticketsView, #weeklyView, #peopleView, #analyticsView, #reportsView, #adminView, #myProfileView, #notificationPanel, #reportPanel { content-visibility: auto; contain-intrinsic-size: auto 760px; } #homeView, #alertsView, #ticketsView, #weeklyView, #peopleView, #analyticsView, #reportsView, #adminView, #myProfileView { contain: content; } /* ===== SOC UI 2026 shell/layout normalization (action-safe CSS only) ===== */ :root { --ui-breakpoint-mobile-max: 768px; --ui-breakpoint-desktop-min: 1024px; } .soc-app-shell { --soc-tabbar-h: 56px; } .soc-startup-overlay { z-index: var(--ui-z-startup); } .topbar { z-index: var(--ui-z-topbar); border-bottom: 1px solid var(--ui-border-subtle); background: var(--ui-bg-surface); box-shadow: none; } .nav-backdrop, .soc-drawer-backdrop, .modal-overlay { z-index: var(--ui-z-overlay); background: rgba(0, 0, 0, 0.4); } #menuSheetPanel, #weeklyBuilderSheet, #reportBuilderSheet, #participantsSheet, #reportParticipantPickerSheet, #homeTrendInsightSheet { z-index: var(--ui-z-drawer); } #bottomTabNav.soc-bottom-tab { z-index: var(--ui-z-tabbar); border-top: 1px solid var(--ui-border-subtle); } .soc-mini-row { min-height: 44px; transition: background-color 0.16s ease, border-color 0.16s ease; } .soc-mini-row:hover, .soc-mini-row:active { transform: none; box-shadow: none; } #alertsView .soc-alerts-filter-compact-row { display: none; } .incident-mobile-meta, .incident-mobile-comment, .incident-mobile-eci, .ticket-mobile-meta, .ticket-mobile-comment { display: none; } #alertsView .incident-list, #alertsView #alertsTicketList, #ticketsView .ticket-list, #peopleView #employeeDirectoryList, #weeklyView #weeklyPreviewScroller, #reportsView #reportPreviewScroller, #analyticsView .soc-analytics-content { content-visibility: auto; contain-intrinsic-size: auto 680px; } @media (max-width: 768px) { .topbar { min-height: 52px; padding: calc(var(--soc-safe-top) + 6px) 10px 6px; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; } .topbar-left { min-width: 0; } .topbar-right { gap: 4px; padding-right: max(2px, env(safe-area-inset-right, 0px)); } .session-info { display: none !important; } #topbarNotificationPermissionBtn, #openPasswordBtn { display: none !important; } #topbarNotificationsBtn.topbar-btn:not(.hidden), #topbarMyProfileBtn.topbar-btn:not(.hidden) { display: inline-flex !important; min-height: var(--ui-control-h-mobile, 44px); height: var(--ui-control-h-mobile, 44px); border-radius: 8px; padding: 0 10px; } #bottomTabNav.soc-bottom-tab { min-height: calc(var(--soc-tabbar-h, 56px) + env(safe-area-inset-bottom, 0px)) !important; height: calc(var(--soc-tabbar-h, 56px) + env(safe-area-inset-bottom, 0px)) !important; max-height: calc(var(--soc-tabbar-h, 56px) + env(safe-area-inset-bottom, 0px)) !important; padding: 0 0 env(safe-area-inset-bottom, 0px) !important; } #bottomTabNav.soc-bottom-tab .soc-bottom-tab-btn { min-height: var(--soc-tabbar-h, 56px) !important; height: var(--soc-tabbar-h, 56px) !important; border-radius: 0; border-bottom-width: 0; } body.nav-open #menuSheetPanel, body.nav-open .container.admin-layout #menuSheetPanel, #menuSheetPanel, .container.admin-layout #menuSheetPanel { position: fixed !important; inset: auto 0 0 0 !important; top: auto !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; height: min(82dvh, 780px) !important; max-height: min(82dvh, 780px) !important; border-radius: 16px 16px 0 0 !important; border: 1px solid var(--ui-border-subtle) !important; border-bottom: 0 !important; background: var(--ui-bg-surface) !important; transform: translateY(104%) !important; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden !important; } body.nav-open #menuSheetPanel, body.nav-open .container.admin-layout #menuSheetPanel { transform: translateY(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } #menuSheetPanel > .ds-card-title { margin: 0 10px 6px !important; padding-top: 2px; } #menuSheetPanel .nav-sheet-handle { display: flex !important; align-items: center; justify-content: center; height: 24px; margin: 0; padding: 6px 0; border-top-left-radius: 16px; border-top-right-radius: 16px; background: var(--ui-bg-surface); } #menuSheetPanel .nav-sheet-handle span { width: 40px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ui-text-tertiary) 85%, transparent); } #menuSheetPanel .mobile-menu-pager { overflow-y: auto; -webkit-overflow-scrolling: touch; } #menuSheetPanel .soc-menu-group-toggle, #menuSheetPanel .soc-menu-sub-item, #menuSheetPanel .mobile-nav-action-btn, #menuSheetPanel .mobile-admin-shortcut-btn { min-height: 44px !important; } #menuSheetPanel .soc-menu-group-label { font-size: var(--ui-text-14); } #menuSheetPanel .soc-menu-sub-item-label { font-size: var(--ui-text-13); } #alertsView .soc-realtime-datebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; } #alertsView .soc-realtime-datebar > * { width: 100%; min-width: 0; max-width: 100%; margin-left: 0; transform: none; } #alertsView .soc-realtime-date-display, #alertsView .soc-realtime-announce-btn { width: 100%; min-width: 0; max-width: 100%; } #alertsView .soc-realtime-date-display #realtimeDateDisplayText, #alertsView .soc-realtime-announce-btn .btn-label { display: inline-block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView { overflow-x: hidden; } #alertsView .soc-alerts-filter-compact-row { display: flex; align-items: center; gap: 8px; padding: 8px 0 2px; min-width: 0; } #alertsView .soc-alerts-filter-compact-summary { margin: 0; min-width: 0; flex: 1 1 auto; font-size: var(--ui-text-12, 12px); line-height: 1.35; color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .soc-alerts-filter-compact-btn { flex: 0 0 auto; min-height: 36px; padding-inline: 10px; } #alertsView .soc-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 8px; overflow: visible; padding-bottom: 0; } #alertsView .soc-summary-grid > .soc-summary-card, #alertsView .soc-summary-grid > .soc-summary-card-skeleton { width: 100%; min-width: 0; } #alertsView .soc-realtime-active-filters { display: none !important; } #alertsView .soc-realtime-active-filters .chip { width: 100%; min-width: 0; max-width: 100%; margin-left: 0; transform: none; } #alertsView .soc-realtime-active-filters .chip > span { display: inline-block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #filterSheet .filter-chip-wrapper, #filterSheet .filter-chip-wrapper.active, #filterSheet .date-filter-group.filter-chip-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; align-items: stretch !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; overflow: visible !important; margin-left: 0 !important; transform: none !important; } #filterSheet, #filterSheet .soc-alerts-builder-scroller { overflow-x: hidden !important; } #filterSheet .soc-alerts-participant-pickers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #filterSheet .soc-participant-picker-trigger { min-width: 0; width: 100%; margin-left: 0 !important; transform: none !important; } #filterSheet .soc-participant-picker-summary { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #filterSheet .filter-chip-wrapper .filter-chip, #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip, #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip:active, #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip.is-active, #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip.active, #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip[aria-selected="true"], #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip[aria-pressed="true"] { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; } #alertsView .incident-card, #alertsView .incident-ticket-card, #ticketsView .ticket-card { position: relative; display: grid; gap: 4px; border-radius: 12px; border: 1px solid var(--ui-border-subtle); box-shadow: none; } #alertsView .incident-card { padding: 10px 12px; } #ticketsView .ticket-card { padding: 10px 12px; gap: 6px; } #alertsView .incident-card:hover, #alertsView .incident-card:active, #ticketsView .ticket-card:hover, #ticketsView .ticket-card:active { transform: none; box-shadow: none; } #alertsView .incident-card .attachment-list, #ticketsView .ticket-card .attachment-list, #ticketsView .ticket-card .ticket-attachments { display: none !important; } #alertsView .incident-card-head, #ticketsView .ticket-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0; } #alertsView .incident-title, #ticketsView .ticket-title { min-width: 0; margin: 0; padding-right: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .incident-type, #alertsView .incident-created-at, #alertsView .incident-location, #alertsView .incident-type-badge, #alertsView .incident-ticket-description, #ticketsView .ticket-row-summary { display: none !important; } #alertsView .incident-card-badges { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; pointer-events: none; } #alertsView .incident-card-badges .incident-status, #alertsView .incident-card-badges .incident-ticket-status { margin: 0; min-height: 24px; font-size: 11px; line-height: 1.2; padding: 4px 8px; border-radius: 999px; white-space: nowrap; } #alertsView .incident-card-badges .incident-severity, #alertsView .incident-card-badges .incident-location, #alertsView .incident-card-badges .incident-type-badge { display: none !important; } #ticketsView .ticket-head-pills { position: absolute; top: 10px; right: 10px; margin: 0; gap: 4px; pointer-events: none; } #ticketsView .ticket-head-pills .ticket-status-pill { min-height: 24px; padding: 4px 8px; font-size: 11px; line-height: 1.2; border-radius: 999px; white-space: nowrap; } #alertsView .incident-mobile-meta, #alertsView .incident-mobile-comment, #ticketsView .ticket-mobile-meta, #ticketsView .ticket-mobile-comment { display: block; margin: 0; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .incident-mobile-meta, #ticketsView .ticket-mobile-meta { padding-right: 96px; } #alertsView .incident-mobile-eci { position: absolute; right: 10px; bottom: 10px; margin: 0; min-height: 22px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--soc-warning) 58%, var(--soc-border)); background: color-mix(in srgb, var(--soc-warning) 14%, transparent); color: color-mix(in srgb, var(--soc-warning) 85%, #6b3b00); font-size: 11px; font-weight: 700; line-height: 1.15; padding: 3px 7px; max-width: 44%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #reportsView .soc-report-header-actions.report-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "generate generate" "builder export"; gap: 6px; align-items: stretch; } #reportsView .soc-report-header-actions.report-actions > :nth-child(1) { grid-area: builder; } #reportsView .soc-report-header-actions.report-actions > :nth-child(2) { grid-area: generate; } #reportsView .soc-report-header-actions.report-actions > :nth-child(3) { grid-area: export; } #reportsView .soc-report-header-actions.report-actions .ds-btn, #reportsView .soc-report-header-actions.report-actions .soc-export-menu-wrap, #reportsView .soc-report-header-actions.report-actions .soc-export-menu-wrap > .ds-btn { width: 100%; min-width: 0; } #weeklyView .soc-weekly-header-main { align-items: flex-start; } #weeklyView .soc-weekly-header-actions { width: 100%; flex-wrap: wrap; justify-content: stretch; } #weeklyView .soc-weekly-header-actions > .ds-btn { flex: 1 1 0; } #weeklyView .soc-weekly-footer-actions { position: sticky; left: 0; right: 0; bottom: calc(var(--soc-tabbar-h, 56px) + env(safe-area-inset-bottom, 0px)); z-index: var(--ui-z-tabbar); border-top: 1px solid var(--ui-border-subtle); background: var(--ui-bg-surface); padding: 10px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #weeklyView .soc-weekly-footer-actions .ds-btn { width: 100%; min-height: 44px; } #weeklyView .soc-weekly-ticket-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #weeklyView .soc-weekly-workspace-shell { gap: 12px; } #weeklyView .soc-weekly-control-card, #weeklyView .soc-weekly-review-card { padding: 14px; } #homeView .soc-list-mini, #ticketsView .ticket-list, #alertsView .incident-list { gap: 8px; } } @media (min-width: 769px) { .session-info { display: block; } .topbar-right .topbar-btn:not(.hidden) { display: inline-flex !important; } } @media (min-width: 1024px) { .container.ds-page { padding: 16px 18px 24px; } #menuSheetPanel, .container.admin-layout #menuSheetPanel { display: none !important; } body.nav-open #menuSheetPanel, body.nav-open .container.admin-layout #menuSheetPanel, body.role-hq.nav-open.admin-menu-sheet-open #menuSheetPanel, body.role-hq.nav-open.admin-menu-sheet-open .container.admin-layout #menuSheetPanel { display: flex !important; position: fixed !important; top: 56px !important; left: 0 !important; right: auto !important; bottom: 0 !important; width: 252px !important; max-width: 252px !important; height: calc(100dvh - 56px) !important; max-height: calc(100dvh - 56px) !important; border-radius: 0 !important; border: 0 !important; border-right: 1px solid var(--ui-border-subtle) !important; background: var(--ui-bg-surface) !important; overflow: hidden !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: var(--ui-z-drawer) !important; } body.nav-open #menuSheetPanel .nav-sheet-handle { display: none !important; } body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; background: rgba(0, 0, 0, 0.24); } #bottomTabNav.soc-bottom-tab { position: static !important; inset: auto !important; min-height: 56px; height: 56px; max-height: 56px; border-radius: 10px; } #homeView .soc-home-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; } #alertsView .incident-list, #ticketsView .ticket-list { gap: 8px; } #alertsView .incident-card, #alertsView .incident-ticket-card { border-radius: 10px; box-shadow: none; padding: 10px 12px 10px 14px; } #alertsView .incident-card:hover, #alertsView .incident-card:active { transform: none; box-shadow: none; background: var(--ui-bg-surface-muted); } #alertsView .incident-card-head { margin-bottom: 2px; align-items: center; } #alertsView .incident-card-badges { margin-bottom: 4px; } #alertsView .incident-created-at { margin: 0; font-size: var(--ui-text-12); } #ticketsView .ticket-card { border-radius: 10px; box-shadow: none; padding: 10px 12px; gap: 6px; } #ticketsView .ticket-card:hover, #ticketsView .ticket-card:active { transform: none; box-shadow: none; background: var(--ui-bg-surface-muted); } #ticketsView .ticket-card-head { align-items: center; } #ticketsView .ticket-meta { gap: 4px; } #alertsView .soc-pc-list-header, #ticketsView .soc-pc-list-header { display: grid; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; margin: 0 0 6px; background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); } #alertsView .soc-pc-incident-header { grid-template-columns: 84px 132px 84px 124px minmax(180px, 1.7fr) 136px minmax(170px, 1.1fr) 96px; } #ticketsView .soc-pc-ticket-header { grid-template-columns: 98px 132px 132px minmax(190px, 1.75fr) 140px minmax(170px, 1.1fr) minmax(148px, 1fr); } #alertsView .soc-pc-two-col-shell, #ticketsView .soc-pc-two-col-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); gap: 12px; align-items: start; } #alertsView .soc-pc-list-main, #ticketsView .soc-pc-list-main { min-width: 0; } #alertsView .soc-pc-side-panel, #ticketsView .soc-pc-side-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 360px; max-height: calc(100dvh - 122px); position: sticky; top: 72px; padding: 10px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface, var(--soc-card-bg)); box-shadow: none; overflow: hidden; } #alertsView .soc-pc-side-panel.hidden, #ticketsView .soc-pc-side-panel.hidden { display: none !important; } #alertsView .soc-pc-side-panel-head, #ticketsView .soc-pc-side-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #alertsView .soc-pc-side-panel-head h4, #ticketsView .soc-pc-side-panel-head h4 { margin: 0; font-size: var(--ui-text-14, 14px); font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .soc-pc-side-panel-head-actions, #ticketsView .soc-pc-side-panel-head-actions { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } #alertsView .soc-pc-status-menu-wrap, #ticketsView .soc-pc-status-menu-wrap, #opsSupportPanel .soc-pc-status-menu-wrap { position: relative; } #alertsView .soc-pc-status-menu, #ticketsView .soc-pc-status-menu, #opsSupportPanel .soc-pc-status-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 132px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; background: var(--ui-bg-surface, var(--soc-card-bg)); box-shadow: var(--ui-shadow-1, 0 1px 2px rgba(16, 24, 40, 0.06)); padding: 6px; z-index: var(--ui-z-overlay, 300); } #alertsView .soc-pc-status-menu.hidden, #ticketsView .soc-pc-status-menu.hidden, #opsSupportPanel .soc-pc-status-menu.hidden { display: none !important; } #alertsView .soc-pc-status-menu-list, #ticketsView .soc-pc-status-menu-list, #opsSupportPanel .soc-pc-status-menu-list { display: grid; gap: 4px; } #alertsView .soc-pc-status-menu-item, #ticketsView .soc-pc-status-menu-item, #opsSupportPanel .soc-pc-status-menu-item { width: 100%; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ui-text-primary, var(--soc-text)); font-size: var(--ui-text-12, 12px); font-weight: 600; line-height: 1.2; padding: 7px 8px; text-align: left; cursor: pointer; } #alertsView .soc-pc-status-menu-item:hover, #alertsView .soc-pc-status-menu-item:focus-visible, #ticketsView .soc-pc-status-menu-item:hover, #ticketsView .soc-pc-status-menu-item:focus-visible, #opsSupportPanel .soc-pc-status-menu-item:hover, #opsSupportPanel .soc-pc-status-menu-item:focus-visible { border-color: var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); outline: none; } #alertsView .soc-pc-status-menu-item.is-current, #ticketsView .soc-pc-status-menu-item.is-current, #opsSupportPanel .soc-pc-status-menu-item.is-current { color: var(--ui-accent, var(--soc-accent)); border-color: rgba(255, 132, 0, 0.35); background: rgba(255, 132, 0, 0.1); } #alertsView .soc-pc-status-menu-item:disabled, #ticketsView .soc-pc-status-menu-item:disabled, #opsSupportPanel .soc-pc-status-menu-item:disabled { opacity: 0.45; cursor: not-allowed; } #alertsView #opsCommentPanelDeleteBtn, #ticketsView #ticketCommentPanelDeleteBtn { min-width: 52px; padding-inline: 12px; font-weight: 700; border-color: rgba(239, 68, 68, 0.22); background: #fff; color: #b91c1c; } #alertsView .soc-pc-side-panel .meta, #ticketsView .soc-pc-side-panel .meta { margin: 0; font-size: var(--ui-text-12, 12px); color: var(--ui-text-secondary, var(--soc-text-sub)); } #alertsView .soc-pc-side-panel-summary, #ticketsView .soc-pc-side-panel-summary { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); padding: 8px; max-height: 108px; overflow: auto; } #alertsView .soc-pc-side-panel-kv, #ticketsView .soc-pc-side-panel-kv { margin: 0; display: grid; gap: 6px; } #alertsView .soc-pc-side-panel-kv-row, #ticketsView .soc-pc-side-panel-kv-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: center; } #alertsView .soc-pc-side-panel-kv-row dt, #ticketsView .soc-pc-side-panel-kv-row dt { margin: 0; font-size: var(--ui-text-12, 12px); color: var(--ui-text-secondary, var(--soc-text-sub)); } #alertsView .soc-pc-side-panel-kv-row dd, #ticketsView .soc-pc-side-panel-kv-row dd { margin: 0; min-width: 0; font-size: var(--ui-text-12, 12px); color: var(--ui-text-primary, var(--soc-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .soc-pc-side-panel-thread, #ticketsView .soc-pc-side-panel-thread { flex: 1 1 auto; min-height: 220px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; background: var(--ui-bg-surface, var(--soc-card-bg)); padding: 8px; overflow: auto; } #alertsView .soc-pc-side-panel-thread-list, #ticketsView .soc-pc-side-panel-thread-list { display: grid; gap: 8px; } #alertsView .soc-pc-side-panel-thread-item, #ticketsView .soc-pc-side-panel-thread-item { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); padding: 8px; display: grid; gap: 6px; } #alertsView .soc-pc-side-panel-thread-head, #ticketsView .soc-pc-side-panel-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } #alertsView .soc-pc-side-panel-thread-head strong, #ticketsView .soc-pc-side-panel-thread-head strong { min-width: 0; font-size: var(--ui-text-12, 12px); color: var(--ui-text-primary, var(--soc-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .soc-pc-side-panel-thread-head span, #ticketsView .soc-pc-side-panel-thread-head span { flex: 0 0 auto; font-size: var(--ui-text-11, 11px); color: var(--ui-text-secondary, var(--soc-text-sub)); } #alertsView .soc-pc-side-panel-thread-text, #ticketsView .soc-pc-side-panel-thread-text { margin: 0; font-size: var(--ui-text-12, 12px); color: var(--ui-text-primary, var(--soc-text)); line-height: 1.35; word-break: keep-all; overflow-wrap: break-word; } #alertsView .soc-pc-side-panel-form, #ticketsView .soc-pc-side-panel-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } #alertsView .soc-pc-side-panel-form.hidden, #ticketsView .soc-pc-side-panel-form.hidden { display: none !important; } #alertsView .soc-pc-side-panel-input, #ticketsView .soc-pc-side-panel-input { min-width: 0; } #alertsView .soc-pc-side-panel-actions, #ticketsView .soc-pc-side-panel-actions { display: flex; justify-content: flex-end; gap: 8px; } #alertsView .soc-pc-list-header > span, #ticketsView .soc-pc-list-header > span { min-width: 0; font-size: var(--ui-text-12, 12px); font-weight: 600; color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .incident-list, #ticketsView .ticket-list { gap: 0; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; overflow: hidden; background: var(--ui-bg-surface, var(--soc-card-bg)); } #alertsView .incident-card, #alertsView .incident-ticket-card { display: grid; grid-template-columns: 84px 132px 84px 124px minmax(180px, 1.7fr) 136px minmax(170px, 1.1fr) 96px; align-items: center; gap: 8px 10px; min-height: 46px; border: 0; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 0; padding: 8px 12px; box-shadow: none; } #alertsView .incident-list > .incident-card:last-child { border-bottom: 0; } #alertsView .incident-card::before { display: none; } #alertsView .incident-card-head, #alertsView .incident-card-badges { display: contents; } #alertsView .incident-status { grid-column: 1; } #alertsView .incident-type { grid-column: 2; margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); } #alertsView .incident-severity { grid-column: 3; } #alertsView .incident-location { grid-column: 4; } #alertsView .incident-title { grid-column: 5; margin: 0; font-size: var(--ui-text-13, 13px); } #alertsView .incident-created-at { grid-column: 6; margin: 0; font-size: var(--ui-text-12, 12px); color: var(--ui-text-secondary, var(--soc-text-sub)); } #alertsView .incident-comment-preview { display: block; grid-column: 7; margin: 0; font-size: var(--ui-text-12, 12px); color: var(--ui-text-secondary, var(--soc-text-sub)); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .incident-head-actions, #alertsView .incident-actions { grid-column: 8; justify-content: flex-end; margin: 0; } #alertsView .incident-actions .viewDetailBtn { min-height: 32px; padding-inline: 10px; white-space: nowrap; } #alertsView .incident-more-btn { width: 30px; min-width: 30px; height: 30px; } #alertsView .incident-more-menu { top: 34px; right: 8px; } #alertsView .incident-attachments, #alertsView .instruction-list, #alertsView .instruction-form, #alertsView .incident-urgent-badge, #alertsView .incident-type-badge, #alertsView .incident-category-badge { display: none !important; } #alertsView .incident-card.incident-ticket-card .incident-ticket-description { display: block !important; grid-column: 7; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: var(--ui-text-12, 12px); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ticketsView .ticket-card { display: grid; grid-template-columns: 98px 132px 132px minmax(190px, 1.75fr) 140px minmax(170px, 1.1fr) minmax(148px, 1fr); align-items: center; gap: 8px 10px; min-height: 46px; border: 0; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 0; padding: 8px 12px; box-shadow: none; } #ticketsView .ticket-list > .ticket-card:last-child { border-bottom: 0; } #alertsView .soc-pc-selectable-row, #ticketsView .soc-pc-selectable-row { cursor: pointer; } #alertsView .soc-pc-selectable-row.is-selected, #ticketsView .soc-pc-selectable-row.is-selected { background: var(--ui-accent-weak, rgba(255, 107, 0, 0.1)); outline: 1px solid var(--ui-accent, #ff6b00); outline-offset: -1px; } #ticketsView .ticket-card::before { display: none; } #ticketsView .ticket-card-head, #ticketsView .ticket-row-summary { display: contents; } #ticketsView .ticket-head-pills { grid-column: 1; justify-content: flex-start; flex-wrap: nowrap; } #ticketsView .ticket-urgent-pill { display: none; } #ticketsView .ticket-title { grid-column: 4; margin: 0; font-size: var(--ui-text-13, 13px); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ticketsView .ticket-row-summary-item { margin: 0; min-width: 0; font-size: var(--ui-text-12, 12px); line-height: 1.35; color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ticketsView .ticket-row-summary-type { grid-column: 2; } #ticketsView .ticket-row-summary-site { grid-column: 3; } #ticketsView .ticket-row-summary-updated { grid-column: 5; } #ticketsView .ticket-row-summary-comment { grid-column: 6; } #alertsView .incident-type, #alertsView .incident-location, #alertsView .incident-title, #alertsView .incident-created-at, #alertsView .incident-comment-preview, #ticketsView .ticket-title, #ticketsView .ticket-row-summary-item, #ticketsView .ticket-status-pill, #ticketsView .ticket-head-pills { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .incident-mobile-meta, #alertsView .incident-mobile-comment, #alertsView .incident-mobile-eci, #ticketsView .ticket-mobile-meta, #ticketsView .ticket-mobile-comment, #ticketsView .ticket-kv-row { display: none !important; } #ticketsView .ticket-full-content-actions, #ticketsView .ticket-actions-row, #ticketsView .ticket-comment-form, #ticketsView .ticket-attachment-form { grid-column: 7; justify-self: end; width: min(320px, 100%); margin: 0; } #ticketsView .ticket-full-content-actions { justify-content: flex-end; } #ticketsView .ticket-comment-form, #ticketsView .ticket-attachment-form { grid-template-columns: 1fr auto; gap: 6px; } #ticketsView .ticket-kv-list, #ticketsView .ticket-comments, #ticketsView .ticket-attachments, #ticketsView .ticket-meta-line, #ticketsView .ticket-action-row.ticket-extra { display: none !important; } #weeklyView .soc-weekly-preview-viewport { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #weeklyView .soc-weekly-section-card { min-height: 184px; } #weeklyView .soc-weekly-footer-actions { position: sticky; bottom: 0; background: var(--ui-bg-surface); border-top: 1px solid var(--ui-border-subtle); padding-top: 10px; z-index: var(--ui-z-overlay); } #peopleView table, #adminView table { table-layout: fixed; } } #opsSupportPanel { display: grid; gap: 16px; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } #opsSupportPanel .soc-ops-support-toolbar { display: grid; gap: 8px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface, var(--soc-card-bg)); padding: 12px 14px; box-shadow: var(--ui-shadow-0, 0 1px 2px rgba(15, 23, 42, 0.04)); } #opsSupportPanel .soc-ops-support-header-top { align-items: flex-start; flex-wrap: wrap; } #opsSupportPanel .soc-ops-support-control-deck { display: grid; gap: 6px; } #opsSupportPanel .soc-ops-support-toolbar-main-row, #opsSupportPanel .soc-ops-support-toolbar-system { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; } #opsSupportPanel .soc-ops-support-toolbar-main-row { justify-content: space-between; } #opsSupportPanel .soc-ops-support-toolbar-system { flex: 1 1 520px; justify-content: flex-end; } #opsSupportPanel .soc-ops-support-support-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; flex-wrap: wrap; padding: 0 2px; } #opsSupportPanel .soc-ops-support-toolbar-stats { display: inline-flex; align-items: stretch; gap: 8px; flex-wrap: wrap; } #opsSupportPanel .soc-ops-support-toolbar-stat { display: grid; gap: 2px; min-width: 76px; padding: 4px 8px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8))); } #opsSupportPanel .soc-ops-support-toolbar-stat-label { font-size: var(--ui-text-11, 11px); line-height: 1.2; color: var(--ui-text-secondary, var(--soc-text-sub)); font-weight: 600; } #opsSupportPanel .soc-ops-support-toolbar-stat > strong { font-size: var(--ui-text-13, 13px); line-height: 1.3; color: var(--ui-text-primary, var(--soc-text)); font-weight: 700; } #opsSupportPanel .soc-ops-support-toolbar-meta { margin: 0; min-width: 0; font-size: var(--ui-text-12, 12px); line-height: 1.5; color: var(--ui-text-secondary, var(--soc-text-sub)); } #opsSupportPanel .soc-ops-support-view-toggle { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: 2px; padding: 2px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8))); } #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'] { min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #64748b; font-size: 13px; font-weight: 600; } #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'].is-active { border-color: rgba(234, 88, 12, 0.22); background: rgba(234, 88, 12, 0.08); color: #c2410c; } #opsSupportPanel .soc-ops-support-filters { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; } #opsSupportPanel .soc-ops-support-compact-control { min-width: 124px; height: 36px; font-size: var(--ui-text-12, 12px); padding: 0 10px; } #opsSupportPanel .soc-ops-support-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } #opsSupportPanel .soc-ops-support-toolbar-action-row { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } #opsSupportPanel .ops-support-month-nav { display: flex; align-items: center; gap: 6px; padding: 0; } #opsSupportPanel .ops-support-month-nav .month-label { border: 1px solid var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8))); border-radius: 10px; padding: 0 12px; min-height: 36px; margin: 0; font-size: 14px; font-weight: 600; color: var(--ui-text-primary, var(--soc-text)); cursor: pointer; } #opsSupportPanel .ops-support-month-nav .month-arrow { border: 1px solid var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface, var(--soc-card-bg)); border-radius: 10px; cursor: pointer; font-size: 14px; min-height: 36px; min-width: 36px; padding: 0 8px; color: var(--ui-text-primary, var(--soc-text)); } #opsSupportPanel .ops-support-month-nav .month-label:focus-visible, #opsSupportPanel .ops-support-month-nav .month-arrow:focus-visible { outline: 2px solid var(--ui-accent, var(--soc-primary)); outline-offset: 2px; border-radius: 6px; } #opsSupportPanel .soc-ops-support-mini-btn { height: 32px; min-height: 32px; padding: 0 10px; } #opsSupportPanel .soc-ops-support-mini-icon-btn { height: 32px; min-height: 32px; min-width: 32px; padding: 0 8px; } #opsSupportPanel .soc-ops-support-export-top-btn { height: 32px; min-height: 32px; padding: 0 12px; } #opsSupportPanel .soc-ops-support-save-btn { min-width: 72px; } #opsSupportPanel .soc-ops-support-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; } #opsSupportPanel .soc-ops-support-main { min-width: 0; display: grid; gap: 10px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 14px; background: var(--ui-bg-surface, var(--soc-card-bg)); padding: 12px; box-shadow: var(--ui-shadow-0, 0 1px 2px rgba(15, 23, 42, 0.04)); } #opsSupportPanel .soc-ops-support-state { border: 1px dashed var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface, var(--soc-card-bg)); padding: 12px; } #opsSupportPanel .soc-ops-support-view.hidden, #opsSupportPanel .soc-ops-support-state.hidden { display: none !important; } #opsSupportPanel .soc-ops-support-calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } #opsSupportPanel .soc-ops-support-calendar-weekdays > span { text-align: center; font-size: var(--ui-text-12, 12px); color: var(--ui-text-secondary, var(--soc-text-sub)); font-weight: 600; } #opsSupportPanel .soc-ops-support-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } #opsSupportPanel .soc-ops-support-calendar-cell { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; min-height: 108px; background: var(--ui-bg-surface, var(--soc-card-bg)); padding: 8px 7px; display: grid; gap: 5px; align-content: start; } #opsSupportPanel .soc-ops-support-calendar-cell.is-expanded { min-height: 108px; } #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month { opacity: 0.58; } #opsSupportPanel .soc-ops-support-calendar-cell-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } #opsSupportPanel .soc-ops-support-calendar-cell-head > strong { font-size: var(--ui-text-12, 12px); color: var(--ui-text-primary, var(--soc-text)); } #opsSupportPanel .soc-ops-support-calendar-cell-head > span { font-size: var(--ui-text-10, 10px); color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; } #opsSupportPanel .soc-ops-support-calendar-cell-body { display: grid; gap: 3px; } #opsSupportPanel .soc-ops-support-calendar-cell-body.is-expanded { gap: 4px; } #opsSupportPanel .soc-ops-support-calendar-line, #opsSupportPanel .soc-ops-support-calendar-more { border: 1px solid var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); color: var(--ui-text-primary, var(--soc-text)); border-radius: 8px; font-size: var(--ui-text-11, 11px); line-height: 1.3; padding: 4px 6px; text-align: left; min-width: 0; } #opsSupportPanel .soc-ops-support-calendar-line:hover, #opsSupportPanel .soc-ops-support-calendar-more:hover { background: var(--ui-bg-surface, var(--soc-card-bg)); } #opsSupportPanel .soc-ops-support-calendar-more.is-expanded { font-weight: 700; } #opsSupportPanel .soc-ops-support-calendar-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; } #opsSupportPanel .soc-ops-support-calendar-line-label { min-width: 0; display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #opsSupportPanel .soc-ops-support-calendar-line strong { flex: 0 0 auto; font-size: var(--ui-text-11, 11px); white-space: nowrap; text-align: right; } #opsSupportPanel .soc-ops-support-calendar-line.is-selected, #opsSupportPanel .soc-ops-support-calendar-cell.is-selected { border-color: rgba(234, 88, 12, 0.38); box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.18); } #opsSupportPanel .soc-ops-support-status-dot { width: 7px; height: 7px; border-radius: 999px; background: #94a3b8; flex: 0 0 7px; } #opsSupportPanel .soc-ops-support-status-dot.state-approved { background: #22c55e; } #opsSupportPanel .soc-ops-support-status-dot.state-pending { background: #f59e0b; } #opsSupportPanel .soc-ops-support-status-dot.state-unavailable { background: #ef4444; } #opsSupportPanel .soc-ops-support-status-dot.state-rejected { background: #ef4444; } #opsSupportPanel .soc-ops-support-status-dot.state-cancelled { background: #94a3b8; } #opsSupportPanel .cal-line.state-pending { background: #FFF3E8; border: 1px solid #F5A623; color: #A85A00; border-radius: 8px; padding: 4px 8px; } #opsSupportPanel .cal-line.state-approved { background: #EAF7EE; border: 1px solid #34A853; color: #1E6B35; border-radius: 8px; padding: 4px 8px; } #opsSupportPanel .cal-line.state-unavailable { background: #FDECEC; border: 1px solid #E57373; color: #B42318; border-radius: 8px; padding: 4px 8px; } #opsSupportPanel .cal-line.state-rejected { background: #FDECEC; border: 1px solid #E57373; color: #B42318; border-radius: 8px; padding: 4px 8px; } #opsSupportPanel .cal-line.state-cancelled { background: #F2F4F7; border: 1px solid #CBD5E1; color: #667085; border-radius: 8px; padding: 4px 8px; } #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned { background: #FDECEC; border: 1px solid #E57373; color: #B42318; } #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned:hover { background: #FBD5D5; } #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned .soc-ops-support-status-dot { background: #ef4444; } #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned.is-selected { border-color: #dc2626; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.18); } #opsSupportPanel .soc-ops-support-list-groups { display: grid; gap: 12px; } #opsSupportPanel .soc-ops-support-day-group { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface, var(--soc-card-bg)); overflow: hidden; } #opsSupportPanel .soc-ops-support-day-head { width: 100%; border: 0; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); color: var(--ui-text-primary, var(--soc-text)); min-height: 42px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } #opsSupportPanel .soc-ops-support-day-head > strong { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--ui-text-13, 13px); } #opsSupportPanel .soc-ops-support-day-head > span { flex: 0 0 auto; font-size: var(--ui-text-12, 12px); color: var(--ui-text-secondary, var(--soc-text-sub)); } #opsSupportPanel .soc-ops-support-over-assigned-note { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--ui-text-11, 11px); font-weight: 700; color: #991b1b; } [data-theme="dark"] #opsSupportPanel .soc-ops-support-over-assigned-note { color: #fca5a5; } [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned { background: rgba(127, 29, 29, 0.82); border-color: rgba(248, 113, 113, 0.48); color: #fecaca; } [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned:hover { background: rgba(153, 27, 27, 0.88); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned .soc-ops-support-status-dot { background: #f87171; } [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned.is-selected { border-color: rgba(248, 113, 113, 0.68); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.2); } #opsSupportPanel .soc-ops-support-day-table-wrap.hidden { display: none !important; } #opsSupportPanel .soc-ops-support-day-table { width: 100%; table-layout: fixed; border-collapse: collapse; } #opsSupportPanel .soc-ops-support-day-table th, #opsSupportPanel .soc-ops-support-day-table td { border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)); padding: 9px 10px; font-size: var(--ui-text-12, 12px); line-height: 1.35; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } #opsSupportPanel .soc-ops-support-day-table th { color: var(--ui-text-secondary, var(--soc-text-sub)); font-weight: 600; background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); } #opsSupportPanel .soc-ops-support-day-table tbody tr:last-child td { border-bottom: 0; } #opsSupportPanel .soc-ops-support-day-status-cell { overflow: visible; text-overflow: clip; } #opsSupportPanel .soc-ops-support-day-row { cursor: pointer; } #opsSupportPanel .soc-ops-support-day-row:hover { background: rgba(0, 0, 0, 0.04); } #opsSupportPanel .soc-ops-support-day-row:focus-visible { outline: 2px solid var(--ui-accent, var(--soc-primary)); outline-offset: -2px; } #opsSupportPanel .support-status-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); color: var(--ui-text-primary, var(--soc-text)); background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); font-size: var(--ui-text-11, 11px); font-weight: 600; line-height: 1.2; } #opsSupportPanel .support-status-chip.state-pending { background: #FFF3E8; color: #A85A00; border: 1px solid #F5A623; } #opsSupportPanel .support-status-chip.state-approved { background: #EAF7EE; color: #1E6B35; border: 1px solid #34A853; } #opsSupportPanel .support-status-chip.state-unavailable { background: #FDECEC; color: #B42318; border: 1px solid #E57373; } #opsSupportPanel .support-status-chip.state-rejected { background: #FDECEC; color: #B42318; border: 1px solid #E57373; } #opsSupportPanel .support-status-chip.state-cancelled { background: #F2F4F7; color: #667085; border: 1px solid #CBD5E1; } #opsSupportPanel .support-status-inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-text-12, 12px); line-height: 1.3; color: var(--ui-text-primary, var(--soc-text)); font-weight: 600; } #opsSupportPanel .support-status-inline.state-approved { color: #166534; } #opsSupportPanel .support-status-inline.state-pending { color: #a16207; } #opsSupportPanel .support-status-inline.state-unavailable { color: #b42318; } #opsSupportPanel .support-status-inline.state-rejected { color: #b42318; } #opsSupportPanel .support-status-inline.state-cancelled { color: #667085; } #opsSupportPanel .soc-ops-support-sheet { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 14px; background: var(--ui-bg-surface, var(--soc-card-bg)); padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; min-height: 300px; max-height: calc(100dvh - 96px); overflow: auto; box-shadow: var(--ui-shadow-0, 0 1px 2px rgba(15, 23, 42, 0.04)); } #opsSupportPanel .soc-ops-support-sheet.hidden { display: none !important; } #opsSupportPanel .soc-ops-support-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)); } #opsSupportPanel .soc-ops-support-sheet-head-copy { min-width: 0; display: grid; gap: 4px; } #opsSupportPanel .soc-ops-support-sheet-head-copy > .meta:empty { display: none; } #opsSupportPanel .soc-ops-support-sheet-head-copy > h3 { margin: 0; font-size: var(--ui-text-16, 16px); line-height: 1.35; } #opsSupportPanel .soc-ops-support-sheet-head-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } #opsSupportPanel .soc-ops-support-status-action { border-color: rgba(234, 88, 12, 0.22); background: rgba(234, 88, 12, 0.08); color: #c2410c; } #opsSupportPanel .soc-ops-support-status-action:hover, #opsSupportPanel .soc-ops-support-status-action:focus-visible { border-color: rgba(234, 88, 12, 0.36); background: rgba(234, 88, 12, 0.14); color: #9a3412; } #opsSupportPanel .soc-ops-support-status-action:disabled { opacity: 0.52; background: rgba(148, 163, 184, 0.08); border-color: var(--ui-border-subtle, var(--soc-border)); color: var(--ui-text-secondary, var(--soc-text-sub)); } #opsSupportPanel .soc-ops-support-sheet-status-wrap { position: relative; flex: 0 0 auto; } #opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 132px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; background: var(--ui-bg-surface, var(--soc-card-bg)); box-shadow: var(--ui-shadow-1, 0 1px 2px rgba(16, 24, 40, 0.06)); padding: 6px; z-index: var(--ui-z-overlay, 300); } #opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu.hidden { display: none !important; } #opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu-list { display: grid; gap: 4px; } #opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu-item { width: 100%; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ui-text-primary, var(--soc-text)); font-size: var(--ui-text-12, 12px); font-weight: 600; line-height: 1.2; padding: 7px 8px; text-align: left; cursor: pointer; } #opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu-item:hover, #opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu-item:focus-visible { border-color: var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); outline: none; } #opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu-item.is-current { color: var(--ui-accent, var(--soc-accent)); border-color: rgba(255, 132, 0, 0.35); background: rgba(255, 132, 0, 0.1); } #opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu-item:disabled { opacity: 0.45; cursor: not-allowed; } #opsSupportPanel .soc-ops-support-export-drawer { position: fixed; top: 56px; right: 0; width: min(360px, 96vw); height: calc(100dvh - 56px); max-height: calc(100dvh - 56px); border-left: 1px solid var(--ui-border-strong, var(--soc-border)); background: var(--ui-bg-surface, var(--soc-card-bg)); box-shadow: var(--ui-shadow-2, 0 12px 24px rgba(15, 23, 42, 0.18)); padding: 16px; display: grid; gap: 12px; overflow: auto; z-index: var(--ui-z-drawer, 420); } #opsSupportPanel .soc-ops-support-export-drawer.hidden { display: none !important; } #opsSupportPanel .soc-ops-support-export-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #opsSupportPanel .soc-ops-support-export-drawer-head > h3 { margin: 0; font-size: var(--ui-text-14, 14px); } #opsSupportPanel .soc-ops-support-sheet-tab.hidden { display: none !important; } #opsSupportPanel .soc-ops-support-sheet-tab { display: flex; flex: 1 1 auto; min-height: 0; } #opsSupportPanel .soc-ops-support-summary-content { display: grid; flex: 1 1 auto; gap: 10px; min-height: 0; } #opsSupportPanel .soc-ops-support-detail-section--summary { gap: 12px; } #opsSupportPanel .soc-ops-support-detail-summary-context { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: var(--ui-text-12, 12px); line-height: 1.35; color: var(--ui-text-secondary, var(--soc-text-sub)); } #opsSupportPanel .soc-ops-support-detail-summary-context > span { display: inline-flex; align-items: center; gap: 6px; } #opsSupportPanel .soc-ops-support-detail-summary-context > span:not(:last-child)::after { content: ""; width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: 0.6; } #opsSupportPanel .soc-ops-support-detail-summary-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } #opsSupportPanel .soc-ops-support-detail-summary-metric { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8))); padding: 10px 12px; display: grid; gap: 2px; } #opsSupportPanel .soc-ops-support-detail-summary-label { font-size: var(--ui-text-11, 11px); line-height: 1.2; color: var(--ui-text-secondary, var(--soc-text-sub)); font-weight: 600; } #opsSupportPanel .soc-ops-support-detail-summary-metric strong { font-size: var(--ui-text-15, 15px); line-height: 1.35; color: var(--ui-text-primary, var(--soc-text)); } #opsSupportPanel .soc-ops-support-self-resolved-badge { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 22px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(22, 163, 74, 0.18); background: rgba(22, 163, 74, 0.08); color: #166534; font-size: var(--ui-text-11, 11px); font-weight: 600; line-height: 1.2; } #opsSupportPanel .soc-ops-support-detail-summary-purpose { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface, var(--soc-card-bg)); padding: 12px 14px; display: grid; gap: 6px; } #opsSupportPanel .soc-ops-support-detail-summary-purpose p { margin: 0; font-size: var(--ui-text-13, 13px); line-height: 1.5; color: var(--ui-text-primary, var(--soc-text)); word-break: break-word; } #opsSupportPanel .soc-ops-support-detail-more { border-top: 1px dashed var(--ui-border-subtle, var(--soc-border)); padding-top: 8px; } #opsSupportPanel .soc-ops-support-detail-more summary { cursor: pointer; list-style: none; font-size: var(--ui-text-12, 12px); line-height: 1.35; font-weight: 600; color: var(--ui-text-secondary, var(--soc-text-sub)); } #opsSupportPanel .soc-ops-support-detail-more summary::-webkit-details-marker { display: none; } #opsSupportPanel .soc-ops-support-detail-more summary::after { content: "펼치기"; margin-left: 6px; font-weight: 500; color: var(--ui-text-tertiary, var(--ui-text-secondary, var(--soc-text-sub))); } #opsSupportPanel .soc-ops-support-detail-more[open] summary::after { content: "접기"; } #opsSupportPanel .soc-ops-support-detail-more .soc-ops-support-detail-kv { margin-top: 10px; } #opsSupportPanel .soc-ops-support-detail-more-span { grid-column: 1 / -1; } #opsSupportPanel .soc-ops-support-summary-empty { min-height: 152px; display: grid; align-content: start; justify-items: start; text-align: left; border: 1px dashed var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); padding: 14px; gap: 4px; } #opsSupportPanel .soc-ops-support-summary-empty.is-inline { min-height: 88px; } #opsSupportPanel .soc-ops-support-summary-hero { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); padding: 10px; display: grid; gap: 4px; } #opsSupportPanel .soc-ops-support-summary-count { margin: 0; font-size: 24px; font-weight: 700; color: var(--ui-text-primary, var(--soc-text)); line-height: 1.1; } #opsSupportPanel .soc-ops-support-summary-kv { margin: 0; display: grid; gap: 8px; } #opsSupportPanel .soc-ops-support-summary-kv > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: start; } #opsSupportPanel .soc-ops-support-summary-kv dt { margin: 0; font-size: var(--ui-text-12, 12px); color: var(--ui-text-secondary, var(--soc-text-sub)); } #opsSupportPanel .soc-ops-support-summary-kv dd { margin: 0; font-size: var(--ui-text-12, 12px); color: var(--ui-text-primary, var(--soc-text)); line-height: 1.4; word-break: break-word; } #opsSupportPanel .soc-ops-support-summary-work-purpose { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #opsSupportPanel .soc-ops-support-summary-memo-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #opsSupportPanel .soc-ops-support-summary-day-table-wrap { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; overflow: hidden; } #opsSupportPanel .soc-ops-support-summary-day-table { width: 100%; border-collapse: collapse; table-layout: fixed; } #opsSupportPanel .soc-ops-support-summary-day-table th, #opsSupportPanel .soc-ops-support-summary-day-table td { border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)); padding: 8px; font-size: var(--ui-text-12, 12px); text-align: left; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #opsSupportPanel .soc-ops-support-summary-day-table tbody tr:last-child td { border-bottom: 0; } #opsSupportPanel .soc-ops-support-detail-section { display: grid; gap: 12px; padding: 0; } #opsSupportPanel .soc-ops-support-detail-section + .soc-ops-support-detail-section { padding-top: 4px; border-top: 1px solid var(--ui-border-subtle, var(--soc-border)); } #opsSupportPanel .soc-ops-support-detail-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } #opsSupportPanel .soc-ops-support-detail-section-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } #opsSupportPanel .soc-ops-support-detail-section-title { margin: 0; font-size: var(--ui-text-14, 14px); line-height: 1.35; color: var(--ui-text-primary, var(--soc-text)); } #opsSupportPanel .soc-ops-support-detail-kv { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } #opsSupportPanel .soc-ops-support-detail-kv > div { display: grid; gap: 2px; min-width: 0; } #opsSupportPanel .soc-ops-support-detail-kv dt { margin: 0; font-size: var(--ui-text-11, 11px); line-height: 1.3; color: var(--ui-text-secondary, var(--soc-text-sub)); font-weight: 600; } #opsSupportPanel .soc-ops-support-detail-kv dd { margin: 0; font-size: var(--ui-text-12, 12px); line-height: 1.45; color: var(--ui-text-primary, var(--soc-text)); word-break: break-word; } #opsSupportPanel .soc-ops-support-day-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #opsSupportPanel .soc-ops-support-day-summary > div { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8))); padding: 10px 12px; display: grid; gap: 2px; } #opsSupportPanel .soc-ops-support-day-summary-label { font-size: var(--ui-text-11, 11px); line-height: 1.2; color: var(--ui-text-secondary, var(--soc-text-sub)); font-weight: 600; } #opsSupportPanel .soc-ops-support-day-summary strong { font-size: var(--ui-text-14, 14px); line-height: 1.35; color: var(--ui-text-primary, var(--soc-text)); } #opsSupportPanel .soc-ops-support-detail-table-wrap { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; overflow: hidden; } #opsSupportPanel .soc-ops-support-day-request-table tbody tr { cursor: pointer; } #opsSupportPanel .soc-ops-support-day-request-table tbody tr:hover { background: rgba(0, 0, 0, 0.03); } #opsSupportPanel .soc-ops-support-detail-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; } #opsSupportPanel .soc-ops-support-detail-timeline::before { display: none; } #opsSupportPanel .soc-ops-support-detail-timeline-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; position: relative; min-width: 0; align-items: flex-start; padding: 0 0 16px; } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-empty { grid-template-columns: 1fr; padding-left: 0; } #opsSupportPanel .soc-ops-support-detail-timeline-item:last-child { padding-bottom: 0; } #opsSupportPanel .soc-ops-support-detail-timeline-connector { position: absolute; top: 9px; bottom: -14px; left: 7px; width: 2px; background: #dbe4ee; } #opsSupportPanel .soc-ops-support-detail-timeline-item:last-child .soc-ops-support-detail-timeline-connector, #opsSupportPanel .soc-ops-support-detail-timeline-item.is-empty .soc-ops-support-detail-timeline-connector { display: none; } #opsSupportPanel .soc-ops-support-detail-timeline-dot { width: 12px; height: 12px; margin-top: 3px; margin-left: 0; border-radius: 999px; background: #64748b; border: 2px solid #ffffff; box-shadow: none; position: relative; z-index: 1; justify-self: center; } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-created .soc-ops-support-detail-timeline-dot { background: #ea580c; } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status .soc-ops-support-detail-timeline-dot { background: #334155; } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-approved .soc-ops-support-detail-timeline-dot { background: #1ebfa3; } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-pending .soc-ops-support-detail-timeline-dot { background: #ffbf3c; } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-danger .soc-ops-support-detail-timeline-dot { background: #ff6b6b; } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-muted .soc-ops-support-detail-timeline-dot { background: #64748b; } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-worker .soc-ops-support-detail-timeline-dot { background: #1ebfa3; } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-note .soc-ops-support-detail-timeline-dot { background: #64748b; } #opsSupportPanel .soc-ops-support-detail-timeline-body { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8))); padding: 10px 12px; display: grid; gap: 6px; min-width: 0; } #opsSupportPanel .soc-ops-support-detail-timeline-head { display: grid; gap: 4px; } #opsSupportPanel .soc-ops-support-detail-timeline-head > strong { font-size: var(--ui-text-12, 12px); line-height: 1.35; color: var(--ui-text-primary, var(--soc-text)); } #opsSupportPanel .soc-ops-support-detail-timeline-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } #opsSupportPanel .soc-ops-support-detail-timeline-copy { margin: 0; font-size: var(--ui-text-12, 12px); line-height: 1.45; color: var(--ui-text-primary, var(--soc-text)); word-break: break-word; } #opsSupportPanel .soc-ops-support-confirmed-block { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8))); padding: 12px; display: grid; gap: 10px; } #opsSupportPanel .soc-ops-support-confirmed-block.is-disabled { border-color: color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white); background: color-mix(in srgb, var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8))) 82%, white); } #opsSupportPanel .soc-ops-support-confirmed-disabled { min-height: 92px; border: 1px dashed var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; background: rgba(148, 163, 184, 0.06); display: grid; place-items: center; padding: 12px; text-align: center; } #opsSupportPanel .soc-ops-support-confirmed-disabled-copy { margin: 0; font-size: var(--ui-text-13, 13px); line-height: 1.35; color: var(--ui-text-secondary, var(--soc-text-sub)); font-weight: 600; } #opsSupportPanel .soc-ops-support-confirmed-block > h4 { margin: 0; font-size: var(--ui-text-13, 13px); } #opsSupportPanel .soc-ops-support-confirmed-roster-table-wrap { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; overflow: hidden; } #opsSupportPanel .soc-ops-support-confirmed-roster-table { width: 100%; border-collapse: collapse; table-layout: fixed; } #opsSupportPanel .soc-ops-support-confirmed-roster-table th, #opsSupportPanel .soc-ops-support-confirmed-roster-table td { border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)); padding: 8px; font-size: var(--ui-text-12, 12px); line-height: 1.35; text-align: left; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #opsSupportPanel .soc-ops-support-confirmed-roster-table th { color: var(--ui-text-secondary, var(--soc-text-sub)); background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); font-weight: 600; } #opsSupportPanel .soc-ops-support-confirmed-roster-table tbody tr:last-child td { border-bottom: 0; } #opsSupportPanel .confirmed-worker-list { display: grid; gap: 8px; max-height: 240px; overflow-y: auto; overflow-x: hidden; padding-right: 2px; } #opsSupportPanel .worker-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; position: relative; z-index: 1; } #opsSupportPanel .worker-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: fit-content; white-space: nowrap; } #opsSupportPanel .worker-row-actions .ds-btn { min-width: 34px; } #opsSupportPanel .worker-row-actions .worker-row-edit-btn { border-color: color-mix(in srgb, var(--soc-accent, #f97316) 44%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-accent, #f97316) 12%, var(--ui-bg-surface, var(--soc-card-bg))); color: color-mix(in srgb, var(--soc-accent, #ea580c) 82%, var(--ui-text-primary, var(--soc-text))); } #opsSupportPanel .worker-row-actions .worker-row-edit-btn:hover, #opsSupportPanel .worker-row-actions .worker-row-edit-btn:focus-visible { border-color: color-mix(in srgb, var(--soc-accent, #f97316) 60%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-accent, #f97316) 18%, var(--ui-bg-surface, var(--soc-card-bg))); color: color-mix(in srgb, var(--soc-accent, #c2410c) 88%, var(--ui-text-primary, var(--soc-text))); } #opsSupportPanel .worker-row-actions .worker-row-delete-btn { border-color: color-mix(in srgb, var(--soc-danger, #dc2626) 44%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-danger, #dc2626) 10%, var(--ui-bg-surface, var(--soc-card-bg))); color: color-mix(in srgb, var(--soc-danger, #dc2626) 84%, var(--ui-text-primary, var(--soc-text))); } #opsSupportPanel .worker-row-actions .worker-row-delete-btn:hover, #opsSupportPanel .worker-row-actions .worker-row-delete-btn:focus-visible { border-color: color-mix(in srgb, var(--soc-danger, #dc2626) 62%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-danger, #dc2626) 16%, var(--ui-bg-surface, var(--soc-card-bg))); color: color-mix(in srgb, var(--soc-danger, #b91c1c) 88%, var(--ui-text-primary, var(--soc-text))); } [data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-edit-btn { border-color: color-mix(in srgb, var(--soc-accent, #fb923c) 48%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-accent, #fb923c) 16%, var(--ui-bg-surface, var(--soc-card-bg))); color: color-mix(in srgb, var(--soc-accent, #fdba74) 82%, var(--ui-text-primary, var(--soc-text))); } [data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-delete-btn { border-color: color-mix(in srgb, var(--soc-danger, #ef4444) 50%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-danger, #ef4444) 16%, var(--ui-bg-surface, var(--soc-card-bg))); color: color-mix(in srgb, var(--soc-danger, #fecaca) 78%, var(--ui-text-primary, var(--soc-text))); } #opsSupportPanel .worker-row.is-assigned { padding: 6px; border: 1px solid color-mix(in srgb, var(--soc-success) 24%, var(--ui-border-subtle, var(--soc-border))); border-radius: 10px; background: color-mix(in srgb, var(--soc-success) 8%, var(--ui-bg-surface, var(--soc-card-bg))); } #opsSupportPanel .worker-row.is-over-assigned { border-color: color-mix(in srgb, var(--soc-danger, #dc2626) 42%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-danger, #dc2626) 9%, var(--ui-bg-surface, var(--soc-card-bg))); } [data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned { border-color: color-mix(in srgb, var(--soc-danger, #ef4444) 50%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-danger, #ef4444) 14%, var(--ui-bg-surface, var(--soc-card-bg))); } #opsSupportPanel .worker-row input[type="text"] { width: 100%; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; background: var(--ui-bg-surface, var(--soc-card-bg)); color: var(--ui-text-primary, var(--soc-text)); font-size: var(--ui-text-12, 12px); line-height: 1.4; padding: 8px 10px; } #opsSupportPanel .worker-row.is-assigned input[type="text"][readonly] { background: color-mix(in srgb, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)) 78%, white); color: var(--ui-text-primary, var(--soc-text)); cursor: default; } #opsSupportPanel .worker-row.is-over-assigned input[type="text"][readonly] { border-color: color-mix(in srgb, var(--soc-danger, #dc2626) 34%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-danger, #dc2626) 8%, var(--ui-bg-surface, var(--soc-card-bg))); color: color-mix(in srgb, var(--soc-danger, #991b1b) 74%, var(--ui-text-primary, var(--soc-text))); } #opsSupportPanel .worker-row.is-over-assigned .ds-btn { border-color: color-mix(in srgb, var(--soc-danger, #dc2626) 34%, var(--ui-border-subtle, var(--soc-border))); color: color-mix(in srgb, var(--soc-danger, #b91c1c) 72%, var(--ui-text-primary, var(--soc-text))); background: color-mix(in srgb, var(--soc-danger, #dc2626) 7%, var(--ui-bg-surface, var(--soc-card-bg))); } [data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned input[type="text"][readonly] { border-color: color-mix(in srgb, var(--soc-danger, #ef4444) 40%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-danger, #ef4444) 12%, var(--ui-bg-surface, var(--soc-card-bg))); color: color-mix(in srgb, var(--soc-danger, #fecaca) 72%, var(--ui-text-primary, var(--soc-text))); } [data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .ds-btn { border-color: color-mix(in srgb, var(--soc-danger, #ef4444) 40%, var(--ui-border-subtle, var(--soc-border))); color: color-mix(in srgb, var(--soc-danger, #fecaca) 70%, var(--ui-text-primary, var(--soc-text))); background: color-mix(in srgb, var(--soc-danger, #ef4444) 12%, var(--ui-bg-surface, var(--soc-card-bg))); } #opsSupportPanel .worker-row-actions .worker-row-edit-btn, #opsSupportPanel .worker-row.is-over-assigned .worker-row-edit-btn, [data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-edit-btn, [data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .worker-row-edit-btn { background: var(--soc-primary) !important; border-color: var(--soc-primary-deep) !important; color: var(--soc-on-primary) !important; } #opsSupportPanel .worker-row-actions .worker-row-edit-btn:hover, #opsSupportPanel .worker-row-actions .worker-row-edit-btn:focus-visible, #opsSupportPanel .worker-row.is-over-assigned .worker-row-edit-btn:hover, #opsSupportPanel .worker-row.is-over-assigned .worker-row-edit-btn:focus-visible, [data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-edit-btn:hover, [data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-edit-btn:focus-visible, [data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .worker-row-edit-btn:hover, [data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .worker-row-edit-btn:focus-visible { background: color-mix(in srgb, var(--soc-primary) 92%, black) !important; border-color: color-mix(in srgb, var(--soc-primary-deep) 88%, black) !important; color: var(--soc-on-primary) !important; } #opsSupportPanel .worker-row-actions .worker-row-delete-btn, #opsSupportPanel .worker-row.is-over-assigned .worker-row-delete-btn, [data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-delete-btn, [data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .worker-row-delete-btn { background: var(--soc-danger, #dc2626) !important; border-color: var(--soc-danger-deep, #991b1b) !important; color: var(--soc-on-danger, #ffffff) !important; } #opsSupportPanel .worker-row-actions .worker-row-delete-btn:hover, #opsSupportPanel .worker-row-actions .worker-row-delete-btn:focus-visible, #opsSupportPanel .worker-row.is-over-assigned .worker-row-delete-btn:hover, #opsSupportPanel .worker-row.is-over-assigned .worker-row-delete-btn:focus-visible, [data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-delete-btn:hover, [data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-delete-btn:focus-visible, [data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .worker-row-delete-btn:hover, [data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .worker-row-delete-btn:focus-visible { background: color-mix(in srgb, var(--soc-danger, #dc2626) 88%, black) !important; border-color: color-mix(in srgb, var(--soc-danger-deep, #991b1b) 88%, black) !important; color: var(--soc-on-danger, #ffffff) !important; } #opsSupportPanel .worker-add-btn { margin-top: 10px; position: relative; z-index: 1; pointer-events: auto; } #opsSupportPanel .worker-row [data-action="ops-support-save-workers"], #opsSupportPanel .worker-row [data-action="ops-support-save-confirmed-worker"], #opsSupportPanel .worker-row [data-action="ops-support-confirm-worker-row"], #opsSupportPanel .worker-row [data-action="ops-support-save-edited-worker-row"] { min-width: 34px; position: relative; z-index: 1; pointer-events: auto; } #opsSupportPanel .worker-row [data-action="ops-support-remove-worker-row"] { position: relative; z-index: 1; pointer-events: auto; } #opsSupportPanel .worker-row-spacer { width: 34px; min-width: 34px; height: 34px; } #opsSupportPanel .export-section { display: grid; gap: 8px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); padding: 10px; } #opsSupportPanel .export-section-title { margin: 0; font-size: var(--ui-text-13, 13px); } #opsSupportPanel .export-option-card { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; background: var(--ui-bg-surface, var(--soc-card-bg)); padding: 6px 8px; } #opsSupportPanel .export-option-card > span { display: grid; gap: 2px; min-width: 0; } #opsSupportPanel .export-option-card > span > strong { font-size: var(--ui-text-12, 12px); } #opsSupportPanel .export-option-card > span > small { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: var(--ui-text-11, 11px); } #opsSupportPanel .export-file-summary { gap: 4px; } #opsSupportPanel .soc-ops-support-export-block { display: grid; gap: 8px; } #opsSupportPanel .soc-ops-support-export-block > h4 { margin: 0; font-size: var(--ui-text-13, 13px); } #opsSupportPanel .soc-ops-support-export-scope-list, #opsSupportPanel .soc-ops-support-export-columns { display: grid; gap: 8px; } #opsSupportPanel .soc-ops-support-export-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } #opsSupportPanel .soc-ops-support-export-scope-list label, #opsSupportPanel .soc-ops-support-export-columns label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-text-12, 12px); color: var(--ui-text-primary, var(--soc-text)); } #opsSupportPanel .soc-ops-support-export-columns input[type="checkbox"], #opsSupportPanel .soc-ops-support-export-scope-list input[type="radio"] { margin: 0; } #opsSupportPanel .soc-ops-support-worker-modal { position: fixed; inset: 0; z-index: calc(var(--ui-z-drawer) + 8); } #opsSupportPanel .soc-ops-support-worker-modal.hidden { display: none !important; } #opsSupportPanel .soc-ops-support-worker-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); } #opsSupportPanel .soc-ops-support-worker-modal-dialog { position: relative; width: min(760px, 94vw); max-height: 90vh; margin: 6vh auto 0; background: var(--ui-bg-surface, var(--soc-card-bg)); border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; } #opsSupportPanel .soc-ops-support-worker-modal-head, #opsSupportPanel .soc-ops-support-worker-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)); } #opsSupportPanel .soc-ops-support-worker-modal-head > h3 { margin: 0; font-size: var(--ui-text-14, 14px); } #opsSupportPanel .soc-ops-support-worker-modal-foot { justify-content: flex-end; border-bottom: 0; border-top: 1px solid var(--ui-border-subtle, var(--soc-border)); } #opsSupportPanel .soc-ops-support-worker-modal-body { padding: 12px; overflow: auto; } @media (min-width: 1024px) { body.soc-desktop-shell #opsSupportPanel { max-height: calc(100dvh - 108px); border: 0; background: transparent; box-shadow: none; padding: 0 0 12px; } body.soc-desktop-shell #opsSupportPanel .panel-title-row { margin-bottom: 12px; } body.soc-desktop-shell #opsSupportPanel .soc-page-header-main { display: grid; gap: 4px; } #opsSupportPanel .soc-ops-support-layout { grid-template-columns: minmax(0, 1fr); align-items: start; } #opsSupportPanel .soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 2.24fr) minmax(360px, 392px); } #opsSupportPanel .soc-ops-support-sheet { position: sticky; top: 72px; max-height: calc(100dvh - 120px); max-width: 392px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-drawer { top: 72px; height: calc(100dvh - 72px); max-height: calc(100dvh - 72px); border-top: 0; border-right: 0; box-shadow: none; } } @media (max-width: 1279px) and (min-width: 1024px) { #opsSupportPanel .soc-ops-support-layout { grid-template-columns: minmax(0, 1fr); } #opsSupportPanel .soc-ops-support-sheet { position: fixed; top: 56px; right: 0; width: min(392px, 96vw); height: calc(100dvh - 56px); max-height: calc(100dvh - 56px); border-radius: 0; z-index: var(--ui-z-drawer); } } @media (max-width: 1023px) { #opsSupportPanel .soc-ops-support-toolbar { flex-direction: column; align-items: stretch; } #opsSupportPanel .soc-ops-support-toolbar-main-row, #opsSupportPanel .soc-ops-support-toolbar-system { width: 100%; justify-content: space-between; } #opsSupportPanel .soc-ops-support-calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #opsSupportPanel .worker-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } #opsSupportPanel .soc-ops-support-detail-kv, #opsSupportPanel .soc-ops-support-day-summary { grid-template-columns: 1fr; } #opsSupportPanel .soc-ops-support-sheet { max-height: none; } } /* ===== Desktop shell + density normalization (PC only) ===== */ @media (min-width: 1024px) { body.soc-desktop-shell { overflow: hidden; --soc-desktop-sidebar-width: 220px; --soc-desktop-sidebar-expanded-width: 220px; } body.soc-desktop-shell .soc-app-shell { width: 100vw; max-width: 100vw; min-height: 100dvh; height: 100dvh; } body.soc-desktop-shell .topbar { min-height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--soc-border-strong); } body.soc-desktop-shell #menuToggleBtn { display: none !important; } body.soc-desktop-shell .container.ds-page, body.soc-desktop-shell .container.admin-layout { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; min-height: calc(100dvh - 56px); height: calc(100dvh - 56px); max-height: calc(100dvh - 56px); padding: 0 20px 0 0 !important; gap: 0 !important; column-gap: 0 !important; grid-template-columns: var(--soc-desktop-sidebar-width) minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; align-items: stretch; overflow: hidden; overflow-x: hidden; background: linear-gradient(180deg, var(--soc-sidebar-bg-1) 0%, var(--soc-sidebar-bg-2) 100%) left top / var(--soc-desktop-sidebar-width) 100% no-repeat, linear-gradient(90deg, transparent calc(var(--soc-desktop-sidebar-width) - 1px), var(--soc-sidebar-divider) calc(var(--soc-desktop-sidebar-width) - 1px), var(--soc-sidebar-divider) var(--soc-desktop-sidebar-width), transparent var(--soc-desktop-sidebar-width)) left top / 100% 100% no-repeat, var(--soc-bg); } body.soc-desktop-shell .container.ds-page > :not(#menuSheetPanel), body.soc-desktop-shell .container.admin-layout > :not(#menuSheetPanel) { grid-column: 2; grid-row: 1; min-width: 0; max-width: 100%; height: calc(100dvh - 56px); max-height: calc(100dvh - 56px); margin-top: 0; margin-bottom: 0; align-self: stretch; box-sizing: border-box; padding-left: 22px; padding-right: 8px; padding-top: 20px; padding-bottom: 24px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } body.soc-desktop-shell :is( #dashboardPanel, #reportPanel, #reportsHubView, #accountPanel, #managerStatusPanel, #employeeScorePanel, #opsSupportPanel, #siteReportsPanel, #typeReportsPanel, #announcementPanel, #notificationPanel, #themePanel, #hqReminderPanel, #auditPanel, #slaPanel, #excelPanel, #googleSheetsPanel ) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0; } body.soc-desktop-shell.role-hq:not(.nav-open) #menuSheetPanel, body.soc-desktop-shell.role-field:not(.nav-open) #menuSheetPanel, body.soc-desktop-shell #menuSheetPanel, body.soc-desktop-shell .container.admin-layout #menuSheetPanel { display: flex !important; position: sticky !important; top: 0 !important; left: auto !important; right: auto !important; bottom: auto !important; grid-column: 1 !important; grid-row: 1 !important; align-self: stretch; width: var(--soc-desktop-sidebar-width) !important; min-width: var(--soc-desktop-sidebar-width) !important; max-width: var(--soc-desktop-sidebar-width) !important; min-height: calc(100dvh - 56px) !important; height: calc(100dvh - 56px) !important; max-height: calc(100dvh - 56px) !important; border-radius: 0 !important; border: 0 !important; border-right: 1px solid var(--soc-sidebar-divider) !important; background: linear-gradient(180deg, var(--soc-sidebar-bg-1) 0%, var(--soc-sidebar-bg-2) 100%) !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow: hidden !important; z-index: 4 !important; } body.soc-desktop-shell #menuSheetPanel > .ds-card-title { display: none !important; } body.soc-desktop-shell #menuSheetPanel .soc-sidebar-header { display: none !important; } body.soc-desktop-shell #menuSheetPanel .soc-sidebar-header-meta { display: grid; gap: 3px; min-width: 0; } body.soc-desktop-shell #menuSheetPanel .soc-sidebar-header-caption { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: 600; letter-spacing: 0.04em; color: var(--soc-sidebar-text-muted); text-transform: uppercase; } body.soc-desktop-shell #menuSheetPanel .soc-sidebar-role-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; max-width: 100%; padding: 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--soc-sidebar-divider) 88%, transparent); background: rgba(255, 255, 255, 0.06); color: var(--soc-sidebar-text-muted); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.soc-desktop-shell #menuSheetPanel .soc-sidebar-collapse-btn { display: none !important; } body.soc-desktop-shell #menuSheetPanel .mobile-menu-pager { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } body.soc-desktop-shell #menuSheetPanel #mobileTypeFlowTrack { flex: 1 1 auto; min-height: 0; height: 100%; } body.soc-desktop-shell #menuSheetPanel #mobileMenuRootPage { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 100%; padding: 12px 0 8px; gap: 8px; } body.soc-desktop-shell #menuSheetPanel #mobileAdminShortcutList { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; flex: 1 1 auto; min-height: 0; gap: 6px !important; margin: 0; padding: 0; overflow: visible; align-content: start; } body.soc-desktop-shell #menuSheetPanel .pc-sidebar-only { display: block !important; } body.soc-desktop-shell #menuSheetPanel #mobileAdminShortcutList > .soc-menu-group:not(.pc-sidebar-only) { display: none !important; } body.soc-desktop-shell #menuSheetPanel #mobileAdminShortcutList > .soc-menu-section:not(.pc-sidebar-only) { display: none !important; } body.soc-desktop-shell #menuSheetPanel [data-field-only="true"].hidden, body.soc-desktop-shell #menuSheetPanel [data-hq-only="true"].hidden, body.soc-desktop-shell #menuSheetPanel [data-field-only="true"][aria-hidden="true"], body.soc-desktop-shell #menuSheetPanel [data-hq-only="true"][aria-hidden="true"] { display: none !important; } body.soc-desktop-shell #menuSheetPanel .soc-menu-group { display: block; margin: 0; } body.soc-desktop-shell #menuSheetPanel .soc-menu-group + .soc-menu-group { margin-top: 12px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-section { display: grid; gap: 2px; margin: 0; } body.soc-desktop-shell #menuSheetPanel .soc-menu-section + .soc-menu-section { margin-top: 14px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-section-label { margin: 0; padding: 0 18px; color: var(--soc-sidebar-text-muted); font-size: var(--type-label-sm-size); font-weight: 700; line-height: var(--type-label-sm-line); letter-spacing: 0.04em; } body.soc-desktop-shell #menuSheetPanel .soc-menu-section-items { display: grid; gap: 2px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-group--pc-primary { margin-bottom: 2px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle { width: 100%; min-height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--soc-sidebar-text); display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; justify-items: start; gap: 12px; padding: 0 18px; text-align: left; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; } body.soc-desktop-shell #menuSheetPanel .soc-menu-group-label { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--soc-sidebar-text); text-align: left; white-space: nowrap; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; } body.soc-desktop-shell #menuSheetPanel .soc-menu-group-icon svg, body.soc-desktop-shell #menuSheetPanel .soc-menu-group-chevron svg, body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } body.soc-desktop-shell #menuSheetPanel .soc-menu-group-chevron { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.16s ease; } body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle.is-open .soc-menu-group-chevron { transform: rotate(180deg); } body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle.is-open { background: var(--soc-sidebar-row-hover); color: var(--soc-sidebar-active-text); } body.soc-desktop-shell #menuSheetPanel .soc-menu-group-items { display: grid; gap: 2px; padding: 0; margin-top: 2px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-group-items[hidden] { display: none !important; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item { width: 100%; min-height: 48px; border: 0; border-radius: 0; background: transparent; color: var(--soc-sidebar-text); display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; justify-items: start; gap: 12px; padding: 0 16px; text-align: left; position: relative; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0; background: transparent; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-label { min-width: 0; font-size: 13px; font-weight: 600; color: var(--soc-sidebar-text); text-align: left; white-space: nowrap; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-chevron { display: none !important; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item.is-active { color: var(--soc-sidebar-active-text); background: var(--soc-sidebar-active-bg); box-shadow: inset 4px 0 0 var(--soc-sidebar-active-rail); } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item.is-active::before { background: transparent; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-icon { color: var(--soc-sidebar-icon); } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item.is-active .soc-menu-sub-item-icon { color: var(--soc-sidebar-active-text); } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item.is-active .soc-menu-sub-item-label { color: var(--soc-sidebar-active-text); font-weight: 600; } body.soc-desktop-shell #menuSheetPanel .soc-menu-submenu-wrap { display: grid; gap: 2px; } body.soc-desktop-shell #menuSheetPanel .pc-sidebar-only .soc-menu-submenu-list { display: grid; gap: 0; max-height: 0; opacity: 0; overflow: hidden; padding: 2px 0 0 20px; transform: translateY(-4px); transition: max-height 160ms ease, opacity 160ms ease, transform 160ms ease; pointer-events: none; } body.soc-desktop-shell #menuSheetPanel .pc-sidebar-only .soc-menu-submenu-wrap:is(:hover, :focus-within, .is-active-scope) .soc-menu-submenu-list { max-height: 160px; opacity: 1; transform: translateY(0); pointer-events: auto; } body.soc-desktop-shell #menuSheetPanel .pc-sidebar-only .soc-menu-submenu-wrap--always-open .soc-menu-submenu-list { max-height: 160px; opacity: 1; transform: translateY(0); pointer-events: auto; padding-top: 4px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item--nested { min-height: 34px; grid-template-columns: 8px minmax(0, 1fr); gap: 8px; padding: 2px 14px 2px 10px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item--nested .soc-menu-submenu-bullet { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.52; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item--nested.is-active { box-shadow: none; } body.soc-desktop-shell #menuSheetPanel .mobile-nav-actions { position: sticky; bottom: 0; margin-top: auto; padding: 10px 0 8px; gap: 2px; background: linear-gradient(180deg, rgba(241, 245, 249, 0) 0%, var(--soc-sidebar-bg-2) 18%, var(--soc-sidebar-bg-2) 100%); border-top: 1px solid color-mix(in srgb, var(--soc-sidebar-divider) 82%, transparent); } body.soc-desktop-shell :is( .ds-card, .soc-filterbar, .soc-realtime-date-display, .soc-pc-side-panel, .soc-system-list-card, .soc-system-section-card, .soc-workspace-card, .soc-home-ticket-summary-item, .ds-input, .ds-select, .ds-textarea, input, select, textarea, .ds-btn-secondary, .ds-btn-ghost, table th, table td ) { border-color: var(--soc-border-strong); } body.soc-desktop-shell #dashboardPanel .soc-realtime-date-display, body.soc-desktop-shell #dashboardPanel .soc-filterbar { background: var(--soc-date-display-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-border-strong) 88%, transparent); } body.soc-desktop-shell.role-hq:not(.nav-open) #bottomTabNav.soc-bottom-tab, body.soc-desktop-shell.role-field:not(.nav-open) #bottomTabNav.soc-bottom-tab, body.soc-desktop-shell #bottomTabNav.soc-bottom-tab { display: none !important; visibility: hidden !important; pointer-events: none !important; } body.soc-desktop-shell .nav-backdrop { display: none !important; opacity: 0 !important; pointer-events: none !important; } body.soc-desktop-shell #dashboardPanel { max-width: none; border: 0; background: transparent; box-shadow: none; padding: 0; } body.soc-desktop-shell #dashboardPanel > .soc-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; } body.soc-desktop-shell #dashboardPanel .soc-page-header-main { display: grid; gap: 6px; min-width: 0; } body.soc-desktop-shell #dashboardPanel .soc-page-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; } body.soc-desktop-shell #dashboardPanel .soc-dashboard-workspace-tabs { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; } body.soc-desktop-shell #dashboardPanel .soc-dashboard-workspace-tab { min-height: 28px; padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #64748b; font-size: 13px; font-weight: 600; cursor: pointer; } body.soc-desktop-shell #dashboardPanel .soc-dashboard-workspace-tab.is-active { border-color: rgba(234, 88, 12, 0.72); color: #c2410c; } body.soc-desktop-shell #reportsView .soc-report-headerbar, body.soc-desktop-shell #reportsHubView { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; } body.soc-desktop-shell #reportsView .soc-report-headerbar { padding: 0 0 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.16); gap: 12px; } body.soc-desktop-shell #reportsView .soc-report-header-main, body.soc-desktop-shell #reportsHubView .soc-hub-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } body.soc-desktop-shell #reportsView .report-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } body.soc-desktop-shell #reportsView .soc-report-empty-card, body.soc-desktop-shell #reportsView .soc-report-browse, body.soc-desktop-shell #reportsView .soc-report-browse-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; } body.soc-desktop-shell #reportsView .soc-report-empty-actions, body.soc-desktop-shell #reportsView .soc-report-browse-actions { gap: 10px; } body.soc-desktop-shell #reportsView { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 16px; } body.soc-desktop-shell #reportsView .soc-report-headerbar { padding: 0 0 8px; border-bottom: 0; } body.soc-desktop-shell #reportsView .soc-report-header-main { display: grid; justify-items: start; gap: 6px; } body.soc-desktop-shell #reportsView .soc-report-actionbar { border: 1px solid var(--ui-border-subtle); border-radius: 12px; background: var(--ui-bg-surface); box-shadow: none; } body.soc-desktop-shell #reportsView .soc-report-actionbar-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; } body.soc-desktop-shell #reportsView .soc-report-actionbar-copy { display: grid; gap: 4px; min-width: 0; } body.soc-desktop-shell #reportsView .soc-report-actionbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; flex-shrink: 0; } body.soc-desktop-shell #reportsView .soc-report-actionbar-actions .ds-btn, body.soc-desktop-shell #reportsView .soc-report-actionbar-actions .soc-export-menu-wrap, body.soc-desktop-shell #reportsView .soc-report-actionbar-actions .soc-export-menu-wrap > .ds-btn { min-width: 0; } body.soc-desktop-shell #reportBuilderBackdrop { display: none !important; } body.soc-desktop-shell #reportBuilderSheet, body.soc-desktop-shell #reportBuilderSheet.hidden { display: block !important; position: static; inset: auto; background: transparent; pointer-events: auto; } body.soc-desktop-shell #reportBuilderSheet .soc-bottom-sheet-panel.soc-report-builder-panel { width: 100%; min-height: 0; max-height: none; height: auto; padding: 20px 24px 24px; border: 1px solid var(--ui-border-subtle); border-radius: 12px; background: var(--ui-bg-surface); transform: none !important; box-shadow: none; } body.soc-desktop-shell #reportBuilderSheet .soc-sheet-head { margin-bottom: 12px; } body.soc-desktop-shell #closeReportBuilderBtn, body.soc-desktop-shell #reportBuilderHandle, body.soc-desktop-shell #reportBuilderStepper, body.soc-desktop-shell #reportBuilderSheet .soc-report-builder-footer { display: none !important; } body.soc-desktop-shell #reportBuilderSheet .soc-report-builder-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; overflow: visible; max-height: none; padding: 0; } body.soc-desktop-shell #reportBuilderSheet .soc-report-builder-step[data-builder-step="3"] { grid-column: 1 / -1; } body.soc-desktop-shell #reportBuilderSheet .soc-report-builder-step { padding: 16px; gap: 10px; } body.soc-desktop-shell #reportBuilderSheet .soc-report-builder-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } body.soc-desktop-shell #reportPreviewScroller { display: grid; align-content: start; gap: 16px; } body.soc-desktop-shell #reportsHubView .soc-hub-header { position: static; border-bottom: 1px solid rgba(148, 163, 184, 0.16); padding: 0 0 16px; margin-bottom: 12px; background: transparent; } body.soc-desktop-shell #reportsHubView .soc-hub-header-left { display: grid; gap: 4px; } body.soc-desktop-shell #reportsHubView .soc-hub-toolbar { justify-content: flex-start; margin-bottom: 16px; } body.soc-desktop-shell #reportsHubView .soc-hub-preview-scroller { padding-bottom: 0; gap: 16px; } body.soc-desktop-shell #reportsHubView .soc-hub-section-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; } body.soc-desktop-shell #reportsHubView .soc-hub-section-card::before { display: none; } body.soc-desktop-shell :is( #slaPanel, #auditPanel, #accountPanel, #managerStatusPanel, #employeeScorePanel, #announcementPanel, #notificationPanel, #hqReminderPanel ) { max-width: none; border: 0; background: transparent; box-shadow: none; padding: 0; } body.soc-desktop-shell :is( #slaPanel > .soc-sla-header-bar, #auditPanel > .soc-audit-header-bar, #accountPanel > .panel-title-row, #managerStatusPanel > .panel-title-row, #employeeScorePanel > .panel-title-row, #announcementPanel > .soc-announcement-header, #notificationPanel > .notification-panel-head, #hqReminderPanel > .panel-title-row ) { margin-bottom: 16px; padding: 0 0 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.16); background: transparent; box-shadow: none; position: static; } body.soc-desktop-shell #slaPanel .soc-sla-header-actions, body.soc-desktop-shell #auditPanel .soc-audit-header-actions, body.soc-desktop-shell #accountPanel .panel-actions, body.soc-desktop-shell #managerStatusPanel .panel-actions, body.soc-desktop-shell #notificationPanel .notification-panel-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; } body.soc-desktop-shell #slaPanel .soc-sla-workspace-grid-flat, body.soc-desktop-shell #auditPanel .soc-audit-grid-flat, body.soc-desktop-shell #announcementPanel .soc-announcement-workspace, body.soc-desktop-shell #managerStatusPanel .soc-manager-status-workspace, body.soc-desktop-shell #accountPanel .soc-manage-workspace-grid { gap: 16px; } body.soc-desktop-shell #slaPanel .soc-sla-workspace-grid-flat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; } body.soc-desktop-shell #auditPanel .soc-audit-grid-flat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; } body.soc-desktop-shell #slaPanel .soc-sla-workspace-main, body.soc-desktop-shell #auditPanel .soc-audit-results, body.soc-desktop-shell #accountPanel .soc-manage-workspace-main, body.soc-desktop-shell #managerStatusPanel .soc-manager-status-shell, body.soc-desktop-shell #hqReminderPanel .soc-system-section-flat, body.soc-desktop-shell #announcementPanel .soc-announcement-list-card, body.soc-desktop-shell #notificationPanel .soc-system-section-flat { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; } body.soc-desktop-shell :is( #slaPanel .soc-sla-detail-panel, #auditPanel .soc-audit-detail-panel, #accountPanel .soc-manage-workspace-side, #managerStatusPanel .soc-manage-workspace-side, #announcementPanel .soc-announcement-detail-card ) { border: 0; border-left: 1px solid rgba(148, 163, 184, 0.18); border-radius: 0; background: transparent; box-shadow: none; padding: 0 0 0 16px; } body.soc-desktop-shell #notificationPanel .soc-system-list-card { margin-top: 0; } body.soc-desktop-shell #announcementPanel .soc-announcement-detail-card { top: 0; } body.soc-desktop-shell #announcementPanel .soc-announcement-detail-body { border: 0; border-radius: 0; background: transparent; padding: 0; min-height: 0; } body.soc-desktop-shell #announcementPanel #announcementListWrap { margin-top: 0; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-builder { gap: 20px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-content { grid-template-columns: minmax(0, 1fr); gap: 20px; } body.soc-desktop-shell #managerStatusPanel .soc-manage-filter-bar { margin: 0 0 12px; } body.soc-desktop-shell #auditPanel .audit-list, body.soc-desktop-shell #slaPanel .sla-overview-list { padding: 0; min-height: 0; } body.soc-desktop-shell #slaPanel .soc-sla-preview-scroller, body.soc-desktop-shell #auditPanel .soc-audit-grid-flat { padding-bottom: 0; } body.soc-desktop-shell .soc-workspace-drawer { top: 72px; bottom: 0; height: calc(100dvh - 72px); border-top: 0; border-right: 0; box-shadow: none; } body.soc-desktop-shell #dashboardPanel, body.soc-desktop-shell #dashboardPanel :is(p, li, label, button, input, select, textarea, .meta) { font-size: 13px; line-height: 1.4; } body.soc-desktop-shell #homeView .soc-block, body.soc-desktop-shell #homeView .soc-kpi-card, body.soc-desktop-shell #homeView .soc-summary-card, body.soc-desktop-shell #alertsView .incident-card, body.soc-desktop-shell #ticketsView .ticket-card { border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; } body.soc-desktop-shell #homeView .soc-block:hover, body.soc-desktop-shell #alertsView .incident-card:hover, body.soc-desktop-shell #ticketsView .ticket-card:hover { transform: none; box-shadow: none; } body.soc-desktop-shell :is( #homeView .soc-kpi-label, #homeView .soc-kpi-value, #homeView .soc-block-value, #homeView .soc-summary-value, #alertsView .incident-title, #alertsView .incident-type, #ticketsView .ticket-title ) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.soc-desktop-shell #homeView { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; } body.soc-desktop-shell #homeView > #homeLoadingState, body.soc-desktop-shell #homeView > #homeErrorState, body.soc-desktop-shell #homeView > #homeEmptyState, body.soc-desktop-shell #homeView > .soc-home-row { grid-column: 1 / -1; } body.soc-desktop-shell #homeView > .soc-home-row--briefing, body.soc-desktop-shell #homeView > .soc-home-row--analysis, body.soc-desktop-shell #homeView > .soc-home-row--activity { grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr); align-items: start; gap: 16px; } body.soc-desktop-shell #homeView > .soc-home-row--kpis .soc-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } body.soc-desktop-shell #homeView > .soc-home-row--analysis #homeTrend7d, body.soc-desktop-shell #homeView > .soc-home-row--activity #homeTicketBlock { min-height: 100%; } body.soc-desktop-shell #homeView > .soc-home-row--analysis .soc-home-support-stack, body.soc-desktop-shell #homeView > .soc-home-row--activity #homeRecentBlock { align-content: start; gap: 12px; } body.soc-desktop-shell #homeView > .soc-home-row--briefing #homeHeroStatus { max-width: 100%; } body.soc-desktop-shell #homeView > .soc-home-row .soc-block, body.soc-desktop-shell #homeView > .soc-home-row .soc-kpi-card { border: 1px solid var(--soc-border); border-radius: var(--soc-radius-card); background: var(--soc-block-bg); padding: 18px 20px; box-shadow: none; } body.soc-desktop-shell #homeView > .soc-home-row--briefing, body.soc-desktop-shell #homeView > .soc-home-row--analysis, body.soc-desktop-shell #homeView > .soc-home-row--activity { grid-template-columns: minmax(0, 1.95fr) minmax(300px, 1fr); gap: 18px; } body.soc-desktop-shell #homeView > .soc-home-row--briefing #homeWeeklyBriefing { gap: 12px; padding: 20px 22px 18px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-block-head { align-items: flex-start; gap: 12px; margin-bottom: 0; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-briefing-title { gap: 6px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-ratio-pill { min-height: 28px; padding: 5px 10px; font-size: 12px; } body.soc-desktop-shell #homeWeeklyBriefing #homeWeeklySummaryLine { margin: 0; min-height: 0; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); color: var(--ui-text-secondary); } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 14px 16px; border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-panel-bg); } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-bar { display: none; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-label { order: 1; margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ui-text-secondary); } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-value { order: 2; margin: 0; font-size: 28px; line-height: 1.05; letter-spacing: -0.03em; color: var(--ui-text-primary); } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-wow { order: 3; margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; white-space: normal; } body.soc-desktop-shell #homeWeeklyBriefing .soc-briefing-actions { margin-top: 2px; justify-content: flex-start; } body.soc-desktop-shell #homeOpenWeeklyBtn { margin-top: 0; } body.soc-desktop-shell #homeHeroStatus { gap: 8px; padding: 18px 20px; background: var(--soc-panel-bg); } body.soc-desktop-shell #homeHeroStatus .soc-hero-status-head { align-items: center; } body.soc-desktop-shell #homeHeroStatus h3 { font-size: var(--type-section-md-size); line-height: var(--type-section-md-line); } body.soc-desktop-shell #homeHeroStatus .soc-hero-comment { margin: 0; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); } body.soc-desktop-shell #homeView > .soc-home-row--kpis .soc-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } body.soc-desktop-shell #homeView > .soc-home-row--kpis .soc-kpi-card { min-height: 132px; padding: 18px 20px 16px; gap: 8px; background: var(--soc-kpi-bg); } body.soc-desktop-shell #homeView .soc-kpi-label, body.soc-desktop-shell #homeView .soc-kpi-subtext { white-space: normal; overflow: visible; text-overflow: clip; } body.soc-desktop-shell #homeView .soc-kpi-value { font-size: 34px; line-height: 1.02; } body.soc-desktop-shell #homeView .soc-kpi-trend { display: none; } body.soc-desktop-shell #homeTrend7d { padding: 22px 24px 18px; } body.soc-desktop-shell #homeTrend7d .soc-block-head { margin-bottom: 4px; } body.soc-desktop-shell #homeTrend7d .soc-sparkline-lg { height: 156px; margin-top: 12px; } body.soc-desktop-shell #homeTrend7d .meta { margin-top: 10px; } body.soc-desktop-shell #homeView > .soc-home-row--analysis .soc-home-support-stack, body.soc-desktop-shell #homeView > .soc-home-row--activity #homeRecentBlock { gap: 10px; } body.soc-desktop-shell #homeRiskSignals, body.soc-desktop-shell #homeActionNeededBlock, body.soc-desktop-shell #homeRecentBlock { padding: 16px 18px; } body.soc-desktop-shell #homeRiskSignals > h3, body.soc-desktop-shell #homeActionNeededBlock > h3, body.soc-desktop-shell #homeRecentBlock > h3 { margin: 0 0 8px; } body.soc-desktop-shell #homeRiskSignals .soc-insight-item, body.soc-desktop-shell #homeActionNeededBlock .soc-mini-row, body.soc-desktop-shell #homeRecentBlock .soc-mini-row { padding: 10px 12px; border-radius: 10px; } body.soc-desktop-shell #homeTicketBlock { padding: 20px 22px 18px; } body.soc-desktop-shell #homeTicketBlock .soc-ticket-mini-dist { margin: 10px 0 12px; } body.soc-desktop-shell #homeTicketBlock .soc-home-ticket-summary-item { min-height: 36px; padding: 7px 10px; } body.soc-desktop-shell #homeRecentBlock .soc-list-mini { gap: 8px; } body.soc-desktop-shell #analyticsView { display: grid; gap: 10px; align-content: start; } body.soc-desktop-shell #analyticsView .soc-analytics-header { padding: 0; border: 0; background: transparent; gap: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-header-right { gap: 8px; } body.soc-desktop-shell #alertsView .soc-alerts-feed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 8px; } body.soc-desktop-shell #alertsView .soc-alerts-feed-head h3 { margin: 0; } body.soc-desktop-shell #ticketsView .soc-ticket-feed-summary { margin: 8px 0 10px; } body.soc-desktop-shell #analyticsContentWrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; } body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-hero { grid-column: 1 / -1; } body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-kpi-grid { grid-column: 1 / -1; gap: 8px; } body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-trend-grid { grid-column: 1 / span 8; gap: 8px; } body.soc-desktop-shell #analyticsContentWrap > #analyticsHeatmapBlock { grid-column: 9 / span 4; } body.soc-desktop-shell #analyticsContentWrap > #analyticsStoreComparisonBlock { grid-column: 1 / -1; } } @media (min-width: 1024px) and (max-width: 1279.98px) { body.soc-desktop-shell { --soc-desktop-sidebar-width: 220px; --soc-desktop-sidebar-expanded-width: 220px; } body.soc-desktop-shell #menuSheetPanel { width: var(--soc-desktop-sidebar-width) !important; min-width: var(--soc-desktop-sidebar-width) !important; max-width: var(--soc-desktop-sidebar-width) !important; } body.soc-desktop-shell #menuSheetPanel .soc-sidebar-header-meta, body.soc-desktop-shell #menuSheetPanel .soc-menu-group-label, body.soc-desktop-shell #menuSheetPanel .soc-menu-group-chevron, body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-label { display: block !important; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-label, body.soc-desktop-shell #menuSheetPanel .soc-menu-group-label, body.soc-desktop-shell #menuSheetPanel .soc-menu-section-label { white-space: nowrap; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; } } @media (min-width: 1280px) { body.soc-desktop-shell.soc-sidebar-collapsed { --soc-desktop-sidebar-width: 220px; --soc-desktop-sidebar-expanded-width: 220px; } } @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle:hover, body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item:hover { background: var(--soc-sidebar-row-hover); } } /* ===== PC Incident/Ticket feed stabilization (1440~1512 safe) ===== */ @media (min-width: 1024px) { #alertsView { --soc-feed-cols-alerts: 88px 150px 88px 100px minmax(240px, 1fr) 148px 220px; --soc-feed-col-gap-compact: 10px; } #ticketsView { --soc-feed-cols-tickets: 84px 132px 64px 96px minmax(232px, 1fr) 116px 228px; --soc-feed-col-gap-compact: 6px; } #alertsView .soc-pc-two-col-shell, #ticketsView .soc-pc-two-col-shell { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 360px); gap: 12px; align-items: start; min-width: 0; } #alertsView .soc-pc-list-main, #ticketsView .soc-pc-list-main { min-width: 0; overflow-x: hidden; overflow-y: visible; padding-bottom: 0; } #alertsView .soc-pc-side-panel, #ticketsView .soc-pc-side-panel { position: sticky !important; inset: auto !important; top: 72px !important; min-width: 0; width: clamp(300px, 22vw, 360px); max-width: clamp(300px, 22vw, 360px); max-height: calc(100dvh - 112px); overflow: hidden; z-index: 1; } #alertsView .soc-pc-list-header, #ticketsView .soc-pc-list-header { display: grid; column-gap: var(--soc-feed-col-gap-compact); align-items: center; min-height: 40px; padding-block: 6px; padding-inline: 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; margin: 0 0 8px; background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); overflow: hidden; } #alertsView .soc-pc-list-header { grid-template-columns: var(--soc-feed-cols-alerts); } #ticketsView .soc-pc-list-header { grid-template-columns: var(--soc-feed-cols-tickets); } #alertsView .soc-pc-list-header > span, #ticketsView .soc-pc-list-header > span { min-width: 0; font-size: 12px; font-weight: 600; color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .incident-list, #ticketsView .ticket-list { display: grid; gap: 0; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; overflow: hidden; background: var(--ui-bg-surface, var(--soc-card-bg)); } #alertsView .incident-card, #alertsView .incident-ticket-card { display: grid; grid-template-columns: var(--soc-feed-cols-alerts); align-items: center; column-gap: var(--soc-feed-col-gap-compact); row-gap: 0; min-height: 76px; padding-block: 8px; padding-inline: 16px; border: 0; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 0; box-shadow: none; overflow: hidden; } #alertsView .incident-list > .incident-card:last-child { border-bottom: 0; } #alertsView .incident-card::before, #ticketsView .ticket-card::before { display: none; } #alertsView .incident-card-head, #alertsView .incident-card-badges, #ticketsView .ticket-card-head, #ticketsView .ticket-row-summary { display: contents; } #alertsView .incident-head-actions { display: none !important; } #alertsView .incident-ticket-card .incident-type { display: inline-flex; align-items: center; gap: 6px; } #ticketsView .ticket-card { display: grid; grid-template-columns: var(--soc-feed-cols-tickets); align-items: center; min-height: 76px; column-gap: var(--soc-feed-col-gap-compact); row-gap: 0; padding-block: 8px; padding-inline: 16px; border: 0; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 0; box-shadow: none; overflow: hidden; } #ticketsView .ticket-list > .ticket-card:last-child { border-bottom: 0; } #alertsView .incident-status { grid-column: 1; grid-row: 1; justify-self: start; } #alertsView .incident-type { grid-column: 2; grid-row: 1; } #alertsView .incident-severity { grid-column: 3; grid-row: 1; } #alertsView .incident-location { grid-column: 4; grid-row: 1; } #alertsView .incident-title { grid-column: 5; grid-row: 1; justify-self: start; text-align: left; } #alertsView .incident-created-at { grid-column: 6; grid-row: 1; } #alertsView .incident-comment-preview, #alertsView .incident-ticket-description { grid-column: 7; grid-row: 1; } #alertsView .incident-actions { display: none !important; } #alertsView .incident-head-actions, #alertsView .incident-more-btn, #alertsView .incident-more-menu { display: none !important; } #ticketsView .ticket-head-pills { grid-column: 1; grid-row: 1; justify-content: center; justify-self: center; } #ticketsView .ticket-row-summary-type { display: inline-flex; align-items: center; gap: 6px; grid-column: 2; grid-row: 1; justify-self: center; text-align: center; } #ticketsView .ticket-row-summary-requested { grid-column: 3; grid-row: 1; justify-self: center; text-align: center; font-weight: 700; color: var(--ui-text-secondary, var(--soc-text-sub)); } #ticketsView .ticket-row-summary-requested.is-highlight { color: var(--ui-accent, #ff8400); font-weight: 700; } #ticketsView .ticket-row-summary-requested.is-empty { color: var(--ui-text-secondary, var(--soc-text-sub)); font-weight: 500; } #ticketsView .ticket-row-summary-site { grid-column: 4; grid-row: 1; justify-self: center; text-align: center; } #ticketsView .ticket-row-summary-updated { grid-column: 6; grid-row: 1; justify-self: center; text-align: center; } #ticketsView .ticket-row-summary-comment { grid-column: 7; grid-row: 1; justify-self: center; text-align: center; } #ticketsView .ticket-title { grid-column: 5; grid-row: 1; justify-self: center; text-align: center; } #ticketsView .ticket-requested-count-badge { flex: 0 0 auto; max-width: 92px; overflow: hidden; text-overflow: ellipsis; } #alertsView .incident-title, #alertsView .incident-type, #alertsView .incident-location, #alertsView .incident-created-at, #ticketsView .ticket-title, #ticketsView .ticket-row-summary-item, #ticketsView .ticket-status-pill, #ticketsView .ticket-head-pills { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .incident-title { justify-self: start; text-align: left; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; } #ticketsView .ticket-title { justify-self: center; text-align: center; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; } #alertsView .incident-type, #alertsView .incident-location, #alertsView .incident-created-at, #ticketsView .ticket-row-summary-item { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.35; } #alertsView .incident-created-at, #ticketsView .ticket-row-summary-updated { font-size: 13px; font-weight: 500; color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; } #alertsView .incident-comment-preview, #alertsView .incident-ticket-description, #ticketsView .ticket-row-summary-comment { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.3; max-height: calc(1.3em * 2); margin: 0; font-size: 13px; font-weight: 400; color: var(--ui-text-secondary, var(--soc-text-sub)); } #ticketsView .ticket-row-summary-comment.is-support-worker-state { display: flex; align-items: center; justify-content: center; justify-self: center; -webkit-line-clamp: unset; max-height: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ticketsView .ticket-support-worker-state-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; border: 1px solid var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); color: var(--ui-text-secondary, var(--soc-text-sub)); } #ticketsView .ticket-support-worker-state-badge.is-confirmed { background: #eaf7ee; border-color: #34a853; color: #1e6b35; } #ticketsView .ticket-support-worker-state-badge.is-unconfirmed { background: #feecec; border-color: #dc2626; color: #991b1b; } #alertsView .incident-ticket-description.is-support-worker-state { display: flex; align-items: center; justify-content: flex-start; -webkit-line-clamp: unset; max-height: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .incident-ticket-description.is-requested-count { color: var(--ui-text-secondary, var(--soc-text-sub)); font-weight: 600; } #alertsView .incident-ticket-description .ticket-support-worker-state-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; border: 1px solid var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); color: var(--ui-text-secondary, var(--soc-text-sub)); } #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-confirmed { background: #eaf7ee; border-color: #34a853; color: #1e6b35; } #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-unconfirmed { background: #feecec; border-color: #dc2626; color: #991b1b; } #alertsView .incident-actions { grid-column: 8; display: flex; align-items: center; justify-content: flex-end; align-self: center; justify-self: end; width: 92px; min-width: 92px; max-width: 92px; margin: 0; padding-top: 0; gap: 0; overflow: hidden; } #alertsView .incident-status, #alertsView .incident-severity, #ticketsView .ticket-status-pill, #ticketsView .ticket-requested-count-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ticketsView .ticket-full-content-actions, #ticketsView .ticket-actions-row { display: none !important; } #ticketsView .ticket-actions-row .ticket-status-select { min-width: 64px; max-width: 72px; } #ticketsView .ticket-kv-list, #ticketsView .ticket-kv-row, #ticketsView .ticket-comments, #ticketsView .ticket-attachments, #ticketsView .ticket-comment-form, #ticketsView .ticket-attachment-form, #ticketsView .ticket-meta-line, #ticketsView .ticket-action-row.ticket-extra { display: none !important; } #alertsView .soc-pc-side-panel, #ticketsView .soc-pc-side-panel { display: grid; grid-template-rows: auto auto auto auto minmax(220px, 1fr) auto auto; gap: 10px; padding: 12px; border-radius: 12px; border-color: var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface, var(--soc-card-bg)); } #alertsView .soc-pc-side-panel-kpi, #ticketsView .soc-pc-side-panel-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; } #alertsView .soc-pc-side-panel-kpi-item, #ticketsView .soc-pc-side-panel-kpi-item { display: grid; gap: 4px; min-width: 0; padding: 8px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); } #alertsView .soc-pc-side-panel-kpi-label, #ticketsView .soc-pc-side-panel-kpi-label { margin: 0; font-size: var(--ui-text-11, 11px); color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .soc-pc-side-panel-kpi-value, #ticketsView .soc-pc-side-panel-kpi-value { margin: 0; font-size: var(--ui-text-13, 13px); font-weight: 600; color: var(--ui-text-primary, var(--soc-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .soc-pc-side-panel-head h4, #ticketsView .soc-pc-side-panel-head h4 { font-size: var(--ui-text-16, 16px); font-weight: 600; } #alertsView .soc-pc-side-panel .meta, #ticketsView .soc-pc-side-panel .meta { font-size: var(--ui-text-12, 12px); line-height: 1.35; } #alertsView .soc-pc-side-panel-section, #ticketsView .soc-pc-side-panel-section { display: grid; gap: 6px; min-width: 0; } #alertsView .soc-pc-side-panel-section-title, #ticketsView .soc-pc-side-panel-section-title { margin: 0; font-size: var(--ui-text-12, 12px); font-weight: 600; color: var(--ui-text-secondary, var(--soc-text-sub)); } #alertsView .soc-pc-side-panel-summary, #ticketsView .soc-pc-side-panel-summary { max-height: 148px; padding: 10px; border-radius: 10px; } #alertsView .soc-pc-side-panel-thread, #ticketsView .soc-pc-side-panel-thread { min-height: 220px; border-radius: 10px; padding: 10px; } #alertsView .soc-pc-side-panel-target, #ticketsView .soc-pc-side-panel-target { grid-column: 1 / -1; margin: 0; font-size: var(--ui-text-12, 12px); color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .soc-pc-side-panel-form, #ticketsView .soc-pc-side-panel-form { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)); } #alertsView .soc-pc-side-panel-input, #ticketsView .soc-pc-side-panel-input { min-height: 36px; } #alertsView .soc-pc-side-panel-submit, #ticketsView .soc-pc-side-panel-submit { min-height: 32px; } #alertsView .incident-type, #ticketsView .ticket-row-summary-type { display: inline-flex; align-items: center; gap: 8px; } #alertsView .incident-location { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .incident-type-badge, #alertsView .incident-urgent-badge, #alertsView .incident-category-badge, #alertsView .incident-attachments, #alertsView .instruction-list, #alertsView .instruction-form { display: none !important; } #alertsView .soc-pc-incident-header { grid-template-columns: var(--soc-feed-cols-alerts); column-gap: var(--soc-feed-col-gap-compact); min-height: 40px; padding-inline: 16px; } #ticketsView .soc-pc-ticket-header { grid-template-columns: var(--soc-feed-cols-tickets); column-gap: var(--soc-feed-col-gap-compact); min-height: 40px; padding-inline: 16px; } #ticketsView .soc-pc-ticket-header > span:nth-child(3) { justify-self: center; text-align: center; } #ticketsView .soc-pc-ticket-header > span:nth-child(1), #ticketsView .soc-pc-ticket-header > span:nth-child(2), #ticketsView .soc-pc-ticket-header > span:nth-child(4), #ticketsView .soc-pc-ticket-header > span:nth-child(5), #ticketsView .soc-pc-ticket-header > span:nth-child(6), #ticketsView .soc-pc-ticket-header > span:nth-child(7) { justify-self: center; text-align: center; } } /* ===== Tickets PC single-container layout (remove nested inner box) ===== */ @media (min-width: 1024px) { #ticketsView .soc-pc-list-main { padding-inline: 22px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #ticketsView .soc-pc-list-main > .help { margin: 0 0 10px; padding: 0; } #ticketsView .soc-pc-list-header { border: 0 !important; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 0 0 10px !important; min-height: 0; } #ticketsView .ticket-list { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; margin: 0 !important; } #ticketsView .ticket-list > .ticket-card { border-radius: 0 !important; box-shadow: none !important; border-inline: 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; } #ticketsView .ticket-list > .ticket-card:last-child { border-bottom: 0 !important; } #ticketsView .ticket-card { background: transparent !important; border-radius: 0 !important; padding-inline: 0 !important; } #ticketsView .ticket-card:hover, #ticketsView .ticket-card:active { background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)) !important; } } /* ===== Desktop feed responsive lock (>=1024): keep one grid system ===== */ @media (min-width: 1024px) { body.soc-desktop-shell #alertsView { --soc-feed-cols-alerts: 88px 150px 88px 100px minmax(260px, 1fr) 152px 220px; --soc-feed-col-gap-compact: 8px; } body.soc-desktop-shell #ticketsView { --soc-feed-cols-tickets: 84px 132px 92px 100px minmax(256px, 1fr) 132px 226px; --soc-feed-col-gap-compact: 8px; } body.soc-desktop-shell #alertsView .soc-pc-list-header, body.soc-desktop-shell #ticketsView .soc-pc-list-header { display: grid !important; align-items: center; column-gap: var(--soc-feed-col-gap-compact); min-height: 40px; padding-inline: 16px; border-radius: 10px; overflow: hidden; } body.soc-desktop-shell #alertsView .soc-pc-list-header { grid-template-columns: var(--soc-feed-cols-alerts) !important; } body.soc-desktop-shell #ticketsView .soc-pc-list-header { grid-template-columns: var(--soc-feed-cols-tickets) !important; } body.soc-desktop-shell #alertsView .incident-list, body.soc-desktop-shell #ticketsView .ticket-list { display: grid !important; gap: 0 !important; overflow: hidden; } body.soc-desktop-shell #alertsView .incident-card, body.soc-desktop-shell #alertsView .incident-ticket-card { display: grid !important; grid-template-columns: var(--soc-feed-cols-alerts) !important; align-items: center; column-gap: var(--soc-feed-col-gap-compact); row-gap: 0; min-height: 76px; padding-block: 8px; padding-inline: 16px; border-radius: 0 !important; box-shadow: none !important; } body.soc-desktop-shell #ticketsView .ticket-card { display: grid !important; grid-template-columns: var(--soc-feed-cols-tickets) !important; align-items: center; column-gap: var(--soc-feed-col-gap-compact); row-gap: 0; min-height: 76px; padding-block: 8px; padding-inline: 16px !important; border-radius: 0 !important; box-shadow: none !important; } body.soc-desktop-shell #alertsView .incident-card-head, body.soc-desktop-shell #alertsView .incident-card-badges, body.soc-desktop-shell #ticketsView .ticket-card-head, body.soc-desktop-shell #ticketsView .ticket-row-summary { display: contents !important; } body.soc-desktop-shell #alertsView .incident-mobile-meta, body.soc-desktop-shell #alertsView .incident-mobile-comment, body.soc-desktop-shell #alertsView .incident-mobile-eci, body.soc-desktop-shell #ticketsView .ticket-mobile-meta, body.soc-desktop-shell #ticketsView .ticket-mobile-comment, body.soc-desktop-shell #ticketsView .ticket-kv-row { display: none !important; } body.soc-desktop-shell #alertsView .incident-title, body.soc-desktop-shell #ticketsView .ticket-title { justify-self: start !important; text-align: left !important; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.soc-desktop-shell #alertsView .incident-type, body.soc-desktop-shell #alertsView .incident-severity, body.soc-desktop-shell #alertsView .incident-location, body.soc-desktop-shell #alertsView .incident-created-at, body.soc-desktop-shell #ticketsView .ticket-row-summary-item, body.soc-desktop-shell #ticketsView .ticket-head-pills, body.soc-desktop-shell #ticketsView .ticket-status-pill { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.soc-desktop-shell #ticketsView .ticket-row-summary-type, body.soc-desktop-shell #ticketsView .ticket-row-summary-requested, body.soc-desktop-shell #ticketsView .ticket-row-summary-site, body.soc-desktop-shell #ticketsView .ticket-row-summary-updated { justify-self: start !important; text-align: left !important; } body.soc-desktop-shell #alertsView .incident-comment-preview, body.soc-desktop-shell #alertsView .incident-ticket-description, body.soc-desktop-shell #ticketsView .ticket-row-summary-comment { min-width: 0; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.32; max-height: calc(1.32em * 2); } body.soc-desktop-shell #ticketsView .ticket-row-summary-comment.is-support-worker-state { display: inline-flex; align-items: center; justify-content: flex-start; -webkit-line-clamp: unset; max-height: none; white-space: nowrap; } body.soc-desktop-shell #alertsView .incident-actions, body.soc-desktop-shell #ticketsView .ticket-full-content-actions, body.soc-desktop-shell #ticketsView .ticket-actions-row { width: 80px !important; min-width: 80px !important; max-width: 80px !important; flex-shrink: 0; } body.soc-desktop-shell #alertsView .incident-actions, body.soc-desktop-shell #alertsView .incident-head-actions { display: none !important; } } @media (min-width: 1200px) and (max-width: 1399.98px) { body.soc-desktop-shell #alertsView { --soc-feed-cols-alerts: 84px 132px 80px 108px minmax(210px, 1fr) 128px 168px; --soc-feed-col-gap-compact: 7px; } body.soc-desktop-shell #ticketsView { --soc-feed-cols-tickets: 80px 122px 88px 86px minmax(216px, 1fr) 120px 180px; --soc-feed-col-gap-compact: 7px; } body.soc-desktop-shell #alertsView .incident-comment-preview, body.soc-desktop-shell #alertsView .incident-ticket-description, body.soc-desktop-shell #ticketsView .ticket-row-summary-comment { -webkit-line-clamp: 1; max-height: 1.32em; } } @media (min-width: 1024px) and (max-width: 1199.98px) { body.soc-desktop-shell #alertsView { --soc-feed-cols-alerts: 82px 126px 72px 0px minmax(220px, 1fr) 118px 152px; --soc-feed-col-gap-compact: 6px; } body.soc-desktop-shell #ticketsView { --soc-feed-cols-tickets: 78px 114px 84px 0px minmax(220px, 1fr) 112px 156px; --soc-feed-col-gap-compact: 6px; } body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(4), body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(4), body.soc-desktop-shell #alertsView .incident-location, body.soc-desktop-shell #ticketsView .ticket-row-summary-site { display: none !important; } body.soc-desktop-shell #alertsView .soc-pc-list-header, body.soc-desktop-shell #ticketsView .soc-pc-list-header, body.soc-desktop-shell #alertsView .incident-card, body.soc-desktop-shell #alertsView .incident-ticket-card, body.soc-desktop-shell #ticketsView .ticket-card { padding-inline: 12px !important; } body.soc-desktop-shell #alertsView .incident-comment-preview, body.soc-desktop-shell #alertsView .incident-ticket-description, body.soc-desktop-shell #ticketsView .ticket-row-summary-comment { -webkit-line-clamp: 1; max-height: 1.32em; } } /* ===== SOC PC layout hotfix (2026-03-01) ===== */ @media (min-width: 1024px) { body.soc-desktop-shell #homeView, body.soc-desktop-shell #ticketsView, body.soc-desktop-shell #homeView > *, body.soc-desktop-shell #ticketsView > *, body.soc-desktop-shell #homeView .soc-block, body.soc-desktop-shell #ticketsView .soc-block { width: 100% !important; max-width: none !important; min-width: 0; } body.soc-desktop-shell #alertsView .soc-pc-two-col-shell, body.soc-desktop-shell #ticketsView .soc-pc-two-col-shell { grid-template-columns: minmax(0, 1fr) 336px !important; gap: 14px !important; align-items: start; } body.soc-desktop-shell #alertsView .soc-pc-list-main, body.soc-desktop-shell #ticketsView .soc-pc-list-main { width: 100%; max-width: none; min-width: 0; overflow-x: hidden !important; padding-inline: 12px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel, body.soc-desktop-shell #ticketsView .soc-pc-side-panel { width: 336px !important; min-width: 336px !important; max-width: 336px !important; } body.soc-desktop-shell #alertsView { --soc-feed-cols-alerts: 76px 108px 76px 126px minmax(128px, 1fr) 106px minmax(108px, 156px); --soc-feed-col-gap-compact: 6px; } body.soc-desktop-shell #ticketsView { --soc-feed-cols-tickets: 76px 112px 88px 86px minmax(150px, 1fr) 108px minmax(130px, 182px); --soc-feed-col-gap-compact: 6px; } body.soc-desktop-shell #alertsView .soc-pc-list-header, body.soc-desktop-shell #ticketsView .soc-pc-list-header { display: grid !important; align-items: center; column-gap: var(--soc-feed-col-gap-compact) !important; padding-inline: 12px !important; } body.soc-desktop-shell #alertsView .soc-pc-incident-header { grid-template-columns: var(--soc-feed-cols-alerts) !important; } body.soc-desktop-shell #ticketsView .soc-pc-ticket-header { grid-template-columns: var(--soc-feed-cols-tickets) !important; } body.soc-desktop-shell #alertsView .incident-card, body.soc-desktop-shell #alertsView .incident-ticket-card { grid-template-columns: var(--soc-feed-cols-alerts) !important; column-gap: var(--soc-feed-col-gap-compact) !important; min-height: 74px; padding-inline: 12px !important; padding-block: 8px !important; } body.soc-desktop-shell #ticketsView .ticket-card { grid-template-columns: var(--soc-feed-cols-tickets) !important; column-gap: var(--soc-feed-col-gap-compact) !important; min-height: 74px; padding-inline: 12px !important; padding-block: 8px !important; } body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(1), body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(2), body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(3), body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(4), body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(6), body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(1), body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(2), body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(3), body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(4), body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(6) { justify-self: center !important; text-align: center !important; } body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(5), body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(7), body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(5), body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(7) { justify-self: center !important; text-align: center !important; } body.soc-desktop-shell #ticketsView .ticket-head-pills, body.soc-desktop-shell #ticketsView .ticket-row-summary-type, body.soc-desktop-shell #ticketsView .ticket-row-summary-requested, body.soc-desktop-shell #ticketsView .ticket-row-summary-site, body.soc-desktop-shell #ticketsView .ticket-row-summary-updated, body.soc-desktop-shell #alertsView .incident-status, body.soc-desktop-shell #alertsView .incident-type, body.soc-desktop-shell #alertsView .incident-severity, body.soc-desktop-shell #alertsView .incident-location, body.soc-desktop-shell #alertsView .incident-created-at { justify-self: center !important; text-align: center !important; } body.soc-desktop-shell #alertsView .incident-location { border: 0 !important; background: transparent !important; border-radius: 0 !important; padding: 0 !important; min-height: 0 !important; width: 100% !important; display: block !important; } body.soc-desktop-shell #ticketsView .ticket-title, body.soc-desktop-shell #ticketsView .ticket-row-summary-comment, body.soc-desktop-shell #alertsView .incident-title, body.soc-desktop-shell #alertsView .incident-comment-preview, body.soc-desktop-shell #alertsView .incident-ticket-description { justify-self: stretch !important; text-align: left !important; min-width: 0; } body.soc-desktop-shell #ticketsView .ticket-row-summary-comment, body.soc-desktop-shell #alertsView .incident-comment-preview, body.soc-desktop-shell #alertsView .incident-ticket-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.32; max-height: calc(1.32em * 2); } body.soc-desktop-shell #ticketsView .ticket-row-summary-comment.is-support-worker-state { justify-self: stretch !important; justify-content: flex-start !important; -webkit-line-clamp: unset; white-space: nowrap; max-height: none; } body.soc-desktop-shell #ticketsView .soc-pc-list-main { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell #ticketsView .soc-pc-list-header { border: 0 !important; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 0 8px !important; padding: 0 12px 10px !important; overflow: visible !important; } body.soc-desktop-shell #ticketsView .ticket-list { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; margin: 0 !important; } body.soc-desktop-shell #ticketsView .ticket-list > .ticket-card { border-inline: 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 0 !important; box-shadow: none !important; } body.soc-desktop-shell #ticketsView .ticket-list > .ticket-card:last-child { border-bottom: 0 !important; } body.soc-desktop-shell #alertsView .soc-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } body.soc-desktop-shell #ticketsView .soc-ticket-summary-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; } body.soc-desktop-shell #alertsView .soc-summary-card, body.soc-desktop-shell #ticketsView .soc-summary-card { min-height: 96px; padding: 12px 14px; border: 1px solid var(--soc-border-strong); background: color-mix(in srgb, var(--soc-card-bg) 88%, var(--soc-panel-bg) 12%); box-shadow: var(--soc-shadow-soft); } body.soc-desktop-shell #alertsView .soc-summary-card .soc-summary-label, body.soc-desktop-shell #ticketsView .soc-summary-card .soc-summary-label { color: var(--soc-text-subtle); } body.soc-desktop-shell #alertsView .soc-summary-card .soc-summary-value, body.soc-desktop-shell #ticketsView .soc-summary-card .soc-summary-value { color: var(--soc-text); } body.soc-desktop-shell #alertsView .soc-summary-card.is-active, body.soc-desktop-shell #ticketsView .soc-summary-card.is-active { border-color: var(--soc-summary-active-border); background: linear-gradient(180deg, var(--soc-summary-active-grad-1), var(--soc-summary-active-grad-2)); box-shadow: 0 10px 22px color-mix(in srgb, var(--soc-shadow) 90%, transparent); } } @media (min-width: 1200px) and (max-width: 1399.98px) { body.soc-desktop-shell #alertsView { --soc-feed-cols-alerts: 74px 104px 72px 104px minmax(120px, 1fr) 102px minmax(102px, 148px); } body.soc-desktop-shell #ticketsView { --soc-feed-cols-tickets: 74px 104px 84px 80px minmax(142px, 1fr) 102px minmax(114px, 162px); } } @media (min-width: 1024px) and (max-width: 1199.98px) { body.soc-desktop-shell #alertsView .soc-pc-two-col-shell, body.soc-desktop-shell #ticketsView .soc-pc-two-col-shell { grid-template-columns: minmax(0, 1fr) 312px !important; gap: 12px !important; } } /* ===== Mobile feed restore (<768): keep legacy card UI for alerts/tickets ===== */ @media (max-width: 767.98px) { #alertsView .soc-workspace-inline-summary, #ticketsView .soc-ticket-feed-summary { display: none !important; } #ticketsView .soc-ticket-datebar, #ticketsView .soc-ticket-summary-grid { display: none !important; } #ticketsView #ticketStatusFilterChips { display: flex !important; } #alertsView .soc-pc-list-header, #ticketsView .soc-pc-list-header, #alertsView .soc-pc-side-panel, #ticketsView .soc-pc-side-panel { display: none !important; } #alertsView .soc-pc-two-col-shell, #ticketsView .soc-pc-two-col-shell { display: block !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; } #alertsView .soc-pc-list-main, #ticketsView .soc-pc-list-main { width: 100% !important; max-width: none !important; min-width: 0 !important; padding-inline: 0 !important; overflow: visible !important; } #alertsView .incident-list, #ticketsView .ticket-list { display: grid !important; gap: 8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } #alertsView .incident-card, #alertsView .incident-ticket-card, #ticketsView .ticket-card { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 6px !important; border-radius: 12px !important; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; background: var(--ui-bg-surface, var(--soc-card-bg)) !important; box-shadow: none !important; padding: 10px 12px !important; min-height: 0 !important; } #alertsView .incident-card::before, #ticketsView .ticket-card::before { display: none !important; } #alertsView .incident-card-head, #ticketsView .ticket-card-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; margin: 0 !important; } #alertsView .incident-title, #ticketsView .ticket-title { margin: 0 !important; min-width: 0 !important; padding-right: 96px !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #alertsView .incident-card-badges, #ticketsView .ticket-head-pills { position: absolute !important; top: 10px !important; right: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 4px !important; margin: 0 !important; } #alertsView .incident-card-badges .incident-status, #alertsView .incident-card-badges .incident-ticket-status, #ticketsView .ticket-head-pills .ticket-status-pill { min-height: 24px !important; padding: 4px 8px !important; font-size: 11px !important; line-height: 1.2 !important; border-radius: 999px !important; white-space: nowrap !important; } #alertsView .incident-type, #alertsView .incident-created-at, #alertsView .incident-location, #alertsView .incident-type-badge, #alertsView .incident-ticket-description, #ticketsView .ticket-row-summary { display: none !important; } #alertsView .incident-mobile-meta, #alertsView .incident-mobile-comment, #ticketsView .ticket-mobile-meta, #ticketsView .ticket-mobile-comment { display: block !important; margin: 0 !important; min-width: 0 !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #alertsView .incident-mobile-meta, #ticketsView .ticket-mobile-meta { padding-right: 96px !important; } #alertsView .incident-mobile-eci { position: absolute !important; right: 10px !important; bottom: 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; max-width: 44% !important; min-height: 22px !important; border-radius: 999px !important; font-size: 11px !important; line-height: 1.15 !important; padding: 3px 7px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #alertsView .incident-actions { display: flex !important; justify-content: flex-end !important; margin: 0 !important; padding-top: 2px !important; } #ticketsView .ticket-full-content-actions { display: flex !important; justify-content: flex-end !important; width: auto !important; margin: 0 !important; } #ticketsView .ticket-full-content-actions .viewDetailBtn { min-height: 32px !important; } #alertsView .incident-attachments, #alertsView .instruction-list, #alertsView .instruction-form, #ticketsView .ticket-kv-row, #ticketsView .ticket-kv-list, #ticketsView .ticket-comments, #ticketsView .ticket-attachments, #ticketsView .ticket-meta-line, #ticketsView .ticket-action-row.ticket-extra { display: none !important; } } /* ===== Desktop-adaptive shell/feed (>=768): keep PC structure without mobile switch ===== */ @media (min-width: 768px) { #bottomTabNav.soc-bottom-tab { display: none !important; } } @media (min-width: 768px) and (max-width: 1199.98px) { body.role-hq #menuToggleBtn:not(.hidden), body.role-field #menuToggleBtn:not(.hidden) { display: inline-flex !important; } body:not(.nav-open) #menuSheetPanel, body:not(.nav-open) .container.admin-layout #menuSheetPanel { display: none !important; } body.nav-open #menuSheetPanel, body.nav-open .container.admin-layout #menuSheetPanel { display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: 0 !important; width: min(86vw, 320px) !important; max-width: min(86vw, 320px) !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 14px 14px 0 !important; border-right: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; z-index: var(--ui-z-drawer, 400) !important; transform: translateX(0) !important; } body.nav-open .nav-backdrop { opacity: 1 !important; pointer-events: auto !important; background: rgba(0, 0, 0, 0.28) !important; } .container.admin-layout { grid-template-columns: 1fr !important; } .container.ds-page { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 16px 16px calc(16px + var(--soc-safe-bottom, 0px)) !important; } #dashboardPanel { max-height: none !important; overflow: visible !important; } #homeView, #alertsView, #ticketsView, #weeklyView, #peopleView, #myProfileView, #analyticsView, #adminView, #reportsView { padding-bottom: 12px !important; overflow-y: auto !important; } #alertsView .soc-pc-two-col-shell, #ticketsView .soc-pc-two-col-shell, body.soc-desktop-shell #alertsView .soc-pc-two-col-shell, body.soc-desktop-shell #ticketsView .soc-pc-two-col-shell { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; align-items: start !important; } #alertsView .soc-pc-side-panel, #ticketsView .soc-pc-side-panel, body.soc-desktop-shell #alertsView .soc-pc-side-panel, body.soc-desktop-shell #ticketsView .soc-pc-side-panel { display: flex !important; position: fixed !important; top: 62px !important; right: 10px !important; width: min(92vw, 380px) !important; min-width: min(92vw, 380px) !important; max-width: min(92vw, 380px) !important; max-height: calc(100dvh - 74px) !important; border-radius: 12px !important; z-index: var(--ui-z-overlay, 300) !important; transform: translateX(calc(100% + 16px)); opacity: 0; pointer-events: none; transition: transform 0.16s ease, opacity 0.16s ease; } #alertsView .soc-pc-side-panel.is-open, #ticketsView .soc-pc-side-panel.is-open, body.soc-desktop-shell #alertsView .soc-pc-side-panel.is-open, body.soc-desktop-shell #ticketsView .soc-pc-side-panel.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; } #alertsView .soc-pc-side-panel.hidden, #ticketsView .soc-pc-side-panel.hidden, body.soc-desktop-shell #alertsView .soc-pc-side-panel.hidden, body.soc-desktop-shell #ticketsView .soc-pc-side-panel.hidden { display: flex !important; transform: translateX(calc(100% + 16px)); opacity: 0; pointer-events: none; } } @media (min-width: 768px) and (max-width: 1199.98px) { #alertsView { --soc-feed-cols-alerts-adaptive: 82px 132px 84px 126px minmax(206px, 1fr) 130px 152px; } #ticketsView { --soc-feed-cols-tickets-adaptive: 84px 146px 92px 100px minmax(260px, 1fr) 140px 184px; } #alertsView .soc-pc-list-header, #ticketsView .soc-pc-list-header { display: grid !important; align-items: center; column-gap: 10px !important; min-height: 40px !important; padding-inline: 12px !important; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 10px !important; background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)) !important; margin: 0 0 6px !important; } #alertsView .soc-pc-incident-header { grid-template-columns: var(--soc-feed-cols-alerts-adaptive) !important; } #ticketsView .soc-pc-ticket-header { grid-template-columns: var(--soc-feed-cols-tickets-adaptive) !important; } #alertsView .incident-list, #ticketsView .ticket-list { display: grid !important; gap: 0 !important; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 10px !important; overflow: hidden !important; background: var(--ui-bg-surface, var(--soc-card-bg)) !important; } #alertsView .incident-card, #alertsView .incident-ticket-card { display: grid !important; grid-template-columns: var(--soc-feed-cols-alerts-adaptive) !important; align-items: center !important; column-gap: 10px !important; min-height: 64px !important; padding: 8px 12px !important; border: 0 !important; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 0 !important; box-shadow: none !important; } #alertsView .incident-list > .incident-card:last-child { border-bottom: 0 !important; } #ticketsView .ticket-card { display: grid !important; grid-template-columns: var(--soc-feed-cols-tickets-adaptive) !important; align-items: center !important; column-gap: 10px !important; min-height: 64px !important; padding: 8px 12px !important; border: 0 !important; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 0 !important; box-shadow: none !important; } #ticketsView .ticket-list > .ticket-card:last-child { border-bottom: 0 !important; } #alertsView .incident-card::before, #ticketsView .ticket-card::before { display: none !important; } #alertsView .incident-card-head, #alertsView .incident-card-badges, #ticketsView .ticket-card-head, #ticketsView .ticket-row-summary { display: contents !important; } #alertsView .incident-mobile-meta, #alertsView .incident-mobile-comment, #alertsView .incident-mobile-eci, #ticketsView .ticket-mobile-meta, #ticketsView .ticket-mobile-comment, #ticketsView .ticket-kv-row, #ticketsView .ticket-kv-list, #ticketsView .ticket-comments, #ticketsView .ticket-attachments, #ticketsView .ticket-meta-line, #ticketsView .ticket-action-row.ticket-extra { display: none !important; } #alertsView .incident-title, #ticketsView .ticket-title { justify-self: stretch !important; text-align: left !important; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .incident-comment-preview, #alertsView .incident-ticket-description, #ticketsView .ticket-row-summary-comment { min-width: 0; margin: 0; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.3; max-height: 1.3em; } #ticketsView .ticket-row-summary-comment.is-support-worker-state { display: inline-flex; align-items: center; justify-content: flex-start; white-space: nowrap; max-height: none; } #alertsView .incident-status, #alertsView .incident-type, #alertsView .incident-severity, #alertsView .incident-location, #alertsView .incident-created-at, #ticketsView .ticket-head-pills, #ticketsView .ticket-row-summary-type, #ticketsView .ticket-row-summary-requested, #ticketsView .ticket-row-summary-site, #ticketsView .ticket-row-summary-updated { justify-self: center !important; text-align: center !important; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #alertsView .incident-location { border: 0 !important; background: transparent !important; border-radius: 0 !important; padding: 0 !important; min-height: 0 !important; width: 100% !important; display: block !important; } } @media (min-width: 960px) and (max-width: 1199.98px) { #alertsView { --soc-feed-cols-alerts-adaptive: 78px 122px 80px 120px minmax(203px, 1fr) 126px 0px; } #ticketsView { --soc-feed-cols-tickets-adaptive: 80px 136px 88px 96px minmax(250px, 1fr) 136px 0px; } #alertsView .soc-pc-list-header > span:nth-child(7), #ticketsView .soc-pc-list-header > span:nth-child(7), #alertsView .incident-comment-preview, #alertsView .incident-ticket-description, #ticketsView .ticket-row-summary-comment { display: none !important; } } @media (min-width: 768px) and (max-width: 959.98px) { #alertsView { --soc-feed-cols-alerts-adaptive: 74px 116px 0px 0px minmax(220px, 1fr) 114px 0px; } #ticketsView { --soc-feed-cols-tickets-adaptive: 76px 124px 82px 0px minmax(230px, 1fr) 118px 0px; } #alertsView .soc-pc-list-header > span:nth-child(3), #alertsView .soc-pc-list-header > span:nth-child(4), #alertsView .soc-pc-list-header > span:nth-child(7), #ticketsView .soc-pc-list-header > span:nth-child(4), #ticketsView .soc-pc-list-header > span:nth-child(7), #alertsView .incident-severity, #alertsView .incident-location, #alertsView .incident-comment-preview, #alertsView .incident-ticket-description, #ticketsView .ticket-row-summary-site, #ticketsView .ticket-row-summary-comment { display: none !important; } #alertsView .incident-card, #alertsView .incident-ticket-card, #ticketsView .ticket-card { min-height: 60px !important; padding: 7px 10px !important; column-gap: 8px !important; } #alertsView .soc-pc-list-header, #ticketsView .soc-pc-list-header { min-height: 38px !important; padding-inline: 10px !important; column-gap: 8px !important; } } /* Support roster adaptive: 1200+ two-column, below stacked/overlay */ @media (min-width: 1200px) { #opsSupportPanel .soc-ops-support-layout { grid-template-columns: minmax(0, 1fr); align-items: start; } #opsSupportPanel .soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) 360px; } #opsSupportPanel .soc-ops-support-sheet { position: sticky; top: 72px; } } @media (min-width: 960px) and (max-width: 1199.98px) { #opsSupportPanel .soc-ops-support-layout { grid-template-columns: minmax(0, 1fr); } #opsSupportPanel .soc-ops-support-sheet { position: static; width: 100%; max-height: none; } } /* Mobile-only premium feed restoration (PC 영향 금지) */ @media (max-width: 767px) { #alertsView #realtimeListSkeleton, #alertsView #alerts:empty { display: none !important; } #alertsView .incident-list, #ticketsView .ticket-list { display: grid !important; gap: 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } #alertsView .incident-card.m-feed-card, #alertsView .incident-ticket-card.m-feed-card, #ticketsView .ticket-card.m-feed-card { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; min-height: 0 !important; padding: 14px 14px 14px 16px !important; border: 1px solid #dbe2ee !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08) !important; overflow: visible !important; } #alertsView .incident-card.m-feed-card, #alertsView .incident-ticket-card.m-feed-card { gap: 12px !important; padding: 16px 16px 16px 18px !important; } #alertsView .incident-card.m-feed-card::before, #ticketsView .ticket-card.m-feed-card::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 4px !important; border-radius: 16px 0 0 16px !important; background: var(--ui-accent, #ff6b00) !important; display: block !important; } #alertsView .incident-ticket-card.m-feed-card.status-needs-info::before, #ticketsView .ticket-card.m-feed-card.status-needs-info::before { background: var(--ui-warning, #f59e0b) !important; } #alertsView .incident-ticket-card.m-feed-card.status-approved::before, #ticketsView .ticket-card.m-feed-card.status-approved::before { background: var(--ui-success, #16a34a) !important; } #alertsView .incident-ticket-card.m-feed-card.status-rejected::before, #ticketsView .ticket-card.m-feed-card.status-rejected::before { background: var(--ui-danger, #dc2626) !important; } #alertsView .incident-ticket-card.m-feed-card.status-done::before, #ticketsView .ticket-card.m-feed-card.status-done::before { background: #667085 !important; } #alertsView .incident-card.m-feed-card .incident-card-head, #ticketsView .ticket-card.m-feed-card .ticket-card-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; margin: 0 !important; } #alertsView .m-incident-card.m-card--escalation .incident-card-head { position: relative !important; } #alertsView .m-incident-card.m-card--escalation .incident-head-actions { position: absolute !important; top: 0 !important; right: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 0 !important; z-index: 3 !important; } #alertsView .m-incident-card.m-card--escalation .incident-card-head > .incident-status.m-pill { margin-right: 36px !important; } #alertsView .m-incident-card.m-card--escalation .incident-more-btn { width: 28px !important; min-width: 28px !important; height: 28px !important; padding: 0 !important; } #alertsView .incident-card.m-feed-card .incident-title, #ticketsView .ticket-card.m-feed-card .ticket-title { margin: 0 !important; min-width: 0 !important; padding-right: 104px !important; color: #111827 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.35 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: keep-all !important; overflow-wrap: break-word !important; text-align: left !important; } #alertsView .incident-card.m-feed-card .incident-type, #alertsView .incident-card.m-feed-card .incident-created-at, #alertsView .incident-card.m-feed-card .incident-location, #alertsView .incident-card.m-feed-card .incident-ticket-description, #ticketsView .ticket-card.m-feed-card .ticket-row-summary { display: none !important; } #alertsView .incident-card.m-feed-card .incident-card-badges, #ticketsView .ticket-card.m-feed-card .ticket-head-pills { position: absolute !important; top: 12px !important; right: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 4px !important; margin: 0 !important; pointer-events: none !important; } #alertsView .incident-card.m-feed-card .incident-card-badges .incident-status, #alertsView .incident-card.m-feed-card .incident-card-badges .incident-ticket-status, #ticketsView .ticket-card.m-feed-card .ticket-head-pills .ticket-status-pill { margin: 0 !important; min-height: 24px !important; border-radius: 999px !important; padding: 4px 8px !important; font-size: 11px !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #alertsView .incident-card.m-feed-card .incident-card-badges .incident-severity, #alertsView .incident-card.m-feed-card .incident-card-badges .incident-location, #alertsView .incident-card.m-feed-card .incident-card-badges .incident-type-badge, #ticketsView .ticket-card.m-feed-card .ticket-head-pills .ticket-urgent-pill { display: none !important; } #alertsView .incident-card.m-feed-card .incident-mobile-meta, #alertsView .incident-card.m-feed-card .incident-mobile-comment, #ticketsView .ticket-card.m-feed-card .ticket-mobile-meta, #ticketsView .ticket-card.m-feed-card .ticket-mobile-comment { display: -webkit-box !important; margin: 0 !important; min-width: 0 !important; color: #667085 !important; font-size: 12px !important; line-height: 1.35 !important; text-align: left !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: break-word !important; overflow-wrap: anywhere !important; } #alertsView .incident-card.m-feed-card .incident-mobile-meta { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; padding-right: 104px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; } #alertsView .incident-card.m-feed-card .incident-mobile-meta-row { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) !important; align-items: center !important; column-gap: 8px !important; margin: 0 !important; } #alertsView .incident-card.m-feed-card .incident-mobile-meta-label { color: #98a2b3 !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: left !important; white-space: nowrap !important; } #alertsView .incident-card.m-feed-card .incident-mobile-meta-value { color: #667085 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.35 !important; text-align: left !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #alertsView .incident-card.m-feed-card .incident-mobile-comment { display: block !important; margin: 0 !important; padding: 10px 12px !important; border: 1px solid var(--ui-border-subtle, #d0d7e2) !important; border-radius: 12px !important; background: var(--ui-bg-surface, #ffffff) !important; color: #667085 !important; font-size: 13px !important; line-height: 1.35 !important; white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } #alertsView .incident-card.m-feed-card .incident-mobile-guidance-title { margin: 0 !important; color: var(--ui-accent, #ff6b00) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; } #alertsView .incident-card.m-feed-card .incident-mobile-guidance-body { margin: 0 !important; } #alertsView .incident-card.m-feed-card .incident-mobile-meta, #ticketsView .ticket-card.m-feed-card .ticket-mobile-meta { padding-right: 104px !important; } #alertsView .incident-card.m-feed-card .incident-mobile-eci { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: flex-end !important; margin: 0 0 0 auto !important; min-height: 22px !important; border-radius: 999px !important; padding: 3px 8px !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.2 !important; } #alertsView .incident-card.m-feed-card .incident-actions, #ticketsView .ticket-card.m-feed-card .ticket-full-content-actions { display: flex !important; justify-content: flex-start !important; margin: 0 !important; padding-top: 2px !important; } #alertsView .incident-card.m-feed-card .incident-actions .viewDetailBtn, #ticketsView .ticket-card.m-feed-card .ticket-full-content-actions .viewDetailBtn { width: auto !important; min-width: 104px !important; min-height: 32px !important; padding: 6px 10px !important; border-radius: 10px !important; } #alertsView .incident-card.m-feed-card .incident-actions .viewDetailBtn.m-button, #ticketsView .ticket-card.m-feed-card .ticket-full-content-actions .viewDetailBtn.m-button { min-height: 38px !important; padding: 0 12px !important; font-size: 13px !important; font-weight: 600 !important; } /* Authoritative mobile incident card restoration: keep premium card sections visible. */ #alertsView .incident-card.m-feed-card .incident-attachments:not(.hidden), #alertsView .incident-card.m-feed-card .instruction-list:not(.hidden), #alertsView .incident-card.m-feed-card .instruction-form:not(.hidden) { display: block !important; } #alertsView .incident-card.m-feed-card .instruction-list:not(.hidden) { margin: 0 !important; border: 1px solid var(--ui-border-subtle, #d0d7e2) !important; border-radius: 14px !important; background: var(--ui-bg-surface, #ffffff) !important; padding: 10px 12px !important; color: var(--ui-text-secondary, #667085) !important; font-size: 13px !important; line-height: 1.35 !important; white-space: pre-wrap !important; } #alertsView .incident-card.m-feed-card .instruction-form:not(.hidden) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; margin: 0 !important; } #alertsView .incident-card.m-feed-card .incident-comment-target { margin: 0 !important; color: var(--ui-text-secondary, #667085) !important; font-size: 12px !important; line-height: 1.3 !important; } #alertsView .incident-card.m-feed-card .instructionInput { width: 100% !important; min-height: 42px !important; border-radius: 12px !important; padding: 0 14px !important; font-size: 15px !important; } #alertsView .incident-card.m-feed-card .instruction-form .ds-btn { width: 100% !important; min-height: 44px !important; border-radius: 14px !important; font-size: 16px !important; font-weight: 700 !important; } #alertsView .incident-card.m-feed-card .incident-attachments:not(.hidden) { margin: 0 !important; padding: 0 !important; } #alertsView .incident-card.m-feed-card .incident-attachments .attachment-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } #alertsView .incident-card.m-feed-card .incident-attachments .attachment-item { border: 1px solid var(--ui-border-subtle, #d0d7e2) !important; border-radius: 12px !important; background: var(--ui-bg-surface, #ffffff) !important; padding: 8px !important; } /* Authoritative mobile ticket card restoration: keep premium card sections visible. */ #ticketsView .ticket-card.m-feed-card .ticket-kv-row, #ticketsView .ticket-card.m-feed-card .ticket-kv-list, #ticketsView .ticket-card.m-feed-card .ticket-comments, #ticketsView .ticket-card.m-feed-card .ticket-attachments, #ticketsView .ticket-card.m-feed-card .ticket-meta-line, #ticketsView .ticket-card.m-feed-card .ticket-action-row.ticket-extra, #ticketsView .ticket-card.m-feed-card .ticket-actions-row, #ticketsView .ticket-card.m-feed-card .ticket-comment-form, #ticketsView .ticket-card.m-feed-card .ticket-attachment-form { display: block !important; } #ticketsView .ticket-card.m-feed-card .ticket-action-row.ticket-extra { display: flex !important; justify-content: flex-start !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } #ticketsView .ticket-card.m-feed-card .ticket-location-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 32px !important; border-radius: 999px !important; padding: 0 12px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.1 !important; } #ticketsView .ticket-card.m-feed-card .ticket-comments { border: 1px solid var(--ui-border-subtle, #d0d7e2) !important; border-radius: 14px !important; background: var(--ui-bg-surface, #ffffff) !important; padding: 10px 12px !important; } #ticketsView .ticket-card.m-feed-card .ticket-comments-title { margin: 0 0 6px !important; font-size: 13px !important; font-weight: 700 !important; color: var(--ui-accent, #ff6b00) !important; } #ticketsView .ticket-card.m-feed-card .ticket-comments .help, #ticketsView .ticket-card.m-feed-card .ticket-comment-item { margin: 0 !important; font-size: 13px !important; line-height: 1.35 !important; color: var(--ui-text-secondary, #667085) !important; } #ticketsView .ticket-card.m-feed-card .ticket-actions-row { margin: 0 !important; } #ticketsView .ticket-card.m-feed-card .ticket-status-select { width: 100% !important; min-height: 44px !important; border-radius: 12px !important; } #ticketsView .ticket-card.m-feed-card .ticket-comment-form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; margin: 0 !important; } #ticketsView .ticket-card.m-feed-card .ticket-comment-target { margin: 0 !important; font-size: 12px !important; color: var(--ui-text-secondary, #667085) !important; line-height: 1.3 !important; } #ticketsView .ticket-card.m-feed-card .ticket-comment-input { width: 100% !important; min-height: 42px !important; border-radius: 12px !important; padding: 0 14px !important; font-size: 15px !important; } #ticketsView .ticket-card.m-feed-card .ticket-comment-form .ds-btn { width: 100% !important; min-height: 44px !important; border-radius: 14px !important; font-size: 16px !important; font-weight: 700 !important; } #ticketsView .ticket-card.m-feed-card .ticket-attachment-form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; margin: 0 !important; } #ticketsView .ticket-card.m-feed-card .ticket-attachment-form .ds-btn { width: 100% !important; min-height: 42px !important; border-radius: 12px !important; } } @media (min-width: 768px) { #ticketsView #ticketStatusFilterChips { display: none !important; } } /* Mobile DS v1: incident/ticket/notice unified card system (PC 영향 금지) */ @media (max-width: 767px) { #alertsView .m-card, #ticketsView .m-card { border-radius: 16px !important; padding: 18px !important; gap: 14px !important; box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08) !important; } #alertsView .m-card-header, #ticketsView .m-card-header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 10px !important; margin: 0 !important; padding-right: 0 !important; } #alertsView .m-card-title, #ticketsView .m-card-title { min-width: 0 !important; margin: 0 !important; padding-right: 0 !important; color: #111827 !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.35 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: break-word !important; } #alertsView .m-pill-row, #ticketsView .m-pill-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin: 0 !important; min-width: 0 !important; } #alertsView .m-pill, #ticketsView .m-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 26px !important; height: 26px !important; border-radius: 14px !important; padding: 0 10px !important; border: 1px solid var(--ui-border-subtle, #d0d7e2) !important; background: var(--ui-bg-surface-muted, #f2f4f7) !important; color: var(--ui-text-secondary, #667085) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; } #alertsView .m-pill.m-pill--status, #ticketsView .m-pill.m-pill--status { color: #b45309 !important; border-color: rgba(245, 158, 11, 0.55) !important; background: #fff6e8 !important; } #alertsView .m-pill.m-pill--notice { color: #475467 !important; border-color: #d0d5dd !important; background: #f8fafc !important; } #alertsView .m-pill.m-pill--eci { color: #b45309 !important; border-color: rgba(245, 158, 11, 0.55) !important; background: #fff2e2 !important; } #alertsView .m-pill.m-pill--type, #ticketsView .m-pill.m-pill--type { background: #eef2ff !important; border-color: #c7d2fe !important; color: #3730a3 !important; } #alertsView .m-pill.m-pill--request, #ticketsView .m-pill.m-pill--request { background: #fff1e8 !important; border-color: rgba(255, 107, 0, 0.55) !important; color: #c2410c !important; } #alertsView .m-pill.m-pill--urgent, #ticketsView .m-pill.m-pill--urgent { background: #fee2e2 !important; border-color: #fca5a5 !important; color: #b91c1c !important; } #alertsView .m-meta-grid, #ticketsView .m-meta-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; } #alertsView .m-meta-row, #ticketsView .m-meta-row { display: grid !important; grid-template-columns: 46px minmax(0, 1fr) !important; gap: 8px !important; align-items: center !important; margin: 0 !important; } #alertsView .m-meta-label, #ticketsView .m-meta-label { color: #98a2b3 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.25 !important; white-space: nowrap !important; } #alertsView .m-meta-value, #ticketsView .m-meta-value { color: #334155 !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.3 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #alertsView .m-subcard, #ticketsView .m-subcard { margin: 0 !important; border: 1px solid #d7dde7 !important; border-radius: 14px !important; background: #f8fafc !important; padding: 12px !important; color: #475467 !important; box-shadow: none !important; } #alertsView .m-subcard-title, #ticketsView .m-subcard-title { margin: 0 0 8px !important; color: var(--ui-accent, #ff6b00) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; } #alertsView .m-subcard.m-subcard--comment, #ticketsView .m-subcard.m-subcard--comment { font-size: 13px !important; line-height: 1.4 !important; color: #667085 !important; } #alertsView .m-card-footer, #ticketsView .m-card-footer { display: block !important; margin: 0 !important; padding: 0 !important; } #alertsView .m-button, #ticketsView .m-button { width: 100% !important; min-height: 44px !important; border-radius: 14px !important; font-size: 16px !important; font-weight: 700 !important; } #alertsView .m-incident-card .incident-mobile-eci { margin: 0 !important; } #ticketsView .m-ticket-card .ticket-mobile-detail-subcard .ticket-kv-row { display: grid !important; grid-template-columns: 86px minmax(0, 1fr) !important; gap: 8px !important; margin: 0 !important; padding: 6px 0 !important; border: 0 !important; } #ticketsView .m-ticket-card .ticket-mobile-detail-subcard .ticket-kv-label { font-size: 12px !important; color: #98a2b3 !important; font-weight: 600 !important; white-space: nowrap !important; } #ticketsView .m-ticket-card .ticket-mobile-detail-subcard .ticket-kv-value { font-size: 14px !important; color: #334155 !important; min-width: 0 !important; line-height: 1.35 !important; } } @media (min-width: 768px) and (max-width: 959.98px) { #opsSupportPanel .soc-ops-support-layout { grid-template-columns: minmax(0, 1fr); } #opsSupportPanel .soc-ops-support-sheet { position: fixed; top: 58px; right: 8px; width: min(94vw, 380px); max-height: calc(100dvh - 66px); z-index: var(--ui-z-overlay, 300); transform: translateX(calc(100% + 12px)); opacity: 0; pointer-events: none; transition: transform 0.16s ease, opacity 0.16s ease; } #opsSupportPanel .soc-ops-support-sheet:not(.hidden) { transform: translateX(0); opacity: 1; pointer-events: auto; } #opsSupportPanel .soc-ops-support-calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) and (max-width: 900px) { .soc-app-shell { position: static !important; inset: auto !important; width: 100% !important; min-height: 100dvh !important; height: 100dvh !important; grid-template-rows: auto minmax(0, 1fr) !important; } .topbar { display: flex !important; grid-template-columns: none !important; padding: 10px 14px !important; } .container.ds-page { padding: 12px 12px calc(12px + var(--soc-safe-bottom, 0px)) !important; } } @media (min-width: 1440px) { .container.ds-page { padding: 24px 24px 20px !important; } } @media (min-width: 1200px) and (max-width: 1439.98px) { .container.ds-page { padding: 20px 20px 18px !important; } } @media (min-width: 960px) and (max-width: 1199.98px) { .container.ds-page { padding: 16px 16px 14px !important; } #homeView .soc-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #analyticsContentWrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #analyticsContentWrap > #analyticsStoreComparisonBlock { grid-column: 1 / -1; } #alertsView .soc-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #ticketsView .soc-ticket-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) and (max-width: 959.98px) { .container.ds-page { padding: 12px 12px 12px !important; } #homeView .soc-home-grid, #analyticsContentWrap { grid-template-columns: minmax(0, 1fr) !important; } #alertsView .soc-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ticketsView .soc-ticket-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===== Authoritative desktop-adaptive guard (>=768): no mobile-shell fallback ===== */ @media (min-width: 768px) { body.soc-desktop-adaptive #bottomTabNav.soc-bottom-tab { display: none !important; } body.soc-desktop-adaptive #menuSheetPanel > .ds-card-title { display: none !important; } body.soc-desktop-adaptive #menuSheetPanel .soc-menu-group-label, body.soc-desktop-adaptive #menuSheetPanel .soc-menu-sub-item-label { white-space: nowrap !important; word-break: keep-all !important; overflow: visible !important; text-overflow: clip !important; } body.soc-desktop-adaptive #menuSheetPanel .soc-menu-group-toggle, body.soc-desktop-adaptive #menuSheetPanel .soc-menu-sub-item { justify-content: flex-start !important; text-align: left !important; } body.soc-desktop-adaptive #menuSheetPanel .menu-footer, body.soc-desktop-adaptive #menuSheetPanel .sidebar-footer, body.soc-desktop-adaptive #menuSheetPanel .menu-role-section, body.soc-desktop-adaptive #menuSheetPanel .sidebar-bottom { display: none !important; } } @media (min-width: 768px) and (max-width: 959.98px) { #alertsView .soc-pc-side-panel, #ticketsView .soc-pc-side-panel, body.soc-desktop-shell #alertsView .soc-pc-side-panel, body.soc-desktop-shell #ticketsView .soc-pc-side-panel { top: 0 !important; right: 0 !important; width: min(96vw, 520px) !important; min-width: min(96vw, 520px) !important; max-width: min(96vw, 520px) !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; } #alertsView .soc-pc-side-panel:not(.hidden), #ticketsView .soc-pc-side-panel:not(.hidden), body.soc-desktop-shell #alertsView .soc-pc-side-panel:not(.hidden), body.soc-desktop-shell #ticketsView .soc-pc-side-panel:not(.hidden) { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28) !important; } } /* Alerts feed: keep skeleton/empty blocks truly hidden in desktop-adaptive mode */ @media (min-width: 768px) { #alertsView #realtimeListSkeleton.hidden, #alertsView #realtimeEmptyState.hidden, #alertsView #realtimeErrorState.hidden { display: none !important; } #alertsView #alerts:empty { display: none !important; margin: 0 !important; padding: 0 !important; } } /* Tickets feed alignment override: keep header/cell center axis identical */ @media (min-width: 768px) { body.soc-desktop-shell #ticketsView .soc-pc-ticket-header > span, body.soc-desktop-shell #ticketsView .ticket-head-pills, body.soc-desktop-shell #ticketsView .ticket-row-summary-type, body.soc-desktop-shell #ticketsView .ticket-row-summary-requested, body.soc-desktop-shell #ticketsView .ticket-row-summary-site, body.soc-desktop-shell #ticketsView .ticket-row-summary-updated, body.soc-desktop-shell #ticketsView .ticket-title, body.soc-desktop-shell #ticketsView .ticket-row-summary-comment { justify-self: center !important; text-align: center !important; } body.soc-desktop-shell #ticketsView .ticket-title, body.soc-desktop-shell #ticketsView .ticket-row-summary-comment { width: 100%; min-width: 0; margin: 0 !important; } body.soc-desktop-shell #ticketsView .ticket-row-summary-comment { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; } body.soc-desktop-shell #ticketsView .ticket-row-summary-comment.is-support-worker-state { display: inline-flex !important; align-items: center !important; justify-content: center !important; -webkit-line-clamp: unset; white-space: nowrap; } } /* Alerts feed alignment + ECI pill compact tuning (final override) */ @media (min-width: 768px) { body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(5), body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(7), body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(5), body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(7), body.soc-desktop-adaptive #alertsView .soc-pc-list-header > span:nth-child(5), body.soc-desktop-adaptive #alertsView .soc-pc-list-header > span:nth-child(7), body.soc-desktop-adaptive #ticketsView .soc-pc-list-header > span:nth-child(5), body.soc-desktop-adaptive #ticketsView .soc-pc-list-header > span:nth-child(7) { justify-self: center !important; text-align: center !important; } body.soc-desktop-shell #alertsView .soc-pc-incident-header > span, body.soc-desktop-adaptive #alertsView .soc-pc-incident-header > span { justify-self: center !important; text-align: center !important; } body.soc-desktop-shell #alertsView .incident-status, body.soc-desktop-shell #alertsView .incident-type, body.soc-desktop-shell #alertsView .incident-location, body.soc-desktop-shell #alertsView .incident-created-at, body.soc-desktop-shell #alertsView .incident-title, body.soc-desktop-shell #alertsView .incident-comment-preview, body.soc-desktop-shell #alertsView .incident-ticket-description, body.soc-desktop-adaptive #alertsView .incident-status, body.soc-desktop-adaptive #alertsView .incident-type, body.soc-desktop-adaptive #alertsView .incident-location, body.soc-desktop-adaptive #alertsView .incident-created-at, body.soc-desktop-adaptive #alertsView .incident-title, body.soc-desktop-adaptive #alertsView .incident-comment-preview, body.soc-desktop-adaptive #alertsView .incident-ticket-description { justify-self: center !important; text-align: center !important; margin: 0 !important; width: 100% !important; min-width: 0 !important; } body.soc-desktop-shell #alertsView .incident-title, body.soc-desktop-adaptive #alertsView .incident-title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.soc-desktop-shell #alertsView .incident-comment-preview, body.soc-desktop-shell #alertsView .incident-ticket-description, body.soc-desktop-adaptive #alertsView .incident-comment-preview, body.soc-desktop-adaptive #alertsView .incident-ticket-description { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; } body.soc-desktop-shell #alertsView .incident-severity, body.soc-desktop-adaptive #alertsView .incident-severity { justify-self: center !important; text-align: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 26px !important; height: 26px !important; padding: 0 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; box-sizing: border-box !important; } } /* Alerts/Tickets type column: word-based wrapping + centered multiline */ @media (min-width: 768px) { body.soc-desktop-shell #alertsView .incident-card, body.soc-desktop-shell #alertsView .incident-ticket-card, body.soc-desktop-adaptive #alertsView .incident-card, body.soc-desktop-adaptive #alertsView .incident-ticket-card { min-height: 86px !important; height: auto !important; } body.soc-desktop-shell #alertsView .incident-type, body.soc-desktop-adaptive #alertsView .incident-type, body.soc-desktop-shell #ticketsView .ticket-row-summary-type, body.soc-desktop-adaptive #ticketsView .ticket-row-summary-type { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: break-word !important; overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; line-height: 1.35 !important; } } /* Alerts PC visual parity with Tickets (header/empty state/spacing) */ @media (min-width: 1024px) { #alertsView .soc-pc-list-main { padding-inline: 22px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #alertsView > .help { margin: 6px 0 8px !important; } #alertsView .soc-alerts-feed-section { margin-top: 0 !important; gap: 6px; } #alertsView .soc-alerts-feed-head { margin: 0 !important; min-height: 0; } #alertsView .soc-pc-list-header { border: 0 !important; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 0 0 10px !important; min-height: 0; } #alertsView .incident-list { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; margin: 0 !important; } #alertsView .incident-list > .incident-card, #alertsView .incident-list > .incident-ticket-card { border-radius: 0 !important; box-shadow: none !important; border-inline: 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; } #alertsView .incident-list > .incident-card:last-child, #alertsView .incident-list > .incident-ticket-card:last-child { border-bottom: 0 !important; } #alertsView .incident-card, #alertsView .incident-ticket-card { background: transparent !important; border-radius: 0 !important; padding-inline: 0 !important; } #alertsView .incident-card:hover, #alertsView .incident-card:active, #alertsView .incident-ticket-card:hover, #alertsView .incident-ticket-card:active { background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)) !important; } #alertsView #realtimeEmptyState { display: block; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 8px !important; color: var(--soc-text-sub); font-size: var(--ui-text-13, var(--soc-text-sm)); line-height: 1.4; } } /* Report tab desktop-only layout (field): split selection cards + stable panel height */ @media (min-width: 1024px) { body.role-field #reportPanel { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: calc(100dvh - (var(--soc-safe-top) + 66px) - 20px); overflow: hidden; overflow-anchor: none; } body.role-field #reportPanel > .ds-card-title { margin-bottom: 8px; } body.role-field #reportPanel #reportView { min-height: 0; width: 100%; } body.role-field #reportPanel.report-selection-active #reportView { display: grid; grid-template-rows: auto auto; align-content: start; min-height: 0; overflow: visible; width: min(1120px, calc(100% - 24px)); max-width: min(1120px, calc(100% - 24px)); margin-left: 0; margin-right: 0; margin-inline: auto; padding: 8px 0 28px; box-sizing: border-box; } body.role-field #reportPanel.report-selection-active #reportFlowStart { min-height: 0; overflow: visible; align-content: start; } body.role-field #reportPanel.report-selection-active .report-flow-step:not(.hidden) { min-height: 0; height: auto; gap: 14px; grid-template-rows: auto auto; align-content: start; } body.role-field #reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(188px, auto); gap: 16px; align-items: stretch; } body.role-field #reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-card { width: 100%; height: auto; min-height: 188px; max-height: none; aspect-ratio: auto; padding: 22px 20px 18px; align-content: flex-start; } body.role-field #reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-icon { font-size: 1.6rem; } body.role-field #reportPanel:not(.report-selection-active) #reportView { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); min-height: 0; overflow: hidden; gap: 12px; } body.role-field #reportPanel:not(.report-selection-active) :is(#quickIncidentForm, #incidentForm, #ticketForm) { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; padding-bottom: 18px; } body.role-field #reportPanel:not(.report-selection-active) .report-form-sticky-footer { position: static !important; bottom: auto !important; padding: 10px 0 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } } #googleSheetsPanel { display: grid; gap: 14px; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .soc-weekly-subtabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 8px; background: var(--soc-surface-base); border-bottom: 1px solid var(--soc-border); } .soc-weekly-subtab-btn { appearance: none; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--soc-text-sub); font-size: 13px; font-weight: 700; white-space: nowrap; min-height: 34px; padding: 0 8px; cursor: pointer; } .soc-weekly-subtab-btn.is-active { color: var(--soc-brand); border-bottom-color: var(--soc-brand); } .weekly-ops-section { display: grid; gap: 10px; scroll-margin-top: 56px; } .soc-google-sheet-section { border: 1px solid var(--soc-border); border-radius: 12px; padding: 12px; background: var(--soc-surface-overlay-4); } .soc-google-sheet-service { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .soc-google-sheet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .soc-google-sheet-service code { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--soc-border); background: var(--soc-surface-overlay-6); color: var(--soc-text-main); font-size: 12px; word-break: break-all; } .soc-google-sheet-summary-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid rgba(148, 163, 184, 0.32); border-radius: 12px; background: #f8fafc; } .soc-google-sheet-summary-pill, .soc-google-sheet-summary-strip span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.24); background: #ffffff; font-size: 12px; color: #475569; } .soc-google-sheet-active-site { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.3); background: #f8fafc; color: #334155; font-size: 12px; font-weight: 600; white-space: nowrap; } .soc-google-sheet-form-grid { display: grid; gap: 8px; } .soc-google-sheet-form-grid label { font-weight: 600; color: var(--soc-text-main); } .soc-google-sheet-form-grid input, .soc-google-sheet-form-grid select { min-height: 40px; border-radius: 10px; border: 1px solid var(--soc-border); background: var(--soc-surface-base); color: var(--soc-text-main); padding: 0 12px; } .soc-google-sheet-site-row { gap: 6px; } .soc-google-sheet-site-controls { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto auto; gap: 8px; align-items: center; } .soc-google-sheet-site-controls .soc-google-sheet-active-site { display: none; } .soc-google-sheet-mapping-table-wrap { border: 1px solid var(--soc-border); border-radius: 12px; overflow: auto; background: var(--soc-surface-base); } .soc-google-sheet-mapping-table { width: 100%; border-collapse: collapse; min-width: 980px; } .soc-google-sheet-mapping-table th, .soc-google-sheet-mapping-table td { padding: 10px 12px; border-bottom: 1px solid var(--soc-divider); vertical-align: middle; font-size: 13px; color: var(--soc-text-main); } .soc-google-sheet-mapping-table th { font-weight: 700; color: var(--soc-text-sub); background: var(--soc-surface-overlay-4); position: sticky; top: 0; z-index: 1; } .soc-google-sheet-mapping-table tr:last-child td { border-bottom: 0; } .soc-google-sheet-link-cell { display: grid; gap: 4px; min-width: 0; } .soc-google-sheet-link-main { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: var(--soc-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-google-sheet-link-sub { font-size: 12px; color: var(--soc-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-google-sheet-link-tools { display: inline-flex; align-items: center; gap: 6px; } .soc-google-sheet-link-tools .ds-btn { min-height: 26px; padding: 2px 8px; font-size: 11px; } .soc-google-sheet-link-sub--status { max-width: 100%; } .soc-google-sheet-status-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; border-radius: 999px; padding: 0 10px; font-size: 12px; font-weight: 700; border: 1px solid var(--soc-border); background: var(--soc-surface-base); color: var(--soc-text-sub); } .soc-google-sheet-status-pill.is-ok { border-color: #34a853; color: #1e6b35; background: #eaf7ee; } .soc-google-sheet-status-pill.is-error { border-color: #f5a623; color: #a85a00; background: #fff3e8; } .soc-google-sheet-status-pill.is-warning { border-color: #f5a623; color: #a85a00; background: #fff7ed; } .soc-google-sheet-row-actions { display: flex; flex-wrap: wrap; gap: 6px; } .soc-google-sheet-row-actions .ds-btn { min-height: 32px; padding: 6px 10px; font-size: 12px; } .soc-google-sheet-row-action-danger { color: #b91c1c !important; border-color: rgba(239, 68, 68, 0.35) !important; background: #fff !important; } .soc-google-sheet-mapping-modal { width: min(560px, calc(100vw - 24px)); } .soc-google-sheet-tab-name { min-height: 40px; border-radius: 10px; border: 1px solid var(--soc-border); background: var(--soc-surface-base); color: var(--soc-text-main); padding: 0 12px; font-weight: 600; } .soc-google-sheet-rule-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } .soc-google-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; } .soc-google-sheet-status { margin: 0; } .soc-google-sheet-result { border: 1px solid var(--soc-border); border-radius: 12px; padding: 12px; background: var(--soc-surface-overlay-5); display: grid; gap: 8px; } .soc-google-sheet-result-head { display: flex; align-items: center; gap: 8px; } .soc-google-sheet-result-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; border-radius: 999px; padding: 0 10px; font-size: 12px; font-weight: 700; border: 1px solid var(--soc-border); color: var(--soc-text-sub); background: var(--soc-surface-base); } .soc-google-sheet-result-badge.is-ok { border-color: #34a853; color: #1e6b35; background: #eaf7ee; } .soc-google-sheet-result-badge.is-error { border-color: #f5a623; color: #a85a00; background: #fff3e8; } .soc-google-sheet-result-badge.is-warning { border-color: #f5a623; color: #a85a00; background: #fff7ed; } .soc-google-sheet-result-badge.is-warn { border-color: #f59e0b; color: #92400e; background: #fffbeb; } .soc-google-sheet-sheet-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--soc-text-sub); font-size: 12px; } .soc-google-sheet-template-section { display: grid; gap: 10px; } .soc-google-sheet-init-year-section { display: grid; gap: 10px; } .soc-google-sheet-check-row { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--soc-text-sub); font-size: 13px; font-weight: 500; } .soc-google-sheet-check-row input[type="checkbox"] { width: 16px; height: 16px; } @media (max-width: 1024px) { .soc-google-sheet-site-controls { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1024px) { .soc-workspace-panel { width: 100%; max-width: none; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 14px; border: 1px solid rgba(15, 23, 42, 0.08); background: #f7f8fa; box-shadow: none; } .soc-workspace-panel > .panel-title-row, .soc-workspace-panel > .soc-sla-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; margin: 0; } .soc-workspace-panel .panel-title-row .title-inline h2, .soc-workspace-panel .soc-sla-header-title-wrap h2 { margin: 0; font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-line); font-weight: var(--type-title-lg-weight); color: #0f172a; } .soc-workspace-panel .panel-title-row .title-inline { display: inline-flex; align-items: center; gap: 10px; } #dashboardPanel.soc-workspace-profile-subview > .panel-title-row { border-bottom: 0; } .soc-workspace-panel .panel-actions, .soc-workspace-panel .soc-sla-header-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .soc-workspace-panel .ds-btn.ds-btn-sm { min-height: 32px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 600; gap: 8px; } .soc-workspace-panel .ds-btn:not(.ds-btn-sm), .soc-workspace-panel :is(.report-tab, .announcement-mode-btn, .site-filter-btn, .date-filter-btn, .sla-page-btn) { min-height: 40px; height: 40px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; gap: 8px; } .soc-workspace-panel :is(.panel-actions, .soc-report-browse-actions, .soc-sla-header-actions) .ds-btn { border-radius: 8px; } .soc-workspace-summary-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .soc-workspace-summary-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.26); background: rgba(255, 255, 255, 0.92); color: #475569; font-size: 12px; font-weight: 600; white-space: nowrap; } .soc-workspace-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .soc-workspace-card-head h3, .soc-workspace-card-head .audit-subtitle { margin: 0; } .soc-workspace-card-head .meta { margin: 4px 0 0; } .soc-workspace-panel :is(.soc-block, .soc-report-browse-card, .soc-hub-summary-card, .soc-sla-card, .soc-admin-card) { border-radius: 14px; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: none; background: #ffffff; } .soc-workspace-panel.soc-workspace-audit :is(#slaPreviewScroller, .audit-list) { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 12px; background: #fff; } .soc-workspace-panel .chip-row, .soc-workspace-panel .soc-hub-mode-tabs, .soc-workspace-panel .date-filter-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; } .soc-workspace-panel .chip, .soc-workspace-panel .date-filter-btn { min-height: 32px; border-radius: 999px; padding: 0 12px; border: 1px solid rgba(148, 163, 184, 0.36); background: #fff; color: #334155; font-size: 12px; font-weight: 700; } .soc-workspace-panel .chip.is-active, .soc-workspace-panel .date-filter-btn.active { color: #c2410c; border-color: rgba(255, 132, 0, 0.42); background: #fff7ed; } .soc-manage-summary-strip { margin-top: -2px; } .soc-manage-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 380px); gap: 16px; align-items: start; } .soc-manage-section-card { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 14px; background: #fff; padding: 16px; min-height: 0; display: grid; gap: 12px; } .soc-manage-form-card .soc-workspace-card-head { margin-bottom: 2px; } .soc-manage-form-card form { margin: 0; } #accountPanel #accountAdminSection, #accountPanel #accountPasswordSection { display: grid; gap: 16px; } :is(#managerStatusPanel, #peopleHubAccountsPane) { display: grid; gap: 16px; align-content: start; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar { display: grid; gap: 10px; padding: 16px 18px; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-stats { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; min-width: 0; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-stat { min-width: 88px; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-label { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-stat strong { font-size: var(--type-section-md-size, 16px); line-height: var(--type-section-md-line, 24px); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-controls { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; min-width: min(680px, 100%); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-field { min-width: 132px; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-search { min-width: min(240px, 100%); flex: 1 1 240px; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-danger { margin-left: auto; display: flex; align-items: center; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-note { margin: 0; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid { display: grid; gap: 12px; min-height: 0; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-notice { padding: 8px 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); color: var(--ui-text-secondary, var(--soc-text-sub)); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-state { min-height: 144px; display: grid; place-items: center; text-align: center; gap: 4px; padding: 18px; border: 1px dashed var(--ui-divider-default, var(--soc-divider)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-state strong { font-size: var(--type-section-md-size, 16px); line-height: var(--type-section-md-line, 24px); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-state-actions { display: grid; justify-items: center; gap: 8px; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-wrap { min-width: 0; overflow: auto; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface, #fff); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table { width: 100%; min-width: 760px; border-collapse: collapse; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table th, :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table td { padding: 11px 14px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); text-align: left; vertical-align: middle; white-space: nowrap; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table th { position: sticky; top: 0; z-index: 1; background: var(--ui-bg-surface, #fff); font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table td { font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); color: var(--ui-text-primary, var(--soc-text)); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table tbody tr { cursor: pointer; transition: background 0.16s ease; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table tbody tr:hover, :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table tbody tr.is-selected { background: color-mix(in srgb, var(--soc-primary-soft-bg) 48%, var(--ui-bg-surface, #fff)); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-primary { font-weight: 600; color: var(--ui-text-primary, var(--soc-text)); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-secondary { margin-top: 2px; font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); color: var(--ui-text-secondary, var(--soc-text-sub)); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-sort-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-sort-button.is-active { color: var(--ui-text-primary, var(--soc-text)); } :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-sort-indicator { display: inline-flex; min-width: 10px; justify-content: center; } :is(#managerStatusPanel, #peopleHubAccountsPane, #managerStatusDrawer) .soc-status-inline { display: inline-flex; align-items: center; gap: 6px; } :is(#managerStatusPanel, #peopleHubAccountsPane, #managerStatusDrawer) .soc-status-dot.is-online { background: #16a34a; } :is(#managerStatusPanel, #peopleHubAccountsPane, #managerStatusDrawer) .soc-status-dot.is-idle { background: #f59e0b; } :is(#managerStatusPanel, #peopleHubAccountsPane, #managerStatusDrawer) .soc-status-dot.is-offline { background: #94a3b8; } #managerStatusDrawer .soc-monitoring-drawer-body { display: grid; gap: 14px; padding: 14px 16px 16px; overflow: auto; } #managerStatusDrawer .soc-people-account-detail-shell { display: grid; gap: 16px; min-width: 0; } #managerStatusDrawer .soc-people-account-detail-empty { display: grid; align-content: center; gap: 6px; min-height: 220px; padding: 18px; border: 1px dashed var(--ui-divider-default, var(--soc-divider)); border-radius: 14px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } #managerStatusDrawer .soc-people-account-detail-empty strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 16px; line-height: 24px; } #managerStatusDrawer .soc-people-account-hero { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary-soft-bg) 38%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); } #managerStatusDrawer .soc-people-account-hero-copy { display: grid; gap: 4px; } #managerStatusDrawer .soc-people-account-eyebrow { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } #managerStatusDrawer .soc-people-account-hero-copy strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 22px; line-height: 1.28; overflow-wrap: anywhere; } #managerStatusDrawer .soc-people-account-hero-copy .meta { margin: 0; } #managerStatusDrawer .soc-people-account-hero-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #managerStatusDrawer .soc-people-account-chip { border-color: var(--ui-border-subtle, var(--soc-border)); background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 88%, transparent); color: var(--ui-text-primary, var(--soc-text)); } #managerStatusDrawer .soc-people-account-stat-grid, #managerStatusDrawer .soc-people-account-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #managerStatusDrawer .soc-people-account-stat, #managerStatusDrawer .soc-people-account-info-card { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); min-width: 0; } #managerStatusDrawer .soc-people-account-stat span, #managerStatusDrawer .soc-people-account-info-card span { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 600; } #managerStatusDrawer .soc-people-account-stat strong, #managerStatusDrawer .soc-people-account-info-card strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 15px; line-height: 22px; overflow-wrap: anywhere; } #managerStatusDrawer .soc-people-account-section { display: grid; gap: 10px; min-width: 0; } #managerStatusDrawer .soc-people-account-section-head { display: grid; gap: 4px; } #managerStatusDrawer .soc-people-account-section-head h4 { margin: 0; color: var(--ui-text-primary, var(--soc-text)); font-size: 15px; line-height: 22px; } #managerStatusDrawer .soc-people-account-section-head .meta { display: none; } #managerStatusDrawer .soc-people-account-session-list { display: grid; gap: 0; padding: 0; border-top: 0; } #managerStatusDrawer .soc-people-account-session-list .soc-mini-row { padding-inline: 0; } #managerStatusDrawer .soc-monitoring-drawer-section { display: grid; gap: 10px; } #managerStatusDrawer .soc-monitoring-drawer-section > h4 { margin: 0; font-size: var(--type-section-md-size, 16px); line-height: var(--type-section-md-line, 24px); } #managerStatusDrawer .soc-monitoring-drawer-grid { display: grid; gap: 10px; } #managerStatusDrawer .soc-monitoring-drawer-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } #managerStatusDrawer .soc-monitoring-drawer-row:last-child { padding-bottom: 0; border-bottom: 0; } #managerStatusDrawer .soc-monitoring-drawer-row .label { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); } #employeeScorePanel .soc-employee-score-summary-strip { margin-top: -2px; } #employeeScorePanel .soc-employee-score-builder { gap: 14px; } #employeeScorePanel .soc-analytics-header { padding: 16px; border-radius: 14px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface, var(--soc-panel-bg)); } #employeeScorePanel .soc-report-builder-step { padding: 16px; border-radius: 14px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); background: var(--ui-bg-surface, var(--soc-panel-bg)); } #employeeScorePanel .soc-employee-score-content { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; } #reportsHubView .soc-hub-header { padding-bottom: 12px; } #reportsHubView .soc-hub-header-left { display: grid; gap: 4px; } #reportsHubView .soc-hub-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #reportsHubView .soc-hub-summary-strip { justify-content: flex-end; flex: 1 1 auto; } #reportsHubView .soc-hub-preview-scroller { padding-bottom: 0; gap: 12px; } #reportsHubView .soc-hub-preview-scroller[data-hub-mode="weekly"], #reportsHubView .soc-hub-preview-scroller[data-hub-mode="apple"] { grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr); } #reportsHubView .soc-hub-section-card { padding: 16px; border-radius: 16px; } #reportsHubView .soc-hub-section-card::before { top: 14px; bottom: 14px; } #reportsHubView { display: grid; gap: 20px; } #reportsHubView .soc-hub-header { display: grid; gap: 10px; margin: 0; padding: 0 0 12px; border-bottom: 1px solid var(--divider-default, #d2dae5); } #reportsHubView .soc-hub-header-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } #reportsHubView .soc-hub-header-left { display: grid; gap: 6px; } #reportsHubView .soc-hub-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; } #reportsHubView .soc-hub-filter-panel, #reportsHubView .soc-hub-results-panel, #reportsHubView .soc-hub-preview-panel { border: 1px solid var(--border-subtle, #d8dee6); border-radius: 12px; background: var(--bg-surface, #fff); box-shadow: none; } #reportsHubView .soc-hub-filter-header, #reportsHubView .soc-hub-results-header, #reportsHubView .soc-hub-preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--divider-default, #d2dae5); background: var(--bg-surface-subtle, #f8fafc); } #reportsHubView .soc-hub-filter-heading { display: grid; gap: 4px; } #reportsHubView .soc-hub-filter-body, #reportsHubView .soc-hub-results-body, #reportsHubView .soc-hub-preview-body { padding: 20px 24px 24px; } #reportsHubView .soc-hub-filter-body { display: grid; gap: 18px; } #reportsHubView .soc-hub-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; align-items: end; } #reportsHubView .soc-field-block { display: grid; gap: 6px; min-width: 0; } #reportsHubView .soc-field-block > span { color: var(--text-secondary, #667085); font-size: 12px; font-weight: 600; line-height: 16px; } #reportsHubView .soc-hub-custom-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-column: span 2; } #reportsHubView .soc-hub-filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } #reportsHubView .soc-hub-filter-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } #reportsHubView .soc-hub-results-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } #reportsHubView.has-selected-result .soc-hub-results-layout { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 380px); } #reportsHubView .soc-hub-preview-panel.hidden { display: none; } #reportsHubView .soc-hub-results-count { flex-shrink: 0; color: var(--text-primary, #101828); font-size: 20px; font-weight: 700; line-height: 28px; } #reportsHubView .soc-hub-results-state, #reportsHubView .soc-hub-preview-empty { min-height: 164px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; border: 1px solid var(--border-subtle, #d8dee6); border-radius: 12px; color: var(--text-secondary, #667085); text-align: center; background: var(--bg-surface-subtle, #f8fafc); } #reportsHubView .soc-hub-state-title { color: var(--text-primary, #101828); font-size: 16px; font-weight: 600; line-height: 24px; } #reportsHubView .soc-hub-state-description { margin: 0; max-width: 420px; color: var(--text-secondary, #667085); font-size: 13px; line-height: 18px; } #reportsHubView .soc-hub-results-table-wrap { overflow-x: auto; } #reportsHubView .soc-hub-results-table { width: 100%; border-collapse: collapse; min-width: 760px; } #reportsHubView .soc-hub-results-table th, #reportsHubView .soc-hub-results-table td { padding: 14px 12px; border-bottom: 1px solid var(--divider-default, #d2dae5); text-align: left; vertical-align: middle; } #reportsHubView .soc-hub-results-table th { color: var(--text-secondary, #667085); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; } #reportsHubView .soc-hub-results-table td { color: var(--text-primary, #101828); font-size: 13px; line-height: 18px; } #reportsHubView .soc-hub-results-table td strong { display: block; font-size: 13px; font-weight: 600; line-height: 18px; } #reportsHubView .soc-hub-results-table tr.soc-hub-result-row { cursor: pointer; } #reportsHubView .soc-hub-results-table tr.soc-hub-result-row:hover td { background: rgba(248, 250, 252, 0.92); } #reportsHubView .soc-hub-results-table tr.soc-hub-result-row.is-selected td { background: rgba(255, 247, 237, 0.86); } #reportsHubView .soc-hub-results-table .is-align-right { text-align: right; } #reportsHubView .soc-hub-preview-body { display: grid; gap: 16px; } #reportsHubView .soc-hub-preview-empty { min-height: auto; padding: 16px; } #reportsHubView .soc-hub-preview-summary { display: grid; gap: 6px; } #reportsHubView .soc-hub-preview-title { color: var(--text-primary, #101828); font-size: 16px; font-weight: 600; line-height: 24px; } #reportsHubView .soc-hub-preview-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #reportsHubView .soc-hub-preview-fact { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border-subtle, #d8dee6); border-radius: 10px; background: var(--bg-surface-subtle, #f8fafc); } #reportsHubView .soc-hub-preview-fact-label { color: var(--text-secondary, #667085); font-size: 12px; font-weight: 600; line-height: 16px; } #reportsHubView .soc-hub-preview-fact-value { color: var(--text-primary, #101828); font-size: 14px; font-weight: 400; line-height: 20px; } #reportsHubView .soc-hub-preview-section { display: grid; gap: 8px; padding-top: 4px; border-top: 1px solid var(--divider-default, #d2dae5); } #reportsHubView .soc-hub-preview-section h4 { margin: 0; color: var(--text-primary, #101828); font-size: 16px; font-weight: 600; line-height: 24px; } #reportsHubView .soc-hub-preview-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-primary, #101828); font-size: 13px; line-height: 18px; } #reportsHubView .soc-hub-preview-actions { display: flex; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--divider-default, #d2dae5); } @media (max-width: 1100px) { #reportsHubView .soc-hub-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #reportsHubView .soc-hub-results-layout, #reportsHubView.has-selected-result .soc-hub-results-layout { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { #reportsHubView .soc-hub-filter-header, #reportsHubView .soc-hub-results-header, #reportsHubView .soc-hub-preview-header, #reportsHubView .soc-hub-filter-body, #reportsHubView .soc-hub-results-body, #reportsHubView .soc-hub-preview-body { padding-left: 16px; padding-right: 16px; } #reportsHubView .soc-hub-filter-grid, #reportsHubView .soc-hub-custom-range, #reportsHubView .soc-hub-preview-facts { grid-template-columns: minmax(0, 1fr); } #reportsHubView .soc-hub-filter-actions { align-items: stretch; } #reportsHubView .soc-hub-filter-cta { justify-content: stretch; } #reportsHubView .soc-hub-filter-cta > .ds-btn { flex: 1 1 0; } } #slaPanel .soc-sla-summary-strip, #auditPanel .soc-audit-summary-strip { margin-top: -4px; } #slaPanel .soc-sla-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); gap: 16px; align-items: start; } #slaPanel .soc-sla-side-column { display: grid; gap: 16px; } #slaPanel .soc-sla-section-card { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 14px; background: #fff; padding: 16px; } #slaPanel .soc-sla-advanced-settings { padding: 14px 16px 16px; border-radius: 14px; margin: 0; } #slaPanel .soc-sla-advanced-settings > summary { margin-bottom: 0; } #slaPanel .soc-sla-advanced-settings[open] > summary { margin-bottom: 12px; } #auditPanel .soc-audit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } #auditPanel .soc-audit-section-card { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 14px; background: #fff; padding: 16px; min-height: 0; display: grid; gap: 10px; } #auditPanel .audit-list { min-height: 220px; padding: 10px; } } .soc-inline-overflow-menu { position: relative; display: inline-flex; align-items: center; } .soc-inline-overflow-menu summary { list-style: none; display: inline-flex; align-items: center; } .soc-inline-overflow-menu summary::-webkit-details-marker { display: none; } .soc-inline-overflow-panel { display: none; } .soc-inline-overflow-menu[open] > .soc-inline-overflow-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 4; min-width: 120px; padding: 8px; border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 10px; background: #fff; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12); display: grid; gap: 6px; } .soc-inline-overflow-menu.is-disabled { pointer-events: none; opacity: 0.5; } .soc-apple-weekly-shell { gap: 12px; } .soc-apple-weekly-mount { display: grid; gap: 12px; min-height: 0; } .soc-apple-weekly-danger-zone { margin-top: 8px; padding: 14px 16px; border: 1px solid rgba(239, 68, 68, 0.28); border-radius: 12px; background: #fff5f5; display: grid; gap: 8px; } .soc-apple-weekly-danger-zone h4 { margin: 0; color: #b91c1c; font-size: 15px; font-weight: 700; } .soc-apple-weekly-danger-zone .soc-google-sheet-actions { margin-top: 2px; } .soc-apple-weekly-validation-log { margin-top: 4px; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 14px; background: #f8fafc; padding: 14px; display: grid; gap: 10px; } .soc-apple-weekly-validation-log-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .soc-apple-weekly-validation-log h5 { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; } .soc-apple-weekly-validation-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 10px; overflow: hidden; } .soc-apple-weekly-validation-table th, .soc-apple-weekly-validation-table td { padding: 10px 12px; text-align: left; font-size: 12px; color: #475569; border-bottom: 1px solid rgba(148, 163, 184, 0.2); vertical-align: middle; } .soc-apple-weekly-validation-table th { font-weight: 700; color: #334155; background: #f8fafc; } .soc-apple-weekly-validation-table tbody tr:last-child td { border-bottom: 0; } .soc-apple-weekly-validation-table .soc-apple-weekly-validation-message { max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-apple-weekly-month-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .soc-apple-weekly-month-tabs .soc-apple-weekly-section-chip { min-height: 32px; padding: 0 10px; } .soc-weekly-subtabs-ops { position: sticky; top: 0; z-index: 2; } .soc-apple-weekly-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--soc-border); border-radius: 12px; background: var(--soc-surface-overlay-4); } .soc-apple-weekly-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .soc-apple-weekly-field { display: grid; gap: 6px; } .soc-apple-weekly-field > span { font-size: 12px; font-weight: 700; color: var(--soc-text-sub); } .soc-apple-weekly-field .ds-input { width: 100%; min-height: 38px; } .soc-apple-weekly-meta { display: grid; gap: 4px; margin: 0; } .soc-apple-weekly-meta p { margin: 0; font-size: 12px; color: var(--soc-text-sub); } .soc-apple-weekly-force-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--soc-text-sub); padding: 0 2px; } .soc-apple-weekly-sections { display: flex; flex-wrap: wrap; gap: 8px; } .soc-apple-weekly-section-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; min-height: 30px; border: 1px solid var(--soc-border); border-radius: 999px; background: var(--soc-surface-overlay-6); font-size: 12px; color: var(--soc-text-main); } .soc-apple-weekly-section-chip input { width: 14px; height: 14px; } .soc-apple-weekly-grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .soc-apple-weekly-form-grid { display: grid; gap: 8px; } .soc-apple-weekly-form-grid label { display: grid; gap: 4px; } .soc-apple-weekly-form-grid label > span { font-size: 12px; color: var(--soc-text-sub); } .soc-apple-weekly-form-grid .ds-input { width: 100%; min-height: 36px; } .soc-apple-weekly-form-grid .ds-select { width: 100%; min-height: 36px; } .soc-apple-weekly-time-picker { display: grid; grid-template-columns: minmax(86px, 0.9fr) minmax(72px, 0.8fr) minmax(72px, 0.8fr); gap: 6px; } .soc-apple-weekly-time-picker-select { width: 100%; min-width: 0; } .soc-apple-weekly-check { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: 6px; font-size: 12px; color: var(--soc-text-sub); } .soc-apple-weekly-day-row { display: flex; flex-wrap: wrap; gap: 8px 12px; } .soc-apple-weekly-day-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--soc-text-main); } .soc-apple-weekly-override-list, .soc-apple-weekly-conflict-list { display: grid; gap: 8px; } .soc-apple-weekly-override-item, .soc-apple-weekly-conflict-item { border: 1px solid var(--soc-border); border-radius: 10px; padding: 10px; display: grid; gap: 6px; background: var(--soc-surface-base); } .soc-apple-weekly-override-item strong, .soc-apple-weekly-conflict-item strong { font-size: 13px; } .soc-apple-weekly-override-item span, .soc-apple-weekly-conflict-item .meta { font-size: 12px; color: var(--soc-text-sub); margin: 0; } @media (max-width: 1279px) { .soc-apple-weekly-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soc-apple-weekly-grid-two { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .soc-apple-weekly-grid { grid-template-columns: minmax(0, 1fr); } } #googleSheetsPanel.soc-apple-weekly-mode { width: 100%; max-width: none; margin: 0; padding: 0 0 24px; gap: 18px; background: transparent !important; border-radius: 0 !important; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: stretch; border: 0 !important; box-shadow: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .panel-title-row { margin-bottom: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-weekly-subtabs-ops { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-workspace-head { display: grid; gap: 14px; padding: 0 0 4px; border-radius: 0; border: 0; background: transparent; box-shadow: none; width: 100%; } .soc-apple-weekly-workspace-kicker { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.28); background: #f8fafc; color: #64748b; font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); } .soc-apple-weekly-workspace-title h3 { margin: 6px 0 0; font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-line); font-weight: var(--type-title-lg-weight); color: #0f172a; } .soc-apple-weekly-workspace-title p { margin: 4px 0 0; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); color: #475569; } .soc-apple-weekly-global-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; } .soc-apple-weekly-global-controls { display: grid; grid-template-columns: minmax(260px, 1.35fr) minmax(180px, 0.75fr); gap: 12px; min-width: 0; } .soc-apple-weekly-global-field { display: grid; gap: 6px; } .soc-apple-weekly-global-field > span { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); color: #64748b; } .soc-apple-weekly-global-field .ds-input { min-height: 42px; } .soc-apple-weekly-global-status { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .soc-apple-weekly-status-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); background: #f8fafc; font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); color: #334155; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-apple-weekly-status-badge[data-variant="is-ok"] { background: #ecfdf3; border-color: rgba(34, 197, 94, 0.38); color: #166534; } .soc-apple-weekly-status-badge[data-variant="is-error"] { background: #fff1f2; border-color: rgba(244, 63, 94, 0.38); color: #9f1239; } .soc-apple-weekly-main-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 14px; overflow: hidden; width: 100%; max-width: none; } .soc-apple-weekly-main-tab-btn { appearance: none; border: 0; background: #f8fafc; color: #64748b; min-height: 48px; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .soc-apple-weekly-main-tab-btn.is-active { background: #fff7ed; color: #c2410c; box-shadow: inset 0 -3px 0 #ff8400; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tr.is-selected-year td { background: #fff7ed; } .soc-apple-weekly-main-help { display: none; } .soc-apple-weekly-main-help h4 { margin: 0 0 4px; font-size: var(--type-section-md-size); line-height: var(--type-section-md-line); color: #0f172a; font-weight: var(--type-section-md-weight); } .soc-apple-weekly-main-help p { margin: 0; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); color: #475569; } .soc-apple-weekly-subtabs { display: none !important; } .soc-apple-weekly-subtab-btn { display: none !important; } .soc-apple-weekly-subtab-btn.is-active { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-section, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card-slim, #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-card { border-radius: 16px; border: 1px solid rgba(15, 23, 42, 0.08); background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035); padding: 18px; } #googleSheetsPanel.soc-apple-weekly-mode .ds-card-subtitle, #googleSheetsPanel.soc-apple-weekly-mode h4 { font-size: var(--type-section-md-size); line-height: var(--type-section-md-line); font-weight: var(--type-section-md-weight); color: #0f172a; margin: 0; } #googleSheetsPanel.soc-apple-weekly-mode .meta, #googleSheetsPanel.soc-apple-weekly-mode .help { color: #64748b; font-size: 13px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-weekly-subtabs { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode [data-subtabs-scope="google-sheets"] { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-weekly-subtab-btn { min-height: 40px; padding: 0 12px; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 999px; background: #fff; color: #64748b; font-size: 13px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-weekly-subtab-btn.is-active { color: #c2410c; border-color: rgba(255, 132, 0, 0.38); background: #fff7ed; } .soc-apple-weekly-step-head { display: grid; gap: 2px; margin-bottom: 10px; } .soc-apple-weekly-step-head h4 { margin: 0; } .soc-apple-weekly-step-head .meta { margin: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-legacy-setup { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode { display: block; padding: 16px 18px 28px; gap: 0; border: 0; background: #f4f7fb; box-shadow: none; } #googleSheetsPanel.soc-apple-weekly-mode > .panel-title-row { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode #appleWeeklyWorkspaceMount { display: grid; gap: 16px; width: min(1400px, 100%); margin: 0 auto; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-mount:empty, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-phase1:empty { display: none; } .soc-apple-weekly-page-head { display: grid; gap: 4px; width: min(1400px, 100%); margin: 0 auto 4px; } .soc-apple-weekly-page-title-block { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 8px; } .soc-apple-weekly-page-title-copy { display: grid; gap: 2px; } .soc-apple-weekly-page-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #c2410c; } .soc-apple-weekly-page-title-block h2 { margin: 0; font-size: 28px; line-height: 1.08; font-weight: 800; color: #0f172a; white-space: nowrap; text-wrap: nowrap; } .soc-apple-weekly-page-title-block p { margin: 0; font-size: 14px; line-height: 1.5; color: #475569; } .soc-apple-weekly-page-head-meta { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; } .soc-apple-weekly-page-flow-pill, .soc-apple-weekly-page-selection, .soc-apple-weekly-flow-context-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(255, 255, 255, 0.88); color: #475569; font-size: 12px; font-weight: 700; } .soc-apple-weekly-flow-shell { display: grid; gap: 8px; } .soc-apple-weekly-flow-back-row { display: flex; justify-content: flex-start; } .soc-apple-weekly-flow-back-row .ds-btn { min-height: 32px; padding-inline: 0; border: 0; background: transparent; color: #475569; box-shadow: none; } .soc-apple-weekly-flow-stepper-region, .soc-apple-weekly-flow-header, .soc-apple-weekly-flow-footer { width: 100%; } .soc-apple-weekly-flow-stepper { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; } .soc-apple-weekly-flow-step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 2px 12px 0 0; } .soc-apple-weekly-flow-step::after { content: ""; position: absolute; top: 18px; left: 42px; right: -8px; height: 2px; background: rgba(148, 163, 184, 0.3); z-index: 0; } .soc-apple-weekly-flow-step:last-child::after { display: none; } .soc-apple-weekly-flow-step-node { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 2px solid rgba(148, 163, 184, 0.35); background: #fff; color: #64748b; font-size: 13px; font-weight: 800; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05); } .soc-apple-weekly-flow-step.is-complete::after { background: rgba(34, 197, 94, 0.45); } .soc-apple-weekly-flow-step.is-complete .soc-apple-weekly-flow-step-node { border-color: rgba(34, 197, 94, 0.55); background: #ecfdf5; color: #15803d; } .soc-apple-weekly-flow-step.is-active .soc-apple-weekly-flow-step-node { border-color: rgba(255, 132, 0, 0.5); background: #fff7ed; color: #c2410c; } .soc-apple-weekly-flow-step-copy { position: relative; z-index: 1; display: grid; gap: 0; min-width: 0; } .soc-apple-weekly-flow-step-copy strong { color: #0f172a; font-size: 13px; line-height: 1.25; } .soc-apple-weekly-flow-step-copy span { display: none; } .soc-apple-weekly-flow-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px; } .soc-apple-weekly-flow-header-copy { display: grid; gap: 2px; } .soc-apple-weekly-flow-eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #c2410c; } .soc-apple-weekly-flow-header h3 { margin: 0; font-size: 24px; line-height: 1.1; font-weight: 800; color: #0f172a; } .soc-apple-weekly-flow-header .meta { margin: 0; color: #475569; } .soc-apple-weekly-flow-context { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .soc-apple-weekly-flow-layout { display: grid; grid-template-columns: minmax(0, 1.74fr) minmax(280px, 0.86fr); gap: 16px; align-items: start; } .soc-apple-weekly-flow-layout.is-main-only { grid-template-columns: minmax(0, 1fr); } .soc-apple-weekly-flow-main, .soc-apple-weekly-flow-guide, .soc-apple-weekly-flow-footer { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 20px; background: #ffffff; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05); } .soc-apple-weekly-flow-main { padding: 16px; min-width: 0; } .soc-apple-weekly-flow-main--with-inline-footer { padding-bottom: 0; overflow: hidden; } .soc-apple-weekly-flow-guide { display: grid; gap: 12px; padding: 18px; } .soc-apple-weekly-guide-card { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.16); background: #f8fafc; } .soc-apple-weekly-guide-card h4 { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 800; color: #0f172a; } .soc-apple-weekly-guide-card .meta { margin: 0; } .soc-apple-weekly-guide-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: #475569; font-size: 13px; line-height: 1.5; } .soc-apple-weekly-stage-surface { display: grid; gap: 14px; } .soc-apple-weekly-stage-surface > .soc-apple-weekly-step-head { display: none; } .soc-apple-weekly-stage-section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; } .soc-apple-weekly-stage-section-head h4 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 800; color: #0f172a; } .soc-apple-weekly-stage-section-head .meta { margin: 4px 0 0; } .soc-apple-weekly-flow-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; } .soc-apple-weekly-flow-footer--inline { width: calc(100% + 32px); margin: 2px -16px 0; padding: 14px 16px 16px; border: 0; border-top: 1px solid rgba(148, 163, 184, 0.16); border-radius: 0 0 20px 20px; background: transparent; box-shadow: none; } .soc-apple-weekly-flow-footer-left, .soc-apple-weekly-flow-footer-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .soc-apple-weekly-flow-footer-right { justify-content: flex-end; margin-left: auto; } .soc-apple-weekly-flow-footer .ds-btn { min-width: 110px; } .soc-apple-weekly-flow-footer-placeholder { display: none; } .soc-apple-weekly-setup-phase1 { display: grid; gap: 16px; justify-items: stretch; } .soc-apple-weekly-setup-shell-card, .soc-apple-weekly-setup-list-card { display: grid; gap: 14px; width: min(1180px, 100%); margin: 0 auto; padding: 18px 20px; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 16px; background: #ffffff; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04); } .soc-apple-weekly-setup-shell-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; } .soc-apple-weekly-setup-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #c2410c; } .soc-apple-weekly-setup-shell-head h3, .soc-apple-weekly-setup-complete-card h4 { margin: 0; } .soc-apple-weekly-setup-head-note { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px; background: #f8fafc; border: 1px solid rgba(148, 163, 184, 0.24); font-size: 12px; font-weight: 600; color: #475569; } .soc-apple-weekly-setup-stepper { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .soc-apple-weekly-setup-step { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.22); background: #f8fafc; color: #64748b; } .soc-apple-weekly-setup-step.is-active { border-color: rgba(255, 132, 0, 0.34); background: #fff7ed; color: #9a3412; } .soc-apple-weekly-setup-step.is-complete { border-color: rgba(34, 197, 94, 0.24); background: #f0fdf4; color: #166534; } .soc-apple-weekly-setup-step-index { font-size: 12px; font-weight: 700; } .soc-apple-weekly-setup-step-label { font-size: 13px; font-weight: 700; color: #0f172a; } .soc-apple-weekly-setup-stage { display: grid; gap: 16px; padding: 18px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.18); background: #f8fafc; } .soc-apple-weekly-setup-shell-card .soc-apple-weekly-setup-stage > .soc-apple-weekly-step-head { display: none; } .soc-apple-weekly-setup-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .soc-apple-weekly-setup-field { display: grid; gap: 6px; } .soc-apple-weekly-setup-field--full { grid-column: 1 / -1; } .soc-apple-weekly-setup-field > span { font-size: 12px; font-weight: 700; color: #475569; } .soc-apple-weekly-setup-context-line { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.18); background: #f8fafc; color: #334155; } .soc-apple-weekly-setup-context-line strong { color: #0f172a; } .soc-apple-weekly-setup-context-line em { font-style: normal; color: #64748b; } .soc-apple-weekly-setup-note-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.18); background: #fff; } .soc-apple-weekly-setup-note-row .meta { margin: 0; line-height: 1.5; } .soc-apple-weekly-setup-home-hero { display: grid; gap: 18px; padding: 20px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 18px; background: linear-gradient(180deg, #fffdf9 0%, #ffffff 100%); } .soc-apple-weekly-setup-home-hero-copy { display: grid; gap: 8px; } .soc-apple-weekly-setup-home-hero-copy h4 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 800; color: #0f172a; } .soc-apple-weekly-setup-home-hero-copy .meta { margin: 0; max-width: 760px; } .soc-apple-weekly-setup-home-stats, .soc-apple-weekly-setup-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .soc-apple-weekly-summary-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 2px 0; } .soc-apple-weekly-summary-list-grid div { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.14); } .soc-apple-weekly-summary-list-grid div:nth-last-child(-n + 2) { border-bottom: 0; } .soc-apple-weekly-summary-list-grid dd { display: grid; gap: 4px; } .soc-apple-weekly-summary-list-grid dd strong { font-size: 16px; line-height: 1.3; font-weight: 800; color: #0f172a; } .soc-apple-weekly-summary-list-grid--compact dd strong { font-size: 15px; } .soc-apple-weekly-summary-list-grid dd .meta { margin: 0; color: #64748b; } .soc-apple-weekly-setup-home-stat, .soc-apple-weekly-setup-summary-card { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 16px; background: #ffffff; } .soc-apple-weekly-setup-home-stat span, .soc-apple-weekly-setup-summary-card span { font-size: 12px; font-weight: 700; color: #64748b; } .soc-apple-weekly-setup-home-stat strong, .soc-apple-weekly-setup-summary-card strong { font-size: 18px; line-height: 1.3; font-weight: 800; color: #0f172a; } .soc-apple-weekly-setup-home-stat .meta, .soc-apple-weekly-setup-summary-card .meta { margin: 0; } .soc-apple-weekly-setup-step-stack { display: grid; gap: 12px; } .soc-apple-weekly-setup-section { display: grid; gap: 12px; padding: 12px; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 16px; background: #ffffff; } .soc-apple-weekly-setup-section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; } .soc-apple-weekly-setup-section-head h4 { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 800; color: #0f172a; } .soc-apple-weekly-setup-section-head .meta { margin: 4px 0 0; } .soc-apple-weekly-setup-callout { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 14px; background: #ffffff; } .soc-apple-weekly-setup-callout.is-warning { border-color: rgba(245, 158, 11, 0.28); background: #fffbeb; } .soc-apple-weekly-setup-callout strong, .soc-apple-weekly-setup-callout h5 { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 800; color: #0f172a; } .soc-apple-weekly-setup-callout p, .soc-apple-weekly-setup-callout .meta { margin: 0; } .soc-apple-weekly-setup-link-example { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(148, 163, 184, 0.28); background: #f8fafc; } .soc-apple-weekly-setup-link-example strong { color: #0f172a; font-size: 13px; font-weight: 800; } .soc-apple-weekly-setup-link-example code { display: block; padding: 10px 12px; border-radius: 12px; background: rgba(15, 23, 42, 0.04); color: #0f172a; font-size: 13px; line-height: 1.5; white-space: nowrap; overflow-x: auto; } .soc-apple-weekly-setup-link-example .meta { margin: 0; } .soc-apple-weekly-setup-verify-grid, .soc-apple-weekly-setup-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .soc-apple-weekly-setup-rule-grid--single { grid-template-columns: minmax(0, 1fr); } .soc-apple-weekly-setup-rule-panel { display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 16px; background: #ffffff; } .soc-apple-weekly-setup-status-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .soc-apple-weekly-setup-status-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.18); background: #ffffff; } .soc-apple-weekly-setup-status-list li.is-ready { border-color: rgba(34, 197, 94, 0.22); background: #f0fdf4; } .soc-apple-weekly-setup-status-list strong { display: block; margin: 0; color: #0f172a; font-size: 13px; font-weight: 800; } .soc-apple-weekly-setup-status-list p { margin: 4px 0 0; color: #64748b; font-size: 12px; line-height: 1.45; } .soc-apple-weekly-setup-status-list span { align-self: start; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: #f8fafc; color: #475569; font-size: 12px; font-weight: 700; } .soc-apple-weekly-sync-selection-list { display: grid; gap: 12px; } .soc-apple-weekly-sync-selection-card { appearance: none; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 16px; background: #ffffff; text-align: left; cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } .soc-apple-weekly-sync-selection-card:hover { border-color: rgba(255, 132, 0, 0.32); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05); } .soc-apple-weekly-sync-selection-card.is-selected { border-color: rgba(255, 132, 0, 0.36); background: #fffaf5; box-shadow: 0 12px 28px rgba(255, 132, 0, 0.08); } .soc-apple-weekly-sync-selection-radio { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 999px; border: 2px solid rgba(148, 163, 184, 0.36); background: #ffffff; } .soc-apple-weekly-sync-selection-radio > span { width: 10px; height: 10px; border-radius: 999px; background: transparent; transition: background-color 160ms ease; } .soc-apple-weekly-sync-selection-card.is-selected .soc-apple-weekly-sync-selection-radio { border-color: rgba(255, 132, 0, 0.5); background: #fff7ed; } .soc-apple-weekly-sync-selection-card.is-selected .soc-apple-weekly-sync-selection-radio > span { background: #ea580c; } .soc-apple-weekly-sync-selection-main { display: grid; gap: 8px; min-width: 0; } .soc-apple-weekly-sync-selection-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } .soc-apple-weekly-sync-selection-head strong { color: #0f172a; font-size: 16px; line-height: 1.3; font-weight: 800; } .soc-apple-weekly-sync-selection-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; } .soc-apple-weekly-sync-selection-facts span { display: grid; gap: 2px; color: #475569; font-size: 12px; line-height: 1.45; } .soc-apple-weekly-sync-selection-facts strong { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #94a3b8; } .soc-apple-weekly-sync-selection-meta { display: flex; flex-wrap: wrap; gap: 8px; } .soc-apple-weekly-sync-selection-meta span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; background: #f8fafc; border: 1px solid rgba(148, 163, 184, 0.16); color: #475569; font-size: 12px; line-height: 1.4; } .soc-apple-weekly-sync-selection-note { display: block; min-width: 0; margin: 0; } .soc-apple-weekly-inline-hint { color: #475569; font-size: 13px; line-height: 1.5; } .soc-apple-weekly-setup-complete-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 24px; border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 20px; background: linear-gradient(180deg, #f6fff9 0%, #ffffff 100%); } .soc-apple-weekly-setup-complete-mark { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 999px; background: #ecfdf5; color: #15803d; font-size: 30px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.18); } .soc-apple-weekly-setup-complete-copy { display: grid; gap: 8px; } .soc-apple-weekly-setup-complete-copy h4 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 800; color: #0f172a; } .soc-apple-weekly-setup-complete-copy .meta { margin: 0; } .soc-apple-weekly-setup-footer { padding-top: 2px; justify-content: flex-end; } .soc-apple-weekly-setup-footer .ds-btn { min-width: 120px; } .soc-apple-weekly-setup-complete-card { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(34, 197, 94, 0.18); background: #f0fdf4; } .soc-apple-weekly-setup-complete-card .meta { margin: 0; } .soc-apple-weekly-guide-emphasis { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 132, 0, 0.18); background: #fff7ed; } .soc-apple-weekly-guide-emphasis strong, .soc-apple-weekly-guide-emphasis .meta { margin: 0; } .soc-apple-weekly-preview-stage { gap: 18px; } .soc-apple-weekly-preview-state { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.18); background: #fffdf9; } .soc-apple-weekly-preview-state.is-ok { border-color: rgba(34, 197, 94, 0.24); background: #f0fdf4; } .soc-apple-weekly-preview-state.is-warning { border-color: rgba(245, 158, 11, 0.24); background: #fffbeb; } .soc-apple-weekly-preview-state.is-error { border-color: rgba(239, 68, 68, 0.26); background: #fff7f7; } .soc-apple-weekly-preview-state-head { display: grid; gap: 6px; } .soc-apple-weekly-preview-state-head h4 { margin: 0; font-size: 20px; line-height: 1.22; font-weight: 800; color: #0f172a; } .soc-apple-weekly-preview-state-head .meta { margin: 0; } .soc-apple-weekly-preview-state-points { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #475569; font-size: 13px; line-height: 1.5; } .soc-apple-weekly-preview-progress-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .soc-apple-weekly-preview-progress-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.18); background: #ffffff; color: #0f172a; font-weight: 700; } .soc-apple-weekly-preview-progress-list li > span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 12px; font-weight: 800; } .soc-apple-weekly-running-state { display: grid; gap: 14px; padding: 18px; border-radius: 18px; border: 1px solid rgba(249, 115, 22, 0.18); background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%); } .soc-apple-weekly-running-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; } .soc-apple-weekly-running-head h4, .soc-apple-weekly-running-head .meta { margin: 0; } .soc-apple-weekly-running-head h4 { font-size: 20px; line-height: 1.22; font-weight: 800; color: #0f172a; } .soc-apple-weekly-running-head strong { color: #c2410c; font-size: 14px; line-height: 1.3; font-weight: 800; white-space: nowrap; } .soc-apple-weekly-running-line { position: relative; height: 8px; border-radius: 999px; overflow: hidden; background: #ffedd5; } .soc-apple-weekly-running-line > span { position: relative; display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fb923c 0%, #f97316 100%); overflow: hidden; transition: width 260ms ease; } .soc-apple-weekly-running-line > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 36%, rgba(255, 255, 255, 0.5) 50%, transparent 100%); transform: translateX(-100%); animation: soc-long-task-progress-sheen 1.05s ease-in-out infinite; } .soc-apple-weekly-running-line.is-indeterminate > span { width: 34% !important; animation: soc-long-task-progress-indeterminate 1.12s ease-in-out infinite; } .soc-apple-weekly-running-line.is-indeterminate > span::after { display: none; } .soc-apple-weekly-running-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #64748b; font-size: 13px; font-weight: 700; } .soc-apple-weekly-running-meta strong { color: #c2410c; font-size: 13px; font-weight: 800; white-space: nowrap; } .soc-apple-weekly-progress-step-list { display: grid; gap: 10px; } .soc-apple-weekly-progress-step-list .soc-progress-step-item { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.16); background: #ffffff; } .soc-apple-weekly-progress-step-list .soc-progress-step-node { width: 32px; height: 32px; background: #fff7ed; color: #c2410c; border: 1px solid rgba(249, 115, 22, 0.18); } .soc-apple-weekly-progress-step-list .soc-progress-step-item.is-active { border-color: rgba(249, 115, 22, 0.22); background: #fffaf5; box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.08); } .soc-apple-weekly-progress-step-list .soc-progress-step-item.is-complete .soc-progress-step-node { background: #dcfce7; border-color: rgba(34, 197, 94, 0.24); color: #166534; } .soc-apple-weekly-progress-step-list .soc-progress-step-item.is-active .soc-progress-step-node { background: #ffffff; border-color: rgba(249, 115, 22, 0.22); } .soc-apple-weekly-progress-step-list .soc-progress-step-copy strong { color: #0f172a; font-size: 15px; line-height: 1.35; font-weight: 800; } .soc-apple-weekly-progress-step-list .soc-progress-step-copy .meta { color: #64748b; font-size: 12px; line-height: 1.45; } .soc-apple-weekly-progress-step-list .soc-progress-step-item.is-active .soc-progress-step-copy .meta { color: #c2410c; } .soc-apple-weekly-summary-list-grid a { color: inherit; text-decoration: none; } .soc-apple-weekly-summary-list-grid a:hover { text-decoration: underline; } .soc-apple-weekly-preview-count-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; } .soc-apple-weekly-preview-count-card { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.18); background: #ffffff; } .soc-apple-weekly-preview-count-card.is-accent { border-color: rgba(255, 132, 0, 0.24); background: #fffaf5; } .soc-apple-weekly-preview-count-card.is-warning { border-color: rgba(245, 158, 11, 0.24); background: #fffdf6; } .soc-apple-weekly-preview-count-card.is-danger { border-color: rgba(239, 68, 68, 0.24); background: #fff7f7; } .soc-apple-weekly-preview-count-card span { font-size: 12px; font-weight: 700; color: #64748b; } .soc-apple-weekly-preview-count-card strong { font-size: 18px; line-height: 1.2; font-weight: 800; color: #0f172a; } .soc-apple-weekly-preview-count-card .meta { margin: 0; } .soc-apple-weekly-preview-count-card .meta:empty { display: none; } .soc-apple-weekly-preview-issue-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .soc-apple-weekly-preview-issue-card { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.18); background: #ffffff; } .soc-apple-weekly-preview-issue-card.is-info { background: #f8fafc; } .soc-apple-weekly-preview-issue-card.is-warning { border-color: rgba(245, 158, 11, 0.24); background: #fffdf6; } .soc-apple-weekly-preview-issue-card.is-danger { border-color: rgba(239, 68, 68, 0.26); background: #fff7f7; } .soc-apple-weekly-preview-issue-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } .soc-apple-weekly-preview-issue-head h5, .soc-apple-weekly-preview-issue-head .meta { margin: 0; } .soc-apple-weekly-preview-issue-head .meta:empty { display: none; } .soc-apple-weekly-preview-issue-more { display: grid; gap: 10px; } .soc-apple-weekly-preview-issue-more summary { cursor: pointer; list-style: none; color: #475569; font-size: 13px; font-weight: 700; } .soc-apple-weekly-preview-issue-more > .soc-apple-weekly-log-list { padding-top: 2px; } .soc-apple-weekly-preview-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; } .soc-apple-weekly-preview-detail-meta span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.18); background: #f8fafc; color: #475569; font-size: 12px; font-weight: 700; } .soc-apple-weekly-preview-detail-table { padding: 0; } .soc-apple-weekly-preview-details { display: grid; gap: 12px; } .soc-apple-weekly-preview-details summary { cursor: pointer; list-style: none; color: #334155; font-size: 13px; font-weight: 700; } .soc-apple-weekly-applying-stage, .soc-apple-weekly-result-stage { display: grid; gap: 16px; } .soc-apple-weekly-applying-hero, .soc-apple-weekly-result-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: 18px; border: 1px solid rgba(148, 163, 184, 0.18); background: #fffdf9; } .soc-apple-weekly-applying-hero { border-color: rgba(255, 132, 0, 0.2); background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%); } .soc-apple-weekly-result-hero.is-ok { border-color: rgba(34, 197, 94, 0.22); background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); } .soc-apple-weekly-result-hero.is-warning { border-color: rgba(245, 158, 11, 0.24); background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%); } .soc-apple-weekly-result-hero.is-error { border-color: rgba(239, 68, 68, 0.26); background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%); } .soc-apple-weekly-applying-badge, .soc-apple-weekly-result-hero-badge { display: inline-flex; align-items: center; justify-content: center; width: 60px; min-width: 60px; height: 60px; border-radius: 16px; font-size: 14px; line-height: 1; font-weight: 800; color: #0f172a; } .soc-apple-weekly-applying-badge { border: 1px solid rgba(255, 132, 0, 0.26); background: #fff1df; color: #c2410c; } .soc-apple-weekly-result-hero.is-ok .soc-apple-weekly-result-hero-badge { border: 1px solid rgba(34, 197, 94, 0.24); background: #dcfce7; color: #166534; } .soc-apple-weekly-result-hero.is-warning .soc-apple-weekly-result-hero-badge { border: 1px solid rgba(245, 158, 11, 0.24); background: #fef3c7; color: #b45309; } .soc-apple-weekly-result-hero.is-error .soc-apple-weekly-result-hero-badge { border: 1px solid rgba(239, 68, 68, 0.24); background: #fee2e2; color: #b91c1c; } .soc-apple-weekly-applying-copy, .soc-apple-weekly-result-hero-copy { display: grid; gap: 8px; } .soc-apple-weekly-applying-copy h4, .soc-apple-weekly-result-hero-copy h4 { margin: 0; font-size: 22px; line-height: 1.22; font-weight: 800; color: #0f172a; } .soc-apple-weekly-applying-copy .meta, .soc-apple-weekly-result-hero-copy .meta, .soc-apple-weekly-result-detail-card .meta { margin: 0; } .soc-apple-weekly-result-detail-card h5 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 800; color: #0f172a; } .soc-apple-weekly-result-hero-note { color: #334155; } .soc-apple-weekly-result-summary-card, .soc-apple-weekly-result-count-card, .soc-apple-weekly-result-detail-card { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.18); background: #ffffff; } .soc-apple-weekly-result-summary-card strong, .soc-apple-weekly-result-count-card strong { color: #0f172a; font-size: 17px; line-height: 1.2; font-weight: 800; } .soc-apple-weekly-result-summary-grid, .soc-apple-weekly-result-count-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; } .soc-apple-weekly-result-summary-card span, .soc-apple-weekly-result-count-card span { font-size: 12px; font-weight: 700; color: #64748b; } .soc-apple-weekly-result-summary-card .meta, .soc-apple-weekly-result-count-card .meta, .soc-apple-weekly-applying-steps .meta { margin: 0; } .soc-apple-weekly-applying-line { position: relative; height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; } .soc-apple-weekly-applying-line > span { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fb923c 0%, #f97316 100%); } .soc-apple-weekly-applying-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .soc-apple-weekly-applying-steps li { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.18); background: #ffffff; color: #334155; font-size: 14px; line-height: 1.45; font-weight: 700; } .soc-apple-weekly-applying-steps li::before { content: ""; display: inline-flex; width: 10px; height: 10px; border-radius: 999px; background: #cbd5e1; } .soc-apple-weekly-applying-steps li.is-complete { border-color: rgba(34, 197, 94, 0.2); background: #f8fafc; color: #0f172a; } .soc-apple-weekly-applying-steps li.is-complete::before { background: #22c55e; } .soc-apple-weekly-applying-steps li.is-active { border-color: rgba(249, 115, 22, 0.24); background: #fffaf5; color: #0f172a; } .soc-apple-weekly-applying-steps li.is-active::before { background: #f97316; } .soc-apple-weekly-result-summary-card strong a { color: inherit; text-decoration: none; } .soc-apple-weekly-result-summary-card strong a:hover { text-decoration: underline; } .soc-apple-weekly-result-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .soc-apple-weekly-result-conflict-shell { display: grid; gap: 12px; } .soc-apple-weekly-result-conflict-list { display: grid; gap: 8px; } .soc-apple-weekly-result-conflict-item { display: grid; gap: 4px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.18); background: #ffffff; color: #0f172a; text-align: left; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease; } .soc-apple-weekly-result-conflict-item strong { font-size: 14px; line-height: 1.35; font-weight: 800; } .soc-apple-weekly-result-conflict-item span { color: #64748b; font-size: 12px; line-height: 1.45; font-weight: 600; } .soc-apple-weekly-result-conflict-item:hover { border-color: rgba(249, 115, 22, 0.24); background: #fffaf5; } .soc-apple-weekly-result-conflict-item.is-selected { border-color: rgba(249, 115, 22, 0.24); background: #fffaf5; } .soc-apple-weekly-result-conflict-resolution { display: grid; gap: 12px; } .soc-apple-weekly-result-conflict-action-group { grid-template-columns: repeat(3, minmax(0, 1fr)); } .soc-apple-weekly-result-conflict-note { margin: 0; color: #64748b; } .soc-apple-weekly-result-detail-card.is-warning { border-color: rgba(245, 158, 11, 0.24); background: #fffdf6; } .soc-apple-weekly-result-detail-card.is-error { border-color: rgba(239, 68, 68, 0.26); background: #fff7f7; } .soc-apple-weekly-result-detail-card.is-info { background: #f8fafc; } .soc-apple-weekly-control-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.92fr); gap: 14px; align-items: start; } .soc-apple-weekly-subcard { display: grid; gap: 10px; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 14px; background: #ffffff; padding: 14px; } .soc-apple-weekly-subcard h5 { margin: 0; font-size: var(--type-section-md-size); line-height: var(--type-section-md-line); font-weight: var(--type-section-md-weight); color: #0f172a; } .soc-apple-weekly-setup-summary-card .soc-apple-weekly-inline-definition-list { margin-top: 2px; } .soc-apple-weekly-setup-summary-card strong a { color: inherit; text-decoration: none; } .soc-apple-weekly-setup-summary-card strong a:hover { text-decoration: underline; } .soc-apple-weekly-overtime-card { align-content: start; } .soc-apple-weekly-inline-head { display: grid; gap: 2px; } .soc-apple-weekly-inline-head h5, .soc-apple-weekly-inline-head .meta { margin: 0; } .soc-apple-weekly-control-workspace { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr); gap: 14px; align-items: start; } .soc-apple-weekly-control-main { display: grid; gap: 12px; min-width: 0; } .soc-apple-weekly-override-card .soc-apple-weekly-card-actions--between { align-items: flex-start; } .soc-apple-weekly-override-item .soc-report-browse-actions { justify-content: flex-end; gap: 6px; } .soc-apple-weekly-danger-card { border: 1px solid rgba(239, 68, 68, 0.32); border-radius: 12px; background: #fff7f7; padding: 12px; } .soc-apple-weekly-danger-card .soc-apple-weekly-force-row { align-items: center; } .soc-apple-weekly-value-summary { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 12px; background: #f8fafc; } .soc-apple-weekly-value-summary strong { color: #0f172a; font-size: 14px; font-weight: 700; } .soc-apple-weekly-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .soc-apple-weekly-action-card { border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 14px; padding: 14px; background: #f8fafc; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; min-height: 170px; } .soc-apple-weekly-action-card h5 { margin: 0; font-size: var(--type-section-md-size); line-height: var(--type-section-md-line); font-weight: var(--type-section-md-weight); color: #0f172a; } .soc-apple-weekly-action-card .ds-btn { min-height: 38px; align-self: end; justify-self: start; } .soc-apple-weekly-validation-guide { margin-top: 10px; border: 1px dashed rgba(148, 163, 184, 0.44); border-radius: 10px; padding: 10px 12px; background: #f8fafc; } .soc-apple-weekly-validation-guide strong { display: block; font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); color: #334155; margin-bottom: 6px; } .soc-apple-weekly-validation-guide ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: #475569; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); } .soc-apple-weekly-advanced { border-top: 1px dashed rgba(148, 163, 184, 0.4); padding-top: 8px; } .soc-apple-weekly-advanced summary { cursor: pointer; list-style: none; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); color: #64748b; font-weight: 600; } .soc-apple-weekly-advanced summary::-webkit-details-marker { display: none; } .soc-apple-weekly-form-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-controls { grid-template-columns: minmax(280px, 1fr) auto auto; gap: 10px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-row--apple-weekly { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-hidden-site-input { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-row--apple-weekly > .soc-google-sheet-site-label, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-row--apple-weekly #googleSheetsSiteSelect { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-row--apple-weekly .soc-google-sheet-site-controls { display: flex; justify-content: flex-end; align-items: center; gap: 8px; width: 100%; grid-template-columns: none; flex-wrap: wrap; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-row--apple-weekly .soc-google-sheet-active-site { display: inline-flex !important; } #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsStatusBanner { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-controls .ds-btn { min-height: 32px; padding: 0 12px; flex: 0 0 auto; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap { border-radius: 14px; max-height: none; overflow: visible; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-toolbar { align-items: center; justify-content: space-between; gap: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-toolbar .soc-google-sheet-actions { justify-content: flex-end; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-template-section .soc-google-sheet-actions { justify-content: flex-start; gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-summary-strip { justify-content: flex-start; gap: 8px; margin-top: 2px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-summary-pill { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table th { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table td { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions .ds-btn { min-height: 32px; padding: 4px 10px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions .ds-btn-danger { border: 1px solid rgba(239, 68, 68, 0.35); background: #fff; color: #b91c1c; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions .soc-google-sheet-row-action-danger { border: 1px solid rgba(239, 68, 68, 0.35); color: #b91c1c; background: #fff; } .soc-apple-weekly-day-row { display: flex; flex-wrap: wrap; gap: 8px; } .soc-apple-weekly-day-chip { appearance: none; border: 1px solid rgba(148, 163, 184, 0.38); background: #f8fafc; color: #64748b; min-height: 30px; border-radius: 999px; padding: 0 10px; font-size: 12px; font-weight: 700; cursor: pointer; } .soc-apple-weekly-day-chip.is-active { background: #fff7ed; color: #c2410c; border-color: rgba(255, 132, 0, 0.42); } .soc-apple-weekly-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: auto; } .soc-apple-weekly-switch-row > span { flex: 1; min-width: 0; } .soc-apple-weekly-form-grid .soc-apple-weekly-switch-row { width: 100%; } .soc-apple-weekly-switch-input { position: relative; appearance: none; -webkit-appearance: none; width: 44px; height: 24px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.45); background: #e2e8f0; transition: all 0.2s ease; cursor: pointer; flex: 0 0 auto; margin: 0; min-width: 44px !important; min-height: 24px !important; max-width: 44px; max-height: 24px; padding: 0 !important; display: inline-block !important; box-sizing: border-box; flex: 0 0 44px; } .soc-apple-weekly-switch-input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.35); transition: all 0.2s ease; } .soc-apple-weekly-switch-input:checked { background: #ffb56a; border-color: #ff8400; } .soc-apple-weekly-switch-input:checked::before { left: 22px; } .soc-apple-weekly-tag-editor { display: grid; gap: 10px; } .soc-apple-weekly-tag-list { display: flex; flex-wrap: wrap; gap: 8px; } .soc-apple-weekly-tag { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px; border-radius: 999px; background: #fff7ed; border: 1px solid rgba(255, 132, 0, 0.32); color: #9a3412; font-size: 12px; font-weight: 600; } .soc-apple-weekly-tag button { border: 0; background: transparent; color: inherit; cursor: pointer; font-weight: 700; padding: 0; line-height: 1; } .soc-apple-weekly-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .soc-apple-weekly-baseline-readonly { border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 12px; padding: 12px; background: #f8fafc; display: grid; gap: 6px; } .soc-apple-weekly-baseline-readonly p { margin: 0; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); color: #334155; } .soc-apple-weekly-sync-targets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .soc-apple-weekly-sync-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 4px; } .soc-apple-weekly-sync-summary span { display: inline-flex; align-items: center; min-height: 30px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.24); background: #f8fafc; padding: 0 10px; font-size: 12px; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .soc-apple-weekly-sync-result { margin-top: 8px; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 10px; background: #f8fafc; padding: 10px 12px; display: grid; gap: 4px; } .soc-apple-weekly-sync-result .meta { margin: 0; } .soc-apple-weekly-validation-log > .meta { margin: 0 0 8px; } .soc-apple-weekly-weekday-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .soc-apple-weekly-weekday-chip { display: inline-flex; align-items: center; min-height: 30px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.3); background: #f8fafc; padding: 0 10px; font-size: 12px; color: #475569; } .soc-apple-weekly-weekday-chip.is-empty { border-style: dashed; color: #64748b; } .soc-apple-weekly-weekrange-summary { margin-top: 0; } .soc-apple-weekly-sync-targets .soc-apple-weekly-section-chip[disabled] { opacity: 0.45; cursor: not-allowed; } .soc-apple-weekly-rule-card { gap: 12px; } .soc-apple-weekly-rule-block { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 12px; background: #f8fafc; } .soc-apple-weekly-rule-card .soc-report-browse-actions { justify-content: flex-end; } .soc-apple-weekly-rule-title { margin: 2px 0 0; font-size: var(--type-section-md-size); line-height: var(--type-section-md-line); font-weight: var(--type-section-md-weight); color: #0f172a; } .soc-apple-weekly-section-chip { appearance: none; border: 1px solid rgba(148, 163, 184, 0.36); background: #f8fafc; color: #334155; min-height: 34px; border-radius: 999px; padding: 0 12px; font-size: 12px; font-weight: 700; cursor: pointer; } .soc-apple-weekly-section-chip.is-active { background: #fff7ed; color: #c2410c; border-color: rgba(255, 132, 0, 0.45); } .soc-apple-weekly-conflict-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .soc-apple-weekly-conflict-compare .meta { border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 10px; padding: 10px; background: #f8fafc; min-height: 72px; } .soc-apple-weekly-conflict-actions { justify-content: flex-end; } .soc-apple-weekly-danger-zone .ds-btn, .soc-apple-weekly-danger-card .ds-btn:not(.ds-btn-sm) { min-height: 40px; padding-inline: 16px; } .soc-apple-weekly-inline-overflow { position: relative; display: inline-flex; align-items: center; } .soc-apple-weekly-inline-overflow summary { list-style: none; display: inline-flex; align-items: center; } .soc-apple-weekly-inline-overflow summary::-webkit-details-marker { display: none; } .soc-apple-weekly-inline-overflow[open] > .soc-report-browse-actions { position: absolute; right: 0; top: calc(100% + 6px); z-index: 3; min-width: 170px; padding: 8px; border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 10px; background: #fff; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12); } .soc-apple-weekly-empty-state { border: 1px dashed rgba(148, 163, 184, 0.45); border-radius: 12px; padding: 14px; background: #f8fafc; } .soc-apple-weekly-empty-state strong { display: block; color: #334155; font-size: 14px; margin-bottom: 4px; } .soc-apple-weekly-policy-loading { display: flex; align-items: center; gap: 12px; } .soc-apple-weekly-policy-loading .soc-submit-progress-spinner { flex: 0 0 auto; } .soc-apple-weekly-policy-loading .meta { margin: 0; word-break: keep-all; overflow-wrap: break-word; } @media (prefers-reduced-motion: reduce) { .soc-apple-weekly-policy-loading .soc-submit-progress-spinner { animation: none; } } .soc-apple-weekly-override-card { align-content: start; } .soc-apple-weekly-override-list { max-height: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-actions .ds-btn { width: auto; min-height: 38px; align-self: center; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex: 0 0 auto; } #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-sm { min-height: 32px !important; } #googleSheetsPanel.soc-apple-weekly-mode .ds-btn:not(.ds-btn-sm) { min-height: 40px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card-actions { justify-content: flex-end; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card-actions--between { justify-content: space-between; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card-actions .ds-btn { min-width: 0; padding-inline: 14px; flex: 0 0 auto; width: auto; height: auto; max-width: none; } .soc-apple-weekly-force-row { justify-content: space-between; width: 100%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-force-row .ds-btn { min-width: 142px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-switch-input { appearance: none !important; -webkit-appearance: none !important; width: 44px !important; height: 24px !important; min-width: 44px !important; min-height: 24px !important; max-width: 44px !important; max-height: 24px !important; } .soc-apple-weekly-mobile-notice { border: 1px solid rgba(148, 163, 184, 0.32); border-radius: 14px; background: #fff; padding: 18px; display: grid; gap: 8px; } .soc-apple-weekly-mobile-notice h4 { margin: 0; color: #0f172a; font-size: 18px; } .soc-apple-weekly-mobile-notice p { margin: 0; color: #64748b; font-size: 13px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-sections, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-mount { width: 100%; min-height: 0; } @media (max-width: 1440px) { #googleSheetsPanel.soc-apple-weekly-mode { padding: 12px 10px 22px; } .soc-apple-weekly-global-bar { grid-template-columns: minmax(0, 1fr); } .soc-apple-weekly-global-controls { grid-template-columns: repeat(2, minmax(180px, 1fr)); min-width: 100%; } .soc-apple-weekly-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soc-apple-weekly-sync-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soc-apple-weekly-conflict-compare { grid-template-columns: minmax(0, 1fr); } .soc-apple-weekly-control-workspace { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1024px) { .soc-apple-weekly-global-controls { grid-template-columns: minmax(0, 1fr); } .soc-apple-weekly-global-status { justify-content: flex-start; } .soc-apple-weekly-action-grid { grid-template-columns: minmax(0, 1fr); } .soc-apple-weekly-sync-summary { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1024px) { #googleSheetsPanel.soc-apple-weekly-mode { display: block; padding: 10px 14px 24px; gap: 16px; background: transparent; } #googleSheetsPanel.soc-apple-weekly-mode > .panel-title-row { display: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-section, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card-slim, #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-head { display: grid; gap: 6px; padding-bottom: 0; border-bottom: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block h2 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; color: #0f172a; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block p { margin: 4px 0 0; color: #475569; font-size: 13px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-bar { display: grid; grid-template-columns: minmax(420px, 560px) minmax(0, 1fr); gap: 16px; align-items: end; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(160px, 180px); gap: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-field { display: grid; gap: 6px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-field > span, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-field > span { font-size: 12px; font-weight: 700; color: #64748b; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta span { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12px; color: #475569; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta strong { color: #64748b; font-weight: 700; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta em { color: #0f172a; font-style: normal; font-weight: 600; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 0 0 2px; border-bottom: 1px solid rgba(148, 163, 184, 0.22); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab { appearance: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #64748b; min-height: 40px; padding: 0 2px; font-size: 14px; font-weight: 700; cursor: pointer; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab.is-active { color: #0f172a; border-bottom-color: #0f172a; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-link-pane { display: grid; gap: 14px; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar:not(.soc-apple-weekly-section-bar--stacked) { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar h3, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar h4 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 700; color: #0f172a; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar p, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section-head p { margin: 4px 0 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-meta-row { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: #64748b; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-console, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-workboard, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-editor, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-panel { border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 10px; background: #fff; box-shadow: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap { overflow: hidden; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table { width: 100%; border-collapse: collapse; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table th, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table td, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td { padding: 11px 12px; font-size: 13px; border-bottom: 1px solid rgba(148, 163, 184, 0.16); vertical-align: middle; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tbody tr:last-child td, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table tbody tr:last-child td { border-bottom: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tbody tr[data-action="google-sheets-row-select"] { cursor: pointer; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tbody tr[data-action="google-sheets-row-select"]:hover td, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tr.is-selected-year td, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table tr.is-selected td { background: #f8fafc; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-link-tools { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-link-sub { font-size: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions { justify-content: flex-end; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-link-footnote { margin: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-inspector { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 0; align-self: start; padding: 0 0 0 2px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-section { display: block; min-width: 0; overflow: hidden; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; border-top: 1px solid rgba(148, 163, 184, 0.18); } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-section:first-child { border-top: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 0; background: transparent; padding: 12px 0; min-height: 40px; color: #0f172a; font-size: 14px; font-weight: 700; cursor: pointer; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle > span:first-child { flex: 0 1 auto; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle.is-active { color: #0f172a; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle .meta { flex: 1 1 auto; min-width: 0; max-width: 100%; font-size: 12px; color: #64748b; font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body { display: none; gap: 12px; padding: 0 0 16px; min-width: 0; overflow: hidden; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle.is-active + .soc-google-sheet-inspector-body { display: grid; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body[hidden] { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body.is-active { display: grid !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-form, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-value-summary { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px; background: #fff; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary p, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-value-summary .meta, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-value-summary strong { margin: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-form-grid, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-grid { gap: 10px 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result { padding: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone { margin-top: 0; padding: 12px; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; background: #fff; gap: 10px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone h4 { margin: 0; color: #0f172a; font-size: 15px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone.is-active { border-color: rgba(239, 68, 68, 0.28); background: #fff5f5; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone.is-active h4 { color: #b91c1c; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary.warning { border-color: rgba(245, 158, 11, 0.28); background: #fffaf0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-definition-list { display: grid; gap: 8px; margin: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-definition-list div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-definition-list dt { margin: 0; font-size: 12px; color: #64748b; font-weight: 700; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-definition-list dd { margin: 0; color: #0f172a; font-size: 13px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-editor { display: grid; gap: 18px; padding: 16px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(148, 163, 184, 0.18); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section:first-of-type { padding-top: 0; border-top: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section-head { display: grid; gap: 2px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section-head h4 { margin: 0; font-size: 16px; font-weight: 700; color: #0f172a; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rule-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rule-group { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 8px; background: #fcfcfd; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rule-group h4 { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-row { gap: 6px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-chip { min-height: 32px; border-radius: 8px; padding: 0 10px; background: #fff; border: 1px solid rgba(148, 163, 184, 0.3); color: #475569; font-size: 12px; font-weight: 600; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-chip.is-active { background: #f8fafc; border-color: #334155; color: #0f172a; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-note { margin: 0; font-size: 12px; color: #64748b; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-help { display: inline-block; margin-left: 6px; font-style: normal; font-size: 12px; line-height: 1.4; font-weight: 600; color: #64748b; white-space: nowrap; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-editor { display: grid; gap: 12px; padding: 12px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px; background: #f8fafc; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-sticky-footer { position: static; display: flex; justify-content: flex-end; padding-top: 10px; background: #fff; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-workspace { display: grid; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-panel { border-color: rgba(239, 68, 68, 0.28); background: #fff7f7; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-copy { margin: 0; color: #b91c1c; font-size: 13px; font-weight: 600; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-note { padding: 10px 12px; border: 1px solid rgba(239, 68, 68, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.7); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-empty-state { padding: 12px; border-radius: 8px; background: #f8fafc; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; } #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-actions, #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-nav-actions { justify-content: flex-end; gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-nav-actions .ds-btn.is-blocked { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-danger, #d93025) 50%, transparent); opacity: 0.85; } #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-actions .ds-btn, #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-row-actions .ds-btn, #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-overflow-menu summary { width: auto; white-space: nowrap; } #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-sm, #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-overflow-menu summary { min-height: 32px !important; } #googleSheetsPanel.soc-apple-weekly-mode .ds-btn:not(.ds-btn-sm) { min-height: 40px !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-overflow-panel { min-width: 170px; } } @media (min-width: 1024px) { #googleSheetsPanel.soc-apple-weekly-mode { --apple-weekly-surface: var(--soc-card-bg); --apple-weekly-surface-muted: color-mix(in srgb, var(--soc-card-bg) 72%, var(--soc-panel-bg)); --apple-weekly-surface-soft: color-mix(in srgb, var(--soc-panel-bg) 84%, transparent); --apple-weekly-border: color-mix(in srgb, var(--soc-border) 92%, transparent); --apple-weekly-border-strong: color-mix(in srgb, var(--soc-border-strong) 78%, var(--soc-border)); --apple-weekly-text: var(--soc-text); --apple-weekly-text-sub: var(--soc-text-sub); --apple-weekly-accent: var(--soc-primary); --apple-weekly-accent-soft: color-mix(in srgb, var(--soc-primary) 12%, var(--soc-card-bg)); --apple-weekly-success-soft: color-mix(in srgb, var(--soc-success) 12%, var(--soc-card-bg)); --apple-weekly-warning-soft: color-mix(in srgb, var(--soc-warning) 12%, var(--soc-card-bg)); --apple-weekly-danger-soft: color-mix(in srgb, var(--soc-danger) 10%, var(--soc-card-bg)); --apple-weekly-danger-border: color-mix(in srgb, var(--soc-danger) 35%, var(--soc-border)); --apple-weekly-success-border: color-mix(in srgb, var(--soc-success) 35%, var(--soc-border)); --apple-weekly-warning-border: color-mix(in srgb, var(--soc-warning) 35%, var(--soc-border)); --apple-weekly-shadow: none; background: transparent !important; } #googleSheetsPanel.soc-apple-weekly-mode > .panel-title-row { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-section, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card-slim, #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-card, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-workspace { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-head { display: grid !important; gap: 14px; padding: 0 0 14px; border-bottom: 1px solid var(--apple-weekly-border); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block > div { display: grid; gap: 4px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block h2 { margin: 0; font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-line); font-weight: var(--type-title-lg-weight); color: var(--apple-weekly-text); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block p { display: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-bar { display: grid; grid-template-columns: minmax(440px, 600px) minmax(0, 1fr); gap: 16px; align-items: end; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(164px, 180px); gap: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-field, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-field { display: grid; gap: 6px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-field > span, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-field > span, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-switch > span, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-checkbox-row > span { font-size: 12px; font-weight: 700; color: var(--apple-weekly-text-sub); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta span { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12px; color: var(--apple-weekly-text-sub); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta strong { color: var(--apple-weekly-text-sub); font-weight: 700; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta em { color: var(--apple-weekly-text); font-style: normal; font-weight: 600; } #googleSheetsPanel.soc-apple-weekly-mode input:not([type="checkbox"]):not([type="hidden"]), #googleSheetsPanel.soc-apple-weekly-mode select, #googleSheetsPanel.soc-apple-weekly-mode textarea { min-height: 40px; border: 1px solid var(--apple-weekly-border); border-radius: 10px; background: var(--apple-weekly-surface); color: var(--apple-weekly-text); box-shadow: none; } #googleSheetsPanel.soc-apple-weekly-mode input:not([type="checkbox"]):not([type="hidden"])::placeholder, #googleSheetsPanel.soc-apple-weekly-mode textarea::placeholder { color: var(--apple-weekly-text-sub); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 0 0 2px; border-bottom: 1px solid var(--apple-weekly-border); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-tab { appearance: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--apple-weekly-text-sub) !important; cursor: pointer; font-weight: 700; padding: 0 2px !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab { display: grid; gap: 4px; align-content: center; justify-items: start; min-height: 52px !important; min-width: 176px; font-size: 14px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-tab { min-height: 32px !important; font-size: 13px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab.is-active, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-tab.is-active { color: var(--apple-weekly-text) !important; border-bottom-color: var(--apple-weekly-accent) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab-label { color: inherit; font-size: 14px; line-height: 1.3; font-weight: 700; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab-meta { color: var(--apple-weekly-text-sub); font-size: 11px; line-height: 1.35; font-weight: 600; display: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section-head .meta { display: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab.is-active .soc-apple-weekly-step-tab-meta { color: var(--apple-weekly-text); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner { border: 1px solid var(--apple-weekly-border); border-radius: 12px; background: var(--apple-weekly-surface-muted); box-shadow: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card { display: grid; gap: 4px; padding: 12px 14px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card-label, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner-label, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-label { color: var(--apple-weekly-text-sub); font-size: 12px; line-height: 1.4; font-weight: 700; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card strong, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner strong, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card strong { color: var(--apple-weekly-text); font-size: 15px; line-height: 1.45; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card p, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner p, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card p { margin: 0; color: var(--apple-weekly-text-sub); line-height: 1.55; white-space: normal; word-break: break-word; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card p { display: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card p, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-readiness-inline .meta { display: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card.is-success, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner.is-success, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card.is-success { background: var(--apple-weekly-success-soft); border-color: var(--apple-weekly-success-border); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card.is-warning, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner.is-warning, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card.is-warning { background: var(--apple-weekly-warning-soft); border-color: var(--apple-weekly-warning-border); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card.is-danger, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner.is-danger, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card.is-danger { background: var(--apple-weekly-danger-soft); border-color: var(--apple-weekly-danger-border); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card.is-accent, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner.is-accent, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card.is-accent { background: var(--apple-weekly-accent-soft); border-color: color-mix(in srgb, var(--apple-weekly-accent) 34%, var(--apple-weekly-border)); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-link-pane, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-workspace, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-operations-workspace, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-main, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-side { gap: 16px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar h3, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar h4, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section-head h4, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail-head h4, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-panel h5, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary h4 { margin: 0; color: var(--apple-weekly-text); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar h3 { font-size: 18px; line-height: 1.24; } #googleSheetsPanel.soc-apple-weekly-mode .meta, #googleSheetsPanel.soc-apple-weekly-mode .help, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-link-sub, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-note { color: var(--apple-weekly-text-sub); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-meta-row { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--apple-weekly-text-sub); } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-console, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-workboard, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-editor, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-panel { border: 1px solid var(--apple-weekly-border) !important; border-radius: 12px !important; background: var(--apple-weekly-surface) !important; box-shadow: var(--apple-weekly-shadow) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-console { overflow: hidden; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table { width: 100%; border-collapse: collapse; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table th, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table td, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td { padding: 11px 12px; border-bottom: 1px solid var(--apple-weekly-border); vertical-align: middle; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table thead th, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table thead th { background: var(--apple-weekly-surface-muted); color: var(--apple-weekly-text-sub); font-size: 12px; font-weight: 700; text-align: left; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tbody tr:last-child td, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table tbody tr:last-child td { border-bottom: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tbody tr[data-action="google-sheets-row-select"] { cursor: pointer; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tbody tr[data-action="google-sheets-row-select"]:hover td, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tr.is-selected-year td, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table tr.is-selected td { background: var(--apple-weekly-accent-soft) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-link-main, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-summary-cell { color: var(--apple-weekly-text); } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-service code { border-color: var(--apple-weekly-border); background: var(--apple-weekly-surface-muted); color: var(--apple-weekly-text); } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-status-pill, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-badge { border-color: var(--apple-weekly-border) !important; background: var(--apple-weekly-surface-muted) !important; color: var(--apple-weekly-text-sub) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-status-pill.is-ok, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-badge.is-ok { border-color: var(--apple-weekly-success-border) !important; background: var(--apple-weekly-success-soft) !important; color: var(--soc-success) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-status-pill.is-error, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-badge.is-error, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-badge.is-warn { border-color: var(--apple-weekly-warning-border) !important; background: var(--apple-weekly-warning-soft) !important; color: var(--soc-warning) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-inspector { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 0; align-self: start; padding-left: 2px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-section { display: block; min-width: 0; overflow: hidden; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; border-top: 1px solid var(--apple-weekly-border); } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-section:first-child { border-top: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; min-height: 40px; padding: 12px 0; border: 0 !important; background: transparent !important; color: var(--apple-weekly-text) !important; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle > span:first-child { flex: 0 1 auto; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle .meta { flex: 1 1 auto; min-width: 0; max-width: 100%; color: var(--apple-weekly-text-sub); font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-form, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-value-summary, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-panel, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-editor, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-range-preview, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rule-group, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-note, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-empty-state { border: 1px solid var(--apple-weekly-border) !important; border-radius: 10px !important; background: var(--apple-weekly-surface-muted) !important; box-shadow: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-panel, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-editor, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-range-preview, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-note, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-empty-state { padding: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body { min-width: 0; overflow: hidden; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body[hidden] { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body.is-active { display: grid !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-form, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-value-summary { padding: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone.is-active, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-panel { border-color: var(--apple-weekly-danger-border) !important; background: var(--apple-weekly-danger-soft) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-copy, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone.is-active h4 { color: var(--soc-danger) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary.warning { border-color: var(--apple-weekly-warning-border) !important; background: var(--apple-weekly-warning-soft) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-console { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr); min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table-wrap, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail { min-width: 0; padding: 14px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail { display: grid; gap: 12px; border-left: 1px solid var(--apple-weekly-border); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-detail-meta-list, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-log-list, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-list { display: grid; gap: 10px; margin: 0; padding: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-detail-meta-list div, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-log-list li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--apple-weekly-border); border-radius: 10px; background: var(--apple-weekly-surface-muted); list-style: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-detail-meta-list dt, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-log-list span { color: var(--apple-weekly-text-sub); font-size: 12px; font-weight: 700; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-detail-meta-list dd, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-log-list strong, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-log-list p { margin: 0; color: var(--apple-weekly-text); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-range-preview span { font-size: 11px; font-weight: 700; color: var(--apple-weekly-text-sub); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-range-preview strong { color: var(--apple-weekly-text); font-size: 14px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout { display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(280px, 0.76fr); gap: 16px; align-items: start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-workboard, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-panel, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-editor { display: grid; gap: 12px; padding: 16px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-checkbox-row, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-checkbox-row input[type="checkbox"] { accent-color: var(--soc-primary); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rule-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-row { display: flex; flex-wrap: wrap; gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-chip { min-height: 32px !important; border-radius: 8px !important; padding: 0 10px !important; border: 1px solid var(--apple-weekly-border) !important; background: var(--apple-weekly-surface) !important; color: var(--apple-weekly-text-sub) !important; box-shadow: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-chip.is-active { border-color: color-mix(in srgb, var(--soc-primary) 42%, var(--apple-weekly-border)) !important; background: var(--apple-weekly-accent-soft) !important; color: var(--soc-primary) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-switch-input { border-color: var(--apple-weekly-border-strong) !important; background: color-mix(in srgb, var(--soc-border) 85%, transparent) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-switch-input::before { background: var(--apple-weekly-surface) !important; box-shadow: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-switch-input:checked { background: var(--soc-primary) !important; border-color: var(--soc-primary) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-sticky-footer { position: static; display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; background: var(--apple-weekly-surface); z-index: 8; pointer-events: auto; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-sticky-footer .ds-btn { position: relative; z-index: 9; pointer-events: auto; } #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-overflow-panel { min-width: 170px; border: 1px solid var(--apple-weekly-border) !important; border-radius: 10px; background: var(--apple-weekly-surface) !important; box-shadow: var(--soc-shadow-soft); } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-action-danger, #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-overflow-panel .soc-google-sheet-row-action-danger { border-color: var(--apple-weekly-danger-border) !important; background: var(--apple-weekly-danger-soft) !important; color: var(--soc-danger) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-actions, #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-row-actions, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-actions, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-sm, #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-overflow-menu summary { min-height: 32px !important; } #googleSheetsPanel.soc-apple-weekly-mode .ds-btn:not(.ds-btn-sm) { min-height: 40px !important; } } @media (min-width: 1024px) and (max-width: 1500px) { #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-bar { grid-template-columns: minmax(0, 1fr); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-console, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout { grid-template-columns: minmax(0, 1fr); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-body, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout.is-conflicts { grid-template-columns: minmax(0, 1fr); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-side-column { padding-left: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail { border-left: 0; border-top: 1px solid var(--apple-weekly-border); } } @media (min-width: 1024px) { #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsSetupSections { display: none; } #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsSetupSections.hidden { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls > span { display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; color: var(--apple-weekly-text-sub); font-size: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls > span strong { color: var(--apple-weekly-text-sub); font-weight: 700; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls > span em { color: var(--apple-weekly-text); font-style: normal; font-weight: 600; } #googleSheetsPanel.soc-apple-weekly-mode .ds-btn { border-color: var(--apple-weekly-border); box-shadow: none; } #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-secondary, #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-ghost { background: var(--apple-weekly-surface); color: var(--apple-weekly-text); } #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-primary { background: var(--soc-primary); border-color: var(--soc-primary-deep); color: #fff; } #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-danger { background: var(--soc-danger); border-color: var(--soc-danger-deep); color: #fff; } #googleSheetsPanel.soc-apple-weekly-mode .ds-btn[disabled] { opacity: 0.52; cursor: not-allowed; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap { overflow: auto !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table { min-width: 1080px; table-layout: fixed; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table th:last-child, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table td:last-child { width: 148px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions { justify-content: flex-start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-sub { display: block; margin-top: 4px; color: var(--apple-weekly-text-sub); font-size: 12px; font-weight: 500; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary p strong, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary p span { display: block; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary p span { text-align: right; word-break: break-word; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--apple-weekly-border); border-radius: 10px; overflow: hidden; background: var(--apple-weekly-surface-muted); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-item + .soc-apple-weekly-section-item { border-top: 1px solid var(--apple-weekly-border); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-item .soc-apple-weekly-checkbox-row { min-height: 54px; padding: 0 14px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-copy { display: grid; gap: 3px; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-copy strong { color: var(--apple-weekly-text); font-size: 14px; line-height: 1.25; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-copy em { color: var(--apple-weekly-text-sub); font-size: 12px; font-style: normal; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-workspace { display: grid; gap: 16px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-status-table, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-override-table { min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-warning-inline { margin: 0; color: var(--soc-warning); font-size: 12px; font-weight: 700; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-empty-state.compact { padding: 10px 12px !important; } } @media (min-width: 1024px) { #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsSetupSections { display: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-bar { grid-template-columns: minmax(0, 1fr); gap: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls { width: min(620px, 100%); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls > span { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; min-height: 40px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls > span em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar .soc-google-sheet-actions > .ds-btn, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-toolbar .soc-apple-weekly-toolbar-actions .ds-btn, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-toolbar .soc-apple-weekly-toolbar-actions .ds-btn { min-height: 40px !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-operations-workspace { position: relative; display: grid; grid-template-rows: auto auto auto; gap: 12px; min-width: 0; min-height: 0; height: auto; overflow: visible; isolation: isolate; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-toolbar { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 12px; padding: 0 0 12px; border-bottom: 1px solid var(--apple-weekly-border); background: var(--apple-weekly-surface); pointer-events: auto; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 4px 0 2px; border-bottom: 1px solid var(--apple-weekly-border); background: var(--apple-weekly-surface); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); gap: 16px; min-width: 0; min-height: 0; overflow: visible; align-items: start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-body.is-contained { grid-template-columns: minmax(0, 1fr); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-field .ds-input, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-field--readonly .soc-apple-weekly-static-field { min-height: 40px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-field--readonly .soc-apple-weekly-static-field { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--apple-weekly-border); border-radius: 10px; background: var(--apple-weekly-surface); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-static-field strong { color: var(--apple-weekly-text); font-size: 14px; line-height: 1.25; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-top-shell { position: static; display: grid; gap: 10px; padding: 0 0 8px; border-bottom: 1px solid var(--apple-weekly-border); background: var(--apple-weekly-surface); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-shell-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-shell-actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-top-shell-main { display: grid; gap: 8px; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-context-line { color: var(--apple-weekly-text); font-size: 14px; line-height: 1.45; white-space: normal; word-break: break-word; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-readiness-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-readiness-inline .meta { margin: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card { display: grid; gap: 4px; padding: 12px 14px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-card-head .meta { margin: 4px 0 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 14px 16px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner-copy { display: grid; gap: 6px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner-meta { justify-self: end; align-self: center; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-console { grid-template-columns: minmax(0, 1fr) minmax(360px, 392px); align-items: start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table-wrap { padding: 0; overflow: auto; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail { padding: 16px; gap: 10px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-main-column, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-side-column { display: grid; align-content: start; gap: 12px; min-width: 0; min-height: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-main-column { overflow: auto; padding-right: 4px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-side-column { overflow: auto; padding-left: 2px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout { display: grid; gap: 12px; min-width: 0; min-height: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout.is-conflicts { grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr); align-items: start; height: 100%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-body.is-contained > .soc-apple-weekly-ops-layout { min-height: 0; height: 100%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout.is-conflicts > .soc-apple-weekly-ops-main-column, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout.is-conflicts > .soc-apple-weekly-ops-side-column { min-height: 0; height: 100%; overflow: hidden; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-list-panel { height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-table-shell { min-height: 0; overflow: auto; border: 1px solid var(--apple-weekly-border); border-radius: 12px; background: var(--apple-weekly-surface-muted); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-table { min-width: 100%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-table thead th { position: sticky; top: 0; z-index: 1; background: var(--apple-weekly-surface); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-table tbody tr { cursor: pointer; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-table tbody tr.is-selected { background: color-mix(in srgb, var(--apple-weekly-accent-soft) 76%, var(--apple-weekly-surface-muted)); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-summary-cell { display: grid; gap: 4px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-summary-cell strong, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-summary-cell .meta { display: block; min-width: 0; margin: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-compare-grid { display: grid; gap: 10px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-compare-card { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--apple-weekly-border); border-radius: 10px; background: var(--apple-weekly-surface-muted); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-compare-card.is-accent { border-color: color-mix(in srgb, var(--soc-primary) 36%, var(--apple-weekly-border)); background: color-mix(in srgb, var(--apple-weekly-accent-soft) 82%, var(--apple-weekly-surface-muted)); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-compare-card span { color: var(--apple-weekly-text-sub); font-size: 12px; font-weight: 700; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-compare-card pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; color: var(--apple-weekly-text); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-action-group { display: grid; gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-conflict-action-group { gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-side-column.is-conflict-detail { height: 100%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary.warning { border-color: var(--apple-weekly-warning-border); background: var(--apple-weekly-warning-soft); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail-head { display: grid; gap: 8px; justify-items: start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail-head .meta { margin: 2px 0 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-detail-meta-list div { gap: 6px; } @media (max-width: 900px) { #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-conflict-action-group { grid-template-columns: minmax(0, 1fr); } } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-detail-meta-list dd, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-panel p, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-log-list p { white-space: normal; word-break: break-word; line-height: 1.5; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table { min-width: 100%; width: 100%; table-layout: fixed; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table { min-width: 760px; table-layout: fixed; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th:nth-child(1), #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td:nth-child(1) { width: 150px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th:nth-child(2), #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td:nth-child(2) { width: 92px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th:nth-child(3), #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td:nth-child(3) { width: 128px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th:nth-child(5), #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td:nth-child(5) { width: 88px; } } @media (min-width: 1024px) and (max-width: 1180px) { #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner { grid-template-columns: minmax(0, 1fr); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner-meta { justify-self: start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab { min-width: 148px; } } .soc-settings-shell-bar { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; margin: 0 auto 12px; padding: 4px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white); border-radius: 16px; background: color-mix(in srgb, var(--ui-bg-surface-subtle, var(--soc-card-bg)) 72%, white); overflow: visible; } .soc-settings-shell-tabs { display: flex; align-items: center; gap: 6px; min-width: 0; } .soc-settings-shell-tab { position: relative; min-height: 40px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ui-text-secondary, var(--soc-text-sub)); padding: 0 16px; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .soc-settings-shell-tab:hover, .soc-settings-shell-tab:focus-visible { color: var(--ui-text-primary, var(--soc-text)); background: color-mix(in srgb, var(--ui-bg-surface, white) 92%, transparent); outline: none; } .soc-settings-shell-tab.is-active, .soc-settings-shell-tab[aria-selected="true"] { color: var(--ui-text-primary, var(--soc-text)); border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 26%, var(--ui-border-subtle, var(--soc-border))); background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .soc-settings-single-column { display: grid; gap: 18px; max-width: 760px; width: 100%; margin: 0 auto; } .soc-settings-scope-label { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 12%, white); color: var(--ui-accent-strong, var(--soc-accent)); font-size: 12px; font-weight: 700; } .soc-reminder-config-card, .soc-notification-settings-card, .soc-notification-center-shell { display: grid; gap: 14px; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 86%, white); border-radius: 18px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98) 0%, color-mix(in srgb, var(--ui-bg-surface-subtle, var(--soc-card-bg)) 72%, white) 100% ); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05); } .soc-reminder-config-card { grid-template-columns: minmax(250px, 288px) minmax(0, 1fr); align-items: start; column-gap: 22px; } .soc-reminder-card-head { display: block; } .soc-reminder-card-copy { display: grid; gap: 10px; width: 100%; position: sticky; top: 18px; } .soc-reminder-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .soc-reminder-card-head h3 { margin: 0; font-size: 20px; line-height: 1.25; } .soc-reminder-card-head .meta { margin: 0; } .soc-reminder-form { display: grid; gap: 0; max-width: 100%; padding-top: 2px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white); border-radius: 18px; background: rgba(255, 255, 255, 0.94); overflow: hidden; } .soc-reminder-row { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 16px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white); background: transparent; } .soc-reminder-row--toggle { grid-template-columns: 136px max-content; } .soc-reminder-row--control { align-items: start; } .soc-reminder-row--preview { align-items: start; } .soc-reminder-label { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; font-weight: 700; } .soc-reminder-inline-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .soc-reminder-inline-group--stacked { align-items: flex-start; justify-content: flex-start; } .soc-reminder-preset-group { display: flex; flex-wrap: wrap; gap: 8px; } .soc-reminder-preset-group .ds-btn.is-active { border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 45%, var(--ui-border-strong, var(--soc-border))); background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 12%, var(--ui-bg-surface, var(--soc-card-bg))); color: var(--ui-text-primary, var(--soc-text)); } .soc-reminder-number-input { width: 110px; } .soc-reminder-counter-input { width: 72px; text-align: center; } .soc-reminder-inline-custom { display: inline-grid; gap: 6px; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; font-weight: 700; } .soc-reminder-inline-custom .ds-input { min-height: 44px; } .soc-reminder-stepper { display: inline-grid; grid-template-columns: 40px 72px 40px; gap: 8px; align-items: center; } .soc-reminder-static-value { color: var(--ui-text-primary, var(--soc-text)); font-size: 15px; font-weight: 600; line-height: 1.45; } .soc-reminder-preview-box { display: grid; gap: 8px; max-width: 100%; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white); border-radius: 14px; background: color-mix(in srgb, var(--ui-bg-surface-subtle, var(--soc-card-bg)) 82%, white); } .soc-reminder-preview-box strong { font-size: 14px; } .soc-switch-input { position: relative; appearance: none; -webkit-appearance: none; width: 44px; height: 24px; margin: 0; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.42); background: #e2e8f0; cursor: pointer; transition: all 0.18s ease; box-sizing: border-box; flex: 0 0 auto; } .soc-switch-input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.28); transition: left 0.18s ease; } .soc-switch-input:checked { background: #ffb56a; border-color: #ff8400; } .soc-switch-input:checked::before { left: 22px; } .soc-reminder-preview-box strong, .soc-reminder-preview-box .meta { margin: 0; } .soc-reminder-advanced { border: 0; border-top: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white); border-radius: 0; background: transparent; } .soc-reminder-advanced > summary { cursor: pointer; list-style: none; padding: 14px 16px; font-size: 14px; font-weight: 600; } .soc-reminder-advanced > summary::-webkit-details-marker { display: none; } .soc-reminder-advanced-body { display: grid; gap: 14px; padding: 0 16px 16px; } .soc-reminder-advanced-head { display: grid; gap: 4px; } .soc-reminder-advanced-head strong, .soc-reminder-advanced-head .meta { margin: 0; } .soc-reminder-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--soc-danger, #dc2626) 18%, var(--ui-border-subtle, var(--soc-border))); border-radius: 14px; background: color-mix(in srgb, var(--soc-danger, #dc2626) 3%, white); } .soc-reminder-danger-copy { display: grid; gap: 4px; } .soc-reminder-danger-copy strong, .soc-reminder-danger-copy .meta { margin: 0; } .soc-reminder-danger-copy .meta { color: var(--ui-text-secondary, var(--soc-text-sub)); } .soc-reminder-danger-zone .ds-btn { flex: 0 0 auto; } .soc-settings-savebar { position: sticky; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 24%, var(--ui-border-subtle, var(--soc-border))); border-radius: 16px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08); z-index: 4; } .soc-settings-savebar-copy { display: grid; gap: 4px; } .soc-settings-savebar-copy strong, .soc-settings-savebar-copy .meta { margin: 0; } .soc-settings-savebar-actions { display: flex; align-items: center; gap: 8px; } .soc-notification-settings-form { display: grid; gap: 16px; } .soc-notification-permission-banner { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid rgba(251, 146, 60, 0.28); border-radius: 14px; background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 7%, var(--ui-bg-surface, var(--soc-panel-bg))); } .soc-notification-permission-banner strong, .soc-notification-permission-banner .meta { margin: 0; } .soc-notification-state-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 6px; } .soc-notification-check-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 14px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } .soc-notification-check-copy { display: grid; gap: 6px; } .soc-notification-check-row strong, .soc-notification-check-copy .meta { margin: 0; } .soc-notification-check-copy .meta { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 14px; line-height: 1.5; } .soc-notification-center-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .soc-notification-center-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .soc-notification-center-tab { min-height: 36px; padding: 0 14px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 999px; background: var(--ui-bg-surface, var(--soc-card-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; font-weight: 600; cursor: pointer; } .soc-notification-center-tab.is-active, .soc-notification-center-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 45%, var(--ui-border-strong, var(--soc-border))); background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 12%, var(--ui-bg-surface, var(--soc-card-bg))); color: var(--ui-text-primary, var(--soc-text)); } .soc-notification-center-search { width: min(320px, 100%); } .soc-notification-center-list { display: grid; gap: 16px; } .soc-notification-center-group { display: grid; gap: 10px; } .soc-notification-center-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .soc-notification-center-group-title { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; font-weight: 700; } .soc-notification-center-group-count { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; font-weight: 600; } .soc-notification-center-item { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 14px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .soc-notification-center-item.is-unread { border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 28%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 4%, var(--ui-bg-surface, var(--soc-panel-bg))); } .soc-notification-center-item:hover { border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 26%, var(--ui-border-subtle, var(--soc-border))); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); } .soc-notification-center-dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 999px; background: var(--ui-accent, var(--soc-accent)); } .soc-notification-center-item.is-read .soc-notification-center-dot { background: rgba(148, 163, 184, 0.35); } .soc-notification-center-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; } .soc-notification-center-item-body { display: grid; gap: 8px; } .soc-notification-center-item-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .soc-notification-center-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ui-bg-surface, white); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; font-weight: 700; } .soc-notification-center-time { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; white-space: nowrap; } .soc-notification-center-title { margin: 0; color: var(--ui-text-primary, var(--soc-text)); font-size: 14px; font-weight: 700; } .soc-notification-center-summary { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); line-height: 1.5; } .soc-notification-center-item-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; } .soc-notification-center-item-hint { margin: 0; color: var(--ui-text-tertiary, color-mix(in srgb, var(--ui-text-secondary, var(--soc-text-sub)) 82%, transparent)); font-size: 12px; line-height: 1.4; } .soc-notification-center-item-actions { display: flex; align-items: center; gap: 8px; } .soc-notification-onboarding-modal .modal-head { justify-content: space-between; } .soc-notification-onboarding-head { display: grid; gap: 6px; } .soc-notification-onboarding-head h2 { margin: 0; } .soc-notification-onboarding-body { display: grid; gap: 14px; } .soc-notification-onboarding-hint { padding: 10px 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } .soc-notification-onboarding-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } @media (max-width: 880px) { .soc-settings-panel { width: calc(100vw - 24px); padding: 20px 18px 22px; border-radius: 18px; } .soc-settings-shell-bar { display: block; width: 100%; min-height: 0; overflow: visible; padding: 0; } .soc-settings-shell-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; min-width: 0; } .soc-settings-shell-tab { justify-content: center; width: 100%; padding: 0 8px; } .soc-reminder-card-head, .soc-settings-savebar, .soc-reminder-danger-zone, .soc-notification-permission-banner, .soc-notification-center-toolbar, .soc-notification-center-item-footer, .soc-notification-state-row, .soc-notification-check-row { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; } .soc-reminder-row, .soc-reminder-row--toggle { grid-template-columns: minmax(0, 1fr); } .soc-reminder-config-card { grid-template-columns: minmax(0, 1fr); } .soc-reminder-card-copy { position: static; } .soc-reminder-form, .soc-reminder-preview-box, .soc-settings-single-column { max-width: none; } .soc-notification-center-search { width: 100%; } } body.soc-desktop-shell :is( #hqReminderPanel, #notificationSettingsPanel, #auditPanel ).soc-settings-panel { align-self: start; display: flex; flex-direction: column; flex: 0 0 auto; gap: 20px; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; width: min(980px, calc(100vw - var(--soc-desktop-sidebar-width) - 72px)); max-width: 980px; margin: 20px auto 40px; padding: 26px 30px 30px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 90%, white) !important; border-radius: 24px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98) 0%, color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 90%, white) 100% ) !important; box-shadow: 0 18px 52px rgba(15, 23, 42, 0.06) !important; } body.soc-desktop-shell .container.ds-page > :is( #hqReminderPanel, #notificationSettingsPanel, #auditPanel ).soc-settings-panel, body.soc-desktop-shell .container.admin-layout > :is( #hqReminderPanel, #notificationSettingsPanel, #auditPanel ).soc-settings-panel { height: auto !important; max-height: none !important; min-height: 0 !important; align-self: start !important; overflow: visible !important; padding-bottom: 0 !important; } body.soc-desktop-shell :is( #hqReminderPanel, #notificationSettingsPanel, #auditPanel ).soc-settings-panel > .soc-settings-shell-bar { width: fit-content; max-width: 100%; margin: 0 0 2px; } body.soc-desktop-shell :is( #hqReminderPanel, #notificationSettingsPanel, #auditPanel ).soc-settings-panel :is( .soc-settings-page-header, .soc-settings-single-column, .soc-settings-savebar ) { width: 100%; max-width: none; margin-left: 0; margin-right: 0; } .soc-settings-audit-switch { display: flex; align-items: center; gap: 8px; margin: -4px 0 16px; } .soc-settings-audit-tab { min-height: 32px; padding: 0 14px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 8px; background: var(--ui-bg-surface, var(--soc-card-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; font-weight: 600; cursor: pointer; } .soc-settings-audit-tab:hover, .soc-settings-audit-tab:focus-visible { color: var(--ui-text-primary, var(--soc-text)); border-color: var(--ui-border-strong, var(--soc-border)); outline: none; } .soc-settings-audit-tab.is-active, .soc-settings-audit-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 45%, var(--ui-border-strong, var(--soc-border))); background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 12%, var(--ui-bg-surface, var(--soc-card-bg))); color: var(--ui-text-primary, var(--soc-text)); } #themePanel.soc-settings-panel > h2 { margin-top: 0; } /* ===== Typography normalization pass ===== */ html, body { font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); font-weight: var(--type-body-md-weight); } body, p, li, dd, textarea, input, select { font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); font-weight: var(--type-body-md-weight); letter-spacing: 0; } input::placeholder, textarea::placeholder { font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); font-weight: var(--type-body-md-weight); } .topbar h1, .topbar-brand-heading, .topbar-brand-link { font-size: var(--type-section-md-size); line-height: var(--type-section-md-line); font-weight: var(--type-section-md-weight); letter-spacing: 0; } :is( .panel-title-row > h2, .soc-page-header-main > h2, .soc-report-header-main > h2, .soc-hub-title-row > h2, .soc-announcement-header .title-inline > h2, .soc-workspace-title > h2, #peopleAdminPageTitle, #reportPanel > .ds-card-title, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-workspace-title > h3 ) { font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-line); font-weight: var(--type-title-lg-weight); letter-spacing: 0; } :is( .ds-card-title, .soc-block h3, .soc-block h4, .soc-report-empty-card h4, .soc-report-browse-card h4, .soc-report-cover-card h4, .soc-admin-sub-head h3, .soc-workspace-card-head h3, .soc-workspace-card-head h4, .soc-sheet-head h3, .modal-head h2, .soc-analytics-store-drawer-head h4, .report-flow-title, .ticket-title, .incident-title, .soc-employee-create-header h3, .soc-employee-create-section h4, .soc-report-builder-step h4, .soc-apple-weekly-main-help h4, .soc-apple-weekly-step-head h4, .soc-apple-weekly-subcard h5, .soc-apple-weekly-action-card h5, .soc-apple-weekly-rule-title, .soc-apple-weekly-danger-zone h4, .soc-apple-weekly-danger-card h4, .soc-apple-weekly-inline-head h5, .soc-apple-weekly-empty-state strong, .notification-empty-state strong, .global-notice-title ) { font-size: var(--type-section-md-size); line-height: var(--type-section-md-line); font-weight: var(--type-section-md-weight); letter-spacing: 0; } :is( .help, .meta, .session-info, .ds-card-subtitle, .ticket-desc, .ticket-meta-line, .ticket-kv-label, .ticket-kv-value, .global-notice-body, .soc-report-browse-list, .soc-report-header-left .meta, .soc-analytics-header-left .meta, .soc-mini-row .meta, .soc-insight-item, .notification-empty-state p, .soc-apple-weekly-workspace-title p, .soc-apple-weekly-sync-result .meta, .soc-apple-weekly-validation-log > .meta, .soc-apple-weekly-conflict-compare .meta, .soc-apple-weekly-baseline-readonly p, .soc-apple-weekly-empty-state p ) { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); letter-spacing: 0; } :is( label, .ds-label, .soc-filter-item label, .soc-menu-section-label, .soc-apple-weekly-global-field > span, .soc-apple-weekly-field > span, .soc-apple-weekly-form-grid label > span, .soc-apple-weekly-inline-field > span, .soc-kpi-label, .soc-summary-label, .soc-store-kpi-label, .soc-store-main-metric-label, .soc-home-weekly-chart-label, .soc-menu-item::before, .soc-sidebar-role-badge, .soc-sidebar-header-caption, .ticket-meta, .ticket-comment-item small, .case-timeline-event-time, .ticket-kv-label, .validation-error, .field-error ) { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); letter-spacing: 0; text-transform: none; } :is( .ds-btn, .ds-btn-sm, button, .report-tab, .announcement-mode-btn, .site-filter-btn, .date-filter-btn, .sla-page-btn, .soc-settings-shell-tab, .soc-settings-audit-tab, .soc-dashboard-workspace-tab, .soc-hub-mode-tab, .soc-report-builder-step-tab, .soc-report-templates-tab, .soc-export-menu-item, .soc-admin-link-btn, .soc-menu-group-toggle, .soc-menu-sub-item, .mobile-nav-action-btn, .soc-apple-weekly-main-tab-btn, .soc-weekly-subtab-btn, .soc-apple-weekly-subtab-btn ) { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: 600; letter-spacing: 0; } :is( .soc-dashboard-workspace-tab, .soc-hub-mode-tab, .soc-settings-shell-tab, .soc-settings-audit-tab, .soc-report-builder-step-tab, .soc-apple-weekly-main-tab-btn, .soc-weekly-subtab-btn, .soc-apple-weekly-subtab-btn ) { font-weight: 600; } :is( .chip, .soc-chip, .soc-active-filter-chip, .ds-badge, .status-badge, .status-online, .status-offline, .incident-urgent-badge, .incident-type-badge, .incident-category-badge, .case-status-badge, .case-eci-badge, .case-chip, .mobile-type-chip, .topbar-notification-badge, .soc-hero-chip, .soc-weekly-status-badge, .soc-weekly-status-chip, .soc-home-weekly-ratio-pill, .soc-store-summary-chip, .soc-store-kpi-pill, .soc-google-sheet-summary-pill, .soc-google-sheet-status-pill, .soc-google-sheet-result-badge, .soc-apple-weekly-status-badge, .soc-apple-weekly-day-chip, .soc-apple-weekly-tag, .soc-apple-weekly-sync-summary span, .soc-apple-weekly-weekday-chip, .soc-apple-weekly-section-chip, .soc-participant-role-pill, .soc-participant-state-pill, .soc-participant-pill, .soc-role-pill, .ticket-status-pill, .ticket-urgent-pill, .ticket-location-pill, .ticket-requested-count-badge, .soc-participants-role-chip, .soc-participants-stat-chip, .soc-site-code-missing-badge, .soc-announcement-important-chip ) { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); letter-spacing: 0; text-transform: none; } :is( .soc-kpi-value, .soc-summary-value, .soc-risk-gauge-value-wrap strong ) { font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-line); font-weight: var(--type-display-lg-weight); letter-spacing: 0; } :is( .soc-block-value, .soc-home-weekly-chart-value ) { font-size: var(--type-title-md-size); line-height: var(--type-title-md-line); font-weight: var(--type-title-md-weight); letter-spacing: 0; } :is( .soc-kpi-subtext, .soc-home-weekly-chart-wow, .soc-store-chart-meta, .soc-ticket-mini-legend-item, .soc-home-ticket-summary-site ) { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); } table th, .ds-table th, .soc-pc-list-header, .soc-pc-list-header > * { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); letter-spacing: 0; } table td, .ds-table td, .soc-report-browse-actions, .soc-google-sheet-mapping-table td, .soc-apple-weekly-console-table td, .soc-apple-weekly-validation-table td { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); letter-spacing: 0; } :is( .soc-weekly-heatmap-table th, .soc-weekly-heatmap-table td, .report-heatmap-table th, .report-heatmap-table td, .soc-heatmap-header, .soc-heatmap-row-label ) { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); } :is( .soc-toast, .validation-toast ) { font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); font-weight: var(--type-body-md-weight); letter-spacing: 0; } :is( body.soc-desktop-shell #menuSheetPanel .soc-menu-group-label, body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-label, body.nav-open #menuSheetPanel .soc-menu-group-label, body.nav-open #menuSheetPanel .soc-menu-sub-item-label, .ds-nav-item, .admin-tab-btn, .soc-bottom-tab-btn, .soc-bottom-tab-btn > span:last-child ) { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); letter-spacing: 0; } :is( body.soc-desktop-shell #menuSheetPanel .soc-menu-section-label, body.nav-open #menuSheetPanel .soc-menu-section-label ) { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); letter-spacing: 0; text-transform: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-workspace-kicker, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-status-badge, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-global-field > span, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-summary-pill, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-status-pill, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-badge, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-chip, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-tag, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-sync-summary span, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-weekday-chip, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-chip { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table th, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-table th { font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table td, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-table td, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-baseline-readonly p, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rule-block, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-sync-result, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-head .meta, #googleSheetsPanel.soc-apple-weekly-mode .meta, #googleSheetsPanel.soc-apple-weekly-mode .help { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-main-tab-btn, #googleSheetsPanel.soc-apple-weekly-mode .soc-weekly-subtab-btn, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-subtab-btn { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: 600; } #googleSheetsPanel.soc-apple-weekly-mode .ds-btn, #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions .ds-btn, #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-actions .ds-btn { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: 600; } /* ===== Light mode surface/divider normalization ===== */ [data-theme="light"] .panel, [data-theme="light"] .panel.ds-card, [data-theme="light"] .ds-card { background: var(--ui-bg-surface); border: 1px solid var(--ui-border-subtle); box-shadow: var(--ui-shadow-1); } [data-theme="light"] .panel-title-row, [data-theme="light"] .admin-sub-topbar, [data-theme="light"] .soc-view-page-header { border-bottom-color: var(--ui-divider-default); } [data-theme="light"] .soc-profile-hero-avatar.is-glyph { background: #ffffff; border-color: var(--ui-border-subtle); color: #9aa4b2; } [data-theme="dark"] .soc-profile-hero-avatar.is-glyph { background: #111827; border-color: rgba(148, 163, 184, 0.26); color: #94a3b8; } [data-theme="light"] .soc-block, [data-theme="light"] .soc-kpi-card, [data-theme="light"] .soc-summary-card, [data-theme="light"] .soc-summary-item, [data-theme="light"] .soc-realtime-date-display, [data-theme="light"] .soc-date-range-display, [data-theme="light"] .soc-filterbar, [data-theme="light"] .soc-workspace-card, [data-theme="light"] .soc-workspace-panel { background: var(--ui-bg-surface); border-color: var(--ui-border-subtle); box-shadow: var(--ui-shadow-1); } [data-theme="light"] .soc-block-head { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-divider-default); } [data-theme="light"] .soc-profile-record-head, [data-theme="light"] .soc-profile-detail-head, [data-theme="light"] #myProfileAccountSection > .soc-block-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } [data-theme="light"] .soc-kpi-subtext, [data-theme="light"] .soc-block .meta, [data-theme="light"] .soc-view-page-header .meta, [data-theme="light"] .panel-title-row .meta { color: var(--ui-text-secondary); } [data-theme="light"] body.soc-desktop-shell .container.ds-page, [data-theme="light"] body.soc-desktop-shell .container.admin-layout { background: linear-gradient(180deg, var(--soc-sidebar-bg-1) 0%, var(--soc-sidebar-bg-2) 100%) left top / var(--soc-desktop-sidebar-width) 100% no-repeat, linear-gradient(90deg, transparent calc(var(--soc-desktop-sidebar-width) - 1px), var(--ui-divider-default) calc(var(--soc-desktop-sidebar-width) - 1px), var(--ui-divider-default) var(--soc-desktop-sidebar-width), transparent var(--soc-desktop-sidebar-width)) left top / 100% 100% no-repeat, var(--ui-bg-canvas); } [data-theme="light"] body.soc-desktop-shell #menuSheetPanel, [data-theme="light"] body.soc-desktop-shell .container.admin-layout #menuSheetPanel { border-right-color: var(--ui-divider-default) !important; background: linear-gradient(180deg, var(--soc-sidebar-bg-1) 0%, var(--soc-sidebar-bg-2) 100%) !important; } [data-theme="light"] body.soc-desktop-shell #analyticsView { gap: 16px; } [data-theme="light"] body.soc-desktop-shell #analyticsView .soc-analytics-header { border: 1px solid var(--ui-border-subtle); border-radius: 12px; background: var(--ui-bg-surface); padding: 20px 24px 16px; box-shadow: var(--ui-shadow-1); gap: 16px; } [data-theme="light"] body.soc-desktop-shell #analyticsView .soc-analytics-header-left .meta { margin-top: 6px; color: var(--ui-text-secondary); } [data-theme="light"] body.soc-desktop-shell #analyticsView .soc-analytics-header-right { gap: 10px; align-content: start; } [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap { gap: 12px; } [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-hero, [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > #analyticsHeatmapBlock, [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > #analyticsStoreComparisonBlock, [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-trend-grid > .soc-block, [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-kpi-grid .soc-kpi-card, [data-theme="light"] body.soc-desktop-shell #analyticsScoreTopBlock { background: var(--ui-bg-surface); border: 1px solid var(--ui-border-subtle); box-shadow: var(--ui-shadow-1); } [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-hero, [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > #analyticsHeatmapBlock, [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > #analyticsStoreComparisonBlock, [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-trend-grid > .soc-block, [data-theme="light"] body.soc-desktop-shell #analyticsScoreTopBlock { padding: 20px 24px 24px; } [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-kpi-grid .soc-kpi-card { padding: 18px 20px; } [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-hero .soc-analytics-hero-head, [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > #analyticsHeatmapBlock > .soc-block-head, [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > #analyticsStoreComparisonBlock > .soc-block-head, [data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-trend-grid > .soc-block > .soc-block-head, [data-theme="light"] body.soc-desktop-shell #analyticsScoreTopBlock > .soc-block-head { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-divider-default); } [data-theme="light"] body.soc-desktop-shell #analyticsHeatmapBlock .soc-heatmap-scroll, [data-theme="light"] body.soc-desktop-shell #analyticsStoreComparisonList, [data-theme="light"] body.soc-desktop-shell #analyticsScoreTopList { background: var(--ui-bg-surface); } [data-theme="light"] body.soc-desktop-shell #analyticsView .soc-analytics-state, [data-theme="light"] body.soc-desktop-shell #analyticsView #analyticsErrorState, [data-theme="light"] body.soc-desktop-shell #analyticsView #analyticsEmptyState { background: var(--ui-bg-surface); border: 1px solid var(--ui-border-subtle); box-shadow: var(--ui-shadow-1); } /* ===== Alerts/Tickets workspace template unification ===== */ @media (min-width: 1024px) { body.soc-desktop-shell #alertsView.soc-ops-workspace-view, body.soc-desktop-shell #ticketsView.soc-ops-workspace-view, body.soc-desktop-shell #ticketsView .soc-ops-workspace-frame { display: grid; gap: 16px; min-width: 0; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-frame { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-frame:hover, body.soc-desktop-shell #ticketsView .soc-ops-workspace-frame:active { transform: none !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-header { display: grid; gap: 6px; margin: 0 !important; padding: 0 0 16px !important; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)) !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-topbar { display: flex; align-items: center; gap: 12px; margin: 0 !important; padding: 12px 16px !important; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 12px !important; background: var(--ui-bg-surface, var(--soc-panel-bg)) !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-topbar .soc-realtime-date-display, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-topbar .ds-btn { min-height: 40px !important; height: 40px !important; border-radius: 10px !important; padding: 0 14px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis { margin: 0 !important; gap: 12px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card { min-height: 100px !important; padding: 16px 16px 14px !important; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 12px !important; background: var(--ui-bg-surface, var(--soc-panel-bg)) !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card.is-active { border-color: var(--ui-accent, var(--soc-accent)) !important; background: color-mix( in srgb, var(--ui-accent, var(--soc-accent)) 8%, var(--ui-bg-surface, var(--soc-panel-bg)) ) !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label { color: var(--ui-text-secondary, var(--soc-text-sub)) !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value { color: var(--ui-text-primary, var(--soc-text)) !important; line-height: 1 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-helper { margin: 0 !important; color: var(--ui-text-secondary, var(--soc-text-sub)) !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-main { display: grid !important; grid-template-columns: minmax(0, 1fr) 336px !important; gap: 16px !important; align-items: start !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-panel { min-width: 0; min-height: 560px; padding: 0 !important; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 12px !important; background: var(--ui-bg-surface, var(--soc-panel-bg)) !important; box-shadow: none !important; overflow: hidden !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-section { display: flex; flex-direction: column; gap: 0 !important; min-height: 100%; margin: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 68px; margin: 0 !important; padding: 18px 20px 14px !important; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)) !important; background: var(--ui-bg-surface-2, var(--soc-soft-bg)) !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ui-text-primary, var(--soc-text)); } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.soc-workspace-inline-summary, .soc-ticket-feed-summary) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-workspace-inline-badge { min-height: 28px; padding: 0 10px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 999px; background: var(--ui-bg-surface, var(--soc-panel-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 600; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header { margin: 0 !important; min-height: 44px !important; padding: 0 20px 12px !important; border: 0 !important; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header > span { font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; color: var(--ui-text-secondary, var(--soc-text-sub)) !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list, .ticket-list) { margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card, .ticket-list > .ticket-card) { min-height: 82px !important; height: 82px !important; padding: 12px 20px !important; border-inline: 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list > .incident-card:last-child, .incident-list > .incident-ticket-card:last-child, .ticket-list > .ticket-card:last-child) { border-bottom: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-card:hover, .incident-card:active, .incident-ticket-card:hover, .incident-ticket-card:active, .ticket-card:hover, .ticket-card:active) { background: var(--ui-bg-surface-2, var(--soc-soft-bg)) !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-selectable-row.is-selected { background: color-mix( in srgb, var(--ui-accent, var(--soc-accent)) 10%, var(--ui-bg-surface, var(--soc-panel-bg)) ) !important; outline: 1px solid color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 38%, transparent) !important; outline-offset: -1px; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-empty-state { min-height: 260px; margin: 0 !important; padding: 28px 20px 24px !important; border: 0 !important; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ui-text-secondary, var(--soc-text-sub)) !important; align-content: start; gap: 8px; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-empty-state p { margin: 0; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(#realtimeListSkeleton, .incident-list-skeleton) { margin: 0; padding: 0 20px 20px; border: 0 !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel { display: flex !important; flex-direction: column !important; gap: 0 !important; width: 336px !important; min-width: 336px !important; max-width: 336px !important; min-height: 560px; max-height: calc(100dvh - 128px) !important; padding: 0 !important; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 12px !important; background: var(--ui-bg-surface, var(--soc-panel-bg)) !important; box-shadow: none !important; overflow: hidden !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head { padding: 18px 20px 16px !important; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)) !important; background: var(--ui-bg-surface-2, var(--soc-soft-bg)) !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 { font-size: 16px !important; line-height: 24px !important; font-weight: 600 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions { gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel .ds-btn.ds-btn-sm { min-height: 32px !important; height: 32px !important; padding: 0 12px !important; border-radius: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel > .meta { margin: 0 !important; padding: 14px 20px 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi { padding: 14px 20px 0 !important; gap: 10px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item { min-height: 74px; padding: 10px 12px !important; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 10px !important; background: var(--ui-bg-surface-2, var(--soc-soft-bg)) !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section { padding: 14px 20px 0 !important; gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary { min-height: 96px; max-height: 160px; padding: 12px !important; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 10px !important; background: var(--ui-bg-surface-2, var(--soc-soft-bg)) !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread { min-height: 240px !important; padding: 12px !important; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 10px !important; background: var(--ui-bg-surface, var(--soc-panel-bg)) !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form { margin: 14px 20px 0 !important; padding: 12px !important; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 10px !important; background: var(--ui-bg-surface-2, var(--soc-soft-bg)) !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-input { min-height: 40px !important; height: 40px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-submit { min-height: 32px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions { margin-top: auto; padding: 14px 20px 20px !important; border-top: 1px solid var(--ui-divider-default, var(--soc-divider)) !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-header { padding-bottom: 14px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar { gap: 10px; padding: 10px 14px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar .soc-realtime-date-display, body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar .ds-btn { min-height: 38px !important; height: 38px !important; padding: 0 13px !important; } body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-row { gap: 10px; padding: 6px 2px 0; } body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-summary { font-size: 12px; line-height: 16px; } body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-btn { min-height: 32px; height: 32px; padding-inline: 10px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis { gap: 10px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card { min-height: 88px !important; padding: 14px 14px 12px !important; box-shadow: none !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label { font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value { font-size: 28px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-helper { font-size: 13px; line-height: 18px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-main { grid-template-columns: minmax(0, 1fr) 320px !important; gap: 14px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-results-panel { min-height: 520px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-results-head { min-height: 62px; padding: 16px 18px 12px !important; } body.soc-desktop-shell #alertsView .soc-workspace-inline-summary { gap: 4px; } body.soc-desktop-shell #alertsView .soc-workspace-inline-badge { min-height: 24px; padding: 0 8px; } body.soc-desktop-shell #alertsView .soc-pc-list-header { min-height: 40px !important; padding: 0 18px 10px !important; } body.soc-desktop-shell #alertsView :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card) { min-height: 68px !important; padding: 10px 18px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-empty-state { min-height: 188px; padding: 24px 18px 20px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-empty-state .ds-btn { min-height: 32px; height: 32px; } body.soc-desktop-shell #alertsView :is(#realtimeListSkeleton, .incident-list-skeleton) { padding: 0 18px 18px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel { width: 320px !important; min-width: 320px !important; max-width: 320px !important; min-height: 520px; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-head { padding: 16px 18px 14px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-head-actions { gap: 6px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel > .meta { padding: 12px 18px 0 !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-kpi { padding: 12px 18px 0 !important; gap: 8px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-kpi-item { min-height: 66px; padding: 9px 10px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-section { padding: 12px 18px 0 !important; gap: 6px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-summary { min-height: 72px; max-height: 132px; padding: 10px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-thread { min-height: 188px !important; padding: 10px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-form { margin: 12px 18px 0 !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-actions { padding: 12px 18px 18px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi-item { min-height: 58px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-summary { min-height: 60px; max-height: 96px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread { min-height: 120px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread .help, body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-summary .help { margin: 0; font-size: 13px; line-height: 18px; color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #ticketsView #ticketStatusFilterChips { gap: 5px; align-items: center; justify-content: flex-end; } body.soc-desktop-shell #ticketsView #ticketStatusFilterChips .chip { min-height: 26px; padding: 0 9px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 600; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar { gap: 8px; padding: 9px 12px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar .soc-realtime-date-display, body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar .ds-btn { min-height: 36px !important; height: 36px !important; padding: 0 12px !important; } body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-row { gap: 10px; padding: 0 2px 2px; } body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-summary { font-size: 12px; line-height: 16px; } body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-btn { min-height: 32px; height: 32px; padding-inline: 10px; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis { gap: 8px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card { min-height: 82px !important; padding: 12px 13px 10px !important; box-shadow: none !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label { font-size: 11px !important; line-height: 15px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value { font-size: 26px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-helper { font-size: 13px; line-height: 18px; margin-top: -2px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-main { grid-template-columns: minmax(0, 1fr) 308px !important; gap: 12px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-panel { min-height: 496px; background: var(--ui-bg-surface, var(--soc-panel-bg)) !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-head { min-height: 58px; padding: 14px 16px 11px !important; } body.soc-desktop-shell #ticketsView .soc-ticket-feed-summary { gap: 4px; } @media (min-width: 1024px) { #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-head { display: block !important; width: min(1400px, 100%); height: auto !important; min-height: 0 !important; margin: 0 auto 4px; padding: 0; border: 0; gap: 6px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block { display: block !important; grid-template-columns: none; align-items: start; gap: 0; height: auto !important; min-height: 0 !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-copy { display: block !important; height: auto !important; min-height: 0 !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-head-meta { display: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-bar, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tabs { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsSetupSections, #googleSheetsPanel.soc-apple-weekly-mode > [data-section] { display: none !important; } } body.soc-desktop-shell #ticketsView .soc-workspace-inline-badge { min-height: 22px; padding: 0 7px; } body.soc-desktop-shell #ticketsView .soc-pc-list-header { min-height: 38px !important; padding: 0 16px 9px !important; } body.soc-desktop-shell #ticketsView .ticket-list > .ticket-card { min-height: 64px !important; padding: 9px 16px !important; } body.soc-desktop-shell #ticketsView .ticket-row-summary-comment { line-height: 1.28; max-height: calc(1.28em * 2); } body.soc-desktop-shell #ticketsView .soc-ops-workspace-empty-state { min-height: 156px; padding: 20px 16px 18px !important; justify-items: start; align-content: center; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-empty-state .ds-btn { min-height: 32px; height: 32px; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel { width: 308px !important; min-width: 308px !important; max-width: 308px !important; min-height: 496px; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head { padding: 14px 16px 12px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head-actions { gap: 6px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel > .meta { padding: 10px 16px 0 !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-kpi { padding: 10px 16px 0 !important; gap: 7px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-kpi-item { min-height: 60px; padding: 8px 9px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-section { padding: 10px 16px 0 !important; gap: 5px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-summary { min-height: 56px; max-height: 120px; padding: 9px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-thread { min-height: 156px !important; padding: 9px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-form { margin: 10px 16px 0 !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-actions { padding: 10px 16px 16px !important; } body.soc-desktop-shell #ticketsView #ticketCommentPanelCloseBtn { border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 30%, var(--ui-border-default, var(--soc-border))); background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 7%, var(--ui-bg-surface, var(--soc-panel-bg))); color: var(--ui-text-primary, var(--soc-text)); } body.soc-desktop-shell #ticketsView #ticketCommentPanelDeleteBtn { border-color: color-mix(in srgb, var(--ui-danger, #dc2626) 18%, var(--ui-border-subtle, var(--soc-border))); background: transparent; color: color-mix(in srgb, var(--ui-danger, #dc2626) 78%, var(--ui-text-primary, var(--soc-text))); } body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi-item { min-height: 52px; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-summary { min-height: 44px; max-height: 80px; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread { min-height: 88px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread .help, body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-summary .help { margin: 0; font-size: 12px; line-height: 17px; color: var(--ui-text-secondary, var(--soc-text-sub)); } } /* ===== Apple Weekly Step 1 template cleanup ===== */ #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-support-card { gap: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-panel-status { margin: 0; font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); color: var(--ui-text-secondary, var(--soc-text-sub)); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-panel-body { gap: 16px !important; padding: 20px 24px 24px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields { display: grid; gap: 12px; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-field-stack { display: grid; gap: 7px; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-field-label, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-field-stack > label { margin: 0; font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-field-help { margin: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-readonly-field, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-copy-field { min-height: 40px; border: 1px solid var(--ui-border-subtle, var(--apple-weekly-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, var(--apple-weekly-surface)); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-readonly-field { display: flex; align-items: center; padding: 0 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 8px 8px 12px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-copy-field .ds-btn, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-input-with-action .ds-btn { min-height: 32px; height: 32px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-copy-field-value, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-readonly-field-value { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text-primary, var(--apple-weekly-text)); font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); font-family: var(--soc-font-mono, "SFMono-Regular", ui-monospace, Menlo, monospace); } /* ===== Pass19 corrective overrides: alerts/tickets + analytics + support + people ===== */ body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header { padding: 0 16px 2px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header-main { gap: 4px; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill, .incident-card .incident-ticket-status), body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge, body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge { background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-pending, .incident-card .incident-ticket-status.status-pending) { color: #d65c00 !important; border-color: #ff8a1f !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-needs-info, .incident-card .incident-ticket-status.status-needs-info) { color: #2f80ff !important; border-color: #2f80ff !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-approved, .incident-card .incident-ticket-status.status-approved), body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge.is-confirmed, body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-confirmed { color: #15803d !important; border-color: #16a34a !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-unavailable, .ticket-status-pill.status-rejected, .incident-card .incident-ticket-status.status-unavailable, .incident-card .incident-ticket-status.status-rejected), body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge.is-unconfirmed, body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-unconfirmed { color: #c81e1e !important; border-color: #ef4444 !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-cancelled, .ticket-status-pill.status-done, .incident-card .incident-ticket-status.status-cancelled, .incident-card .incident-ticket-status.status-done) { color: #475569 !important; border-color: #94a3b8 !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-card.status-unavailable, .ticket-card.status-rejected, .incident-card.incident-ticket-card.status-unavailable, .incident-card.incident-ticket-card.status-rejected) { opacity: 1 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-card.status-unavailable::before, .ticket-card.status-rejected::before, .incident-card.incident-ticket-card.status-unavailable::before, .incident-card.incident-ticket-card.status-rejected::before) { background: #ef4444 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; min-height: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap, body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge { width: 120px !important; height: 120px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap { inset: 0 !important; padding-top: 0 !important; } body.soc-desktop-shell #analyticsView #analyticsRiskScoreValue { font-size: 30px !important; line-height: 1 !important; letter-spacing: -0.04em; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary { gap: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item { min-height: 52px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item:last-child { grid-column: auto !important; } body.soc-desktop-shell #analyticsView .soc-risk-grade.safe, body.soc-desktop-shell #analyticsView .soc-risk-grade.stable { border-color: rgba(22, 163, 74, 0.28) !important; background: #ffffff !important; color: #15803d !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-safe, body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot { background: #16a34a !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-approved { background: #16a34a !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-pending { background: #ff6a13 !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-unavailable, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-rejected { background: #ef4444 !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-cancelled { background: #64748b !important; } body.soc-desktop-shell #opsSupportPanel :is(.cal-line.state-pending, .cal-line.state-approved, .cal-line.state-unavailable, .cal-line.state-rejected, .cal-line.state-cancelled) { background: #ffffff !important; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending { --ops-support-line-accent: #ff6a13; border-color: rgba(255, 106, 19, 0.68) !important; color: #c2410c !important; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved { --ops-support-line-accent: #16a34a; border-color: rgba(22, 163, 74, 0.58) !important; color: #15803d !important; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-unavailable, body.soc-desktop-shell #opsSupportPanel .cal-line.state-rejected { --ops-support-line-accent: #ef4444; border-color: rgba(239, 68, 68, 0.62) !important; color: #c81e1e !important; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled { --ops-support-line-accent: #64748b; border-color: rgba(100, 116, 139, 0.48) !important; color: #475569 !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line:hover, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line.is-selected { background: #ffffff !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) { background: #ffffff !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-pending, .support-status-chip.state-pending) { border-color: #ff6a13 !important; color: #c2410c !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-approved, .support-status-chip.state-approved) { border-color: #16a34a !important; color: #15803d !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) { border-color: #ef4444 !important; color: #c81e1e !important; } body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-cancelled, .support-status-chip.state-cancelled) { border-color: #94a3b8 !important; color: #475569 !important; } body.soc-desktop-shell #peopleView :is(#peopleHubEmployeesPane, #peopleHubAccountsPane, #peopleHubHrPane) .soc-people-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-card { align-content: start; } body.soc-desktop-shell #peopleView .soc-people-kpi-card.is-bars .soc-people-bar-list { display: grid; align-content: start; gap: 10px; } @media (min-width: 1024px) { body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card { min-height: 74px !important; padding: 10px 12px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label { font-size: 11px !important; line-height: 14px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value { font-size: 24px !important; line-height: 1 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-main { grid-template-columns: minmax(0, 1fr) 320px !important; gap: 12px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-panel { min-height: 500px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head { min-height: 58px !important; padding: 14px 16px 10px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header { min-height: 38px !important; padding: 0 16px 9px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card, .ticket-list > .ticket-card) { min-height: 64px !important; padding: 9px 16px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel { width: 320px !important; min-width: 320px !important; max-width: 320px !important; min-height: 500px !important; } } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary .soc-apple-weekly-readonly-field-value { font-family: inherit; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-input-with-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-input-with-action input { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsTemplateResultWrap { gap: 10px; padding: 16px; border-color: var(--ui-border-subtle, var(--apple-weekly-border)); background: var(--ui-bg-surface-subtle, var(--apple-weekly-surface)); } #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsTemplateResultWrap .soc-google-sheet-result-head { align-items: flex-start; gap: 10px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-summary { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-summary strong { margin: 0; font-size: var(--type-section-md-size, 16px); line-height: var(--type-section-md-line, 24px); font-weight: var(--type-section-md-weight, 600); color: var(--ui-text-primary, var(--apple-weekly-text)); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-message, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-meta { margin: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-details { margin: 0; padding: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-details > summary { cursor: pointer; list-style: none; font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); font-weight: 600; color: var(--ui-text-primary, var(--apple-weekly-text)); } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-details > summary::-webkit-details-marker { display: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-detail-list { display: grid; gap: 8px; padding-top: 10px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-raw { margin: 0; padding: 10px 12px; border: 1px dashed var(--ui-divider-default, var(--apple-weekly-border)); border-radius: 10px; background: var(--ui-bg-surface, #fff); white-space: pre-wrap; word-break: break-word; } #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsTemplateResultSheets { margin: 0; max-height: 120px; overflow: auto; } /* ===== Apple Weekly desktop scroll fix ===== */ @media (min-width: 1024px) { body.soc-apple-weekly-active .container.ds-page, body.soc-apple-weekly-active .container.admin-layout, body.soc-desktop-shell .container.ds-page:has(#googleSheetsPanel.soc-apple-weekly-host), body.soc-desktop-shell .container.admin-layout:has(#googleSheetsPanel.soc-apple-weekly-host) { overflow-y: auto !important; overflow-x: hidden !important; } body.soc-apple-weekly-active #googleSheetsPanel.soc-apple-weekly-host { height: auto !important; max-height: none !important; overflow: visible !important; } body.soc-apple-weekly-active #googleSheetsPanel.soc-apple-weekly-mode { height: auto !important; max-height: none !important; overflow: visible !important; padding-bottom: calc(var(--soc-main-scroll-padding, 24px) + 32px); } } /* ===== Apple Weekly Step 1 layout repair ===== */ @media (min-width: 1024px) { #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsSetupSections.is-active-tab { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; gap: 24px !important; align-items: start; width: 100%; padding-top: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-link-pane { width: 100%; max-width: none; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-link-pane > .soc-apple-weekly-section-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 20px; align-items: start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-link-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-service { display: grid; gap: 6px; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-service code { display: block; max-width: 100%; padding: 9px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface-subtle, #f8fafc); font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-meta-row { align-items: center; justify-content: flex-end; gap: 10px 16px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap { width: 100%; max-width: none; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; width: 100%; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-main, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-context { display: grid; gap: 24px; min-width: 0; align-content: start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-support-card, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-context-card { display: grid; gap: 0; min-width: 0; width: 100%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar--stacked { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 18px; align-items: start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: start; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-heading > div { min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-heading h4 { margin: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-heading .meta, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-heading .soc-apple-weekly-panel-status { margin: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-heading .soc-apple-weekly-panel-status { display: inline-flex; align-items: center; min-height: 24px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar--stacked > .soc-google-sheet-actions { justify-content: flex-end; align-self: start; flex-wrap: wrap; gap: 8px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar--stacked > .soc-google-sheet-actions > .ds-btn { min-height: 40px !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-panel-body { display: grid !important; gap: 16px !important; padding: 20px 24px 24px; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields--baseline, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields--template, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields--context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields--baseline > .soc-apple-weekly-field-stack:first-child, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-field-stack--full { grid-column: 1 / -1; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields--baseline .soc-apple-weekly-readonly-field-value, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields--context .soc-apple-weekly-readonly-field-value { font-family: inherit; } #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-form .soc-google-sheet-form-grid { grid-template-columns: 180px minmax(0, 1fr); gap: 10px 16px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-context-card .soc-google-sheet-status-pill { justify-self: start; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-context-card .soc-apple-weekly-field-help { margin: 0; } } @media (min-width: 1024px) and (max-width: 1399px) { #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-lower { grid-template-columns: minmax(0, 1fr); } } /* ===== Analytics layout repair ===== */ @media (min-width: 1024px) { body.soc-desktop-shell #analyticsView { display: grid; gap: 24px; align-content: start; } body.soc-desktop-shell #analyticsView .soc-analytics-filter-row { grid-template-columns: minmax(0, 1.65fr) auto minmax(240px, 320px); gap: 16px; } body.soc-desktop-shell #analyticsContentWrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-summary-zone, body.soc-desktop-shell #analyticsContentWrap > #analyticsTrendZone, body.soc-desktop-shell #analyticsContentWrap > #analyticsHeatmapBlock, body.soc-desktop-shell #analyticsContentWrap > #analyticsStoreComparisonBlock { grid-column: 1 / -1; width: 100%; min-width: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-zone { grid-template-columns: minmax(0, 1.62fr) minmax(336px, 0.98fr); gap: 20px; align-items: stretch; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary { min-width: 0; min-height: 0; padding: 22px 24px 24px; align-content: start; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body { grid-template-columns: minmax(0, 1fr) 190px; gap: 20px; align-items: center; } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; align-content: stretch; align-self: stretch; grid-auto-rows: minmax(132px, 1fr); } body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-head { gap: 14px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-headline { grid-template-columns: minmax(0, 1fr) auto; gap: 18px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-title-wrap { gap: 6px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-lead { max-width: 44ch; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-meta-row { justify-content: space-between; align-items: center; gap: 8px 14px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-content { gap: 16px; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap { width: 190px; height: 190px; justify-self: end; align-self: center; } body.soc-desktop-shell #analyticsView .soc-risk-gauge, body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap { width: 190px; height: 190px; } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card, body.soc-desktop-shell #analyticsView .soc-analytics-kpi-card { min-height: 132px; padding: 18px 20px; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 10px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface, var(--soc-panel-bg)); box-shadow: var(--ui-shadow-1, var(--soc-shadow-soft)); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-label { white-space: normal; overflow: visible; text-overflow: clip; } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-value { align-self: end; } body.soc-desktop-shell #analyticsView #analyticsTrendZone { display: grid; gap: 16px; } body.soc-desktop-shell #analyticsView #analyticsTrendZone .soc-analytics-trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } body.soc-desktop-shell #analyticsView .soc-analytics-trend-card { min-height: 264px; } body.soc-desktop-shell #analyticsView #analyticsHeatmapBlock { min-width: 0; } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock { display: grid; gap: 18px; } body.soc-desktop-shell #analyticsView .soc-store-comparison-actions { grid-template-columns: repeat(3, minmax(0, 220px)) auto; gap: 12px; align-items: end; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-body { grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.9fr); gap: 20px; align-items: start; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-main { display: grid; gap: 16px; min-width: 0; align-content: start; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-side { position: static; display: grid; gap: 16px; min-width: 0; align-content: start; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonList, body.soc-desktop-shell #analyticsView #analyticsScoreTopBlock, body.soc-desktop-shell #analyticsView #analyticsStoreInsightPanel { width: 100%; min-width: 0; } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonList { min-height: 320px; } body.soc-desktop-shell #analyticsView #analyticsScoreTopBlock { margin-top: 0; } } /* ===== Sentrix desktop phase 2 normalization ===== */ @media (min-width: 1024px) { body.soc-desktop-shell { --soc-pc-toolbar-pad-y: 14px; --soc-pc-toolbar-pad-x: 16px; --soc-pc-toolbar-gap: 12px; --soc-pc-row-gap: 12px; --soc-pc-field-gap: 6px; --soc-pc-control-height: 36px; --soc-pc-primary-height: 38px; --soc-pc-utility-height: 32px; --soc-pc-panel-gap: 14px; --soc-pc-panel-pad-y: 16px; --soc-pc-panel-pad-x: 18px; --soc-pc-table-head-y: 11px; --soc-pc-table-cell-y: 10px; --soc-pc-table-pad-x: 12px; --soc-pc-empty-min-height: 176px; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-toolbar, #peopleView .soc-monitoring-toolbar, #employeeScorePanel .soc-employee-score-filter-bar, #opsSupportPanel .soc-ops-support-toolbar, #analyticsView .soc-analytics-filter-bar ) { gap: var(--soc-pc-toolbar-gap); padding: var(--soc-pc-toolbar-pad-y) var(--soc-pc-toolbar-pad-x); border-radius: 12px; box-shadow: var(--ui-shadow-0, 0 1px 2px rgba(15, 23, 42, 0.04)); } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-toolbar-row, #peopleView .soc-monitoring-toolbar-row ) { gap: var(--soc-pc-row-gap); align-items: end; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-toolbar-main, #peopleView .soc-monitoring-toolbar-controls, #opsSupportPanel .soc-ops-support-toolbar-left, #opsSupportPanel .soc-ops-support-toolbar-right ) { gap: 10px; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-field, #peopleView .soc-monitoring-toolbar-field, #employeeScorePanel .soc-inline-field, #opsSupportPanel .soc-inline-field, #analyticsView .soc-analytics-filter-group, #analyticsView .soc-analytics-site-filter ) { gap: var(--soc-pc-field-gap); } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-toolbar, #peopleView .soc-monitoring-toolbar, #employeeScorePanel .soc-employee-score-filter-bar, #opsSupportPanel .soc-ops-support-toolbar, #analyticsView .soc-analytics-filter-bar ) :is( .ds-input, select, input[type='search'], input[type='date'], .ds-btn:not(.ds-btn-sm):not(.soc-ops-support-save-btn), .ops-support-month-nav .month-label, .ops-support-month-nav .month-arrow ) { min-height: var(--soc-pc-control-height); height: var(--soc-pc-control-height); } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-toolbar, #peopleView .soc-monitoring-toolbar ) :is( .ds-input, select, input[type='search'] ) { min-height: 40px; height: 40px; padding: 0 14px; line-height: 20px; font-size: 14px; box-sizing: border-box; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-toolbar, #peopleView .soc-monitoring-toolbar ) :is(select, .ds-select) { padding-right: 38px; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-toolbar, #peopleView .soc-monitoring-toolbar, #employeeScorePanel .soc-employee-score-filter-bar, #opsSupportPanel .soc-ops-support-toolbar, #analyticsView .soc-analytics-filter-bar ) .ds-btn:not(.ds-btn-sm) { padding-inline: 12px; border-radius: 8px; font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-toolbar, #peopleView .soc-monitoring-toolbar, #employeeScorePanel .soc-employee-score-filter-bar, #opsSupportPanel .soc-ops-support-toolbar, #analyticsView .soc-analytics-filter-bar, #opsSupportPanel .soc-ops-support-sheet, #employeeScorePanel, #analyticsView ) .ds-btn.ds-btn-sm { min-height: var(--soc-pc-utility-height); height: var(--soc-pc-utility-height); padding-inline: 10px; border-radius: 8px; } body.soc-desktop-shell :is( #peopleView, #employeeScorePanel, #opsSupportPanel, #analyticsView ) .ds-btn.ds-btn-primary:not(.ds-btn-sm) { min-height: var(--soc-pc-primary-height); height: var(--soc-pc-primary-height); padding-inline: 14px; } body.soc-desktop-shell :is( #peopleView .soc-monitoring-toolbar-danger .ds-btn-danger, #peopleView .soc-monitoring-toolbar-danger .btn-danger ) { min-height: var(--soc-pc-utility-height); height: var(--soc-pc-utility-height); padding-inline: 10px; border-radius: 8px; border-color: rgba(180, 35, 24, 0.22); background: rgba(180, 35, 24, 0.06); color: #b42318; box-shadow: none; } body.soc-desktop-shell :is( #peopleView .soc-monitoring-toolbar-danger .ds-btn-danger, #peopleView .soc-monitoring-toolbar-danger .btn-danger ):hover { background: rgba(180, 35, 24, 0.1); border-color: rgba(180, 35, 24, 0.28); } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-summary-block, #peopleView .soc-monitoring-toolbar-stat, #opsSupportPanel .soc-ops-support-toolbar-stat ) { min-width: 78px; gap: 2px; padding: 6px 9px; border-radius: 9px; box-shadow: none; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-summary-block strong, #peopleView .soc-monitoring-toolbar-stat strong, #opsSupportPanel .soc-ops-support-toolbar-stat > strong ) { font-size: 15px; line-height: 22px; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-toolbar-label, #peopleView .soc-monitoring-toolbar-label, #opsSupportPanel .soc-ops-support-toolbar-stat-label ) { font-size: 11px; line-height: 14px; } body.soc-desktop-shell :is( #peopleView .soc-people-hub-switch-btn, #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'], #employeeScorePanel .soc-analytics-range-quick .ds-btn.ds-btn-sm ) { min-height: var(--soc-pc-utility-height); height: var(--soc-pc-utility-height); padding: 0 12px; border-radius: 8px; } body.soc-desktop-shell #peopleView .soc-people-hub-tabs { gap: 8px; padding: 0; } body.soc-desktop-shell #peopleView .soc-people-admin-header-wrap { gap: 10px; margin-bottom: 0; } body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar { gap: var(--soc-pc-toolbar-gap); padding: var(--soc-pc-toolbar-pad-y) var(--soc-pc-toolbar-pad-x); } body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-row { gap: var(--soc-pc-row-gap); align-items: end; } body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-main { gap: 14px; } body.soc-desktop-shell #peopleView { --soc-people-filter-label-width: 40px; --soc-people-filter-label-gap: 12px; } body.soc-desktop-shell #peopleView :is( .soc-employee-directory-field, .soc-monitoring-toolbar-field ) { display: grid; grid-template-columns: var(--soc-people-filter-label-width) minmax(0, 1fr); align-items: center; gap: var(--soc-people-filter-label-gap); min-width: 0; } body.soc-desktop-shell #peopleView :is( .soc-employee-directory-field, .soc-monitoring-toolbar-field ) > span { padding-left: 0; } body.soc-desktop-shell #peopleView :is( .soc-employee-directory-search, .soc-monitoring-toolbar-search ) { min-width: min(360px, 100%); flex: 1 1 360px; } body.soc-desktop-shell #peopleView .soc-employee-directory-field:not(.soc-employee-directory-search), body.soc-desktop-shell #peopleView .soc-monitoring-toolbar-field:not(.soc-monitoring-toolbar-search) { min-width: 208px; flex: 0 1 208px; } body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-utility { gap: 10px; } body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-cluster { gap: 10px; } body.soc-desktop-shell #peopleView .soc-people-workspace-danger-cluster { padding-left: 12px; } body.soc-desktop-shell #peopleView .soc-people-workspace-badges { gap: 8px; } body.soc-desktop-shell #peopleView .soc-people-pane-summary { gap: 10px; padding: 14px 16px; } body.soc-desktop-shell #peopleView .soc-people-pane-summary-badges { gap: 8px; } body.soc-desktop-shell #peopleView .soc-people-directory-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; } body.soc-desktop-shell #peopleView .soc-people-directory-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) minmax(340px, 388px); align-items: start; } body.soc-desktop-shell #peopleView .soc-people-detail-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; position: relative; top: auto; min-height: 0; max-height: calc(100vh - 268px); overflow: hidden; align-self: start; opacity: 0; transform: translateX(22px); pointer-events: none; } body.soc-desktop-shell #peopleView .soc-people-detail-panel.is-open { opacity: 1; transform: translateX(0); pointer-events: auto; animation: socPeopleDetailPanelSlideIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } body.soc-desktop-shell #peopleView .soc-people-detail-panel-head { padding: 16px 18px 12px; } body.soc-desktop-shell #peopleView .soc-people-detail-summary { padding: 0 16px 14px; gap: 8px; } body.soc-desktop-shell #peopleView .soc-people-detail-panel-body { padding: 0 18px 18px; min-height: 0; overflow-y: auto; } body.soc-desktop-shell #peopleView .soc-people-detail-panel-actions { padding: 14px 18px 18px; } body.soc-desktop-shell #peopleView .soc-people-employee-tab-rail { gap: 14px; } body.soc-desktop-shell #peopleView .soc-people-employee-hero-copy strong { font-size: 24px; line-height: 30px; } body.soc-desktop-shell #peopleView .soc-people-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.soc-desktop-shell #peopleView .soc-people-stats-grid { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.9fr); } body.soc-desktop-shell #peopleView .soc-people-danger-utility { min-height: var(--soc-pc-utility-height); height: var(--soc-pc-utility-height); padding-inline: 10px; border-radius: 8px; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-grid, #peopleView .soc-monitoring-grid, #employeeScorePanel .soc-employee-score-content, #opsSupportPanel .soc-ops-support-layout ) { gap: var(--soc-pc-panel-gap); } body.soc-desktop-shell :is( #peopleView .soc-workspace-card-head, #employeeScorePanel .soc-workspace-card-head, #opsSupportPanel .soc-workspace-card-head, #analyticsView .soc-block-head ) { margin-bottom: 0; } body.soc-desktop-shell :is( #peopleView .soc-workspace-card-head > div, #employeeScorePanel .soc-workspace-card-head > div, #opsSupportPanel .soc-workspace-card-head > div, #analyticsView .soc-block-head > div ) { display: grid; gap: 4px; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-grid-wrap, #peopleView .soc-monitoring-grid-wrap, #employeeScorePanel .soc-employee-score-table-wrap ) { border-radius: 12px; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-table, #peopleView .soc-monitoring-grid-table, #employeeScorePanel .soc-employee-score-table ) th { padding: var(--soc-pc-table-head-y) var(--soc-pc-table-pad-x); vertical-align: middle; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-table, #peopleView .soc-monitoring-grid-table, #employeeScorePanel .soc-employee-score-table ) td { padding: var(--soc-pc-table-cell-y) var(--soc-pc-table-pad-x); vertical-align: middle; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-table thead th, #peopleView .soc-monitoring-grid-table th, #employeeScorePanel .soc-employee-score-table th ) { font-size: 12px; line-height: 16px; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-table tbody td, #peopleView .soc-monitoring-grid-table td, #employeeScorePanel .soc-employee-score-table td ) { font-size: 13px; line-height: 18px; } body.soc-desktop-shell :is( #peopleView .soc-directory-sort-button, #peopleView .soc-monitoring-sort-button ) { gap: 4px; } body.soc-desktop-shell :is( #peopleView .soc-directory-sort-indicator, #peopleView .soc-monitoring-sort-indicator ) { min-width: 12px; } body.soc-desktop-shell :is( #peopleView .soc-directory-status, #peopleView .soc-status-inline, #opsSupportPanel .support-status-inline, #employeeScorePanel .soc-employee-score-breakdown-legend-item ) { gap: 5px; } body.soc-desktop-shell :is( #peopleView .soc-employee-directory-state, #peopleView .soc-monitoring-grid-state, #opsSupportPanel .soc-ops-support-summary-empty ) { min-height: 144px; padding: 18px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-filter-bar { gap: 10px; padding: 12px var(--soc-pc-toolbar-pad-x) 14px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-controls { gap: 12px 14px; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.56fr) minmax(280px, 0.72fr) minmax(176px, 0.34fr); align-items: start; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-control-cluster.is-sort { min-width: 0; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-grid { grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); gap: 14px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card { min-height: 188px; padding: 16px 18px; gap: 10px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-visual { min-height: 110px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-main-grid { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 380px); gap: 14px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-side-card, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-primary-card, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-ranking-section, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-breakdown-section { gap: 14px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel { position: sticky; top: 14px; align-content: start; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-main-column { gap: 14px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-insight-body { gap: 10px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-insight-stat-grid { gap: 8px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-insight-stat { padding: 11px 12px; gap: 4px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-insight-list { gap: 0; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-breakdown-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-combo-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-breakdown-details { grid-template-columns: minmax(0, 1fr); gap: 0; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-empty { padding: 16px 0 4px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-viewport { padding-right: 0; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar { padding: var(--soc-pc-toolbar-pad-y) var(--soc-pc-toolbar-pad-x); } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip { gap: 10px; padding: 0 2px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats { gap: 6px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-meta { font-size: 12px; line-height: 16px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control { min-width: 118px; height: var(--soc-pc-control-height); font-size: 12px; } body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label, body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow { border-radius: 8px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 2.44fr) minmax(360px, 392px); } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-main, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet { gap: 12px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-main { padding: 12px 14px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet { padding: 12px 14px; min-height: 280px; max-width: 392px; opacity: 1; transform: translateX(0); transition: opacity 180ms ease, transform 180ms ease; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet.hidden { opacity: 0; transform: translateX(12px); } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head { gap: 10px; padding-bottom: 8px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-hero, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-state, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-group { border-radius: 10px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-content { gap: 10px; } body.soc-desktop-shell #opsSupportPanel #opsSupportSheetHint { display: none !important; } #opsSupportPanel #opsSupportSheetHint { display: none !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metrics { gap: 8px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric { padding: 10px 12px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-context { gap: 6px 10px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-purpose { padding: 12px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary { gap: 8px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary > div { padding: 10px 12px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline { gap: 10px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-body { padding: 10px 12px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-head { min-height: 40px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-table th, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-table td { padding: 10px 12px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-empty { min-height: 136px; padding: 16px; } body.soc-desktop-shell #analyticsView { gap: 18px; } body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar { padding: var(--soc-pc-toolbar-pad-y) var(--soc-pc-toolbar-pad-x); } body.soc-desktop-shell #analyticsView .soc-analytics-filter-row { gap: 12px; align-items: end; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-zone { gap: 12px; grid-template-columns: minmax(0, 1.62fr) minmax(280px, 0.94fr); align-items: start; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary { gap: 10px; padding: 14px 16px 15px; align-self: start; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body { grid-template-columns: minmax(0, 1fr) 188px; gap: 14px; align-items: center; } body.soc-desktop-shell #analyticsView .soc-risk-overview-side { width: 204px; justify-self: end; justify-items: center; align-content: center; gap: 10px; } body.soc-desktop-shell #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar { width: 100%; justify-content: flex-end; gap: 6px; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap, body.soc-desktop-shell #analyticsView .soc-risk-gauge, body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap { width: 170px; height: 170px; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap { justify-self: center; align-self: center; margin-top: 0; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap strong { font-size: 30px; line-height: 1; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap span { font-size: 12px; line-height: 15px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-content { gap: 10px; padding-right: 2px; align-content: center; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-head { gap: 6px; padding-bottom: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-headline { gap: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-title-wrap { gap: 2px; } body.soc-desktop-shell #analyticsView .soc-risk-overview-title { width: auto; text-align: left; justify-self: start; white-space: normal; overflow: visible; text-overflow: clip; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-lead { max-width: 32ch; font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); } body.soc-desktop-shell #analyticsView .soc-analytics-summary-meta-row { justify-content: space-between; gap: 6px 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-meta-row .meta { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); } body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection--drivers { gap: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-driver-list { gap: 6px; } body.soc-desktop-shell #analyticsView .soc-driver-row { gap: 6px; } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid { gap: 8px; grid-auto-rows: minmax(88px, auto); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card, body.soc-desktop-shell #analyticsView .soc-analytics-kpi-card { min-height: 88px; padding: 11px 14px; gap: 4px; border-radius: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-label { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-value { font-size: 26px; line-height: 30px; } body.soc-desktop-shell #analyticsView .soc-analytics-trend-grid { gap: 14px; } body.soc-desktop-shell #analyticsView .soc-analytics-zone, body.soc-desktop-shell #analyticsView .soc-analytics-trend-card { gap: 14px; padding: 18px 20px 20px; } body.soc-desktop-shell #analyticsView .soc-analytics-zone-head, body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-block-head { padding-bottom: 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-zone-head .meta, body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .meta { margin-top: 4px; } body.soc-desktop-shell #analyticsView .soc-analytics-trend-card { min-height: 236px; } body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-sparkline-lg { height: 88px; min-height: 88px; margin-top: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-sparkline-line { stroke-width: 2.4; } body.soc-desktop-shell #analyticsView .soc-analytics-heatmap-toolbar { gap: 10px; } body.soc-desktop-shell #analyticsView .soc-heatmap-scroll { min-height: 228px; padding-top: 2px; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-body { grid-template-columns: minmax(0, 1.94fr) minmax(272px, 0.78fr); gap: 14px; } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-comparison-body { grid-template-columns: minmax(0, 1fr) minmax(248px, 0.62fr); gap: 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-side { gap: 8px; } body.soc-desktop-shell #analyticsView :is( #analyticsScoreTopBlock, #analyticsStoreInsightPanel, .soc-analytics-insight-card ) { gap: 10px; padding: 16px 18px; } body.soc-desktop-shell #analyticsView .soc-store-comparison-actions { gap: 10px; grid-template-columns: repeat(3, minmax(0, 196px)) auto; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-summary { gap: 9px; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat, body.soc-desktop-shell #analyticsView .soc-analytics-insight-stat { padding: 11px 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-insight-card > .soc-block-head { padding-bottom: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-insight-metrics { gap: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection { gap: 8px; padding-top: 10px; } body.soc-desktop-shell #analyticsView #analyticsScoreTopList, body.soc-desktop-shell #analyticsView #analyticsStoreInsightDelta { gap: 6px; } body.soc-desktop-shell #analyticsView :is(#analyticsScoreTopList, #analyticsStoreInsightDelta) .soc-mini-row { padding: 8px 10px; gap: 10px; } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonList { min-height: 288px; } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode #analyticsStoreComparisonList { min-height: 0; } } @media (max-width: 1280px) { #peopleView .soc-people-kpi-strip, #peopleView .soc-people-stats-grid, #peopleView .soc-people-employee-stat-grid, #peopleView .soc-people-employee-info-grid { grid-template-columns: minmax(0, 1fr); } #peopleView .soc-people-kpi-donut-row { grid-template-columns: minmax(0, 1fr); justify-items: center; } #peopleView .soc-people-employee-info-card.is-span-2 { grid-column: auto; } #peopleView .soc-employee-directory-pagination { grid-template-columns: minmax(0, 1fr); justify-items: center; } #peopleView .soc-employee-directory-pagination-summary, #peopleView .soc-employee-directory-pagination-controls { justify-content: center; } #peopleView .soc-employee-directory-pagination-summary { justify-self: center; } #peopleView .soc-employee-directory-pagination-spacer { display: none; } } @media (min-width: 1280px) { body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body { grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.42fr); gap: 18px; align-items: start; } body.soc-desktop-shell #analyticsView .soc-risk-overview-side { grid-column: 1; width: 220px; justify-self: start; justify-items: center; align-content: start; gap: 10px; } body.soc-desktop-shell #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar { width: 100%; justify-content: space-between; align-items: center; gap: 8px; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap, body.soc-desktop-shell #analyticsView .soc-risk-gauge, body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap { width: 158px; height: 158px; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap { justify-self: center; align-self: start; margin-top: 4px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-content { grid-column: 2; align-content: start; padding-right: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection--drivers { padding-top: 2px; } } @media (min-width: 1200px) { body.soc-desktop-adaptive #analyticsView { gap: 16px; } body.soc-desktop-adaptive #analyticsView .soc-analytics-workspace-header { padding-bottom: 2px; } body.soc-desktop-adaptive #analyticsView .soc-analytics-filter-bar { padding: 10px 14px; border-radius: 14px; border-color: color-mix(in srgb, var(--soc-primary) 14%, var(--ui-border-subtle, var(--soc-border))); background: linear-gradient( 180deg, color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)) ); box-shadow: none; } body.soc-desktop-adaptive #analyticsView .soc-analytics-filter-row { grid-template-columns: minmax(0, 1fr) minmax(220px, 248px); gap: 12px; align-items: center; } body.soc-desktop-adaptive #analyticsView .soc-analytics-range-quick .ds-btn, body.soc-desktop-adaptive #analyticsView .soc-analytics-filter-bar input[type="date"], body.soc-desktop-adaptive #analyticsView .soc-analytics-filter-bar select, body.soc-desktop-adaptive #analyticsView .soc-analytics-comparison-toolbar select { min-height: 36px; height: 36px; border-radius: 10px; } body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-zone { display: grid; gap: 14px; } body.soc-desktop-adaptive #analyticsView .soc-analytics-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; grid-auto-rows: minmax(88px, auto); } body.soc-desktop-adaptive #analyticsView .soc-analytics-kpi-grid .soc-kpi-card, body.soc-desktop-adaptive #analyticsView .soc-analytics-kpi-card { min-height: 88px; padding: 12px 14px; gap: 6px; border-radius: 14px; } body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-primary { padding: 16px 18px 18px; border-radius: 16px; } body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-primary-body { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(288px, 0.92fr); gap: 18px; align-items: start; } body.soc-desktop-adaptive #analyticsView .soc-risk-summary-copy { order: 1; display: grid; gap: 12px; min-width: 0; } body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-primary-head { gap: 8px; padding-bottom: 0; } body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-meta-row { display: grid; gap: 8px; } body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-content { display: grid; gap: 10px; align-content: start; } body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-subsection { gap: 8px; padding-top: 0; } body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-subsection--drivers { gap: 10px; } body.soc-desktop-adaptive #analyticsView .soc-risk-overview-side { order: 2; width: auto; justify-self: stretch; justify-items: stretch; align-content: start; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--soc-primary) 16%, var(--ui-border-subtle, var(--soc-border))); border-radius: 16px; background: linear-gradient( 180deg, color-mix(in srgb, var(--soc-primary) 5%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg)) ); } body.soc-desktop-adaptive #analyticsView .soc-risk-overview-cluster-head { gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } body.soc-desktop-adaptive #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.soc-desktop-adaptive #analyticsView .soc-risk-gauge-wrap, body.soc-desktop-adaptive #analyticsView .soc-risk-gauge, body.soc-desktop-adaptive #analyticsView .soc-risk-gauge-value-wrap { width: 164px; height: 164px; } body.soc-desktop-adaptive #analyticsView .soc-risk-gauge-wrap { justify-self: center; align-self: center; margin-top: 4px; } body.soc-desktop-adaptive #analyticsView .soc-risk-gauge-value-wrap strong { font-size: 34px; line-height: 38px; } body.soc-desktop-adaptive #analyticsView .soc-risk-gauge-caption { color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-adaptive #analyticsView .soc-analytics-trend-grid { grid-template-columns: minmax(0, 1.64fr) minmax(300px, 0.82fr); gap: 14px; align-items: stretch; } body.soc-desktop-adaptive #analyticsView #analyticsTrendIncidentsBlock { min-height: 252px; } body.soc-desktop-adaptive #analyticsView #analyticsTrendEciBlock { min-height: 232px; } body.soc-desktop-adaptive #analyticsView .soc-analytics-trend-card .soc-sparkline-lg { height: 122px; min-height: 122px; margin-top: 8px; } body.soc-desktop-adaptive #analyticsView #analyticsTrendEciBlock .soc-sparkline-lg { height: 104px; min-height: 104px; } body.soc-desktop-adaptive #analyticsView #analyticsHeatmapBlock { gap: 10px; padding-top: 14px; padding-bottom: 16px; } body.soc-desktop-adaptive #analyticsView .soc-analytics-heatmap-toolbar { gap: 8px 12px; } body.soc-desktop-adaptive #analyticsView .soc-heatmap-scroll { min-height: 204px; padding-top: 0; } body.soc-desktop-adaptive #analyticsView .soc-analytics-comparison-toolbar { gap: 10px; } body.soc-desktop-adaptive #analyticsView .soc-store-comparison-actions { grid-template-columns: repeat(3, minmax(0, 172px)) auto; gap: 10px; } body.soc-desktop-adaptive #analyticsView .soc-analytics-comparison-body { grid-template-columns: minmax(0, 1.56fr) minmax(290px, 0.84fr); gap: 14px; align-items: start; } body.soc-desktop-adaptive #analyticsView .soc-analytics-comparison-main, body.soc-desktop-adaptive #analyticsView .soc-analytics-comparison-side { gap: 12px; } body.soc-desktop-adaptive #analyticsView .soc-analytics-comparison-summary { gap: 10px; } body.soc-desktop-adaptive #analyticsView .soc-store-row.is-selected { border-color: color-mix(in srgb, var(--soc-primary) 40%, var(--ui-border-default, var(--soc-divider))); background: linear-gradient( 135deg, color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)) 72% ); } body.soc-desktop-adaptive #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-comparison-body { grid-template-columns: minmax(0, 1.18fr) minmax(252px, 0.72fr); gap: 12px; } body.soc-desktop-adaptive #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-comparison-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.soc-desktop-adaptive #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-single-site-card { gap: 12px; padding: 14px 16px; border-radius: 14px; } body.soc-desktop-adaptive #analyticsView :is(.soc-risk-info-popover, .soc-store-info-popover) { border-color: color-mix(in srgb, var(--soc-primary) 18%, var(--soc-border)); box-shadow: 0 18px 44px color-mix(in srgb, var(--soc-shadow) 52%, transparent); z-index: 70; } } @media (min-width: 1440px) { body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-primary-body { grid-template-columns: minmax(0, 1.62fr) minmax(320px, 0.86fr); } body.soc-desktop-adaptive #analyticsView .soc-analytics-trend-grid { grid-template-columns: minmax(0, 1.72fr) minmax(316px, 0.76fr); } } @media (min-width: 1024px) { body.soc-desktop-shell #analyticsView { gap: 14px; } body.soc-desktop-shell #analyticsView .soc-analytics-workspace-header { padding-bottom: 2px; } body.soc-desktop-shell #analyticsView .soc-analytics-workspace-header h3 { font-size: 24px; line-height: 30px; } body.soc-desktop-shell #analyticsView .soc-analytics-workspace-header .meta { font-size: 12px; line-height: 18px; } body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar { padding: 10px 14px; border-radius: 14px; border-color: color-mix(in srgb, var(--soc-primary) 16%, var(--ui-border-subtle, var(--soc-border))); background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); box-shadow: none; } body.soc-desktop-shell #analyticsView .soc-analytics-filter-row { grid-template-columns: minmax(0, 1fr) minmax(220px, 248px); gap: 12px; align-items: center; } body.soc-desktop-shell #analyticsView .soc-analytics-filter-group { grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; } body.soc-desktop-shell #analyticsView .soc-analytics-filter-label, body.soc-desktop-shell #analyticsView .soc-analytics-site-filter label, body.soc-desktop-shell #analyticsView .soc-analytics-control-field > label { font-size: 12px; line-height: 16px; color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-analytics-range-quick { gap: 6px; } body.soc-desktop-shell #analyticsView .soc-analytics-range-quick .ds-btn, body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar input[type="date"], body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar select, body.soc-desktop-shell #analyticsView .soc-analytics-comparison-toolbar select { min-height: 34px; height: 34px; border-radius: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-range-quick .ds-btn { min-width: 44px; padding: 0 12px; border-color: color-mix(in srgb, var(--soc-border) 80%, transparent); background: var(--ui-bg-surface, var(--soc-panel-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-analytics-range-quick .ds-btn.active { border-color: color-mix(in srgb, var(--soc-primary) 44%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary) 14%, var(--ui-bg-surface, var(--soc-panel-bg))); color: var(--soc-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 14%, transparent); } body.soc-desktop-shell #analyticsView .soc-analytics-summary-zone { display: grid; gap: 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; grid-auto-rows: minmax(86px, auto); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card, body.soc-desktop-shell #analyticsView .soc-analytics-kpi-card { position: relative; overflow: hidden; min-height: 86px; padding: 11px 14px 12px; gap: 6px; border-radius: 14px; border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); box-shadow: none; } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--analytics-kpi-accent, color-mix(in srgb, var(--soc-primary) 56%, transparent)); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="primary"] { --analytics-kpi-accent: color-mix(in srgb, var(--soc-primary) 78%, transparent); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="warning"] { --analytics-kpi-accent: color-mix(in srgb, var(--soc-warning) 76%, transparent); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="caution"] { --analytics-kpi-accent: color-mix(in srgb, var(--soc-warning) 58%, transparent); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="critical"] { --analytics-kpi-accent: color-mix(in srgb, var(--soc-danger) 78%, transparent); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card.is-active { border-color: color-mix(in srgb, var(--analytics-kpi-accent, var(--soc-primary)) 44%, var(--ui-border-default, var(--soc-divider))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--analytics-kpi-accent, var(--soc-primary)) 16%, transparent); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-label { font-size: 12px; line-height: 16px; color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-value { font-size: 26px; line-height: 30px; letter-spacing: -0.02em; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary { padding: 16px 18px 18px; border-radius: 16px; border-color: color-mix(in srgb, var(--soc-primary) 14%, var(--ui-border-subtle, var(--soc-border))); background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 5%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); box-shadow: none; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(280px, 0.92fr); gap: 16px; align-items: stretch; } body.soc-desktop-shell #analyticsView .soc-risk-summary-copy { display: grid; gap: 12px; min-width: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-head { display: grid; gap: 8px; padding-bottom: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-headline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-title-wrap { gap: 4px; } body.soc-desktop-shell #analyticsView .soc-risk-overview-title { margin: 0; font-size: 22px; line-height: 28px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-lead { margin: 0; max-width: none; font-size: 14px; line-height: 20px; color: color-mix(in srgb, var(--ui-text-primary, var(--soc-text)) 92%, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-analytics-summary-meta-row { display: grid; gap: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-chip { min-height: 32px; padding: 6px 10px; border-radius: 999px; border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg))); } body.soc-desktop-shell #analyticsView .soc-analytics-summary-chip .label { font-size: 10px; line-height: 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-chip strong { font-size: 12px; line-height: 16px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-content { display: grid; gap: 10px; align-content: start; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection { gap: 8px; padding-top: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection > h5 { font-size: 13px; line-height: 18px; } body.soc-desktop-shell #analyticsView .soc-analytics-driver-list { list-style: none; padding-left: 0; gap: 8px; } body.soc-desktop-shell #analyticsView .soc-driver-row { gap: 8px; padding: 10px 12px; border-radius: 12px; border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg))); } body.soc-desktop-shell #analyticsView .soc-driver-row-empty { padding: 10px 12px; border: 1px dashed var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-risk-overview-side { justify-self: stretch; display: grid; align-content: start; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--soc-primary) 16%, var(--ui-border-subtle, var(--soc-border))); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 6%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg))); } body.soc-desktop-shell #analyticsView .soc-risk-overview-cluster-head { gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } body.soc-desktop-shell #analyticsView .soc-risk-cluster-label { font-size: 12px; line-height: 16px; color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.soc-desktop-shell #analyticsView .soc-risk-overview-side .soc-risk-grade { white-space: nowrap; } body.soc-desktop-shell #analyticsView .soc-risk-info-trigger { min-width: 30px; width: 30px; height: 30px; padding: 0; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap, body.soc-desktop-shell #analyticsView .soc-risk-gauge, body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap { width: 168px; height: 168px; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap { justify-self: center; align-self: center; margin-top: 2px; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap strong { font-size: 36px; line-height: 40px; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-caption { color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-analytics-zone, body.soc-desktop-shell #analyticsView .soc-analytics-trend-card { gap: 12px; padding: 16px 18px 18px; border-radius: 16px; border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); box-shadow: none; } body.soc-desktop-shell #analyticsView .soc-analytics-zone-head, body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-block-head { padding-bottom: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-zone-head h3, body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-block-head h3, body.soc-desktop-shell #analyticsView .soc-analytics-insight-card > .soc-block-head h4 { font-size: 18px; line-height: 24px; } body.soc-desktop-shell #analyticsView .soc-analytics-zone-head .meta, body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .meta { font-size: 12px; line-height: 18px; } body.soc-desktop-shell #analyticsView .soc-analytics-trend-grid { grid-template-columns: minmax(0, 1.74fr) minmax(280px, 0.86fr); gap: 12px; align-items: stretch; } body.soc-desktop-shell #analyticsView #analyticsTrendIncidentsBlock { min-height: 258px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 6%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); } body.soc-desktop-shell #analyticsView #analyticsTrendEciBlock { min-height: 242px; } body.soc-desktop-shell #analyticsView #analyticsTrendEciBlock.is-sparse { background: linear-gradient(180deg, color-mix(in srgb, var(--soc-warning) 5%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); } body.soc-desktop-shell #analyticsView .soc-analytics-trend-card.is-empty { background: linear-gradient(180deg, color-mix(in srgb, var(--soc-border) 22%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); } body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-sparkline-lg { height: 134px; min-height: 134px; margin-top: 8px; } body.soc-desktop-shell #analyticsView #analyticsTrendEciBlock .soc-sparkline-lg { height: 116px; min-height: 116px; } body.soc-desktop-shell #analyticsView #analyticsHeatmapBlock { gap: 10px; padding-top: 14px; padding-bottom: 16px; } body.soc-desktop-shell #analyticsView .soc-analytics-heatmap-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; } body.soc-desktop-shell #analyticsView .soc-heatmap-day-tabs { gap: 6px; } body.soc-desktop-shell #analyticsView .soc-heatmap-day-btn { min-height: 28px; padding: 4px 10px; border-radius: 999px; } body.soc-desktop-shell #analyticsView .soc-heatmap-scroll { min-height: 198px; padding-top: 0; } body.soc-desktop-shell #analyticsView .soc-heatmap-legend-empty, body.soc-desktop-shell #analyticsView .soc-analytics-empty-note { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 12px; border: 1px dashed var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 18px; } body.soc-desktop-shell #analyticsView .soc-heatmap-legend-empty { min-height: 28px; padding: 6px 10px; } body.soc-desktop-shell #analyticsView .soc-heatmap-grid.is-empty-state { display: block; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; } body.soc-desktop-shell #analyticsView .soc-store-comparison-actions { grid-template-columns: repeat(3, minmax(0, 164px)) auto; gap: 8px; } body.soc-desktop-shell #analyticsView #analyticsComparisonContext { margin: 0; align-self: center; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-body { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.9fr); gap: 12px; align-items: start; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-main, body.soc-desktop-shell #analyticsView .soc-analytics-comparison-side { gap: 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat, body.soc-desktop-shell #analyticsView .soc-analytics-insight-stat { min-height: 78px; padding: 10px 12px; border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg))); } body.soc-desktop-shell #analyticsView .soc-store-row { gap: 12px; padding: 12px 14px; border-color: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-border-subtle, var(--soc-border))); } body.soc-desktop-shell #analyticsView .soc-store-row.is-selected { border-color: color-mix(in srgb, var(--soc-primary) 38%, var(--ui-border-default, var(--soc-divider))); background: linear-gradient(135deg, color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)) 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 14%, transparent); } body.soc-desktop-shell #analyticsView .soc-store-row-rank { min-height: 38px; background: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-bg-surface-subtle, var(--soc-card-bg))); } body.soc-desktop-shell #analyticsView #analyticsStoreInsightPanel, body.soc-desktop-shell #analyticsView #analyticsScoreTopBlock { padding: 14px 16px; } body.soc-desktop-shell #analyticsView #analyticsStoreInsightPanel .soc-block-head strong, body.soc-desktop-shell #analyticsView #analyticsScoreTopBlock .soc-block-head strong { color: var(--soc-primary); } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-comparison-body { grid-template-columns: minmax(0, 1.28fr) minmax(272px, 0.78fr); } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-comparison-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-single-site-card { gap: 12px; padding: 14px 16px; border-radius: 14px; border-color: color-mix(in srgb, var(--soc-primary) 16%, var(--ui-border-subtle, var(--soc-border))); background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 6%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg))); } body.soc-desktop-shell #analyticsView .soc-analytics-single-site-kicker { margin: 0 0 2px; font-size: 10px; line-height: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soc-primary); } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-single-site-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-single-site-metric { padding: 10px 12px; border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface, var(--soc-panel-bg))); } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-empty-state .soc-analytics-comparison-body { grid-template-columns: 1fr; } body.soc-desktop-shell #analyticsView :is(.soc-risk-info-popover, .soc-store-info-popover) { border-color: color-mix(in srgb, var(--soc-primary) 18%, var(--soc-border)); box-shadow: 0 18px 44px color-mix(in srgb, var(--soc-shadow) 52%, transparent); z-index: 70; } } @media (min-width: 1440px) { body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body { grid-template-columns: minmax(0, 1.82fr) minmax(320px, 0.88fr); } body.soc-desktop-shell #analyticsView .soc-analytics-trend-grid { grid-template-columns: minmax(0, 1.82fr) minmax(300px, 0.8fr); } body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap, body.soc-desktop-shell #analyticsView .soc-risk-gauge, body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap { width: 176px; height: 176px; } } #analyticsView .soc-analytics-summary-chip-row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } #analyticsView .soc-analytics-summary-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 7px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--soc-border) 78%, transparent); background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-summary-chip .label { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: 600; white-space: nowrap; } #analyticsView .soc-analytics-summary-chip strong { min-width: 0; font-size: var(--type-body-sm-size, 13px); line-height: var(--type-body-sm-line, 18px); font-weight: 700; color: var(--ui-text-primary, var(--soc-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #analyticsView .soc-analytics-summary-chip--accent { border-color: color-mix(in srgb, var(--soc-primary) 30%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface, var(--soc-panel-bg))); } #analyticsView .soc-analytics-summary-chip--primary { border-color: color-mix(in srgb, var(--soc-primary) 24%, var(--soc-border)); } #analyticsView .soc-analytics-summary-chip--focus { border-color: color-mix(in srgb, var(--soc-primary) 34%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-bg-surface, var(--soc-panel-bg))); } #analyticsView .soc-analytics-summary-chip--warning { border-color: color-mix(in srgb, var(--soc-warning) 34%, var(--soc-border)); background: color-mix(in srgb, var(--soc-warning) 10%, var(--ui-bg-surface, var(--soc-panel-bg))); } #analyticsView .soc-analytics-summary-chip--caution { border-color: color-mix(in srgb, var(--soc-warning) 28%, var(--soc-border)); } #analyticsView .soc-analytics-summary-chip--danger { border-color: color-mix(in srgb, var(--soc-danger) 38%, var(--soc-border)); background: color-mix(in srgb, var(--soc-danger) 10%, var(--ui-bg-surface, var(--soc-panel-bg))); } #analyticsView .soc-analytics-summary-chip--safe { border-color: color-mix(in srgb, var(--soc-success) 34%, var(--soc-border)); background: color-mix(in srgb, var(--soc-success) 10%, var(--ui-bg-surface, var(--soc-panel-bg))); } #analyticsView .soc-analytics-summary-chip--muted { background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } #analyticsView .soc-risk-overview-cluster-head { display: grid; gap: 8px; width: 100%; } #analyticsView .soc-risk-cluster-label { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: 700; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-kpi-grid .soc-kpi-card { cursor: default; } #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-jump] { cursor: pointer; } #analyticsView :is(.soc-risk-info-popover, .soc-store-info-popover)[data-placement="top"] { transform-origin: 50% 100%; } #analyticsView :is(.soc-risk-info-popover, .soc-store-info-popover)[data-placement="bottom"] { transform-origin: 50% 0%; } @media (min-width: 1280px) { body.soc-desktop-shell #analyticsView { gap: 16px; } body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar { padding: 12px 16px; border-radius: 14px; border-color: color-mix(in srgb, var(--soc-primary) 16%, var(--ui-border-subtle, var(--soc-border))); background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); box-shadow: none; } body.soc-desktop-shell #analyticsView .soc-analytics-filter-row { grid-template-columns: minmax(0, 1fr) minmax(220px, 248px); gap: 14px; align-items: center; } body.soc-desktop-shell #analyticsView .soc-analytics-filter-group { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-filter-label { white-space: nowrap; } body.soc-desktop-shell #analyticsView .soc-analytics-range-quick .ds-btn, body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar input[type="date"], body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar select, body.soc-desktop-shell #analyticsView .soc-analytics-comparison-toolbar select { min-height: 36px; height: 36px; border-radius: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-range-quick .ds-btn { min-width: 46px; padding: 0 12px; border-color: color-mix(in srgb, var(--soc-border) 80%, transparent); background: var(--ui-bg-surface, var(--soc-panel-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-analytics-range-quick .ds-btn.active { border-color: color-mix(in srgb, var(--soc-primary) 44%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-bg-surface, var(--soc-panel-bg))); color: var(--soc-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 16%, transparent); } body.soc-desktop-shell #analyticsView .soc-analytics-summary-zone { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: start; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-zone > .soc-analytics-kpi-grid { grid-column: 1 / -1; order: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; grid-auto-rows: minmax(92px, auto); } body.soc-desktop-shell #analyticsView .soc-analytics-summary-zone > .soc-analytics-summary-primary { grid-column: 1 / -1; order: 2; gap: 12px; padding: 16px 18px 18px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); } body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-head { gap: 10px; padding-bottom: 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-headline { grid-template-columns: minmax(0, 1fr); gap: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-title-wrap { gap: 4px; } body.soc-desktop-shell #analyticsView .soc-risk-overview-title { font-size: 22px; line-height: 30px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-lead { max-width: 58ch; font-size: 14px; line-height: 20px; color: color-mix(in srgb, var(--ui-text-primary, var(--soc-text)) 92%, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-analytics-summary-meta-row { display: grid; gap: 8px; justify-content: stretch; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body { grid-template-columns: minmax(0, 1.42fr) minmax(240px, 0.88fr); gap: 18px; align-items: stretch; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-content { gap: 10px; align-content: start; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection { gap: 8px; padding-top: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection--drivers { gap: 10px; padding-top: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-driver-list { list-style: none; padding-left: 0; gap: 8px; } body.soc-desktop-shell #analyticsView .soc-driver-row { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } body.soc-desktop-shell #analyticsView .soc-driver-row-empty { padding: 10px 12px; border: 1px dashed var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; color: var(--ui-text-secondary, var(--soc-text-sub)); background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } body.soc-desktop-shell #analyticsView .soc-risk-overview-side { width: auto; padding: 14px 14px 12px; border: 1px solid color-mix(in srgb, var(--soc-primary) 14%, var(--ui-border-subtle, var(--soc-border))); border-radius: 16px; background: color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface, var(--soc-panel-bg))); justify-self: stretch; justify-items: stretch; align-content: start; gap: 12px; } body.soc-desktop-shell #analyticsView .soc-risk-overview-cluster-head { gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } body.soc-desktop-shell #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar { justify-content: space-between; align-items: center; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap, body.soc-desktop-shell #analyticsView .soc-risk-gauge, body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap { width: 156px; height: 156px; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap { justify-self: center; align-self: center; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap strong { font-size: 34px; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-caption { color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card, body.soc-desktop-shell #analyticsView .soc-analytics-kpi-card { position: relative; overflow: hidden; min-height: 92px; padding: 12px 14px; gap: 6px; border-radius: 14px; border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); box-shadow: none; } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--analytics-kpi-accent, color-mix(in srgb, var(--soc-primary) 50%, transparent)); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="primary"] { --analytics-kpi-accent: color-mix(in srgb, var(--soc-primary) 72%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 7%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="warning"] { --analytics-kpi-accent: color-mix(in srgb, var(--soc-warning) 72%, transparent); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="caution"] { --analytics-kpi-accent: color-mix(in srgb, var(--soc-warning) 52%, transparent); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="critical"] { --analytics-kpi-accent: color-mix(in srgb, var(--soc-danger) 72%, transparent); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card.is-active { border-color: color-mix(in srgb, var(--analytics-kpi-accent, var(--soc-primary)) 48%, var(--ui-border-default, var(--soc-divider))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--analytics-kpi-accent, var(--soc-primary)) 16%, transparent); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-label { font-size: 12px; line-height: 16px; color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-value { font-size: 24px; line-height: 28px; } body.soc-desktop-shell #analyticsView .soc-analytics-zone, body.soc-desktop-shell #analyticsView .soc-analytics-trend-card { gap: 12px; padding: 16px 18px 18px; border-radius: 16px; } body.soc-desktop-shell #analyticsView .soc-analytics-zone-head, body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-block-head { padding-bottom: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-trend-grid { grid-template-columns: minmax(0, 1.46fr) minmax(300px, 0.92fr); gap: 14px; } body.soc-desktop-shell #analyticsView #analyticsTrendIncidentsBlock { min-height: 248px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 5%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); } body.soc-desktop-shell #analyticsView #analyticsTrendEciBlock { min-height: 236px; } body.soc-desktop-shell #analyticsView #analyticsTrendEciBlock.is-sparse { background: linear-gradient(180deg, color-mix(in srgb, var(--soc-warning) 4%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); } body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-sparkline-lg { height: 116px; min-height: 116px; margin-top: 6px; } body.soc-desktop-shell #analyticsView #analyticsTrendEciBlock .soc-sparkline-lg { height: 104px; min-height: 104px; } body.soc-desktop-shell #analyticsView #analyticsHeatmapBlock { gap: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-heatmap-toolbar { gap: 8px 12px; } body.soc-desktop-shell #analyticsView .soc-heatmap-day-tabs { gap: 6px; } body.soc-desktop-shell #analyticsView .soc-heatmap-day-btn { min-height: 28px; padding: 4px 9px; } body.soc-desktop-shell #analyticsView .soc-heatmap-scroll { min-height: 214px; padding-top: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-toolbar { gap: 10px; } body.soc-desktop-shell #analyticsView .soc-store-comparison-actions { grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(0, 168px)); gap: 10px; align-items: end; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-body { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.98fr); gap: 14px; align-items: start; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat, body.soc-desktop-shell #analyticsView .soc-analytics-insight-stat { border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg))); } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); border-radius: 14px; display: grid; gap: 4px; } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat[data-tone="safe"] { border-color: color-mix(in srgb, var(--soc-success) 24%, var(--ui-border-subtle, var(--soc-border))); } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat[data-tone="caution"] { border-color: color-mix(in srgb, var(--soc-warning) 26%, var(--ui-border-subtle, var(--soc-border))); } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat[data-tone="danger"] { border-color: color-mix(in srgb, var(--soc-danger) 26%, var(--ui-border-subtle, var(--soc-border))); } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat .label { font-size: 12px; line-height: 16px; color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat strong { font-size: 22px; line-height: 28px; } body.soc-desktop-shell #analyticsView .soc-analytics-site-list-shell { border: 1px solid color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 2%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg))); overflow: hidden; } body.soc-desktop-shell #analyticsView .soc-analytics-site-list-head, body.soc-desktop-shell #analyticsView .soc-analytics-site-list-row { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(90px, 0.8fr) minmax(90px, 0.75fr) minmax(100px, 0.9fr) minmax(126px, 1fr) minmax(90px, 0.8fr) minmax(90px, 0.86fr); gap: 12px; align-items: center; } body.soc-desktop-shell #analyticsView .soc-analytics-site-list-head { padding: 12px 16px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); background: color-mix(in srgb, var(--soc-primary) 6%, var(--ui-bg-surface, var(--soc-panel-bg))); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 700; } body.soc-desktop-shell #analyticsView .soc-analytics-site-list { display: grid; } body.soc-desktop-shell #analyticsView .soc-analytics-site-list-row { width: 100%; padding: 13px 16px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent); background: transparent; text-align: left; transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } body.soc-desktop-shell #analyticsView .soc-analytics-site-list-row:last-child { border-bottom: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-site-list-row:hover { background: color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface, var(--soc-panel-bg))); } body.soc-desktop-shell #analyticsView .soc-analytics-site-list-row.is-selected { background: linear-gradient(135deg, color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)) 72%); box-shadow: inset 3px 0 0 var(--soc-primary); } body.soc-desktop-shell #analyticsView .soc-analytics-site-cell { min-width: 0; font-size: 13px; line-height: 18px; color: var(--ui-text-primary, var(--soc-text)); } body.soc-desktop-shell #analyticsView .soc-analytics-site-cell strong { display: block; font-size: 14px; line-height: 20px; color: var(--ui-text-primary, var(--soc-text)); } body.soc-desktop-shell #analyticsView .soc-analytics-site-cell small { display: block; margin-top: 2px; color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-analytics-site-cell--score { font-weight: 800; color: var(--soc-primary); } body.soc-desktop-shell #analyticsView .soc-analytics-site-cell--trend[data-tone="danger"] { color: var(--soc-danger); font-weight: 700; } body.soc-desktop-shell #analyticsView .soc-analytics-site-cell--trend[data-tone="safe"] { color: var(--soc-success); font-weight: 700; } body.soc-desktop-shell #analyticsView .soc-analytics-site-cell--trend[data-tone="muted"] { color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #analyticsView .soc-analytics-site-cell--state .soc-risk-grade { min-width: 56px; justify-content: center; } body.soc-desktop-shell #analyticsView .soc-analytics-site-list-empty { padding: 18px 16px; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; line-height: 18px; } body.soc-desktop-shell #analyticsView .soc-store-row { gap: 12px; padding: 12px 14px; border-color: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-border-subtle, var(--soc-border))); } body.soc-desktop-shell #analyticsView .soc-store-row.is-selected { border-color: color-mix(in srgb, var(--soc-primary) 40%, var(--ui-border-default, var(--soc-divider))); background: linear-gradient(135deg, color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)) 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 14%, transparent); } body.soc-desktop-shell #analyticsView .soc-store-row-rank { min-height: 38px; background: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-bg-surface-subtle, var(--soc-card-bg))); } body.soc-desktop-shell #analyticsView .soc-analytics-comparison-side { gap: 12px; } body.soc-desktop-shell #analyticsView #analyticsStoreInsightPanel { position: sticky; top: 14px; padding: 16px 18px 18px; border: 1px solid color-mix(in srgb, var(--soc-primary) 14%, var(--ui-border-subtle, var(--soc-border))); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg))); } body.soc-desktop-shell #analyticsView .soc-analytics-detail-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; } body.soc-desktop-shell #analyticsView .soc-analytics-detail-tabs button { min-height: 34px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--soc-border) 82%, transparent); border-radius: 10px; background: var(--ui-bg-surface, var(--soc-panel-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 700; } body.soc-desktop-shell #analyticsView .soc-analytics-detail-tabs button.is-active { border-color: color-mix(in srgb, var(--soc-primary) 40%, var(--ui-border-default, var(--soc-divider))); background: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface, var(--soc-panel-bg))); color: var(--soc-primary); } body.soc-desktop-shell #analyticsView #analyticsStoreInsightPanel .soc-block-head strong, body.soc-desktop-shell #analyticsView #analyticsScoreTopBlock .soc-block-head strong { color: var(--soc-primary); } body.soc-desktop-shell #analyticsView :is(.soc-risk-info-popover, .soc-store-info-popover) { border-color: color-mix(in srgb, var(--soc-primary) 18%, var(--soc-border)); box-shadow: 0 18px 44px color-mix(in srgb, var(--soc-shadow) 52%, transparent); } } #analyticsView .soc-analytics-detail-body { display: grid; gap: 12px; min-height: 220px; } #analyticsView .soc-analytics-detail-section { display: grid; gap: 10px; padding-top: 2px; } #analyticsView .soc-analytics-detail-section h5 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #analyticsView .soc-analytics-detail-section-head .meta { flex: 0 0 auto; font-size: 12px; line-height: 16px; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-detail-stack { display: grid; gap: 8px; } #analyticsView .soc-analytics-detail-empty, #analyticsView .soc-analytics-detail-empty-inline { padding: 12px 14px; border: 1px dashed var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; color: var(--ui-text-secondary, var(--soc-text-sub)); background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); font-size: 13px; line-height: 18px; } #analyticsView .soc-analytics-detail-empty[data-tone="error"] { border-color: color-mix(in srgb, var(--soc-danger) 36%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-danger) 6%, var(--ui-bg-surface-subtle, var(--soc-card-bg))); } #analyticsView .soc-analytics-detail-empty-inline--compact { padding: 9px 12px; font-size: 12px; line-height: 16px; } #analyticsView .soc-analytics-detail-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } #analyticsView .soc-analytics-detail-segmented { display: inline-flex; align-items: center; gap: 6px; } #analyticsView .soc-analytics-detail-segmented button { min-height: 30px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--soc-border) 82%, transparent); border-radius: 999px; background: var(--ui-bg-surface, var(--soc-panel-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 700; } #analyticsView .soc-analytics-detail-segmented button.is-active { border-color: color-mix(in srgb, var(--soc-primary) 40%, var(--ui-border-default, var(--soc-divider))); background: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-bg-surface, var(--soc-panel-bg))); color: var(--soc-primary); } #analyticsView .soc-analytics-pattern-card { display: grid; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } #analyticsView .soc-analytics-pattern-toolbar { display: grid; gap: 0; align-items: stretch; } #analyticsView #analyticsPatternPanel .soc-analytics-board-card-head { align-items: center; } #analyticsView .soc-analytics-pattern-head-actions { margin-left: auto; flex: 0 0 auto; } #analyticsView .soc-analytics-pattern-toolbar-top, #analyticsView .soc-analytics-pattern-footer { display: flex; align-items: center; } #analyticsView .soc-analytics-pattern-toolbar-top { justify-content: flex-end; } #analyticsView .soc-analytics-pattern-footer { justify-content: flex-start; padding-top: 10px; } #analyticsView .soc-analytics-pattern-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #analyticsView .soc-analytics-pattern-summary-item { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--soc-primary) 14%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-primary) 8%, var(--ui-bg-surface, var(--soc-panel-bg))); } #analyticsView .soc-analytics-pattern-summary-item .label { font-size: 11px; line-height: 15px; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-pattern-summary-item strong { min-width: 0; font-size: 13px; line-height: 18px; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-pattern-grid-wrap { overflow-x: auto; padding-bottom: 2px; } #analyticsView .soc-analytics-pattern-grid { display: grid; grid-template-columns: 60px repeat(12, minmax(48px, 1fr)); gap: 5px; min-width: 760px; align-items: center; } #analyticsView .soc-analytics-pattern-corner, #analyticsView .soc-analytics-pattern-header, #analyticsView .soc-analytics-pattern-row-label { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-pattern-header, #analyticsView .soc-analytics-pattern-row-label { text-align: center; } #analyticsView .soc-analytics-pattern-header { white-space: nowrap; word-break: keep-all; letter-spacing: -0.02em; } #analyticsView .soc-analytics-pattern-cell { min-height: 28px; border: 1px solid color-mix(in srgb, var(--soc-border) 78%, transparent); border-radius: 10px; background: var(--ui-bg-surface, var(--soc-panel-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 14px; font-weight: 700; padding: 0; } #analyticsView .soc-analytics-pattern-cell.i1 { background: #fff8f1; border-color: #ffe7d4; color: #9a6630; } #analyticsView .soc-analytics-pattern-cell.i2 { background: #ffe9d2; border-color: #ffcfaa; color: #8b5622; } #analyticsView .soc-analytics-pattern-cell.i3 { background: #ffd8b0; border-color: #ffb16f; color: #7b4314; } #analyticsView .soc-analytics-pattern-cell.i4 { background: #ffb97d; border-color: #ff8f3d; color: #6f3305; } #analyticsView .soc-analytics-pattern-cell.i5 { background: #ff7a1f; border-color: #ff6a13; color: #ffffff; } #analyticsView .soc-analytics-pattern-cell.is-selected { border-color: color-mix(in srgb, var(--soc-primary) 54%, var(--ui-border-default, var(--soc-divider))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 18%, transparent); } #analyticsView .soc-analytics-pattern-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-start; } #analyticsView .soc-analytics-pattern-legend-caption, #analyticsView .soc-analytics-pattern-legend-range, #analyticsView .soc-analytics-pattern-legend-item { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 14px; font-weight: 700; } #analyticsView .soc-analytics-pattern-legend-item { display: inline-flex; align-items: center; gap: 4px; } #analyticsView .soc-analytics-pattern-scale { width: 14px; height: 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--soc-border) 80%, transparent); } #analyticsView .soc-analytics-pattern-scale.i1 { background: #fff8f1; border-color: #ffe7d4; } #analyticsView .soc-analytics-pattern-scale.i2 { background: #ffe9d2; border-color: #ffcfaa; } #analyticsView .soc-analytics-pattern-scale.i3 { background: #ffd8b0; border-color: #ffb16f; } #analyticsView .soc-analytics-pattern-scale.i4 { background: #ffb97d; border-color: #ff8f3d; } #analyticsView .soc-analytics-pattern-scale.i5 { background: #ff7a1f; border-color: #ff6a13; } #analyticsView .soc-analytics-pattern-drawer { padding-top: 2px; } #analyticsView .soc-analytics-cause-grid, #analyticsView .soc-analytics-detail-column-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #analyticsView .soc-analytics-breakdown-list { display: grid; gap: 8px; } #analyticsView .soc-analytics-breakdown-row { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } #analyticsView .soc-analytics-breakdown-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } #analyticsView .soc-analytics-breakdown-head strong { min-width: 0; font-size: 13px; line-height: 18px; } #analyticsView .soc-analytics-breakdown-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--soc-border) 65%, transparent); overflow: hidden; } #analyticsView .soc-analytics-breakdown-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--soc-primary) 72%, transparent), color-mix(in srgb, var(--soc-accent) 64%, transparent)); } #analyticsView .soc-analytics-cause-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } #analyticsView .soc-analytics-cause-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--soc-primary) 18%, var(--ui-border-subtle, var(--soc-border))); background: color-mix(in srgb, var(--soc-primary) 8%, var(--ui-bg-surface-subtle, var(--soc-card-bg))); } #analyticsView .soc-analytics-detail-list { display: grid; gap: 8px; } #analyticsView .soc-analytics-detail-list-item { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--soc-border) 76%, transparent); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } #analyticsView .soc-analytics-detail-list-item strong { min-width: 0; font-size: 13px; line-height: 18px; } #analyticsView .soc-analytics-detail-list-item .meta { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; } #analyticsView .soc-analytics-people-list { display: grid; gap: 8px; } #analyticsView .soc-analytics-people-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border))); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); text-align: left; } #analyticsView .soc-analytics-people-row.is-actionable { transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } #analyticsView .soc-analytics-people-row.is-actionable:hover { background: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface-subtle, var(--soc-card-bg))); border-color: color-mix(in srgb, var(--soc-primary) 30%, var(--ui-border-subtle, var(--soc-border))); } #analyticsView .soc-analytics-people-row.is-actionable:focus-visible { outline: 2px solid color-mix(in srgb, var(--soc-primary) 45%, transparent); outline-offset: 2px; } #analyticsView .soc-analytics-people-rank { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--soc-primary) 14%, var(--ui-bg-surface, var(--soc-panel-bg))); color: var(--soc-primary); font-size: 12px; line-height: 16px; font-weight: 800; } #analyticsView .soc-analytics-people-main, #analyticsView .soc-analytics-people-score { display: grid; gap: 4px; min-width: 0; } #analyticsView .soc-analytics-people-score { justify-items: end; text-align: right; } #analyticsView .soc-analytics-people-main strong, #analyticsView .soc-analytics-people-score strong { min-width: 0; line-height: 1.2; } #analyticsView .soc-analytics-people-main .meta, #analyticsView .soc-analytics-people-score .meta { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; } #analyticsView .soc-analytics-v2-detail-body::-webkit-scrollbar { width: 10px; } #analyticsView .soc-analytics-v2-detail-body::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--soc-primary) 24%, transparent); } [data-theme="dark"] #analyticsView .soc-analytics-pattern-card, [data-theme="dark"] #analyticsView .soc-analytics-breakdown-row, [data-theme="dark"] #analyticsView .soc-analytics-detail-list-item, [data-theme="dark"] #analyticsView .soc-analytics-people-row, [data-theme="dark"] #analyticsView .soc-analytics-pattern-summary-item, [data-theme="dark"] #analyticsView .soc-analytics-v2-detail-header-chip, [data-theme="dark"] #analyticsView .soc-analytics-v2-detail-stat { background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 92%, black 8%); } [data-theme="dark"] #analyticsView .soc-analytics-pattern-cell { border-color: color-mix(in srgb, var(--soc-border) 62%, transparent); color: color-mix(in srgb, var(--ui-text-primary, var(--soc-text)) 88%, var(--ui-text-secondary, var(--soc-text-sub)) 12%); } [data-theme="dark"] #analyticsView .soc-analytics-pattern-grid-wrap { scrollbar-color: color-mix(in srgb, var(--soc-primary) 24%, transparent) transparent; } body.soc-desktop-shell #analyticsView #analyticsStoreInsightPanel { min-height: 540px; } @media (max-width: 1280px) { #analyticsView .soc-analytics-cause-grid, #analyticsView .soc-analytics-detail-column-grid, #analyticsView .soc-analytics-pattern-summary { grid-template-columns: 1fr; } #analyticsView .soc-analytics-pattern-toolbar-top { justify-content: flex-end; } #analyticsView .soc-analytics-pattern-footer { justify-content: flex-start; } } @media (min-width: 1280px) { body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body { grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.42fr); gap: 18px; align-items: start; } body.soc-desktop-shell #analyticsView .soc-risk-overview-side { grid-column: 1; width: 220px; justify-self: start; justify-items: center; align-content: start; gap: 10px; } body.soc-desktop-shell #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar { width: 100%; justify-content: space-between; align-items: center; gap: 8px; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap, body.soc-desktop-shell #analyticsView .soc-risk-gauge, body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap { width: 158px; height: 158px; } body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap { justify-self: center; align-self: start; margin-top: 4px; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-content { grid-column: 2; align-content: start; padding-right: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection--drivers { padding-top: 2px; } } #analyticsView .soc-analytics-v2-dashboard { display: grid; gap: 20px; } #analyticsView .soc-analytics-v2-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; min-height: 72px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } #analyticsView .soc-analytics-v2-header-copy { display: grid; gap: 6px; } #analyticsView .soc-analytics-v2-header-copy h3 { margin: 0; font-size: 32px; line-height: 1.1; } #analyticsView .soc-analytics-v2-header-copy .meta { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-v2-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 16px; align-items: flex-end; } #analyticsView .soc-analytics-v2-toolbar-group { display: grid; gap: 8px; } #analyticsView .soc-analytics-v2-toolbar-group--actions { justify-self: end; min-width: max-content; } #analyticsView .soc-analytics-v2-toolbar-group--scope { min-width: 220px; } #analyticsView .soc-analytics-v2-site-picker { position: relative; } #analyticsView .soc-analytics-v2-site-picker-trigger { width: 100%; min-width: 220px; justify-content: center; } #analyticsView .soc-analytics-v2-site-picker-caret { display: none; } #analyticsView .soc-analytics-v2-site-picker-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; display: grid; gap: 4px; padding: 8px; border: 1px solid color-mix(in srgb, var(--ui-border-default, var(--soc-border)) 88%, transparent); border-radius: 14px; background: var(--ui-bg-surface, var(--soc-panel-bg)); box-shadow: var(--ui-shadow-2, 0 18px 34px rgba(15, 23, 42, 0.16)); } #analyticsView .soc-analytics-v2-site-picker-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ui-text-primary, var(--soc-text)); text-align: left; } #analyticsView .soc-analytics-v2-site-picker-option:hover { background: color-mix(in srgb, var(--soc-primary) 8%, var(--ui-bg-surface-subtle, var(--soc-card-bg))); } #analyticsView .soc-analytics-v2-site-picker-option.is-selected { background: color-mix(in srgb, var(--soc-primary) 11%, var(--ui-bg-surface-subtle, var(--soc-card-bg))); color: var(--soc-primary); font-weight: 700; } #analyticsView .soc-analytics-v2-site-picker-option .name { min-width: 0; } #analyticsView .soc-analytics-v2-site-picker-option .check { color: currentColor; font-weight: 800; } #analyticsView .soc-analytics-v2-toolbar-label { font-size: var(--type-label-sm-size, 12px); line-height: var(--type-label-sm-line, 16px); font-weight: var(--type-label-sm-weight, 600); color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-v2-toolbar-label--ghost { visibility: hidden; user-select: none; } #analyticsView .soc-analytics-v2-range-quick { display: flex; flex-wrap: wrap; gap: 8px; } #analyticsView .soc-analytics-v2-custom-range { display: inline-flex; align-items: center; gap: 8px; } #analyticsView .soc-analytics-v2-toolbar select, #analyticsView .soc-analytics-v2-toolbar input[type="date"], #analyticsView .soc-analytics-v2-toolbar .ds-btn { min-height: 40px; height: 40px; } #analyticsView .soc-analytics-v2-toolbar-actions { display: flex; gap: 8px; align-items: center; } #analyticsView .soc-analytics-v2-content { display: block; } #analyticsView .soc-analytics-v2-shell { display: grid; grid-template-columns: minmax(0, 7fr) minmax(420px, 5fr); gap: 18px; align-items: start; } #analyticsView .soc-analytics-v2-main-column { display: grid; grid-template-rows: auto auto; gap: 16px; min-height: 0; height: auto; min-width: 0; align-content: start; } #analyticsView .soc-analytics-v2-hero-row { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 5.6fr); gap: 14px; align-items: stretch; } #analyticsView .soc-analytics-v2-card { border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 18px; background: var(--ui-bg-surface, var(--soc-panel-bg)); box-shadow: var(--ui-shadow-1, var(--soc-shadow-soft)); padding: 16px 18px; min-width: 0; } #analyticsView .soc-analytics-v2-card--risk { grid-column: auto; } #analyticsView .soc-analytics-v2-card--kpis { grid-column: auto; } #analyticsView .soc-analytics-v2-card-head { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 10px; } #analyticsView .soc-analytics-v2-title-with-help { display: inline-flex; align-items: center; gap: 8px; } #analyticsView .soc-analytics-v2-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(15px, 0.98vw, 18px); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-v2-card--risk .soc-risk-info-trigger { font-size: clamp(15px, 0.98vw, 18px); line-height: 1; } #analyticsView .soc-analytics-v2-risk-body { display: grid; grid-template-columns: clamp(148px, 11vw, 184px) minmax(0, 1fr); align-items: stretch; gap: 22px; min-height: 228px; } #analyticsView .soc-analytics-v2-risk-gauge-wrap { position: relative; width: clamp(148px, 11vw, 184px); height: clamp(148px, 11vw, 184px); flex: 0 0 auto; align-self: center; } #analyticsView .soc-analytics-v2-risk-gauge, #analyticsView .soc-analytics-v2-risk-value-wrap { width: 100%; height: 100%; } #analyticsView .soc-analytics-v2-risk-gauge { transform: rotate(-90deg); overflow: visible; } #analyticsView .soc-analytics-v2-risk-gauge-track, #analyticsView .soc-analytics-v2-risk-gauge-arc { fill: none; stroke-width: 11; vector-effect: non-scaling-stroke; } #analyticsView .soc-analytics-v2-risk-gauge-track { stroke: color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 82%, var(--ui-bg-surface, var(--soc-panel-bg))); } #analyticsView .soc-analytics-v2-risk-gauge-arc { stroke-linecap: round; transition: stroke-dashoffset 220ms ease, stroke 220ms ease; } #analyticsView .soc-analytics-v2-risk-value-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding-top: 4px; } #analyticsView .soc-analytics-v2-risk-value-wrap strong { position: static; font-size: clamp(34px, 2.7vw, 46px); line-height: 1; letter-spacing: -0.03em; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-v2-risk-value-label { position: static; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ui-text-secondary, var(--soc-text-sub)); white-space: nowrap; } #analyticsView .soc-analytics-v2-risk-badge-row { display: flex; justify-content: flex-start; padding-inline-start: 26px; } #analyticsView .soc-analytics-v2-risk-badge-row .soc-risk-grade { min-width: 68px; justify-content: center; } #analyticsView .soc-analytics-v2-risk-summary { display: grid; gap: 10px; align-content: center; min-width: 0; } #analyticsView .soc-analytics-v2-risk-summary-copy { margin: 0; font-size: 14px; line-height: 22px; color: var(--ui-text-secondary, var(--soc-text-sub)); max-width: 28ch; } #analyticsView .soc-analytics-v2-kpi-cluster { display: grid; gap: 12px; } @media (max-width: 1480px) { #analyticsView .soc-analytics-v2-risk-body { grid-template-columns: 1fr; justify-items: center; min-height: 0; gap: 16px; } #analyticsView .soc-analytics-v2-risk-summary { width: 100%; } #analyticsView .soc-analytics-v2-risk-badge-row { padding-inline-start: 0; } #analyticsView .soc-analytics-v2-risk-summary-copy { max-width: none; } } #analyticsView .soc-analytics-v2-kpi-rack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #analyticsView .soc-analytics-v2-kpi-tile { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 88%, var(--ui-bg-canvas, var(--soc-bg)) 12%); border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 80%, transparent); } #analyticsView .soc-analytics-v2-kpi-tile .label { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; line-height: 15px; font-weight: 700; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-v2-kpi-tile .label::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--analytics-kpi-tone, color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 92%, transparent)); flex: 0 0 auto; } #analyticsView .soc-analytics-v2-kpi-tile strong { font-size: clamp(15px, 1.12vw, 19px); line-height: 1.1; letter-spacing: -0.03em; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-v2-kpi-tile[data-tone="primary"] { --analytics-kpi-tone: color-mix(in srgb, var(--soc-primary) 72%, white 28%); } #analyticsView .soc-analytics-v2-kpi-tile[data-tone="warning"] { --analytics-kpi-tone: color-mix(in srgb, var(--soc-warning) 68%, white 32%); } #analyticsView .soc-analytics-v2-kpi-tile[data-tone="caution"] { --analytics-kpi-tone: color-mix(in srgb, var(--soc-warning) 56%, var(--soc-danger) 44%); } #analyticsView .soc-analytics-v2-kpi-tile[data-tone="danger"] { --analytics-kpi-tone: color-mix(in srgb, var(--soc-danger) 70%, white 30%); } #analyticsView .soc-analytics-v2-kpi-tile[data-tone="safe"] { --analytics-kpi-tone: color-mix(in srgb, var(--soc-success) 72%, white 28%); } #analyticsView .soc-analytics-v2-health-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 86%, transparent); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); } #analyticsView .soc-analytics-v2-health-head { display: grid; gap: 6px; } #analyticsView .soc-analytics-v2-health-head .label { display: block; font-size: 18px; line-height: 24px; font-weight: 800; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-v2-health-head strong { display: block; font-size: 14px; line-height: 19px; letter-spacing: -0.01em; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-v2-health-head .meta { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; } #analyticsView .soc-analytics-v2-health-bar { display: flex; width: 100%; height: 12px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--soc-border) 66%, transparent); } #analyticsView .soc-analytics-v2-health-segment { display: block; height: 100%; min-width: 0; transition: width 180ms ease; } #analyticsView .soc-analytics-v2-health-segment.is-safe { background: color-mix(in srgb, var(--soc-success) 72%, white 28%); } #analyticsView .soc-analytics-v2-health-segment.is-warning { background: color-mix(in srgb, var(--soc-warning) 72%, white 28%); } #analyticsView .soc-analytics-v2-health-segment.is-danger { background: color-mix(in srgb, var(--soc-danger) 72%, white 28%); } #analyticsView .soc-analytics-v2-health-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #analyticsView .soc-analytics-v2-health-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 84%, transparent); background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 90%, var(--ui-bg-canvas, var(--soc-bg)) 10%); } #analyticsView .soc-analytics-v2-health-item .dot { width: 9px; height: 9px; border-radius: 999px; } #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot { background: color-mix(in srgb, var(--soc-success) 72%, white 28%); } #analyticsView .soc-analytics-v2-health-item[data-tone="warning"] .dot { background: color-mix(in srgb, var(--soc-warning) 72%, white 28%); } #analyticsView .soc-analytics-v2-health-item[data-tone="danger"] .dot { background: color-mix(in srgb, var(--soc-danger) 72%, white 28%); } #analyticsView .soc-analytics-v2-health-item .label { font-size: 11px; line-height: 15px; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-v2-health-item strong { font-size: 13px; line-height: 18px; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-v2-help-btn { min-width: 24px; width: 24px; height: 24px; padding: 0; border: 0; border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; color: color-mix(in srgb, var(--soc-primary) 88%, var(--soc-text-sub)); font-weight: 800; font-size: clamp(15px, 0.98vw, 18px) !important; line-height: 1; opacity: 1; } #analyticsView .soc-analytics-v2-help-btn:hover, #analyticsView .soc-analytics-v2-help-btn:focus-visible { transform: none; box-shadow: none; background: transparent; } #analyticsView .soc-analytics-v2-help-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--soc-primary) 24%, transparent); outline-offset: 4px; border-radius: 999px; } #analyticsView .soc-analytics-v2-card--table, #analyticsView .soc-analytics-v2-card--detail { min-height: 0; } #analyticsView .soc-analytics-v2-card--table { display: grid; grid-template-rows: auto auto auto; min-width: 0; min-height: 0; height: auto; --analytics-comparison-body-max-height: auto; } #analyticsView .soc-analytics-v2-card--detail { display: grid; grid-template-rows: auto auto auto auto 1fr; min-width: 0; min-height: 0; height: var(--analytics-detail-panel-height, auto); max-height: var(--analytics-detail-panel-height, none); align-self: start; overflow: hidden; } #analyticsView .soc-analytics-v2-table-toolbar { display: grid; gap: 12px; margin-bottom: 14px; } #analyticsView .soc-analytics-v2-table-controls { display: grid; grid-template-columns: minmax(220px, 1.6fr) minmax(120px, 0.9fr) minmax(180px, 1fr); gap: 10px; align-items: end; } #analyticsView .soc-analytics-v2-control-field { display: grid; gap: 4px; min-width: 0; } #analyticsView .soc-analytics-v2-control-field label { font-size: 11px; line-height: 15px; font-weight: 700; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-v2-control-field input, #analyticsView .soc-analytics-v2-control-field select { min-height: 36px; width: 100%; } #analyticsView .soc-analytics-v2-table-shell { display: grid; grid-template-rows: auto 1fr; border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, transparent); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 1.5%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface, var(--soc-panel-bg))); overflow: hidden; min-height: 0; height: auto; } #analyticsView .soc-analytics-v2-table-head, #analyticsView .soc-analytics-v2-site-row { display: grid; box-sizing: border-box; width: 100%; grid-template-columns: minmax(138px, 1.08fr) minmax(82px, 0.68fr) minmax(68px, 0.54fr) minmax(86px, 0.68fr) minmax(104px, 0.82fr) minmax(76px, 0.58fr) minmax(92px, 0.72fr); gap: 4px; align-items: center; justify-items: center; } #analyticsView .soc-analytics-v2-table-head { padding: 11px 14px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); background: color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface, var(--soc-panel-bg))); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 15px; font-weight: 700; } #analyticsView .soc-analytics-v2-sort-head { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: center; } #analyticsView .soc-analytics-v2-sort-head::after { content: "↕"; opacity: 0.38; font-size: 11px; line-height: 1; } #analyticsView .soc-analytics-v2-sort-head.is-active { color: var(--soc-primary); } #analyticsView .soc-analytics-v2-sort-head.is-active::after { opacity: 1; } #analyticsView .soc-analytics-v2-table-body { display: grid; align-content: start; min-height: 0; height: var(--analytics-comparison-body-max-height, auto); max-height: var(--analytics-comparison-body-max-height, none); overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; } #analyticsView .soc-analytics-v2-site-row { padding: 11px 10px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent); background: transparent; text-align: center; transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } #analyticsView .soc-analytics-v2-site-row:last-child { border-bottom: 0; } #analyticsView .soc-analytics-v2-site-row:hover { background: color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface, var(--soc-panel-bg))); } #analyticsView .soc-analytics-v2-site-row.is-selected { background: linear-gradient(135deg, color-mix(in srgb, var(--soc-primary) 7%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)) 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 26%, transparent); } #analyticsView .soc-analytics-v2-site-cell { min-width: 0; display: block; font-size: 12px; line-height: 16px; color: var(--ui-text-primary, var(--soc-text)); text-align: center; } #analyticsView .soc-analytics-v2-site-cell strong { display: block; font-size: 12px; line-height: 16px; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-v2-site-cell small { display: block; margin-top: 2px; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-v2-table-head > *, #analyticsView .soc-analytics-v2-site-row > * { min-width: 0; width: 100%; } #analyticsView .soc-analytics-v2-table-head > *, #analyticsView .soc-analytics-v2-site-row > * { text-align: center; } #analyticsView .soc-analytics-v2-site-cell--name { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } #analyticsView .soc-analytics-v2-site-cell--name strong, #analyticsView .soc-analytics-v2-site-cell--name small { width: auto; text-align: center; } #analyticsView .soc-analytics-v2-site-cell--score { font-weight: 800; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-v2-site-cell--trend { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; } #analyticsView .soc-analytics-v2-site-cell--trend[data-tone="danger"] { color: var(--soc-danger); font-weight: 700; } #analyticsView .soc-analytics-v2-site-cell--trend[data-tone="safe"] { color: var(--soc-success); font-weight: 700; } #analyticsView .soc-analytics-v2-site-cell--trend[data-tone="muted"] { color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-v2-site-cell--state .soc-risk-grade { min-width: 60px; padding: 4px 10px; justify-content: center; } #analyticsView .soc-analytics-v2-site-cell--state { display: flex; justify-content: center; align-items: center; width: 100%; padding-right: 0; } #analyticsView .soc-analytics-v2-detail-score { font-size: clamp(22px, 1.75vw, 30px); line-height: 1; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-v2-detail-header-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } #analyticsView .soc-analytics-v2-detail-header-chip { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 90%, var(--ui-bg-canvas, var(--soc-bg)) 10%); } #analyticsView .soc-analytics-v2-detail-header-chip .label { font-size: 10px; line-height: 14px; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-v2-detail-header-chip strong { font-size: 12px; line-height: 16px; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-v2-detail-tabs { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; padding-bottom: 2px; border-bottom: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, transparent); } #analyticsView .soc-analytics-v2-detail-tabs button { min-height: 34px; padding: 0 0 8px; border-radius: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 700; } #analyticsView .soc-analytics-v2-detail-tabs button.is-active { border-bottom-color: var(--soc-primary); color: var(--soc-primary); } #analyticsView .soc-analytics-v2-detail-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; } #analyticsView .soc-analytics-v2-detail-stat { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } #analyticsView .soc-analytics-v2-detail-stat .label { font-size: 10px; line-height: 14px; color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-v2-detail-stat strong { font-size: 12px; line-height: 16px; color: var(--ui-text-primary, var(--soc-text)); } #analyticsView .soc-analytics-v2-trend-value[data-tone="danger"] { color: var(--soc-danger); } #analyticsView .soc-analytics-v2-trend-value[data-tone="safe"] { color: var(--soc-success); } #analyticsView .soc-analytics-v2-trend-value[data-tone="muted"] { color: var(--ui-text-secondary, var(--soc-text-sub)); } #analyticsView .soc-analytics-v2-detail-body { display: grid; align-content: start; gap: 8px; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; scrollbar-gutter: stable; } body.soc-desktop-shell #analyticsView #analyticsStoreComparisonList { min-height: 0; } #analyticsView .soc-analytics-overview-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; } #analyticsView .soc-analytics-overview-row strong { flex: 0 0 auto; } #analyticsView .soc-analytics-overview-row .meta { margin-top: 0; flex: 1 1 240px; } @media (max-height: 980px) and (min-width: 1361px) { #analyticsView .soc-analytics-v2-main-column { min-height: 0; height: auto; } #analyticsView .soc-analytics-v2-card--detail { min-height: 0; } #analyticsView .soc-analytics-v2-card { padding: 14px 16px; } #analyticsView .soc-analytics-v2-risk-body { min-height: 220px; gap: 12px; } #analyticsView .soc-analytics-v2-kicker { font-size: clamp(16px, 1.02vw, 18px); } #analyticsView .soc-analytics-v2-card--risk .soc-risk-info-trigger { font-size: clamp(16px, 1.02vw, 18px); } #analyticsView .soc-analytics-v2-help-btn { font-size: clamp(16px, 1.02vw, 18px) !important; } #analyticsView .soc-analytics-v2-kpi-tile { padding: 9px 9px; } } @media (max-height: 900px) and (min-width: 1361px) { #analyticsView .soc-analytics-v2-main-column { min-height: 0; height: auto; } #analyticsView .soc-analytics-v2-card--detail { min-height: 0; } #analyticsView .soc-analytics-v2-card { padding: 13px 14px; } #analyticsView .soc-analytics-v2-kicker { font-size: clamp(15px, 0.96vw, 17px); } #analyticsView .soc-analytics-v2-card--risk .soc-risk-info-trigger { font-size: clamp(15px, 0.96vw, 17px); } #analyticsView .soc-analytics-v2-help-btn { font-size: clamp(15px, 0.96vw, 17px) !important; } #analyticsView .soc-analytics-v2-risk-body { min-height: 202px; } #analyticsView .soc-analytics-v2-risk-gauge-wrap { width: clamp(152px, 10.8vw, 182px); height: clamp(152px, 10.8vw, 182px); } #analyticsView .soc-analytics-v2-risk-value-wrap strong { font-size: clamp(38px, 2.9vw, 52px); } #analyticsView .soc-analytics-v2-kpi-tile strong { font-size: clamp(16px, 1.22vw, 20px); } #analyticsView .soc-analytics-v2-detail-score { font-size: clamp(20px, 1.45vw, 24px); } } #analyticsView .soc-analytics-v2-detail-empty { padding: 14px 16px; border: 1px dashed var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; line-height: 18px; } #analyticsView .soc-analytics-site-list-empty { padding: 18px 16px; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 13px; line-height: 18px; } @media (max-width: 1360px) { #analyticsView .soc-analytics-v2-header { grid-template-columns: 1fr; } #analyticsView .soc-analytics-v2-toolbar { justify-content: flex-start; } #analyticsView .soc-analytics-v2-shell { grid-template-columns: 1fr; } #analyticsView .soc-analytics-v2-main-column { height: auto; min-height: 0; } #analyticsView .soc-analytics-v2-hero-row { grid-template-columns: 1fr; } #analyticsView .soc-analytics-v2-card--risk, #analyticsView .soc-analytics-v2-card--kpis { grid-column: auto; } #analyticsView .soc-analytics-v2-card--table, #analyticsView .soc-analytics-v2-card--detail { height: auto; max-height: none; min-height: 0; } #analyticsView .soc-analytics-v2-table-body { height: auto; max-height: none; } #analyticsView .soc-analytics-v2-risk-body { grid-template-columns: 1fr; justify-items: center; } #analyticsView .soc-analytics-v2-risk-summary { width: 100%; } #analyticsView .soc-analytics-v2-health-legend, #analyticsView .soc-analytics-v2-detail-header-summary { grid-template-columns: 1fr; } } @media (max-width: 1100px) { #analyticsView .soc-analytics-v2-risk-body { min-height: 0; } #analyticsView .soc-analytics-v2-risk-meta { width: 100%; } #analyticsView .soc-analytics-v2-kpi-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); } #analyticsView .soc-analytics-v2-health-legend, #analyticsView .soc-analytics-v2-detail-meta { grid-template-columns: 1fr; } #analyticsView .soc-analytics-v2-table-controls { grid-template-columns: 1fr; } #analyticsView .soc-analytics-v2-table-head, #analyticsView .soc-analytics-v2-site-row { grid-template-columns: minmax(140px, 1.4fr) repeat(6, minmax(72px, 1fr)); } #analyticsView .soc-analytics-v2-detail-header-summary { grid-template-columns: 1fr; } } #googleSheetsPanel .soc-apple-weekly-form-subsection { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ui-border-subtle, var(--soc-border)); } #googleSheetsPanel .soc-apple-weekly-form-section-head.compact { gap: 4px; } #googleSheetsPanel .soc-apple-weekly-form-section-head.compact h5 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ui-text-primary, var(--soc-text)); } #googleSheetsPanel .soc-apple-weekly-inline-list-value { min-height: 40px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 10px; background: var(--ui-bg-surface, var(--soc-panel-bg)); color: var(--ui-text-primary, var(--soc-text)); } /* ===== Support roster workspace refresh ===== */ #opsSupportPanel { --ops-support-ink: #0f172a; --ops-support-subtle: #475569; --ops-support-border: #cbd5e1; --ops-support-border-strong: #94a3b8; --ops-support-primary: #f97316; --ops-support-primary-strong: #ea580c; --ops-support-primary-soft: rgba(249, 115, 22, 0.12); --ops-support-primary-surface: #fff4eb; --ops-support-pending: #ea580c; --ops-support-pending-soft: #fff5eb; --ops-support-approved: #15803d; --ops-support-approved-soft: #f3fff7; --ops-support-danger: #dc2626; --ops-support-danger-soft: #fff4f4; --ops-support-cancelled: #475569; --ops-support-cancelled-soft: #ffffff; } #opsSupportPanel .soc-ops-support-toolbar { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.98fr); align-items: start; gap: 16px 18px; padding: 16px 18px; border: 1px solid #dbe5ef; border-radius: 18px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } #opsSupportPanel .soc-ops-support-toolbar-left, #opsSupportPanel .soc-ops-support-toolbar-right { align-items: start; gap: 12px; } #opsSupportPanel .soc-ops-support-toolbar-right { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-self: stretch; width: 100%; } #opsSupportPanel .soc-ops-support-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; width: 100%; } #opsSupportPanel .soc-ops-support-filter-field { display: grid; grid-template-rows: auto 40px; align-content: start; gap: 4px; min-width: 0; } #opsSupportPanel .soc-ops-support-filter-label { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ops-support-subtle); transform: translateY(-6px); } #opsSupportPanel .soc-ops-support-compact-control { min-width: 0; height: 40px; border-color: #c9d6e2; background: #ffffff; color: var(--ops-support-ink); font-size: 13px; font-weight: 600; } #opsSupportPanel .soc-ops-support-toolbar-actions { display: flex; align-items: center; gap: 8px; align-self: end; margin-top: 0; } #opsSupportPanel .soc-ops-support-toolbar-actions .ds-btn { height: 40px; min-height: 40px; display: inline-flex; align-items: center; } #opsSupportPanel .soc-ops-support-export-top-btn { border-color: rgba(249, 115, 22, 0.28); background: rgba(249, 115, 22, 0.08); color: var(--ops-support-primary); } #opsSupportPanel .soc-ops-support-export-top-btn:hover, #opsSupportPanel .soc-ops-support-export-top-btn:focus-visible { border-color: rgba(249, 115, 22, 0.42); background: rgba(249, 115, 22, 0.14); color: var(--ops-support-primary-strong); } #opsSupportPanel .ops-support-month-nav { gap: 8px; } #opsSupportPanel .ops-support-month-nav .month-label, #opsSupportPanel .ops-support-month-nav .month-arrow { border-color: #c9d6e2; background: #ffffff; color: var(--ops-support-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } #opsSupportPanel .ops-support-month-nav .month-label { padding: 0 14px; font-size: 15px; font-weight: 700; } #opsSupportPanel .soc-ops-support-view-toggle { padding: 3px; border-color: #e5e7eb; border-radius: 12px; background: #ffffff; } #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'] { min-height: 34px; padding: 0 14px; border-radius: 10px; color: #52637a; font-weight: 700; } #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'].is-active { border-color: rgba(249, 115, 22, 0.28); background: var(--ops-support-primary); color: #ffffff; box-shadow: 0 6px 16px rgba(249, 115, 22, 0.22); } #opsSupportPanel .soc-ops-support-support-strip { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: end; gap: 14px 18px; } #opsSupportPanel .soc-ops-support-toolbar-stats { gap: 10px; } #opsSupportPanel .soc-ops-support-toolbar-stat { position: relative; min-width: 104px; gap: 4px; padding: 11px 13px 11px 16px; border: 1px solid #d8e1eb; border-radius: 14px; background: #ffffff; box-shadow: none; } #opsSupportPanel .soc-ops-support-toolbar-stat::before { content: ""; position: absolute; inset: 10px auto 10px 0; width: 4px; border-radius: 999px; background: var(--ops-support-stat-accent, #94a3b8); } #opsSupportPanel .soc-ops-support-toolbar-stat.is-request { --ops-support-stat-accent: var(--ops-support-primary); } #opsSupportPanel .soc-ops-support-toolbar-stat.is-people { --ops-support-stat-accent: #0f172a; } #opsSupportPanel .soc-ops-support-toolbar-stat.is-pending { --ops-support-stat-accent: var(--ops-support-pending); } #opsSupportPanel .soc-ops-support-toolbar-stat.is-approved { --ops-support-stat-accent: var(--ops-support-approved); } #opsSupportPanel .soc-ops-support-toolbar-stat-label { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--ops-support-subtle); } #opsSupportPanel .soc-ops-support-toolbar-stat > strong { font-size: 18px; line-height: 22px; color: var(--ops-support-ink); } #opsSupportPanel .soc-ops-support-toolbar-meta { text-align: right; font-size: 12px; line-height: 17px; color: var(--ops-support-subtle); } #opsSupportPanel .soc-ops-support-layout { gap: 16px; } #opsSupportPanel .soc-ops-support-main, #opsSupportPanel .soc-ops-support-sheet { border-color: #dbe5ef; border-radius: 18px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } #opsSupportPanel .soc-ops-support-main { gap: 12px; padding: 15px; } #opsSupportPanel .soc-ops-support-calendar-weekdays { gap: 10px; align-items: stretch; } #opsSupportPanel .soc-ops-support-calendar-weekdays > span { display: flex; align-items: center; justify-content: center; min-height: 26px; font-size: 12px; line-height: 16px; font-weight: 700; color: #52637a; } #opsSupportPanel .soc-ops-support-calendar-grid { gap: 8px; } #opsSupportPanel .soc-ops-support-calendar-cell { min-height: 136px; padding: 10px 9px; gap: 8px; border: 1px solid #d7e0ea; border-radius: 14px; background: #ffffff; transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; } #opsSupportPanel .soc-ops-support-calendar-cell:hover { border-color: #bfd1e5; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05); } #opsSupportPanel .soc-ops-support-calendar-cell.is-selected { border-color: rgba(249, 115, 22, 0.58); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14); background: #ffffff; } #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month { opacity: 0.72; background: #ffffff; } #opsSupportPanel .soc-ops-support-calendar-cell-head > strong { font-size: 15px; line-height: 18px; font-weight: 800; color: var(--ops-support-ink); } #opsSupportPanel .soc-ops-support-calendar-cell-head > span { padding: 3px 7px; border-radius: 999px; border: 1px solid #d8e1eb; background: #ffffff; font-size: 10px; line-height: 14px; font-weight: 700; color: #64748b; } #opsSupportPanel .soc-ops-support-calendar-cell-body { gap: 6px; } #opsSupportPanel .soc-ops-support-calendar-line, #opsSupportPanel .soc-ops-support-calendar-more { border: 1px solid var(--ops-support-line-border, #d7e0ea); border-radius: 12px; background: var(--ops-support-line-bg, #ffffff); color: var(--ops-support-line-color, var(--ops-support-ink)); padding: 7px 8px; } #opsSupportPanel .soc-ops-support-calendar-line { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; box-shadow: inset 3px 0 0 var(--ops-support-line-accent, #94a3b8); } #opsSupportPanel .soc-ops-support-calendar-line:hover { border-color: rgba(249, 115, 22, 0.28); box-shadow: inset 3px 0 0 var(--ops-support-line-accent, #94a3b8), 0 6px 14px rgba(15, 23, 42, 0.06); } #opsSupportPanel .soc-ops-support-calendar-line.is-selected { border-color: rgba(249, 115, 22, 0.52); box-shadow: inset 3px 0 0 var(--ops-support-line-accent, #94a3b8), 0 0 0 2px rgba(249, 115, 22, 0.14); } #opsSupportPanel :is(.soc-ops-support-calendar-line, .soc-ops-support-list-row).ops-support-focus, #opsSupportPanel :is(.soc-ops-support-calendar-line, .soc-ops-support-list-row).ops-support-highlight-pulse { border-color: rgba(249, 115, 22, 0.56); box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.16), 0 10px 24px rgba(15, 23, 42, 0.08); } @keyframes socOpsSupportFocusPulse { 0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.24), 0 10px 24px rgba(15, 23, 42, 0.08); } 60% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0), 0 14px 28px rgba(15, 23, 42, 0.12); } 100% { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } } #opsSupportPanel :is(.soc-ops-support-calendar-line, .soc-ops-support-list-row).ops-support-highlight-pulse { animation: socOpsSupportFocusPulse 1.6s ease-out 1; } #opsSupportPanel .soc-ops-support-calendar-line-main { display: flex; align-items: flex-start; gap: 6px; min-width: 0; } #opsSupportPanel .soc-ops-support-calendar-line-copy { display: grid; gap: 4px; min-width: 0; } #opsSupportPanel .soc-ops-support-calendar-line-top-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } #opsSupportPanel .soc-ops-support-calendar-line-top-side { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } #opsSupportPanel .soc-ops-support-calendar-line-label { font-size: 12px; line-height: 1.28; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #opsSupportPanel .soc-ops-support-calendar-line-meta-row { display: flex; align-items: center; min-width: 0; width: 100%; } #opsSupportPanel .soc-ops-support-calendar-line-meta { font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: 0.01em; color: #64748b; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #opsSupportPanel .soc-ops-support-calendar-line-count { font-size: 10px; line-height: 12px; font-weight: 800; color: var(--ops-support-ink); white-space: nowrap; } #opsSupportPanel .soc-ops-support-calendar-line-flag { display: inline-flex; align-items: center; justify-content: center; min-height: 16px; padding: 0 5px; border-radius: 999px; background: rgba(220, 38, 38, 0.1); color: #b91c1c; font-size: 9px; line-height: 1; font-weight: 800; white-space: nowrap; } #opsSupportPanel .soc-ops-support-status-dot { width: 8px; height: 8px; flex: 0 0 8px; align-self: center; margin-top: 0; background: #64748b; } #opsSupportPanel .soc-ops-support-status-dot.state-approved { background: var(--ops-support-approved); } #opsSupportPanel .soc-ops-support-status-dot.state-pending { background: var(--ops-support-pending); } #opsSupportPanel .soc-ops-support-status-dot.state-unavailable, #opsSupportPanel .soc-ops-support-status-dot.state-rejected { background: var(--ops-support-danger); } #opsSupportPanel .soc-ops-support-status-dot.state-cancelled { background: var(--ops-support-cancelled); } #opsSupportPanel .cal-line.state-pending { --ops-support-line-accent: var(--ops-support-pending); --ops-support-line-border: rgba(217, 119, 6, 0.34); --ops-support-line-bg: #ffffff; --ops-support-line-color: #9a3412; } #opsSupportPanel .cal-line.state-approved { --ops-support-line-accent: var(--ops-support-approved); --ops-support-line-border: rgba(21, 128, 61, 0.3); --ops-support-line-bg: #ffffff; --ops-support-line-color: #166534; } #opsSupportPanel .cal-line.state-unavailable, #opsSupportPanel .cal-line.state-rejected { --ops-support-line-accent: var(--ops-support-danger); --ops-support-line-border: rgba(220, 38, 38, 0.34); --ops-support-line-bg: #ffffff; --ops-support-line-color: #b91c1c; } #opsSupportPanel .cal-line.state-cancelled { --ops-support-line-accent: var(--ops-support-cancelled); --ops-support-line-border: rgba(71, 85, 105, 0.28); --ops-support-line-bg: #ffffff; --ops-support-line-color: #475569; } #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned { --ops-support-line-accent: var(--ops-support-danger); --ops-support-line-border: rgba(220, 38, 38, 0.42); --ops-support-line-bg: #ffffff; --ops-support-line-color: #991b1b; } #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned:hover { box-shadow: inset 3px 0 0 var(--ops-support-danger), 0 8px 16px rgba(220, 38, 38, 0.12); } #opsSupportPanel .soc-ops-support-calendar-more { border-style: dashed; text-align: center; font-weight: 800; color: #334155; background: #ffffff; } #opsSupportPanel .soc-ops-support-calendar-more:hover, #opsSupportPanel .soc-ops-support-calendar-more:focus-visible { border-color: rgba(249, 115, 22, 0.32); color: var(--ops-support-primary); outline: none; } #opsSupportPanel .support-status-inline { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 999px; background: #ffffff; font-size: 12px; line-height: 1.2; font-weight: 700; } #opsSupportPanel .support-status-inline.state-approved { border-color: rgba(21, 128, 61, 0.24); color: #166534; } #opsSupportPanel .support-status-inline.state-pending { border-color: rgba(217, 119, 6, 0.26); color: #9a3412; } #opsSupportPanel .support-status-inline.state-unavailable, #opsSupportPanel .support-status-inline.state-rejected { border-color: rgba(220, 38, 38, 0.26); color: #b91c1c; } #opsSupportPanel .support-status-inline.state-cancelled { border-color: rgba(71, 85, 105, 0.22); color: #475569; } #opsSupportPanel .support-status-chip { min-height: 28px; padding: 0 10px; border-radius: 999px; border-color: rgba(148, 163, 184, 0.28); background: #ffffff; color: #334155; font-size: 12px; line-height: 1.2; font-weight: 700; } #opsSupportPanel .support-status-chip.state-pending { background: #ffffff; border-color: rgba(217, 119, 6, 0.28); color: #9a3412; } #opsSupportPanel .support-status-chip.state-approved { background: #ffffff; border-color: rgba(21, 128, 61, 0.26); color: #166534; } #opsSupportPanel .support-status-chip.state-unavailable, #opsSupportPanel .support-status-chip.state-rejected { background: #ffffff; border-color: rgba(220, 38, 38, 0.28); color: #b91c1c; } #opsSupportPanel .support-status-chip.state-cancelled { background: #ffffff; border-color: rgba(71, 85, 105, 0.24); color: #475569; } #opsSupportPanel .soc-ops-support-sheet { padding: 16px 18px; min-height: 380px; } #opsSupportPanel .soc-ops-support-sheet-head { padding-bottom: 12px; } #opsSupportPanel .soc-ops-support-sheet-head-copy > h3 { font-size: 18px; line-height: 24px; font-weight: 800; color: var(--ops-support-ink); } #opsSupportPanel .soc-ops-support-status-action { border-color: rgba(249, 115, 22, 0.24); background: rgba(249, 115, 22, 0.08); color: var(--ops-support-primary); } #opsSupportPanel .soc-ops-support-status-action:hover, #opsSupportPanel .soc-ops-support-status-action:focus-visible { border-color: rgba(249, 115, 22, 0.38); background: rgba(249, 115, 22, 0.14); color: var(--ops-support-primary-strong); } #opsSupportPanel .soc-ops-support-open-ticket-btn { border-color: rgba(15, 23, 42, 0.16); background: #ffffff; color: #0f172a; } #opsSupportPanel .soc-ops-support-open-ticket-btn:hover, #opsSupportPanel .soc-ops-support-open-ticket-btn:focus-visible { border-color: rgba(249, 115, 22, 0.28); color: var(--ops-support-primary); background: var(--ops-support-primary-surface); } #opsSupportPanel .soc-ops-support-detail-summary-metric { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 96px; gap: 8px; padding: 14px; border: 2px solid #cbd5e1; border-radius: 16px; background: #ffffff; box-shadow: none; } #opsSupportPanel .soc-ops-support-detail-summary-metric.is-requested { border-color: #f97316; } #opsSupportPanel .soc-ops-support-detail-summary-metric.is-self-staff { border-color: #94a3b8; } #opsSupportPanel .soc-ops-support-detail-summary-label { font-size: 11px; line-height: 14px; letter-spacing: 0.04em; text-transform: uppercase; } #opsSupportPanel .soc-ops-support-detail-summary-metric strong { font-size: 18px; line-height: 22px; font-weight: 800; display: inline-flex; align-items: center; min-height: 22px; } #opsSupportPanel .soc-ops-support-detail-summary-purpose { border: 2px solid #cbd5e1; border-radius: 16px; background: #ffffff; padding: 14px 15px; box-shadow: none; } #opsSupportPanel .soc-ops-support-summary-empty { min-height: 164px; gap: 12px; border-style: solid; border-color: #dbe5ef; border-radius: 16px; background: #ffffff; padding: 18px; } #opsSupportPanel .soc-ops-support-summary-empty.is-inline { min-height: 112px; background: #ffffff; border-color: #d8e1eb; } #opsSupportPanel .soc-ops-support-summary-empty-dashboard { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; justify-items: stretch; min-height: 100%; } #opsSupportPanel .soc-ops-support-empty-hero { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #dbe5ef; } #opsSupportPanel .soc-ops-support-empty-kicker { font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ops-support-primary); } #opsSupportPanel .soc-ops-support-empty-hero > strong { font-size: 26px; line-height: 30px; font-weight: 800; color: var(--ops-support-ink); } #opsSupportPanel .soc-ops-support-empty-hero > .help { margin: 0; color: var(--ops-support-subtle); } #opsSupportPanel .soc-ops-support-empty-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; width: 100%; min-height: 308px; align-self: stretch; } #opsSupportPanel .soc-ops-support-empty-metric { display: grid; align-content: space-between; min-height: 0; gap: 8px; padding: 14px; width: 100%; border: 4px solid #cbd5e1; border-radius: 16px; background: #ffffff; box-shadow: none; } #opsSupportPanel .soc-ops-support-empty-metric.is-pending { border-color: #d97706; } #opsSupportPanel .soc-ops-support-empty-metric.is-approved { border-color: #16a34a; } #opsSupportPanel .soc-ops-support-empty-metric.is-today { border-color: #f97316; } #opsSupportPanel .soc-ops-support-empty-metric.is-alert { border-color: #dc2626; } #opsSupportPanel .soc-ops-support-empty-metric-label { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ops-support-subtle); } #opsSupportPanel .soc-ops-support-empty-metric strong { font-size: 18px; line-height: 22px; font-weight: 800; color: var(--ops-support-ink); } #opsSupportPanel .soc-ops-support-day-head { background: #ffffff; } #opsSupportPanel .soc-ops-support-day-table th, #opsSupportPanel .soc-ops-support-summary-day-table th, #opsSupportPanel .soc-ops-support-confirmed-roster-table th { background: #f8fafc; color: #52637a; } #opsSupportPanel .soc-ops-support-day-table th:nth-child(3), #opsSupportPanel .soc-ops-support-day-table td:nth-child(3), #opsSupportPanel .soc-ops-support-summary-day-table th:nth-child(2), #opsSupportPanel .soc-ops-support-summary-day-table td:nth-child(2) { white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; line-height: 1.32; } #opsSupportPanel .soc-ops-support-day-table th:nth-child(4), #opsSupportPanel .soc-ops-support-day-table td:nth-child(4) { width: 114px; min-width: 114px; white-space: nowrap; overflow: visible; text-overflow: clip; } #opsSupportPanel .soc-ops-support-day-summary > div, #opsSupportPanel .soc-ops-support-summary-hero, #opsSupportPanel .soc-ops-support-detail-timeline-body, #opsSupportPanel .soc-ops-support-confirmed-block, #opsSupportPanel .export-section { border-color: #d8e1eb; background: #ffffff; box-shadow: none; } #opsSupportPanel .soc-ops-support-confirmed-block.is-disabled, #opsSupportPanel .soc-ops-support-confirmed-disabled { border-color: #d8e1eb; background: #ffffff; } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-created .soc-ops-support-detail-timeline-dot { background: var(--ops-support-primary-strong); } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status .soc-ops-support-detail-timeline-dot { background: #0f172a; } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-worker .soc-ops-support-detail-timeline-dot { background: var(--ops-support-approved); } #opsSupportPanel .soc-ops-support-detail-timeline-item.is-note .soc-ops-support-detail-timeline-dot { background: #64748b; } #opsSupportPanel .worker-row.is-assigned, #opsSupportPanel .worker-row.is-over-assigned, #opsSupportPanel .worker-row.is-assigned input[type="text"][readonly], #opsSupportPanel .worker-row.is-over-assigned input[type="text"][readonly] { background: #ffffff; } #opsSupportPanel .worker-row.is-assigned:not(.is-over-assigned) { border-color: color-mix(in srgb, var(--soc-success, #16a34a) 52%, #cbd5e1); background: color-mix(in srgb, var(--soc-success, #16a34a) 12%, #ffffff); } #opsSupportPanel .worker-row.is-assigned:not(.is-over-assigned) input[type="text"][readonly] { border-color: color-mix(in srgb, var(--soc-success, #16a34a) 30%, #d8e1eb); background: color-mix(in srgb, var(--soc-success, #16a34a) 10%, #ffffff); color: color-mix(in srgb, var(--soc-success, #166534) 72%, var(--ui-text-primary, var(--soc-text))); } [data-theme="dark"] #opsSupportPanel { --ops-support-ink: var(--ui-text-primary, var(--soc-text)); --ops-support-subtle: var(--ui-text-secondary, var(--soc-text-sub)); --ops-support-border: var(--ui-border-subtle, var(--soc-border)); --ops-support-border-strong: var(--ui-border-strong, var(--soc-border-strong)); --ops-support-primary: var(--soc-primary); --ops-support-primary-strong: #ff9d57; --ops-support-primary-soft: color-mix(in srgb, var(--soc-primary) 18%, transparent); --ops-support-primary-surface: color-mix(in srgb, var(--soc-primary) 10%, var(--soc-card-bg)); --ops-support-pending: #ff9d57; --ops-support-pending-soft: color-mix(in srgb, #ff9d57 14%, var(--soc-card-bg)); --ops-support-approved: var(--soc-success); --ops-support-approved-soft: color-mix(in srgb, var(--soc-success) 14%, var(--soc-card-bg)); --ops-support-danger: var(--soc-danger); --ops-support-danger-soft: color-mix(in srgb, var(--soc-danger) 14%, var(--soc-card-bg)); --ops-support-cancelled: #94a3b8; --ops-support-cancelled-soft: color-mix(in srgb, #94a3b8 14%, var(--soc-card-bg)); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-toolbar, [data-theme="dark"] #opsSupportPanel .soc-ops-support-main, [data-theme="dark"] #opsSupportPanel .soc-ops-support-sheet, [data-theme="dark"] #opsSupportPanel .soc-ops-support-toolbar-stat, [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell, [data-theme="dark"] #opsSupportPanel .soc-ops-support-detail-summary-metric, [data-theme="dark"] #opsSupportPanel .soc-ops-support-detail-summary-purpose, [data-theme="dark"] #opsSupportPanel .soc-ops-support-summary-empty, [data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-metric, [data-theme="dark"] #opsSupportPanel .soc-ops-support-day-summary > div, [data-theme="dark"] #opsSupportPanel .soc-ops-support-summary-hero, [data-theme="dark"] #opsSupportPanel .soc-ops-support-detail-timeline-body, [data-theme="dark"] #opsSupportPanel .soc-ops-support-confirmed-block, [data-theme="dark"] #opsSupportPanel .soc-ops-support-confirmed-disabled, [data-theme="dark"] #opsSupportPanel .export-section { border-color: var(--ops-support-border); background: var(--soc-card-bg); box-shadow: var(--soc-shadow-soft); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-hero { border-bottom-color: var(--ops-support-border); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-toolbar-meta, [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-line-meta, [data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-hero > .help, [data-theme="dark"] #opsSupportPanel .soc-ops-support-day-head > span, [data-theme="dark"] #opsSupportPanel .soc-ops-support-day-table th, [data-theme="dark"] #opsSupportPanel .soc-ops-support-summary-day-table th, [data-theme="dark"] #opsSupportPanel .soc-ops-support-confirmed-roster-table th { color: var(--ops-support-subtle); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-compact-control, [data-theme="dark"] #opsSupportPanel .ops-support-month-nav .month-label, [data-theme="dark"] #opsSupportPanel .ops-support-month-nav .month-arrow, [data-theme="dark"] #opsSupportPanel .soc-ops-support-view-toggle, [data-theme="dark"] #opsSupportPanel .soc-ops-support-open-ticket-btn, [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell-head > span, [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-more, [data-theme="dark"] #opsSupportPanel .support-status-inline, [data-theme="dark"] #opsSupportPanel .support-status-chip { border-color: var(--ops-support-border); background: var(--ui-bg-surface-2, var(--soc-soft-bg)); color: var(--ops-support-ink); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-toolbar { background: var(--soc-panel-bg); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-main, [data-theme="dark"] #opsSupportPanel .soc-ops-support-sheet { background: var(--soc-panel-bg); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-weekdays > span, [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell-head > span, [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-more, [data-theme="dark"] #opsSupportPanel .soc-ops-support-day-head, [data-theme="dark"] #opsSupportPanel .soc-ops-support-day-table th, [data-theme="dark"] #opsSupportPanel .soc-ops-support-summary-day-table th, [data-theme="dark"] #opsSupportPanel .soc-ops-support-confirmed-roster-table th { background: var(--ui-bg-surface-muted, var(--soc-soft-bg)); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell { border-color: var(--ops-support-border); background: var(--soc-card-bg); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell:hover { border-color: color-mix(in srgb, var(--soc-primary) 34%, var(--ops-support-border)); box-shadow: 0 10px 22px rgba(2, 6, 23, 0.3); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell.is-selected { border-color: color-mix(in srgb, var(--soc-primary) 58%, var(--ops-support-border)); background: color-mix(in srgb, var(--soc-primary) 9%, var(--soc-card-bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--soc-primary) 18%, transparent); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month { background: color-mix(in srgb, var(--ui-bg-surface-2, var(--soc-soft-bg)) 88%, var(--soc-card-bg)); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-line, [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-more { border-color: var(--ops-support-line-border, var(--ops-support-border)); background: var(--ops-support-line-bg, var(--ui-bg-surface-2, var(--soc-soft-bg))); color: var(--ops-support-line-color, var(--ops-support-ink)); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-more { color: var(--ops-support-subtle); } [data-theme="dark"] #opsSupportPanel .cal-line.state-pending { --ops-support-line-accent: var(--ops-support-pending); --ops-support-line-border: color-mix(in srgb, var(--ops-support-pending) 42%, var(--ops-support-border)); --ops-support-line-bg: color-mix(in srgb, var(--ops-support-pending) 12%, var(--soc-card-bg)); --ops-support-line-color: #ffd6bd; } [data-theme="dark"] #opsSupportPanel .cal-line.state-approved { --ops-support-line-accent: var(--ops-support-approved); --ops-support-line-border: color-mix(in srgb, var(--ops-support-approved) 42%, var(--ops-support-border)); --ops-support-line-bg: color-mix(in srgb, var(--ops-support-approved) 12%, var(--soc-card-bg)); --ops-support-line-color: #d7ffe5; } [data-theme="dark"] #opsSupportPanel .cal-line.state-unavailable, [data-theme="dark"] #opsSupportPanel .cal-line.state-rejected { --ops-support-line-accent: var(--ops-support-danger); --ops-support-line-border: color-mix(in srgb, var(--ops-support-danger) 44%, var(--ops-support-border)); --ops-support-line-bg: color-mix(in srgb, var(--ops-support-danger) 12%, var(--soc-card-bg)); --ops-support-line-color: #ffd0d0; } [data-theme="dark"] #opsSupportPanel .cal-line.state-cancelled { --ops-support-line-accent: var(--ops-support-cancelled); --ops-support-line-border: color-mix(in srgb, var(--ops-support-cancelled) 38%, var(--ops-support-border)); --ops-support-line-bg: color-mix(in srgb, var(--ops-support-cancelled) 12%, var(--soc-card-bg)); --ops-support-line-color: #d5dfef; } [data-theme="dark"] #opsSupportPanel .support-status-inline.state-pending, [data-theme="dark"] #opsSupportPanel .support-status-chip.state-pending { background: color-mix(in srgb, var(--ops-support-pending) 11%, var(--ui-bg-surface-2, var(--soc-soft-bg))); border-color: color-mix(in srgb, var(--ops-support-pending) 42%, var(--ops-support-border)); color: #ffd6bd; } [data-theme="dark"] #opsSupportPanel .support-status-inline.state-approved, [data-theme="dark"] #opsSupportPanel .support-status-chip.state-approved { background: color-mix(in srgb, var(--ops-support-approved) 11%, var(--ui-bg-surface-2, var(--soc-soft-bg))); border-color: color-mix(in srgb, var(--ops-support-approved) 42%, var(--ops-support-border)); color: #d7ffe5; } [data-theme="dark"] #opsSupportPanel .support-status-inline.state-unavailable, [data-theme="dark"] #opsSupportPanel .support-status-inline.state-rejected, [data-theme="dark"] #opsSupportPanel .support-status-chip.state-unavailable, [data-theme="dark"] #opsSupportPanel .support-status-chip.state-rejected { background: color-mix(in srgb, var(--ops-support-danger) 11%, var(--ui-bg-surface-2, var(--soc-soft-bg))); border-color: color-mix(in srgb, var(--ops-support-danger) 42%, var(--ops-support-border)); color: #ffd0d0; } [data-theme="dark"] #opsSupportPanel .support-status-inline.state-cancelled, [data-theme="dark"] #opsSupportPanel .support-status-chip.state-cancelled { background: color-mix(in srgb, var(--ops-support-cancelled) 10%, var(--ui-bg-surface-2, var(--soc-soft-bg))); border-color: color-mix(in srgb, var(--ops-support-cancelled) 38%, var(--ops-support-border)); color: #d5dfef; } [data-theme="dark"] #opsSupportPanel .soc-ops-support-status-action { border-color: color-mix(in srgb, var(--soc-primary) 30%, var(--ops-support-border)); background: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface-2, var(--soc-soft-bg))); color: #ffd4b8; } [data-theme="dark"] #opsSupportPanel .soc-ops-support-status-action:hover, [data-theme="dark"] #opsSupportPanel .soc-ops-support-status-action:focus-visible, [data-theme="dark"] #opsSupportPanel .soc-ops-support-open-ticket-btn:hover, [data-theme="dark"] #opsSupportPanel .soc-ops-support-open-ticket-btn:focus-visible, [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-more:hover, [data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-more:focus-visible { background: color-mix(in srgb, var(--soc-primary) 14%, var(--ui-bg-surface-2, var(--soc-soft-bg))); border-color: color-mix(in srgb, var(--soc-primary) 38%, var(--ops-support-border)); color: #ffe5d3; } [data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-metric.is-pending { border-color: color-mix(in srgb, var(--ops-support-pending) 54%, var(--ops-support-border)); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-metric.is-approved { border-color: color-mix(in srgb, var(--ops-support-approved) 54%, var(--ops-support-border)); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-metric.is-today { border-color: color-mix(in srgb, var(--soc-primary) 54%, var(--ops-support-border)); } [data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-metric.is-alert { border-color: color-mix(in srgb, var(--ops-support-danger) 54%, var(--ops-support-border)); } [data-theme="dark"] #opsSupportPanel .worker-row.is-assigned, [data-theme="dark"] #opsSupportPanel .worker-row.is-assigned input[type="text"][readonly] { background: color-mix(in srgb, var(--soc-success) 10%, var(--soc-card-bg)); } [data-theme="dark"] #opsSupportPanel .worker-row.is-assigned:not(.is-over-assigned) { border-color: color-mix(in srgb, var(--soc-success) 42%, var(--ops-support-border)); background: color-mix(in srgb, var(--soc-success) 12%, var(--soc-card-bg)); } [data-theme="dark"] #opsSupportPanel .worker-row.is-assigned:not(.is-over-assigned) input[type="text"][readonly] { border-color: color-mix(in srgb, var(--soc-success) 34%, var(--ops-support-border)); background: color-mix(in srgb, var(--soc-success) 10%, var(--ui-bg-surface-2, var(--soc-soft-bg))); color: #d7ffe5; } [data-theme="dark"] #opsSupportPanel .soc-ops-support-day-row:hover { background: rgba(255, 255, 255, 0.03); } @media (max-width: 1279px) { #opsSupportPanel .soc-ops-support-toolbar { grid-template-columns: minmax(0, 1fr); } #opsSupportPanel .soc-ops-support-toolbar-right { grid-template-columns: minmax(0, 1fr); } #opsSupportPanel .soc-ops-support-toolbar-actions { justify-content: flex-start; flex-wrap: wrap; } } @media (max-width: 1023px) { #opsSupportPanel .soc-ops-support-filters, #opsSupportPanel .soc-ops-support-empty-metrics { grid-template-columns: minmax(0, 1fr); } #opsSupportPanel .soc-ops-support-support-strip { grid-template-columns: minmax(0, 1fr); align-items: start; } #opsSupportPanel .soc-ops-support-toolbar-meta { text-align: left; } } @media (min-width: 1024px) { body.soc-desktop-shell #opsSupportPanel .soc-ops-support-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 2.28fr) minmax(376px, 408px); } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet { max-width: 408px; min-height: 420px; max-height: calc(100dvh - 118px); padding: 16px 18px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-main { padding: 16px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-copy > h3 { white-space: nowrap; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-actions { flex-wrap: nowrap; } } @media (min-width: 1024px) { body.soc-desktop-shell #peopleView :is(.soc-employee-directory-toolbar, .soc-monitoring-toolbar) :is(input[type="search"], .ds-input, select, .ds-select) { min-height: 40px !important; height: 40px !important; padding: 0 14px !important; line-height: 20px !important; font-size: 14px !important; box-sizing: border-box !important; } body.soc-desktop-shell #peopleView :is(.soc-employee-directory-toolbar, .soc-monitoring-toolbar) :is(select, .ds-select) { padding-right: 38px !important; } } /* Sentrix HR topbar parity */ .topbar-right { gap: 8px; } .session-info.hidden, .topbar-profile-btn.hidden, .topbar-theme-toggle.hidden, .topbar-language-wrap.hidden, .topbar-language-menu.hidden { display: none !important; } #topbarNotificationPermissionBtn, #openPasswordBtn { display: none !important; } .session-info { color: var(--ui-text-secondary, var(--soc-muted)); font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(40vw, 340px); min-width: 0; } .topbar-profile-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; min-width: 42px; min-height: 42px; height: 42px; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--ui-text-secondary, var(--soc-text-sub)); cursor: pointer; flex: 0 0 auto; } .topbar-profile-btn:hover, .topbar-profile-btn:focus-visible { color: var(--ui-text-primary, var(--soc-text)); background: color-mix(in srgb, var(--ui-text-primary, var(--soc-text)) 8%, transparent); outline: none; } .topbar-language-btn { gap: 3px; color: var(--ui-text-secondary, var(--soc-text-sub)); } .topbar-language-wrap { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; } .topbar-language-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; } .topbar-language-label { min-width: 17px; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: 0; } .topbar-language-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; min-width: 138px; padding: 6px; border: 1px solid var(--soc-border); border-radius: 8px; background: var(--soc-card-bg); box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16); } .topbar-language-menu button { width: 100%; min-height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--ui-text-primary, var(--soc-text)); font: inherit; font-size: 13px; font-weight: 750; letter-spacing: 0; text-align: left; padding: 8px 10px; cursor: pointer; } .topbar-language-menu button:hover, .topbar-language-menu button:focus-visible, .topbar-language-menu button.is-active { background: color-mix(in srgb, var(--soc-accent, #ff6b00) 12%, transparent); color: var(--ui-text-primary, var(--soc-text)); outline: none; } .topbar-profile-art { width: 19px; height: 19px; display: block; } .topbar-theme-toggle { position: relative; display: inline-flex; width: 72px; min-width: 72px; height: 36px; padding: 0; border: 0; background: transparent; box-shadow: none; flex: 0 0 auto; cursor: pointer; } .topbar-theme-toggle:focus-visible { outline: 2px solid rgba(249, 115, 22, 0.45); outline-offset: 3px; border-radius: 999px; } .topbar-theme-track { position: relative; display: block; width: 100%; height: 100%; border-radius: 999px; overflow: hidden; background: #f97316; border: 1px solid rgba(249, 115, 22, 0.18); transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .topbar-theme-thumb { position: absolute; top: 50%; left: 4px; width: 28px; height: 28px; border-radius: 999px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18); transform: translateY(-50%); transition: transform 180ms ease; } .topbar-theme-icon { position: absolute; top: 50%; z-index: 1; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; transform: translateY(-50%); transition: color 160ms ease, opacity 160ms ease; } .topbar-theme-icon svg { width: 16px; height: 16px; display: block; } .topbar-theme-icon-sun { left: 11px; } .topbar-theme-icon-moon { right: 11px; } .topbar-theme-toggle[data-theme="light"] .topbar-theme-track { background: #f97316; border-color: rgba(249, 115, 22, 0.18); } .topbar-theme-toggle[data-theme="light"] .topbar-theme-thumb { transform: translate(0, -50%); } .topbar-theme-toggle[data-theme="light"] .topbar-theme-icon-sun { color: #f97316; } .topbar-theme-toggle[data-theme="light"] .topbar-theme-icon-moon { color: rgba(255, 255, 255, 0.72); } .topbar-theme-toggle[data-theme="dark"] .topbar-theme-track { background: #0f172a; border-color: rgba(148, 163, 184, 0.18); } .topbar-theme-toggle[data-theme="dark"] .topbar-theme-thumb { transform: translate(36px, -50%); } .topbar-theme-toggle[data-theme="dark"] .topbar-theme-icon-sun { color: rgba(255, 255, 255, 0.64); } .topbar-theme-toggle[data-theme="dark"] .topbar-theme-icon-moon { color: #0f172a; } #topbarNotificationsBtn.topbar-btn:not(.hidden) { width: 42px; min-width: 42px; min-height: 42px; height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ui-text-secondary, var(--soc-text-sub)); } #topbarNotificationsBtn.topbar-btn:not(.hidden):hover, #topbarNotificationsBtn.topbar-btn:not(.hidden):focus-visible { color: var(--ui-text-primary, var(--soc-text)); outline: none; } @media (max-width: 900px) { .session-info, .topbar-language-wrap, .topbar-profile-btn, .topbar-theme-toggle { display: none !important; } } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-attachments .attachment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-attachments .attachment-item { border: 1px solid var(--soc-border); border-radius: 8px; background: var(--soc-card-bg); } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-attachments .attachment-thumb { aspect-ratio: 4 / 3; object-fit: cover; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-attachments .attachment-actions button { min-height: 32px; border-radius: 8px; } /* support roster workspace cleanup (2026-03-27) */ body.soc-desktop-shell #opsSupportPanel .soc-ops-support-workspace { display: grid; gap: 6px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-top { align-items: flex-end; justify-content: space-between; gap: 10px 16px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-top .soc-page-header-main { flex: 1 1 300px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-controls { display: grid; gap: 6px; width: auto; min-width: 0; justify-items: end; align-content: end; flex: 0 1 auto; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row { padding: 0 0 6px; border: 0; border-bottom: 1px solid #e2e8f0; border-radius: 0; background: transparent; box-shadow: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 16px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-month-row { display: flex; align-items: center; justify-content: flex-start; min-width: 0; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-action-row { display: flex; align-items: center; gap: 8px 10px; min-width: 0; justify-content: flex-end; flex-wrap: wrap; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-action-row > * { flex: 0 0 auto; } body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav { display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding: 0 6px; border: 1px solid #dbe5ef; border-radius: 999px; background: #ffffff; box-shadow: none; } body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label, body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0; border: 0; background: transparent; box-shadow: none; color: #0f172a; } body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label { padding: 0 8px; font-size: 15px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; } body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow { width: 22px; border-radius: 999px; color: #64748b; font-size: 15px; font-weight: 700; } body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow:hover, body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow:focus-visible, body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label:hover, body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label:focus-visible { color: #0f172a; background: rgba(148, 163, 184, 0.12); outline: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'], body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'].chip { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; height: 34px; padding: 0 14px; border: 1px solid #dbe5ef; border-radius: 999px; background: #ffffff; color: #52637a; font-size: 13px; font-weight: 700; box-shadow: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'].is-active, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'].chip.is-active { border-color: var(--ops-support-primary); background: var(--ops-support-primary); color: #ffffff; box-shadow: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions { display: inline-flex; align-items: center; gap: 6px; margin-top: 0; flex-wrap: wrap; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions .ds-btn, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn { min-height: 34px; height: 34px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 700; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn { border-color: #dbe5ef; background: #ffffff; color: #475569; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:hover, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:focus-visible { border-color: rgba(249, 115, 22, 0.28); background: rgba(249, 115, 22, 0.08); color: var(--ops-support-primary-strong); } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip { display: block; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat { --ops-support-summary-dot: #94a3b8; display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat::before { display: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat-label { display: inline-flex; align-items: center; gap: 6px; min-height: 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: -0.01em; color: #64748b; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat-label::before { content: ""; display: inline-flex; width: 6px; height: 6px; border-radius: 999px; flex: 0 0 6px; background: var(--ops-support-summary-dot); } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat > strong { margin: 0; font-size: 14px; line-height: 16px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-request { --ops-support-summary-dot: transparent; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-request .soc-ops-support-toolbar-stat-label::before { display: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-people { --ops-support-summary-dot: #f59e0b; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-pending { --ops-support-summary-dot: #d97706; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-approved { --ops-support-summary-dot: #16a34a; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-rejected { --ops-support-summary-dot: #dc2626; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-cancelled { --ops-support-summary-dot: #64748b; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px 10px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-top .soc-ops-support-filter-row { padding: 0; border: 0; background: transparent; box-shadow: none; justify-content: flex-end; align-items: flex-end; gap: 8px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters { display: grid; grid-template-columns: repeat(2, minmax(160px, 208px)); gap: 8px; width: auto; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-top .soc-ops-support-filters { gap: 8px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-field { display: grid; grid-template-rows: auto 34px; gap: 2px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-label { transform: none; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; color: #64748b; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control { height: 36px; min-width: 0; border-color: #d1d9e2; background: #ffffff; color: #0f172a; font-size: 13px; font-weight: 600; box-shadow: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-tools { display: inline-flex; align-items: center; gap: 8px; margin-left: 0; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-top .soc-ops-support-filter-tools { align-self: end; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more { position: relative; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn { list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 74px; border: 1px solid #dbe5ef; background: #ffffff; color: #475569; cursor: pointer; user-select: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn::-webkit-details-marker { display: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn::after { content: "▾"; font-size: 11px; line-height: 1; color: currentColor; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more[open] .soc-ops-support-filter-more-btn { border-color: rgba(249, 115, 22, 0.28); background: rgba(249, 115, 22, 0.08); color: var(--ops-support-primary-strong); } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 8; min-width: 188px; padding: 12px; border: 1px solid #dbe5ef; border-radius: 12px; background: #ffffff; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08); } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-controls .soc-ops-support-active-filters { justify-content: flex-end; margin-top: 0; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid rgba(249, 115, 22, 0.2); border-radius: 999px; background: rgba(249, 115, 22, 0.08); color: #9a3412; font-size: 12px; line-height: 1; font-weight: 700; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge:hover, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge:focus-visible { border-color: rgba(249, 115, 22, 0.3); background: rgba(249, 115, 22, 0.12); outline: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-layout { gap: 10px; margin-top: 0; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-main { gap: 8px; padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays { gap: 6px; padding: 0 2px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-grid { gap: 6px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-cell { min-height: 132px; border-radius: 12px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet { border-color: #dbe5ef; border-radius: 16px; background: #ffffff; box-shadow: none; } [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar, [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip, [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row { border-bottom-color: var(--ops-support-border); } [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav, [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle, [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control, [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn, [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn, [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet { border-color: var(--ops-support-border); background: var(--soc-card-bg); } [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label, [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow, [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat > strong, [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn { color: #f8fafc; } [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat-label, [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-label { color: #cbd5e1; } [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-panel { border-color: var(--ops-support-border); background: var(--soc-card-bg); box-shadow: 0 18px 34px rgba(2, 6, 23, 0.34); } [data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge { border-color: rgba(249, 115, 22, 0.28); background: rgba(249, 115, 22, 0.16); color: #ffd7be; } /* ===== Shople reference alignment (2026-03-31) ===== */ body.soc-desktop-shell main, body.soc-desktop-adaptive main { background: transparent; } body.soc-desktop-shell #dashboardPanel, body.soc-desktop-shell #analyticsView, body.soc-desktop-shell #homeView, body.soc-desktop-shell #weeklyView, body.soc-desktop-shell #peopleView, body.soc-desktop-shell #alertsView, body.soc-desktop-shell #ticketsView, body.soc-desktop-shell #reportsHubView, body.soc-desktop-shell #accountPanel, body.soc-desktop-shell #employeeScorePanel, body.soc-desktop-shell #opsSupportPanel, body.soc-desktop-shell #announcementPanel, body.soc-desktop-shell #notificationPanel, body.soc-desktop-shell #notificationSettingsPanel, body.soc-desktop-shell #excelPanel, body.soc-desktop-shell #googleSheetsPanel, body.soc-desktop-shell #auditPanel, body.soc-desktop-shell #myProfileView { gap: 16px; background: transparent; } body.soc-desktop-shell .soc-page-header, body.soc-desktop-shell .soc-view-page-header, body.soc-desktop-shell .soc-hub-header, body.soc-desktop-shell .admin-sub-topbar, body.soc-desktop-shell .workspace-head, body.soc-desktop-shell .soc-settings-page-header, body.soc-desktop-shell .soc-report-headerbar, body.soc-desktop-shell .soc-settings-shell-bar, body.soc-desktop-shell .soc-profile-detail-head { padding: 0 !important; margin: 0 0 4px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell .soc-page-header-main h2, body.soc-desktop-shell .soc-page-header-main h3, body.soc-desktop-shell .soc-hub-title-row h2, body.soc-desktop-shell .workspace-head-main h2, body.soc-desktop-shell .soc-report-title-wrap h3, body.soc-desktop-shell .soc-people-admin-title-block h3 { letter-spacing: -0.02em; } body.soc-desktop-shell #dashboardWorkspaceIntroText, body.soc-desktop-shell #dashboardWorkspaceMetaText, body.soc-desktop-shell #hubSummaryText, body.soc-desktop-shell #noticesViewSubtitle, body.soc-desktop-shell #notificationMeta, body.soc-desktop-shell #alertsView > .soc-ops-workspace-helper, body.soc-desktop-shell #ticketsView .soc-ops-workspace-helper, body.soc-desktop-shell #peopleView .soc-people-admin-title-block .meta, body.soc-desktop-shell #peopleView .soc-people-pane-summary-head .meta, body.soc-desktop-shell #peopleView .soc-workspace-card-head .meta, body.soc-desktop-shell #peopleDirectoryToolbarNote, body.soc-desktop-shell #employeeScorePanel .soc-workspace-card-head .meta, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card .meta, body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy .meta, body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head .meta, body.soc-desktop-shell #analyticsComparisonContext, body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary-copy, body.soc-desktop-shell #weeklyWorkflowDescription, body.soc-desktop-shell #weeklyBlockedReasonText, body.soc-desktop-shell #weeklyHeaderMetaHint, body.soc-desktop-shell #weeklyReviewSummaryText, body.soc-desktop-shell #accountPanel .soc-workspace-card-head .meta, body.soc-desktop-shell #notificationSettingsPanel .soc-notification-check-copy .meta, body.soc-desktop-shell #myProfileView .soc-profile-account-section-head .meta, body.soc-desktop-shell #myProfileView .soc-profile-security-copy p { display: none !important; } body.soc-desktop-shell .soc-dashboard-workspace-tabs, body.soc-desktop-shell .chip-row, body.soc-desktop-shell .soc-settings-shell-tabs, body.soc-desktop-shell .soc-notification-center-tabs, body.soc-desktop-shell .workspace-tabs, body.soc-desktop-shell .soc-people-segment-rail, body.soc-desktop-shell .soc-ops-support-view-toggle { display: flex; flex-wrap: wrap; gap: 8px; } body.soc-desktop-shell .soc-dashboard-workspace-tab, body.soc-desktop-shell .chip, body.soc-desktop-shell .soc-settings-shell-tab, body.soc-desktop-shell .soc-notification-center-tab, body.soc-desktop-shell .workspace-tabs > button, body.soc-desktop-shell .soc-people-segment-btn, body.soc-desktop-shell .soc-ops-support-view-toggle .chip { min-height: var(--soc-tab-height); height: var(--soc-tab-height); padding: 0 14px; border: 1px solid var(--soc-border); border-radius: 10px; background: var(--ui-bg-surface); box-shadow: none; } body.soc-desktop-shell .soc-dashboard-workspace-tab.is-active, body.soc-desktop-shell .chip.is-active, body.soc-desktop-shell .soc-settings-shell-tab.is-active, body.soc-desktop-shell .soc-notification-center-tab.is-active, body.soc-desktop-shell .soc-people-segment-btn.is-active { border-color: rgba(255, 106, 19, 0.24); background: var(--soc-primary-soft-bg); color: var(--soc-primary-deep); } body.soc-desktop-shell .soc-realtime-datebar, body.soc-desktop-shell .soc-alerts-filter-compact-row, body.soc-desktop-shell .soc-ticket-datebar, body.soc-desktop-shell .soc-analytics-v2-toolbar, body.soc-desktop-shell .soc-hub-filter-panel, body.soc-desktop-shell .soc-people-workspace-toolbar, body.soc-desktop-shell .soc-employee-score-filter-bar, body.soc-desktop-shell .soc-notification-center-toolbar, body.soc-desktop-shell .workspace-tabbar-row, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar, body.soc-desktop-shell .soc-settings-savebar { border: 1px solid var(--soc-border) !important; border-radius: 12px !important; background: var(--ui-bg-surface) !important; box-shadow: none !important; } body.soc-desktop-shell .soc-analytics-v2-toolbar, body.soc-desktop-shell .soc-people-workspace-toolbar, body.soc-desktop-shell .soc-employee-score-filter-bar, body.soc-desktop-shell .soc-notification-center-toolbar, body.soc-desktop-shell .workspace-tabbar-row, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row { padding: 12px 14px; } body.soc-desktop-shell #dashboardPanel .soc-block, body.soc-desktop-shell #analyticsView .soc-analytics-v2-card, body.soc-desktop-shell #reportsHubView .panel, body.soc-desktop-shell #peopleView .panel, body.soc-desktop-shell #accountPanel .soc-manage-section-card, body.soc-desktop-shell #employeeScorePanel .soc-hub-section-card, body.soc-desktop-shell #weeklyView .soc-weekly-control-card, body.soc-desktop-shell #weeklyView .soc-weekly-review-card, body.soc-desktop-shell #weeklyView .soc-weekly-section-card, body.soc-desktop-shell #notificationSettingsPanel .soc-system-section-card, body.soc-desktop-shell #auditPanel .soc-audit-results, body.soc-desktop-shell #auditPanel #auditDetailPanel, body.soc-desktop-shell #notificationPanel .soc-notification-center-shell, body.soc-desktop-shell #announcementPanel .notices-panel, body.soc-desktop-shell #myProfileView .soc-profile-account-strip, body.soc-desktop-shell #myProfileView .soc-profile-score, body.soc-desktop-shell #myProfileView .soc-profile-record-section, body.soc-desktop-shell #myProfileView .soc-profile-account-card, body.soc-desktop-shell #myProfileView .soc-profile-account-form, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-main { border: 1px solid var(--soc-border) !important; border-radius: 12px !important; background: var(--ui-bg-surface) !important; box-shadow: none !important; } body.soc-desktop-shell .soc-summary-card, body.soc-desktop-shell .soc-kpi-card, body.soc-desktop-shell .soc-employee-score-summary-card, body.soc-desktop-shell .soc-ops-support-toolbar-stat, body.soc-desktop-shell .soc-analytics-v2-kpi-tile, body.soc-desktop-shell .soc-analytics-v2-health-panel, body.soc-desktop-shell .soc-profile-score-summary-item, body.soc-desktop-shell .soc-people-kpi-strip > * { border: 1px solid var(--soc-border) !important; border-radius: 12px !important; background: var(--ui-bg-surface) !important; background-image: none !important; box-shadow: none !important; } body.soc-desktop-shell #homeView { display: grid; gap: 16px; } body.soc-desktop-shell #homeView .soc-home-row--briefing, body.soc-desktop-shell #homeView .soc-home-row--analysis, body.soc-desktop-shell #homeView .soc-home-row--activity { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr); gap: 16px; align-items: start; } body.soc-desktop-shell #homeView .soc-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } body.soc-desktop-shell #homeView #homeTrend7d { min-height: 0; } body.soc-desktop-shell #homeView #homeTrendSparkline { height: 120px; } body.soc-desktop-shell #alertsView .soc-summary-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } body.soc-desktop-shell #ticketsView .soc-summary-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; } body.soc-desktop-shell #alertsView .soc-summary-card, body.soc-desktop-shell #ticketsView .soc-summary-card { min-height: 66px; padding: 12px 14px; align-items: flex-start; } body.soc-desktop-shell #alertsView .soc-pc-two-col-shell, body.soc-desktop-shell #ticketsView .soc-pc-two-col-shell, body.soc-desktop-shell #reportsHubView .soc-hub-results-layout, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-main-grid, body.soc-desktop-shell #auditPanel .soc-audit-grid, body.soc-desktop-shell #peopleView .soc-people-directory-layout, body.soc-desktop-shell #analyticsView .soc-analytics-v2-shell, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-layout { grid-template-columns: minmax(0, 1.38fr) minmax(320px, 0.82fr); gap: 16px; align-items: start; } body.soc-desktop-shell #alertsView .soc-pc-side-panel, body.soc-desktop-shell #ticketsView .soc-pc-side-panel, body.soc-desktop-shell #reportsHubView .soc-hub-preview-panel, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel, body.soc-desktop-shell #accountPanel #accountDetailPanel, body.soc-desktop-shell #peopleView .soc-people-detail-panel, body.soc-desktop-shell #auditPanel #auditDetailPanel, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet { position: sticky; top: 16px; } body.soc-desktop-shell #analyticsView #analyticsHeroRow { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap { width: 104px; height: 104px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge, body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap { width: 104px; height: 104px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap strong { font-size: 24px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-rack { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.soc-desktop-shell #peopleView .soc-people-dashboard-summary, body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar, body.soc-desktop-shell #peopleView .soc-monitoring-toolbar, body.soc-desktop-shell #peopleView .soc-people-stats-card, body.soc-desktop-shell #peopleView .soc-employee-directory-grid, body.soc-desktop-shell #peopleView .soc-monitoring-grid { border: 1px solid var(--soc-border); border-radius: 12px; background: var(--ui-bg-surface); box-shadow: none; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card:last-child { display: none; } body.soc-desktop-shell #weeklyView .soc-weekly-header-main, body.soc-desktop-shell #weeklyView .soc-weekly-header-meta { gap: 8px; } body.soc-desktop-shell #weeklyView .soc-weekly-workspace-shell { grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr); gap: 16px; } body.soc-desktop-shell #weeklyView .soc-weekly-flow-list, body.soc-desktop-shell #weeklyView .soc-weekly-config-grid { gap: 8px; } body.soc-desktop-shell #reportsHubView .soc-hub-filter-grid, body.soc-desktop-shell #notificationSettingsPanel .soc-notification-settings-form { gap: 12px; } body.soc-desktop-shell #notificationPanel .soc-notification-center-shell { padding: 14px; } body.soc-desktop-shell #announcementPanel #noticesWorkspace { display: grid; gap: 14px; } body.soc-desktop-shell #announcementPanel .workspace-tabbar-row, body.soc-desktop-shell #announcementPanel #noticesListPanel, body.soc-desktop-shell #announcementPanel #noticesDetailPanel, body.soc-desktop-shell #announcementPanel #noticesComposePanel { border: 1px solid var(--soc-border); border-radius: 12px; background: var(--ui-bg-surface); box-shadow: none; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip { padding: 0; border: 0; background: transparent; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-cell { min-height: 128px; border-radius: 12px; box-shadow: none; } /* support roster phase2 pass (2026-03-31) */ body.soc-desktop-shell #opsSupportPanel .soc-ops-support-workspace { gap: 10px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-top { align-items: flex-start; gap: 12px 18px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-controls { gap: 8px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar { grid-template-columns: auto auto; justify-content: flex-end; gap: 8px 10px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-month-row, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-action-row { min-height: 34px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row { justify-content: flex-end; gap: 8px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters { grid-template-columns: repeat(2, minmax(148px, 184px)); } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-field { grid-template-rows: auto 32px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control, body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label, body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'], body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions .ds-btn, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn { min-height: 32px; height: 32px; font-size: 12px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip { padding-top: 2px !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats { gap: 8px 12px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat-label { font-size: 11px; line-height: 14px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat > strong { font-size: 13px; line-height: 15px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge { min-height: 26px; padding: 0 9px; font-size: 11px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-main { gap: 10px; padding: 0; border: 0; background: transparent; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays { gap: 8px; padding: 2px 0 0; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays > span { font-size: 11px; line-height: 14px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-grid { gap: 8px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-cell { min-height: 136px; padding: 10px 8px; border-color: #e2e8f0; background: #ffffff; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-cell-head > span { padding: 2px 7px; border-color: #e2e8f0; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line, body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-more { padding: 6px 8px; border-radius: 10px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line { box-shadow: none !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line:hover { border-color: rgba(249, 115, 22, 0.26); background: rgba(249, 115, 22, 0.06); box-shadow: none !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line.is-selected { box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.16) !important; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line-label { font-size: 11px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line-meta { font-size: 10px; line-height: 12px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line-count { font-size: 10px; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending { background: #fff7ed; border-color: #fdba74; color: #c2410c; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved { background: #ecfdf3; border-color: #86efac; color: #166534; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-unavailable, body.soc-desktop-shell #opsSupportPanel .cal-line.state-rejected { background: #fff1f2; border-color: #fecdd3; color: #be123c; } body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled { background: #f8fafc; border-color: #e2e8f0; color: #475569; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet { padding: 12px 14px; border-radius: 14px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head { padding-bottom: 4px; border-bottom: 0; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-content { gap: 8px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metrics { gap: 6px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric { padding: 8px 10px; border-radius: 10px; } body.soc-desktop-shell #myProfileView .soc-profile-top-shell, body.soc-desktop-shell #myProfileView .soc-profile-overview-shell, body.soc-desktop-shell #myProfileView .soc-profile-account-workspace { gap: 16px; } body.soc-desktop-shell #myProfileView .soc-profile-account-strip, body.soc-desktop-shell #myProfileView .soc-profile-score, body.soc-desktop-shell #myProfileView .soc-profile-record-section, body.soc-desktop-shell #myProfileView .soc-profile-account-card, body.soc-desktop-shell #myProfileView .soc-profile-account-form { padding: 16px; } body.soc-desktop-shell #homeWeeklyBriefing { gap: 10px; padding: 16px 18px 14px; } body.soc-desktop-shell #homeWeeklyBriefing #homeWeeklySummaryLine, body.soc-desktop-shell #reportsHubView #hubSummaryMeta, body.soc-desktop-shell #reportsHubView .soc-hub-filter-heading .meta, body.soc-desktop-shell #reportsHubView #hubFilterContextText, body.soc-desktop-shell #reportsHubView #hubResultsMeta, body.soc-desktop-shell #reportsHubView .soc-hub-preview-header .meta { display: none !important; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart { gap: 10px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-item { padding: 12px 14px; gap: 4px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-value { font-size: 24px; } body.soc-desktop-shell #homeHeroStatus { padding: 16px 18px; } body.soc-desktop-shell #reportsHubView .soc-hub-header { margin-bottom: 6px !important; } body.soc-desktop-shell #reportsHubView .soc-hub-filter-header, body.soc-desktop-shell #reportsHubView .soc-hub-results-header, body.soc-desktop-shell #reportsHubView .soc-hub-preview-header { padding-bottom: 0; } body.soc-desktop-shell #reportsHubView .soc-hub-filter-body, body.soc-desktop-shell #reportsHubView .soc-hub-results-body, body.soc-desktop-shell #reportsHubView .soc-hub-preview-body { padding-top: 12px; } body.soc-desktop-shell #reportsHubView .soc-hub-filter-panel, body.soc-desktop-shell #reportsHubView .soc-hub-results-panel, body.soc-desktop-shell #reportsHubView .soc-hub-preview-panel { border-radius: 12px !important; } body.soc-desktop-shell #reportsHubView .soc-hub-results-state, body.soc-desktop-shell #reportsHubView .soc-hub-preview-empty { min-height: 148px; padding: 18px; border-radius: 12px; background: #f8f9fc; } body.soc-desktop-shell #peopleView .soc-people-pane-summary { gap: 10px; padding: 12px 14px; } body.soc-desktop-shell #peopleView .soc-people-pane-summary-head h3 { font-size: 15px; line-height: 22px; } body.soc-desktop-shell #peopleView .soc-people-segment-rail { gap: 6px; } body.soc-desktop-shell #peopleView .soc-people-segment-btn { min-height: 32px; height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12px; line-height: 16px; } body.soc-desktop-shell #peopleView .soc-people-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } body.soc-desktop-shell #peopleView .soc-people-kpi-card { gap: 10px; padding: 12px 14px; border-radius: 14px; } body.soc-desktop-shell #peopleView .soc-people-kpi-head { gap: 8px; } body.soc-desktop-shell #peopleView .soc-people-kpi-icon { width: 30px; height: 30px; border-radius: 10px; } body.soc-desktop-shell #peopleView .soc-people-kpi-icon svg { width: 18px; height: 18px; } body.soc-desktop-shell #peopleView .soc-people-kpi-copy h4 { font-size: 13px; line-height: 18px; } body.soc-desktop-shell #peopleView .soc-people-kpi-donut-row { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 12px; } body.soc-desktop-shell #peopleView .soc-people-donut { width: 96px; height: 96px; } body.soc-desktop-shell #peopleView .soc-people-donut::after { inset: 12px; } body.soc-desktop-shell #peopleView .soc-people-donut-center { width: min(64px, calc(100% - 28px)); } body.soc-desktop-shell #peopleView .soc-people-donut-center span { font-size: 11px; line-height: 14px; } body.soc-desktop-shell #peopleView .soc-people-donut-center strong { font-size: 18px; line-height: 22px; } body.soc-desktop-shell #peopleView .soc-people-kpi-legend { gap: 6px; } body.soc-desktop-shell #peopleView .soc-people-kpi-legend-row, body.soc-desktop-shell #peopleView .soc-people-bar-row-head, body.soc-desktop-shell #peopleView .soc-people-kpi-inline-row, body.soc-desktop-shell #peopleView .soc-people-kpi-number-block span { font-size: 12px; line-height: 16px; } body.soc-desktop-shell #peopleView .soc-people-progress, body.soc-desktop-shell #peopleView .soc-people-bar-track { height: 8px; } body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar { padding: 10px 12px; } body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-row { gap: 8px; } body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar-main { gap: 10px; } body.soc-desktop-shell #peopleView .soc-employee-directory-field > span { margin-bottom: 5px; font-size: 11px; line-height: 14px; font-weight: 700; } body.soc-desktop-shell #peopleView .soc-employee-directory-search { flex: 1.35 1 360px; } body.soc-desktop-shell #peopleView .soc-employee-directory-field:not(.soc-employee-directory-search) { flex: 0 1 138px; } body.soc-desktop-shell #peopleView .soc-employee-directory-field :is(input, select), body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-utility .ds-btn { min-height: 36px; height: 36px; } body.soc-desktop-shell #peopleView .soc-workspace-card-head { padding: 12px 14px 10px; } body.soc-desktop-shell #peopleView .soc-employee-directory-grid-wrap { border-top: 1px solid var(--soc-border); } body.soc-desktop-shell #peopleView .soc-employee-directory-table th, body.soc-desktop-shell #peopleView .soc-employee-directory-table td { padding: 10px 12px; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th { background: #fafbfe; font-size: 11px; line-height: 14px; letter-spacing: 0; } body.soc-desktop-shell #peopleView .soc-employee-directory-table tbody td { font-size: 12px; line-height: 17px; } body.soc-desktop-shell #peopleView .soc-people-table-identity { gap: 10px; } body.soc-desktop-shell #peopleView .soc-people-avatar, body.soc-desktop-shell #peopleView .soc-people-employee-avatar { width: 36px; height: 36px; } body.soc-desktop-shell #peopleView .soc-people-avatar { font-size: 11px; } body.soc-desktop-shell #homeView { gap: 14px; } body.soc-desktop-shell #homeView .soc-home-row--briefing { grid-template-columns: minmax(0, 2.2fr) minmax(240px, 0.88fr); gap: 14px; } body.soc-desktop-shell #homeView .soc-home-row--analysis, body.soc-desktop-shell #homeView .soc-home-row--activity { grid-template-columns: minmax(0, 1.48fr) minmax(280px, 1fr); gap: 14px; } body.soc-desktop-shell #homeView > .soc-home-row--analysis #homeTrend7d, body.soc-desktop-shell #homeView > .soc-home-row--activity #homeTicketBlock { min-height: 0; } body.soc-desktop-shell #homeWeeklyBriefing { gap: 8px; padding: 14px 16px 12px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-block-head { align-items: center; gap: 10px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-briefing-title h3 { font-size: 16px; line-height: 22px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-briefing-period { font-size: 11px; line-height: 15px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-ratio-pill { min-height: 26px; padding: 4px 9px; font-size: 11px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart { gap: 8px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-item { gap: 3px; padding: 10px 12px; border-radius: 10px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-value { font-size: 21px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-label, body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-wow { font-size: 11px; line-height: 15px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-briefing-actions { gap: 8px; } body.soc-desktop-shell #homeWeeklyBriefing .soc-briefing-actions .ds-btn { min-height: 34px; height: 34px; padding: 0 12px; } body.soc-desktop-shell #homeHeroStatus { min-height: 0; align-self: start; gap: 6px; padding: 14px 16px; } body.soc-desktop-shell #homeHeroStatus .soc-hero-status-head { align-items: flex-start; gap: 10px; } body.soc-desktop-shell #homeHeroStatus h3 { font-size: 15px; line-height: 20px; } body.soc-desktop-shell #homeHeroStatus .soc-hero-chip { min-height: 26px; padding: 0 10px; font-size: 11px; } body.soc-desktop-shell #homeHeroStatus .soc-hero-comment { font-size: 12px; line-height: 17px; } body.soc-desktop-shell #homeView > .soc-home-row--kpis .soc-kpi-grid { gap: 10px; } body.soc-desktop-shell #homeView > .soc-home-row--kpis .soc-kpi-card { min-height: 104px; gap: 6px; padding: 14px 16px 13px; border-radius: 12px; } body.soc-desktop-shell #homeView .soc-kpi-label, body.soc-desktop-shell #homeView .soc-kpi-subtext { font-size: 11px; line-height: 15px; } body.soc-desktop-shell #homeView .soc-kpi-subtext { color: var(--ui-text-tertiary); } body.soc-desktop-shell #homeView .soc-kpi-value { font-size: 30px; } body.soc-desktop-shell #homeTrend7d { padding: 16px 18px 14px; } body.soc-desktop-shell #homeTrend7d .soc-block-head { margin-bottom: 2px; } body.soc-desktop-shell #homeTrend7d .soc-block-value { font-size: 28px; line-height: 1; } body.soc-desktop-shell #homeTrend7d .soc-sparkline-lg { height: 112px; margin-top: 8px; } body.soc-desktop-shell #homeTrend7d .meta { margin-top: 8px; font-size: 12px; line-height: 16px; } body.soc-desktop-shell #homeRiskSignals, body.soc-desktop-shell #homeActionNeededBlock, body.soc-desktop-shell #homeRecentBlock { padding: 14px 16px; } body.soc-desktop-shell #homeRiskSignals > h3, body.soc-desktop-shell #homeActionNeededBlock > h3, body.soc-desktop-shell #homeRecentBlock > h3 { margin: 0 0 6px; font-size: 14px; line-height: 20px; } body.soc-desktop-shell #homeRiskSignals .soc-insight-item, body.soc-desktop-shell #homeActionNeededBlock .soc-mini-row, body.soc-desktop-shell #homeRecentBlock .soc-mini-row { padding: 9px 10px; border-radius: 10px; } body.soc-desktop-shell #homeActionNeededBlock { border-color: color-mix(in srgb, var(--soc-primary) 16%, var(--soc-border)); background: color-mix(in srgb, var(--soc-primary) 4%, #fff); } body.soc-desktop-shell #homeActionNeededBlock .soc-mini-row { background: #fff; } body.soc-desktop-shell #homeTicketBlock { padding: 16px 18px 14px; } body.soc-desktop-shell #homeTicketPendingMeta { margin-top: 4px; font-size: 12px; line-height: 16px; } body.soc-desktop-shell #homeTicketBlock .soc-ticket-mini-dist { margin: 8px 0 10px; } body.soc-desktop-shell #homeTicketPendingBtn { min-height: 34px; height: 34px; padding: 0 12px; } body.soc-desktop-shell #homeRecentBlock .soc-list-mini { gap: 6px; } body.soc-desktop-shell #alertsView { gap: 12px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar { gap: 8px; padding: 8px 12px !important; border-radius: 10px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar .soc-realtime-date-display, body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar .ds-btn { min-height: 36px !important; height: 36px !important; padding: 0 12px !important; border-radius: 8px !important; } body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-row { gap: 8px; padding: 2px 0 0; } body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-summary { font-size: 11px; line-height: 15px; color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-btn { min-height: 30px; height: 30px; padding-inline: 10px; border-radius: 8px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis { gap: 8px !important; } body.soc-desktop-shell #alertsView .soc-summary-grid { gap: 8px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card, body.soc-desktop-shell #alertsView .soc-summary-card { min-height: 72px !important; padding: 10px 12px !important; align-content: start; gap: 4px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label, body.soc-desktop-shell #alertsView .soc-summary-card .soc-summary-label { font-size: 11px !important; line-height: 14px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value, body.soc-desktop-shell #alertsView .soc-summary-card .soc-summary-value { font-size: 24px !important; line-height: 1 !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-main { grid-template-columns: minmax(0, 1fr) 304px !important; gap: 12px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-results-panel { min-height: 480px; border-radius: 10px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-results-head { min-height: 56px; padding: 14px 16px 10px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-results-head h3 { font-size: 15px; line-height: 20px; } body.soc-desktop-shell #alertsView .soc-workspace-inline-summary { gap: 4px; } body.soc-desktop-shell #alertsView .soc-workspace-inline-badge { min-height: 22px; padding: 0 7px; font-size: 11px; line-height: 14px; } body.soc-desktop-shell #alertsView #alertsFeedSelectedBadge.hidden { display: none !important; } body.soc-desktop-shell #alertsView .soc-pc-list-header { min-height: 36px !important; padding: 0 16px 8px !important; } body.soc-desktop-shell #alertsView .soc-pc-list-header > span { font-size: 11px !important; line-height: 14px !important; } body.soc-desktop-shell #alertsView :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card) { min-height: 60px !important; padding: 8px 16px !important; } body.soc-desktop-shell #alertsView :is(.incident-status, .incident-type, .incident-severity, .incident-location, .incident-created-at) { font-size: 11px !important; line-height: 15px !important; } body.soc-desktop-shell #alertsView .incident-title { font-size: 13px !important; line-height: 18px !important; } body.soc-desktop-shell #alertsView :is(.incident-comment-preview, .incident-ticket-description) { font-size: 11px !important; line-height: 15px !important; color: var(--ui-text-tertiary, var(--soc-text-sub)) !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-empty-state { min-height: 160px; padding: 20px 16px 18px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-empty-state .ds-btn { min-height: 30px; height: 30px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel { width: 304px !important; min-width: 304px !important; max-width: 304px !important; min-height: 480px; border-radius: 10px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-head { padding: 14px 16px 12px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-head h4 { font-size: 15px !important; line-height: 20px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-head-actions { gap: 6px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel .ds-btn.ds-btn-sm { min-height: 30px !important; height: 30px !important; padding: 0 10px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel > .meta { padding: 10px 16px 0 !important; font-size: 12px; line-height: 16px; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-kpi { padding: 10px 16px 0 !important; gap: 6px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-kpi-item { min-height: 58px; padding: 8px 9px !important; border-radius: 8px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-section { padding: 10px 16px 0 !important; gap: 6px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-section-title { font-size: 12px; line-height: 16px; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-summary { min-height: 64px; max-height: 116px; padding: 9px !important; border-radius: 8px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-thread { min-height: 152px !important; padding: 9px !important; border-radius: 8px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-form { margin: 10px 16px 0 !important; padding: 10px !important; border-radius: 8px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-input { min-height: 36px !important; height: 36px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-actions { padding: 10px 16px 16px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi-item { min-height: 52px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-summary { min-height: 52px; max-height: 84px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread { min-height: 96px !important; } body.soc-desktop-shell #ticketsView { gap: 12px; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar { gap: 8px; padding: 8px 12px !important; border-radius: 10px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar .soc-realtime-date-display, body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar .ds-btn { min-height: 36px !important; height: 36px !important; padding: 0 12px !important; border-radius: 8px !important; } body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-row { gap: 8px; padding: 2px 0 0; } body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-summary { font-size: 11px; line-height: 15px; color: var(--ui-text-secondary, var(--soc-text-sub)); } body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-btn { min-height: 30px; height: 30px; padding-inline: 10px; border-radius: 8px; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis, body.soc-desktop-shell #ticketsView .soc-summary-grid { gap: 6px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card, body.soc-desktop-shell #ticketsView .soc-summary-card { min-height: 64px !important; padding: 8px 10px !important; gap: 3px; border-radius: 10px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label, body.soc-desktop-shell #ticketsView .soc-summary-card .soc-summary-label { font-size: 10px !important; line-height: 13px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value, body.soc-desktop-shell #ticketsView .soc-summary-card .soc-summary-value { font-size: 22px !important; line-height: 1 !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-main { grid-template-columns: minmax(0, 1fr) 296px !important; gap: 12px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-panel { min-height: 472px; border-radius: 10px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-head { min-height: 54px; padding: 13px 15px 10px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-head h3 { font-size: 15px; line-height: 20px; } body.soc-desktop-shell #ticketsView .soc-ticket-feed-summary { gap: 4px; } body.soc-desktop-shell #ticketsView .soc-workspace-inline-badge { min-height: 22px; padding: 0 7px; font-size: 11px; line-height: 14px; } body.soc-desktop-shell #ticketsView #ticketsFeedSelectedBadge.hidden { display: none !important; } body.soc-desktop-shell #ticketsView .soc-pc-list-header { min-height: 36px !important; padding: 0 15px 8px !important; } body.soc-desktop-shell #ticketsView .soc-pc-list-header > span { font-size: 11px !important; line-height: 14px !important; } body.soc-desktop-shell #ticketsView .ticket-list > .ticket-card { min-height: 58px !important; padding: 8px 15px !important; } body.soc-desktop-shell #ticketsView .ticket-head-pills, body.soc-desktop-shell #ticketsView .ticket-row-summary-type, body.soc-desktop-shell #ticketsView .ticket-row-summary-site, body.soc-desktop-shell #ticketsView .ticket-row-summary-updated { justify-self: start !important; text-align: left !important; } body.soc-desktop-shell #ticketsView .ticket-title, body.soc-desktop-shell #ticketsView .ticket-row-summary-comment { justify-self: start !important; text-align: left !important; } body.soc-desktop-shell #ticketsView .ticket-title { font-size: 13px !important; line-height: 18px !important; } body.soc-desktop-shell #ticketsView :is(.ticket-row-summary-type, .ticket-row-summary-site, .ticket-row-summary-updated, .ticket-row-summary-requested) { font-size: 11px !important; line-height: 15px !important; } body.soc-desktop-shell #ticketsView .ticket-row-summary-comment { font-size: 11px !important; line-height: 15px !important; max-height: calc(1.36em * 2); color: var(--ui-text-tertiary, var(--soc-text-sub)); } body.soc-desktop-shell #ticketsView .soc-ops-workspace-empty-state { min-height: 148px; padding: 18px 15px 16px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-empty-state .ds-btn { min-height: 30px; height: 30px; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel { width: 296px !important; min-width: 296px !important; max-width: 296px !important; min-height: 472px; border-radius: 10px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head { padding: 13px 15px 11px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head h4 { font-size: 15px !important; line-height: 20px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head-actions { gap: 6px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel .ds-btn.ds-btn-sm { min-height: 30px !important; height: 30px !important; padding: 0 10px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel > .meta { padding: 9px 15px 0 !important; font-size: 12px; line-height: 16px; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-kpi { padding: 9px 15px 0 !important; gap: 6px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-kpi-item { min-height: 56px; padding: 8px !important; border-radius: 8px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-section { padding: 9px 15px 0 !important; gap: 5px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-section-title { font-size: 12px; line-height: 16px; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-summary { min-height: 52px; max-height: 110px; padding: 8px !important; border-radius: 8px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-thread { min-height: 144px !important; padding: 8px !important; border-radius: 8px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-form { margin: 9px 15px 0 !important; padding: 9px !important; border-radius: 8px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-input { min-height: 36px !important; height: 36px !important; } body.soc-desktop-shell #ticketsView .soc-pc-side-panel-actions { padding: 9px 15px 15px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi-item { min-height: 48px; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-summary { min-height: 40px; max-height: 72px; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread { min-height: 82px !important; } /* Guardrails-based refinement: reduce repeated chrome, tighten filters, and strengthen list/detail focus */ body.soc-desktop-shell #alertsView .soc-ops-workspace-helper, body.soc-desktop-shell #ticketsView .soc-ops-workspace-helper { display: none !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar, body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar { gap: 8px !important; padding: 8px 12px !important; border-radius: 10px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar .soc-realtime-date-display, body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar .ds-btn, body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar .soc-realtime-date-display, body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar .ds-btn { min-height: 36px !important; height: 36px !important; padding: 0 12px !important; border-radius: 8px !important; } body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-row, body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-row { gap: 8px !important; padding: 0 !important; } body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-summary, body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-summary { font-size: 11px !important; line-height: 15px !important; color: var(--ui-text-secondary, var(--soc-text-sub)) !important; } body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-btn, body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-btn { min-height: 30px !important; height: 30px !important; padding-inline: 10px !important; border-radius: 8px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis, body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis, body.soc-desktop-shell #ticketsView #ticketStatusFilterChips { gap: 6px !important; } body.soc-desktop-shell #ticketsView #ticketStatusFilterChips .chip { min-height: 28px; padding: 0 9px; font-size: 11px; line-height: 14px; border-radius: 999px; } body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card, body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card, body.soc-desktop-shell #ticketsView .soc-summary-card { min-height: 62px !important; padding: 8px 10px !important; gap: 3px !important; border-radius: 10px !important; box-shadow: none !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label, body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label, body.soc-desktop-shell #ticketsView .soc-summary-card .soc-summary-label { font-size: 10px !important; line-height: 13px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value, body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value, body.soc-desktop-shell #ticketsView .soc-summary-card .soc-summary-value { font-size: 22px !important; line-height: 1 !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-main, body.soc-desktop-shell #ticketsView .soc-ops-workspace-main { gap: 12px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-main { grid-template-columns: minmax(0, 1fr) 292px !important; } body.soc-desktop-shell #ticketsView .soc-ops-workspace-main { grid-template-columns: minmax(0, 1fr) 292px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-results-panel, body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-panel { min-height: 460px !important; border-radius: 10px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-results-head, body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-head { min-height: 52px !important; padding: 12px 14px 10px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-results-head h3, body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-head h3 { font-size: 14px !important; line-height: 18px !important; } body.soc-desktop-shell #alertsView .soc-workspace-inline-badge, body.soc-desktop-shell #ticketsView .soc-workspace-inline-badge { min-height: 20px !important; padding: 0 7px !important; font-size: 10px !important; line-height: 13px !important; } body.soc-desktop-shell #alertsView .soc-pc-list-header, body.soc-desktop-shell #ticketsView .soc-pc-list-header { min-height: 34px !important; padding: 0 14px 8px !important; border-radius: 8px !important; background: color-mix(in srgb, var(--ui-bg-surface-muted, #f7f8fb) 94%, #ffffff) !important; } body.soc-desktop-shell #alertsView .soc-pc-list-header > span, body.soc-desktop-shell #ticketsView .soc-pc-list-header > span { font-size: 10px !important; line-height: 13px !important; color: var(--ui-text-tertiary, var(--soc-text-sub)) !important; } body.soc-desktop-shell #alertsView :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card), body.soc-desktop-shell #ticketsView .ticket-list > .ticket-card { min-height: 56px !important; padding: 8px 14px !important; border-radius: 8px !important; } body.soc-desktop-shell #alertsView :is(.incident-title, .incident-comment-preview, .incident-ticket-description), body.soc-desktop-shell #ticketsView :is(.ticket-title, .ticket-row-summary-type, .ticket-row-summary-site, .ticket-row-summary-updated, .ticket-row-summary-comment, .ticket-row-summary-requested) { font-size: 11px !important; line-height: 15px !important; } body.soc-desktop-shell #alertsView .incident-title, body.soc-desktop-shell #ticketsView .ticket-title { font-size: 13px !important; line-height: 17px !important; } body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel, body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel { width: 292px !important; min-width: 292px !important; max-width: 292px !important; min-height: 460px !important; border-radius: 10px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-head, body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head { padding: 12px 14px 10px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-head h4, body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head h4 { font-size: 14px !important; line-height: 18px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel > .meta, body.soc-desktop-shell #ticketsView .soc-pc-side-panel > .meta { display: none !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-kpi, body.soc-desktop-shell #ticketsView .soc-pc-side-panel-kpi { padding: 8px 14px 0 !important; gap: 6px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-kpi-item, body.soc-desktop-shell #ticketsView .soc-pc-side-panel-kpi-item { min-height: 52px !important; padding: 8px !important; border-radius: 8px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-section, body.soc-desktop-shell #ticketsView .soc-pc-side-panel-section { padding: 8px 14px 0 !important; gap: 4px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-section-title, body.soc-desktop-shell #ticketsView .soc-pc-side-panel-section-title { font-size: 11px !important; line-height: 15px !important; color: var(--ui-text-secondary, var(--soc-text-sub)) !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-summary, body.soc-desktop-shell #ticketsView .soc-pc-side-panel-summary { min-height: 48px !important; max-height: 92px !important; padding: 8px !important; border-radius: 8px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-thread, body.soc-desktop-shell #ticketsView .soc-pc-side-panel-thread { min-height: 120px !important; padding: 8px !important; border-radius: 8px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-form, body.soc-desktop-shell #ticketsView .soc-pc-side-panel-form { margin: 8px 14px 0 !important; padding: 8px !important; border-radius: 8px !important; } body.soc-desktop-shell #alertsView .soc-pc-side-panel-actions, body.soc-desktop-shell #ticketsView .soc-pc-side-panel-actions { padding: 8px 14px 14px !important; } body.soc-desktop-shell #analyticsView { gap: 16px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-top: 4px; padding-bottom: 4px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy { display: grid; gap: 4px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy h3 { margin: 0; letter-spacing: -0.04em; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar { gap: 8px !important; padding: 10px 12px !important; border-radius: 12px !important; background: var(--ui-bg-surface, var(--soc-panel-bg)) !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-label { font-size: 11px !important; line-height: 14px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-range-quick .ds-btn, body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-actions .ds-btn, body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-picker-trigger { min-height: 32px !important; height: 32px !important; padding: 0 11px !important; border-radius: 8px !important; font-size: 11px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-shell { display: grid; grid-template-columns: minmax(0, 1fr) 36%; gap: 12px; align-items: start; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-main-column { display: grid; gap: 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-hero-row { display: grid; grid-template-columns: minmax(240px, 0.84fr) minmax(0, 1.16fr); gap: 12px; align-items: stretch; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card { padding: 14px !important; border-radius: 12px !important; box-shadow: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card-head { margin-bottom: 10px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kicker { font-size: 11px !important; line-height: 14px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-help-btn { min-height: 24px !important; width: 24px !important; padding: 0 !important; border-radius: 999px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: center; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap, body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge { width: 128px !important; height: 128px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap { inset: 22px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-label { display: none !important; } body.soc-desktop-shell #analyticsView #analyticsRiskScoreValue { font-size: 34px !important; line-height: 1 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-badge-row { margin-bottom: 6px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary-copy { margin: 0 !important; font-size: 12px !important; line-height: 16px !important; color: var(--ui-text-secondary, var(--soc-text-sub)) !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-rack { gap: 0 !important; overflow: hidden; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; border-radius: 12px !important; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)) !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile { min-height: 64px !important; padding: 12px 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile + .soc-analytics-v2-kpi-tile { border-inline-start: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile .label, body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item .label { font-size: 10px !important; line-height: 13px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile strong, body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item strong { font-size: 18px !important; line-height: 22px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head .meta { display: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head strong { font-size: 13px !important; line-height: 18px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-panel { gap: 10px !important; padding: 12px 14px !important; border-radius: 12px !important; border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)) !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-legend { gap: 14px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item { min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-toolbar { gap: 8px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-controls { gap: 8px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-control-field label { font-size: 11px !important; line-height: 14px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-control-field :is(input, select) { min-height: 36px !important; height: 36px !important; border-radius: 8px !important; } body.soc-desktop-shell #analyticsView #analyticsComparisonContext.hidden { display: none !important; } body.soc-desktop-shell #analyticsView #analyticsComparisonContext { margin: 0 !important; font-size: 11px !important; line-height: 15px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head { min-height: 34px !important; padding: 0 12px !important; border-radius: 8px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-sort-head, body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head > span { font-size: 10px !important; line-height: 13px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail { position: sticky; top: 72px; padding: 12px 14px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-summary { gap: 6px !important; margin-bottom: 10px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-chip { padding: 9px 10px !important; border-radius: 10px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-meta { gap: 8px !important; margin-bottom: 12px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-empty, body.soc-desktop-shell #analyticsView .soc-analytics-detail-empty { border-style: solid !important; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)) !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-tabs { gap: 10px !important; padding-bottom: 4px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-tabs > button { min-height: 30px !important; font-size: 12px !important; } body.soc-desktop-shell #peopleView .soc-people-pane-summary .meta, body.soc-desktop-shell #peopleView .soc-workspace-card-head .meta { display: none !important; } body.soc-desktop-shell #peopleView .soc-people-pane-summary { gap: 8px !important; padding: 12px 14px !important; } body.soc-desktop-shell #peopleView .soc-people-segment-rail { gap: 6px !important; } body.soc-desktop-shell #peopleView .soc-people-segment-btn { min-height: 32px !important; padding: 0 12px !important; font-size: 12px !important; border-radius: 999px !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-strip { gap: 8px !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-card { padding: 12px !important; gap: 10px !important; border-radius: 12px !important; background: var(--ui-bg-surface, var(--soc-panel-bg)) !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-primary, body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-success, body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-accent { background: var(--ui-bg-surface, var(--soc-panel-bg)) !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-icon { width: 32px !important; height: 32px !important; border-radius: 10px !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-copy h4 { font-size: 13px !important; line-height: 17px !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-number-block strong { font-size: 16px !important; line-height: 20px !important; } body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar { padding: 12px 14px !important; border-radius: 10px !important; } body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-row { align-items: center !important; } body.soc-desktop-shell #peopleView :is(.soc-employee-directory-field, .soc-monitoring-toolbar-field) > span { font-size: 11px !important; line-height: 14px !important; color: var(--ui-text-secondary, var(--soc-text-sub)) !important; } body.soc-desktop-shell #peopleView :is(.soc-employee-directory-field, .soc-monitoring-toolbar-field) :is(input, select) { min-height: 36px !important; height: 36px !important; border-radius: 8px !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-grid, body.soc-desktop-shell #peopleView .soc-monitoring-grid { border-radius: 10px !important; } body.soc-desktop-shell #peopleView .soc-people-directory-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) 360px !important; } body.soc-desktop-shell #peopleView .soc-people-detail-panel { border-radius: 10px !important; } /* ===== Phase 1 rebuild: shell / home / alerts / tickets ===== */ @media (min-width: 1024px) { body.soc-desktop-shell { --soc-desktop-sidebar-width: 232px; --soc-desktop-sidebar-expanded-width: 232px; } body.soc-desktop-shell .topbar { min-height: 60px; padding: 10px 20px; border-bottom: 1px solid #e6eaf1; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px) saturate(170%); } body.soc-desktop-shell .topbar-right { gap: 10px; } body.soc-desktop-shell .container.ds-page, body.soc-desktop-shell .container.admin-layout { padding-right: 0 !important; background: linear-gradient(180deg, #fbfcff 0%, #f5f7fb 100%) left top / var(--soc-desktop-sidebar-width) 100% no-repeat, linear-gradient(90deg, transparent calc(var(--soc-desktop-sidebar-width) - 1px), #e7ebf3 calc(var(--soc-desktop-sidebar-width) - 1px), #e7ebf3 var(--soc-desktop-sidebar-width), transparent var(--soc-desktop-sidebar-width)) left top / 100% 100% no-repeat, #f6f7fb !important; } body.soc-desktop-shell .container.ds-page > :not(#menuSheetPanel), body.soc-desktop-shell .container.admin-layout > :not(#menuSheetPanel) { padding-left: 28px; padding-right: 18px; padding-top: 24px; padding-bottom: 28px; } body.soc-desktop-shell #menuSheetPanel { background: linear-gradient(180deg, #fbfcff 0%, #f5f7fb 100%) !important; border-right: 1px solid #e7ebf3 !important; } body.soc-desktop-shell #menuSheetPanel #mobileMenuRootPage { padding: 18px 0 14px; gap: 12px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-section + .soc-menu-section { margin-top: 18px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-section-label { padding: 0 22px; font-size: 10px; line-height: 13px; letter-spacing: 0.08em; text-transform: uppercase; } body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle, body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item { margin: 0 12px; border-radius: 12px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle { min-height: 40px; grid-template-columns: 18px minmax(0, 1fr) 16px; gap: 10px; padding: 0 12px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item { min-height: 38px; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 0 12px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item::before { display: none; } body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle.is-open { background: #eef2f8; color: #202430; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item.is-active { background: #fff0e8; color: var(--soc-primary-deep); box-shadow: none; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-label, body.soc-desktop-shell #menuSheetPanel .soc-menu-group-label { font-size: 13px; line-height: 17px; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item--nested { min-height: 30px; margin: 0 12px 0 28px; padding: 0 10px; border-radius: 10px; } body.soc-desktop-shell .soc-phase1-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell .soc-phase1-page-header-main { display: grid; gap: 6px; min-width: 0; } body.soc-desktop-shell .soc-phase1-kicker { color: #7d8699; font-size: 10px; line-height: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body.soc-desktop-shell .soc-phase1-page-header-main h2 { margin: 0; color: #202430; font-size: 30px; line-height: 34px; letter-spacing: -0.03em; } body.soc-desktop-shell .soc-phase1-surface { border: 1px solid #e6eaf1 !important; border-radius: 18px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #homeView { gap: 16px !important; } body.soc-desktop-shell #homeView .soc-home-phase1-header { margin-bottom: 0 !important; } body.soc-desktop-shell #homeView .soc-home-row--briefing { grid-template-columns: minmax(0, 1.48fr) minmax(280px, 0.76fr); gap: 14px; } body.soc-desktop-shell #homeView .soc-home-row--analysis, body.soc-desktop-shell #homeView .soc-home-row--activity { grid-template-columns: minmax(0, 1.26fr) minmax(320px, 0.74fr); gap: 14px; } body.soc-desktop-shell #homeView #homeWeeklyBriefing, body.soc-desktop-shell #homeView #homeHeroStatus, body.soc-desktop-shell #homeView #homeTrend7d, body.soc-desktop-shell #homeView #homeRiskSignals, body.soc-desktop-shell #homeView #homeActionNeededBlock, body.soc-desktop-shell #homeView #homeTicketBlock, body.soc-desktop-shell #homeView #homeRecentBlock, body.soc-desktop-shell #homeView .soc-home-summary-surface { padding: 18px 20px 16px !important; } body.soc-desktop-shell #homeView .soc-home-summary-surface .soc-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } body.soc-desktop-shell #homeView .soc-home-summary-surface .soc-kpi-card { min-height: 98px; padding: 12px 14px; border: 1px solid #edf1f6 !important; border-radius: 14px !important; background: #f8fafc !important; box-shadow: none !important; } body.soc-desktop-shell #homeView .soc-home-summary-surface .soc-kpi-label, body.soc-desktop-shell #homeView .soc-home-summary-surface .soc-kpi-subtext { font-size: 11px; line-height: 15px; } body.soc-desktop-shell #homeView .soc-home-summary-surface .soc-kpi-value { font-size: 28px; line-height: 1; } body.soc-desktop-shell #homeView #homeWeeklyBriefing .soc-block-head, body.soc-desktop-shell #homeView #homeHeroStatus .soc-hero-status-head { align-items: flex-start; gap: 10px; } body.soc-desktop-shell #homeView #homeWeeklyBriefing .soc-home-weekly-chart { gap: 10px; } body.soc-desktop-shell #homeView #homeWeeklyBriefing .soc-home-weekly-chart-item { padding: 12px 14px; border-radius: 12px; background: #f8fafc; } body.soc-desktop-shell #homeView #homeHeroStatus { display: grid; align-content: start; gap: 8px; min-height: 0; } body.soc-desktop-shell #homeView #homeHeroStatus h3, body.soc-desktop-shell #homeView #homeTrend7d h3, body.soc-desktop-shell #homeView :is(#homeRiskSignals, #homeActionNeededBlock, #homeTicketBlock, #homeRecentBlock) h3 { font-size: 15px; line-height: 20px; } body.soc-desktop-shell #homeView #homeTrend7d .soc-sparkline-lg { height: 116px; margin-top: 10px; } body.soc-desktop-shell #homeView :is(#homeRiskSignals, #homeActionNeededBlock, #homeRecentBlock) .soc-list-mini { gap: 8px; } body.soc-desktop-shell #homeView :is(#homeRiskSignals, #homeActionNeededBlock, #homeRecentBlock) .soc-mini-row { padding: 10px 12px; border-radius: 12px; border: 1px solid #edf1f6; background: #fafbfd; } body.soc-desktop-shell #homeView #homeActionNeededBlock { border-color: color-mix(in srgb, var(--soc-primary) 18%, #e6eaf1) !important; background: color-mix(in srgb, var(--soc-primary) 5%, #ffffff) !important; } body.soc-desktop-shell #homeView #homeActionNeededBlock .soc-mini-row { background: #ffffff; } body.soc-desktop-shell :is(#alertsView, #ticketsView) { gap: 0 !important; padding-top: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) > .soc-phase1-ops-surface { display: grid; gap: 14px; padding: 22px 22px 20px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 !important; padding: 12px 14px !important; border: 1px solid #e9edf4 !important; border-radius: 14px !important; background: #f9fbfe !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-summary { margin: 0 !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #697286 !important; font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-tab-rail { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } body.soc-desktop-shell #ticketsView #ticketStatusFilterChips .chip { min-height: 32px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid #e6eaf1; background: #ffffff; font-size: 12px; line-height: 16px; } body.soc-desktop-shell #ticketsView #ticketStatusFilterChips .chip.is-active { border-color: rgba(255, 106, 19, 0.24); background: #fff1e8; color: var(--soc-primary-deep); } body.soc-desktop-shell :is(#alertsView, #ticketsView) #realtimeActiveFilters, body.soc-desktop-shell :is(#alertsView, #ticketsView) #ticketsActiveFilters { margin-top: -2px; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-summary-strip { gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-summary-strip > .soc-summary-card { min-height: 68px !important; padding: 12px 13px !important; border-radius: 14px !important; border: 1px solid #e9edf4 !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-summary-strip > .soc-summary-card .soc-summary-label { font-size: 11px !important; line-height: 15px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-summary-strip > .soc-summary-card .soc-summary-value { font-size: 24px !important; line-height: 1 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-main { grid-template-columns: minmax(0, 1fr) 320px !important; gap: 14px !important; align-items: start; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-panel, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel { min-height: 560px !important; border: 1px solid #e9edf4 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head { min-height: 0; padding: 16px 18px 12px !important; border: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head h3 { font-size: 15px !important; line-height: 20px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-workspace-inline-summary { gap: 6px; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-workspace-inline-badge { min-height: 24px !important; padding: 0 8px !important; border-radius: 999px !important; border: 1px solid #e9edf4 !important; background: #f6f7fb !important; font-size: 11px !important; line-height: 14px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header { min-height: 30px !important; padding: 0 18px 8px !important; border: 0 !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header > span { color: #8b93a6 !important; font-size: 10px !important; line-height: 13px !important; letter-spacing: 0.04em; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list, .ticket-list) { border-top: 1px solid #eef2f6; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-card, .incident-ticket-card, .ticket-card) { min-height: 64px !important; padding: 12px 18px !important; border: 0 !important; border-bottom: 1px solid #eef2f6 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-card, .incident-ticket-card, .ticket-card)::before { display: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list > .incident-card:last-child, .ticket-list > .ticket-card:last-child) { border-bottom: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-title, .ticket-title) { font-size: 13px !important; line-height: 18px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-type, .incident-location, .incident-created-at, .incident-comment-preview, .incident-ticket-description, .ticket-row-summary-type, .ticket-row-summary-site, .ticket-row-summary-updated, .ticket-row-summary-comment, .ticket-row-summary-requested) { font-size: 11px !important; line-height: 15px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-empty-state { min-height: 220px !important; padding: 28px 18px 24px !important; border-top: 1px solid #eef2f6; align-items: flex-start; justify-content: flex-start; gap: 8px; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important; color: #697286; } body.soc-desktop-shell #alertsView .soc-focus-cta { padding: 12px 14px; border: 1px solid #f5d8c3; border-radius: 14px; background: #fff6f0; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head { padding: 16px 18px 12px !important; border: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 { font-size: 16px !important; line-height: 22px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions { gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi { padding: 0 18px !important; gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item { min-height: 58px !important; padding: 10px !important; border: 1px solid #edf1f6 !important; border-radius: 12px !important; background: #f8fafc !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section { padding: 12px 18px 0 !important; gap: 6px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title { font-size: 11px !important; line-height: 15px !important; color: #7d8699 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.soc-pc-side-panel-summary, .soc-pc-side-panel-thread) { border: 1px solid #edf1f6 !important; border-radius: 12px !important; background: #fbfcff !important; padding: 10px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form { margin: 12px 18px 0 !important; padding: 10px !important; border: 1px solid #edf1f6 !important; border-radius: 12px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-input { min-height: 36px !important; height: 36px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions { padding: 12px 18px 18px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-summary.hidden { display: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-empty-state { min-height: 180px !important; padding: 24px 18px 20px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-head { padding-bottom: 6px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-head-actions, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-section, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-actions { display: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .meta { display: block !important; margin: 0 18px 0 !important; color: #7d8699 !important; font-size: 12px !important; line-height: 17px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection { min-height: 220px !important; align-self: start; } } /* ===== Phase 2 rebuild loop: analytics + support roster ===== */ @media (min-width: 1024px) { body.soc-desktop-shell #analyticsView .soc-analytics-v2-shell { display: block !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-main-column { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } body.soc-desktop-shell #analyticsView #analyticsHeroRow { grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr) !important; gap: 14px !important; align-items: stretch; } body.soc-desktop-shell #analyticsView :is(.soc-analytics-v2-card--risk, .soc-analytics-v2-card--kpis, .soc-analytics-v2-card--table, .soc-analytics-v2-card--detail) { border-radius: 16px !important; border-color: #e7ecf3 !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #analyticsView :is(.soc-analytics-v2-card--risk, .soc-analytics-v2-card--kpis) { padding: 18px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--table { padding: 14px 16px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail { position: static !important; top: auto !important; padding: 16px 18px !important; min-height: 0 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap, body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge, body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap { width: 112px !important; height: 112px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-track { stroke: #edf1f6 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-arc { stroke: var(--soc-primary) !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary-copy { display: none !important; } body.soc-desktop-shell #analyticsView :is(.soc-risk-grade.safe, .soc-risk-grade.stable) { border: 1px solid rgba(255, 106, 19, 0.22) !important; background: #fff1e8 !important; color: #c95a08 !important; } body.soc-desktop-shell #analyticsView .soc-risk-grade.caution { border: 1px solid rgba(255, 191, 60, 0.3) !important; background: #fff7df !important; color: #9a6700 !important; } body.soc-desktop-shell #analyticsView :is(.soc-risk-grade.danger, .soc-risk-grade.risk, .soc-risk-grade.critical) { border: 1px solid rgba(255, 107, 107, 0.28) !important; background: #fff1f1 !important; color: #c24141 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-rack { gap: 10px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile { min-height: 80px !important; border-radius: 12px !important; background: #fff9f5 !important; border-color: #f0e3d7 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-panel { border-radius: 14px !important; background: #fffaf7 !important; border-color: #f2e2d2 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head .meta { display: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-bar { background: #f7e9dd !important; border-radius: 999px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-safe { background: #ff8a3d !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-warning { background: #ffbf3c !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-danger { background: #ff6b6b !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot { background: #ff8a3d !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="warning"] .dot { background: #ffbf3c !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="danger"] .dot { background: #ff6b6b !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-toolbar { gap: 10px !important; margin-bottom: 10px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-controls { display: grid; grid-template-columns: minmax(240px, 1.3fr) minmax(160px, 0.55fr) minmax(180px, 0.7fr); gap: 10px; align-items: end; } body.soc-desktop-shell #analyticsView #analyticsComparisonContext { display: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-shell { border: 1px solid #edf1f6; border-radius: 14px; overflow: hidden; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head { min-height: 34px; padding: 0 16px; background: #fbfcfe; border-bottom: 1px solid #eef2f6; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row { min-height: 58px !important; padding: 0 16px !important; border-bottom: 1px solid #eef2f6 !important; background: #ffffff !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row:last-child { border-bottom: 0 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row.is-selected { background: #fff8f3 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-cell--state .soc-risk-grade { min-height: 26px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail[data-scope="overall"] { background: #fffaf7 !important; border-color: #f0dfd2 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail.is-compact-overall { padding: 14px 18px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail .soc-analytics-v2-card-head { padding-bottom: 12px !important; border-bottom: 1px solid #eef2f6 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail.is-compact-overall .soc-analytics-v2-card-head { padding-bottom: 10px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px !important; margin: 14px 0 12px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-chip { min-height: 76px; border-radius: 12px !important; border: 1px solid #f0e3d7 !important; background: #ffffff !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px !important; margin-bottom: 12px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-stat { min-height: 68px; border: 1px solid #edf1f6; border-radius: 12px; background: #fbfcfe; padding: 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-tabs { gap: 10px !important; padding-top: 10px !important; border-top: 1px solid #eef2f6; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-body { min-height: 0 !important; padding-top: 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail.is-compact-overall .soc-analytics-v2-detail-header-summary { margin-bottom: 10px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail.is-compact-overall .soc-analytics-v2-detail-meta { margin-bottom: 10px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail.is-compact-overall .soc-analytics-v2-detail-body { padding-top: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-overall-compact-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-overall-compact-item { min-height: 70px; padding: 12px; border: 1px solid #eef2f6; border-radius: 12px; background: #ffffff; display: grid; align-content: start; gap: 6px; } body.soc-desktop-shell #analyticsView .soc-analytics-overall-compact-item .label { font-size: 11px; line-height: 14px; color: #697286; } body.soc-desktop-shell #analyticsView .soc-analytics-overall-compact-item strong { font-size: 13px; line-height: 18px; color: #202430; } body.soc-desktop-shell #opsSupportPanel #opsSupportLayout { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.has-detail-panel { grid-template-columns: minmax(0, 1fr) minmax(340px, 396px) !important; } body.soc-desktop-shell #opsSupportPanel #opsSupportLayout:not(.has-detail-panel) #opsSupportSheet { display: none !important; } body.soc-desktop-shell #opsSupportPanel #opsSupportMain { width: 100%; min-width: 0; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-cell { min-height: 132px; border-radius: 12px; } body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet { max-width: 396px; } } /* ===== Phase 2 rebuild loop 3: analytics density + shople ring rhythm ===== */ @media (min-width: 1024px) { body.soc-desktop-shell #analyticsView .soc-analytics-v2-header { display: flex; align-items: end; justify-content: space-between; gap: 18px 24px; margin-bottom: 2px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy { display: grid; gap: 4px; min-width: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy h3 { margin: 0; font-size: 30px; line-height: 34px; letter-spacing: -0.03em; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar { display: grid; grid-template-columns: auto auto auto; align-items: end; gap: 10px 12px; padding: 12px 14px !important; border: 1px solid #e7ecf3 !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-group { gap: 6px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-group--actions { align-self: stretch; justify-self: end; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-group--scope { min-width: 220px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-label { font-size: 11px !important; line-height: 14px !important; color: #7d8699 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-range-quick { gap: 6px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-range-quick .ds-btn, body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-picker-trigger, body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-actions .ds-btn, body.soc-desktop-shell #analyticsView .soc-analytics-v2-custom-range :is(input, .ds-btn) { min-height: 34px !important; height: 34px !important; border-radius: 10px !important; font-size: 12px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-shell { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 16px !important; align-items: start; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-shell.has-detail-panel { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.4fr); } body.soc-desktop-shell #analyticsView .soc-analytics-v2-main-column { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; } body.soc-desktop-shell #analyticsView #analyticsHeroRow { grid-template-columns: minmax(296px, 0.62fr) minmax(0, 1.38fr) !important; gap: 12px !important; align-items: stretch; } body.soc-desktop-shell #analyticsView :is(.soc-analytics-v2-card--risk, .soc-analytics-v2-card--kpis, .soc-analytics-v2-card--table, .soc-analytics-v2-card--detail) { border: 1px solid #e7ecf3 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #analyticsView :is(.soc-analytics-v2-card--risk, .soc-analytics-v2-card--kpis) { padding: 16px 18px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card-head { padding: 0 !important; border: 0 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--risk { display: grid; align-content: start; gap: 12px; background: #ffffff !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--risk .soc-analytics-v2-title-with-help { align-items: center; gap: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--risk .soc-risk-info-trigger { min-width: 26px; min-height: 26px; width: 26px; height: 26px; padding: 0; border-radius: 999px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 14px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap, body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge, body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap { width: 110px !important; height: 110px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-track { stroke: #edf1f6 !important; stroke-width: 12px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-arc { stroke: var(--soc-primary) !important; stroke-width: 12px !important; stroke-linecap: round; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap strong { font-size: 22px !important; line-height: 1 !important; letter-spacing: -0.04em; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-label { font-size: 10px; line-height: 13px; letter-spacing: 0.04em; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary { display: grid; align-content: start; gap: 10px; min-width: 0; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-badge-row { display: flex; align-items: center; gap: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary-copy { display: block !important; margin: 0; color: #3b4458; font-size: 13px; line-height: 18px; font-weight: 600; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item { min-height: 56px; padding: 10px 11px; border: 1px solid #edf1f6; border-radius: 12px; background: #ffffff; display: grid; align-content: start; gap: 4px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item:last-child { grid-column: 1 / -1; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item .label { color: #7d8699; font-size: 10px; line-height: 13px; letter-spacing: 0.04em; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item strong { color: #202430; font-size: 13px; line-height: 18px; } body.soc-desktop-shell #analyticsView .soc-risk-grade.safe, body.soc-desktop-shell #analyticsView .soc-risk-grade.stable { border: 1px solid #cfe6df !important; background: #ffffff !important; color: #178f79 !important; } body.soc-desktop-shell #analyticsView .soc-risk-grade.caution { border: 1px solid #ffd79c !important; background: #ffffff !important; color: #9a6700 !important; } body.soc-desktop-shell #analyticsView .soc-risk-grade.danger, body.soc-desktop-shell #analyticsView .soc-risk-grade.risk, body.soc-desktop-shell #analyticsView .soc-risk-grade.critical { border: 1px solid #ffc0c0 !important; background: #ffffff !important; color: #d35151 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--kpis { display: grid; align-content: start; gap: 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-cluster { display: grid; gap: 12px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-rack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile { min-height: 82px !important; height: 82px !important; padding: 12px 14px !important; border: 1px solid #edf1f6 !important; border-radius: 12px !important; background: #ffffff !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile .label { color: #7d8699; font-size: 11px; line-height: 15px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile strong { color: #202430; font-size: 16px; line-height: 22px; letter-spacing: -0.02em; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-panel { padding: 12px 14px !important; border: 1px solid #edf1f6 !important; border-radius: 14px !important; background: #ffffff !important; display: grid; gap: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head { align-items: start; gap: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head .label { color: #7d8699; font-size: 11px; line-height: 14px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head strong { color: #202430; font-size: 15px; line-height: 20px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-bar { height: 10px; border-radius: 999px !important; background: #eef2f6 !important; overflow: hidden; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-safe { background: #94a3b8 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-warning { background: #ffbf3c !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-danger { background: #ff6b6b !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item { min-height: 52px; padding: 8px 10px; border: 1px solid #edf1f6; border-radius: 12px; background: #ffffff; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot { background: #94a3b8 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="warning"] .dot { background: #ffbf3c !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="danger"] .dot { background: #ff6b6b !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--table { padding: 14px 16px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-toolbar { display: grid; gap: 10px !important; margin-bottom: 12px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-controls { display: grid; grid-template-columns: minmax(260px, 1.42fr) minmax(140px, 0.55fr) minmax(220px, 0.82fr); align-items: end; gap: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-control-field { gap: 6px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-control-field label { color: #7d8699; font-size: 11px; line-height: 14px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-control-field :is(input, select) { min-height: 36px; height: 36px; border-radius: 10px; } body.soc-desktop-shell #analyticsView #analyticsComparisonContext { display: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-shell { border: 1px solid #edf1f6; border-radius: 14px; overflow: hidden; background: #ffffff; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head { min-height: 36px; padding: 0 14px; background: #fbfcfe; border-bottom: 1px solid #eef2f6; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head :is(button, span) { color: #7d8699; font-size: 10px; line-height: 13px; letter-spacing: 0.04em; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-body { height: auto !important; max-height: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row { min-height: 60px !important; padding: 0 14px !important; border: 0 !important; border-bottom: 1px solid #eef2f6 !important; background: #ffffff !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row:last-child { border-bottom: 0 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row.is-selected { background: #fff6ef !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-cell--name strong { font-size: 13px; line-height: 18px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-cell--name small, body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-cell, body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-cell--trend { font-size: 11px; line-height: 15px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail { position: sticky !important; top: 16px !important; padding: 16px 18px !important; min-height: 0 !important; align-self: start; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail.hidden { display: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail .soc-analytics-v2-card-head { padding-bottom: 12px !important; border-bottom: 1px solid #eef2f6 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; margin: 12px 0 10px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-chip { min-height: 64px; padding: 10px 12px; border: 1px solid #edf1f6 !important; border-radius: 12px !important; background: #fbfcfe !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-chip .label { font-size: 10px; line-height: 13px; color: #7d8699; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-chip strong { font-size: 13px; line-height: 18px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-tabs { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0 0 8px !important; border-top: 0 !important; border-bottom: 1px solid #eef2f6; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-tabs button { min-height: 0; height: auto; padding: 0 0 8px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #697286; font-size: 12px; line-height: 16px; font-weight: 600; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-tabs button.is-active { border-bottom-color: var(--soc-primary); color: var(--soc-primary-deep); } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; margin: 12px 0 10px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-stat { min-height: 56px; padding: 10px 12px; border: 1px solid #edf1f6; border-radius: 12px; background: #ffffff; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-body { min-height: 0 !important; padding-top: 0 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-detail-stack { gap: 10px; } body.soc-desktop-shell #analyticsView .soc-analytics-detail-section { gap: 8px; } body.soc-desktop-shell #analyticsView .soc-mini-row.soc-analytics-overview-row, body.soc-desktop-shell #analyticsView .soc-analytics-detail-list-item, body.soc-desktop-shell #analyticsView .soc-analytics-breakdown-row { border-radius: 12px; border: 1px solid #edf1f6; background: #fbfcfe; } } /* ===== Phase 3 rebuild loop 1: people workspace / shople members rhythm ===== */ @media (min-width: 1024px) { body.soc-desktop-shell #peopleView { gap: 14px; } body.soc-desktop-shell #peopleView .soc-people-admin-header-wrap { display: grid; gap: 8px; margin-bottom: 0; } body.soc-desktop-shell #peopleView .soc-people-admin-title-row { display: flex; align-items: end; justify-content: space-between; gap: 16px; } body.soc-desktop-shell #peopleView .soc-people-admin-title-block { gap: 2px; } body.soc-desktop-shell #peopleView .soc-people-admin-title-block h3 { margin: 0; font-size: 30px; line-height: 34px; letter-spacing: -0.03em; } body.soc-desktop-shell #peopleView .soc-people-pane-summary { display: grid; gap: 10px !important; padding: 14px 16px !important; border: 1px solid #e7ecf3 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView .soc-people-pane-summary-head { align-items: end; justify-content: space-between; gap: 12px; } body.soc-desktop-shell #peopleView .soc-people-pane-summary-eyebrow { margin: 0; color: #7d8699; font-size: 10px; line-height: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body.soc-desktop-shell #peopleView .soc-people-pane-summary-head h3 { margin: 0; font-size: 18px; line-height: 24px; letter-spacing: -0.02em; } body.soc-desktop-shell #peopleView .soc-people-segment-rail { gap: 6px !important; } body.soc-desktop-shell #peopleView .soc-people-segment-btn { min-height: 32px !important; height: 32px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 12px !important; line-height: 16px !important; border-color: #e6eaf1 !important; background: #ffffff !important; color: #697286 !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView .soc-people-segment-btn.is-active, body.soc-desktop-shell #peopleView .soc-people-segment-btn[aria-pressed="true"] { border-color: rgba(255, 106, 19, 0.22) !important; background: #fff3ea !important; color: #c95a08 !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-card { gap: 10px !important; padding: 12px 14px !important; border: 1px solid #edf1f6 !important; border-radius: 14px !important; background: #fbfcfe !important; box-shadow: none !important; min-height: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-primary, body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-success, body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-accent { background: #fbfcfe !important; border-color: #edf1f6 !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-head { gap: 8px; } body.soc-desktop-shell #peopleView .soc-people-kpi-icon { width: 30px; height: 30px; border-radius: 10px; background: #fff1e8; color: var(--soc-primary); } body.soc-desktop-shell #peopleView .soc-people-kpi-icon svg { width: 18px; height: 18px; } body.soc-desktop-shell #peopleView .soc-people-kpi-copy h4 { font-size: 13px; line-height: 18px; } body.soc-desktop-shell #peopleView .soc-people-kpi-donut-row { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; } body.soc-desktop-shell #peopleView .soc-people-donut { width: 96px; height: 96px; } body.soc-desktop-shell #peopleView .soc-people-donut::after { inset: 12px; background: #ffffff; } body.soc-desktop-shell #peopleView .soc-people-donut-center { width: min(62px, calc(100% - 28px)); gap: 1px; } body.soc-desktop-shell #peopleView .soc-people-donut-center span { font-size: 10px; line-height: 13px; } body.soc-desktop-shell #peopleView .soc-people-donut-center strong { font-size: 19px; line-height: 22px; } body.soc-desktop-shell #peopleView .soc-people-kpi-legend { gap: 6px; } body.soc-desktop-shell #peopleView .soc-people-kpi-legend-row, body.soc-desktop-shell #peopleView .soc-people-kpi-inline-row, body.soc-desktop-shell #peopleView .soc-people-bar-row-head { font-size: 12px; line-height: 16px; } body.soc-desktop-shell #peopleView .soc-people-progress, body.soc-desktop-shell #peopleView .soc-people-bar-track { height: 8px; } body.soc-desktop-shell #peopleView .soc-people-kpi-number-block strong { font-size: 24px; line-height: 28px; letter-spacing: -0.03em; } body.soc-desktop-shell #peopleView .soc-people-kpi-number-block span { font-size: 11px; line-height: 15px; } body.soc-desktop-shell #peopleView .soc-people-kpi-subsection { display: grid; gap: 8px; padding-top: 2px; border-top: 1px solid #eef2f6; } body.soc-desktop-shell #peopleView .soc-people-kpi-subsection-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #7d8699; font-size: 10px; line-height: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } body.soc-desktop-shell #peopleView .soc-people-bar-row.is-compact { gap: 4px; } body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar { display: grid; gap: 8px; padding: 12px 14px !important; border: 1px solid #e7ecf3 !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-row { align-items: end; gap: 12px; } body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-main { gap: 10px; } body.soc-desktop-shell #peopleView :is(.soc-employee-directory-toolbar-main, .soc-monitoring-toolbar-controls) .soc-inline-field { gap: 6px; } body.soc-desktop-shell #peopleView :is(.soc-employee-directory-field > span, .soc-monitoring-toolbar-field > span) { color: #7d8699; font-size: 11px; line-height: 14px; font-weight: 700; padding-left: 0; } body.soc-desktop-shell #peopleView .soc-employee-directory-search { flex: 1 1 360px; } body.soc-desktop-shell #peopleView .soc-employee-directory-field:not(.soc-employee-directory-search), body.soc-desktop-shell #peopleView .soc-monitoring-toolbar-field:not(.soc-monitoring-toolbar-search) { flex: 0 1 150px; } body.soc-desktop-shell #peopleView :is(.soc-employee-directory-toolbar-main, .soc-monitoring-toolbar-controls) :is(input, select, .ds-input, .ds-select), body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-utility .ds-btn { min-height: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 12px !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar-note { display: block !important; margin: 0; color: #7d8699; font-size: 11px; line-height: 15px; } body.soc-desktop-shell #peopleView .soc-people-directory-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } body.soc-desktop-shell #peopleView .soc-people-directory-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) 360px !important; } body.soc-desktop-shell #peopleView .soc-people-directory-layout:not(.has-detail-panel) .soc-people-detail-panel { display: none !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-grid { border: 1px solid #e7ecf3 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView .soc-workspace-card-head { padding: 14px 16px 10px !important; border: 0 !important; } body.soc-desktop-shell #peopleView .soc-workspace-card-head h3 { font-size: 15px; line-height: 20px; } body.soc-desktop-shell #peopleView .soc-employee-directory-grid-wrap { border-top: 1px solid #eef2f6; } body.soc-desktop-shell #peopleView .soc-employee-directory-table th, body.soc-desktop-shell #peopleView .soc-employee-directory-table td { padding: 10px 12px; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th { background: #fbfcfe; font-size: 10px; line-height: 13px; letter-spacing: 0.04em; color: #7d8699; } body.soc-desktop-shell #peopleView .soc-employee-directory-table tbody td { font-size: 12px; line-height: 17px; } body.soc-desktop-shell #peopleView .soc-people-table-identity { gap: 10px; } body.soc-desktop-shell #peopleView .soc-people-avatar { width: 36px; height: 36px; font-size: 11px; background: #fff1e8; color: #c95a08; } body.soc-desktop-shell #peopleView .soc-people-detail-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid #e7ecf3 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: none !important; position: sticky; top: 16px; max-height: calc(100vh - 96px); overflow: hidden; } body.soc-desktop-shell #peopleView .soc-people-detail-panel-head { padding: 14px 16px 10px; border-bottom: 1px solid #eef2f6; } body.soc-desktop-shell #peopleView .soc-people-detail-panel-heading h3 { color: #202430; font-size: 16px; line-height: 22px; letter-spacing: -0.02em; } body.soc-desktop-shell #peopleView .soc-people-detail-panel-heading .meta { display: block; color: #7d8699; font-size: 11px; line-height: 15px; } body.soc-desktop-shell #peopleView .soc-people-detail-summary { display: none !important; } body.soc-desktop-shell #peopleView .soc-people-detail-panel-body { padding: 12px 16px 16px; } body.soc-desktop-shell #peopleView .soc-people-detail-empty { min-height: 180px; align-content: start; gap: 8px; padding: 14px; border-style: solid; border-color: #edf1f6; background: #fbfcfe; } body.soc-desktop-shell #peopleView .soc-people-detail-panel-actions { padding: 12px 16px 16px; border-top: 1px solid #eef2f6; background: #ffffff; } body.soc-desktop-shell #peopleView .soc-people-employee-detail-shell { gap: 14px; } body.soc-desktop-shell #peopleView .soc-people-employee-hero { gap: 12px; padding: 0 0 12px; } body.soc-desktop-shell #peopleView .soc-people-employee-avatar { width: 56px; height: 56px; border-radius: 16px; font-size: 16px; background: #fff1e8; color: #c95a08; box-shadow: none; } body.soc-desktop-shell #peopleView .soc-people-employee-hero-copy strong { font-size: 22px; line-height: 26px; } body.soc-desktop-shell #peopleView .soc-people-employee-hero-copy .meta, body.soc-desktop-shell #peopleView .soc-people-employee-hero-context { font-size: 12px; line-height: 16px; } body.soc-desktop-shell #peopleView .soc-people-employee-tab-rail { gap: 14px; padding-bottom: 10px; } body.soc-desktop-shell #peopleView .soc-people-employee-tab-btn { padding-bottom: 8px; font-size: 12px; line-height: 16px; } body.soc-desktop-shell #peopleView .soc-people-employee-tab-btn::after { bottom: -10px; } body.soc-desktop-shell #peopleView .soc-people-employee-info-card { grid-template-columns: minmax(76px, auto) minmax(0, 1fr); gap: 10px; padding: 10px 0; } body.soc-desktop-shell #peopleView .soc-people-employee-info-card strong { font-size: 14px; line-height: 20px; } body.soc-desktop-shell #peopleView .soc-people-employee-info-card.is-prominent strong { font-size: 19px; line-height: 24px; } } /* ===== Phase 3 rebuild loop 2c: people accounts / stats / score eof overrides ===== */ @media (min-width: 1200px) { body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-people-kpi-strip, body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid, body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card { border: 1px solid #e7ecf3 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-wrap { border-top: 1px solid #eef2f6; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table th, body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table td { padding: 10px 12px !important; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table thead th { background: #fbfcfe; font-size: 10px; line-height: 13px; letter-spacing: 0.04em; color: #7d8699; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table tbody td { font-size: 12px; line-height: 17px; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-primary { color: #202430; font-size: 13px; line-height: 18px; font-weight: 700; } body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-secondary { color: #7d8699; font-size: 11px; line-height: 15px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 14px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(1) { order: 3 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(2) { order: 2 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(3) { order: 1 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(4) { order: 4 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-workspace-card-head { padding: 14px 16px 10px !important; border: 0 !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-workspace-card-head h3 { color: #202430; font-size: 15px; line-height: 20px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell { padding: 4px 16px 16px !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-trend-chart { min-height: 180px !important; align-items: end; gap: 10px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-trend-bars { height: 112px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card:nth-child(4) { display: none !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-main-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-main-grid { grid-template-columns: minmax(0, 1fr) 360px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel { position: static !important; top: auto !important; max-height: none !important; align-self: stretch !important; } body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-detail-panel { position: sticky !important; top: 16px !important; align-self: start !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-filter-bar, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-primary-card, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-ranking-section, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel { border: 1px solid #e7ecf3 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card { min-height: 214px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-visual { min-height: 100px; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-site-row { padding: 12px 14px !important; border-radius: 12px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table th, body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table td { padding: 10px 12px !important; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table th { background: #fbfcfe; font-size: 10px; line-height: 13px; letter-spacing: 0.04em; color: #7d8699; } body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table td { font-size: 12px; line-height: 17px; } } /* ===== Pass20b sidebar alignment winner overrides ===== */ body.nav-open #menuSheetPanel .soc-menu-submenu-list { padding: 2px 0 0 0 !important; } body.nav-open #menuSheetPanel .soc-menu-subitem, body.nav-open #menuSheetPanel .soc-menu-sub-item--nested { margin-inline: 0 !important; } body.nav-open #menuSheetPanel .soc-menu-sub-item--nested { min-height: 34px !important; padding: 0 12px !important; grid-template-columns: 18px minmax(0, 1fr) !important; gap: 10px !important; } body.nav-open #menuSheetPanel .soc-menu-sub-item--nested .soc-menu-submenu-bullet { justify-self: center; align-self: center; } @media (min-width: 1024px) { body.soc-desktop-shell #menuSheetPanel .pc-sidebar-only .soc-menu-submenu-list { padding: 2px 0 0 0 !important; gap: 2px !important; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item--nested { margin: 0 12px !important; min-height: 34px !important; padding: 0 12px !important; grid-template-columns: 18px minmax(0, 1fr) !important; gap: 10px !important; border-radius: 10px !important; } body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item--nested .soc-menu-submenu-bullet { justify-self: center; align-self: center; } } /* ===== Pass20c analytics hierarchy + fixed 5-row comparison pager ===== */ body.soc-desktop-shell #analyticsView .soc-analytics-v2-card-head { margin-bottom: 14px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-section-title { margin: 0 !important; font-size: 20px !important; line-height: 28px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #202430 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-title-with-help { display: inline-flex !important; align-items: flex-start !important; gap: 8px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--risk, body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--kpis { min-height: 264px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--risk { background: #ffffff !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body { grid-template-columns: 136px minmax(0, 1fr) !important; gap: 18px !important; min-height: 0 !important; align-items: center !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap { position: relative !important; width: 136px !important; height: 136px !important; display: grid !important; place-items: center !important; justify-self: start !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge { width: 136px !important; height: 136px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 0 !important; text-align: center !important; transform: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap strong, body.soc-desktop-shell #analyticsView #analyticsRiskScoreValue { font-size: 42px !important; line-height: 1 !important; letter-spacing: -0.05em !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-label { font-size: 11px !important; line-height: 15px !important; font-weight: 700 !important; color: #697286 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary-copy { font-size: 14px !important; line-height: 20px !important; color: #202430 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item { min-height: 64px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item .label, body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile .label, body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item .label, body.soc-desktop-shell #analyticsView .soc-analytics-v2-control-field label { font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item strong { font-size: 15px !important; line-height: 20px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile { min-height: 84px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile strong { font-size: 20px !important; line-height: 1.15 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head .label { font-size: 16px !important; line-height: 22px !important; font-weight: 800 !important; color: #202430 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head strong { font-size: 14px !important; line-height: 19px !important; color: #697286 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-safe, body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot { background: #18b26b !important; } body.soc-desktop-shell #analyticsView :is(.soc-risk-grade.safe, .soc-risk-grade.stable) { border-color: rgba(24, 178, 107, 0.42) !important; background: #ffffff !important; color: #0f8a51 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--table { --analytics-comparison-row-height: 68px; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-shell { grid-template-rows: auto minmax(0, 1fr) auto !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head { min-height: 44px !important; padding: 0 16px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head :is(button, span) { font-size: 12px !important; line-height: 16px !important; letter-spacing: -0.01em !important; font-weight: 700 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-body { display: grid !important; grid-auto-rows: var(--analytics-comparison-row-height) !important; min-height: calc(var(--analytics-comparison-row-height) * 5) !important; max-height: calc(var(--analytics-comparison-row-height) * 5) !important; height: calc(var(--analytics-comparison-row-height) * 5) !important; overflow: hidden !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row { min-height: var(--analytics-comparison-row-height) !important; height: var(--analytics-comparison-row-height) !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row.is-placeholder { pointer-events: none !important; background: #ffffff !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row.is-placeholder > * { opacity: 0 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-site-list-empty { display: grid !important; place-items: center !important; min-height: 100% !important; padding: 16px !important; color: #697286 !important; font-size: 13px !important; line-height: 18px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-footer { display: flex !important; justify-content: center !important; align-items: center !important; min-height: 56px !important; padding: 10px 16px !important; border-top: 1px solid #eef2f6 !important; background: #fbfcfe !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-pager { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-pager.hidden { display: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-page-btn { min-width: 34px !important; height: 34px !important; padding: 0 10px !important; border: 1px solid #d7dee8 !important; border-radius: 10px !important; background: #ffffff !important; color: #445067 !important; font-size: 13px !important; line-height: 1 !important; font-weight: 700 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-page-btn.is-active { border-color: #ff6a13 !important; background: #fff4eb !important; color: #ff6a13 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-page-btn:disabled { opacity: 0.42 !important; cursor: default !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-page-ellipsis { color: #8a94a6 !important; font-size: 13px !important; line-height: 1 !important; font-weight: 700 !important; } /* ===== Pass21 page header hierarchy audit ===== */ @media (min-width: 1024px) { body.soc-desktop-shell { --soc-workspace-page-title-size: 32px; --soc-workspace-page-title-line: 40px; --soc-workspace-page-title-weight: 800; } body.soc-desktop-shell .soc-workspace-page-title { margin: 0 !important; font-size: var(--soc-workspace-page-title-size) !important; line-height: var(--soc-workspace-page-title-line) !important; font-weight: var(--soc-workspace-page-title-weight) !important; letter-spacing: -0.03em !important; color: #202430 !important; } body.soc-desktop-shell :is( #homeView .soc-phase1-page-header-main, #alertsView .soc-phase1-page-header-main, #ticketsView .soc-phase1-page-header-main, #analyticsView .soc-analytics-v2-header-copy, #peopleView .soc-people-admin-title-block, #employeeScorePanel > .panel-title-row .soc-page-header-main, #opsSupportPanel > .panel-title-row .soc-page-header-main, #announcementPanel .workspace-head-main, #notificationPanel .soc-page-header-main, #notificationSettingsPanel .soc-page-header-main, #googleSheetsPanel .soc-apple-weekly-page-title-copy, #googleSheetsPanel > .panel-title-row .title-inline ) { display: grid !important; gap: 0 !important; min-width: 0 !important; } body.soc-desktop-shell :is( #homeView .soc-phase1-page-header, #alertsView .soc-phase1-page-header, #ticketsView .soc-phase1-page-header, #analyticsView .soc-analytics-v2-header, #peopleView .soc-people-admin-title-row, #employeeScorePanel > .panel-title-row, #opsSupportPanel > .panel-title-row, #announcementPanel .workspace-head, #notificationPanel .notification-panel-head, #notificationSettingsPanel .soc-settings-page-header, #googleSheetsPanel .soc-apple-weekly-page-head, #googleSheetsPanel > .panel-title-row ) { align-items: flex-start !important; gap: 12px !important; margin-bottom: 18px !important; padding-top: 4px !important; } body.soc-desktop-shell .soc-phase1-kicker { display: none !important; } body.soc-desktop-shell :is( #homeView .soc-phase1-page-header-main, #alertsView .soc-phase1-page-header-main, #ticketsView .soc-phase1-page-header-main ) { gap: 0 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-header { padding-top: 4px !important; padding-bottom: 0 !important; border-bottom: 0 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy { gap: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-admin-header-wrap { gap: 14px !important; margin-bottom: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-admin-title-row { align-items: flex-start !important; } body.soc-desktop-shell :is( #employeeScoreSummaryText, #noticesViewSubtitle, #opsSupportPanel > .panel-title-row .help ) { display: none !important; } body.soc-desktop-shell :is( #announcementPanel .workspace-head, #notificationPanel .notification-panel-head, #notificationSettingsPanel .soc-settings-page-header, #googleSheetsPanel .soc-apple-weekly-page-head ) { max-width: none !important; width: 100% !important; margin-inline: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) > .soc-phase1-ops-surface, body.soc-desktop-shell #ticketsView .soc-ops-workspace-frame { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; gap: 18px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header { padding: 4px 0 2px !important; margin-bottom: 0 !important; border-bottom: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) :is( .soc-realtime-datebar, #realtimeActiveFilters, #ticketsActiveFilters, #realtimeSummaryGrid, #ticketSummaryGrid, .soc-ops-workspace-main, .soc-phase1-tab-rail, #focusFallbackCta ) { margin-inline: 0 !important; } } /* ===== Pass22 section title hierarchy audit ===== */ @media (min-width: 1024px) { body.soc-desktop-shell { --soc-workspace-section-title-size: 20px; --soc-workspace-section-title-line: 28px; --soc-workspace-section-title-weight: 800; --soc-workspace-card-title-size: 16px; --soc-workspace-card-title-line: 24px; --soc-workspace-card-title-weight: 700; --soc-workspace-micro-title-size: 14px; --soc-workspace-micro-title-line: 20px; --soc-workspace-micro-title-weight: 700; } body.soc-desktop-shell :is( #analyticsView .soc-analytics-v2-section-title, #peopleView .soc-people-pane-summary-head h3, #employeeScorePanel .soc-employee-score-filter-bar .soc-workspace-card-head h3, #googleSheetsPanel .soc-apple-weekly-flow-header h3 ) { margin: 0 !important; font-size: var(--soc-workspace-section-title-size) !important; line-height: var(--soc-workspace-section-title-line) !important; font-weight: var(--soc-workspace-section-title-weight) !important; letter-spacing: -0.025em !important; color: #202430 !important; } body.soc-desktop-shell :is( #homeView #homeWeeklyBriefing .soc-home-briefing-title h3, #homeView #homeHeroStatus .soc-hero-status-head h3, #homeView :is(#homeTrend7d, #homeTicketBlock) .soc-block-head h3, #homeView :is(#homeRiskSignals, #homeActionNeededBlock, #homeRecentBlock) > h3, #alertsView .soc-alerts-feed-head h3, #ticketsView .soc-alerts-feed-head h3, #alertsView .soc-pc-side-panel-head h4, #ticketsView .soc-pc-side-panel-head h4, #peopleView .soc-workspace-card-head h3, #employeeScorePanel :is(#employeeScoreSiteComparisonSection, #employeeScoreRankingSection, #employeeScoreSiteInsightPanel) .soc-workspace-card-head h3, #googleSheetsPanel .soc-apple-weekly-setup-section-head h4 ) { margin: 0 !important; font-size: var(--soc-workspace-card-title-size) !important; line-height: var(--soc-workspace-card-title-line) !important; font-weight: var(--soc-workspace-card-title-weight) !important; letter-spacing: -0.02em !important; color: #202430 !important; } body.soc-desktop-shell :is( #peopleView .soc-people-kpi-copy h4, #peopleView .soc-people-kpi-subsection-head, #googleSheetsPanel .soc-apple-weekly-guide-card h4, #googleSheetsPanel .soc-apple-weekly-setup-callout strong, #googleSheetsPanel .soc-apple-weekly-setup-callout h5 ) { font-size: var(--soc-workspace-micro-title-size) !important; line-height: var(--soc-workspace-micro-title-line) !important; font-weight: var(--soc-workspace-micro-title-weight) !important; letter-spacing: -0.01em !important; } body.soc-desktop-shell :is( #homeView .soc-block-head, #alertsView .soc-alerts-feed-head, #ticketsView .soc-alerts-feed-head, #alertsView .soc-pc-side-panel-head, #ticketsView .soc-pc-side-panel-head, #peopleView .soc-workspace-card-head, #employeeScorePanel .soc-workspace-card-head, #googleSheetsPanel .soc-apple-weekly-flow-header, #googleSheetsPanel .soc-apple-weekly-setup-section-head ) { align-items: flex-start !important; gap: 10px !important; } body.soc-desktop-shell #homeView :is( #homeWeeklyBriefing .soc-block-head, #homeHeroStatus .soc-hero-status-head ) { min-height: 24px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card-head { margin-bottom: 12px !important; } body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-flow-header { gap: 8px !important; } body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-setup-section-head { margin-bottom: 0 !important; } } /* ===== Pass23 row baseline audit ===== */ @media (min-width: 1024px) { body.soc-desktop-shell #homeView > :is( .soc-home-row--briefing, .soc-home-row--analysis, .soc-home-row--activity ) { align-items: stretch !important; } body.soc-desktop-shell #homeView > .soc-home-row--briefing > :is(#homeWeeklyBriefing, #homeHeroStatus), body.soc-desktop-shell #homeView > .soc-home-row--analysis > :is(#homeTrend7d, .soc-home-support-stack), body.soc-desktop-shell #homeView > .soc-home-row--activity > :is(#homeTicketBlock, #homeRecentBlock) { height: 100% !important; min-height: 0 !important; } body.soc-desktop-shell #homeView > .soc-home-row--analysis .soc-home-support-stack { display: grid !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; align-content: stretch !important; gap: 10px !important; } body.soc-desktop-shell #homeView :is( #homeHeroStatus, #homeTrend7d, #homeTicketBlock, #homeRecentBlock, #homeRiskSignals, #homeActionNeededBlock ) { display: grid !important; align-content: start !important; } body.soc-desktop-shell #homeView #homeHeroStatus { grid-template-rows: auto auto minmax(0, 1fr) !important; } body.soc-desktop-shell #homeView #homeTrend7d { grid-template-rows: auto minmax(0, 1fr) auto !important; } body.soc-desktop-shell #homeView #homeTicketBlock { grid-template-rows: auto auto minmax(0, 1fr) auto !important; } body.soc-desktop-shell #homeView :is(#homeRecentBlock, #homeRiskSignals, #homeActionNeededBlock) { grid-template-rows: auto minmax(0, 1fr) !important; } body.soc-desktop-shell #homeView :is(#homeRiskSignalsList, #homeActionNeededList, #homeRecentList) { align-content: start !important; } } /* ===== Pass24 rhythm + chrome audit ===== */ @media (min-width: 1024px) { body.soc-desktop-shell #homeView #homeTicketBlock { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 16px 18px 16px !important; } body.soc-desktop-shell #homeView #homeTicketBlock .soc-block-head { margin-bottom: 0 !important; } body.soc-desktop-shell #homeView #homeTicketPendingMeta { margin: 0 !important; } body.soc-desktop-shell #homeView #homeTicketBlock .soc-ticket-mini-dist { margin: 0 !important; gap: 6px !important; } body.soc-desktop-shell #homeView #homeTicketPendingList { margin-top: 2px !important; } body.soc-desktop-shell #homeView #homeTicketPendingBtn { margin-top: auto !important; align-self: flex-start !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--risk, body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--kpis { min-height: 244px !important; padding: 14px 16px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card-head { margin-bottom: 8px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body { grid-template-columns: 128px minmax(0, 1fr) !important; gap: 14px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap, body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge { width: 128px !important; height: 128px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary { gap: 8px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-badge-row { padding-inline-start: 20px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta { gap: 8px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item { min-height: 0 !important; padding: 10px 12px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-cluster { gap: 8px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-rack { gap: 0 !important; border: 1px solid #edf1f6 !important; border-radius: 14px !important; background: #fafbfd !important; overflow: hidden !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile { min-height: 0 !important; padding: 12px 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile + .soc-analytics-v2-kpi-tile { border-left: 1px solid #edf1f6 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-panel { gap: 10px !important; padding: 12px 0 0 !important; border: 0 !important; border-top: 1px solid #edf1f6 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head { gap: 4px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-bar { height: 8px !important; background: #e6eaf1 !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-legend { gap: 8px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--table, body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail { padding: 14px 16px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-toolbar { gap: 10px !important; margin-bottom: 12px !important; } body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail .soc-analytics-v2-card-head { margin-bottom: 10px !important; } body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-flow-shell { gap: 6px !important; } body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-flow-header { gap: 6px !important; } body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-flow-main { padding: 14px !important; } body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-stage-surface { gap: 10px !important; } body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-setup-step-stack { gap: 10px !important; } body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-setup-section { gap: 10px !important; padding: 10px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-setup-section + .soc-apple-weekly-setup-section { padding-top: 14px !important; border-top: 1px solid #edf1f6 !important; } body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-setup-section-head { gap: 8px !important; } } /* ===== Pass25 detail rhythm + people chrome audit ===== */ @media (min-width: 1024px) { body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel { display: grid !important; align-content: start !important; gap: 10px !important; padding: 14px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head { padding: 0 !important; gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel > .meta, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions { margin: 0 !important; padding: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi { gap: 0 !important; border: 1px solid #edf1f6 !important; border-radius: 10px !important; background: #fafbfd !important; overflow: hidden !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item { min-height: 0 !important; padding: 10px 9px !important; border: 0 !important; border-right: 1px solid #edf1f6 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:last-child { border-right: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section { gap: 4px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title { font-size: 11px !important; line-height: 15px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #7d8699 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary { min-height: 56px !important; max-height: 108px !important; padding: 10px !important; border-radius: 10px !important; background: #fafbfd !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread { min-height: 132px !important; padding: 10px !important; border-radius: 10px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form { padding-top: 2px !important; border-top: 1px solid #edf1f6 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions { padding-top: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel { gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread { min-height: 88px !important; } body.soc-desktop-shell #peopleView .soc-people-pane-summary { gap: 8px !important; padding: 14px 16px !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-strip { gap: 0 !important; border: 1px solid #edf1f6 !important; border-radius: 16px !important; background: #fbfcfe !important; overflow: hidden !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-card { gap: 8px !important; padding: 14px 16px !important; border: 0 !important; border-right: 1px solid #edf1f6 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-card:last-child { border-right: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-primary, body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-success, body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-accent { background: transparent !important; border-color: #edf1f6 !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-head { gap: 6px !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-subsection { gap: 6px !important; padding-top: 0 !important; border-top: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-legend { gap: 4px !important; } body.soc-desktop-shell #peopleView .soc-people-kpi-legend-row, body.soc-desktop-shell #peopleView .soc-people-kpi-inline-row, body.soc-desktop-shell #peopleView .soc-people-bar-row-head { font-size: 11px !important; line-height: 15px !important; } } /* ===== Pass26 ops detail cleanup final ===== */ @media (min-width: 1024px) { body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 40px !important; min-width: 0 !important; padding: 0 12px !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #ffffff !important; flex: 1 1 460px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main:has(.soc-phase1-toolbar-summary.hidden) { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-topbar .soc-realtime-date-display { flex: 0 0 auto !important; width: auto !important; min-height: 36px !important; height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions { gap: 6px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions .ds-btn { min-height: 36px !important; height: 36px !important; padding: 0 12px !important; border-radius: 10px !important; font-size: 13px !important; line-height: 18px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; min-height: 82px !important; height: 82px !important; padding: 14px 16px 10px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head h3 { font-size: 16px !important; line-height: 24px !important; font-weight: 700 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-workspace-inline-summary { justify-content: flex-end !important; flex-wrap: wrap !important; gap: 6px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel { display: grid !important; align-content: start !important; gap: 12px !important; padding: 16px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; gap: 12px !important; padding: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 { font-size: 16px !important; line-height: 24px !important; font-weight: 700 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions { justify-content: flex-end !important; gap: 6px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions .ds-btn { min-height: 36px !important; height: 36px !important; padding: 0 12px !important; border-radius: 10px !important; font-size: 13px !important; line-height: 18px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-danger-btn { color: #d46464 !important; border-color: #f1d6d6 !important; background: #fffafa !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel > .meta { margin: 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 17px !important; color: #697286 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty { display: none; gap: 4px; padding-top: 2px; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-title { font-size: 15px; line-height: 22px; font-weight: 700; color: #202430; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-copy { margin: 0; font-size: 13px; line-height: 19px; color: #697286; word-break: keep-all; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #fafbfd !important; overflow: hidden !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item { min-width: 0 !important; min-height: 0 !important; padding: 12px 14px !important; border: 0 !important; border-right: 1px solid #e6eaf1 !important; border-bottom: 1px solid #e6eaf1 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:first-child { grid-column: 1 / -1 !important; border-right: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(2) { border-bottom: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(3) { border-right: 0 !important; border-bottom: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-label { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 11px !important; line-height: 15px !important; color: #7d8699 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-value { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 14px !important; line-height: 20px !important; font-weight: 700 !important; color: #202430 !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section { gap: 6px !important; margin: 0 !important; padding: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title { font-size: 12px !important; line-height: 17px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: #525d73 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary { min-height: 0 !important; max-height: none !important; padding: 12px !important; border-radius: 12px !important; background: #fafbfd !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv { gap: 8px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) !important; gap: 10px !important; align-items: start !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row dt { font-size: 12px !important; line-height: 17px !important; color: #7d8699 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row dd { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 12px !important; line-height: 18px !important; color: #202430 !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread { min-height: 112px !important; padding: 12px !important; border-radius: 12px !important; background: #ffffff !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form { margin: 0 !important; padding: 10px 0 0 !important; border: 0 !important; border-top: 1px solid #edf1f6 !important; border-radius: 0 !important; background: transparent !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions { margin: 0 !important; padding: 0 !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel { gap: 10px !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-empty { display: grid !important; } body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-head-actions, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-section, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-form, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-actions, body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection > .meta { display: none !important; } } /* ===== Ops support desktop final authority (2026-04-02 v2) ===== */ @media (min-width: 1024px) { html body.soc-desktop-shell #opsSupportPanel { --ops-support-rail-surface: #ffffff; --ops-support-rail-muted: #fafbfd; --ops-support-rail-border: #e6eaf1; --ops-support-rail-border-strong: #d7deea; --ops-support-rail-text: #202430; --ops-support-rail-subtle: #697286; --ops-support-neutral-bg: #ffffff; --ops-support-neutral-hover: #f7f9fc; --ops-support-neutral-border: #d7deea; --ops-support-pending-bg: #fff7e8; --ops-support-pending-border: #f1d49a; --ops-support-pending-text: #9c6700; --ops-support-pending-accent: #ffbf3c; --ops-support-approved-bg: #ebfbf7; --ops-support-approved-border: #98e1d4; --ops-support-approved-text: #117d69; --ops-support-approved-accent: #1ebfa3; --ops-support-danger-bg: #fff1f1; --ops-support-danger-border: #ffc6c6; --ops-support-danger-text: #bb5252; --ops-support-danger-accent: #ff6b6b; --ops-support-cancelled-bg: #f4f6f9; --ops-support-cancelled-border: #d6dde7; --ops-support-cancelled-text: #5f6b7c; --ops-support-cancelled-accent: #94a3b8; --ops-support-strong-primary: #ff6a13; --ops-support-strong-primary-border: #da5a0e; --ops-support-strong-primary-hover: #e75e0c; --ops-support-strong-danger: #ff6b6b; --ops-support-strong-danger-border: #d85151; --ops-support-strong-danger-hover: #eb5f5f; } html body.soc-desktop-shell #opsSupportPanel > .panel-title-row { margin-bottom: 8px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-workspace { gap: 10px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; align-items: start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) minmax(336px, 352px) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout:not(.has-detail-panel) #opsSupportSheet { display: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportMain.soc-ops-support-main { min-height: var(--ops-support-shared-height, 640px) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportSheet.soc-ops-support-sheet { height: var(--ops-support-shared-height, 640px) !important; max-height: var(--ops-support-shared-height, 640px) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main { display: flex !important; flex-direction: column !important; gap: 6px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-control-deck { display: grid !important; gap: 4px !important; flex: 0 0 auto !important; padding: 0 0 6px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar { display: grid !important; gap: 6px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-main-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-month-row { display: flex !important; align-items: center !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav { display: inline-flex !important; align-items: center !important; gap: 4px !important; min-height: 36px !important; padding: 0 8px !important; border: 1px solid var(--ops-support-neutral-border) !important; border-radius: 999px !important; background: #ffffff !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label, html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 28px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label { padding: 0 10px !important; font-size: 15px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow { width: 26px !important; height: 26px !important; border-radius: 999px !important; color: #7b8599 !important; font-size: 15px !important; font-weight: 700 !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label):hover, html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label):focus-visible { background: #f3f6fb !important; color: var(--ops-support-rail-text) !important; outline: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-system { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 6px 12px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 8px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters { display: inline-grid !important; grid-template-columns: repeat(2, minmax(104px, 128px)) !important; gap: 6px !important; width: auto !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-field { display: inline-flex !important; align-items: center !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-label { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control { min-width: 104px !important; max-width: 128px !important; height: 36px !important; padding: 0 10px !important; border: 1px solid var(--ops-support-neutral-border) !important; border-radius: 10px !important; background: #ffffff !important; color: var(--ops-support-rail-text) !important; font-size: 13px !important; font-weight: 600 !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-tools, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-action-row, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-action-row { justify-content: flex-end !important; flex-wrap: nowrap !important; margin-left: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-meta { display: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportActiveFilters { grid-column: 1 / -1 !important; display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 6px !important; padding-top: 2px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportActiveFilters.hidden { display: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more { position: relative !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions .ds-btn, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"] { min-height: 36px !important; height: 36px !important; padding: 0 12px !important; border-radius: 10px !important; font-size: 13px !important; line-height: 1 !important; font-weight: 700 !important; white-space: nowrap !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"] { border: 1px solid var(--ops-support-neutral-border) !important; background: #ffffff !important; color: #556177 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"].is-active { border-color: var(--ops-support-strong-primary) !important; background: var(--ops-support-strong-primary) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn { border: 1px solid var(--ops-support-neutral-border) !important; background: #ffffff !important; color: #556177 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn:hover, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn:focus-visible, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:hover, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:focus-visible { border-color: #c7d2df !important; background: #f7f9fc !important; color: #334155 !important; outline: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more[open] .soc-ops-support-filter-more-btn { border-color: rgba(255, 106, 19, 0.24) !important; background: rgba(255, 106, 19, 0.08) !important; color: var(--ops-support-strong-primary) !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-panel { top: calc(100% + 8px) !important; right: 0 !important; min-width: 188px !important; padding: 12px !important; border: 1px solid var(--ops-support-rail-border-strong) !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08) !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; min-height: 24px !important; padding: 0 8px !important; border: 1px solid rgba(255, 106, 19, 0.2) !important; border-radius: 999px !important; background: rgba(255, 106, 19, 0.08) !important; color: #c15510 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 700 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 6px 0 0 !important; margin: 0 !important; border-top: 1px solid #eef2f6 !important; border-bottom: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 12px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat { display: inline-flex !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat-label { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 11px !important; line-height: 14px !important; font-weight: 700 !important; color: #697286 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat > strong { font-size: 13px !important; line-height: 15px !important; font-weight: 800 !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel :is(#opsSupportCalendarView, #opsSupportListView) { min-height: 0 !important; overflow: visible !important; padding-right: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view { display: grid !important; grid-template-rows: auto auto !important; gap: 6px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays { gap: 6px !important; padding: 0 2px !important; margin: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays > span { font-size: 11px !important; line-height: 14px !important; font-weight: 700 !important; color: #7b8599 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; grid-auto-rows: minmax(144px, auto) !important; height: auto !important; min-height: 0 !important; gap: 6px !important; align-content: start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: 3px !important; min-height: 144px !important; height: auto !important; padding: 6px !important; overflow: hidden !important; border: 1px solid var(--ops-support-rail-border) !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head > strong { font-size: 13px !important; line-height: 18px !important; font-weight: 800 !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head > span { display: inline-flex !important; align-items: center !important; min-height: 18px !important; padding: 0 6px !important; border: 1px solid #e9edf3 !important; border-radius: 999px !important; background: #ffffff !important; color: #7d8699 !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-body { display: grid !important; gap: 3px !important; min-height: 0 !important; align-content: start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line, html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more { min-height: 24px !important; height: 24px !important; padding: 0 7px 0 9px !important; border-radius: 10px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line { position: relative !important; display: flex !important; align-items: center !important; border: 1px solid var(--ops-support-line-border, var(--ops-support-rail-border)) !important; background: var(--ops-support-line-bg, #ffffff) !important; color: var(--ops-support-line-color, var(--ops-support-rail-text)) !important; box-shadow: none !important; overflow: hidden !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 4px !important; background: var(--ops-support-line-accent, var(--ops-support-cancelled-accent)) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line:hover { border-color: color-mix(in srgb, var(--ops-support-line-accent, #ff6a13) 36%, var(--ops-support-rail-border)) !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-selected { box-shadow: inset 0 0 0 1px rgba(255, 106, 19, 0.12) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main { display: flex !important; align-items: center !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-label { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 10px !important; line-height: 12px !important; font-weight: 700 !important; color: inherit !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-top-side { display: inline-flex !important; align-items: center !important; gap: 4px !important; flex: 0 0 auto !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-meta-row, html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-meta { display: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count { font-size: 9px !important; line-height: 1 !important; font-weight: 800 !important; color: inherit !important; white-space: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-status { min-height: 16px !important; height: 16px !important; padding: 0 5px !important; gap: 3px !important; font-size: 8px !important; line-height: 1 !important; border-radius: 999px !important; white-space: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-status .soc-ops-support-status-dot { width: 5px !important; height: 5px !important; flex: 0 0 5px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line-flag, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-fresh-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 14px !important; height: 14px !important; padding: 0 4px !important; border-radius: 999px !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line-flag { border: 1px solid rgba(255, 107, 107, 0.32) !important; background: #fff1f1 !important; color: #c25555 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-fresh-badge { border: 1px solid rgba(255, 106, 19, 0.18) !important; background: #fff3e8 !important; color: var(--ops-support-strong-primary) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more { display: flex !important; align-items: center !important; justify-content: center !important; border: 1px dashed var(--ops-support-neutral-border) !important; background: #ffffff !important; color: #445067 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 800 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more:focus-visible { border-color: rgba(255, 106, 19, 0.3) !important; background: #fff8f3 !important; color: var(--ops-support-strong-primary) !important; outline: none !important; } html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) { display: inline-flex !important; align-items: center !important; gap: 6px !important; border: 1px solid transparent !important; border-radius: 999px !important; white-space: nowrap !important; font-weight: 700 !important; } html body.soc-desktop-shell #opsSupportPanel .support-status-inline { min-height: 26px !important; padding: 0 10px !important; font-size: 12px !important; line-height: 1 !important; } html body.soc-desktop-shell #opsSupportPanel .support-status-chip { min-height: 22px !important; padding: 0 7px !important; font-size: 10px !important; line-height: 1 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-text { line-height: 1 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot { width: 6px !important; height: 6px !important; flex: 0 0 6px !important; margin-top: 0 !important; } html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-pending, .support-status-chip.state-pending) { background: var(--ops-support-pending-bg) !important; border-color: var(--ops-support-pending-border) !important; color: var(--ops-support-pending-text) !important; } html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-approved, .support-status-chip.state-approved) { background: var(--ops-support-approved-bg) !important; border-color: var(--ops-support-approved-border) !important; color: var(--ops-support-approved-text) !important; } html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) { background: var(--ops-support-danger-bg) !important; border-color: var(--ops-support-danger-border) !important; color: var(--ops-support-danger-text) !important; } html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-cancelled, .support-status-chip.state-cancelled) { background: var(--ops-support-cancelled-bg) !important; border-color: var(--ops-support-cancelled-border) !important; color: var(--ops-support-cancelled-text) !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-status-cell { white-space: normal !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-status-stack { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet { width: min(100%, 352px) !important; min-width: 0 !important; max-width: 352px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 14px 14px 12px !important; overflow: hidden !important; border: 1px solid var(--ops-support-rail-border) !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; padding: 0 0 10px !important; border-bottom: 1px solid var(--ops-support-rail-border) !important; flex: 0 0 auto !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheetTitle { margin: 0 !important; font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-copy > .meta { display: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; padding-right: 2px !important; } html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-sheet-head-actions .ds-btn, .worker-row-actions .ds-btn, .worker-add-btn, [data-action="ops-support-enter-worker-edit"]) { min-height: 34px !important; height: 34px !important; line-height: 1 !important; white-space: nowrap !important; flex: 0 0 auto !important; padding-inline: 12px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheetStatusBtn.soc-ops-support-status-action { border-color: var(--ops-support-neutral-border) !important; background: var(--ops-support-neutral-bg) !important; color: #445067 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheetStatusBtn.soc-ops-support-status-action:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheetStatusBtn.soc-ops-support-status-action:focus-visible { border-color: #c6d0dc !important; background: var(--ops-support-neutral-hover) !important; color: #2f3a4d !important; } html body.soc-desktop-shell #opsSupportPanel :is(#opsSupportSheetDeleteBtn, .worker-row-actions .worker-row-delete-btn, .worker-row.is-over-assigned .worker-row-delete-btn) { border-color: var(--ops-support-strong-danger-border) !important; background: var(--ops-support-strong-danger) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel :is(#opsSupportSheetDeleteBtn, .worker-row-actions .worker-row-delete-btn, .worker-row.is-over-assigned .worker-row-delete-btn):hover, html body.soc-desktop-shell #opsSupportPanel :is(#opsSupportSheetDeleteBtn, .worker-row-actions .worker-row-delete-btn, .worker-row.is-over-assigned .worker-row-delete-btn):focus-visible { border-color: var(--ops-support-strong-danger-border) !important; background: var(--ops-support-strong-danger-hover) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel :is(.worker-row-actions .worker-row-edit-btn, .worker-row.is-over-assigned .worker-row-edit-btn, .worker-add-btn) { border-color: var(--ops-support-strong-primary-border) !important; background: var(--ops-support-strong-primary) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel :is(.worker-row-actions .worker-row-edit-btn, .worker-row.is-over-assigned .worker-row-edit-btn, .worker-add-btn):hover, html body.soc-desktop-shell #opsSupportPanel :is(.worker-row-actions .worker-row-edit-btn, .worker-row.is-over-assigned .worker-row-edit-btn, .worker-add-btn):focus-visible { border-color: var(--ops-support-strong-primary-border) !important; background: var(--ops-support-strong-primary-hover) !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-content { gap: 10px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section { display: grid !important; gap: 8px !important; padding: 10px 0 0 !important; border-top: 1px solid #eef2f6 !important; background: transparent !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section--summary { padding-top: 0 !important; border-top: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section-title { font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section-head .meta, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-context { font-size: 12px !important; line-height: 17px !important; color: var(--ops-support-rail-subtle) !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metrics { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-detail-summary-metric, .soc-ops-support-detail-summary-purpose, .soc-ops-support-confirmed-block, .soc-ops-support-confirmed-disabled, .soc-ops-support-detail-timeline-body, .soc-ops-support-day-summary > div) { border: 1px solid var(--ops-support-rail-border) !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric { min-height: 70px !important; padding: 10px 11px !important; background: var(--ops-support-rail-muted) !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-purpose { padding: 11px 12px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline { display: grid !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline > li { border: 1px solid var(--ops-support-rail-border) !important; border-radius: 10px !important; background: #ffffff !important; padding: 8px 10px !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .confirmed-worker-list { gap: 6px !important; max-height: none !important; } html body.soc-desktop-shell #opsSupportPanel .worker-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important; gap: 8px !important; align-items: center !important; padding: 8px !important; border: 1px solid var(--ops-support-rail-border) !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel :is(.worker-row.is-assigned, .worker-row.is-over-assigned) { border-color: var(--ops-support-rail-border) !important; background: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel .worker-row input[type="text"] { border-color: var(--ops-support-rail-border) !important; background: var(--ops-support-rail-muted) !important; color: var(--ops-support-rail-text) !important; } html body.soc-desktop-shell #opsSupportPanel .worker-row-actions { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: nowrap !important; } } @media (min-width: 1024px) and (max-width: 1450px) { html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-toolbar-main-row { grid-template-columns: minmax(0, 1fr) !important; align-items: flex-start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-toolbar-system { grid-template-columns: minmax(0, 1fr) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-filter-row, html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-toolbar-action-row, html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportActiveFilters { justify-content: flex-start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-toolbar-action-row { flex-wrap: wrap !important; } } @media (min-width: 1024px) { html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-control-deck { display: grid !important; gap: 8px !important; padding: 0 0 10px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar { display: grid !important; gap: 8px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-main-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 12px !important; align-items: center !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-toolbar-left, .soc-ops-support-toolbar-center, .soc-ops-support-toolbar-right) { display: flex !important; align-items: center !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-center { justify-content: flex-start !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-right { justify-content: flex-end !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav { display: inline-flex !important; align-items: center !important; gap: 6px !important; min-height: 38px !important; padding: 0 8px !important; border: 1px solid #dce4ef !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label, .soc-ops-support-today-btn) { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 28px !important; border: 0 !important; background: transparent !important; border-radius: 10px !important; color: #47536a !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow { width: 28px !important; height: 28px !important; font-size: 15px !important; font-weight: 700 !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .soc-ops-support-today-btn { padding: 0 10px !important; border: 1px solid #e5ebf3 !important; background: #f8fafc !important; font-size: 12px !important; font-weight: 700 !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label { padding: 0 10px !important; font-size: 16px !important; line-height: 1 !important; font-weight: 800 !important; color: #202430 !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label, .soc-ops-support-today-btn):hover, html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label, .soc-ops-support-today-btn):focus-visible { background: #f3f6fb !important; color: #202430 !important; outline: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-field { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-inline-label { flex: 0 0 auto !important; font-size: 11px !important; line-height: 1 !important; font-weight: 700 !important; color: #697286 !important; white-space: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-label, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-tools, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-meta { display: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control { min-width: 116px !important; max-width: 160px !important; height: 34px !important; padding: 0 30px 0 10px !important; border: 1px solid #dce4ef !important; border-radius: 10px !important; background: #ffffff !important; color: #202430 !important; font-size: 13px !important; font-weight: 600 !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions { display: inline-flex !important; align-items: center !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-anchor { position: relative !important; } html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-export-top-btn, .soc-ops-support-view-toggle [data-action="ops-support-view"]) { min-height: 34px !important; height: 34px !important; padding: 0 12px !important; border-radius: 10px !important; font-size: 13px !important; line-height: 1 !important; font-weight: 700 !important; white-space: nowrap !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn { border: 1px solid #dce4ef !important; background: #ffffff !important; color: #42516a !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:hover, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:focus-visible { border-color: #c8d3e0 !important; background: #f8fafc !important; color: #202430 !important; outline: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle { display: inline-flex !important; align-items: center !important; padding: 3px !important; border: 1px solid #dce4ef !important; border-radius: 12px !important; background: #ffffff !important; gap: 3px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"] { border: 0 !important; background: transparent !important; color: #697286 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"].is-active { background: #ff6a13 !important; color: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportActiveFilters { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportActiveFilters.hidden { display: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge { min-height: 22px !important; padding: 0 8px !important; border: 1px solid rgba(255, 106, 19, 0.18) !important; border-radius: 999px !important; background: rgba(255, 106, 19, 0.08) !important; color: #c15510 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 700 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 8px 0 0 !important; border-top: 1px solid #e9eef5 !important; background: transparent !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats { display: flex !important; flex-wrap: wrap !important; gap: 8px 14px !important; align-items: center !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat-label { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 11px !important; line-height: 1 !important; font-weight: 700 !important; color: #697286 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat > strong { font-size: 13px !important; line-height: 1 !important; font-weight: 800 !important; color: #202430 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view { display: grid !important; grid-template-rows: auto auto !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 8px !important; padding: 0 2px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays > span { font-size: 11px !important; line-height: 14px !important; font-weight: 700 !important; color: #7b8599 !important; text-align: center !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 8px !important; align-content: start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: 6px !important; min-height: 154px !important; padding: 8px !important; overflow: hidden !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head > strong { font-size: 14px !important; line-height: 18px !important; font-weight: 800 !important; color: #202430 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head > span { display: inline-flex !important; align-items: center !important; min-height: 20px !important; padding: 0 7px !important; border: 1px solid #e8edf4 !important; border-radius: 999px !important; background: #ffffff !important; color: #7d8699 !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; white-space: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-body { display: grid !important; gap: 4px !important; align-content: start !important; min-height: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line, html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more { min-height: 28px !important; height: 28px !important; border-radius: 9px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line { position: relative !important; display: flex !important; align-items: center !important; padding: 0 8px 0 10px !important; overflow: hidden !important; border: 1px solid var(--ops-support-line-border, #e6eaf1) !important; background: var(--ops-support-line-bg, #ffffff) !important; color: var(--ops-support-line-color, #202430) !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 4px !important; background: var(--ops-support-line-accent, #94a3b8) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line:hover { border-color: color-mix(in srgb, var(--ops-support-line-accent, #ff6a13) 35%, #dfe6ef) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-selected { box-shadow: inset 0 0 0 1px rgba(255, 106, 19, 0.14) !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-label { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; color: inherit !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-top-side, html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-status, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line-flag, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-fresh-badge { display: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-width: 44px !important; min-height: 20px !important; padding: 0 8px !important; border-radius: 999px !important; font-size: 11px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; background: #f1f5f9 !important; color: #475569 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count.is-partial, html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count.is-full { background: rgba(30, 191, 163, 0.12) !important; color: #0c8872 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count.is-over { background: rgba(255, 107, 107, 0.14) !important; color: #d04f4f !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more { display: flex !important; align-items: center !important; justify-content: center !important; border: 1px dashed #dce4ef !important; background: #ffffff !important; color: #475569 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 700 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportListView { padding-top: 2px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-table-wrap { border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #ffffff !important; overflow: hidden !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-table { width: 100% !important; border-collapse: collapse !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-table thead th { padding: 10px 12px !important; border-bottom: 1px solid #e9eef5 !important; background: #fafbfd !important; color: #697286 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 700 !important; text-align: left !important; white-space: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-table tbody td { padding: 11px 12px !important; border-bottom: 1px solid #eef2f6 !important; color: #202430 !important; font-size: 13px !important; line-height: 18px !important; vertical-align: middle !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-table tbody tr:last-child td { border-bottom: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-row { cursor: pointer !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-row:hover { background: #fafcff !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone-cell { width: 44px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone { display: inline-flex !important; width: 10px !important; height: 10px !important; border-radius: 999px !important; background: #94a3b8 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone.state-pending { background: #ffbf3c !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone.state-approved { background: #1ebfa3 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone.state-rejected, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone.state-unavailable { background: #ff6b6b !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone.state-cancelled { background: #94a3b8 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-progress { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 22px !important; padding: 0 8px !important; border-radius: 999px !important; background: #f1f5f9 !important; color: #475569 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-progress.is-partial, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-progress.is-full { background: rgba(30, 191, 163, 0.12) !important; color: #0c8872 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-progress.is-over { background: rgba(255, 107, 107, 0.14) !important; color: #d04f4f !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; z-index: 30 !important; width: 240px !important; padding: 10px !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1) !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-head { display: grid !important; gap: 3px !important; padding: 2px 2px 8px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-head > strong { font-size: 13px !important; line-height: 16px !important; font-weight: 800 !important; color: #202430 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-list { display: grid !important; gap: 4px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-item { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; width: 100% !important; padding: 9px 10px !important; border: 1px solid transparent !important; border-radius: 10px !important; background: #ffffff !important; color: #202430 !important; text-align: left !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-item:hover, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-item:focus-visible { border-color: rgba(255, 106, 19, 0.14) !important; background: #fff8f3 !important; outline: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-item:disabled { opacity: 0.48 !important; cursor: not-allowed !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-copy { display: grid !important; gap: 2px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-copy > strong { font-size: 13px !important; line-height: 16px !important; font-weight: 700 !important; color: inherit !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-copy > small, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-meta { font-size: 11px !important; line-height: 14px !important; color: #697286 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet { width: min(100%, 360px) !important; max-width: 360px !important; padding: 16px !important; gap: 12px !important; border: 1px solid #e6eaf1 !important; border-radius: 14px !important; background: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-body { padding-right: 2px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-content { display: grid !important; gap: 12px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section { display: grid !important; gap: 10px !important; padding-top: 12px !important; border-top: 1px solid #eef2f6 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section--summary { padding-top: 0 !important; border-top: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-context { display: flex !important; flex-wrap: wrap !important; gap: 6px 10px !important; font-size: 12px !important; line-height: 17px !important; color: #697286 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metrics { display: grid !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metrics.is-triple { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric { display: grid !important; gap: 8px !important; min-height: 88px !important; padding: 12px !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #f8fafc !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-label { font-size: 11px !important; line-height: 14px !important; font-weight: 700 !important; color: #697286 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric > strong { font-size: 28px !important; line-height: 1 !important; font-weight: 800 !important; color: #202430 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-note { font-size: 11px !important; line-height: 14px !important; font-weight: 700 !important; color: #697286 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-partial > strong, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-full > strong { color: #0c8872 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-over > strong { color: #d04f4f !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-progress { position: relative !important; height: 6px !important; border-radius: 999px !important; background: #e9eef5 !important; overflow: hidden !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-progress > span { position: absolute !important; inset: 0 auto 0 0 !important; border-radius: inherit !important; background: #94a3b8 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-progress.is-partial > span, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-progress.is-full > span { background: #1ebfa3 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-progress.is-over > span { background: #ff6b6b !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-purpose, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-confirmed-block, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary > div { border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-purpose { padding: 12px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary > div { display: grid !important; gap: 6px !important; min-height: 80px !important; padding: 12px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-label { font-size: 11px !important; line-height: 14px !important; font-weight: 700 !important; color: #697286 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary strong { font-size: 20px !important; line-height: 1.1 !important; font-weight: 800 !important; color: #202430 !important; } html body.soc-desktop-shell #opsSupportPanel .confirmed-worker-list { display: grid !important; gap: 6px !important; max-height: none !important; } html body.soc-desktop-shell #opsSupportPanel .worker-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; padding: 8px !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel .worker-row input[type="text"] { min-width: 0 !important; height: 34px !important; padding: 0 10px !important; border: 1px solid #dce4ef !important; border-radius: 10px !important; background: #f8fafc !important; color: #202430 !important; } html body.soc-desktop-shell #opsSupportPanel .worker-row-actions { display: inline-flex !important; align-items: center !important; gap: 6px !important; flex-wrap: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel :is(.worker-row-actions .ds-btn, .worker-add-btn, [data-action="ops-support-enter-worker-edit"], .soc-ops-support-sheet-head-actions .ds-btn) { min-height: 34px !important; height: 34px !important; padding: 0 12px !important; line-height: 1 !important; white-space: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline { display: grid !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item { position: relative !important; display: grid !important; grid-template-columns: 18px minmax(0, 1fr) !important; gap: 10px !important; align-items: flex-start !important; padding: 0 0 10px !important; border: 0 !important; background: transparent !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item:last-child { padding-bottom: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-connector { position: absolute !important; top: 12px !important; bottom: -10px !important; left: 8px !important; width: 2px !important; background: #e6eaf1 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item:last-child .soc-ops-support-detail-timeline-connector, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-empty .soc-ops-support-detail-timeline-connector { display: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-dot { position: relative !important; z-index: 1 !important; width: 10px !important; height: 10px !important; margin-top: 8px !important; border-radius: 999px !important; background: #94a3b8 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-created .soc-ops-support-detail-timeline-dot { background: #ff6a13 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-worker .soc-ops-support-detail-timeline-dot { background: #1ebfa3 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status .soc-ops-support-detail-timeline-dot { background: #334155 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-body { border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #ffffff !important; padding: 10px 12px !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-head { display: grid !important; gap: 4px !important; margin-bottom: 6px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-head strong { font-size: 14px !important; line-height: 18px !important; font-weight: 800 !important; color: #202430 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-meta { display: flex !important; flex-wrap: wrap !important; gap: 6px 10px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-copy { margin: 0 !important; font-size: 13px !important; line-height: 18px !important; color: #445067 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-day-table, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-confirmed-roster-table { width: 100% !important; border-collapse: collapse !important; } html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-summary-day-table, .soc-ops-support-confirmed-roster-table) th, html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-summary-day-table, .soc-ops-support-confirmed-roster-table) td { padding: 9px 8px !important; border-bottom: 1px solid #eef2f6 !important; text-align: left !important; } html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-summary-day-table, .soc-ops-support-confirmed-roster-table) tbody tr:last-child td { border-bottom: 0 !important; } } @media (min-width: 1024px) and (max-width: 1500px) { html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-toolbar-main-row { grid-template-columns: minmax(0, 1fr) !important; align-items: flex-start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel :is(.soc-ops-support-toolbar-left, .soc-ops-support-toolbar-center, .soc-ops-support-toolbar-right) { justify-content: flex-start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-detail-summary-metrics.is-triple, html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-day-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ===== Ops support desktop authority refinements (2026-04-03 v3) ===== */ @media (min-width: 1024px) { html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar > * { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view.hidden, html body.soc-desktop-shell #opsSupportPanel #opsSupportListView.soc-ops-support-view.hidden, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-state.hidden { display: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden) { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: 6px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportListView.soc-ops-support-view:not(.hidden) { display: block !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) minmax(328px, 336px) !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-main-row { grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 16px !important; } html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-toolbar-left, .soc-ops-support-toolbar-center, .soc-ops-support-toolbar-right) { display: flex !important; align-items: center !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-center { justify-content: flex-start !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-right { justify-content: flex-end !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters { display: inline-flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 14px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-field { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-inline-label { display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; min-width: 0 !important; margin: 0 !important; white-space: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control { min-width: 122px !important; max-width: 144px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportActiveFilters { justify-content: flex-start !important; padding-top: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip { padding-top: 2px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats { gap: 6px 16px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid { gap: 6px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell { min-height: 148px !important; padding: 7px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-body { gap: 3px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line { padding: 0 6px 0 8px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main { gap: 6px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy { gap: 6px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-label { font-size: 11px !important; line-height: 15px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count { min-width: 36px !important; padding: 0 6px !important; } } @media (min-width: 1024px) and (max-width: 1460px) { html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-main-row { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; } html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-toolbar-left, .soc-ops-support-toolbar-center, .soc-ops-support-toolbar-right) { justify-content: flex-start !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters { flex-wrap: wrap !important; gap: 8px 12px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions { flex-wrap: wrap !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip { padding-top: 0 !important; } } @media (min-width: 1024px) { html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy { justify-content: flex-start !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; min-width: 0 !important; margin-left: auto !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; color: #5b6579 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 800 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count.is-partial, html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count.is-full { background: transparent !important; color: #1ebfa3 !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count.is-over { background: transparent !important; color: #ff6b6b !important; } } /* ===== Ops support work type badges (2026-04-03) ===== */ @media (min-width: 1024px) { html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-work-type-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-height: 22px !important; padding: 0 8px !important; border: 1px solid #d7deea !important; border-radius: 999px !important; background: #f8fafc !important; color: #5b6579 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-work-type-badge.is-day { border-color: rgba(30, 191, 163, 0.28) !important; background: rgba(30, 191, 163, 0.1) !important; color: #0f8570 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-work-type-badge.is-night { border-color: rgba(255, 191, 60, 0.34) !important; background: rgba(255, 191, 60, 0.14) !important; color: #9c6700 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-work-type-badge.is-compact { min-width: 18px !important; min-height: 18px !important; padding: 0 5px !important; font-size: 10px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-work-type-badge { margin-left: -2px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-work-type, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-work-type { min-width: 40px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-work-type { min-height: 24px !important; padding: 0 10px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-context { align-items: center !important; } } /* ===== Ops support desktop authority refinements (2026-04-03 v4) ===== */ @media (min-width: 1024px) { html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-control-deck { display: grid !important; gap: 8px !important; padding: 0 0 14px !important; margin-bottom: 10px !important; border-bottom: 1px solid #d0d9e4 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar { gap: 4px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-main-row { grid-template-columns: minmax(0, 1fr) auto !important; gap: 16px !important; align-items: end !important; padding-bottom: 8px !important; border-bottom: 1px solid #e1e8f0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-left { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav { min-height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; gap: 10px !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-center { gap: 18px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-inline-month-nav { flex: 0 0 auto !important; margin-right: 2px !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label) { min-height: auto !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow { width: auto !important; height: auto !important; font-size: 19px !important; line-height: 1 !important; color: #445067 !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label { padding-bottom: 1px !important; color: #202430 !important; font-size: 17px !important; font-weight: 800 !important; } html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label):hover, html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label):focus-visible { background: transparent !important; color: #202430 !important; outline: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters { align-items: center !important; gap: 16px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-field { gap: 6px !important; padding-bottom: 2px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-inline-label { font-size: 12px !important; line-height: 1 !important; font-weight: 700 !important; color: #5f6b7c !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control { min-width: 118px !important; max-width: 136px !important; height: 30px !important; padding: 0 22px 0 0 !important; border: 0 !important; border-bottom: 1.5px solid #cfd9e5 !important; border-radius: 0 !important; background: transparent !important; color: #202430 !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control:hover, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control:focus-visible { border-color: #94a3b8 !important; background: transparent !important; outline: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions { gap: 14px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn { min-height: auto !important; height: auto !important; padding: 0 0 6px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #445067 !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:hover, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:focus-visible { border: 0 !important; background: transparent !important; color: #202430 !important; outline: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle { display: inline-flex !important; align-items: center !important; gap: 12px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"] { min-height: auto !important; height: auto !important; padding: 0 0 6px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #7b8599 !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"].is-active { background: transparent !important; color: #202430 !important; box-shadow: inset 0 -2px 0 #ff6a13 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip { padding: 6px 0 0 !important; border-top: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats { gap: 6px 16px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays { padding: 10px 12px 9px !important; border-top: 1px solid #dbe4ee !important; border-bottom: 1px solid #dbe4ee !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; background: #ffffff !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays > span { color: #5f6b7c !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head-copy { min-width: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-actions { justify-self: end !important; gap: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-actions > * { position: relative !important; display: inline-flex !important; align-items: center !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-actions > * + * { margin-left: 10px !important; padding-left: 10px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-actions > * + *::before { content: "" !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 1px !important; height: 13px !important; background: #cfd7e3 !important; border-radius: 999px !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet :is(#opsSupportSheetStatusBtn, #opsSupportSheetDeleteBtn) { min-height: auto !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-size: 13px !important; line-height: 1 !important; font-weight: 700 !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action:focus-visible { border: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: #64748b !important; outline: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn:hover, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn:focus-visible { border: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: #e25656 !important; outline: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 132px !important; grid-template-areas: "label label" "value progress" "note progress" !important; align-items: center !important; column-gap: 16px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed > .soc-ops-support-detail-summary-label { grid-area: label !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed > strong { grid-area: value !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed .soc-ops-support-detail-progress { grid-area: progress !important; align-self: center !important; margin: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed .soc-ops-support-detail-summary-note { grid-area: note !important; align-self: start !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-inline-summary { grid-template-areas: "label label" "note progress" !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-inline-summary .soc-ops-support-detail-summary-note { align-self: center !important; font-size: 13px !important; line-height: 17px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed > strong, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed .soc-ops-support-detail-summary-note { transition: color 140ms ease !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-tone-success > strong, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-tone-success .soc-ops-support-detail-summary-note { color: #0c8872 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-tone-danger > strong, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-tone-danger .soc-ops-support-detail-summary-note { color: #d04f4f !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-tone-muted > strong, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-tone-muted .soc-ops-support-detail-summary-note { color: #64748b !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metrics.is-triple { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-context { display: flex !important; align-items: center !important; margin-bottom: 10px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-date { font-size: 20px !important; line-height: 1.2 !important; font-weight: 800 !important; color: #202430 !important; letter-spacing: -0.02em !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-card { display: grid !important; gap: 6px !important; min-height: 88px !important; padding: 12px 14px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-card.is-confirmed { grid-column: 1 / -1 !important; grid-template-columns: minmax(0, 1fr) 118px !important; grid-template-areas: "label label" "value progress" "note progress" !important; align-items: center !important; column-gap: 14px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-card.is-confirmed > .soc-ops-support-day-summary-label { grid-area: label !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-card.is-confirmed > .soc-ops-support-day-summary-value { grid-area: value !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-card.is-confirmed > .soc-ops-support-detail-progress { grid-area: progress !important; margin: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-card.is-confirmed > .soc-ops-support-day-summary-note { grid-area: note !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-value { font-size: 24px !important; line-height: 1.1 !important; font-weight: 800 !important; color: #202430 !important; word-break: keep-all !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-note { font-size: 11px !important; line-height: 14px !important; font-weight: 700 !important; color: #697286 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-headcount, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-progress, html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count { background: transparent !important; min-height: 0 !important; padding: 0 !important; border-radius: 0 !important; font-weight: 800 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-progress { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; } html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-day-headcount, .soc-ops-support-list-progress, #opsSupportCalendarGrid .soc-ops-support-calendar-line-count, .soc-ops-support-day-summary-value, .soc-ops-support-day-summary-note).is-tone-success { color: #0c8872 !important; } html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-day-headcount, .soc-ops-support-list-progress, #opsSupportCalendarGrid .soc-ops-support-calendar-line-count, .soc-ops-support-day-summary-value, .soc-ops-support-day-summary-note).is-tone-danger { color: #d04f4f !important; } html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-day-headcount, .soc-ops-support-list-progress, #opsSupportCalendarGrid .soc-ops-support-calendar-line-count, .soc-ops-support-day-summary-value, .soc-ops-support-day-summary-note).is-tone-muted { color: #64748b !important; } html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-day-headcount, .soc-ops-support-list-progress, #opsSupportCalendarGrid .soc-ops-support-calendar-line-count, .soc-ops-support-day-summary-value, .soc-ops-support-day-summary-note).is-tone-neutral { color: #202430 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-confirmed-block { border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .confirmed-worker-list { gap: 6px !important; } html body.soc-desktop-shell #opsSupportPanel .worker-row { border: 0 !important; border-bottom: 1px solid #e7edf4 !important; border-radius: 0 !important; background: transparent !important; padding: 8px 0 !important; } html body.soc-desktop-shell #opsSupportPanel .worker-row.is-assigned:not(.is-over-assigned) { padding: 9px 10px !important; border: 1.5px solid rgba(30, 191, 163, 0.5) !important; border-radius: 12px !important; background: rgba(30, 191, 163, 0.07) !important; } html body.soc-desktop-shell #opsSupportPanel .worker-row.is-over-assigned { padding: 8px 10px !important; border: 1px solid rgba(255, 107, 107, 0.42) !important; border-radius: 12px !important; background: rgba(255, 107, 107, 0.06) !important; } html body.soc-desktop-shell #opsSupportPanel .worker-row.is-assigned input[type="text"][readonly] { border-color: rgba(30, 191, 163, 0.22) !important; background: rgba(255, 255, 255, 0.9) !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline { gap: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline::before { display: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline > li, html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) !important; gap: 12px !important; align-items: flex-start !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 0 16px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item:last-child { padding-bottom: 0 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-connector { top: 9px !important; bottom: -14px !important; left: 7px !important; width: 2px !important; background: #dbe4ee !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-dot { left: auto !important; top: auto !important; justify-self: center !important; width: 12px !important; height: 12px !important; margin-top: 3px !important; border: 2px solid #ffffff !important; box-shadow: none !important; background: #64748b !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-body { border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline-body, html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline-item .soc-ops-support-detail-timeline-body { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-head { margin-bottom: 4px !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-approved .soc-ops-support-detail-timeline-dot { background: #1ebfa3 !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-pending .soc-ops-support-detail-timeline-dot { background: #ffbf3c !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-danger .soc-ops-support-detail-timeline-dot { background: #ff6b6b !important; } html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-muted .soc-ops-support-detail-timeline-dot { background: #64748b !important; } } /* ===== Analytics followup + hotspot emphasis ===== */ @media (min-width: 1024px) { html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-shell, html body.soc-desktop-shell #analyticsView #analyticsCausePanel .soc-analytics-cause-shell, html body.soc-desktop-shell #analyticsView #analyticsFollowupBand .soc-analytics-followup-columns { padding: 0 20px 18px !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row { display: grid !important; grid-template-columns: none !important; align-items: stretch !important; gap: 10px !important; min-height: 156px !important; padding: 14px !important; border: 1px solid #e6eaf1 !important; border-radius: 16px !important; background: #ffffff !important; text-align: left !important; box-shadow: none !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row.is-actionable:hover, html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row.is-actionable:focus-visible { transform: none !important; border-color: #ffb57d !important; box-shadow: none !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-topline { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-rank { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; border-radius: 9px !important; background: #f3f6fb !important; color: #697286 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 800 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 30px !important; padding: 0 10px !important; border: 1px solid #e6eaf1 !important; border-radius: 999px !important; background: #ffffff !important; color: #202430 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 800 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score-badge[data-tone="focus"] { border-color: #8ebaff !important; background: #ffffff !important; color: #2f80ff !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score-badge[data-tone="warning"] { border-color: #ffd79c !important; background: #ffffff !important; color: #a15b00 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score-badge[data-tone="danger"] { border-color: #ffc0c0 !important; background: #ffffff !important; color: #d04f4f !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-main { display: grid !important; gap: 8px !important; min-width: 0 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-head { display: grid !important; gap: 2px !important; min-width: 0 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-head strong { min-width: 0 !important; color: #202430 !important; font-size: 18px !important; line-height: 24px !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-role { color: #697286 !important; font-size: 12px !important; line-height: 17px !important; font-weight: 700 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-metrics { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-metric-chip { display: inline-flex !important; align-items: center !important; min-height: 24px !important; padding: 0 8px !important; border-radius: 999px !important; background: #f6f8fb !important; color: #5f697d !important; font-size: 11px !important; line-height: 16px !important; font-weight: 700 !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-last { margin: 0 !important; color: #8b93a6 !important; font-size: 12px !important; line-height: 17px !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-bar { height: 8px !important; border-radius: 999px !important; background: #eef2f6 !important; overflow: hidden !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-bar span { display: block !important; height: 100% !important; border-radius: inherit !important; background: #2f80ff !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-bar span[data-tone="warning"] { background: #ffbf3c !important; } html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-bar span[data-tone="danger"] { background: #ff6b6b !important; } html body.soc-desktop-shell #analyticsView #analyticsFollowupBand .soc-analytics-followup-columns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } html body.soc-desktop-shell #analyticsView #analyticsFollowupBand .soc-analytics-followup-column { padding: 16px !important; border: 1px solid #e6eaf1 !important; border-radius: 16px !important; background: #ffffff !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-column h4 { margin: 0 0 12px !important; color: #202430 !important; font-size: 16px !important; line-height: 23px !important; font-weight: 800 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-stack { display: grid !important; gap: 10px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; padding: 14px !important; border: 1px solid #e8ecf3 !important; border-radius: 14px !important; background: #ffffff !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero[data-tone="focus"] { background: #ffffff !important; border-color: #8ebaff !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero[data-tone="warning"] { background: #ffffff !important; border-color: #ffd79c !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero[data-tone="danger"] { background: #ffffff !important; border-color: #ffc0c0 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero-main { display: grid !important; gap: 4px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-eyebrow { color: #697286 !important; font-size: 11px !important; line-height: 16px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero-main strong { color: #202430 !important; font-size: 30px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -0.04em !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero-main p { margin: 0 !important; color: #697286 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 600 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero-chip { display: inline-flex !important; align-items: center !important; min-height: 28px !important; padding: 0 10px !important; border-radius: 999px !important; background: #ffffff !important; border: 1px solid #e6eaf1 !important; color: #202430 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 800 !important; white-space: nowrap !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-list-body { display: grid !important; gap: 8px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item { display: block !important; padding: 12px 14px !important; border: 1px solid #e9edf4 !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: none !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item[data-tone="focus"] { background: #ffffff !important; border-color: #8ebaff !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item[data-tone="warning"] { background: #ffffff !important; border-color: #ffd79c !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item[data-tone="danger"] { background: #ffffff !important; border-color: #ffc0c0 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-main { display: grid !important; gap: 6px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 10px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-head strong { min-width: 0 !important; color: #202430 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 800 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-age { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 24px !important; padding: 0 8px !important; border-radius: 999px !important; background: #f5f7fb !important; color: #202430 !important; font-size: 11px !important; line-height: 16px !important; font-weight: 800 !important; white-space: nowrap !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item[data-tone="focus"] .soc-analytics-followup-item-age { background: #ffffff !important; border: 1px solid #8ebaff !important; color: #2f80ff !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item[data-tone="warning"] .soc-analytics-followup-item-age { background: #ffffff !important; border: 1px solid #ffd79c !important; color: #9c6700 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item[data-tone="danger"] .soc-analytics-followup-item-age { background: #ffffff !important; border: 1px solid #ffc0c0 !important; color: #d04f4f !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-chip-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-chip { display: inline-flex !important; align-items: center !important; min-height: 22px !important; padding: 0 8px !important; border-radius: 999px !important; background: #f5f7fb !important; color: #697286 !important; font-size: 11px !important; line-height: 16px !important; font-weight: 700 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-meta { margin: 0 !important; color: #8b93a6 !important; font-size: 12px !important; line-height: 17px !important; font-weight: 600 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item.is-empty { display: flex !important; align-items: center !important; min-height: 88px !important; color: #697286 !important; background: #fbfcff !important; } } /* ===== Analytics hero row 3-up rebalance ===== */ @media (min-width: 1024px) and (max-width: 1279px) { html body.soc-desktop-shell #analyticsView #analyticsHeroRow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard { grid-column: 1 / -1 !important; } } @media (min-width: 1280px) { html body.soc-desktop-shell #analyticsView #analyticsHeroRow { grid-template-columns: minmax(248px, 0.76fr) minmax(260px, 0.9fr) minmax(320px, 1.14fr) !important; gap: 14px !important; align-items: stretch !important; } } @media (min-width: 1024px) { html body.soc-desktop-shell #analyticsView :is( .soc-analytics-v2-card--risk, .soc-analytics-v2-card--kpis, .soc-analytics-board-card--health ) { min-height: 208px !important; padding: 14px 16px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard { background: #ffffff !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-board-card-head, html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-board-card-head, html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-board-card-head { margin-bottom: 10px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-body { grid-template-columns: 108px minmax(0, 1fr) !important; gap: 12px !important; align-items: center !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard :is( .soc-analytics-v2-risk-gauge-wrap, .soc-analytics-v2-risk-gauge ) { width: 108px !important; height: 108px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track, html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc { stroke-width: 11px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-value-wrap strong, html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard #analyticsRiskScoreValue { font-size: 36px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-summary { gap: 6px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-badge-row { padding-inline-start: 0 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-summary-copy { font-size: 13px !important; line-height: 19px !important; max-width: none !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-board-card-body, html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-board-card-body { display: grid !important; min-height: 0 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-rack { grid-template-columns: 1fr !important; gap: 8px !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile { min-height: 0 !important; padding: 12px 14px !important; border: 1px solid #edf1f6 !important; border-radius: 12px !important; background: #ffffff !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile + .soc-analytics-v2-kpi-tile { border-left: 0 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile strong { font-size: 22px !important; line-height: 1.08 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-panel { height: 100% !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; gap: 12px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head { gap: 2px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head > div { display: grid !important; gap: 4px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head .label { font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; color: #697286 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head strong { font-size: 24px !important; line-height: 1.08 !important; color: #202430 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-bar { height: 12px !important; margin-top: 2px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-legend { gap: 10px !important; margin-top: auto !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item { padding: 10px 12px !important; border: 1px solid #edf1f6 !important; border-radius: 12px !important; background: #ffffff !important; } } /* ===== Analytics hero density fill final ===== */ @media (min-width: 1024px) { html body.soc-desktop-shell #analyticsView .soc-analytics-v2-header { align-items: end !important; gap: 12px !important; margin-bottom: 10px !important; padding-top: 0 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy { gap: 4px !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy .meta { display: block !important; margin: 0 !important; color: #697286 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar { min-height: 0 !important; padding: 10px 12px !important; gap: 10px 12px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRow { grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.02fr) minmax(320px, 1.08fr) !important; gap: 14px !important; align-items: stretch !important; } html body.soc-desktop-shell #analyticsView :is(#analyticsHeroRiskCard, #analyticsHeroKpiRack, #analyticsHeroHealthCard) { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; min-height: 220px !important; padding: 0 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: none !important; } html body.soc-desktop-shell #analyticsView :is(#analyticsHeroRiskCard, #analyticsHeroKpiRack, #analyticsHeroHealthCard) .soc-analytics-board-card-head { margin-bottom: 0 !important; padding: 18px 20px 10px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-board-card-body--risk, html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-board-card-body, html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-board-card-body--health { display: grid !important; min-height: 0 !important; padding: 0 20px 18px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard { background: linear-gradient(150deg, #ff8d34 0%, #ff6a13 38%, #ee5b00 68%, #cf4700 100%) !important; border-color: #de5a08 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-board-card-head h3 { color: #ffffff !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-hero-core { grid-template-columns: 1fr !important; gap: 0 !important; align-items: center !important; align-content: center !important; justify-items: center !important; height: 100% !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-wrap, html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge { width: 196px !important; height: 196px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track, html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc { stroke-width: 13px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track { stroke: rgba(255, 255, 255, 0.22) !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc { stroke: #ffffff !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard #analyticsRiskScoreValue { color: #ffffff !important; font-size: 60px !important; line-height: 1 !important; letter-spacing: -0.05em !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-title-with-help { display: inline-flex !important; align-items: center !important; gap: 8px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-value-wrap { gap: 12px !important; padding-top: 4px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-hero-side, html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-hero-side-head { display: none !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-risk-info-trigger, html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-help-btn { width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; color: rgba(255, 255, 255, 0.88) !important; box-shadow: none !important; font-size: 15px !important; line-height: 1 !important; border-radius: 0 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-risk-grade { min-height: 32px !important; padding: 0 16px !important; border-color: rgba(255, 255, 255, 0.52) !important; background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; font-size: 13px !important; line-height: 32px !important; font-weight: 700 !important; backdrop-filter: none !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-updated-inline { display: none !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-stat-grid { display: none !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-stat-compact { display: none !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-stat-compact .label { color: #697286 !important; font-size: 11px !important; line-height: 15px !important; font-weight: 700 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-stat-compact strong { color: #202430 !important; font-size: 18px !important; line-height: 1.05 !important; font-weight: 800 !important; letter-spacing: -0.03em !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-stat-compact[data-tone="warning"] strong { color: #9c6700 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-stat-compact[data-tone="danger"] strong { color: #d45b5b !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-rack { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile { min-height: 84px !important; padding: 12px 14px !important; border: 1px solid #edf1f6 !important; border-radius: 12px !important; background: #ffffff !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .label { font-size: 11px !important; line-height: 15px !important; color: #697286 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile strong { font-size: 24px !important; line-height: 1.04 !important; color: #202430 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .meta { display: block !important; color: #8b93a6 !important; font-size: 11px !important; line-height: 15px !important; font-weight: 600 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-panel { display: grid !important; grid-template-rows: auto auto 1fr !important; gap: 12px !important; height: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head { gap: 4px !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head strong { font-size: 28px !important; line-height: 1.05 !important; color: #202430 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head .label { font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; color: #697286 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head .meta { color: #8b93a6 !important; font-size: 12px !important; line-height: 17px !important; font-weight: 600 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-bar { height: 10px !important; margin: 0 !important; background: #e6eaf1 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-segment.is-safe { background: #1ebfa3 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-segment.is-warning { background: #ffbf3c !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-segment.is-danger { background: #ff6b6b !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-legend { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; align-self: end !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; min-height: 72px !important; padding: 10px 12px !important; border: 1px solid #edf1f6 !important; border-radius: 12px !important; background: #ffffff !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item-copy { display: grid !important; gap: 2px !important; min-width: 0 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item .label { color: #697286 !important; font-size: 11px !important; line-height: 15px !important; font-weight: 700 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item .meta { color: #8b93a6 !important; font-size: 11px !important; line-height: 15px !important; font-weight: 600 !important; } html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item strong { font-size: 18px !important; line-height: 1.05 !important; color: #202430 !important; } } /* switch normalization */ html body.soc-desktop-shell :is(.soc-switch-input, .soc-apple-weekly-switch-input) { appearance: none !important; -webkit-appearance: none !important; display: inline-block !important; vertical-align: middle !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; padding: 0 !important; line-height: 0 !important; border-radius: 999px !important; border: 1px solid #cbd5e1 !important; background: #dbe3ee !important; box-shadow: none !important; box-sizing: border-box !important; flex: 0 0 auto !important; cursor: pointer !important; position: relative !important; } html body.soc-desktop-shell :is(.soc-switch-input, .soc-apple-weekly-switch-input)::before { content: "" !important; position: absolute !important; top: 2px !important; left: 2px !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; background: #ffffff !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22) !important; transform: translateX(0) !important; transition: transform 0.18s ease !important; } html body.soc-desktop-shell :is(.soc-switch-input, .soc-apple-weekly-switch-input):checked { background: #ff6a13 !important; border-color: #ff6a13 !important; } html body.soc-desktop-shell :is(.soc-switch-input, .soc-apple-weekly-switch-input):checked::before { left: 2px !important; transform: translateX(18px) !important; } html body.soc-desktop-shell :is(.soc-switch-input, .soc-apple-weekly-switch-input):focus-visible { outline: 2px solid rgba(255, 106, 19, 0.28) !important; outline-offset: 3px !important; } html body.soc-desktop-shell :is(.soc-switch-input, .soc-apple-weekly-switch-input):disabled { opacity: 0.48 !important; cursor: not-allowed !important; } html body.soc-desktop-shell .notices-switch-button { min-height: 24px !important; gap: 8px !important; color: #202430 !important; } html body.soc-desktop-shell .notices-switch-track, html body.soc-desktop-shell .soc-report-section-switch { width: 42px !important; height: 24px !important; border-radius: 999px !important; border: 1px solid #cbd5e1 !important; background: #dbe3ee !important; box-shadow: none !important; box-sizing: border-box !important; } html body.soc-desktop-shell .notices-switch-track::after, html body.soc-desktop-shell .soc-report-section-switch-thumb { width: 18px !important; height: 18px !important; top: 2px !important; left: 2px !important; border-radius: 999px !important; background: #ffffff !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22) !important; } html body.soc-desktop-shell .notices-switch-button.is-active .notices-switch-track, html body.soc-desktop-shell .soc-report-section-row.is-on .soc-report-section-switch { border-color: #ff6a13 !important; background: #ff6a13 !important; } html body.soc-desktop-shell .notices-switch-button.is-active .notices-switch-track::after, html body.soc-desktop-shell .soc-report-section-row.is-on .soc-report-section-switch-thumb { transform: translateX(18px) !important; } html body.soc-desktop-shell .notices-switch-copy { color: #445067 !important; } html body.soc-desktop-shell .notices-switch-button.is-active .notices-switch-copy { color: #c2410c !important; } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel { align-content: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel #noticesWorkspace { display: grid !important; width: min(1120px, calc(100% - 48px)) !important; max-width: min(1120px, calc(100% - 48px)) !important; margin-inline: auto !important; gap: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel #noticesWorkspace > :is( .workspace-head, .workspace-tabbar-row, #noticesListPanel, #noticesDetailPanel, #noticesComposePanel ) { width: 100% !important; max-width: none !important; margin-inline: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .workspace-head { align-items: center !important; justify-content: space-between !important; margin-bottom: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .workspace-head-actions { justify-content: flex-end !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-toolbar-row { justify-content: space-between !important; align-items: center !important; gap: 14px 18px !important; padding: 0 0 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel #noticesCategoryTabs { min-width: 0 !important; flex: 1 1 auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-search-form { display: flex !important; grid-template-columns: none !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; margin-left: auto !important; min-width: 0 !important; flex: 0 0 auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-search-input-wrap { width: 0 !important; min-width: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; transform: translateX(8px) !important; border-bottom: 1px solid rgba(148, 163, 184, 0.42) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-search-form.is-expanded .notices-search-input-wrap { width: min(296px, 28vw) !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-search-toggle { display: inline-flex !important; width: 36px !important; min-width: 36px !important; min-height: 36px !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-top { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 32px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; flex: 0 0 32px !important; border-radius: 11px !important; align-self: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon::before { inset: 7px 9px auto !important; height: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon::after { inset: auto 9px 7px !important; height: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-label { display: inline-flex !important; align-items: center !important; min-height: 32px !important; margin: 0 !important; line-height: 1 !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-wrap { position: relative !important; display: grid !important; place-items: center !important; margin-inline: auto !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge { display: block !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-value-wrap { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; padding: 0 !important; margin: 0 !important; text-align: center !important; z-index: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard #analyticsRiskScoreValue { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -58%) !important; display: block !important; margin: 0 !important; line-height: 0.92 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard #analyticsRiskGrade { position: absolute !important; top: calc(50% + 32px) !important; left: 50% !important; transform: translateX(-50%) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; white-space: nowrap !important; min-height: 28px !important; line-height: 28px !important; padding: 0 14px !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel { --ops-support-shared-height: clamp(620px, calc(100dvh - 214px), 980px) !important; align-content: start !important; justify-content: stretch !important; grid-auto-rows: max-content !important; gap: 4px !important; padding-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel:not(.hidden) { display: grid !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[aria-hidden="true"] { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel > .panel-title-row { min-height: auto !important; margin: 0 0 2px !important; padding: 0 !important; align-items: flex-start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel > .panel-title-row .soc-page-header-main, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel > .panel-title-row .title-inline { gap: 0 !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-workspace { gap: 2px !important; margin: 0 !important; padding-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportLayout.soc-ops-support-layout { align-items: start !important; margin-top: 0 !important; min-height: var(--ops-support-shared-height, 640px) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportLayout.soc-ops-support-layout:not(.has-detail-panel) #opsSupportMain.soc-ops-support-main, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportMain.soc-ops-support-main { min-height: var(--ops-support-shared-height, 640px) !important; height: var(--ops-support-shared-height, 640px) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportSheet.soc-ops-support-sheet { height: var(--ops-support-shared-height, 640px) !important; max-height: var(--ops-support-shared-height, 640px) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportMain.soc-ops-support-main { flex: 1 1 auto !important; gap: 2px !important; padding-top: 0 !important; margin-top: 0 !important; min-height: var(--ops-support-shared-height, 640px) !important; height: var(--ops-support-shared-height, 640px) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-control-deck { gap: 4px !important; padding: 0 0 4px !important; margin: 0 !important; margin-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar { gap: 2px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-main-row { padding-bottom: 4px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-support-strip { padding: 2px 0 0 !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden) { flex: 1 1 auto !important; min-height: 0 !important; grid-template-rows: auto minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid { height: 100% !important; min-height: 0 !important; grid-template-rows: repeat(5, minmax(0, 1fr)) !important; grid-auto-rows: minmax(0, 1fr) !important; align-content: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell { min-height: 0 !important; height: auto !important; } } @media (min-width: 1600px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsAnalysisBoard { grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr) !important; gap: 18px !important; align-items: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsTrendPanel .soc-analytics-chart-shell { width: 100% !important; max-width: 860px !important; box-sizing: border-box !important; margin-inline: auto !important; justify-self: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsTrendPanel .soc-analytics-line-chart { height: 248px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-shell { width: 100% !important; max-width: 728px !important; box-sizing: border-box !important; margin-inline: auto !important; justify-self: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-grid-board { justify-content: center !important; } } @media (min-width: 2200px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsTrendPanel .soc-analytics-chart-shell { max-width: 920px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-shell { max-width: 760px !important; } } /* ===== Ops support Outlook Web month view final authority ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel { --ops-support-shared-height: clamp(720px, calc(100dvh - 160px), 1240px) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel > .panel-title-row { margin: 0 0 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-workspace { gap: 0 !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportMain.soc-ops-support-main { display: grid !important; grid-template-rows: max-content minmax(0, 1fr) !important; align-content: start !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; gap: 10px !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-control-deck { gap: 0 !important; padding: 0 0 8px !important; margin: 0 !important; border-bottom: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-main-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 20px !important; padding: 0 0 8px !important; margin: 0 !important; border-bottom: 1px solid #dbe4ee !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-left { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-center { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 16px !important; flex-wrap: nowrap !important; min-width: 0 !important; width: 100% !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filters { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 16px !important; flex-wrap: nowrap !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filter-field { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filter-inline-label { flex: 0 0 auto !important; margin: 0 !important; font-size: 12px !important; line-height: 1 !important; font-weight: 700 !important; color: #697286 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-compact-control { min-width: 116px !important; max-width: 132px !important; height: 28px !important; padding: 0 22px 0 0 !important; border: 0 !important; border-bottom: 1px solid #cfd8e3 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #202430 !important; font-size: 13px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-compact-control:hover, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-compact-control:focus-visible { border-bottom-color: #94a3b8 !important; background: transparent !important; outline: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav { display: inline-flex !important; align-items: center !important; gap: 10px !important; flex: 0 0 auto !important; min-height: 36px !important; height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label) { min-height: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #202430 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav .month-arrow { font-size: 18px !important; line-height: 1 !important; color: #445067 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav .month-label { font-size: 16px !important; line-height: 1 !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label):hover, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label):focus-visible { background: transparent !important; color: #202430 !important; outline: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-right { align-self: end !important; justify-self: end !important; min-width: max-content !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-actions { gap: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-export-top-btn { min-height: auto !important; height: auto !important; padding: 0 0 6px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #445067 !important; font-size: 13px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-view-toggle { gap: 12px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"] { min-height: auto !important; height: auto !important; padding: 0 0 6px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #7b8599 !important; font-size: 13px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"].is-active { background: transparent !important; color: #202430 !important; box-shadow: inset 0 -2px 0 #ff6a13 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel :is(#opsSupportActiveFilters, .soc-ops-support-support-strip) { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel:has(#opsSupportCalendarView.soc-ops-support-view:not(.hidden)) #opsSupportEmptyState { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden) { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; flex: 1 1 auto !important; min-height: 0 !important; height: 100% !important; border: 1px solid #dbe4ee !important; border-radius: 4px !important; background: #ffffff !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-weekdays { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 0 !important; padding: 7px 0 !important; border: 0 !important; border-bottom: 1px solid #e4ebf3 !important; border-radius: 0 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-weekdays > span { justify-content: flex-start !important; min-height: auto !important; padding: 0 8px !important; color: #687284 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid { min-height: 0 !important; height: 100% !important; gap: 0 !important; border: 0 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell { gap: 3px !important; padding: 5px 6px 3px !important; border: 0 !important; border-right: 1px solid #e4ebf3 !important; border-bottom: 1px solid #e4ebf3 !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell:nth-child(7n) { border-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell:hover { border-color: transparent !important; background: #fafcff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-selected { background: #f7fbff !important; box-shadow: inset 0 0 0 2px rgba(47, 128, 255, 0.35) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month { background: #fbfcfe !important; opacity: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month .soc-ops-support-calendar-cell-head > strong { color: rgba(32, 36, 48, 0.42) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month :is(.soc-ops-support-calendar-line-label, .soc-ops-support-calendar-line-count) { color: rgba(32, 36, 48, 0.46) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month .soc-ops-support-calendar-line { opacity: 0.72 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell-head { align-items: flex-start !important; margin-bottom: 1px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell-head > strong { font-size: 12px !important; line-height: 15px !important; font-weight: 700 !important; color: #202430 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell-head > span { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell-body { gap: 1px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel :is(.soc-ops-support-calendar-line, .soc-ops-support-calendar-more) { border: 0 !important; border-radius: 2px !important; box-shadow: none !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line { min-height: 20px !important; padding: 0 4px 0 7px !important; color: #202430 !important; background: var(--ops-support-line-soft, #f8fafc) !important; box-shadow: inset 2px 0 0 var(--ops-support-line-accent, #94a3b8) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line:hover, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line:focus-visible, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line.is-selected { background: var(--ops-support-line-soft, #f8fafc) !important; box-shadow: inset 2px 0 0 var(--ops-support-line-accent, #94a3b8) !important; outline: none !important; filter: brightness(0.985) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy { display: block !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-label { display: block !important; font-size: 11px !important; line-height: 16px !important; font-weight: 600 !important; color: #202430 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count { padding-left: 6px !important; font-size: 11px !important; line-height: 15px !important; font-weight: 800 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-status-dot { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more { align-self: flex-start !important; min-height: auto !important; padding: 0 4px 0 8px !important; color: #5b6577 !important; font-size: 11px !important; line-height: 16px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more:hover, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more:focus-visible { background: transparent !important; color: #202430 !important; outline: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportSheet.soc-ops-support-sheet { width: clamp(312px, 21vw, 348px) !important; min-width: clamp(312px, 21vw, 348px) !important; } } @media (min-width: 1024px) { #opsSupportPanel { --ops-support-shared-height: clamp(620px, calc(100dvh - 186px), 1120px) !important; } #opsSupportPanel .soc-ops-support-workspace, #opsSupportPanel #opsSupportLayout.soc-ops-support-layout, #opsSupportPanel #opsSupportMain.soc-ops-support-main, #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden) { min-height: 0 !important; } #opsSupportPanel #opsSupportLayout.soc-ops-support-layout { min-height: var(--ops-support-shared-height, 620px) !important; height: var(--ops-support-shared-height, 620px) !important; max-height: var(--ops-support-shared-height, 620px) !important; overflow: hidden !important; } #opsSupportPanel #opsSupportMain.soc-ops-support-main { display: grid !important; grid-template-rows: max-content minmax(0, 1fr) !important; align-content: start !important; min-height: var(--ops-support-shared-height, 620px) !important; height: var(--ops-support-shared-height, 620px) !important; max-height: var(--ops-support-shared-height, 620px) !important; overflow: hidden !important; } #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportSheet.soc-ops-support-sheet { min-height: var(--ops-support-shared-height, 620px) !important; height: var(--ops-support-shared-height, 620px) !important; max-height: var(--ops-support-shared-height, 620px) !important; } #opsSupportPanel .soc-ops-support-toolbar-main-row { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; } #opsSupportPanel .soc-ops-support-toolbar { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #opsSupportPanel .soc-ops-support-toolbar-center { display: flex !important; align-items: center !important; gap: 16px !important; flex-wrap: nowrap !important; min-width: 0 !important; } #opsSupportPanel .soc-ops-support-toolbar-left { display: none !important; } #opsSupportPanel .ops-support-month-nav { display: inline-flex !important; align-items: center !important; gap: 10px !important; flex: 0 0 auto !important; min-height: 36px !important; height: 36px !important; visibility: visible !important; opacity: 1 !important; } #opsSupportPanel :is(#opsSupportActiveFilters, .soc-ops-support-support-strip) { display: none !important; } } /* ===== Final dark-mode authority: app-wide desktop surfaces ===== */ [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) { background: var(--ui-bg-canvas) !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( #dashboardPanel, #homeView, #alertsView, #ticketsView, #analyticsView, #peopleView, #accountPanel, #employeeScorePanel, #opsSupportPanel, #hqReminderPanel, #notificationPanel, #notificationSettingsPanel, #auditPanel, #announcementPanel, #weeklyView, #reportsHubView, #excelPanel, #googleSheetsPanel ) { color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( #homeView .soc-home-hub-card, #analyticsView .soc-analytics-board-card, #alertsView .soc-phase1-surface, #ticketsView .soc-phase1-surface, #alertsView .soc-summary-card, #ticketsView .soc-summary-card, #alertsView .soc-pc-side-panel, #ticketsView .soc-pc-side-panel, #peopleView .panel, #peopleView .soc-people-stats-card, #peopleView .soc-people-pane-summary, #peopleView .soc-people-detail-panel, #employeeScorePanel .panel, #employeeScorePanel .soc-hub-section-card, #employeeScorePanel .soc-employee-score-summary-card, #employeeScorePanel .soc-employee-score-detail-panel, #opsSupportPanel .soc-ops-support-workspace, #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden), #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet, #hqReminderPanel .soc-system-section-card, #hqReminderPanel .soc-reminder-config-card, #hqReminderPanel .soc-reminder-preview-box, #hqReminderPanel .soc-reminder-danger-zone, #notificationPanel .soc-notification-center-shell, #notificationPanel .soc-notification-center-group, #notificationPanel .soc-notification-permission-banner, #notificationPanel .soc-notification-onboarding-modal, #notificationSettingsPanel .soc-system-section-card, #auditPanel .soc-system-section-card, #announcementPanel .notices-panel, #announcementPanel .notices-compose-document, #announcementPanel .notices-compose-settings-panel, #announcementPanel .notices-table-picker, #weeklyView .soc-weekly-control-card, #weeklyView .soc-weekly-review-card, #weeklyView .soc-weekly-section-card, #weeklyView .soc-weekly-builder-scope-card, #weeklyView .soc-report-headerbar, #reportsHubView .panel, #excelPanel .panel, #googleSheetsPanel .panel, .soc-workspace-drawer, .soc-bottom-sheet-panel, .soc-risk-info-popover ) { background: var(--ui-bg-surface) !important; border-color: var(--ui-border-subtle) !important; color: var(--ui-text-primary) !important; box-shadow: var(--soc-shadow-soft) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( .soc-block-head h3, .soc-workspace-card-head h3, .soc-home-hub-card-head h3, .soc-analytics-board-card-head h3, .soc-pc-side-panel-head h4, .soc-phase1-page-header-main .soc-workspace-page-title, .soc-page-header-main .soc-workspace-page-title, .soc-people-admin-title-block h2, .panel-title-row h2, .notices-detail-title, .notices-compose-title-input, #announcementPanel .notices-list-title, #weeklyView h3, #weeklyView h4 ) { color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( .meta, .help, .soc-home-hub-kpi-meta, .soc-home-hub-header-note, .soc-home-hub-card-head .meta, .soc-analytics-v2-toolbar-label, .soc-analytics-v2-toolbar-label--ghost, .soc-analytics-v2-kpi-tile .meta, .soc-analytics-v2-health-item .meta, .soc-analytics-line-axis, .soc-analytics-pattern-row-label, .soc-analytics-pattern-axis, .soc-analytics-followup-item-meta, .soc-analytics-hotspot-role, .soc-analytics-hotspot-summary, .soc-analytics-hotspot-last, .soc-pc-side-panel-empty-copy, .soc-pc-side-panel-kpi-label, .soc-pc-side-panel-section-title, .soc-people-pane-summary-eyebrow, .soc-employee-score-summary-label, .soc-employee-score-site-row-meta, .notices-search-form input::placeholder, .notices-compose-placeholder, .notices-compose-help, .soc-reminder-card-copy .meta, .soc-reminder-advanced-head .meta, .soc-notification-center-summary, .soc-notification-center-item-hint ) { color: var(--ui-text-secondary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( input:not([type="checkbox"]):not([type="radio"]), textarea, select, .ds-input, .soc-pc-side-panel-input, .notices-compose-title-input, .notices-search-form input, .soc-notification-center-search input ) { background: var(--soc-input-bg) !important; border-color: var(--ui-border-strong) !important; color: var(--ui-text-primary) !important; box-shadow: none !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( input:not([type="checkbox"]):not([type="radio"])::placeholder, textarea::placeholder ) { color: var(--soc-placeholder) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( .ds-btn.ds-btn-secondary, .ds-btn.ds-btn-ghost, .report-tab, .announcement-mode-btn, .site-filter-btn, .date-filter-btn, .sla-page-btn, .notices-search-toggle, .soc-notification-center-tab, #analyticsView .soc-analytics-detail-segmented button, #peopleView .soc-people-segment-btn, #peopleView .soc-people-hub-switch-btn, #ticketsView .chip, #opsSupportPanel .soc-ops-support-view-toggle button ) { background: rgba(148, 163, 184, 0.08) !important; border-color: var(--ui-border-strong) !important; color: var(--ui-text-primary) !important; box-shadow: none !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( .ds-btn.ds-btn-secondary:hover, .ds-btn.ds-btn-ghost:hover, .notices-search-toggle:hover, .notices-search-toggle:focus-visible, .soc-notification-center-tab:hover, #analyticsView .soc-analytics-detail-segmented button:hover, #peopleView .soc-people-segment-btn:hover, #peopleView .soc-people-hub-switch-btn:hover ) { background: rgba(148, 163, 184, 0.14) !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( .soc-notification-center-tab.is-active, .soc-notification-center-tab[aria-selected="true"], #analyticsView .soc-analytics-detail-segmented button.is-active, #peopleView .soc-people-segment-btn.is-active, #peopleView .soc-people-hub-switch-btn.is-active, #ticketsView .chip.is-active, #opsSupportPanel .soc-ops-support-view-toggle button.is-active ) { background: rgba(255, 107, 0, 0.16) !important; border-color: rgba(255, 107, 0, 0.34) !important; color: #ffd8c2 !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( #homeView .soc-home-priority-row, #homeView .soc-home-ticket-row, #homeView .soc-home-mini-row, #homeView .soc-home-watch-row, #analyticsView .soc-analytics-hotspot-row, #analyticsView .soc-analytics-followup-column, #analyticsView .soc-analytics-followup-hero, #analyticsView .soc-analytics-followup-item, #analyticsView .soc-analytics-v2-site-row, #alertsView .soc-pc-selectable-row, #ticketsView .soc-pc-selectable-row, #employeeScorePanel .soc-employee-score-site-row, #notificationPanel .soc-notification-center-item ) { background: var(--ui-bg-surface-2) !important; border-color: var(--ui-border-subtle) !important; color: var(--ui-text-primary) !important; box-shadow: none !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( #homeView .soc-home-priority-row:hover, #homeView .soc-home-ticket-row:hover, #homeView .soc-home-mini-row:hover, #homeView .soc-home-watch-row:hover, #analyticsView .soc-analytics-hotspot-row.is-actionable:hover, #analyticsView .soc-analytics-followup-item:hover, #analyticsView .soc-analytics-v2-site-row:hover, #alertsView .soc-pc-selectable-row:hover, #ticketsView .soc-pc-selectable-row:hover, #employeeScorePanel .soc-employee-score-site-row:hover, #notificationPanel .soc-notification-center-item:hover ) { background: #152242 !important; border-color: var(--ui-border-strong) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( #alertsView .soc-summary-card, #ticketsView .soc-summary-card, #alertsView .soc-pc-side-panel-kpi-item, #ticketsView .soc-pc-side-panel-kpi-item, #employeeScorePanel .soc-employee-score-summary-card, #analyticsView .soc-analytics-v2-kpi-tile, #analyticsView .soc-analytics-v2-health-item ) { background: var(--ui-bg-surface-2) !important; border-color: var(--ui-border-subtle) !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( #alertsView .soc-summary-value, #ticketsView .soc-summary-value, #analyticsView .soc-analytics-v2-kpi-tile strong, #analyticsView .soc-analytics-v2-health-item strong, #employeeScorePanel .soc-employee-score-summary-value ) { color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is( .soc-analytics-chart-shell, .soc-analytics-pattern-shell, .soc-analytics-cause-shell, .soc-analytics-hotspot-shell, .soc-analytics-v2-table-shell ) { background: var(--ui-bg-surface-2) !important; border-color: var(--ui-border-subtle) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-line-chart .grid { stroke: rgba(169, 182, 211, 0.22) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-line-chart .area { fill: rgba(255, 107, 0, 0.12) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-line-chart .line { stroke: #ff7a1a !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is( .soc-analytics-pattern-cell, .soc-analytics-pattern-cell-board ) { background: #101a30 !important; border-color: #223055 !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is( .soc-analytics-pattern-cell.i1, .soc-analytics-pattern-cell-board.i1, .soc-analytics-pattern-scale.i1 ) { background: rgba(255, 122, 26, 0.08) !important; border-color: rgba(255, 122, 26, 0.16) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is( .soc-analytics-pattern-cell.i2, .soc-analytics-pattern-cell-board.i2, .soc-analytics-pattern-scale.i2 ) { background: rgba(255, 122, 26, 0.16) !important; border-color: rgba(255, 122, 26, 0.26) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is( .soc-analytics-pattern-cell.i3, .soc-analytics-pattern-cell-board.i3, .soc-analytics-pattern-scale.i3 ) { background: rgba(255, 122, 26, 0.24) !important; border-color: rgba(255, 122, 26, 0.34) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is( .soc-analytics-pattern-cell.i4, .soc-analytics-pattern-cell-board.i4, .soc-analytics-pattern-scale.i4 ) { background: rgba(255, 122, 26, 0.34) !important; border-color: rgba(255, 122, 26, 0.44) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is( .soc-analytics-pattern-cell.i5, .soc-analytics-pattern-cell-board.i5, .soc-analytics-pattern-scale.i5 ) { background: #ff7a1a !important; border-color: #ff7a1a !important; color: #ffffff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-cause-head { color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-cause-track { background: #182542 !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-cause-track span { background: #ff7a1a !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-table-head { background: #111a31 !important; border-bottom-color: var(--ui-border-subtle) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is( .soc-analytics-v2-table-head > *, .soc-analytics-v2-sort-head ) { color: var(--ui-text-secondary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-site-row.is-selected { background: #17284a !important; border-color: rgba(255, 107, 0, 0.3) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-search-input-wrap { border-bottom-color: rgba(169, 182, 211, 0.26) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel :is( .notices-toolbar-item, .notices-editor-action ) { color: var(--ui-text-secondary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel :is( .notices-toolbar-item:hover, .notices-toolbar-item:focus-visible, .notices-editor-action:hover, .notices-editor-action:focus-visible, .notices-toolbar-item.is-active ) { color: #ffd1b4 !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-table-picker { background: #10182d !important; border-color: var(--ui-border-strong) !important; box-shadow: var(--soc-shadow-card) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-table-picker-cell { background: #0e1729 !important; border-color: #26365f !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-table-picker-cell.is-active { background: rgba(255, 122, 26, 0.22) !important; border-color: rgba(255, 122, 26, 0.4) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationPanel :is( .soc-notification-center-item, .soc-notification-onboarding-modal .modal-panel, .soc-notification-permission-banner ) { background: var(--ui-bg-surface-2) !important; border-color: var(--ui-border-subtle) !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( #alertsView .soc-pc-side-panel-thread, #ticketsView .soc-pc-side-panel-thread, #alertsView .soc-pc-side-panel-summary, #ticketsView .soc-pc-side-panel-summary, #peopleView .soc-people-detail-summary, #employeeScorePanel .soc-employee-score-breakdown-section, #employeeScorePanel .soc-employee-score-breakdown-details, #employeeScorePanel .soc-employee-score-table-wrap, #hqReminderPanel .soc-reminder-preview-box, #hqReminderPanel .soc-reminder-danger-zone ) { background: var(--ui-bg-surface-2) !important; border-color: var(--ui-border-subtle) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel { background: transparent !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-main-row { background: transparent !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden) { background: var(--ui-bg-surface) !important; border-color: var(--ui-border-subtle) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-weekdays { background: #10192e !important; border-bottom-color: var(--ui-border-subtle) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-weekdays > span { color: var(--ui-text-secondary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell { background: var(--ui-bg-surface) !important; border-color: var(--ui-border-subtle) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month { background: #0f1729 !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month .soc-ops-support-calendar-cell-head > strong { color: rgba(241, 245, 249, 0.44) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month :is(.soc-ops-support-calendar-line-label, .soc-ops-support-calendar-line-count) { color: rgba(241, 245, 249, 0.5) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month .soc-ops-support-calendar-line { opacity: 0.68 !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell:hover { background: #121d35 !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-selected { background: #14213d !important; box-shadow: inset 0 0 0 2px rgba(255, 107, 0, 0.32) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell-head > strong, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line-label { color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line { background: #101c34 !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more { color: var(--ui-text-secondary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet { background: var(--ui-bg-surface) !important; border-color: var(--ui-border-subtle) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet :is( .soc-ops-support-detail-section, .soc-ops-support-detail-summary-metric, .soc-ops-support-detail-summary-purpose, .worker-row, .soc-ops-support-detail-more, .soc-ops-support-detail-timeline-item ) { background: var(--ui-bg-surface-2) !important; border-color: var(--ui-border-subtle) !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( .soc-realtime-date-icon-img, .soc-ticket-datebar .soc-realtime-date-icon-img ) { filter: brightness(1.25) contrast(0.92) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) .soc-app-shell > header.topbar { background: rgba(18, 28, 47, 0.94) !important; border-bottom: 1px solid var(--ui-border-subtle) !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) .soc-app-shell > main.container.ds-page, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) .soc-app-shell > main.container.ds-page.admin-layout { background: var(--ui-bg-canvas) !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( #homeView, #analyticsView, #announcementPanel, #alertsView, #ticketsView, #peopleView, #employeeScorePanel, #hqReminderPanel, #notificationSettingsPanel, #auditPanel, #weeklyView ) { background: transparent !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is( .soc-analytics-v2-toolbar, .soc-analytics-v2-kpi-tile, .soc-analytics-v2-health-item, .soc-analytics-hotspot-row, .soc-analytics-v2-table-shell, .soc-analytics-followup-column, .soc-analytics-followup-hero, .soc-analytics-followup-item ) { background: var(--ui-bg-surface-2) !important; border-color: var(--ui-border-subtle) !important; color: var(--ui-text-primary) !important; box-shadow: none !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is( .soc-analytics-v2-toolbar .ds-btn, .soc-analytics-v2-toolbar select, .soc-analytics-v2-toolbar input, .soc-analytics-v2-toolbar button:not(.soc-primary-btn) ) { background: #10192b !important; border-color: var(--ui-border-strong) !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is( .soc-analytics-hotspot-score-badge, .soc-analytics-followup-hero-chip, .soc-analytics-followup-item-age ) { background: #10192b !important; border-color: var(--ui-border-strong) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#alertsView, #ticketsView) :is( .soc-realtime-datebar, .soc-ops-workspace-topbar, .soc-pc-list-main, .soc-realtime-state ) { background: var(--ui-bg-surface-2) !important; border-color: var(--ui-border-subtle) !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#alertsView, #ticketsView) :is( .soc-workspace-inline-badge, .soc-pc-selectable-row, .soc-pc-list-header ) { background: #10192b !important; border-color: var(--ui-border-subtle) !important; color: var(--ui-text-secondary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#alertsView, #ticketsView) .soc-pc-selectable-row.is-selected { background: #14233a !important; border-color: rgba(255, 122, 26, 0.26) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-form { background: var(--ui-bg-surface-2) !important; border-color: var(--ui-border-subtle) !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-form :is( input, select, textarea, .ds-btn:not(.soc-primary-btn) ) { background: #10192b !important; border-color: var(--ui-border-strong) !important; color: var(--ui-text-primary) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line { background: #121d31 !important; border-color: rgba(255, 122, 26, 0.22) !important; } /* ===== Final dark-mode authority: neon text + no bright fills ===== */ [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard { background: linear-gradient(180deg, rgba(18, 28, 47, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%) !important; border-color: rgba(255, 122, 26, 0.34) !important; box-shadow: inset 0 0 0 1px rgba(255, 122, 26, 0.08), 0 0 0 1px rgba(255, 122, 26, 0.08) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track { stroke: rgba(235, 241, 255, 0.22) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc { stroke: #ff7a1a !important; filter: none !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard :is( h3, .soc-analytics-v2-title-with-help, #analyticsRiskScoreValue, .soc-risk-grade, .soc-risk-info-trigger, .soc-analytics-v2-help-btn ) { color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard .soc-risk-grade { background: rgba(255, 122, 26, 0.18) !important; border-color: rgba(255, 140, 48, 0.44) !important; color: #fff4ea !important; box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.12) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is( #analyticsHeroKpiRack h3, #analyticsHeroKpiRack strong, #analyticsHeroKpiRack .meta, #analyticsHeroHealthCard h3, #analyticsHeroHealthCard strong, #analyticsHeroHealthCard .meta, .soc-analytics-followup-column h3, .soc-analytics-followup-column strong, .soc-analytics-followup-column p, .soc-analytics-followup-hero strong, .soc-analytics-followup-hero p, .soc-analytics-followup-item strong, .soc-analytics-followup-item p ) { color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView :is( .soc-home-ticket-title, .soc-home-mini-title, .soc-home-watch-title, .soc-home-priority-title, .soc-home-hub-card-head h3, .soc-home-watch-empty-title ) { color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView :is( .soc-home-ticket-meta, .soc-home-ticket-age, .soc-home-mini-meta, .soc-home-mini-age, .soc-home-watch-meta, .soc-home-priority-meta, .soc-home-watch-empty-copy ) { color: rgba(232, 238, 248, 0.76) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-status-chip.is-active.is-warning { background: rgba(255, 191, 60, 0.18) !important; border-color: rgba(255, 191, 60, 0.38) !important; color: #fff2cf !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-status-chip.is-active.is-alert { background: rgba(255, 122, 26, 0.2) !important; border-color: rgba(255, 122, 26, 0.38) !important; color: #fff0e6 !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-priority-chip[data-tone="incident"] { background: rgba(255, 122, 26, 0.18) !important; border-color: rgba(255, 122, 26, 0.34) !important; color: #fff1e5 !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-priority-chip[data-tone="ticket"] { background: rgba(47, 128, 255, 0.16) !important; border-color: rgba(47, 128, 255, 0.34) !important; color: #eff6ff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-priority-badge[data-tone="warning"] { background: rgba(255, 191, 60, 0.14) !important; border-color: rgba(255, 191, 60, 0.32) !important; color: #fff0cd !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-priority-badge[data-tone="danger"] { background: rgba(255, 122, 26, 0.18) !important; border-color: rgba(255, 122, 26, 0.34) !important; color: #fff0e6 !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-priority-badge[data-tone="neutral"] { background: rgba(148, 163, 184, 0.12) !important; border-color: rgba(169, 182, 211, 0.24) !important; color: #eef4ff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-watch-chip[data-tone="danger"] { background: rgba(255, 107, 107, 0.16) !important; border-color: rgba(255, 107, 107, 0.34) !important; color: #fff0f0 !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-watch-chip[data-tone="caution"] { background: rgba(255, 191, 60, 0.14) !important; border-color: rgba(255, 191, 60, 0.3) !important; color: #fff0cd !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-ticket-state { background: rgba(148, 163, 184, 0.12) !important; border-color: rgba(169, 182, 211, 0.24) !important; color: #eef4ff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head > strong { color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line { border: 1px solid rgba(255, 122, 26, 0.22) !important; border-radius: 8px !important; background: rgba(255, 122, 26, 0.08) !important; color: #f8fbff !important; box-shadow: inset 2px 0 0 rgba(255, 122, 26, 0.9), 0 0 16px rgba(255, 122, 26, 0.08) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.state-pending, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .cal-line.state-pending { background: rgba(255, 166, 43, 0.12) !important; border-color: rgba(255, 191, 60, 0.36) !important; color: #fff3d4 !important; box-shadow: inset 2px 0 0 #ffbf3c, 0 0 14px rgba(255, 191, 60, 0.08) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.state-approved, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.state-confirmed, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .cal-line.state-approved { background: rgba(30, 191, 163, 0.12) !important; border-color: rgba(30, 191, 163, 0.34) !important; color: #eafffb !important; box-shadow: inset 2px 0 0 #1ebfa3, 0 0 14px rgba(30, 191, 163, 0.08) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.state-unavailable, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.state-rejected, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .cal-line.state-unavailable, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .cal-line.state-rejected, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-over-assigned { background: rgba(255, 107, 107, 0.12) !important; border-color: rgba(255, 107, 107, 0.34) !important; color: #ffecee !important; box-shadow: inset 2px 0 0 #ff6b6b, 0 0 14px rgba(255, 107, 107, 0.08) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.state-cancelled, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .cal-line.state-cancelled { background: rgba(148, 163, 184, 0.12) !important; border-color: rgba(169, 182, 211, 0.26) !important; color: #eaf1ff !important; box-shadow: inset 2px 0 0 #a9b6d3, 0 0 14px rgba(169, 182, 211, 0.06) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid :is( .soc-ops-support-calendar-line-label, .soc-ops-support-calendar-line-copy, .soc-ops-support-calendar-line-main, .soc-ops-support-calendar-line-count ) { color: inherit !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet :is( h3, h4, strong, .soc-ops-support-detail-summary-meta, .soc-ops-support-detail-summary-label, .soc-ops-support-detail-summary-value, .soc-ops-support-detail-summary-inline, .soc-ops-support-detail-timeline-copy, .soc-ops-support-detail-timeline-meta, .soc-ops-support-detail-section-title, .soc-ops-support-detail-empty-copy, .worker-row, .worker-row span, .worker-row strong, .worker-row button ) { color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet :is( .worker-row, .soc-ops-support-detail-summary-metric, .soc-ops-support-detail-summary-purpose, .soc-ops-support-detail-timeline-item ) { background: #141e34 !important; border-color: rgba(169, 182, 211, 0.18) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet :is( .worker-row .ds-btn:not(.soc-primary-btn):not(.ds-btn-primary), .worker-row button:not(.soc-primary-btn):not(.ds-btn-primary) ) { background: rgba(148, 163, 184, 0.12) !important; border-color: rgba(169, 182, 211, 0.24) !important; color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#alertsView, #ticketsView) .soc-pc-side-panel :is( h3, h4, strong, label, span, p, dt, dd, .soc-pc-side-panel-summary-value, .soc-pc-side-panel-thread-copy ) { color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView :is( h3, h4, .soc-workspace-card-head h3, .soc-monitoring-grid-primary, .soc-people-detail-panel strong, .soc-people-detail-panel span, .soc-people-detail-panel p ) { color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView :is( .soc-people-pane-summary-head h3, .soc-workspace-card-head h3, .soc-people-detail-panel-head h3, .soc-workspace-drawer-head h3, .soc-sheet-head h3 ) { color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#peopleView, #employeeScorePanel) :is( .soc-people-donut-center, .soc-people-donut-center strong, .soc-people-donut-center span ) { color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#peopleView, #employeeScorePanel) .soc-monitoring-grid-primary { color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel :is( .soc-reminder-card-head h3, .soc-settings-scope-label, .soc-notification-setting-row strong, .soc-notification-setting-row span, .soc-notification-settings-form h4, .soc-notification-settings-form label ) { color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-settings-scope-label { background: rgba(255, 122, 26, 0.14) !important; border-color: rgba(255, 122, 26, 0.3) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel :is( .soc-apple-weekly-flow-shell, .soc-apple-weekly-flow-main, .soc-apple-weekly-stage-surface, .soc-apple-weekly-sync-selection-card, .soc-apple-weekly-setup-shell-card, .soc-apple-weekly-setup-list-card, .soc-apple-weekly-setup-section, .soc-apple-weekly-setup-support-card, .soc-apple-weekly-setup-context-card ) { background: #141e34 !important; border-color: rgba(169, 182, 211, 0.18) !important; color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel :is( .soc-apple-weekly-flow-header h3, .soc-apple-weekly-flow-step-copy strong, .soc-apple-weekly-sync-selection-head strong, .soc-apple-weekly-sync-selection-link, .soc-apple-weekly-sync-selection-facts em, .soc-apple-weekly-sync-selection-facts b, .soc-apple-weekly-setup-section-head h4, .soc-apple-weekly-stage-banner strong, .soc-apple-weekly-stage-banner p ) { color: #f8fbff !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel :is( .soc-apple-weekly-stage-actions .ds-btn:not(.ds-btn-primary), .soc-apple-weekly-setup-footer .ds-btn:not(.ds-btn-primary), .soc-apple-weekly-flow-back-row .ds-btn:not(.ds-btn-primary) ) { background: rgba(148, 163, 184, 0.12) !important; border-color: rgba(169, 182, 211, 0.24) !important; color: #f8fbff !important; } @media (min-width: 1024px) { body:is(.soc-desktop-shell, .soc-desktop-adaptive) .container.ds-page > :is( #hqReminderPanel, #notificationSettingsPanel, #auditPanel ).soc-settings-panel, body:is(.soc-desktop-shell, .soc-desktop-adaptive) .container.admin-layout > :is( #hqReminderPanel, #notificationSettingsPanel, #auditPanel ).soc-settings-panel { height: calc(100dvh - 56px) !important; max-height: calc(100dvh - 56px) !important; min-height: 0 !important; margin: 0 auto !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; scrollbar-gutter: stable both-edges; } } @media (min-width: 1024px) { body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-stepper-region { width: 100% !important; max-width: 100% !important; margin: 0 0 -2px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-stepper { width: 100% !important; margin: 0 !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-step-node { box-shadow: none !important; filter: none !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-step.is-active .soc-apple-weekly-flow-step-node, [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-step.is-complete .soc-apple-weekly-flow-step-node { box-shadow: none !important; filter: none !important; } } /* ===== Final dark authority: analytics top risk sites pager + status chips ===== */ [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-table-footer { border-top-color: rgba(169, 182, 211, 0.14) !important; background: #121b2d !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-page-btn { border-color: rgba(169, 182, 211, 0.24) !important; background: #141f34 !important; color: #eef4ff !important; box-shadow: none !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-page-btn:hover:not(:disabled) { border-color: rgba(255, 122, 26, 0.34) !important; background: rgba(255, 122, 26, 0.12) !important; color: #fff4ea !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-page-btn.is-active { border-color: rgba(255, 122, 26, 0.58) !important; background: rgba(255, 122, 26, 0.16) !important; color: #fff4ea !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-page-btn:disabled { border-color: rgba(169, 182, 211, 0.16) !important; background: rgba(148, 163, 184, 0.12) !important; color: rgba(232, 238, 248, 0.48) !important; opacity: 1 !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-page-ellipsis { color: rgba(232, 238, 248, 0.68) !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-site-cell--state .soc-risk-grade { background: #18233a !important; color: #f8fbff !important; box-shadow: none !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.safe, .soc-risk-grade.stable, .soc-risk-grade.is-safe, .soc-risk-grade[data-risk-level="safe"]) { border-color: rgba(24, 178, 107, 0.4) !important; background: rgba(24, 178, 107, 0.16) !important; color: #eafff4 !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.caution, .soc-risk-grade.is-caution, .soc-risk-grade[data-risk-level="caution"]) { border-color: rgba(255, 191, 60, 0.4) !important; background: rgba(255, 191, 60, 0.16) !important; color: #fff1cf !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.danger, .soc-risk-grade.risk, .soc-risk-grade.critical, .soc-risk-grade.is-danger, .soc-risk-grade[data-risk-level="danger"]) { border-color: rgba(255, 107, 107, 0.42) !important; background: rgba(255, 107, 107, 0.16) !important; color: #fff0f1 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer, html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer > * { background: #121b2d !important; color: #eef4ff !important; border-top-color: rgba(169, 182, 211, 0.14) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer :is(button, span), html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager :is(button, span) { color: #eef4ff !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn { border-color: rgba(169, 182, 211, 0.24) !important; background: #141f34 !important; color: #eef4ff !important; box-shadow: none !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn:hover:not(:disabled) { border-color: rgba(255, 122, 26, 0.34) !important; background: rgba(255, 122, 26, 0.12) !important; color: #fff4ea !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn.is-active { border-color: rgba(255, 122, 26, 0.58) !important; background: rgba(255, 122, 26, 0.16) !important; color: #fff4ea !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn:disabled { border-color: rgba(169, 182, 211, 0.16) !important; background: rgba(148, 163, 184, 0.12) !important; color: rgba(232, 238, 248, 0.48) !important; opacity: 1 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-ellipsis { color: rgba(232, 238, 248, 0.68) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state .soc-risk-grade { background: #18233a !important; color: #f8fbff !important; border-color: rgba(169, 182, 211, 0.2) !important; box-shadow: none !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.safe, .soc-risk-grade.stable, .soc-risk-grade.is-safe, .soc-risk-grade[data-risk-level="safe"]) { border-color: rgba(24, 178, 107, 0.4) !important; background: rgba(24, 178, 107, 0.16) !important; color: #eafff4 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.caution, .soc-risk-grade.is-caution, .soc-risk-grade[data-risk-level="caution"]) { border-color: rgba(255, 191, 60, 0.4) !important; background: rgba(255, 191, 60, 0.16) !important; color: #fff1cf !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.danger, .soc-risk-grade.risk, .soc-risk-grade.critical, .soc-risk-grade.is-danger, .soc-risk-grade[data-risk-level="danger"]) { border-color: rgba(255, 107, 107, 0.42) !important; background: rgba(255, 107, 107, 0.16) !important; color: #fff0f1 !important; } /* ===== Final authority: home hub KPI icons + header cleanup ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-header-meta { display: inline-flex !important; align-items: center !important; gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-header-note { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-header-meta > :not(.soc-home-hub-live-pill) { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon { --soc-home-kpi-icon-mask: none; --soc-home-kpi-icon-shell: 30px; --soc-home-kpi-icon-size: 18px; --soc-home-kpi-icon-foreground: #64748b; --soc-home-kpi-icon-bg: #f1f5f9; --soc-home-kpi-icon-border: #e2e8f0; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: var(--soc-home-kpi-icon-shell) !important; min-width: var(--soc-home-kpi-icon-shell) !important; height: var(--soc-home-kpi-icon-shell) !important; min-height: var(--soc-home-kpi-icon-shell) !important; flex: 0 0 var(--soc-home-kpi-icon-shell) !important; overflow: hidden !important; border: 1px solid var(--soc-home-kpi-icon-border) !important; border-radius: 8px !important; background: var(--soc-home-kpi-icon-bg) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon::before { content: "" !important; position: absolute !important; inset: 0 !important; margin: auto !important; width: var(--soc-home-kpi-icon-size) !important; height: var(--soc-home-kpi-icon-size) !important; border-radius: 0 !important; background: var(--soc-home-kpi-icon-foreground) !important; -webkit-mask: var(--soc-home-kpi-icon-mask) center / var(--soc-home-kpi-icon-size) var(--soc-home-kpi-icon-size) no-repeat !important; mask: var(--soc-home-kpi-icon-mask) center / var(--soc-home-kpi-icon-size) var(--soc-home-kpi-icon-size) no-repeat !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon::after { content: none !important; display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="intake"] .soc-home-hub-kpi-icon { --soc-home-kpi-icon-foreground: #2866ec; --soc-home-kpi-icon-bg: #eff6ff; --soc-home-kpi-icon-border: #dbeafe; --soc-home-kpi-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7Z'/%3E%3Cpath d='M8 7l1.4-2h5.2L16 7'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E"); } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="critical"] .soc-home-hub-kpi-icon { --soc-home-kpi-icon-foreground: #b45309; --soc-home-kpi-icon-bg: #fff7ed; --soc-home-kpi-icon-border: #fed7aa; --soc-home-kpi-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 21 19H3L12 4Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="pending"] .soc-home-hub-kpi-icon { --soc-home-kpi-icon-foreground: #5f708d; --soc-home-kpi-icon-bg: #f8fafc; --soc-home-kpi-icon-border: #e2e8f0; --soc-home-kpi-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v5l3 2'/%3E%3C/svg%3E"); } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="urgent"] .soc-home-hub-kpi-icon { --soc-home-kpi-icon-size: 18px; --soc-home-kpi-icon-foreground: #f3681d; --soc-home-kpi-icon-bg: #fff1e8; --soc-home-kpi-icon-border: #fed7aa; --soc-home-kpi-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 17h8'/%3E%3Cpath d='M9 17v-6a3 3 0 0 1 6 0v6'/%3E%3Cpath d='M7 11H5'/%3E%3Cpath d='M19 11h-2'/%3E%3Cpath d='M8 6 6.5 4.5'/%3E%3Cpath d='M16 6l1.5-1.5'/%3E%3C/svg%3E"); } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon { --soc-home-kpi-icon-bg: rgba(148, 163, 184, 0.12); --soc-home-kpi-icon-border: rgba(148, 163, 184, 0.22); box-shadow: none !important; } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="intake"] .soc-home-hub-kpi-icon { --soc-home-kpi-icon-foreground: #8eb5ff; --soc-home-kpi-icon-bg: rgba(96, 165, 250, 0.14); --soc-home-kpi-icon-border: rgba(147, 197, 253, 0.24); } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="critical"] .soc-home-hub-kpi-icon { --soc-home-kpi-icon-foreground: #ffd56b; --soc-home-kpi-icon-bg: rgba(251, 191, 36, 0.14); --soc-home-kpi-icon-border: rgba(253, 230, 138, 0.24); } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="pending"] .soc-home-hub-kpi-icon { --soc-home-kpi-icon-foreground: #cbd5e1; --soc-home-kpi-icon-bg: rgba(148, 163, 184, 0.12); --soc-home-kpi-icon-border: rgba(203, 213, 225, 0.2); } [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="urgent"] .soc-home-hub-kpi-icon { --soc-home-kpi-icon-foreground: #ff9a62; --soc-home-kpi-icon-bg: rgba(249, 115, 22, 0.14); --soc-home-kpi-icon-border: rgba(253, 186, 116, 0.24); } /* ===== Ultimate dark authority: analytics Top risk sites pager + status chips ===== */ html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer, html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer > *, body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer, body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer > * { background: #121b2d !important; color: #eef4ff !important; border-top-color: rgba(169, 182, 211, 0.14) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager :is(button, span), body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager :is(button, span) { color: #eef4ff !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn, body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn { background: #141f34 !important; border: 1px solid rgba(169, 182, 211, 0.24) !important; color: #eef4ff !important; box-shadow: none !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn:hover:not(:disabled), body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn:hover:not(:disabled) { background: rgba(255, 122, 26, 0.12) !important; border-color: rgba(255, 122, 26, 0.34) !important; color: #fff4ea !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn.is-active, body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn.is-active { background: rgba(255, 122, 26, 0.16) !important; border-color: rgba(255, 122, 26, 0.58) !important; color: #fff4ea !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn:disabled, body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn:disabled { background: rgba(148, 163, 184, 0.12) !important; border-color: rgba(169, 182, 211, 0.16) !important; color: rgba(232, 238, 248, 0.48) !important; opacity: 1 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-ellipsis, body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-ellipsis { color: rgba(232, 238, 248, 0.68) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state .soc-risk-grade, body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state .soc-risk-grade { background: #18233a !important; border: 1px solid rgba(169, 182, 211, 0.22) !important; color: #f8fbff !important; box-shadow: none !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.safe, .soc-risk-grade.stable, .soc-risk-grade.is-safe, .soc-risk-grade[data-risk-level="safe"]), body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.safe, .soc-risk-grade.stable, .soc-risk-grade.is-safe, .soc-risk-grade[data-risk-level="safe"]) { background: rgba(24, 178, 107, 0.16) !important; border-color: rgba(24, 178, 107, 0.42) !important; color: #eafff4 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.caution, .soc-risk-grade.is-caution, .soc-risk-grade[data-risk-level="caution"]), body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.caution, .soc-risk-grade.is-caution, .soc-risk-grade[data-risk-level="caution"]) { background: rgba(255, 191, 60, 0.16) !important; border-color: rgba(255, 191, 60, 0.42) !important; color: #fff1cf !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.danger, .soc-risk-grade.risk, .soc-risk-grade.critical, .soc-risk-grade.is-danger, .soc-risk-grade[data-risk-level="danger"]), body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.danger, .soc-risk-grade.risk, .soc-risk-grade.critical, .soc-risk-grade.is-danger, .soc-risk-grade[data-risk-level="danger"]) { background: rgba(255, 107, 107, 0.16) !important; border-color: rgba(255, 107, 107, 0.44) !important; color: #fff0f1 !important; } /* ===== Ultimate authority: ops support 5-week month view ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-main-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-center { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 16px !important; flex-wrap: nowrap !important; min-width: 0 !important; width: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav { display: inline-flex !important; align-items: center !important; align-self: center !important; gap: 10px !important; flex: 0 0 auto !important; min-height: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label) { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; line-height: 36px !important; vertical-align: middle !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav .month-label { padding-inline: 2px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filters { display: flex !important; align-items: center !important; gap: 16px !important; flex-wrap: nowrap !important; flex: 1 1 auto !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filter-field { display: inline-flex !important; align-items: center !important; align-self: center !important; gap: 8px !important; min-height: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filter-inline-label { display: inline-flex !important; align-items: center !important; min-height: 36px !important; height: 36px !important; margin: 0 !important; line-height: 36px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-compact-control { min-height: 36px !important; height: 36px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportEmptyState, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportEmptyState.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel:has(#opsSupportCalendarView.soc-ops-support-view:not(.hidden)) #opsSupportEmptyState { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden) { display: grid !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid { grid-template-rows: repeat(5, minmax(0, 1fr)) !important; grid-auto-rows: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-day-request-table .soc-ops-support-work-type-badge, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-day-request-table .support-status-inline { min-width: 0 !important; min-height: auto !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-day-request-table .soc-ops-support-work-type-badge { justify-content: flex-start !important; font-size: 14px !important; line-height: 1.35 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-day-request-table .support-status-inline { gap: 6px !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 800 !important; } /* ===== Ultimate authority: settings flat panels ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#hqReminderPanel, #notificationSettingsPanel) :is( .soc-reminder-form, .soc-notification-settings-form ) { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel :is(.soc-notification-state-row, .soc-notification-check-row) { border: 0 !important; border-bottom: 0 !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row { padding-inline: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel :is(.soc-notification-state-row, .soc-notification-check-row) { padding-inline: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-preview-box, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-permission-banner { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel :is( .soc-settings-scope-label, #notificationPermissionBadge ) { display: none !important; } /* ===== Ultimate authority: people HR stats meaning + chart ratio ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-kpi-strip { grid-template-columns: minmax(250px, 0.95fr) minmax(340px, 1.15fr) minmax(250px, 0.9fr) !important; gap: 14px !important; align-items: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-kpi-card.is-sparkline { gap: 12px !important; align-content: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-sparkline-header { justify-content: flex-start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-sparkline-shell { width: min(100%, 420px) !important; justify-self: center !important; align-self: start !important; padding: 10px 12px 8px !important; border-radius: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-sparkline { height: 108px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-sparkline-caption { margin: 0 !important; color: var(--ui-text-secondary, var(--soc-text-sub)) !important; font-size: 12px !important; line-height: 17px !important; text-align: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-stats-grid { grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr) !important; gap: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-trend-chart { width: min(100%, 860px) !important; justify-self: center !important; min-height: 244px !important; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-trend-bars { min-height: 156px !important; height: 156px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-trend-meta { gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-trend-meta strong { font-size: 12px !important; line-height: 17px !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-workspace-card-head .meta { max-width: 32ch; } @media (min-width: 1800px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-trend-chart { width: min(100%, 920px) !important; } } /* ===== Ultimate authority: settings inner chrome cleanup ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-form { gap: 10px !important; padding-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row { padding: 8px 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row--preview { padding-top: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel :is( .soc-reminder-preview-box, .soc-reminder-advanced, .soc-reminder-advanced-body, .soc-reminder-danger-zone ) { border: 0 !important; border-top: 0 !important; border-bottom: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-preview-box { padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-advanced > summary { padding: 10px 0 2px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-advanced-body { padding: 6px 0 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-danger-zone { padding: 6px 0 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-settings-form { gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel :is( .soc-settings-scope-label, #notificationPermissionBadge ) { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-permission-banner { padding: 0 0 10px !important; margin: 0 0 10px !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-state-row { padding: 0 0 12px !important; margin: 0 0 12px !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-check-row { padding: 14px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-check-row + .soc-notification-check-row { border-top: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white) !important; } /* ===== Ultimate authority: settings single-shell cleanup ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-config-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-settings-card { overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-form { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; gap: 10px !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row + .soc-reminder-row, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row--preview, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel :is( .soc-reminder-preview-box, .soc-reminder-advanced, .soc-reminder-advanced-body, .soc-reminder-danger-zone ) { border: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row { padding: 8px 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row--preview { padding-top: 2px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-preview-box, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-advanced-body, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-danger-zone { padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-advanced > summary { padding: 8px 0 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-settings-form { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel :is( .soc-settings-scope-label, #notificationPermissionBadge, .soc-notification-permission-banner ) { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-state-row, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-check-row, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-check-row + .soc-notification-check-row { border: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-state-row { padding: 0 0 10px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-check-row { padding: 12px 0 !important; } /* ===== Ultimate authority: ops support fresh pending burst ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line { position: relative !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy { overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge { display: block !important; position: absolute !important; top: -23px !important; right: -12px !important; width: 50px !important; height: 38px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; pointer-events: none !important; z-index: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge-burst { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge-burst > i { position: absolute !important; display: block !important; width: 1.4px !important; height: 12px !important; border-radius: 999px !important; background: #ff8a1f !important; box-shadow: none !important; transform-origin: 50% 50% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge-burst > i:nth-child(1) { top: 2px !important; right: 36px !important; height: 13px !important; transform: rotate(-9deg) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge-burst > i:nth-child(2) { top: -2px !important; right: 25px !important; height: 21px !important; transform: rotate(11deg) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge-burst > i:nth-child(3) { top: 16px !important; right: 0 !important; width: 21px !important; height: 1.4px !important; transform: rotate(-9deg) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge-burst > i:nth-child(4) { top: 30px !important; right: 6px !important; width: 15px !important; height: 1.4px !important; transform: rotate(2deg) !important; } /* ===== Ultimate authority: settings no inner boxes ===== */ #hqReminderPanel .soc-reminder-form, #notificationSettingsPanel .soc-notification-settings-form { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } #hqReminderPanel .soc-reminder-row, #hqReminderPanel .soc-reminder-row + .soc-reminder-row, #hqReminderPanel .soc-reminder-row--preview, #hqReminderPanel :is( .soc-reminder-preview-box, .soc-reminder-advanced, .soc-reminder-advanced-body, .soc-reminder-danger-zone ) { border: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #hqReminderPanel .soc-reminder-row { padding: 10px 0 !important; } #hqReminderPanel .soc-reminder-row--preview, #hqReminderPanel .soc-reminder-preview-box, #hqReminderPanel .soc-reminder-advanced-body, #hqReminderPanel .soc-reminder-danger-zone { padding: 0 !important; } #hqReminderPanel .soc-reminder-advanced > summary { padding: 10px 0 0 !important; } #notificationSettingsPanel .soc-settings-scope-label, #notificationSettingsPanel #notificationPermissionBadge, #notificationSettingsPanel #notificationPermissionBanner { display: none !important; } #notificationSettingsPanel .soc-notification-state-row, #notificationSettingsPanel .soc-notification-check-row, #notificationSettingsPanel .soc-notification-check-row + .soc-notification-check-row { border: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #notificationSettingsPanel .soc-notification-state-row { padding: 0 0 8px !important; margin: 0 !important; } #notificationSettingsPanel .soc-notification-check-row { padding: 12px 0 !important; } /* ===== Final authority: settings single outer shell only ===== */ #hqReminderPanel .soc-reminder-config-card, #notificationSettingsPanel .soc-notification-settings-card { overflow: hidden !important; } #hqReminderPanel .soc-reminder-card-head, #notificationSettingsPanel .soc-reminder-card-head { padding-bottom: 12px !important; } #hqReminderPanel .soc-reminder-form { display: grid !important; gap: 10px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #hqReminderPanel .soc-reminder-row, #hqReminderPanel .soc-reminder-row + .soc-reminder-row, #hqReminderPanel .soc-reminder-row--preview, #hqReminderPanel .soc-reminder-row--control, #hqReminderPanel .soc-reminder-row--toggle, #hqReminderPanel :is( .soc-reminder-preview-box, .soc-reminder-advanced, .soc-reminder-advanced-body, .soc-reminder-danger-zone ) { border: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #hqReminderPanel .soc-reminder-row { padding: 8px 0 !important; margin: 0 !important; row-gap: 10px !important; } #hqReminderPanel .soc-reminder-row--preview, #hqReminderPanel .soc-reminder-preview-box, #hqReminderPanel .soc-reminder-advanced-body, #hqReminderPanel .soc-reminder-danger-zone { padding: 0 !important; } #hqReminderPanel .soc-reminder-advanced > summary { padding: 10px 0 0 !important; border: 0 !important; } #hqReminderPanel .soc-reminder-row + .soc-reminder-row, #hqReminderPanel .soc-reminder-row--control + .soc-reminder-row, #hqReminderPanel .soc-reminder-row--toggle + .soc-reminder-row, #hqReminderPanel .soc-reminder-row--control + .soc-reminder-row--control, #hqReminderPanel .soc-reminder-row--toggle + .soc-reminder-row--control, #hqReminderPanel .soc-reminder-row--control + .soc-reminder-row--preview, #hqReminderPanel .soc-reminder-row--preview + .soc-reminder-row, #hqReminderPanel .soc-reminder-row--preview + .soc-reminder-advanced, #hqReminderPanel .soc-reminder-advanced + .soc-reminder-row, #hqReminderPanel .soc-reminder-advanced + .soc-reminder-row--preview, #hqReminderPanel .soc-reminder-row--control::before, #hqReminderPanel .soc-reminder-row--toggle::before, #hqReminderPanel .soc-reminder-row--preview::before, #hqReminderPanel .soc-reminder-form > *::before, #hqReminderPanel .soc-reminder-form > *::after, #hqReminderPanel .soc-reminder-row::before, #hqReminderPanel .soc-reminder-row::after { border: 0 !important; box-shadow: none !important; background-image: none !important; } #notificationSettingsPanel .soc-reminder-card-head .soc-settings-scope-label, #notificationSettingsPanel #notificationPermissionBadge, #notificationSettingsPanel #notificationPermissionBanner { display: none !important; } #notificationSettingsPanel .soc-reminder-card-head .chip, #notificationSettingsPanel .soc-reminder-card-head .soc-settings-summary-chip, #notificationSettingsPanel .soc-reminder-card-head .soc-settings-scope-label, #notificationSettingsPanel .soc-notification-state-value, #notificationSettingsPanel .soc-notification-state-meta, #notificationSettingsPanel [data-notification-state], #notificationSettingsPanel [data-notification-permission] { display: none !important; } #notificationSettingsPanel .soc-notification-settings-form { display: grid !important; gap: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #notificationSettingsPanel .soc-notification-state-row, #notificationSettingsPanel .soc-notification-check-row, #notificationSettingsPanel .soc-notification-check-row + .soc-notification-check-row { border: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #notificationSettingsPanel .soc-notification-state-row { padding: 0 0 10px !important; margin: 0 !important; } #notificationSettingsPanel .soc-notification-check-row { padding: 12px 0 !important; margin: 0 !important; } #notificationSettingsPanel .soc-notification-state-row, #notificationSettingsPanel .soc-notification-check-row, #notificationSettingsPanel .soc-notification-check-row + .soc-notification-check-row, #notificationSettingsPanel .soc-notification-settings-form > *::before, #notificationSettingsPanel .soc-notification-settings-form > *::after, #notificationSettingsPanel .soc-notification-state-row::before, #notificationSettingsPanel .soc-notification-state-row::after, #notificationSettingsPanel .soc-notification-check-row::before, #notificationSettingsPanel .soc-notification-check-row::after { border: 0 !important; box-shadow: none !important; background-image: none !important; } /* ===== Phase 3 current pass: people detail simplification + stats cleanup + header clipping fix ===== */ body.soc-desktop-shell #peopleView .soc-people-admin-header-wrap { position: sticky; top: 0; z-index: 8; padding: 4px 0 8px; background: linear-gradient( 180deg, var(--ui-bg-canvas, #f6f7fb) 0%, color-mix(in srgb, var(--ui-bg-canvas, #f6f7fb) 92%, transparent) 78%, transparent 100% ); backdrop-filter: blur(10px); } body.soc-desktop-shell #peopleView .soc-people-admin-title-row { align-items: flex-start !important; } .soc-people-detail-body-shell { display: grid; gap: 14px; min-height: 0; } .soc-people-detail-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; padding: 0 0 14px; border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)); } .soc-people-detail-avatar { width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--soc-people-accent-surface, rgba(249, 115, 22, 0.12)) 100%, transparent); color: var(--soc-people-accent-strong, #c2410c); box-shadow: none; } .soc-people-detail-hero-copy { display: grid; gap: 6px; min-width: 0; } .soc-people-detail-hero-eyebrow { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .soc-people-detail-hero-headline { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; } .soc-people-detail-hero-headline strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 24px; line-height: 30px; letter-spacing: -0.03em; overflow-wrap: anywhere; } .soc-people-detail-hero-copy .meta, .soc-people-detail-hero-context { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 17px; } .soc-people-detail-hero-context { color: var(--ui-text-primary, var(--soc-text)); font-weight: 700; } .soc-people-detail-pill-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .soc-people-detail-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 999px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 16px; font-weight: 700; } .soc-people-detail-pill.is-accent { border-color: rgba(249, 115, 22, 0.22); background: rgba(249, 115, 22, 0.10); color: var(--soc-people-accent-strong, #c2410c); } .soc-people-detail-summary-grid, .soc-people-detail-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; } .soc-people-detail-summary-grid--compact { gap: 8px; } .soc-people-detail-section-block { display: grid; gap: 10px; min-width: 0; } .soc-people-detail-section-head { display: grid; gap: 3px; } .soc-people-detail-section-eyebrow { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 10px; line-height: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .soc-people-detail-section-head h4 { margin: 0; color: var(--ui-text-primary, var(--soc-text)); font-size: 15px; line-height: 21px; letter-spacing: -0.02em; } .soc-people-detail-metric-card { display: grid; gap: 4px; min-width: 0; padding: 12px; border: 1px solid var(--ui-border-subtle, var(--soc-border)); border-radius: 12px; background: var(--ui-bg-surface-subtle, var(--soc-card-bg)); } .soc-people-detail-metric-card.is-wide { grid-column: 1 / -1; } .soc-people-detail-metric-card.is-primary { border-color: rgba(249, 115, 22, 0.18); background: color-mix(in srgb, var(--ui-bg-surface, #fff) 90%, rgba(249, 115, 22, 0.10)); } .soc-people-detail-metric-card.is-accent { border-color: rgba(249, 115, 22, 0.22); background: color-mix(in srgb, var(--ui-bg-surface, #fff) 88%, rgba(249, 115, 22, 0.12)); } .soc-people-detail-metric-card span { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 15px; font-weight: 700; } .soc-people-detail-metric-card strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 15px; line-height: 21px; overflow-wrap: anywhere; } body.soc-desktop-shell #peopleView .soc-people-detail-panel-body, #managerStatusDrawer .soc-monitoring-drawer-body { padding-top: 0; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; align-items: stretch !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(1), body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(2), body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(3), body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(4) { order: initial !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; min-height: 100% !important; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell { display: grid; gap: 12px; align-content: start; padding: 0 16px 16px !important; } .soc-people-stats-overview-shell, .soc-people-stats-donut-shell, .soc-people-stats-linkage-shell { display: grid; gap: 12px; } .soc-people-stats-overview-hero { display: grid; gap: 4px; } .soc-people-stats-overview-hero strong { color: var(--ui-text-primary, var(--soc-text)); font-size: 28px; line-height: 32px; letter-spacing: -0.03em; } .soc-people-stats-overview-hero span { color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 12px; line-height: 17px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-sparkline-shell { padding: 0; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-sparkline { height: 88px; } body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-sparkline-caption { margin: 0; color: var(--ui-text-secondary, var(--soc-text-sub)); font-size: 11px; line-height: 15px; } .soc-people-stats-donut-shell { grid-template-columns: minmax(104px, 124px) minmax(0, 1fr); align-items: center; } .soc-people-stats-linkage-shell .soc-people-segmented-track, .soc-people-stats-linkage-shell .soc-people-segmented-grid { margin-top: 0; } @media (max-width: 900px) { .soc-people-detail-summary-grid, .soc-people-detail-metric-grid, .soc-people-stats-donut-shell { grid-template-columns: minmax(0, 1fr); } .soc-people-detail-hero { grid-template-columns: minmax(0, 1fr); } } /* ===== Phase 3 follow-up pass: single employees workspace ===== */ body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; } body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card { min-height: 210px !important; } body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card.is-sparkline { border-color: rgba(249, 115, 22, 0.18) !important; background: linear-gradient(180deg, rgba(249, 115, 22, 0.06) 0%, rgba(249, 115, 22, 0.01) 100%), #ffffff !important; } body.soc-desktop-shell #peopleView .soc-people-directory-layout { grid-template-columns: minmax(0, 1fr) !important; } body.soc-desktop-shell #peopleView .soc-people-detail-panel { display: none !important; } body.soc-desktop-shell #managerStatusDrawer.soc-workspace-drawer { width: min(520px, 100vw) !important; } body.soc-desktop-shell #managerStatusDrawer .soc-monitoring-drawer-body { padding: 18px 20px 22px !important; gap: 16px !important; } body.soc-desktop-shell #managerStatusDrawer .soc-people-detail-body-shell { gap: 16px !important; } body.soc-desktop-shell #managerStatusDrawer .soc-people-detail-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* ===== Sentrix enterprise selected-B functional icons ===== */ .sentrix-theme-icon { display: block; object-fit: contain; } .sentrix-theme-icon-dark { display: none !important; } html[data-theme="dark"] .sentrix-theme-icon-light, body[data-theme="dark"] .sentrix-theme-icon-light, [data-theme="dark"] .sentrix-theme-icon-light { display: none !important; } html[data-theme="dark"] .sentrix-theme-icon-dark, body[data-theme="dark"] .sentrix-theme-icon-dark, [data-theme="dark"] .sentrix-theme-icon-dark { display: block !important; } .report-choice-icon .sentrix-theme-icon, .soc-bottom-tab-icon .sentrix-theme-icon { flex-shrink: 0; } #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) .sentrix-theme-icon { width: 20px; height: 20px; } body.nav-open #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) .sentrix-theme-icon { width: 22px; height: 22px; } body.soc-desktop-shell #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) .sentrix-theme-icon { width: 23px; height: 23px; } .soc-realtime-date-icon .sentrix-theme-icon { width: 18px; height: 18px; } .topbar-notification-icon .sentrix-theme-icon { width: 28px; height: 28px; } .soc-back-arrow-btn::before { background: center / contain no-repeat url("/icons/ui-back-arrow.png?v=20260222uiicon07") !important; } html[data-theme="dark"] .soc-back-arrow-btn::before, body[data-theme="dark"] .soc-back-arrow-btn::before, [data-theme="dark"] .soc-back-arrow-btn::before { background-image: url("/icons/ui-back-arrow.png?v=20260222uiicon07") !important; } /* ===== Workspace hidden-state final guard ===== */ html body :is( .admin-tab-content.hidden, .admin-tab-content[hidden], .admin-tab-content[aria-hidden="true"], .soc-workspace-panel.hidden, .soc-workspace-panel[hidden], .soc-workspace-panel[aria-hidden="true"] ) { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ===== Analytics heatmap and Live Activity final layout ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-shell { width: 100% !important; max-width: none !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0 20px 14px !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-grid-board { display: grid !important; grid-template-columns: 64px repeat(24, 46px) !important; grid-auto-columns: 46px !important; align-items: center !important; justify-content: start !important; gap: 6px !important; min-width: max-content !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-axis, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-row-label { min-width: 0 !important; height: 20px !important; display: grid !important; place-items: center !important; color: #697286 !important; font-size: 10px !important; line-height: 12px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-row-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-axis:first-child { position: sticky !important; left: 0 !important; z-index: 2 !important; justify-content: end !important; padding-right: 8px !important; background: var(--ui-bg-surface, #ffffff) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-cell-board { width: 46px !important; min-width: 46px !important; min-height: 28px !important; border-radius: 8px !important; font-size: 11px !important; line-height: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsTrendPanel .soc-analytics-chart-shell { padding-bottom: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-activity { display: grid !important; gap: 10px !important; padding: 0 20px 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 2px 12px !important; align-items: baseline !important; padding: 12px 14px !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #fbfcfe !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-head span { min-width: 0 !important; color: #202430 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-head strong { color: #ff6a13 !important; font-size: 20px !important; line-height: 24px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-head small { grid-column: 1 / -1 !important; color: #697286 !important; font-size: 11px !important; line-height: 16px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-bucket { display: grid !important; gap: 4px !important; min-width: 0 !important; padding: 10px 12px !important; border: 1px solid #e6eaf1 !important; border-radius: 12px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-bucket span { color: #697286 !important; font-size: 11px !important; line-height: 15px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-bucket strong { color: #202430 !important; font-size: 16px !important; line-height: 20px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-activity-empty { padding: 10px 12px !important; border: 1px dashed #dce3ec !important; border-radius: 12px !important; color: #697286 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 700 !important; } @media (max-width: 1400px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ===== Announcement workspace isolation guard ===== */ html body:has(#announcementPanel.is-active) #reportPanel, html body:has(#announcementPanel[aria-hidden="false"]) #reportPanel, html body:has(#announcementPanel:not(.hidden):not([hidden])) #reportPanel { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ===== Sentrix support roster UI wrapper implementation (2026-04-20) ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel { --sentrix-support-pending: #ff6a13; --sentrix-support-approved: #16a34a; --sentrix-support-danger: #ef4444; --sentrix-support-cancelled: #64748b; --sentrix-support-ink: #202430; --sentrix-support-subtle: #697286; --sentrix-support-border: #e6eaf1; --sentrix-support-soft: #f6f7fb; padding: 0 20px 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel > .panel-title-row.soc-ops-support-header-top { min-height: 48px !important; margin: 0 0 12px !important; padding: 0 !important; display: flex !important; align-items: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-workspace-page-title { margin: 0 !important; color: var(--sentrix-support-ink) !important; font-size: 28px !important; line-height: 34px !important; font-weight: 900 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-workspace { display: block !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportLayout.soc-ops-support-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; align-items: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) minmax(360px, 392px) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-control-deck { margin: 0 0 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-main-row { min-height: 64px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 14px !important; padding: 10px 12px !important; border: 1px solid var(--sentrix-support-border) !important; border-radius: 12px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-center { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-inline-month-nav, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filters, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-actions { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filter-field { display: inline-grid !important; grid-template-columns: auto minmax(96px, 160px) !important; align-items: center !important; gap: 6px !important; margin: 0 !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filter-inline-label { color: var(--sentrix-support-subtle) !important; font-size: 12px !important; line-height: 18px !important; font-weight: 800 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel :is(.month-arrow, .month-label, .soc-ops-support-compact-control, .soc-ops-support-export-top-btn, .soc-ops-support-view-toggle .chip) { min-height: 40px !important; height: 40px !important; border-radius: 8px !important; border: 1px solid var(--sentrix-support-border) !important; background: #ffffff !important; color: var(--sentrix-support-ink) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 800 !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .month-arrow { width: 40px !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .month-label { min-width: 112px !important; padding: 0 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-view-toggle { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 3px !important; border: 1px solid var(--sentrix-support-border) !important; border-radius: 10px !important; background: #f8fafc !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-view-toggle .chip { border-color: transparent !important; background: transparent !important; padding-inline: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-view-toggle .chip.is-active { background: #ffffff !important; border-color: #d9e1ec !important; color: #ff6a13 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-support-strip { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view { padding: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid { gap: 0 !important; border: 1px solid var(--sentrix-support-border) !important; border-radius: 12px !important; overflow: hidden !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid > .soc-ops-support-calendar-cell { border: 0 !important; border-right: 1px solid #eef2f6 !important; border-bottom: 1px solid #eef2f6 !important; border-radius: 0 !important; background: #ffffff !important; padding: 8px !important; gap: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid > .soc-ops-support-calendar-cell.is-selected { background: #fff8f3 !important; box-shadow: inset 0 0 0 2px rgba(255, 106, 19, 0.16) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; min-height: 30px !important; padding: 5px 8px 5px 12px !important; border-radius: 8px !important; border: 1px solid var(--ops-support-line-accent, #ff6a13) !important; background: #ffffff !important; color: var(--sentrix-support-ink) !important; overflow: hidden !important; position: relative !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 4px !important; background: var(--ops-support-line-accent, #ff6a13) !important; border-radius: 8px 0 0 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line.state-pending { --ops-support-line-accent: var(--sentrix-support-pending) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line.state-approved { --ops-support-line-accent: var(--sentrix-support-approved) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line:is(.state-rejected, .state-unavailable, .is-over-assigned) { --ops-support-line-accent: var(--sentrix-support-danger) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line.state-cancelled { --ops-support-line-accent: var(--sentrix-support-cancelled) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line-main { display: contents !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line-label { color: var(--sentrix-support-ink) !important; font-size: 11px !important; line-height: 15px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line-count { color: var(--ops-support-line-accent, #ff6a13) !important; font-size: 11px !important; line-height: 15px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-more { min-height: 28px !important; justify-content: center !important; border-radius: 8px !important; border: 1px dashed #cfd8e5 !important; background: #f8fafc !important; color: #445067 !important; font-size: 11px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet { width: min(100%, 392px) !important; max-width: 392px !important; padding: 16px !important; border-radius: 12px !important; border: 1px solid var(--sentrix-support-border) !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-summary-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; overflow: hidden !important; border: 1px solid var(--sentrix-support-border) !important; border-radius: 10px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-summary-box, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-submission-grid .soc-ops-support-detail-summary-box { min-height: 64px !important; display: grid !important; align-content: center !important; gap: 4px !important; padding: 11px 12px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-summary-box:not(:nth-child(2n)) { border-right: 1px solid var(--sentrix-support-border) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-summary-box:not(:nth-last-child(-n + 2)) { border-bottom: 1px solid var(--sentrix-support-border) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-summary-box strong { color: var(--sentrix-support-ink) !important; font-size: 15px !important; line-height: 20px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-section { padding-top: 12px !important; border-top: 1px solid #edf1f6 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-section--summary { padding-top: 0 !important; border-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-plain-text { padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--sentrix-support-ink) !important; font-size: 13px !important; line-height: 19px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-confirmed-block { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section--workers .soc-ops-support-confirmed-block, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet .soc-ops-support-confirmed-block[data-ops-worker-editor="true"] { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .confirmed-worker-list { display: grid !important; gap: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .confirmed-worker-list-head { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 46px !important; align-items: center !important; min-height: 32px !important; padding: 0 10px !important; border-bottom: 1px solid var(--sentrix-support-border) !important; background: #f8fafc !important; color: var(--sentrix-support-subtle) !important; font-size: 11px !important; line-height: 16px !important; font-weight: 900 !important; text-align: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .worker-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 46px !important; min-height: 42px !important; gap: 8px !important; align-items: center !important; padding: 6px 10px !important; border: 0 !important; border-bottom: 1px solid #edf1f6 !important; border-radius: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .worker-row:last-child { border-bottom: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .worker-row:is(.is-assigned, .is-over-assigned) { padding: 6px 10px !important; border: 0 !important; border-bottom: 1px solid #edf1f6 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .worker-row.is-assigned:not(.is-over-assigned), html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .worker-row.is-over-assigned { padding: 6px 10px !important; border: 0 !important; border-bottom: 1px solid #edf1f6 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .worker-row input[type="text"] { height: 34px !important; text-align: center !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 800 !important; border-color: #dbe4ee !important; background: #ffffff !important; color: var(--sentrix-support-ink) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .worker-row input[type="text"][readonly] { border-color: transparent !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .worker-save-btn { width: 100% !important; margin-top: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-timeline-body { border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-submission-grid { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-submission-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; overflow: hidden !important; border: 1px solid var(--sentrix-support-border) !important; border-radius: 10px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-submission-item { display: grid !important; gap: 4px !important; align-content: center !important; min-height: 54px !important; padding: 10px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-submission-item + .soc-ops-support-detail-submission-item { border-left: 1px solid var(--sentrix-support-border) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-submission-item strong { color: var(--sentrix-support-ink) !important; font-size: 14px !important; line-height: 19px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-timeline-dot { width: 12px !important; height: 12px !important; border: 2px solid #ffffff !important; box-shadow: 0 0 0 1px rgba(32, 36, 48, 0.1) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-timeline-item.is-created .soc-ops-support-detail-timeline-dot { background: var(--sentrix-support-pending) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-timeline-item.is-worker .soc-ops-support-detail-timeline-dot, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-approved .soc-ops-support-detail-timeline-dot { background: var(--sentrix-support-approved) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-danger .soc-ops-support-detail-timeline-dot { background: var(--sentrix-support-danger) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-muted .soc-ops-support-detail-timeline-dot, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-detail-timeline-item.is-note .soc-ops-support-detail-timeline-dot { background: var(--sentrix-support-cancelled) !important; } /* ===== Sentrix support roster reference body shell (2026-04-23) ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] { --sentrix-support-reference-bg: #f4f6f9; --sentrix-support-reference-panel: #ffffff; --sentrix-support-reference-line: #e1e7f0; --sentrix-support-reference-muted: #6b7280; --sentrix-support-reference-text: #1f2937; --sentrix-support-reference-orange: #ff6a13; background: var(--sentrix-support-reference-bg) !important; padding-top: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] > .panel-title-row.soc-ops-support-header-top { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportReferenceRoot { display: block !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportLayout.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-shell { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(292px, 304px) !important; gap: 12px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary { grid-column: 1 / -1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-main, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar { min-height: 54px !important; display: grid !important; grid-template-columns: auto minmax(128px, 160px) minmax(128px, 160px) minmax(128px, 160px) auto auto !important; align-items: end !important; gap: 10px !important; margin-bottom: 10px !important; padding: 8px 10px !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 8px !important; background: var(--sentrix-support-reference-panel) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar label { display: grid !important; gap: 3px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar label > span { color: var(--sentrix-support-reference-muted) !important; font-size: 11px !important; line-height: 14px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar select, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar button { height: 34px !important; min-width: 42px !important; padding: 0 12px !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 6px !important; background: #ffffff !important; color: var(--sentrix-support-reference-text) !important; font-size: 12px !important; font-weight: 900 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-nav, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-view-toggle { display: inline-flex !important; align-items: center !important; gap: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-label { min-width: 132px !important; padding: 0 14px !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-export-btn { min-width: 68px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-view-toggle button { min-width: 56px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-view-toggle .is-active { border-color: var(--sentrix-support-reference-orange) !important; color: var(--sentrix-support-reference-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary { display: grid !important; grid-template-columns: 1.15fr repeat(7, minmax(0, 1fr)) !important; margin-bottom: 0 !important; overflow: hidden !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 8px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item { min-height: 58px !important; display: grid !important; align-content: center !important; gap: 3px !important; padding: 9px 12px !important; border-right: 1px solid var(--sentrix-support-reference-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item:last-child { border-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-month strong { color: var(--sentrix-support-reference-muted) !important; font-size: 12px !important; line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item span { color: var(--sentrix-support-reference-muted) !important; font-size: 11px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item strong { color: var(--sentrix-support-reference-text) !important; font-size: 18px !important; line-height: 22px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item i { display: inline-block !important; width: 6px !important; height: 6px !important; margin-right: 6px !important; border-radius: 999px !important; background: var(--sentrix-support-reference-muted) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item i.is-orange, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line.state-pending::before { background: var(--sentrix-support-reference-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item i.is-green, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line.state-approved::before { background: #009b7a !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item i.is-red, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line:is(.state-rejected, .state-unavailable, .is-over-assigned)::before { background: #ef4444 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item i.is-purple { background: #5b21b6 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item i.is-gray, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line.state-cancelled::before { background: #7b8494 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-weekdays, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-grid { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-weekdays { border: 1px solid var(--sentrix-support-reference-line) !important; border-bottom: 0 !important; border-radius: 8px 8px 0 0 !important; background: #f8fafc !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-weekdays span { min-height: 34px !important; display: grid !important; place-items: center !important; color: #394456 !important; font-size: 12px !important; font-weight: 900 !important; border-right: 1px solid var(--sentrix-support-reference-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-grid { border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 0 0 8px 8px !important; overflow: hidden !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell { min-height: 118px !important; padding: 9px !important; border-right: 1px solid var(--sentrix-support-reference-line) !important; border-bottom: 1px solid var(--sentrix-support-reference-line) !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell.is-selected { box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-day { display: block !important; margin-bottom: 8px !important; color: var(--sentrix-support-reference-text) !important; font-size: 13px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell.is-today .ops-ref-calendar-day { width: 24px !important; height: 24px !important; display: inline-grid !important; place-items: center !important; margin-bottom: 10px !important; border-radius: 999px !important; background: var(--sentrix-support-reference-orange) !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line { position: relative !important; width: 100% !important; min-height: 26px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 4px !important; margin-bottom: 4px !important; padding: 3px 5px 3px 7px !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 6px !important; background: #ffffff !important; color: var(--sentrix-support-reference-text) !important; font-size: 10px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line span { min-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3px !important; border-radius: 6px 0 0 6px !important; background: var(--sentrix-support-reference-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line strong, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-more { font-size: 10px !important; line-height: 14px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-more { width: 100% !important; min-height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 4px !important; padding: 3px 6px !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 6px !important; background: #ffffff !important; color: var(--sentrix-support-reference-muted) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list-table-wrap, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 8px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list table { width: 100% !important; border-collapse: collapse !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list th, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list td { height: 44px !important; padding: 0 12px !important; border-bottom: 1px solid var(--sentrix-support-reference-line) !important; font-size: 12px !important; font-weight: 800 !important; text-align: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list-row.is-selected, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list-row:hover { background: #fff6ee !important; } /* ===== Sentrix support roster interaction final overrides (2026-04-24) ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-shell.has-collapsed-detail { grid-template-columns: minmax(0, 1fr) 52px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { display: flex !important; flex-direction: column !important; padding: 14px 14px 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; padding-bottom: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer { position: relative !important; bottom: auto !important; flex: 0 0 auto !important; margin: auto -14px 0 !important; padding: 12px 14px 14px !important; background: #ffffff !important; border-top: 1px solid var(--ops-ref-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dd { color: #667085 !important; font-weight: 400 !important; } /* ===== Sentrix reference home final shell placement authority (2026-04-24) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-home-sidebar-w: 214px; --soc-desktop-sidebar-width: 214px; --soc-desktop-sidebar-expanded-width: 214px; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar { width: calc(100% - var(--sentrix-home-sidebar-w)) !important; min-height: 68px !important; margin-left: var(--sentrix-home-sidebar-w) !important; padding: 0 28px !important; border-bottom: 1px solid #e3e8f0 !important; background: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout { width: calc(100% - var(--sentrix-home-sidebar-w)) !important; min-width: 0 !important; min-height: calc(100dvh - 68px) !important; display: block !important; grid-template-columns: none !important; margin-left: var(--sentrix-home-sidebar-w) !important; padding: 28px 32px 42px !important; background: #f5f7fb !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel { position: fixed !important; inset: 0 auto 0 0 !important; z-index: 80 !important; width: var(--sentrix-home-sidebar-w) !important; min-width: var(--sentrix-home-sidebar-w) !important; max-width: var(--sentrix-home-sidebar-w) !important; height: 100dvh !important; max-height: 100dvh !important; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; border: 0 !important; border-right: 1px solid #e3e8f0 !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-sidebar-header { min-height: 74px !important; padding: 0 31px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage { padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList { gap: 0 !important; padding: 0 22px 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section + .soc-menu-section { margin-top: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section-label { margin: 0 0 10px !important; padding: 0 10px !important; color: #6f7e96 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-toggle, .soc-menu-sub-item) { min-height: 44px !important; border-radius: 8px !important; gap: 14px !important; padding: 0 16px !important; color: #0b2d50 !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label) { font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions { padding-top: 20px !important; border-top: 1px solid #e3e8f0 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel { width: 100% !important; max-width: 100% !important; display: block !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #homeView, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #sentrixHomeDashboardRoot { width: 100% !important; max-width: 100% !important; } } /* ===== Sentrix reference home final shell placement (2026-04-24) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-home-sidebar-w: 214px; --soc-desktop-sidebar-width: 214px; --soc-desktop-sidebar-expanded-width: 214px; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar { width: calc(100% - var(--sentrix-home-sidebar-w)) !important; min-height: 68px !important; margin-left: var(--sentrix-home-sidebar-w) !important; padding: 0 28px !important; border-bottom: 1px solid #e3e8f0 !important; background: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout { width: calc(100% - var(--sentrix-home-sidebar-w)) !important; min-width: 0 !important; min-height: calc(100dvh - 68px) !important; display: block !important; grid-template-columns: none !important; margin-left: var(--sentrix-home-sidebar-w) !important; padding: 28px 32px 42px !important; background: #f5f7fb !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel { position: fixed !important; inset: 0 auto 0 0 !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: 0 !important; z-index: 80 !important; width: var(--sentrix-home-sidebar-w) !important; min-width: var(--sentrix-home-sidebar-w) !important; max-width: var(--sentrix-home-sidebar-w) !important; height: 100dvh !important; max-height: 100dvh !important; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; border: 0 !important; border-right: 1px solid #e3e8f0 !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-sidebar-header { min-height: 74px !important; padding: 0 31px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage { padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList { gap: 0 !important; padding: 0 22px 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section + .soc-menu-section { margin-top: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section-label { margin: 0 0 10px !important; padding: 0 10px !important; color: #6f7e96 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-toggle, .soc-menu-sub-item) { min-height: 44px !important; border-radius: 8px !important; gap: 14px !important; padding: 0 16px !important; color: #0b2d50 !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label) { font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions { padding-top: 20px !important; border-top: 1px solid #e3e8f0 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel { width: 100% !important; max-width: 100% !important; display: block !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #homeView, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #sentrixHomeDashboardRoot { width: 100% !important; max-width: 100% !important; } } /* ===== Sentrix reference home dashboard (2026-04-24) ===== */ @media (min-width: 1024px) { html body.soc-desktop-shell { --sentrix-home-sidebar-w: 214px; --sentrix-home-bg: #f5f7fb; --sentrix-home-surface: #ffffff; --sentrix-home-border: #e3e8f0; --sentrix-home-line: #edf1f6; --sentrix-home-text: #0b2d50; --sentrix-home-muted: #7283a0; --sentrix-home-orange: #ff6a00; --sentrix-home-blue: #1e96ff; --sentrix-home-green: #18a36b; --sentrix-home-purple: #7a52f4; --sentrix-home-red: #ff4d4f; color: var(--sentrix-home-text); background: var(--sentrix-home-bg); } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-app-shell { min-height: 100dvh; background: var(--sentrix-home-bg) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar { position: sticky !important; top: 0 !important; z-index: 70 !important; width: calc(100% - var(--sentrix-home-sidebar-w)) !important; min-height: 68px !important; margin-left: var(--sentrix-home-sidebar-w) !important; padding: 0 28px !important; border: 0 !important; border-bottom: 1px solid var(--sentrix-home-border) !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-left, html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-right { min-width: 0 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) #menuToggleBtn, html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-brand-heading, html body.soc-desktop-shell:not(.soc-auth-shell-active) #topbarUtilityCluster, html body.soc-desktop-shell:not(.soc-auth-shell-active) #topbarLanguageWrap, html body.soc-desktop-shell:not(.soc-auth-shell-active) #openPasswordBtn, html body.soc-desktop-shell:not(.soc-auth-shell-active) #topbarThemeToggleBtn { display: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-breadcrumb { display: inline-flex !important; align-items: center !important; gap: 18px !important; color: #7485a3 !important; font-size: 16px !important; line-height: 22px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active):not(.soc-topbar-home-breadcrumb-visible) .topbar-breadcrumb, html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-breadcrumb.hidden { display: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-breadcrumb-home-link { color: var(--sentrix-home-text) !important; font-weight: 800 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-breadcrumb-link { border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; color: inherit !important; font: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-decoration: none !important; cursor: pointer !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-breadcrumb-link:hover { color: var(--sentrix-home-text) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-breadcrumb-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--ui-accent, #ff6b00) 45%, transparent) !important; outline-offset: 4px !important; border-radius: 6px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) [data-menu-item-key="hq-ops-analytics"], html body.soc-desktop-shell:not(.soc-auth-shell-active) [data-menu-item-key="field-ops-analytics"] { display: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-breadcrumb-divider { color: #d7deea !important; font-weight: 500 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-date-status { display: inline-flex !important; align-items: center !important; gap: 24px !important; margin-left: auto !important; color: #7181a0 !important; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-date-status.hidden { display: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-date-chip, html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-operation-state { display: inline-flex !important; align-items: center !important; gap: 8px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-date-chip svg { width: 17px !important; height: 17px !important; fill: none !important; stroke: #8ba0bd !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-operation-dot { width: 8px !important; height: 8px !important; border-radius: 999px !important; background: #16c784 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) #topbarNotificationsBtn { position: relative !important; width: 38px !important; height: 38px !important; margin-left: 2px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: #7a8ba7 !important; box-shadow: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) #topbarNotificationsBtn svg { width: 21px !important; height: 21px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-notification-badge { top: 2px !important; right: 3px !important; min-width: 17px !important; height: 17px !important; padding: 0 5px !important; border: 2px solid #ffffff !important; background: var(--sentrix-home-orange) !important; color: #ffffff !important; font-size: 10px !important; line-height: 13px !important; font-weight: 800 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-admin-profile-btn { width: auto !important; height: 46px !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 0 0 0 2px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-profile-avatar { width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 999px !important; background: #eef3fb !important; color: #8b9bb4 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-profile-avatar-initial { font-size: 13px !important; line-height: 1 !important; font-weight: 800 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-profile-copy, html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-admin-profile-copy { display: flex !important; min-width: 0 !important; flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) #topbarProfileName { color: var(--sentrix-home-text) !important; font-size: 14px !important; line-height: 18px !important; font-weight: 800 !important; letter-spacing: 0 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) #topbarProfileRole { color: #8a9ab4 !important; font-size: 12px !important; line-height: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-profile-chevron, html body.soc-desktop-shell:not(.soc-auth-shell-active) .topbar-admin-profile-chevron svg { width: 15px !important; height: 15px !important; fill: none !important; stroke: #7f8da6 !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) #menuSheetPanel { position: fixed !important; inset: 0 auto 0 0 !important; z-index: 80 !important; width: var(--sentrix-home-sidebar-w) !important; max-width: var(--sentrix-home-sidebar-w) !important; height: 100dvh !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; border: 0 !important; border-right: 1px solid var(--sentrix-home-border) !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) #menuSheetPanel > .ds-card-title, html body.soc-desktop-shell:not(.soc-auth-shell-active) #navSheetHandle, html body.soc-desktop-shell:not(.soc-auth-shell-active) #pcSidebarRoleBadge, html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-sidebar-collapse-btn { display: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-sidebar-header { display: flex !important; align-items: center !important; min-height: 74px !important; padding: 0 31px !important; border: 0 !important; background: #ffffff !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-sidebar-logo-link { display: inline-flex !important; width: 150px !important; height: 34px !important; align-items: center !important; justify-content: flex-start !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-sidebar-logo-img { width: 142px !important; height: auto !important; display: block !important; object-fit: contain !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) #mobileMenuPager, html body.soc-desktop-shell:not(.soc-auth-shell-active) .mobile-type-flow-track, html body.soc-desktop-shell:not(.soc-auth-shell-active) #mobileMenuRootPage { min-height: 0 !important; display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; overflow: hidden !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) #mobileAdminShortcutList { min-height: 0 !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 22px 22px !important; overflow-y: auto !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-section { display: block !important; margin: 0 !important; padding: 0 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-section + .soc-menu-section { margin-top: 20px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-section-label { margin: 0 0 10px !important; padding: 0 10px !important; color: #6f7e96 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-section-items { display: grid !important; gap: 4px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-sub-item { position: relative !important; width: 100% !important; min-height: 44px !important; display: flex !important; align-items: center !important; gap: 14px !important; padding: 0 16px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--sentrix-home-text) !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; text-align: left !important; box-shadow: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-sub-item::before { content: "" !important; position: absolute !important; left: 0 !important; top: 10px !important; bottom: 10px !important; width: 3px !important; border-radius: 999px !important; background: transparent !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-sub-item-icon { width: 22px !important; height: 22px !important; display: inline-flex !important; flex: 0 0 22px !important; align-items: center !important; justify-content: center !important; color: currentColor !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-sub-item-icon svg { width: 22px !important; height: 22px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.85 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-sub-item-label { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-sub-item:is(.is-active, [aria-current="page"], [data-active="true"]) { background: #fff1e8 !important; color: var(--sentrix-home-orange) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-sub-item:is(.is-active, [aria-current="page"], [data-active="true"])::before { background: var(--sentrix-home-orange) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-group-toggle { width: 100% !important; min-height: 44px !important; display: flex !important; align-items: center !important; gap: 14px !important; padding: 0 16px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--sentrix-home-text) !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; text-align: left !important; box-shadow: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-group-icon svg, html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-group-chevron svg { width: 22px !important; height: 22px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.85 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-submenu-list { display: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-sidebar-footer, html body.soc-desktop-shell:not(.soc-auth-shell-active) .soc-menu-bottom-section, html body.soc-desktop-shell:not(.soc-auth-shell-active) .mobile-nav-actions { margin-top: auto !important; display: grid !important; gap: 4px !important; padding: 20px 0 0 !important; border-top: 1px solid var(--sentrix-home-border) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .mobile-nav-actions-divider { display: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .mobile-nav-actions .soc-menu-item { width: 100% !important; min-height: 44px !important; justify-content: flex-start !important; padding: 0 16px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--sentrix-home-text) !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .container.admin-layout { width: calc(100% - var(--sentrix-home-sidebar-w)) !important; min-width: 0 !important; min-height: calc(100dvh - 68px) !important; margin-left: var(--sentrix-home-sidebar-w) !important; padding: 28px 32px 42px !important; background: var(--sentrix-home-bg) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) #dashboardPanel { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active)[data-realtime-subview="home"] #dashboardPanel > .panel-title-row, html body.soc-desktop-shell:not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView > .soc-home-workspace-header, html body.soc-desktop-shell:not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .soc-home-hub { display: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) #homeView { min-width: 0 !important; overflow: visible !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-dashboard { width: 100% !important; max-width: 1680px !important; display: grid !important; gap: 18px !important; margin: 0 auto !important; color: var(--sentrix-home-text) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-header { display: grid !important; gap: 8px !important; margin: 0 0 4px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-header h2 { margin: 0 !important; color: var(--sentrix-home-text) !important; font-size: 28px !important; line-height: 34px !important; font-weight: 800 !important; letter-spacing: 0 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-header p { margin: 0 !important; color: var(--sentrix-home-muted) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; letter-spacing: 0 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-card, html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-card { border: 1px solid var(--sentrix-home-border) !important; border-radius: 8px !important; background: var(--sentrix-home-surface) !important; box-shadow: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-card { min-height: 158px !important; display: flex !important; align-items: center !important; gap: 26px !important; padding: 26px 28px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-icon { width: 74px !important; height: 74px !important; display: inline-flex !important; flex: 0 0 74px !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-icon svg, html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-icon svg, html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-site svg { fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-icon svg { width: 36px !important; height: 36px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="incident"] .sentrix-home-kpi-icon { background: #fff0e8 !important; color: var(--sentrix-home-orange) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="ticket"] .sentrix-home-kpi-icon { background: #eaf5ff !important; color: var(--sentrix-home-blue) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="support"] .sentrix-home-kpi-icon { background: #e8f8ef !important; color: var(--sentrix-home-green) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="notice"] .sentrix-home-kpi-icon { background: #f1e8ff !important; color: var(--sentrix-home-purple) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-copy { min-width: 0 !important; display: grid !important; gap: 7px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-label { color: #334b6f !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-value { color: var(--sentrix-home-text) !important; font-size: 38px !important; line-height: 42px !important; font-weight: 700 !important; letter-spacing: 0 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-meta { display: inline-flex !important; align-items: center !important; gap: 10px !important; color: #425879 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-badge { min-width: 23px !important; height: 23px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 7px !important; border-radius: 999px !important; background: #e9f6ff !important; color: var(--sentrix-home-blue) !important; font-size: 12px !important; line-height: 1 !important; font-weight: 800 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="incident"] .sentrix-home-kpi-badge { background: transparent !important; color: var(--sentrix-home-orange) !important; font-size: 18px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="support"] .sentrix-home-kpi-badge { background: #dff6e9 !important; color: var(--sentrix-home-green) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="notice"] .sentrix-home-kpi-badge { background: #efe4ff !important; color: var(--sentrix-home-purple) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-card { min-width: 0 !important; padding: 18px 22px 20px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-card-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; min-height: 32px !important; margin-bottom: 10px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-card-head h3 { margin: 0 !important; color: var(--sentrix-home-text) !important; font-size: 19px !important; line-height: 25px !important; font-weight: 800 !important; letter-spacing: 0 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-link-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; border: 0 !important; background: transparent !important; color: #7183a2 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; box-shadow: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-main-grid, html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-bottom-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 18px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alerts { padding-bottom: 12px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-tile { min-height: 104px !important; display: grid !important; grid-template-columns: 38px minmax(0, 1fr) auto !important; gap: 14px !important; align-items: start !important; padding: 16px !important; border: 1px solid var(--sentrix-home-border) !important; border-radius: 8px !important; background: #ffffff !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-icon { width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; background: #fff0e8 !important; color: var(--sentrix-home-orange) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-tile[data-type="ticket"] .sentrix-home-alert-icon { background: #eaf5ff !important; color: var(--sentrix-home-blue) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-icon svg { width: 23px !important; height: 23px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-main { min-width: 0 !important; display: grid !important; gap: 7px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-title-row { display: flex !important; min-width: 0 !important; align-items: center !important; gap: 10px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-label { display: inline-flex !important; align-items: center !important; min-height: 23px !important; padding: 0 10px !important; border-radius: 999px !important; background: #fff1e8 !important; color: var(--sentrix-home-orange) !important; font-size: 12px !important; line-height: 16px !important; font-weight: 800 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-tile[data-type="ticket"] .sentrix-home-alert-label { background: #eaf5ff !important; color: var(--sentrix-home-blue) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-title-row strong, html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-notice-row strong { min-width: 0 !important; overflow: hidden !important; color: var(--sentrix-home-text) !important; font-size: 15px !important; line-height: 20px !important; font-weight: 800 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-main p, html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-notice-row p { margin: 0 !important; min-width: 0 !important; overflow: hidden !important; color: #7a8aa7 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-site { display: inline-flex !important; align-items: center !important; gap: 5px !important; color: #334b6f !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-site svg { width: 14px !important; height: 14px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-alert-tile time { align-self: end !important; color: #6f7f9c !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; white-space: nowrap !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-table { width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-table thead { background: #f9fbfe !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-table th, html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-table td { height: 39px !important; padding: 0 10px !important; border-bottom: 1px solid var(--sentrix-home-line) !important; color: #334b6f !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; text-align: left !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-table th { height: 34px !important; color: #7d8ca6 !important; font-size: 12px !important; font-weight: 600 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-site-name { color: var(--sentrix-home-text) !important; font-weight: 800 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kind, html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-dot-status { display: inline-flex !important; align-items: center !important; gap: 8px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kind span, html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-dot-status span { width: 8px !important; height: 8px !important; flex: 0 0 8px !important; border-radius: 999px !important; background: var(--sentrix-home-blue) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kind[data-kind="사건"] span, html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-dot-status[data-tone="warning"] span { background: var(--sentrix-home-orange) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-dot-status[data-tone="success"] span { background: var(--sentrix-home-green) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-dot-status[data-tone="info"] span { background: #4aa8ff !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-dot-status[data-tone="danger"] span { background: var(--sentrix-home-red) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-dot-status[data-tone="muted"] span { background: #9aa7b8 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 50px !important; min-height: 24px !important; padding: 0 11px !important; border-radius: 999px !important; background: #eef4ff !important; color: #2f6bff !important; font-size: 12px !important; line-height: 16px !important; font-weight: 800 !important; white-space: nowrap !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-pill[data-tone="success"] { background: #e8f7ef !important; color: var(--sentrix-home-green) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-pill[data-tone="warning"] { background: #fff1e8 !important; color: var(--sentrix-home-orange) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-pill[data-tone="danger"] { background: #fff1f1 !important; color: var(--sentrix-home-red) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-pill[data-tone="muted"] { background: #eef1f5 !important; color: #374151 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-pill[data-tone="info"] { background: #eef4ff !important; color: #2f6bff !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-table-card .sentrix-home-pill.sentrix-home-pill--soft-terminal { font-weight: 700 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-staffing-cell { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; white-space: nowrap !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-staffing-cell > strong { color: #102b55 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-staffing-cell .sentrix-home-pill { min-width: 58px !important; min-height: 22px !important; padding: 0 9px !important; font-size: 11px !important; line-height: 15px !important; font-weight: 700 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-definition-list { display: grid !important; margin: 0 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-definition-list div { display: grid !important; grid-template-columns: 140px minmax(0, 1fr) !important; align-items: center !important; min-height: 52px !important; border-bottom: 1px solid var(--sentrix-home-line) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-definition-list dt, html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-definition-list dd { margin: 0 !important; color: #334b6f !important; font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-definition-list dt { color: #5f708d !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-tabs { display: inline-flex !important; gap: 28px !important; margin: 0 0 4px !important; border-bottom: 1px solid var(--sentrix-home-line) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-tabs button { position: relative !important; min-height: 34px !important; padding: 0 4px 8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #7183a2 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; box-shadow: none !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-tabs button.is-active { color: var(--sentrix-home-orange) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-tabs button.is-active::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important; height: 2px !important; background: var(--sentrix-home-orange) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-notice-list { display: grid !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-notice-row { display: grid !important; grid-template-columns: 8px minmax(0, 1fr) auto !important; gap: 14px !important; align-items: center !important; min-height: 58px !important; border-bottom: 1px solid var(--sentrix-home-line) !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-notice-dot { width: 8px !important; height: 8px !important; border-radius: 999px !important; background: #1e96ff !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-notice-row div { min-width: 0 !important; display: grid !important; gap: 4px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-notice-row time { color: #7485a3 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; white-space: nowrap !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-empty-cell, html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-empty-text { color: #7a8aa7 !important; font-size: 13px !important; font-weight: 600 !important; text-align: center !important; } } @media (min-width: 1024px) and (max-width: 1380px) { html body.soc-desktop-shell:not(.soc-auth-shell-active) .container.admin-layout { padding-inline: 24px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-card { gap: 18px !important; padding-inline: 22px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-icon { width: 64px !important; height: 64px !important; flex-basis: 64px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) .sentrix-home-kpi-value { font-size: 34px !important; line-height: 38px !important; } } /* ===== Sentrix support roster status/worker action repair (2026-04-24) ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-head-actions { display: inline-flex !important; align-items: center !important; gap: 6px !important; flex: 0 0 auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-head-actions button, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-add-quick-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 10px !important; border: 1px solid var(--ops-ref-line) !important; border-radius: 6px !important; background: #ffffff !important; color: var(--ops-ref-text) !important; font-size: 12px !important; font-weight: 500 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-add-quick-btn { border-color: var(--ops-ref-orange) !important; color: var(--ops-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-readonly-note { color: var(--ops-ref-muted) !important; font-size: 11px !important; font-weight: 400 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-status-wrap { position: relative !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-status-wrap > .ops-ref-footer-status { width: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-status-menu { position: absolute !important; right: 0 !important; bottom: calc(100% + 8px) !important; z-index: 40 !important; width: 150px !important; padding: 6px !important; border: 1px solid var(--ops-ref-line) !important; border-radius: 8px !important; background: #ffffff !important; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-status-menu-item { width: 100% !important; height: 30px !important; min-height: 30px !important; padding: 0 10px !important; border: 0 !important; border-radius: 6px !important; background: #ffffff !important; color: var(--ops-ref-text) !important; font-size: 12px !important; font-weight: 500 !important; text-align: left !important; justify-content: flex-start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-status-menu-item:hover, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-status-menu-item:focus-visible { background: var(--ops-ref-orange-weak) !important; color: var(--ops-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-status-menu-item.is-current, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-status-menu-item:disabled { color: var(--ops-ref-muted) !important; opacity: 0.65 !important; cursor: default !important; } /* ===== Sentrix support roster interaction repair (2026-04-24) ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-shell.has-collapsed-detail { grid-template-columns: minmax(0, 1fr) 52px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item[role="button"] { cursor: pointer !important; border: 1px solid transparent !important; border-right-color: var(--ops-ref-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-active { background: var(--ops-ref-orange-weak) !important; border-color: color-mix(in srgb, var(--ops-ref-orange) 48%, #ffffff) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-filter { position: relative !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-filter-label { position: absolute !important; top: -7px !important; left: 10px !important; z-index: 1 !important; padding: 0 4px !important; background: var(--ops-ref-bg) !important; color: var(--ops-ref-muted) !important; font-size: 11px !important; line-height: 14px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-filter-button { width: 100% !important; justify-content: space-between !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-filter-dropdown, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-picker { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; z-index: 30 !important; min-width: 100% !important; padding: 6px !important; border: 1px solid var(--ops-ref-line) !important; border-radius: 8px !important; background: #ffffff !important; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-filter-dropdown button { width: 100% !important; height: 32px !important; min-height: 32px !important; justify-content: flex-start !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--ops-ref-text) !important; font-size: 12px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-filter-dropdown button:is(:hover, .is-selected) { background: var(--ops-ref-orange-weak) !important; color: var(--ops-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-nav { position: relative !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-picker { left: 96px !important; width: 232px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-nav.is-list .ops-ref-month-picker { left: 48px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-picker-head, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-picker-grid { display: grid !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-picker-head { grid-template-columns: 32px 1fr 32px !important; align-items: center !important; gap: 6px !important; margin-bottom: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-picker-head strong { text-align: center !important; color: var(--ops-ref-text) !important; font-size: 14px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-picker button { height: 32px !important; min-height: 32px !important; padding: 0 8px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-picker-grid button.is-selected { border-color: var(--ops-ref-orange) !important; background: var(--ops-ref-orange) !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell.is-expanded { min-height: 168px !important; height: auto !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-lines { overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-more { cursor: pointer !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { display: flex !important; flex-direction: column !important; min-height: calc(100vh - 168px) !important; max-height: calc(100vh - 168px) !important; padding: 14px 14px 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel.is-collapsed { width: 52px !important; min-width: 52px !important; padding: 10px 8px !important; align-items: center !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; padding-bottom: 14px !important; scrollbar-width: thin !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer { position: relative !important; bottom: auto !important; flex: 0 0 auto !important; margin: 0 -14px !important; padding: 12px 14px 14px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-collapse-btn { width: 36px !important; min-width: 36px !important; padding: 0 !important; display: inline-grid !important; place-items: center !important; font-size: 18px !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-collapsed-label { writing-mode: vertical-rl !important; color: var(--ops-ref-muted) !important; font-size: 12px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-date-requests { margin-bottom: 10px !important; padding: 8px !important; border: 1px solid var(--ops-ref-line) !important; border-radius: 8px !important; background: #fbfcfe !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-date-requests-head, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-date-request { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-date-requests-head { margin-bottom: 6px !important; color: var(--ops-ref-muted) !important; font-size: 11px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-date-request { width: 100% !important; height: 34px !important; min-height: 34px !important; margin-top: 5px !important; padding: 0 8px !important; border: 1px solid var(--ops-ref-line) !important; border-radius: 6px !important; background: #ffffff !important; color: var(--ops-ref-text) !important; font-size: 11px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-date-request.is-selected { border-color: var(--ops-ref-orange) !important; background: var(--ops-ref-orange-weak) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-empty { min-height: 180px !important; display: grid !important; place-content: center !important; gap: 6px !important; text-align: center !important; color: var(--ops-ref-muted) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-empty strong { color: var(--ops-ref-text) !important; font-size: 14px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-progress { color: var(--ops-ref-muted) !important; font-size: 11px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 30px !important; min-height: 30px !important; margin-top: 8px !important; padding: 0 12px !important; border: 1px solid var(--ops-ref-line) !important; border-radius: 6px !important; background: #ffffff !important; color: var(--ops-ref-text) !important; font-size: 12px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-editor { display: grid !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-list { display: grid !important; gap: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-row { display: grid !important; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) 48px !important; gap: 6px !important; min-height: 34px !important; padding: 0 !important; border: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-row input { height: 34px !important; min-height: 34px !important; padding: 0 9px !important; border: 1px solid var(--ops-ref-line) !important; border-radius: 6px !important; color: var(--ops-ref-text) !important; font-size: 12px !important; font-weight: 400 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-row button, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-editor-actions button { height: 34px !important; min-height: 34px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-row button { border: 1px solid var(--ops-ref-red) !important; background: #ffffff !important; color: var(--ops-ref-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-editor-actions { display: grid !important; grid-template-columns: 1fr 72px 72px !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-add-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-cancel-btn { border: 1px solid var(--ops-ref-line) !important; background: #ffffff !important; color: var(--ops-ref-text) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-save-btn { border: 1px solid var(--ops-ref-orange) !important; background: var(--ops-ref-orange) !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dd { color: #667085 !important; font-weight: 400 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { min-height: min(760px, calc(100dvh - 176px)) !important; max-height: calc(100dvh - 176px) !important; padding: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis { gap: 7px !important; margin: 8px 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article { min-height: 58px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article strong { font-size: 19px !important; line-height: 23px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta div { min-height: 21px !important; gap: 8px !important; font-size: 11px !important; line-height: 15px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit { margin-top: 8px !important; padding-top: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers h5, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history h5, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit h5 { margin-bottom: 6px !important; font-size: 12px !important; line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers ul { gap: 5px !important; margin: 6px 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers li { min-height: 34px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history ol { gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li { min-height: 18px !important; font-size: 10.5px !important; line-height: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history button { min-height: 22px !important; margin-top: 4px !important; font-size: 11px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dl { gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dl div { font-size: 11px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer { bottom: 0 !important; padding-top: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer button { height: 36px !important; min-height: 36px !important; font-size: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list-pager { min-height: 44px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; align-items: center !important; gap: 12px !important; padding: 0 !important; color: var(--ops-ref-text) !important; font-size: 12px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-pagination { display: inline-flex !important; align-items: center !important; gap: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] :is(.ops-ref-pagination button, .ops-ref-page-size) { height: 28px !important; min-height: 28px !important; border: 1px solid var(--ops-ref-line) !important; border-radius: 6px !important; background: #ffffff !important; color: #374151 !important; font-size: 12px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-pagination button { min-width: 28px !important; padding: 0 7px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-pagination button.is-active { border-color: var(--ops-ref-orange) !important; background: var(--ops-ref-orange) !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-page-size { justify-self: end !important; padding: 0 11px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { min-height: calc(100vh - 168px) !important; max-height: calc(100vh - 168px) !important; padding: 16px !important; overflow-y: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-head h3 { margin: 0 !important; color: var(--ops-ref-text) !important; font-size: 16px !important; line-height: 22px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-actions button { height: 36px !important; border-color: var(--ops-ref-line) !important; border-radius: 7px !important; color: var(--ops-ref-text) !important; font-size: 12px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-actions .ops-ref-detail-icon-btn { width: 36px !important; min-width: 36px !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-icon-btn svg { width: 17px !important; height: 17px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-date { margin: 12px 0 4px !important; color: var(--ops-ref-text) !important; font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-title-row h4 { color: var(--ops-ref-text) !important; font-size: 18px !important; line-height: 24px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis { gap: 8px !important; margin: 12px 0 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article { min-height: 72px !important; border-color: var(--ops-ref-line) !important; border-radius: 7px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-requested { border-color: color-mix(in srgb, var(--ops-ref-orange) 75%, #ffffff) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-self { border-color: color-mix(in srgb, var(--ops-ref-blue) 55%, #ffffff) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article span { color: var(--ops-ref-text) !important; font-size: 12px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article strong { font-size: 22px !important; line-height: 28px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-requested strong { color: var(--ops-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-self strong { color: var(--ops-ref-blue) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article:is(.is-confirmed, .is-over) strong { color: var(--ops-ref-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta div { min-height: 24px !important; grid-template-columns: 76px minmax(0, 1fr) !important; color: var(--ops-ref-text) !important; font-size: 12px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta dt, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dt { color: var(--ops-ref-muted) !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta dd, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dd { color: #374151 !important; font-weight: 400 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit { margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid var(--ops-ref-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers h5, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history h5, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit h5 { margin: 0 0 8px !important; color: var(--ops-ref-text) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers ul { gap: 6px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers li { min-height: 38px !important; border-color: var(--ops-ref-line) !important; border-radius: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-btn { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history ol { gap: 5px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li { grid-template-columns: 12px 74px minmax(0, 1fr) auto !important; min-height: 22px !important; font-size: 11px !important; line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history button { min-height: 24px !important; margin-top: 5px !important; color: var(--ops-ref-text) !important; font-size: 11px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dl { gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer { position: sticky !important; bottom: -16px !important; margin-top: auto !important; padding: 12px 0 0 !important; background: #ffffff !important; border-top: 1px solid var(--ops-ref-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer button { height: 40px !important; min-height: 40px !important; border-radius: 7px !important; font-size: 12px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-footer-delete { border-color: var(--ops-ref-red) !important; background: #ffffff !important; color: var(--ops-ref-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-footer-status { border-color: var(--ops-ref-orange) !important; background: var(--ops-ref-orange) !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .support-status-chip { min-height: 24px !important; padding: 0 9px !important; border: 0 !important; border-radius: 999px !important; font-size: 11px !important; line-height: 16px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .support-status-chip .soc-ops-support-status-dot { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .support-status-chip.state-pending { background: var(--ops-ref-orange-weak, #fff3e8) !important; color: var(--ops-ref-orange, #ff6a00) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .support-status-chip.state-approved { background: var(--ops-ref-green-weak, #e8f7ef) !important; color: var(--ops-ref-green, #18a36b) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .support-status-chip.state-rejected { background: var(--ops-ref-red-weak, #fff1f1) !important; color: var(--ops-ref-red, #ff4d4f) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .support-status-chip.state-unavailable { background: var(--ops-ref-purple-weak, #f3eeff) !important; color: var(--ops-ref-purple, #7a52f4) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .support-status-chip.state-cancelled { background: #f3f4f6 !important; color: #6b7280 !important; } @media (min-width: 1600px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-shell { grid-template-columns: minmax(0, 1fr) 362px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell { min-height: 132px !important; } } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list-pager { display: flex !important; justify-content: flex-end !important; gap: 14px !important; min-height: 42px !important; align-items: center !important; color: var(--sentrix-support-reference-muted) !important; font-size: 12px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { padding: 14px !important; display: flex !important; flex-direction: column !important; min-height: min(760px, calc(100dvh - 176px)) !important; max-height: calc(100dvh - 176px) !important; overflow-y: auto !important; scrollbar-width: thin !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-head, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-actions, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-title-row, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers > div { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-actions button { height: 36px !important; padding: 0 14px !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 6px !important; background: #ffffff !important; color: var(--sentrix-support-reference-text) !important; font-size: 12px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; margin: 8px 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article { min-height: 58px !important; display: grid !important; place-items: center !important; gap: 4px !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article span { color: var(--sentrix-support-reference-text) !important; font-size: 12px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article strong { font-size: 19px !important; line-height: 23px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-requested { border-color: color-mix(in srgb, var(--sentrix-support-reference-orange) 75%, #ffffff) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-requested strong { color: var(--sentrix-support-reference-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-self strong { color: #1d4ed8 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-confirmed strong, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-over strong { color: #047857 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta div { display: grid !important; grid-template-columns: 78px minmax(0, 1fr) !important; gap: 8px !important; min-height: 21px !important; color: var(--sentrix-support-reference-text) !important; font-size: 11px !important; line-height: 15px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta dt, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dt { color: var(--sentrix-support-reference-muted) !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta dd, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dd { color: var(--sentrix-support-reference-text) !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers { margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid var(--sentrix-support-reference-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-title-row { margin-top: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-title-row h4 { margin: 3px 0 0 !important; color: var(--sentrix-support-reference-text) !important; font-size: 18px !important; line-height: 24px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers ul { display: grid !important; gap: 5px !important; margin: 6px 0 !important; padding: 0 !important; list-style: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers li { min-height: 34px !important; display: grid !important; grid-template-columns: 28px minmax(0, 1fr) 16px !important; gap: 8px !important; align-items: center !important; padding: 0 10px !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-line { min-width: 0 !important; display: block !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: var(--sentrix-support-reference-text) !important; font-size: 12px !important; line-height: 16px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-line span { color: var(--sentrix-support-reference-muted) !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-btn { width: auto !important; min-width: 56px !important; height: 36px !important; margin-top: 8px !important; padding: 0 14px !important; border-radius: 6px !important; border: 1px solid var(--sentrix-support-reference-line) !important; background: #ffffff !important; color: var(--sentrix-support-reference-text) !important; font-size: 12px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-avatar { position: relative !important; width: 22px !important; height: 22px !important; border-radius: 999px !important; border: 1px solid #d9e2ec !important; background: #eef2f7 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-avatar::before, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-avatar::after { content: "" !important; position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; background: #b8c4d3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-avatar::before { top: 4px !important; width: 7px !important; height: 7px !important; border-radius: 999px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-avatar::after { bottom: 4px !important; width: 12px !important; height: 7px !important; border-radius: 8px 8px 6px 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--sentrix-support-reference-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history h5, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit h5, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers h5 { margin: 0 0 6px !important; color: var(--sentrix-support-reference-text) !important; font-size: 12px !important; line-height: 16px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history ol { display: grid !important; gap: 4px !important; margin: 0 !important; padding: 0 0 0 4px !important; list-style: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li { display: grid !important; grid-template-columns: 12px 70px minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; min-height: 18px !important; color: var(--sentrix-support-reference-muted) !important; font-size: 10.5px !important; line-height: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li i { width: 6px !important; height: 6px !important; border-radius: 999px !important; background: #94a3b8 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history button { min-height: 22px !important; margin-top: 4px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--sentrix-support-reference-text) !important; font-size: 11px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dl { display: grid !important; gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dl div { display: grid !important; grid-template-columns: 78px minmax(0, 1fr) !important; color: var(--sentrix-support-reference-muted) !important; font-size: 11px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer { position: sticky !important; bottom: 0 !important; z-index: 2 !important; display: grid !important; grid-template-columns: minmax(104px, 1fr) 70px 108px !important; gap: 10px !important; margin-top: auto !important; padding-top: 10px !important; padding-bottom: 0 !important; border-top: 1px solid var(--sentrix-support-reference-line) !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer button { height: 36px !important; min-height: 36px !important; border-radius: 6px !important; border: 1px solid var(--sentrix-support-reference-line) !important; background: #ffffff !important; color: var(--sentrix-support-reference-text) !important; font-size: 12px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer .ops-ref-footer-delete { border-color: #ff6b6b !important; color: #ef4444 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer .ops-ref-footer-status { border-color: var(--sentrix-support-reference-orange) !important; background: var(--sentrix-support-reference-orange) !important; color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-workspace { min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportLayout.soc-ops-support-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportLayout.soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) minmax(348px, 378px) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-main { gap: 10px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-control-deck { margin: 0 0 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-toolbar { display: grid !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-toolbar-main-row { min-height: 54px !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; padding: 8px 10px !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 8px !important; background: var(--sentrix-support-reference-panel) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-toolbar-center { gap: 8px !important; flex-wrap: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-inline-month-nav { display: inline-flex !important; gap: 4px !important; padding: 2px !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 8px !important; background: #f8fafc !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-inline-month-nav :is(.month-arrow, .month-label, .soc-ops-support-today-btn) { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 32px !important; height: 32px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--sentrix-support-reference-text) !important; font-size: 12px !important; line-height: 16px !important; font-weight: 800 !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-inline-month-nav .month-arrow { width: 32px !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-inline-month-nav .month-label { min-width: 96px !important; padding: 0 10px !important; font-size: 15px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-inline-month-nav .soc-ops-support-today-btn { padding: 0 10px !important; background: #ffffff !important; border-left: 1px solid var(--sentrix-support-reference-line) !important; border-right: 1px solid var(--sentrix-support-reference-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-filters { gap: 6px !important; flex-wrap: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-filter-field { grid-template-columns: auto minmax(98px, 132px) !important; gap: 5px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-filter-inline-label { font-size: 11px !important; color: var(--sentrix-support-reference-muted) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] :is(.soc-ops-support-compact-control, .soc-ops-support-export-top-btn) { min-height: 32px !important; height: 32px !important; border-radius: 6px !important; font-size: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-view-toggle { gap: 2px !important; padding: 2px !important; border-radius: 8px !important; border: 1px solid var(--sentrix-support-reference-line) !important; background: #f8fafc !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-view-toggle .chip { min-height: 30px !important; height: 30px !important; padding: 0 12px !important; border-radius: 6px !important; border: 0 !important; background: transparent !important; color: var(--sentrix-support-reference-muted) !important; font-size: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-view-toggle .chip.is-active { background: var(--sentrix-support-reference-orange) !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-support-strip { display: block !important; padding: 0 !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 8px !important; background: var(--sentrix-support-reference-panel) !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-support-strip { display: block !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-toolbar-stats { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-toolbar-stat { min-width: 0 !important; min-height: 58px !important; display: grid !important; align-content: center !important; gap: 3px !important; padding: 9px 12px !important; border: 0 !important; border-right: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 0 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-toolbar-stat:last-child { border-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-toolbar-stat-label { font-size: 11px !important; line-height: 15px !important; color: var(--sentrix-support-reference-muted) !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-toolbar-stat > strong { color: var(--sentrix-support-reference-text) !important; font-size: 18px !important; line-height: 22px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] :is(#opsSupportCalendarView, #opsSupportListView) { padding: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportCalendarView.soc-ops-support-view { gap: 0 !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 8px !important; background: var(--sentrix-support-reference-panel) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-calendar-weekdays { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--sentrix-support-reference-line) !important; background: #f8fafc !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-calendar-weekdays > span { min-height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-right: 1px solid var(--sentrix-support-reference-line) !important; color: var(--sentrix-support-reference-muted) !important; font-size: 11px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-calendar-weekdays > span:last-child { border-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportCalendarGrid.soc-ops-support-calendar-grid { gap: 0 !important; border: 0 !important; border-radius: 0 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportCalendarGrid > .soc-ops-support-calendar-cell { min-height: 112px !important; padding: 7px !important; border: 0 !important; border-right: 1px solid #edf1f6 !important; border-bottom: 1px solid #edf1f6 !important; border-radius: 0 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportCalendarGrid > .soc-ops-support-calendar-cell:nth-child(7n) { border-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-calendar-cell-head > strong { font-size: 12px !important; line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-calendar-cell-body { gap: 3px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-calendar-line { min-height: 25px !important; height: 25px !important; padding: 0 7px 0 11px !important; border-radius: 5px !important; border: 1px solid var(--ops-support-line-border, #dce4ef) !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-calendar-line::before { width: 3px !important; border-radius: 5px 0 0 5px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-calendar-line-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-calendar-line-count { font-size: 11px !important; line-height: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-calendar-more { min-height: 24px !important; height: 24px !important; border-radius: 5px !important; background: #f8fafc !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportListView.soc-ops-support-view:not(.hidden) { display: grid !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-list-table-wrap { border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 8px !important; background: var(--sentrix-support-reference-panel) !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-list-table { table-layout: fixed !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-list-table thead th { height: 34px !important; padding: 0 10px !important; background: #f8fafc !important; color: var(--sentrix-support-reference-muted) !important; font-size: 11px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-list-table tbody td { height: 42px !important; padding: 0 10px !important; color: var(--sentrix-support-reference-text) !important; font-size: 12px !important; line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-list-row.is-selected, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-list-row:hover { background: #fff7ed !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-list-page-shell { min-height: 36px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; padding: 0 10px !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 8px !important; background: var(--sentrix-support-reference-panel) !important; color: var(--sentrix-support-reference-muted) !important; font-size: 11px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportSheet.soc-ops-support-sheet { width: min(100%, 378px) !important; max-width: 378px !important; padding: 12px !important; border-radius: 8px !important; border: 1px solid var(--sentrix-support-reference-line) !important; background: var(--sentrix-support-reference-panel) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-sheet-head { min-height: 54px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--sentrix-support-reference-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportSheetTitle { font-size: 16px !important; line-height: 22px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-detail-section { padding-top: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-detail-section-actions { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-detail-section-actions .ds-btn { min-height: 30px !important; height: 30px !important; padding: 0 10px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-detail-summary-grid { border-radius: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-detail-summary-box { min-height: 56px !important; padding: 9px 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-confirmed-block .confirmed-worker-list, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-table-shell .confirmed-worker-list { border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 8px !important; overflow: hidden !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal { z-index: calc(var(--ui-z-drawer) + 16) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-backdrop { background: rgba(15, 23, 42, 0.42) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-dialog--reference { width: min(88vw, 1120px) !important; max-height: min(86vh, 860px) !important; margin: 6vh auto 0 !important; border-radius: 8px !important; border: 1px solid var(--sentrix-support-reference-line) !important; background: #ffffff !important; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-head, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-foot { min-height: 60px !important; padding: 14px 22px !important; border-color: var(--sentrix-support-reference-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-head-actions { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin-left: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-head > h3 { display: inline-flex !important; align-items: center !important; gap: 10px !important; color: var(--sentrix-support-reference-text) !important; font-size: 22px !important; line-height: 30px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-edit-badge { display: inline-flex !important; align-items: center !important; min-height: 28px !important; padding: 0 12px !important; border-radius: 999px !important; background: #fff3eb !important; color: var(--sentrix-support-reference-orange) !important; font-size: 12px !important; line-height: 16px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-table-shell { padding: 16px 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-table-shell .soc-ops-support-confirmed-block { display: grid !important; gap: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-table-shell .confirmed-worker-list-head, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-table-shell .worker-row { grid-template-columns: 90px minmax(0, 1.15fr) minmax(0, 1.25fr) minmax(0, 1.45fr) 90px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-table-shell .confirmed-worker-list-head { min-height: 58px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-table-shell .worker-row { min-height: 84px !important; padding: 12px 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-table-shell .worker-row input[type="text"] { height: 48px !important; font-size: 16px !important; line-height: 22px !important; border-radius: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .soc-ops-support-worker-modal-table-shell .worker-row-no { display: inline-grid !important; place-items: center !important; color: var(--sentrix-support-reference-text) !important; font-size: 13px !important; font-weight: 900 !important; } @media (min-width: 1366px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportLayout.soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) 364px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportCalendarGrid > .soc-ops-support-calendar-cell { min-height: 114px !important; } } @media (min-width: 1600px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportLayout.soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) 384px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportCalendarGrid > .soc-ops-support-calendar-cell { min-height: 122px !important; } } @media (min-width: 1920px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportLayout.soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) 404px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportCalendarGrid > .soc-ops-support-calendar-cell { min-height: 132px !important; } } /* ===== Sentrix desktop sidebar contrast palette (2026-04-20) ===== */ html:not([data-theme="dark"]) body:is(.soc-desktop-shell, .soc-desktop-adaptive), html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) { --soc-sidebar-bg-1: #eef2f6; --soc-sidebar-bg-2: #eef2f6; --soc-sidebar-divider: #dde5ee; --soc-sidebar-row-hover: #f7fafc; --soc-sidebar-active-bg: #fff1e8; --soc-sidebar-active-rail: #ff6a13; --soc-sidebar-active-text: #d84a0b; } html:not([data-theme="dark"]) body:is(.soc-desktop-shell, .soc-desktop-adaptive) .container.ds-page, html:not([data-theme="dark"]) body:is(.soc-desktop-shell, .soc-desktop-adaptive) .container.admin-layout, html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) .container.ds-page, html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) .container.admin-layout { background: linear-gradient(180deg, #eef2f6 0%, #eef2f6 100%) left top / var(--soc-desktop-sidebar-width) 100% no-repeat, linear-gradient(90deg, transparent calc(var(--soc-desktop-sidebar-width) - 1px), #dde5ee calc(var(--soc-desktop-sidebar-width) - 1px), #dde5ee var(--soc-desktop-sidebar-width), transparent var(--soc-desktop-sidebar-width)) left top / 100% 100% no-repeat, #f6f7fb !important; } html:not([data-theme="dark"]) body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel, html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel { background: #eef2f6 !important; border-right-color: #dde5ee !important; } html:not([data-theme="dark"]) body:is(.soc-desktop-shell, .soc-desktop-adaptive) .container:is(.ds-page, .admin-layout) #menuSheetPanel, html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) .container:is(.ds-page, .admin-layout) #menuSheetPanel { background: #eef2f6 !important; border-right: 1px solid #dde5ee !important; } html:not([data-theme="dark"]) body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel :is(.soc-menu-group-toggle:hover, .soc-menu-sub-item:hover, .soc-menu-group-toggle.is-open), html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel :is(.soc-menu-group-toggle:hover, .soc-menu-sub-item:hover, .soc-menu-group-toggle.is-open) { background: #f7fafc !important; } html:not([data-theme="dark"]) body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item.is-active, html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item.is-active { background: #fff1e8 !important; color: #d84a0b !important; } html:not([data-theme="dark"]) body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item.is-active :is(.soc-menu-sub-item-label, .soc-menu-sub-item-icon), html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item.is-active :is(.soc-menu-sub-item-label, .soc-menu-sub-item-icon) { color: #d84a0b !important; } html:not([data-theme="dark"]) body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item.is-active, html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item.is-active { box-shadow: none !important; } html:not([data-theme="dark"]) body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .mobile-nav-actions, html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .mobile-nav-actions { background: linear-gradient(180deg, rgba(238, 242, 246, 0) 0%, #eef2f6 18%, #eef2f6 100%) !important; border-top-color: #dde5ee !important; } /* ===== ARLS sidebar desktop final parity (2026-04-20) ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) { --soc-desktop-sidebar-width: 178px; --soc-desktop-sidebar-expanded-width: 178px; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel #mobileMenuRootPage { padding: 10px 8px 12px 0 !important; gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel #mobileAdminShortcutList { gap: 2px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-section + .soc-menu-section { margin-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-section-label { margin: 16px 14px 6px !important; padding: 0 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-group-toggle, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item { min-height: 40px !important; margin: 0 !important; border-radius: 10px !important; grid-template-columns: 23px minmax(0, 1fr) !important; gap: 12px !important; padding: 0 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-group-toggle { grid-template-columns: 23px minmax(0, 1fr) 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) { width: 23px !important; min-width: 23px !important; height: 23px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) :is(svg, img, .sentrix-theme-icon) { width: 23px !important; height: 23px !important; transform: scale(1.16) !important; transform-origin: center center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label) { font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item--nested { min-height: 34px !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding: 0 14px 0 42px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item--nested .soc-menu-sub-item-label { font-size: 12px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item--nested .soc-menu-submenu-bullet { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item::before { content: "" !important; display: none !important; position: absolute !important; left: 1px !important; top: 9px !important; bottom: 9px !important; width: 3px !important; border-radius: 999px !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item.is-active::before { display: block !important; background: #ff6a13 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #menuSheetPanel .soc-menu-sub-item--nested.is-active::before { display: none !important; } @media (max-width: 1023px) { #opsSupportPanel .soc-ops-support-toolbar-main-row { grid-template-columns: minmax(0, 1fr) !important; } #opsSupportPanel .soc-ops-support-toolbar-center, #opsSupportPanel .soc-ops-support-filters, #opsSupportPanel .soc-ops-support-toolbar-actions { flex-wrap: wrap !important; } #opsSupportPanel .soc-ops-support-detail-summary-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* ===== Sentrix support roster reference parity pass (2026-04-24) ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar { min-height: 60px !important; padding: 0 20px !important; border-bottom: 1px solid #e5e7eb !important; background: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-left { gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-brand-wordmark { height: 23px !important; max-width: 136px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-current-title { min-height: 24px !important; margin-left: 26px !important; padding-left: 26px !important; border-left: 1px solid #e5e7eb !important; color: #111827 !important; font-size: 18px !important; line-height: 24px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-right { gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is( #sessionInfo, #topbarUtilityCluster, #topbarDownloadsBtn, #topbarLanguageWrap, #topbarLanguageBtn, #topbarThemeToggleBtn ) { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #topbarNotificationsBtn.topbar-btn:not(.hidden) { position: relative !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #1f2937 !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #topbarNotificationsBtn .topbar-notification-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #topbarNotificationsBtn .topbar-notification-icon-img { width: 20px !important; height: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #topbarNotificationsBtn .topbar-notification-badge { top: 1px !important; right: 0 !important; min-width: 14px !important; height: 14px !important; padding: 0 3px !important; border: 1px solid #ffffff !important; border-radius: 999px !important; background: #ff4d4f !important; color: #ffffff !important; font-size: 8px !important; line-height: 12px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-admin-profile-btn { width: auto !important; min-width: 94px !important; height: 38px !important; min-height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #111827 !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-admin-profile-btn.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-admin-profile-copy { display: grid !important; gap: 1px !important; min-width: 0 !important; text-align: left !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-admin-profile-copy strong { color: #111827 !important; font-size: 13px !important; line-height: 17px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-admin-profile-copy small { color: #6b7280 !important; font-size: 11px !important; line-height: 15px !important; font-weight: 400 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-admin-profile-chevron { color: #111827 !important; font-size: 14px !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] { --ops-ref-bg: #f7f8fa; --ops-ref-surface: #ffffff; --ops-ref-line: #e7ebf0; --ops-ref-text: #111827; --ops-ref-muted: #6b7280; --ops-ref-orange: #ff6a00; --ops-ref-orange-weak: #fff3e8; --ops-ref-blue: #2f6bff; --ops-ref-blue-weak: #eef4ff; --ops-ref-green: #18a36b; --ops-ref-green-weak: #e8f7ef; --ops-ref-red: #ff4d4f; --ops-ref-red-weak: #fff1f1; --ops-ref-purple: #7a52f4; --ops-ref-purple-weak: #f3eeff; padding: 0 24px 20px !important; background: var(--ops-ref-bg) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-shell { grid-template-columns: minmax(0, 1fr) 350px !important; gap: 14px !important; align-items: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary { grid-template-columns: 1.16fr repeat(7, minmax(0, 1fr)) !important; border-color: var(--ops-ref-line) !important; border-radius: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item { min-height: 76px !important; gap: 4px !important; padding: 12px 16px !important; border-right-color: var(--ops-ref-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item span { color: var(--ops-ref-muted) !important; font-size: 11px !important; line-height: 15px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item strong { color: var(--ops-ref-text) !important; font-size: 16px !important; line-height: 22px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-month span { color: var(--ops-ref-text) !important; font-size: 15px !important; line-height: 20px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-month strong { color: var(--ops-ref-muted) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 400 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-pending strong { color: var(--ops-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-approved strong { color: var(--ops-ref-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item:is(.is-rejected, .is-over) strong { color: var(--ops-ref-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-unavailable strong { color: var(--ops-ref-purple) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar { min-height: 48px !important; grid-template-columns: auto minmax(132px, 158px) minmax(132px, 158px) minmax(120px, 148px) minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; margin: 20px 0 12px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar label { position: relative !important; gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar label > span { position: absolute !important; top: -7px !important; left: 10px !important; padding: 0 4px !important; background: var(--ops-ref-bg) !important; color: var(--ops-ref-muted) !important; font-size: 11px !important; line-height: 14px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar select, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar button { height: 40px !important; min-height: 40px !important; border-color: var(--ops-ref-line) !important; border-radius: 8px !important; color: var(--ops-ref-text) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-nav { gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-nav [data-action="ops-support-month-prev"], html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-nav [data-action="ops-support-month-next"] { width: 40px !important; min-width: 40px !important; padding: 0 !important; font-size: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-nav [data-action="ops-support-today"] { width: auto !important; min-width: 48px !important; padding: 0 12px !important; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-month-label { min-width: 156px !important; font-size: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-view-toggle { justify-self: end !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-view-toggle button { min-width: 72px !important; padding: 0 18px !important; border-color: var(--ops-ref-line) !important; background: #ffffff !important; color: #374151 !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-view-toggle .is-active { border-color: var(--ops-ref-orange) !important; background: #ffffff !important; color: var(--ops-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-weekdays { border-color: var(--ops-ref-line) !important; border-radius: 8px 8px 0 0 !important; background: #fbfcfe !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-weekdays span { min-height: 36px !important; border-right-color: var(--ops-ref-line) !important; color: var(--ops-ref-text) !important; font-size: 12px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-grid { border-color: var(--ops-ref-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell { min-height: 124px !important; padding: 8px 9px !important; border-right-color: var(--ops-ref-line) !important; border-bottom-color: var(--ops-ref-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell.is-outside-month { background: #fbfcfe !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-day { margin-bottom: 7px !important; color: var(--ops-ref-text) !important; font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell.is-outside-month .ops-ref-calendar-day { color: #9aa3b2 !important; font-weight: 400 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell.is-today .ops-ref-calendar-day { width: 22px !important; height: 22px !important; margin-bottom: 7px !important; background: var(--ops-ref-orange) !important; font-size: 12px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line { min-height: 25px !important; margin-bottom: 4px !important; padding: 0 6px 0 10px !important; border-color: var(--ops-ref-line) !important; border-radius: 6px !important; background: #ffffff !important; font-size: 10px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line::before { top: 5px !important; bottom: 5px !important; left: 2px !important; width: 3px !important; border-radius: 999px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line strong { background: transparent !important; color: var(--ops-ref-orange) !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line.state-approved::before { background: var(--ops-ref-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line.state-approved strong { background: transparent !important; color: var(--ops-ref-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line:is(.state-rejected, .is-over-assigned)::before { background: var(--ops-ref-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line:is(.state-rejected, .is-over-assigned) strong { background: transparent !important; color: var(--ops-ref-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line.state-unavailable::before { background: var(--ops-ref-purple) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line.state-unavailable strong { background: transparent !important; color: var(--ops-ref-purple) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-more { min-height: 16px !important; justify-content: flex-start !important; margin: 3px 0 0 !important; padding: 0 0 0 4px !important; border: 0 !important; background: transparent !important; color: var(--ops-ref-text) !important; font-size: 10px !important; line-height: 14px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list-table-wrap, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { border-color: var(--ops-ref-line) !important; border-radius: 8px !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list table { table-layout: fixed !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list th, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list td { height: 48px !important; padding: 0 10px !important; color: #253044 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list th { height: 43px !important; color: var(--ops-ref-muted) !important; font-weight: 600 !important; background: #fbfcfe !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list th:nth-child(1), html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list td:nth-child(1) { width: 46px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list th:nth-child(3), html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list td:nth-child(3) { width: 132px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-shift-cell { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; color: #64748b !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-shift-badge { min-height: 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 8px !important; border: 1px solid #e5e7eb !important; border-radius: 6px !important; background: #f8fafc !important; color: #475569 !important; font-size: 12px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-count { font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-count.is-requested { color: var(--ops-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-count.is-self { color: var(--ops-ref-blue) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-count.is-confirmed { color: var(--ops-ref-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-count:is(.is-zero, .is-shortage) { color: var(--ops-ref-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list-reason { text-align: left !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list-row.is-selected, html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list-row:hover { background: #fff6ee !important; } /* ===== Sentrix support roster interaction final overrides (2026-04-24) ===== */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-shell.has-collapsed-detail { grid-template-columns: minmax(0, 1fr) 52px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { display: flex !important; flex-direction: column !important; padding: 14px 14px 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; padding-bottom: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer { position: relative !important; bottom: auto !important; flex: 0 0 auto !important; margin: auto -14px 0 !important; padding: 12px 14px 14px !important; background: #ffffff !important; border-top: 1px solid var(--ops-ref-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dd { color: #667085 !important; font-weight: 400 !important; } /* ===== Sentrix reference home final shell placement authority (2026-04-24) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-home-sidebar-w: 214px; --soc-desktop-sidebar-width: 214px; --soc-desktop-sidebar-expanded-width: 214px; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar { width: calc(100% - var(--sentrix-home-sidebar-w)) !important; min-height: 68px !important; margin-left: var(--sentrix-home-sidebar-w) !important; padding: 0 28px !important; border-bottom: 1px solid #e3e8f0 !important; background: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout { width: calc(100% - var(--sentrix-home-sidebar-w)) !important; min-width: 0 !important; min-height: calc(100dvh - 68px) !important; display: block !important; grid-template-columns: none !important; margin-left: var(--sentrix-home-sidebar-w) !important; padding: 28px 32px 42px !important; background: #f5f7fb !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel { position: fixed !important; inset: 0 auto 0 0 !important; z-index: 80 !important; width: var(--sentrix-home-sidebar-w) !important; min-width: var(--sentrix-home-sidebar-w) !important; max-width: var(--sentrix-home-sidebar-w) !important; height: 100dvh !important; max-height: 100dvh !important; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; border: 0 !important; border-right: 1px solid #e3e8f0 !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-sidebar-header { min-height: 74px !important; padding: 0 31px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage { padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList { gap: 0 !important; padding: 0 22px 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section + .soc-menu-section { margin-top: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section-label { margin: 0 0 10px !important; padding: 0 10px !important; color: #6f7e96 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-toggle, .soc-menu-sub-item) { min-height: 44px !important; border-radius: 8px !important; gap: 14px !important; padding: 0 16px !important; color: #0b2d50 !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label) { font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions { padding-top: 20px !important; border-top: 1px solid #e3e8f0 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel { width: 100% !important; max-width: 100% !important; display: block !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #homeView, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #sentrixHomeDashboardRoot { width: 100% !important; max-width: 100% !important; } } /* ===== Sentrix reference home logo visibility authority (2026-04-24) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-sidebar-header { display: flex !important; align-items: center !important; justify-content: flex-start !important; min-height: 74px !important; padding: 0 31px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-sidebar-logo-link { display: inline-flex !important; width: 150px !important; height: 34px !important; align-items: center !important; justify-content: flex-start !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-sidebar-logo-img { display: block !important; width: 142px !important; max-width: 142px !important; height: auto !important; opacity: 1 !important; visibility: visible !important; object-fit: contain !important; } } /* ===== Sentrix responsive shell and linked home cards (2026-04-24) ===== */ @media (min-width: 1024px) { html, body:not(.soc-auth-shell-active) { overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-home-sidebar-w: 214px; --soc-tabbar-h: 0px; --tabbar-h: 0px; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #bottomTabNav.soc-bottom-tab { display: none !important; visibility: hidden !important; pointer-events: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar { width: calc(100vw - var(--sentrix-home-sidebar-w)) !important; max-width: calc(100vw - var(--sentrix-home-sidebar-w)) !important; min-height: 68px !important; height: 68px !important; margin-left: var(--sentrix-home-sidebar-w) !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-left, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-right { min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-date-status, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-admin-profile-btn { flex: 0 0 auto !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout { width: calc(100vw - var(--sentrix-home-sidebar-w)) !important; max-width: calc(100vw - var(--sentrix-home-sidebar-w)) !important; min-width: 0 !important; margin-left: var(--sentrix-home-sidebar-w) !important; overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel { display: flex !important; flex-direction: column !important; height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #mobileMenuPager, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #mobileTypeFlowTrack, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #mobileMenuRootPage { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #mobileAdminShortcutList { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-width: thin !important; padding-bottom: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions { flex: 0 0 auto !important; margin-top: auto !important; padding: 14px 24px max(16px, env(safe-area-inset-bottom, 0px)) !important; border-top: 1px solid #e3e8f0 !important; background: #ffffff !important; z-index: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-dashboard, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #homeView, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #sentrixHomeDashboardRoot { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-table-scroll { width: 100% !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-table-scroll .sentrix-home-table { min-width: 620px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( .sentrix-home-alert-tile[data-action], .sentrix-home-notice-row[data-action], .sentrix-home-table tbody tr[data-action] ) { cursor: pointer !important; transition: background-color 140ms ease, border-color 140ms ease !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( .sentrix-home-alert-tile[data-action]:hover, .sentrix-home-alert-tile[data-action]:focus-visible, .sentrix-home-notice-row[data-action]:hover, .sentrix-home-notice-row[data-action]:focus-visible, .sentrix-home-table tbody tr[data-action]:hover, .sentrix-home-table tbody tr[data-action]:focus-visible ) { background: #fff8f3 !important; border-color: #ffd9c2 !important; outline: none !important; } } @media (min-width: 1024px) and (max-width: 1439px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1024px) and (max-width: 1279px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar { padding: 0 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title { max-width: 260px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-date-status { gap: 8px !important; font-size: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-admin-profile-copy { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-admin-profile-btn { min-width: 34px !important; width: 34px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout { padding: 20px 20px 34px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-main-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-bottom-grid { grid-template-columns: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-alert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] { padding: 0 16px 20px !important; overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-shell, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportLayout.soc-ops-support-layout.has-detail-panel { grid-template-columns: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { min-height: auto !important; max-height: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: end !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-view-toggle { justify-self: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary { grid-template-columns: minmax(150px, 160px) repeat(7, minmax(120px, 1fr)) !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list-table-wrap { overflow-x: auto !important; overflow-y: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list table { min-width: 900px !important; } } @media (max-width: 767px) { html body:not(.soc-auth-shell-active) .sentrix-home-kpi-grid, html body:not(.soc-auth-shell-active) .sentrix-home-alert-grid, html body:not(.soc-auth-shell-active) .sentrix-home-main-grid, html body:not(.soc-auth-shell-active) .sentrix-home-bottom-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* ===== Sentrix desktop workspace route visibility fix (2026-04-24) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel[hidden], html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel[aria-hidden="true"] { display: none !important; visibility: hidden !important; pointer-events: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel:not(.hidden):not([hidden]):not([aria-hidden="true"]) { display: block !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 8px !important; padding: 14px 24px max(16px, env(safe-area-inset-bottom, 0px)) !important; border-top: 1px solid #e3e8f0 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions-divider { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions .mobile-nav-action-btn--plain.soc-menu-item { display: flex !important; width: 100% !important; min-height: 36px !important; align-items: center !important; justify-content: flex-start !important; padding: 0 0 0 32px !important; text-align: left !important; color: #0b2d50 !important; } } /* ===== Sentrix HQ home data/detail/scroll repair (2026-04-24) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout { height: auto !important; min-height: calc(100dvh - 68px) !important; overflow-x: hidden !important; overflow-y: visible !important; padding-bottom: 64px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #homeView, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #sentrixHomeDashboardRoot, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-dashboard { min-height: 0 !important; overflow-x: hidden !important; overflow-y: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-dashboard { padding-bottom: 42px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-site-overview { grid-column: 1 / -1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-card-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-eyebrow { display: inline-flex !important; margin-bottom: 5px !important; color: #ff6a00 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-card-head h3 { margin: 0 !important; color: var(--sentrix-home-text) !important; font-size: 18px !important; line-height: 24px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-close-btn { min-height: 32px !important; padding: 0 12px !important; border: 1px solid #d9e1ec !important; border-radius: 8px !important; background: #ffffff !important; color: #334b6f !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-body { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr) !important; gap: 18px !important; align-items: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-body p { margin: 0 !important; color: #53657f !important; font-size: 14px !important; line-height: 22px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-meta { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-meta div { min-width: 0 !important; padding: 10px 12px !important; border: 1px solid #e3e8f0 !important; border-radius: 8px !important; background: #fbfcfe !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-meta dt, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-meta dd { margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-meta dt { color: #7d8ca6 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-meta dd { margin-top: 3px !important; color: #0b2d50 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-support-card .sentrix-home-table-scroll { max-height: 312px !important; overflow-y: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-notice-card { min-height: 230px !important; } } @media (min-width: 1024px) and (max-width: 1279px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .sentrix-home-detail-body { grid-template-columns: minmax(0, 1fr) !important; } } /* ===== Ops support detail worker editor repair (2026-04-24) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers > .ops-ref-worker-editor { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; justify-content: stretch !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-list { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-row input[type="text"] { width: 100% !important; min-width: 0 !important; height: 36px !important; min-height: 36px !important; padding: 0 10px !important; border: 1px solid var(--sentrix-support-reference-line) !important; border-radius: 8px !important; background: #ffffff !important; color: var(--sentrix-support-reference-text) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-row input[type="text"]::placeholder { color: #98a2b3 !important; opacity: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-row [data-action="ops-support-remove-worker-row"] { width: 64px !important; min-width: 64px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border: 1px solid var(--ops-ref-red, #ff4d4f) !important; border-radius: 8px !important; background: #ffffff !important; color: var(--ops-ref-red, #ff4d4f) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-editor-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: "add add" "save cancel" !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-editor-actions button { width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; border-radius: 8px !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-add-btn { grid-area: add !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-save-btn { grid-area: save !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-cancel-btn { grid-area: cancel !important; } } /* ===== Ops support detail no-jump polish (2026-04-24) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"], html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-main, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list-table-wrap, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-body, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-list { -ms-overflow-style: none !important; scrollbar-width: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]::-webkit-scrollbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-main::-webkit-scrollbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar::-webkit-scrollbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-list-table-wrap::-webkit-scrollbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel::-webkit-scrollbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-body::-webkit-scrollbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-list::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel.is-collapsed { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel.is-collapsed .ops-ref-detail-collapse-btn { width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; border: 0 !important; border-radius: 10px !important; background: var(--sentrix-support-reference-orange) !important; color: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel.is-collapsed .ops-ref-detail-collapse-btn span { color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-collapsed-label { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta div, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dl div { grid-template-columns: 68px minmax(0, 1fr) !important; gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta dt, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dt { font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta dd, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dd { font-weight: 400 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li { grid-template-columns: 12px 74px minmax(0, 1fr) !important; position: relative !important; min-height: 22px !important; padding-block: 3px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li small { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li::before { content: "" !important; position: absolute !important; left: 5.5px !important; top: -50% !important; bottom: -50% !important; width: 1px !important; background: var(--ops-ref-line, var(--sentrix-support-reference-line)) !important; z-index: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li:first-child::before { top: 50% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li:last-child::before { bottom: 50% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history .ops-ref-history-dot, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li i { position: relative !important; z-index: 1 !important; width: 7px !important; height: 7px !important; border-radius: 999px !important; background: var(--ops-ref-history-color, #94a3b8) !important; box-shadow: 0 0 0 3px #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li.tone-created, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li.tone-pending { --ops-ref-history-color: var(--ops-ref-orange, #ff6a00); } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li.tone-changed { --ops-ref-history-color: var(--ops-ref-blue, #2f6bff); } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li.tone-approved { --ops-ref-history-color: var(--ops-ref-green, #18a36b); } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li.tone-rejected { --ops-ref-history-color: var(--ops-ref-red, #ff4d4f); } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li.tone-unavailable { --ops-ref-history-color: var(--ops-ref-purple, #7a52f4); } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li.tone-cancelled { --ops-ref-history-color: #8b95a1; } } /* ===== Sentrix situation-room reference final alignment (2026-04-25) ===== */ @media (min-width: 1024px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) { --sentrix-home-sidebar-w: 214px !important; --soc-desktop-sidebar-width: 214px !important; --soc-desktop-sidebar-expanded-width: 214px !important; --sx-navy: #0b2d5c; --sx-text: #102b55; --sx-muted: #7c8daa; --sx-line: #e8edf5; --sx-soft-line: #eef2f8; --sx-bg: #fbfcff; --sx-orange: #ff4b16; --sx-red: #ff1f1f; --sx-red-bg: #fff1f0; --sx-red-bg-hover: #ffe8e5; --sx-green: #18ad56; --sx-blue: #3897ff; --sx-purple: #8a35ff; --sx-eci3: #ff8a00; background: #ffffff !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .soc-app-shell { height: 100dvh !important; min-height: 100dvh !important; overflow: hidden !important; background: #ffffff !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel { width: 214px !important; min-width: 214px !important; max-width: 214px !important; flex: 0 0 214px !important; height: 100dvh !important; max-height: 100dvh !important; border-right: 1px solid var(--sx-line) !important; background: #ffffff !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel .soc-sidebar-header { height: 76px !important; min-height: 76px !important; padding: 26px 0 0 27px !important; border: 0 !important; background: #ffffff !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel .soc-sidebar-logo-img { width: 152px !important; height: auto !important; max-height: 29px !important; object-fit: contain !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel #mobileMenuRootPage { padding: 0 13px 12px 13px !important; background: #ffffff !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList { gap: 1px !important; padding: 0 0 12px 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList::-webkit-scrollbar { display: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel .soc-menu-section-label { margin: 12px 2px 7px !important; color: #7c8daa !important; font-size: 12px !important; line-height: 17px !important; font-weight: 700 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel :is(.soc-menu-group-toggle, .soc-menu-sub-item) { min-height: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #173866 !important; grid-template-columns: 22px minmax(0, 1fr) !important; gap: 14px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel .soc-menu-group-toggle { grid-template-columns: 22px minmax(0, 1fr) 12px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label) { color: inherit !important; font-size: 14px !important; line-height: 18px !important; font-weight: 700 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) { width: 19px !important; min-width: 19px !important; height: 19px !important; color: inherit !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) :is(svg, img, .sentrix-theme-icon) { width: 19px !important; height: 19px !important; transform: none !important; stroke-width: 1.9 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel .soc-menu-sub-item.is-active { position: relative !important; background: #fff0eb !important; color: var(--sx-orange) !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel .soc-menu-sub-item.is-active::before { display: block !important; left: 0 !important; top: 7px !important; bottom: auto !important; width: 3px !important; height: 22px !important; border-radius: 999px !important; background: var(--sx-orange) !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel .mobile-nav-actions { padding: 14px 18px 16px !important; background: #ffffff !important; border-top: 1px solid var(--sx-line) !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar { width: calc(100vw - 214px) !important; max-width: calc(100vw - 214px) !important; height: 69px !important; min-height: 69px !important; margin-left: 214px !important; padding: 0 28px 0 26px !important; border-bottom: 1px solid var(--sx-line) !important; background: #ffffff !important; box-shadow: none !important; overflow: visible !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-brand-heading, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #topbarBreadcrumb { display: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-left { display: flex !important; align-items: center !important; gap: 0 !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-current-title { display: inline-flex !important; align-items: center !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border-left: 0 !important; color: var(--sx-navy) !important; font-size: 20px !important; line-height: 24px !important; font-weight: 800 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .container.admin-layout { width: calc(100vw - 214px) !important; max-width: calc(100vw - 214px) !important; min-width: 0 !important; height: calc(100dvh - 69px) !important; min-height: calc(100dvh - 69px) !important; margin-left: 214px !important; padding: 0 !important; background: var(--sx-bg) !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #dashboardPanel { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference { --situation-bg: var(--sx-bg); --situation-surface: #ffffff; --situation-border: var(--sx-line); --situation-border-soft: var(--sx-soft-line); --situation-text: var(--sx-text); --situation-muted: var(--sx-muted); --situation-orange: var(--sx-orange); --situation-red: var(--sx-red); --situation-green: var(--sx-green); --situation-blue: var(--sx-blue); --situation-purple: var(--sx-purple); height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 18px 25px 24px 20px !important; background: var(--sx-bg) !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-reference-surface { height: 100% !important; min-height: 0 !important; gap: 15px !important; max-width: none !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #alertsTicketSection { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-grid { flex: 0 0 auto !important; display: grid !important; grid-template-columns: 241px 226px 226px 226px minmax(320px, 1fr) !important; gap: 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card.is-active, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card:first-child { height: 106px !important; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-items: center !important; column-gap: 26px !important; padding: 0 31px !important; border: 1px solid var(--sx-soft-line) !important; border-radius: 4px !important; background: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-icon { width: 38px !important; height: 38px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--sx-navy) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-icon svg { width: 38px !important; height: 38px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(2) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card--important .soc-summary-value { color: var(--sx-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(4) .soc-situation-kpi-icon { color: var(--sx-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(5) .soc-situation-kpi-icon { color: var(--sx-purple) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-summary-label { margin: 0 0 7px !important; color: #385077 !important; font-size: 15px !important; line-height: 19px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-summary-value { color: var(--sx-navy) !important; font-size: 34px !important; line-height: 34px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alerts { position: fixed !important; top: 84px !important; right: 24px !important; z-index: 1000 !important; display: grid !important; gap: 8px !important; width: 420px !important; max-width: calc(100vw - 48px) !important; min-height: 0 !important; margin: 0 !important; pointer-events: none !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alerts:empty { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alerts .alert-item { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 8px !important; align-items: start !important; min-height: 36px !important; padding: 9px 14px !important; border: 1px solid var(--sx-line) !important; border-radius: 8px !important; background: #ffffff !important; color: var(--sx-text) !important; box-shadow: 0 8px 24px rgba(16, 43, 85, 0.08) !important; white-space: normal !important; overflow: visible !important; line-height: 18px !important; pointer-events: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alerts .alert-time { color: #60708f !important; font-size: 12px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alerts .alert-text { min-width: 0 !important; color: var(--sx-text) !important; font-size: 13px !important; font-weight: 700 !important; overflow-wrap: anywhere !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-main-grid { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 416px !important; gap: 16px !important; align-items: stretch !important; flex: 1 1 auto !important; min-height: 0 !important; margin-top: 0 !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-main-grid.is-detail-collapsed { grid-template-columns: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-main-grid.is-detail-collapsed .soc-situation-detail-card { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-left-stack { gap: 15px !important; min-width: 0 !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-card { flex: 0 0 81px !important; height: 81px !important; min-height: 81px !important; display: grid !important; grid-template-columns: 202px 126px 126px 145px 120px 120px !important; gap: 16px !important; align-items: end !important; padding: 15px 14px 18px !important; border: 1px solid var(--sx-soft-line) !important; border-radius: 4px !important; background: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-search-icon { left: 13px !important; bottom: 11px !important; width: 18px !important; height: 18px !important; color: #60708f !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-search-icon svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference :is(.soc-situation-search-field input, .soc-situation-filter-field select) { height: 40px !important; border: 1px solid #dfe6f1 !important; border-radius: 5px !important; background: #ffffff !important; color: var(--sx-text) !important; font-size: 13px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-table-card { flex: 1 1 auto !important; min-height: 0 !important; border: 1px solid var(--sx-soft-line) !important; border-radius: 4px !important; overflow: hidden !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-alerts-feed-section { height: 100% !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-table-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row { display: grid !important; grid-template-columns: 72px 126px 186px minmax(280px, 1fr) 72px 86px 136px !important; align-items: center !important; column-gap: 0 !important; min-width: 958px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-table-header { flex: 0 0 40px !important; min-height: 40px !important; padding: 0 16px !important; background: #fafbfc !important; border-bottom: 1px solid #f0f3f8 !important; color: var(--sx-muted) !important; font-size: 12px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-table-body { overflow: auto !important; scrollbar-width: thin !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row { position: relative !important; min-height: 48px !important; padding: 0 16px !important; border: 0 !important; border-bottom: 1px solid #f0f3f8 !important; border-radius: 0 !important; background: #ffffff !important; color: #284161 !important; font-size: 13px !important; font-weight: 700 !important; text-align: left !important; box-shadow: none !important; outline: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row:hover { background: #fbfcff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row.is-selected, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row.is-selected:hover { outline: none !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row.is-selected::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 3px !important; height: 100% !important; background: var(--sx-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row.is-critical-incident { background: var(--sx-red-bg) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row.is-critical-incident:hover, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row.is-critical-incident.is-selected { background: var(--sx-red-bg-hover) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-star { display: inline-grid !important; place-items: center !important; width: 18px !important; height: 18px !important; color: #9fb0c9 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-star svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-star.is-important { color: var(--sx-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-star.is-important svg { fill: currentColor !important; stroke: currentColor !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .incident-title { min-width: 0 !important; color: #17365f !important; font-size: 14px !important; font-weight: 900 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .incident-type { min-width: 0 !important; color: #40567a !important; font-size: 12px !important; line-height: 18px !important; white-space: normal !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .incident-location, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .incident-created-at { color: #4c6388 !important; font-size: 13px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row .incident-severity.eci, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-basic-row dd.eci { display: inline !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 12px !important; line-height: 18px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .eci--lv4 { color: var(--sx-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .eci--lv3 { color: var(--sx-eci3) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .eci--default { color: #111827 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .status-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 43px !important; width: fit-content !important; height: 23px !important; padding: 0 8px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .status-badge--received { border: 1px solid #cfe7ff !important; background: #eaf5ff !important; color: var(--sx-blue) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .status-badge--progress { border: 1px solid #ffd6c4 !important; background: #fff2eb !important; color: var(--sx-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .status-badge--closed { border: 1px solid #cdeedc !important; background: #e9f8ef !important; color: var(--sx-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-detail-card { width: 416px !important; min-width: 416px !important; max-width: 416px !important; min-height: 0 !important; height: 100% !important; padding: 20px 17px 17px !important; border: 1px solid var(--sx-soft-line) !important; border-radius: 4px !important; background: #ffffff !important; overflow: auto !important; box-shadow: none !important; scrollbar-width: thin !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-detail-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; padding: 0 0 22px !important; border-bottom: 1px solid var(--sx-soft-line) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-important-pill { height: 27px !important; padding: 0 9px !important; border: 1px solid var(--sx-red) !important; border-radius: 4px !important; background: #fff7f7 !important; color: var(--sx-red) !important; font-size: 13px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanelTitle { margin: 2px 0 0 !important; color: var(--sx-text) !important; font-size: 16px !important; line-height: 22px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-pc-side-panel-section { padding: 0 0 19px !important; margin: 19px 0 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--sx-soft-line) !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-pc-side-panel-section:last-of-type { border-bottom: 0 !important; padding-bottom: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanelSummary, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-pc-side-panel-summary { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-basic-info { display: grid !important; gap: 10px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-basic-row { display: grid !important; grid-template-columns: 92px minmax(0, 1fr) !important; gap: 10px !important; align-items: start !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-basic-row dt { color: #7b8aa7 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-basic-row dd { margin: 0 !important; color: #486080 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-comment-item { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) 22px !important; gap: 10px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-comment-avatar { width: 34px !important; height: 34px !important; background: #eef2f8 !important; color: #64748b !important; font-size: 13px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-attachment-empty { height: 64px !important; min-height: 64px !important; display: grid !important; place-items: center !important; gap: 4px !important; border: 1px dashed #dce4ef !important; border-radius: 6px !important; color: #8a9ab8 !important; font-size: 13px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-attachment-empty span, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-attachment-empty svg { width: 26px !important; height: 26px !important; color: #8a9ab8 !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanelForm { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-collapse-btn { position: absolute !important; right: calc(var(--sentrix-realtime-detail-rail-width, 424px) + (var(--sentrix-realtime-detail-gap, 16px) / 2)) !important; top: 50% !important; transform: translate(50%, -50%) !important; width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 !important; display: inline-grid !important; place-items: center !important; border-radius: 999px !important; border: 1px solid var(--sx-soft-line) !important; background: #ffffff !important; color: var(--sx-orange) !important; box-shadow: 0 4px 12px rgba(16, 43, 85, 0.12) !important; z-index: 20 !important; cursor: pointer !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-collapse-btn svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.3 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-main-grid.is-detail-collapsed .soc-situation-collapse-btn { right: 0 !important; } } @media (min-width: 1024px) and (max-width: 1439px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-grid { grid-template-columns: repeat(5, minmax(160px, 1fr)) !important; overflow-x: auto !important; scrollbar-width: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-grid::-webkit-scrollbar { display: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-filter-card { overflow-x: auto !important; scrollbar-width: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-filter-card::-webkit-scrollbar { display: none !important; } } /* ===== Sentrix ticket reference late cascade fixups (2026-04-25) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) { --sx-navy: #0b2d5c; --sx-text: #102b55; --sx-muted: #7c8daa; --sx-line: #e8edf5; --sx-soft-line: #eef2f8; --sx-bg: #fbfcff; --sx-orange: #ff4b16; --sx-orange-bg: #fff2eb; --sx-red: #ff1f1f; --sx-green: #18ad56; --sx-blue-gray: #64748b; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel { width: 214px !important; min-width: 214px !important; max-width: 214px !important; flex: 0 0 214px !important; border-right: 1px solid var(--sx-line) !important; background: #fff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-sidebar-header { height: 76px !important; min-height: 76px !important; padding: 26px 0 0 27px !important; border: 0 !important; background: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-sidebar-logo-img { width: 152px !important; max-height: 29px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileMenuRootPage { padding: 0 13px 12px !important; background: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList { gap: 1px !important; padding: 0 0 12px !important; overflow-y: auto !important; scrollbar-width: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList::-webkit-scrollbar { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-menu-section-label { margin: 12px 2px 7px !important; color: #7c8daa !important; font-size: 12px !important; line-height: 17px !important; font-weight: 700 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel :is(.soc-menu-group-toggle, .soc-menu-sub-item) { min-height: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #173866 !important; grid-template-columns: 22px minmax(0, 1fr) !important; gap: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-menu-group-toggle { grid-template-columns: 22px minmax(0, 1fr) 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label) { color: inherit !important; font-size: 14px !important; line-height: 18px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) { width: 19px !important; min-width: 19px !important; height: 19px !important; color: inherit !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) :is(svg, img, .sentrix-theme-icon) { width: 19px !important; height: 19px !important; transform: none !important; stroke-width: 1.9 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-menu-sub-item.is-active { position: relative !important; background: #fff0eb !important; color: var(--sx-orange) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-menu-sub-item.is-active::before { display: block !important; left: 0 !important; top: 7px !important; bottom: auto !important; width: 3px !important; height: 22px !important; border-radius: 999px !important; background: var(--sx-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .mobile-nav-actions { padding: 14px 18px 16px !important; border-top: 1px solid var(--sx-line) !important; background: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar { width: calc(100vw - 214px) !important; max-width: calc(100vw - 214px) !important; height: 68px !important; min-height: 68px !important; margin-left: 214px !important; padding: 0 28px 0 26px !important; border-bottom: 1px solid var(--sx-line) !important; background: #fff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #topbarBreadcrumb { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-left { gap: 0 !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-current-title { margin: 0 !important; padding: 0 !important; border-left: 0 !important; color: var(--sx-navy) !important; font-size: 20px !important; line-height: 24px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .container.admin-layout { width: calc(100vw - 214px) !important; max-width: calc(100vw - 214px) !important; min-width: 0 !important; height: calc(100dvh - 68px) !important; min-height: calc(100dvh - 68px) !important; margin-left: 214px !important; padding: 0 !important; overflow: hidden !important; background: var(--sx-bg) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #dashboardPanel { width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView { height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 20px 24px 24px 19px !important; overflow: hidden !important; background: var(--sx-bg) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-phase1-ticket-surface { height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-shell { height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; max-width: none !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-grid { flex: 0 0 92px !important; display: grid !important; grid-template-columns: repeat(6, 208px) !important; gap: 22px !important; width: 100% !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-card.is-active, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-card:first-child { height: 92px !important; display: flex !important; align-items: center !important; gap: 18px !important; padding: 0 28px !important; border: 1px solid var(--sx-soft-line) !important; border-radius: 4px !important; background: #fff !important; color: var(--sx-text) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon { width: 38px !important; height: 38px !important; min-width: 38px !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-size: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon svg { width: 38px !important; height: 38px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--total { color: var(--sx-navy) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--pending { color: var(--sx-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--approved { color: var(--sx-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--danger { color: var(--sx-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--cancelled { color: var(--sx-blue-gray) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-label { color: var(--sx-text) !important; font-size: 14px !important; line-height: 18px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView [data-ticket-summary-filter] .soc-ticket-reference-summary-value { color: var(--sx-navy) !important; font-size: 31px !important; line-height: 31px !important; font-weight: 800 !important; letter-spacing: -0.5px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-filterbar { flex: 0 0 82px !important; height: 82px !important; min-height: 82px !important; display: grid !important; grid-template-columns: 247px 170px 170px 170px 170px 170px 104px !important; gap: 16px !important; align-items: end !important; padding: 16px 14px 18px !important; border: 1px solid var(--sx-soft-line) !important; border-radius: 4px !important; background: #fff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-search, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-field { min-width: 0 !important; width: auto !important; display: grid !important; gap: 5px !important; color: #7b8aa7 !important; font-size: 12px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-search { position: relative !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-search > span { position: absolute !important; left: 13px !important; bottom: 11px !important; width: 18px !important; height: 18px !important; color: #60708f !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-search > span svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-reset svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(.soc-ticket-reference-search input, .soc-ticket-reference-field select, .soc-ticket-reference-reset, .soc-ticket-reference-page-size select) { height: 40px !important; border: 1px solid #dfe6f1 !important; border-radius: 5px !important; background: #fff !important; color: var(--sx-text) !important; font-size: 13px !important; font-weight: 600 !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-search input { width: 100% !important; padding: 0 12px 0 38px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-reset { min-width: 104px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main { position: relative !important; flex: 1 1 auto !important; min-height: 0 !important; margin-top: -8px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 484px !important; gap: 16px !important; align-items: stretch !important; height: auto !important; max-height: none !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main.is-detail-collapsed { grid-template-columns: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main.is-detail-collapsed .soc-ticket-reference-detail-card { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-card { border: 1px solid var(--sx-soft-line) !important; border-radius: 4px !important; background: #fff !important; box-shadow: none !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card { display: flex !important; flex-direction: column !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-table-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row { display: grid !important; grid-template-columns: 64px 142px 140px minmax(240px, 1fr) 112px 118px 136px !important; min-width: 952px !important; align-items: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-table-header { flex: 0 0 40px !important; height: 40px !important; padding: 0 16px !important; border-bottom: 1px solid var(--sx-soft-line) !important; background: #fafbfc !important; color: #52627a !important; font-size: 12px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; scrollbar-width: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list::-webkit-scrollbar { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row { min-height: 42px !important; padding: 0 16px !important; border: 0 !important; border-bottom: 1px solid #f0f3f8 !important; border-radius: 0 !important; background: #fff !important; color: #284161 !important; font-size: 12px !important; font-weight: 700 !important; box-shadow: none !important; outline: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row:hover { background: #fbfcff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-selected, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-selected:hover, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-important.is-selected { background: var(--sx-orange-bg) !important; outline: none !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-important, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-important:hover { background: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--importance { display: grid !important; place-items: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-star { display: inline-grid !important; place-items: center !important; width: 18px !important; height: 18px !important; color: #9aa8bd !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-star svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-star.is-important, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-star.is-important svg { color: var(--sx-red) !important; fill: currentColor !important; stroke: currentColor !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--site, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--type, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--time { color: #40567a !important; font-size: 12px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--title { color: #122f58 !important; font-size: 13px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--requested { text-align: center !important; color: #40567a !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--requested.has-count { color: var(--sx-orange) !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 56px !important; height: 24px !important; padding: 0 8px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-pill.status-pending { border: 1px solid #ffd6c4 !important; background: #fff2eb !important; color: var(--sx-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-pill.status-approved { border: 1px solid #cdeedc !important; background: #e9f8ef !important; color: var(--sx-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-pill.status-rejected, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-pill.status-unavailable { border: 1px solid #ffd0d0 !important; background: #fff0f0 !important; color: var(--sx-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-pill.status-cancelled { border: 1px solid #dfe6f1 !important; background: #f8fafc !important; color: #64748b !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-footer { flex: 0 0 56px !important; height: 56px !important; grid-template-columns: 1fr auto 1fr !important; border-top: 1px solid #f0f3f8 !important; background: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-page-btn { width: 32px !important; height: 32px !important; border-radius: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-page-btn.is-active { border-color: var(--sx-orange) !important; background: var(--sx-orange) !important; color: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-card { width: 484px !important; min-width: 484px !important; max-width: 484px !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; padding: 17px !important; overflow: auto !important; scrollbar-width: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-card::-webkit-scrollbar { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-head { display: flex !important; align-items: center !important; gap: 14px !important; min-height: 28px !important; margin: 0 0 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-type-badge { height: 28px !important; min-width: 70px !important; border-radius: 5px !important; border-color: rgba(255, 75, 22, 0.35) !important; background: var(--sx-orange-bg) !important; color: var(--sx-orange) !important; font-size: 13px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanelTitle { margin: 0 !important; color: #122f58 !important; font-size: 16px !important; line-height: 22px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-actions { height: 32px !important; min-height: 32px !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; margin: 0 0 18px !important; border: 1px solid var(--sx-line) !important; border-radius: 5px !important; overflow: hidden !important; background: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-actions .soc-ticket-reference-status-action { height: 30px !important; min-height: 30px !important; padding: 0 8px !important; border: 0 !important; border-right: 1px solid var(--sx-line) !important; border-radius: 0 !important; background: #fff !important; color: #485b78 !important; font-size: 12px !important; font-weight: 800 !important; opacity: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-actions .soc-ticket-reference-status-action:last-child { border-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-actions .soc-ticket-reference-status-action:is(.status-pending, .status-approved, .status-rejected, .status-unavailable, .status-cancelled):not(.is-active) { background: #fff !important; color: #485b78 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-action.is-active.status-pending { border: 1px solid #ffd6c4 !important; background: #fff2eb !important; color: var(--sx-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-action.is-active.status-approved { border: 1px solid #cdeedc !important; background: #e9f8ef !important; color: var(--sx-green) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-action.is-active.status-rejected, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-action.is-active.status-unavailable { border: 1px solid #ffd0d0 !important; background: #fff0f0 !important; color: var(--sx-red) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-action.is-active.status-cancelled { border: 1px solid #dfe6f1 !important; background: #f8fafc !important; color: #64748b !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-section { padding: 0 0 18px !important; margin: 0 0 18px !important; border: 0 !important; border-bottom: 1px solid var(--sx-soft-line) !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-section:last-of-type { margin-bottom: 0 !important; border-bottom: 0 !important; padding-bottom: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-pc-side-panel-section-title { margin: 0 0 14px !important; color: #122f58 !important; font-size: 14px !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(#ticketCommentPanelSummary, .soc-ticket-reference-basic-info, .soc-ticket-reference-timeline) { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-info-list { display: grid !important; gap: 8px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-info-list div { display: grid !important; grid-template-columns: 88px minmax(0, 1fr) !important; gap: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-info-list dt { color: #7b8aa7 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-info-list dd { margin: 0 !important; color: #486080 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-timeline-list { display: grid !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-timeline-list li { display: grid !important; grid-template-columns: 10px 48px minmax(0, 1fr) !important; gap: 10px !important; align-items: start !important; color: #486080 !important; font-size: 12px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-timeline-dot { width: 8px !important; height: 8px !important; margin-top: 5px !important; border-radius: 50% !important; background: #ff6b16 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-comments { min-height: 24px !important; display: flex !important; align-items: center !important; padding: 0 10px !important; border: 1px solid var(--sx-line) !important; border-radius: 5px !important; color: #7b8aa7 !important; font-size: 12px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-attachment-empty { height: 75px !important; display: grid !important; place-items: center !important; gap: 4px !important; border: 1px dashed #dce4ef !important; border-radius: 6px !important; color: #8a9ab8 !important; font-size: 13px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-attachment-empty span, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-attachment-empty svg { width: 26px !important; height: 26px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-attachment-empty p { margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-collapse-btn { position: absolute !important; right: calc(var(--sentrix-realtime-detail-rail-width, 424px) + (var(--sentrix-realtime-detail-gap, 16px) / 2)) !important; top: 50% !important; transform: translate(50%, -50%) !important; width: 32px !important; min-width: 32px !important; height: 32px !important; padding: 0 !important; display: grid !important; place-items: center !important; border-radius: 999px !important; border: 1px solid var(--sx-soft-line) !important; background: #fff !important; color: var(--sx-orange) !important; box-shadow: 0 4px 12px rgba(16, 43, 85, 0.12) !important; z-index: 20 !important; cursor: pointer !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-collapse-btn svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.3 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main.is-detail-collapsed .soc-ticket-reference-collapse-btn { right: 0 !important; } } /* Ticket reference detail density and collapse button hard locks. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-card { padding: 14px 17px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-head { margin-bottom: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-actions { margin-bottom: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-section { display: block !important; padding: 0 0 10px !important; margin: 0 0 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-pc-side-panel-section-title { margin-bottom: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-info-list { gap: 5px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-info-list div { min-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-info-list dt, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-info-list dd { line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-timeline-list { gap: 5px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-timeline-list li { min-height: 16px !important; line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-timeline-dot { margin-top: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-comments { min-height: 24px !important; height: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-attachment-empty { height: 75px !important; min-height: 75px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-collapse-btn { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; line-height: 1 !important; } } /* Situation room interaction and typography refinement (2026-04-25). */ @media (min-width: 1024px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon { border: 0 !important; background: transparent !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon svg { stroke-width: 1.75 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-label { font-weight: 600 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-value { font-weight: 700 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-header { color: #60708f !important; font-weight: 600 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row { font-weight: 500 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row.is-selected, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row.is-selected:hover, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row.is-critical-incident.is-selected, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row.is-critical-incident.is-selected:hover { background: #fff2eb !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .incident-title { font-weight: 700 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .incident-type, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .incident-location, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .incident-created-at { font-weight: 500 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row .incident-severity.eci, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-basic-row dd.eci { font-weight: 700 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .status-badge, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-important-pill { font-weight: 600 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-footer, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #situationIncidentTotalCount { font-weight: 500 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanelTitle { font-weight: 700 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-pc-side-panel-section-title { font-weight: 700 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-basic-row dt { font-weight: 600 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-basic-row dd { font-weight: 500 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-collapse-btn { right: calc(var(--sentrix-realtime-detail-rail-width, 424px) + (var(--sentrix-realtime-detail-gap, 16px) / 2)) !important; transform: translate(0, -50%) !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-collapse-btn svg { stroke-width: 2 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.is-detail-collapsed .soc-situation-collapse-btn { right: 0 !important; transform: translate(0, -50%) !important; } } /* Ticket/situation action parity refinement (2026-04-25). */ @media (min-width: 1024px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-star, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-star { appearance: none !important; -webkit-appearance: none !important; width: 20px !important; height: 20px !important; min-width: 20px !important; padding: 0 !important; display: inline-grid !important; place-items: center !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; color: #9aa8bd !important; cursor: pointer !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-star:hover, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-star:hover { color: var(--sx-orange) !important; background: #fff2eb !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-star.is-important, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-star.is-important { color: var(--sx-red) !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-star:disabled, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-star:disabled { cursor: wait !important; opacity: 0.72 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-collapse-btn { right: calc(var(--sentrix-realtime-detail-rail-width, 424px) + (var(--sentrix-realtime-detail-gap, 16px) / 2)) !important; transform: translate(50%, -50%) !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.is-detail-collapsed .soc-situation-collapse-btn { right: 0 !important; transform: translate(0, -50%) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-collapse-btn { right: calc(var(--sentrix-realtime-detail-rail-width, 424px) + (var(--sentrix-realtime-detail-gap, 16px) / 2)) !important; transform: translate(50%, -50%) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main.is-detail-collapsed .soc-ticket-reference-collapse-btn { right: 0 !important; transform: translate(0, -50%) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .ticket-stat-card .stat-icon svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-collapse-btn svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-attachment-empty svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-star svg { stroke-width: 1.75 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .ticket-stat-card .stat-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .ticket-stat-card .summary-card-label { font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .ticket-stat-card .stat-value, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .ticket-stat-card .summary-card-value { font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-table-header { color: #60708f !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row { font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--site, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--type, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--time { font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--title { font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--requested { font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--requested.has-count { font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-pill, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-action { font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-type-badge, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanelTitle, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-pc-side-panel-section-title { font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-info-list dt { font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-info-list dd, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-timeline-list li, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-comments, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-footer, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-total { font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-attachment-empty { font-weight: 600 !important; } } /* Final precise overrides for current desktop DOM. */ @media (min-width: 1024px) { #alertsView.soc-situation-reference:not(.hidden) .soc-situation-collapse-btn, #ticketsView:not(.hidden) .soc-ticket-reference-collapse-btn { right: calc(var(--sentrix-realtime-detail-rail-width, 424px) + (var(--sentrix-realtime-detail-gap, 16px) / 2)) !important; transform: translate(50%, -50%) !important; } #ticketsView:not(.hidden) .soc-ticket-reference-status-action { font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-actions .soc-ticket-reference-status-action, body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView:not(.hidden) .soc-ticket-reference-status-actions .soc-ticket-reference-status-action { font-weight: 600 !important; } } /* Home live-alert motion and header compaction (2026-04-25). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .container.admin-layout { padding-top: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #dashboardPanel { padding-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-dashboard { gap: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-header { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-grid { overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile.is-new-incident { animation: sentrixHomeIncidentCardEnter 520ms cubic-bezier(0.19, 1, 0.22, 1) both !important; will-change: transform, opacity !important; } } @keyframes sentrixHomeIncidentCardEnter { 0% { opacity: 0; transform: translateX(-36px); } 70% { opacity: 1; transform: translateX(4px); } 100% { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile.is-new-incident { animation: none !important; transform: none !important; } } /* Ops support title alignment and canvas expansion (2026-04-25). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #topbarBreadcrumb { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-left { gap: 0 !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-current-title { margin: 0 !important; padding: 0 !important; border-left: 0 !important; color: var(--sx-navy, #0b2d5c) !important; font-size: 20px !important; line-height: 24px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .container.admin-layout { padding-left: 0 !important; padding-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #dashboardPanel { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) { padding: 24px 24px 24px !important; overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) #opsSupportReferenceRoot { width: 100% !important; max-width: none !important; margin: 0 !important; } } @media (min-width: 1600px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) { padding-top: 18px !important; padding-left: 18px !important; padding-right: 18px !important; } } /* Situation transient alert lane guard (2026-04-25). Keeps status/toast cards from covering the right-side detail panel after route switches. */ @media (min-width: 1024px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #alerts { position: fixed !important; top: 88px !important; right: calc(24px + 416px + 16px) !important; z-index: 30 !important; display: grid !important; gap: 8px !important; width: min(420px, calc(100vw - 214px - 416px - 96px)) !important; min-width: min(320px, calc(100vw - 214px - 416px - 96px)) !important; max-width: 420px !important; margin: 0 !important; overflow: visible !important; pointer-events: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #alerts:empty { display: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #alerts .alert-item { display: grid !important; grid-template-columns: max-content minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: break-word !important; pointer-events: auto !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #alerts .alert-time { min-width: max-content !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #alerts .alert-text, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #alerts .alert-text.notif-text { display: block !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: break-word !important; line-break: auto !important; hyphens: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-detail-card { position: relative !important; z-index: 40 !important; } } /* Global sidebar parity and home alert density (2026-04-25). The situation-room shell is the desktop baseline; Home must not keep the older 260px rail. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-home-sidebar-w: 214px !important; --soc-desktop-sidebar-width: 214px !important; --soc-desktop-sidebar-expanded-width: 214px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel { width: 214px !important; min-width: 214px !important; max-width: 214px !important; flex-basis: 214px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar { width: calc(100vw - 214px) !important; max-width: calc(100vw - 214px) !important; margin-left: 214px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout { width: calc(100vw - 214px) !important; max-width: calc(100vw - 214px) !important; margin-left: 214px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .container.admin-layout, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #dashboardPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #sentrixHomeDashboardRoot { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-dashboard { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 18px 18px 42px !important; gap: 16px !important; overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile { min-width: 0 !important; min-height: 88px !important; grid-template-columns: 34px minmax(0, 1fr) auto !important; gap: 10px !important; padding: 13px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon { width: 34px !important; height: 34px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon svg { width: 20px !important; height: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-main, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-title-row { min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-title-row { gap: 7px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-label { min-height: 20px !important; padding: 0 8px !important; font-size: 11px !important; line-height: 15px !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-title-row strong { font-size: 14px !important; line-height: 19px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-main p { font-size: 12px !important; line-height: 17px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-site, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile time { font-size: 12px !important; line-height: 17px !important; } } /* Situation KPI safe inset (2026-04-25). Keep the reference-height cards, but prevent labels from pinning to the top border. */ @media (min-width: 1024px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-grid { padding-top: 1px !important; overflow: visible !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card.is-active, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:first-child { box-sizing: border-box !important; min-height: 106px !important; height: 106px !important; grid-template-columns: 48px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-content: center !important; align-items: center !important; row-gap: 5px !important; column-gap: 26px !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: visible !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: center !important; justify-self: center !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-label { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; margin: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-value { grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; margin: 0 !important; } } @media (min-width: 1024px) and (max-width: 1439px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 1023px) { html body:not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* Situation empty-state reference (2026-04-25). The table body owns the empty result panel while realtime data/filter logic stays unchanged. */ html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference #alertsTicketSection { display: none !important; } @media (min-width: 1024px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-card { display: flex !important; flex-direction: column !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.is-empty-result { grid-template-columns: minmax(0, 1fr) !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.is-empty-result .soc-situation-detail-card { display: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.is-empty-result .soc-situation-collapse-btn { right: -16px !important; transform: translate(0, -50%) !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-alerts-feed-section { display: flex !important; flex-direction: column !important; min-height: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-state.hidden { display: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-state:not(.hidden) { flex: 1 1 auto !important; min-height: clamp(300px, calc(100dvh - 432px), 650px) !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 48px 24px 54px !important; border: 0 !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; text-align: center !important; color: #102b55 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-illustration { width: 176px !important; height: 176px !important; margin: 0 0 15px !important; display: grid !important; place-items: center !important; color: #8ca1c4 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-illustration svg { width: 176px !important; height: 176px !important; overflow: visible !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-orb { fill: #eef3fb !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference :is(.soc-situation-empty-ground, .soc-situation-empty-clip, .soc-situation-empty-paper, .soc-situation-empty-tab, .soc-situation-empty-line, .soc-situation-empty-glass, .soc-situation-empty-handle, .soc-situation-empty-dot, .soc-situation-empty-spark) { fill: none !important; stroke: #8ba2c5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference :is(.soc-situation-empty-clip, .soc-situation-empty-paper, .soc-situation-empty-tab) { stroke: #b7c7e0 !important; stroke-width: 3 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-paper { fill: #ffffff !important; opacity: 0.9 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-line { stroke: #c6d2e6 !important; stroke-width: 3 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference :is(.soc-situation-empty-glass, .soc-situation-empty-handle) { stroke: #7f95ba !important; stroke-width: 6 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference :is(.soc-situation-empty-dot, .soc-situation-empty-spark, .soc-situation-empty-ground) { stroke: #9cafcf !important; stroke-width: 3 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-title { margin: 0 !important; color: #0b2d5c !important; font-size: 21px !important; line-height: 29px !important; font-weight: 700 !important; letter-spacing: -0.2px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-copy { margin: 17px 0 0 !important; color: #7c8daa !important; font-size: 15px !important; line-height: 27px !important; font-weight: 600 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-reset-btn { appearance: none !important; -webkit-appearance: none !important; min-width: 128px !important; height: 44px !important; margin: 29px 0 0 !important; padding: 0 23px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #dfe6f1 !important; border-radius: 7px !important; background: #ffffff !important; color: #102b55 !important; box-shadow: none !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; cursor: pointer !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-reset-btn:hover { border-color: #cbd7e8 !important; background: #fbfcff !important; } } @media (min-width: 1024px) and (max-height: 820px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-state:not(.hidden) { min-height: clamp(260px, calc(100dvh - 432px), 650px) !important; padding: 22px 24px 26px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-illustration, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-illustration svg { width: 132px !important; height: 132px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-illustration { margin-bottom: 8px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-copy { margin-top: 10px !important; font-size: 14px !important; line-height: 24px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-reset-btn { height: 40px !important; margin-top: 16px !important; } } @media (max-width: 1023px) { body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-empty-state:not(.hidden) { min-height: 360px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 40px 20px !important; text-align: center !important; background: #ffffff !important; } body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-empty-illustration { width: 140px !important; height: 140px !important; } body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-empty-illustration svg { width: 140px !important; height: 140px !important; } body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-empty-title { color: #0b2d5c !important; font-size: 19px !important; line-height: 27px !important; font-weight: 700 !important; } body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-empty-copy { margin: 14px 0 0 !important; color: #7c8daa !important; font-size: 14px !important; line-height: 24px !important; font-weight: 600 !important; } body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-empty-reset-btn { min-width: 124px !important; height: 42px !important; margin-top: 24px !important; border: 1px solid #dfe6f1 !important; border-radius: 7px !important; background: #ffffff !important; color: #102b55 !important; font-size: 14px !important; font-weight: 700 !important; } } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #alertsTicketSection.soc-alerts-feed-section { display: none !important; } /* Ticket empty-state reference (2026-04-25). Empty result rendering is isolated to presentation state; ticket data/realtime flow is unchanged. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main.is-empty-result { grid-template-columns: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main.is-empty-result .soc-ticket-reference-detail-card { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main.is-empty-result .soc-ticket-reference-collapse-btn { right: -16px !important; transform: translate(0, -50%) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result { min-height: clamp(500px, calc(100dvh - 350px), 780px) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result .soc-ticket-reference-table-header { grid-template-columns: 128px 180px 220px minmax(280px, 1fr) 132px 160px !important; min-width: 0 !important; height: 58px !important; flex: 0 0 58px !important; padding: 0 42px !important; color: #7c8daa !important; background: #fff !important; border-bottom: 1px solid #e8edf5 !important; font-size: 13px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result .soc-ticket-reference-table-header > span.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result .soc-ticket-reference-list { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-empty.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-empty:not(.hidden) { flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; margin: 0 !important; padding: 58px 24px 64px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; text-align: center !important; color: #102b55 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-illustration { width: 196px !important; height: 168px !important; margin: 0 0 18px !important; display: grid !important; place-items: center !important; color: #8ca1c4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-illustration svg { width: 196px !important; height: 168px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-orb { fill: #eef3fb !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(.soc-ticket-empty-ground, .soc-ticket-empty-ticket, .soc-ticket-empty-clip, .soc-ticket-empty-paper, .soc-ticket-empty-tab, .soc-ticket-empty-line, .soc-ticket-empty-glass, .soc-ticket-empty-handle, .soc-ticket-empty-dot, .soc-ticket-empty-spark) { fill: none !important; stroke: #8ba2c5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(.soc-ticket-empty-ticket, .soc-ticket-empty-clip, .soc-ticket-empty-paper, .soc-ticket-empty-tab) { stroke: #b7c7e0 !important; stroke-width: 3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-paper { fill: #fff !important; opacity: 0.92 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-line { stroke: #c6d2e6 !important; stroke-width: 3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(.soc-ticket-empty-glass, .soc-ticket-empty-handle) { stroke: #7f95ba !important; stroke-width: 6 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(.soc-ticket-empty-dot, .soc-ticket-empty-spark, .soc-ticket-empty-ground) { stroke: #9cafcf !important; stroke-width: 3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-title { margin: 0 !important; color: #0b2d5c !important; font-size: 22px !important; line-height: 30px !important; font-weight: 700 !important; letter-spacing: -0.2px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-copy { margin: 17px 0 0 !important; color: #7c8daa !important; font-size: 15px !important; line-height: 27px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-reset-btn { appearance: none !important; -webkit-appearance: none !important; min-width: 150px !important; height: 44px !important; margin: 29px 0 0 !important; padding: 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #a9b9d0 !important; border-radius: 6px !important; background: #fff !important; color: #102b55 !important; box-shadow: none !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; cursor: pointer !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-reset-btn:hover { border-color: #7f90ad !important; background: #fbfcff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result .soc-ticket-reference-list-footer { flex: 0 0 86px !important; height: 86px !important; padding: 0 26px !important; border-top: 1px solid #e8edf5 !important; background: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result .soc-ticket-reference-total { color: #0b2d5c !important; font-size: 15px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result .soc-ticket-reference-page-btn { width: 45px !important; height: 45px !important; border-radius: 8px !important; font-size: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result .soc-ticket-reference-page-btn.is-active { background: #ff4b16 !important; border-color: #ff4b16 !important; color: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result .soc-ticket-reference-page-size select { width: 158px !important; height: 45px !important; color: #102b55 !important; font-size: 15px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView:has(.soc-ticket-reference-main.is-empty-result) .soc-ticket-reference-filterbar { min-height: 131px !important; height: 131px !important; display: grid !important; grid-template-columns: 322px 218px 218px 224px 224px !important; align-items: center !important; gap: 24px !important; padding: 25px 25px 23px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView:has(.soc-ticket-reference-main.is-empty-result) .soc-ticket-reference-search { order: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView:has(.soc-ticket-reference-main.is-empty-result) [data-ticket-reference-filter-field="period"] { order: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView:has(.soc-ticket-reference-main.is-empty-result) [data-ticket-reference-filter-field="type"] { order: 4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView:has(.soc-ticket-reference-main.is-empty-result) [data-ticket-reference-filter-field="status"] { order: 5 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView:has(.soc-ticket-reference-main.is-empty-result) [data-ticket-reference-filter-field="site"] { order: 3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView:has(.soc-ticket-reference-main.is-empty-result) [data-ticket-reference-filter-field="request-count"], html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView:has(.soc-ticket-reference-main.is-empty-result) .soc-ticket-reference-reset { display: none !important; } } @media (min-width: 1024px) and (max-height: 820px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result { min-height: clamp(420px, calc(100dvh - 288px), 650px) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-empty:not(.hidden) { padding: 28px 24px 34px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-illustration, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-illustration svg { width: 150px !important; height: 132px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-illustration { margin-bottom: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-copy { margin-top: 10px !important; line-height: 24px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-reset-btn { height: 40px !important; margin-top: 16px !important; } } @media (max-width: 1023px) { body:not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-empty:not(.hidden) { min-height: 360px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 40px 20px !important; text-align: center !important; background: #fff !important; } body:not(.soc-auth-shell-active) #ticketsView .soc-ticket-empty-illustration, body:not(.soc-auth-shell-active) #ticketsView .soc-ticket-empty-illustration svg { width: 150px !important; height: 132px !important; } body:not(.soc-auth-shell-active) #ticketsView .soc-ticket-empty-title { color: #0b2d5c !important; font-size: 19px !important; line-height: 27px !important; font-weight: 700 !important; } body:not(.soc-auth-shell-active) #ticketsView .soc-ticket-empty-copy { margin: 14px 0 0 !important; color: #7c8daa !important; font-size: 14px !important; line-height: 24px !important; font-weight: 600 !important; } body:not(.soc-auth-shell-active) #ticketsView .soc-ticket-empty-reset-btn { min-width: 136px !important; height: 42px !important; margin-top: 24px !important; border: 1px solid #dfe6f1 !important; border-radius: 7px !important; background: #fff !important; color: #102b55 !important; font-size: 14px !important; font-weight: 700 !important; } } /* Current-turn dashboard navigation and density fixes (2026-04-26). Keep backend/realtime data intact while normalizing the visual shell. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #mobileAdminShortcutList { gap: 1px !important; padding: 0 14px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-menu-section + .soc-menu-section { margin-top: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-menu-section-label { margin: 0 0 8px !important; padding: 0 8px !important; font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-menu-sub-item, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-menu-group-toggle, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .mobile-nav-actions .soc-menu-item { min-height: 36px !important; height: 36px !important; gap: 13px !important; padding: 0 14px !important; border-radius: 7px !important; font-size: 14px !important; line-height: 18px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-menu-sub-item::before { top: 7px !important; bottom: 7px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-menu-sub-item-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-menu-group-icon { width: 19px !important; height: 19px !important; flex-basis: 19px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(.soc-menu-sub-item-icon, .soc-menu-group-icon, .soc-menu-group-chevron) svg { width: 19px !important; height: 19px !important; stroke-width: 1.75 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .mobile-nav-actions { padding: 12px 14px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions .soc-menu-item { font-size: 14px !important; line-height: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section-label { font-size: 12px !important; line-height: 17px !important; font-weight: 700 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-toggle, .soc-menu-sub-item), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions .soc-menu-item { min-height: 36px !important; height: 36px !important; font-size: 14px !important; line-height: 18px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-dashboard { gap: 14px !important; padding: 14px 16px 34px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-grid { gap: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card { min-height: 112px !important; gap: 15px !important; padding: 14px 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon { width: 52px !important; height: 52px !important; flex-basis: 52px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon svg { width: 25px !important; height: 25px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-copy { gap: 5px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-label { font-size: 14px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-value { font-size: 30px !important; line-height: 34px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-meta { font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-card { height: 92px !important; min-height: 92px !important; align-items: center !important; padding: 14px 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-search-field, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-field { align-self: center !important; display: grid !important; gap: 6px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-search-field { padding-top: 21px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-search-icon { bottom: 11px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-filterbar { height: 92px !important; min-height: 92px !important; align-items: center !important; padding: 14px 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-search, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-field { align-self: center !important; gap: 6px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-search { padding-top: 21px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-reset { align-self: center !important; margin-top: 21px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-pressing, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-selected.is-pressing { background: var(--sx-orange-bg) !important; transition: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-illustration, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-illustration svg { width: 141px !important; height: 141px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-illustration { margin-bottom: 12px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-title { font-size: 17px !important; line-height: 24px !important; font-weight: 700 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-copy { margin-top: 12px !important; font-size: 12px !important; line-height: 22px !important; font-weight: 500 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-reset-btn { height: 38px !important; min-width: 116px !important; margin-top: 22px !important; font-size: 13px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .incident-title { display: flex !important; align-items: baseline !important; gap: 6px !important; min-width: 0 !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .incident-title-tag { flex: 0 0 auto !important; color: #7c8daa !important; font-size: 10px !important; line-height: 1 !important; font-weight: 600 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .incident-title-text { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } /* Global desktop sidebar lock (2026-04-26). The sidebar must not shift when switching Home/Analytics/People vs Situation/Tickets. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel { width: 214px !important; min-width: 214px !important; max-width: 214px !important; background: #ffffff !important; border-right: 1px solid var(--sx-line, #e8edf5) !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-sidebar-header { height: 76px !important; min-height: 76px !important; padding: 26px 0 0 27px !important; border: 0 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-sidebar-logo-img { width: 152px !important; height: auto !important; max-height: 29px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage { padding: 0 13px 12px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList { gap: 1px !important; padding: 0 0 12px !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList::-webkit-scrollbar { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section + .soc-menu-section { margin-top: 21px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section-items { gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section-label { margin: 12px 2px 7px !important; padding: 0 !important; color: #111827 !important; font-size: 12px !important; line-height: 17px !important; font-weight: 700 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-toggle, .soc-menu-sub-item) { width: 100% !important; min-height: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #111827 !important; grid-template-columns: 22px minmax(0, 1fr) !important; gap: 14px !important; font-size: 14px !important; line-height: 18px !important; font-weight: 700 !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-group-toggle { grid-template-columns: 22px minmax(0, 1fr) 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label) { color: #111827 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) { width: 19px !important; min-width: 19px !important; height: 19px !important; color: #111827 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) :is(svg, img, .sentrix-theme-icon) { width: 19px !important; height: 19px !important; transform: none !important; color: #111827 !important; stroke: currentColor !important; stroke-width: 1.9 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-sub-item.is-active { position: relative !important; background: #fff0eb !important; color: #111827 !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-sub-item.is-active :is(.soc-menu-sub-item-label, .soc-menu-sub-item-icon) { color: #111827 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-sub-item.is-active::before { display: block !important; left: 0 !important; top: 7px !important; bottom: auto !important; width: 3px !important; height: 22px !important; border-radius: 999px !important; background: var(--sx-orange, #ff4b16) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions { padding: 14px 18px 16px !important; background: #ffffff !important; border-top: 1px solid var(--sx-line, #e8edf5) !important; } } /* Final sidebar color lock: page-specific Situation/Ticket selectors use :has(), so keep this last. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList .soc-menu-section-label, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList .soc-menu-section-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList .soc-menu-section-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#reportPanel:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList .soc-menu-section-label { color: #111827 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-toggle, .soc-menu-sub-item, .soc-menu-group-label, .soc-menu-sub-item-label, .soc-menu-group-icon, .soc-menu-sub-item-icon, .soc-menu-group-chevron, svg), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions :is(.soc-menu-item, .soc-menu-item-label, .soc-menu-item-icon, svg), html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-toggle, .soc-menu-sub-item, .soc-menu-group-label, .soc-menu-sub-item-label, .soc-menu-group-icon, .soc-menu-sub-item-icon, .soc-menu-group-chevron, svg), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-toggle, .soc-menu-sub-item, .soc-menu-group-label, .soc-menu-sub-item-label, .soc-menu-group-icon, .soc-menu-sub-item-icon, .soc-menu-group-chevron, svg) { color: #111827 !important; stroke: currentColor !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList .soc-menu-sub-item.is-active :is(.soc-menu-sub-item-label, .soc-menu-sub-item-icon, svg), html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList .soc-menu-sub-item.is-active :is(.soc-menu-sub-item-label, .soc-menu-sub-item-icon, svg), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList .soc-menu-sub-item.is-active :is(.soc-menu-sub-item-label, .soc-menu-sub-item-icon, svg) { color: #111827 !important; stroke: currentColor !important; } } /* Final equal-width summary card lock: keep Situation/Ticket KPI rows flush with the sheet width. */ @media (min-width: 1024px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid.soc-situation-kpi-grid { width: 100% !important; max-width: none !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 22px !important; overflow: visible !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card.is-active, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:first-child { width: 100% !important; min-width: 0 !important; max-width: none !important; justify-self: stretch !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummarySkeleton.soc-summary-grid-skeleton, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummarySkeleton.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-grid { width: 100% !important; max-width: none !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 22px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-card.is-active, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-card:first-child { width: 100% !important; min-width: 0 !important; max-width: none !important; justify-self: stretch !important; } } /* Final ops-support request detail reference lock: restore readable title/date and no-wrap timeline. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { padding: 24px 28px 0 !important; border-radius: 12px !important; background: #ffffff !important; overflow-y: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-head { min-height: 54px !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; margin: 0 0 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-head h3 { margin: 8px 0 0 !important; font-size: 18px !important; line-height: 26px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-actions .ops-ref-detail-icon-btn { width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; border-radius: 8px !important; font-size: 22px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-title-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; gap: 14px !important; margin: 12px 0 24px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-title-row > div { min-width: 0 !important; display: grid !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-date { margin: 0 !important; color: #667085 !important; font-size: 16px !important; line-height: 24px !important; font-weight: 500 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-title-row h4 { margin: 0 !important; color: #111827 !important; font-size: 24px !important; line-height: 32px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; word-break: keep-all !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-title-row .support-status-chip { margin-top: 36px !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis { gap: 14px !important; margin: 0 0 24px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article { position: relative !important; min-height: 92px !important; display: grid !important; align-content: center !important; justify-items: start !important; gap: 7px !important; padding: 16px 18px 16px 72px !important; border-radius: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article::before { content: "" !important; position: absolute !important; left: 22px !important; top: 50% !important; width: 38px !important; height: 38px !important; border-radius: 999px !important; transform: translateY(-50%) !important; background: color-mix(in srgb, currentColor 11%, #ffffff) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article span { font-size: 15px !important; line-height: 20px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article strong { font-size: 27px !important; line-height: 32px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta { margin: 2px 0 22px !important; border-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta div { min-height: 52px !important; display: grid !important; grid-template-columns: 132px minmax(0, 1fr) !important; align-items: center !important; gap: 18px !important; border-bottom: 1px solid var(--ops-ref-line, #e5e7eb) !important; color: #111827 !important; font-size: 16px !important; line-height: 24px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta dt { color: #667085 !important; font-size: 15px !important; line-height: 22px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta dd { color: #1f2937 !important; font-size: 17px !important; line-height: 24px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers { margin-top: 18px !important; padding-top: 0 !important; border-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers-head { min-height: 62px !important; padding: 0 18px !important; border: 1px solid var(--ops-ref-line, #e5e7eb) !important; border-bottom: 0 !important; border-radius: 10px 10px 0 0 !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers h5 { margin: 0 !important; font-size: 17px !important; line-height: 24px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-progress { margin-top: 4px !important; font-size: 13px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-head-actions { display: inline-flex !important; align-items: center !important; gap: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-add-quick-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 16px !important; border: 1px solid var(--ops-ref-line, #e5e7eb) !important; border-radius: 8px !important; background: #ffffff !important; color: #1f2937 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers ul { display: grid !important; gap: 0 !important; margin: 0 !important; border: 1px solid var(--ops-ref-line, #e5e7eb) !important; border-radius: 0 0 10px 10px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers li { min-height: 78px !important; display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 18px !important; gap: 18px !important; align-items: center !important; padding: 0 22px !important; border: 0 !important; border-top: 1px solid var(--ops-ref-line, #e5e7eb) !important; border-radius: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers li:first-child { border-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-avatar { width: 38px !important; height: 38px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-line { color: #111827 !important; font-size: 16px !important; line-height: 24px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history { margin-top: 28px !important; padding-top: 0 !important; border-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history h5 { margin: 0 0 18px !important; font-size: 18px !important; line-height: 26px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history ol { gap: 18px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li { grid-template-columns: 18px 156px minmax(0, 1fr) !important; gap: 18px !important; align-items: center !important; min-height: 28px !important; padding-block: 0 !important; color: #667085 !important; font-size: 15px !important; line-height: 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li::before { left: 5px !important; top: -23px !important; bottom: -23px !important; background: var(--ops-ref-line, #e5e7eb) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li:first-child::before { top: 50% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li:last-child::before { bottom: 50% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-history-dot, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li i { width: 10px !important; height: 10px !important; box-shadow: 0 0 0 4px #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-history-time, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li > span { color: #667085 !important; font-weight: 500 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li strong { color: #667085 !important; font-size: 15px !important; line-height: 22px !important; font-weight: 600 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history button { min-height: 32px !important; margin-top: 14px !important; font-size: 13px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dl div { grid-template-columns: 132px minmax(0, 1fr) !important; gap: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer { margin: auto -28px 0 !important; padding: 18px 28px 22px !important; border-top: 1px solid var(--ops-ref-line, #e5e7eb) !important; background: #ffffff !important; } } /* Ops support detail rail density repair: keep the right request detail panel compact and icon-complete. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { padding: 18px 18px 0 !important; border-radius: 10px !important; max-width: none !important; overflow-y: auto !important; scrollbar-width: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel::-webkit-scrollbar { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-head { min-height: 40px !important; align-items: flex-start !important; margin: 0 0 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-head h3 { margin: 7px 0 0 !important; color: var(--sentrix-support-reference-text, #111827) !important; font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-actions .ops-ref-detail-icon-btn { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 8px !important; font-size: 20px !important; line-height: 1 !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-title-row { gap: 10px !important; margin: 0 0 16px !important; align-items: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-title-row > div { gap: 7px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-date { color: var(--sentrix-support-reference-muted, #667085) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-title-row h4 { color: var(--sentrix-support-reference-text, #111827) !important; font-size: 21px !important; line-height: 28px !important; font-weight: 750 !important; letter-spacing: 0 !important; word-break: keep-all !important; overflow-wrap: normal !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-title-row .support-status-chip { margin-top: 7px !important; min-height: 28px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 12px !important; line-height: 18px !important; font-weight: 700 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis { gap: 10px !important; margin: 0 0 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article { position: relative !important; min-height: 78px !important; display: grid !important; align-content: center !important; justify-items: start !important; gap: 5px !important; padding: 12px 12px 12px 50px !important; border-radius: 9px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article::before { content: none !important; display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-kpi-icon { position: absolute !important; left: 13px !important; top: 50% !important; width: 30px !important; height: 30px !important; display: grid !important; flex: 0 0 auto !important; place-items: center !important; border-radius: 999px !important; transform: translateY(-50%) !important; background: color-mix(in srgb, currentColor 12%, #ffffff) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-kpi-icon svg { width: 17px !important; height: 17px !important; display: block !important; stroke-width: 1.9 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article span { color: var(--sentrix-support-reference-text, #111827) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 650 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article strong { font-size: 23px !important; line-height: 27px !important; font-weight: 750 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-requested, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-requested .ops-ref-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-requested strong { color: var(--sentrix-support-reference-orange, #ff6a00) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-self, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-self .ops-ref-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-self strong { color: var(--sentrix-support-reference-blue, #2f6bff) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article:is(.is-confirmed, .is-over), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article:is(.is-confirmed, .is-over) .ops-ref-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article:is(.is-confirmed, .is-over) strong { color: var(--sentrix-support-reference-green, #18a36b) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta { margin: 0 0 16px !important; border-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta div { min-height: 38px !important; display: grid !important; grid-template-columns: 82px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; border-bottom: 1px solid var(--ops-ref-line, #e5e7eb) !important; font-size: 14px !important; line-height: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta dt { color: var(--sentrix-support-reference-muted, #667085) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta dd { color: var(--sentrix-support-reference-text, #1f2937) !important; min-width: 0 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers { margin-top: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers-head { min-height: 50px !important; padding: 0 14px !important; border-radius: 9px 9px 0 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers h5 { font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-progress { margin-top: 2px !important; font-size: 12px !important; line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-head-actions { gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-add-quick-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-edit-btn { height: 34px !important; min-height: 34px !important; padding: 0 13px !important; border-radius: 7px !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-workers li { min-height: 56px !important; grid-template-columns: 34px minmax(0, 1fr) 16px !important; gap: 12px !important; padding: 0 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-avatar { width: 32px !important; height: 32px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-worker-line { font-size: 14px !important; line-height: 20px !important; font-weight: 650 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history { margin-top: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history h5, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit h5 { margin: 0 0 12px !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history ol { gap: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li { min-height: 24px !important; grid-template-columns: 14px 116px minmax(0, 1fr) !important; gap: 10px !important; font-size: 13px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li::before { left: 5px !important; top: -16px !important; bottom: -16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-history-dot, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li i { width: 9px !important; height: 9px !important; box-shadow: 0 0 0 3px #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-history-time, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li > span { color: var(--sentrix-support-reference-muted, #667085) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-history li strong { color: var(--sentrix-support-reference-muted, #667085) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit { margin-top: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dl div { min-height: 34px !important; grid-template-columns: 82px minmax(0, 1fr) !important; gap: 10px !important; align-items: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dt { font-size: 12px !important; line-height: 18px !important; font-weight: 500 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dd { min-width: 0 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 400 !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer { margin: auto -18px 0 !important; padding: 14px 18px 18px !important; grid-template-columns: minmax(110px, 1fr) 68px minmax(110px, 1fr) !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-footer button { min-height: 38px !important; height: 38px !important; border-radius: 7px !important; font-size: 13px !important; line-height: 18px !important; font-weight: 650 !important; } } /* ===== Analytics dashboard reference parity final override (2026-04-26) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView { background: #f7f8fb !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsDashboardV2 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 22px 28px 30px !important; box-sizing: border-box !important; background: #f7f8fb !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-v2-header { align-items: flex-start !important; justify-content: space-between !important; gap: 18px !important; margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-workspace-page-title { color: #111827 !important; font-size: 27px !important; line-height: 34px !important; font-weight: 760 !important; letter-spacing: -0.02em !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeaderSummary { margin-top: 6px !important; color: #64748b !important; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-v2-toolbar { align-items: flex-end !important; justify-content: flex-end !important; gap: 12px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-v2-toolbar-group { display: grid !important; gap: 6px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-v2-toolbar-label { color: #0f172a !important; font-size: 11px !important; line-height: 14px !important; font-weight: 650 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRangeQuick { display: flex !important; gap: 7px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRangeQuick [data-range="custom"] { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRangeQuick button, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsSitePickerButton, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(#analyticsExportBtn, #analyticsRefreshBtn) { height: 38px !important; min-height: 38px !important; border-radius: 8px !important; border: 1px solid #dfe6f1 !important; background: #ffffff !important; color: #172b4d !important; box-shadow: none !important; font-size: 12px !important; line-height: 16px !important; font-weight: 650 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRangeQuick button { width: 48px !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRangeQuick button.active { border-color: #ff6a00 !important; background: #fff7f0 !important; color: #ff5c00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsSitePickerButton { width: 180px !important; justify-content: space-between !important; padding: 0 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRefreshBtn { width: 82px !important; border-color: #ff6a00 !important; background: #ff6a00 !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsExportBtn { width: 82px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-board { display: grid !important; gap: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-board-card { border: 1px solid #e5eaf2 !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-board-card-head { min-height: 0 !important; margin: 0 !important; padding: 18px 20px 10px !important; border: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-board-card-head h3 { color: #111827 !important; font-size: 17px !important; line-height: 22px !important; font-weight: 720 !important; letter-spacing: -0.01em !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRow { display: grid !important; grid-template-columns: minmax(420px, 1.06fr) minmax(340px, 0.9fr) minmax(390px, 1fr) !important; gap: 16px !important; align-items: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(#analyticsHeroRiskCard, #analyticsHeroKpiRack, #analyticsHeroHealthCard) { min-height: 288px !important; height: 288px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard { border-color: transparent !important; background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.18), transparent 27%), linear-gradient(137deg, #5aa8ff 0%, #2e82ff 43%, #126df5 100%) !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-board-card-body--risk { padding: 8px 22px 22px !important; height: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-hero-core { display: grid !important; grid-template-columns: 178px minmax(0, 1fr) !important; align-items: center !important; gap: 22px !important; height: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-wrap, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge { width: 168px !important; height: 168px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard :is(.soc-analytics-v2-risk-gauge-track, .soc-analytics-v2-risk-gauge-arc) { stroke-width: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track { stroke: rgba(255, 255, 255, 0.28) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc { stroke: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsRiskScoreValue { color: #ffffff !important; font-size: 43px !important; line-height: 1 !important; font-weight: 760 !important; letter-spacing: -0.03em !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroRiskCard .soc-risk-grade { min-height: 27px !important; padding: 0 13px !important; border: 1px solid rgba(255, 255, 255, 0.54) !important; background: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; font-size: 12px !important; line-height: 27px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-spark-panel { display: grid !important; align-content: center !important; gap: 10px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline { width: 100% !important; height: 150px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .grid { stroke: rgba(255, 255, 255, 0.13) !important; stroke-width: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .line { fill: none !important; stroke: #ffffff !important; stroke-width: 2.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .dot { fill: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .highlight-line { stroke: rgba(255, 255, 255, 0.7) !important; stroke-width: 1.2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .tooltip rect { fill: #ffffff !important; filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.18)) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .tooltip text { fill: #64748b !important; font-size: 11px !important; font-weight: 650 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-sparkline .tooltip text:last-child { fill: #111827 !important; font-size: 13px !important; font-weight: 760 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-risk-spark-axis { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 10px !important; color: rgba(255, 255, 255, 0.86) !important; font-size: 11px !important; line-height: 14px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-board-card-body, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-board-card-body--health { padding: 8px 20px 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-rack { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; height: 100% !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile { min-height: 86px !important; padding: 16px 18px !important; border: 1px solid #e6ebf2 !important; border-radius: 10px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .label { color: #64748b !important; font-size: 12px !important; line-height: 16px !important; font-weight: 620 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .label::before { content: "" !important; display: inline-block !important; width: 7px !important; height: 7px !important; margin-right: 8px !important; border-radius: 999px !important; background: #ff7a1a !important; vertical-align: 1px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile[data-tone="warning"] .label::before { background: #ffbe55 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile[data-tone="danger"] .label::before { background: #f75b69 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile strong { margin-top: 8px !important; color: #111827 !important; font-size: 28px !important; line-height: 31px !important; font-weight: 760 !important; letter-spacing: -0.02em !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .meta { margin-top: 3px !important; color: #64748b !important; font-size: 12px !important; line-height: 16px !important; font-weight: 520 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-panel { display: grid !important; grid-template-rows: auto auto 1fr !important; gap: 18px !important; height: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head strong { margin-top: 6px !important; color: #111827 !important; font-size: 27px !important; line-height: 32px !important; font-weight: 760 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-bar { height: 9px !important; margin: 0 !important; border-radius: 999px !important; background: #eef2f7 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-segment.is-safe { background: #28c6a2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-legend { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; align-self: end !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item { min-height: 66px !important; padding: 13px 15px !important; border: 1px solid #e6ebf2 !important; border-radius: 10px !important; background: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsAnalysisBoard { display: grid !important; grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.35fr) !important; gap: 18px !important; align-items: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(#analyticsTrendPanel, #analyticsPatternPanel) { min-height: 326px !important; height: 326px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(#analyticsCausePanel, #analyticsPeoplePanel) { min-height: 234px !important; height: 234px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-line-chart { height: 182px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsLiveActivityBreakdown { margin: 8px 22px 0 !important; padding: 12px 16px !important; border: 1px solid #e6ebf2 !important; border-radius: 9px !important; background: #fbfcff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-live-head small, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-live-grid { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-shell { padding: 0 22px 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-head-actions button { height: 32px !important; padding: 0 12px !important; border: 1px solid #dfe6f1 !important; border-radius: 8px !important; background: #ffffff !important; color: #64748b !important; font-size: 12px !important; font-weight: 620 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-head-actions button.is-active { border-color: #ff6a00 !important; background: #fff7f0 !important; color: #ff5c00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-pattern-grid-board { grid-template-columns: 34px repeat(24, minmax(18px, 1fr)) !important; gap: 5px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-pattern-cell-board { min-height: 24px !important; border-radius: 7px !important; font-size: 11px !important; font-weight: 620 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-sort-field { display: inline-flex !important; align-items: center !important; gap: 7px !important; margin-left: auto !important; color: #64748b !important; font-size: 11px !important; line-height: 14px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-sort-field select { width: 106px !important; height: 30px !important; min-height: 30px !important; padding: 0 24px 0 9px !important; border: 1px solid #dfe6f1 !important; border-radius: 7px !important; background: #ffffff !important; color: #172b4d !important; font-size: 11px !important; line-height: 14px !important; font-weight: 620 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsCausePanel .soc-analytics-cause-shell, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-shell { padding: 0 22px 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-list { display: grid !important; gap: 13px !important; max-height: 166px !important; overflow-y: auto !important; overscroll-behavior: contain !important; padding-right: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-head { color: #111827 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 620 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-track { height: 7px !important; background: #e9edf3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-cause-track span { background: #ff671a !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPeopleHotspotList .soc-analytics-hotspot-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView #analyticsPeopleHotspotList .soc-analytics-hotspot-row { min-height: 160px !important; padding: 14px 16px !important; border: 1px solid #e6ebf2 !important; border-radius: 10px !important; background: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-hotspot-rank { width: 30px !important; height: 30px !important; display: inline-grid !important; place-items: center !important; border-radius: 999px !important; background: #f1f5f9 !important; color: #172b4d !important; font-size: 13px !important; line-height: 15px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .soc-analytics-hotspot-score-badge { border-color: #ffd6c4 !important; background: #fff7f0 !important; color: #ff5c00 !important; font-size: 12px !important; font-weight: 660 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(#analyticsSiteTable, #analyticsFollowupBand) { display: none !important; } } /* Final-final sidebar navigation guard: hide legacy Analytics entry after all page overrides. */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-item-key="hq-ops-analytics"], html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-item-key="field-ops-analytics"] { display: none !important; } /* ===== Analytics dashboard compact layout true-final guard (2026-04-27) ===== */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) main.container.ds-page.admin-layout:has(#analyticsView.is-active) { overflow-x: hidden !important; overflow-y: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel:has(#analyticsView.is-active) { height: auto !important; max-height: none !important; min-height: 100% !important; overflow: visible !important; padding: 10px 14px 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsDashboardV2, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsContentWrap, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-board { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsDashboardV2 { padding: 12px 16px 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-v2-header { margin-bottom: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-board, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroRow { gap: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsAnalysisBoard { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.36fr) !important; gap: 14px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active :is(#analyticsTrendPanel, #analyticsPatternPanel) { min-height: 348px !important; height: auto !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsTrendPanel .soc-analytics-chart-shell { flex: 1 1 auto !important; min-height: 0 !important; display: grid !important; grid-template-rows: minmax(0, 1fr) auto !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 20px 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsTrendPanel .soc-analytics-line-chart { align-self: end !important; width: 100% !important; height: 176px !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsTrendAxis { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 4px 0 0 !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsLiveActivityBreakdown { flex: 0 0 auto !important; margin: 0 20px 14px !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPatternPanel .soc-analytics-pattern-shell { flex: 1 1 auto !important; min-height: 0 !important; display: grid !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto !important; justify-items: stretch !important; overflow: hidden !important; padding: 0 18px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-pattern-grid-board { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; align-content: start !important; grid-template-columns: 30px repeat(24, minmax(0, 1fr)) !important; gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-pattern-cell-board { min-height: 22px !important; border-radius: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPatternPanel .soc-analytics-pattern-footer { place-self: end stretch !important; width: auto !important; inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; justify-content: flex-start !important; margin-top: 6px !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPatternPanel .soc-analytics-pattern-legend { flex: 0 1 auto !important; flex-wrap: wrap !important; min-width: 0 !important; max-width: 100% !important; } } @media (min-width: 1024px) and (max-width: 1360px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsAnalysisBoard { grid-template-columns: minmax(0, 1fr) !important; } } /* True-final topbar typography lock (2026-04-27). Keep the SENTRIX wordmark in the global topbar, separated from the page title by one vertical line, and keep the desktop sidebar below that topbar. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-shell-topbar-h: 68px; --sentrix-shell-sidebar-w: 214px; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar { position: sticky !important; top: 0 !important; z-index: 90 !important; width: 100% !important; max-width: 100% !important; height: var(--sentrix-shell-topbar-h) !important; min-height: var(--sentrix-shell-topbar-h) !important; margin-left: 0 !important; padding: 0 28px 0 30px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border: 0 !important; border-bottom: 1px solid var(--sx-line, #e8edf5) !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-left, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-left, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-left, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-left { display: flex !important; flex: 1 1 auto !important; min-width: 0 !important; height: 100% !important; align-items: center !important; gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-heading, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-brand-heading { width: var(--sentrix-shell-sidebar-w) !important; min-width: var(--sentrix-shell-sidebar-w) !important; max-width: var(--sentrix-shell-sidebar-w) !important; height: 100% !important; margin: 0 !important; padding: 0 24px 0 0 !important; display: inline-flex !important; flex: 0 0 var(--sentrix-shell-sidebar-w) !important; align-items: center !important; border-right: 1px solid #d7deea !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-link { width: 100% !important; height: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-wordmark { display: block !important; width: auto !important; height: 30px !important; max-width: 166px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-wordmark-dark { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-current-title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-current-title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-current-title { margin: 0 0 0 24px !important; padding: 0 !important; border-left: 0 !important; color: var(--sx-navy, #0b2d5c) !important; font-size: 20px !important; line-height: 24px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb { display: inline-flex !important; align-items: center !important; gap: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):not(.soc-topbar-home-breadcrumb-visible) .topbar-breadcrumb, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title:not(.hidden) { display: inline-flex !important; align-items: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-link { color: inherit !important; font: inherit !important; text-decoration: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-home-link { color: var(--sx-navy, #0b2d5c) !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-divider { color: #d7deea !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #menuSheetPanel { inset: var(--sentrix-shell-topbar-h) auto 0 0 !important; z-index: 80 !important; width: var(--sentrix-shell-sidebar-w) !important; min-width: var(--sentrix-shell-sidebar-w) !important; max-width: var(--sentrix-shell-sidebar-w) !important; height: auto !important; min-height: 0 !important; max-height: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-sidebar-header, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel .soc-sidebar-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .soc-sidebar-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #menuSheetPanel .soc-sidebar-header { display: none !important; } } /* Final topbar/sidebar geometry pin. Home still inherits older role-HQ sidebar geometry, so keep the desktop panel physically below the global topbar after every page-specific override. */ @media (min-width: 1024px) { html body.soc-desktop-shell:not(.soc-auth-shell-active) #menuSheetPanel, html body.soc-desktop-shell:not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel, html body.soc-desktop-shell.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) #menuSheetPanel, html body.soc-desktop-shell.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel, html body.soc-desktop-shell.role-hq.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) #menuSheetPanel, html body.soc-desktop-shell.role-hq.soc-topbar-home-breadcrumb-visible:not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #menuSheetPanel { position: fixed !important; inset: var(--sentrix-shell-topbar-h) auto 0 0 !important; top: var(--sentrix-shell-topbar-h) !important; right: auto !important; bottom: 0 !important; left: 0 !important; z-index: 80 !important; display: flex !important; flex-direction: column !important; width: var(--sentrix-shell-sidebar-w) !important; min-width: var(--sentrix-shell-sidebar-w) !important; max-width: var(--sentrix-shell-sidebar-w) !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; transform: none !important; border-radius: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } /* EOF home KPI / realtime alert and KPI icon parity lock (2026-04-27). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-label, .soc-menu-sub-item-label), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions .soc-menu-item { color: #111827 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .soc-menu-section-label { color: #111827 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item-icon, .soc-menu-group-icon, .soc-menu-group-chevron) svg { width: 18px !important; height: 18px !important; stroke-width: 1.65 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-dashboard { padding: 20px 24px 42px !important; gap: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card { min-height: 96px !important; height: 96px !important; gap: 18px !important; padding: 0 18px !important; border: 1px solid #e8edf5 !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon svg, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon svg { width: 24px !important; height: 24px !important; stroke: currentColor !important; stroke-width: 1.85 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(1) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--pending { background: #fff1e8 !important; color: #ff5c00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="ticket"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(3) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--total { background: #eaf5ff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="support"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(4) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--approved { background: #e8f7ef !important; color: #18a36b !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="notice"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(5) .soc-situation-kpi-icon { background: #f3eeff !important; color: #7a52f4 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card:nth-child(2) .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--danger { background: #fff0f0 !important; color: #ff1f1f !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--cancelled { background: #f3f5f8 !important; color: #7a8ba5 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-label, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-label { color: #102b55 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-value { color: #0b2d5c !important; font-size: 29px !important; line-height: 32px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-meta { font-size: 12px !important; line-height: 17px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alerts { padding: 17px 18px 15px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile { min-height: 68px !important; grid-template-columns: 34px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon { align-self: center !important; width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; background: #fff6ed !important; color: #ff6a00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile[data-type="ticket"] .sentrix-home-alert-icon { background: #eef6ff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; stroke-width: 1.85 !important; fill: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-title-row strong { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-main p { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-site, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile time { font-size: 11px !important; line-height: 16px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile.is-new-alert { animation: sentrixHomeAlertCardEnter 520ms cubic-bezier(0.19, 1, 0.22, 1) both !important; } } @keyframes sentrixHomeAlertCardEnter { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes sentrixTossCardEnter { 0% { opacity: 0; transform: translateY(10px) scale(0.995); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes sentrixTossUrgentHighlight { 0% { border-color: rgba(255, 92, 0, 0.72); box-shadow: 0 10px 22px rgba(255, 92, 0, 0.16); } 100% { border-color: var(--soc-border, #d8dee6); box-shadow: 0 10px 22px rgba(16, 24, 40, 0.1); } } @keyframes sentrixAppleViewEnter { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes sentrixPanelSlideIn { 0% { opacity: 0; transform: translateX(18px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes sentrixStatusChipMorph { 0% { transform: scale(0.96); } 100% { transform: scale(1); } } @keyframes sentrixCommentFadeIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes sentrixMiniChartDraw { 0% { transform: scaleX(0); transform-origin: left center; } 100% { transform: scaleX(1); transform-origin: left center; } } html body:not(.soc-auth-shell-active) :is(.soc-view-motion-enter, .soc-admin-panel-motion-enter) { animation: sentrixAppleViewEnter var(--motion-base, 200ms) var(--ease-apple, cubic-bezier(0.19, 1, 0.22, 1)) both; } .global-notice-host { gap: 8px !important; pointer-events: none; } .global-notice, .alert-item, .topbar-notification-feed-item, .sentrix-home-alert-tile { transition: border-color var(--motion-fast, 140ms) var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)), box-shadow var(--motion-base, 200ms) var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)), background-color var(--motion-base, 200ms) var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)), transform var(--motion-base, 200ms) var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)); } .global-notice, .alert-item.soc-toss-feed-card, .topbar-notification-feed-item { border: 1px solid var(--soc-border, #d8dee6) !important; border-radius: 10px !important; background: #fff !important; box-shadow: 0 10px 22px rgba(16, 24, 40, 0.1) !important; } .global-notice { display: grid !important; width: min(372px, calc(100vw - 24px)) !important; gap: 5px !important; padding: 13px 14px !important; color: #10203a !important; pointer-events: auto; } .global-notice.clickable, .alert-item.clickable, .topbar-notification-feed-main, .sentrix-home-alert-tile[role="button"] { cursor: pointer; } .global-notice-title, .alert-item .alert-title, .topbar-notification-feed-title { color: #10203a !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; } .global-notice-body, .alert-item .alert-text, .topbar-notification-feed-summary, .global-notice-meta, .alert-item .alert-meta { color: #667085 !important; font-size: 12px !important; line-height: 17px !important; font-weight: 500 !important; } .global-notice-footer, .alert-item .alert-footer, .sentrix-home-alert-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } .global-notice-chip, .alert-chip, .sentrix-home-alert-status-chip, .topbar-notification-feed-chip { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 22px !important; padding: 2px 8px !important; border-radius: 999px !important; border: 1px solid rgba(255, 92, 0, 0.22) !important; background: #fff4ed !important; color: #ff5c00 !important; font-size: 11px !important; line-height: 16px !important; font-weight: 700 !important; white-space: nowrap !important; animation: sentrixStatusChipMorph var(--motion-fast, 140ms) var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)) both; } .global-notice.emergency, .alert-item.emergency, .sentrix-home-alert-tile.is-urgent-highlight { animation: sentrixTossCardEnter var(--motion-base, 200ms) var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)) both, sentrixTossUrgentHighlight var(--motion-slow, 320ms) var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)) 1 both !important; } .global-notice:not(.emergency):not(.persistent), .alert-item.soc-toss-feed-card, .topbar-notification-feed-item.is-new-notice, .sentrix-home-alert-tile.is-new-alert { animation: sentrixTossCardEnter var(--motion-base, 200ms) var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)) both !important; } .global-notice.leave { opacity: 0 !important; transform: translateY(-8px) scale(0.99) !important; transition: opacity var(--motion-base, 200ms) var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)), transform var(--motion-base, 200ms) var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)) !important; } .global-notice-overflow, .topbar-notification-overflow-summary, .sentrix-home-alert-overflow { border: 1px dashed #d8e2ef !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.76) !important; color: #667085 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 700 !important; } .global-notice-overflow { width: min(372px, calc(100vw - 24px)) !important; padding: 9px 12px !important; text-align: center !important; pointer-events: none; } .alert-item.soc-toss-feed-card { display: grid !important; gap: 5px !important; padding: 11px 12px !important; } .topbar-notification-feed-item { overflow: hidden !important; box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08) !important; } .topbar-notification-feed-main { display: grid !important; gap: 6px !important; width: 100% !important; padding: 14px 42px 14px 14px !important; text-align: left !important; } .topbar-notification-feed-delete { top: 10px !important; right: 10px !important; } .topbar-notification-overflow-summary { padding: 12px 14px !important; text-align: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile { background: #fff !important; border: 1px solid #e4ebf5 !important; box-shadow: 0 8px 18px rgba(16, 24, 40, 0.04) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile:hover { border-color: #cbd8ea !important; box-shadow: 0 8px 22px rgba(16, 24, 40, 0.08) !important; transform: translateY(-1px); } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-footer { grid-column: 2 / -1; } .soc-pc-side-panel:not(.hidden), .soc-ops-support-sheet:not(.hidden), #peopleEmployeeDetailPanel:not(.hidden), #accountPanel .soc-account-drawer:not(.hidden), #accountPanel .soc-form-drawer:not(.hidden) { animation: sentrixPanelSlideIn var(--motion-slow, 320ms) var(--ease-apple, cubic-bezier(0.19, 1, 0.22, 1)) both; } :is(#opsCommentPanelThread, #ticketCommentPanelComments, #ticketCommentPanelThread, #opsSupportSheet) :is(.comment-item, .timeline-item, .soc-pc-side-panel-comment, .soc-ticket-reference-comment, li) { animation: sentrixCommentFadeIn var(--motion-base, 200ms) var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)) both; } :is(#weeklyView, #reportsHubView, #googleSheetsPanel, #excelPanel) :is(.progress-bar, .soc-progress-bar, .soc-weekly-progress-fill, .soc-hub-progress-fill, .sentrix-mini-chart-line) { animation: sentrixMiniChartDraw var(--motion-slow, 320ms) var(--ease-apple, cubic-bezier(0.19, 1, 0.22, 1)) both; } @media (prefers-reduced-motion: reduce) { html body:not(.soc-auth-shell-active) *, html body:not(.soc-auth-shell-active) *::before, html body:not(.soc-auth-shell-active) *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; } html body:not(.soc-auth-shell-active) :is(.soc-view-motion-enter, .soc-admin-panel-motion-enter, .sentrix-home-alert-tile.is-new-alert, .global-notice, .alert-item, .topbar-notification-feed-item) { animation: none !important; transform: none !important; } } /* EOF semantic KPI selector lock (2026-04-27). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-home-sidebar-w: 214px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-card[data-summary-filter="total"] .soc-situation-kpi-icon { background: #fff1e8 !important; color: #ff5c00 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-card[data-summary-filter="important"] .soc-situation-kpi-icon { background: #fff0f0 !important; color: #ff1f1f !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-card[data-summary-filter="status-received"] .soc-situation-kpi-icon { background: #eef6ff !important; color: #1684ff !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-card[data-summary-filter="status-progress"] .soc-situation-kpi-icon { background: #e8f7ef !important; color: #18a36b !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-card[data-summary-filter="status-closed"] .soc-situation-kpi-icon { background: #f3eeff !important; color: #7a52f4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--unavailable, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--danger { background: #fff0f0 !important; color: #ff1f1f !important; } } /* EOF semantic shell width and red tint correction (2026-04-27). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout { width: calc(100vw - 214px) !important; max-width: calc(100vw - 214px) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--unavailable, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--danger { background: #fff1f1 !important; color: #ff1f1f !important; } } /* EOF situation KPI reference icon lock (2026-04-27). */ @media (min-width: 1024px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon svg { width: 27px !important; height: 27px !important; stroke: currentColor !important; stroke-width: 2.05 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon--today { background: #fff1e8 !important; color: #ff5c00 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon--important { background: #fff1f1 !important; color: #ff2f2f !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon--received { background: #eef6ff !important; color: #1684ff !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon--progress { background: #e8f7ef !important; color: #18a36b !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon--closed { background: #f3eeff !important; color: #7a52f4 !important; } } /* EOF ticket KPI reference icon lock (2026-04-27). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon svg { width: 27px !important; height: 27px !important; stroke: currentColor !important; stroke-width: 2.05 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--total { background: #eef6ff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--pending { background: #fff1e8 !important; color: #ff5c00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--approved { background: #e8f7ef !important; color: #18a36b !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--unavailable, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--rejected { background: #fff1f1 !important; color: #ff2f2f !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon--cancelled { background: #f3f5f8 !important; color: #7a8ba5 !important; } } /* EOF home-aligned typography hierarchy lock (2026-04-27). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-toggle, .soc-menu-sub-item), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-label, .soc-menu-sub-item-label), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions :is(.soc-menu-item, .soc-menu-item-label), html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-toggle, .soc-menu-sub-item), html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-label, .soc-menu-sub-item-label), html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel .mobile-nav-actions :is(.soc-menu-item, .soc-menu-item-label), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-toggle, .soc-menu-sub-item), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-label, .soc-menu-sub-item-label), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .mobile-nav-actions :is(.soc-menu-item, .soc-menu-item-label) { color: #111827 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList .soc-menu-section-label, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList .soc-menu-section-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList .soc-menu-section-label { color: #111827 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 500 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-icon, .soc-menu-sub-item-icon, .soc-menu-group-chevron) svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions :is(.soc-menu-item-icon, .soc-menu-icon-img, svg), html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-icon, .soc-menu-sub-item-icon, .soc-menu-group-chevron) svg, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel .mobile-nav-actions :is(.soc-menu-item-icon, .soc-menu-icon-img, svg), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-icon, .soc-menu-sub-item-icon, .soc-menu-group-chevron) svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel .mobile-nav-actions :is(.soc-menu-item-icon, .soc-menu-icon-img, svg) { width: 18px !important; height: 18px !important; stroke-width: 1.65 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-label { font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-summary-value, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-value, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView [data-ticket-summary-filter] .soc-ticket-reference-summary-value { color: #0b2d5c !important; font-weight: 700 !important; letter-spacing: -0.2px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-card--important .soc-summary-value { color: #ff1f1f !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-header, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-header > span, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-table-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-table-header > span { font-weight: 500 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row :is(.soc-situation-cell, .type-cell, .site-cell, .time-cell), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row :is(.soc-ticket-reference-cell, .ticket-type-cell, .ticket-site-cell, .ticket-time-cell) { font-weight: 500 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference :is(.title-cell, .incident-title-text), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(.ticket-title-cell, .soc-ticket-reference-cell--title, .soc-ticket-reference-detail-title) { font-weight: 600 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference :is(.eci, .status-badge, .soc-situation-status-badge), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(.ticket-status-badge, .soc-ticket-reference-status-pill, .soc-ticket-reference-status-action, .soc-ticket-reference-cell--requested.has-count) { font-weight: 600 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference :is(#situationIncidentTotalCount, .soc-situation-list-footer, .soc-pagination, .soc-situation-pagination), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(#ticketReferenceTotalCount, .soc-ticket-reference-list-footer, .soc-ticket-reference-pagination, .soc-pagination) { font-weight: 500 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-detail-card :is(h2, h3, h4, .detail-title, #opsCommentPanelTitle), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-card :is(h2, h3, h4, .detail-title, #ticketCommentPanelTitle) { font-weight: 600 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-detail-card :is(dt, dd, p, li, span), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-card :is(dt, dd, p, li, span) { font-weight: 500 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-detail-card :is(strong, b), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-card :is(strong, b) { font-weight: 600 !important; } } /* EOF hard topbar viewport lock (2026-04-28). The global topbar includes the SENTRIX brand rail, so it must span the full viewport. Only the page container is offset by the fixed sidebar width. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) .topbar { width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; padding-right: 24px !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-right { flex: 0 0 auto !important; margin-left: auto !important; margin-right: 0 !important; padding-right: 0 !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-admin-profile-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-admin-profile-copy { margin-right: 0 !important; padding-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout { width: calc(100vw - var(--sentrix-shell-sidebar-w, 214px)) !important; max-width: calc(100vw - var(--sentrix-shell-sidebar-w, 214px)) !important; margin-left: var(--sentrix-shell-sidebar-w, 214px) !important; margin-right: 0 !important; } } /* EOF topbar typography scale lock (2026-04-28). Reduce the global SENTRIX wordmark by 20% and page titles/breadcrumbs by 10% with lighter weight across home, situation room, tickets, and support roster. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-wordmark, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-brand-wordmark, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-brand-wordmark, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-brand-wordmark, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) .topbar-brand-wordmark { height: 24px !important; max-width: 133px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-current-title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-current-title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-current-title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) .topbar-current-title { font-size: 18px !important; line-height: 22px !important; font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-link, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-home-link { font-weight: 500 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-divider { font-weight: 400 !important; } } /* Home/dashboard breadcrumb selection state (2026-04-29). Active destination in the topbar must read immediately through weight and tone: one item deep navy, the other muted gray. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-link { color: #8b97ab !important; font-weight: 500 !important; transition: color 140ms ease, font-weight 140ms ease !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-link.is-active, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-breadcrumb-link[aria-current="page"] { color: var(--sx-navy, #0b2d5c) !important; font-weight: 700 !important; } } /* EOF topbar rail alignment, home alert dot, and situation filter fill lock (2026-04-28). The topbar brand rail must share the exact same right edge as the fixed sidebar below it; alert cards now use a small semantic dot instead of the same icon family as the KPI cards. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) .topbar { padding-left: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-heading, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) .topbar-brand-heading { box-sizing: border-box !important; width: var(--sentrix-shell-sidebar-w, 214px) !important; min-width: var(--sentrix-shell-sidebar-w, 214px) !important; max-width: var(--sentrix-shell-sidebar-w, 214px) !important; flex: 0 0 var(--sentrix-shell-sidebar-w, 214px) !important; padding: 0 24px 0 30px !important; border-right: 1px solid #d7deea !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile { grid-template-columns: 10px minmax(0, 1fr) auto !important; min-height: 58px !important; padding: 9px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-icon { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-dot { align-self: center !important; justify-self: center !important; width: 7px !important; height: 7px !important; border-radius: 999px !important; background: #ff6a00 !important; box-shadow: 0 0 0 3px #fff3e8 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-alert-tile[data-type="ticket"] .sentrix-home-alert-dot { background: #1684ff !important; box-shadow: 0 0 0 3px #eef6ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-card { grid-template-columns: 230px 144px 144px 165px 144px 140px minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-spacer { display: block !important; min-width: 0 !important; width: 100% !important; height: 40px !important; margin-top: 21px !important; align-self: center !important; border: 1px solid #dfe6f1 !important; border-radius: 5px !important; background: #ffffff !important; box-sizing: border-box !important; } } /* EOF ARLS topbar height + clipped divider parity (2026-04-28). Match the ARLS 64px topbar rhythm and replace the full-height brand rail border with a short divider whose ends do not touch the topbar edges. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-shell-topbar-h: 64px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) .topbar { height: 64px !important; min-height: 64px !important; max-height: 64px !important; padding-top: 0 !important; padding-bottom: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-heading, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) .topbar-brand-heading { position: relative !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; border-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-heading::after, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-brand-heading::after, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-brand-heading::after, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-brand-heading::after, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) .topbar-brand-heading::after { content: "" !important; position: absolute !important; top: 13px !important; right: 0 !important; bottom: 13px !important; width: 1px !important; border-radius: 999px !important; background: #d7deea !important; pointer-events: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) #menuSheetPanel { top: 64px !important; inset: 64px auto 0 0 !important; } } /* EOF analytics dashboard card overflow guard (2026-04-28). Keep 운영 지표 text inside its tiles and make 발생원인 분석 / 직원 hotspot equal-height cards with contained internal scrolling. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroKpiRack { display: flex !important; flex-direction: column !important; min-width: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroKpiRack .soc-analytics-board-card-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroKpiRack .soc-analytics-v2-kpi-rack { height: 100% !important; min-height: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile { min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile :is(.label, strong, .meta) { max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active :is(#analyticsCausePanel, #analyticsPeoplePanel) { height: 300px !important; min-height: 300px !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active :is(#analyticsCausePanel, #analyticsPeoplePanel) .soc-analytics-board-card-head { flex: 0 0 auto !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsCausePanel .soc-analytics-cause-shell, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPeoplePanel .soc-analytics-hotspot-shell { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; padding: 0 18px 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-cause-list { height: 100% !important; max-height: none !important; min-height: 0 !important; display: grid !important; align-content: start !important; gap: 11px !important; overflow-x: hidden !important; overflow-y: auto !important; padding-right: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-cause-row, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-cause-head { min-width: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-cause-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-cause-head strong { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active .soc-analytics-cause-head span { white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPeopleHotspotList .soc-analytics-hotspot-list { height: 100% !important; min-height: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-content: start !important; gap: 10px !important; overflow-x: hidden !important; overflow-y: auto !important; padding-right: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPeopleHotspotList .soc-analytics-hotspot-row { min-width: 0 !important; min-height: 172px !important; height: auto !important; box-sizing: border-box !important; padding: 12px !important; gap: 8px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPeoplePanel :is( .soc-analytics-hotspot-topline, .soc-analytics-hotspot-main, .soc-analytics-hotspot-head, .soc-analytics-hotspot-metrics, .soc-analytics-hotspot-last ) { min-width: 0 !important; max-width: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPeoplePanel .soc-analytics-hotspot-score-badge { flex: 0 1 auto !important; max-width: 92px !important; min-width: 0 !important; min-height: 26px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPeoplePanel .soc-analytics-hotspot-rank { flex: 0 0 auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPeoplePanel .soc-analytics-hotspot-head strong, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPeoplePanel .soc-analytics-hotspot-role, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPeoplePanel .soc-analytics-hotspot-last, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPeoplePanel .soc-analytics-hotspot-metric-chip { max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsPeoplePanel .soc-analytics-hotspot-metric-chip { flex: 0 1 auto !important; } } /* Analytics hero KPI unclipping lock (2026-05-01). 운영 지표 values are primary content, so they must never inherit the late dashboard overflow guards that trim dense cards. Let this rack grow by its content and reserve a real line box for the large number. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroKpiRack { height: auto !important; min-height: 316px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroKpiRack .soc-analytics-board-card-head { flex: 0 0 auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroKpiRack .soc-analytics-board-card-body { height: auto !important; min-height: 0 !important; overflow: visible !important; flex: 0 0 auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroKpiRack .soc-analytics-v2-kpi-rack { height: auto !important; min-height: fit-content !important; grid-auto-rows: minmax(116px, auto) !important; overflow: visible !important; align-content: start !important; align-items: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile { display: grid !important; grid-template-rows: auto minmax(42px, auto) auto !important; row-gap: 8px !important; min-height: 116px !important; overflow: visible !important; align-content: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile strong { display: block !important; height: auto !important; min-height: 42px !important; max-height: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; font-size: clamp(30px, 2.15vw, 40px) !important; line-height: 1.14 !important; padding: 0 !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView.is-active #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile :is(.label, .meta) { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; } } /* EOF Sentrix supplied icon pack lock (2026-04-28). The uploaded pack uses plain black outline icons. This final override removes legacy pastel icon containers from the mapped Sentrix KPI/detail surfaces. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #111827 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone] .sentrix-home-kpi-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon[class*="soc-situation-kpi-icon--"], html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon[class*="soc-ticket-reference-summary-icon--"] { border: 0 !important; background: transparent !important; box-shadow: none !important; color: #111827 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon svg, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon svg { width: 30px !important; height: 30px !important; display: block !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-icon svg :is(path, circle, rect, line, polyline, polygon), html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-kpi-icon svg :is(path, circle, rect, line, polyline, polygon), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-summary-icon svg :is(path, circle, rect, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-kpi-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #111827 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-kpi-icon svg { width: 22px !important; height: 22px !important; display: block !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-kpi-icon svg :is(path, circle, rect, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } } /* Home rectangular pill lock (2026-04-28). The supplied Sentrix home reference uses compact rectangular outline labels, not capsule badges. Keep this as the final home-only authority for chips. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView :is( .sentrix-home-alert-label, .sentrix-home-pill, .sentrix-home-kpi-badge ) { box-sizing: border-box !important; border: 1px solid #ffb27f !important; border-radius: 3px !important; background: #ffffff !important; color: #ff5c00 !important; box-shadow: none !important; letter-spacing: 0 !important; font-weight: 650 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-alert-label { min-width: 0 !important; height: 20px !important; min-height: 20px !important; padding: 0 7px !important; font-size: 11px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-alert-tile[data-type="ticket"] .sentrix-home-alert-label { border-color: #9bc9ff !important; background: #ffffff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-pill { min-width: 0 !important; height: 21px !important; min-height: 21px !important; padding: 0 7px !important; font-size: 11px !important; line-height: 19px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-table-card .sentrix-home-pill.sentrix-home-pill--soft-terminal, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-staffing-cell .sentrix-home-pill { height: 20px !important; min-height: 20px !important; padding: 0 7px !important; font-size: 11px !important; line-height: 18px !important; font-weight: 650 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-pill[data-tone="success"] { border-color: #9bdfb7 !important; background: #ffffff !important; color: #12a463 !important; } /* Home realtime operation status parity (2026-04-28). "종결" in the home realtime operation table must use the same closed state colors as the situation-room status pill. */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-operation-card .sentrix-home-pill[data-tone="success"] { border-color: #cdeedc !important; background: #e9f8ef !important; color: #18ad56 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-pill[data-tone="warning"] { border-color: #ffb27f !important; background: #ffffff !important; color: #ff5c00 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-pill[data-tone="danger"] { border-color: #ffb2b2 !important; background: #ffffff !important; color: #f04452 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-pill[data-tone="muted"] { border-color: #d5dde8 !important; background: #ffffff !important; color: #52627a !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-pill[data-tone="info"] { border-color: #9bc9ff !important; background: #ffffff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-kpi-badge { min-width: 20px !important; width: auto !important; height: 20px !important; min-height: 20px !important; padding: 0 6px !important; font-size: 11px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-kpi-card[data-tone="incident"] .sentrix-home-kpi-badge { border-color: #ffb27f !important; background: #ffffff !important; color: #ff5c00 !important; font-size: 11px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-kpi-card[data-tone="ticket"] .sentrix-home-kpi-badge { border-color: #9bc9ff !important; background: #ffffff !important; color: #1684ff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-kpi-card[data-tone="support"] .sentrix-home-kpi-badge { border-color: #9bdfb7 !important; background: #ffffff !important; color: #12a463 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView .sentrix-home-kpi-card[data-tone="notice"] .sentrix-home-kpi-badge { border-color: #cdb4ff !important; background: #ffffff !important; color: #7b61ff !important; } } /* 27-inch / 2560x1440 ops-support density lock (2026-04-28). Keep this narrowly gated so the existing 1366/1600/1920 desktop rules stay unchanged. */ @media screen and (min-width: 2500px) and (max-width: 2620px) and (min-height: 1080px) and (max-height: 1460px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] { padding-top: 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item { min-height: 82px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item span { font-size: 12px !important; line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item strong { font-size: 20px !important; line-height: 25px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-month span { font-size: 17px !important; line-height: 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-month strong { font-size: 14px !important; line-height: 19px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar { margin: 22px 0 13px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar label > span { font-size: 12px !important; line-height: 15px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar select, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-toolbar button { height: 42px !important; min-height: 42px !important; font-size: 14px !important; line-height: 19px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-weekdays span { min-height: 38px !important; font-size: 13px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportCalendarGrid.soc-ops-support-calendar-grid { min-height: 888px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] #opsSupportCalendarGrid > .soc-ops-support-calendar-cell { min-height: 148px !important; padding: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-day { margin-bottom: 8px !important; font-size: 13px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell.is-today .ops-ref-calendar-day { width: 24px !important; height: 24px !important; font-size: 13px !important; line-height: 24px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line { min-height: 28px !important; height: 28px !important; margin-bottom: 5px !important; padding: 0 8px 0 13px !important; font-size: 12px !important; line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line span, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line strong, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-more { font-size: 12px !important; line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-line::before { top: 6px !important; bottom: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-panel { min-height: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-head h3 { font-size: 18px !important; line-height: 24px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-date, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta dt, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-meta dd, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dt, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-submit dd { font-size: 13px !important; line-height: 18px !important; } } /* Ops support request detail KPI icon authority (2026-04-28). The four summary cards use dedicated line icons with no tinted icon well; each icon inherits the semantic card color through currentColor. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article::before { content: none !important; display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article .ops-ref-kpi-icon { position: absolute !important; left: 14px !important; top: 50% !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: translateY(-50%) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-requested .ops-ref-kpi-icon { color: var(--sentrix-support-reference-orange, #ff6a00) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article.is-self .ops-ref-kpi-icon { color: var(--sentrix-support-reference-blue, #2f6bff) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article:is(.is-confirmed, .is-over) .ops-ref-kpi-icon { color: var(--sentrix-support-reference-green, #18a36b) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article .ops-ref-kpi-icon svg { width: 28px !important; height: 28px !important; display: block !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-detail-kpis article .ops-ref-kpi-icon svg :is(path, circle, rect, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } } /* EOF topbar utility icon correction (2026-04-28). The date chip uses text only, while the notification control keeps a larger readable bell without changing the surrounding header rhythm. */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-date-chip, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-date-chip, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-date-chip, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-date-chip, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) .topbar-date-chip { gap: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-date-chip > svg, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) .topbar-date-chip > svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) .topbar-date-chip > svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) .topbar-date-chip > svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) .topbar-date-chip > svg { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarNotificationsBtn.topbar-btn:not(.hidden), html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #topbarNotificationsBtn.topbar-btn:not(.hidden), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #topbarNotificationsBtn.topbar-btn:not(.hidden), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #topbarNotificationsBtn.topbar-btn:not(.hidden), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) #topbarNotificationsBtn.topbar-btn:not(.hidden) { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; display: inline-grid !important; place-items: center !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #topbarNotificationsBtn .topbar-notification-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #topbarNotificationsBtn .topbar-notification-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #topbarNotificationsBtn .topbar-notification-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) #topbarNotificationsBtn .topbar-notification-icon { width: 24px !important; height: 24px !important; display: inline-grid !important; place-items: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #topbarNotificationsBtn .topbar-notification-icon-img, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #topbarNotificationsBtn .topbar-notification-icon-img, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #topbarNotificationsBtn .topbar-notification-icon-img, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) #topbarNotificationsBtn .topbar-notification-icon-img { width: 23px !important; height: 23px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-badge, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #topbarNotificationsBtn .topbar-notification-badge, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #topbarNotificationsBtn .topbar-notification-badge, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#opsSupportPanel:not(.hidden)) #topbarNotificationsBtn .topbar-notification-badge, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#analyticsView.is-active) #topbarNotificationsBtn .topbar-notification-badge { top: 0 !important; right: -1px !important; } } /* Situation summary icons neutral monochrome lock (2026-04-29). The user requested the five situation-room KPI icons to lose all semantic fills and icon-well backgrounds. Keep the cards and metric text intact, but render only neutral outline icons. */ @media (min-width: 1024px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference :is( .soc-situation-kpi-icon, .soc-situation-kpi-icon--today, .soc-situation-kpi-icon--important, .soc-situation-kpi-icon--received, .soc-situation-kpi-icon--progress, .soc-situation-kpi-icon--closed ) { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #111827 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference :is( .soc-situation-kpi-icon, .soc-situation-kpi-icon--today, .soc-situation-kpi-icon--important, .soc-situation-kpi-icon--received, .soc-situation-kpi-icon--progress, .soc-situation-kpi-icon--closed ) svg, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference :is( .soc-situation-kpi-icon, .soc-situation-kpi-icon--today, .soc-situation-kpi-icon--important, .soc-situation-kpi-icon--received, .soc-situation-kpi-icon--progress, .soc-situation-kpi-icon--closed ) svg :is(path, circle, rect, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; color: #111827 !important; } } /* Employee management reference authority (2026-05-02). Rebuild the people workspace to match the approved Sentrix employee management reference: one status summary card, compact filter card, and a single employee table card with no persistent right-side detail rail. */ @media (min-width: 1024px) { body.soc-desktop-shell #peopleView .soc-people-admin-header-wrap, body.soc-desktop-adaptive #peopleView .soc-people-admin-header-wrap { display: none !important; } body.soc-desktop-shell #peopleView, body.soc-desktop-adaptive #peopleView { display: grid !important; gap: 18px !important; padding-top: 16px !important; } body.soc-desktop-shell #peopleView #peopleHubEmployeesPane, body.soc-desktop-adaptive #peopleView #peopleHubEmployeesPane { display: grid !important; gap: 18px !important; } body.soc-desktop-shell #peopleView #peopleOverviewModeTabs, body.soc-desktop-adaptive #peopleView #peopleOverviewModeTabs, body.soc-desktop-shell #peopleView #peopleEmployeeDetailPanel, body.soc-desktop-adaptive #peopleView #peopleEmployeeDetailPanel { display: none !important; } body.soc-desktop-shell #peopleView .soc-people-directory-layout, body.soc-desktop-adaptive #peopleView .soc-people-directory-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-pane-summary, body.soc-desktop-adaptive #peopleView .soc-people-pane-summary { padding: 18px 20px 20px !important; border: 1px solid #e7ebf2 !important; border-radius: 18px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView #peopleWorkspaceSummaryTitle, body.soc-desktop-adaptive #peopleView #peopleWorkspaceSummaryTitle { display: none !important; } body.soc-desktop-shell #peopleView .soc-people-pane-summary-eyebrow, body.soc-desktop-adaptive #peopleView .soc-people-pane-summary-eyebrow { margin: 0 !important; color: #111827 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; } body.soc-desktop-shell #peopleView #peopleOverviewKpiStrip, body.soc-desktop-adaptive #peopleView #peopleOverviewKpiStrip { display: block !important; } body.soc-desktop-shell #peopleView .soc-people-reference-summary-shell, body.soc-desktop-adaptive #peopleView .soc-people-reference-summary-shell { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(540px, 0.95fr) !important; gap: 20px !important; align-items: stretch !important; } body.soc-desktop-shell #peopleView .soc-people-reference-summary-shell.is-empty, body.soc-desktop-adaptive #peopleView .soc-people-reference-summary-shell.is-empty { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-summary-left, body.soc-desktop-adaptive #peopleView .soc-people-reference-summary-left { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; min-width: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat { position: relative !important; display: grid !important; grid-template-columns: 56px minmax(0, 1fr) !important; align-items: center !important; gap: 16px !important; padding: 16px 18px !important; border: 0 !important; background: transparent !important; text-align: left !important; min-width: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat.is-active, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat.is-active { background: rgba(255, 122, 0, 0.04) !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-divider, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-divider { position: absolute !important; top: 10px !important; right: 0 !important; width: 1px !important; height: calc(100% - 20px) !important; background: #e8edf5 !important; pointer-events: none !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-copy, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-copy { display: grid !important; gap: 3px !important; min-width: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-copy .label, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-copy .label { color: #485b78 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-copy strong, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-copy strong { color: #0f2240 !important; font-size: 20px !important; line-height: 28px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-copy strong em, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-copy strong em { font-style: normal !important; font-size: 14px !important; font-weight: 700 !important; margin-left: 3px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-icon, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-icon { width: 48px !important; height: 48px !important; display: grid !important; place-items: center !important; border-radius: 999px !important; background: #f3f4f6 !important; color: #9aa4b2 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-icon svg, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-icon svg { width: 26px !important; height: 26px !important; display: block !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-icon svg :is(path, circle, rect, line, polyline), body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-icon svg :is(path, circle, rect, line, polyline) { fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-icon.tone-accent, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-icon.tone-accent { background: #fff3ea !important; color: #ff7a00 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-summary-right, body.soc-desktop-adaptive #peopleView .soc-people-reference-summary-right { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; min-width: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-block, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-block { display: grid !important; gap: 14px !important; min-width: 0 !important; padding: 0 20px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-block + .soc-people-reference-donut-block, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-block + .soc-people-reference-donut-block { border-left: 1px solid #e8edf5 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-block h4, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-block h4 { margin: 0 !important; color: #111827 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-layout, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-layout { display: grid !important; grid-template-columns: 136px minmax(0, 1fr) !important; align-items: center !important; gap: 18px !important; min-width: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut { width: 110px !important; height: 110px !important; margin: 0 auto !important; border-radius: 999px !important; background: var(--soc-people-donut, conic-gradient(#e5e7eb 0turn, #e5e7eb 1turn)) !important; position: relative !important; display: grid !important; place-items: center !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut::after, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut::after { content: "" !important; position: absolute !important; inset: 14px !important; border-radius: 999px !important; background: #ffffff !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-center, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-center { position: relative !important; z-index: 1 !important; display: grid !important; justify-items: center !important; gap: 2px !important; text-align: center !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-center span, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-center span { color: #475467 !important; font-size: 11px !important; line-height: 14px !important; font-weight: 600 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-center strong, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-center strong { color: #0f2240 !important; font-size: 17px !important; line-height: 22px !important; font-weight: 800 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-center strong em, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-center strong em { font-style: normal !important; font-size: 12px !important; margin-left: 2px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-legend, body.soc-desktop-adaptive #peopleView .soc-people-reference-legend { display: grid !important; gap: 10px !important; min-width: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-legend-row, body.soc-desktop-adaptive #peopleView .soc-people-reference-legend-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 34px 64px !important; gap: 10px !important; align-items: center !important; color: #475467 !important; font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-legend-label, body.soc-desktop-adaptive #peopleView .soc-people-reference-legend-label { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-legend-label i, body.soc-desktop-adaptive #peopleView .soc-people-reference-legend-label i { width: 8px !important; height: 8px !important; border-radius: 999px !important; flex: 0 0 auto !important; } body.soc-desktop-shell #peopleView .soc-people-reference-legend-row strong, body.soc-desktop-adaptive #peopleView .soc-people-reference-legend-row strong { color: #111827 !important; font-weight: 700 !important; text-align: right !important; } body.soc-desktop-shell #peopleView .soc-people-reference-legend-row > span:last-child, body.soc-desktop-adaptive #peopleView .soc-people-reference-legend-row > span:last-child { /* Keep percentage labels readable inside the fixed legend columns from the approved employee-management reference. */ text-align: right !important; white-space: nowrap !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar, body.soc-desktop-adaptive #peopleView .soc-employee-directory-toolbar { padding: 18px 20px !important; border: 1px solid #e7ebf2 !important; border-radius: 18px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar-note, body.soc-desktop-adaptive #peopleView .soc-employee-directory-toolbar-note, body.soc-desktop-shell #peopleView #peopleDirectoryCreateBtn, body.soc-desktop-adaptive #peopleView #peopleDirectoryCreateBtn { display: none !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar-row, body.soc-desktop-adaptive #peopleView .soc-employee-directory-toolbar-row { align-items: center !important; justify-content: flex-start !important; gap: 18px !important; flex-wrap: nowrap !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar-main, body.soc-desktop-adaptive #peopleView .soc-employee-directory-toolbar-main { width: 100% !important; gap: 18px !important; flex-wrap: nowrap !important; flex: 1 1 auto !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-search, body.soc-desktop-adaptive #peopleView .soc-employee-directory-search { display: block !important; min-width: 360px !important; max-width: 360px !important; flex: 0 0 360px !important; position: relative !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-search > span, body.soc-desktop-adaptive #peopleView .soc-employee-directory-search > span { display: none !important; } body.soc-desktop-shell #peopleView :is(#employeeSiteFilterWrap, #peopleRoleFilter, #peopleDirectorySortSelect), body.soc-desktop-adaptive #peopleView :is(#employeeSiteFilterWrap, #peopleRoleFilter, #peopleDirectorySortSelect) { min-width: 0 !important; } body.soc-desktop-shell #peopleView :is(#employeeSiteFilterWrap, .soc-employee-directory-field[for=\"peopleRoleFilter\"], .soc-employee-directory-field[for=\"peopleDirectorySortSelect\"]), body.soc-desktop-adaptive #peopleView :is(#employeeSiteFilterWrap, .soc-employee-directory-field[for=\"peopleRoleFilter\"], .soc-employee-directory-field[for=\"peopleDirectorySortSelect\"]) { display: grid !important; grid-template-columns: auto 170px !important; align-items: center !important; gap: 10px !important; min-width: 250px !important; flex: 0 0 auto !important; } body.soc-desktop-shell #peopleView :is(#employeeSiteFilterWrap, .soc-employee-directory-field[for=\"peopleRoleFilter\"], .soc-employee-directory-field[for=\"peopleDirectorySortSelect\"]) > span, body.soc-desktop-adaptive #peopleView :is(#employeeSiteFilterWrap, .soc-employee-directory-field[for=\"peopleRoleFilter\"], .soc-employee-directory-field[for=\"peopleDirectorySortSelect\"]) > span { padding-left: 0 !important; color: #667085 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; } body.soc-desktop-shell #peopleView :is(.soc-employee-directory-search input, #employeeSiteFilter, #peopleRoleFilter, #peopleDirectorySortSelect), body.soc-desktop-adaptive #peopleView :is(.soc-employee-directory-search input, #employeeSiteFilter, #peopleRoleFilter, #peopleDirectorySortSelect) { height: 42px !important; min-height: 42px !important; border: 1px solid #dfe5ef !important; border-radius: 12px !important; background: #ffffff !important; color: #0f2240 !important; font-size: 13px !important; line-height: 18px !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-search::before, body.soc-desktop-adaptive #peopleView .soc-employee-directory-search::before { content: "" !important; position: absolute !important; left: 16px !important; top: 50% !important; width: 16px !important; height: 16px !important; transform: translateY(-50%) !important; border: 2px solid #74819a !important; border-radius: 999px !important; box-sizing: border-box !important; pointer-events: none !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-search::after, body.soc-desktop-adaptive #peopleView .soc-employee-directory-search::after { content: "" !important; position: absolute !important; left: 29px !important; top: calc(50% + 5px) !important; width: 8px !important; height: 2px !important; background: #74819a !important; transform: rotate(45deg) !important; border-radius: 999px !important; pointer-events: none !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-search input, body.soc-desktop-adaptive #peopleView .soc-employee-directory-search input { width: 100% !important; display: block !important; padding-left: 44px !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-grid, body.soc-desktop-adaptive #peopleView .soc-employee-directory-grid { border: 1px solid #e7ebf2 !important; border-radius: 18px !important; background: #ffffff !important; box-shadow: none !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-grid .soc-workspace-card-head, body.soc-desktop-adaptive #peopleView .soc-employee-directory-grid .soc-workspace-card-head { padding: 16px 20px !important; border-bottom: 1px solid #eef2f6 !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-grid .soc-workspace-card-head h3, body.soc-desktop-adaptive #peopleView .soc-employee-directory-grid .soc-workspace-card-head h3 { color: #111827 !important; font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-grid-wrap, body.soc-desktop-adaptive #peopleView .soc-employee-directory-grid-wrap { max-height: 620px !important; border-top: 0 !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table, body.soc-desktop-adaptive #peopleView .soc-employee-directory-table { table-layout: fixed !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th, body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th { background: #ffffff !important; color: #7b8aa7 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; padding: 14px 16px !important; border-bottom: 1px solid #eef2f6 !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th:nth-child(1), body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th:nth-child(1) { width: 18% !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th:nth-child(2), body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th:nth-child(2) { width: 12% !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th:nth-child(3), body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th:nth-child(3) { width: 19% !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th:nth-child(4), body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th:nth-child(4) { width: 18% !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th:nth-child(5), body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th:nth-child(5) { width: 15% !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th:nth-child(6), body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th:nth-child(6) { width: 14% !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table tbody td, body.soc-desktop-adaptive #peopleView .soc-employee-directory-table tbody td { padding: 12px 16px !important; font-size: 13px !important; line-height: 20px !important; color: #0f2240 !important; border-bottom: 1px solid #eef2f6 !important; vertical-align: middle !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table tbody tr:last-child td, body.soc-desktop-adaptive #peopleView .soc-employee-directory-table tbody tr:last-child td { border-bottom: 0 !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table tbody tr.is-selected, body.soc-desktop-adaptive #peopleView .soc-employee-directory-table tbody tr.is-selected { background: #fff8f2 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-identity, body.soc-desktop-adaptive #peopleView .soc-people-reference-identity { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; gap: 12px !important; align-items: center !important; } body.soc-desktop-shell #peopleView .soc-people-reference-avatar, body.soc-desktop-adaptive #peopleView .soc-people-reference-avatar { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 38px !important; height: 38px !important; border-radius: 999px !important; overflow: hidden !important; background: #f2f4f7 !important; color: #667085 !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: -0.04em !important; text-align: center !important; white-space: nowrap !important; } body.soc-desktop-shell #peopleView .soc-people-reference-primary, body.soc-desktop-adaptive #peopleView .soc-people-reference-primary { color: #0f2240 !important; font-size: 13px !important; line-height: 20px !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.soc-desktop-shell #peopleView .soc-people-reference-pill, body.soc-desktop-adaptive #peopleView .soc-people-reference-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 26px !important; padding: 0 10px !important; border-radius: 999px !important; border: 1px solid #d9e1ec !important; background: #ffffff !important; font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; white-space: nowrap !important; } body.soc-desktop-shell #peopleView .soc-people-reference-pill.status-active, body.soc-desktop-adaptive #peopleView .soc-people-reference-pill.status-active { border-color: #b7ecc6 !important; color: #16a34a !important; background: #f0fdf4 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-pill.status-leave, body.soc-desktop-adaptive #peopleView .soc-people-reference-pill.status-leave { border-color: #d5dbea !important; color: #667085 !important; background: #f8fafc !important; } body.soc-desktop-shell #peopleView .soc-people-reference-pill.status-inactive, body.soc-desktop-adaptive #peopleView .soc-people-reference-pill.status-inactive { border-color: #d5dbea !important; color: #667085 !important; background: #f8fafc !important; } body.soc-desktop-shell #peopleView .soc-people-reference-pill.account-linked, body.soc-desktop-adaptive #peopleView .soc-people-reference-pill.account-linked { border-color: #b7ecc6 !important; color: #16a34a !important; background: #f0fdf4 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-pill.account-unlinked, body.soc-desktop-adaptive #peopleView .soc-people-reference-pill.account-unlinked { border-color: #fecaca !important; color: #ef4444 !important; background: #fff5f5 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-action-head, body.soc-desktop-adaptive #peopleView .soc-people-reference-action-head { width: 44px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-actions-cell, body.soc-desktop-adaptive #peopleView .soc-people-reference-actions-cell { text-align: right !important; } body.soc-desktop-shell #peopleView .soc-people-reference-more-btn, body.soc-desktop-adaptive #peopleView .soc-people-reference-more-btn { width: 28px !important; height: 28px !important; border: 0 !important; background: transparent !important; color: #64748b !important; font-size: 20px !important; line-height: 1 !important; cursor: pointer !important; } body.soc-desktop-shell #peopleView #peopleDirectoryPagination, body.soc-desktop-adaptive #peopleView #peopleDirectoryPagination { display: block !important; padding: 14px 20px 18px !important; border-top: 1px solid #eef2f6 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-pagination-shell, body.soc-desktop-adaptive #peopleView .soc-people-reference-pagination-shell { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-pagination-controls, body.soc-desktop-adaptive #peopleView .soc-people-reference-pagination-controls { display: inline-flex !important; align-items: center !important; gap: 8px !important; } body.soc-desktop-shell #peopleView :is(.soc-people-reference-page-nav, .soc-people-reference-page-btn), body.soc-desktop-adaptive #peopleView :is(.soc-people-reference-page-nav, .soc-people-reference-page-btn) { min-width: 32px !important; height: 32px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #64748b !important; font-size: 15px !important; line-height: 32px !important; font-weight: 500 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-page-btn.is-active, body.soc-desktop-adaptive #peopleView .soc-people-reference-page-btn.is-active { color: #ff7a00 !important; border-bottom: 2px solid #ff7a00 !important; border-radius: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-pagination-meta, body.soc-desktop-adaptive #peopleView .soc-people-reference-pagination-meta { color: #64748b !important; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; white-space: nowrap !important; } } /* People view visibility and topbar profile alignment fix (2026-05-14). Employee management authority must never defeat the hidden state when other realtime views are active, and the top-right profile cluster should keep the avatar/name/role vertically centered without clipping. */ @media (min-width: 1024px) { body.soc-desktop-shell #peopleView.hidden, body.soc-desktop-adaptive #peopleView.hidden, body.soc-desktop-shell #peopleView[aria-hidden="true"], body.soc-desktop-adaptive #peopleView[aria-hidden="true"] { display: none !important; } body.soc-desktop-shell #peopleView:not(.hidden)[aria-hidden="false"], body.soc-desktop-adaptive #peopleView:not(.hidden)[aria-hidden="false"] { display: grid !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-admin-profile-btn { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) 14px !important; align-items: center !important; column-gap: 10px !important; min-width: 0 !important; max-width: 192px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-admin-profile-copy { display: grid !important; align-content: center !important; gap: 1px !important; min-width: 0 !important; padding-right: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#topbarProfileName, #topbarProfileRole) { display: block !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-align: left !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #topbarProfileName { line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #topbarProfileRole { line-height: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive) .topbar-admin-profile-chevron { display: inline-grid !important; place-items: center !important; align-self: center !important; } } /* Ticket / situation room desktop parity lock (2026-05-14). Keep the two operational tabs on one shared rhythm at 2048px-class widths. */ @media (min-width: 1024px) { html body :is(#alertsView, #ticketsView) { --sentrix-ops-card-height: 84px; --sentrix-ops-card-icon: 32px; --sentrix-ops-card-svg: 22px; --sentrix-ops-control-height: 36px; --sentrix-ops-footer-height: 58px; --sentrix-ops-border: #e7edf5; --sentrix-ops-muted: #6d7890; --sentrix-ops-ink: #122047; --sentrix-ops-accent: #f05a28; } html body :is(#realtimeSummaryGrid.soc-situation-kpi-grid, #ticketSummaryGrid.soc-ticket-reference-summary-grid) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 16px !important; margin: 0 0 16px !important; } html body :is(#realtimeSummaryGrid, #ticketSummaryGrid) > :is(.soc-situation-kpi-card, .soc-ticket-reference-summary-card) { box-sizing: border-box !important; display: grid !important; grid-template-columns: var(--sentrix-ops-card-icon) minmax(0, 1fr) !important; align-content: center !important; align-items: center !important; column-gap: 18px !important; row-gap: 2px !important; width: 100% !important; min-width: 0 !important; min-height: var(--sentrix-ops-card-height) !important; height: var(--sentrix-ops-card-height) !important; padding: 0 28px !important; border: 1px solid var(--sentrix-ops-border) !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; text-align: left !important; } html body #realtimeSummaryGrid > .soc-situation-kpi-card { grid-template-rows: 18px 34px !important; } html body :is(.soc-situation-kpi-icon, .soc-ticket-reference-summary-icon) { display: inline-grid !important; place-items: center !important; align-self: center !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; width: var(--sentrix-ops-card-icon) !important; min-width: var(--sentrix-ops-card-icon) !important; height: var(--sentrix-ops-card-icon) !important; min-height: var(--sentrix-ops-card-icon) !important; margin: 0 !important; padding: 0 !important; color: #111827 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html body :is(.soc-situation-kpi-icon, .soc-ticket-reference-summary-icon) svg { display: block !important; width: var(--sentrix-ops-card-svg) !important; height: var(--sentrix-ops-card-svg) !important; stroke: currentColor !important; stroke-width: 2 !important; fill: none !important; vector-effect: non-scaling-stroke !important; } html body #ticketSummaryGrid .soc-ticket-reference-summary-copy { display: grid !important; align-content: center !important; gap: 2px !important; min-width: 0 !important; } html body #realtimeSummaryGrid .soc-summary-label { grid-column: 2 !important; grid-row: 1 !important; } html body #realtimeSummaryGrid .soc-summary-value { grid-column: 2 !important; grid-row: 2 !important; } html body :is(.soc-summary-label, .soc-ticket-reference-summary-label) { display: block !important; min-width: 0 !important; overflow: hidden !important; color: var(--sentrix-ops-muted) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body :is(.soc-summary-value, .soc-ticket-reference-summary-value) { display: block !important; min-width: 0 !important; color: var(--sentrix-ops-ink) !important; font-size: 30px !important; line-height: 34px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body #summaryImportantCount { color: #ef3b2d !important; } html body :is(.soc-situation-filter-card, #ticketReferenceFilterBar.soc-ticket-reference-filterbar) { box-sizing: border-box !important; display: flex !important; align-items: flex-end !important; flex-wrap: nowrap !important; gap: 12px !important; width: 100% !important; min-height: 82px !important; height: 82px !important; margin: 0 0 8px !important; padding: 12px 20px !important; border: 1px solid var(--sentrix-ops-border) !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; } html body :is(.soc-situation-search-field, .soc-ticket-reference-search) { box-sizing: border-box !important; display: grid !important; grid-template-columns: 18px minmax(0, 1fr) !important; align-items: center !important; gap: 8px !important; flex: 0 0 180px !important; width: 180px !important; height: var(--sentrix-ops-control-height) !important; min-height: var(--sentrix-ops-control-height) !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid #dfe7f2 !important; border-radius: 6px !important; background: #fff !important; } html body :is(.soc-situation-search-field, .soc-ticket-reference-search) :is(span, svg) { width: 16px !important; height: 16px !important; color: #8490a4 !important; stroke-width: 2 !important; } html body :is(.soc-situation-search-field, .soc-ticket-reference-search) input { width: 100% !important; min-width: 0 !important; height: 34px !important; padding: 0 !important; border: 0 !important; outline: 0 !important; color: var(--sentrix-ops-ink) !important; font-size: 12px !important; line-height: 18px !important; font-weight: 600 !important; } html body :is(.soc-situation-filter-field, .soc-ticket-reference-field) { display: grid !important; align-content: end !important; gap: 4px !important; flex: 0 0 150px !important; width: 150px !important; min-width: 0 !important; margin: 0 !important; } html body :is(.soc-situation-filter-field, .soc-ticket-reference-field) > span { display: block !important; height: 16px !important; color: #718099 !important; font-size: 11px !important; line-height: 16px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body :is(.soc-situation-filter-field, .soc-ticket-reference-field) select, html body :is(.soc-situation-page-size, .soc-ticket-reference-page-size) select { box-sizing: border-box !important; height: var(--sentrix-ops-control-height) !important; min-height: var(--sentrix-ops-control-height) !important; padding: 0 28px 0 12px !important; border: 1px solid #dfe7f2 !important; border-radius: 6px !important; background-color: #fff !important; color: var(--sentrix-ops-ink) !important; font-size: 12px !important; line-height: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; } html body .soc-situation-filter-spacer { display: block !important; flex: 1 1 auto !important; min-width: 160px !important; height: var(--sentrix-ops-control-height) !important; border: 1px solid #dfe7f2 !important; border-radius: 6px !important; background: #fff !important; } html body #ticketReferenceResetBtn.soc-ticket-reference-reset { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: var(--sentrix-ops-control-height) !important; min-height: var(--sentrix-ops-control-height) !important; min-width: 88px !important; margin: 0 !important; padding: 0 12px !important; border-radius: 6px !important; font-size: 12px !important; line-height: 18px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body #ticketReferenceResetBtn.soc-ticket-reference-reset :is(span, svg) { width: 16px !important; height: 16px !important; } html body :is(.soc-situation-table-header, .soc-ticket-reference-table-header) { box-sizing: border-box !important; min-height: 42px !important; height: 42px !important; color: #818da2 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 800 !important; letter-spacing: 0 !important; } html body :is(.soc-situation-table-body .incident-card, #ticketsView .soc-ticket-reference-row) { min-height: 52px !important; } html body :is(.soc-situation-table-body .incident-card, #ticketsView .soc-ticket-reference-row), html body :is(.soc-situation-table-body .incident-card, #ticketsView .soc-ticket-reference-row) :is(span, strong, time) { font-size: 13px !important; line-height: 18px !important; letter-spacing: 0 !important; } html body :is(.soc-situation-empty-state, .soc-ticket-reference-empty) { box-sizing: border-box !important; text-align: center !important; } html body :is(.soc-situation-empty-illustration, .soc-ticket-empty-illustration) { width: 144px !important; height: 144px !important; margin: 0 auto 18px !important; } html body :is(.soc-situation-empty-illustration, .soc-ticket-empty-illustration) svg { width: 144px !important; height: 144px !important; } html body :is(.soc-situation-empty-title, .soc-ticket-empty-title) { display: block !important; margin: 0 0 12px !important; color: var(--sentrix-ops-ink) !important; font-size: 16px !important; line-height: 24px !important; font-weight: 800 !important; letter-spacing: 0 !important; } html body :is(.soc-situation-empty-copy, .soc-ticket-empty-copy) { margin: 0 0 22px !important; color: #8793a8 !important; font-size: 12px !important; line-height: 22px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body :is(.soc-situation-empty-reset-btn, .soc-ticket-empty-reset-btn) { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 118px !important; height: 38px !important; min-height: 38px !important; padding: 0 18px !important; border: 1px solid #cdd8e7 !important; border-radius: 6px !important; background: #fff !important; color: var(--sentrix-ops-ink) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 800 !important; letter-spacing: 0 !important; } html body :is(.soc-situation-table-footer, .soc-ticket-reference-list-footer) { box-sizing: border-box !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 12px !important; min-height: var(--sentrix-ops-footer-height) !important; height: var(--sentrix-ops-footer-height) !important; padding: 0 16px !important; border-top: 1px solid var(--sentrix-ops-border) !important; } html body :is(#situationIncidentTotalCount, .soc-ticket-reference-total) { justify-self: start !important; color: var(--sentrix-ops-ink) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body :is(.soc-situation-pagination, .soc-ticket-reference-pagination) { display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: center !important; gap: 8px !important; min-height: 32px !important; } html body :is(.soc-situation-pagination button, .soc-ticket-reference-page-btn) { box-sizing: border-box !important; display: inline-grid !important; place-items: center !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #e1e8f2 !important; border-radius: 8px !important; background: #fff !important; color: #94a0b3 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 800 !important; letter-spacing: 0 !important; box-shadow: none !important; } html body :is(.soc-situation-pagination button.is-active, .soc-ticket-reference-page-btn.is-active) { border-color: var(--sentrix-ops-accent) !important; background: var(--sentrix-ops-accent) !important; color: #fff !important; } html body :is(.soc-situation-pagination button:disabled, .soc-ticket-reference-page-btn:disabled) { opacity: 0.45 !important; cursor: default !important; } html body :is(.soc-situation-page-size, .soc-ticket-reference-page-size) { justify-self: end !important; width: 118px !important; min-width: 118px !important; } html body :is(.soc-situation-page-size, .soc-ticket-reference-page-size) select { width: 118px !important; } } /* Ticket / situation room parity specificity reinforcement. Older reference locks use active-view :has() selectors, so this block mirrors that specificity while keeping the shared 2048px sizing contract. */ @media (min-width: 1024px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid.soc-situation-kpi-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch !important; margin: 0 0 16px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid.soc-situation-kpi-grid > .soc-summary-card.soc-situation-kpi-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card { box-sizing: border-box !important; display: grid !important; grid-template-columns: 32px minmax(0, 1fr) !important; align-content: center !important; align-items: center !important; column-gap: 18px !important; row-gap: 2px !important; min-height: 84px !important; height: 84px !important; padding: 0 28px !important; border: 1px solid #e7edf5 !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; text-align: left !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid.soc-situation-kpi-grid > .soc-summary-card.soc-situation-kpi-card { grid-template-rows: 18px 34px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-card .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-card .soc-ticket-reference-summary-icon { display: inline-grid !important; place-items: center !important; align-self: center !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 !important; padding: 0 !important; color: #111827 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-card .soc-situation-kpi-icon svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-card .soc-ticket-reference-summary-icon svg { width: 22px !important; height: 22px !important; stroke: currentColor !important; stroke-width: 2 !important; fill: none !important; vector-effect: non-scaling-stroke !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-summary-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-label { color: #6d7890 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-summary-value, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-value { color: #122047 !important; font-size: 30px !important; line-height: 34px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #summaryImportantCount { color: #ef3b2d !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-filter-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar { box-sizing: border-box !important; display: flex !important; align-items: flex-end !important; flex-wrap: nowrap !important; gap: 12px !important; min-height: 82px !important; height: 82px !important; margin: 0 0 8px !important; padding: 12px 20px !important; border: 1px solid #e7edf5 !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-search-field, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-search { box-sizing: border-box !important; display: grid !important; grid-template-columns: 18px minmax(0, 1fr) !important; align-items: center !important; gap: 8px !important; flex: 0 0 180px !important; width: 180px !important; height: 36px !important; min-height: 36px !important; padding: 0 12px !important; border: 1px solid #dfe7f2 !important; border-radius: 6px !important; background: #fff !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-filter-field, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-field { display: grid !important; align-content: end !important; gap: 4px !important; flex: 0 0 150px !important; width: 150px !important; min-width: 0 !important; margin: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-filter-field > span, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-field > span { height: 16px !important; color: #718099 !important; font-size: 11px !important; line-height: 16px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-filter-field select, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-field select, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-page-size select, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-page-size select { box-sizing: border-box !important; height: 36px !important; min-height: 36px !important; padding: 0 28px 0 12px !important; border: 1px solid #dfe7f2 !important; border-radius: 6px !important; background-color: #fff !important; color: #122047 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-filter-spacer { display: block !important; flex: 1 1 auto !important; min-width: 160px !important; height: 36px !important; border: 1px solid #dfe7f2 !important; border-radius: 6px !important; background: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketReferenceResetBtn.soc-ticket-reference-reset { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: 36px !important; min-height: 36px !important; min-width: 88px !important; padding: 0 12px !important; border-radius: 6px !important; font-size: 12px !important; line-height: 18px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-table-header { min-height: 42px !important; height: 42px !important; color: #818da2 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 800 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeEmptyState.soc-situation-empty-state .soc-situation-empty-illustration, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketsEmptyState.soc-ticket-reference-empty .soc-ticket-empty-illustration, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeEmptyState.soc-situation-empty-state .soc-situation-empty-illustration svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketsEmptyState.soc-ticket-reference-empty .soc-ticket-empty-illustration svg { width: 144px !important; height: 144px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeEmptyState.soc-situation-empty-state .soc-situation-empty-title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketsEmptyState.soc-ticket-reference-empty .soc-ticket-empty-title { color: #122047 !important; font-size: 16px !important; line-height: 24px !important; font-weight: 800 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeEmptyState.soc-situation-empty-state .soc-situation-empty-copy, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketsEmptyState.soc-ticket-reference-empty .soc-ticket-empty-copy { color: #8793a8 !important; font-size: 12px !important; line-height: 22px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-empty-reset-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-empty-reset-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 118px !important; height: 38px !important; min-height: 38px !important; padding: 0 18px !important; border: 1px solid #cdd8e7 !important; border-radius: 6px !important; background: #fff !important; color: #122047 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 800 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-footer, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-footer { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 12px !important; min-height: 58px !important; height: 58px !important; padding: 0 16px !important; border-top: 1px solid #e7edf5 !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #situationPagination.soc-situation-pagination, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketReferencePagination.soc-ticket-reference-pagination { display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: center !important; gap: 8px !important; min-height: 32px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #situationPagination.soc-situation-pagination button, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketReferencePagination.soc-ticket-reference-pagination .soc-ticket-reference-page-btn { display: inline-grid !important; place-items: center !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; border: 1px solid #e1e8f2 !important; border-radius: 8px !important; background: #fff !important; color: #94a0b3 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 800 !important; letter-spacing: 0 !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #situationPagination.soc-situation-pagination button.is-active, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketReferencePagination.soc-ticket-reference-pagination .soc-ticket-reference-page-btn.is-active { border-color: #f05a28 !important; background: #f05a28 !important; color: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView:has(.soc-ticket-reference-main.is-empty-result) #ticketReferenceFilterBar.soc-ticket-reference-filterbar { display: flex !important; grid-template-columns: none !important; align-items: flex-end !important; flex-wrap: nowrap !important; gap: 12px !important; min-height: 82px !important; height: 82px !important; padding: 12px 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result .soc-ticket-reference-list-footer { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 12px !important; flex: initial !important; min-height: 58px !important; height: 58px !important; padding: 0 16px !important; border-top: 1px solid #e7edf5 !important; background: #fff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result #ticketReferencePagination.soc-ticket-reference-pagination .soc-ticket-reference-page-btn { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; border-radius: 8px !important; font-size: 13px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result #ticketReferencePageSizeSelect { width: 118px !important; min-width: 118px !important; height: 36px !important; min-height: 36px !important; color: #122047 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 700 !important; } } /* Design-freeze employee text/icon cleanup (2026-05-21). Preserve the current Sentrix desktop visual design; only remove redundant copy, inert row actions, and text/icon clipping in the existing layout. */ @media (min-width: 1024px) { body.soc-desktop-shell #peopleView .soc-people-pane-summary-head, body.soc-desktop-adaptive #peopleView .soc-people-pane-summary-head, body.soc-desktop-shell #peopleView .soc-people-reference-action-head, body.soc-desktop-adaptive #peopleView .soc-people-reference-action-head, body.soc-desktop-shell #peopleView .soc-people-reference-actions-cell, body.soc-desktop-adaptive #peopleView .soc-people-reference-actions-cell, body.soc-desktop-shell #peopleView .soc-people-reference-more-btn, body.soc-desktop-adaptive #peopleView .soc-people-reference-more-btn { display: none !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-copy .label, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-copy .label, body.soc-desktop-shell #peopleView .soc-people-reference-legend-label, body.soc-desktop-adaptive #peopleView .soc-people-reference-legend-label, body.soc-desktop-shell #peopleView .soc-people-reference-primary, body.soc-desktop-adaptive #peopleView .soc-people-reference-primary { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-search, body.soc-desktop-adaptive #peopleView .soc-employee-directory-search, body.soc-desktop-shell #peopleView .soc-employee-directory-field, body.soc-desktop-adaptive #peopleView .soc-employee-directory-field { min-width: 0 !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-search svg, body.soc-desktop-adaptive #peopleView .soc-employee-directory-search svg { z-index: 1 !important; pointer-events: none !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-search input, body.soc-desktop-adaptive #peopleView .soc-employee-directory-search input { padding-left: 44px !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-field > span, body.soc-desktop-adaptive #peopleView .soc-employee-directory-field > span { white-space: nowrap !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table, body.soc-desktop-adaptive #peopleView .soc-employee-directory-table { width: 100% !important; min-width: 0 !important; table-layout: fixed !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table th, body.soc-desktop-adaptive #peopleView .soc-employee-directory-table th, body.soc-desktop-shell #peopleView .soc-employee-directory-table td, body.soc-desktop-adaptive #peopleView .soc-employee-directory-table td { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th:nth-child(1), body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th:nth-child(1) { width: 21% !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th:nth-child(2), body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th:nth-child(2) { width: 14% !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th:nth-child(3), body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th:nth-child(3) { width: 18% !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th:nth-child(4), body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th:nth-child(4) { width: 18% !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th:nth-child(5), body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th:nth-child(5) { width: 14% !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th:nth-child(6), body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th:nth-child(6) { width: 15% !important; } } @media (min-width: 1024px) and (max-width: 1199px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#peopleView:not(.hidden)) .container.admin-layout { padding: 18px 18px 34px !important; } body.soc-desktop-shell #peopleView, body.soc-desktop-adaptive #peopleView { gap: 16px !important; } body.soc-desktop-shell #peopleView #peopleHubEmployeesPane, body.soc-desktop-adaptive #peopleView #peopleHubEmployeesPane { gap: 16px !important; } body.soc-desktop-shell #peopleView .soc-people-pane-summary, body.soc-desktop-adaptive #peopleView .soc-people-pane-summary, body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar, body.soc-desktop-adaptive #peopleView .soc-employee-directory-toolbar, body.soc-desktop-shell #peopleView .soc-employee-directory-grid, body.soc-desktop-adaptive #peopleView .soc-employee-directory-grid { border-radius: 16px !important; } body.soc-desktop-shell #peopleView .soc-people-pane-summary, body.soc-desktop-adaptive #peopleView .soc-people-pane-summary { padding: 14px 16px 16px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-summary-shell, body.soc-desktop-adaptive #peopleView .soc-people-reference-summary-shell { grid-template-columns: minmax(250px, 0.47fr) minmax(0, 0.53fr) !important; gap: 14px !important; align-items: stretch !important; } body.soc-desktop-shell #peopleView .soc-people-reference-summary-left, body.soc-desktop-adaptive #peopleView .soc-people-reference-summary-left { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border: 1px solid #e8edf5 !important; border-radius: 14px !important; overflow: hidden !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat:nth-child(odd), body.soc-desktop-adaptive #peopleView .soc-people-reference-stat:nth-child(odd) { border-right: 1px solid #e8edf5 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat:nth-child(-n + 2), body.soc-desktop-adaptive #peopleView .soc-people-reference-stat:nth-child(-n + 2) { border-bottom: 1px solid #e8edf5 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-divider, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-divider { display: none !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat { grid-template-columns: 34px minmax(0, 1fr) !important; gap: 9px !important; min-height: 70px !important; padding: 10px 11px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-icon, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-icon { width: 34px !important; height: 34px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-icon svg, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-icon svg { width: 20px !important; height: 20px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-copy, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-copy { gap: 1px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-copy .label, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-copy .label { font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-stat-copy strong, body.soc-desktop-adaptive #peopleView .soc-people-reference-stat-copy strong { font-size: 18px !important; line-height: 24px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-summary-right, body.soc-desktop-adaptive #peopleView .soc-people-reference-summary-right { grid-template-columns: minmax(0, 1fr) !important; border: 1px solid #e8edf5 !important; border-radius: 14px !important; overflow: hidden !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-block, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-block { grid-template-columns: 76px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-block + .soc-people-reference-donut-block, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-block + .soc-people-reference-donut-block { border-left: 0 !important; border-top: 1px solid #e8edf5 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-block h4, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-block h4 { align-self: start !important; grid-column: 1 / -1 !important; font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-block .soc-people-reference-donut-layout, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-block .soc-people-reference-donut-layout { display: contents !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-layout, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-layout { grid-template-columns: 76px minmax(0, 1fr) !important; gap: 10px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut { width: 74px !important; height: 74px !important; margin: 0 !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut::after, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut::after { inset: 9px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-center span, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-center span { font-size: 10px !important; line-height: 12px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-donut-center strong, body.soc-desktop-adaptive #peopleView .soc-people-reference-donut-center strong { font-size: 15px !important; line-height: 18px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-legend-row, body.soc-desktop-adaptive #peopleView .soc-people-reference-legend-row { grid-template-columns: minmax(0, 1fr) 22px 48px !important; gap: 6px !important; font-size: 11px !important; line-height: 14px !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar, body.soc-desktop-adaptive #peopleView .soc-employee-directory-toolbar { padding: 14px 16px !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar-row, body.soc-desktop-adaptive #peopleView .soc-employee-directory-toolbar-row { display: block !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar-main, body.soc-desktop-adaptive #peopleView .soc-employee-directory-toolbar-main { display: grid !important; grid-template-columns: minmax(250px, 1.4fr) repeat(3, minmax(126px, 1fr)) !important; gap: 12px !important; align-items: end !important; width: 100% !important; flex: initial !important; min-width: 0 !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-search, body.soc-desktop-adaptive #peopleView .soc-employee-directory-search, body.soc-desktop-shell #peopleView :is(#employeeSiteFilterWrap, .soc-employee-directory-field[for="peopleRoleFilter"], .soc-employee-directory-field[for="peopleDirectorySortSelect"]), body.soc-desktop-adaptive #peopleView :is(#employeeSiteFilterWrap, .soc-employee-directory-field[for="peopleRoleFilter"], .soc-employee-directory-field[for="peopleDirectorySortSelect"]) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 5px !important; min-width: 0 !important; max-width: none !important; width: 100% !important; flex: initial !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-search, body.soc-desktop-adaptive #peopleView .soc-employee-directory-search { align-self: end !important; } body.soc-desktop-shell #peopleView :is(#employeeSiteFilterWrap, .soc-employee-directory-field[for="peopleRoleFilter"], .soc-employee-directory-field[for="peopleDirectorySortSelect"]) > span, body.soc-desktop-adaptive #peopleView :is(#employeeSiteFilterWrap, .soc-employee-directory-field[for="peopleRoleFilter"], .soc-employee-directory-field[for="peopleDirectorySortSelect"]) > span { font-size: 12px !important; line-height: 16px !important; } body.soc-desktop-shell #peopleView :is(.soc-employee-directory-search input, #employeeSiteFilter, #peopleRoleFilter, #peopleDirectorySortSelect), body.soc-desktop-adaptive #peopleView :is(.soc-employee-directory-search input, #employeeSiteFilter, #peopleRoleFilter, #peopleDirectorySortSelect) { width: 100% !important; height: 40px !important; min-height: 40px !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-grid-wrap, body.soc-desktop-adaptive #peopleView .soc-employee-directory-grid-wrap { max-width: 100% !important; overflow-x: hidden !important; } body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th, body.soc-desktop-adaptive #peopleView .soc-employee-directory-table thead th, body.soc-desktop-shell #peopleView .soc-employee-directory-table tbody td, body.soc-desktop-adaptive #peopleView .soc-employee-directory-table tbody td { padding-inline: 8px !important; font-size: 12px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-identity, body.soc-desktop-adaptive #peopleView .soc-people-reference-identity { grid-template-columns: 30px minmax(0, 1fr) !important; gap: 8px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-avatar, body.soc-desktop-adaptive #peopleView .soc-people-reference-avatar { width: 30px !important; height: 30px !important; font-size: 9px !important; } body.soc-desktop-shell #peopleView .soc-people-reference-pill, body.soc-desktop-adaptive #peopleView .soc-people-reference-pill { min-height: 24px !important; padding-inline: 8px !important; font-size: 11px !important; } } /* Final load-order guard: ops-support visible correction, 1024/1920/2048 (2026-05-22). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) { overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) :is(#opsSupportReferenceRoot, .ops-ref-shell, .ops-ref-main) { max-width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-summary { width: 100% !important; max-width: 100% !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-summary-item { min-width: 0 !important; align-content: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-summary-item :is(span, strong) { max-width: 100% !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) :is(.ops-ref-filter, .ops-ref-filter-button) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-month-nav { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-list-pager { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; padding: 12px 0 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-pagination { display: inline-flex !important; align-items: center !important; gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-pagination button, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-month-nav [data-action="ops-support-month-prev"], html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-month-nav [data-action="ops-support-month-next"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; min-width: 36px !important; padding: 0 !important; font-size: 18px !important; line-height: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-pagination .is-active { border-color: var(--ops-ref-orange) !important; color: var(--ops-ref-orange) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-detail-empty { display: grid !important; justify-items: center !important; align-content: center !important; min-height: 160px !important; text-align: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-detail-empty-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; margin-bottom: 10px !important; color: #8a97ad !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-detail-empty-icon svg { width: 44px !important; height: 44px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.7 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } } @media (min-width: 1024px) and (max-width: 1279px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) { padding: 24px 24px 32px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border-radius: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-summary-item { min-height: 66px !important; padding: 10px 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-summary-item.is-month, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-month-nav, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-view-toggle { grid-column: 1 / -1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin: 16px 0 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-view-toggle { justify-self: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-calendar-cell { min-height: 104px !important; padding: 8px !important; } } @media (min-width: 1280px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-summary { grid-template-columns: minmax(160px, 1.18fr) repeat(7, minmax(96px, 1fr)) !important; } } /* Final visual unification guard: icons, people summary, empty states, profile/settings (2026-05-22). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #peopleView .soc-people-admin-header-wrap, #peopleView .soc-people-pane-summary-head, #myProfileView .soc-workspace-page-title, #myProfileView .workspace-head-main, #hqReminderPanel .soc-settings-page-header, #notificationSettingsPanel .soc-settings-page-header ) { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon, .mobile-nav-actions .soc-menu-item-icon) { width: 24px !important; height: 24px !important; min-width: 24px !important; display: inline-grid !important; place-items: center !important; color: var(--soc-text-primary, #0f172a) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon, .mobile-nav-actions .soc-menu-item-icon) :is(.sentrix-theme-icon, .sentrix-line-icon, .soc-menu-icon-img, svg, img) { width: 22px !important; height: 22px !important; min-width: 22px !important; max-width: 22px !important; display: block !important; object-fit: contain !important; stroke-width: 1.9 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(.soc-bottom-tab-icon-img, .sentrix-line-icon) { fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) svg.sentrix-line-icon.soc-menu-icon-img, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) svg.sentrix-theme-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions svg.sentrix-line-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel .mobile-nav-actions svg.sentrix-theme-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; max-width: 22px !important; transform: none !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( .sentrix-home-kpi-icon, .soc-situation-kpi-icon, .soc-ticket-reference-summary-icon, .soc-people-kpi-icon, .soc-people-reference-stat-icon ) { width: 44px !important; height: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; display: inline-grid !important; place-items: center !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( .sentrix-home-kpi-icon, .soc-situation-kpi-icon, .soc-ticket-reference-summary-icon, .soc-people-kpi-icon, .soc-people-reference-stat-icon ) svg { width: 30px !important; height: 30px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( .sentrix-home-kpi-icon, .soc-situation-kpi-icon, .soc-ticket-reference-summary-icon, .soc-people-kpi-icon, .soc-people-reference-stat-icon, .soc-empty-state-icon, .sentrix-home-inline-empty-icon, .report-choice-icon ) svg :is(path, circle, rect, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .report-choice-icon-svg { width: 28px !important; height: 28px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-card[data-tone="incident"] .sentrix-home-kpi-badge { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#realtimeSummaryGrid.soc-situation-kpi-grid, #ticketSummaryGrid.soc-ticket-reference-summary-grid) { gap: 16px !important; align-items: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #realtimeSummaryGrid > .soc-situation-kpi-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketSummaryGrid > .soc-ticket-reference-summary-card { min-height: 86px !important; display: grid !important; grid-template-columns: 54px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: 14px !important; align-items: center !important; padding: 18px 20px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #realtimeSummaryGrid > .soc-situation-kpi-card .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketSummaryGrid > .soc-ticket-reference-summary-card .soc-ticket-reference-summary-icon { grid-row: 1 / span 2 !important; grid-column: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #realtimeSummaryGrid > .soc-situation-kpi-card .soc-summary-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketSummaryGrid .soc-ticket-reference-summary-label { grid-column: 2 !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; color: var(--soc-text-primary, #0f172a) !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #realtimeSummaryGrid > .soc-situation-kpi-card .soc-summary-value, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketSummaryGrid .soc-ticket-reference-summary-value { grid-column: 2 !important; font-size: 30px !important; line-height: 36px !important; font-weight: 800 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-pane-summary { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleOverviewKpiStrip { display: block !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell { width: 100% !important; display: grid !important; grid-template-columns: minmax(440px, 0.95fr) minmax(0, 1.35fr) !important; align-items: stretch !important; gap: 0 !important; min-width: 0 !important; overflow: hidden !important; border: 1px solid var(--soc-border-subtle, #e5e7eb) !important; border-radius: 8px !important; background: var(--soc-surface, #fff) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-left { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; min-width: 0 !important; align-items: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat { min-width: 0 !important; min-height: 116px !important; display: grid !important; grid-template-columns: 46px minmax(0, 1fr) !important; align-items: center !important; gap: 14px !important; padding: 0 20px !important; border-radius: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat:not(:last-child) { border-right: 1px solid var(--soc-border-subtle, #e5e7eb) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat.is-active { background: color-mix(in srgb, var(--soc-accent, #ff6b2c) 7%, transparent) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-divider { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-copy { min-width: 0 !important; display: grid !important; gap: 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-copy .label { font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; color: var(--soc-text-secondary, #667085) !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-copy strong { font-size: 22px !important; line-height: 28px !important; letter-spacing: 0 !important; color: var(--soc-text-primary, #0f172a) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-copy em { margin-left: 2px !important; font-size: 13px !important; font-style: normal !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-right { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; min-width: 0 !important; border-left: 1px solid var(--soc-border-subtle, #e5e7eb) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut-block { min-width: 0 !important; padding: 16px 18px !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; align-content: center !important; gap: 12px !important; border: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut-block + .soc-people-reference-donut-block { border-left: 1px solid var(--soc-border-subtle, #e5e7eb) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut-block h4 { margin: 0 !important; text-align: center !important; font-size: 14px !important; line-height: 20px !important; font-weight: 800 !important; color: var(--soc-text-primary, #0f172a) !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut-layout { display: grid !important; grid-template-columns: 118px minmax(0, 1fr) !important; gap: 16px !important; align-items: center !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut { width: 118px !important; height: 118px !important; min-width: 118px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut::after { inset: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut-center { display: grid !important; place-items: center !important; gap: 2px !important; text-align: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut-center span { max-width: 72px !important; font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut-center strong { font-size: 21px !important; line-height: 26px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut-center em { margin-left: 1px !important; font-size: 12px !important; font-style: normal !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-legend { min-width: 0 !important; display: grid !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-legend-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 28px 56px !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; font-size: 12px !important; line-height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-legend-label { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-legend-label i { width: 7px !important; height: 7px !important; min-width: 7px !important; border-radius: 999px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-legend-row > strong, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-legend-row > span:last-child { justify-self: end !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-toolbar { padding: 16px 18px !important; border-radius: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-toolbar-main { display: grid !important; grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(150px, 1fr)) !important; gap: 14px !important; align-items: end !important; width: 100% !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-field { min-width: 0 !important; width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; align-self: end !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-field > span { min-height: 16px !important; margin: 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; color: var(--soc-text-secondary, #667085) !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-search { position: relative !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-search > span { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-search::before { content: "" !important; position: absolute !important; left: 16px !important; top: 50% !important; width: 15px !important; height: 15px !important; border: 2px solid var(--soc-text-muted, #98a2b3) !important; border-radius: 999px !important; transform: translateY(-50%) !important; pointer-events: none !important; z-index: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-search::after { content: "" !important; position: absolute !important; left: 29px !important; top: calc(50% + 9px) !important; width: 7px !important; height: 2px !important; border-radius: 999px !important; background: var(--soc-text-muted, #98a2b3) !important; transform: rotate(45deg) !important; pointer-events: none !important; z-index: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView :is(.soc-employee-directory-search input, #employeeSiteFilter, #peopleRoleFilter, #peopleDirectorySortSelect) { width: 100% !important; height: 42px !important; min-height: 42px !important; padding: 0 14px !important; border-radius: 8px !important; font-size: 13px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-search input { padding-left: 44px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-search input#peopleDirectorySearchInput { padding-left: 44px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-table { table-layout: fixed !important; width: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-table thead th, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-table tbody td { height: 56px !important; padding: 12px 16px !important; vertical-align: middle !important; font-size: 13px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView :is(.soc-people-reference-action-head, .soc-people-reference-actions-cell, .soc-people-reference-more-btn) { display: none !important; } #homeEmptyState:not(.hidden), .sentrix-home-inline-empty { display: grid !important; place-items: center !important; align-content: center !important; gap: 8px !important; min-height: 148px !important; padding: 28px 18px !important; text-align: center !important; color: var(--soc-text-secondary, #667085) !important; } .sentrix-home-empty-cell { padding: 24px !important; } :is(.soc-empty-state-icon, .sentrix-home-inline-empty-icon) { width: 58px !important; height: 58px !important; display: inline-grid !important; place-items: center !important; color: var(--soc-text-muted, #8a97ad) !important; background: transparent !important; border: 0 !important; } :is(.soc-empty-state-icon, .sentrix-home-inline-empty-icon) svg { width: 52px !important; height: 52px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } :is(.soc-situation-empty-state, .soc-ticket-reference-empty, .soc-ops-workspace-empty-state) { display: grid !important; justify-items: center !important; align-content: center !important; min-height: 420px !important; text-align: center !important; } :is(.soc-situation-empty-state, .soc-ticket-reference-empty, .soc-ops-workspace-empty-state).hidden { display: none !important; } :is(.sentrix-home-inline-empty, #homeEmptyState) strong { font-size: 15px !important; line-height: 21px !important; font-weight: 800 !important; color: var(--soc-text-primary, #0f172a) !important; } :is(.sentrix-home-inline-empty, #homeEmptyState) p { margin: 0 !important; font-size: 13px !important; line-height: 20px !important; color: var(--soc-text-secondary, #667085) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#myProfileView, #hqReminderPanel, #notificationSettingsPanel) { min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 96px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView :is( .soc-profile-command-stage, .soc-profile-top-shell, .soc-profile-account-strip, .soc-profile-counter-shell, .soc-profile-info-list, .soc-profile-record-section, .soc-profile-account-workspace, .soc-profile-account-panel, .soc-profile-account-card, .soc-profile-account-form-section ), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel) :is( .soc-settings-single-column, .soc-system-section-card, .soc-reminder-config-card, .soc-notification-settings-card, .soc-reminder-form, .soc-notification-settings-form ) { border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView :is(.soc-profile-command-stage, .soc-profile-top-shell) { padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView .soc-profile-account-strip { border-bottom: 1px solid var(--soc-border-subtle, #e5e7eb) !important; padding: 28px 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView :is(.soc-profile-counter-shell, .soc-profile-info-list, .soc-profile-record-section) { padding: 22px 0 !important; border-top: 1px solid var(--soc-border-subtle, #e5e7eb) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView .soc-profile-record-section { background: var(--soc-surface, #fff) !important; border-radius: 8px !important; padding: 22px !important; border: 1px solid var(--soc-border-subtle, #e5e7eb) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel) .soc-settings-single-column { display: grid !important; gap: 20px !important; max-width: min(980px, 100%) !important; margin: 0 auto !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #hqReminderPanel .soc-reminder-config-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-settings-card { display: grid !important; gap: 14px !important; padding: 0 0 22px !important; border-bottom: 1px solid var(--soc-border-subtle, #e5e7eb) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel) :is(.soc-reminder-row, .soc-notification-state-row, .soc-notification-check-row) { min-height: 54px !important; padding: 14px 0 !important; border: 0 !important; border-bottom: 1px solid var(--soc-border-subtle, #e5e7eb) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #hqReminderPanel :is(.soc-reminder-preview-box, .soc-reminder-danger-zone), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-permission-banner { border: 1px dashed var(--soc-border-subtle, #d0d5dd) !important; border-radius: 8px !important; background: color-mix(in srgb, var(--soc-surface-muted, #f8fafc) 72%, transparent) !important; box-shadow: none !important; } } @media (min-width: 1024px) and (max-width: 1279px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #realtimeSummaryGrid.soc-situation-kpi-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketSummaryGrid.soc-ticket-reference-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell { grid-template-columns: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-right { border-left: 0 !important; border-top: 1px solid var(--soc-border-subtle, #e5e7eb) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat { min-height: 88px !important; padding: 0 14px !important; gap: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut-block { padding: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut-layout { grid-template-columns: 106px minmax(0, 1fr) !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut { width: 106px !important; height: 106px !important; min-width: 106px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-toolbar-main { grid-template-columns: minmax(260px, 1.4fr) minmax(150px, 1fr) !important; } } @media (min-width: 1280px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #realtimeSummaryGrid.soc-situation-kpi-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketSummaryGrid.soc-ticket-reference-summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell, html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView .soc-profile-record-section { background: var(--soc-surface, #111827) !important; border-color: var(--soc-border-subtle, rgba(148, 163, 184, 0.28)) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(.soc-empty-state-icon, .sentrix-home-inline-empty-icon) { color: var(--soc-text-muted, #98a2b3) !important; } @media (min-width: 1024px) and (max-width: 1279px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-grid, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid.soc-situation-kpi-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-summary-label, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-label { overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-filter-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; height: auto !important; min-height: 0 !important; align-items: end !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-search-field, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-filter-field, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-search, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-field { width: 100% !important; flex: 1 1 auto !important; } } @media (min-width: 1024px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) svg.sentrix-line-icon.soc-menu-icon-img, html body:not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) svg.sentrix-line-icon.soc-menu-icon-img, html body:not(.soc-auth-shell-active):has(#reportPanel:not(.hidden)) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) svg.sentrix-line-icon.soc-menu-icon-img { width: 22px !important; height: 22px !important; min-width: 22px !important; max-width: 22px !important; transform: none !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid.soc-situation-kpi-grid .soc-situation-kpi-icon svg, html body:not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid .soc-ticket-reference-summary-icon svg { width: 30px !important; height: 30px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid .soc-ticket-reference-summary-card .soc-ticket-reference-summary-icon svg { width: 30px !important; height: 30px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid.soc-situation-kpi-grid .soc-situation-kpi-icon svg :is(path, circle, rect, line, polyline, polygon), html body:not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid .soc-ticket-reference-summary-icon svg :is(path, circle, rect, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid .soc-ticket-reference-summary-card .soc-ticket-reference-summary-icon svg :is(path, circle, rect, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } } @media (min-width: 1024px) and (max-width: 1279px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference.is-active) #alertsView.soc-situation-reference.is-active .soc-situation-filter-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view.is-active) #ticketsView.soc-ops-workspace-view.is-active #ticketReferenceFilterBar.soc-ticket-reference-filterbar, html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) .soc-situation-filter-card, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) #ticketReferenceFilterBar.soc-ticket-reference-filterbar { box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; height: auto !important; min-height: 230px !important; overflow: visible !important; align-items: end !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference.is-active) #alertsView.soc-situation-reference.is-active .soc-situation-filter-spacer { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference.is-active) #alertsView.soc-situation-reference.is-active .soc-situation-search-field, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference.is-active) #alertsView.soc-situation-reference.is-active .soc-situation-filter-field, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view.is-active) #ticketsView.soc-ops-workspace-view.is-active .soc-ticket-reference-search, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view.is-active) #ticketsView.soc-ops-workspace-view.is-active .soc-ticket-reference-field, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view.is-active) #ticketsView.soc-ops-workspace-view.is-active .soc-ticket-reference-reset, html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) .soc-situation-search-field, html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) .soc-situation-filter-field, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) .soc-ticket-reference-search, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) .soc-ticket-reference-field, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) .soc-ticket-reference-reset { width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference.is-active) #alertsView.soc-situation-reference.is-active .soc-situation-search-field, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view.is-active) #ticketsView.soc-ops-workspace-view.is-active .soc-ticket-reference-search, html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) .soc-situation-search-field, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) .soc-ticket-reference-search { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important; align-items: center !important; height: 42px !important; min-height: 42px !important; padding: 0 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference.is-active) #alertsView.soc-situation-reference.is-active #situationIncidentSearchInput, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view.is-active) #ticketsView.soc-ops-workspace-view.is-active #ticketReferenceSearchInput, html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) #situationIncidentSearchInput, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) #ticketReferenceSearchInput { height: 40px !important; min-height: 40px !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } } /* Current-turn repair: sidebar icon pack, people summary labels, settings scroll. */ @media (min-width: 1024px) { html body:not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) { width: 22px !important; min-width: 22px !important; height: 22px !important; display: inline-grid !important; place-items: center !important; color: currentColor !important; } html body:not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) :is(svg, img, .sentrix-theme-icon, .sentrix-line-icon, .soc-menu-icon-img) { width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; display: block !important; transform: none !important; } html body:not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) svg :is(path, circle, rect, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-copy .label { min-width: 0 !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: normal !important; line-height: 18px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat { align-items: center !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-copy { min-width: 0 !important; display: grid !important; gap: 3px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-copy .value { white-space: nowrap !important; line-height: 1.2 !important; } html body:not(.soc-auth-shell-active) main.container.admin-layout:has(#hqReminderPanel:not(.hidden)), html body:not(.soc-auth-shell-active) main.container.admin-layout:has(#notificationSettingsPanel:not(.hidden)), html body:not(.soc-auth-shell-active) main.container.admin-layout:has(#auditPanel:not(.hidden)) { align-items: stretch !important; overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 128px !important; } html body:not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel, #auditPanel).soc-settings-panel.hidden { display: none !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel, #auditPanel).soc-settings-panel:not(.hidden) { width: min(1120px, 100%) !important; max-width: 1120px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding: 24px 24px 132px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; align-self: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) main.container.admin-layout > :is(#hqReminderPanel, #notificationSettingsPanel, #auditPanel).admin-tab-content.soc-workspace-panel.soc-settings-panel:not(.hidden) { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; } html body:not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel, #auditPanel).soc-settings-panel:not(.hidden) > .soc-settings-shell-bar { margin: 0 0 22px !important; border: 1px solid var(--soc-border-subtle, #e5e7eb) !important; border-radius: 8px !important; background: var(--soc-surface, #fff) !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel, #auditPanel) .soc-settings-page-header { margin: 0 0 18px !important; padding: 0 0 16px !important; border: 0 !important; border-bottom: 1px solid var(--soc-border-subtle, #e5e7eb) !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel) .soc-settings-single-column { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 0 !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .soc-reminder-config-card, html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-settings-card { width: 100% !important; display: grid !important; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important; column-gap: 34px !important; row-gap: 18px !important; padding: 0 0 34px !important; border: 0 !important; border-bottom: 1px solid var(--soc-border-subtle, #e5e7eb) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .soc-reminder-card-head, html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-reminder-card-head { align-self: start !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .soc-reminder-form, html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-settings-form { min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel) :is(.soc-reminder-row, .soc-notification-state-row, .soc-notification-check-row) { min-width: 0 !important; min-height: 56px !important; padding: 14px 0 !important; border: 0 !important; border-bottom: 1px solid var(--soc-border-subtle, #e5e7eb) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel :is(.soc-reminder-config-card, .soc-reminder-form, .soc-reminder-advanced, .soc-reminder-advanced-body, .sla-settings-rows, .soc-reminder-danger-zone) { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; contain: none !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .soc-reminder-config-card { align-items: start !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .soc-reminder-advanced[open] { display: block !important; inline-size: 100% !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .soc-reminder-advanced-body { display: grid !important; gap: 14px !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .sla-settings-rows { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; gap: 10px 14px !important; width: 100% !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .sla-setting-row { min-width: 0 !important; min-height: 42px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 88px !important; align-items: center !important; gap: 10px !important; padding: 0 !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .sla-setting-row span { min-width: 0 !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; word-break: keep-all !important; line-height: 18px !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .sla-minutes-input { width: 88px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-check-copy { min-width: 0 !important; } } @media (min-width: 1024px) and (max-width: 1279px) { html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell { grid-template-columns: minmax(0, 1fr) !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-left { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border-bottom: 1px solid var(--soc-border-subtle, #e5e7eb) !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat { min-height: 92px !important; grid-template-columns: 40px minmax(0, 1fr) !important; gap: 12px !important; padding: 12px 16px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat:not(:last-child) { border-right: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat:nth-child(odd) { border-right: 1px solid var(--soc-border-subtle, #e5e7eb) !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat:nth-child(-n + 2) { border-bottom: 1px solid var(--soc-border-subtle, #e5e7eb) !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-icon { width: 40px !important; height: 40px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-icon svg { width: 22px !important; height: 22px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-right { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border-left: 0 !important; border-top: 1px solid var(--soc-border-subtle, #e5e7eb) !important; } html body:not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel, #auditPanel).soc-settings-panel:not(.hidden) { padding: 20px 18px 144px !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .soc-reminder-config-card, html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-settings-card { grid-template-columns: minmax(0, 1fr) !important; row-gap: 18px !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .sla-settings-rows { grid-template-columns: minmax(0, 1fr) !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .sla-setting-row { grid-template-columns: minmax(0, 1fr) 84px !important; } } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel, #auditPanel).soc-settings-panel:not(.hidden) > .soc-settings-shell-bar { background: var(--soc-surface, #111827) !important; border-color: var(--soc-border-subtle, rgba(148, 163, 184, 0.28)) !important; } /* Current-turn repair: opaque empty state icons with thinner strokes (2026-05-22). */ @media (min-width: 1024px) { html body:not(.soc-auth-shell-active) #homeEmptyState.soc-home-state .soc-empty-state-icon, html body:not(.soc-auth-shell-active) .sentrix-home-inline-empty .sentrix-home-inline-empty-icon, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeEmptyState.soc-situation-empty-state .soc-situation-empty-illustration, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketsEmptyState.soc-ticket-reference-empty .soc-ticket-empty-illustration { color: #64748b !important; opacity: 1 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.soc-auth-shell-active) #homeEmptyState.soc-home-state .soc-empty-state-icon svg, html body:not(.soc-auth-shell-active) .sentrix-home-inline-empty .sentrix-home-inline-empty-icon svg, html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeEmptyState.soc-situation-empty-state .soc-situation-empty-illustration svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketsEmptyState.soc-ticket-reference-empty .soc-ticket-empty-illustration svg { fill: none !important; stroke: currentColor !important; stroke-width: 1.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important; opacity: 1 !important; vector-effect: non-scaling-stroke !important; filter: none !important; } html body:not(.soc-auth-shell-active) #homeEmptyState.soc-home-state .soc-empty-state-icon svg :is(path, circle, rect, line, polyline, polygon), html body:not(.soc-auth-shell-active) .sentrix-home-inline-empty .sentrix-home-inline-empty-icon svg :is(path, circle, rect, line, polyline, polygon), html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeEmptyState.soc-situation-empty-state .soc-situation-empty-illustration svg :is(path, circle, rect, line, polyline, polygon), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketsEmptyState.soc-ticket-reference-empty .soc-ticket-empty-illustration svg :is(path, circle, rect, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; stroke-width: 1.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important; opacity: 1 !important; vector-effect: non-scaling-stroke !important; } } html[data-theme="dark"] body:not(.soc-auth-shell-active) #homeEmptyState.soc-home-state .soc-empty-state-icon, html[data-theme="dark"] body:not(.soc-auth-shell-active) .sentrix-home-inline-empty .sentrix-home-inline-empty-icon, html[data-theme="dark"] body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeEmptyState.soc-situation-empty-state .soc-situation-empty-illustration, html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketsEmptyState.soc-ticket-reference-empty .soc-ticket-empty-illustration { color: #b6c2d4 !important; opacity: 1 !important; } /* Current-turn repair: MacBook 16 half-width content responsive lock (2026-05-22). */ @media (min-width: 768px) and (max-width: 1199.98px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) main.container.admin-layout { grid-template-columns: minmax(0, 1fr) !important; justify-items: stretch !important; align-items: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( .admin-tab-content, .soc-workspace-panel, #dashboardPanel, #homeView, #alertsView, #ticketsView, #reportPanel, #opsSupportPanel, #peopleView, #myProfileView, #hqReminderPanel, #notificationSettingsPanel, #auditPanel, #analyticsView, #announcementPanel, #googleSheetsPanel ) { grid-column: 1 / -1 !important; justify-self: stretch !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #realtimeSummaryGrid.soc-situation-kpi-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketSummaryGrid.soc-ticket-reference-summary-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; width: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView .soc-situation-filter-card, #ticketReferenceFilterBar.soc-ticket-reference-filterbar, #peopleView .soc-employee-directory-toolbar-main, #opsSupportPanel .ops-ref-toolbar ) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; width: 100% !important; height: auto !important; min-height: 0 !important; align-items: end !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView .soc-situation-search-field, #alertsView .soc-situation-filter-field, #ticketReferenceFilterBar .soc-ticket-reference-search, #ticketReferenceFilterBar .soc-ticket-reference-field, #ticketReferenceFilterBar .soc-ticket-reference-reset, #peopleView .soc-employee-directory-search, #peopleView .soc-employee-directory-field, #opsSupportPanel .ops-ref-filter, #opsSupportPanel .ops-ref-filter-button ) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView .soc-situation-main-grid, #ticketsView .soc-ticket-reference-main, #opsSupportPanel .ops-ref-shell, #opsSupportPanel .ops-ref-main, #analyticsView .soc-analytics-v2-shell, #analyticsView .soc-analytics-v2-hero-row, #analyticsView .soc-analytics-v2-content, #analyticsAnalysisBoard, #analyticsHeroRow ) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; min-width: 0 !important; max-width: 100% !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView .soc-situation-list-card, #alertsView .soc-situation-table-card, #ticketsView .soc-ticket-reference-list-card, #ticketsView .soc-ticket-reference-table-shell, #peopleView .soc-employee-directory-table-wrap, #peopleView .soc-employee-directory-table-scroll, #opsSupportPanel .ops-ref-calendar, #opsSupportPanel .ops-ref-list, #analyticsView .soc-analytics-v2-table-shell, #googleSheetsPanel .soc-table-shell, #reportPanel .soc-table-shell, #announcementPanel .soc-table-shell ) { min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView :is(.soc-situation-table-header, .soc-situation-row) { min-width: 720px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView :is(.soc-ticket-reference-table-header, .soc-ticket-reference-row) { min-width: 760px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-employee-directory-table { min-width: 760px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-right { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-left { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border-bottom: 1px solid var(--soc-border-subtle, #e5e7eb) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat { grid-template-columns: 40px minmax(0, 1fr) !important; min-width: 0 !important; min-height: 88px !important; padding: 12px 14px !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-copy :is(.label, .value), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut-legend :is(span, strong) { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: keep-all !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut-layout { grid-template-columns: 112px minmax(0, 1fr) !important; gap: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView .soc-people-reference-donut { width: 112px !important; min-width: 112px !important; height: 112px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) main.container.admin-layout:has(#hqReminderPanel:not(.hidden)), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) main.container.admin-layout:has(#notificationSettingsPanel:not(.hidden)), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) main.container.admin-layout:has(#auditPanel:not(.hidden)) { align-items: stretch !important; overflow-x: hidden !important; overflow-y: auto !important; padding-bottom: 120px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel, #auditPanel).soc-settings-panel:not(.hidden) { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 16px 14px 128px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel) .soc-settings-single-column { max-width: 100% !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #hqReminderPanel .soc-reminder-config-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-settings-card { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; row-gap: 14px !important; padding-bottom: 28px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel) :is(.soc-reminder-row, .soc-notification-state-row, .soc-notification-check-row) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; align-items: start !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #hqReminderPanel .sla-settings-rows, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #hqReminderPanel .soc-reminder-advanced-body { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel .ops-ref-summary { display: grid !important; grid-template-columns: minmax(150px, 170px) repeat(7, minmax(112px, 1fr)) !important; overflow-x: auto !important; max-width: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel .ops-ref-calendar-grid { min-width: 720px !important; } } @media (min-width: 768px) and (max-width: 859.98px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] .sentrix-home-kpi-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #realtimeSummaryGrid.soc-situation-kpi-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketSummaryGrid.soc-ticket-reference-summary-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView .soc-situation-filter-card, #ticketReferenceFilterBar.soc-ticket-reference-filterbar, #peopleView .soc-employee-directory-toolbar-main, #opsSupportPanel .ops-ref-toolbar ) { grid-template-columns: minmax(0, 1fr) !important; } } /* Current-turn repair: split-screen content-only rhythm lock (2026-05-22). Keep the current navigation shell intact; only normalize content boxes, icon bounds, filters, tables, and settings bodies in MacBook half-width. */ @media (min-width: 620px) and (max-width: 1199.98px) { html body:not(.soc-auth-shell-active) :is( .admin-tab-content, .soc-workspace-panel, [data-view-scroller="true"], #dashboardPanel, #homeView, #weeklyView, #alertsView, #ticketsView, #reportsView, #reportsHubView, #accountPanel, #employeeScorePanel, #excelPanel, #opsSupportPanel, #peopleView, #myProfileView, #notificationPanel, #hqReminderPanel, #notificationSettingsPanel, #auditPanel, #analyticsView, #reportPanel, #announcementPanel, #googleSheetsPanel ) { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } html body:not(.soc-auth-shell-active) :is(.panel, .ds-card, .soc-block, .soc-workspace-card, .soc-system-section-card) { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) :is(#dashboardPanel, #homeView) { padding-left: 12px !important; padding-right: 12px !important; } html body:not(.soc-auth-shell-active) .sentrix-home-dashboard { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 12px 0 calc(var(--soc-tabbar-h, 54px) + 24px) !important; display: grid !important; gap: 12px !important; overflow-x: hidden !important; } html body:not(.soc-auth-shell-active) .sentrix-home-kpi-grid, html body:not(.soc-auth-shell-active) #realtimeSummaryGrid.soc-situation-kpi-grid, html body:not(.soc-auth-shell-active) #ticketSummaryGrid.soc-ticket-reference-summary-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) :is( .sentrix-home-kpi-card, .soc-situation-kpi-card, .soc-ticket-reference-summary-card ) { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; width: 100% !important; height: auto !important; min-height: 82px !important; max-height: none !important; padding: 12px !important; overflow: hidden !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) :is( .sentrix-home-kpi-card, .soc-situation-kpi-card, .soc-ticket-reference-summary-card ) { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; min-height: 82px !important; padding: 12px !important; } html body:not(.soc-auth-shell-active) :is( .sentrix-home-kpi-icon, .soc-situation-kpi-icon, .soc-ticket-reference-summary-icon ) { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; flex: 0 0 40px !important; display: grid !important; place-items: center !important; align-self: center !important; justify-self: center !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) :is( .sentrix-home-kpi-icon, .soc-situation-kpi-icon, .soc-ticket-reference-summary-icon ) { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; flex: 0 0 40px !important; } html body:not(.soc-auth-shell-active) :is( .sentrix-home-kpi-icon, .soc-situation-kpi-icon, .soc-ticket-reference-summary-icon ) :is(svg, img, .sentrix-theme-icon, .sentrix-line-icon) { width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; display: block !important; object-fit: contain !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) :is( .sentrix-home-kpi-icon, .soc-situation-kpi-icon, .soc-ticket-reference-summary-icon ) :is(svg, img, .sentrix-theme-icon, .sentrix-line-icon) { width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; } html body:not(.soc-auth-shell-active) :is( .sentrix-home-kpi-copy, .soc-situation-kpi-copy, .soc-ticket-reference-summary-copy ) { min-width: 0 !important; display: grid !important; gap: 2px !important; align-content: center !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) :is( .sentrix-home-kpi-label, .soc-summary-label, .soc-ticket-reference-summary-label ) { font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.soc-auth-shell-active) :is( .sentrix-home-kpi-value, .soc-summary-value, .soc-ticket-reference-summary-value ) { font-size: 24px !important; line-height: 28px !important; font-weight: 800 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) :is( .sentrix-home-kpi-meta, .soc-ticket-reference-summary-sub ) { font-size: 11px !important; line-height: 15px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.soc-auth-shell-active) :is(.sentrix-home-main-grid, .sentrix-home-bottom-grid) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) :is( .sentrix-home-card, .sentrix-home-table-card, .sentrix-home-alerts, .sentrix-home-support-card, .sentrix-home-notice-card ) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 14px !important; overflow: hidden !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) .sentrix-home-alert-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } html body:not(.soc-auth-shell-active) .sentrix-home-alert-tile { min-width: 0 !important; grid-template-columns: 8px minmax(0, 1fr) auto !important; gap: 8px !important; min-height: 54px !important; padding: 9px 10px !important; } html body:not(.soc-auth-shell-active) :is(.sentrix-home-table-scroll, .soc-situation-list-card, .soc-ticket-reference-list-card, .soc-employee-directory-table-wrap, .soc-employee-directory-table-scroll, .ops-ref-calendar, .ops-ref-list, .soc-analytics-v2-table-shell) { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; } html body:not(.soc-auth-shell-active) .sentrix-home-table { min-width: 640px !important; } html body:not(.soc-auth-shell-active) :is( #alertsView .soc-situation-filter-card, #ticketReferenceFilterBar.soc-ticket-reference-filterbar, #peopleView .soc-employee-directory-toolbar-main, #opsSupportPanel .ops-ref-toolbar ) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; height: auto !important; min-height: 0 !important; align-items: end !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) :is( #alertsView .soc-situation-search-field, #alertsView .soc-situation-filter-field, #ticketReferenceFilterBar .soc-ticket-reference-search, #ticketReferenceFilterBar .soc-ticket-reference-field, #ticketReferenceFilterBar .soc-ticket-reference-reset, #peopleView .soc-employee-directory-search, #peopleView .soc-employee-directory-field, #opsSupportPanel .ops-ref-filter, #opsSupportPanel .ops-ref-filter-button ) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) :is( #alertsView .soc-situation-main-grid, #ticketsView .soc-ticket-reference-main, #reportsView .soc-report-actionbar-body, #reportsView .soc-report-builder-footer, #weeklyView .soc-weekly-workspace-shell, #weeklyView .soc-weekly-review-grid, #reportsHubView .soc-hub-results-layout, #accountPanel .soc-manage-workspace-grid, #employeeScorePanel .soc-employee-score-main-grid, #employeeScorePanel .soc-employee-score-controls, #opsSupportPanel .ops-ref-shell, #opsSupportPanel .ops-ref-main, #opsSupportPanel .soc-ops-support-layout, #opsSupportPanel .soc-ops-support-toolbar-main-row, #opsSupportPanel .soc-ops-support-toolbar-center, #opsSupportPanel .soc-ops-support-toolbar-actions, #announcementPanel .notices-toolbar-row, #announcementPanel .notices-compose-settings-panel, #myProfileView .soc-profile-overview-shell, #myProfileView .soc-profile-account-editor-grid, #peopleView .soc-people-reference-summary-shell, #peopleView .soc-people-reference-summary-right, #analyticsView .soc-analytics-v2-shell, #analyticsView .soc-analytics-v2-hero-row, #analyticsView .soc-analytics-v2-content, #analyticsAnalysisBoard, #analyticsHeroRow ) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; min-width: 0 !important; max-width: 100% !important; } html body:not(.soc-auth-shell-active) :is( #reportsView .soc-report-actionbar-actions, #reportsView .soc-report-builder-section-actions, #weeklyView .soc-weekly-header-main, #weeklyView .soc-weekly-header-actions, #weeklyView .soc-weekly-template-actions, #reportsHubView .soc-hub-filter-grid, #reportsHubView .soc-hub-filter-actions, #employeeScorePanel .soc-employee-score-summary-grid, #opsSupportPanel .soc-ops-support-filters, #opsSupportPanel .soc-ops-support-toolbar-stats, #announcementPanel .notices-compose-toolbar, #announcementPanel .notices-compose-toolbar-group, #myProfileView .soc-profile-counter-row, #myProfileView .soc-profile-info-list, #myProfileView .soc-profile-account-read-grid, #myProfileView .soc-profile-account-field-grid ) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; min-width: 0 !important; max-width: 100% !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-left { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body:not(.soc-auth-shell-active) #peopleView #peopleOverviewKpiStrip { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat { grid-template-columns: 40px minmax(0, 1fr) !important; min-height: 82px !important; padding: 12px !important; gap: 10px !important; min-width: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat { grid-template-columns: 40px minmax(0, 1fr) !important; min-height: 82px !important; padding: 12px !important; gap: 10px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-icon { width: 40px !important; min-width: 40px !important; height: 40px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-icon { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; flex: 0 0 40px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-icon svg { width: 22px !important; height: 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-icon svg { width: 22px !important; height: 22px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-stat-copy :is(.label, strong, .value) { min-width: 0 !important; max-width: 100% !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: anywhere !important; overflow: visible !important; text-overflow: clip !important; } html body:not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel, #auditPanel).soc-settings-panel:not(.hidden) { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 14px 12px calc(var(--soc-tabbar-h, 54px) + 72px) !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #hqReminderPanel .soc-reminder-config-card, html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-settings-card, html body:not(.soc-auth-shell-active) #hqReminderPanel .sla-settings-rows { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; } html body:not(.soc-auth-shell-active) :is(#hqReminderPanel, #notificationSettingsPanel) :is(.soc-reminder-row, .soc-notification-state-row, .soc-notification-check-row) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; min-width: 0 !important; align-items: start !important; } html body:not(.soc-auth-shell-active) :is( #reportsView .soc-report-preview-viewport, #weeklyView .soc-weekly-preview-viewport, #reportsHubView .soc-hub-results-table-wrap, #employeeScorePanel .soc-employee-score-table-wrap, #opsSupportPanel .soc-ops-support-view, #opsSupportPanel .soc-ops-support-list-groups, #announcementPanel .notices-panel, #excelPanel .soc-table-wrap, #googleSheetsPanel .soc-google-sheet-mapping-table-wrap, #googleSheetsPanel .soc-apple-weekly-workspace-shell ) { min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; } html body:not(.soc-auth-shell-active) :is( #opsSupportPanel .soc-ops-support-calendar-weekdays, #opsSupportPanel .soc-ops-support-calendar-grid ) { min-width: 720px !important; } html body:not(.soc-auth-shell-active) :is( #reportsView .soc-report-preview, #weeklyView .soc-weekly-preview-viewport, #announcementPanel .notices-compose-document, #googleSheetsPanel .soc-apple-weekly-mount ) { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) :is(.soc-situation-empty-state, .soc-ticket-reference-empty, .sentrix-home-inline-empty, #homeEmptyState) { min-height: 180px !important; padding: 24px 16px !important; } html body:not(.soc-auth-shell-active) :is(.soc-situation-empty-illustration, .soc-ticket-empty-illustration, .sentrix-home-inline-empty-icon, .soc-empty-state-icon) { width: 58px !important; height: 58px !important; display: grid !important; place-items: center !important; } html body:not(.soc-auth-shell-active) :is(.soc-situation-empty-illustration, .soc-ticket-empty-illustration, .sentrix-home-inline-empty-icon, .soc-empty-state-icon) svg { width: 48px !important; height: 48px !important; } } @media (min-width: 620px) and (max-width: 720px) { html body:not(.soc-auth-shell-active) :is( #alertsView .soc-situation-filter-card, #ticketReferenceFilterBar.soc-ticket-reference-filterbar, #peopleView .soc-employee-directory-toolbar-main, #opsSupportPanel .ops-ref-toolbar ) { grid-template-columns: minmax(0, 1fr) !important; } } /* Current-turn repair: content summary icon normalization across desktop widths (2026-05-22). */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) :is( .sentrix-home-kpi-card, .soc-situation-kpi-card, .soc-ticket-reference-summary-card, #peopleView .soc-people-reference-stat ) { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) :is( .sentrix-home-kpi-icon, .soc-situation-kpi-icon, .soc-ticket-reference-summary-icon, #peopleView .soc-people-reference-stat-icon ) { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; flex: 0 0 40px !important; display: grid !important; place-items: center !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) :is( .sentrix-home-kpi-icon, .soc-situation-kpi-icon, .soc-ticket-reference-summary-icon, #peopleView .soc-people-reference-stat-icon ) :is(svg, img, .sentrix-theme-icon, .sentrix-line-icon) { width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; display: block !important; object-fit: contain !important; } /* Current-turn repair: empty state icon scale and opacity final authority (2026-05-22). */ html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) :is( #homeEmptyState.soc-home-state .soc-empty-state-icon, .sentrix-home-inline-empty .sentrix-home-inline-empty-icon, #alertsView #realtimeEmptyState.soc-situation-empty-state .soc-situation-empty-illustration, #ticketsView #ticketsEmptyState.soc-ticket-reference-empty .soc-ticket-empty-illustration ) { width: 58px !important; min-width: 58px !important; max-width: 58px !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; color: #64748b !important; opacity: 1 !important; display: grid !important; place-items: center !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) :is( #homeEmptyState.soc-home-state .soc-empty-state-icon, .sentrix-home-inline-empty .sentrix-home-inline-empty-icon, #alertsView #realtimeEmptyState.soc-situation-empty-state .soc-situation-empty-illustration, #ticketsView #ticketsEmptyState.soc-ticket-reference-empty .soc-ticket-empty-illustration ) svg { width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important; opacity: 1 !important; vector-effect: non-scaling-stroke !important; filter: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) :is( #homeEmptyState.soc-home-state .soc-empty-state-icon, .sentrix-home-inline-empty .sentrix-home-inline-empty-icon, #alertsView #realtimeEmptyState.soc-situation-empty-state .soc-situation-empty-illustration, #ticketsView #ticketsEmptyState.soc-ticket-reference-empty .soc-ticket-empty-illustration ) svg :is(path, circle, rect, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; stroke-width: 1.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important; opacity: 1 !important; vector-effect: non-scaling-stroke !important; } /* Current-turn repair: high-specificity content KPI icon size lock (2026-05-22). */ html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid.soc-situation-kpi-grid > .soc-situation-kpi-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card { grid-template-columns: 40px minmax(0, 1fr) !important; column-gap: 10px !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid.soc-situation-kpi-grid > .soc-situation-kpi-card .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card .soc-ticket-reference-summary-icon { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; flex: 0 0 40px !important; display: grid !important; place-items: center !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid.soc-situation-kpi-grid > .soc-situation-kpi-card .soc-situation-kpi-icon :is(svg, img, .sentrix-theme-icon, .sentrix-line-icon), html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card .soc-ticket-reference-summary-icon :is(svg, img, .sentrix-theme-icon, .sentrix-line-icon) { width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; stroke-width: 1.8 !important; } /* Current-turn repair: high-specificity half-width content overflow lock (2026-05-22). */ @media (min-width: 620px) and (max-width: 1199.98px) { html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-reference-surface { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #realtimeSummaryGrid.soc-situation-kpi-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid { width: 100% !important; min-width: 0 !important; max-width: 100% !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main { width: 100% !important; min-width: 0 !important; max-width: 100% !important; grid-template-columns: minmax(0, 1fr) !important; overflow-x: hidden !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(.soc-ticket-reference-list-card, .soc-ticket-reference-detail-card) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) #analyticsView:is(.is-active, :not(.hidden)) :is(#analyticsHeroRow, .soc-analytics-v2-hero-row, .soc-analytics-v2-content, #analyticsAnalysisBoard) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; grid-template-columns: minmax(0, 1fr) !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop):not(.soc-auth-shell-active) #analyticsView:is(.is-active, :not(.hidden)) :is(#analyticsHeroRiskCard, #analyticsHeroKpiRack, #analyticsHeroHealthCard, #analyticsTrendPanel, #analyticsPatternPanel, #analyticsCausePanel, #analyticsPeoplePanel) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } } /* Current-turn repair: situation/ticket filter parity final lock (2026-05-24). */ @media (min-width: 1024px) { html body:not(.soc-auth-shell-active) :is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden)) :is(.soc-situation-kpi-icon, .soc-ticket-reference-summary-icon) { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; display: grid !important; place-items: center !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) :is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden)) :is(.soc-situation-kpi-icon, .soc-ticket-reference-summary-icon) :is(svg, img, .sentrix-theme-icon, .sentrix-line-icon) { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; display: block !important; object-fit: contain !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; vector-effect: non-scaling-stroke !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) #realtimeSummaryGrid.soc-situation-kpi-grid > .soc-situation-kpi-card, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card { grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 14px !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) .soc-situation-filter-card, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) #ticketReferenceFilterBar.soc-ticket-reference-filterbar { display: grid !important; grid-template-columns: 220px repeat(5, minmax(148px, 180px)) minmax(96px, 1fr) !important; align-items: end !important; gap: 12px !important; width: 100% !important; min-height: 82px !important; height: 82px !important; padding: 12px 20px !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) .soc-situation-search-field, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) .soc-ticket-reference-search { order: 1 !important; display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 13px !important; border: 1px solid #dfe7f2 !important; border-radius: 8px !important; background: #fff !important; box-shadow: none !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) .soc-situation-search-field > span, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) .soc-ticket-reference-search > span { display: grid !important; place-items: center !important; width: 20px !important; min-width: 20px !important; height: 20px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #7b879b !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) .soc-situation-search-field svg, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) .soc-ticket-reference-search svg { width: 18px !important; height: 18px !important; stroke-width: 2 !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) #situationIncidentSearchInput, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) #ticketReferenceSearchInput { width: 100% !important; min-width: 0 !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #122047 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 600 !important; appearance: none !important; -webkit-appearance: none !important; } html body:not(.soc-auth-shell-active) :is(#situationIncidentSearchInput, #ticketReferenceSearchInput)::-webkit-search-decoration, html body:not(.soc-auth-shell-active) :is(#situationIncidentSearchInput, #ticketReferenceSearchInput)::-webkit-search-cancel-button, html body:not(.soc-auth-shell-active) :is(#situationIncidentSearchInput, #ticketReferenceSearchInput)::-webkit-search-results-button, html body:not(.soc-auth-shell-active) :is(#situationIncidentSearchInput, #ticketReferenceSearchInput)::-webkit-search-results-decoration { display: none !important; -webkit-appearance: none !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) .soc-situation-filter-field, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) .soc-ticket-reference-field { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: initial !important; } html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) [data-ticket-reference-filter-field="period"] { order: 2 !important; } html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) [data-ticket-reference-filter-field="site"] { order: 3 !important; } html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) [data-ticket-reference-filter-field="type"] { order: 4 !important; } html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) [data-ticket-reference-filter-field="status"] { order: 5 !important; } html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) [data-ticket-reference-filter-field="request-count"] { order: 6 !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) .soc-situation-filter-spacer { order: 7 !important; width: 100% !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) #ticketReferenceResetBtn.soc-ticket-reference-reset { order: 7 !important; justify-self: start !important; width: auto !important; min-width: 92px !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; } } @media (min-width: 1024px) and (max-width: 1399.98px) { html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) .soc-situation-filter-card, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) #ticketReferenceFilterBar.soc-ticket-reference-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; height: auto !important; min-height: 0 !important; align-items: end !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference:not(.hidden) .soc-situation-filter-spacer, html body:not(.soc-auth-shell-active) #ticketsView:not(.hidden) #ticketReferenceResetBtn.soc-ticket-reference-reset { justify-self: start !important; width: min(140px, 100%) !important; } } /* Current-turn repair: active situation/ticket filter and KPI final authority (2026-05-24). */ @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) #realtimeSummaryGrid.soc-situation-kpi-grid > .soc-situation-kpi-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card { grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) #realtimeSummaryGrid.soc-situation-kpi-grid > .soc-situation-kpi-card .soc-situation-kpi-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card .soc-ticket-reference-summary-icon { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; flex: 0 0 44px !important; display: grid !important; place-items: center !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) #realtimeSummaryGrid.soc-situation-kpi-grid > .soc-situation-kpi-card .soc-situation-kpi-icon :is(svg, img, .sentrix-theme-icon, .sentrix-line-icon), html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card .soc-ticket-reference-summary-icon :is(svg, img, .sentrix-theme-icon, .sentrix-line-icon) { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; display: block !important; object-fit: contain !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; vector-effect: non-scaling-stroke !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-filter-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) #ticketReferenceFilterBar.soc-ticket-reference-filterbar { display: grid !important; grid-template-columns: 220px repeat(5, minmax(148px, 180px)) minmax(96px, 1fr) !important; align-items: end !important; gap: 12px !important; width: 100% !important; min-height: 82px !important; height: 82px !important; padding: 12px 20px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-search-field, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) .soc-ticket-reference-search { order: 1 !important; display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 13px !important; border: 1px solid var(--soc-border-strong, #dfe7f2) !important; border-radius: 8px !important; background: var(--soc-surface, #fff) !important; box-shadow: none !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-search-field > span, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) .soc-ticket-reference-search > span { grid-column: 1 !important; position: static !important; display: grid !important; place-items: center !important; width: 20px !important; min-width: 20px !important; max-width: 20px !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--soc-muted, #7b879b) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-search-field svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) .soc-ticket-reference-search svg { width: 18px !important; min-width: 18px !important; height: 18px !important; min-height: 18px !important; stroke-width: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) #situationIncidentSearchInput, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) #ticketReferenceSearchInput { grid-column: 2 !important; position: static !important; display: block !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--soc-ink, #122047) !important; appearance: none !important; -webkit-appearance: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-filter-field, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) .soc-ticket-reference-field { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: initial !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-filter-field:has(#situationPeriodFilterSelect) { order: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-filter-field:has(#situationSiteFilterSelect) { order: 3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-filter-field:has(#situationTypeFilterSelect) { order: 4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-filter-field:has(#situationStatusFilterSelect) { order: 5 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-filter-field:has(#situationEciFilterSelect) { order: 6 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-filter-spacer { order: 7 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) [data-ticket-reference-filter-field="period"] { order: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) [data-ticket-reference-filter-field="site"] { order: 3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) [data-ticket-reference-filter-field="type"] { order: 4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) [data-ticket-reference-filter-field="status"] { order: 5 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) [data-ticket-reference-filter-field="request-count"] { order: 6 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) #ticketReferenceResetBtn.soc-ticket-reference-reset { order: 7 !important; justify-self: start !important; width: auto !important; min-width: 92px !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; } } @media (min-width: 1024px) and (max-width: 1399.98px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-filter-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) #ticketReferenceFilterBar.soc-ticket-reference-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; height: auto !important; min-height: 0 !important; align-items: end !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:is(.is-active, :not(.hidden))) #alertsView.soc-situation-reference:is(.is-active, :not(.hidden)) .soc-situation-filter-spacer, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) #ticketReferenceResetBtn.soc-ticket-reference-reset { justify-self: start !important; width: min(140px, 100%) !important; } } /* Settings notification reference page (2026-05-24). */ html body:not(.soc-auth-shell-active) #notificationSettingsPanel.soc-settings-reference-panel:not(.hidden) { display: flex !important; flex-direction: column !important; gap: 14px !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 28px 42px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel.soc-settings-reference-panel .soc-settings-reference-header { display: grid !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel.soc-settings-reference-panel .soc-settings-reference-header h2 { margin: 0 !important; font-size: 24px !important; line-height: 32px !important; font-weight: 800 !important; letter-spacing: 0 !important; color: var(--soc-ink, #122047) !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel.soc-settings-reference-panel .meta { margin: 0 !important; font-size: 13px !important; line-height: 20px !important; font-weight: 600 !important; color: var(--soc-muted, #64748b) !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-reference-form { display: grid !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-settings-reference-card { display: grid !important; gap: 0 !important; width: 100% !important; min-width: 0 !important; padding: 22px 28px !important; border: 1px solid var(--soc-border-subtle, #dfe7f2) !important; border-radius: 12px !important; background: var(--soc-surface, #fff) !important; box-shadow: none !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-settings-reference-card h3 { margin: 0 0 18px !important; font-size: 18px !important; line-height: 24px !important; font-weight: 800 !important; color: var(--soc-ink, #122047) !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel :is(.soc-notification-reference-row, .soc-notification-setting-row) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px) !important; align-items: center !important; gap: 24px !important; min-width: 0 !important; min-height: 54px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-reference-copy { display: grid !important; gap: 4px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-reference-copy strong { font-size: 15px !important; line-height: 22px !important; font-weight: 800 !important; color: var(--soc-ink, #122047) !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-switch-input { justify-self: start !important; width: 42px !important; min-width: 42px !important; height: 24px !important; accent-color: var(--soc-accent, #ff6a13) !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-repeat-box { display: grid !important; gap: 14px !important; margin: 10px 0 12px !important; padding: 18px 28px !important; border: 1px solid var(--soc-border-subtle, #dfe7f2) !important; border-radius: 8px !important; background: var(--soc-surface, #fff) !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-inline-controls, html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-quiet-controls, html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-checkbox-group { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-choice-btn, html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-step-btn, html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-test-btn, html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-secondary-btn, html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-primary-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; min-height: 38px !important; padding: 0 18px !important; border: 1px solid var(--soc-border-subtle, #dfe7f2) !important; border-radius: 8px !important; background: var(--soc-surface, #fff) !important; color: var(--soc-ink, #122047) !important; font-size: 14px !important; line-height: 18px !important; font-weight: 800 !important; box-shadow: none !important; cursor: pointer !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-choice-btn.is-active, html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-primary-btn { border-color: #ff6a13 !important; background: #ff5a14 !important; color: #fff !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-choice-btn.is-active { background: #fff4ed !important; color: #ff5a14 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-custom-input { display: inline-grid !important; grid-template-columns: auto 92px auto !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; color: var(--soc-muted, #64748b) !important; font-weight: 800 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel :is(.soc-notification-custom-input input, .soc-notification-stepper input, .soc-notification-quiet-controls input, .soc-notification-select) { height: 40px !important; min-height: 40px !important; border: 1px solid var(--soc-border-subtle, #dfe7f2) !important; border-radius: 8px !important; background: var(--soc-surface, #fff) !important; color: var(--soc-ink, #122047) !important; font-size: 14px !important; line-height: 18px !important; font-weight: 800 !important; box-shadow: none !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-custom-input input { width: 92px !important; padding: 0 12px !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-stepper { display: inline-grid !important; grid-template-columns: 40px 78px 40px !important; gap: 8px !important; align-items: center !important; justify-self: start !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-stepper input { width: 78px !important; text-align: center !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-info-strip { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important; gap: 12px !important; align-items: start !important; margin-top: 2px !important; padding: 14px 16px !important; border: 1px solid var(--soc-border-subtle, #dfe7f2) !important; border-radius: 8px !important; background: #fbfcfe !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-info-strip span { display: grid !important; place-items: center !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; background: #64748b !important; color: #fff !important; font-size: 12px !important; font-weight: 900 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-info-strip p { margin: 0 !important; color: var(--soc-muted, #64748b) !important; font-size: 13px !important; line-height: 20px !important; font-weight: 700 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-checkbox-group label { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: var(--soc-ink, #122047) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 800 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-checkbox-group input { width: 18px !important; height: 18px !important; accent-color: #ff6a13 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-quiet-controls input[type="time"] { width: 132px !important; padding: 0 12px !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-select { justify-self: start !important; width: 280px !important; padding: 0 14px !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-permission-badge { color: var(--soc-muted, #64748b) !important; font-size: 12px !important; font-weight: 800 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-settings-status { margin: 2px 0 0 !important; color: var(--soc-muted, #64748b) !important; font-size: 13px !important; font-weight: 800 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-settings-status.is-error { color: var(--soc-danger, #dc2626) !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-reference-savebar { position: static !important; bottom: auto !important; z-index: auto !important; display: flex !important; justify-content: flex-end !important; gap: 14px !important; margin: 4px -42px 0 !important; padding: 18px 42px !important; border-top: 1px solid var(--soc-border-subtle, #dfe7f2) !important; background: var(--soc-surface, #fff) !important; backdrop-filter: none !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel :is(.soc-notification-primary-btn, .soc-notification-secondary-btn) { width: 132px !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel :is(button, input, select):disabled { opacity: 0.55 !important; cursor: not-allowed !important; } @media (max-width: 1199.98px) { html body:not(.soc-auth-shell-active) #notificationSettingsPanel.soc-settings-reference-panel:not(.hidden) { padding: 18px 16px 0 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel :is(.soc-notification-reference-row, .soc-notification-setting-row) { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; padding: 8px 0 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-settings-reference-card { padding: 18px 16px !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-repeat-box { padding: 14px !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-reference-savebar { margin-inline: -16px !important; padding-inline: 16px !important; } } html[data-theme="dark"] body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-settings-reference-card, html[data-theme="dark"] body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-repeat-box, html[data-theme="dark"] body:not(.soc-auth-shell-active) #notificationSettingsPanel :is(.soc-notification-choice-btn, .soc-notification-step-btn, .soc-notification-test-btn, .soc-notification-secondary-btn), html[data-theme="dark"] body:not(.soc-auth-shell-active) #notificationSettingsPanel :is(.soc-notification-custom-input input, .soc-notification-stepper input, .soc-notification-quiet-controls input, .soc-notification-select) { background: var(--ui-bg-surface-2, #111827) !important; border-color: var(--ui-border-subtle, rgba(148, 163, 184, 0.28)) !important; color: var(--ui-text-primary, #f8fafc) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-info-strip { background: rgba(15, 23, 42, 0.82) !important; border-color: var(--ui-border-subtle, rgba(148, 163, 184, 0.28)) !important; } /* Employee management reference raw row final authority (2026-05-24). */ html body:not(.soc-auth-shell-active) #peopleView:not(.hidden) #peopleOverviewKpiStrip { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row { display: grid !important; grid-template-columns: minmax(560px, 1.12fr) minmax(380px, 0.8fr) minmax(380px, 0.8fr) !important; align-items: center !important; gap: 0 !important; width: 100% !important; min-height: 245px !important; padding: 42px 58px !important; border: 1px solid var(--soc-border-subtle, #dfe7f2) !important; border-radius: 16px !important; background: var(--soc-surface, #fff) !important; box-shadow: none !important; overflow: hidden !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-left { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 0 !important; min-width: 0 !important; height: 168px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 48px 28px 58px !important; justify-items: center !important; align-content: center !important; gap: 10px !important; min-width: 0 !important; min-height: 168px !important; height: 168px !important; padding: 0 28px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat:not(:last-child) { border-right: 1px solid var(--soc-border-subtle, #d8e2ef) !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat.is-active { background: transparent !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-divider { display: none !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon { display: grid !important; place-items: center !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--soc-text-primary, #071a3a) !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon svg { display: block !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon svg :is(path, circle, rect, line, polyline) { fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy { display: contents !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy .label { display: block !important; min-width: 0 !important; max-width: 100% !important; color: var(--soc-text-secondary, #4f6383) !important; font-size: 16px !important; line-height: 24px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; word-break: keep-all !important; overflow: visible !important; text-overflow: clip !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy strong { display: inline-flex !important; align-items: baseline !important; justify-content: center !important; gap: 4px !important; min-width: 0 !important; color: var(--soc-text-primary, #071a3a) !important; font-size: 44px !important; line-height: 52px !important; font-weight: 900 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy strong em { margin: 0 !important; color: inherit !important; font-style: normal !important; font-size: 20px !important; line-height: 24px !important; font-weight: 800 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-right { display: contents !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block { display: grid !important; grid-template-rows: 30px minmax(0, 1fr) !important; align-content: center !important; gap: 18px !important; min-width: 0 !important; min-height: 178px !important; height: 178px !important; padding: 0 0 0 44px !important; border: 0 !important; border-left: 1px solid var(--soc-border-subtle, #d8e2ef) !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block + .soc-people-reference-donut-block { border-left: 1px solid var(--soc-border-subtle, #d8e2ef) !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block h4 { margin: 0 !important; color: var(--soc-text-primary, #071a3a) !important; font-size: 16px !important; line-height: 24px !important; font-weight: 900 !important; letter-spacing: 0 !important; text-align: center !important; white-space: nowrap !important; word-break: keep-all !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-layout { display: grid !important; grid-template-columns: 150px minmax(168px, 1fr) !important; align-items: center !important; gap: 24px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut { position: relative !important; display: grid !important; place-items: center !important; width: 148px !important; min-width: 148px !important; max-width: 148px !important; height: 148px !important; min-height: 148px !important; max-height: 148px !important; margin: 0 !important; border-radius: 999px !important; background: var(--soc-people-donut, conic-gradient(#3168d8 0turn, #3168d8 1turn)) !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut::after { content: "" !important; position: absolute !important; inset: 12px !important; border-radius: 999px !important; background: var(--soc-surface, #fff) !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-center { position: relative !important; z-index: 1 !important; display: grid !important; place-items: center !important; gap: 7px !important; width: 92px !important; min-width: 0 !important; text-align: center !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-center span { color: var(--soc-text-secondary, #4f6383) !important; font-size: 15px !important; line-height: 20px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-center strong { display: inline-flex !important; align-items: baseline !important; justify-content: center !important; gap: 3px !important; color: var(--soc-text-primary, #071a3a) !important; font-size: 26px !important; line-height: 31px !important; font-weight: 900 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-center strong em { margin: 0 !important; font-style: normal !important; font-size: 17px !important; line-height: 22px !important; font-weight: 800 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend { display: grid !important; align-content: center !important; justify-items: stretch !important; gap: 13px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(18px, auto) minmax(64px, auto) !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; color: var(--soc-text-primary, #0f2240) !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend-label { display: inline-flex !important; align-items: center !important; gap: 9px !important; min-width: 0 !important; color: inherit !important; font: inherit !important; white-space: nowrap !important; word-break: keep-all !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend-label i { width: 9px !important; min-width: 9px !important; height: 9px !important; border-radius: 999px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend-row strong, html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend-row span:last-child { min-width: 0 !important; color: inherit !important; font: inherit !important; text-align: right !important; white-space: nowrap !important; } @media (min-width: 1200px) and (max-width: 1499.98px) { html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row { grid-template-columns: minmax(420px, 0.95fr) minmax(280px, 0.58fr) minmax(280px, 0.58fr) !important; min-height: 212px !important; padding: 30px 28px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-left { height: 148px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat { grid-template-rows: 40px 23px 48px !important; gap: 8px !important; min-height: 148px !important; height: 148px !important; padding: 0 16px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon svg { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy .label { font-size: 14px !important; line-height: 20px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy strong { font-size: 36px !important; line-height: 44px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy strong em { font-size: 17px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block { min-height: 152px !important; height: 152px !important; padding-left: 24px !important; gap: 12px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block h4 { font-size: 14px !important; line-height: 20px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-layout { grid-template-columns: 120px minmax(118px, 1fr) !important; gap: 16px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut { width: 120px !important; min-width: 120px !important; height: 120px !important; min-height: 120px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut::after { inset: 10px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-center strong { font-size: 22px !important; line-height: 27px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-center span, html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend-row { font-size: 13px !important; line-height: 18px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend-row { grid-template-columns: minmax(0, 1fr) minmax(20px, auto) minmax(58px, auto) !important; gap: 7px !important; } } @media (max-width: 1199.98px) { html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; padding: 26px 24px !important; border-radius: 14px !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-left { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; height: auto !important; min-height: 126px !important; padding-bottom: 24px !important; border-bottom: 1px solid var(--soc-border-subtle, #d8e2ef) !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-right { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; min-width: 0 !important; border: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat { grid-template-rows: 34px 22px 40px !important; gap: 7px !important; min-height: 126px !important; height: 126px !important; padding: 0 12px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon svg { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy .label { font-size: 13px !important; line-height: 18px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy strong { font-size: 32px !important; line-height: 38px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy strong em { font-size: 15px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block { min-height: 0 !important; height: auto !important; grid-template-columns: minmax(0, 1fr) !important; padding: 24px 18px 0 0 !important; border-left: 0 !important; border-top: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block + .soc-people-reference-donut-block { margin-top: 0 !important; padding: 24px 0 0 18px !important; border-left: 1px solid var(--soc-border-subtle, #d8e2ef) !important; border-top: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-layout { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; justify-self: stretch !important; justify-items: center !important; gap: 16px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut { width: 132px !important; min-width: 132px !important; height: 132px !important; min-height: 132px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block h4 { text-align: center !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend { width: 100% !important; max-width: 304px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend-row { font-size: 12.5px !important; line-height: 18px !important; } } @media (max-width: 760px) { html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row { padding: 22px 18px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-left { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 18px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat:nth-child(2) { border-right: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-layout { grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; } } html[data-theme="dark"] body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row { background: var(--ui-bg-surface-2, #111827) !important; border-color: var(--ui-border-subtle, rgba(148, 163, 184, 0.28)) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut::after { background: var(--ui-bg-surface-2, #111827) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row :is( .soc-people-reference-stat-icon, .soc-people-reference-stat-copy strong, .soc-people-reference-donut-block h4, .soc-people-reference-donut-center strong, .soc-people-reference-legend-row ) { color: var(--ui-text-primary, #f8fafc) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row :is( .soc-people-reference-stat-copy .label, .soc-people-reference-donut-center span ) { color: var(--ui-text-secondary, #cbd5e1) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleHubEmployeesPane .soc-employee-directory-toolbar.soc-people-workspace-toolbar.panel { padding: 12px 16px !important; min-height: 0 !important; border-radius: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleHubEmployeesPane .soc-employee-directory-toolbar-row.soc-people-workspace-toolbar-row { display: block !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleHubEmployeesPane .soc-employee-directory-toolbar-main { display: grid !important; grid-template-columns: minmax(280px, 380px) minmax(142px, 190px) minmax(158px, 220px) minmax(210px, 280px) !important; justify-content: start !important; align-items: end !important; gap: 8px 14px !important; width: 100% !important; max-width: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleHubEmployeesPane .soc-employee-directory-field { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; margin: 0 !important; min-width: 0 !important; width: 100% !important; max-width: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleHubEmployeesPane .soc-employee-directory-field > span { min-height: 14px !important; font-size: 11px !important; line-height: 14px !important; font-weight: 700 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleHubEmployeesPane :is(.soc-employee-directory-search input, #employeeSiteFilter, #peopleRoleFilter, #peopleDirectorySortSelect) { height: 38px !important; min-height: 38px !important; padding: 0 12px !important; border-radius: 8px !important; font-size: 13px !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleHubEmployeesPane .soc-employee-directory-search::before { left: 14px !important; width: 14px !important; height: 14px !important; border-width: 1.8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleHubEmployeesPane .soc-employee-directory-search::after { left: 26px !important; top: calc(50% + 8px) !important; width: 6px !important; height: 1.8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleHubEmployeesPane .soc-employee-directory-search input#peopleDirectorySearchInput { padding-left: 38px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleHubEmployeesPane .soc-employee-directory-toolbar-note { margin-top: 8px !important; min-height: 0 !important; font-size: 12px !important; line-height: 16px !important; } @media (max-width: 1180px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleHubEmployeesPane .soc-employee-directory-toolbar-main { grid-template-columns: minmax(260px, 1.25fr) minmax(150px, 0.75fr) !important; gap: 10px 12px !important; } } @media (max-width: 760px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView #peopleHubEmployeesPane .soc-employee-directory-toolbar-main { grid-template-columns: minmax(0, 1fr) !important; } } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView:not(.hidden) { width: 100% !important; max-width: none !important; padding: 64px clamp(24px, 3vw, 56px) 104px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView:not(.hidden) .soc-profile-command-stage, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView:not(.hidden) #myProfileAccountSection { width: min(100%, 1360px) !important; max-width: 1360px !important; margin-left: auto !important; margin-right: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView:not(.hidden) .soc-profile-counter-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; align-items: stretch !important; width: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView:not(.hidden) .soc-profile-counter-row > .soc-profile-counter-button, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView:not(.hidden) .soc-profile-counter-row > .soc-profile-counter-item { min-height: 86px !important; padding: 16px 18px !important; border: 1px solid var(--soc-border-subtle, #dfe7f2) !important; border-radius: 8px !important; background: var(--soc-surface, #fff) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView:not(.hidden) .soc-profile-counter-row > .soc-profile-counter-button { display: grid !important; place-items: center !important; align-content: center !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView:not(.hidden) .soc-profile-counter-row > .soc-profile-counter-item.is-score { display: grid !important; place-items: center !important; align-content: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView:not(.hidden) .soc-profile-counter-button--score { width: 100% !important; min-height: 54px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-reference-row:has(> .soc-switch-input) { grid-template-columns: minmax(0, 1fr) 56px !important; gap: 24px !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-settings-reference-card > .soc-notification-reference-row:has(> .soc-switch-input) { padding-right: 28px !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-reference-row:has(> .soc-switch-input) > .soc-switch-input { justify-self: end !important; align-self: center !important; margin: 0 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-repeat-box > .soc-notification-reference-row:has(> .soc-switch-input) { margin-right: 0 !important; padding-right: 0 !important; } @media (max-width: 1180px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView:not(.hidden) { padding-inline: 24px !important; } } @media (max-width: 1199.98px) { html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-reference-row:has(> .soc-switch-input) { grid-template-columns: minmax(0, 1fr) 56px !important; align-items: center !important; gap: 16px !important; padding: 8px 0 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-settings-reference-card > .soc-notification-reference-row:has(> .soc-switch-input) { padding-right: 14px !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-repeat-box > .soc-notification-reference-row:has(> .soc-switch-input) { padding-right: 0 !important; } } @media (max-width: 760px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #myProfileView:not(.hidden) .soc-profile-counter-row { grid-template-columns: minmax(0, 1fr) !important; } } html body:not(.soc-auth-shell-active).soc-profile-detail-modal-open { overflow: hidden !important; } html body:not(.soc-auth-shell-active).soc-profile-detail-modal-open #myProfileView { contain: none !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #myProfileDetailSection.soc-profile-detail-overlay.hidden { display: none !important; } html body:not(.soc-auth-shell-active) #myProfileDetailSection.soc-profile-detail-overlay:not(.hidden) { position: fixed !important; inset: 0 !important; z-index: 1400 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: clamp(16px, 2vw, 32px) !important; background: rgba(15, 23, 42, 0.42) !important; backdrop-filter: blur(6px) !important; overflow: auto !important; contain: none !important; } html body:not(.soc-auth-shell-active) #myProfileDetailSection .soc-profile-detail-overlay-panel { width: min(960px, calc(100vw - 48px)) !important; max-width: 960px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: min(720px, calc(100dvh - 64px)) !important; margin: 0 !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: 14px !important; padding: 22px 24px 24px !important; border-radius: 18px !important; background: var(--soc-card-bg, #fff) !important; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24) !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #myProfileDetailSection .soc-profile-detail-list { width: 100% !important; min-height: 0 !important; max-height: calc(min(720px, 100dvh - 64px) - 92px) !important; overflow: hidden auto !important; padding-right: 0 !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #myProfileDetailSection .soc-profile-detail-sheet { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #myProfileDetailSection .soc-profile-detail-sheet-head, html body:not(.soc-auth-shell-active) #myProfileDetailSection .soc-profile-detail-sheet-row { width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #myProfileDetailSection .soc-profile-detail-sheet-body { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; max-height: calc(min(720px, 100dvh - 64px) - 148px) !important; overflow: hidden auto !important; } @media (max-width: 720px) { html body:not(.soc-auth-shell-active) #myProfileDetailSection.soc-profile-detail-overlay:not(.hidden) { padding: 12px !important; } html body:not(.soc-auth-shell-active) #myProfileDetailSection .soc-profile-detail-overlay-panel { width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; padding: 18px 16px 20px !important; } html body:not(.soc-auth-shell-active) #myProfileDetailSection .soc-profile-detail-list { max-height: calc(100dvh - 112px) !important; } html body:not(.soc-auth-shell-active) #myProfileDetailSection .soc-profile-detail-sheet-body { max-height: calc(100dvh - 168px) !important; } } html body:not(.soc-auth-shell-active) #peopleView:not(.hidden) #peopleOverviewKpiStrip { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row { grid-template-columns: minmax(420px, 0.95fr) minmax(640px, 1.44fr) !important; column-gap: 0 !important; min-height: 0 !important; padding: 22px 32px !important; border-radius: 12px !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-left { column-gap: 0 !important; height: 112px !important; min-height: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat { grid-template-rows: 24px 19px 34px !important; gap: 6px !important; min-height: 112px !important; height: 112px !important; padding: 0 8px !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat:not(:last-child) { border-right: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat:not(:last-child)::after { content: "" !important; position: absolute !important; top: 8px !important; right: 0 !important; bottom: 8px !important; width: 1px !important; background: var(--soc-border-subtle, #d8e2ef) !important; pointer-events: none !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-right { position: relative !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 32px !important; align-items: center !important; min-width: 0 !important; padding-left: 32px !important; border-left: 1px solid var(--soc-border-subtle, #d8e2ef) !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-right::before { content: "" !important; position: absolute !important; top: 8px !important; bottom: 8px !important; left: calc(50% + 17px) !important; width: 1px !important; background: var(--soc-border-subtle, #d8e2ef) !important; pointer-events: none !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon { width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon svg { width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy .label { font-size: 13px !important; line-height: 18px !important; font-weight: 750 !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy strong { font-size: 30px !important; line-height: 34px !important; font-weight: 850 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy strong em { font-size: 14px !important; line-height: 18px !important; font-weight: 750 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block { grid-template-rows: 22px minmax(0, 1fr) !important; gap: 10px !important; min-height: 136px !important; height: 136px !important; padding: 0 18px !important; border-left: 0 !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block + .soc-people-reference-donut-block { border-left: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block h4 { font-size: 14px !important; line-height: 18px !important; font-weight: 850 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-layout { grid-template-columns: 104px minmax(0, 1fr) !important; gap: 14px !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut { width: 104px !important; min-width: 104px !important; max-width: 104px !important; height: 104px !important; min-height: 104px !important; max-height: 104px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut::after { inset: 9px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-center { width: 68px !important; gap: 4px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-center span { font-size: 12px !important; line-height: 15px !important; font-weight: 750 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-center strong { font-size: 20px !important; line-height: 24px !important; font-weight: 850 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-center strong em { font-size: 12px !important; line-height: 16px !important; font-weight: 750 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend { gap: 8px !important; min-width: 0 !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend-row { grid-template-columns: minmax(0, 1fr) minmax(14px, auto) minmax(54px, auto) !important; gap: 6px !important; min-width: 0 !important; overflow: hidden !important; font-size: 12px !important; line-height: 16px !important; font-weight: 650 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend-label { gap: 6px !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend-label i { width: 7px !important; min-width: 7px !important; height: 7px !important; } @media (min-width: 1200px) and (max-width: 1499.98px) { html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row { grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.4fr) !important; padding: 20px 24px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-left { height: 104px !important; column-gap: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat { grid-template-rows: 22px 18px 30px !important; min-height: 104px !important; height: 104px !important; padding-inline: 6px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat:not(:last-child)::after { right: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-right { column-gap: 24px !important; padding-left: 24px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-right::before { left: calc(50% + 13px) !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon { width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon svg { width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy strong { font-size: 27px !important; line-height: 31px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block { min-height: 116px !important; height: 116px !important; padding-inline: 12px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-layout { grid-template-columns: 84px minmax(0, 1fr) !important; gap: 10px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut { width: 84px !important; min-width: 84px !important; height: 84px !important; min-height: 84px !important; } } @media (max-width: 1199.98px) { html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row { grid-template-columns: minmax(0, 1fr) !important; padding: 18px !important; row-gap: 18px !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-left { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 0 !important; row-gap: 0 !important; height: auto !important; min-height: 0 !important; padding-bottom: 18px !important; border-bottom: 1px solid var(--soc-border-subtle, #d8e2ef) !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat { grid-template-rows: 22px 17px 29px !important; min-height: 92px !important; height: 92px !important; padding-inline: 6px !important; position: relative !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat:not(:last-child)::after { display: none !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat:nth-child(odd)::after { content: "" !important; display: block !important; position: absolute !important; top: 8px !important; right: 0 !important; bottom: 8px !important; width: 1px !important; background: var(--soc-border-subtle, #d8e2ef) !important; pointer-events: none !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat:nth-child(-n + 2)::before { content: "" !important; position: absolute !important; left: 8px !important; right: 8px !important; bottom: 0 !important; height: 1px !important; background: var(--soc-border-subtle, #d8e2ef) !important; pointer-events: none !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon { width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon svg { width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-copy strong { font-size: 26px !important; line-height: 30px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-right { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; row-gap: 18px !important; padding-left: 0 !important; border-left: 0 !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-right::before { display: none !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block, html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block + .soc-people-reference-donut-block { grid-template-rows: 18px auto !important; min-height: 0 !important; height: auto !important; padding: 0 !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block + .soc-people-reference-donut-block { padding-top: 18px !important; border-top: 1px solid var(--soc-border-subtle, #d8e2ef) !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-block h4 { text-align: left !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut-layout { grid-template-columns: 88px minmax(0, 1fr) !important; align-items: center !important; justify-items: stretch !important; gap: 14px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-donut { width: 88px !important; min-width: 88px !important; height: 88px !important; min-height: 88px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend { width: 100% !important; max-width: none !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-legend-row { grid-template-columns: minmax(0, 1fr) minmax(14px, auto) minmax(46px, auto) !important; overflow: visible !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) #opsSupportReferenceRoot { min-height: calc(100dvh - 168px) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-shell { align-items: stretch !important; grid-template-rows: auto minmax(0, 1fr) !important; min-height: calc(100dvh - 168px) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-main { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) :is(.ops-ref-calendar, .ops-ref-list) { min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-detail-panel { align-self: start !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; height: var(--ops-ref-detail-available-height, calc(100dvh - 202px)) !important; min-height: 0 !important; max-height: var(--ops-ref-detail-available-height, calc(100dvh - 202px)) !important; overflow: hidden !important; padding: 18px 18px 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-detail-panel.is-collapsed { grid-template-rows: minmax(0, 1fr) !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-detail-body { min-height: 0 !important; overflow-y: auto !important; padding: 0 0 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"]:not(.hidden) .ops-ref-detail-footer { align-self: end !important; position: relative !important; inset: auto !important; margin: 0 -18px !important; padding: 16px 18px 18px !important; border-top: 1px solid var(--ops-ref-line, #e5e7eb) !important; background: #ffffff !important; box-shadow: 0 -8px 16px rgba(15, 23, 42, 0.03) !important; } } .global-notice-host { position: fixed !important; top: calc(var(--soc-safe-top, 0px) + 74px) !important; right: auto !important; left: 50% !important; margin: 0 !important; width: min(424px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; transform: translate3d(-50%, 0, 0) !important; display: grid !important; justify-items: stretch !important; gap: 8px !important; pointer-events: none !important; z-index: 2200 !important; } html > body > .global-notice-host { left: 50% !important; right: auto !important; transform: translate3d(-50%, 0, 0) !important; } .global-notice-host > :is(.global-notice, .global-notice-overflow) { width: 100% !important; max-width: 100% !important; justify-self: stretch !important; } .soc-toast { left: 50% !important; top: 50% !important; transform: translate3d(-50%, -50%, 0) !important; } .soc-toast.is-show { transform: translate3d(-50%, calc(-50% - 2px), 0) !important; } @keyframes sentrixRealtimeDetailRailEnter { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-realtime-detail-rail-width: clamp(392px, 29vw, 484px); --sentrix-realtime-detail-gap: 16px; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.soc-ops-workspace-main, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) var(--sentrix-realtime-detail-rail-width) !important; gap: var(--sentrix-realtime-detail-gap) !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.soc-ops-workspace-main { grid-template-areas: "filters filters" "list detail" !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-left-stack { display: contents !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-filter-card { grid-area: filters !important; width: 100% !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.soc-ops-workspace-main.is-detail-collapsed, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main.is-detail-collapsed { grid-template-columns: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card { grid-column: 1 !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-card { grid-area: list !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-detail-card.soc-ops-workspace-detail-panel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-card { position: relative !important; box-sizing: border-box !important; inset: auto !important; right: auto !important; grid-column: 2 !important; justify-self: stretch !important; align-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; opacity: 0 !important; pointer-events: none !important; transform: none !important; transition: opacity var(--motion-base, 200ms) var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)), transform var(--motion-slow, 320ms) var(--ease-apple, cubic-bezier(0.19, 1, 0.22, 1)) !important; z-index: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-detail-card.soc-ops-workspace-detail-panel { grid-area: detail !important; display: grid !important; min-height: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-card { display: flex !important; flex-direction: column !important; overflow: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-detail-card.soc-ops-workspace-detail-panel:not(.hidden):not(.is-empty-selection):not(.is-situation-collapsed), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-detail-card:not(.hidden):not(.is-empty-selection):not(.is-ticket-collapsed) { opacity: 1 !important; pointer-events: auto !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.is-detail-collapsed .soc-situation-detail-card.soc-ops-workspace-detail-panel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main.is-detail-collapsed .soc-ticket-reference-detail-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.is-empty-result .soc-situation-detail-card.soc-ops-workspace-detail-panel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main.is-empty-result .soc-ticket-reference-detail-card { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-collapse-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-collapse-btn { position: fixed !important; top: calc(var(--soc-topbar-height, 64px) + ((100dvh - var(--soc-topbar-height, 64px)) / 2)) !important; right: calc(var(--sentrix-realtime-detail-rail-width, 424px) + (var(--sentrix-realtime-detail-gap, 16px) / 2)) !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; margin: 0 !important; transform: translate(50%, -50%) !important; z-index: 45 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.is-detail-collapsed .soc-situation-collapse-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main.is-detail-collapsed .soc-ticket-reference-collapse-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.is-empty-result .soc-situation-collapse-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main.is-empty-result .soc-ticket-reference-collapse-btn { right: -16px !important; transform: translate(0, -50%) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel).soc-pc-side-panel:not(.hidden) { animation: none !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel).soc-pc-side-panel.is-detail-entering:not(.hidden) { animation-name: sentrixRealtimeDetailRailEnter !important; animation-duration: var(--motion-slow, 320ms) !important; animation-timing-function: var(--ease-apple, cubic-bezier(0.19, 1, 0.22, 1)) !important; animation-fill-mode: both !important; } } @media (min-width: 1024px) { body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-stepper { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: start !important; padding: 0 2px 14px !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-step { grid-template-columns: 1fr !important; grid-template-rows: 36px minmax(20px, auto) !important; justify-items: center !important; align-items: start !important; gap: 10px !important; padding: 0 !important; text-align: center !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-step::after { top: 18px !important; left: calc(50% + 24px) !important; right: calc(-50% + 24px) !important; z-index: 0 !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-step-node { grid-row: 1 !important; z-index: 2 !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-step-copy { grid-row: 2 !important; justify-items: center !important; position: relative !important; z-index: 3 !important; padding: 0 8px !important; width: auto !important; max-width: min(148px, 100%) !important; min-height: 20px !important; background: var(--soc-surface, #fff) !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-step-copy strong { font-size: 12px !important; line-height: 17px !important; white-space: nowrap !important; } } @media (prefers-reduced-motion: reduce) { html body:not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel).is-detail-entering:not(.hidden) { animation: none !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.soc-ops-workspace-main, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main { position: relative !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsCommentPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketCommentPanel { display: flex !important; flex-direction: column !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 24px 22px 0 !important; scroll-padding-bottom: 104px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsCommentPanel.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketCommentPanel.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsCommentPanel.is-situation-collapsed, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketCommentPanel.is-ticket-collapsed { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; column-gap: 14px !important; margin: 0 0 20px !important; padding: 0 0 18px !important; border-bottom: 1px solid #e8eef7 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-heading { min-width: 0 !important; display: grid !important; gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-kicker { color: #8a97ad !important; font-size: 13px !important; font-weight: 700 !important; line-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-title-row { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) :is(#opsCommentPanelTitle, #ticketCommentPanelTitle) { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 20px !important; font-weight: 800 !important; line-height: 28px !important; color: #0b2445 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsCommentPanel #situationDetailCollapseBtn.soc-situation-collapse-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketCommentPanel #ticketReferenceDetailCollapseBtn.soc-ticket-reference-collapse-btn { position: static !important; inset: auto !important; right: auto !important; top: auto !important; transform: none !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 10px !important; border: 1px solid #dbe4f0 !important; background: #ffffff !important; color: #0f1f35 !important; box-shadow: 0 8px 20px rgba(15, 31, 53, 0.06) !important; z-index: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsCommentPanel #situationDetailCollapseBtn.soc-situation-collapse-btn svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketCommentPanel #ticketReferenceDetailCollapseBtn.soc-ticket-reference-collapse-btn svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-detail-open-handle svg { width: 20px !important; height: 20px !important; stroke-width: 2.4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-detail-open-handle { position: absolute !important; top: calc(50% + 28px) !important; right: -14px !important; width: 34px !important; min-width: 34px !important; height: 42px !important; min-height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #dbe4f0 !important; border-radius: 999px !important; background: #ffffff !important; color: #fb5a1c !important; box-shadow: 0 10px 24px rgba(15, 31, 53, 0.13) !important; transform: translate(50%, -50%) !important; z-index: 12 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-detail-open-handle.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .soc-detail-open-handle[hidden] { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsCommentPanelOpenDetailBtn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketCommentPanelStatusActions { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-actionbar { position: sticky !important; bottom: 0 !important; margin: auto -22px 0 !important; padding: 14px 22px 18px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; border-top: 1px solid #e8eef7 !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), #ffffff 22%) !important; box-shadow: 0 -14px 24px rgba(255, 255, 255, 0.88) !important; z-index: 5 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-actionbar :is(button, .soc-pc-status-menu-wrap) { min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-actionbar > button, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-actionbar .soc-pc-status-menu-toggle { width: 100% !important; height: 46px !important; min-height: 46px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-actionbar :is(button.hidden, .soc-pc-status-menu-toggle.hidden) { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-actionbar:has(> button.hidden + .soc-pc-status-menu-wrap) { grid-template-columns: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-pc-status-menu { bottom: calc(100% + 8px) !important; top: auto !important; right: 0 !important; left: auto !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel.soc-pc-side-panel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel.soc-pc-side-panel { display: flex !important; flex-direction: column !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 24px 22px 0 !important; scroll-padding-bottom: 104px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel.soc-pc-side-panel.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel.soc-pc-side-panel.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel.soc-pc-side-panel.is-situation-collapsed, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel.soc-pc-side-panel.is-ticket-collapsed { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel #situationDetailCollapseBtn.soc-situation-collapse-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel #ticketReferenceDetailCollapseBtn.soc-ticket-reference-collapse-btn { position: static !important; inset: auto !important; right: auto !important; top: auto !important; transform: none !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; z-index: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-detail-open-handle, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-detail-open-handle { position: absolute !important; top: calc(50% + 28px) !important; right: -14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-detail-open-handle.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-detail-open-handle.hidden, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-detail-open-handle[hidden], html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-detail-open-handle[hidden] { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanelOpenDetailBtn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanelStatusActions { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel .soc-detail-rail-actionbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel .soc-detail-rail-actionbar { position: sticky !important; bottom: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel .soc-detail-rail-actionbar #opsCommentPanelDeleteBtn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel .soc-detail-rail-actionbar #opsCommentPanelCloseBtn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel .soc-detail-rail-actionbar #ticketCommentPanelDeleteBtn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel .soc-detail-rail-actionbar #ticketCommentPanelCloseBtn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 46px !important; min-height: 46px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 800 !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #ticketsView #ticketCommentPanel .soc-ticket-reference-timeline-list, #alertsView.soc-situation-reference #opsCommentPanel .soc-situation-timeline-list ) { display: grid !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #ticketsView #ticketCommentPanel .soc-ticket-reference-timeline-list.is-scrollable, #alertsView.soc-situation-reference #opsCommentPanel .soc-situation-timeline-list.is-scrollable ) { max-height: var(--detail-timeline-visible-max-height, 188px) !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; padding-right: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-timeline-list li { display: grid !important; grid-template-columns: 10px 56px minmax(0, 1fr) !important; align-items: start !important; column-gap: 10px !important; min-width: 0 !important; color: #465b78 !important; font-size: 14px !important; line-height: 1.45 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-timeline-list li > span:last-child { min-width: 0 !important; overflow-wrap: anywhere !important; word-break: keep-all !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-timeline-list time { color: #0a2a55 !important; font-weight: 800 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-timeline-dot { width: 8px !important; height: 8px !important; margin-top: 7px !important; border-radius: 999px !important; background: #ff5b14 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-comments { display: block !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-comment-list { display: flex !important; flex-direction: column !important; gap: 12px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-comment-item { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-comment-avatar { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 999px !important; background: #eef4ff !important; color: #385a92 !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-comment-body { display: grid !important; gap: 6px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-comment-meta { display: flex !important; align-items: baseline !important; justify-content: flex-start !important; gap: 8px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-comment-meta strong { color: #0a1d3b !important; font-size: 13px !important; font-weight: 800 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-comment-meta time { color: #7c8ba3 !important; font-size: 12px !important; font-weight: 700 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-comment-bubble { width: fit-content !important; max-width: 100% !important; margin: 0 !important; padding: 10px 12px !important; border: 1px solid #dce6f3 !important; border-radius: 14px !important; background: #f8fbff !important; color: #21324d !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.55 !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; word-break: keep-all !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-ticket-reference-comment-empty { margin: 0 !important; color: #7b89a0 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.5 !important; } } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel > .ds-card-title, body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel #reportView { width: min(1120px, calc(100% - 48px)); max-width: min(1120px, calc(100% - 48px)); margin-inline: auto; box-sizing: border-box; } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel > .ds-card-title { margin-block: 0 10px; } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel.report-selection-active #reportView, body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel:not(.report-selection-active) #reportView { width: min(1120px, calc(100% - 48px)) !important; max-width: min(1120px, calc(100% - 48px)) !important; margin-inline: auto !important; padding: 8px 0 28px !important; overflow-x: clip !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel .report-step-shell { gap: 10px !important; width: 100%; min-width: 0; } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel .report-step-progress { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: end !important; gap: clamp(22px, 4vw, 56px) !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel .report-step-progress-item { min-width: 0 !important; justify-content: flex-start !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel .report-step-progress-copy strong, body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel .report-flow-summary-pill { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel .report-flow-summary { min-height: 18px; margin: 0 !important; align-items: center !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel .report-flow-summary-pills { flex-wrap: nowrap !important; max-width: 100%; overflow: hidden; } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel .report-step-context { gap: 4px !important; margin-top: 0 !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel .report-step-context-eyebrow { min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel.report-selection-active .report-flow-title { max-width: none !important; } @media (max-width: 1023px) { body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel > .ds-card-title, body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel #reportView, body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel.report-selection-active #reportView, body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel:not(.report-selection-active) #reportView { width: min(100%, calc(100dvw - 24px)) !important; max-width: min(100%, calc(100dvw - 24px)) !important; margin-inline: auto !important; } body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #reportPanel .report-step-progress { gap: 14px !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.soc-ops-workspace-main { display: grid !important; grid-template-areas: "filters filters" "list detail" !important; grid-template-columns: minmax(0, 1fr) var(--sentrix-realtime-detail-rail-width, clamp(392px, 29vw, 484px)) !important; grid-template-rows: auto minmax(0, auto) !important; align-items: stretch !important; align-content: start !important; row-gap: 16px !important; column-gap: var(--sentrix-realtime-detail-gap, 16px) !important; margin-top: 10px !important; padding-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-main-grid.soc-ops-workspace-main.is-detail-collapsed { grid-template-areas: "filters" "list" !important; grid-template-columns: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-left-stack { display: contents !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-filter-card { grid-area: filters !important; margin: 0 !important; align-self: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-card, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card { grid-column: 1 !important; align-self: start !important; justify-self: stretch !important; margin-top: 0 !important; padding-top: 0 !important; transform: none !important; translate: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-card { grid-area: list !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-main { align-content: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-header, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-table-header { height: 40px !important; min-height: 40px !important; align-items: center !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-table-header > span, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-table-header > span, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row > *, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell { display: flex !important; align-items: center !important; min-height: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row { min-height: 60px !important; align-items: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row .incident-title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row .soc-situation-cell--title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--title { justify-content: center !important; text-align: center !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--title { gap: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-title-no { color: #8a97ad !important; flex: 0 0 auto !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-title-text { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is(.soc-ticket-reference-cell--requested, .soc-ticket-reference-cell--status, .soc-ticket-reference-cell--time) { align-self: stretch !important; justify-content: center !important; text-align: center !important; } html body:not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-kicker { display: none !important; } html body:not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-head { align-items: center !important; gap: 12px !important; margin-bottom: 14px !important; padding-bottom: 14px !important; } html body:not(.soc-auth-shell-active) #opsCommentPanel .soc-pc-side-panel-section:first-of-type { margin-top: 0 !important; padding-top: 0 !important; } html body:not(.soc-auth-shell-active) .soc-detail-comment-list { display: flex !important; flex-direction: column !important; gap: 12px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) :is(.soc-detail-comment-item, #ticketCommentPanel .soc-ticket-reference-comment-item, #alertsView .soc-situation-comment-item) { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) 28px !important; align-items: start !important; gap: 10px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) :is(.soc-detail-comment-avatar, #ticketCommentPanel .soc-ticket-reference-comment-avatar, #alertsView .soc-situation-comment-avatar) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 999px !important; background: #eef4ff !important; color: #385a92 !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: 0 !important; } html body:not(.soc-auth-shell-active) .soc-detail-comment-body { display: grid !important; gap: 6px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) .soc-detail-comment-meta { display: flex !important; align-items: baseline !important; gap: 8px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) .soc-detail-comment-meta strong { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) .soc-detail-comment-meta span { color: #7c8ba3 !important; font-size: 12px !important; font-weight: 700 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) .soc-detail-comment-bubble-row { display: flex !important; align-items: flex-end !important; gap: 8px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) :is(.soc-detail-comment-bubble, #ticketCommentPanel .soc-ticket-reference-comment-bubble, #alertsView .soc-situation-comment-bubble) { width: fit-content !important; max-width: min(100%, 320px) !important; margin: 0 !important; padding: 10px 12px !important; border: 1px solid #dce6f3 !important; border-radius: 14px !important; background: #f8fbff !important; color: #21324d !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.55 !important; overflow-wrap: anywhere !important; white-space: pre-wrap !important; word-break: keep-all !important; } html body:not(.soc-auth-shell-active) .soc-detail-comment-time { flex: 0 0 auto !important; margin-bottom: 2px !important; color: #7c8ba3 !important; font-size: 12px !important; font-weight: 700 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) .soc-detail-comment-more { grid-column: 3 !important; grid-row: 1 / span 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: end !important; align-self: start !important; width: 28px !important; height: 28px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #6e7d94 !important; font-size: 14px !important; font-weight: 900 !important; line-height: 1 !important; } html body:not(.soc-auth-shell-active) :is(#ticketCommentPanel .soc-ticket-reference-comment-item, #alertsView .soc-situation-comment-item) { grid-template-columns: 32px minmax(0, 1fr) 28px !important; } html body:not(.soc-auth-shell-active) :is(#ticketCommentPanel .soc-ticket-reference-comment-item, #alertsView .soc-situation-comment-item) .soc-detail-comment-avatar { grid-column: 1 !important; grid-row: 1 / span 2 !important; } html body:not(.soc-auth-shell-active) :is(#ticketCommentPanel .soc-ticket-reference-comment-item, #alertsView .soc-situation-comment-item) .soc-detail-comment-body { grid-column: 2 !important; grid-row: 1 / span 2 !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) :is(#ticketCommentPanel .soc-ticket-reference-comment-item, #alertsView .soc-situation-comment-item) .soc-detail-comment-more { grid-column: 3 !important; grid-row: 1 / span 2 !important; justify-self: end !important; align-self: start !important; } html body:not(.soc-auth-shell-active) .soc-detail-comment-more:hover { background: #eef3fb !important; color: #0b2445 !important; } html body:not(.soc-auth-shell-active) :is(#opsCommentPanelDeleteBtn, #ticketCommentPanelDeleteBtn) { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; } html body:not(.soc-auth-shell-active) :is(#opsCommentPanelDeleteBtn, #ticketCommentPanelDeleteBtn):hover { background: #b91c1c !important; border-color: #b91c1c !important; } html body:not(.soc-auth-shell-active) :is(#opsCommentPanelCloseBtn, #ticketCommentPanelCloseBtn, .soc-pc-status-menu-toggle) { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; } html body:not(.soc-auth-shell-active) :is(#opsCommentPanelCloseBtn, #ticketCommentPanelCloseBtn, .soc-pc-status-menu-toggle):hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; } html body:not(.soc-auth-shell-active) #opsSupportPanel .ops-ref-detail-panel.is-collapsed { position: relative !important; width: 42px !important; min-width: 42px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #opsSupportPanel .ops-ref-detail-panel.is-collapsed .soc-detail-open-handle { position: absolute !important; top: 50% !important; right: 50% !important; transform: translate(50%, -50%) !important; width: 34px !important; height: 42px !important; } html body:not(.soc-auth-shell-active) #opsSupportPanel .ops-ref-detail-icon-btn.ops-ref-detail-collapse-btn { width: 40px !important; height: 40px !important; } html body:not(.soc-auth-shell-active) #opsSupportPanel .ops-ref-detail-collapse-btn svg { width: 20px !important; height: 20px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.4 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } } html body #globalNoticeHost.global-notice-host, html > body > #globalNoticeHost.global-notice-host { position: fixed !important; top: calc(var(--soc-safe-top, 0px) + 16px) !important; right: auto !important; left: 50vw !important; inset-inline-start: 50vw !important; inset-inline-end: auto !important; margin: 0 !important; width: min(424px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; transform: translate3d(-50%, 0, 0) !important; display: grid !important; justify-items: stretch !important; gap: 8px !important; pointer-events: none !important; z-index: 2400 !important; } html body #globalNoticeHost.global-notice-host > :is(.global-notice, .global-notice-overflow) { width: 100% !important; max-width: 100% !important; justify-self: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-table-header > span:nth-child(4), html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--title { display: flex !important; align-items: center !important; justify-content: center !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; text-align: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-cell--title { gap: 6px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .incident-title-tag, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row .incident-title .incident-title-tag, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-title-no { color: #8a97ad !important; flex: 0 0 auto !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0 !important; line-height: 1 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-title-text { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is( .soc-ticket-reference-cell--requested, .soc-ticket-reference-cell--status, .soc-ticket-reference-cell--time ) { display: flex !important; align-items: center !important; justify-content: center !important; align-self: stretch !important; justify-self: stretch !important; width: 100% !important; height: 100% !important; min-height: 60px !important; margin: 0 !important; text-align: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView :is( .soc-ticket-reference-table-header > span:nth-child(5), .soc-ticket-reference-table-header > span:nth-child(6), .soc-ticket-reference-table-header > span:nth-child(7) ) { display: flex !important; align-items: center !important; justify-content: center !important; justify-self: stretch !important; width: 100% !important; text-align: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-status-pill { margin-inline: auto !important; } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) { --sentrix-shell-topbar-h: 78px !important; --sentrix-arls-topbar-h: 78px; --sentrix-arls-sidebar-w: var(--sentrix-shell-sidebar-w, 214px); } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar { position: sticky !important; top: 0 !important; z-index: 90 !important; display: grid !important; grid-template-columns: minmax(300px, 1fr) minmax(240px, 430px) auto !important; align-items: center !important; gap: 12px !important; width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; height: var(--sentrix-arls-topbar-h) !important; min-height: var(--sentrix-arls-topbar-h) !important; max-height: var(--sentrix-arls-topbar-h) !important; margin: 0 !important; padding: 0 24px 0 0 !important; border: 0 !important; border-bottom: 1px solid var(--soc-border, #e4e9f2) !important; border-radius: 0 !important; background: var(--soc-card-bg, #ffffff) !important; box-shadow: none !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#topbarBreadcrumb, #menuToggleBtn, #topbarLanguageWrap, #openPasswordBtn, #topbarNotificationPermissionBtn, .topbar-date-status) { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-left { grid-column: 1 !important; display: flex !important; align-items: center !important; gap: 0 !important; width: 100% !important; min-width: 0 !important; height: 100% !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-heading { position: relative !important; display: inline-flex !important; align-items: center !important; flex: 0 0 var(--sentrix-arls-sidebar-w) !important; width: var(--sentrix-arls-sidebar-w) !important; min-width: var(--sentrix-arls-sidebar-w) !important; max-width: var(--sentrix-arls-sidebar-w) !important; height: 100% !important; min-height: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 24px 0 30px !important; border: 0 !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-heading::after { content: "" !important; position: absolute !important; top: 15px !important; right: 0 !important; bottom: 15px !important; width: 1px !important; border-radius: 999px !important; background: var(--soc-border, #d7deea) !important; pointer-events: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-link { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-width: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-brand-wordmark { width: auto !important; height: 25px !important; max-width: 166px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title { display: inline-flex !important; align-items: center !important; min-width: 0 !important; min-height: 28px !important; margin-left: 40px !important; padding: 0 !important; border: 0 !important; color: var(--soc-text, #0f1b2d) !important; font-size: 18px !important; line-height: 24px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-global-search { grid-column: 2 !important; justify-self: center !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: min(430px, 100%) !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 18px 0 22px !important; border: 1px solid var(--soc-border, #dfe6f1) !important; border-radius: 8px !important; background: var(--soc-card-bg, #ffffff) !important; color: var(--soc-muted, #8a97ab) !important; box-shadow: none !important; font: inherit !important; cursor: default !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-global-search-placeholder { min-width: 0 !important; overflow: hidden !important; color: inherit !important; font-size: 14px !important; line-height: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-align: left !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-global-search-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-utility-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; flex: 0 0 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-global-search-icon svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-utility-icon svg { display: block !important; width: 22px !important; height: 22px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.85 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-right { grid-column: 3 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; width: auto !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarNotificationsBtn { order: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarUtilityCluster { order: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarThemeToggleBtn { order: 3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarAccountShortcutBtn { order: 4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarMyProfileBtn { order: 5 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarUtilityCluster:not(.hidden) { display: inline-flex !important; align-items: center !important; gap: 10px !important; height: 40px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(.topbar-utility-btn, #topbarNotificationsBtn.topbar-btn) { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--soc-muted, #7f8ca3) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(.topbar-utility-btn, #topbarNotificationsBtn.topbar-btn):hover { background: var(--soc-subtle-bg, #f4f7fb) !important; color: var(--soc-text, #17233a) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(.topbar-utility-btn.hidden, #topbarDownloadsBtn.hidden, #topbarNotificationsBtn.hidden) { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img { width: 24px !important; height: 24px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarNotificationsBadge { top: 1px !important; right: 0 !important; min-width: 17px !important; height: 17px !important; padding: 0 5px !important; border: 2px solid var(--soc-card-bg, #ffffff) !important; border-radius: 999px !important; background: #ff5a1f !important; color: #ffffff !important; font-size: 10px !important; line-height: 13px !important; font-weight: 800 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarThemeToggleBtn.topbar-theme-toggle:not(.hidden) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 72px !important; min-width: 72px !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; flex: 0 0 72px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarThemeToggleBtn.topbar-theme-toggle.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarThemeToggleBtn .topbar-theme-track { position: relative !important; display: block !important; width: 72px !important; height: 36px !important; border: 2px solid #ffc19b !important; border-radius: 999px !important; background: #ff7a1a !important; box-sizing: border-box !important; overflow: hidden !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32), 0 2px 6px rgba(255, 106, 0, 0.28) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarThemeToggleBtn .topbar-theme-thumb { position: absolute !important; top: 50% !important; left: 4px !important; z-index: 2 !important; width: 28px !important; height: 28px !important; border-radius: 999px !important; background: #ffffff !important; box-shadow: 0 3px 8px rgba(17, 24, 39, 0.18) !important; pointer-events: none !important; transform: translateY(-50%) !important; transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarThemeToggleBtn[data-theme="dark"] .topbar-theme-thumb { transform: translate(36px, -50%) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarThemeToggleBtn .topbar-theme-icon { position: absolute !important; top: 50% !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; color: #ffffff !important; pointer-events: none !important; transform: translateY(-50%) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarThemeToggleBtn .topbar-theme-icon svg { display: block !important; width: 16px !important; height: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarThemeToggleBtn .topbar-theme-icon-sun { left: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarThemeToggleBtn .topbar-theme-icon-moon { right: 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-admin-profile-btn { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: auto !important; min-width: 112px !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--soc-text, #111827) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-admin-profile-btn.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-admin-profile-btn .topbar-profile-avatar { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-admin-profile-copy { display: grid !important; gap: 2px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarProfileName { color: var(--soc-text, #111827) !important; font-size: 15px !important; line-height: 18px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarProfileRole { color: var(--soc-muted, #7f8ca3) !important; font-size: 12px !important; line-height: 15px !important; font-weight: 700 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-profile-chevron { width: 16px !important; height: 16px !important; color: var(--soc-muted, #7f8ca3) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel { top: var(--sentrix-arls-topbar-h) !important; inset: var(--sentrix-arls-topbar-h) auto 0 0 !important; } } @media (min-width: 1024px) and (max-width: 1180px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar { grid-template-columns: minmax(280px, 1fr) minmax(210px, 300px) auto !important; gap: 10px !important; padding-right: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-current-title { margin-left: 26px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-right { gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarUtilityCluster:not(.hidden) { gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-global-search { height: 42px !important; min-height: 42px !important; padding-inline: 14px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-global-search-placeholder { font-size: 13px !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarNotificationsBtn.topbar-btn:not(.hidden) { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--soc-muted, #7f8ca3) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; object-fit: contain !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) { --sentrix-shell-topbar-h: 64px !important; --sentrix-arls-topbar-h: 64px !important; --soc-topbar-height: 64px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar { position: sticky !important; top: 0 !important; z-index: 60 !important; display: grid !important; grid-template-columns: minmax(300px, 1fr) minmax(240px, 430px) auto !important; align-items: center !important; gap: 16px !important; width: 100% !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; padding: 0 24px 0 0 !important; border-bottom: 1px solid var(--soc-border, #dfe6f1) !important; background: var(--soc-surface, #ffffff) !important; box-shadow: none !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-left { display: flex !important; align-items: center !important; gap: 0 !important; min-width: 0 !important; height: 64px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-heading { position: relative !important; display: inline-flex !important; align-items: center !important; flex: 0 0 214px !important; width: 214px !important; min-width: 214px !important; max-width: 214px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; margin: 0 !important; padding: 0 24px 0 30px !important; border: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-heading::after { content: "" !important; position: absolute !important; top: 12px !important; right: 0 !important; bottom: 12px !important; width: 1px !important; border-radius: 999px !important; background: var(--soc-border, #d7deea) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-link { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; height: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark { display: block !important; width: auto !important; height: 25px !important; max-width: 166px !important; max-height: 25px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarCurrentTitle.topbar-current-title { display: inline-flex !important; align-items: center !important; min-width: 0 !important; min-height: 24px !important; margin: 0 0 0 40px !important; padding: 0 !important; border: 0 !important; color: var(--soc-text, #0f1b2d) !important; font-size: 18px !important; line-height: 24px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarCurrentTitle.topbar-current-title.hidden { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-global-search { justify-self: center !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; width: min(430px, 100%) !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 18px 0 22px !important; border: 1px solid var(--soc-border, #dfe6f1) !important; border-radius: 8px !important; background: var(--soc-card-bg, #ffffff) !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-right { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; min-width: 0 !important; height: 64px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar :is(.topbar-utility-btn, #topbarNotificationsBtn.topbar-btn) { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar :is(.topbar-utility-icon, .topbar-utility-icon svg, #topbarNotificationsBtn .topbar-notification-icon-img) { width: 22px !important; height: 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .container.admin-layout #menuSheetPanel { top: 64px !important; inset: 64px auto 0 0 !important; } } @media (min-width: 1024px) and (max-width: 1180px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar { grid-template-columns: minmax(280px, 1fr) minmax(210px, 300px) auto !important; gap: 10px !important; padding-right: 16px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarCurrentTitle.topbar-current-title { margin-left: 26px !important; } } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-reference-savebar { display: none !important; } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active), html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) { --sentrix-shell-topbar-h: 64px !important; --sentrix-arls-topbar-h: 64px !important; --soc-topbar-height: 64px !important; --sentrix-arls-sidebar-w: 214px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar { position: sticky !important; top: 0 !important; z-index: 90 !important; display: grid !important; grid-template-columns: minmax(300px, 1fr) minmax(240px, 430px) auto !important; align-items: center !important; gap: 16px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; margin: 0 !important; padding: 0 24px 0 0 !important; border: 0 !important; border-bottom: 1px solid var(--soc-border, #dfe6f1) !important; border-radius: 0 !important; background: var(--soc-surface, #ffffff) !important; box-shadow: none !important; box-sizing: border-box !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar > .topbar-left, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar > .topbar-left { grid-column: 1 !important; display: flex !important; align-items: center !important; gap: 0 !important; width: 100% !important; min-width: 0 !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-heading, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar .topbar-brand-heading { position: relative !important; display: inline-flex !important; align-items: center !important; flex: 0 0 214px !important; width: 214px !important; min-width: 214px !important; max-width: 214px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; margin: 0 !important; padding: 0 24px 0 30px !important; border: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-heading::after, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar .topbar-brand-heading::after { content: "" !important; position: absolute !important; top: 12px !important; right: 0 !important; bottom: 12px !important; width: 1px !important; border-radius: 999px !important; background: var(--soc-border, #d7deea) !important; pointer-events: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar .topbar-brand-wordmark { display: block !important; width: auto !important; height: 25px !important; max-width: 166px !important; max-height: 25px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarCurrentTitle.topbar-current-title, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar #topbarCurrentTitle.topbar-current-title { display: inline-flex !important; align-items: center !important; min-width: 0 !important; min-height: 24px !important; margin: 0 0 0 40px !important; padding: 0 !important; border: 0 !important; color: var(--soc-text, #0f1b2d) !important; font-size: 18px !important; line-height: 24px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-global-search, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar .topbar-global-search { grid-column: 2 !important; justify-self: center !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; width: min(430px, 100%) !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; margin: 0 !important; padding: 0 18px 0 22px !important; border: 1px solid var(--soc-border, #dfe6f1) !important; border-radius: 8px !important; background: var(--soc-card-bg, #ffffff) !important; box-shadow: none !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar > .topbar-right, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar > .topbar-right { grid-column: 3 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; width: auto !important; min-width: 0 !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar :is(.topbar-utility-btn, #topbarNotificationsBtn.topbar-btn), html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar :is(.topbar-utility-btn, #topbarNotificationsBtn.topbar-btn) { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar :is(.topbar-utility-icon, .topbar-utility-icon svg, #topbarNotificationsBtn .topbar-notification-icon, #topbarNotificationsBtn .topbar-notification-icon-img), html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar :is(.topbar-utility-icon, .topbar-utility-icon svg, #topbarNotificationsBtn .topbar-notification-icon, #topbarNotificationsBtn .topbar-notification-icon-img) { width: 24px !important; height: 24px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #menuSheetPanel, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) #menuSheetPanel { top: 64px !important; inset: 64px auto 0 0 !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row .incident-status, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row .incident-status { display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: center !important; align-self: center !important; width: auto !important; min-width: 48px !important; max-width: max-content !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; margin: 0 auto !important; padding: 0 10px !important; border-radius: 8px !important; box-sizing: border-box !important; font-size: 11px !important; line-height: 1 !important; font-weight: 800 !important; text-align: center !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) #topbarNotificationsBtn .topbar-notification-icon { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; overflow: hidden !important; } html:not([data-theme="dark"]) body:not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img.sentrix-theme-icon-dark, html[data-theme="light"] body:not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img.sentrix-theme-icon-dark, body:not([data-theme="dark"]):not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img.sentrix-theme-icon-dark { display: none !important; } html:not([data-theme="dark"]) body:not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img.sentrix-theme-icon-light, html[data-theme="light"] body:not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img.sentrix-theme-icon-light, body:not([data-theme="dark"]):not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img.sentrix-theme-icon-light { display: block !important; width: 28px !important; height: 28px !important; object-fit: contain !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img.sentrix-theme-icon-light, body[data-theme="dark"]:not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img.sentrix-theme-icon-light { display: none !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img.sentrix-theme-icon-dark, body[data-theme="dark"]:not(.soc-auth-shell-active) #topbarNotificationsBtn .topbar-notification-icon-img.sentrix-theme-icon-dark { display: block !important; width: 28px !important; height: 28px !important; object-fit: contain !important; } html:not([data-theme="dark"]) body:not(.dark):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-dark, html[data-theme="light"] body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-dark, body.light:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-dark { display: none !important; opacity: 0 !important; } html:not([data-theme="dark"]) body:not(.dark):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-light, html[data-theme="light"] body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-light, body.light:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-light { display: block !important; opacity: 1 !important; width: auto !important; height: 25px !important; max-width: 166px !important; object-fit: contain !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-light, body.dark:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-light { display: none !important; opacity: 0 !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-dark, body.dark:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-dark { display: block !important; opacity: 1 !important; width: auto !important; height: 25px !important; max-width: 166px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl).dark:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-light, html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-light { display: none !important; opacity: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl).dark:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-dark, html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-dark { display: block !important; opacity: 1 !important; width: auto !important; height: 25px !important; max-width: 166px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.dark):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-dark, html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-dark { display: none !important; opacity: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.dark):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-light, html[data-theme="light"] body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark-light { display: block !important; opacity: 1 !important; width: auto !important; height: 25px !important; max-width: 166px !important; object-fit: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-link { position: relative !important; flex: 0 0 166px !important; width: 166px !important; min-width: 166px !important; max-width: 166px !important; height: 25px !important; min-height: 25px !important; max-height: 25px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark { position: absolute !important; left: 0 !important; top: 0 !important; width: 166px !important; height: 25px !important; max-width: 166px !important; max-height: 25px !important; } } html body:not(.soc-auth-shell-active) :is(#topbarUtilityCluster, #topbarMailBtn, #topbarHelpBtn, #topbarAccountShortcutBtn) { display: none !important; visibility: hidden !important; pointer-events: none !important; } html body:not(.soc-auth-shell-active) #alerts { position: fixed !important; top: calc(var(--sentrix-shell-topbar-h, 64px) + 24px) !important; right: auto !important; bottom: auto !important; left: 50% !important; width: min(424px, calc(100vw - 32px)) !important; transform: translateX(-50%) !important; z-index: 1400 !important; } html > body > .global-notice-host { position: fixed !important; top: calc(var(--sentrix-shell-topbar-h, 64px) + 24px) !important; right: auto !important; left: 50% !important; width: min(424px, calc(100vw - 32px)) !important; transform: translateX(-50%) !important; z-index: 1500 !important; justify-items: stretch !important; } html body:not(.soc-auth-shell-active) :is(.alert-item.soc-toss-feed-card.leave, .global-notice.leave) { opacity: 0 !important; transform: translateY(-8px) scale(0.985) !important; transition: opacity 180ms var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)), transform 180ms var(--ease-toss, cubic-bezier(0.2, 0.8, 0.2, 1)) !important; pointer-events: none !important; } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel).soc-pc-side-panel { padding: 18px 20px 0 !important; scroll-padding-bottom: 92px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-head { align-items: center !important; column-gap: 10px !important; margin: 0 0 12px !important; padding: 0 0 12px !important; min-height: 34px !important; border-bottom: 1px solid var(--soc-border, #e8eef7) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-title-row { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#opsCommentPanelTitle, #ticketCommentPanelTitle) { margin: 0 !important; color: var(--soc-text, #0f1b2d) !important; font-size: 18px !important; line-height: 24px !important; font-weight: 850 !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #opsCommentPanel .soc-pc-side-panel-kpi, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #ticketCommentPanel .soc-pc-side-panel-kpi { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-pc-side-panel-section { margin: 0 !important; padding: 12px 0 !important; border-top: 1px solid var(--soc-border, #e8eef7) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-detail-rail-head + :is(.soc-pc-side-panel-section, .soc-pc-side-panel-kpi) { border-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-pc-side-panel-section-title { margin: 0 0 8px !important; color: var(--soc-muted, #6f7f95) !important; font-size: 12px !important; line-height: 16px !important; font-weight: 850 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#opsCommentPanel, #ticketCommentPanel) .soc-pc-side-panel-summary { gap: 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #opsCommentPanelImportantPill.soc-situation-important-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; height: 22px !important; min-width: 42px !important; padding: 0 8px !important; border: 1px solid #bfd7ff !important; border-radius: 999px !important; background: #edf5ff !important; color: #1d5fd1 !important; font-size: 12px !important; line-height: 1 !important; font-weight: 850 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #opsCommentPanelImportantPill.soc-situation-important-pill.is-critical { border-color: #fecaca !important; background: #fff1f2 !important; color: #dc2626 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#situationDetailCollapseBtn.soc-situation-collapse-btn, #ticketReferenceDetailCollapseBtn.soc-ticket-reference-collapse-btn, .soc-detail-open-handle) { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--soc-text, #0f1b2d) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-detail-open-handle { top: calc(50% + 28px) !important; right: -6px !important; transform: translate(50%, -50%) !important; z-index: 12 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#situationDetailCollapseBtn.soc-situation-collapse-btn, #ticketReferenceDetailCollapseBtn.soc-ticket-reference-collapse-btn, .soc-detail-open-handle):is(:hover, :focus-visible) { background: transparent !important; box-shadow: none !important; color: #fb5a1c !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#situationDetailCollapseBtn.soc-situation-collapse-btn, #ticketReferenceDetailCollapseBtn.soc-ticket-reference-collapse-btn, .soc-detail-open-handle) svg { width: 22px !important; height: 22px !important; stroke: currentColor !important; stroke-width: 2.3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#opsCommentPanelDeleteBtn, #ticketCommentPanelDeleteBtn) { border-color: #dc2626 !important; background: #dc2626 !important; color: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) :is(#opsCommentPanelDeleteBtn, #ticketCommentPanelDeleteBtn):is(:hover, :focus-visible) { border-color: #b91c1c !important; background: #b91c1c !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanel .soc-detail-rail-actionbar #opsCommentPanelDeleteBtn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-detail-rail-actionbar #ticketCommentPanelDeleteBtn { border-color: #dc2626 !important; background: #dc2626 !important; color: #ffffff !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #alertsView.soc-situation-reference #opsCommentPanel .soc-detail-rail-actionbar #opsCommentPanelDeleteBtn:is(:hover, :focus-visible), html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #ticketsView #ticketCommentPanel .soc-detail-rail-actionbar #ticketCommentPanelDeleteBtn:is(:hover, :focus-visible) { border-color: #b91c1c !important; background: #b91c1c !important; color: #ffffff !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel #situationDetailCollapseBtn.soc-situation-collapse-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel #ticketReferenceDetailCollapseBtn.soc-ticket-reference-collapse-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-detail-open-handle, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-detail-open-handle { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--soc-text, #0f1b2d) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel #situationDetailCollapseBtn.soc-situation-collapse-btn svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel #ticketReferenceDetailCollapseBtn.soc-ticket-reference-collapse-btn svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-detail-open-handle svg, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-detail-open-handle svg { width: 22px !important; height: 22px !important; stroke: currentColor !important; stroke-width: 2.3 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel #situationDetailCollapseBtn.soc-situation-collapse-btn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel #ticketReferenceDetailCollapseBtn.soc-ticket-reference-collapse-btn { position: static !important; inset: auto !important; right: auto !important; top: auto !important; transform: none !important; width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--soc-text, #0f1b2d) !important; z-index: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-detail-open-handle, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-detail-open-handle { position: absolute !important; top: calc(50% + 28px) !important; right: -6px !important; transform: translate(50%, -50%) !important; width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--soc-text, #0f1b2d) !important; z-index: 12 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanelOpenDetailBtn, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanelStatusActions { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel .soc-detail-rail-actionbar, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel .soc-detail-rail-actionbar { position: sticky !important; bottom: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel.soc-situation-detail-card .soc-situation-detail-head.soc-detail-rail-head, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel .soc-ticket-reference-detail-head.soc-detail-rail-head { align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 0 0 12px !important; min-height: 34px !important; border-bottom: 1px solid var(--soc-border, #e8eef7) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel.soc-situation-detail-card .soc-pc-side-panel-section, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel .soc-pc-side-panel-section { display: grid !important; gap: 8px !important; margin: 0 !important; padding: 12px 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--soc-border, #e8eef7) !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel.soc-situation-detail-card .soc-pc-side-panel-section:first-of-type, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel .soc-pc-side-panel-section:first-of-type { margin-top: 0 !important; padding-top: 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference #opsCommentPanel.soc-situation-detail-card .soc-pc-side-panel-section:last-of-type, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView #ticketCommentPanel .soc-pc-side-panel-section:last-of-type { padding-bottom: 12px !important; border-bottom: 0 !important; } } html body:not(.soc-auth-shell-active) .topbar-global-search { position: relative !important; display: flex !important; align-items: center !important; gap: 10px !important; min-width: 320px !important; width: min(420px, 28vw) !important; height: 42px !important; padding: 0 14px !important; border: 1px solid var(--soc-border, #e5edf8) !important; border-radius: 8px !important; background: var(--soc-surface, #ffffff) !important; color: var(--soc-muted, #6b778c) !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) .topbar-global-search.is-open, html body:not(.soc-auth-shell-active) .topbar-global-search:focus-within { border-color: #cfdceb !important; box-shadow: 0 8px 24px rgba(15, 35, 70, 0.08) !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-input { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; color: var(--soc-text, #172238) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 700 !important; appearance: none !important; -webkit-appearance: none !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-input::placeholder { color: #7b8798 !important; font-weight: 700 !important; opacity: 1 !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-input::-webkit-search-decoration, html body:not(.soc-auth-shell-active) .topbar-global-search-input::-webkit-search-cancel-button, html body:not(.soc-auth-shell-active) .topbar-global-search-input::-webkit-search-results-button, html body:not(.soc-auth-shell-active) .topbar-global-search-input::-webkit-search-results-decoration { display: none !important; -webkit-appearance: none !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-icon { flex: 0 0 20px !important; display: grid !important; place-items: center !important; width: 20px !important; height: 20px !important; color: #6e7a8e !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-icon svg { width: 20px !important; height: 20px !important; stroke-width: 2 !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-panel { position: fixed !important; top: 86px !important; left: 50% !important; z-index: 1400 !important; display: grid !important; gap: 8px !important; width: min(560px, calc(100vw - 32px)) !important; max-height: min(520px, calc(100dvh - 120px)) !important; padding: 12px !important; border: 1px solid var(--soc-border, #e5edf8) !important; border-radius: 12px !important; background: var(--soc-surface, #ffffff) !important; box-shadow: 0 24px 60px rgba(15, 35, 70, 0.18) !important; transform: translateX(-50%) !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-panel.hidden { display: none !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-panel-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 2px 4px 8px !important; border-bottom: 1px solid var(--soc-border, #e8eef7) !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-panel-head strong { min-width: 0 !important; color: var(--soc-text, #172238) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 850 !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-close { display: inline-grid !important; place-items: center !important; width: 28px !important; height: 28px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #6e7d94 !important; font-size: 20px !important; line-height: 1 !important; font-weight: 700 !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-results { display: grid !important; gap: 6px !important; max-height: min(430px, calc(100dvh - 188px)) !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 2px !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-result { display: grid !important; grid-template-columns: 74px minmax(0, 1fr) max-content !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-height: 48px !important; padding: 8px 10px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--soc-text, #172238) !important; text-align: left !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-result:is(:hover, :focus-visible) { background: #f4f7fb !important; outline: 0 !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-result-section { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 24px !important; padding: 0 8px !important; border-radius: 999px !important; background: #fff1e8 !important; color: #fb5a1c !important; font-size: 11px !important; line-height: 1 !important; font-weight: 850 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-result-copy { display: grid !important; gap: 2px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-result-copy strong { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: var(--soc-text, #172238) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 850 !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-result-copy span { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: #6f7f95 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 650 !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-result-meta { color: #93a0b3 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 800 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-recent-item { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; min-height: 44px !important; padding: 8px 10px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--soc-text, #172238) !important; text-align: left !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-recent-item:is(:hover, :focus-visible) { background: #f4f7fb !important; outline: 0 !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-recent-item strong { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 13px !important; line-height: 18px !important; font-weight: 850 !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-recent-item span { flex: 0 0 auto !important; color: #93a0b3 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 800 !important; } html body:not(.soc-auth-shell-active) .topbar-global-search-empty { margin: 0 !important; padding: 28px 12px !important; color: #7c8ba3 !important; text-align: center !important; font-size: 13px !important; line-height: 20px !important; font-weight: 750 !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-card, html body:not(.soc-auth-shell-active) #ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar { grid-template-columns: 220px repeat(5, minmax(148px, 180px)) !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-spacer, html body:not(.soc-auth-shell-active) #ticketsView #ticketReferenceResetBtn.soc-ticket-reference-reset, html body:not(.soc-auth-shell-active) #situationDetailOpenHandleBtn, html body:not(.soc-auth-shell-active) #ticketReferenceDetailOpenHandleBtn { display: none !important; visibility: hidden !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } html body:not(.soc-auth-shell-active) #opsCommentPanelImportantPill.soc-situation-important-pill.is-closed { min-width: 46px !important; height: 26px !important; padding: 0 10px !important; border: 1px solid #ef4444 !important; border-radius: 8px !important; background: #ffffff !important; color: #dc2626 !important; font-size: 13px !important; line-height: 1 !important; font-weight: 850 !important; } html body:not(.soc-auth-shell-active) :is(.soc-detail-comment-avatar, #ticketCommentPanel .soc-ticket-reference-comment-avatar, #alertsView .soc-situation-comment-avatar).is-photo { overflow: hidden !important; background: #e9f1ff !important; color: transparent !important; } html body:not(.soc-auth-shell-active) :is(.soc-detail-comment-avatar, #ticketCommentPanel .soc-ticket-reference-comment-avatar, #alertsView .soc-situation-comment-avatar).is-photo img { display: block !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; object-fit: cover !important; } html body:not(.soc-auth-shell-active) .soc-detail-comment-avatar-initials { display: inline-flex !important; align-items: center !important; justify-content: center !important; max-width: 100% !important; color: inherit !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) .soc-detail-comment-avatar.is-avatar-length-3 .soc-detail-comment-avatar-initials { font-size: 10px !important; } html body:not(.soc-auth-shell-active) .soc-detail-comment-avatar.is-avatar-length-4 .soc-detail-comment-avatar-initials { font-size: 9px !important; } html body:not(.soc-auth-shell-active) #opsSupportPanel .ops-ref-shell.has-collapsed-detail { position: relative !important; grid-template-columns: minmax(0, 1fr) !important; } html body:not(.soc-auth-shell-active) #opsSupportPanel .ops-ref-detail-peek-btn { position: absolute !important; top: 50% !important; right: 8px !important; z-index: 14 !important; display: none !important; place-items: center !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: var(--soc-text, #0f1b2d) !important; transform: translateY(-50%) !important; } html body:not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-shell.has-collapsed-detail { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row .incident-severity.eci--na, html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-basic-row dd.eci--na { color: #7b8798 !important; font-weight: 700 !important; } html body:not(.soc-auth-shell-active) #opsSupportPanel .ops-ref-detail-peek-btn:is(:hover, :focus-visible) { background: #fff1e8 !important; color: #fb5a1c !important; outline: 0 !important; } html body:not(.soc-auth-shell-active) #opsSupportPanel .ops-ref-detail-peek-btn svg { width: 22px !important; height: 22px !important; stroke: currentColor !important; stroke-width: 2.3 !important; fill: none !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-left { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 0 !important; justify-items: stretch !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat { width: 100% !important; min-width: 0 !important; justify-content: center !important; padding-inline: 8px !important; } html body:not(.soc-auth-shell-active) #peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat:not(:last-child)::after { right: 0 !important; } html body:not(.soc-auth-shell-active) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-step-copy { background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-checkbox-group input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; display: inline-grid !important; place-content: center !important; flex: 0 0 18px !important; width: 18px !important; min-width: 18px !important; height: 18px !important; min-height: 18px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #f97316 !important; border-radius: 3px !important; background: var(--soc-surface, #fff) !important; box-sizing: border-box !important; cursor: pointer !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-checkbox-group input[type="checkbox"]::after { content: "" !important; width: 5px !important; height: 9px !important; border: solid #fff !important; border-width: 0 2px 2px 0 !important; opacity: 0 !important; transform: rotate(45deg) scale(0.8) !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-checkbox-group input[type="checkbox"]:checked { border-color: #f97316 !important; background: #f97316 !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-checkbox-group input[type="checkbox"]:checked::after { opacity: 1 !important; transform: rotate(45deg) scale(1) !important; } html body:not(.soc-auth-shell-active) #notificationSettingsPanel .soc-notification-checkbox-group input[type="checkbox"]:focus-visible { outline: 2px solid rgba(249, 115, 22, 0.32) !important; outline-offset: 2px !important; } @media (min-width: 1024px) and (max-width: 1399.98px) { html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-filter-card, html body:not(.soc-auth-shell-active) #ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarNotificationsBtn .topbar-notification-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarNotificationsBtn .topbar-notification-icon-img, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar #topbarNotificationsBtn .topbar-notification-icon, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar #topbarNotificationsBtn .topbar-notification-icon-img { width: 32px !important; height: 32px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarNotificationsBtn.topbar-btn:not(.hidden), html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .role-hq, .role-field, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(:is(#alertsView.soc-situation-reference:not(.hidden), #ticketsView:not(.hidden), #reportPanel:not(.hidden), #peopleView:not(.hidden), #weeklyView:not(.hidden), #googleSheetsPanel:not(.hidden), #notificationSettingsPanel:not(.hidden), #announcementPanel:not(.hidden), #opsSupportPanel:not(.hidden))) .soc-app-shell > header.topbar #topbarNotificationsBtn.topbar-btn:not(.hidden) { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( #homeView, #alertsView.soc-situation-reference, #ticketsView, #peopleView, #notificationSettingsPanel, #reportPanel, #dashboardPanel, #opsSupportPanel, #announcementPanel, #weeklyView, #googleSheetsPanel ) { background: var(--soc-bg) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference { --situation-bg: var(--soc-bg); --situation-surface: var(--soc-surface); --situation-border: var(--soc-table-border); --situation-border-soft: var(--soc-border); --situation-text: var(--soc-text-primary); --situation-muted: var(--soc-text-muted); --situation-orange: var(--soc-primary); --situation-red: var(--soc-danger); --situation-green: var(--soc-success); --situation-blue: var(--soc-info); --situation-purple: #b794ff; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #ticketsView { --ticket-ref-bg: var(--soc-bg); --ticket-ref-surface: var(--soc-surface); --ticket-ref-surface-soft: var(--soc-surface-2); --ticket-ref-border: var(--soc-table-border); --ticket-ref-line: var(--soc-table-border); --ticket-ref-text: var(--soc-text-primary); --ticket-ref-muted: var(--soc-text-muted); --ticket-ref-orange: var(--soc-primary); --ticket-ref-orange-soft: rgba(255, 122, 26, 0.14); --ticket-ref-green: var(--soc-success); --ticket-ref-green-soft: var(--soc-status-success-bg); --ticket-ref-red: var(--soc-danger); --ticket-ref-red-soft: var(--soc-status-danger-bg); --ticket-ref-slate-soft: var(--soc-status-neutral-bg); } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .soc-kpi-card, .sentrix-home-card, .soc-workspace-card, .soc-home-panel, .soc-home-weekly-chart-item, .soc-situation-kpi-card, .soc-situation-filter-card, .soc-situation-table-card, .soc-situation-detail-card, .soc-ticket-reference-summary-card, .soc-ticket-reference-filterbar, .soc-ticket-reference-list-card, .soc-ticket-reference-detail-card, .soc-people-reference-summary-shell, .soc-people-reference-card, .soc-employee-directory-toolbar, .soc-employee-directory-grid, .soc-notification-settings-form, .soc-notification-settings-card, .report-flow-step, .report-choice-card, .report-form-section, .report-flow-summary, .report-step-shell, .report-step-context, .ds-card, .panel ) { background: var(--soc-surface) !important; border-color: var(--soc-border) !important; color: var(--soc-text-primary) !important; box-shadow: none !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .soc-phase1-toolbar, .soc-ops-workspace-results-head, .soc-pc-side-panel, .soc-pc-side-panel-head, .soc-report-toolbar, .report-mode-tabs, .report-form-sticky-footer, .soc-notification-setting-row, .soc-employee-directory-empty, .empty-state ) { background: var(--soc-surface-2) !important; border-color: var(--soc-border) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( h1, h2, h3, h4, h5, .section-title, .soc-block-title, .soc-kpi-title, .soc-kpi-value, .soc-situation-kpi-value, .soc-situation-detail-title, .soc-ticket-reference-detail-title, .soc-ticket-reference-summary-value, .report-choice-card-title, .report-form-title, .soc-employee-directory-title, .soc-notification-settings-title ) { color: var(--soc-text-primary) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( p, label, small, .muted, .section-subtitle, .soc-kpi-label, .soc-block-subtitle, .soc-phase1-toolbar-summary, .soc-situation-muted, .soc-situation-filter-label, .soc-ticket-reference-field label, .soc-ticket-reference-muted, .report-choice-card-copy, .report-form-help, .soc-employee-directory-subtitle, .soc-notification-settings-copy, .topbar-global-search-meta, .topbar-global-search-empty ) { color: var(--soc-text-secondary) !important; opacity: 1 !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( input, select, textarea, .ds-input, .form-input, .form-select, .search-input, .topbar-global-search, .soc-situation-search-field input, .soc-situation-filter-field select, .soc-ticket-reference-search input, .soc-ticket-reference-field select, .soc-ticket-reference-page-size select, .soc-employee-directory-toolbar input, .soc-employee-directory-toolbar select, .report-form-section input, .report-form-section select, .report-form-section textarea, #notificationSettingsPanel input, #notificationSettingsPanel select, #notificationSettingsPanel textarea ) { background: var(--soc-control-bg) !important; border-color: var(--soc-control-border) !important; color: var(--soc-text-primary) !important; box-shadow: none !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( input, textarea, .topbar-global-search, .soc-situation-search-field input, .soc-ticket-reference-search input )::placeholder { color: var(--soc-text-muted) !important; opacity: 1 !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( input, select, textarea, button, .ds-btn, .topbar-btn ):is(:focus, :focus-visible) { border-color: rgba(255, 122, 26, 0.58) !important; outline: 0 !important; box-shadow: var(--soc-ring) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .soc-situation-table-header, .soc-ticket-reference-table-header, .sentrix-home-table thead th, .soc-employee-directory-table thead th, .soc-ops-workspace-table thead th, .soc-people-reference-table thead th ) { background: var(--soc-table-head-bg) !important; border-color: var(--soc-table-border) !important; color: var(--soc-text-secondary) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .soc-situation-table-body, .soc-ticket-reference-list, .sentrix-home-table tbody, .soc-employee-directory-table tbody, .soc-ops-workspace-table tbody, .soc-people-reference-table tbody ) { background: var(--soc-table-row-bg) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .soc-situation-row, .soc-ticket-reference-row, .sentrix-home-table tbody tr, .soc-employee-directory-table tbody tr, .soc-ops-workspace-table tbody tr, .soc-people-reference-table tbody tr ) { background: var(--soc-table-row-bg) !important; border-color: var(--soc-table-border) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .soc-situation-row, .soc-ticket-reference-row, .sentrix-home-table tbody tr, .soc-employee-directory-table tbody tr, .soc-ops-workspace-table tbody tr, .soc-people-reference-table tbody tr ):is(:hover, :focus-within) { background: var(--soc-table-row-hover) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .soc-situation-row.is-selected, .soc-ticket-reference-row.is-selected, .sentrix-home-table tbody tr.is-selected, .soc-employee-directory-table tbody tr.is-selected ) { background: var(--soc-table-row-selected) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .soc-situation-row.is-critical-incident, .soc-ticket-reference-row.is-important, .sentrix-home-table tbody tr.is-important, .soc-employee-directory-table tbody tr.is-important ) { background: var(--soc-table-row-important) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .soc-situation-row *, .soc-ticket-reference-row *, .sentrix-home-table tbody tr *, .soc-employee-directory-table tbody tr *, .soc-ops-workspace-table tbody tr * ) { color: inherit; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .status-badge, .status-pill, .sentrix-home-alert-status-chip, .sentrix-home-pill, .soc-situation-status-pill, .soc-situation-important-pill, .soc-ticket-reference-status-pill, .soc-ticket-reference-status-action, .report-flow-summary-pill, .eci-pill, .eci--default, .incident-severity ) { background: var(--soc-status-neutral-bg) !important; border: 1px solid var(--soc-status-neutral-border) !important; color: var(--soc-status-neutral-text) !important; opacity: 1 !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .status-badge.is-success, .status-pill.is-success, .sentrix-home-alert-status-chip.is-closed, .soc-situation-status-pill.is-closed, .soc-ticket-reference-status-pill.is-approved, .soc-ticket-reference-status-action.is-approved ) { background: var(--soc-status-success-bg) !important; border-color: var(--soc-status-success-border) !important; color: var(--soc-status-success-text) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .status-badge.is-warning, .status-pill.is-warning, .soc-ticket-reference-status-pill.is-pending, .soc-ticket-reference-status-action.is-pending ) { background: var(--soc-status-warning-bg) !important; border-color: var(--soc-status-warning-border) !important; color: var(--soc-status-warning-text) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .status-badge.is-danger, .status-pill.is-danger, #opsCommentPanelImportantPill.soc-situation-important-pill.is-closed, .soc-ticket-reference-status-pill.is-rejected, .soc-ticket-reference-status-action.is-rejected ) { background: var(--soc-status-danger-bg) !important; border-color: var(--soc-status-danger-border) !important; color: var(--soc-status-danger-text) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .ds-btn, .report-tab, .soc-situation-detail-action, .soc-ticket-reference-detail-action, .soc-ticket-reference-reset, .soc-ticket-reference-page-btn, .soc-pc-side-panel-head-actions .ds-btn, .soc-pc-side-panel-danger-btn, #opsSupportPanel .ops-ref-detail-peek-btn ) { background: var(--soc-control-bg) !important; border-color: var(--soc-control-border) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .ds-btn, .report-tab, .soc-situation-detail-action, .soc-ticket-reference-detail-action, .soc-ticket-reference-reset, .soc-ticket-reference-page-btn, #opsSupportPanel .ops-ref-detail-peek-btn ):is(:hover, :focus-visible) { background: var(--soc-control-hover-bg) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .ds-btn.primary, .ds-btn--primary, .report-tab.active, .report-choice-card.active, .soc-ticket-reference-page-btn.is-active ) { background: var(--soc-primary) !important; border-color: var(--soc-primary) !important; color: var(--soc-on-primary) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( button:disabled, .ds-btn:disabled, .ds-btn.is-disabled, .soc-ticket-reference-detail-action:disabled ) { background: rgba(99, 116, 143, 0.12) !important; border-color: rgba(99, 116, 143, 0.24) !important; color: var(--soc-text-disabled) !important; opacity: 1 !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .topbar-global-search-panel, .topbar-global-search-results, .topbar-global-search-recent, .dropdown-menu, .select-menu, .popover, .modal, .drawer, .detail-panel ) { background: var(--soc-surface-3) !important; border-color: var(--soc-border) !important; color: var(--soc-text-primary) !important; box-shadow: none !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .topbar-global-search-result-item, .topbar-global-search-recent-item ):is(:hover, :focus-visible) { background: var(--soc-table-row-hover) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .soc-detail-comment-box, .soc-ticket-reference-comment-box, .soc-situation-comment-box, .soc-attachment-dropzone, .soc-situation-attachment-empty, .soc-ticket-reference-attachment-empty, .report-upload-zone ) { background: var(--soc-surface-2) !important; border-color: var(--soc-border) !important; color: var(--soc-text-secondary) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( .soc-detail-footer, .soc-ticket-reference-detail-footer, .soc-situation-detail-footer, .report-form-footer ) { background: var(--soc-surface) !important; border-color: var(--soc-border) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference input, #alertsView.soc-situation-reference select, #alertsView.soc-situation-reference textarea, #ticketsView input, #ticketsView select, #ticketsView textarea, #peopleView input, #peopleView select, #peopleView textarea, #peopleView .ds-input, #analyticsView input, #analyticsView select, #analyticsView textarea, #analyticsView .ds-input, #analyticsView .soc-analytics-v2-site-picker-trigger ) { background: var(--soc-control-bg) !important; background-color: var(--soc-control-bg) !important; border-color: var(--soc-control-border) !important; color: var(--soc-text-primary) !important; opacity: 1 !important; box-shadow: none !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference input::placeholder, #ticketsView input::placeholder, #peopleView input::placeholder, #analyticsView input::placeholder ) { color: var(--soc-text-muted) !important; opacity: 1 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #homeView .sentrix-home-table thead, #homeView .sentrix-home-table thead tr, #homeView .sentrix-home-table thead th, #ticketsView .soc-ticket-reference-table-header, #ticketsView .soc-ticket-reference-table-header *, #alertsView.soc-situation-reference .soc-situation-table-header, #alertsView.soc-situation-reference .soc-situation-table-header * ) { background: var(--soc-table-head-bg) !important; background-color: var(--soc-table-head-bg) !important; border-color: var(--soc-table-border) !important; color: var(--soc-text-primary) !important; opacity: 1 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #homeView h2, #homeView h3, #homeView .sentrix-home-section-title, #homeView .sentrix-home-empty-cell, #peopleView h2, #peopleView h3, #peopleView .soc-people-reference-title, #notificationSettingsPanel h2, #notificationSettingsPanel h3, #notificationSettingsPanel strong, #notificationSettingsPanel .soc-notification-reference-copy strong, #notificationSettingsPanel .soc-reminder-label, #analyticsView h2, #analyticsView h3, #analyticsView strong, #analyticsView .soc-analytics-v2-section-title, #analyticsView .soc-analytics-v2-kpi-tile strong, #analyticsView .soc-analytics-v2-health-item strong ) { color: var(--soc-text-primary) !important; opacity: 1 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #homeView p, #homeView small, #homeView .meta, #peopleView p, #peopleView small, #peopleView .meta, #notificationSettingsPanel p, #notificationSettingsPanel small, #notificationSettingsPanel .meta, #notificationSettingsPanel .soc-notification-reference-copy, #analyticsView p, #analyticsView small, #analyticsView .meta, #analyticsView .label, #analyticsView .soc-analytics-v2-header-copy, #analyticsView .soc-analytics-v2-risk-summary-copy, #analyticsView .soc-analytics-v2-health-item .label, #analyticsView .soc-analytics-v2-kpi-tile .label ) { color: var(--soc-text-secondary) !important; opacity: 1 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is( .ds-btn.ds-btn-secondary, .soc-analytics-v2-site-picker-trigger, .soc-analytics-v2-health-item, .soc-analytics-v2-kpi-tile, .soc-analytics-v2-risk-summary ) { background: var(--soc-surface-2) !important; background-color: var(--soc-surface-2) !important; border-color: var(--soc-border) !important; color: var(--soc-text-primary) !important; box-shadow: none !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is( .ds-btn.ds-btn-secondary:hover, .ds-btn.ds-btn-secondary:focus-visible, .soc-analytics-v2-site-picker-trigger:hover, .soc-analytics-v2-site-picker-trigger:focus-visible ) { background: var(--soc-control-hover-bg) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .ds-btn.ds-btn-secondary.active { background: rgba(255, 122, 26, 0.18) !important; border-color: rgba(255, 122, 26, 0.58) !important; color: var(--soc-primary) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-summary-card, #alertsView.soc-situation-reference .soc-situation-kpi-card, #ticketsView .soc-summary-card, #ticketsView .soc-ticket-reference-summary-card ) { background: var(--soc-surface-2) !important; background-color: var(--soc-surface-2) !important; border-color: var(--soc-border) !important; color: var(--soc-text-primary) !important; opacity: 1 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-summary-card *, #alertsView.soc-situation-reference .soc-situation-kpi-card *, #ticketsView .soc-summary-card *, #ticketsView .soc-ticket-reference-summary-card * ) { color: inherit; opacity: 1 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #analyticsView .soc-analytics-detail-segmented button.is-active, #alertsView.soc-situation-reference .soc-situation-kpi-card.is-active, #ticketsView .soc-ticket-reference-summary-card.is-active, #situationPagination button.is-active, #ticketReferencePagination .soc-ticket-reference-page-btn.is-active ) { --sentrix-card-bg: var(--soc-table-row-selected); --sentrix-card-border: var(--soc-primary); --sentrix-control-bg: var(--soc-table-row-selected); --sentrix-control-border: var(--soc-primary); } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #analyticsView .soc-analytics-detail-segmented button:hover, #analyticsView .soc-analytics-detail-segmented button:focus-visible, #alertsView.soc-situation-reference .soc-situation-kpi-card:hover, #alertsView.soc-situation-reference .soc-situation-kpi-card:focus-visible, #ticketsView .soc-ticket-reference-summary-card:hover, #ticketsView .soc-ticket-reference-summary-card:focus-visible, #situationPagination button:hover, #situationPagination button:focus-visible, #ticketReferencePagination .soc-ticket-reference-page-btn:hover, #ticketReferencePagination .soc-ticket-reference-page-btn:focus-visible ) { --sentrix-card-bg: var(--soc-control-hover-bg); --sentrix-card-border: var(--soc-control-border); --sentrix-control-bg: var(--soc-control-hover-bg); --sentrix-control-border: var(--soc-control-border); } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #situationPagination button:disabled, #ticketReferencePagination .soc-ticket-reference-page-btn:disabled ) { --sentrix-control-bg: var(--soc-surface); --sentrix-control-border: var(--soc-border); color: var(--soc-text-disabled) !important; } @media (min-width: 1024px) { html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):is(:has(#homeView:not(.hidden)), :has(#analyticsView:not(.hidden)), :has(#alertsView.soc-situation-reference:not(.hidden)), :has(#ticketsView:not(.hidden)), :has(#peopleView:not(.hidden)), :has(#notificationSettingsPanel:not(.hidden)), :has(#reportWizard:not(.hidden))) main.container.ds-page.admin-layout, body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):is(:has(#homeView:not(.hidden)), :has(#analyticsView:not(.hidden)), :has(#alertsView.soc-situation-reference:not(.hidden)), :has(#ticketsView:not(.hidden)), :has(#peopleView:not(.hidden)), :has(#notificationSettingsPanel:not(.hidden)), :has(#reportWizard:not(.hidden))) main.container.ds-page.admin-layout { background: var(--soc-bg) !important; background-color: var(--soc-bg) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#homeView, #analyticsView, #alertsView.soc-situation-reference, #ticketsView, #peopleView, #notificationSettingsPanel, #reportWizard), body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#homeView, #analyticsView, #alertsView.soc-situation-reference, #ticketsView, #peopleView, #notificationSettingsPanel, #reportWizard) { background: transparent !important; background-color: transparent !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-filter-card, #alertsView.soc-situation-reference .soc-situation-filter-spacer, #alertsView.soc-situation-reference .soc-situation-list-card, #alertsView.soc-situation-reference .soc-situation-kpi-card, #alertsView.soc-situation-reference .soc-summary-card, #alertsView.soc-situation-reference .soc-situation-empty-reset-btn, #alertsView.soc-situation-reference .soc-situation-table-footer, #ticketsView#ticketsView, #ticketsView .soc-ticket-reference-shell, #ticketsView .soc-ticket-reference-summary-card, #ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar, #ticketsView .soc-ticket-reference-search, #ticketsView .soc-ticket-reference-list-card, #ticketsView .soc-ticket-reference-list-card.is-empty-result .soc-ticket-reference-list-footer, #ticketsView .soc-ticket-empty-reset-btn, #peopleView .soc-people-pane-summary, #peopleView .soc-employee-directory-toolbar, #peopleView .soc-employee-directory-grid, #notificationSettingsPanel .soc-settings-reference-card, #reportWizard .soc-report-card, #reportWizard .report-choice-card, #reportWizard .report-form-card, #reportWizard .report-step-panel, #reportWizard .report-summary-panel ), body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-filter-card, #alertsView.soc-situation-reference .soc-situation-filter-spacer, #alertsView.soc-situation-reference .soc-situation-list-card, #alertsView.soc-situation-reference .soc-situation-kpi-card, #alertsView.soc-situation-reference .soc-summary-card, #alertsView.soc-situation-reference .soc-situation-empty-reset-btn, #alertsView.soc-situation-reference .soc-situation-table-footer, #ticketsView#ticketsView, #ticketsView .soc-ticket-reference-shell, #ticketsView .soc-ticket-reference-summary-card, #ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar, #ticketsView .soc-ticket-reference-search, #ticketsView .soc-ticket-reference-list-card, #ticketsView .soc-ticket-reference-list-card.is-empty-result .soc-ticket-reference-list-footer, #ticketsView .soc-ticket-empty-reset-btn, #peopleView .soc-people-pane-summary, #peopleView .soc-employee-directory-toolbar, #peopleView .soc-employee-directory-grid, #notificationSettingsPanel .soc-settings-reference-card, #reportWizard .soc-report-card, #reportWizard .report-choice-card, #reportWizard .report-form-card, #reportWizard .report-step-panel, #reportWizard .report-summary-panel ) { background: var(--soc-surface-2) !important; background-color: var(--soc-surface-2) !important; border-color: var(--soc-border) !important; color: var(--soc-text-primary) !important; box-shadow: none !important; opacity: 1 !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-filter-field > span, #ticketsView .soc-ticket-reference-field > span, #peopleView .soc-employee-directory-field > span, #notificationSettingsPanel label, #reportWizard label ), body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-filter-field > span, #ticketsView .soc-ticket-reference-field > span, #peopleView .soc-employee-directory-field > span, #notificationSettingsPanel label, #reportWizard label ) { color: var(--soc-text-secondary) !important; opacity: 1 !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-search-field, #alertsView.soc-situation-reference .soc-situation-filter-field select, #alertsView.soc-situation-reference .soc-situation-page-size select, #ticketsView .soc-ticket-reference-search, #ticketsView .soc-ticket-reference-field select, #ticketsView .soc-ticket-reference-page-size select, #peopleView .soc-employee-directory-search, #peopleView .soc-employee-directory-search input, #peopleView #employeeSiteFilter, #peopleView #peopleRoleFilter, #peopleView #peopleDirectorySortSelect, #notificationSettingsPanel input, #notificationSettingsPanel select, #notificationSettingsPanel textarea, #reportWizard input, #reportWizard select, #reportWizard textarea ), body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-search-field, #alertsView.soc-situation-reference .soc-situation-filter-field select, #alertsView.soc-situation-reference .soc-situation-page-size select, #ticketsView .soc-ticket-reference-search, #ticketsView .soc-ticket-reference-field select, #ticketsView .soc-ticket-reference-page-size select, #peopleView .soc-employee-directory-search, #peopleView .soc-employee-directory-search input, #peopleView #employeeSiteFilter, #peopleView #peopleRoleFilter, #peopleView #peopleDirectorySortSelect, #notificationSettingsPanel input, #notificationSettingsPanel select, #notificationSettingsPanel textarea, #reportWizard input, #reportWizard select, #reportWizard textarea ) { background: var(--soc-control-bg) !important; background-color: var(--soc-control-bg) !important; border-color: var(--soc-control-border) !important; color: var(--soc-text-primary) !important; opacity: 1 !important; box-shadow: none !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-table-header, #alertsView.soc-situation-reference .soc-situation-table-header *, #ticketsView .soc-ticket-reference-table-header, #ticketsView .soc-ticket-reference-table-header *, #peopleView .soc-employee-directory-table thead, #peopleView .soc-employee-directory-table thead *, #homeView .sentrix-home-table thead, #homeView .sentrix-home-table thead * ), body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-table-header, #alertsView.soc-situation-reference .soc-situation-table-header *, #ticketsView .soc-ticket-reference-table-header, #ticketsView .soc-ticket-reference-table-header *, #peopleView .soc-employee-directory-table thead, #peopleView .soc-employee-directory-table thead *, #homeView .sentrix-home-table thead, #homeView .sentrix-home-table thead * ) { background: var(--soc-table-head-bg) !important; background-color: var(--soc-table-head-bg) !important; border-color: var(--soc-table-border) !important; color: var(--soc-text-primary) !important; opacity: 1 !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-table-body .incident-card, #ticketsView .soc-ticket-reference-row, #peopleView .soc-employee-directory-table tbody tr ), body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-table-body .incident-card, #ticketsView .soc-ticket-reference-row, #peopleView .soc-employee-directory-table tbody tr ) { background: var(--soc-table-row-bg) !important; background-color: var(--soc-table-row-bg) !important; border-color: var(--soc-table-border) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-table-body .incident-card:hover, #alertsView.soc-situation-reference .soc-situation-table-body .incident-card:focus-visible, #ticketsView .soc-ticket-reference-row:hover, #ticketsView .soc-ticket-reference-row:focus-visible, #peopleView .soc-employee-directory-table tbody tr:hover ), body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-table-body .incident-card:hover, #alertsView.soc-situation-reference .soc-situation-table-body .incident-card:focus-visible, #ticketsView .soc-ticket-reference-row:hover, #ticketsView .soc-ticket-reference-row:focus-visible, #peopleView .soc-employee-directory-table tbody tr:hover ) { background: var(--soc-table-row-hover) !important; background-color: var(--soc-table-row-hover) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-table-body .incident-card.is-selected, #ticketsView .soc-ticket-reference-row.is-selected, #peopleView .soc-employee-directory-table tbody tr.is-selected ), body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-table-body .incident-card.is-selected, #ticketsView .soc-ticket-reference-row.is-selected, #peopleView .soc-employee-directory-table tbody tr.is-selected ) { background: var(--soc-table-row-selected) !important; background-color: var(--soc-table-row-selected) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-empty-title, #ticketsView .soc-ticket-empty-title, #peopleView .soc-people-reference-title, #notificationSettingsPanel h2, #notificationSettingsPanel h3, #reportWizard h2, #reportWizard h3, #analyticsView h2, #analyticsView h3 ), body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference .soc-situation-empty-title, #ticketsView .soc-ticket-empty-title, #peopleView .soc-people-reference-title, #notificationSettingsPanel h2, #notificationSettingsPanel h3, #reportWizard h2, #reportWizard h3, #analyticsView h2, #analyticsView h3 ) { color: var(--soc-text-primary) !important; opacity: 1 !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #situationPagination.soc-situation-pagination button, #ticketReferencePagination.soc-ticket-reference-pagination .soc-ticket-reference-page-btn, #analyticsView .soc-analytics-detail-segmented button ), body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #situationPagination.soc-situation-pagination button, #ticketReferencePagination.soc-ticket-reference-pagination .soc-ticket-reference-page-btn, #analyticsView .soc-analytics-detail-segmented button ) { background: var(--soc-control-bg) !important; background-color: var(--soc-control-bg) !important; border-color: var(--soc-control-border) !important; color: var(--soc-text-secondary) !important; box-shadow: none !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #situationPagination.soc-situation-pagination button.is-active, #ticketReferencePagination.soc-ticket-reference-pagination .soc-ticket-reference-page-btn.is-active, #analyticsView .soc-analytics-detail-segmented button.is-active ), body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #situationPagination.soc-situation-pagination button.is-active, #ticketReferencePagination.soc-ticket-reference-pagination .soc-ticket-reference-page-btn.is-active, #analyticsView .soc-analytics-detail-segmented button.is-active ) { background: var(--soc-table-row-selected) !important; background-color: var(--soc-table-row-selected) !important; border-color: var(--soc-primary) !important; color: var(--soc-primary) !important; } html[data-theme="dark"] body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result #ticketReferencePageSizeSelect, body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-list-card.is-empty-result #ticketReferencePageSizeSelect { background: var(--soc-control-bg) !important; background-color: var(--soc-control-bg) !important; border-color: var(--soc-control-border) !important; color: var(--soc-text-primary) !important; -webkit-text-fill-color: var(--soc-text-primary) !important; opacity: 1 !important; } } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active), body.dark:not(.soc-auth-shell-active) { background: var(--soc-bg) !important; background-color: var(--soc-bg) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) .soc-app-shell, body.dark:not(.soc-auth-shell-active) .soc-app-shell, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) .soc-app-shell > main.container.ds-page, body.dark:not(.soc-auth-shell-active) .soc-app-shell > main.container.ds-page, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) .soc-app-shell > main.container.ds-page.admin-layout, body.dark:not(.soc-auth-shell-active) .soc-app-shell > main.container.ds-page.admin-layout { background: var(--soc-bg) !important; background-color: var(--soc-bg) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #menuSheetPanel, body.dark:not(.soc-auth-shell-active) #menuSheetPanel, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) :is(.mobile-menu-pager, .mobile-type-flow-track, .mobile-menu-root-page, .mobile-admin-shortcuts), body.dark:not(.soc-auth-shell-active) :is(.mobile-menu-pager, .mobile-type-flow-track, .mobile-menu-root-page, .mobile-admin-shortcuts) { background: var(--soc-surface) !important; background-color: var(--soc-surface) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-section-label, .soc-menu-group-label), body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-section-label, .soc-menu-group-label) { color: var(--soc-text-muted) !important; opacity: 1 !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item-label, .soc-menu-sub-item-icon, .soc-menu-group-toggle, .soc-menu-group-toggle-icon), body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item-label, .soc-menu-sub-item-icon, .soc-menu-group-toggle, .soc-menu-group-toggle-icon) { color: var(--soc-text-primary) !important; opacity: 1 !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item.is-active, .soc-menu-group-toggle.is-active), body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-sub-item.is-active, .soc-menu-group-toggle.is-active) { background: var(--soc-table-row-selected) !important; background-color: var(--soc-table-row-selected) !important; color: var(--soc-text-primary) !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference :is(.soc-summary-value, .soc-summary-label, .soc-situation-empty-title, .soc-situation-empty-copy), body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference :is(.soc-summary-value, .soc-summary-label, .soc-situation-empty-title, .soc-situation-empty-copy), html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #ticketsView :is(.soc-ticket-reference-summary-value, .soc-ticket-reference-summary-label, .soc-ticket-empty-title, .soc-ticket-empty-copy), body.dark:not(.soc-auth-shell-active) #ticketsView :is(.soc-ticket-reference-summary-value, .soc-ticket-reference-summary-label, .soc-ticket-empty-title, .soc-ticket-empty-copy) { color: var(--soc-text-primary) !important; -webkit-text-fill-color: var(--soc-text-primary) !important; opacity: 1 !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-summary-label, body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-summary-label, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-label, body.dark:not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-summary-label, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-empty-copy, body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-empty-copy, html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) #ticketsView .soc-ticket-empty-copy, body.dark:not(.soc-auth-shell-active) #ticketsView .soc-ticket-empty-copy { color: var(--soc-text-secondary) !important; -webkit-text-fill-color: var(--soc-text-secondary) !important; } html[data-theme="dark"] body.dark:not(.soc-auth-shell-active) :is(#alertsView.soc-situation-reference .soc-situation-page-size select, #ticketsView .soc-ticket-reference-page-size select), body.dark:not(.soc-auth-shell-active) :is(#alertsView.soc-situation-reference .soc-situation-page-size select, #ticketsView .soc-ticket-reference-page-size select) { background: var(--soc-control-bg) !important; background-color: var(--soc-control-bg) !important; border-color: var(--soc-control-border) !important; color: var(--soc-text-primary) !important; -webkit-text-fill-color: var(--soc-text-primary) !important; } html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesWorkspace, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .sentrix-announcement-workspace { background: var(--soc-bg, #f4f7fb) !important; background-color: var(--soc-bg, #f4f7fb) !important; border-color: var(--soc-border, #dbe3ef) !important; color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; } html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesListPanel, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesDetailPanel, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesComposePanel, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-panel, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-panel, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-settings-panel, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-document, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-document-flow, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-inline-block, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-footer, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-image-preview-shell, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-poll-modal { background: var(--soc-card-bg, #ffffff) !important; background-color: var(--soc-card-bg, #ffffff) !important; border-color: var(--soc-border, #dbe3ef) !important; color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; box-shadow: none !important; } html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-toolbar, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-toolbar-group, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-image-dropzone, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-table-picker, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-poll-option, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-format-menu, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-link-modal, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-empty-state { background: var(--soc-subtle-bg, #f7f9fc) !important; background-color: var(--soc-subtle-bg, #f7f9fc) !important; border-color: var(--soc-border, #dbe3ef) !important; color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; box-shadow: none !important; } html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel h1, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel h2, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel h3, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel h4, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel label, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-label, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-section-title, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-title-input, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-body-input, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-editor, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-toolbar button, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel input, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel select, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel textarea { color: var(--soc-text, #0f1b2d) !important; -webkit-text-fill-color: var(--soc-text, #0f1b2d) !important; opacity: 1 !important; } html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel input, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel select, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel textarea, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesComposeTitle, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesComposeBody, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel #noticesComposeDocumentFlow, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-editor, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-title-input, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel .notices-compose-body-input { background: #ffffff !important; background-color: #ffffff !important; border-color: var(--soc-border, #dbe3ef) !important; caret-color: var(--soc-text, #0f1b2d) !important; } html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel input::placeholder, html[data-theme="light"] body.light:not(.dark):not(.soc-auth-shell-active) #announcementPanel textarea::placeholder { color: var(--soc-muted, #7a8799) !important; -webkit-text-fill-color: var(--soc-muted, #7a8799) !important; opacity: 1 !important; } html body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid > .soc-situation-kpi-card, #ticketsView #ticketSummaryGrid > .soc-ticket-reference-summary-card ) { grid-template-columns: 64px minmax(0, 1fr) !important; column-gap: 18px !important; align-items: center !important; } html body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon ) { width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; flex: 0 0 64px !important; display: inline-grid !important; place-items: center !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; border: 0 !important; border-radius: 999px !important; background: var(--sentrix-kpi-icon-bg, rgba(15, 23, 42, 0.08)) !important; color: var(--sentrix-kpi-icon-color, var(--soc-text-primary, #0f172a)) !important; box-shadow: none !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon ) svg.sentrix-kpi-line-icon { --sentrix-kpi-glyph-scale: 1; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; display: block !important; color: inherit !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; vector-effect: non-scaling-stroke !important; shape-rendering: geometricPrecision !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference #realtimeSummaryGrid svg.sentrix-kpi-line-icon[data-kpi-icon="incident-today"] { --sentrix-kpi-glyph-scale: 1.08923; } html body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid svg.sentrix-kpi-line-icon[data-kpi-icon="incident-received"], #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon svg.sentrix-kpi-line-icon[data-kpi-icon="ticket-total"] ) { --sentrix-kpi-glyph-scale: 1.10625; } html body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid svg.sentrix-kpi-line-icon[data-kpi-icon="incident-progress"], #alertsView.soc-situation-reference #realtimeSummaryGrid svg.sentrix-kpi-line-icon[data-kpi-icon="incident-closed"] ) { --sentrix-kpi-glyph-scale: 1.04118; } html body:not(.soc-auth-shell-active) :is( #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon svg.sentrix-kpi-line-icon[data-kpi-icon="ticket-pending"], #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon svg.sentrix-kpi-line-icon[data-kpi-icon="ticket-approved"], #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon svg.sentrix-kpi-line-icon[data-kpi-icon="ticket-rejected"], #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon svg.sentrix-kpi-line-icon[data-kpi-icon="ticket-cancelled"] ) { --sentrix-kpi-glyph-scale: 1.36154; } html body:not(.soc-auth-shell-active) #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon svg.sentrix-kpi-line-icon[data-kpi-icon="ticket-unavailable"] { --sentrix-kpi-glyph-scale: 1.22069; } html body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon ) svg.sentrix-kpi-line-icon :is(path, rect, circle, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; stroke-width: inherit !important; stroke-linecap: round !important; stroke-linejoin: round !important; vector-effect: non-scaling-stroke !important; shape-rendering: geometricPrecision !important; transform: scale(var(--sentrix-kpi-glyph-scale, 1)) !important; transform-box: view-box !important; transform-origin: center !important; } html body:not(.soc-auth-shell-active) .sentrix-home-kpi-card .sentrix-home-kpi-icon { width: 72px !important; min-width: 72px !important; max-width: 72px !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; flex: 0 0 72px !important; display: inline-grid !important; place-items: center !important; border-radius: 999px !important; background: var(--sentrix-home-kpi-icon-bg, rgba(15, 23, 42, 0.08)) !important; color: var(--sentrix-home-kpi-icon-color, var(--soc-text-primary, #0f172a)) !important; box-shadow: none !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) .sentrix-home-kpi-card .sentrix-home-kpi-icon svg.sentrix-home-kpi-line-icon { width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: block !important; color: inherit !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; shape-rendering: geometricPrecision !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) .sentrix-home-kpi-card .sentrix-home-kpi-icon svg.sentrix-home-kpi-line-icon :is(path, rect, circle, line, polyline, polygon) { fill: none !important; stroke: currentColor !important; stroke-width: inherit !important; stroke-linecap: round !important; stroke-linejoin: round !important; vector-effect: non-scaling-stroke !important; shape-rendering: geometricPrecision !important; } html body:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="incident"] { --sentrix-home-kpi-icon-bg: #fff1e8; --sentrix-home-kpi-icon-color: #ff5c00; } html body:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="ticket"] { --sentrix-home-kpi-icon-bg: #eaf5ff; --sentrix-home-kpi-icon-color: #1684ff; } html body:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="support"] { --sentrix-home-kpi-icon-bg: #e8f7ef; --sentrix-home-kpi-icon-color: #18a36b; } html body:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="notice"] { --sentrix-home-kpi-icon-bg: #f3eeff; --sentrix-home-kpi-icon-color: #7a52f4; } html[data-theme="dark"] body:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="incident"], html body.dark:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="incident"] { --sentrix-home-kpi-icon-bg: rgba(255, 92, 0, 0.18); --sentrix-home-kpi-icon-color: #ff9a62; } html[data-theme="dark"] body:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="ticket"], html body.dark:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="ticket"] { --sentrix-home-kpi-icon-bg: rgba(22, 132, 255, 0.18); --sentrix-home-kpi-icon-color: #93c5fd; } html[data-theme="dark"] body:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="support"], html body.dark:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="support"] { --sentrix-home-kpi-icon-bg: rgba(24, 163, 107, 0.18); --sentrix-home-kpi-icon-color: #86efac; } html[data-theme="dark"] body:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="notice"], html body.dark:not(.soc-auth-shell-active) .sentrix-home-kpi-card[data-tone="notice"] { --sentrix-home-kpi-icon-bg: rgba(122, 82, 244, 0.2); --sentrix-home-kpi-icon-color: #c4b5fd; } html body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--today { --sentrix-kpi-icon-bg: #fff1e8; --sentrix-kpi-icon-color: #ff5c00; } html body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--important, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--rejected ) { --sentrix-kpi-icon-bg: #ffecef; --sentrix-kpi-icon-color: #ef4444; } html body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--received, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--total ) { --sentrix-kpi-icon-bg: #eaf5ff; --sentrix-kpi-icon-color: #1684ff; } html body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--progress, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--pending ) { --sentrix-kpi-icon-bg: #fff4db; --sentrix-kpi-icon-color: #f59e0b; } html body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--closed, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--approved ) { --sentrix-kpi-icon-bg: #e8f7ef; --sentrix-kpi-icon-color: #18a36b; } html body:not(.soc-auth-shell-active) #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--unavailable { --sentrix-kpi-icon-bg: #f3eeff; --sentrix-kpi-icon-color: #7a52f4; } html body:not(.soc-auth-shell-active) #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--cancelled { --sentrix-kpi-icon-bg: #eef2f7; --sentrix-kpi-icon-color: #64748b; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--today, html body.dark:not(.soc-auth-shell-active) #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--today { --sentrix-kpi-icon-bg: rgba(255, 92, 0, 0.16); --sentrix-kpi-icon-color: #ff8a3d; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--important, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--rejected ), html body.dark:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--important, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--rejected ) { --sentrix-kpi-icon-bg: rgba(239, 68, 68, 0.16); --sentrix-kpi-icon-color: #f87171; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--received, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--total ), html body.dark:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--received, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--total ) { --sentrix-kpi-icon-bg: rgba(22, 132, 255, 0.16); --sentrix-kpi-icon-color: #60a5fa; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--progress, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--pending ), html body.dark:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--progress, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--pending ) { --sentrix-kpi-icon-bg: rgba(245, 158, 11, 0.18); --sentrix-kpi-icon-color: #fbbf24; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--closed, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--approved ), html body.dark:not(.soc-auth-shell-active) :is( #alertsView.soc-situation-reference #realtimeSummaryGrid .soc-situation-kpi-icon--closed, #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--approved ) { --sentrix-kpi-icon-bg: rgba(24, 163, 107, 0.16); --sentrix-kpi-icon-color: #4ade80; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--unavailable, html body.dark:not(.soc-auth-shell-active) #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--unavailable { --sentrix-kpi-icon-bg: rgba(122, 82, 244, 0.18); --sentrix-kpi-icon-color: #a78bfa; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--cancelled, html body.dark:not(.soc-auth-shell-active) #ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon--cancelled { --sentrix-kpi-icon-bg: rgba(148, 163, 184, 0.16); --sentrix-kpi-icon-color: #cbd5e1; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"], html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] { --sentrix-support-reference-bg: var(--soc-bg); --sentrix-support-reference-panel: var(--soc-surface); --sentrix-support-reference-line: var(--soc-border); --sentrix-support-reference-muted: var(--soc-text-sub); --sentrix-support-reference-text: var(--soc-text); --ops-ref-bg: var(--soc-bg); --ops-ref-surface: var(--soc-surface); --ops-ref-line: var(--soc-border); --ops-ref-text: var(--soc-text); --ops-ref-muted: var(--soc-text-sub); --ops-ref-orange: #ff8a3d; --ops-ref-orange-weak: rgba(255, 138, 61, 0.16); --ops-ref-blue: #60a5fa; --ops-ref-blue-weak: rgba(96, 165, 250, 0.16); --ops-ref-green: #4ade80; --ops-ref-green-weak: rgba(74, 222, 128, 0.16); --ops-ref-red: #f87171; --ops-ref-red-weak: rgba(248, 113, 113, 0.16); --ops-ref-purple: #a78bfa; --ops-ref-purple-weak: rgba(167, 139, 250, 0.18); background: var(--soc-bg) !important; color: var(--soc-text) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] :is(.ops-ref-summary, .ops-ref-calendar-grid, .ops-ref-calendar-cell, .ops-ref-list-table-wrap, .ops-ref-detail-panel), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] :is(.ops-ref-summary, .ops-ref-calendar-grid, .ops-ref-calendar-cell, .ops-ref-list-table-wrap, .ops-ref-detail-panel) { background: var(--soc-surface) !important; background-color: var(--soc-surface) !important; border-color: var(--soc-border) !important; color: var(--soc-text) !important; -webkit-text-fill-color: var(--soc-text) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] :is(.ops-ref-weekdays, .ops-ref-calendar-cell.is-outside-month, .ops-ref-calendar-line, .ops-ref-calendar-more, .ops-ref-toolbar select, .ops-ref-toolbar button, .ops-ref-view-toggle button), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] :is(.ops-ref-weekdays, .ops-ref-calendar-cell.is-outside-month, .ops-ref-calendar-line, .ops-ref-calendar-more, .ops-ref-toolbar select, .ops-ref-toolbar button, .ops-ref-view-toggle button) { background: var(--soc-surface-2) !important; background-color: var(--soc-surface-2) !important; border-color: var(--soc-border) !important; color: var(--soc-text) !important; -webkit-text-fill-color: var(--soc-text) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] :is(.ops-ref-filter-label, .ops-ref-toolbar label > span, .ops-ref-weekdays span, .ops-ref-calendar-day), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] :is(.ops-ref-filter-label, .ops-ref-toolbar label > span, .ops-ref-weekdays span, .ops-ref-calendar-day) { background: var(--soc-bg) !important; background-color: var(--soc-bg) !important; color: var(--soc-text-sub) !important; -webkit-text-fill-color: var(--soc-text-sub) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-active, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-active, html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-view-toggle .is-active, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-view-toggle .is-active { background: var(--ops-ref-orange-weak) !important; background-color: var(--ops-ref-orange-weak) !important; border-color: color-mix(in srgb, var(--ops-ref-orange) 60%, transparent) !important; color: var(--ops-ref-orange) !important; -webkit-text-fill-color: var(--ops-ref-orange) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell.is-today .ops-ref-calendar-day, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell.is-today .ops-ref-calendar-day { background: var(--ops-ref-orange) !important; background-color: var(--ops-ref-orange) !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #employeeScorePanel :is(.soc-employee-score-filter-bar, .soc-employee-score-primary-card, .soc-employee-score-ranking-section, .soc-employee-score-detail-panel, .soc-employee-score-summary-card, .soc-employee-score-site-row, .soc-employee-score-table-wrap), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #employeeScorePanel :is(.soc-employee-score-filter-bar, .soc-employee-score-primary-card, .soc-employee-score-ranking-section, .soc-employee-score-detail-panel, .soc-employee-score-summary-card, .soc-employee-score-site-row, .soc-employee-score-table-wrap) { background: var(--soc-surface) !important; background-color: var(--soc-surface) !important; border-color: var(--soc-border) !important; color: var(--soc-text) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #employeeScorePanel :is(.soc-employee-score-table th, .soc-employee-score-table td, .soc-employee-score-ranking-pane-head h3, #employeeScoreRankingTitle, #employeeScoreSiteInsightTitle, #employeeScoreCompositionTitle), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #employeeScorePanel :is(.soc-employee-score-table th, .soc-employee-score-table td, .soc-employee-score-ranking-pane-head h3, #employeeScoreRankingTitle, #employeeScoreSiteInsightTitle, #employeeScoreCompositionTitle) { border-color: var(--soc-border) !important; color: var(--soc-text) !important; -webkit-text-fill-color: var(--soc-text) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #employeeScorePanel .soc-employee-score-table th, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #employeeScorePanel .soc-employee-score-table th { background: var(--soc-surface-2) !important; background-color: var(--soc-surface-2) !important; color: var(--soc-text-sub) !important; -webkit-text-fill-color: var(--soc-text-sub) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-section-label, .soc-menu-group-label, .soc-menu-sub-item-label, .soc-menu-sub-item-icon, .soc-menu-group-toggle, .soc-menu-group-toggle-icon), html body.dark:not(.soc-auth-shell-active) #menuSheetPanel :is(.soc-menu-section-label, .soc-menu-group-label, .soc-menu-sub-item-label, .soc-menu-sub-item-icon, .soc-menu-group-toggle, .soc-menu-group-toggle-icon) { color: var(--soc-text) !important; -webkit-text-fill-color: var(--soc-text) !important; opacity: 1 !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is(#topbarNotificationsDrawer, #topbarDownloadsDrawer, #topbarProfileDrawer) :is(.topbar-drawer-close, .topbar-notification-tab, .topbar-notification-action), html body.dark:not(.soc-auth-shell-active) :is(#topbarNotificationsDrawer, #topbarDownloadsDrawer, #topbarProfileDrawer) :is(.topbar-drawer-close, .topbar-notification-tab, .topbar-notification-action) { background: transparent !important; color: var(--soc-text) !important; -webkit-text-fill-color: var(--soc-text) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) :is(#topbarNotificationsDrawer, #topbarDownloadsDrawer, #topbarProfileDrawer) :is(.topbar-notification-action:disabled, .topbar-notification-tab:not(.is-active)), html body.dark:not(.soc-auth-shell-active) :is(#topbarNotificationsDrawer, #topbarDownloadsDrawer, #topbarProfileDrawer) :is(.topbar-notification-action:disabled, .topbar-notification-tab:not(.is-active)) { color: var(--soc-text-sub) !important; -webkit-text-fill-color: var(--soc-text-sub) !important; opacity: 0.78 !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #topbarNotificationsDrawer .topbar-notification-tab.is-active::after, html body.dark:not(.soc-auth-shell-active) #topbarNotificationsDrawer .topbar-notification-tab.is-active::after { background: var(--soc-text) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView :is(.soc-people-reference-pill.status-active, .soc-people-reference-pill.account-linked), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView :is(.soc-people-reference-pill.status-active, .soc-people-reference-pill.account-linked) { background: rgba(34, 197, 94, 0.16) !important; background-color: rgba(34, 197, 94, 0.16) !important; border-color: rgba(74, 222, 128, 0.42) !important; color: #86efac !important; -webkit-text-fill-color: #86efac !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .ds-btn.active, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView .ds-btn.active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(.soc-risk-grade.safe, .soc-risk-grade.stable, .soc-risk-grade.is-safe, #analyticsRiskGrade), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView :is(.soc-risk-grade.safe, .soc-risk-grade.stable, .soc-risk-grade.is-safe, #analyticsRiskGrade) { background: rgba(20, 184, 166, 0.18) !important; background-color: rgba(20, 184, 166, 0.18) !important; border-color: rgba(45, 212, 191, 0.42) !important; color: #99f6e4 !important; -webkit-text-fill-color: #99f6e4 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-active, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-active { background: rgba(255, 138, 61, 0.18) !important; background-color: rgba(255, 138, 61, 0.18) !important; border-color: rgba(255, 138, 61, 0.48) !important; color: #ffd3b8 !important; -webkit-text-fill-color: #ffd3b8 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-active :is(span, strong), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-summary-item.is-active :is(span, strong) { background: transparent !important; background-color: transparent !important; color: #ffd3b8 !important; -webkit-text-fill-color: #ffd3b8 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell.is-today .ops-ref-calendar-day, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-calendar-cell.is-today .ops-ref-calendar-day { background: #ff8a3d !important; background-color: #ff8a3d !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #employeeScorePanel#employeeScorePanel :is(.soc-workspace-card-head h3, .soc-employee-score-ranking-pane-head h3, #employeeScoreRankingTitle, #employeeScoreSiteInsightTitle, #employeeScoreCompositionTitle), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #employeeScorePanel#employeeScorePanel :is(.soc-workspace-card-head h3, .soc-employee-score-ranking-pane-head h3, #employeeScoreRankingTitle, #employeeScoreSiteInsightTitle, #employeeScoreCompositionTitle) { color: var(--soc-text) !important; -webkit-text-fill-color: var(--soc-text) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView#peopleView .soc-people-reference-avatar, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView#peopleView .soc-people-reference-avatar { background: rgba(96, 165, 250, 0.16) !important; background-color: rgba(96, 165, 250, 0.16) !important; border-color: rgba(147, 197, 253, 0.36) !important; color: #bfdbfe !important; -webkit-text-fill-color: #bfdbfe !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView#peopleView :is(.soc-people-reference-pill.status-active, .soc-people-reference-pill.account-linked), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView#peopleView :is(.soc-people-reference-pill.status-active, .soc-people-reference-pill.account-linked) { background: #123822 !important; background-color: #123822 !important; border-color: rgba(74, 222, 128, 0.48) !important; color: #bbf7d0 !important; -webkit-text-fill-color: #bbf7d0 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView .ds-btn.ds-btn-secondary.ds-btn-sm.active, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView .ds-btn.ds-btn-secondary.ds-btn-sm.active { background: #ff7a1a !important; background-color: #ff7a1a !important; border-color: #ff9a4d !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsRiskGrade.soc-risk-grade.safe, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsRiskGrade.soc-risk-grade.safe { background: rgba(20, 184, 166, 0.2) !important; background-color: rgba(20, 184, 166, 0.2) !important; border-color: rgba(45, 212, 191, 0.5) !important; color: #ccfbf1 !important; -webkit-text-fill-color: #ccfbf1 !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #topbarNotificationsDrawer#topbarNotificationsDrawer :is(.notification-empty-state-illustration, .notification-empty-state-card), html body.dark:not(.soc-auth-shell-active) #topbarNotificationsDrawer#topbarNotificationsDrawer :is(.notification-empty-state-illustration, .notification-empty-state-card) { background: var(--soc-surface-2) !important; background-color: var(--soc-surface-2) !important; border-color: var(--soc-border) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] :is(.ops-ref-filter-dropdown, .ops-ref-month-picker), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] :is(.ops-ref-filter-dropdown, .ops-ref-month-picker) { background: var(--soc-surface-2) !important; background-color: var(--soc-surface-2) !important; border-color: var(--soc-border) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-filter-dropdown button, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-filter-dropdown button { background: transparent !important; background-color: transparent !important; color: var(--soc-text) !important; -webkit-text-fill-color: var(--soc-text) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-filter-dropdown button:is(:hover, .is-selected), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel[data-ops-support-reference-shell="body-only"] .ops-ref-filter-dropdown button:is(:hover, .is-selected) { background: rgba(249, 115, 22, 0.18) !important; background-color: rgba(249, 115, 22, 0.18) !important; color: #fed7aa !important; -webkit-text-fill-color: #fed7aa !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel#menuSheetPanel :is( .soc-menu-section.hidden, .soc-menu-group.hidden, .soc-menu-group-toggle.hidden, .soc-menu-submenu-wrap.hidden, .soc-menu-sub-item.hidden, .mobile-nav-action-btn.hidden, [data-menu-item-key].hidden ) { display: none !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarThemeToggleBtn.topbar-theme-toggle[data-theme="dark"] .topbar-theme-thumb, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #topbarThemeToggleBtn.topbar-theme-toggle[data-theme="dark"] .topbar-theme-thumb, html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-theme-thumb, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) .topbar-theme-thumb { background: #111827 !important; background-color: #111827 !important; border-color: rgba(255, 138, 61, 0.55) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel#opsCommentPanel, #ticketCommentPanel#ticketCommentPanel) :is(.soc-detail-comment-bubble, .soc-situation-comment-bubble, .soc-ticket-reference-comment-bubble), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel#opsCommentPanel, #ticketCommentPanel#ticketCommentPanel) :is(.soc-detail-comment-bubble, .soc-situation-comment-bubble, .soc-ticket-reference-comment-bubble) { background: var(--soc-surface-2) !important; background-color: var(--soc-surface-2) !important; border: 1px solid var(--soc-border) !important; color: var(--soc-text) !important; -webkit-text-fill-color: var(--soc-text) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel#opsCommentPanel, #ticketCommentPanel#ticketCommentPanel) :is(.soc-detail-comment-avatar, .soc-situation-comment-avatar, .soc-ticket-reference-comment-avatar), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel#opsCommentPanel, #ticketCommentPanel#ticketCommentPanel) :is(.soc-detail-comment-avatar, .soc-situation-comment-avatar, .soc-ticket-reference-comment-avatar) { background: rgba(96, 165, 250, 0.18) !important; background-color: rgba(96, 165, 250, 0.18) !important; border-color: rgba(147, 197, 253, 0.34) !important; color: #bfdbfe !important; -webkit-text-fill-color: #bfdbfe !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel#opsCommentPanel, #ticketCommentPanel#ticketCommentPanel) :is(.soc-situation-attachment-empty, .soc-ticket-reference-attachment-empty, .soc-detail-attachment-empty), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel#opsCommentPanel, #ticketCommentPanel#ticketCommentPanel) :is(.soc-situation-attachment-empty, .soc-ticket-reference-attachment-empty, .soc-detail-attachment-empty) { background: var(--soc-surface-2) !important; background-color: var(--soc-surface-2) !important; border-color: var(--soc-border) !important; color: var(--soc-text-muted) !important; -webkit-text-fill-color: var(--soc-text-muted) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel#opsCommentPanel, #ticketCommentPanel#ticketCommentPanel) :is(.soc-situation-attachment-empty, .soc-ticket-reference-attachment-empty, .soc-detail-attachment-empty) :is(span, p, svg, path), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#opsCommentPanel#opsCommentPanel, #ticketCommentPanel#ticketCommentPanel) :is(.soc-situation-attachment-empty, .soc-ticket-reference-attachment-empty, .soc-detail-attachment-empty) :is(span, p, svg, path) { color: var(--soc-text-muted) !important; stroke: currentColor !important; -webkit-text-fill-color: var(--soc-text-muted) !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#alertsView#alertsView, #ticketsView#ticketsView) :is(.status-badge--progress, .soc-ticket-reference-status-pill.status-pending, #ticketCommentPanelTypeBadge.soc-ticket-reference-type-badge), html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#alertsView#alertsView, #ticketsView#ticketsView) :is(.status-badge--progress, .soc-ticket-reference-status-pill.status-pending, #ticketCommentPanelTypeBadge.soc-ticket-reference-type-badge) { background: rgba(251, 146, 60, 0.18) !important; background-color: rgba(251, 146, 60, 0.18) !important; border-color: rgba(251, 146, 60, 0.42) !important; color: #fed7aa !important; -webkit-text-fill-color: #fed7aa !important; } html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#alertsView#alertsView, #ticketsView#ticketsView) .soc-ticket-reference-status-pill.status-approved, html body.dark:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is(#alertsView#alertsView, #ticketsView#ticketsView) .soc-ticket-reference-status-pill.status-approved { background: rgba(34, 197, 94, 0.18) !important; background-color: rgba(34, 197, 94, 0.18) !important; border-color: rgba(74, 222, 128, 0.38) !important; color: #bbf7d0 !important; -webkit-text-fill-color: #bbf7d0 !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #globalNoticeHost.global-notice-host > :is(.global-notice, .global-notice-overflow):not(.emergency):not(.persistent), html body.dark:not(.soc-auth-shell-active) #globalNoticeHost.global-notice-host > :is(.global-notice, .global-notice-overflow):not(.emergency):not(.persistent) { background: var(--soc-surface-2) !important; background-color: var(--soc-surface-2) !important; border-color: var(--soc-border) !important; color: var(--soc-text) !important; -webkit-text-fill-color: var(--soc-text) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #globalNoticeHost.global-notice-host > :is(.global-notice, .global-notice-overflow):not(.emergency):not(.persistent) :is(.global-notice-title, .global-notice-body, .global-notice-meta, .global-notice-footer), html body.dark:not(.soc-auth-shell-active) #globalNoticeHost.global-notice-host > :is(.global-notice, .global-notice-overflow):not(.emergency):not(.persistent) :is(.global-notice-title, .global-notice-body, .global-notice-meta, .global-notice-footer) { color: var(--soc-text) !important; -webkit-text-fill-color: var(--soc-text) !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) #ticketSummaryGrid.soc-ticket-reference-summary-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; max-width: 100% !important; min-height: 124px !important; height: auto !important; margin: 0 0 16px !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid var(--sentrix-panel-border, var(--soc-border, #dbe3ef)) !important; border-radius: 16px !important; background: #ffffff !important; background-color: #ffffff !important; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.04) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid, html body.dark:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid { border-color: var(--sentrix-panel-border, var(--soc-border, #23324e)) !important; background: var(--sentrix-panel-bg, var(--soc-surface-2, #0f1828)) !important; background-color: var(--sentrix-panel-bg, var(--soc-surface-2, #0f1828)) !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:not(.hidden):not([hidden]), html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 52px auto !important; align-content: center !important; align-items: center !important; justify-items: center !important; row-gap: 10px !important; column-gap: 0 !important; width: 100% !important; min-width: 0 !important; min-height: 124px !important; height: auto !important; padding: 18px 10px 16px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; color: var(--soc-text-primary, #0f172a) !important; -webkit-text-fill-color: var(--soc-text-primary, #0f172a) !important; text-align: center !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) + .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) { border-left: 1px solid var(--sentrix-panel-border, var(--soc-border, #dbe3ef)) !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) + .soc-ticket-reference-summary-card:not(.hidden):not([hidden])::before { content: "" !important; position: absolute !important; left: 0 !important; top: 26px !important; bottom: 26px !important; width: 1px !important; background: var(--sentrix-panel-border, var(--soc-border, #dbe3ef)) !important; pointer-events: none !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) + .soc-ticket-reference-summary-card:not(.hidden):not([hidden]), html body.dark:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) + .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) { border-left-color: var(--sentrix-panel-border, var(--soc-border, #23324e)) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) + .soc-ticket-reference-summary-card:not(.hidden):not([hidden])::before, html body.dark:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) + .soc-ticket-reference-summary-card:not(.hidden):not([hidden])::before { background: var(--sentrix-panel-border, var(--soc-border, #23324e)) !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:is(.is-active, :hover, :focus-visible) { border-color: transparent !important; background: transparent !important; background-color: transparent !important; color: var(--soc-text-primary, #0f172a) !important; -webkit-text-fill-color: var(--soc-text-primary, #0f172a) !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:focus-visible { outline: 2px solid rgba(255, 92, 0, 0.42) !important; outline-offset: -3px !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card .soc-ticket-reference-summary-icon { grid-column: 1 !important; grid-row: 1 !important; justify-self: center !important; align-self: center !important; margin: 0 !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card .soc-ticket-reference-summary-copy { grid-column: 1 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; align-items: center !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; text-align: center !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid .soc-ticket-reference-summary-label { display: block !important; width: 100% !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: anywhere !important; text-align: center !important; line-height: 1.2 !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid .soc-ticket-reference-summary-value { display: block !important; text-align: center !important; line-height: 1.05 !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) #ticketSummaryGrid.soc-ticket-reference-summary-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 18px !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 0 20px !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:not(.hidden):not([hidden]), html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-mobile, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active):has(#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden))) #ticketsView#ticketsView.soc-ops-workspace-view:is(.is-active, :not(.hidden)) #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 22px !important; width: 100% !important; min-width: 0 !important; min-height: 96px !important; height: auto !important; padding: 16px 24px !important; border: 1px solid var(--sentrix-card-border, var(--sentrix-panel-border, var(--soc-border, #dbe3ef))) !important; border-radius: 8px !important; background: var(--sentrix-card-bg, #ffffff) !important; background-color: var(--sentrix-card-bg, #ffffff) !important; box-shadow: none !important; color: var(--soc-text-primary, #0f172a) !important; -webkit-text-fill-color: var(--soc-text-primary, #0f172a) !important; text-align: left !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) + .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) { border-left: 1px solid var(--sentrix-card-border, var(--sentrix-panel-border, var(--soc-border, #dbe3ef))) !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:not(.hidden):not([hidden]) + .soc-ticket-reference-summary-card:not(.hidden):not([hidden])::before { content: none !important; display: none !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card:is(.is-active, :hover, :focus-visible) { border-color: var(--sentrix-card-border-active, rgba(255, 92, 0, 0.42)) !important; background: var(--sentrix-card-bg, #ffffff) !important; background-color: var(--sentrix-card-bg, #ffffff) !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card .soc-ticket-reference-summary-icon { flex: 0 0 64px !important; width: 64px !important; height: 64px !important; grid-column: auto !important; grid-row: auto !important; justify-self: auto !important; align-self: center !important; margin: 0 !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card .soc-ticket-reference-summary-copy { grid-column: auto !important; grid-row: auto !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-items: start !important; align-items: center !important; gap: 6px !important; width: auto !important; min-width: 0 !important; text-align: left !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid .soc-ticket-reference-summary-label, html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid .soc-ticket-reference-summary-value { text-align: left !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar { display: grid !important; grid-template-columns: minmax(220px, 1.2fr) repeat(5, minmax(150px, 1fr)) !important; align-items: end !important; gap: 12px 14px !important; width: 100% !important; padding: 18px 22px !important; border: 1px solid var(--sentrix-panel-border, var(--soc-border, #dbe3ef)) !important; border-radius: var(--soc-content-panel-radius) !important; background: var(--sentrix-panel-bg, #ffffff) !important; box-shadow: none !important; } @media (max-width: 1440px) { html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar { grid-template-columns: repeat(3, minmax(180px, 1fr)) !important; } } @media (max-width: 900px) { html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar { grid-template-columns: repeat(2, minmax(160px, 1fr)) !important; } } @media (max-width: 640px) { html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid, html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar { grid-template-columns: minmax(0, 1fr) !important; } } html body:not(.soc-auth-shell-active) #ticketsView:is(.is-active, :not(.hidden)) > #ticketReferenceTop, html body:not(.soc-auth-shell-active) #ticketsView:is(.is-active, :not(.hidden)) .soc-ticket-reference-top { display: block !important; width: 100% !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 18px !important; padding: 0 !important; margin: 0 0 24px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 22px !important; min-height: 96px !important; padding: 16px 24px !important; border: 1px solid var(--sentrix-card-border, var(--sentrix-panel-border, var(--soc-border, #dbe3ef))) !important; border-radius: 8px !important; background: var(--sentrix-card-bg, #fff) !important; box-shadow: none !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card + .soc-ticket-reference-summary-card { border-left: 1px solid var(--sentrix-card-border, var(--sentrix-panel-border, var(--soc-border, #dbe3ef))) !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card::before, html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card + .soc-ticket-reference-summary-card::before { content: none !important; display: none !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar { display: grid !important; grid-template-columns: minmax(220px, 1.2fr) repeat(5, minmax(150px, 1fr)) !important; align-items: end !important; gap: 14px !important; width: 100% !important; margin: 0 0 20px !important; padding: 18px 24px !important; border: 1px solid var(--sentrix-panel-border, var(--soc-border, #dbe3ef)) !important; border-radius: 8px !important; background: var(--sentrix-panel-bg, #fff) !important; box-shadow: none !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar > * { min-width: 0 !important; } @media (max-width: 1440px) { html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid, html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 900px) { html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid, html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid, html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar { grid-template-columns: 1fr !important; } } .soc-content-page { display: flex; flex-direction: column; gap: var(--soc-content-section-gap); padding-block-start: var(--soc-content-top-gap); } .soc-content-header { display: flex; align-items: center; justify-content: space-between; gap: var(--soc-content-section-gap-sm); margin: 0; } .soc-content-title { margin: 0; font-size: var(--soc-content-title-size); line-height: var(--soc-content-title-line); font-weight: var(--soc-content-title-weight); } .soc-content-section { display: flex; flex-direction: column; gap: var(--soc-content-section-gap); } .soc-summary-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--soc-summary-grid-gap); width: 100%; } .soc-summary-metric-card { display: flex; align-items: center; gap: var(--soc-summary-content-gap); min-height: var(--soc-summary-card-height); padding: var(--soc-summary-card-padding-y) var(--soc-summary-card-padding-x); border: 1px solid var(--soc-content-card-border); border-radius: var(--soc-summary-card-radius); background: var(--soc-content-card-bg); box-shadow: var(--soc-content-card-shadow); box-sizing: border-box; } .soc-summary-metric-icon { display: grid; place-items: center; width: var(--soc-summary-icon-size); height: var(--soc-summary-icon-size); min-width: var(--soc-summary-icon-size); border-radius: var(--ui-radius-pill); } .soc-summary-metric-icon :is(svg, img, .sentrix-theme-icon, .sentrix-line-icon) { width: var(--soc-summary-icon-svg-size); height: var(--soc-summary-icon-svg-size); } .soc-summary-metric-icon svg * { stroke-width: var(--soc-summary-icon-stroke); } .soc-summary-metric-copy { display: grid; gap: var(--soc-summary-copy-gap); min-width: 0; } .soc-summary-metric-label { margin: 0; font-size: var(--soc-summary-label-size); line-height: var(--soc-summary-label-line); font-weight: var(--soc-summary-label-weight); } .soc-summary-metric-value { margin: 0; font-size: var(--soc-summary-value-size); line-height: var(--soc-summary-value-line); font-weight: var(--soc-summary-value-weight); } .soc-summary-metric-meta { margin: 0; font-size: var(--soc-summary-meta-size); line-height: var(--soc-summary-meta-line); font-weight: var(--soc-summary-meta-weight); } .soc-content-filterbar { display: grid; gap: var(--soc-filter-grid-gap-y) var(--soc-filter-grid-gap-x); width: 100%; padding: var(--soc-filter-panel-padding-y) var(--soc-filter-panel-padding-x); border: 1px solid var(--soc-content-card-border); border-radius: var(--soc-content-panel-radius); background: var(--soc-content-card-bg); box-shadow: var(--soc-content-card-shadow); box-sizing: border-box; } .soc-content-filter-field { display: flex; flex-direction: column; gap: var(--soc-filter-field-gap); min-width: 0; } .soc-content-filter-actions { display: flex; align-items: end; gap: var(--soc-filter-grid-gap-x); min-width: 0; } .soc-content-action-button { min-height: var(--soc-content-button-height); padding-inline: var(--soc-content-button-padding-x); border-radius: var(--soc-filter-control-radius); font-size: var(--soc-content-button-font-size); line-height: var(--ui-leading-20); font-weight: var(--ui-weight-bold); } .soc-content-table :is(th, td) { padding: var(--soc-content-table-cell-padding-y) var(--soc-content-table-cell-padding-x); font-size: var(--soc-content-table-font-size); line-height: var(--ui-leading-20); } .soc-content-table tbody tr { min-height: var(--soc-content-table-row-height); } html body:not(.soc-auth-shell-active) :is( #homeView#homeView, #alertsView#alertsView, #ticketsView#ticketsView, #weeklyView#weeklyView, #analyticsView#analyticsView, #peopleView#peopleView, #reportsView#reportsView, #reportsHubView#reportsHubView, #employeeScorePanel#employeeScorePanel, #opsSupportPanel#opsSupportPanel, #announcementPanel#announcementPanel, #notificationSettingsPanel#notificationSettingsPanel, #myProfileView#myProfileView, #accountPanel#accountPanel ) { padding-block-start: var(--soc-content-top-gap); } html body:not(.soc-auth-shell-active) :is( #homeView#homeView, #alertsView#alertsView, #ticketsView#ticketsView, #weeklyView#weeklyView, #analyticsView#analyticsView, #peopleView#peopleView, #reportsView#reportsView, #reportsHubView#reportsHubView, #employeeScorePanel#employeeScorePanel, #opsSupportPanel#opsSupportPanel, #announcementPanel#announcementPanel, #notificationSettingsPanel#notificationSettingsPanel, #myProfileView#myProfileView, #accountPanel#accountPanel ) :is(.soc-page-title, .soc-panel-title, .soc-view-title, .soc-content-title, h1) { font-size: var(--soc-content-title-size) !important; line-height: var(--soc-content-title-line) !important; font-weight: var(--soc-content-title-weight) !important; } html body:not(.soc-auth-shell-active) :is( #homeView#homeView, #alertsView#alertsView, #ticketsView#ticketsView, #weeklyView#weeklyView, #analyticsView#analyticsView, #peopleView#peopleView, #reportsView#reportsView, #reportsHubView#reportsHubView, #employeeScorePanel#employeeScorePanel, #opsSupportPanel#opsSupportPanel, #announcementPanel#announcementPanel, #notificationSettingsPanel#notificationSettingsPanel, #myProfileView#myProfileView, #accountPanel#accountPanel ) :is(.soc-section-heading, .soc-section-title, .card-title, h2, h3) { font-size: var(--soc-content-section-title-size) !important; line-height: var(--soc-content-section-title-line) !important; font-weight: var(--soc-content-section-title-weight) !important; } html body:not(.soc-auth-shell-active) :is( #homeView#homeView .sentrix-home-kpi-grid, #homeView#homeView .soc-kpi-grid, #alertsView#alertsView #realtimeSummaryGrid.soc-situation-kpi-grid, #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid, #weeklyView#weeklyView .soc-weekly-ticket-summary-grid, #analyticsView#analyticsView .soc-analytics-v2-kpi-rack, #analyticsView#analyticsView #analyticsHeroKpiRack, #employeeScorePanel#employeeScorePanel .soc-employee-score-summary-grid, #myProfileView#myProfileView .soc-profile-counter-row, #peopleView#peopleView .soc-people-detail-summary-grid, #peopleView#peopleView .soc-people-detail-metric-grid, #opsSupportPanel#opsSupportPanel .soc-ops-support-detail-summary-grid, #opsSupportPanel#opsSupportPanel .soc-ops-support-sheet-summary-grid ) { gap: var(--soc-summary-grid-gap) !important; width: 100% !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) :is( #homeView#homeView .sentrix-home-kpi-card, #homeView#homeView .soc-kpi-card, #alertsView#alertsView #realtimeSummaryGrid.soc-situation-kpi-grid > .soc-situation-kpi-card, #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card, #weeklyView#weeklyView .soc-weekly-ticket-summary-card, #analyticsView#analyticsView .soc-analytics-v2-kpi-tile, #analyticsView#analyticsView #analyticsHeroKpiRack > *, #employeeScorePanel#employeeScorePanel .soc-employee-score-summary-card, #myProfileView#myProfileView .soc-profile-counter-row > .soc-profile-counter-button, #myProfileView#myProfileView .soc-profile-counter-row > .soc-profile-counter-item, #peopleView#peopleView .soc-people-kpi-card, #peopleView#peopleView .soc-people-detail-metric-card, #opsSupportPanel#opsSupportPanel .soc-ops-support-day-summary-card, #opsSupportPanel#opsSupportPanel .ops-ref-summary-card, #opsSupportPanel#opsSupportPanel .ops-ref-metric-card, .soc-summary-metric-card ) { min-height: var(--soc-summary-card-height) !important; padding: var(--soc-summary-card-padding-y) var(--soc-summary-card-padding-x) !important; border: 1px solid var(--soc-content-card-border) !important; border-radius: var(--soc-summary-card-radius) !important; background: var(--soc-content-card-bg); box-shadow: var(--soc-content-card-shadow); box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) :is( #homeView#homeView .sentrix-home-kpi-card, #homeView#homeView .soc-kpi-card, #alertsView#alertsView #realtimeSummaryGrid.soc-situation-kpi-grid > .soc-situation-kpi-card, #ticketsView#ticketsView #ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card, #weeklyView#weeklyView .soc-weekly-ticket-summary-card, #myProfileView#myProfileView .soc-profile-counter-row > .soc-profile-counter-button, #myProfileView#myProfileView .soc-profile-counter-row > .soc-profile-counter-item, #peopleView#peopleView .soc-people-kpi-card, #peopleView#peopleView .soc-people-detail-metric-card, #opsSupportPanel#opsSupportPanel .ops-ref-summary-card, #opsSupportPanel#opsSupportPanel .ops-ref-metric-card, .soc-summary-metric-card ) { display: flex !important; align-items: center !important; gap: var(--soc-summary-content-gap) !important; } html body:not(.soc-auth-shell-active) :is( #homeView#homeView .sentrix-home-kpi-icon, #homeView#homeView .soc-kpi-icon, #alertsView#alertsView #realtimeSummaryGrid .soc-situation-kpi-icon, #ticketsView#ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon, #weeklyView#weeklyView .soc-weekly-ticket-summary-icon, #peopleView#peopleView .soc-people-kpi-icon, #peopleView#peopleView .soc-people-detail-metric-icon, #opsSupportPanel#opsSupportPanel .ops-ref-summary-icon, .soc-summary-metric-icon ) { display: grid !important; place-items: center !important; width: var(--soc-summary-icon-size) !important; height: var(--soc-summary-icon-size) !important; min-width: var(--soc-summary-icon-size) !important; flex: 0 0 var(--soc-summary-icon-size) !important; border-radius: var(--ui-radius-pill) !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) :is( #homeView#homeView .sentrix-home-kpi-icon, #homeView#homeView .soc-kpi-icon, #alertsView#alertsView #realtimeSummaryGrid .soc-situation-kpi-icon, #ticketsView#ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon, #weeklyView#weeklyView .soc-weekly-ticket-summary-icon, #peopleView#peopleView .soc-people-kpi-icon, #peopleView#peopleView .soc-people-detail-metric-icon, #opsSupportPanel#opsSupportPanel .ops-ref-summary-icon, .soc-summary-metric-icon ) :is(svg, img, i, .sentrix-theme-icon, .sentrix-line-icon) { width: var(--soc-summary-icon-svg-size) !important; height: var(--soc-summary-icon-svg-size) !important; font-size: var(--soc-summary-icon-svg-size) !important; } html body:not(.soc-auth-shell-active) :is( #homeView#homeView .sentrix-home-kpi-icon, #homeView#homeView .soc-kpi-icon, #alertsView#alertsView #realtimeSummaryGrid .soc-situation-kpi-icon, #ticketsView#ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-icon, #weeklyView#weeklyView .soc-weekly-ticket-summary-icon, #peopleView#peopleView .soc-people-kpi-icon, #peopleView#peopleView .soc-people-detail-metric-icon, #opsSupportPanel#opsSupportPanel .ops-ref-summary-icon, .soc-summary-metric-icon ) svg * { stroke-width: var(--soc-summary-icon-stroke) !important; } html body:not(.soc-auth-shell-active) :is( #homeView#homeView .sentrix-home-kpi-copy, #homeView#homeView .soc-kpi-copy, #alertsView#alertsView #realtimeSummaryGrid .soc-situation-kpi-copy, #ticketsView#ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-copy, #weeklyView#weeklyView .soc-weekly-ticket-summary-copy, #peopleView#peopleView .soc-people-kpi-copy, #peopleView#peopleView .soc-people-detail-metric-copy, #opsSupportPanel#opsSupportPanel .ops-ref-summary-copy, .soc-summary-metric-copy ) { display: grid !important; gap: var(--soc-summary-copy-gap) !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) :is( #homeView#homeView .sentrix-home-kpi-label, #homeView#homeView .soc-kpi-label, #alertsView#alertsView #realtimeSummaryGrid .soc-situation-kpi-label, #ticketsView#ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-label, #weeklyView#weeklyView .soc-weekly-ticket-summary-label, #analyticsView#analyticsView .soc-analytics-v2-kpi-label, #analyticsView#analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-label, #employeeScorePanel#employeeScorePanel .soc-employee-score-summary-label, #myProfileView#myProfileView .soc-profile-counter-label, #peopleView#peopleView .soc-people-kpi-label, #peopleView#peopleView .soc-people-detail-metric-label, #opsSupportPanel#opsSupportPanel .ops-ref-summary-label, .soc-summary-metric-label ) { margin: 0 !important; font-size: var(--soc-summary-label-size) !important; line-height: var(--soc-summary-label-line) !important; font-weight: var(--soc-summary-label-weight) !important; } html body:not(.soc-auth-shell-active) :is( #homeView#homeView .sentrix-home-kpi-value, #homeView#homeView .soc-kpi-value, #alertsView#alertsView #realtimeSummaryGrid .soc-situation-kpi-value, #ticketsView#ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-value, #weeklyView#weeklyView .soc-weekly-ticket-summary-value, #analyticsView#analyticsView .soc-analytics-v2-kpi-value, #analyticsView#analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-value, #employeeScorePanel#employeeScorePanel .soc-employee-score-summary-value, #myProfileView#myProfileView .soc-profile-counter-value, #peopleView#peopleView .soc-people-kpi-value, #peopleView#peopleView .soc-people-detail-metric-value, #opsSupportPanel#opsSupportPanel .ops-ref-summary-value, .soc-summary-metric-value ) { margin: 0 !important; font-size: var(--soc-summary-value-size) !important; line-height: var(--soc-summary-value-line) !important; font-weight: var(--soc-summary-value-weight) !important; } html body:not(.soc-auth-shell-active) :is( #homeView#homeView .sentrix-home-kpi-meta, #homeView#homeView .soc-kpi-meta, #alertsView#alertsView #realtimeSummaryGrid .soc-situation-kpi-meta, #ticketsView#ticketsView #ticketSummaryGrid .soc-ticket-reference-summary-meta, #weeklyView#weeklyView .soc-weekly-ticket-summary-meta, #employeeScorePanel#employeeScorePanel .soc-employee-score-summary-meta, #peopleView#peopleView .soc-people-kpi-meta, #peopleView#peopleView .soc-people-detail-metric-meta, #opsSupportPanel#opsSupportPanel .ops-ref-summary-meta, .soc-summary-metric-meta ) { margin: 0 !important; font-size: var(--soc-summary-meta-size) !important; line-height: var(--soc-summary-meta-line) !important; font-weight: var(--soc-summary-meta-weight) !important; } html body:not(.soc-auth-shell-active) :is( #alertsView#alertsView .soc-phase1-toolbar, #alertsView#alertsView .soc-situation-filter-card, #ticketsView#ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar, #weeklyView#weeklyView .soc-apple-weekly-list-toolbar, #analyticsView#analyticsView .soc-analytics-v2-toolbar, #peopleView#peopleView .soc-employee-directory-toolbar, #employeeScorePanel#employeeScorePanel .soc-employee-score-filter-bar, #reportsHubView#reportsHubView .soc-phase4-download-toolbar, #announcementPanel#announcementPanel .soc-notification-center-toolbar, #announcementPanel#announcementPanel .notification-timeline-toolbar, #opsSupportPanel#opsSupportPanel .ops-ref-toolbar, #opsSupportPanel#opsSupportPanel .soc-ops-support-filters, .soc-content-filterbar ) { gap: var(--soc-filter-grid-gap-y) var(--soc-filter-grid-gap-x) !important; padding: var(--soc-filter-panel-padding-y) var(--soc-filter-panel-padding-x) !important; border: 1px solid var(--soc-content-card-border) !important; border-radius: var(--soc-content-panel-radius) !important; background: var(--soc-content-card-bg); box-shadow: var(--soc-content-card-shadow); box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) :is( #alertsView#alertsView .soc-phase1-toolbar, #alertsView#alertsView .soc-situation-filter-card, #ticketsView#ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar, #weeklyView#weeklyView .soc-apple-weekly-list-toolbar, #analyticsView#analyticsView .soc-analytics-v2-toolbar, #peopleView#peopleView .soc-employee-directory-toolbar, #employeeScorePanel#employeeScorePanel .soc-employee-score-filter-bar, #reportsHubView#reportsHubView .soc-phase4-download-toolbar, #announcementPanel#announcementPanel .soc-notification-center-toolbar, #announcementPanel#announcementPanel .notification-timeline-toolbar, #opsSupportPanel#opsSupportPanel .ops-ref-toolbar, #opsSupportPanel#opsSupportPanel .soc-ops-support-filters, .soc-content-filterbar ) :is(input, select, button, .ds-btn, .soc-select, .soc-button, .filter-chip, .soc-filter-chip, .soc-date-range-control) { min-height: var(--soc-filter-control-height) !important; border-radius: var(--soc-filter-control-radius) !important; font-size: var(--soc-content-button-font-size) !important; line-height: var(--ui-leading-20) !important; } html body:not(.soc-auth-shell-active) :is( #alertsView#alertsView, #ticketsView#ticketsView, #weeklyView#weeklyView, #analyticsView#analyticsView, #peopleView#peopleView, #reportsView#reportsView, #reportsHubView#reportsHubView, #employeeScorePanel#employeeScorePanel, #opsSupportPanel#opsSupportPanel, #announcementPanel#announcementPanel, #notificationSettingsPanel#notificationSettingsPanel, #myProfileView#myProfileView, #accountPanel#accountPanel, .soc-content-table ) table :is(th, td) { padding: var(--soc-content-table-cell-padding-y) var(--soc-content-table-cell-padding-x) !important; font-size: var(--soc-content-table-font-size) !important; line-height: var(--ui-leading-20) !important; } html body:not(.soc-auth-shell-active) :is( #alertsView#alertsView, #ticketsView#ticketsView, #weeklyView#weeklyView, #analyticsView#analyticsView, #peopleView#peopleView, #reportsView#reportsView, #reportsHubView#reportsHubView, #employeeScorePanel#employeeScorePanel, #opsSupportPanel#opsSupportPanel, #announcementPanel#announcementPanel, #notificationSettingsPanel#notificationSettingsPanel, #myProfileView#myProfileView, #accountPanel#accountPanel, .soc-content-table ) table tbody tr { min-height: var(--soc-content-table-row-height) !important; } html body:not(.soc-auth-shell-active) :is( .soc-modal-body, .modal-body, .soc-dialog-body, .soc-pc-side-panel-body, .soc-report-builder-body, .soc-sheet-body ) { padding: var(--soc-content-modal-padding) !important; } @media (max-width: 767px) { .soc-content-action-button { min-height: var(--soc-content-button-height-mobile); } html body:not(.soc-auth-shell-active) :is( #alertsView#alertsView .soc-phase1-toolbar, #alertsView#alertsView .soc-situation-filter-card, #ticketsView#ticketsView #ticketReferenceFilterBar.soc-ticket-reference-filterbar, #weeklyView#weeklyView .soc-apple-weekly-list-toolbar, #analyticsView#analyticsView .soc-analytics-v2-toolbar, #peopleView#peopleView .soc-employee-directory-toolbar, #employeeScorePanel#employeeScorePanel .soc-employee-score-filter-bar, #reportsHubView#reportsHubView .soc-phase4-download-toolbar, #announcementPanel#announcementPanel .soc-notification-center-toolbar, #announcementPanel#announcementPanel .notification-timeline-toolbar, #opsSupportPanel#opsSupportPanel .ops-ref-toolbar, #opsSupportPanel#opsSupportPanel .soc-ops-support-filters, .soc-content-filterbar ) :is(input, select, button, .ds-btn, .soc-select, .soc-button, .filter-chip, .soc-filter-chip, .soc-date-range-control) { min-height: var(--soc-filter-control-height-mobile) !important; } } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) :is( #homeView#homeView, #peopleView#peopleView, #employeeScorePanel#employeeScorePanel, #announcementPanel#announcementPanel ) { padding-block-start: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView#homeView #sentrixHomeDashboardRoot.sentrix-home-dashboard { padding-top: 0 !important; margin-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active)[data-realtime-subview="home"] #homeView#homeView #sentrixHomeDashboardRoot.sentrix-home-dashboard > :is(.sentrix-home-header, .sentrix-home-kpi-grid):first-child { margin-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView#peopleView .soc-people-admin-header-wrap { margin-bottom: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView#peopleView #peopleHubEmployeesPane.soc-people-hub-pane { display: grid !important; gap: var(--soc-content-section-gap) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #peopleView#peopleView .soc-people-pane-summary.soc-people-dashboard-summary { margin-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #employeeScorePanel#employeeScorePanel .soc-employee-score-builder { padding-top: 0 !important; margin-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #employeeScorePanel#employeeScorePanel #employeeScoreContent.soc-employee-score-content { margin-top: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #announcementPanel#announcementPanel #noticesWorkspace.soc-notices-workspace { padding-top: 0 !important; gap: var(--soc-content-section-gap) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #announcementPanel#announcementPanel .workspace-head.notices-workspace-head { margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #announcementPanel#announcementPanel .workspace-tabbar-row.notices-toolbar-row { margin-top: 0 !important; padding-top: 0 !important; } html body:not(.soc-auth-shell-active) #homeView#homeView #sentrixHomeDashboardRoot#sentrixHomeDashboardRoot .sentrix-home-kpi-card .sentrix-home-kpi-icon.sentrix-kpi-line-shell { width: 64px !important; height: 64px !important; min-width: 64px !important; max-width: 64px !important; min-height: 64px !important; max-height: 64px !important; inline-size: 64px !important; block-size: 64px !important; min-inline-size: 64px !important; max-inline-size: 64px !important; min-block-size: 64px !important; max-block-size: 64px !important; aspect-ratio: 1 / 1 !important; flex: 0 0 64px !important; flex-shrink: 0 !important; box-sizing: border-box !important; border-radius: var(--ui-radius-pill) !important; } @media (min-width: 1200px) { html body:not(.soc-auth-shell-active) #alertsView#alertsView .soc-situation-filter-card, html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketReferenceFilterBar#ticketReferenceFilterBar.soc-ticket-reference-filterbar { grid-template-columns: minmax(180px, 1.25fr) repeat(5, minmax(0, 1fr)) !important; align-items: end !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #alertsView#alertsView#alertsView.soc-situation-reference .soc-situation-filter-card .soc-situation-search-field.soc-situation-search-field, html body:not(.soc-auth-shell-active) #ticketsView#ticketsView#ticketsView.soc-ops-workspace-view #ticketReferenceFilterBar#ticketReferenceFilterBar .soc-ticket-reference-search.soc-ticket-reference-search { height: 40px !important; min-height: 40px !important; max-height: 40px !important; align-self: center !important; margin-block-start: 20px !important; margin-block-end: 0 !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView:has(.soc-ticket-reference-main.is-empty-result) #ticketReferenceFilterBar#ticketReferenceFilterBar [data-ticket-reference-filter-field="request-count"] { display: grid !important; } } @media (max-width: 767px) { #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-editor .soc-apple-weekly-setup-rule-grid { grid-template-columns: minmax(0, 1fr) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-editor .soc-apple-weekly-time-picker { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (min-width: 1200px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView { --sentrix-web-dashboard-reference-layout: 1; --analytics-reference-gap: 12px; --analytics-reference-border: #dfe5ed; --analytics-reference-muted: #64748b; --analytics-reference-orange: #ff6418; background: #f7f8fb !important; color: #172033 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 { width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 12px 16px 20px !important; background: #f7f8fb !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-header { display: block !important; min-height: 36px !important; margin: 0 0 var(--analytics-reference-gap) !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-header-copy, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsCustomRange, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsRefreshBtn, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsSiteTable, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsFollowupBand, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsRangeQuick [data-range="custom"] { display: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-toolbar { display: flex !important; align-items: center !important; gap: var(--analytics-reference-gap) !important; width: 100% !important; min-height: 36px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-toolbar-group { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-toolbar-group--scope { margin-left: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-toolbar-label { color: #273246 !important; font-size: 12px !important; line-height: 18px !important; font-weight: 650 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-toolbar-label--ghost { display: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsRangeQuick, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-toolbar-actions { display: flex !important; align-items: center !important; gap: 8px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsRangeQuick button, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsSitePickerButton, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsExportBtn { min-height: 36px !important; height: 36px !important; border: 1px solid #d9e0e9 !important; border-radius: 7px !important; background: #ffffff !important; color: #202a3b !important; box-shadow: none !important; font-size: 12px !important; line-height: 18px !important; font-weight: 650 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsRangeQuick button { width: 50px !important; padding: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsRangeQuick button.active { border-color: var(--analytics-reference-orange) !important; background: #ffffff !important; color: var(--analytics-reference-orange) !important; box-shadow: inset 0 0 0 1px rgba(255, 100, 24, 0.08) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsSitePickerButton { width: clamp(210px, 21vw, 300px) !important; justify-content: space-between !important; padding: 0 14px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsExportBtn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 94px !important; padding: 0 12px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-export-icon { width: 16px !important; height: 16px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-board { display: grid !important; gap: var(--analytics-reference-gap) !important; min-height: 0 !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-board-card { min-width: 0 !important; border: 1px solid var(--analytics-reference-border) !important; border-radius: 10px !important; background: #ffffff !important; box-shadow: none !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-board-card-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; min-height: 0 !important; margin: 0 !important; padding: 14px 16px 8px !important; border: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-board-card-head h3 { margin: 0 !important; color: #182235 !important; font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; letter-spacing: -0.015em !important; } #analyticsView#analyticsView .soc-analytics-board-row--hero { display: grid !important; grid-template-columns: minmax(0, 1.48fr) minmax(0, .9fr) minmax(0, 1.08fr) !important; gap: var(--analytics-reference-gap) !important; align-items: stretch !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-board-row--hero > .soc-analytics-board-card { height: 252px !important; min-height: 252px !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsHeroRiskCard { border-color: var(--analytics-reference-border) !important; background: #ffffff !important; color: #172033 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsHeroRiskCard .soc-analytics-v2-title-with-help { display: flex !important; align-items: center !important; gap: 8px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsHeroRiskCard .soc-risk-info-trigger { width: 22px !important; min-width: 22px !important; height: 22px !important; min-height: 22px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #eef1f5 !important; color: #657085 !important; font-size: 12px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-board-card-body--risk { height: calc(100% - 44px) !important; padding: 0 16px 16px !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-hero-core { display: grid !important; grid-template-columns: 136px minmax(0, 1fr) !important; align-items: center !important; gap: 18px !important; width: 100% !important; height: 100% !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-risk-gauge-wrap { width: 132px !important; height: 132px !important; min-width: 132px !important; min-height: 132px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-risk-gauge { width: 132px !important; height: 132px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-risk-gauge-track { fill: none !important; stroke: #e9edf3 !important; stroke-width: 9 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-risk-gauge-arc { fill: none !important; stroke: var(--analytics-reference-orange) !important; stroke-width: 9 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-risk-value-wrap strong { color: #111827 !important; font-size: 30px !important; line-height: 34px !important; font-weight: 760 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-risk-value-wrap .soc-risk-grade { margin-top: 3px !important; padding: 1px 8px !important; border: 1px solid var(--analytics-reference-orange) !important; border-radius: 999px !important; background: #ffffff !important; color: var(--analytics-reference-orange) !important; font-size: 11px !important; line-height: 17px !important; font-weight: 700 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-spark-panel { display: grid !important; grid-template-rows: minmax(0, 1fr) auto auto !important; min-width: 0 !important; height: 176px !important; color: var(--analytics-reference-muted) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline { width: 100% !important; height: 142px !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--danger { fill: #fff0f1 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--warning { fill: #fff6ea !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--safe { fill: #eef9f1 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .grid { stroke: #e7ebf0 !important; stroke-width: 1 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .grid.threshold { stroke: #ff8b4e !important; stroke-dasharray: 4 4 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .line { fill: none !important; stroke: var(--analytics-reference-orange) !important; stroke-width: 2.4 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .dot { fill: var(--analytics-reference-orange) !important; stroke: #ffffff !important; stroke-width: 1.5 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .highlight-line { stroke: #ff9b6a !important; stroke-width: 1 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip rect { fill: #ffffff !important; stroke: #dce3eb !important; filter: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip text { fill: #4b5565 !important; font-size: 10px !important; font-weight: 650 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-spark-axis { display: grid !important; grid-template-columns: repeat(var(--analytics-risk-axis-columns, 7), minmax(0, 1fr)) !important; gap: 2px !important; color: var(--analytics-reference-muted) !important; font-size: 10px !important; line-height: 14px !important; font-weight: 600 !important; text-align: center !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-spark-axis > span { min-width: 0 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-spark-caption { display: block !important; margin-top: 2px !important; color: #7a8496 !important; font-size: 10px !important; line-height: 14px !important; font-weight: 600 !important; text-align: center !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsHeroKpiRack .soc-analytics-board-card-body, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsHeroHealthCard .soc-analytics-board-card-body--health { height: calc(100% - 44px) !important; padding: 0 16px 16px !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-kpi-rack { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; height: 100% !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-kpi-tile { display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: 0 !important; padding: 10px 12px !important; border: 1px solid #e2e7ee !important; border-radius: 8px !important; background: #ffffff !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-kpi-tile .label { color: #5f6b7d !important; font-size: 11px !important; line-height: 16px !important; font-weight: 650 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-kpi-tile .label::before { content: "" !important; display: inline-block !important; width: 6px !important; height: 6px !important; margin-right: 7px !important; border-radius: 50% !important; background: #ff7a16 !important; vertical-align: 1px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-kpi-tile[data-tone="caution"] .label::before { background: #9c7c1a !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-kpi-tile[data-tone="danger"] .label::before { background: #f04f5f !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-kpi-tile strong { margin-top: 4px !important; color: #111827 !important; font-size: 24px !important; line-height: 27px !important; font-weight: 760 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-kpi-tile .meta { margin-top: 2px !important; color: var(--analytics-reference-muted) !important; font-size: 10px !important; line-height: 14px !important; font-weight: 520 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-health-panel { display: grid !important; grid-template-rows: auto auto 1fr !important; gap: 12px !important; height: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-health-head .label { color: var(--analytics-reference-muted) !important; font-size: 10px !important; line-height: 14px !important; font-weight: 600 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-health-head strong { display: block !important; margin-top: 5px !important; color: #111827 !important; font-size: 24px !important; line-height: 29px !important; font-weight: 760 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-health-head .meta { display: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-health-bar { height: 7px !important; margin: 0 !important; border-radius: 999px !important; background: #e9edf3 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-health-legend { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; align-self: end !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-health-item { display: grid !important; grid-template-columns: 7px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; gap: 4px 6px !important; min-height: 60px !important; padding: 9px 10px !important; border: 1px solid #e2e7ee !important; border-radius: 8px !important; background: #ffffff !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-health-item .dot { width: 6px !important; height: 6px !important; margin-top: 5px !important; border-radius: 50% !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-health-item-copy { display: flex !important; justify-content: space-between !important; gap: 4px !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-health-item .label, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-health-item .meta { color: #596679 !important; font-size: 10px !important; line-height: 14px !important; font-weight: 620 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-health-item > strong { grid-column: 2 !important; color: #111827 !important; font-size: 17px !important; line-height: 20px !important; font-weight: 740 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsAnalysisBoard { display: grid !important; grid-template-columns: minmax(0, .84fr) minmax(0, 1.55fr) !important; grid-template-areas: "trend pattern" "cause people" !important; gap: var(--analytics-reference-gap) !important; align-items: stretch !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsTrendPanel { grid-area: trend !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel { grid-area: pattern !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsCausePanel { grid-area: cause !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPeoplePanel { grid-area: people !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView :is(#analyticsTrendPanel, #analyticsPatternPanel) { display: flex !important; flex-direction: column !important; min-height: var(--soc-dashboard-analysis-height) !important; height: var(--soc-dashboard-analysis-height) !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView :is(#analyticsCausePanel, #analyticsPeoplePanel) { display: flex !important; flex-direction: column !important; min-height: var(--soc-dashboard-compact-height) !important; height: var(--soc-dashboard-compact-height) !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsTrendPanel .soc-analytics-chart-shell { display: grid !important; grid-template-rows: minmax(0, 1fr) auto !important; flex: 1 1 auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 16px 4px !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsTrendPanel .soc-analytics-line-chart { width: 100% !important; height: 126px !important; min-height: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsTrendAxis { width: 100% !important; margin: 0 !important; padding: 0 !important; color: #657085 !important; font-size: 10px !important; line-height: 14px !important; font-weight: 600 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsLiveActivityBreakdown { flex: 0 0 auto !important; margin: 2px 16px 12px !important; padding: 8px 12px !important; border: 1px solid #e0e6ed !important; border-radius: 7px !important; background: #fbfcfe !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsLiveActivityBreakdown .soc-analytics-live-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsLiveActivityBreakdown .soc-analytics-live-head span { color: #263247 !important; font-size: 11px !important; line-height: 16px !important; font-weight: 650 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsLiveActivityBreakdown .soc-analytics-live-head strong { color: var(--analytics-reference-orange) !important; font-size: 20px !important; line-height: 22px !important; font-weight: 760 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsLiveActivityBreakdown :is(.soc-analytics-live-head small, .soc-analytics-live-grid) { display: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel .soc-analytics-board-card-head { align-items: center !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-head-actions button { min-height: 28px !important; height: 28px !important; padding: 0 10px !important; border: 1px solid #dce3eb !important; border-radius: 6px !important; background: #ffffff !important; color: #687386 !important; font-size: 10px !important; line-height: 14px !important; font-weight: 650 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-head-actions button.is-active { border-color: var(--analytics-reference-orange) !important; color: var(--analytics-reference-orange) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel .soc-analytics-pattern-shell { display: grid !important; grid-template-rows: minmax(0, 1fr) auto !important; flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; padding: 0 16px 10px !important; overflow: hidden !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-grid-board { display: grid !important; grid-template-columns: 28px repeat(var(--analytics-pattern-columns, 24), 22px) !important; grid-auto-rows: 22px !important; align-content: start !important; justify-content: start !important; gap: 3px !important; min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-axis, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-row-label { display: grid !important; place-items: center !important; min-width: 0 !important; color: #526075 !important; font-size: 9px !important; line-height: 11px !important; font-weight: 650 !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-cell-board { width: 22px !important; min-width: 22px !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 2px !important; color: #344054 !important; font-size: 9px !important; line-height: 1 !important; font-weight: 650 !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-footer { width: 100% !important; margin-top: 6px !important; padding: 0 !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-legend { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 6px !important; color: #637086 !important; font-size: 9px !important; line-height: 12px !important; font-weight: 600 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-scale { width: 12px !important; height: 12px !important; border-radius: 3px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-cause-sort-field { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: #677386 !important; font-size: 10px !important; line-height: 14px !important; font-weight: 600 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-cause-sort-field select { width: 100px !important; min-height: 28px !important; height: 28px !important; padding: 0 22px 0 8px !important; border: 1px solid #dce3eb !important; border-radius: 6px !important; background: #ffffff !important; color: #29354a !important; font-size: 10px !important; font-weight: 650 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView :is(#analyticsCausePanel .soc-analytics-cause-shell, #analyticsPeoplePanel .soc-analytics-hotspot-shell) { flex: 1 1 auto !important; min-height: 0 !important; padding: 0 16px 12px !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-cause-list { display: grid !important; gap: 9px !important; max-height: 116px !important; padding-right: 4px !important; overflow-y: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-cause-head { color: #263247 !important; font-size: 10px !important; line-height: 14px !important; font-weight: 650 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-cause-track { height: 6px !important; border-radius: 999px !important; background: #e9edf2 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-cause-track span { border-radius: inherit !important; background: var(--analytics-reference-orange) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPeopleHotspotList .soc-analytics-hotspot-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; height: 100% !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPeopleHotspotList .soc-analytics-hotspot-row { min-height: 0 !important; height: 116px !important; padding: 9px 10px !important; border: 1px solid #e1e6ed !important; border-radius: 8px !important; background: #ffffff !important; box-shadow: none !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-hotspot-rank { display: inline-grid !important; place-items: center !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: #eef1f5 !important; color: #263247 !important; font-size: 10px !important; line-height: 12px !important; font-weight: 700 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-hotspot-score-badge { min-height: 22px !important; padding: 2px 8px !important; border: 1px solid #ffb9b9 !important; border-radius: 999px !important; background: #ffffff !important; color: #f04444 !important; font-size: 10px !important; line-height: 14px !important; font-weight: 700 !important; } } @media (min-width: 768px) and (max-width: 1199px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView { --analytics-reference-gap: 12px; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 { padding: 12px 16px 20px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-header-copy, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsRefreshBtn, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsSiteTable, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsFollowupBand, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsRangeQuick [data-range="custom"] { display: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-toolbar { display: flex !important; flex-wrap: wrap !important; gap: var(--analytics-reference-gap) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-toolbar-group--scope { margin-left: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-board, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-board-row--hero, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsAnalysisBoard { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: var(--analytics-reference-gap) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsAnalysisBoard { grid-template-areas: "trend" "pattern" "cause" "people" !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-grid-board { grid-template-columns: 28px repeat(var(--analytics-pattern-columns, 24), 22px) !important; grid-auto-rows: 22px !important; gap: 3px !important; overflow-x: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-cell-board { width: 22px !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; } } @media (max-width: 767px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView { --analytics-reference-gap: 12px; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-v2-header-copy, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsRefreshBtn, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsSiteTable, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsFollowupBand, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsRangeQuick [data-range="custom"] { display: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-board, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-board-row--hero, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsAnalysisBoard { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; gap: var(--analytics-reference-gap) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-grid-board { grid-template-columns: 28px repeat(var(--analytics-pattern-columns, 24), 22px) !important; grid-auto-rows: 22px !important; gap: 3px !important; overflow-x: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-cell-board { width: 22px !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; } } @media (min-width: 1200px) { html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView { --sentrix-dashboard-dark-mode-restoration: 1; --analytics-reference-border: var(--soc-border); --analytics-reference-muted: var(--soc-text-sub); background: var(--soc-bg) !important; color: var(--soc-text) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 { background: var(--soc-bg) !important; color: var(--soc-text) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView :is( .soc-analytics-board-card, #analyticsHeroRiskCard, .soc-analytics-v2-kpi-tile, .soc-analytics-v2-health-item, #analyticsPeopleHotspotList .soc-analytics-hotspot-row ), html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView :is( .soc-analytics-board-card, #analyticsHeroRiskCard, .soc-analytics-v2-kpi-tile, .soc-analytics-v2-health-item, #analyticsPeopleHotspotList .soc-analytics-hotspot-row ) { background: var(--soc-surface) !important; border-color: var(--soc-border) !important; color: var(--soc-text) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView :is( #analyticsRangeQuick button, #analyticsSitePickerButton, #analyticsExportBtn, .soc-analytics-pattern-head-actions button, .soc-analytics-cause-sort-field select, #analyticsLiveActivityBreakdown, .soc-risk-info-trigger, .soc-analytics-hotspot-rank, .soc-analytics-hotspot-score-badge, .soc-analytics-v2-risk-value-wrap .soc-risk-grade, .soc-analytics-risk-sparkline .tooltip rect ), html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView :is( #analyticsRangeQuick button, #analyticsSitePickerButton, #analyticsExportBtn, .soc-analytics-pattern-head-actions button, .soc-analytics-cause-sort-field select, #analyticsLiveActivityBreakdown, .soc-risk-info-trigger, .soc-analytics-hotspot-rank, .soc-analytics-hotspot-score-badge, .soc-analytics-v2-risk-value-wrap .soc-risk-grade, .soc-analytics-risk-sparkline .tooltip rect ) { background: var(--soc-surface-2) !important; border-color: var(--soc-border) !important; color: var(--soc-text) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView :is( .soc-analytics-board-card-head h3, .soc-analytics-v2-toolbar-label, .soc-analytics-v2-risk-value-wrap strong, .soc-analytics-v2-kpi-tile strong, .soc-analytics-v2-health-head strong, .soc-analytics-v2-health-item > strong, #analyticsLiveActivityBreakdown .soc-analytics-live-head span, .soc-analytics-cause-head, .soc-analytics-hotspot-rank ), html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView :is( .soc-analytics-board-card-head h3, .soc-analytics-v2-toolbar-label, .soc-analytics-v2-risk-value-wrap strong, .soc-analytics-v2-kpi-tile strong, .soc-analytics-v2-health-head strong, .soc-analytics-v2-health-item > strong, #analyticsLiveActivityBreakdown .soc-analytics-live-head span, .soc-analytics-cause-head, .soc-analytics-hotspot-rank ) { color: var(--soc-text) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView :is( .soc-analytics-risk-spark-panel, .soc-analytics-risk-spark-axis, .soc-analytics-risk-spark-caption, .soc-analytics-v2-kpi-tile .label, .soc-analytics-v2-kpi-tile .meta, .soc-analytics-v2-health-head .label, .soc-analytics-v2-health-item .label, .soc-analytics-v2-health-item .meta, #analyticsTrendAxis, .soc-analytics-pattern-axis, .soc-analytics-pattern-row-label, .soc-analytics-pattern-legend, .soc-analytics-cause-sort-field ), html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView :is( .soc-analytics-risk-spark-panel, .soc-analytics-risk-spark-axis, .soc-analytics-risk-spark-caption, .soc-analytics-v2-kpi-tile .label, .soc-analytics-v2-kpi-tile .meta, .soc-analytics-v2-health-head .label, .soc-analytics-v2-health-item .label, .soc-analytics-v2-health-item .meta, #analyticsTrendAxis, .soc-analytics-pattern-axis, .soc-analytics-pattern-row-label, .soc-analytics-pattern-legend, .soc-analytics-cause-sort-field ) { color: var(--soc-text-sub) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView :is( .soc-analytics-v2-health-bar, .soc-analytics-v2-risk-gauge-track, .soc-analytics-cause-track ), html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView :is( .soc-analytics-v2-health-bar, .soc-analytics-v2-risk-gauge-track, .soc-analytics-cause-track ) { background: var(--soc-surface-2) !important; stroke: var(--soc-border) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--danger, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--danger { fill: rgba(248, 113, 113, 0.14) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--warning, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--warning { fill: rgba(251, 146, 60, 0.12) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--safe, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--safe { fill: rgba(74, 222, 128, 0.1) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .grid, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .grid { stroke: var(--soc-border) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip text, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip text { fill: var(--soc-text) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip rect, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip rect { fill: var(--soc-surface-2) !important; stroke: var(--soc-border) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-cell-board, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-pattern-cell-board { color: var(--soc-text) !important; } } html body:not(.soc-auth-shell-active) #alertsView#alertsView#alertsView.soc-situation-reference #realtimeSummaryGrid#realtimeSummaryGrid.soc-situation-kpi-grid > .soc-summary-card.soc-situation-kpi-card, html body:not(.soc-auth-shell-active) #homeView#homeView #sentrixHomeDashboardRoot#sentrixHomeDashboardRoot .sentrix-home-kpi-grid > .sentrix-home-kpi-card { --sentrix-ticket-kpi-content-gap: 22px; column-gap: var(--sentrix-ticket-kpi-content-gap) !important; } html body:not(.soc-auth-shell-active) #alertsView#alertsView#alertsView.soc-situation-reference #realtimeSummaryGrid#realtimeSummaryGrid.soc-situation-kpi-grid > .soc-summary-card.soc-situation-kpi-card { grid-template-columns: 64px minmax(0, 1fr) !important; } @media (min-width: 1200px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .label { white-space: nowrap !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-board-row--hero { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-template-columns: minmax(0, 1.48fr) minmax(0, .9fr) minmax(0, 1.08fr) !important; gap: var(--analytics-reference-gap) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-board-row--hero > .soc-analytics-board-card { width: auto !important; max-width: 100% !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack > .soc-analytics-board-card-head { display: flex !important; min-height: 0 !important; height: 44px !important; padding: 14px 16px 8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack > .soc-analytics-board-card-body { min-height: 0 !important; height: calc(100% - 44px) !important; padding: 0 16px 16px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } } @media (max-width: 1199px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--danger { fill: #fff0f1 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--warning { fill: #fff6ea !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--safe { fill: #eef9f1 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .grid { stroke: #e7ebf0 !important; stroke-width: 1 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .grid.threshold { stroke: #ff8b4e !important; stroke-dasharray: 4 4 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .line { fill: none !important; stroke: #ff6418 !important; stroke-width: 2.4 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .dot { fill: #ff6418 !important; stroke: #ffffff !important; stroke-width: 1.5 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .highlight-line { stroke: #ff9b6a !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip rect { fill: #ffffff !important; stroke: #dce3eb !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip text { fill: #4b5565 !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--danger, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--danger { fill: rgba(248, 113, 113, 0.14) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--warning, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--warning { fill: rgba(251, 146, 60, 0.12) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--safe, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .risk-band--safe { fill: rgba(74, 222, 128, 0.1) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .grid, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .grid { stroke: var(--soc-border) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip rect, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip rect { fill: var(--soc-surface-2) !important; stroke: var(--soc-border) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip text, html body.dark:not(.soc-auth-shell-active) #analyticsView#analyticsView .soc-analytics-risk-sparkline .tooltip text { fill: var(--soc-text) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel { min-height: 292px !important; height: 292px !important; max-height: 292px !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-shell { display: grid !important; grid-template-rows: 197px auto !important; flex: 1 1 auto !important; min-height: 0 !important; height: 248px !important; max-height: 248px !important; padding: 0 12px 10px !important; overflow: hidden !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-grid-board { min-height: 0 !important; height: 197px !important; max-height: 197px !important; overflow-x: auto !important; overflow-y: hidden !important; } } html[data-theme] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard #analyticsRiskScoreValue#analyticsRiskScoreValue { font-size: 44px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -0.04em !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard #analyticsRiskGrade#analyticsRiskGrade { min-width: 42px !important; min-height: 24px !important; padding: 3px 12px !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.35 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile { display: grid !important; grid-template-columns: minmax(0, 1fr) var(--soc-dashboard-icon-size) !important; align-items: center !important; gap: 12px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-kpi-copy { display: flex !important; flex-direction: column !important; min-width: 0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile > svg { width: var(--soc-dashboard-icon-size) !important; min-width: var(--soc-dashboard-icon-size) !important; max-width: var(--soc-dashboard-icon-size) !important; height: var(--soc-dashboard-icon-size) !important; min-height: var(--soc-dashboard-icon-size) !important; max-height: var(--soc-dashboard-icon-size) !important; color: var(--analytics-reference-orange) !important; fill: none !important; stroke: currentColor !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile[data-tone="danger"] > svg { color: #f04f5f !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-v2-risk-value-wrap.soc-analytics-v2-risk-value-wrap { gap: 8px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .line.line--safe { stroke: #18a957 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .line.line--caution { stroke: #f59e0b !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .line.line--danger { stroke: #ef4d5d !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .dot.dot--safe { fill: #18a957 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .dot.dot--caution { fill: #f59e0b !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .dot.dot--danger { fill: #ef4d5d !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .line.line--score { stroke: var(--analytics-reference-orange) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .dot.dot--score { fill: var(--analytics-reference-orange) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .tooltip text.tooltip-score { fill: #ff6418 !important; font-weight: 900 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRiskSparkAxis#analyticsRiskSparkAxis { display: grid !important; grid-template-columns: repeat(var(--analytics-risk-axis-columns, 7), minmax(0, 1fr)) !important; column-gap: 4px !important; padding-inline: 2px !important; font-size: 9px !important; letter-spacing: -0.04em !important; font-variant-numeric: tabular-nums !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRiskSparkAxis#analyticsRiskSparkAxis > span { min-width: 0 !important; white-space: nowrap !important; text-align: center !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRiskSparkAxis#analyticsRiskSparkAxis .soc-analytics-risk-axis-compact { display: none !important; } @media (max-width: 1500px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRiskSparkAxis#analyticsRiskSparkAxis .soc-analytics-risk-axis-full { display: none !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRiskSparkAxis#analyticsRiskSparkAxis .soc-analytics-risk-axis-compact { display: inline !important; } } :root { --sentrix-ui-contract-2026-07-11: "SITUATION/TICKETS SCROLL + NOTICES LINEAR NAV FINAL AUTHORITY (2026-07-11)"; } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) main.container.ds-page.admin-layout:has(#alertsView.soc-situation-reference:not(.hidden)), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) main.container.ds-page.admin-layout:has(#ticketsView:not(.hidden)) { overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel:has(#alertsView.soc-situation-reference:not(.hidden)), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #dashboardPanel:has(#ticketsView:not(.hidden)) { height: auto !important; max-height: none !important; min-height: 100% !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView#alertsView.soc-situation-reference:not(.hidden), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #alertsView#alertsView.soc-situation-reference:not(.hidden) .soc-situation-reference-surface, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView#ticketsView:not(.hidden), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView#ticketsView:not(.hidden) .soc-phase1-ticket-surface, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #ticketsView#ticketsView:not(.hidden) .soc-ticket-reference-shell { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } } html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel .workspace-tabbar-row.notices-toolbar-row { padding: 0 0 12px !important; border: 0 !important; border-bottom: 1px solid var(--soc-border, #e2e8f0) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel #noticesCategoryTabs.workspace-tabs { align-self: stretch !important; gap: 24px !important; } html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel #noticesCategoryTabs.workspace-tabs .workspace-tab { min-height: 40px !important; padding: 0 2px 10px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel #noticesCategoryTabs.workspace-tabs .workspace-tab.active { color: var(--soc-text-strong, #111827) !important; border-bottom-color: #ff6418 !important; } html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel #noticesSearchToggleBtn { display: none !important; } html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel #noticesCreateBtn.btn.btn-primary { border-color: #ff6418 !important; background: #ff6418 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel #noticesListPanel.notices-panel { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel .notices-empty-state strong { max-inline-size: 100% !important; text-wrap: balance; } @media (max-width: 767px) { html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel .notices-empty-state strong { font-size: 15px !important; } } :root { --sentrix-pagination-sheets-contract-2026-07-11: "EMPTY SHEETS + 8/15/30 PAGINATION + NOTICE/PEOPLE VISUALS"; --sentrix-people-summary-icon-size: 52px; --sentrix-people-summary-icon-glyph-size: 44px; --sentrix-people-summary-stack-gap: var(--soc-space-2); --sentrix-people-summary-label-height: 18px; --sentrix-people-summary-value-height: 34px; --sentrix-people-summary-stack-height: calc( var(--sentrix-people-summary-icon-size) + var(--sentrix-people-summary-label-height) + var(--sentrix-people-summary-value-height) + var(--sentrix-people-summary-stack-gap) + var(--sentrix-people-summary-stack-gap) ); --sentrix-notices-empty-background: #ffffff; } html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel, html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel #noticesWorkspace, html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel #noticesListPanel, html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel #noticesList, html body:not(.soc-auth-shell-active) #announcementPanel#announcementPanel .notices-empty-state { background: var(--sentrix-notices-empty-background) !important; background-color: var(--sentrix-notices-empty-background) !important; } html body:not(.soc-auth-shell-active) #peopleView#peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon { width: var(--sentrix-people-summary-icon-size) !important; min-width: var(--sentrix-people-summary-icon-size) !important; max-width: var(--sentrix-people-summary-icon-size) !important; height: var(--sentrix-people-summary-icon-size) !important; min-height: var(--sentrix-people-summary-icon-size) !important; max-height: var(--sentrix-people-summary-icon-size) !important; flex: 0 0 var(--sentrix-people-summary-icon-size) !important; } html body:not(.soc-auth-shell-active) #peopleView#peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat-icon svg { width: var(--sentrix-people-summary-icon-glyph-size) !important; min-width: var(--sentrix-people-summary-icon-glyph-size) !important; max-width: var(--sentrix-people-summary-icon-glyph-size) !important; height: var(--sentrix-people-summary-icon-glyph-size) !important; min-height: var(--sentrix-people-summary-icon-glyph-size) !important; max-height: var(--sentrix-people-summary-icon-glyph-size) !important; } html body:not(.soc-auth-shell-active) #peopleView#peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-summary-left { height: var(--sentrix-people-summary-stack-height) !important; min-height: var(--sentrix-people-summary-stack-height) !important; } html body:not(.soc-auth-shell-active) #peopleView#peopleView .soc-people-reference-summary-shell.soc-people-reference-final-row .soc-people-reference-stat { grid-template-rows: var(--sentrix-people-summary-icon-size) var(--sentrix-people-summary-label-height) var(--sentrix-people-summary-value-height) !important; gap: var(--sentrix-people-summary-stack-gap) 0 !important; height: var(--sentrix-people-summary-stack-height) !important; min-height: var(--sentrix-people-summary-stack-height) !important; } html body:not(.soc-auth-shell-active) :is( #situationPagination.soc-situation-pagination, #ticketReferencePagination.soc-ticket-reference-pagination ) { display: flex !important; flex-wrap: wrap !important; visibility: visible !important; } /* Keep the ARLS threshold label readable without isolating a Korean syllable. */ #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-overtime-card .soc-apple-weekly-inline-definition-list div { grid-template-columns: 152px minmax(0, 1fr) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-overtime-card .soc-apple-weekly-inline-definition-list dt { overflow-wrap: normal !important; word-break: keep-all !important; } /* ===== Apple weekly setup mobile evidence/readability authority ===== */ @media (max-width: 767px) { #googleSheetsPanel.soc-apple-weekly-mode { scroll-padding-bottom: calc(240px + env(safe-area-inset-bottom, 0px)) !important; } #googleSheetsPanel.soc-apple-weekly-mode :is( .soc-apple-weekly-flow-shell--override-manager, .soc-apple-weekly-flow-shell--exceptions ) :is( .soc-apple-weekly-stage-surface--setup-home, .soc-apple-weekly-rules-editor, .soc-apple-weekly-workboard ) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--override-manager .soc-apple-weekly-flow-header { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--override-manager .soc-apple-weekly-flow-header h3 { overflow-wrap: normal !important; word-break: keep-all !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--override-manager .soc-apple-weekly-flow-context { justify-self: start !important; } #googleSheetsPanel.soc-apple-weekly-mode :is( .soc-apple-weekly-flow-shell--override-manager, .soc-apple-weekly-flow-shell--exceptions ) .soc-google-sheet-mapping-table-wrap { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-inline: contain; } #googleSheetsPanel.soc-apple-weekly-mode :is( .soc-apple-weekly-flow-shell--override-manager, .soc-apple-weekly-flow-shell--exceptions ) .soc-google-sheet-mapping-table { min-width: 700px !important; } #googleSheetsPanel.soc-apple-weekly-mode [data-apple-weekly-setup-disabled-reason] { overflow-wrap: normal !important; word-break: keep-all !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-warning-inline { padding: 9px 10px !important; border: 1px solid rgba(194, 65, 12, 0.22) !important; border-radius: 10px !important; background: #fff7ed !important; color: #c2410c !important; line-height: 1.5 !important; overflow-wrap: normal !important; word-break: keep-all !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell { padding-bottom: calc(240px + env(safe-area-inset-bottom, 0px)) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-summary-list-grid { grid-template-columns: minmax(0, 1fr) !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-summary-list-grid div, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-summary-list-grid dd, #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-summary-list-grid dd strong { min-width: 0 !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-summary-list-grid div:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(148, 163, 184, 0.14); } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-summary-list-grid div:last-child { border-bottom: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-summary-list-grid dd strong { overflow-wrap: anywhere; word-break: break-word; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"].is-active-scope > .soc-menu-submenu-list { display: grid !important; max-height: 160px !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block.is-exception-list { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; gap: 20px !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block.is-exception-list .soc-apple-weekly-page-title-copy { display: grid !important; gap: 4px !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--exceptions:has(.soc-apple-weekly-exception-list) .soc-apple-weekly-flow-header { display: none !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table td.soc-apple-weekly-empty-state { display: table-cell !important; min-height: 0 !important; padding: 48px 24px !important; text-align: center !important; white-space: normal !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table td.soc-apple-weekly-empty-state .soc-google-sheet-row-sub { display: block; margin-top: 8px; } @media (min-width: 1024px) { html body.soc-desktop-shell:not(.soc-auth-shell-active) #googleSheetsPanel.soc-apple-weekly-mode > .soc-apple-weekly-page-head:has(.soc-apple-weekly-page-title-block.is-exception-list) { width: auto !important; margin: 30px 27px 33px 15px !important; } html body.soc-desktop-shell:not(.soc-auth-shell-active) #googleSheetsPanel.soc-apple-weekly-mode:has(.soc-apple-weekly-exception-list) #appleWeeklyWorkspaceMount { width: auto !important; max-width: none !important; margin-right: 27px !important; margin-left: 15px !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-shell--exceptions .soc-apple-weekly-flow-main:has(.soc-apple-weekly-exception-list) { border: 0 !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-list { gap: 30px !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-create.ds-btn { min-width: 0 !important; height: 44px !important; min-height: 44px !important; margin-top: 5px !important; padding-inline: 16px !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filters { padding: 21px !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filter-field > span:first-child { line-height: 16px !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filter-field { margin: 0 !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table { table-layout: fixed; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table th:nth-child(1) { width: 16%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table th:nth-child(2) { width: 15%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table th:nth-child(3) { width: 13%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table th:nth-child(4) { width: 18%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table th:nth-child(5) { width: 10%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table th:nth-child(6) { width: 18%; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table th:nth-child(7) { width: 10%; } } @media (min-width: 1181px) and (max-width: 1450px) { #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-filters { grid-template-columns: minmax(110px, 0.85fr) minmax(110px, 0.85fr) minmax(260px, 1.4fr) minmax(170px, 1fr) auto; min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table-card { min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-table { min-width: 0; } #googleSheetsPanel.soc-apple-weekly-mode :is( .soc-apple-weekly-exception-table th, .soc-apple-weekly-exception-table td ) { overflow: hidden; padding-inline: 14px; text-overflow: ellipsis; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-row-actions button { padding-inline: 5px; } #googleSheetsPanel.soc-apple-weekly-mode :is( .soc-apple-weekly-exception-table th:last-child, .soc-apple-weekly-exception-table td:last-child ) { padding-inline: 6px; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-exception-date-range input { padding-inline: 8px; font-size: 12.5px; } } @media (max-width: 767px) { #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block.is-exception-list { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block.is-exception-list .soc-apple-weekly-exception-create { width: 100%; } } .soc-profile-page-header{display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:20px !important;position:relative !important;z-index:25 !important} .soc-profile-scope-shell{position:relative !important;width:min(300px,100%) !important} .soc-profile-scope-trigger{width:100% !important;display:flex !important;align-items:center !important;gap:12px !important;min-height:66px !important;padding:10px 14px !important;border:1px solid var(--soc-border) !important;border-radius:16px !important;background:#fff !important;text-align:left !important;box-shadow:0 8px 24px rgba(16,36,64,.06) !important} .soc-profile-scope-popover{position:absolute !important;top:calc(100% + 10px) !important;right:0 !important;width:min(370px,calc(100vw - 32px)) !important;padding:22px 22px 0 !important;border:1px solid var(--soc-border) !important;border-radius:22px !important;background:#fff !important;box-shadow:0 18px 46px rgba(16,36,64,.16) !important;z-index:40 !important} .soc-profile-scope-popover .soc-master-query-scope{display:block !important;margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important} .soc-profile-top-shell{display:grid !important;grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr) !important;gap:16px !important;padding:20px 22px !important;border:0 !important;background:transparent !important;overflow:visible !important} .soc-profile-account-strip{display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:22px !important;padding:20px 22px !important;border:1px solid var(--soc-border) !important;border-radius:14px !important;background:#fff !important;box-shadow:0 8px 24px rgba(16,36,64,.04) !important} .soc-profile-account-strip .soc-profile-hero-avatar{width:120px !important;height:120px !important;flex:0 0 120px !important} .soc-profile-identity-facts{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px !important;margin-top:10px !important;padding-top:12px !important;border-top:1px solid #edf0f5 !important} .soc-profile-security-card,.soc-profile-kpi-card,.soc-profile-activity-card,.soc-profile-operations-card{border:1px solid var(--soc-border) !important;border-radius:14px !important;background:#fff !important;box-shadow:0 8px 24px rgba(16,36,64,.04) !important} .soc-profile-kpi-shell{padding:0 22px !important}.soc-profile-kpi-shell .soc-profile-counter-row{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px !important} .soc-profile-kpi-card{min-height:120px !important;display:flex !important;align-items:center !important;gap:14px !important;padding:18px 20px !important} .soc-profile-main-grid{display:grid !important;grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr) !important;gap:16px !important;padding:0 22px !important} .soc-profile-activity-card,.soc-profile-operations-card{min-width:0 !important;padding:20px 22px !important} .soc-profile-legacy-data{display:none !important} @media (max-width:1100px){.soc-profile-top-shell,.soc-profile-main-grid{grid-template-columns:1fr !important}.soc-profile-scope-shell{width:min(270px,100%) !important}} @media (max-width:760px){.soc-profile-page-header{display:grid !important}.soc-profile-scope-shell{width:100% !important}.soc-profile-account-strip{align-items:flex-start !important;flex-direction:column !important}.soc-profile-identity-facts,.soc-profile-kpi-shell .soc-profile-counter-row{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.soc-profile-main-grid{padding-inline:0 !important}.soc-profile-kpi-shell,.soc-profile-top-shell{padding-inline:0 !important}} @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList .mobile-nav-actions { position: static !important; display: flex !important; flex: none !important; grid-column: 1 / -1 !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 12px 0 0 !important; padding: 14px 0 16px !important; border-top: 1px solid #e3e8f0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileAdminShortcutList .mobile-nav-actions .mobile-nav-action-btn--plain.soc-menu-item { display: flex !important; width: auto !important; min-width: 0 !important; min-height: 36px !important; height: 36px !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 8px !important; color: #697286 !important; text-align: center !important; font-weight: 600 !important; } } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions { position: sticky !important; bottom: 0 !important; display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; gap: 0 !important; margin: 0 !important; padding: 6px 0 8px !important; border-top: 1px solid var(--soc-border, #e3e8f0) !important; background: var(--soc-nav-sheet-bg, #fff) !important; z-index: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions .mobile-nav-actions-divider { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel #mobileMenuRootPage > .mobile-nav-actions .mobile-nav-action-btn--plain.soc-menu-item { display: flex !important; width: auto !important; min-width: 0 !important; min-height: 24px !important; height: 24px !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 2px 8px !important; color: var(--soc-text-secondary, #697286) !important; text-align: center !important; font-weight: 600 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"].is-active-scope > .soc-menu-sub-item.is-active { background: transparent !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested { position: relative !important; width: auto !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; margin: 0 12px 0 28px !important; padding: 0 14px 0 22px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"].is-active-scope > .soc-menu-sub-item.is-active::before, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested.is-active::before, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested::before { display: none !important; content: none !important; box-shadow: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #menuSheetPanel [data-menu-submenu-wrap="apple-weekly"] > .soc-menu-submenu-list > .soc-menu-sub-item--nested.is-active { background: var(--sx-orange-bg, #fff2eb) !important; box-shadow: none !important; } } .soc-new-state-badge { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 28px !important; height: 16px !important; padding: 0 5px !important; border: 0 !important; border-radius: 4px !important; background: var(--sx-orange, var(--soc-primary, #ff4b16)) !important; color: var(--soc-on-primary, #fff) !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -0.02em !important; white-space: nowrap !important; } .soc-new-state-badge.is-critical { background: var(--sx-red, var(--soc-danger, #ff1f1f)) !important; color: var(--soc-on-danger, #fff) !important; } html body:not(.soc-auth-shell-active) #alertsView .soc-new-state-badge, html body:not(.soc-auth-shell-active) #ticketsView .soc-new-state-badge { font-size: 9px !important; } :is( #alertsView .incident-title, #ticketsView .ticket-title, #ticketsView .soc-ticket-reference-cell--title ):has(> .soc-new-state-badge) { display: flex !important; min-width: 0 !important; align-items: center !important; gap: 6px !important; } #alertsView .incident-title:has(> .soc-new-state-badge) > :is(.incident-title-tag, .incident-title-text), #ticketsView .soc-ticket-reference-cell--title:has(> .soc-new-state-badge) > :is(.soc-ticket-reference-title-no, .soc-ticket-reference-title-text) { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #alertsView .incident-title:has(> .soc-new-state-badge) > .incident-title-tag, #ticketsView .soc-ticket-reference-cell--title:has(> .soc-new-state-badge) > .soc-ticket-reference-title-no { flex: 0 0 auto !important; } html body:not(.soc-auth-shell-active) :is(#alertsView, #ticketsView) .is-new-entity { animation: sentrixRealtimeListItemEnter 280ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes sentrixRealtimeListItemEnter { from { opacity: 0.35; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { html body:not(.soc-auth-shell-active) :is(#alertsView, #ticketsView) .is-new-entity { animation: none !important; } } html body:not(.soc-auth-shell-active) #alertsView .is-new-entity:not(.is-critical-incident):not(.is-important), html body:not(.soc-auth-shell-active) #ticketsView .is-new-entity:not(.is-important) { background: #fff8ef !important; border-color: #f4d9bd !important; } html body:not(.soc-auth-shell-active) #alertsView .incident-card.is-critical-incident { background: var(--sx-red-bg, #fff1f3) !important; } html body:not(.soc-auth-shell-active) #alertsView .incident-card.is-critical-incident:is(:hover, .is-selected) { background: var(--sx-red-bg-hover, #ffecef) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-new-entity:not(.is-important), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-new-entity.is-selected:not(.is-important) { background: #fff8ef !important; border-color: #f4d9bd !important; } html body:not(.soc-auth-shell-active) #alertsView .is-new-entity:not(.is-critical-incident):not(.is-important):is(:hover, .is-selected), html body:not(.soc-auth-shell-active) #ticketsView .is-new-entity:not(.is-important):is(:hover, .is-selected) { background: #fff5e8 !important; } html body:not(.soc-auth-shell-active) #alertsView .is-new-entity:is(.is-critical-incident, .is-important), html body:not(.soc-auth-shell-active) #ticketsView .is-new-entity.is-important { background: var(--sx-red-bg, #fff1f3) !important; border-color: #f7c9ce !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-new-entity.is-important, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-new-entity.is-important.is-selected { background: var(--sx-red-bg, #fff1f3) !important; border-color: #f7c9ce !important; } html body:not(.soc-auth-shell-active) #alertsView .is-new-entity:is(.is-critical-incident, .is-important):is(:hover, .is-selected), html body:not(.soc-auth-shell-active) #ticketsView .is-new-entity.is-important:is(:hover, .is-selected) { background: var(--sx-red-bg-hover, #ffecef) !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row.is-selected:not(.is-new-entity):not(.is-critical-incident):not(.is-important), html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-selected:not(.is-new-entity):not(.is-important) { background: #fff !important; } html body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row.is-critical-incident.is-selected { background: var(--sx-red-bg-hover, #ffecef) !important; } html body:not(.soc-auth-shell-active) :is(#alertsView, #ticketsView) .is-new-entity .soc-new-report-time[data-new-tone="orange"] { color: var(--sx-orange, var(--soc-primary, #ff4b16)) !important; font-weight: 900 !important; } html body:not(.soc-auth-shell-active) :is(#alertsView, #ticketsView) .is-new-entity .soc-new-report-time[data-new-tone="critical"] { color: var(--sx-red, var(--soc-danger, #ff1f1f)) !important; font-weight: 900 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-new-entity .soc-new-report-time[data-new-tone="orange"] { color: var(--sx-orange, var(--soc-primary, #ff4b16)) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-new-entity .soc-new-report-time[data-new-tone="critical"] { color: var(--sx-red, var(--soc-danger, #ff1f1f)) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #alertsView .is-new-entity:not(.is-critical-incident):not(.is-important), html[data-theme="dark"] body:not(.soc-auth-shell-active) #ticketsView .is-new-entity:not(.is-important) { background: var(--soc-table-row-selected) !important; border-color: var(--soc-table-border) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active) #alertsView .is-new-entity:is(.is-critical-incident, .is-important), html[data-theme="dark"] body:not(.soc-auth-shell-active) #ticketsView .is-new-entity.is-important { background: var(--soc-table-row-important) !important; border-color: var(--soc-status-danger-border) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row.is-selected:not(.is-new-entity):not(.is-critical-incident):not(.is-important), html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active):has(#ticketsView:not(.hidden)) #ticketsView .soc-ticket-reference-row.is-selected:not(.is-new-entity):not(.is-important) { background: var(--soc-table-row-bg) !important; } html[data-theme="dark"] body:not(.soc-auth-shell-active):has(#alertsView.soc-situation-reference:not(.hidden)) #alertsView.soc-situation-reference .soc-situation-row.is-critical-incident.is-selected { background: var(--soc-table-row-important) !important; } #analyticsView .sentrix-home-inline-empty { width: 100% !important; min-width: 0 !important; min-height: 100% !important; box-sizing: border-box !important; } #analyticsView #analyticsPatternPanel.is-empty-state #analyticsPatternBoard { display: grid !important; place-items: center !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } #analyticsView #analyticsPatternPanel.is-empty-state #analyticsPatternBoard > .sentrix-home-inline-empty { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; min-height: 0 !important; text-align: center !important; } #analyticsView :is(#analyticsCauseBars, #analyticsPeopleHotspotList) > .sentrix-home-inline-empty { height: 100% !important; min-height: 0 !important; max-height: 100% !important; padding: var(--ui-space-8) var(--ui-space-12) !important; gap: var(--ui-space-4) !important; } #analyticsView #analyticsPatternPanel.is-empty-state .soc-analytics-pattern-footer { display: none !important; } #analyticsView .soc-analytics-trend-empty { width: 100%; height: 100%; grid-row: 1; } #analyticsView .soc-analytics-trend-empty > .sentrix-home-inline-empty { height: 100% !important; min-height: 0 !important; padding: var(--ui-space-16) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsTrendPanel#analyticsTrendPanel :is(#analyticsTrendChart#analyticsTrendChart, #analyticsTrendAxis#analyticsTrendAxis).is-empty-hidden { display: none !important; } #analyticsView .soc-analytics-site-list-empty { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #analyticsView .soc-analytics-site-list-empty > .sentrix-home-inline-empty { min-height: 100% !important; padding: var(--ui-space-16) !important; } #analyticsView .soc-analytics-v2-export-icon { display: block !important; width: var(--ui-space-16) !important; height: var(--ui-space-16) !important; flex: 0 0 var(--ui-space-16) !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } @media (min-width: 1024px) and (max-width: 1440px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-grid-board { grid-template-columns: var(--ui-space-40) repeat(var(--analytics-pattern-columns, 24), minmax(0, 1fr)) !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; scrollbar-gutter: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-cell-board { width: 100% !important; min-width: 0 !important; } } @media (min-width: 768px) { html body:not(.soc-auth-shell-active):has(#analyticsView.is-active) #myProfileScopeShell.soc-global-scope-overlay { right: var(--ui-space-8) !important; bottom: var(--ui-space-12) !important; width: calc(var(--ui-space-24) * 2) !important; } html body:not(.soc-auth-shell-active):has(#analyticsView.is-active) #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-trigger { justify-content: center !important; width: calc(var(--ui-space-24) * 2) !important; height: calc(var(--ui-space-24) * 2) !important; min-height: calc(var(--ui-space-24) * 2) !important; padding: 0 !important; border-radius: var(--ui-radius-pill) !important; } html body:not(.soc-auth-shell-active):has(#analyticsView.is-active) #myProfileScopeShell.soc-global-scope-overlay :is(.soc-profile-scope-trigger-copy, .soc-profile-scope-chevron) { display: none !important; } } @media (max-width: 767px) { html body:not(.soc-auth-shell-active):has(#analyticsView.is-active) #myProfileScopeShell.soc-global-scope-overlay { position: relative !important; inset: auto !important; width: calc(100% - (var(--ui-space-16) * 2)) !important; margin: var(--ui-space-12) var(--ui-space-16) calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + var(--ui-space-16)) !important; } html body:not(.soc-auth-shell-active):has(#analyticsView.is-active) #myProfileScopeShell.soc-global-scope-overlay .soc-profile-scope-popover { right: 0 !important; bottom: calc(100% + var(--ui-space-12)) !important; } } html body:not(.soc-auth-shell-active) #alertsView#alertsView.soc-situation-reference .soc-situation-filter-card, html body:not(.soc-auth-shell-active) #ticketsView#ticketsView #ticketReferenceFilterBar#ticketReferenceFilterBar.soc-ticket-reference-filterbar { border-radius: var(--soc-content-panel-radius) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel.is-empty-state #analyticsPatternBoard#analyticsPatternBoard.soc-analytics-pattern-grid-board { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: minmax(0, 1fr) !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; place-items: center !important; align-content: center !important; justify-content: center !important; gap: 0 !important; overflow: hidden !important; scrollbar-gutter: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsPatternPanel#analyticsPatternPanel.is-empty-state #analyticsPatternBoard#analyticsPatternBoard.soc-analytics-pattern-grid-board > .sentrix-home-inline-empty { grid-column: 1 !important; grid-row: 1 !important; place-self: stretch !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; text-align: center !important; } @media (min-width: 1024px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-table-header > span:nth-child(2), html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #alertsView.soc-situation-reference .soc-situation-row > .incident-location, html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-table-header > span:nth-child(2), html body:is(.soc-desktop-shell, .soc-desktop-adaptive, .soc-vp-desktop, .soc-vp-desktop-xl):not(.soc-auth-shell-active) #ticketsView .soc-ticket-reference-row > .soc-ticket-reference-cell--site { display: flex !important; align-items: center !important; justify-content: center !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-align: center !important; } } html body:not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel:not(.hidden) .ops-ref-filter-button { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding-inline: 12px !important; text-align: left !important; } html body:not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel:not(.hidden) .ops-ref-filter-button > span:first-child { flex: 1 1 auto !important; min-width: 0 !important; text-align: left !important; } html body:not(.soc-auth-shell-active) #opsSupportPanel#opsSupportPanel:not(.hidden) .ops-ref-filter-button > span:last-child { flex: 0 0 auto !important; margin-left: auto !important; text-align: center !important; } @media (max-width: 1023px) { html body:not(.soc-auth-shell-active) { --sentrix-shell-topbar-h: 56px !important; --sentrix-arls-topbar-h: 56px !important; --soc-topbar-height: 56px !important; } html body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar { display: grid !important; grid-template-columns: 110px minmax(0, 1fr) 44px !important; grid-template-rows: 44px !important; align-items: center !important; gap: 6px !important; width: 100% !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; padding: 6px 10px !important; overflow: visible !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar > .topbar-left { grid-column: 1 !important; display: flex !important; align-items: center !important; width: 110px !important; min-width: 110px !important; max-width: 110px !important; height: 44px !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-heading, html body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-link { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: 110px !important; min-width: 110px !important; max-width: 110px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-heading::after { content: none !important; display: none !important; } html body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-brand-wordmark { display: block !important; width: 100px !important; min-width: 100px !important; max-width: 100px !important; height: auto !important; max-height: 20px !important; object-fit: contain !important; } html body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar > .topbar-global-search { grid-column: 2 !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 12px !important; } html body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-global-search-placeholder { min-width: 0 !important; overflow: hidden !important; font-size: 12px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar > .topbar-right { grid-column: 3 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar .topbar-date-status { display: none !important; } html body:not(.soc-auth-shell-active) .soc-app-shell > header.topbar #topbarNotificationsBtn.topbar-btn:not(.hidden) { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } } @media (max-width: 767px) { html body:not(.soc-auth-shell-active) #ticketsView#ticketsView#ticketsView .soc-ticket-reference-hidden-controls { display: none !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView#ticketsView #ticketSummaryGrid#ticketSummaryGrid#ticketSummaryGrid.soc-ticket-reference-summary-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-flow: row !important; grid-auto-rows: minmax(96px, auto) !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 16px !important; gap: 10px !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView#ticketsView #ticketSummaryGrid#ticketSummaryGrid#ticketSummaryGrid.soc-ticket-reference-summary-grid > .soc-ticket-reference-summary-card { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; align-items: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 96px !important; margin: 0 !important; padding: 12px 10px !important; gap: 10px !important; overflow: hidden !important; box-sizing: border-box !important; text-align: left !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView#ticketsView #ticketSummaryGrid#ticketSummaryGrid#ticketSummaryGrid .soc-ticket-reference-summary-icon { display: grid !important; place-items: center !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; margin: 0 !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView#ticketsView #ticketSummaryGrid#ticketSummaryGrid#ticketSummaryGrid .soc-ticket-reference-summary-icon > svg { width: 24px !important; min-width: 24px !important; max-width: 24px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; fill: none !important; stroke: currentColor !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView#ticketsView #ticketSummaryGrid#ticketSummaryGrid#ticketSummaryGrid .soc-ticket-reference-summary-copy { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; min-width: 0 !important; margin: 0 !important; gap: 4px !important; text-align: left !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView#ticketsView #ticketSummaryGrid#ticketSummaryGrid#ticketSummaryGrid .soc-ticket-reference-summary-label { width: 100% !important; overflow-wrap: anywhere !important; word-break: keep-all !important; text-align: left !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView#ticketsView #ticketReferenceFilterBar#ticketReferenceFilterBar#ticketReferenceFilterBar.soc-ticket-reference-filterbar { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; grid-auto-flow: row !important; grid-auto-rows: auto !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 16px !important; gap: 12px !important; overflow: visible !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView#ticketsView #ticketReferenceFilterBar#ticketReferenceFilterBar#ticketReferenceFilterBar .soc-ticket-reference-search { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important; align-items: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 12px !important; gap: 8px !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView .soc-ticket-reference-search > span { position: static !important; display: grid !important; place-items: center !important; width: 20px !important; min-width: 20px !important; max-width: 20px !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; margin: 0 !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView .soc-ticket-reference-search > span > svg { display: block !important; width: 20px !important; min-width: 20px !important; max-width: 20px !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2px !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #ticketsView#ticketsView .soc-ticket-reference-search > span > svg * { fill: none !important; stroke: inherit !important; } } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-spark-panel { grid-template-rows: minmax(0, 1fr) auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-sparkline { height: 158px !important; } .soc-analytics-risk-sparkline .axis { stroke: #43516a; stroke-width: 1.6; } .soc-analytics-risk-sparkline .axis-label { fill: #526078; font-size: 13px; font-weight: 700; } .soc-analytics-risk-sparkline .x-tick-label, .soc-analytics-risk-sparkline .y-tick-label { fill: #647087; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; } .soc-analytics-risk-sparkline .axis-tick { stroke: #43516a; stroke-width: 1.2; } .soc-analytics-risk-sparkline marker path { fill: #43516a; } .soc-analytics-risk-sparkline .empty-label { fill: #8792a6; font-size: 13px; font-weight: 650; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .grid.threshold.threshold--safe { stroke: #24a84f !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .grid.threshold.threshold--caution { stroke: #f57c19 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .line { stroke-width: 3 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-risk-sparkline .dot { stroke-width: 2 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsRiskSparkAxis#analyticsRiskSparkAxis { display: none !important; } @media screen and (min-width: 1024px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRow#analyticsHeroRow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard { grid-column: 1 / -1 !important; height: 340px !important; min-height: 340px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard { height: 252px !important; min-height: 252px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-board-card-head { padding: 20px 28px 8px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-board-card-body--risk { height: calc(100% - 52px) !important; padding: 0 28px 22px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-hero-core { grid-template-columns: 220px minmax(0, 1fr) !important; gap: 32px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-wrap, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-v2-risk-gauge { width: 204px !important; height: 204px !important; min-width: 204px !important; min-height: 204px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-spark-panel { height: 250px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-sparkline { height: 220px !important; } } @media (min-width: 1200px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRow#analyticsHeroRow { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack { grid-column: span 8 !important; height: var(--soc-dashboard-summary-height) !important; min-height: var(--soc-dashboard-summary-height) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard { grid-column: span 4 !important; height: var(--soc-dashboard-summary-height) !important; min-height: var(--soc-dashboard-summary-height) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard { grid-column: 1 / -1 !important; grid-template-columns: minmax(360px, var(--soc-dashboard-risk-score-column)) minmax(0, var(--soc-dashboard-risk-trend-column)) !important; height: var(--soc-dashboard-risk-height) !important; min-height: var(--soc-dashboard-risk-height) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-score-pane, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-trend-pane { height: var(--soc-dashboard-risk-height) !important; min-height: var(--soc-dashboard-risk-height) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-wrap, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-v2-risk-gauge { width: var(--soc-dashboard-risk-gauge-size) !important; height: var(--soc-dashboard-risk-gauge-size) !important; min-width: var(--soc-dashboard-risk-gauge-size) !important; min-height: var(--soc-dashboard-risk-gauge-size) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-spark-panel { height: var(--soc-dashboard-risk-plot-height) !important; min-height: var(--soc-dashboard-risk-plot-height) !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-sparkline { height: calc(var(--soc-dashboard-risk-plot-height) - 26px) !important; min-height: calc(var(--soc-dashboard-risk-plot-height) - 26px) !important; } } @media (min-width: 1200px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView { width: calc(100% + 81px) !important; max-width: none !important; margin-left: -54px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 { width: 100% !important; max-width: none !important; margin-left: 0 !important; padding: 16px 16px 20px !important; gap: var(--soc-dashboard-gap) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-v2-toolbar.soc-analytics-v2-toolbar { height: var(--soc-dashboard-toolbar-height) !important; min-height: var(--soc-dashboard-toolbar-height) !important; max-height: var(--soc-dashboard-toolbar-height) !important; align-items: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-v2-toolbar-group--scope { margin-left: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-v2-toolbar-group--actions { margin-left: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRow#analyticsHeroRow { grid-template-columns: minmax(0, 68fr) minmax(0, 32fr) !important; gap: var(--soc-dashboard-gap) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack { grid-column: 1 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard { grid-column: 2 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack > .soc-analytics-board-card-body { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-rack { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; gap: var(--soc-dashboard-gap) !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: minmax(0, 1fr) !important; grid-auto-rows: minmax(0, 1fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard > .soc-analytics-board-card-body--health { box-sizing: border-box !important; height: 100% !important; min-height: 0 !important; padding: 14px 16px 12px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile { display: grid !important; height: 100% !important; min-height: 0 !important; grid-template-columns: minmax(0, 1fr) var(--soc-dashboard-icon-size) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "copy icon" !important; align-content: stretch !important; align-items: center !important; justify-items: stretch !important; gap: 12px !important; padding: 18px 12px 18px 16px !important; text-align: left !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile > .soc-analytics-kpi-copy { grid-area: copy !important; align-items: flex-start !important; justify-content: center !important; text-align: left !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroKpiRack#analyticsHeroKpiRack .soc-analytics-v2-kpi-tile > svg { grid-area: icon !important; justify-self: end !important; align-self: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-panel { grid-template-rows: 67px 7px 48px !important; gap: 9px !important; height: 140px !important; min-height: 140px !important; align-content: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-legend { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; align-self: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-item { grid-template-columns: 7px minmax(0, 1fr) !important; grid-template-rows: 16px 24px !important; gap: 2px 6px !important; min-height: 0 !important; height: 48px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-item > strong { grid-column: 2 !important; align-self: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-score-pane { display: grid !important; grid-template-rows: 44px minmax(0, 1fr) !important; padding: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-score-pane > .soc-analytics-board-card-head { height: 44px !important; min-height: 44px !important; padding: 14px 16px 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-score-pane > .soc-analytics-board-card-body--risk { height: auto !important; min-height: 0 !important; padding: 0 16px 14px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-score-content { grid-template-columns: 238px minmax(0, 1fr) !important; align-items: center !important; gap: 20px !important; width: 100% !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-wrap { justify-self: center !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria { display: grid !important; grid-template-rows: 24px 40px 102px !important; align-self: stretch !important; align-content: center !important; height: auto !important; min-height: 0 !important; padding: 0 0 0 20px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria > p { display: flex !important; align-items: center !important; margin: 0 !important; line-height: 1.4 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria-list { display: grid !important; grid-template-rows: repeat(3, 34px) !important; min-height: 102px !important; height: 102px !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria-item { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; min-height: 34px !important; height: 34px !important; padding: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria-item :is(dt, dd) { margin: 0 !important; white-space: nowrap !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-trend-pane { display: grid !important; grid-template-rows: 44px minmax(0, 1fr) !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-trend-head { height: 44px !important; min-height: 44px !important; padding: 14px 16px 8px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-spark-panel { display: grid !important; grid-template-rows: 148px 0 14px !important; align-content: start !important; height: auto !important; min-height: 0 !important; padding: 0 16px 10px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-sparkline { width: 100% !important; height: 148px !important; min-height: 148px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard #analyticsRiskSparkAxis { display: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-spark-caption { align-self: start !important; margin-top: 2px !important; } } @media (min-width: 1200px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-analytics-board, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsAnalysisBoard#analyticsAnalysisBoard { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard { grid-template-columns: minmax(360px, var(--soc-dashboard-risk-score-column)) minmax(0, var(--soc-dashboard-risk-trend-column)) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-score-content { grid-template-columns: var(--soc-dashboard-risk-gauge-size) minmax(0, 1fr) !important; gap: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-spark-panel { grid-template-rows: minmax(0, 1fr) auto auto !important; min-width: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-analytics-risk-sparkline { max-width: 100% !important; height: calc(var(--soc-dashboard-risk-plot-height) - 26px) !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard #analyticsRiskSparkAxis#analyticsRiskSparkAxis { display: flex !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsAnalysisBoard#analyticsAnalysisBoard { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; grid-template-areas: "trend pattern" "cause people" !important; gap: var(--soc-dashboard-gap) !important; align-items: stretch !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 :is(#analyticsTrendPanel#analyticsTrendPanel, #analyticsPatternPanel#analyticsPatternPanel) { height: calc(var(--soc-dashboard-analysis-height) + 20px) !important; min-height: calc(var(--soc-dashboard-analysis-height) + 20px) !important; display: grid !important; grid-template-rows: 44px minmax(0, 1fr) !important; min-width: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 :is(#analyticsCausePanel#analyticsCausePanel, #analyticsPeoplePanel#analyticsPeoplePanel) { height: calc(var(--soc-dashboard-compact-height) + 96px) !important; min-height: calc(var(--soc-dashboard-compact-height) + 96px) !important; display: grid !important; grid-template-rows: 44px minmax(0, 1fr) !important; min-width: 0 !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel .soc-analytics-chart-shell { min-width: 0 !important; overflow: hidden !important; padding: 0 14px 4px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel .soc-analytics-line-chart { max-width: 100% !important; height: 150px !important; min-height: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsLiveActivityBreakdown#analyticsLiveActivityBreakdown { min-width: 0 !important; margin: 0 14px 12px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-shell { min-width: 0 !important; padding: 0 14px 10px !important; overflow: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-grid-board { grid-template-columns: minmax(28px, 32px) repeat(var(--analytics-pattern-columns, 24), minmax(0, 1fr)) !important; grid-auto-rows: minmax(18px, 1fr) !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: stretch !important; overflow-x: hidden !important; overflow-y: hidden !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-cell-board { width: 100% !important; min-width: 0 !important; min-height: 18px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-shell, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel .soc-analytics-hotspot-shell { min-height: 0 !important; padding: 0 14px 14px !important; overflow-x: hidden !important; overflow-y: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-list { max-height: none !important; min-height: 0 !important; gap: 8px !important; overflow-x: hidden !important; overflow-y: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-row { min-height: 31px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeopleHotspotList#analyticsPeopleHotspotList .soc-analytics-hotspot-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; height: auto !important; min-height: 0 !important; align-content: start !important; gap: 8px !important; overflow-x: hidden !important; overflow-y: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeopleHotspotList#analyticsPeopleHotspotList .soc-analytics-hotspot-row { height: auto !important; min-height: 88px !important; padding: 10px 12px !important; } } @media (min-width: 1200px) and (max-width: 1439px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard { grid-template-columns: minmax(420px, 42fr) minmax(0, 58fr) !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsAnalysisBoard#analyticsAnalysisBoard { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "trend" "pattern" "cause" "people" !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 :is(#analyticsTrendPanel#analyticsTrendPanel, #analyticsPatternPanel#analyticsPatternPanel, #analyticsCausePanel#analyticsCausePanel, #analyticsPeoplePanel#analyticsPeoplePanel) { grid-column: 1 / -1 !important; } } @media (min-width: 1440px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel { grid-area: trend !important; grid-column: auto !important; grid-row: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel { grid-area: pattern !important; grid-column: auto !important; grid-row: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel { grid-area: cause !important; grid-column: auto !important; grid-row: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel { grid-area: people !important; grid-column: auto !important; grid-row: auto !important; } } @media (max-width: 767px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView { width: 100% !important; min-width: 0 !important; max-width: 100vw !important; overflow-x: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 { width: 100% !important; min-width: 0 !important; max-width: 100vw !important; grid-template-columns: minmax(0, 1fr) !important; padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box !important; overflow-x: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsAnalysisBoard#analyticsAnalysisBoard { width: 100% !important; min-width: 0 !important; max-width: 100% !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "trend" "pattern" "cause" "people" !important; overflow-x: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel { width: 100% !important; min-width: 0 !important; max-width: 100% !important; grid-column: 1 / -1 !important; grid-row: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel { grid-area: trend !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel { grid-area: pattern !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel { grid-area: cause !important; height: 306px !important; min-height: 306px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel { grid-area: people !important; height: 430px !important; min-height: 430px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-shell { width: 100% !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-grid-board { grid-template-columns: minmax(40px, 40px) repeat(var(--analytics-pattern-columns, 24), 44px) !important; width: max-content !important; min-width: calc(40px + (24 * 44px)) !important; max-width: none !important; overflow-x: visible !important; overflow-y: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-cell-board { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-shell, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-list, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel#analyticsPeoplePanel .soc-analytics-hotspot-shell, html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeopleHotspotList#analyticsPeopleHotspotList .soc-analytics-hotspot-list { min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-list { max-height: 236px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-row { min-height: 38px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeopleHotspotList#analyticsPeopleHotspotList .soc-analytics-hotspot-list { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; max-height: 356px !important; align-content: start !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeopleHotspotList#analyticsPeopleHotspotList .soc-analytics-hotspot-row { height: auto !important; min-height: 112px !important; background: var(--soc-surface) !important; } } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel.is-empty-state #analyticsPatternBoard#analyticsPatternBoard.soc-analytics-pattern-grid-board { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: minmax(0, 1fr) !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; place-items: center !important; align-content: center !important; justify-content: center !important; overflow: hidden !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel.is-empty-state #analyticsPatternBoard#analyticsPatternBoard.soc-analytics-pattern-grid-board > .sentrix-home-inline-empty { grid-column: 1 / -1 !important; grid-row: 1 !important; place-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-list { display: grid !important; grid-template-rows: none !important; grid-auto-rows: 38px !important; align-content: start !important; gap: 0 !important; height: 190px !important; min-height: 190px !important; max-height: 190px !important; overflow-x: hidden !important; overflow-y: auto !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-row { height: 38px !important; min-height: 38px !important; max-height: 38px !important; box-sizing: border-box !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeopleHotspotList#analyticsPeopleHotspotList .soc-analytics-hotspot-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 172px !important; align-content: start !important; height: 356px !important; min-height: 356px !important; max-height: 356px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeopleHotspotList#analyticsPeopleHotspotList .soc-analytics-hotspot-row { height: 172px !important; min-height: 172px !important; max-height: 172px !important; box-sizing: border-box !important; } @media(max-width:767px) { html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-list { display: grid !important; grid-template-rows: none !important; grid-auto-rows: 38px !important; align-content: start !important; gap: 0 !important; height: 190px !important; min-height: 190px !important; max-height: 190px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsCausePanel#analyticsCausePanel .soc-analytics-cause-row { height: 38px !important; min-height: 38px !important; max-height: 38px !important; box-sizing: border-box !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeopleHotspotList#analyticsPeopleHotspotList .soc-analytics-hotspot-list { grid-auto-rows: 112px !important; height: 356px !important; min-height: 356px !important; max-height: 356px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain !important; } } @media (min-width: 1200px) { html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-panel { grid-template-rows: 64px 7px 49px !important; gap: 8px !important; height: 140px !important; min-height: 140px !important; overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-head, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-legend, html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-item { overflow: visible !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-head > div { grid-template-rows: 24px 32px !important; gap: 4px !important; height: 60px !important; max-height: 60px !important; align-content: start !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-item { grid-template-columns: 7px minmax(0, 1fr) !important; grid-template-rows: 18px 28px !important; gap: 2px 6px !important; height: 48px !important; min-height: 48px !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-item-copy { grid-column: 2 !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroHealthCard#analyticsHeroHealthCard .soc-analytics-v2-health-item > strong { grid-column: 2 !important; min-width: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria-item { position: static !important; grid-template-columns: 4px minmax(0, 1fr) auto !important; column-gap: 12px !important; padding-left: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria-item::before { position: static !important; grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; align-self: center !important; width: 4px !important; height: 14px !important; border-radius: 999px !important; content: "" !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria-item > dt { grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; margin: 0 !important; padding: 0 !important; transform: none !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria-item > dd { grid-column: 3 !important; grid-row: 1 !important; margin: 0 !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria-item[data-tone="danger"]::before { background: #ff4d5e !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria-item[data-tone="caution"]::before { background: #ff7a1a !important; } html body:is(.soc-desktop-shell, .soc-desktop-adaptive):not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsHeroRiskCard#analyticsHeroRiskCard .soc-dashboard-risk-criteria-item[data-tone="safe"]::before { background: #23ad55 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-dashboard-risk-legend > span { display: inline-flex !important; align-items: center !important; gap: 8px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-dashboard-risk-legend > span::before { display: inline-block !important; width: 22px !important; border-top: 2px solid currentColor !important; content: "" !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-dashboard-risk-legend > .score { color: #ff6b1a !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-dashboard-risk-legend > .caution { color: #ff7a1a !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-dashboard-risk-legend > .safe { color: #23ad55 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 .soc-dashboard-risk-legend > :is(.caution, .safe)::before { border-top-style: dashed !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 :is(#analyticsRiskSparkline, #analyticsTrendChart) { overflow: visible !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsTrendPanel#analyticsTrendPanel #analyticsTrendChart#analyticsTrendChart { align-self: stretch !important; height: 98px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel .soc-analytics-pattern-shell.soc-analytics-pattern-shell { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-gutter: stable !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternPanel#analyticsPatternPanel #analyticsPatternBoard#analyticsPatternBoard { display: grid !important; grid-template-columns: 40px repeat(var(--analytics-pattern-columns, 24), 44px) !important; grid-auto-rows: 28px !important; place-items: stretch !important; width: max-content !important; min-width: calc(40px + (24 * 44px)) !important; max-width: none !important; overflow: visible !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternBoard :is(.soc-analytics-pattern-axis, .soc-analytics-pattern-row-label, .soc-analytics-pattern-cell-board) { box-sizing: border-box !important; border: 1px solid #e2e8f0 !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternBoard :is(.soc-analytics-pattern-axis, .soc-analytics-pattern-cell-board) { width: 44px !important; min-width: 44px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPatternBoard .soc-analytics-pattern-row-label { width: 40px !important; min-width: 40px !important; } html body:not(.soc-auth-shell-active) #analyticsView#analyticsView #analyticsDashboardV2#analyticsDashboardV2 #analyticsPeoplePanel .soc-analytics-hotspot-bar { display: none !important; } }