/* Shared action control. CRM and portal use the same shape, palette and motion. */
:root {
  --crm-raised-control-face-radius:3px;
  --crm-raised-control-track-radius:3px;
  --crm-raised-control-face-height:25px;
  --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-positive:#2a922a;
  --action-negative:#b73535;
  --action-icon-size:15px;
}
.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:25px !important;
  max-width:none !important;
  height:25px !important;
  min-height:25px !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:25px !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:25px; padding:0 10px;
  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((25px - var(--action-icon-size)) / 2); top:calc((25px - 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; margin:0; padding:0; flex:none; }
.system-standard-raised-action .system-standard-action-label {
  display:block; width:max-content; color:inherit;
  font:400 10px/25px 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:35px; 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) { 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) .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:.5; 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:25px; height:25px; flex:0 0 25px;
}
.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:1px 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:25px; min-width:25px; max-width:25px; height:25px; }

/* 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) { --action-color:var(--action-neutral); }