/* Feature composition retained from former page styles. Shared controls,
   cards, dialogs, pagination and feedback are owned by console components.
   Load before console-ui/pages/shell to preserve their visual refinements. */

/* Workspace headings and section counts. */
.console-ui :where(.operations-body){min-width:0}
.console-ui :where(.sites-heading,.links-heading,.toolkit-heading,.section-heading,.history-heading){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:20px}
.console-ui :where(.section-heading h2){margin:0 0 6px}
.console-ui :where(.section-heading p,.section-heading form){margin:0}
.console-ui :where(.section-nav-title){display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.console-ui :where(.section-nav-count){display:inline-block;min-width:22px;padding:0 5px;text-align:center;font-style:normal;line-height:20px}
.console-ui :where(.sites-muted,.links-muted,.ops-note){color:var(--ui-muted);font-size:13px;line-height:1.8;overflow-wrap:anywhere}

/* Site cards and their alternative compact list view. */
.console-ui :where(.sites-overview strong){display:block}
.console-ui :where(.sites-toolbar,.sites-check,.sites-actions,.site-record-head,.site-record-body,.site-record-actions){display:flex;align-items:center;gap:12px}
.console-ui :where(.sites-toolbar,.sites-actions,.site-record-body,.site-record-actions){flex-wrap:wrap}
.console-ui :where(.sites-check){min-width:0;margin:0}
.console-ui :where(.sites-actions){gap:8px;margin-left:auto}
.console-ui :where(.site-record-head,.site-record-body){justify-content:space-between}
.console-ui :where(.sites-records){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:24px}
.console-ui :where(.site-record){min-width:0;padding:20px;border:1px solid var(--ui-line);border-radius:var(--ui-radius,10px)}
.console-ui :where(.site-record:has(.site-select:checked)){outline:2px solid var(--ui-green);outline-offset:-2px;background:var(--ui-soft)}
.console-ui :where(.site-record-head strong,.site-record-title,.site-config-result){overflow-wrap:anywhere}
.console-ui :where(.site-record-title){margin:12px 0 20px;color:var(--ui-muted)}
.console-ui :where(.site-record-body dl){display:flex;gap:28px;margin:0;min-width:0;flex-wrap:wrap}
.console-ui :where(.site-record-body dt){font-size:12px;color:var(--ui-muted);margin-bottom:6px}
.console-ui :where(.site-record-body dd){margin:0;overflow-wrap:anywhere}
.console-ui :where(.site-record-actions){gap:8px}
.console-ui :where(.site-config-result){padding-top:14px;margin:18px 0 0;border-top:1px solid var(--ui-line)}
.console-ui :where(.site-state){display:inline-flex;flex-shrink:0;white-space:nowrap;padding:4px 8px;border-radius:5px;font-size:12px;background:var(--ui-soft);color:var(--ui-muted)}
.console-ui :where(.site-state.is-enabled){color:var(--ui-green)}
.console-ui :where(.site-state.is-disabled,.site-config-result.has-issues){color:var(--ui-warning)}
.console-ui :where(.ui-view-toggle){display:flex;justify-content:flex-end;gap:4px;padding:12px 18px 0}
.console-ui :where(.sites-records.ui-compact-sites){grid-template-columns:1fr;gap:0;padding:0}
.console-ui :where(.ui-compact-sites .site-record){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px 20px;border:0;border-bottom:1px solid var(--ui-line);border-radius:0}
.console-ui :where(.ui-compact-sites .site-record-head){grid-column:1;grid-row:1;margin:0;gap:8px}
.console-ui :where(.ui-compact-sites .site-record-title){grid-column:1;grid-row:2;margin:0;padding-left:26px;font-size:13px}
.console-ui :where(.ui-compact-sites .site-record-body){grid-column:2;grid-row:1/3;margin:0}
.console-ui :where(.ui-compact-sites .site-record-body dl){flex-direction:column;gap:4px}
.console-ui :where(.ui-compact-sites .site-record-body dl)>div{display:flex;gap:10px}
.console-ui :where(.ui-compact-sites .site-record-body dt){margin:0}
.console-ui :where(.ui-compact-sites .site-config-result){grid-column:1/-1;margin:0;padding:0 0 0 26px;border:0}
.console-ui :where(.ui-compact-sites .site-config-result:not(.has-issues)){display:none}

/* Native import fallback, also used while the drawer is being prepared. */
.console-ui :where(.links-import-drawer){margin-bottom:24px}
.console-ui :where(.links-import-drawer)>summary{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:20px 24px}
.console-ui :where(.links-import-drawer)>summary>span{margin-left:auto;color:var(--ui-muted);font-size:12px;font-weight:400}
.console-ui :where(#links-delete-name){overflow-wrap:anywhere}
.console-ui :where(.sites-filters,.links-filters):not(.console-filterbar){display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;margin:0;min-width:0}
.console-ui :where(.sites-filters,.links-filters):not(.console-filterbar)>label{display:grid;gap:8px;min-width:0;flex:1}

/* Operational measurements. Worker composition lives in feature-layouts. */
.console-ui :where(.ops-kpis){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}
.console-ui :where(.ops-kpi){min-width:0;border:1px solid var(--ui-line)}
.console-ui :where(.ops-kpi span){display:block;margin-bottom:12px}
.console-ui :where(.ops-kpi small){margin-left:4px;color:var(--ui-muted)}
.console-ui :where(.ops-table,.history-table-wrap){max-width:100%;overflow:auto}
.console-ui :where(.ops-section-heading){margin-bottom:18px}
.console-ui :where(.ops-section-heading p){margin:0}

/* Configuration diff: columns preserve before/after meaning on small screens. */
.console-ui :where(.history-heading h2){margin:4px 0 8px}
.console-ui :where(.history-kicker){color:var(--ui-muted);font-size:12px}
.console-ui :where(.history-modes){display:flex;gap:8px;flex-wrap:wrap}
.console-ui :where(.history-explanation){padding:16px;background:var(--ui-soft);border-radius:var(--ui-radius,8px);line-height:1.8}
.console-ui :where(.history-diff-heading,.history-values){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.console-ui :where(.history-diff-heading){padding:12px 16px;color:var(--ui-muted)}
.console-ui :where(.history-change){border:1px solid var(--ui-line);margin-bottom:14px}
.console-ui :where(.history-field){display:flex;align-items:center;gap:12px;flex-wrap:wrap;overflow-wrap:anywhere}
.console-ui :where(.history-field code){min-width:0;overflow-wrap:anywhere}
.console-ui :where(.history-values){gap:0}
.console-ui :where(.history-values)>div{min-width:0;padding:12px 16px}
.console-ui :where(.history-old){background:var(--ui-danger-bg)}
.console-ui :where(.history-new){background:var(--ui-soft)}
.console-ui :where(.history-values pre){border:0;background:transparent;padding:0;margin:0;max-height:280px;white-space:pre-wrap;overflow:auto;overflow-wrap:anywhere}
.console-ui :where(.history-cell-label){display:none}
.console-ui :where(.history-source){margin-top:24px}
.console-ui :where(.history-source summary){padding:12px 0}
.console-ui :where(.history-restore-bar){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-top:24px;border-top:1px solid var(--ui-line)}
.console-ui :where(.history-restore-bar p){margin-bottom:0}
.console-ui :where(.history-restore-bar button){flex-shrink:0}

/* Notification bell and inbox metadata. Shared controls style filter links. */
.console-ui :where(.header-right .notification-bell){position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface);color:var(--ui-green)}
.console-ui :where(.notification-bell .ui-icon){width:21px;height:21px}
.console-ui :where(.notification-count){position:absolute;top:-6px;right:-7px;min-width:19px;height:19px;line-height:19px;padding:0 4px;border-radius:12px;background:var(--ui-danger);color:var(--ui-surface);font-size:10px;text-align:center;border:2px solid var(--ui-surface);box-sizing:content-box}
.console-ui :where(.notice-title-row){display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.console-ui :where(.notice-title-row .page-title){margin-bottom:0}
.console-ui :where(.notice-total){display:inline-block;vertical-align:middle;padding:4px 9px;border-radius:20px;background:var(--ui-soft);color:var(--ui-green);font-size:12px;font-weight:500;letter-spacing:0}
.console-ui :where(.notice-inbox){overflow:hidden}
.console-ui :where(.notice-toolbar,.notice-day,.notice-message-meta){display:flex;align-items:center;gap:10px}
.console-ui :where(.notice-read-filter){display:flex;flex-wrap:wrap;gap:3px}
.console-ui :where(.notice-toolbar)>.btn{margin-left:auto}
.console-ui :where(.notice-result-count){font-size:12px;color:var(--ui-muted)}
.console-ui :where(.notice-message){display:flex;border-bottom:1px solid var(--ui-line)}
.console-ui :where(.notice-message.is-unread){box-shadow:inset 3px 0 var(--ui-green)}
.console-ui :where(.notice-type-icon){display:grid;place-items:center;flex-shrink:0}
.console-ui :where(.notice-type-icon .ui-icon){width:19px;height:19px}
.console-ui :where(.notice-message-content){min-width:0;flex:1}
.console-ui :where(.notice-message-meta){flex-wrap:wrap;color:var(--ui-muted)}
.console-ui :where(.notice-message-meta time){margin-left:auto;font-variant-numeric:tabular-nums}
.console-ui :where(.notice-read-state){font-size:10px}
.console-ui :where(.is-unread .notice-read-state){color:var(--ui-green)}
.console-ui :where(.notice-message h2,.notice-preview){overflow-wrap:anywhere}
.console-ui :where(.notification-important){display:inline-block;vertical-align:middle;margin-left:10px;padding:2px 7px;border-radius:4px;font-size:10px;background:var(--ui-warning-bg);color:var(--ui-warning)}
.console-ui :where(.notification-body){white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;max-height:420px;overflow:auto}
.console-ui :where(.notification-actions){display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px}
.console-ui :where(.notification-actions form){margin:0}
.console-ui :where(.notice-sync p){margin:5px 0}
.console-ui :where(.notice-sync p:first-child){display:flex;align-items:center;gap:7px}
.console-ui :where(.notice-sync-dot){width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--ui-green)}
.console-ui :where(.notice-sync-dot.is-warning){background:var(--ui-warning)}

/* Toolkit data, record retention and supporting forms. */
.console-ui :where(.toolkit-stats strong){display:block}
.console-ui :where(.toolkit-tabs){display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0}
.console-ui :where(.toolkit-badge){display:inline-flex;padding:3px 8px;border-radius:5px;font-size:12px;line-height:1.5}
.console-ui :where(.toolkit-badge.good){background:var(--ui-soft);color:var(--ui-green)}
.console-ui :where(.toolkit-badge.bad){background:var(--ui-danger-bg);color:var(--ui-danger)}
.console-ui :where(.toolkit-badge.neutral){background:var(--ui-warning-bg);color:var(--ui-warning)}
.console-ui :where(.toolkit-page td small){display:block;margin-top:5px;color:var(--ui-muted)}
.console-ui :where(.toolkit-editor){resize:vertical}
.console-ui :where(.toolkit-path){max-width:440px;overflow-wrap:anywhere}
.console-ui :where(.toolkit-preview){margin-top:20px;padding:18px;border:1px solid var(--ui-line);border-radius:var(--ui-radius,10px);background:var(--ui-soft)}
.console-ui :where(.log-savebar){display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--ui-line)}
.console-ui :where(.log-savebar .form-hint){margin:0;flex:1}
.console-ui :where(.log-savebar .btn){flex-shrink:0;margin:0}

@media(max-width:1100px){
 .console-ui :where(.sites-records){grid-template-columns:1fr}
 .console-ui :where(.ui-compact-sites .site-record){grid-template-columns:minmax(0,1fr)}
 .console-ui :where(.ui-compact-sites .site-record-body){grid-column:1;grid-row:3}
}
@media(max-width:700px){
 .console-ui :where(.sites-heading,.links-heading){align-items:flex-start}
 .console-ui :where(.sites-toolbar){flex-wrap:wrap}
 .console-ui :where(.sites-actions){margin-left:0;width:100%}
 .console-ui :where(.sites-records){padding:16px}
 .console-ui :where(.sites-records.ui-compact-sites){padding:0}
 .console-ui :where(.site-record){padding:16px}
 .console-ui :where(.site-record-head){align-items:flex-start}
 .console-ui :where(.site-record-actions){width:100%}
 .console-ui :where(.site-record-actions)>.btn{flex:1}
 .console-ui :where(.ui-compact-sites .site-record-title,.ui-compact-sites .site-config-result){padding-left:0}
 .console-ui :where(.sites-filters,.links-filters):not(.console-filterbar)>label{flex-basis:100%}
 .console-ui :where(.links-import-drawer)>summary{padding:18px 16px}
 .console-ui :where(.links-import-drawer)>summary>span{margin-left:0;flex-basis:100%}
 .console-ui :where(.ops-kpis){grid-template-columns:repeat(2,minmax(0,1fr))}
 .console-ui :where(.history-values){grid-template-columns:minmax(0,1fr)}
 .console-ui :where(.history-diff-heading){display:none}
 .console-ui :where(.history-cell-label){display:block;font-size:12px;font-weight:600;margin-bottom:8px}
 .console-ui :where(.history-restore-bar){align-items:stretch;flex-direction:column}
 .console-ui :where(.notice-toolbar){flex-wrap:wrap}
 .console-ui :where(.notice-result-count){display:none}
 .console-ui :where(.notice-type-icon .ui-icon){width:16px;height:16px}
 .console-ui :where(.log-savebar .form-hint){flex-basis:100%}
 .console-ui :where(.log-savebar .btn){margin-left:auto}
}