/* Adapter only: values are owned by storefront tokens.css. */
html:root body {
 font-family: var(--font-sans);
 font-size: var(--text-base);
 line-height: var(--leading-base);
 color: rgb(var(--ds-text));
 background: rgb(var(--ds-bg));
}
html:root body a { color: rgb(var(--ds-primary)); }
html:root body input, html:root body textarea, html:root body select, html:root body button { font-family: var(--font-sans); }
html:root body .form-control, html:root body .custom-select {
 color: rgb(var(--ds-text)); background: rgb(var(--ds-surface));
 border-color: rgb(var(--ds-border)); border-radius: var(--control-radius);
 min-height: var(--control-height); font-size: var(--text-base); box-shadow: none;
}
html:root body .form-control::placeholder { color: rgb(var(--ds-text-muted)); opacity: 1; }
html:root body .form-control:focus, html:root body .custom-select:focus {
 border-color: rgb(var(--ds-primary));
 box-shadow: none;
 outline: none;
}
html:root body :is(a,button):focus-visible { outline: 2px solid rgb(var(--ds-primary)); outline-offset: 2px; }
html:root body :is(input,select,textarea):focus-visible { outline: none !important; box-shadow: none; }
html:root body .btn-primary, html:root body button.mainaction {
 background: rgb(var(--ds-primary)); border-color: rgb(var(--ds-primary)); color: rgb(var(--ds-primary-ink));
 border-radius: var(--control-radius); min-height: var(--control-height); font-weight: var(--weight-semibold);
 transition: filter var(--duration-fast) var(--ease-standard);
}
html:root body .btn-primary:hover, html:root body button.mainaction:hover { filter: brightness(.92); }
html:root body .btn-primary:disabled, html:root body button.mainaction:disabled { opacity: .55; filter: none; cursor: not-allowed; }
html:root body #layout-menu { background: rgb(var(--ds-surface)); border-right: 1px solid rgb(var(--ds-border-soft)); }
html:root body #taskmenu a { color: rgb(var(--ds-text-muted)); }
html:root body #taskmenu a:hover { background: rgb(var(--ds-surface-2)); color: rgb(var(--ds-primary)); }
html:root body #taskmenu a.selected { background: rgb(var(--ds-primary-soft)); color: rgb(var(--ds-primary)); }
html:root body #taskmenu .special-buttons a { color: rgb(var(--ds-text-muted)); }
html:root body #layout-sidebar, html:root body #layout-list, html:root body #layout-content { background: rgb(var(--ds-surface)); border-color: rgb(var(--ds-border-soft)); }
html:root body .header, html:root body .footer, html:root body .toolbar, html:root body .menu.toolbar, html:root body .searchbar {
 background: rgb(var(--ds-surface-2)); color: rgb(var(--ds-text)); border-color: rgb(var(--ds-border-soft));
}
html:root body .listing li a, html:root body .listing li { color: rgb(var(--ds-text)); }
html:root body .listing li.selected, html:root body .listing tr.selected td, html:root body .listing li.selected > a {
 background: rgb(var(--ds-primary-soft)); color: rgb(var(--ds-text));
}
html:root body .listing li a:hover, html:root body .listing tr:hover td { background: rgb(var(--ds-surface-2)); }
html:root body .messagelist td, html:root body .message-header, html:root body .message-part { color: rgb(var(--ds-text)); border-color: rgb(var(--ds-border-soft)); }
html:root body .messagelist tr.unread td { font-weight: var(--weight-semibold); }
html:root body .listbox .scroller { background: rgb(var(--ds-surface)); }
html:root body .popover, html:root body .popupmenu, html:root body .ui-dialog {
 background: rgb(var(--ds-surface)); color: rgb(var(--ds-text)); border-color: rgb(var(--ds-border)); border-radius: var(--radius-md);
}
html:root body #messagestack .error { background: rgb(var(--ds-danger-soft)); color: rgb(var(--ds-danger)); border-color: rgb(var(--ds-danger)); }
html:root body #messagestack .confirmation { background: rgb(var(--ds-success-soft)); color: rgb(var(--ds-success)); }
html:root body.task-login #layout {
 display: grid; place-items: center; min-height: 100dvh; height: auto; padding: var(--space-6);
 background: rgb(var(--ds-bg));
}
html:root body.task-login #layout-content {
 position: relative; flex: none; display: block; width: 100%; max-width: calc(var(--space-12) * 9);
 min-width: 0; height: auto; margin: 0; padding: var(--space-10) var(--space-8);
 overflow: visible; border: 1px solid rgb(var(--ds-border-soft)); border-radius: var(--radius-xl);
 background: rgb(var(--ds-surface));
}
html:root body.task-login #logo {
 display: block; width: calc(var(--space-12) * 4); max-width: 100%; height: auto; max-height: none;
 margin: 0 auto var(--space-8);
}
html:root.dark-mode body.task-login #logo { background: rgb(var(--ds-primary-ink)); border-radius: var(--radius-sm); padding: var(--space-3); }
html:root body.task-login .ds-login-intro { margin-bottom: var(--space-6); text-align: center; }
html:root body.task-login .ds-login-intro h2 { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-lg); margin: 0 0 var(--space-2); }
html:root body.task-login .ds-login-intro p { color: rgb(var(--ds-text-muted)); font-size: var(--text-sm); margin: 0; }
html:root body.task-login #login-form { width: 100%; max-width: none; margin: 0; }
html:root body.task-login .input-group { margin-bottom: var(--space-4); }
html:root body.task-login .input-group-text {
 background: rgb(var(--ds-surface-2)); color: rgb(var(--ds-text-muted)); border-color: rgb(var(--ds-border));
 border-radius: var(--control-radius) 0 0 var(--control-radius); padding: 0 var(--space-4);
}
html:root body.task-login .input-group .form-control { border-radius: 0 var(--control-radius) var(--control-radius) 0; }
html:root body.task-login button { text-transform: none; letter-spacing: normal; }
html:root body.task-login #login-footer { margin-top: var(--space-6); color: rgb(var(--ds-text-muted)); font-size: var(--text-sm); }
@media (max-width: 480px) {
 html:root body.task-login #layout { padding: var(--space-4); }
 html:root body.task-login #layout-content { padding: var(--space-8) var(--space-5); }
}
@media (prefers-reduced-motion: reduce) { html:root body * { transition-duration: 0s !important; } }

/* Elastic positions login form and logo absolutely; the token card owns flow. */
html:root body.task-login #logo, html:root body.task-login #login-form {
 position: static; inset: auto; transform: none; float: none;
}
html:root body.task-login #layout-content { align-self: center; }
html:root body #taskmenu a::before { color: inherit; }
html:root body #taskmenu .special-buttons { background: rgb(var(--ds-surface)); }
html:root body #layout-menu .popover-header { background: rgb(var(--ds-surface-2)); }
html:root body.task-login #login-form .form-control {
 font-size: var(--text-base); color: rgb(var(--ds-text)); background: rgb(var(--ds-surface)); border-color: rgb(var(--ds-border));
}
html:root body.task-login #login-form .form-control:focus { background: rgb(var(--ds-surface)); border-color: rgb(var(--ds-primary)); }
html:root body.task-login #login-form button { font-size: var(--text-base); text-transform: none; }
html:root.dark-mode body .btn-primary, html:root.dark-mode body button.mainaction { color: rgb(var(--ds-bg)); }
html:root body.ds-empty-page { display: grid; place-items: center; min-height: 100dvh; margin: 0; padding: var(--space-6); background: rgb(var(--ds-surface)); }
html:root body .ds-empty-state { text-align: center; color: rgb(var(--ds-text-muted)); }
html:root body .ds-empty-state h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: rgb(var(--ds-text)); }
html:root body .ds-empty-state p { font-size: var(--text-sm); }
/* Own the Elastic shell surfaces, including vendor !important rules. */
html:root body #layout-menu, html:root body #layout-menu .popover-header,
html:root body #layout-menu .special-buttons, html:root body #taskmenu {
 background: rgb(var(--ds-surface)) !important; color: rgb(var(--ds-text)); border-color: rgb(var(--ds-border-soft));
}
html:root body #layout-menu .popover-header { display: flex; align-items: center; justify-content: center; }
html:root body #layout-menu .popover-header img {
 opacity: 1; padding: var(--space-2); width: 100%; max-width: 100%; object-fit: contain;
}
html:root.dark-mode body #layout-menu .popover-header img,
html:root.dark-mode body.task-login #logo {
 content: url('/static.php/plugins/efelif_theme/logo-dark.svg'); opacity: 1; background: transparent; padding: var(--space-2);
}
html:root body #layout > div > .header, html:root body #layout > div > .footer,
html:root body .menu.toolbar, html:root body .menu.pagenav, html:root body .searchbar,
html:root body .searchbar .input-group, html:root body .listbox .listitem,
html:root body .listing td, html:root body .listing th,
html:root body .records-table td, html:root body .records-table th {
 background: rgb(var(--ds-surface)); color: rgb(var(--ds-text)); border-color: rgb(var(--ds-border-soft));
}
html:root body #layout > div > .header, html:root body #layout > div > .footer { padding-inline: var(--space-3); }
html:root body .menu.toolbar a, html:root body .menu.toolbar button,
html:root body .header a, html:root body .footer a,
html:root body .pagenav a, html:root body .listing li > a {
 color: rgb(var(--ds-text)); font-size: var(--text-sm); line-height: var(--leading-base);
}
html:root body .menu.toolbar a::before, html:root body .header a::before,
html:root body .footer a::before, html:root body .listing li > a::before { color: inherit; }
html:root body .menu.toolbar a:not(.disabled):hover, html:root body .menu.toolbar button:not(:disabled):hover,
html:root body .listing li > a:hover { background: rgb(var(--ds-surface-2)); color: rgb(var(--ds-primary)); }
html:root body .menu.toolbar a.disabled, html:root body .menu.toolbar a[aria-disabled=true] { color: rgb(var(--ds-text-muted)); opacity: .6; }
html:root body #taskmenu a { border-radius: var(--radius-md); margin: var(--space-1) var(--space-2); font-size: var(--text-sm); }
html:root body #taskmenu a.selected, html:root body .listing li.selected > a,
html:root body .listing tr.selected td { background: rgb(var(--ds-primary-soft)); color: rgb(var(--ds-primary)); }
html:root body .listing li.selected > a:before { color: inherit; }
html:root body .listing li > a { padding-block: var(--space-3); }
html:root body .messagelist td, html:root body .records-table td { font-size: var(--text-base); line-height: var(--leading-base); }
html:root body .messagelist .fromto, html:root body .messagelist .date,
html:root body .listing-info, html:root body .form-text, html:root body .hint { color: rgb(var(--ds-text-muted)); font-size: var(--text-sm); }
html:root body .searchbar input, html:root body .searchbar .input-group-text {
 background: rgb(var(--ds-surface-2)); border-color: rgb(var(--ds-border)); color: rgb(var(--ds-text));
}
html:root body .searchbar input { font-size: var(--text-base); }
html:root body fieldset, html:root body .formcontent, html:root body .propform,
html:root body .boxcontent, html:root body .dialogcontent, html:root body .ui-dialog-content,
html:root body .ui-dialog-titlebar, html:root body .ui-dialog-buttonpane,
html:root body .popover-header, html:root body .popover-body,
html:root body .navlist, html:root body .navlist li a {
 background: rgb(var(--ds-surface)); color: rgb(var(--ds-text)); border-color: rgb(var(--ds-border-soft));
}
html:root body .formcontent, html:root body .propform { font-size: var(--text-base); }
html:root body .formcontent label, html:root body .propform label { color: rgb(var(--ds-text)); font-size: var(--text-base); }
html:root body legend, html:root body .formcontent h2, html:root body .formcontent h3 {
 color: rgb(var(--ds-text)); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-lg);
}
html:root body .custom-control-input:checked ~ .custom-control-label::before {
 background: rgb(var(--ds-primary)); border-color: rgb(var(--ds-primary));
}
html:root body .custom-control-label::before { background: rgb(var(--ds-surface)); border-color: rgb(var(--ds-border-strong)); }
html:root body .progress { background: rgb(var(--ds-surface-2)); border-radius: var(--radius-sm); }
html:root body .progress-bar { background: rgb(var(--ds-primary)); }
html:root body .btn-secondary, html:root body button.button:not(.mainaction):not(.btn-primary) {
 background: rgb(var(--ds-surface-2)); color: rgb(var(--ds-text)); border-color: rgb(var(--ds-border)); border-radius: var(--control-radius);
}
html:root body .compose-headers, html:root body .compose-options, html:root body #compose-content,
html:root body #composebody, html:root body .attachmentslist { background: rgb(var(--ds-surface)); color: rgb(var(--ds-text)); border-color: rgb(var(--ds-border)); }
html:root body .file-upload { border-color: rgb(var(--ds-border-strong)); border-radius: var(--radius-lg); background: rgb(var(--ds-surface-2)); }
html:root body .message-header .header-title, html:root body .message-header .subject { color: rgb(var(--ds-text)); font-weight: var(--weight-semibold); }
html:root body .message-header .header-summary { color: rgb(var(--ds-text-muted)); }
html:root { font-size: var(--ds-root-font-size); }
html:root body #taskmenu a:not(:focus) { background: transparent; color: rgb(var(--ds-text-muted)); }
html:root body #taskmenu a.selected:not(:focus) { background: rgb(var(--ds-primary-soft)); color: rgb(var(--ds-text)); opacity: 1; }
html:root body #taskmenu a:hover:not(:focus) { background: rgb(var(--ds-surface-2)); color: rgb(var(--ds-primary)); }
html:root body #taskmenu a.logout { color: rgb(var(--ds-danger)); }
html:root body .input-group-text, html:root body .input-group .icon,
html:root body .input-group a.button, html:root body .input-group button,
html:root body .editor-toolbar, html:root body #compose-content .mce-toolbar,
html:root body .compose-body .toolbar {
 background: rgb(var(--ds-surface-2)); color: rgb(var(--ds-text-muted)); border-color: rgb(var(--ds-border));
}
html:root body .input-group input, html:root body .input-group textarea,
html:root body .recipient-input input, html:root body .recipient-input,
html:root body .recipient-input .recipient {
 background: rgb(var(--ds-surface)); color: rgb(var(--ds-text)); border-color: rgb(var(--ds-border)); font-size: var(--text-base);
}
html:root body .input-group input:focus, html:root body .input-group textarea:focus {
 background: rgb(var(--ds-surface)); border-color: rgb(var(--ds-primary));
}
html:root body .custom-switch .custom-control-label::after { background: rgb(var(--ds-text-muted)); }
html:root body .custom-switch .custom-control-label::before { background: rgb(var(--ds-surface-2)); border-color: rgb(var(--ds-border-strong)); }
html:root body .custom-control-input:checked ~ .custom-control-label::before { background: rgb(var(--ds-primary)); border-color: rgb(var(--ds-primary)); }
html:root body .custom-control-input:checked ~ .custom-control-label::after { background: rgb(var(--ds-primary-ink)); }
html:root body .progress .progress-bar { background: rgb(var(--ds-primary)); }
html:root body .popover-header img { filter: none; }
html:root body #layout-menu .special-buttons a:not(:focus) { background: rgb(var(--ds-surface)); color: rgb(var(--ds-text-muted)); }
html:root body #layout-menu .special-buttons a.logout:not(:focus) { color: rgb(var(--ds-danger)); }
html:root body #layout-menu .action-buttons a:not(.selected) { color: rgb(var(--ds-text-muted)); }
html:root body #compose-content .editor-toolbar, html:root body #compose-content .editor-toolbar > div,
html:root body #compose-content .recipient-input, html:root body #compose-content .recipient-input input {
 background: rgb(var(--ds-surface-2)); color: rgb(var(--ds-text)); border-color: rgb(var(--ds-border));
}
html:root body #compose-content .recipient-input.focus, html:root body #compose-content .recipient-input input:focus {
 background: rgb(var(--ds-surface)); border-color: rgb(var(--ds-primary));
}
/* Workspace composition: a readable desktop sidebar and bounded writing canvas. */
@media (min-width: 1200px) {
 html:root body:not(.task-login) #layout-menu { width: calc(var(--space-12) * 4); flex: 0 0 calc(var(--space-12) * 4); }
 html:root body #layout-menu .popover-header { padding: var(--space-4) !important; height: calc(var(--space-12) + var(--space-6)); }
 html:root body #layout-menu .popover-header img { width: 100%; max-width: 100%; max-height: var(--space-10); }
 html:root body #taskmenu a { display: flex; align-items: center; gap: var(--space-3); width: auto; min-height: var(--control-height); height: auto; text-align: left; padding: var(--space-3) var(--space-4); margin: var(--space-2) var(--space-3); font-size: var(--text-base); line-height: var(--leading-base); }
 html:root body #taskmenu a::before { display: inline-block; float: none; width: var(--space-5); margin: 0; font-size: var(--text-lg); line-height: var(--leading-base); }
 html:root body #taskmenu a .inner { display: inline; }
 html:root body #taskmenu .action-buttons { display: block; padding-bottom: var(--space-4); border-bottom: 1px solid rgb(var(--ds-border-soft)); margin-bottom: var(--space-4); }
 html:root body #layout-menu .action-buttons a { background: rgb(var(--ds-primary)); color: rgb(var(--ds-primary-ink)); }
 html:root.dark-mode body #layout-menu .action-buttons a { color: rgb(var(--ds-bg)); }
 html:root body.action-compose #layout-sidebar { width: calc(var(--space-12) * 7); flex: 0 0 calc(var(--space-12) * 7); max-width: calc(var(--space-12) * 7); }
 html:root body.action-compose #layout-content { background: rgb(var(--ds-bg)); }
 html:root body.action-compose #compose-content { width: calc(100% - var(--space-12)); max-width: calc(var(--space-12) * 22); margin: var(--space-6) auto; padding: var(--space-6); border: 1px solid rgb(var(--ds-border-soft)); border-radius: var(--radius-xl); background: rgb(var(--ds-surface)); }
 html:root body.action-compose #compose-content > form { padding: 0; }
 html:root body.action-compose #compose-headers .form-group { margin-bottom: var(--space-4); }
 html:root body.action-compose #compose-headers label { flex: 0 0 calc(var(--space-12) * 2); max-width: calc(var(--space-12) * 2); }
 html:root body.action-compose #compose-headers .col-10 { flex: 1; max-width: none; min-width: 0; }
 html:root body.action-compose .formbuttons { padding: var(--space-4) 0 0; }
}
html:root body.action-compose #compose-attachments { min-height: calc(var(--space-12) * 3); padding: var(--space-5); margin: var(--space-4); }
html:root body.action-compose #compose-attachments::after { display: none; }
html:root body.action-compose #compose-options { padding: var(--space-5); }
html:root body.action-compose #compose-options label { flex: 0 0 100%; max-width: 100%; padding-bottom: var(--space-2); }
html:root body.action-compose #compose-options .form-check label { flex: 0 0 75%; max-width: 75%; }
html:root body.action-compose #compose-options .form-check .form-check { flex: 0 0 25%; max-width: 25%; }
html:root body.action-compose #compose-options .form-group:not(.form-check) > div { flex: 0 0 100%; max-width: 100%; }
html:root body.action-compose .menu.toolbar a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3); height: auto; line-height: var(--leading-base); font-size: var(--text-base); }
html:root body.action-compose .menu.toolbar a::before { margin: 0; font-size: var(--text-lg); }
html:root body .recipient-input { border-radius: var(--control-radius); }
html:root body .recipient-input.focus input { outline: none; box-shadow: none; background: transparent !important; }
html:root body.action-compose #composebody { font-size: var(--text-base); line-height: var(--leading-base); padding: var(--space-5); }
@media (min-width: 1200px) {
 html:root body #layout-menu .action-buttons a.compose { background: rgb(var(--ds-primary)); color: rgb(var(--ds-primary-ink)); width: auto; margin-inline: var(--space-3); }
 html:root.dark-mode body #layout-menu .action-buttons a.compose { color: rgb(var(--ds-bg)); }
}
/* Canonical controls: one outer outline, shared sizing, explicit states. */
html:root body :is(.form-control,.custom-select,select.form-control) {
 min-height: var(--control-height); height: var(--control-height); padding: var(--space-2) var(--space-4);
 font-size: var(--text-base); line-height: var(--leading-base); border: 1px solid var(--form-control-border, rgb(var(--ds-border-strong)));
 border-radius: var(--control-radius); color: rgb(var(--ds-text)) !important; background-color: rgb(var(--ds-surface)) !important;
}
html:root body textarea.form-control { height: auto; }
html:root body .input-group { border: 1px solid rgb(var(--ds-border-strong)); border-radius: var(--control-radius); background: rgb(var(--ds-surface)); overflow: visible; }
html:root body .input-group > :is(.form-control,.recipient-input),
html:root body #compose-content .input-group > :is(.form-control,.recipient-input) {
 border: 0 !important; border-radius: var(--control-radius) 0 0 var(--control-radius); box-shadow: none !important;
 min-height: calc(var(--control-height) - 2px); height: calc(var(--control-height) - 2px); margin: 0; background: transparent;
}
html:root body .input-group:focus-within { border-color: rgb(var(--ds-primary)); box-shadow: none; outline: none; }
html:root body .input-group :is(input,textarea,.recipient-input):focus,
html:root body #compose-content .recipient-input.focus { outline: none; box-shadow: none !important; border-color: transparent; }
html:root body .input-group-text { min-height: calc(var(--control-height) - 2px); border: 0; border-left: 1px solid rgb(var(--ds-border)); padding: 0 var(--space-3); display: inline-flex; align-items: center; justify-content: center; }
html:root body .input-group-prepend .input-group-text { border-left: 0; border-right: 1px solid rgb(var(--ds-border)); border-radius: var(--control-radius) 0 0 var(--control-radius); }
html:root body .input-group-append:last-child .input-group-text { border-radius: 0 var(--control-radius) var(--control-radius) 0; }
html:root body #compose-content .recipient-input { padding: var(--space-2) var(--space-3); align-items: center; height: auto; }
html:root body #compose-content .recipient-input input { margin: 0; min-height: 0; padding: 0; font-size: var(--text-base); line-height: var(--leading-base); }
html:root body .recipient-input .recipient { border-radius: var(--radius-sm); background: rgb(var(--ds-primary-soft)); color: rgb(var(--ds-text)); padding: var(--space-1) var(--space-2); }
html:root body select.custom-select, html:root body select.form-control {
 appearance: none; padding-right: var(--space-10);
 background-image: linear-gradient(45deg,transparent 50%,rgb(var(--ds-text-muted)) 50%),linear-gradient(135deg,rgb(var(--ds-text-muted)) 50%,transparent 50%);
 background-position: calc(100% - var(--space-4) - var(--space-1)) center,calc(100% - var(--space-4)) center;
 background-size: var(--space-1) var(--space-1); background-repeat: no-repeat;
}
html:root body :is(.btn,button.mainaction) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-2) var(--space-4); border-radius: var(--control-radius); font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--weight-semibold); }
html:root body :is(.btn,button.mainaction)::before { margin: 0; }
html:root body :is(input,select,textarea,button):disabled { opacity: .55; cursor: not-allowed; }
html:root body .custom-switch { min-height: var(--control-height); display: inline-flex; align-items: center; }
html:root body .custom-switch .custom-control-label { padding-left: calc(var(--switch-width) + var(--space-2)); min-height: var(--control-height); line-height: var(--control-height); cursor: pointer; }
html:root body .custom-switch .custom-control-label::before {
 left: 0; top: calc((var(--control-height) - var(--switch-height)) / 2); margin: 0; width: var(--switch-width); height: var(--switch-height);
 border-radius: var(--radius-full); background: rgb(var(--ds-border-strong)); border: 0;
}
html:root body .custom-switch .custom-control-label::after {
 left: var(--switch-padding); top: calc((var(--control-height) - var(--switch-height)) / 2 + var(--switch-padding)); margin: 0;
 width: var(--switch-thumb-size); height: var(--switch-thumb-size); border-radius: var(--radius-full);
 background: rgb(var(--ds-primary-ink)); transform: none; transition: transform var(--duration-fast) var(--ease-standard);
}
html:root body .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: rgb(var(--ds-primary)); }
html:root body .custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(calc(var(--switch-width) - var(--switch-thumb-size) - var(--switch-padding) * 2)); }
html:root body .custom-checkbox .custom-control-label::before,html:root body .custom-checkbox .custom-control-label::after { width: var(--control-checkbox-size); height: var(--control-checkbox-size); border-radius: var(--control-checkbox-radius); }
html:root body .custom-checkbox .custom-control-label::before { border: 1px solid var(--control-checkbox-border); background: var(--control-checkbox-bg); }
html:root body .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--control-checkbox-border-checked); background: var(--control-checkbox-bg-checked); }
html:root body .custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: var(--control-checkbox-focus-ring); }
html:root body .custom-control-input:disabled ~ .custom-control-label { opacity: .55; cursor: not-allowed; }
/* Compose editor owns a single border and focus ring around toolbar and body. */
html:root body #composebodycontainer.html-editor {
 border: 1px solid rgb(var(--ds-border-strong)); border-radius: var(--control-radius);
 overflow: hidden; background: rgb(var(--ds-surface)); margin-bottom: var(--space-3);
}
html:root body #composebodycontainer.html-editor:focus-within {
 border-color: rgb(var(--ds-primary)); box-shadow: var(--control-checkbox-focus-ring);
}
html:root body #composebodycontainer.html-editor > .editor-toolbar {
 top: 0; left: 0; right: 0; height: var(--control-height); border-radius: 0;
 display: flex; align-items: center; padding: 0 var(--space-3);
 background: rgb(var(--ds-surface-2)); border-bottom: 1px solid rgb(var(--ds-border));
}
html:root body #composebodycontainer.html-editor > textarea#composebody {
 border: 0 !important; border-radius: 0; outline: none !important; box-shadow: none !important;
 padding: calc(var(--control-height) + var(--space-4)) var(--space-5) var(--space-5) !important;
 font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base);
 background: rgb(var(--ds-surface)); color: rgb(var(--ds-text)); resize: vertical;
}
html:root body #composebodycontainer .tox-tinymce { border: 0; border-radius: 0; }
html:root body #composebodycontainer.html-editor { flex-shrink: 0; }
html:root body #composebodycontainer.html-editor > textarea#composebody {
 min-height: calc(var(--space-12) * 5);
 max-height: clamp(calc(var(--space-12) * 5), 40dvh, calc(var(--space-12) * 10)) !important;
}
/* Clear editor hierarchy instead of an unexplained icon strip. */
html:root body #composebodycontainer.html-editor:focus-within {
 border-color: color-mix(in srgb, rgb(var(--ds-primary)) 50%, rgb(var(--ds-border-strong)));
 box-shadow: none;
}
html:root body #composebodycontainer.html-editor > .editor-toolbar {
 background: rgb(var(--ds-surface)); padding: 0 var(--space-5); justify-content: space-between;
}
html:root body #composebodycontainer.html-editor > .editor-toolbar::before {
 content: 'İleti'; color: rgb(var(--ds-text)); font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
html:root body #composebodycontainer.html-editor > .editor-toolbar .mce-i-html {
 width: auto; height: auto; margin: 0; display: inline-flex; align-items: center;
 padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: rgb(var(--ds-text-muted));
 font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-base);
}
html:root body #composebodycontainer.html-editor > .editor-toolbar .mce-i-html::before { display: none; }
html:root body #composebodycontainer.html-editor > .editor-toolbar .mce-i-html::after { content: 'Biçimlendirmeyi aç'; }
html:root body #composebodycontainer.html-editor > .editor-toolbar .mce-i-html:hover {
 color: rgb(var(--ds-primary)); background: rgb(var(--ds-primary-soft));
}
html:root body #composebodycontainer.html-editor > textarea#composebody {
 min-height: calc(var(--space-12) * 5);
 max-height: clamp(calc(var(--space-12) * 5), 30dvh, calc(var(--space-12) * 8)) !important;
}
@media (min-width: 1200px) {
 html:root body.action-compose #compose-content { flex: 0 1 auto; height: auto; max-height: calc(100dvh - var(--space-12) * 3); }
}
/* Group-level focus only: sender/select must not draw a second inner ring. */
html:root body #compose-headers .input-group:focus-within { box-shadow: none; border-color: rgb(var(--ds-primary)); }
html:root body #compose-headers .input-group :is(input,select,textarea,.form-control):focus,
html:root body #compose-headers .input-group :is(input,select,textarea,.form-control):focus-visible {
 outline: none !important; box-shadow: none !important; border: 0 !important;
}
@media (min-width: 1200px) {
 html:root body.action-compose #composebodycontainer {
 margin-left: calc(var(--space-12) * 2); width: calc(100% - var(--space-12) * 2);
 }
 html:root body.action-compose .formbuttons { padding-left: calc(var(--space-12) * 2); }
}
html:root body #compose-headers .input-group :focus,
html:root body #compose-headers .input-group :focus-visible {
 outline: none !important; box-shadow: none !important;
}

/* Recipient and standalone subject use the same surface and focus geometry. */
html:root body #compose-content .input-group > .recipient-input { background: transparent; }
html:root body #compose-content .recipient-input input { background: transparent; }