/* Shared with the Android settings/workbench palette. Keep desktop data layouts. */

html, body { background: var(--bg); color: var(--ink); }
h1, .quality-center-heading h1, #quality-workspace > .page-head h1 { color: var(--ink); letter-spacing: 0; font-size: var(--hub-page-size); font-weight: 650; }
h2, h3 { color: var(--ink); }
.panel, .metrics > div, .project-tile,
#quality-workspace main.workspace .card,
#quality-workspace .diagnostic-panel,
body[data-hub-management="models"] #quality-workspace .model-slot-card {
  background: #fff; border-color: var(--line); border-radius: 18px; box-shadow: none;
}
.metrics strong { color: var(--ink); font-size: 28px; font-weight: 600; }
.metrics span, label, .field-help { color: var(--muted); }
button, .button { border-color: #e4e8eb; border-radius: 10px; background: #fff; color: var(--green); }
button:hover, .button:hover { filter: none; background: #f5f6f8; }
button.secondary, .button.secondary { color: var(--ink); border-color: #e4e8eb; }
button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
.text-button, .text-button:hover, .number-filter-trigger, .number-filter-trigger:hover,
.notification-bell, .notification-bell:hover { background: transparent; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-color: #dfe3e7; border-radius: 10px; color: var(--ink); }
:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 3px; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--hub-green); }
th, .calls-table th.call-selection-cell, .calls-table th.call-time-cell,
.calls-table th.call-project-cell, .mark-result-table th, #quality-workspace main.workspace th { background: #f7f8fa; color: var(--muted); font-size: 12px; }
th, td { border-bottom-color: var(--line); }
.table-panel .section-head, .table-panel .pagination { border-color: var(--line); }
.snippet td, .ranking-table .ranking-project-heading td { background: #f8f9fa; }
.ranking-project-toggle:hover { background: #f0f2f4; }
.notice, .settings-save-feedback, .monitor-preview, .configuration-notice { background: #fff; border-color: var(--line); }
.notice { border-left: 3px solid #b9c8cd; }
.settings-save-feedback { border-left-color: var(--green); }
.settings-save-feedback.has-error { border-left-color: #bc4141; }
.device-binding-summary, .call-detail .player { background: #f7f8fa; }
/* Navigation uses ink and small indicators instead of filled rectangles. */
body > .sidebar { background: #fff; border-color: var(--line); }
body > .sidebar .brand { color: var(--ink); font-size: 24px; letter-spacing: 1px; }
body > .sidebar nav a { color: #56616b; white-space: nowrap; }
body > .sidebar nav a:hover, body > .sidebar nav a[aria-current="page"] { background: transparent; color: var(--green); }
body > .sidebar nav a[aria-current="page"],
body > .sidebar nav .nav-label ~ a[aria-current="page"] { font-weight: 400; color: #40545c; }
body > .sidebar nav .nav-label ~ a[aria-current="page"]::before { background: #91a5ac; }
body > .sidebar .nav-label { color: var(--muted); }
.view-tabs, .settings-tabs, .people-nav, .quality-center-nav { gap: 6px; padding-bottom: 0; border-color: var(--line); }
.view-tabs a, .settings-tabs a, .people-nav a,
#quality-workspace .quality-center-nav a {
  background: transparent; color: var(--muted); border-radius: 0; border-bottom: 2px solid transparent;
  padding: 10px 14px; font-weight: 400; text-decoration: none;
}
.view-tabs a:hover, .settings-tabs a:hover, .people-nav a:hover,
#quality-workspace .quality-center-nav a:hover { background: transparent; color: var(--ink); }
.view-tabs a[aria-current="page"], .settings-tabs a[aria-current="page"], .people-nav a[aria-current="page"],
#quality-workspace .quality-center-nav a[aria-current="page"] {
  background: transparent; color: var(--ink); border-bottom-color: #85939c; border-radius: 0; font-weight: 500;
}
.number-filter-menu, .ct-popup { border-color: var(--line); border-radius: 12px; box-shadow: 0 8px 28px #202a3014; }
.number-filter-menu a[aria-current], .ct-option[aria-selected="true"] { background: #eef3f5; color: var(--green); }
.number-filter-menu a:hover, .ct-option:hover { background: #f6f7f8; }
.number-filter-menu a[aria-current]:hover { background: #eef3f5; }
.device-dialog, .ct-dialog { border-color: var(--line); border-radius: 18px; box-shadow: 0 16px 56px #202a3020; }
.ct-project-head, .ct-project-row:hover, .ct-project-row:has(input:checked) { background: #f7f8fa; }
.ct-picker { border-color: #dfe3e7; border-radius: 10px; color: var(--ink); }
.project-tile.selected, .project-tile:hover { background: #fff; border-color: #b9c8cd; }
/* The embedded quality workspace shares the same surfaces and form controls. */
#quality-workspace .quality-center-heading h1 { font-weight: 650; }
#quality-workspace :is(button, .button-link) { border-radius: 10px; }
#quality-workspace :is(.primary-button, .secondary-button, .button-link) {
  background: #fff; border: 1px solid #e4e8eb; color: var(--green); box-shadow: none;
}
#quality-workspace :is(.primary-button, .secondary-button, .button-link):hover { background: #f5f6f8; }
#quality-workspace main.workspace :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: #dfe3e7; border-radius: 10px; color: var(--ink);
}
#quality-workspace .diagnostic-tabs [role="tab"],
#quality-workspace .quality-statistics-tabs > button { background: transparent; border-radius: 0; border-bottom: 2px solid transparent; }
#quality-workspace .diagnostic-tabs [aria-selected="true"],
#quality-workspace .quality-statistics-tabs > button[aria-pressed="true"] { background: transparent; border-bottom-color: #85939c; color: var(--ink); font-weight: 500; }
body[data-hub-management="models"] #quality-workspace .model-summary { background: #f7f8fa; }
/* Shared selection surfaces for filters, settings and the embedded workspace. */
.number-filter-menu a[aria-current], .ct-option[aria-selected="true"],
.number-filter-menu a[aria-current]:hover,
#quality-workspace #population-date-presets > button[aria-pressed="true"],
#quality-workspace #rule-management-tabs button[aria-pressed="true"],
#quality-workspace .chat-mode-controls [aria-pressed="true"] {
  background: var(--hub-selected); color: var(--ink); font-weight: 500;
}
.role-guide, .call-detail .match-review, .call-detail .transcript-empty,
.call-detail .player, .device-binding-summary { background: var(--wash); border-color: var(--line); }
.password-control { border-color: #dfe3e7; }
.list-filter-tabs a[aria-current] { color: var(--ink); border-bottom-color: #85939c; font-weight: 500; }
.task-shortcuts a[aria-current="page"], .allocation-states a[aria-current="page"],
.rules-page .threshold-presets button[aria-pressed="true"] {
  background: var(--hub-selected); border-color: #b8c2c9; color: var(--ink); font-weight: 500;
}
.pagination a:hover, .segment:hover { background: var(--hub-selected); border-color: #b8c2c9; }
.segment.active, .call-detail .transcript-line:has(.utterance.active) {
  background: var(--hub-selected); border-left-color: #85939c;
}
#quality-workspace :is(.diagnostic-tabs [role="tab"], #new-chat-session):focus-visible {
  outline-color: var(--hub-focus);
}
/* Chat uses neutral surfaces to distinguish roles, with one strong send action. */
#quality-workspace #chat-sidebar { background: #fafbfc; border-color: var(--line); }
#quality-workspace .auxiliary-history .auxiliary-history-button[aria-current="true"] {
  background: var(--hub-selected); color: var(--ink); border-left-color: #85939c;
}
#quality-workspace .chat-session-title { font-weight: 500; }
#quality-workspace .auxiliary-messages .auxiliary-message { background: #f7f8fa; color: var(--ink); }
#quality-workspace .auxiliary-messages .auxiliary-message-user { background: #edf1f3; }
#quality-workspace :is(#chat-sidebar-toggle, #chat-latest, #new-chat-session) { color: var(--ink); }
#quality-workspace .auxiliary-chat-form textarea:focus {
  border-color: var(--hub-focus); outline: 2px solid #e3e8eb; outline-offset: 1px;
}
#quality-workspace #send-auxiliary-chat {
  background: #34454f; color: #fff; border: 1px solid #34454f; font-weight: 500;
}
#quality-workspace #send-auxiliary-chat:hover:not(:disabled) { background: #26363f; }
#quality-workspace #send-auxiliary-chat:disabled { background: #e9edef; border-color: #e9edef; color: #7b858d; opacity: 1; }
@media (min-width: 761px) {
  body > .sidebar .nav-label { margin-left: 39px; }
  body > .sidebar nav .nav-label ~ a { padding-left: 39px; }
}
@media (max-width: 760px) {
  :root { --hub-page-size: 24px; }
  .panel, .metrics > div, #quality-workspace main.workspace .card { border-radius: 14px; }
}

/* Project choices and one-off checks follow the same quiet, explicit workflow. */
#quality-workspace .project-choice-cards { display:flex; flex-wrap:wrap; gap:10px; grid-column:1/-1; }
#quality-workspace .project-choice-cards button { min-width:130px; max-width:100%; padding:12px 16px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--surface); text-align:left; font-weight:400; overflow-wrap:anywhere; }
#quality-workspace .project-choice-cards button[aria-pressed="true"] { background:var(--hub-selected); border-color:var(--hub-focus); box-shadow:inset 0 0 0 1px var(--hub-focus); font-weight:500; }
#quality-workspace .temporary-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
#quality-workspace .temporary-steps { display:flex; flex-wrap:wrap; gap:12px 24px; list-style:none; padding:0; margin:0; color:var(--muted); font-size:14px; }
#quality-workspace .temporary-steps [aria-current="step"] { color:var(--ink); font-weight:500; border-bottom:2px solid var(--hub-focus); padding-bottom:6px; }
#quality-workspace #temporary-status { min-height:22px; margin:8px 0 18px; font-size:14px; }
#quality-workspace #temporary-filters .field-help { margin:0; font-size:13px; }
#quality-workspace #temporary-sources { display:grid; gap:10px; max-height:340px; overflow:auto; margin:0 0 24px; }
#quality-workspace #temporary-sources label { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--wash); border-radius:6px; }
#quality-workspace #temporary-sources input[type="checkbox"] { width:18px; height:18px; flex:0 0 18px; }
#quality-workspace #temporary-execution { padding:20px; background:var(--wash); border:1px solid var(--line); border-radius:10px; }
#quality-workspace #temporary-task-summary { line-height:1.7; overflow-wrap:anywhere; }
#quality-workspace #temporary-run > label:has(textarea) { grid-row:auto; }
#quality-workspace #temporary-history { margin-top:24px; }
#quality-workspace :is(#temporary-setup,#temporary-execution)[hidden] { display:none; }
@media(max-width:600px) { #quality-workspace .project-choice-cards button { flex:1 1 130px; } #quality-workspace #temporary-execution { padding:14px; } }

/* One navigation shell on host and quality pages, including small screens. */
body > .sidebar .mobile-menu-toggle { display:none; }
body > .sidebar .navigation-content { display:flex; flex:1; min-height:0; flex-direction:column; }
body > .sidebar .navigation-content .account { margin-top:auto; }
body > .sidebar .navigation-footer { margin-top:auto; padding-top:20px; flex-shrink:0; }
body > .sidebar .navigation-footer .account { margin-top:12px; }
.assistant-shortcut { display:inline-flex; align-items:center; gap:9px; min-width:44px; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface,#fff); color:var(--muted); font-size:13px; font-weight:400; text-decoration:none; }
.assistant-shortcut:hover { background:var(--hub-selected,#f0f3f4); color:var(--ink); text-decoration:none; }
.assistant-shortcut .nav-icon { width:20px; height:20px; flex-shrink:0; }
.assistant-shortcut.assistant-shortcut--mobile { display:none; }
@media(min-width:761px) {
  /* The outer shell must not inherit geometry from individual workspace sheets. */
  body > .sidebar { font-family:var(--hub-font); font-size:14px; line-height:1.65; }
  body > .sidebar nav { display:flex; flex-direction:column; gap:5px; margin:30px 0 0; padding:0; }
  body > .sidebar nav > a { flex-shrink:0; padding:9px 12px; font-size:14px; line-height:1.65; }
  body > main:not(.standalone), body > #quality-workspace { margin-left:216px; padding:28px 40px 24px; }
  #quality-workspace > .page-head.quality-center-heading { min-height:44px; margin:0 0 20px; }
  #quality-workspace > .page-head.quality-center-heading h1 { margin:0; line-height:1.4; }
  body > .sidebar .navigation-content > nav { overflow-y:auto; min-height:0; flex-shrink:1; }
}
@media(min-width:761px) and (max-width:1100px) {
  body > main:not(.standalone), body > #quality-workspace { padding-inline:24px; }
}
@media(max-width:760px) {
  .assistant-shortcut.assistant-shortcut--desktop { display:none; }
  .account-identity { display:inline-flex; align-items:center; gap:8px; }
  .assistant-shortcut.assistant-shortcut--mobile { display:inline-flex; position:static; width:auto; height:44px; min-width:44px; min-height:44px; padding:8px; justify-content:center; white-space:nowrap; border:0; background:transparent; }
  .assistant-shortcut--mobile span { display:inline; }
  body > .sidebar .navigation-footer { padding-top:0; }
}
@media(max-width:760px) {
  html { scrollbar-gutter:auto; }
  body > .sidebar { position:relative; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0; width:100%; padding:10px 16px; border-right:0; border-bottom:1px solid var(--line); }
  body > .sidebar .brand { display:block; margin:0; font-size:18px; font-weight:650; line-height:44px; letter-spacing:0; }
  .hub-navigation-ready body > .sidebar .mobile-menu-toggle { display:inline-flex; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--ink); font-size:14px; font-weight:400; }
  body > .sidebar .navigation-content { flex:0 0 100%; }
  .hub-navigation-ready body > .sidebar:not(.mobile-menu-open) .navigation-content { display:none; }
  body > .sidebar nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:12px 0; padding:12px 0; border-top:1px solid var(--line); }
  body > .sidebar nav a { display:flex; align-items:center; min-height:44px; padding:10px; font-size:14px; border-radius:8px; }
  body > .sidebar nav a[aria-current="page"] { color:var(--ink); background:var(--hub-selected); font-weight:500; }
  body > .sidebar .nav-label { display:block; grid-column:1/-1; margin:12px 10px 2px; font-size:12px; }
  body > .sidebar .account { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; }
  body > .sidebar .account form { margin:0; }
  body > .sidebar .text-button { min-height:44px; padding:8px; }
  body > main:not(.standalone),body > #quality-workspace { margin:0; padding:20px 16px 32px; width:100%; min-width:0; }
  body .page-head, #quality-workspace .page-head.quality-center-heading { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:12px; width:100%; min-height:40px; margin:0 0 20px; padding-top:0; padding-bottom:0; text-align:left; }
  body .page-head h1,#quality-workspace .quality-center-heading h1 { font-size:24px; margin:0; line-height:1.4; text-align:left; }
  body .page-head .notification-center { top:0; }
  body .page-head > :is(a,button) { font-size:13px; }
  body :is(.view-tabs,.settings-tabs,.people-tabs,.quality-center-nav),#quality-workspace #workspace-nav { display:flex; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:8px; margin:0 0 20px; padding:0; white-space:nowrap; scrollbar-width:thin; }
  body :is(.view-tabs,.settings-tabs,.people-tabs,.quality-center-nav) > a,#quality-workspace #workspace-nav > a { flex:0 0 auto; padding:12px 10px; font-size:14px; min-height:44px; }
  body .panel,#quality-workspace main.workspace .card,#quality-workspace .diagnostic-panel { border-radius:12px; }
  #quality-workspace .quality-intake-heading h2 { font-size:18px; }
  #quality-workspace main.workspace .card { padding:18px 16px; }
  #quality-workspace .diagnostic-panel { padding:18px 16px; }
  #quality-workspace #auxiliary-tools { min-height:480px; min-height:min(620px,calc(100dvh - 210px)); }
  #quality-workspace #auxiliary-chat-input { font-size:16px; }
  body :is(input,select,textarea) { max-width:100%; }
}

.call-heading.has-notifications { position: relative; padding-right: 52px; }
.call-heading .notification-bell { position: relative; width: 36px; height: 36px; padding: 7px; color: var(--muted); border: 0; }
@media (max-width: 760px) { .call-heading .notification-center { top: 0; transform: none; } }

/* Keep table column labels intact; the existing wrapper owns horizontal scrolling. */
.table-scroll > table > thead > tr > th { white-space: nowrap; }

/* Pointer selection keeps its normal state without a persistent focus ring.
   Keyboard navigation continues to use each control's focus-visible styling. */
html[data-input-method="pointer"] :is(button,a,select,summary,[role="button"],[role="tab"],input[type="button"],input[type="submit"],input[type="checkbox"],input[type="radio"]):focus {outline:none !important;}

.performance-project-filter {display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:-4px 0 20px;}
.performance-project-cards {display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin:0;min-width:0;}
.performance-project-cards a {display:inline-flex;flex:0 0 auto;width:auto;align-items:center;min-height:40px;padding:8px 16px;border-radius:10px;background:#fff;color:var(--muted);font-size:14px;text-decoration:none;white-space:nowrap;}
.performance-project-cards a[aria-current="true"] {background:var(--hub-selected);color:var(--ink);font-weight:500;}
.performance-project-cards a:hover {background:var(--hub-selected);}

.mark-handling { padding: 0 24px 20px; }
.mark-handling .mark-alert-action { padding: 16px 0; }
.mark-handling-buttons, .mark-deadline-form, .mark-correction-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.mark-deadline-form label, .mark-correction-form label { display: grid; gap: 6px; }
.mark-deadline-form .field-help, .mark-correction-form .field-help { flex-basis: 100%; margin: 0; }
.mark-handling-complete { margin-top: 16px; }
.mark-handling input:not([type="hidden"]) { font-size: var(--hub-control-font); }
@media(max-width: 600px) { .mark-handling { padding: 0 16px 16px; } }

.performance-archive-toggle { display:inline-flex; align-items:center; min-height:40px; color:var(--muted); font-size:13px; white-space:nowrap; text-decoration:none; }
.performance-archive-toggle:hover { color:var(--ink); }

.performance-sync { margin:0 0 20px; padding:0; border:0; background:transparent; }
.performance-sync > summary { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:4px 0; color:var(--muted); font-size:13px; font-weight:400; list-style:none; }
.performance-sync > summary::-webkit-details-marker { display:none; }
.performance-sync-label::after { content:"⌄"; padding-left:6px; }
.performance-sync[open] .performance-sync-label::after { content:"⌃"; }
.performance-sync-body { margin-top:10px; padding:16px 20px; border:1px solid var(--line); border-radius:12px; background:var(--surface,#fff); font-size:13px; color:var(--muted); line-height:1.7; }
.performance-sync-body h3 { margin-top:18px; font-size:13px; font-weight:500; }
.performance-sync-body .text-button { min-height:40px; padding:4px 0; font-size:13px; font-weight:400; }