:root {
    --body-max-width: 100%;
    --border-radius: 4px;
}

/* Match input-group-text background to the themed secondary colour. */
.input-group-text {
    background-color: rgba(var(--bs-secondary-rgb), 1);
    border-color: var(--form-input-border-color);
}

/* Dashboard cards: align inner separators with the card outer border colour. */
.dashboard-cards .card-header,
.dashboard-cards .list-group-item {
    border-color: var(--bs-card-border-color);
}

/* Dashboard card header icon badge. */
.dashboard-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.8rem;
}

/* EasyAdmin only fills primary buttons; danger needs an explicit solid fill. */
.btn.btn-danger,
.btn.btn-invisible.btn-danger {
    --button-bg: #dc3545;
    --button-color: #fff;
    --button-icon-color: #fff;
    --button-border-color: #dc3545;
    --button-hover-bg: #bb2d3b;
    --button-hover-color: #fff;
    --button-hover-border-color: #bb2d3b;
}

/* EasyAdmin toggles `ea-dark-scheme`; override its default dark variables. */
body.ea-dark-scheme {
    --body-bg:                      #2e3440;
    --sidebar-bg:                   #272c38;
    --content-bg:                   #3b4252;
    --secondary-bg:                 #434c5e;
    --tertiary-bg:                  #3b4252;

    --dropdown-bg:                  #3b4252;
    --dropdown-toggle-bg:           #434c5e;
    --modal-bg:                     #3b4252;
    --modal-header-bg:              #2e3440;
    --modal-footer-bg:              #2e3440;
    --form-control-bg:              #3b4252;

    --sidebar-border-color:         #4c566a;
    --table-cell-border-color:      #4c566a;
    --form-input-border-color:      #4c566a;
    --dropdown-border-color:        #4c566a;
    --content-top-border-color:     #4c566a;
    --content-section-border-color: #4c566a;
    --form-fieldset-border-color:   #4c566a;
    --form-fieldset-header-border-color: #4c566a;

    --text-color:                   #e5e9f0;
    --text-muted:                   #81a1c1;
    --sidebar-menu-color:           #ffffff;
    --sidebar-menu-icon-color:      #ffffff;

    --table-hover-cell-bg:          #434c5e;
    --table-thead-color:            #eceff4;
    --table-cell-color:             #d8dee9;

    /* Form labels, fieldset headers and column headers use the theme text colour. */
    --form-label-color:             var(--text-color);
    --form-fieldset-header-color:   var(--text-color);
    --form-column-header-color:     var(--text-color);

    /* Override EA's hardcoded #242424 so the secondary button stays inside the palette. */
    --button-secondary-bg:                  #434c5e;
    --button-secondary-border-color:        #4c566a;
    --button-secondary-icon-color:          #d8dee9;
    --button-secondary-hover-bg:            #4c566a;
    --button-secondary-hover-border-color:  #4c566a;
    --button-secondary-active-bg:           #3b4252;
    --button-secondary-active-border-color: #4c566a;

    /* Bootstrap bg-* and text-* → Nord Aurora / Frost palette. */
    --bs-primary:               #5e81ac; --bs-primary-rgb:   94, 129, 172;
    --bs-secondary:             #4c566a; --bs-secondary-rgb: 76, 86, 106;
    --bs-success:               #a3be8c; --bs-success-rgb:   163, 190, 140;
    --bs-danger:                #bf616a; --bs-danger-rgb:    191, 97, 106;
    --bs-warning:               #ebcb8b; --bs-warning-rgb:   235, 203, 139;
    --bs-info:                  #88c0d0; --bs-info-rgb:      136, 192, 208;

    --bs-primary-text-emphasis:   #81a1c1;
    --bs-secondary-text-emphasis: #d8dee9;
    --bs-success-text-emphasis:   #a3be8c;
    --bs-danger-text-emphasis:    #bf616a;
    --bs-warning-text-emphasis:   #ebcb8b;
    --bs-info-text-emphasis:      #88c0d0;
}

/* Nord Aurora red keeps danger actions visible inside the dark palette. */
body.ea-dark-scheme .btn.btn-danger,
body.ea-dark-scheme .btn.btn-invisible.btn-danger {
    --button-bg: #bf616a;
    --button-color: #d8dee9;
    --button-icon-color: #d8dee9;
    --button-border-color: #bf616a;
    --button-hover-bg: #c97179;
    --button-hover-color: #d8dee9;
    --button-hover-border-color: #c97179;
}

/* Nord light variant: Snow Storm becomes the surfaces, Polar Night the text. */
body.ea-light-scheme {
    --body-bg:                      #e5e9f0;
    --sidebar-bg:                   #d8dee9;
    --content-bg:                   #ffffff;
    --secondary-bg:                 #e5e9f0;
    --tertiary-bg:                  #eceff4;

    --dropdown-bg:                  #ffffff;
    --dropdown-toggle-bg:           #e5e9f0;
    --modal-bg:                     #ffffff;
    --modal-header-bg:              #eceff4;
    --modal-footer-bg:              #eceff4;
    --form-control-bg:              #ffffff;

    --sidebar-border-color:         #b0c6d8;
    --table-cell-border-color:      #b0c6d8;
    --form-input-border-color:      #b0c6d8;
    --dropdown-border-color:        #b0c6d8;
    --content-top-border-color:     #b0c6d8;
    --content-section-border-color: #b0c6d8;
    --form-fieldset-border-color:   #b0c6d8;
    --form-fieldset-header-border-color: #b0c6d8;

    /* EA's default light input shadows use grey tones outside the Nord palette
       and read as a glitchy halo on the bluish background. Replace them with a
       clean Frost focus treatment (mirrors the dark scheme dropping the shadow). */
    --form-input-shadow:             none;
    --form-input-hover-border-color: #81a1c1;
    --form-input-hover-shadow:       0 0 0 3px rgba(129, 161, 193, 0.25);
    --form-input-error-border-color: #bf616a;
    --form-input-error-shadow:       0 0 0 3px rgba(191, 97, 106, 0.25);
    --form-type-check-input-box-shadow: none;

    --text-color:                   #2e3440;
    --text-muted:                   #4c566a;
    --sidebar-menu-color:           #2e3440;
    --sidebar-menu-icon-color:      #4c566a;

    --table-hover-cell-bg:          #e5e9f0;
    --table-thead-color:            #2e3440;
    --table-cell-color:             #3b4252;

    /* Form labels, fieldset headers and column headers use the theme text colour. */
    --form-label-color:             var(--text-color);
    --form-fieldset-header-color:   var(--text-color);
    --form-column-header-color:     var(--text-color);

    /* Mirror the dark override so the secondary button stays inside the palette. */
    --button-secondary-bg:                  #ffffff;
    --button-secondary-border-color:        #b0c6d8;
    --button-secondary-icon-color:          #434c5e;
    --button-secondary-hover-bg:            #d8dee9;
    --button-secondary-hover-border-color:  #8ab4ce;
    --button-secondary-active-bg:           #d8dee9;
    --button-secondary-active-border-color: #8ab4ce;

    /* Bootstrap bg-* and text-* → Nord Aurora / Frost palette. */
    --bs-primary:               #5e81ac; --bs-primary-rgb:   94, 129, 172;
    --bs-secondary:             #ffffff; --bs-secondary-rgb: 255, 255, 255;
    --bs-success:               #5a8a4a; --bs-success-rgb:   90, 138, 74;
    --bs-danger:                #bf616a; --bs-danger-rgb:    191, 97, 106;
    --bs-warning:               #c8982a; --bs-warning-rgb:   200, 152, 42;
    --bs-info:                  #3d8fa8; --bs-info-rgb:      61, 143, 168;

    --bs-primary-text-emphasis:   #4c6e94;
    --bs-secondary-text-emphasis: #4c566a;
    --bs-success-text-emphasis:   #3d6634;
    --bs-danger-text-emphasis:    #a3454e;
    --bs-warning-text-emphasis:   #8a6a1e;
    --bs-info-text-emphasis:      #2a6878;
}

/* Search input blends with the page background; no focus ring. */
body.ea-light-scheme .content-top .content-search input[type=search][name=query] {
    background: var(--body-bg);
}

body.ea-light-scheme .content-top .content-search input[type=search][name=query]:focus {
    background: var(--body-bg);
    box-shadow: none;
    outline: none;
}

/* Same Nord Aurora red as dark, so danger actions match across both themes. */
body.ea-light-scheme .btn.btn-danger,
body.ea-light-scheme .btn.btn-invisible.btn-danger {
    --button-bg: #bf616a;
    --button-color: #eceff4;
    --button-icon-color: #eceff4;
    --button-border-color: #bf616a;
    --button-hover-bg: #b1545d;
    --button-hover-color: #eceff4;
    --button-hover-border-color: #b1545d;
}

/* Disabled fields render as plain text (see admin/form_theme.html.twig); reset
   the oversized Bootstrap `.form-control-plaintext` box to a single compact line. */
.form-control-plaintext.ea-readonly-text {
    align-items: center;
    display: flex;
    height: auto;
    min-height: 30px;
    padding: 0;
}

/* Login: the title renders inside the form card, so the empty header collapses. */
.page-login .main-header {
    display: none;
}

.page-login .login-form-title {
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 20px;
    text-align: center;
}

/* Email detail: sandboxed body iframe; white bg matches typical email HTML. */
.email-body-frame {
    background: #fff;
    border: 1px solid var(--table-cell-border-color);
    border-radius: var(--border-radius);
    height: 600px;
    width: 100%;
}

/* Tenant detail -> Commands table */
.tenant-commands-table .commands-num-col {
    width: 20px;
}

/* Tenant detail -> Packages table */
.tenant-packages-detail-table td,
.tenant-packages-detail-table th {
    padding-left: 12px;
    padding-right: 12px;
}

/* Package -> Feature groups */
.form-group.feature-groups-checklist .form-check-label {
    padding-bottom: 0;
}

/* Tenant -> Packages: keep expanded collection items compact. */
.form-fieldset-body:has(.tenant-packages-collection) {
    padding: 0 !important;
}
.form-group.field-collection.tenant-packages-collection {
    padding-bottom: 6px;
}

.form-group.field-collection.tenant-packages-collection .accordion-item {
    position: relative;
}

.form-group.field-collection.tenant-packages-collection .accordion-header {
    margin: 0;
    min-height: 0;
    padding: 0;
    position: static;
}

.form-group.field-collection.tenant-packages-collection .accordion-header:hover {
    background: transparent;
    box-shadow: none;
}

.form-group.field-collection.tenant-packages-collection .accordion-header .accordion-button {
    display: none;
}

.form-group.field-collection.tenant-packages-collection .field-collection-delete-button {
    inset-block-start: 50%;
    inset-inline-end: 12px;
    transform: translateY(-50%);
    z-index: 2;
}

.form-group.field-collection.tenant-packages-collection .accordion-body {
    padding: 3px 46px 3px 20px;
}

.form-group.field-collection.tenant-packages-collection .accordion-body .form-widget-compound,
.form-group.field-collection.tenant-packages-collection .accordion-body .form-fieldset {
    border: 0;
    box-shadow: none;
    padding: 0;
}

.form-group.field-collection.tenant-packages-collection .accordion-body .form-fieldset-body {
    padding: 0;
}

.form-group.field-collection.tenant-packages-collection .accordion-item .form-group {
    padding: 3px 0;
}

.form-group.field-collection.tenant-packages-collection .accordion-body .row {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 0;
    align-items: center;
    justify-content: space-between;
}

.form-group.field-collection.tenant-packages-collection .accordion-body .row > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
}

.form-group.field-collection.tenant-packages-collection .accordion-body .row > [class*="col-"]:last-child {
    margin-right: 24px;
}

.form-group.field-collection.tenant-packages-collection .accordion-body .row > [class*="col-"]:has(.field-association) {
    flex: 0 0 30% !important;
    min-width: 0;
}

.form-group.field-collection.tenant-packages-collection .accordion-body .field-association .ts-wrapper {
    width: 100% !important;
}

.form-group.field-collection.tenant-packages-collection .accordion-body .form-group,
.form-group.field-collection.tenant-packages-collection .accordion-body .form-widget {
    align-items: center;
}

.form-group.field-collection.tenant-packages-collection .accordion-body .field-boolean {
    align-items: center;
    display: flex;
    min-height: 38px;
    padding: 0;
}

.form-group.field-collection.tenant-packages-collection .accordion-body .field-boolean .form-widget {
    align-items: center;
    display: flex;
    min-height: 38px;
}

.form-group.field-collection.tenant-packages-collection .accordion-body .field-date > label {
    flex: 0 0 auto;
    inline-size: auto;
    min-inline-size: 122px;
    white-space: nowrap;
}

.form-group.field-collection.tenant-packages-collection .field-boolean .form-check {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 0;
    padding-left: 0;
}

.form-group.field-collection.tenant-packages-collection .field-boolean .form-check-input {
    float: none;
    margin-left: 0;
    margin-top: 0;
}

.form-group.field-collection.tenant-packages-collection .field-boolean .form-check-label {
    align-items: center;
    display: flex;
    line-height: 18px;
    margin: 0;
    min-height: 18px;
    padding-bottom: 0;
}

/* EA flips label<->value for boolean on detail (row-reverse + label sized
   to 66%); restore the normal label-left / value-right layout so booleans
   line up with the other fields. min-inline-size reset is required — EA's
   66% on the label is what pushed the value to the right. */
.ea-detail .field-group.field-boolean {
    flex-direction: row;
}
.ea-detail .field-group.field-boolean .field-label {
    flex: unset;
    inline-size: 130px;
    min-inline-size: 0;
    margin: 0 15px 0 0;
    text-align: right;
}
.ea-detail .field-group.field-boolean .field-value {
    flex: 1;
    min-inline-size: 66%;
    inline-size: auto;
    text-align: left;
}