/* Shared dashboard/grid/form palette. Light mode is the default. */
:root {
    --dashboard-surface: #fff;
    --dashboard-soft: #f5f8fb;
    --dashboard-text: #24364b;
    --dashboard-muted: #63758a;
    --dashboard-border: #e2e9f0;
    --dashboard-shadow: rgba(24, 53, 82, .07);
}

body.dark-mode {
    --dashboard-surface: #202736;
    --dashboard-soft: #262f40;
    --dashboard-text: #edf2f8;
    --dashboard-muted: #a7b5c9;
    --dashboard-border: #354055;
    --dashboard-shadow: rgba(0, 0, 0, .2);
}

.app .card.grid-panel {
    min-width: 0;
    border: 1px solid var(--dashboard-border);
    border-radius: 1rem;
    background: var(--dashboard-surface);
    color: var(--dashboard-text);
    box-shadow: 0 8px 24px var(--dashboard-shadow);
}

.app .grid-panel > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--dashboard-border);
    border-radius: 1rem 1rem 0 0;
    background: linear-gradient(110deg, color-mix(in srgb, var(--primary-bg-color) 4%, var(--dashboard-surface)), var(--dashboard-surface));
}

.app .grid-panel > .card-header .card-title {
    margin: 0;
    color: var(--dashboard-text);
    font-size: 1rem;
    font-weight: 700;
}

.app .grid-panel > .card-body {
    min-width: 0;
    padding: 1.5rem;
}

.grid-panel .grid-panel__add {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: 0.375rem 1rem;
    font-size: .75rem;
}

@media (max-width: 575.98px) {
    .app .grid-panel > .card-header,
    .app .grid-panel > .card-body {
        padding: 1.1rem;
    }
}

/* Opt-in Global administration forms; legacy forms are unchanged. */
.app .global-form > .card-header { padding: .85rem 1.2rem; }
.app .global-form > .card-body { padding: 1.2rem; }
.app .global-form-intro { gap: 1rem; }
.global-form-eyebrow { display: block; margin-bottom: .5rem; color: color-mix(in srgb, var(--primary-bg-color) 70%, var(--dashboard-text)); font-size: .65rem; font-weight: 700; letter-spacing: .16em; }
.app .global-form-intro .page-title { color: var(--dashboard-text); font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 700; letter-spacing: -.04em; }
.global-form-subtitle { margin: .4rem 0 0; color: var(--dashboard-muted); font-size: .8rem; line-height: 1.6; }
.global-form-heading, .global-form-section-heading { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.global-form-icon { display: grid; place-items: center; flex: 0 0 2.65rem; width: 2.65rem; height: 2.65rem; border-radius: .8rem; color: color-mix(in srgb, var(--primary-bg-color) 70%, var(--dashboard-text)); background: color-mix(in srgb, var(--primary-bg-color) 10%, var(--dashboard-surface)); font-size: 1.1rem; }
.global-form-icon--secondary { color: color-mix(in srgb, var(--secondary-bg-color) 65%, var(--dashboard-text)); background: color-mix(in srgb, var(--secondary-bg-color) 12%, var(--dashboard-surface)); }
.global-form-content { display: grid; gap: 1rem; }
.global-form-section { min-width: 0; padding: 1rem; border: 1px solid var(--dashboard-border); border-radius: .9rem; background: var(--dashboard-soft); }
.global-form-section-heading { margin-bottom: .85rem; }
.global-form-section-heading h3 { margin: 0; color: var(--dashboard-text); font-size: .95rem; font-weight: 700; }
.global-form-section-heading p { margin: .3rem 0 0; color: var(--dashboard-muted); font-size: .75rem; line-height: 1.6; }
.global-form-field-grid, .global-form-colour-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.global-form-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.global-form-field label { margin: 0; color: var(--dashboard-text); font-size: .78rem; font-weight: 600; }
.app .global-form .form-control, .app .global-form .form-select { min-width: 0; min-height: 40px; padding-top: .45rem; padding-bottom: .45rem; border: 1px solid var(--dashboard-border); border-radius: .65rem; background-color: var(--dashboard-surface); color: var(--dashboard-text); font-size: .82rem; transition: border-color 160ms ease, box-shadow 160ms ease; }
.global-form .form-control::placeholder { color: var(--dashboard-muted); opacity: .8; }
.app .global-form .form-control:focus, .app .global-form .form-select:focus { border-color: var(--primary-bg-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-bg-color) 15%, transparent); }
.app .global-form .form-control:disabled, .app .global-form .form-select:disabled { background-color: var(--dashboard-soft); color: var(--dashboard-muted); opacity: 1; cursor: not-allowed; }
.app .global-form .form-control.is-invalid, .app .global-form .form-select.is-invalid { border-color: #dc3545; }
.app .global-form .form-control.is-valid, .app .global-form .form-select.is-valid { border-color: #368239; }
.global-form .validation-message, .global-form .field-validation-error-custom { color: #dc3545; font-size: .75rem; }
.global-form-help { display: block; color: var(--dashboard-muted); font-size: .73rem; line-height: 1.6; }
.global-form .btn { display: inline-flex; justify-content: center; align-items: center; gap: .45rem; min-height: 40px; padding:0.375rem 1rem; font-size: .78rem; }
.global-form .btn-outline-secondary { border-color: var(--dashboard-border); color: var(--dashboard-text); background: var(--dashboard-surface); }
.global-form .btn-outline-secondary:hover { border-color: var(--primary-bg-color); color: var(--dashboard-text); background: color-mix(in srgb, var(--primary-bg-color) 8%, var(--dashboard-surface)); }
.global-form .btn:focus-visible { outline: 2px solid var(--primary-bg-color); outline-offset: 3px; }
/* Inline editor actions mirror DataGrid action templates, without sticky cells. */
.global-form .global-form-row-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; padding: .35rem .5rem; border: 1px solid var(--dashboard-border); border-radius: .6rem; background: var(--dashboard-soft); box-shadow: none; }
.global-form .global-form-row-actions .btn:hover { border-color: var(--primary-bg-color); background: color-mix(in srgb, var(--primary-bg-color) 10%, var(--dashboard-surface)); }
.global-form .global-form-row-actions .btn:focus-visible { outline: 2px solid var(--primary-bg-color); outline-offset: 2px; }
.global-form-colour-field { padding: .75rem; border: 1px solid var(--dashboard-border); border-radius: .75rem; background: var(--dashboard-surface); }
.global-form-colour-controls { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: .6rem; }
.app .global-form .form-control-color { width: 48px; padding: .35rem; cursor: pointer; }
.global-form-colour-controls input[type="text"] { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.global-form-logo-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px dashed var(--dashboard-border); border-radius: .8rem; background: var(--dashboard-surface); }
.global-form-logo-preview strong { font-size: .8rem; }
.global-form-logo-preview .btn { margin-left: auto; }
.global-form-logo-image { display: grid; place-items: center; flex: 0 1 160px; min-width: 0; min-height: 100px; padding: .75rem; border: 1px solid var(--dashboard-border); border-radius: .7rem; background: #fff; }
.global-form-logo-image img { max-width: 100%; max-height: 120px; object-fit: contain; }
.global-form-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .85rem; padding-top: .9rem; border-top: 1px solid var(--dashboard-border); }
.mapping-pagination-footer { color: var(--dashboard-muted); font-size: .75rem; }
.mapping-pagination { color: inherit; }
.mapping-pagination .pagination { gap: .35rem; }
.mapping-pagination .page-link { display: grid; place-items: center; min-width: 34px; min-height: 34px; margin: 0; border: 1px solid var(--dashboard-border); border-radius: .6rem; background: var(--dashboard-surface); color: var(--dashboard-text); font-size: .75rem; }
.mapping-pagination .page-link:hover { border-color: var(--primary-bg-color); background: var(--dashboard-soft); color: var(--primary-bg-color); }
.mapping-pagination .active .page-link { border-color: var(--primary-bg-color); background: var(--primary-bg-color); color: #fff; }
.mapping-pagination .disabled .page-link { border-color: var(--dashboard-border); background: var(--dashboard-soft); color: var(--dashboard-muted); }
.mapping-pagination .page-link:focus-visible { outline: 2px solid var(--primary-bg-color); outline-offset: 2px; box-shadow: none; }
.global-form-action-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin-left: auto; }
.global-form-action-buttons .btn { padding: 0.375rem 1rem; }
.global-form-loading .progress { height: .75rem; border-radius: 2rem; background: var(--dashboard-soft); overflow: hidden; }

/* Keep generated multi-select wrappers unpadded; theme the actual toggle. */
.app .global-form .bootstrap-select.form-control { padding: 0; border: 0; background: transparent; }
.app .global-form .bootstrap-select > .dropdown-toggle { min-height: 40px; padding: .45rem .75rem; border: 1px solid var(--dashboard-border); border-radius: .65rem; background: var(--dashboard-surface); color: var(--dashboard-text); font-size: .82rem; }
.global-form .bootstrap-select .dropdown-menu { border-color: var(--dashboard-border); border-radius: .65rem; background: var(--dashboard-surface); color: var(--dashboard-text); box-shadow: 0 8px 24px var(--dashboard-shadow); }
.global-form .bootstrap-select .dropdown-item { color: var(--dashboard-text); font-size: .82rem; }
.global-form .bootstrap-select .dropdown-item:hover, .global-form .bootstrap-select .dropdown-item:focus { background: var(--dashboard-soft); }
.global-form .bootstrap-select .dropdown-item.active { color: #fff; background: var(--primary-bg-color); }
.global-form .form-check-input, .global-form input[type="checkbox"], .global-form input[type="radio"] { accent-color: var(--primary-bg-color); }
.global-form .form-check-input:checked { background-color: var(--primary-bg-color); border-color: var(--primary-bg-color); }
.global-form textarea.form-control { min-height: 90px; }

@media (max-width: 767.98px) {
    .global-form-field-grid, .global-form-colour-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .app .global-form > .card-header, .app .global-form > .card-body { padding: 1rem; }
    .global-form-section { padding: .85rem; }
    .global-form-heading, .global-form-section-heading { align-items: flex-start; gap: .65rem; }
    .global-form-colour-field { padding: .8rem; }
    .global-form-colour-controls { gap: .4rem; }
    .global-form-colour-controls .btn { padding: .5rem; }
    .global-form-actions { align-items: stretch; flex-direction: column; }
    .global-form-action-buttons { display: flex; margin-left: 0; gap: .5rem; }
    .global-form-action-buttons > .btn { flex: 1 1 auto; }
    .global-form-logo-preview .btn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .app .global-form .form-control, .app .global-form .form-select { transition: none; }
    .global-form-loading .progress-bar { animation: none; }
}