/* Operations dashboard, using SyVideo's existing navy, blue and coral tokens. */

/* Enrollment uses the same dialog, controls and feedback as the video library. */
.sy-node-user-editor { max-width: 440px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--sy-border); }
.sy-node-user-editor .field { display: grid; gap: 6px; }
.sy-node-job-pending { display: flex; align-items: center; gap: 8px; }
.sy-add-node-dialog.sy-library-dialog { width: min(720px, calc(100vw - 32px)); padding: 24px; }
.sy-add-node-dialog > header { margin-bottom: 16px; }
.sy-add-node-form h3 { margin: 0 0 4px; font-size: var(--sy-font-section); font-weight: var(--sy-heading-font-weight); color: var(--sy-navy); }
.sy-add-node-form h3:focus { outline: none; }
.sy-add-node-form p { margin: 4px 0 16px; font-size: var(--sy-font-meta); }
.sy-add-node-form .sy-step-indicator { margin-bottom: 20px; }
.sy-add-node-form .sy-step-indicator li { gap: 6px; padding: 10px 0 12px; font-size: 12px; }
.sy-add-node-form .sy-step-indicator strong { font-weight: var(--sy-control-font-weight); }
.sy-add-node-form .sy-step-indicator li > span { width: 24px; height: 24px; }
.sy-add-node-form .sy-role-grid { gap: 12px; margin: 16px 0 24px; }
.sy-add-node-form .sy-role-choice { padding: 16px !important; min-height: 140px; gap: 8px !important; box-shadow: none; }
.sy-add-node-form .sy-role-choice > strong { font-size: var(--sy-font-body); font-weight: var(--sy-control-font-weight); }
.sy-add-node-form .sy-role-choice > span { font-size: 12px; line-height: 1.6; }
.sy-add-node-form .sy-role-choice > span:last-child { margin-top: auto; color: var(--sy-action); }
.sy-add-node-form .sy-role-choice.is-selected { border-color: var(--sy-action) !important; background: var(--sy-surface-hover); }
.sy-add-node-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sy-add-node-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.sy-add-node-fields .field { margin: 0; min-width: 0; gap: 6px; }
.sy-add-node-wide { grid-column: 1 / -1; }
.sy-add-node-fields .sy-input { min-height: 44px; padding: 8px 12px; font-size: var(--sy-font-body); }
.sy-add-node-fields textarea { resize: vertical; }
.sy-add-node-form fieldset:disabled .sy-input { background: var(--sy-surface-subtle); color: var(--sy-muted); }
.sy-add-node-form .validation-message { color: var(--sy-error); font-size: var(--sy-font-meta); overflow-wrap: anywhere; }
.sy-add-node-services { color: var(--sy-muted); }
.sy-add-node-form .sy-add-node-hint { color: var(--sy-muted); margin: 16px 0 0; }
.sy-add-node-form .sy-dialog-actions { flex-wrap: wrap; margin-top: 20px; padding-top: 16px; }
.sy-node-enrollment-recovery > p { color: var(--sy-warning); }
.sy-node-enrollment-recovery dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; padding: 16px; background: var(--sy-surface-subtle); border-radius: var(--sy-control-radius); font-size: var(--sy-font-body); }
.sy-node-enrollment-recovery dt { color: var(--sy-muted); }
.sy-node-enrollment-recovery dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .sy-add-node-dialog.sy-library-dialog { padding: 20px 16px; max-height: calc(100dvh - 24px); }
    .sy-add-node-form .sy-role-grid { grid-template-columns: 1fr; gap: 10px; }
    .sy-add-node-form .sy-role-choice { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; min-height: 80px; gap: 4px 12px !important; }
    .sy-add-node-form .sy-role-choice > span:nth-child(2) { grid-column: 1; }
    .sy-add-node-form .sy-role-choice > span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
    .sy-add-node-fields { grid-template-columns: minmax(0, 1fr); }
    .sy-add-node-form .sy-dialog-actions > .sy-button { flex: 1; white-space: normal; }
}

/* The machine list follows the shared library toolbar/table pattern. */
.sy-node-list { min-width: 0; }
.sy-node-summary { display: flex; gap: 32px; margin: 20px 0 24px; }
.sy-node-summary > div { min-width: 140px; padding-right: 32px; border-right: 1px solid var(--sy-border); }
.sy-node-summary > div:last-child { border: 0; padding-right: 0; }
.sy-node-summary dt { color: var(--sy-muted); font-size: var(--sy-font-meta); font-weight: var(--sy-control-font-weight); }
.sy-node-summary dd { margin: 4px 0 0; color: var(--sy-navy); font-size: 28px; line-height: 1.25; font-weight: var(--sy-heading-font-weight); font-variant-numeric: tabular-nums; }
.sy-node-summary [data-attention="true"] dd { color: var(--sy-warning); }
.sy-node-panel { container-type: inline-size; background: var(--sy-surface); border: 1px solid var(--sy-border); border-radius: var(--sy-radius); overflow: hidden; }
.sy-node-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.sy-node-panel-heading h2 { margin: 0; font-size: var(--sy-font-section); }
.sy-node-update { margin: 3px 0 0; color: var(--sy-muted); font-size: var(--sy-font-meta); font-variant-numeric: tabular-nums; }
.sy-node-panel-heading > .sy-button { flex: none; padding: 8px 10px; }
.sy-node-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.sy-node-filters { display: flex; flex: 1; gap: 12px; min-width: 0; }
.sy-node-filters input { width: min(100%, 320px); min-width: 0; }
.sy-node-filters select { flex: none; width: 165px; }
.sy-node-toolbar .sy-input { min-height: 44px; padding-block: 8px; }
.sy-node-toolbar > .sy-button { flex: none; white-space: nowrap; }
.sy-node-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 20px; background: var(--sy-warning-surface); color: var(--sy-warning); border-top: 1px solid var(--sy-border); border-left: 3px solid var(--sy-accent); font-size: var(--sy-font-meta); }
.sy-node-notice p { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 260px; }
.sy-node-notice .sy-button { padding: 6px 12px; }
.sy-node-table th:nth-child(2) { width: 176px; }
.sy-node-table th:nth-child(3) { width: 244px; }
.sy-node-table th:nth-child(4) { width: 182px; }
.sy-node-table th:last-child { width: 148px; text-align: right; }
.sy-node-name { display: inline-block; color: var(--sy-action); font-weight: var(--sy-control-font-weight); text-decoration: none; overflow-wrap: anywhere; }
.sy-node-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.sy-node-name:focus-visible { outline: 2px solid var(--sy-focus); outline-offset: 3px; border-radius: 2px; }
.sy-node-cell-roles { color: var(--sy-text); }
.sy-node-table .sy-status-badge { font-size: var(--sy-font-meta); font-weight: var(--sy-control-font-weight); line-height: 1.5; border-radius: 4px; text-align: left; }
.sy-node-connection { display: flex; align-items: center; }
.sy-node-cell-connection small { display: block; margin: 2px 0 0; color: var(--sy-muted); font-size: var(--sy-font-meta); font-variant-numeric: tabular-nums; }
.sy-node-cell-action { text-align: right; }
.sy-node-detail-link.sy-button { min-height: 44px; padding: 8px; white-space: nowrap; }
.sy-node-mobile-label { display: none; }
.sy-node-table .sy-table-empty > .sy-mgmt-icon { display: block; width: 28px; height: 28px; margin: 0 auto 12px; color: var(--sy-muted); }
.sy-node-table .sy-table-empty .sy-button { margin-top: 12px; }

@container (max-width: 900px) {
    .sy-node-toolbar { flex-wrap: wrap; }
    .sy-node-filters { display: contents; }
    .sy-node-filters input { flex-basis: 100%; width: 100%; }
    .sy-node-filters select { flex: 1; min-width: 0; width: auto; }
}
@container (max-width: 860px) {
    .sy-node-table thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
    .sy-node-table tbody { display: block; border-top: 1px solid var(--sy-border); }
    .sy-node-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 12px; padding: 16px; border-bottom: 1px solid var(--sy-border); }
    .sy-node-table td { min-width: 0; height: auto; padding: 0; border: 0; }
    .sy-node-table td:first-child { padding: 0; }
    .sy-node-cell-name { grid-column: 1; grid-row: 1; align-self: center; }
    .sy-node-cell-action { grid-column: 1; grid-row: 5; text-align: left; }
    .sy-node-cell-roles, .sy-node-cell-status, .sy-node-cell-connection { grid-column: 1 / -1; }
    .sy-node-cell-roles { font-size: var(--sy-font-meta) !important; }
    .sy-node-mobile-label { display: inline; margin-right: 8px; color: var(--sy-muted); }
    .sy-node-cell-connection { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
    .sy-node-table .sy-table-empty { grid-column: 1 / -1; }
}
@container (max-width: 480px) {
    .sy-node-panel-heading { padding: 16px 16px 0; align-items: flex-start; flex-wrap: wrap; }
    .sy-node-update { font-size: 12px; }
    .sy-node-toolbar { padding: 12px 16px 16px; gap: 10px; }
    .sy-node-toolbar > .sy-button { width: 100%; }
    .sy-node-notice { padding: 12px 16px; }
}
@media (max-width: 600px) {
    .sy-node-summary { gap: 16px; margin: 20px 0; }
    .sy-node-summary > div { flex: 1; min-width: 0; padding-right: 16px; }
    .sy-node-summary dd { font-size: 24px; }
}
@media (pointer: coarse) {
    .sy-node-detail-link.sy-button { min-width: 44px; min-height: 44px; }
}
.sy-management { background: #f6f7f9; color: var(--sy-navy); font-size: var(--sy-font-body); line-height: 1.6; }
.sy-management h1, .sy-management h2, .sy-management h3 { font-weight: var(--sy-heading-font-weight); }
.sy-management .sy-mgmt-main { max-width: none; padding: 25px 28px 48px; min-height: calc(100dvh - 130px); }
.sy-management .sy-mgmt-topbar { height: 70px; padding: 0 28px; gap: 18px; }
.sy-management .sy-mgmt-sidebar { width: 248px; padding: 20px 12px 16px; }
.sy-management .sy-mgmt-brand { display: grid; grid-template-columns: 1fr 34px; gap: 5px; padding: 0 14px 15px; align-items: center; }
.sy-management .sy-mgmt-brand .sy-brand { grid-column: 1; white-space: nowrap; font-size: 22px; font-weight: 650; color: #fff; }
.sy-management .sy-mgmt-brand .sy-brand-mark { width: 36px; height: 36px; flex: 0 0 36px; background: transparent; border-radius: 0; }
.sy-management .sy-mgmt-brand .sy-brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.sy-management .sy-mgmt-brand .sy-brand-accent { color: #fff; }
.sy-management .sy-mgmt-brand > .sy-mgmt-label { grid-column: 1 / -1; font-size: 10px; letter-spacing: .22em; }
.sy-management .sy-mgmt-brand .sy-mgmt-sidebar-toggle { grid-column: 2; grid-row: 1; padding: 0; width: 44px; min-width: 44px; height: 44px; min-height: 44px; background: transparent; color: #bbccda; }
.sy-management .sy-mgmt-sidebar-toggle .sy-mgmt-icon { transform: rotate(180deg); }
.sy-management .sy-mgmt-icon { width: 20px; height: 20px; flex: 0 0 20px; vertical-align: middle; }
.sy-management .sy-mgmt-primary-nav { display: grid; gap: 3px; overflow-y: auto; min-height: 0; padding: 8px 0; }
.sy-management .sy-mgmt-primary-nav a,
.sy-management .sy-mgmt-primary-nav .sy-mgmt-nav-unavailable { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 10px 14px; border-radius: var(--sy-control-radius); color: #d9e5ee; text-decoration: none; font-weight: var(--sy-control-font-weight); font-size: var(--sy-font-body); }
.sy-management .sy-mgmt-primary-nav a:hover { background: #193b58; color: white; }
.sy-management .sy-mgmt-primary-nav a.active { background: #25445e; box-shadow: inset 3px 0 var(--sy-accent); color: white; }
.sy-management .sy-mgmt-primary-nav .sy-mgmt-nav-unavailable { color: #a1b5c8; cursor: default; }
.sy-management .sy-mgmt-primary-nav small { margin-left: 3px; font-size: 10px; opacity: .78; white-space: nowrap; }
.sy-management .sy-mgmt-nav-label { margin: 18px 0 4px; padding: 0 14px; font-size: 11px; color: #a9bfd1; }
.sy-management .sy-mgmt-sidebar-bottom { padding: 12px 10px 0; }
.sy-management .sy-mgmt-sidebar-bottom > a { color: #b4c7d8; font-size: 12px; }
.sy-management .sy-mgmt-sidebar-profile { border-top: 1px solid #365168; margin-top: 12px; padding: 14px 0 2px; display: flex; align-items: center; gap: 12px; font-size: 12px; }
.sy-management .sy-mgmt-sidebar-profile .sy-mgmt-avatar { flex: 0 0 32px; }
.sy-management.is-collapsed .sy-mgmt-sidebar { width: 72px; padding: 20px 8px; }
.sy-management.is-collapsed .sy-mgmt-brand { display: flex; justify-content: center; padding: 0 0 14px; }
.sy-management.is-collapsed .sy-mgmt-brand .sy-mgmt-sidebar-toggle { display: none; }
.sy-management.is-collapsed .sy-mgmt-primary-nav a,
.sy-management.is-collapsed .sy-mgmt-primary-nav .sy-mgmt-nav-unavailable { justify-content: center; padding: 9px; }
.sy-management.is-collapsed .sy-mgmt-sidebar-profile { justify-content: center; }
.sy-management .sy-mgmt-topbar-status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--sy-muted); padding: 6px 0; white-space: nowrap; font-size: var(--sy-font-meta); font-weight: var(--sy-control-font-weight); }
.sy-management .sy-mgmt-topbar-status .sy-mgmt-icon { width: 15px; height: 15px; flex-basis: 15px; }
.sy-management .sy-mgmt-topbar-alerts { color: var(--sy-navy); padding: 10px; display: grid; place-items: center; }
.sy-management .sy-mgmt-topbar-alerts:hover { color: var(--sy-action); }
.sy-management .sy-mgmt-avatar { margin-left: 0; }
.sy-management .sy-mgmt-footer { border-top: 1px solid var(--sy-border); }

.sy-mgmt-dashboard-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 0 16px; }
.sy-mgmt-dashboard-heading h1 { font-size: var(--sy-font-page); line-height: 1.4; letter-spacing: normal; margin: 0 0 4px; }
.sy-mgmt-dashboard-heading p { color: var(--sy-muted); font-size: 13px; margin: 0; }
.sy-mgmt-dashboard-heading-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sy-mgmt-dashboard-heading-actions > a:last-child { display: inline-flex; align-items: center; gap: 7px; color: #12589a; text-decoration: none; font-size: 13px; font-weight: var(--sy-control-font-weight); }
.sy-mgmt-dashboard-heading-actions .sy-mgmt-icon { width: 15px; height: 15px; flex-basis: 15px; }
.sy-mgmt-dashboard-heading-actions .sy-button { min-height: 42px; }
.sy-mgmt-loading { background: white; border: 1px solid var(--sy-border); border-radius: 8px; padding: 32px; }

.sy-mgmt-action-panel { border: 1px solid #ead8d4; border-left: 3px solid var(--sy-accent); border-radius: 8px; overflow: hidden; background: white; margin-bottom: 20px; }
.sy-mgmt-action-heading { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; background: #fff6f3; }
.sy-mgmt-action-title { display: flex; align-items: center; gap: 10px; }
.sy-mgmt-action-title h2 { margin: 0; font-size: 17px; }
.sy-mgmt-action-icon { display: grid; place-items: center; color: #c04831; }
.sy-mgmt-action-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: #f8ddd7; color: #ad402d; font-size: 12px; font-weight: 800; }
.sy-mgmt-action-hint { font-size: 11px; color: var(--sy-muted); }
.sy-mgmt-action-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto 140px; gap: 13px; align-items: center; min-height: 74px; padding: 11px 20px; border-top: 1px solid var(--sy-border); }
.sy-mgmt-action-row-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #eef3f8; color: var(--sy-action); }
.sy-mgmt-action-copy { min-width: 0; }
.sy-mgmt-action-copy strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.sy-mgmt-action-copy p { font-size: 11px; color: var(--sy-muted); margin: 2px 0 0; }
.sy-mgmt-action-row > a { text-align: right; color: #12589a; text-decoration: none; font-size: 12px; font-weight: var(--sy-control-font-weight); white-space: nowrap; }
.sy-mgmt-action-row > a .sy-mgmt-icon { width: 15px; height: 15px; margin-left: 5px; flex-basis: 15px; }
.sy-mgmt-action-empty { min-height: 98px; display: flex; align-items: center; gap: 16px; padding: 16px 24px; }
.sy-mgmt-action-empty > .sy-mgmt-icon { width: 38px; height: 38px; flex-basis: 38px; color: var(--sy-action); }
.sy-mgmt-action-empty strong { font-size: 14px; }
.sy-mgmt-action-empty p { font-size: 12px; margin: 2px 0 0; color: var(--sy-muted); }
.sy-mgmt-action-empty a { margin-left: auto; color: #12589a; font-size: 13px; font-weight: var(--sy-control-font-weight); white-space: nowrap; }
.sy-mgmt-action-more { display: block; padding: 10px 20px; text-align: right; border-top: 1px solid var(--sy-border); font-size: 12px; font-weight: var(--sy-control-font-weight); }

.sy-mgmt-dashboard-overview { display: grid; grid-template-columns: minmax(0, 1.24fr) repeat(2, minmax(0,1fr)); align-items: stretch; gap: 14px; margin-bottom: 17px; }
.sy-mgmt-overview-card { background: white; border: 1px solid var(--sy-border); border-radius: 8px; padding: 15px 17px; min-width: 0; }
.sy-mgmt-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; margin-bottom: 14px; }
.sy-mgmt-card-heading h2 { margin: 0; font-size: 17px; line-height: 1.35; }
.sy-mgmt-card-heading span { font-size: 10px; color: var(--sy-muted); text-align: right; }
.sy-mgmt-card-heading a { display: inline-flex; align-items: center; gap: 7px; color: #12589a; font-size: 12px; font-weight: var(--sy-control-font-weight); text-decoration: none; }
.sy-mgmt-card-heading a .sy-mgmt-icon { width: 15px; height: 15px; flex-basis: 15px; }
.sy-mgmt-overview-figures { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.sy-mgmt-overview-figures > div { border: 1px solid var(--sy-border); border-radius: 7px; padding: 12px 11px 9px; min-width: 0; }
.sy-mgmt-figure-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; margin-bottom: 8px; }
.sy-mgmt-figure-icon.neutral { background: #edf3fa; color: #1b5a91; }
.sy-mgmt-figure-icon.success { background: #e6f5eb; color: #218453; }
.sy-mgmt-figure-icon.warning { background: #fff3dc; color: #ad7100; }
.sy-mgmt-overview-figures small { display: block; font-size: 10px; color: var(--sy-muted); white-space: nowrap; }
.sy-mgmt-overview-figures strong { font-size: 26px; line-height: 1.1; margin-top: 4px; display: inline-block; }
.sy-mgmt-overview-figures strong + small { display: inline; margin-left: 4px; }
.sy-mgmt-card-caption { font-size: 10px; color: var(--sy-muted); margin: 12px 0 0; }
.sy-mgmt-service-list { display: grid; }
.sy-mgmt-service-row { display: flex; align-items: center; gap: 10px; min-height: 58px; border-bottom: 1px solid var(--sy-border); text-decoration: none; color: var(--sy-navy); }
.sy-mgmt-service-row:last-child { border-bottom: 0; }
.sy-mgmt-service-row:hover, .sy-mgmt-setting-row:hover:not(.is-upcoming) { background: #f8fbff; }
.sy-mgmt-service-icon { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border-radius: 50%; background: #eef3f8; color: var(--sy-action); }
.sy-mgmt-service-copy { display: grid; min-width: 0; margin-right: auto; }
.sy-mgmt-service-copy strong, .sy-mgmt-setting-row strong { font-size: 12px; }
.sy-mgmt-service-copy small, .sy-mgmt-setting-row small { font-size: 10px; color: var(--sy-muted); }
.sy-mgmt-service-row > .sy-mgmt-icon, .sy-mgmt-setting-row > .sy-mgmt-icon { width: 15px; height: 15px; flex-basis: 15px; color: #627a8e; }
.sy-mgmt-service-row .sy-status-badge { max-width: 43%; font-size: 10px; text-align: center; }
.sy-mgmt-connection-track { display: flex; background: #e9edf2; border-radius: 5px; overflow: hidden; height: 10px; margin: 15px 0 17px; }
.sy-mgmt-connection-track > span { background: #36b77c; border-radius: 5px; }
.sy-mgmt-connection-row { display: flex; align-items: center; gap: 9px; min-height: 40px; border-bottom: 1px solid var(--sy-border); font-size: 11px; }
.sy-mgmt-connection-row:last-of-type { border-bottom: 0; }
.sy-mgmt-connection-row strong { margin-left: auto; font-size: 12px; }
.sy-mgmt-connection-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; flex: 0 0 8px; background: #a8b8c6; }
.sy-mgmt-connection-dot.success { background: #2caf70; }
.sy-mgmt-connection-dot.danger { background: #d85a48; }

.sy-mgmt-dashboard-bottom { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, .94fr); gap: 14px; align-items: stretch; }
.sy-mgmt-recent, .sy-mgmt-settings-card { padding: 15px 17px; }
.sy-mgmt-recent .sy-mgmt-card-heading { margin-bottom: 10px; }
.sy-mgmt-dashboard-table { overflow-x: auto; }
.sy-mgmt-dashboard-table table { min-width: 700px; }
.sy-mgmt-dashboard-table th { padding: 9px 10px; font-size: 10px; white-space: nowrap; }
.sy-mgmt-dashboard-table td { padding: 10px; font-size: 11px; white-space: nowrap; }
.sy-mgmt-dashboard-table td:nth-child(3) { white-space: normal; }
.sy-mgmt-dashboard-table td small { margin: 0; }
.sy-mgmt-dashboard-table td .sy-status-badge { font-size: 10px; }
.sy-mgmt-dashboard-table .sy-mgmt-node-name { font-weight: var(--sy-control-font-weight); }
.sy-mgmt-dashboard-table .sy-mgmt-row-action { width: 30px; height: 30px; border: 1px solid var(--sy-border); border-radius: 6px; display: grid; place-items: center; }
.sy-mgmt-dashboard-table .sy-mgmt-row-action .sy-mgmt-icon { width: 16px; height: 16px; flex-basis: 16px; }
.sy-mgmt-recent-empty { min-height: 125px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--sy-muted); font-size: 12px; }
.sy-mgmt-recent-empty .sy-mgmt-icon { width: 28px; height: 28px; flex-basis: 28px; }
.sy-mgmt-recent-empty a { color: #12589a; font-weight: var(--sy-control-font-weight); }
.sy-mgmt-setting-row { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--sy-border); border-radius: 6px; color: var(--sy-navy); text-decoration: none; margin-bottom: 7px; }
.sy-mgmt-setting-row > span:nth-child(2) { display: grid; min-width: 0; flex: 1; }
.sy-mgmt-setting-row.is-upcoming { cursor: default; background: #fbfcfd; }
.sy-mgmt-setting-row .sy-mgmt-upcoming-pill { flex: 0 0 auto; border-radius: 5px; background: #eef2f5; color: #647a8b; font-size: 10px; padding: 3px 5px; }
.sy-mgmt-dashboard-disclaimer { font-size: 10px; color: var(--sy-muted); margin: 14px 0 0; }
.sy-status-badge[data-tone=success] { background: #e6f5eb; color: #216847; }
.sy-status-badge[data-tone=danger] { background: #fff0ed; color: #ac392b; }

.sy-mgmt-node-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sy-mgmt-node-filters a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; border: 1px solid var(--sy-border); border-radius: 7px; padding: 7px 12px; background: white; color: var(--sy-text); font-size: 12px; text-decoration: none; }
.sy-mgmt-node-filters a.is-active { background: var(--sy-action); border-color: var(--sy-action); color: white; }
.sy-mgmt-node-filters span { font-weight: var(--sy-control-font-weight); }
.sy-mgmt-machines-list { padding: 17px; }

@media (max-width: 1240px) {
    .sy-mgmt-dashboard-overview { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sy-mgmt-dashboard-overview > :first-child { grid-column: 1 / -1; }
    .sy-mgmt-overview-figures > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; }
    .sy-mgmt-overview-figures .sy-mgmt-figure-icon { grid-row: 1 / 3; margin: 0; }
    .sy-mgmt-overview-figures strong { grid-row: 1 / 3; grid-column: 3; }
    .sy-mgmt-overview-figures strong + small { display: none; }
}
@media (max-width: 950px) {
    .sy-mgmt-dashboard-bottom { grid-template-columns: minmax(0, 1fr); }
    .sy-mgmt-recent { min-width: 0; }
}
@media (max-width: 760px) {
    .sy-management .sy-mgmt-sidebar, .sy-management.is-collapsed .sy-mgmt-sidebar { width: 248px; padding: 20px 12px 16px; }
    .sy-management.is-collapsed .sy-mgmt-brand { display: grid; grid-template-columns: 1fr 34px; padding: 0 14px 15px; }
    .sy-management.is-collapsed .sy-mgmt-brand .sy-mgmt-sidebar-toggle { display: inline-flex; }
    .sy-management.is-collapsed .sy-mgmt-primary-nav a, .sy-management.is-collapsed .sy-mgmt-primary-nav .sy-mgmt-nav-unavailable { justify-content: flex-start; padding: 9px 14px; }
    .sy-management .sy-mgmt-main { padding: 22px 16px 36px; }
    .sy-management .sy-mgmt-topbar { padding: 0 16px; gap: 10px; }
    .sy-management .sy-mgmt-topbar-status { display: none; }
    .sy-management .sy-mgmt-topbar-alerts { margin-left: auto; }
    .sy-mgmt-dashboard-heading { align-items: flex-start; }
    .sy-mgmt-dashboard-heading-actions { gap: 12px; }
    .sy-mgmt-action-heading { align-items: flex-start; }
    .sy-mgmt-action-hint { display: none; }
    .sy-mgmt-action-row { grid-template-columns: 36px minmax(0,1fr); gap: 8px 12px; padding: 14px 16px; }
    .sy-mgmt-action-row-icon { width: 34px; height: 34px; }
    .sy-mgmt-action-row .sy-status-badge { grid-column: 2; justify-self: start; }
    .sy-mgmt-action-row > a { grid-column: 2; text-align: left; }
    .sy-mgmt-dashboard-overview { grid-template-columns: 1fr; gap: 12px; }
    .sy-mgmt-dashboard-overview > :first-child { grid-column: auto; }
    .sy-mgmt-overview-figures > div { display: block; }
    .sy-mgmt-overview-figures .sy-mgmt-figure-icon { margin-bottom: 8px; }
    .sy-mgmt-overview-figures strong { display: block; }
    .sy-mgmt-overview-figures strong + small { display: none; }
    .sy-mgmt-card-heading h2 { font-size: 16px; }
    .sy-mgmt-recent-empty { flex-wrap: wrap; }
}
@media (max-width: 430px) {
    .sy-mgmt-overview-figures > div { padding: 10px 7px; }
    .sy-mgmt-overview-figures small { white-space: normal; }
    .sy-mgmt-overview-figures strong { font-size: 22px; }
    .sy-mgmt-action-empty { flex-wrap: wrap; }
    .sy-mgmt-action-empty a { margin-left: 0; }
}

/* Shared workspace and platform dashboard shell. */
.sy-dashboard-chrome { display: contents; }
.sy-dashboard-shell > .sy-mgmt-workspace { padding-top: 70px; }
.sy-dashboard-shell .sy-mgmt-topbar { position: fixed; top: 0; left: 248px; right: 0; z-index: 30; }
.sy-dashboard-shell.is-collapsed .sy-mgmt-topbar { left: 72px; }
.sy-dashboard-shell .sy-mgmt-primary-nav { align-content: start; overflow-y: auto; min-height: 0; flex: 1; padding-bottom: 16px; }
.sy-dashboard-shell .sy-mgmt-sidebar-bottom { margin-top: 0; flex-shrink: 0; }
.sy-dashboard-workspace-picker { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sy-dashboard-workspace-picker label { font-size: 11px; color: var(--sy-muted); }
.sy-dashboard-workspace-picker .sy-select { width: 220px; max-width: 100%; min-height: 40px; font-size: 13px; }
.sy-dashboard-shell .metrics { gap: 16px; margin-bottom: 24px; }
.sy-dashboard-shell .dashboard-grid { gap: 16px; }
.sy-dashboard-shell #usage, .sy-dashboard-shell #workspace-settings, .sy-dashboard-shell #upload { scroll-margin-top: 100px; }
.sy-dashboard-shell.is-collapsed .sy-mgmt-brand .sy-brand > span:last-child { display: none; }
@media (max-width: 1000px) {
    .sy-dashboard-shell .sy-mgmt-breadcrumb, .sy-dashboard-shell .sy-mgmt-topbar-status { display: none; }
    .sy-dashboard-shell .sy-mgmt-topbar-alerts { margin-left: auto; }
    .sy-dashboard-workspace-picker { flex: 1; }
}
@media (max-width: 760px) {
    .sy-dashboard-shell .sy-mgmt-topbar, .sy-dashboard-shell.is-collapsed .sy-mgmt-topbar { left: 0; }
    .sy-dashboard-workspace-picker label { display: none; }
    .sy-dashboard-workspace-picker .sy-select { width: 100%; }
    .sy-dashboard-shell .sy-mgmt-topbar { gap: 10px; }
    .sy-dashboard-shell .sy-mgmt-topbar > .sy-mgmt-avatar { display: none; }
    .sy-dashboard-shell.is-collapsed .sy-mgmt-brand .sy-brand > span:last-child { display: inline; }
    .sy-dashboard-shell .metrics, .sy-dashboard-shell .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}

.sy-system-tabs { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; border-bottom: 1px solid var(--sy-border); margin: -6px 0 28px; }
.sy-system-tabs a, .sy-system-tab-disabled { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 14px 16px; font-size: 13px; font-weight: var(--sy-control-font-weight); text-decoration: none; color: var(--sy-muted); border-bottom: 3px solid transparent; }
.sy-system-tabs a:hover { color: var(--sy-action); background: #edf3fa; }
.sy-system-tabs a.is-active { color: var(--sy-action); border-bottom-color: var(--sy-accent); }
.sy-system-tabs a:focus-visible { outline: 2px solid var(--sy-action); outline-offset: -3px; }
.sy-system-tab-disabled { color: #718398; font-weight: 400; }
.sy-system-tab-disabled small { font-size: 10px; background: #e9edf2; padding: 2px 5px; border-radius: 4px; }
@media (max-width: 760px) { .sy-system-tabs { margin-bottom: 20px; } .sy-system-tabs a, .sy-system-tab-disabled { padding: 12px; } }

.sy-storage-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-bottom: 24px; }
.sy-storage-node, .sy-storage-add { padding: 24px; }
.sy-storage-node p { overflow-wrap: anywhere; font-size: 13px; }
.sy-storage-node small { font-size: 12px; color: var(--sy-muted); }
.sy-storage-meter { width: 100%; height: 12px; accent-color: #27875b; }
.sy-storage-node-footer { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 20px; }
.sy-storage-form { max-width: 640px; }
.sy-storage-form .field { margin: 16px 0; }

.sy-role-choice.is-selected { border-color: var(--sy-primary, #193e6b); background: #edf5fc; box-shadow: inset 0 0 0 1px #193e6b; }
.sy-node-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin:20px 0; }
.sy-node-metrics > div { display:grid; gap:6px; padding:16px; border:1px solid #e0e6ed; border-radius:8px; }
.sy-node-metrics strong { font-size:1.4rem; }
.sy-node-metrics small { color:#546c83; }
.sy-node-load .sy-table { min-width:760px; }

.sy-standalone-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .sy-standalone-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sy-standalone-metrics { grid-template-columns: minmax(0, 1fr); } }

.sy-node-primary-label { display: inline-block; margin-inline-start: 8px; padding: 2px 6px; border-radius: 4px; background: var(--sy-info-surface); color: var(--sy-action); font-size: 12px; font-weight: var(--sy-control-font-weight); vertical-align: middle; }
.sy-node-host { display: block; margin-top: 3px; color: var(--sy-muted); font-size: 12px; overflow-wrap: anywhere; }
.sy-primary-host { overflow-wrap: anywhere; }
.sy-primary-service { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--sy-border); }
.sy-primary-service > .sy-mgmt-icon { flex: 0 0 20px; color: var(--sy-action); }
.sy-primary-service strong { display: block; font-size: 14px; font-weight: var(--sy-control-font-weight); }
.sy-primary-service small { display: block; margin-top: 4px; color: var(--sy-muted); font-size: 12px; }
.sy-primary-service-state { margin-inline-start: auto; text-align: right; }
@media (max-width: 600px) {
    .sy-primary-service { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
    .sy-primary-service-state { flex-basis: 100%; margin-inline-start: 30px; text-align: left; }
}

/* Shared chrome: compact navigation, readable controls, and one disclosure affordance. */
.sy-management .sy-mgmt-brand { padding-bottom: 16px; }
.sy-management .sy-mgmt-nav-label { font-size: var(--sy-font-meta); margin-top: 16px; }
.sy-management .sy-mgmt-sidebar-bottom > a { font-size: var(--sy-font-body); }
.sy-management .sy-mgmt-account-link { width: 44px; height: 44px; flex: 0 0 44px; text-decoration: none; font-weight: var(--sy-control-font-weight); }
.sy-management .sy-mgmt-topbar-alerts { min-width: 44px; min-height: 44px; border-radius: var(--sy-control-radius); }
.sy-management .sy-mgmt-topbar-alerts:hover { background: var(--sy-surface-hover); }
.sy-management .sy-mgmt-sidebar-toggle { min-width: 44px; min-height: 44px; }
.sy-management .sy-mgmt-brand { grid-template-columns: minmax(0, 1fr) 44px; }
.sy-system-tabs { margin-bottom: 20px; gap: 4px; }
.sy-system-tabs a { min-height: 44px; padding: 10px 16px; font-size: var(--sy-font-body); }
.sy-management .sy-disclosure > summary { font-size: var(--sy-font-body); }
.sy-management .sy-disclosure > summary::before,
.sy-management .sy-disclosure[open] > summary::before { content: none; }
.sy-management .sy-settings-change-state:empty { display: none; }
.sy-management .sy-mgmt-main:focus { outline: none; }
@media (max-width: 760px) {
    .sy-management .sy-mgmt-sidebar, .sy-management.is-collapsed .sy-mgmt-sidebar { top: 70px; height: calc(100dvh - 70px); }
    .sy-management .sy-mgmt-topbar > .sy-mgmt-account-link { display: grid; }
    .sy-management .sy-mgmt-breadcrumb { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sy-font-meta); }
    .sy-management .sy-mgmt-account-link { margin-left: auto; }
    .sy-management .sy-mgmt-topbar-alerts + .sy-mgmt-account-link { margin-left: 0; }
    .sy-management.is-collapsed .sy-mgmt-brand { grid-template-columns: minmax(0, 1fr) 44px; }
}
@media (max-width: 1000px) {
    .sy-management .sy-mgmt-topbar > .sy-language-switcher { margin-left: auto; }
    .sy-management .sy-mgmt-topbar-alerts, .sy-management .sy-mgmt-account-link { margin-left: 0; }
}