/* Reusable compact desktop controls.
   Put .system_controls on a form/panel; add .system_action_button (optionally
   _blue or _red), .system_edit_box, .system_checkbox or .system_toggle.
   Default: 13px normal text, 28px edits and 30px buttons.
   Add .system_controls_large to the wrapper, or .system_control_large to one
   control, for 1.2x sizing. A custom --system-control-scale overrides the scale.
   Size tokens below are UNSCALED; set them on any wrapper or control to tune
   a dimension independently. Dimensions resolve on each control, so an
   individual scale override works even inside an already styled wrapper.
   Example: style="--system-control-scale:1.35;--system-button-height:32px".
   Password font-family remains free for the existing credential helper. */
:where(.system_controls,.system_controls_large){--system-control-scale:1;--system-control-font-size:13px;--system-control-height:28px;--system-button-height:30px;--system-control-radius:5px;--system-control-border:#9cacc0;--system-control-text:#244866;--system-control-focus:#fffbe6;font-size:calc(var(--system-control-font-size)*var(--system-control-scale));font-weight:normal}
:where(.system_controls_large){--system-control-scale:1.2}
.system_control_large{--system-control-scale:1.2}

:where(.system_controls,.system_controls_large) .system_action_button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--system-button-gap,5px)*var(--system-control-scale));min-width:0;height:calc(var(--system-button-height)*var(--system-control-scale));min-height:calc(var(--system-button-height)*var(--system-control-scale));padding:calc(var(--system-button-padding-y,3px)*var(--system-control-scale)) calc(var(--system-button-padding-x,10px)*var(--system-control-scale));border:1px solid #a8b8c9;border-radius:calc(var(--system-control-radius)*var(--system-control-scale));background-color:#f4f7fb;background-image:linear-gradient(to bottom,#fff,#edf2f8);color:var(--system-control-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(16,42,70,.08),0 2px 3px rgba(16,42,70,.16);font:inherit;font-size:calc(var(--system-control-font-size)*var(--system-control-scale));font-weight:normal;line-height:1.15;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;touch-action:manipulation;transition:background-color .12s ease,box-shadow .12s ease,transform .08s ease}
:where(.system_controls,.system_controls_large) :is(.system_action_button_blue,.system_action_button_red){border-color:rgba(0,0,0,.25);background-color:var(--system-button-accent,var(--button-blue,#106ebe));background-image:linear-gradient(to bottom,rgba(255,255,255,.06),rgba(0,0,0,.07));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.2),0 2px 3px rgba(16,42,70,.22)}
:where(.system_controls,.system_controls_large) .system_action_button_blue{--system-button-accent:var(--button-blue,#106ebe)}
:where(.system_controls,.system_controls_large) .system_action_button_red{--system-button-accent:#b32d39}
:where(.system_controls,.system_controls_large) .system_action_button:where(:not(:disabled):not([aria-disabled="true"]):hover){background-image:linear-gradient(to bottom,rgba(255,255,255,.02),rgba(0,0,0,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.18),0 2px 4px rgba(16,42,70,.26)}
:where(.system_controls,.system_controls_large) .system_action_button:where(:not(:disabled):not([aria-disabled="true"]):active){transform:translateY(calc(1px*var(--system-control-scale)));box-shadow:inset 0 1px 2px rgba(0,0,0,.12),0 1px 1px rgba(16,42,70,.18)}
:where(.system_controls,.system_controls_large) .system_action_button:where(:focus-visible){outline:2px solid var(--button-blue,#106ebe);outline-offset:2px}
:where(.system_controls,.system_controls_large) .system_action_button:where(:disabled,[aria-disabled="true"]){background:#e5eaf0;color:#647386;border-color:#bac5d1;box-shadow:inset 0 1px 0 rgba(255,255,255,.65);opacity:1;transform:none;cursor:default;transition:none}
/* em-based SVGs follow both wrapper and individual control font scales. */
:where(.system_controls,.system_controls_large) .system_action_button :where(svg){width:var(--system-control-icon-size,1.25em);height:var(--system-control-icon-size,1.25em);flex:none}

:where(.system_controls,.system_controls_large) .system_edit_box{box-sizing:border-box;min-width:0;width:100%;height:calc(var(--system-control-height)*var(--system-control-scale));min-height:calc(var(--system-control-height)*var(--system-control-scale));padding:calc(var(--system-edit-padding-y,3px)*var(--system-control-scale)) calc(var(--system-edit-padding-x,7px)*var(--system-control-scale));border:1px solid var(--system-control-border);border-radius:calc(var(--system-control-radius)*var(--system-control-scale));background:#fff;color:var(--system-control-text);box-shadow:inset 0 1px 1px rgba(16,42,70,.025),0 1px 2px rgba(16,42,70,.12);font:inherit;font-size:calc(var(--system-control-font-size)*var(--system-control-scale));font-weight:normal;line-height:1.25;vertical-align:middle}
:where(.system_controls,.system_controls_large) :where(textarea).system_edit_box{resize:none}
:where(.system_controls,.system_controls_large) :where(select).system_edit_box{padding-right:calc(var(--system-select-padding-right,20px)*var(--system-control-scale))}
:where(.system_controls,.system_controls_large) .system_edit_box:where([readonly]){background:#f2f5f9;color:#53677c;cursor:default}
:where(.system_controls,.system_controls_large) .system_edit_box:where(:disabled){background:#e9edf2;color:#67788a;opacity:1;box-shadow:none;cursor:default}
:where(.system_controls,.system_controls_large) .system_edit_box:where(:focus){background:var(--system-control-focus);outline:none;box-shadow:none}
:where(.system_controls,.system_controls_large) .system_edit_box:where([aria-invalid="true"]){border-color:#c43c4b;color:#a22434;background:#fff1f3}
/* Retain the validation border against the shell's existing focused-input rule. */
:where(.system_controls,.system_controls_large) .system_edit_box[aria-invalid="true"]:focus{background:var(--system-control-focus);border-color:#c43c4b}

/* Native checkbox inputs retain their checked, disabled and keyboard semantics.
   One scale controls box, mark, track and thumb proportions together. */
:where(.system_controls,.system_controls_large) .system_checkbox{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:inline-grid;place-content:center;vertical-align:middle;flex:none;width:calc(var(--system-checkbox-size,15px)*var(--system-control-scale));height:calc(var(--system-checkbox-size,15px)*var(--system-control-scale));min-width:calc(var(--system-checkbox-size,15px)*var(--system-control-scale));padding:0;margin:0;border:1px solid #8296ad;border-radius:calc(3px*var(--system-control-scale));background:linear-gradient(#fff,#e6edf7);box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(16,42,70,.16);cursor:pointer}
:where(.system_controls,.system_controls_large) .system_checkbox::before{content:'';width:calc(8px*var(--system-control-scale));height:calc(5px*var(--system-control-scale));border-left:calc(2px*var(--system-control-scale)) solid currentColor;border-bottom:calc(2px*var(--system-control-scale)) solid currentColor;transform:translateY(calc(-1px*var(--system-control-scale))) rotate(-45deg) scale(0);color:#fff}
:where(.system_controls,.system_controls_large) .system_checkbox:where(:checked){background-color:var(--button-blue,#106ebe);background-image:linear-gradient(rgba(255,255,255,.08),rgba(0,0,0,.08));border-color:#32618a;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 1px rgba(16,42,70,.16)}
:where(.system_controls,.system_controls_large) .system_checkbox:where(:checked)::before{transform:translateY(calc(-1px*var(--system-control-scale))) rotate(-45deg) scale(1)}
:where(.system_controls,.system_controls_large) .system_checkbox:where(:indeterminate)::before{width:calc(8px*var(--system-control-scale));height:0;border-left:0;border-bottom:calc(2px*var(--system-control-scale)) solid #244866;transform:none}
:where(.system_controls,.system_controls_large) .system_checkbox:where(:disabled){border-color:#a9b6c4;background:#edf1f5;box-shadow:inset 0 1px 0 #fff;cursor:default;opacity:1}
:where(.system_controls,.system_controls_large) .system_checkbox:where(:disabled)::before{color:#66788d}
:where(.system_controls,.system_controls_large) .system_toggle{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:inline-block;position:relative;vertical-align:middle;flex:none;width:calc(var(--system-toggle-width,31px)*var(--system-control-scale));height:calc(var(--system-toggle-height,18px)*var(--system-control-scale));min-width:calc(var(--system-toggle-width,31px)*var(--system-control-scale));padding:0;margin:0;border:1px solid #8a9bb0;border-radius:calc(10px*var(--system-control-scale));background:linear-gradient(#b9c5d4,#d5deea);box-shadow:inset 0 1px 2px rgba(16,42,70,.18);cursor:pointer;transition:background-color .12s ease}
:where(.system_controls,.system_controls_large) .system_toggle::before{content:'';box-sizing:border-box;position:absolute;left:calc(2px*var(--system-control-scale));top:calc(1px*var(--system-control-scale));width:calc(var(--system-toggle-thumb,14px)*var(--system-control-scale));height:calc(var(--system-toggle-thumb,14px)*var(--system-control-scale));border:1px solid rgba(71,91,116,.35);border-radius:50%;background:linear-gradient(#fff,#e1e8f2);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,42,70,.3);transition:transform .12s ease}
:where(.system_controls,.system_controls_large) .system_toggle:where(:checked){background-color:var(--button-blue,#106ebe);background-image:linear-gradient(rgba(255,255,255,.08),rgba(0,0,0,.1));border-color:#32618a}
:where(.system_controls,.system_controls_large) .system_toggle:where(:checked)::before{transform:translateX(calc(var(--system-toggle-travel,12px)*var(--system-control-scale)))}
:where(.system_controls,.system_controls_large) .system_toggle:where(:disabled){background:#e0e6ed;border-color:#adb9c8;box-shadow:none;opacity:1;cursor:default}
:where(.system_controls,.system_controls_large) .system_toggle:where(:disabled:checked){background:#9caec2}
:where(.system_controls,.system_controls_large) :where(.system_checkbox,.system_toggle):focus-visible{outline:2px solid var(--button-blue,#106ebe);outline-offset:2px}
@media(prefers-reduced-motion:reduce){:where(.system_controls,.system_controls_large) :is(.system_action_button,.system_toggle){transition:none}:where(.system_controls,.system_controls_large) .system_toggle::before{transition:none}}
@media(forced-colors:active){:where(.system_controls,.system_controls_large) :is(.system_checkbox,.system_toggle){appearance:auto;-webkit-appearance:auto;box-shadow:none}:where(.system_controls,.system_controls_large) :is(.system_checkbox,.system_toggle)::before{display:none}:where(.system_controls,.system_controls_large) .system_action_button{border:1px solid ButtonText;box-shadow:none}:where(.system_controls,.system_controls_large) .system_edit_box{border:1px solid FieldText;box-shadow:none}}

/* Opt-in data alignment; ordinary text/number fields keep their normal alignment. */
:where(.system_controls,.system_controls_large) .system_edit_number_small{text-align:center}
:where(.system_controls,.system_controls_large) .system_edit_money{text-align:right}
/* Shared compact data lists, using the Employees typography and colour palette.
   Opt-in classes keep existing page layouts unchanged. */
.system_data_workspace{font:13px/1.3 'Roboto','Segoe UI',sans-serif;color:#173655}
.system_data_toolbar{display:flex;align-items:center;gap:10px;min-width:0}
.system_data_title{margin:0;font-size:15px;font-weight:700;white-space:nowrap}
.system_data_status{min-width:0;font-size:12px;color:#617083}
.system_data_status[data-state="error"]{color:#b42318}
.system_data_status[data-state="success"]{color:#23703b}
.system_data_scroll{min-width:0;min-height:0;overflow:auto;border:1px solid #d1d1d1;border-radius:6px;background:#fff;scrollbar-gutter:stable}
.system_data_table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%;margin:0;font:inherit;color:inherit;background:#fff}
.system_data_table th,.system_data_table td{box-sizing:border-box;position:relative;padding:7px 8px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;border:0;border-bottom:1px solid #e6e6e6;height:32px}
.system_data_table thead th{position:sticky;top:0;z-index:2;background:#f0f0f0;color:#43566d;font-weight:700;border-bottom-color:#d1d1d1}
.system_data_table tbody tr:hover{background:#f2f6fc}
.system_data_table tbody tr[aria-selected="true"]{background:var(--google-blue-mid,#337ac5);color:#fff}
.system_data_table .system_data_number{text-align:right;font-variant-numeric:tabular-nums}
.system_data_table .system_data_center{text-align:center}
.system_data_table .system_data_sort{font:inherit;color:inherit;border:0;background:none;padding:0;max-width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.system_data_table .system_data_sort:focus-visible{outline:1px solid #245b98;outline-offset:1px}
.system_data_table .system_data_link{font:inherit;color:inherit;border:0;background:none;padding:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;text-align:inherit;text-decoration:none}
.system_data_table .system_data_link:hover{text-decoration:underline}
.system_data_table .system_data_link:focus-visible{outline:1px solid #245b98;outline-offset:1px}
.system_data_table .system_column_resize{position:absolute;right:-1px;top:0;bottom:0;width:8px;z-index:3;cursor:col-resize;background:transparent;border:0;outline:none;touch-action:none}
.system_data_table .system_column_resize:focus-visible{background:transparent;outline:none}
.system_data_table.system_data_resizing,.system_data_table.system_data_resizing *{cursor:col-resize!important;user-select:none!important}
.system_data_summary{font:inherit;color:#43566d;background:#f0f0f0;border:1px solid #d1d1d1;border-radius:4px;padding:6px 9px}
.system_data_empty{padding:20px!important;text-align:center!important;color:#617083}
:where(.system_controls,.system_controls_large) .system_icon_button{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:23px;padding:2px;border:0;background:transparent;color:inherit;cursor:pointer;vertical-align:middle}
:where(.system_controls,.system_controls_large) .system_icon_button svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(.system_controls,.system_controls_large) .system_icon_button:focus-visible{outline:1px solid #245b98}
.system_record_dialog{box-sizing:border-box;border:1px solid #bbc5d1;border-radius:8px;padding:0;width:min(800px,calc(100vw - 28px));max-height:calc(100dvh - 28px);background:#fff;color:#173655;font:13px/1.3 'Roboto','Segoe UI',sans-serif;overflow:hidden}
.system_record_dialog::backdrop{background:#0006}
.system_record_dialog>form,.system_record_dialog>.system_record_shell{display:flex;flex-direction:column;max-height:calc(100dvh - 30px);min-height:0}
.system_record_heading{display:flex;align-items:center;gap:10px;flex:none;margin:0;padding:10px 12px;background:#f0f0f0;color:#43566d;font-size:15px;font-weight:bold}
.system_record_heading>span:first-child{flex:1;min-width:0}
.system_record_body{padding:12px;overflow:auto;min-height:0;background:rgb(231,240,255)}
.system_record_fields{display:grid;grid-template-columns:155px minmax(0,1fr);gap:7px 12px;align-items:center}
.system_record_fields>label{min-width:0}
.system_record_actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex:none;padding:10px 12px;background:#fff}
.system_record_error{color:#b42318;margin:0;padding:0 12px 10px;white-space:pre-wrap}
.system_record_error:empty{display:none}
.system_field_row{display:flex;align-items:center;gap:6px;min-width:0}
.system_field_row>.system_edit_box{flex:1;min-width:0}
.system_control_label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}
.system_secondary_text{font-size:12px;color:#617083}
@media(max-width:520px){.system_record_fields{grid-template-columns:1fr;gap:4px}.system_record_fields>label:not(:first-child){margin-top:5px}.system_record_actions{flex-wrap:wrap}}
@media(forced-colors:active){.system_data_table th,.system_data_table td{border-bottom:1px solid CanvasText}.system_data_table tbody tr[aria-selected="true"]{background:Highlight;color:HighlightText}}
.system_record_dialog form{display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* Optional subtle column separators for continuous data-table rows. */
.system_data_table.system_data_column_borders tbody td+td{border-left:1px solid #dce3eb}

/* Shared report/readiness feedback; individual modules own their layout. */
.system_readiness{font:12px/1.4 'Roboto','Segoe UI',sans-serif;color:#617083;min-width:0}
.system_readiness strong{display:block;font-weight:600}.system_readiness summary{font-weight:600;cursor:pointer}.system_readiness summary:focus-visible{outline:2px solid var(--button-blue,#106ebe);outline-offset:2px}
.system_readiness[data-state="attention"]{color:#895400}
.system_readiness[data-state="ready"] :is(strong,summary){color:#23703b}
.system_readiness[data-state="unverified"] :is(strong,summary),.system_readiness[data-state="unavailable"] :is(strong,summary){color:#895400}
.system_readiness ul{margin:4px 0 0;padding-left:18px}
.system_readiness p{margin:4px 0 0;color:#617083}