:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  --canvas: #202b31;
  --surface: #29363e;
  --surface-raised: #30414a;
  --line: #40515c;
  --text: #eaf1f5;
  --muted: #aab9c4;
  --blue: #6eb8e8;
  --blue-deep: #164768;
  --sidebar: #b6c3cf;
  --sidebar-text: #314552;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; color: var(--text); background: var(--canvas); }
button, input { font: inherit; }
button { cursor: pointer; }
select { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #526875; border-radius: 7px; background: #202d35; color: var(--text); font: inherit; font-size: 13px; }
textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #526875; border-radius: 7px; background: #202d35; color: var(--text); font: inherit; font-size: 13px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.storage-profile { margin: 16px 0; }
.storage-config-form { gap: 12px; }
.storage-config-form [hidden] { display: none !important; }
.storage-config-form [data-storage-kinds] { gap: 10px; }
.storage-config-form .storage-inspector { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #19272f; }
.storage-config-form .storage-inspector .form-row { margin-bottom: 10px; }
.storage-inspector-result { max-height: 250px; overflow: auto; margin-top: 10px; }
.storage-inspector-result:empty { display: none; }
.storage-inspector-result table { width: 100%; }
.storage-tree-link { border: 0; background: transparent; color: var(--blue); padding: 3px 0; text-align: left; }
.storage-operation { margin: 14px 0; }
.operation-result pre { max-height: 360px; overflow: auto; padding: 15px; border-radius: 7px; background: #101a20; color: #c8e7f5; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.app-shell { display: flex; width: 100%; height: 100vh; min-height: 100vh; overflow: hidden; }
.sidebar {
  width: 220px;
  flex: 0 0 220px;
  height: 100vh;
  min-height: 0;
  position: sticky;
  top: 0;
  overflow: visible;
  padding: 22px 15px 14px;
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  color: var(--sidebar-text);
  box-shadow: inset -1px 0 #d3dce3;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 6px 19px;
  color: #203e54;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 2px solid #267cbb;
  border-radius: 50%;
  color: #267cbb;
  font-size: 17px;
  font-style: italic;
  letter-spacing: -2px;
}
.brand-accent { color: #277eb7; }
.brand-logo { display: flex; justify-content: center; width: 100%; padding: 2px 3px 18px; }
.brand-logo img { display: block; width: 100%; max-height: 64px; object-fit: contain; }
.sidebar .brand-logo { padding: 8px; margin-bottom: 15px; border-radius: 9px; background: #f8fafc; }
.tenant-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 39px;
  margin-bottom: 24px;
  padding: 5px 9px;
  border-radius: 18px;
  background: #d6e0e8;
  color: #305775;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .25px;
}
.tenant-avatar { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: #bdd0df; color: #287eb9; font-size: 18px; }
.tenant-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-section-label { padding: 0 10px 9px; color: #587080; font-size: 10px; font-weight: 750; letter-spacing: 1.5px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-link { display: flex; align-items: center; gap: 10px; min-height: 39px; padding: 0 11px; border-radius: 8px; color: #324d60; font-size: 13px; font-weight: 650; }
.nav-link:hover { background: #ccd9e2; text-decoration: none; }
.nav-link.active { background: #21445b; color: #f3f8fb; }
.nav-link.active:hover { background: #1b3c52; }
.nav-icon { display: inline-grid; place-items: center; width: 20px; color: inherit; font-size: 17px; font-weight: 500; }
.sidebar-spacer { flex: 1; min-height: 12px; }
.profile-card { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px; border-radius: 10px; background: #20323e; color: #fff; }
.sidebar-user { position: relative; width: 100%; flex: 0 0 auto; }
.sidebar-user > .profile-card { width: 100%; min-height: 50px; padding: 5px 7px; border: 1px solid #36464f; border-radius: 12px; text-align: left; }
.sidebar-user > .profile-card:hover, .sidebar-user > .profile-card[aria-expanded="true"] { background: #1d2c35; }
.sidebar-user-menu { position: absolute; z-index: 30; right: 0; bottom: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: 0; padding: 7px 10px; border: 1px solid #36464f; border-radius: 13px; background: #17232b; box-shadow: 0 12px 30px #07101680; }
.sidebar-user-menu[hidden] { display: none; }
.sidebar-user-menu a, .sidebar-user-menu button:not(.sign-out):not(.menu-toggle) { display: flex; align-items: center; justify-content: flex-start; gap: 7px; min-height: 32px; padding: 0 5px; border: 0; border-radius: 7px; background: transparent; color: #dce4e8; text-align: left; font-size: 13px; font-weight: 600; text-decoration: none; }
.sidebar-user-menu a:hover, .sidebar-user-menu button:not(.sign-out):not(.menu-toggle):hover { background: #24343d; text-decoration: none; }
.sidebar-user-menu form { margin: 0; }
.sidebar-user-menu form button:not(.sign-out):not(.menu-toggle) { width: 100%; justify-content: flex-start; padding: 0 5px; color: #f08b9e; text-align: left; }
.sidebar-user-menu form button:not(.sign-out):not(.menu-toggle):hover { color: #ffadbb; }
.menu-external { margin-left: 0; color: #c9d4da; font-size: 15px; }
.profile-menu-caret { margin-left: auto; color: #dce4e8; font-size: 22px; font-weight: 700; line-height: 1; }
.profile-avatar { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border-radius: 50%; background: #2a7db2; font-weight: 700; }
.sidebar-user .profile-avatar { width: 34px; height: 34px; flex-basis: 34px; border: 1px solid #2b82df; border-radius: 8px; background: #0c4f91; font-size: 15px; }
.profile-avatar img { position: absolute; width: 100%; height: 100%; inset: 0; border-radius: inherit; object-fit: cover; }
.profile-avatar { position: relative; overflow: hidden; }
.profile-details { flex: 1; min-width: 0; }
.profile-details strong, .profile-details span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-details strong { font-size: 11px; }
.profile-details span { margin-top: 2px; color: #adc0cd; font-size: 9px; }
.sidebar-user .profile-details strong { color: #d8e0e4; font-size: 14px; line-height: 1.1; }
.sidebar-user .profile-details span { margin-top: 2px; color: #a5b2bb; font-size: 10px; }
.profile-details .profile-role { color: #69bde9; }
.sidebar-user .profile-details .profile-role { color: #38a7f4; font-size: 10px; font-weight: 650; }
.profile-card form { margin: 0; }
.sign-out { border: 0; background: transparent; color: #b6d4e8; font-size: 20px; line-height: 1; padding: 2px; }
.sign-out:hover { color: #fff; }

.workspace { display: flex; height: 100vh; min-width: 0; flex: 1; flex-direction: column; overflow: hidden; }
.topbar { display: flex; flex: 0 0 44px; align-items: center; justify-content: space-between; gap: 16px; height: 44px; padding: 0 24px; border-bottom: 1px solid var(--line); background: #29353d; }
.topbar-title { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 13px; }
.topbar-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.topbar-kicker { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 1.7px; }
.topbar-divider, .topbar-context { color: #8295a3; }
.topbar-context { font-size: 11px; white-space: nowrap; }
.menu-toggle { display: none; border: 0; background: transparent; color: var(--text); font-size: 21px; padding: 4px; }
.content { width: min(100%, 1520px); min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; margin: 0 auto; padding: 14px 24px 28px; }
.eyebrow { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
h1 { margin: 2px 0; font-size: clamp(24px, 2.2vw, 28px); font-weight: 650; letter-spacing: -.6px; line-height: 1.2; }
h2 { margin: 0 0 20px; font-size: 16px; font-weight: 650; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.heading p { margin: 6px 0 0; }
.section-heading { margin: 20px 0 12px; }
.section-heading h2 { margin: 0; }
.card { padding: 23px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 3px 12px #0a111514; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.metrics .card { min-height: 114px; border-top: 2px solid #356687; }
.metrics span { color: var(--muted); font-size: 12px; }
.metrics strong { display: block; margin-top: 11px; font-size: 31px; font-weight: 650; line-height: 1; }
.client-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.client-metrics .card { min-width: 0; min-height: 98px; padding: 13px 14px; overflow-wrap: anywhere; }
.client-metrics span { font-size: 11px; }
.client-metrics strong { margin-top: 7px; font-size: 20px; line-height: 1.15; }
.client-metrics small { font-size: 10px; line-height: 1.3; }
.green { color: #7cd6ae; }
.table-wrap { padding: 0; overflow: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { padding: 16px 18px; border-bottom: 1px solid var(--line); background: #26343d; color: #9cb3c3; font-size: 10px; font-weight: 750; letter-spacing: .75px; text-transform: uppercase; }
td { padding: 17px 18px; border-top: 1px solid #34434a; font-size: 12px; }
td a { color: #eef5f8; font-weight: 650; }
td a:hover { color: var(--blue); }
small { display: block; margin-top: 5px; color: #899ba7; font-size: 11px; }
.badge { display: inline-block; padding: 5px 10px; border-radius: 20px; background: #35434b; color: #c8d4db; font-size: 11px; font-weight: 650; }
.badge.online { background: #21483d; color: #8de5ba; }
.badge.offline { background: #51382f; color: #ffb9a4; }
.badge.warning { background: #f4e9b8; color: #554719; }
.empty { padding: 45px; color: var(--muted); text-align: center; white-space: normal; }
.columns { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 19px; margin-top: 28px; align-items: start; }
.client-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 2px; border-top: 1px solid var(--line); color: var(--text); }
.client-row:hover { color: var(--blue); text-decoration: none; }
.client-row strong { font-size: 13px; }
.client-row > span { color: var(--blue); }
.stack { display: flex; flex-direction: column; gap: 17px; }
.stack h2, .stack p { margin: 0; }
label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 650; }
input { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #526875; border-radius: 7px; background: #202d35; color: var(--text); font-size: 13px; }
input:focus { border-color: var(--blue); outline: 2px solid #70bbe840; outline-offset: 1px; }
input[readonly] { color: #cbe8f8; }
button:not(.sign-out):not(.menu-toggle), .button { display: inline-flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; padding: 10px 15px; border: 1px solid #80c5ef; border-radius: 7px; background: var(--blue); color: #173344; font-size: 12px; font-weight: 750; line-height: 1.25; }
button:not(.sign-out):not(.menu-toggle):hover, .button:hover { background: #90c9ed; text-decoration: none; }
.button.client-access { background: #0864e8; border-color: #0785f8; color: #fff; }
.button.client-access:hover { background: #087cf3; }
.client-name-link { color: var(--text); font-weight: 650; }
.client-name-link:hover { color: #67b7ff; text-decoration: underline; }
button:not(.sign-out):not(.menu-toggle).client-delete { background: #f3a6a2; border-color: #e47a76; color: #451b20; }
button:not(.sign-out):not(.menu-toggle).client-delete:hover { background: #ffc0bb; }
button:not(.sign-out):not(.menu-toggle).profile-card { width: 100%; min-height: 50px; justify-content: flex-start; padding: 5px 7px; border: 1px solid #36464f; border-radius: 12px; background: #20323e; color: #fff; text-align: left; }
button:not(.sign-out):not(.menu-toggle).profile-card:hover { background: #294352; }
.narrow { max-width: 710px; margin: 25px 0; }
dl { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 15px; margin: 0; font-size: 12px; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
.notice, .error { padding: 14px 16px; margin-bottom: 22px; border-radius: 7px; font-size: 13px; }
.notice { border: 1px solid #337d66; background: #1a4036; color: #b9efd6; }
.error { border: 1px solid #a45c49; background: #4a2b28; color: #ffcebd; }
.warning-note { padding: 12px 14px; border: 1px solid #a45c49; border-radius: 7px; background: #4a2b28; color: #ffcebd; }
.warning-note.gfs-quota-warning { border-color: #bd9b49; background: #4b442d; color: #f5e7b1; }
.gfs-preview-dialog { width: min(900px, 94vw); max-height: 88vh; overflow: auto; }
.notice, .error { cursor: pointer; transition: opacity .18s ease, transform .18s ease; }
.notice-dismissed { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--blue); text-decoration: underline; }
.back { display: inline-block; margin: 0 0 17px; font-size: 12px; }
.client-back { margin-bottom: 5px; }
.client-heading { margin-top: 0; margin-bottom: 10px; }
.client-heading .client-title { display: flex; align-items: baseline; gap: 10px; }
.client-heading .client-title h1 { margin: 0; font-size: 24px; }
.client-heading .client-title .muted { font-size: 10px; }
code { overflow-wrap: anywhere; font-family: Consolas, monospace; }

.guest-shell { min-height: 100vh; background: radial-gradient(circle at 18% 24%, #294758 0, #192329 42%, #151e24 100%); }
.guest-content { width: min(100%, 1160px); min-height: 100vh; margin: auto; padding: 28px; display: grid; align-items: center; }
.login { display: grid; grid-template-columns: 1fr minmax(330px, 430px); align-items: center; gap: clamp(45px, 8vw, 110px); }
.login-intro .brand { width: max-content; padding: 0 0 65px; color: #e9f2f8; font-size: 30px; }
.login-intro .brand-mark { width: 38px; height: 38px; font-size: 23px; }
.login-logo { display: grid; place-items: center; width: min(100%, 420px); min-height: 76px; margin-bottom: 52px; padding: 8px 14px; border-radius: 9px; background: #dce6ed; }
.login-logo img { display: block; width: 100%; max-height: 80px; object-fit: contain; }
.platform-login-logo { display: grid; place-items: center; width: min(100%, 420px); min-height: 76px; margin-bottom: 52px; padding: 8px 14px; border-radius: 9px; background: #dce6ed; }
.platform-login-logo img { display: block; width: 100%; max-height: 80px; object-fit: contain; }
.login h1 { max-width: 510px; margin: 13px 0; font-size: clamp(37px, 5vw, 56px); line-height: 1.08; }
.login-intro p { max-width: 440px; }
.login-form { padding: 30px; }
.login-form h2 { margin-bottom: 6px; font-size: 22px; }
.login-form > p { margin: 0 0 23px; }
.login-form form { display: flex; flex-direction: column; gap: 18px; }
.login-form button { width: 100% !important; margin-top: 4px; }
.login-footnote { margin-top: 20px; }
.platform-switch-link { display: inline-block; margin-top: 18px; font-size: 12px; font-weight: 650; }
.sidebar-backdrop { display: none; }

.task-steps { display: flex; gap: 8px; overflow-x: auto; padding: 3px 2px 15px; margin: 20px 0 8px; }
button.task-step { flex: 0 0 auto; gap: 8px; background: #253640; border-color: #405765; color: #d9e7ee; }
button.task-step span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #13252f; color: #a5d8f6; }
button.task-step.active { background: #5eaee0; border-color: #9bd8fa; color: #102838; }
button.task-step.active span { background: #18445f; color: #fff; }
button.task-step:disabled { opacity: .43; cursor: not-allowed; }
.task-panel[hidden] { display: none; }
.task-panel .card { max-width: 900px; }
.task-step-actions { display: flex; align-items: center; gap: 15px; margin: 22px 0 35px; }
.task-step-actions [data-task-progress] { color: var(--muted); font-size: 12px; }
.task-footer-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.task-step-actions button:disabled { opacity: .4; cursor: not-allowed; }
.task-action-group { display: inline-flex; overflow: hidden; border-radius: 8px; border: 1px solid #3a5260; }
.task-icon-action { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px; padding: 7px; border: 0; border-right: 1px solid #3a5260; cursor: pointer; color: #e8f4fa; }
.task-icon-action:last-child { border-right: 0; }
.task-icon-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.task-icon-action.view { background: #256993; }
.task-icon-action.edit { background: #b96516; }
.task-icon-action.logs { background: #31414b; }
.task-icon-action.delete { background: #a14350; }
.task-icon-action:hover { filter: brightness(1.2); }
.task-icon-action:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.clients-table th { padding: 10px 14px; }
.clients-table td { padding: 8px 14px; vertical-align: middle; }
.client-action-group { display: inline-flex; vertical-align: middle; overflow: hidden; border: 1px solid #49606d; border-radius: 6px; }
.clients-table .client-action-group .client-grid-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 32px; height: 30px; padding: 6px; margin: 0; border: 0; border-right: 1px solid #49606d; border-radius: 0; font-size: 11px; line-height: 1; color: #eef5f8; cursor: pointer; }
.client-action-group .client-grid-action:last-child { border-right: 0; }
.clients-table .client-action-group .client-grid-action.access { width: auto; padding-inline: 10px; background: #185680; color: #fff; }
.client-action-group .client-grid-action.edit { background: #31414b; }
.clients-table .client-action-group .client-grid-action.delete { background: #f3a6a2; color: #451b20; }
.client-grid-action svg { flex: 0 0 15px; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.client-action-group .client-grid-action:hover:not(:disabled) { filter: brightness(1.15); }
.client-action-group .client-grid-action:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.client-action-group .client-grid-action:disabled { opacity: .5; cursor: not-allowed; }

/* Form and record dialogs shared by tenant WebAdmin and SuperAdmin. */
dialog.data-dialog { width: min(720px, calc(100vw - 28px)); max-height: min(88vh, 1000px); margin: auto; padding: 24px; overflow: auto; border: 1px solid #537183; border-radius: 13px; background: var(--surface); color: var(--text); box-shadow: 0 24px 90px #071015b8; }
dialog.data-dialog::backdrop { background: #071218bd; backdrop-filter: blur(3px); }
.admin-shell dialog.data-dialog.source-filter-dialog { width: min(960px, calc(100vw - 28px)); }
.source-size-filter { min-width: 0; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 7px; }
.source-size-filter legend { padding: 0 5px; font-weight: 700; }
.source-size-control { display: grid; grid-template-columns: 160px 96px; justify-content: start; gap: 8px; min-width: 0; }
.source-size-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-shell .source-size-row label { display: grid !important; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.source-size-row label > span { text-align: right; }
.source-age-filter { min-width: 0; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 7px; }
.source-age-filter legend { padding: 0 5px; font-weight: 700; }
.source-age-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-shell .source-age-row { --form-label-width: 96px; }
.data-dialog .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.data-dialog .dialog-head strong { font-size: 16px; }
.data-dialog .dialog-head h2 { margin: 0; }
.data-dialog .dialog-close { display: grid !important; place-items: center; width: 34px !important; height: 34px; padding: 0 !important; border: 0 !important; border-radius: 6px; background: transparent !important; color: var(--text) !important; font-size: 25px !important; line-height: 1; }
.data-dialog .card { box-shadow: none; }
.data-dialog form.card { margin: 0; border: 0; padding: 0; background: transparent; }
.data-dialog .narrow { max-width: none; }
.data-dialog.page-dialog { width: min(1120px, calc(100vw - 28px)); max-height: 94vh; }
.page-dialog .task-panel .card { max-width: none; }
.page-dialog[data-readonly] form button:not([data-source-filter-open]) { display: none !important; }
.page-dialog[data-readonly] form[hidden] { display: none !important; }
.page-dialog[data-readonly] :disabled { opacity: 1; cursor: default; }
.task-editor-dialog { padding: 14px !important; }
.task-editor-dialog .dialog-head { margin-bottom: 9px; padding-bottom: 8px; }
.task-editor-dialog .task-editor-intro { margin: 0 0 8px; font-size: 11px; }
.task-editor-dialog .task-steps { gap: 6px; padding-bottom: 8px; margin: 8px 0 3px; }
.task-editor-dialog .task-panel .card { padding: 14px; }
.task-editor-dialog .stack { gap: 10px; }
.task-editor-dialog label { gap: 5px; font-size: 11px; }
.task-editor-dialog input, .task-editor-dialog select, .task-editor-dialog textarea { padding: 8px 10px; font-size: 12px; }
.task-editor-dialog textarea { resize: vertical; }
.task-editor-dialog .task-step-actions { gap: 10px; margin: 12px 0 0; }
.task-editor-dialog .is-disabled { opacity: .5; }
.task-editor-dialog [hidden] { display: none !important; }
.task-location, .task-action-entry, .task-source-entry { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.task-browser { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.task-browser-tree { max-height: 230px; overflow: auto; margin-top: 8px; }
.task-browser-tree table { width: 100%; }
.task-browser-tree td, .task-browser-tree th { padding: 5px 7px; font-size: 11px; }
.task-browser-tree button { padding: 2px 5px; font-size: 11px; }
.admin-shell .task-schedule-heading { margin: 0; }
.task-grid-header-actions { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-width: 130px; }
.admin-shell .task-grid-header-actions .task-add-button { flex: 0 0 auto; min-height: 28px; height: 28px; padding: 3px 10px; border: 1px solid #459563; border-radius: 5px; background: #33824f; color: #fff; font-size: 11px; line-height: 1; }
.admin-shell .task-grid-header-actions .task-add-button:hover { background: #3d985d; }
.task-action-icon { display: inline-grid; place-items: center; width: 32px; min-width: 32px; height: 30px; min-height: 30px; padding: 0 !important; }
.task-action-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.task-actions-table th:first-child, .task-actions-table td:first-child, [data-draft-schedules] > tr > td:first-child { width: 62px; text-align: center; }
.task-actions-table td:first-child input, [data-draft-schedules] > tr > td:first-child input { width: auto; min-width: 0; height: auto; margin: 0; vertical-align: middle; }
.task-actions-table tr.is-disabled td:not(:first-child), [data-draft-schedules] tr.is-disabled td:not(:first-child) { opacity: .55; }
.task-location[data-kind-source="destination"] { border: 0; padding: 0; }
.admin-shell .task-location .destination-root-field { display: grid; grid-template-columns: var(--form-label-width, 140px) minmax(0, 1fr); align-items: center; gap: 6px 10px; min-width: 0; }
.admin-shell .destination-root-field > .form-label-caption { grid-column: 1; grid-row: 1; text-align: right; }
.destination-path-control, .output-name-control { display: flex; grid-column: 2; min-width: 0; }
.destination-path-control input, .output-name-control input { flex: 1 1 auto; min-width: 0; }
.admin-shell .destination-path-control .destination-browse-button { display: inline-grid; flex: 0 0 42px; place-items: center; width: 42px; min-width: 42px; height: 38px; padding: 0; border-radius: 0 6px 6px 0; }
.admin-shell .output-name-control .output-token-button { display: inline-grid; flex: 0 0 42px; place-items: center; width: 42px; min-width: 42px; height: 38px; padding: 0; border-radius: 0 6px 6px 0; }
.destination-path-control input { border-radius: 6px 0 0 6px; }
.output-name-control input { border-radius: 6px 0 0 6px; }
.destination-browse-button svg { width: 20px; height: 20px; fill: #f3c64e; stroke: #9a6a0b; stroke-width: 1.4; stroke-linejoin: round; }
.output-token-button { font-weight: 800; letter-spacing: -2px; }
.admin-shell form .output-name-field { display: grid; grid-template-columns: var(--form-label-width, 140px) minmax(0, 1fr); align-items: center; gap: 6px 10px; min-width: 0; }
.admin-shell .output-name-field > .form-label-caption { grid-column: 1; grid-row: 1 / span 2; text-align: right; }
.admin-shell .output-name-field > .output-name-control, .admin-shell .output-name-field > .output-name-result { grid-column: 2; }
.output-name-result { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.output-name-result strong { color: var(--muted); }
.output-name-result [data-output-preview] { color: var(--muted); overflow-wrap: anywhere; }
.output-token-dialog { width: min(560px, calc(100vw - 28px)); }
.admin-shell dialog.destination-browser-dialog { width: min(1100px, calc(100vw - 28px)); }
.destination-browser-dialog .task-browser-tree { max-height: min(65vh, 640px); }
.destination-browser-fallback { margin-top: 8px; }
.output-token-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; }
.output-token-table th, .output-token-table td { padding: 8px 11px; text-align: left; }
.output-token-table th { background: #21445b; color: #fff; font-size: 12px; }
.output-token-table td { background: var(--surface); color: var(--text); border-top: 1px solid var(--line); }
.output-token-table tbody tr:hover td { background: var(--surface-raised, #293b45); }
.admin-shell dialog.data-dialog .output-token-table tbody td button { display: block; width: 100%; padding: 2px 4px; border: 0 !important; border-radius: 0; background: transparent !important; color: var(--text) !important; text-align: left; box-shadow: none; }
.admin-shell dialog.data-dialog .output-token-table tbody td button:hover, .admin-shell dialog.data-dialog .output-token-table tbody td button:focus-visible { background: transparent !important; color: var(--blue) !important; }
.output-token-table code { color: inherit; font-weight: 800; }
.page-dialog[data-readonly] [data-output-token-open] { display: none !important; }
.credential-form { gap: 12px; }
.credential-form [hidden] { display: none !important; }
.modal-trigger { margin: 8px 0; }
.list-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.list-filters label { min-width: 180px; flex: 1 1 190px; }
.list-filters button, .list-filters .button { flex: 0 0 auto; }
.row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.record-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 30px 0 18px; border-bottom: 1px solid var(--line); }
.record-tabs a { padding: 11px 18px; color: var(--muted); font-weight: 650; border-bottom: 3px solid transparent; }
.record-tabs a.active { color: var(--text); border-color: var(--blue); }
.pagination { margin: 16px 0; }
.pagination { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.button.secondary, button.secondary { background: #394d59 !important; border-color: #668497 !important; color: #edf5f8 !important; }
.button.secondary:hover, button.secondary:hover { background: #486271 !important; }
.task-steps button.task-step { background: #253640; border-color: #405765; color: #d9e7ee; }
.task-steps button.task-step.active { background: #5eaee0; border-color: #9bd8fa; color: #102838; }
.tv-shell { min-height: 100vh; padding: clamp(18px, 3vw, 52px); }
.tv-header { display: flex; align-items: center; gap: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.tv-header img { width: min(300px, 35vw); background: #dce6ed; border-radius: 8px; padding: 5px 10px; }
.tv-header h1 { margin: 0; }
.tv-shell main { margin-top: 20px; }
.tv-shell .metrics { margin-bottom: 22px; }

/* Platform controls */
.platform-shell .sidebar { width: 236px; flex-basis: 236px; }
.platform-shell .platform-context { margin-bottom: 22px; background: #d5e0e8; }
.platform-card-list { display: grid; gap: 13px; }
.platform-create-form { margin: 25px 0 30px; }
.platform-create-form h2 { margin-bottom: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-span { grid-column: 1 / -1; }
.check-label { display: flex; flex-direction: row; align-items: center; gap: 9px; font-weight: 500; }
.check-label input { width: auto; }
.platform-tenant-card { display: grid; gap: 13px; }
.platform-tenant-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.platform-tenant-summary strong { font-size: 15px; }
.platform-tenant-stats { display: flex; flex-wrap: wrap; gap: 8px 23px; color: var(--muted); font-size: 11px; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row-actions form { margin: 0; }
.smtp-form-actions .smtp-test-action { margin-left: auto; background: #c8efda !important; border-color: #96cfb0 !important; color: #174b32 !important; }
.secondary-action { background: #31414b !important; border-color: #526977 !important; color: #e1ecf2 !important; }
button.warning-action { background: #614b2c; border-color: #a7874f; color: #ffe0a1; }
button.danger-action { background: #5b3433; border-color: #a76660; color: #ffd1ca; }
.inline-details { position: relative; }
.inline-details summary { padding: 9px 12px; border: 1px solid #526977; border-radius: 7px; color: #d9e6ed; cursor: pointer; font-size: 12px; }
.inline-details[open] { flex: 1 1 100%; }
.platform-inline-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; width: 100%; padding: 16px; margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; background: #1b272e; }
.platform-inline-form button { grid-column: 1 / -1; }
.plan-item summary { display: flex; flex-wrap: wrap; gap: 14px 25px; align-items: center; cursor: pointer; color: var(--muted); font-size: 12px; }
.plan-item summary strong { color: var(--text); font-size: 14px; }
.plan-edit-form { margin-top: 20px; }
.platform-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.platform-metrics-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52%; margin-top: 12px; }
.platform-metrics-secondary .card { min-height: 90px; }
.guest-shell .platform-login { max-width: 1020px; margin: auto; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 18px 0 24px; }
.recovery-codes code { padding: 10px; text-align: center; background: #0f1a20; border: 1px solid var(--line); border-radius: 6px; color: #c8e7f5; }
.button-link { display: block; padding: 12px 16px; border-radius: 7px; background: var(--accent); color: #07131a; text-align: center; text-decoration: none; font-weight: 700; }
.profile-page-grid { display: grid; gap: 14px; max-width: 900px; margin-top: 17px; }
.profile-summary { display: flex; align-items: center; gap: 18px; }
.profile-summary h2 { margin: 0 0 4px; }
.profile-summary p { margin: 0 0 3px; color: var(--muted); font-size: 13px; }
.profile-summary small { color: var(--blue); font-size: 11px; }
.profile-summary > button { margin-left: auto; }
.profile-avatar-large { width: 68px; height: 68px; flex-basis: 68px; font-size: 24px; }
.profile-security-icon { display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 54px; border: 1px solid #426274; border-radius: 12px; color: var(--blue); font-size: 27px; }
.about-dialog { width: min(560px, calc(100vw - 28px)) !important; }
.about-tenant { padding: 2px 0 14px; border-bottom: 1px solid var(--line); }
.about-tenant h3 { margin: 5px 0; font-size: 20px; }
.about-tenant p { margin: 0; font-size: 12px; }
.about-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; padding: 16px 0; }
.about-plan-grid div { display: flex; flex-direction: column; gap: 5px; }
.about-plan-grid small { color: var(--muted); font-size: 11px; }
.about-plan-grid strong { font-size: 13px; }

/* Moderate density shared by WebAdmin and SuperAdmin. Keep specialized controls intact. */
.admin-shell .content, .admin-shell .data-dialog { font-size: 14px; }
.admin-shell h2 { margin-bottom: 14px; }
.admin-shell .heading { gap: 14px; }
.admin-shell .heading p { margin-top: 4px; }
.admin-shell .section-heading { gap: 14px; margin: 16px 0 10px; }
.admin-shell .section-heading h2, .admin-shell .stack h2, .admin-shell .dialog-head h2 { margin: 0; }
.admin-shell .card:where(:not(.table-wrap)) { padding: 18px; }
.admin-shell .metrics { gap: 12px; margin-top: 16px; }
.admin-shell .metrics:not(.client-metrics) .card { min-height: 100px; }
.admin-shell .metrics:not(.client-metrics) strong { margin-top: 8px; font-size: 28px; }
.admin-shell .client-metrics { gap: 10px; margin-top: 10px; }
.admin-shell .client-metrics .card { padding: 11px 12px; min-height: 88px; }
.admin-shell .table-wrap th { padding: 11px 14px; }
.admin-shell .table-wrap td { padding: 11px 14px; }
.admin-shell .clients-table td { padding: 8px 14px; }
.admin-shell .columns { gap: 16px; margin-top: 20px; }
.admin-shell .client-row { padding: 12px 2px; }
.admin-shell .stack { gap: 13px; }
.admin-shell label { gap: 6px; }
.admin-shell :is(.content, .data-dialog) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) { padding: 9px 11px; }
.admin-shell :is(.content, .data-dialog) :is(button, .button):where(:not(.client-grid-action):not(.task-icon-action):not(.dialog-close):not(.task-step):not(.storage-tree-link)) { padding: 8px 12px; }
.admin-shell .form-row, .admin-shell .form-grid { gap: 12px; }
.admin-shell .narrow { margin: 18px 0; }
.admin-shell dl { gap: 12px; }
.admin-shell .notice, .admin-shell .error { padding: 11px 14px; margin-bottom: 16px; }
.admin-shell .list-filters { gap: 10px; margin: 16px 0; }
.admin-shell .record-tabs { margin: 20px 0 14px; }
.admin-shell .record-tabs a { padding: 9px 14px; font-size: 13px; }
.admin-shell dialog.data-dialog { padding: 20px; }
.admin-shell .data-dialog .dialog-head { gap: 16px; margin-bottom: 14px; padding-bottom: 10px; }
.admin-shell .data-dialog form.card { padding: 0; margin: 0; }
.admin-shell .task-editor-dialog .task-panel .card { padding: 14px; }
.admin-shell .task-editor-dialog .stack { gap: 10px; }
.admin-shell .task-editor-dialog label { gap: 5px; }
.admin-shell .task-editor-dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) { padding: 8px 10px; }
.admin-shell .task-browser-tree :is(td, th), .admin-shell .storage-inspector-result :is(td, th) { padding: 5px 7px; }
.admin-shell .platform-tenant-card { gap: 10px; }
.admin-shell .platform-inline-form { gap: 11px; padding: 14px; }

/* Form captions share a left column; list filters retain their compact toolbar layout. */
.admin-shell form:where(:not(.list-filters)) label:where(:has(> input:not([type=checkbox]):not([type=radio]):not([type=hidden]), > select, > textarea)) { display: grid; grid-template-columns: var(--form-label-width, 140px) minmax(0, 1fr); align-items: center; gap: 6px 10px; min-width: 0; }
.admin-shell form:where(:not(.list-filters)) label > :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea, small) { grid-column: 2; min-width: 0; }
.admin-shell form label > small { margin-top: 0; }
.admin-shell .form-label-caption { grid-column: 1; grid-row: 1; text-align: right; }
.admin-shell form label:has(> .form-label-caption) { column-gap: 10px; }
.admin-shell :is(.form-row, .form-grid, .platform-inline-form) { --form-label-width: 140px; }
.admin-shell form label:where(:has(> input:is([type=checkbox], [type=radio]))) { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.admin-shell form label > input:is([type=checkbox], [type=radio]) { width: auto; flex: 0 0 auto; }

@media (max-width: 1050px) {
  .admin-shell .task-location .destination-root-field, .admin-shell form .output-name-field { grid-template-columns: minmax(0, 1fr); }
  .admin-shell .destination-root-field > .form-label-caption, .admin-shell .output-name-field > .form-label-caption { grid-column: 1; grid-row: auto; text-align: left; }
  .destination-path-control, .output-name-control, .admin-shell .output-name-field > .output-name-result { grid-column: 1; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .columns { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .client-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: min(285px, 85vw); transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-open .sidebar-backdrop { display: block; position: fixed; z-index: 19; inset: 0; background: #071016b8; }
  .menu-toggle { display: block; }
  .topbar { padding: 0 17px; }
  .topbar-context { display: none; }
  .content { padding: 12px 16px 24px; }
  .heading { align-items: flex-start; flex-direction: column; }
  .guest-content { padding: 28px 20px; }
  .login { display: block; }
  .login-intro .brand { padding-bottom: 30px; }
  .login-logo, .platform-login-logo { margin-bottom: 30px; }
  .login h1 { font-size: 36px; }
  .login-form { margin-top: 26px; }
  .platform-columns { grid-template-columns: 1fr; }
  .profile-summary { flex-wrap: wrap; }
  .profile-summary > button { margin: 0 0 0 auto; }
  .about-plan-grid { grid-template-columns: 1fr; }
  .admin-shell form:where(:not(.list-filters)) label:where(:has(> input:not([type=checkbox]):not([type=radio]):not([type=hidden]), > select, > textarea)) { grid-template-columns: minmax(0, 1fr); }
  .admin-shell form:where(:not(.list-filters)) label > :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea, small) { grid-column: 1; }
  .admin-shell .form-label-caption { text-align: left; }
}

/* Screens brought in from Stitch: task overview, execution history, guided
   editor and group modal. The markup keeps each existing operation intact. */
.task-summary-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:18px 0; }
.task-summary-card { display:flex; align-items:center; gap:12px; min-height:82px; padding:14px !important; background:#0f172a !important; }
.task-summary-card > .material-symbols-outlined { display:grid; place-items:center; width:32px; height:32px; border-radius:6px; color:#a0caff; background:#155e9c44; font-size:19px; }
.task-summary-card div { display:grid; gap:5px; }
.task-summary-card small { margin:0 !important; color:#94a3b8 !important; font:700 9px/1.1 'Manrope',sans-serif !important; letter-spacing:.06em; text-transform:uppercase; }
.task-summary-card strong { color:#f8fafc; font:600 23px/1 'JetBrains Mono',monospace; }
.task-summary-card.success { border-left:3px solid #10b981 !important; }.task-summary-card.success > .material-symbols-outlined { color:#10b981;background:#064e3b99; }
.task-summary-card.warning { border-left:3px solid #f59e0b !important; }.task-summary-card.warning > .material-symbols-outlined { color:#f59e0b;background:#78350f99; }
.task-summary-card.is-error { border-left:3px solid #ef4444 !important; }.task-summary-card.is-error > .material-symbols-outlined { color:#ef4444;background:#7f1d1d99; }
.task-summary-card.muted-card > .material-symbols-outlined { color:#94a3b8;background:#1e293b; }
.history-header { margin-top:14px; }.history-stream { display:inline-flex; align-items:center; gap:8px; color:#94a3b8; font:600 11px/1 'Manrope',sans-serif; }.history-stream > span { width:7px; height:7px; border-radius:50%; background:#06b6d4; box-shadow:0 0 0 4px #164e63; }
.task-editor-page { max-width:none !important; margin:-24px !important; min-height:calc(100vh - 56px); padding:24px !important; border:0 !important; border-radius:0 !important; background:#111418 !important; box-shadow:none !important; }
.task-editor-header { align-items:flex-start; margin-bottom:20px; }.task-editor-header h1 { margin:5px 0 4px; font-size:27px; }.task-editor-state { display:inline-flex; align-items:center; gap:7px; margin-top:9px; padding:7px 10px; border:1px solid #334155; border-radius:4px; color:#94a3b8; background:#0f172a; font:600 11px/1 'Manrope',sans-serif; }.task-editor-state .material-symbols-outlined { color:#a0caff; }
.task-editor-page .task-steps { position:sticky; top:0; z-index:3; margin:0 -24px 18px; padding:12px 24px; border-top:1px solid #1e293b; border-bottom:1px solid #334155; background:#0f172a; box-shadow:0 5px 12px rgba(0,0,0,.16); }
.task-editor-page .task-step { min-width:98px; color:#94a3b8 !important; background:transparent !important; border-color:transparent !important; border-radius:0 !important; }.task-editor-page .task-step span { color:#64748b; }.task-editor-page .task-step.active, .task-editor-page .task-step[aria-current='step'] { color:#d2e4ff !important; border-bottom:2px solid #a0caff !important; }.task-editor-page .task-step.active span, .task-editor-page .task-step[aria-current='step'] span { background:#155e9c; color:#fff; }
.task-editor-page .task-panel > .card { max-width:1120px; padding:22px; background:#0f172a !important; }.task-editor-page .editor-step-footer { position:sticky; bottom:-24px; z-index:3; margin:24px -24px -24px; padding:13px 24px; border-top:1px solid #334155; background:#0f172a; }
.data-dialog { color:#e1e2e8; border:1px solid #334155; border-radius:8px; background:#0f172a; box-shadow:0 4px 16px rgba(0,0,0,.45); }.data-dialog::backdrop { background:rgba(11,15,25,.76); }.data-dialog .dialog-head { padding:18px 20px; border-bottom:1px solid #334155; background:#191c20; }.data-dialog .dialog-head h2 { color:#f8fafc; }.data-dialog form,.data-dialog > p,.data-dialog > .card,.data-dialog > .row-actions { margin-left:20px; margin-right:20px; }.data-dialog form { padding-bottom:20px; }.data-dialog .group-form-tabs { margin:0; padding:6px; border:1px solid #334155; border-radius:6px; background:#0c0e12; }.data-dialog .group-form-tabs button { background:transparent !important; border-color:transparent !important; color:#94a3b8 !important; }.data-dialog .group-form-tabs button.active { background:#155e9c !important; color:#f8fafc !important; }
@media (max-width:1100px) { .task-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .task-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.history-stream,.task-editor-state { display:none; }.task-editor-page { margin:-16px !important; padding:16px !important; }.task-editor-page .task-steps { margin:0 -16px 16px; padding:9px 16px; overflow:auto; }.task-editor-page .editor-step-footer { margin:24px -16px -16px; padding:12px 16px; } }
@media (max-height: 620px) {
  .sidebar { padding-top: 12px; padding-bottom: 10px; }
  .brand-logo { padding-bottom: 10px; }
  .brand-logo img { max-height: 46px; }
  .tenant-switch { min-height: 34px; margin-bottom: 12px; }
  .sidebar-section-label { padding-bottom: 6px; }
  .sidebar-nav { gap: 3px; }
  .nav-link { min-height: 34px; }
  .sidebar-spacer { min-height: 5px; }
  .profile-card { padding: 7px; }
  .sidebar-user > .profile-card { min-height: 48px; }
  .sidebar-user .profile-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .sidebar-user .profile-details strong { font-size: 13px; }
  .sidebar-user-menu a, .sidebar-user-menu button:not(.sign-out):not(.menu-toggle) { min-height: 30px; font-size: 12px; }
}
@media (max-width: 500px) {
  .form-row { grid-template-columns: 1fr; }
  .metrics { gap: 9px; }
  .metrics .card { min-height: 98px; padding: 15px; }
  .metrics span { font-size: 11px; }
  .metrics strong { font-size: 26px; }
  .client-metrics .card { min-height: 90px; padding: 12px; }
  .client-metrics strong { font-size: 18px; }
  .card { padding: 19px; }
  .table-wrap { padding: 0; }
  dl { grid-template-columns: 1fr; gap: 7px; }
  dd { margin-bottom: 9px; }
  .topbar-title { gap: 8px; }
  .topbar-kicker { display: none; }
  .topbar-divider { display: none; }
  .form-grid, .platform-inline-form { grid-template-columns: 1fr; }
  .form-span, .platform-inline-form button { grid-column: auto; }
  .platform-metrics-secondary { max-width: none; }
  .platform-tenant-summary { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

.task-editor-page { width: 100%; padding: 0 !important; }
.task-editor-page[data-readonly] form button:not([data-source-filter-open]) { display: none !important; }
.task-editor-page[data-readonly] :disabled { opacity: 1; cursor: default; }
.task-editor-page .task-panel .card { max-width: none; }

[data-schedule-form] [hidden] { display: none !important; }

/* Standard compact action groups in all data grids. Joined edges are square; only the outside corners are rounded. */
.grid-action-group, .task-action-group, .client-action-group, .group-row-actions {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  overflow: hidden;
  border: 1px solid #465b67;
  border-radius: 6px;
  gap: 0;
}
.grid-action-group > :is(a, button, form, details),
.task-action-group > :is(a, button),
.client-action-group > :is(a, button),
.group-row-actions > :is(a, button) { margin: 0; border-radius: 0; }
.task-action-group > :is(a, button), .client-action-group > :is(a, button), .group-row-actions > :is(a, button) { border-right: 0; }
.grid-action-group > :is(a, button, form, details) + :is(a, button, form, details),
.task-action-group > :is(a, button) + :is(a, button),
.client-action-group > :is(a, button) + :is(a, button),
.group-row-actions > :is(a, button) + :is(a, button) { border-left: 1px solid #465b67; }
.grid-action-group > :is(a, button, form, details):first-child,
.task-action-group > :is(a, button):first-child,
.client-action-group > :is(a, button):first-child,
.group-row-actions > :is(a, button):first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.grid-action-group > :is(a, button, form, details):last-child,
.task-action-group > :is(a, button):last-child,
.client-action-group > :is(a, button):last-child,
.group-row-actions > :is(a, button):last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.task-action-group > :is(a, button), .client-action-group > :is(a, button), .group-row-actions > :is(a, button) { height: 32px; min-height: 32px; }
.grid-action-group > form { display: flex; align-items: stretch; }
.grid-action-group > form > button { min-height: 32px; height: 32px; padding: 0 10px; border: 0; border-radius: 0; white-space: nowrap; }
.table-wrap td.row-actions { display: table-cell; vertical-align: middle; }
.table-wrap td > .grid-action-group { min-height: 32px; }
.table-wrap .grid-action-group > :is(button, a), .table-wrap .grid-action-group > form > button { min-height: 32px; height: 32px; }
.table-wrap td > button:only-child, .table-wrap td > form:only-child > button { min-height: 32px; height: 32px; }
.client-action-group .client-grid-action.delete,
.clients-table .client-action-group .client-grid-action.delete,
.task-icon-action.delete,
.grid-action-group .danger-action,
.table-wrap button.danger-action,
.table-wrap button.client-delete { background: #a14350; border-color: #8e3643; color: #fff; }
.client-action-group .client-grid-action.delete:hover:not(:disabled),
.task-icon-action.delete:hover:not(:disabled),
.grid-action-group .danger-action:hover:not(:disabled),
.table-wrap button.danger-action:hover:not(:disabled) { background: #bd4c5b; }
.client-action-group .client-grid-action:disabled,
.task-action-group button:disabled,
.grid-action-group button:disabled,
.grid-action-group .danger-action:disabled,
.table-wrap button.client-delete:disabled { background: #3c474e; border-color: #515e66; color: #929da4; opacity: 1; cursor: not-allowed; }
.button.danger, button.danger, .danger-action { background: #a14350; border-color: #8e3643; color: #fff; }
.button.danger:hover:not(:disabled), button.danger:hover:not(:disabled), .danger-action:hover:not(:disabled) { background: #bd4c5b; }

dialog.feedback-dialog { width: min(520px, calc(100vw - 28px)); padding: 20px; }
.feedback-dialog .dialog-head { justify-content: flex-start; }
.feedback-dialog .feedback-symbol { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #315b73; color: #e8f5fc; font-weight: 800; }
.feedback-dialog .feedback-symbol[data-type="error"] { background: #9d3c48; }
.feedback-dialog .feedback-symbol[data-type="confirm"] { background: #8a6532; }
.feedback-dialog .feedback-message { padding: 4px 0 14px; white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.feedback-dialog .feedback-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.feedback-dialog [hidden] { display: none !important; }

.source-list { min-height: 260px; max-height: 48vh; overflow: auto; border: 1px solid var(--border); border-radius: 7px; }
.source-list table { width: 100%; }
.source-list th { position: sticky; top: 0; background: #253640; }
.source-list td { padding: 7px 10px; }
.source-list .source-selected td { background: #21485e; }
.source-list .source-path { background: transparent; border: 0; padding: 3px 4px; text-align: left; color: inherit; font-weight: 500; max-width: 100%; overflow-wrap: anywhere; }
.source-list-toolbar { justify-content: flex-start; gap: 7px; margin-top: 12px; }
.source-editor-dialog { width: min(900px,calc(100vw - 28px)); }
.source-editor-dialog .task-source-entry { padding: 0; margin-bottom: 12px; }
.source-editor-dialog [hidden] { display: none !important; }
.source-editor-dialog .task-browser { margin-top: 10px; }

.admin-shell .source-list button.source-path { background: transparent; border: 0; padding: 3px 4px; color: inherit; font-weight: 500; white-space: normal; box-shadow: none; }
.admin-shell .source-list td { padding: 7px 10px; }

[data-task-location] [hidden], [data-client-group-form] [hidden] { display: none !important; }
.group-task-picker, .group-task-order { display: grid; gap: 8px; }
.group-task-picker h3, .group-task-order h3 { margin: 4px 0; font-size: 15px; }
.group-order-actions { display: flex; gap: 5px; }
.group-order-actions .button { min-width: 34px; padding: 5px 8px; }
.grouped-task-table .task-group-header th { background: #30383e; color: #e1e6e9; padding: 7px 12px; }
.grouped-task-table .task-group-header th { text-transform: none; }
.task-group-header { height: 42px; }
.task-group-header > th { display: table-cell; }
.task-group-bar { display: flex; align-items: center; gap: 9px; min-height: 27px; }
.task-group-header button.group-collapse { display: inline-grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; color: #dce3e7; background: transparent; box-shadow: none; }
.task-group-header button.group-collapse:hover, .task-group-header button.group-collapse:focus-visible { background: #434d54; }
.group-collapse svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.group-collapse[aria-expanded="false"] svg { transform: rotate(-90deg); }
.task-group-name { font-weight: 700; text-align: left; }
.task-group-count { color: #aab5bc; font-size: 12px; font-weight: 500; }
.group-row-actions { display: inline-flex; align-items: stretch; margin-left: auto; border: 1px solid #4b5961; border-radius: 6px; overflow: hidden; }

/* Give grouped grid actions precedence over the global button theme. */
.admin-shell .content :is(.grid-action-group, .task-action-group, .client-action-group, .group-row-actions) > :is(a, button),
.admin-shell .content .grid-action-group > form > button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  max-width: none;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  margin: 0;
  padding: 0 9px;
  border-radius: 0;
  line-height: 1;
}
.admin-shell .content .task-action-group > .task-icon-action {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding: 0;
  border: 0;
  color: #e8f4fa;
}
.admin-shell .content .task-action-group > .task-icon-action + .task-icon-action,
.admin-shell .content .group-row-actions > .group-row-action + .group-row-action,
.admin-shell .content .grid-action-group > :is(a, button, form, details) + :is(a, button, form, details),
.admin-shell .content .client-action-group > :is(a, button) + :is(a, button) {
  border-left: 1px solid #465b67;
}
.admin-shell .content :is(.grid-action-group, .task-action-group, .client-action-group, .group-row-actions) > :is(a, button):first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.admin-shell .content :is(.grid-action-group, .task-action-group, .client-action-group, .group-row-actions) > :is(a, button):last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.admin-shell .content .task-action-group > .task-icon-action.view { background: #256993; }
.admin-shell .content .task-action-group > .task-icon-action.edit { background: #b96516; }
.admin-shell .content .task-action-group > .task-icon-action.logs { background: #31414b; }
.admin-shell .content .task-action-group > button.task-icon-action.delete:not(:disabled),
.admin-shell .content .group-row-actions > button.group-delete-action:not(:disabled),
.admin-shell .content .grid-action-group > button.danger-action:not(:disabled),
.admin-shell .content .grid-action-group > form > button.danger-action:not(:disabled),
.admin-shell .content button.client-delete:not(:disabled),
.admin-shell .content button.danger-action:not(:disabled),
.admin-shell .content button.danger:not(:disabled) {
  background: #a14350;
  border-color: #8e3643;
  color: #fff;
}
.admin-shell .content .task-action-group > button.task-icon-action.delete:hover:not(:disabled),
.admin-shell .content .group-row-actions > button.group-delete-action:hover:not(:disabled),
.admin-shell .content .grid-action-group > button.danger-action:hover:not(:disabled),
.admin-shell .content .grid-action-group > form > button.danger-action:hover:not(:disabled),
.admin-shell .content button.client-delete:hover:not(:disabled),
.admin-shell .content button.danger-action:hover:not(:disabled),
.admin-shell .content button.danger:hover:not(:disabled) { background: #bd4c5b; }
.admin-shell .content .task-action-group > button.task-icon-action.delete:disabled,
.admin-shell .content .group-row-actions > button.group-delete-action:disabled,
.admin-shell .content .grid-action-group > button.danger-action:disabled,
.admin-shell .content .grid-action-group > form > button.danger-action:disabled,
.admin-shell .content button.client-delete:disabled,
.admin-shell .content button.danger-action:disabled,
.admin-shell .content button.danger:disabled {
  background: #3b474e;
  border-color: #53616a;
  color: #9aa6ad;
  cursor: not-allowed;
}
.task-group-header button.group-row-action, .task-group-header a.group-row-action { display: inline-grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; border-right: 1px solid #4b5961; border-radius: 0; color: #dce5e9; background: #26333a; box-shadow: none; text-decoration: none; }
.group-row-action:last-child { border-right: 0; }
.task-group-header .group-row-action:hover, .task-group-header .group-row-action:focus-visible { background: #3a4951; }
.group-row-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.task-group-header button.group-row-action.group-delete-action { color: #ffb7b2; background: #512f31; }
.task-group-header button.group-row-action.group-delete-action:hover { background: #713638; }
.task-group-header button.group-row-action:disabled, .task-group-header button.group-row-action.group-delete-action:disabled { color: #8e999f; background: #343e44; cursor: not-allowed; }
.group-form-tabs { display: flex; gap: 6px; }
.group-form-tabs button { flex: 1; padding: 9px 12px; }
.group-form-tabs button.active { background: var(--accent, #56aee0); }
.group-form-tabs + [data-group-panel] { min-height: 210px; }
.grouped-task-table [data-group-task-row][hidden] { display: none !important; }

/* Dark table palette restored across the tenant WebAdmin and platform SuperAdmin. */
body.admin-shell table > thead > tr > th {
  background-color: #26343d;
  border-color: #3b4b55;
  color: #dce7ed;
}
body.admin-shell table > tbody > tr > td,
body.admin-shell table > tbody > tr > th {
  background-color: #202c33;
  border-color: #33434d;
  color: #eaf1f5;
  transition: background-color .12s ease;
}
body.admin-shell table > tbody > tr:nth-child(even) > td,
body.admin-shell table > tbody > tr:nth-child(even) > th { background-color: #25343d; }
body.admin-shell table > tbody > tr > td > small { color: #aab9c4; }
body.admin-shell table > tbody > tr > td > a:not(.task-icon-action):not(.client-grid-action):not(.group-row-action) {
  color: #eaf1f5;
}
body.admin-shell table > tbody > tr > td > a:not(.task-icon-action):not(.client-grid-action):not(.group-row-action):hover {
  color: #9bd7f5;
  text-decoration: underline;
}
body.admin-shell table > thead > tr > th a { color: #eaf1f5; }
body.admin-shell table > thead > tr > th a:hover { color: #9bd7f5; }
body.admin-shell table > tbody > tr:hover > td,
body.admin-shell table > tbody > tr:hover > th {
  background-color: #344852;
  color: #f4f8fa;
}
body.admin-shell .source-list .source-selected > td { background-color: #21485e; color: #ffffff; }
body.admin-shell .source-list .source-selected:hover > td { background-color: #315d78; }
body.admin-shell .grouped-task-table .task-group-header > th { background-color: #25343d; color: #eaf1f5; }
body.admin-shell .grouped-task-table tbody > tr:hover > td,
body.admin-shell .grouped-task-table tbody > tr:hover > th { background-color: #344852; }

/* Compact task rows; group header actions keep their existing dimensions. */
.admin-shell .content .grouped-task-table .task-action-group > .task-icon-action {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
}
.grouped-task-table .task-icon-action svg { width: 15px; height: 15px; }
.grouped-task-table [data-group-task-row] > td:first-child { font-weight: 700; }
.grouped-task-table tbody > tr:hover > td { background: #344852; }
.grouped-task-table tbody > tr.task-group-header:hover > th { background: #344852; color: #f4f8fa; }

/* Clear hierarchy in the client task grid: blue column header, gray group bars,
   and slightly lighter task rows. */
body.admin-shell .content .grouped-task-table > thead > tr > th {
  background-color: #21445b;
  border-color: #3c6076;
  color: #ffffff;
}
body.admin-shell .content .grouped-task-table > tbody > tr[data-group-task-row] > td {
  background-color: #293941;
  border-color: #3b4a52;
  color: #edf2f5;
}
body.admin-shell .content .grouped-task-table > tbody > tr[data-group-task-row]:nth-child(even) > td {
  background-color: #303f47;
}
body.admin-shell .content .grouped-task-table > tbody > tr.task-group-header > th {
  background-color: #46525a;
  border-color: #59656d;
  color: #ffffff;
}
body.admin-shell .content .grouped-task-table > tbody > tr.task-group-header.ungrouped-header > th {
  background-color: #3d4a52;
}
body.admin-shell .content .grouped-task-table > tbody > tr[data-group-task-row]:hover > td {
  background-color: #3d5968;
  color: #ffffff;
}
body.admin-shell .content .grouped-task-table > tbody > tr.task-group-header:hover > th {
  background-color: #59666e;
  color: #ffffff;
}

.editor-step-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.editor-navigation, .editor-save-actions { display: flex; align-items: center; gap: 8px; }
.editor-save-actions { margin-left: auto; }
.group-form-tabs button:disabled { opacity: .45; cursor: not-allowed; }

/* Keep the source checkbox separate from its path and type columns. */
.admin-shell .source-list table { table-layout: fixed; }
.admin-shell .source-list .source-enabled-heading,
.admin-shell .source-list .source-enabled-cell { width: 66px; min-width: 66px; padding: 7px 4px; text-align: center; }
.admin-shell .source-list .source-enabled-cell input[type="checkbox"] { width: auto; min-width: 0; height: auto; margin: 0; vertical-align: middle; }
.admin-shell .source-list thead th:nth-child(2) { width: 31%; }
.admin-shell .source-list thead th:nth-child(3) { width: 14%; }
.admin-shell .source-list thead th:nth-child(4) { width: 12%; }
.admin-shell .source-list thead th:nth-child(5) { width: 13%; }
.admin-shell .source-list thead th:nth-child(6) { width: 22%; }
.admin-shell .source-list .source-actions-heading { padding: 5px 8px; text-align: right; }
.admin-shell .source-list .source-actions-heading-content { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-shell .source-list .source-add-action { background: #33824f; border-color: #459563; color: #fff; }
.admin-shell .source-list .source-add-action:hover:not(:disabled) { background: #3d985d; }
.admin-shell .source-list .source-add-action:disabled { background: #46534b; border-color: #56655a; color: #b6c0b9; cursor: not-allowed; }
.admin-shell .source-list .source-row-actions { min-height: 30px; border-color: #71828d; }
.admin-shell .content .source-list .source-row-actions > button.source-icon-action {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; min-width: 34px; max-width: 34px;
  height: 30px; min-height: 30px; max-height: 30px; padding: 0; border: 0; border-radius: 0;
  color: #fff; background: #435965; box-shadow: none;
}
.admin-shell .content .source-list .source-row-actions > button.source-icon-action + button.source-icon-action { border-left: 1px solid #617680; }
.admin-shell .content .source-list .source-row-actions > button.source-icon-action:first-child { border-radius: 5px 0 0 5px; }
.admin-shell .content .source-list .source-row-actions > button.source-icon-action:last-child { border-radius: 0 5px 5px 0; }
.admin-shell .content .source-list .source-row-actions > button.source-icon-action:hover:not(:disabled) { background: #587482; }
.admin-shell .content .source-list .source-row-actions > button.source-icon-action.edit { background: #b96516; }
.admin-shell .content .source-list .source-row-actions > button.source-icon-action.edit:hover { background: #d17820; }
.admin-shell .content .source-list .source-row-actions > button.source-icon-action.remove { background: #a14350; }
.admin-shell .content .source-list .source-row-actions > button.source-icon-action.remove:hover { background: #bd4c5b; }
.admin-shell .content .source-list .source-row-actions > button.source-icon-action.browse { background: #256993; }
.admin-shell .content .source-list .source-row-actions > button.source-icon-action.browse:hover { background: #327ea8; }
.admin-shell .content .source-list .source-row-actions > button.source-icon-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-shell .source-list button.source-path { display: block; width: 100%; max-width: 100%; box-sizing: border-box; text-align: left; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 500px) {
  .admin-shell .source-size-row label { grid-template-columns: 105px minmax(0, 1fr); }
  .source-size-control { grid-template-columns: minmax(0, 1fr) 82px; }
}
.task-diagnostic-dialog { width: min(980px, calc(100vw - 28px)); }
.task-diagnostic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.task-diagnostic-grid > div { min-width: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.task-diagnostic-grid > div:nth-child(4n + 2), .task-diagnostic-grid > div:nth-child(4n + 3) { background: var(--surface-raised, #24333a); }
.task-diagnostic-grid > div.wide { grid-column: 1 / -1; }
.task-diagnostic-grid dt { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.task-diagnostic-grid dd { margin: 5px 0 0; overflow-wrap: anywhere; }
.task-diagnostic-grid dd small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
@media (max-width: 680px) { .task-diagnostic-grid { grid-template-columns: 1fr; } .task-diagnostic-grid > div.wide { grid-column: auto; } }

/* NexBackup dark/cyan visual system, based on the approved client dashboard mockup. */
:root {
  color-scheme: dark;
  --canvas: #10131b;
  --surface: #1b1f28;
  --surface-raised: #222631;
  --line: #303642;
  --text: #e6edf6;
  --muted: #a4b1c4;
  --blue: #55c7ff;
  --blue-deep: #087da7;
  --sidebar: #151922;
  --sidebar-text: #cbd7e6;
  --accent-cyan: #06b6e8;
  --success: #24d29a;
  --warning: #ffc529;
}
body { background: var(--canvas); color: var(--text); }
.sidebar { background: #151922; color: #cbd7e6; box-shadow: inset -1px 0 #252b36; }
.brand, .nav-link { color: #cbd7e6; }
.brand-accent, .brand-mark, .nav-icon { color: var(--blue); }
.sidebar-section-label { color: #77869b; }
.nav-link:hover { background: #222631; }
.nav-link.active, .nav-link.active:hover { background: #252a35; color: #fff; box-shadow: inset 3px 0 var(--accent-cyan); }
.tenant-switch { background: #202631; color: #a9dfff; }
.tenant-avatar { background: #273647; color: var(--blue); }
.content { background: var(--canvas); }
.card { background: var(--surface); border-color: #252b36; box-shadow: none; }
.metrics .card { border-top-color: var(--accent-cyan); }
button, .button { border-color: #303642; background: #252a35; color: #e7edf7; }
button:hover:not(:disabled), .button:hover:not(:disabled) { background: #303744; }
button:not(.secondary):not(.dialog-close):not(.group-collapse):not(.task-icon-action):not(.group-row-action):not(.source-icon-action):not(.danger-action):not(.source-add-action), .button:not(.secondary) { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #062235; }
button:not(.secondary):not(.dialog-close):not(.group-collapse):not(.task-icon-action):not(.group-row-action):not(.source-icon-action):not(.danger-action):not(.source-add-action):hover:not(:disabled), .button:not(.secondary):hover:not(:disabled) { background: #32c7f1; }
.button.secondary { background: #252a35; border-color: #343b49; color: #dce7f4; }
input, select, textarea { background: #151a22; border-color: #3a4351; color: var(--text); }
th { background: #242833; color: #c4d1e2; border-color: #303642; }
td { background: #191d26; color: #dce5f1; border-color: #2a303b; }
tbody tr:nth-child(even) td { background: #1c2029; }
tbody tr:hover td, tbody tr:hover th { background: #272e3b; color: #fff; }
body.admin-shell table > tbody > tr:hover > td,
body.admin-shell table > tbody > tr:hover > th { background-color: #272e3b; color: #fff; }
.badge.online { background: #173c37; color: #35dfa9; }
.badge.offline { background: #492b35; color: #ff9aab; }
.badge.warning { background: #43371f; color: #ffd04c; }
.muted, small { color: var(--muted); }
.record-tabs { gap: 8px; padding: 8px; border: 0; border-radius: 10px; background: #0b0e15; }
.record-tabs a { border: 0; border-radius: 6px; padding: 9px 15px; color: #b7c5d7; }
.record-tabs a.active { background: #252a35; color: var(--blue); box-shadow: inset 0 -3px var(--blue); }
.table-wrap { border: 1px solid #292e39; border-radius: 10px; }

/* Client overview and grouped-task grid follow the Stitch reference. */
.client-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.client-detail-top > div { min-width: 0; }
.client-back { display: inline-block; margin: 2px 0 10px; color: #c4d0e1; }
.client-heading { justify-content: flex-start; }
.client-title { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; }
.client-title h1 { font-size: clamp(25px, 2.1vw, 32px); font-weight: 750; letter-spacing: -.8px; text-transform: uppercase; }
.client-identity { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 5px 12px; border-radius: 18px; background: #252a35; color: #b9d8ee; font-size: 12px; }
.client-identity > span:first-child { color: var(--blue); font-size: 18px; }
.client-identity button { padding: 1px 4px; border: 0; background: transparent; color: #c6dcf1; font-size: 18px; }
.client-edit-button { flex: 0 0 auto; margin-top: 24px; }
.client-edit-button span { margin-right: 7px; color: var(--blue); }
.client-metrics { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 20px 0 18px; }
.client-metrics .card { min-height: 140px; padding: 19px 20px; border: 0; border-radius: 11px; background: #1b1f28; }
.client-metrics span { color: #c1ccdc; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.client-metrics strong { margin-top: 20px; color: #f2f5fb; font-size: 27px; }
.client-metrics small { margin-top: 17px; color: #c5d1e1; font-size: 12px; }
.client-task-heading { align-items: center; margin: 28px 0 17px; }
.client-task-title { display: flex; align-items: center; flex-wrap: wrap; gap: 17px; }
.client-task-title h2 { margin: 0; font-size: 22px; }
.client-task-title a { font-weight: 650; }
.client-task-heading .row-actions { gap: 10px; }
.client-task-heading .client-add-group, .client-task-heading .client-add-task { min-height: 42px; padding: 0 17px; border: 0; border-radius: 6px; font-size: 14px; font-weight: 700; }
.client-task-heading .client-add-group { background: #252a35; color: #e7edf7; }
.client-task-heading .client-add-task { background: var(--accent-cyan); color: #062235; }
.client-task-heading .client-add-group span, .client-task-heading .client-add-task span { margin-right: 6px; color: inherit; }
.grouped-task-table { min-width: 950px; border-spacing: 0; }
.grouped-task-table > thead > tr > th { padding: 16px 18px; background: #242833; color: #c4d1e2; font-size: 11px; }
.grouped-task-table > tbody > tr[data-group-task-row] > td { padding: 15px 13px; background: #191d26; border-top: 1px solid #222833; color: #dce5f1; font-size: 14px; }
.grouped-task-table > tbody > tr[data-group-task-row]:nth-child(even) > td { background: #1c2029; }
.grouped-task-table .task-group-header > th { padding: 0 18px; background: #1b1f28; border-top: 1px solid #252b36; border-bottom: 1px solid #252b36; }
.task-group-header { height: 56px; }
.task-group-bar { display: flex; align-items: center; gap: 10px; min-height: 54px; }
.task-group-header button.group-collapse { width: 22px; height: 26px; color: #dce7f4; }
.task-group-header button.group-collapse svg { width: 18px; height: 18px; transition: transform .15s ease; }
.task-group-header button.group-collapse[aria-expanded="false"] svg { transform: rotate(-90deg); }
.task-group-folder { color: var(--blue); font-size: 20px; line-height: 1; }
.task-group-name { color: #e6edf6; font-size: 14px; font-weight: 750; }
.task-group-count, .task-group-alert, .task-group-success { padding: 4px 11px; border-radius: 20px; background: #303642; color: #c4d1e2; font-size: 11px; font-weight: 700; }
.task-group-alert { background: #432b35; color: #ff9aa9; }
.task-group-success { background: #173c37; color: #35dfa9; }
.group-row-actions { margin-left: auto; }
.ungrouped-header .task-group-bar { min-height: 48px; }
.client-task-name { display: flex; align-items: center; gap: 10px; min-width: 180px; font-size: 14px; font-weight: 750; }
.client-task-name small { margin-top: 3px; color: #b2bfd1; font-size: 12px; font-weight: 450; }
.task-status-stripe { width: 8px; height: 36px; flex: 0 0 8px; border-radius: 5px; background: var(--accent-cyan); }
.task-status-stripe.alert { background: var(--warning); }
.task-status-stripe.error { background: #ff637a; }
.agent-name-badge { display: inline-block; padding: 5px 9px; border-radius: 4px; background: #252a35; color: var(--blue); font-size: 12px; font-weight: 750; }
.grouped-task-table .badge { white-space: nowrap; }
.grouped-task-table .task-action-group { justify-content: flex-end; }
.grouped-task-table .task-action-group > .task-icon-action { border: 0; border-radius: 5px; background: transparent; color: #b8d4eb; }
.grouped-task-table .task-action-group > .task-icon-action:hover { background: #303744; color: #fff; }
.grouped-task-table .task-action-group > .task-icon-action.delete { color: #e98798; }
.grouped-task-table tfoot td { padding: 12px 18px; background: #1b1f28; color: #c4d1e2; font-size: 12px; }
.client-grid-summary { text-align: right; white-space: nowrap; }
.client-grid-summary span + span { margin-left: 15px; }
.summary-success { color: var(--success); }
.summary-alert { color: var(--warning); }
@media (max-width: 900px) {
  .client-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .client-task-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
  .client-detail-top { flex-direction: column; }
  .client-edit-button { margin: 0; }
  .client-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-metrics .card { min-height: 112px; padding: 14px; }
  .client-metrics strong { font-size: 21px; }
  .client-identity { max-width: 100%; overflow-wrap: anywhere; }
}

/* Stitch visual language applied to existing operational components. */
body.admin-shell { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; }
body.admin-shell h1, body.admin-shell h2, body.admin-shell h3, body.admin-shell button, body.admin-shell .button,
body.admin-shell .nav-link, body.admin-shell .sidebar-section-label, body.admin-shell .topbar,
body.admin-shell label, body.admin-shell th { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; }
.material-symbols-outlined { font-size: 18px; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.nav-link { gap: 12px; min-height: 40px; border-radius: 8px; }
.nav-link .nav-icon { width: 18px; color: #8b9aae; }
.nav-link.active .nav-icon, .nav-link:hover .nav-icon { color: var(--blue); }
.nav-external { margin-left: auto; color: #718196; font-size: 12px; }
.dashboard-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 11px 14px; border: 1px solid #1e293b; border-radius: 6px; background: #1d2024; }
.dashboard-intro h1 { margin: 3px 0 0; font-size: 15px; letter-spacing: -.01em; }
.dashboard-intro p { display: none; }
.dashboard-intro .eyebrow { display: none; }
.eyebrow { color: #64748b; font: 700 10px/1 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: #94a3b8; font: 600 11px/1.2 'Manrope', sans-serif; white-space: nowrap; }
.live-indicator > span { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px #064e3b; }
.dashboard-metrics { margin-top: 0; }
.dashboard-metrics .metric-card { min-height: 122px; padding: 16px 18px; border-top: 0; background: #1e293b; border-radius: 10px; }
.metric-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #94a3b8; font: 700 10px/1.2 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.metric-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: #a0caff; background: #155e9c44; }
.metric-card strong { margin-top: 15px !important; font-family: 'Manrope', sans-serif; font-size: 30px !important; }
.metric-card small { display: block; margin-top: 8px; color: #64748b; font-size: 11px; }
.metric-success { border-left: 3px solid #10b981 !important; }
.metric-success .metric-icon { color: #10b981; background: #064e3b66; }
.metric-warning { border-left: 3px solid #f59e0b !important; }
.metric-warning .metric-icon { color: #f59e0b; background: #78350f66; }
.metric-error { border-left: 3px solid #ef4444 !important; }
.metric-error .metric-icon { color: #ef4444; background: #7f1d1d66; }
.dashboard-execution-metrics { margin-top: 12px; }
.dashboard-execution-metrics .card { min-height: 86px; padding: 14px 16px; background: #191c20; }
.dashboard-execution-metrics .card span { font-size: 11px; }
.dashboard-execution-metrics .card strong { font-family: 'JetBrains Mono', monospace; font-size: 23px !important; }
.page-header { align-items: flex-end; margin-bottom: 4px; }
.page-header h1 { margin: 4px 0 3px; font-size: 25px; letter-spacing: -.02em; }
.page-header p { margin: 0; font-size: 12px; }
.page-header .button { gap: 7px; }
.filter-panel { margin: 18px 0; padding: 12px 14px; border: 1px solid #252b36; border-radius: 9px; background: #151a23; }
@media (max-width: 720px) { .page-header { align-items: flex-start; flex-direction: column; } }
@media (max-width: 720px) { .dashboard-intro { align-items: flex-start; flex-direction: column; } .live-indicator { white-space: normal; } }

/* Stitch layout fidelity: the exported screens use a 256px dark rail, a 56px
   fixed header and a navy surface hierarchy. Keep all existing controls and
   routes, changing only their presentation. */
:root { --canvas: #111418; --surface: #1e293b; --surface-raised: #272a2e; --line: #334155; --text: #f8fafc; --muted: #94a3b8; --blue: #a0caff; }
body.admin-shell { background: #111418 !important; color: #e1e2e8 !important; }
.app-shell { background: #111418; }
.sidebar { position: fixed !important; left: 0; top: 0; z-index: 10; width: 256px !important; flex-basis: 256px !important; padding: 0 8px 8px !important; background: #191c20 !important; color: #c1c7d1 !important; box-shadow: 1px 0 8px rgba(0,0,0,.18) !important; }
.sidebar .brand-logo { height: 56px; margin: 0 -8px 8px !important; padding: 12px 16px !important; justify-content: flex-start; border-radius: 0 !important; background: #191c20 !important; }
.sidebar .brand-logo img { width: 154px; max-height: 32px; object-fit: contain; object-position: left center; }
.tenant-switch { min-height: 48px; margin: 0 4px 14px !important; padding: 7px 10px !important; border: 1px solid #1e293b; border-radius: 8px !important; background: #1d2024 !important; color: #f8fafc !important; }
.tenant-avatar { width: 26px !important; height: 26px !important; flex-basis: 26px !important; border-radius: 6px !important; background: transparent !important; color: #a0caff !important; font-size: 19px !important; }
.tenant-switch-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.tenant-switch-copy small { margin: 0; color: #64748b; font: 700 9px/1 'Manrope', sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.tenant-switch-copy .tenant-name { color: #f8fafc; font: 600 12px/1.2 'Manrope', sans-serif; }
.tenant-expand { margin-left: auto; color: #64748b; font-size: 18px; }
.sidebar-section-label { padding: 0 14px 8px !important; color: #64748b !important; font: 700 10px/1 'Manrope', sans-serif !important; letter-spacing: .1em !important; }
.sidebar-nav { gap: 2px !important; padding: 0 4px; }
.nav-link { min-height: 40px !important; padding: 0 12px !important; border-radius: 8px !important; color: #c1c7d1 !important; font: 600 13px/1 'Manrope', sans-serif !important; }
.nav-link:hover { background: #1d2024 !important; color: #f8fafc !important; }
.nav-link.active, .nav-link.active:hover { background: #155e9c !important; color: #f8fafc !important; box-shadow: none !important; }
.nav-link .nav-icon { color: #94a3b8 !important; }
.nav-link.active .nav-icon { color: #d2e4ff !important; }
.sidebar-user { padding: 0 4px; }
.sidebar-user > .profile-card { min-height: 56px; border: 1px solid #334155 !important; border-radius: 8px !important; background: #1d2024 !important; }
.workspace { width: calc(100% - 256px); margin-left: 256px; background: #111418; }
.topbar { position: relative; z-index: 2; flex-basis: 56px !important; height: 56px !important; padding: 0 24px !important; border-bottom: 1px solid #1e293b !important; background: rgba(17,20,24,.92) !important; box-shadow: 0 1px 8px rgba(0,0,0,.04); }
.topbar-title { gap: 10px; font: 400 12px/1 'JetBrains Mono', monospace !important; }
.topbar-kicker { color: #64748b !important; font: 700 10px/1 'Manrope', sans-serif !important; letter-spacing: .1em !important; }
.topbar-divider { color: #64748b !important; font-size: 18px; }
.topbar-title strong { color: #f8fafc; font: 600 13px/1 'Manrope', sans-serif !important; }
.topbar-context { color: #64748b !important; font: 400 11px/1 'JetBrains Mono', monospace !important; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.topbar-user { display: flex; align-items: center; gap: 9px; }
.topbar-user-copy { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.topbar-user-copy strong { color: #f8fafc; font: 600 11px/1 'Manrope', sans-serif; }
.topbar-user-copy small { margin: 0; color: #64748b; font: 400 9px/1 'JetBrains Mono', monospace; }
.topbar-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #a0caff; color: #003259; font: 800 13px/1 'Manrope', sans-serif; }
.content { width: 100% !important; max-width: none !important; padding: 24px !important; background: #111418 !important; }
.card { border: 1px solid #1e293b !important; border-radius: 8px !important; background: #0f172a !important; box-shadow: 0 4px 16px rgba(0,0,0,.14) !important; }
.metrics .card { border-top-color: #155e9c !important; }
th { background: #191c20 !important; border-color: #334155 !important; color: #94a3b8 !important; font: 700 10px/1.2 'Manrope', sans-serif !important; }
td { background: #0f172a !important; border-color: #1e293b !important; color: #e1e2e8 !important; }
tbody tr:nth-child(even) td { background: #111827 !important; }
tbody tr:hover td, tbody tr:hover th { background: #27354a !important; }
input, select, textarea { border-color: #334155 !important; border-radius: 6px !important; background: #0c0e12 !important; color: #e1e2e8 !important; }
button:not(.sign-out):not(.menu-toggle), .button { border-color: #a0caff !important; border-radius: 4px !important; background: #155e9c !important; color: #f8fafc !important; font: 600 12px/1.2 'Manrope', sans-serif !important; }
button:not(.sign-out):not(.menu-toggle):hover, .button:hover { background: #1a619f !important; }
.button.secondary { border-color: #334155 !important; background: #272a2e !important; color: #e1e2e8 !important; }
.badge.online { background: #064e3b !important; color: #10b981 !important; }
.badge.warning { background: #78350f !important; color: #f59e0b !important; }
.badge.offline { background: #7f1d1d !important; color: #ef4444 !important; }
.record-tabs { background: #0c0e12 !important; }
.record-tabs a { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 'Manrope', sans-serif; }
.record-tabs a .material-symbols-outlined { color: #94a3b8; font-size: 17px; }
.record-tabs a.active .material-symbols-outlined { color: #d2e4ff; }
.record-tabs a.active { background: #155e9c !important; color: #d2e4ff !important; box-shadow: none !important; }
.client-metric-card { position: relative; overflow: hidden; min-height: 124px !important; padding: 16px 18px !important; background: #0f172a !important; }
.client-metric-label { display: flex; align-items: center; gap: 7px; color: #94a3b8 !important; font: 700 10px/1.2 'Manrope', sans-serif !important; letter-spacing: .08em; text-transform: uppercase; }
.client-metric-label .material-symbols-outlined { color: #a0caff; font-size: 18px; }
.client-metric-card strong { margin-top: 20px !important; color: #f8fafc !important; font: 600 25px/1 'Manrope', sans-serif !important; }
.client-metric-card small { margin-top: 14px !important; color: #64748b !important; font: 400 10px/1.3 'JetBrains Mono', monospace !important; }
.client-task-heading .client-add-group { border-color: #334155 !important; background: #272a2e !important; color: #e1e2e8 !important; }
.client-task-heading .client-add-task { border-color: #a0caff !important; background: #155e9c !important; color: #f8fafc !important; }
.grouped-task-table > thead > tr > th { background: #191c20 !important; color: #94a3b8 !important; }
.grouped-task-table > tbody > tr.task-group-header > th { background: #1d2024 !important; border-color: #334155 !important; }
.grouped-task-table > tbody > tr[data-group-task-row] > td { background: #0f172a !important; border-color: #1e293b !important; }
.grouped-task-table > tbody > tr[data-group-task-row]:nth-child(even) > td { background: #111827 !important; }
@media (max-width: 760px) {
  .sidebar { width: min(285px, 85vw) !important; transform: translateX(-100%); }
  .sidebar-open .sidebar { transform: translateX(0); }
  .workspace { width: 100%; margin-left: 0; }
  .topbar { height: 56px !important; flex-basis: 56px !important; }
  .content { padding: 16px !important; }
  .topbar-user-copy, .topbar-context { display: none; }
}