/* Shared action control. CRM and portal use the same shape, palette and motion. */
:root {
  --standard-dropdown-width:250px;
  --crm-raised-control-face-radius:3px;
  --crm-raised-control-track-radius:3px;
  --crm-raised-control-face-height:40px;
  --crm-raised-control-total-height: calc(var(--crm-raised-control-face-height) + (var(--crm-raised-control-track-depth) * 2));
  --crm-raised-control-track-depth:0px;
  --crm-raised-control-face-width:50px;
  /* Retained consumers include binary toggles and the compact client edit control. */
  --crm-raised-control-face-padding:5px 8px;
  --crm-raised-control-pressed-padding-top:8px;
  --crm-raised-control-pressed-padding-bottom:2px;
  --crm-raised-control-motion-duration:120ms;
  --crm-raised-control-motion-easing:cubic-bezier(0.4,0,0.2,1);
  --crm-raised-control-track-surface:#f1f3f5;
  --crm-raised-control-track-shadow:inset 3px 3px 6px #1f263338,inset -3px -3px 6px #fffffffa;
  --crm-raised-control-face-shadow:0 1px 1px #1f26332e,0 3px 4px #1f263329;
  --action-neutral:#383e42;
  --action-disabled-opacity:.5;
  --action-positive:#2a922a;
  --action-negative:#b73535;
  --action-icon-size:20px;
  --action-small-size:25px;
  --action-small-icon-size:15px;
  --ui-icon-stroke-width:1.5px;
  --action-label-size:14px;
  --action-label-offset:var(--crm-raised-control-face-height);
  --action-end-padding:10px;
  --navigation-row-height:40px;
  --navigation-row-gap:10px;
  --navigation-column-padding:25px;
  --navigation-collapsed-width:calc(2 * var(--navigation-column-padding) + var(--crm-raised-control-face-height) + 1px);
}
/* UI icon view boxes are distinct from chart/report SVGs. Apply vector-effect
   to each painted shape: it is not inherited from the SVG root. */
svg:is([viewBox="0 0 14 14"],[viewBox="0 0 24 24"],[viewBox="0 0 10 10"]) {
  overflow:visible;
}
svg:is([viewBox="0 0 14 14"],[viewBox="0 0 24 24"],[viewBox="0 0 10 10"])
  :is(path,circle,ellipse,line,polyline,polygon,rect):not(clipPath *,defs *) {
  stroke-width:var(--ui-icon-stroke-width) !important;
  vector-effect:non-scaling-stroke;
}
.system-standard-raised-action {
  --action-color:var(--action-neutral);
  --action-expanded-width:100px;
  display:inline-flex;
  position:relative;
  flex:0 0 auto;
  width:auto !important;
  min-width:var(--crm-raised-control-face-height) !important;
  max-width:none !important;
  height:var(--crm-raised-control-face-height) !important;
  min-height:var(--crm-raised-control-face-height) !important;
  max-height:none !important;
  padding:0 !important;
  border:0;
  border-radius:3px;
  background:var(--action-color) !important;
  color:#fff !important;
  box-shadow:2px 2px 10px #0003;
  box-sizing:border-box;
  appearance:none;
  text-decoration:none;
  vertical-align:middle;
  transition:width 300ms ease,transform 120ms ease;
}
.system-standard-raised-action.has-action-icon { width:var(--crm-raised-control-face-height) !important; }
.system-standard-raised-action[hidden] { display:none !important; }
.system-standard-raised-action:is([data-action-role=positive],.system-standard-save-button,.system-standard-send-test-button) { --action-color:var(--action-positive); }
.system-standard-raised-action:is([data-action-role=negative],.system-standard-delete-button,.is-save-error,.is-send-error,.is-delete-error) { --action-color:var(--action-negative); }
.system-standard-raised-action.is-confirming { --action-color:#c77c29; }
.system-standard-raised-action.system-standard-delete-button.is-confirming { --action-color:var(--action-negative); }
.system-standard-raised-action .system-standard-action-face {
  display:flex; align-items:center; justify-content:center; position:relative;
  width:100%; min-width:0; height:var(--crm-raised-control-face-height); padding:0 var(--action-end-padding);
  border-radius:inherit; overflow:hidden; background:transparent !important;
  box-shadow:none !important; color:inherit; transform:none !important;
}
.system-standard-raised-action.has-action-icon .system-standard-action-face { padding:0 !important; }
.system-standard-raised-action .system-standard-action-icon {
  position:absolute; left:calc((var(--crm-raised-control-face-height) - var(--action-icon-size)) / 2); top:calc((var(--crm-raised-control-face-height) - var(--action-icon-size)) / 2); display:grid; place-items:center;
  width:var(--action-icon-size); height:var(--action-icon-size);
}
.system-standard-raised-action .system-standard-action-icon :is(svg,img) { width:100%; height:100%; display:block; object-fit:contain; max-width:none; max-height:none; margin:0; padding:0; flex:none; }
.system-standard-raised-action .system-standard-action-label {
  display:block; width:max-content; color:inherit;
  font:400 var(--action-label-size)/var(--crm-raised-control-face-height) Raleway,sans-serif; white-space:nowrap;
}
.system-standard-raised-action.is-selected .system-standard-action-face,
.system-standard-raised-action[aria-pressed="true"] .system-standard-action-face {
  box-shadow:inset 2px 2px 4px #0008 !important;
}
.system-standard-raised-action.has-action-icon .system-standard-action-label {
  position:absolute; left:var(--action-label-offset); top:0; opacity:0; transition:opacity 300ms ease;
}
.system-standard-raised-action.has-action-icon:is(:hover,:focus-visible,.is-confirming,.is-save-success,.is-save-fading,.is-success,.is-success-fading,.is-sent,.is-sent-fading) { width:var(--action-expanded-width) !important; }
.system-standard-raised-action:is(:hover,:focus-visible,.is-confirming,.is-save-success,.is-save-fading,.is-success,.is-success-fading,.is-sent,.is-sent-fading) .system-standard-action-label { opacity:1; }
.system-standard-raised-action.has-action-icon[data-always-expanded] { width:var(--action-expanded-width) !important; }
.system-standard-raised-action[data-always-expanded] .system-standard-action-label { opacity:1; }
.system-standard-raised-action:active { transform:translate(2px,2px); }
.system-standard-raised-action:disabled { cursor:not-allowed; opacity:var(--action-disabled-opacity); transform:none; }
.system-standard-raised-action:focus-visible { outline:2px solid #e1c16e; outline-offset:3px; }
/* Selection controls share the same face; the native checked state remains
   authoritative so form hydration, keyboard access and dirty checks survive. */
.system-standard-selection-button[aria-pressed="true"] { --action-color:var(--action-positive); }
.system-standard-selection-button .selection-dot { visibility:hidden; }
.system-standard-selection-button[aria-pressed="true"] .selection-dot { visibility:visible; }
.ios-switch:not(.task-card .ios-switch) {
  width:var(--crm-raised-control-face-height); height:var(--crm-raised-control-face-height); flex:0 0 var(--crm-raised-control-face-height);
}
.ios-switch:not(.task-card .ios-switch) input {
  width:100%; height:100%; inset:0; margin:0; z-index:1; cursor:pointer;
}
.ios-switch:not(.task-card .ios-switch) .ios-slider {
  background:var(--action-neutral); border-radius:3px;
  box-shadow:2px 2px 10px #0003;
  transition:transform 120ms ease, background-color 120ms ease;
}
.ios-switch:not(.task-card .ios-switch) .ios-slider::before,
.ios-switch:not(.task-card .ios-switch) input:checked + .ios-slider::before {
  box-sizing:border-box; width:var(--action-icon-size); height:var(--action-icon-size); left:50%; top:50%;
  border:var(--ui-icon-stroke-width) solid white; border-radius:50%; background:transparent;
  box-shadow:none; transform:translate(-50%,-50%); transition:none;
}
.ios-switch:not(.task-card .ios-switch) .ios-slider::after {
  content:""; position:absolute; width:calc(var(--action-icon-size) / 2); height:calc(var(--action-icon-size) / 2); left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; background:white; visibility:hidden;
}
.ios-switch:not(.task-card .ios-switch) input:checked + .ios-slider {
  background:var(--action-positive); box-shadow:inset 2px 2px 4px #0008,2px 2px 10px #0003;
}
.ios-switch:not(.task-card .ios-switch) input:checked + .ios-slider::after { visibility:visible; }
.ios-switch:not(.task-card .ios-switch) input:focus-visible + .ios-slider { outline:2px solid #e1c16e; outline-offset:3px; }
.ios-switch:not(.task-card .ios-switch) input:active:not(:disabled) + .ios-slider { transform:translate(2px,2px); }
.ios-switch:not(.task-card .ios-switch) input:disabled { cursor:not-allowed; }
.ios-switch:not(.task-card .ios-switch) input:disabled + .ios-slider { opacity:.5; }
@media (hover:none) {
  .system-standard-raised-action.has-action-icon { width:var(--action-expanded-width) !important; }
  .system-standard-raised-action.has-action-icon .system-standard-action-label { opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  .system-standard-raised-action,.system-standard-raised-action .system-standard-action-label { transition:none; }
}

/* Shared mail-design fields use the same grid as the existing mail editors. */
.email-design-fields { display: grid; gap: 25px; min-width: 0; width: 100%; }
.email-design-fields .email-design-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 25px; align-items: start; }
.email-design-fields input:not([type="checkbox"]) { min-width: 0; width: 100%; box-sizing: border-box; }
.email-preview-content:has([data-crm-email-design]) { padding: 0; font-family: Raleway, Arial, sans-serif; }
[data-crm-email-design] p { margin: 0 0 10px; line-height: 1.3; }
[data-crm-email-design] p:last-child { margin-bottom: 0; }
[data-crm-email-design] img { max-width: 100%; }
#employeeRailThirdPanel .email-design-fields { flex: 0 0 auto; }
#employeeRailThirdPanel .email-design-fields .email-design-row { display: grid; grid-template-columns: 100px minmax(0,1fr); gap:25px; align-items:start; min-width:0; width:100%; min-height:25px; }
#employeeRailThirdPanel .email-design-fields .employee-rail-password-input { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
#employeeRailThirdPanel.employee-rail-third-panel--emails :is(.employee-rail-email-settings-grid,.employee-rail-deadline-sections-grid):has(> .email-design-fields) { display:flex; flex-direction:column; }
#employeeRailThirdPanel.employee-rail-third-panel--emails :is(.employee-rail-email-settings-grid,.employee-rail-deadline-sections-grid):has(> .email-design-fields) > * { flex-shrink:0; }
#employeeRailThirdPanel.employee-rail-third-panel--emails :is(.employee-rail-email-settings-grid,.employee-rail-deadline-sections-grid):has(> .email-design-fields) > :is(.employee-rail-deadline-section-body-row,.employee-rail-email-standard-row) { flex:1 0 125px; height:auto; }
#employeeRailThirdPanel.employee-rail-third-panel--tasks #adminTaskCompletionEmailFields:has(> .email-design-fields) { grid-template-rows:auto 25px minmax(125px,1fr) auto auto; }
#employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-mail-fields:has(> .email-design-fields) { grid-template-rows:auto 25px minmax(125px,1fr) auto; }
#employeeRailThirdPanel .email-design-fields .ios-switch input[type="checkbox"] { width:100%; height:100%; min-width:0; max-width:100%; left:0; margin:0; }

#employeeRailThirdPanel .email-design-fields .ios-switch { position:relative; display:inline-flex; width:var(--crm-raised-control-face-height); min-width:var(--crm-raised-control-face-height); max-width:var(--crm-raised-control-face-height); height:var(--crm-raised-control-face-height); }

/* Explicit icon-only controls never expand, including touch and focus states. */
.system-standard-raised-action.has-action-icon[data-icon-only] { width:var(--crm-raised-control-face-height) !important; }
.system-standard-raised-action[data-icon-only] .system-standard-action-label { display:none; }

/* Feedback text inherits the semantic face colour, not the white icon colour. */
.system-standard-raised-action:is(.system-standard-save-button,.system-standard-delete-button,.system-standard-send-test-button)::after { color:var(--action-color); }
.system-standard-raised-action[data-action-role="neutral"]:not(.is-confirming,.is-save-error,.is-send-error,.is-delete-error,[data-active-green][aria-pressed="true"],[data-active-green][aria-checked="true"]) { --action-color:var(--action-neutral); }

/* Orthogonal variants: size, expansion and selection are independent. */
.system-standard-raised-action[data-control-size="small"],
.ios-switch[data-control-size="small"],
.sidebar-navigation-toggle[data-control-size="small"] {
  --crm-raised-control-face-height:var(--action-small-size);
  --action-icon-size:var(--action-small-icon-size);
  --action-label-size:12px;
  --action-label-offset:var(--action-small-size);
}
.system-standard-raised-action[data-active-green]:is([aria-pressed="true"],[aria-checked="true"]) {
  --action-color:var(--action-positive);
}
/* Fixed icon controls retain their geometry on touch, focus and feedback. */
.system-standard-raised-action.has-action-icon:is([data-icon-only],[data-control-toggle]) {
  width:var(--crm-raised-control-face-height) !important;
}
.system-standard-raised-action:is([data-icon-only],[data-control-toggle]) .system-standard-action-label { display:none; }
/* A file input stays native for picking/security; its labelled action is shared. */
.system-standard-file-picker { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.system-standard-file-picker input[type=file][hidden] { display:none; }
.system-standard-file-picker .system-standard-raised-action { cursor:pointer; }
/* Menu controls are the deliberate light-surface navigation variant. */
.system-standard-navigation-action {
  --action-color:transparent !important;
  color:#000 !important;
  box-shadow:none;
}
.system-standard-navigation-action[data-action-role="negative"] { color:var(--action-negative) !important; }
.system-standard-navigation-action:is(:hover,[aria-pressed="true"]) { --action-color:#fff !important; }
.system-standard-navigation-action[aria-pressed="true"] .system-standard-action-face { box-shadow:none !important; }
.system-standard-navigation-action.has-action-icon:not(:hover,:focus-visible,[aria-pressed="true"]) { width:var(--crm-raised-control-face-height) !important; }
.system-standard-navigation-action:not(:hover,:focus-visible,[aria-pressed="true"]) .system-standard-action-label { opacity:0; }
/* One navigation-row policy for staff and portal, including their footer menus. */
:is(#stagingSidebar #employeeRailMenu, #stagingClientActions, #portalFooterMenu) :is(.employee-rail-menu-action,.sidebar-add-menu-row,.portal-navigation-row) {
  padding-inline:10px; color:#000; font-size:var(--action-label-size); white-space:nowrap;
}
:is(#stagingSidebar #employeeRailMenu #employeeMenuLogoutBtn, #portalFooterMenu #logout) { color:var(--action-negative); }
:is(.staging-navigation-collapsed #stagingSidebar, #workspace.navigation-collapsed #navigationColumn)
  :is(.left-action-rail-glyph,.employee-rail-menu-action,.portal-navigation-row) {
  width:var(--crm-raised-control-face-height); min-width:var(--crm-raised-control-face-height);
  height:var(--crm-raised-control-face-height); padding:10px; justify-content:center; gap:0;
}
/* Inline action rows must reserve the control height, not the old 25px field height. */
.employee-rail-add-task-row:has(> .system-standard-raised-action) {
  height:auto; min-height:var(--crm-raised-control-face-height); align-items:center;
}
/* Small controls stay fixed unless expansion is explicitly requested. */
.system-standard-raised-action.has-action-icon[data-control-size="small"]:not([data-always-expanded]):not([data-expandable]:enabled) { width:25px !important; }
.system-standard-raised-action[data-control-size="small"]:not([data-always-expanded]):not([data-expandable]:enabled) .system-standard-action-label { display:none; }

/* One native dropdown width across administration, portal and shared forms.
   Listboxes retain their multi-row layout; narrow containers may shrink controls. */
select:not([multiple]):not([size]) {
  width:var(--standard-dropdown-width) !important;
  max-width:100% !important;
  min-width:0 !important;
  flex-grow:0 !important;
  flex-basis:auto !important;
  box-sizing:border-box;
}