/*
 * HR Select / Corporate UI 2.2 — FLAT / STRICT
 * Design tokens and an intentional two-tier surface system.
 * Overrides only appearance of known components; never changes display,
 * height, width, overflow, position, or the accordion logic.
 * Exception: the outer cabinet gutter and top-level dashboard gaps are 10px.
 * V2.1 is REPLACED (not stacked) by the installer; original CSS stays intact.
 */

.app-shell {
  --hr-ui-stroke: #e2e8eb;
  --hr-ui-paper: #ffffff;
  --hr-ui-ink: #172a35;
  --hr-ui-muted: #62737d;
  --hr-ui-accent: #27ac98;
  --hr-ui-focus: #188b7d;
  --hr-ui-panel-shadow: 0 1px 3px rgba(20, 42, 52, .055), 0 7px 22px rgba(20, 42, 52, .035);
  --hr-ui-floating-shadow: 0 14px 38px rgba(20, 42, 52, .16), 0 2px 8px rgba(20, 42, 52, .06);
}

/* 01 / One surface = one quiet elevation. These are outer working areas,
 * selected by their actual markup nesting (not generic .section / .card).
 * There is no global box-shadow or rounded-corner rule for nested divs. */
.app-shell .main > .screen-tests-all,
.app-shell .main > .section,
.app-shell .main > .screen > .screen-tests-all,
.app-shell .main > .screen > .constructor-wrapper > .constructor-layout,
.app-shell .main > .accounts-screen,
.app-shell .main > .screen-notify-templates > .notify-card,
.app-shell .main > .table-container-bg,
.app-shell .main > .error-log-screen > .error-log-container,
.app-shell .main > .screen-template-editor > .template-editor,
.app-shell .main > .finance-requisites-gate > .finance-requisites-gate__card {
  background: var(--hr-ui-paper);
  border-radius: 0 !important;
  box-shadow: var(--hr-ui-panel-shadow) !important;
}

/* Dashboard: peer KPI and summary cards are independent top-level tiles. */
.app-shell .main .kpi-row > .kpi-card,
.app-shell .main .invoice-card,
.app-shell .main .people-card,
.app-shell .main .dashboard-card {
  border-radius: 0 !important;
  box-shadow: var(--hr-ui-panel-shadow) !important;
}

/* Consistent sharp geometry even when the original card is only a content
 * wrapper. Do NOT add another drop shadow to these nested containers. */
.app-shell .main :is(
  .tests-card, .notify-card, .accounts-card, .accounts-pane,
  .finance-card, .finance-act-card, .finance-invoice-body,
  .finance-table-wrapper, .table-container-bg, .constructor-layout,
  .constructor-question-body, .reference-ui__competency-grid,
  .comp-tables-container, .error-log-container
) {
  border-radius: 0 !important;
}

/* 02 / Inner accordions, toolbars and tab panels stay FLAT and white.
 * The previous double elevation was particularly visible on /invitations. */
.app-shell .main .tests-card-block.acc-l1,
.app-shell .main .tests-card-block.acc-l2,
.app-shell .main .tests-card .acc-l2,
.app-shell .main .tests-card .acc-l2-body,
.app-shell .main .tests-card .acc-l1-body,
.app-shell .main .tests-card .tests-card-line,
.app-shell .main .toolbar,
.app-shell .main .table-toolbar,
.app-shell .main .accounts-screen .accounts-body,
.app-shell .main .accounts-screen .accounts-pane,
.app-shell .main .screen-tests-all .notify-card,
.app-shell .main .screen-tests-all .finance-card,
.app-shell .main .screen-tests-all .finance-act-card,
.app-shell .main .screen-tests-all .finance-table-wrapper {
  box-shadow: none !important;
  border-radius: 0 !important;
}

.app-shell .main .tests-card-block.acc-l1 {
  background: #ffffff !important;
  border-bottom: 1px solid var(--hr-ui-stroke);
}

/* Intentionally DO NOT change accordion open states, heights, paddings,
 * scrolling, selected items, or modal backdrops. */

/* 03 / Headings: a consistent hierarchy; only named PAGE headings. */
.app-shell .main :is(
  .constructor-title, .finance-title, .accounts-title,
  .account-edit-title, .notify-title
) {
  color: var(--hr-ui-ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.012em;
}
.app-shell .main .tests-card .acc-l1-header,
.app-shell .main .tests-card .acc-l1-header-1 {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* 04 / Text-action controls: deliberate squared-off edges, no ornamental
 * shadows. Icon-only circles, avatars, switches and checkbox graphics are
 * explicitly excluded by using a list of semantic control classes. */
.app-shell .main :is(
  .btn, .tests-add-btn, .tests-action-btn, .tests-submit-btn,
  .tests-single-action-btn, .account-edit-btn, .account-btn,
  .finance-action-btn, .notify-add-btn, .template-editor-btn,
  .broadcast-btn, .btn-report, .btn-print, .btn-reminder,
  .save-menu-item, .status-menu-item, .accounts-tab
) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Focus states are never removed. */
.app-shell .main :is(
  .btn, .tests-add-btn, .tests-action-btn, .tests-submit-btn,
  .account-edit-btn, .account-btn, .finance-action-btn,
  .notify-add-btn, .accounts-tab
):focus-visible {
  outline: 2px solid var(--hr-ui-focus);
  outline-offset: 2px;
}

/* 05 / Form fields; avoid checkboxes, toggles and radio buttons. */
.app-shell .main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.app-shell .main select,
.app-shell .main textarea {
  border-radius: 0 !important;
}

/* 06 / Dropdowns, dialogs, alerts: shared crisp edges, elevated only while
 * floating. Don't change any display/visibility/z-index/transform. */
.app-shell :is(
  .popup-card, .modal-window, .modal-content, .ps1-modal__dialog,
  .action-menu, .save-menu, .status-menu
) {
  border-radius: 0 !important;
  box-shadow: var(--hr-ui-floating-shadow) !important;
}
.app-shell .main :is(.alert, .toast, .toast-message) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 07 / Same flat visual language on public and authentication layouts.
 * Only named standalone surfaces and ordinary text controls. */
.auth-body .auth-card,
.public-body .public-wrap,
.assess-body .assess-container {
  border-radius: 0 !important;
  box-shadow: 0 1px 3px rgba(20,42,52,.055), 0 7px 22px rgba(20,42,52,.035);
}
.auth-body .auth-card :is(.btn, button[type="submit"], input:not([type="checkbox"])),
.public-body .public-wrap :is(.btn, button[type="submit"], input:not([type="checkbox"])),
.assess-body .assess-body-inner :is(.btn, button[type="submit"]) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 08 / Candidate onboarding and test tickets share the same visual grammar,
 * but preserve their dedicated full-screen layouts and interaction logic. */
.candidate-body .form-card,
.ticket-body .ticket-container {
  border-radius: 0 !important;
  box-shadow: 0 1px 3px rgba(20,42,52,.055), 0 7px 22px rgba(20,42,52,.035) !important;
}
.candidate-body :is(.form-input, .btn-submit, .alert),
.ticket-body :is(.answer-label, .main-block, .disc-card, .sortable-card),
.ticket-body .legacy-controls .metod-row {
  border-radius: 0 !important;
}
.candidate-body .btn-submit,
.candidate-body .btn-submit:hover {
  box-shadow: none !important;
}
/* Radio control circles, ranking drag shadows and test timers stay unchanged. */


/* 09 / Compact, consistent 10px spacing.
 * Only the cabinet main area and immediate dashboard peer blocks are changed.
 * Padding INSIDE cards, forms and modal dialogs stays as it was. */
.app-shell {
  --hr-ui-space: 10px;
}

/* The original cabinet stylesheet uses padding:20px on .main.
 * Mobile used 16px/15px/24px; both now use the requested common gutter. */
.app-shell .app-body > .main {
  padding: var(--hr-ui-space) !important;
}

/* Dashboard markup has no .screen-dashboard wrapper: these blocks are
 * direct children of <main class="main"> in app/dashboard.php. */
.app-shell .app-body > .main > .kpi-row {
  gap: var(--hr-ui-space) !important;
  margin-bottom: var(--hr-ui-space) !important;
}
.app-shell .app-body > .main > .main-row {
  gap: var(--hr-ui-space) !important;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .main :is(.btn, .account-edit-btn, .account-btn) {
    transition-duration: .01ms;
  }
}

/* =====================================================================
 * HR Select / VERSION 11 — DEPTH WITHOUT DECORATION
 * Restores purposeful elevation to click targets and nested editor panels.
 * The 10px cabinet/dashboard spacing and sharp geometric edges of 10.zip
 * are unchanged. No dimensions, flex, flow, layout or scroll are touched.
 * Scoped to real controls and editor markup — not every card or div.
 * ===================================================================== */
.app-shell {
  --hr-ui-action-shadow: 0 1px 3px rgba(21, 45, 57, .13),
                         0 3px 8px rgba(21, 45, 57, .055);
  --hr-ui-action-hover-shadow: 0 2px 5px rgba(21, 45, 57, .16),
                               0 5px 12px rgba(21, 45, 57, .09);
  --hr-ui-inner-shadow: 0 1px 3px rgba(21, 45, 57, .10),
                        0 4px 12px rgba(21, 45, 57, .07);
}

/* Action buttons receive a visible but restrained edge; tabs, navigation
 * glyphs, delete-as-text actions and menu items remain visually flat. */
.app-shell .main :is(
  .btn, .tests-add-btn, .tests-action-btn,
  .account-edit-btn, .account-btn, .finance-action-btn,
  .notify-add-btn, .template-editor-btn, .broadcast-btn,
  .constructor-btn-primary, .constructor-btn-secondary, .constructor-btn-danger
):not(:disabled):not([disabled]) {
  box-shadow: var(--hr-ui-action-shadow) !important;
}
.app-shell .main :is(
  .btn, .tests-add-btn, .tests-action-btn,
  .account-edit-btn, .account-btn, .finance-action-btn,
  .notify-add-btn, .template-editor-btn, .broadcast-btn,
  .constructor-btn-primary, .constructor-btn-secondary, .constructor-btn-danger
):not(:disabled):not([disabled]):hover {
  box-shadow: var(--hr-ui-action-hover-shadow) !important;
}

/* Test editor: the question preview and each settings accordion are
 * distinct inner work surfaces. Restore their separation from the canvas.
 * Unlike the invitation accordions, only EDITOR blocks gain a shadow. */
.app-shell .main .screen-constructor-tests-editor .constructor-question-body {
  box-shadow: 0 0 0 1px rgba(27, 56, 65, .075),
              var(--hr-ui-inner-shadow) !important;
}
.app-shell .main .screen-constructor-tests-editor .constructor-palette > .tests-card-block.acc-l1 {
  background: #fff !important;
  box-shadow: var(--hr-ui-inner-shadow) !important;
}
/* Additional editor palette items, where used by other question types. */
.app-shell .main .screen-constructor-tests-editor .constructor-palette-item {
  box-shadow: var(--hr-ui-inner-shadow) !important;
}
.app-shell .main .screen-constructor-tests-editor .constructor-palette-item:hover,
.app-shell .main .screen-constructor-tests-editor .constructor-palette-item.open {
  box-shadow: var(--hr-ui-action-hover-shadow) !important;
}

/* Keep explicit keyboard focus outlines from version 10; maintain obvious
 * disabled controls without artificial elevation. */
.app-shell .main :is(.btn, .account-edit-btn, .account-btn):disabled,
.app-shell .main :is(.btn, .account-edit-btn, .account-btn)[disabled] {
  box-shadow: none !important;
}

/* HR Select v13 / dedicated action controls ONLY.
   Never decorate .sidebar, .header/topbar, site menu buttons, tabs,
   accordion triggers, drag/drop questionnaire items, or icon-only actions. */
:root {
  --hr13-button-height: 38px;
  --hr13-choice-size: 20px;
  --hr13-choice-size-dense: 16px;
  --hr13-accent: #3eae99;
  --hr13-shadow: 0 1px 3px rgba(23,45,55,.16), 0 3px 8px rgba(23,45,55,.08);
  --hr13-shadow-hover: 0 2px 5px rgba(23,45,55,.21), 0 5px 12px rgba(23,45,55,.11);
}
[data-hr-action="13"] {
  box-sizing: border-box !important;
  height: var(--hr13-button-height) !important;
  min-height: var(--hr13-button-height) !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  vertical-align: middle;
  border: 1px solid #cbd5dc !important;
  border-radius: 0 !important;
  box-shadow: var(--hr13-shadow) !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow .15s ease, background-color .15s ease;
}
[data-hr-action="13"]:not(:disabled):not([aria-disabled="true"]):hover {
  box-shadow: var(--hr13-shadow-hover) !important;
}
[data-hr-action="13"]:focus-visible {outline: 2px solid #188b7d !important; outline-offset: 2px !important;}
[data-hr-action="13"]:disabled,
[data-hr-action="13"][aria-disabled="true"] {opacity:.55; box-shadow:none !important; cursor:not-allowed;}
[data-hr-action-tone="primary"] {background: var(--hr13-accent) !important; border-color:#329e8b !important; color:#fff !important;}
[data-hr-action-tone="primary"]:not(:disabled):hover {background:#329f8e !important;}
[data-hr-action-tone="secondary"], [data-hr-action-tone="neutral"] {background:#fff !important; border-color:#cbd5dc !important; color:#304253 !important;}
[data-hr-action-tone="danger"] {background:#fff !important; border-color:#f0b8b8 !important; color:#df444a !important;}
[data-hr-action-tone="danger"]:not(:disabled):hover {background:#fff2f2 !important;}
/* Guardrails are intentionally redundant with JS, so late navigation or
   third-party scripts cannot pick up the action component accidentally. */
:is(.sidebar, #cabinet-sidebar, .sidebar-menu, .menu-subgroup, .header, .topbar, .mobile-sidebar-head, .mobile-sidebar-tools)
  [data-hr-action="13"],
:is(.menu-item, .submenu-item, .menu-item--active, .sidebar-menu-title, [data-menu], [data-submenu-key], [role="tab"], [aria-controls][aria-expanded], [data-l1] > .acc-l1-header, [data-l2] > .acc-l2-header)
  [data-hr-action="13"] {
  height: revert !important; min-height: revert !important; padding: revert !important;
  border: revert !important; box-shadow: revert !important;
  background: revert !important; color: revert !important;
}
/* Native controls that are actually visible, not custom hidden inputs. */
input[data-hr-choice="square"], input[data-hr-choice="round"] {
  --hr13-this-choice-size: var(--hr13-choice-size);
  appearance:none !important; -webkit-appearance:none !important;
  box-sizing:border-box !important;
  display:inline-block !important;
  width:var(--hr13-this-choice-size) !important;
  height:var(--hr13-this-choice-size) !important;
  min-width:var(--hr13-this-choice-size) !important;
  min-height:var(--hr13-this-choice-size) !important;
  max-width:var(--hr13-this-choice-size) !important;
  max-height:var(--hr13-this-choice-size) !important;
  margin:0 !important; padding:0 !important;
  border:1.5px solid #a9b9c0 !important;
  background:#fff !important; opacity:1 !important;
  position:relative !important;
  vertical-align:middle !important;
  cursor:pointer;
  flex-shrink:0 !important;
}
input[data-hr-choice="square"] {border-radius:2px !important;}
input[data-hr-choice="round"] {border-radius:50% !important;}
input[data-hr-choice-size="dense"] {--hr13-this-choice-size: var(--hr13-choice-size-dense);}
input[data-hr-choice]:hover:not(:disabled) {box-shadow:0 0 0 2px rgba(62,174,153,.14) !important;}
input[data-hr-choice]:focus-visible {outline:2px solid #188b7d !important; outline-offset:2px !important;}
input[data-hr-choice]:disabled {opacity:.5 !important; cursor:not-allowed;}
input[data-hr-choice]:checked {background:var(--hr13-accent) !important; border-color:var(--hr13-accent) !important;}
input[data-hr-choice]::after {content:"" !important; display:none; position:absolute !important; box-sizing:border-box !important;}
input[data-hr-choice="square"]:checked::after {
  display:block !important;
  width:32% !important; height:55% !important;
  left:31% !important; top:12% !important;
  border:solid white !important; border-width:0 2px 2px 0 !important;
  background:transparent !important; transform:rotate(45deg) !important;
}
input[data-hr-choice="round"]:checked::after {
  display:block !important; width:45% !important; height:45% !important;
  left:27.5% !important; top:27.5% !important;
  border:none !important; border-radius:50% !important;
  background:#fff !important; transform:none !important;
}
/* Density is controlled by content, not by type alone. Square radio on
   /templates remains a one-of-many radio semantically, checked like a box. */
/* Dashboard: remove old hover-reveal clone, use the existing HR tooltip ONLY
   if the one-line label is actually clipped. The JS sets data-hr-tooltip. */
.app-shell .people-role.company-label .company-label-full,
.app-shell .people-role.company-label:hover .company-label-full,
.app-shell .people-role.company-label:focus-within .company-label-full,
.app-shell .people-item:focus-visible .company-label-full {display:none !important;}
/* /respondents — status/download controls only. Does not change general
   status tooltips, report URLs, or button sizes. JS owns the open/close state. */
.app-shell .status-menu-wrapper[data-hr13-open="1"] .status-menu,
.app-shell .save-menu-wrapper[data-hr13-open="1"] .save-menu {
  opacity:1 !important; visibility:visible !important;
  transform:translateY(0) !important; pointer-events:auto !important;
}
.app-shell .status-menu-wrapper[data-hr13-open="0"] .status-menu,
.app-shell .save-menu-wrapper[data-hr13-open="0"] .save-menu {
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}
.app-shell :is(.status-menu, .save-menu) {border-radius:0 !important; border-color:#dce5e9 !important; box-shadow:0 3px 12px rgba(21,45,57,.17) !important;}
/* Invisible hover corridors: keep the cursor in an active region while
   travelling up to 24px between trigger and menu. 500ms timeout as backup. */
.app-shell .status-menu-wrapper[data-hr13-open="1"] .status-menu::before {
  content:""; position:absolute; width:24px; height:100%; left:-24px; top:0;
}
.app-shell .save-menu-wrapper[data-hr13-open="1"] .save-menu::before {
  content:""; position:absolute; height:24px; left:0; right:0; top:-24px;
}
/* Preserve the original site flash logic. Only visually merge active
   identical copies, rather than removing live alert elements. */
[data-hr13-duplicate-toast="1"] {display:none !important;}
@media (prefers-reduced-motion:reduce) {[data-hr-action="13"], input[data-hr-choice] {transition:none !important;}}