/* =================================================================
   WF Portal — Component & Utility Framework
   -----------------------------------------------------------------
   Replaces Bootstrap CSS. All values reference --theme-* tokens
   from root.css. Same class names — zero .razor file changes.
   ================================================================= */

/* =================================================================
   Reset
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; line-height: 1.5; -webkit-text-size-adjust: 100%; }

hr {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid var(--theme-border);
    opacity: .5;
}

/* =================================================================
   Buttons
   ================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    font-family: inherit;
    font-size: var(--theme-font-size-base);
    font-weight: 500;
    line-height: 1.5;
    color: var(--theme-text);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--theme-radius-button);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: all var(--theme-transition);
    vertical-align: middle;
    white-space: nowrap;
}
.btn:focus-visible { outline: 0; box-shadow: var(--theme-focus-ring); }
.btn:disabled, .btn.disabled { opacity: .55; pointer-events: none; }

.btn-primary {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-text-on-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--theme-primary-hover);
    border-color: var(--theme-primary-hover);
    /* Preserve on-primary text color on hover. Defense in depth — even
       if a future global :hover rule tries to override (this happened on
       a:hover in root.css; fixed there too with :not(.btn)), this rule
       still holds. */
    color: var(--theme-text-on-primary);
}

.btn-secondary {
    background-color: var(--theme-background-active);
    border-color: var(--theme-border-subtle);
    color: var(--theme-text);
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--theme-background-hover);
    border-color: var(--theme-text-muted);
    color: var(--theme-text-emphasis);
}

.btn-success {
    background-color: var(--theme-success);
    border-color: var(--theme-success);
    color: var(--theme-text-on-primary);
}
.btn-success:hover { opacity: .85; color: var(--theme-text-on-primary); }

.btn-info {
    background-color: var(--theme-offset);
    border-color: var(--theme-offset);
    color: var(--theme-text-on-offset);
}
.btn-info:hover { opacity: .85; color: var(--theme-text-on-offset); }

.btn-dark {
    background-color: var(--theme-background-active);
    border-color: var(--theme-border-subtle);
    color: var(--theme-text-emphasis);
}
.btn-dark:hover {
    background-color: var(--theme-background-hover);
    color: var(--theme-text-emphasis);
}

.btn-accent {
    background-color: var(--theme-accent);
    border-color: var(--theme-accent);
    color: var(--theme-text-on-accent);
}
.btn-accent:hover, .btn-accent:focus {
    background-color: var(--theme-accent-hover);
    border-color: var(--theme-accent-hover);
}

.btn-outline-primary {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--theme-primary-muted);
    color: var(--theme-primary);
}

.btn-outline-secondary {
    border-color: var(--theme-border-subtle);
    color: var(--theme-text-secondary);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background-color: var(--theme-background-hover);
    border-color: var(--theme-text-muted);
    color: var(--theme-text-emphasis);
}

.btn-outline-success {
    border-color: var(--theme-success);
    color: var(--theme-success);
}
.btn-outline-success:hover {
    background-color: var(--theme-success-muted);
    color: var(--theme-success);
}

.btn-outline-warning {
    border-color: var(--theme-warning);
    color: var(--theme-warning);
}
.btn-outline-warning:hover {
    background-color: var(--theme-warning-muted);
    color: var(--theme-warning);
}

.btn-outline-danger {
    border-color: rgba(248, 113, 113, .35);
    color: var(--theme-danger);
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: var(--theme-danger-muted);
    border-color: var(--theme-danger);
    color: var(--theme-danger);
}

.btn-outline-info {
    border-color: rgba(37, 99, 235, .4);
    color: var(--theme-info);
}
.btn-outline-info:hover, .btn-outline-info:focus {
    background-color: var(--theme-info-muted);
    border-color: var(--theme-info);
    color: var(--theme-info);
}

.btn-outline-light {
    border-color: var(--theme-border-subtle);
    color: var(--theme-text-secondary);
}
.btn-outline-light:hover {
    background-color: var(--theme-background-hover);
    border-color: var(--theme-text-secondary);
    color: var(--theme-text);
}

.btn-link {
    color: var(--theme-primary);
    text-decoration: none;
    border-color: transparent;
    background: none;
    padding: 0;
}
.btn-link:hover { color: var(--theme-primary-hover); }

.btn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: .6;
    filter: invert(1) grayscale(100%) brightness(200%);
    font-size: 1rem;
}
.btn-close::after { content: "\00d7"; font-size: 1.25rem; }
.btn-close:hover { opacity: 1; }

.btn-sm {
    padding: 0.25rem 0.625rem;
    font-size: var(--theme-font-size-sm);
}

.btn-lg {
    padding: 0.625rem 1.25rem;
    font-size: var(--theme-font-size-lg);
}

.btn-group {
    display: inline-flex;
    vertical-align: middle;
}
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: var(--theme-radius-button); border-bottom-left-radius: var(--theme-radius-button); }
.btn-group > .btn:last-child { border-top-right-radius: var(--theme-radius-button); border-bottom-right-radius: var(--theme-radius-button); }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group-sm > .btn { padding: 0.25rem 0.625rem; font-size: var(--theme-font-size-sm); }

/* =================================================================
   Forms
   ================================================================= */

.form-control, .form-select {
    display: block;
    width: 100%;
    padding: 0.4375rem 0.75rem;
    font-family: inherit;
    font-size: var(--theme-font-size-base);
    font-weight: 400;
    line-height: 1.5;
    color: var(--theme-text-emphasis);
    background-color: var(--theme-background-subtle);
    border: 1px solid var(--theme-border-subtle);
    border-radius: var(--theme-radius-button);
    transition: border-color var(--theme-transition), box-shadow var(--theme-transition);
    appearance: none;
}
.form-control::placeholder { color: var(--theme-text-placeholder); }
.form-control:focus, .form-select:focus {
    background-color: var(--theme-background-subtle);
    border-color: var(--theme-primary);
    box-shadow: var(--theme-focus-ring);
    color: var(--theme-text-emphasis);
    outline: 0;
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: var(--theme-background-active);
    color: var(--theme-text-muted);
    opacity: .7;
}

.form-control-sm, .form-select-sm {
    padding: 0.25rem 0.5rem;
    font-size: var(--theme-font-size-sm);
}
.form-control-lg {
    padding: 0.625rem 1rem;
    font-size: var(--theme-font-size-lg);
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23939bb0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}
.form-select option {
    background-color: var(--theme-background-raised);
    color: var(--theme-text);
}

.form-label {
    display: inline-block;
    margin-bottom: 0.375rem;
    color: var(--theme-text-secondary);
    font-weight: 500;
    font-size: var(--theme-font-size-sm);
}

.form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--theme-font-size-sm);
    color: var(--theme-text-muted);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.5rem;
}
.form-check-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    background-color: var(--theme-background-subtle);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 0.25rem;
    appearance: none;
    cursor: pointer;
    flex-shrink: 0;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230f1117' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.form-check-input:focus { box-shadow: var(--theme-focus-ring); outline: 0; }
.form-check-label { cursor: pointer; color: var(--theme-text); }
.form-check-inline { display: inline-flex; margin-right: 1rem; }

.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}
.input-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form-floating {
    position: relative;
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext {
    height: calc(3.5rem + 2px);
    padding: 1.625rem 0.75rem 0.625rem;
}
.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    color: var(--theme-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label {
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
    color: var(--theme-text-secondary);
}
.form-control-plaintext {
    display: block;
    width: 100%;
    padding: 0.4375rem 0;
    color: var(--theme-text);
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
}

.font-monospace { font-family: var(--theme-font-mono) !important; }

/* =================================================================
   Cards
   ================================================================= */

.card {
    display: flex;
    flex-direction: column;
    background-color: var(--theme-background-raised);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    overflow: hidden;
}
.card-header, .card-footer {
    padding: 0.75rem 1rem;
    background-color: var(--theme-background-subtle);
    border-color: var(--theme-border);
    color: var(--theme-text-emphasis);
}
.card-header { border-bottom: 1px solid var(--theme-border); }
.card-footer { border-top: 1px solid var(--theme-border); }
.card-body {
    flex: 1 1 auto;
    padding: 1rem;
    color: var(--theme-text);
}
.card-title {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--theme-text-emphasis);
}

/* =================================================================
   Tables
   ================================================================= */

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--theme-text);
    border-collapse: collapse;
}
.table > thead { border-bottom: 2px solid var(--theme-border-subtle); }
.table thead th {
    background-color: var(--theme-background-subtle);
    color: var(--theme-text-secondary);
    font-weight: 600;
    font-size: var(--theme-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.625rem 0.75rem;
    border-bottom-color: var(--theme-border-subtle);
    text-align: start;
}
.table > tbody > tr { border-bottom: 1px solid var(--theme-border); transition: background-color 120ms ease; }
.table > tbody > tr > td {
    padding: 0.75rem;
    vertical-align: middle;
    color: var(--theme-text);
}
.table > tbody > tr > td.fw-semibold,
.table > tbody > tr > td.fw-medium { color: var(--theme-text-emphasis); }
.table > tbody > tr > td.font-monospace {
    color: var(--theme-primary) !important;
    opacity: 0.8;
}

.table-sm > tbody > tr > td,
.table-sm > thead > tr > th { padding: 0.375rem 0.5rem; }

.table-hover > tbody > tr:hover {
    background-color: var(--theme-background-hover) !important;
    color: var(--theme-text-emphasis) !important;
}
.table-hover > tbody > tr:hover > td { color: var(--theme-text-emphasis); }
.table-hover > tbody > tr:hover > td.text-muted { color: var(--theme-text-secondary) !important; }

.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--theme-background-subtle); }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-light, thead.table-light, thead.table-light th {
    background-color: var(--theme-background-subtle) !important;
    color: var(--theme-text-secondary) !important;
    border-color: var(--theme-border) !important;
}

.table-active { background-color: var(--theme-background-active) !important; }
.table-warning { background-color: var(--theme-warning-muted) !important; }

.align-middle { vertical-align: middle !important; }

/* =================================================================
   Modals
   ================================================================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}
.modal.show, .modal.d-block { display: block; }

.modal-dialog {
    position: relative;
    width: auto;
    margin: 1.75rem auto;
    max-width: 500px;
    pointer-events: none;
}
.modal-dialog-sm { max-width: 300px; }
.modal-dialog-lg { max-width: 960px; }
.modal-dialog.modal-xl { max-width: 95%; }
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}
.modal:has(.modal-dialog-scrollable) {
    overflow: hidden;
}
.modal-dialog-scrollable {
    display: flex;
    height: calc(100vh - 3.5rem);
    max-height: calc(100vh - 3.5rem);
}
.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    flex: 1;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--theme-background-raised);
    border: 1px solid var(--theme-border-subtle);
    border-radius: var(--theme-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
    outline: 0;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--theme-nav-border);
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--theme-nav-background);
    color: var(--theme-nav-text-active);
    border-radius: var(--theme-radius) var(--theme-radius) 0 0;
}
.modal-header .btn-close {
    filter: brightness(0) invert(1);
}
.modal-header .btn {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--theme-nav-text-active);
    background: transparent;
}
.modal-header .btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}
.modal-header .btn-save {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}
.modal-header .btn-save:hover {
    background: rgba(255, 255, 255, 0.3);
}
.modal-title {
    margin: 0;
    line-height: 1.5;
    font-weight: 600;
    color: inherit;
}

.modal-body { flex: 1 1 auto; padding: 1rem; }

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--theme-border);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: rgba(0, 0, 0, .65);
}
.modal-backdrop.show { opacity: 1; }
.modal-backdrop.fade { opacity: 0; transition: opacity .15s linear; }

.fade { transition: opacity .15s linear; }
.show { opacity: 1; }

/* =================================================================
   wf-modal — self-contained overlay pattern used by FormCreateWizard,
   IconPickerDialog, MenuItemEditDialog, FormHierarchyField. One
   backdrop div wrapping the dialog box (no separate modal-dialog
   wrapper like Bootstrap). Closes on backdrop click; dialog stops
   propagation. All four components follow the same DOM shape.
   ================================================================= */

.wf-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background-color: rgba(0, 0, 0, .65);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 3rem 1rem;
}

/* Stacked modifier: when one wf-modal opens another (e.g. MenuItemEditDialog
   -> IconPickerDialog), the inner one needs to sit ABOVE the outer. Without
   this both backdrops tie at z 1055 and DOM order picks the winner; the
   picker often loses and renders hidden behind the parent dialog. */
.wf-modal-backdrop.wf-modal-backdrop-stacked {
    z-index: 1065;
}

.wf-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 6rem);
    background-color: var(--theme-background-raised);
    border: 1px solid var(--theme-border-subtle);
    border-radius: var(--theme-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
    outline: 0;
}

.wf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--theme-nav-border);
    background: var(--theme-nav-background);
    color: var(--theme-nav-text-active);
    border-radius: var(--theme-radius) var(--theme-radius) 0 0;
    flex-shrink: 0;
}
.wf-modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.wf-modal-title {
    margin: 0;
    line-height: 1.5;
    font-weight: 600;
    color: inherit;
}

.wf-modal-body {
    flex: 1 1 auto;
    padding: 1rem;
    overflow-y: auto;
}

.wf-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--theme-border);
    flex-shrink: 0;
}

/* =================================================================
   Alerts
   ================================================================= */

.alert {
    position: relative;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--theme-radius-button);
    font-size: var(--theme-font-size-sm);
}
.alert-danger {
    background-color: var(--theme-danger-muted);
    border-color: rgba(248, 113, 113, .3);
    color: var(--theme-danger);
}
.alert-success {
    background-color: var(--theme-success-muted);
    border-color: rgba(52, 211, 153, .3);
    color: var(--theme-success);
}
.alert-warning {
    background-color: var(--theme-warning-muted);
    border-color: rgba(251, 191, 36, .3);
    color: var(--theme-warning);
}
.alert-info {
    background-color: var(--theme-info-muted);
    border-color: rgba(96, 165, 250, .3);
    color: var(--theme-info);
}
.alert-dismissible { padding-right: 3rem; }
.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem 1rem;
}

/* =================================================================
   Badges
   ================================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.55em;
    font-size: var(--theme-font-size-xs);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    border-radius: var(--theme-radius-button);
    vertical-align: baseline;
}

.bg-primary   { background-color: var(--theme-primary) !important; }
.bg-secondary { background-color: var(--theme-background-active) !important; color: var(--theme-text) !important; }
.bg-success   { background-color: var(--theme-success) !important; }
.bg-danger    { background-color: var(--theme-danger) !important; }
.bg-warning   { background-color: var(--theme-warning) !important; color: var(--theme-text-on-primary) !important; }
.bg-info      { background-color: var(--theme-info) !important; }
.bg-dark      { background-color: var(--theme-background-active) !important; }
.bg-light     { background-color: var(--theme-background-subtle) !important; color: var(--theme-text) !important; }

.text-bg-primary   { background-color: var(--theme-primary) !important; color: var(--theme-text-on-primary) !important; }
.text-bg-secondary { background-color: var(--theme-background-active) !important; color: var(--theme-text) !important; }
.text-bg-success   { background-color: var(--theme-success) !important; color: var(--theme-text-on-primary) !important; }
.text-bg-danger    { background-color: var(--theme-danger) !important; color: var(--theme-text-on-primary) !important; }
.text-bg-warning   { background-color: var(--theme-warning) !important; color: var(--theme-text-on-primary) !important; }
.text-bg-info      { background-color: var(--theme-info) !important; color: var(--theme-text-on-primary) !important; }

.badge-accent  { background-color: var(--theme-accent-muted);  color: var(--theme-accent); }
.badge-primary { background-color: var(--theme-primary-muted); color: var(--theme-primary); }
.badge-offset  { background-color: var(--theme-offset-muted);  color: var(--theme-offset); }

/* =================================================================
   List Groups
   ================================================================= */

.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 0.625rem 1rem;
    background-color: var(--theme-background-subtle);
    border: 1px solid var(--theme-border);
    color: var(--theme-text);
}
.list-group-item:first-child { border-top-left-radius: var(--theme-radius); border-top-right-radius: var(--theme-radius); }
.list-group-item:last-child { border-bottom-left-radius: var(--theme-radius); border-bottom-right-radius: var(--theme-radius); }
.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-item-action {
    cursor: pointer;
    transition: background-color var(--theme-transition), color var(--theme-transition);
}
.list-group-item-action:hover {
    background-color: var(--theme-background-hover);
    color: var(--theme-text-emphasis);
}
.list-group-item-light { background-color: var(--theme-background-subtle); }
.list-group-item.active {
    background-color: var(--theme-primary-muted);
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

/* =================================================================
   Spinners
   ================================================================= */

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid var(--theme-primary);
    border-right-color: transparent;
    border-radius: 50%;
    animation: wf-spin .75s linear infinite;
}
.spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em; }

@keyframes wf-spin { to { transform: rotate(360deg); } }

/* =================================================================
   Flexbox & Display Utilities
   ================================================================= */

.d-flex          { display: flex !important; }
.d-inline-flex   { display: inline-flex !important; }
.d-block         { display: block !important; }
.d-inline        { display: inline !important; }
.d-none          { display: none !important; }
.d-grid          { display: grid !important; }

.flex-grow-1     { flex-grow: 1 !important; }
.flex-shrink-0   { flex-shrink: 0 !important; }
.flex-column     { flex-direction: column !important; }
.flex-wrap       { flex-wrap: wrap !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end     { justify-content: flex-end !important; }

.align-items-start   { align-items: flex-start !important; }
.align-items-center  { align-items: center !important; }
.align-items-end     { align-items: flex-end !important; }
.align-content-stretch { align-content: stretch !important; }

/* =================================================================
   Spacing Utilities
   ================================================================= */

/* Margin */
.m-0  { margin: 0 !important; }
.m-1  { margin: 0.25rem !important; }
.m-2  { margin: 0.5rem !important; }
.m-3  { margin: 1rem !important; }
.m-4  { margin: 1.5rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }

.ms-auto { margin-inline-start: auto !important; }
.ms-1 { margin-inline-start: 0.25rem !important; }
.ms-2 { margin-inline-start: 0.5rem !important; }
.ms-3 { margin-inline-start: 1rem !important; }

.me-1 { margin-inline-end: 0.25rem !important; }
.me-2 { margin-inline-end: 0.5rem !important; }
.me-3 { margin-inline-end: 1rem !important; }

.mx-auto { margin-inline: auto !important; }
.my-0 { margin-block: 0 !important; }
.my-1 { margin-block: 0.25rem !important; }
.my-2 { margin-block: 0.5rem !important; }
.my-3 { margin-block: 1rem !important; }

/* Padding */
.p-0  { padding: 0 !important; }
.p-1  { padding: 0.25rem !important; }
.p-2  { padding: 0.5rem !important; }
.p-3  { padding: 1rem !important; }
.p-4  { padding: 1.5rem !important; }
.p-5  { padding: 3rem !important; }

.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }

.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }

.ps-1 { padding-inline-start: 0.25rem !important; }
.ps-2 { padding-inline-start: 0.5rem !important; }
.ps-3 { padding-inline-start: 1rem !important; }

.pe-1 { padding-inline-end: 0.25rem !important; }
.pe-2 { padding-inline-end: 0.5rem !important; }
.pe-3 { padding-inline-end: 1rem !important; }

.px-2 { padding-inline: 0.5rem !important; }
.px-3 { padding-inline: 1rem !important; }

.py-1 { padding-block: 0.25rem !important; }
.py-2 { padding-block: 0.5rem !important; }
.py-3 { padding-block: 1rem !important; }
.py-5 { padding-block: 3rem !important; }

/* Gap */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

/* =================================================================
   Text Utilities
   ================================================================= */

.text-center          { text-align: center !important; }
.text-end             { text-align: end !important; }
.text-start           { text-align: start !important; }

.text-muted           { color: var(--theme-text-muted) !important; }
.text-danger          { color: var(--theme-danger) !important; }
.text-success         { color: var(--theme-success) !important; }
.text-warning         { color: var(--theme-warning) !important; }
.text-primary         { color: var(--theme-primary) !important; }
.text-secondary       { color: var(--theme-text-secondary) !important; }
.text-dark            { color: var(--theme-text-emphasis) !important; }

.text-nowrap          { white-space: nowrap !important; }
.text-truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-decoration-none { text-decoration: none !important; }

.fw-bold              { font-weight: 700 !important; }
.fw-semibold          { font-weight: 600 !important; }
.fw-medium            { font-weight: 500 !important; }
.fst-italic           { font-style: italic !important; }

.fs-1                 { font-size: 2.5rem !important; }
.fs-5                 { font-size: var(--theme-font-size-lg) !important; }

.small                { font-size: var(--theme-font-size-sm); }

/* =================================================================
   Grid System
   ================================================================= */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* Gap variants (g-*) override the padding/margin approach */
.g-3 { --wf-gutter: 1rem; gap: var(--wf-gutter); margin: 0; }
.g-3 > * { padding: 0; }
.g-4 { --wf-gutter: 1.5rem; gap: var(--wf-gutter); margin: 0; }
.g-4 > * { padding: 0; }

/* Small breakpoint (≥576px) */
@media (min-width: 576px) {
    .col-sm-6 { flex: 0 0 auto; width: calc(50% - var(--wf-gutter, 1rem) / 2); }
}

/* Medium breakpoint (≥768px) */
@media (min-width: 768px) {
    .col-md-4  { flex: 0 0 auto; width: calc(33.3333% - var(--wf-gutter, 1rem) * 2 / 3); }
    .col-md-6  { flex: 0 0 auto; width: calc(50% - var(--wf-gutter, 1rem) / 2); }
    .col-md-8  { flex: 0 0 auto; width: calc(66.6667% - var(--wf-gutter, 1rem) / 3); }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* Large breakpoint (≥992px) */
@media (min-width: 992px) {
    .col-lg-4  { flex: 0 0 auto; width: calc(33.3333% - var(--wf-gutter, 1.5rem) * 2 / 3); }
    .col-lg-5  { flex: 0 0 auto; width: calc(41.6667% - var(--wf-gutter, 1.5rem) * 7 / 12); }
    .col-lg-6  { flex: 0 0 auto; width: calc(50% - var(--wf-gutter, 1.5rem) / 2); }
    .col-lg-7  { flex: 0 0 auto; width: calc(58.3333% - var(--wf-gutter, 1.5rem) * 5 / 12); }
    .col-lg-8  { flex: 0 0 auto; width: calc(66.6667% - var(--wf-gutter, 1.5rem) / 3); }
}

/* =================================================================
   Sizing
   ================================================================= */

.w-100  { width: 100% !important; }
.vh-100 { height: 100vh !important; }

/* =================================================================
   Display & Visibility
   ================================================================= */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media print { .no-print { display: none !important; } }

/* =================================================================
   Borders
   ================================================================= */

.border        { border: 1px solid var(--theme-border) !important; }
.border-top    { border-top: 1px solid var(--theme-border) !important; }
.border-bottom { border-bottom: 1px solid var(--theme-border) !important; }
.border-start  { border-inline-start: 1px solid var(--theme-border) !important; }
.border-end    { border-inline-end: 1px solid var(--theme-border) !important; }

.rounded       { border-radius: var(--theme-radius) !important; }
.rounded-pill  { border-radius: 50rem !important; }

/* =================================================================
   Position & Overflow
   ================================================================= */

.position-fixed    { position: fixed !important; }
.position-absolute { position: absolute !important; }
.position-relative { position: relative !important; }

.overflow-auto   { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }

/* =================================================================
   Misc
   ================================================================= */

.user-select-none { user-select: none !important; }

/* =================================================================
   Language Pills (DisplayPropertiesEditor + LanguagePills)
   ================================================================= */

.lang-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.lang-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--theme-border);
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    background: var(--theme-bg);
    color: var(--theme-text-muted);
    transition: border-color 0.15s;
    user-select: none;
}

.lang-pill.lang-pill-active {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
    background: color-mix(in srgb, var(--theme-primary) 10%, transparent);
}

.lang-pill-code {
    padding: 0.3rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: 1;
    text-transform: lowercase;
}

.lang-pill-code:disabled {
    cursor: default;
    opacity: 0.5;
}

/* ── Inactive-pill state hints (color-only on the code itself) ────── */
.lang-pill.lang-pill-state-empty .lang-pill-code {
    opacity: 0.5;
    font-style: italic;
}
.lang-pill.lang-pill-state-stale .lang-pill-code {
    color: var(--theme-warning, #f59e0b);
}
.lang-pill.lang-pill-state-locked .lang-pill-code {
    opacity: 0.7;
}

/* ── Per-pill controls — only visible when pill is active ─────────── */
.lang-pill-control {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.4rem;
    background: none;
    border: none;
    border-left: 1px solid var(--theme-border);
    cursor: pointer;
    color: inherit;
    font-size: 0.7rem;
    line-height: 1;
}
.lang-pill-control:hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 10%, transparent);
}
.lang-pill-control:disabled {
    cursor: default;
    opacity: 0.4;
}
.lang-pill-control-stale {
    color: var(--theme-warning, #f59e0b);
}

/* ── Source marker (always visible, prepended) ────────────────────── */
.lang-pill-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0 0.3rem 0.5rem;
    line-height: 1;
}

.lang-pill-all {
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--theme-border);
    background: none;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--theme-text-muted);
    cursor: pointer;
    line-height: 1;
    letter-spacing: 0.03em;
    margin-left: auto;
}

.lang-pill-all:hover:not(:disabled) {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

.lang-pill-all:disabled {
    opacity: 0.4;
    cursor: default;
}

.lang-pill-source-marker {
    color: var(--theme-warning, #f59e0b);
    font-size: 0.65rem;
}

/* ── Bulk-actions pill (Unlock-all / Refresh-all / Lock-all) ──────── */
.lang-pill-bulk {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--theme-border);
    overflow: hidden;
    line-height: 1;
    margin-left: auto;
    background: var(--theme-bg);
}

.lang-pill-bulk-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-text-muted);
    font-size: 0.7rem;
    line-height: 1;
}

.lang-pill-bulk-btn + .lang-pill-bulk-btn {
    border-left: 1px solid var(--theme-border);
}

.lang-pill-bulk-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--theme-primary) 10%, transparent);
    color: var(--theme-primary);
}

.lang-pill-bulk-btn-active {
    background: color-mix(in srgb, var(--theme-primary) 15%, transparent);
    color: var(--theme-primary);
}

.lang-pill-bulk-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.lang-pill-bulk-busy {
    padding: 0.3rem 0.6rem;
}

.lang-pill-bulk-busy-content {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--theme-text-muted);
    letter-spacing: 0.03em;
}

/* ── Translation-coverage status footer ────────────────────────────── */
.lang-status {
    line-height: 1.4;
}
.lang-status.lang-status-missing {
    color: var(--theme-danger, #dc3545);
}
.lang-status.lang-status-stale {
    color: var(--theme-warning, #f59e0b);
}

/* =================================================================
   Step media slots (mock)
   ================================================================= */

.media-slots {
    display: flex;
    gap: 0.5rem;
}

.media-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex: 1 1 0;
    aspect-ratio: 1 / 1;
    padding: 0.75rem;
    border: 1px dashed var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-bg);
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.media-slot:hover:not(:disabled) {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
    background: color-mix(in srgb, var(--theme-primary) 5%, transparent);
}

.media-slot:disabled {
    cursor: default;
    opacity: 0.6;
}

.media-slot-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.media-slot-label {
    font-size: 0.75rem;
}

.media-slot-loading {
    border-style: solid;
    color: var(--theme-primary);
}

/* =================================================================
   Step info row — CSS Grid, auto equal-width columns per child
   ================================================================= */

.step-info-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1rem;
}

.step-info-col {
    min-width: 0;
}

.source-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: none;
    background: var(--theme-surface-raised, #333);
    color: var(--theme-text-inverse, #fff);
    font-size: 0.7rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.source-toggle-btn:hover { opacity: 0.8; }

/* =================================================================
   LiveHtmlEditor / HtmlEditor — content padding
   ================================================================= */

.email-html-editor [contenteditable="true"],
.email-html-editor textarea.form-control {
    padding: 0.75rem 1rem;
}