/* Shared responsive workspace. Loaded after the legacy component styles. */
:root { --workspace-ink: #18324b; --workspace-accent: #176b75; }
body { padding-top: 0; background: #f3f6f8; color: var(--workspace-ink); }
body > .container-fluid { max-width: 1560px; padding: 0 24px 32px; }
.navbar.bg-primary { background: #15384b !important; padding: 12px 16px; }
.navbar .nav-link { border-radius: 8px; padding: 10px 12px !important; }
.navbar .nav-link.active { background: #ffffff20; color: #fff; }
.navbar-brand { font-size: 1.3rem; }
.card { border: 1px solid #dfe7eb; border-radius: 12px; box-shadow: 0 2px 8px #18324b06; overflow: visible; }
.card:hover { box-shadow: 0 2px 8px #18324b06; }
.card-header { background: #fff; color: var(--workspace-ink); border-bottom: 1px solid #e4ebef; padding: 14px 18px; }
.card-header:first-child { border-radius: 12px 12px 0 0; }
.card-header.d-flex { gap: 10px; flex-wrap: wrap; }
.card-body { padding: 18px; min-width: 0; }
.btn { min-height: 44px; border-radius: 8px; white-space: normal; }
.btn-primary { background: #176b75; border-color: #176b75; }
.btn-primary:hover { background: #10535b; border-color: #10535b; }
.form-control, .form-select { min-height: 44px; border-color: #cbd7df; }
.form-label { font-weight: 600; margin-bottom: 6px; }
.row > *, .capture-workspace > *, .export-shell > * { min-width: 0; }
.row { row-gap: 12px; }
textarea { resize: vertical; }
:focus-visible { outline: 3px solid #258fa3 !important; outline-offset: 3px; }
.table-responsive { border: 1px solid #e4ebef; border-radius: 8px; }
.table th { color: #496174; font-size: .82rem; }
.table td { overflow-wrap: anywhere; }
.session-info { background: #e8f3f2; color: #163b3f; border: 1px solid #bedbd9; border-radius: 12px; }
.session-info p { overflow-wrap: anywhere; }
.session-info .btn-light { border: 1px solid #b8ced3; }
.workflow-panel { background: #fff; border: 1px solid #dfe7eb; border-radius: 12px; margin-bottom: 20px; padding: 16px 18px; }
.workflow-steps { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; }
.workflow-steps li { display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 8px; background: #f2f5f7; color: #526777; font-size: .88rem; }
.workflow-steps .step-number { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border: 1px solid #bac9d3; border-radius: 50%; }
.workflow-steps li[data-state="current"] { background: #e0f0ef; color: #10535b; font-weight: 700; }
.workflow-steps li[data-state="done"] .step-number { background: #176b75; color: #fff; border-color: #176b75; }
.workflow-message { font-size: .9rem; margin: 0; }
.help-trigger { display: inline-grid; place-items: center; width: 28px; height: 28px; min-height: 28px; padding: 0; margin-left: 5px; border: 1px solid #a9becb; border-radius: 50%; color: #326071; background: #f4f9fc; font-size: .8rem; font-weight: 700; vertical-align: middle; cursor: help; }
.context-help { position: fixed; z-index: 1090; max-width: min(320px, calc(100vw - 24px)); background: #17384b; color: #fff; padding: 12px 14px; border-radius: 10px; box-shadow: 0 6px 22px #102e4930; font-size: .88rem; line-height: 1.5; }
.context-help[hidden] { display: none; }
.admin-navigation { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 18px; }
.admin-navigation .btn[aria-selected="true"] { background: #176b75; border-color: #176b75; color: #fff; }
.admin-section-hidden { display: none !important; }
.admin-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.admin-overview article { padding: 16px; border: 1px solid #dfe7eb; border-radius: 10px; background: #f8fafb; }
.admin-overview strong { display: block; margin-top: 4px; font-size: 1.15rem; }
.admin-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-heading h1 { font-size: 1.5rem; margin: 0 0 4px; }
.admin-heading p { margin: 0; color: #526777; }
.capture-hint { border-left: 3px solid #176b75; padding: 8px 12px; background: #f1f7f7; }
.nav-link[aria-disabled="true"] { opacity: .6; }
.part1-workspace { min-height: 520px; height: calc(100vh - 350px); }
.toast-container { max-width: calc(100vw - 24px); }
.toast { width: 360px; max-width: 100%; }
@media (max-width: 1399px) and (min-width: 992px) {
  .navbar-expand-lg .navbar-nav { flex-wrap: wrap; justify-content: flex-end; }
  .navbar .nav-link { padding: 8px 10px !important; font-size: .86rem; }
}
@media (max-width: 991px) {
  body > .container-fluid { padding: 0 16px 24px; }
  .navbar { position: sticky; top: 0; z-index: 1030; }
  .navbar-collapse { max-height: 75vh; overflow-y: auto; }
  .navbar-nav { gap: 4px; padding-top: 12px; }
  .workflow-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .export-shell { min-height: 0; }
  .export-panel { min-height: 0; }
}
@media (max-width: 767px) {
  body > .container-fluid { padding: 0 12px 24px; }
  .navbar.bg-primary { padding: 10px 0; margin-bottom: 16px !important; }
  .card-header, .card-body { padding: 14px; }
  .workflow-panel { padding: 12px; }
  .workflow-steps { grid-template-columns: 1fr 1fr; gap: 6px; }
  .workflow-steps li { font-size: .8rem; padding: 8px; }
  .workflow-steps li:last-child { grid-column: 1 / -1; }
  .form-control, .form-select, .spell-editor { font-size: 16px; }
  .help-trigger { width: 32px; height: 32px; }
  .session-info .text-end { text-align: left !important; }
  .session-info .btn { width: 100%; }
  .test-picker-table-head, .test-picker-row { grid-template-columns: 44px minmax(0,1fr); }
  .test-picker-table-head .col-en, .test-picker-row .col-en { display: none; }
  .test-picker-menu { max-height: 300px; }
  .part1-workspace { height: auto; min-height: 0; }
  #part1DataContainer { max-height: none !important; overflow: visible !important; }
  #part1VideoPlayer { min-height: 240px; max-height: 45vh !important; }
  .admin-overview { grid-template-columns: 1fr; gap: 8px; }
  .admin-navigation .btn { flex: 1 1 calc(50% - 8px); }
  #tab_admin .h-100 { height: auto !important; }
  .btn-group { flex-wrap: wrap; gap: 4px; }
  .btn-group > .btn { border-radius: 8px !important; margin-left: 0 !important; }
  #tab5 .btn-group > .btn { flex: 1 1 100%; }
  .export-panel-bd { overflow-wrap: anywhere; }
  #analyticsPreset { min-width: 0 !important; max-width: 100%; }
  .modal-dialog { margin: 12px; }
  .modal-body { max-height: 70vh; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.navbar .nav-link { color: #dce8ed; }
.navbar .navbar-text { color: #c3d6df !important; }
#tab_admin .row.g-3 > [class*="col-"] { min-width: 0; }
.task-item > .d-flex { flex-wrap: wrap; gap: 10px; }