/*
 * django-admin-interface Theme colors do not drive object-tools
 * (Add / History / Import) or Django's default --button-* vars.
 *
 * Must use `:root .admin-interface` — same specificity as
 * admin-interface.css dark-mode overrides — or those win and
 * leave object-tools on --close-button-bg (#888 / #333).
 */
:root .admin-interface {
    --object-tools-bg: var(--admin-interface-save-button-background-color);
    --object-tools-hover-bg: var(--admin-interface-save-button-background-hover-color);
    --object-tools-fg: var(--admin-interface-save-button-text-color);
    --close-button-bg: var(--admin-interface-save-button-background-color);
    --close-button-hover-bg: var(--admin-interface-save-button-background-hover-color);
    --button-bg: var(--admin-interface-save-button-background-color);
    --button-hover-bg: var(--admin-interface-save-button-background-hover-color);
    --default-button-bg: var(--admin-interface-save-button-background-color);
    --default-button-hover-bg: var(--admin-interface-save-button-background-hover-color);
    --primary: var(--admin-interface-save-button-background-color);
    --secondary: var(--admin-interface-save-button-background-hover-color);
}

@media (prefers-color-scheme: dark) {
    :root .admin-interface {
        --object-tools-bg: var(--admin-interface-save-button-background-color);
        --object-tools-hover-bg: var(--admin-interface-save-button-background-hover-color);
        --object-tools-fg: var(--admin-interface-save-button-text-color);
        --close-button-bg: var(--admin-interface-save-button-background-color);
        --close-button-hover-bg: var(--admin-interface-save-button-background-hover-color);
        --button-bg: var(--admin-interface-save-button-background-color);
        --button-hover-bg: var(--admin-interface-save-button-background-hover-color);
        --default-button-bg: var(--admin-interface-save-button-background-color);
        --default-button-hover-bg: var(--admin-interface-save-button-background-hover-color);
        --primary: var(--admin-interface-save-button-background-color);
        --secondary: var(--admin-interface-save-button-background-hover-color);
    }
}

/* Paint directly so dark-mode / base.css vars cannot win */
.admin-interface .object-tools a,
.admin-interface .object-tools a:link,
.admin-interface .object-tools a:visited {
    background: var(--admin-interface-save-button-background-color) !important;
    background-color: var(--admin-interface-save-button-background-color) !important;
    color: var(--admin-interface-save-button-text-color) !important;
}

.admin-interface .object-tools a:focus,
.admin-interface .object-tools a:hover,
.admin-interface .object-tools li:focus a,
.admin-interface .object-tools li:hover a {
    background: var(--admin-interface-save-button-background-hover-color) !important;
    background-color: var(--admin-interface-save-button-background-hover-color) !important;
    color: var(--admin-interface-save-button-text-color) !important;
}

/* Changelist filter Apply (and similar) stay on Django --primary blue otherwise */
.admin-interface #changelist-filter input[type="submit"],
.admin-interface #changelist-filter button[type="submit"],
.admin-interface #changelist-filter .button {
    background: var(--admin-interface-save-button-background-color) !important;
    background-color: var(--admin-interface-save-button-background-color) !important;
    color: var(--admin-interface-save-button-text-color) !important;
    border-color: var(--admin-interface-save-button-background-color) !important;
}

.admin-interface #changelist-filter input[type="submit"]:hover,
.admin-interface #changelist-filter button[type="submit"]:hover,
.admin-interface #changelist-filter .button:hover {
    background: var(--admin-interface-save-button-background-hover-color) !important;
    background-color: var(--admin-interface-save-button-background-hover-color) !important;
}

/*
 * Match non-admin app header exactly
 * (static/css/landing-header.css --app-header-* vars):
 * height 64px = 12 + 40 + 12, logo 40x140, padding 12x40.
 */
.admin-interface #header {
    --app-header-height: 64px;
    --app-header-padding-y: 12px;
    --app-header-padding-x: 40px;
    --app-header-logo-height: 40px;
    --app-header-logo-max-width: 140px;

    height: var(--app-header-height) !important;
    min-height: var(--app-header-height) !important;
    max-height: var(--app-header-height) !important;
    padding: var(--app-header-padding-y) var(--app-header-padding-x) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.admin-interface #branding {
    display: flex !important;
    align-items: center !important;
    height: var(--app-header-logo-height);
    min-width: 0;
    line-height: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.admin-interface #branding h1 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: var(--app-header-logo-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    font-weight: 600;
    white-space: nowrap;
}

.admin-interface #branding h1 img.logo,
.admin-interface.login #header #branding h1 img.logo {
    height: var(--app-header-logo-height) !important;
    max-height: var(--app-header-logo-height) !important;
    max-width: var(--app-header-logo-max-width) !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: 0 !important;
    flex-shrink: 0;
}

/* Same as non-admin header: logo only, no "Admin" label */
.admin-interface #branding h1 img.logo + span,
.admin-interface #branding h1 span {
    display: none !important;
}

.admin-interface #user-tools {
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    line-height: var(--app-header-logo-height);
    white-space: nowrap;
    font-size: 0.8125rem;
}

.g-recaptcha-bubble-arrow {
    display: none;
}

.g-recaptcha-bubble-arrow + div {
    position: fixed !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.fieldBox textarea {
    max-width: 17em !important;
}

.admin-interface .related-widget-wrapper {
    white-space: normal;
}

.admin-interface .aligned p.file-upload {
    display: contents !important;
}

form .aligned ul {
    margin-left: 0px !important;
    padding-left: 0px !important;
}

.fieldBox label {
    min-width: 17em !important;
    text-overflow: ellipsis;
    cursor: pointer;
    word-break: break-word;
    overflow:hidden;
    white-space: nowrap;
}

.fieldBox label:hover{
    overflow: visible;
    white-space: normal;
    height:auto;
}

.form-row label {
    float:initial;
}

form .aligned p.help, form .aligned div.help {
    margin-left: 0px;
    padding-left: 0px;
}


fieldset .fieldBox {
  min-width: 17em !important;
  max-width: 17em !important;
}

.aligned .form-row input:not([type='checkbox']) {
  min-width: 17em !important;
  max-width: 17em !important;
}

.vTextField, .vUUIDField {
  min-width: 17em !important;
  max-width: 17em !important;
  min-height: 20px;
}

.has-hidden-field {
  display: none !important;
}

select {
  min-width: 18em !important;
  max-width: 18em !important;
  height: 100% !important;
  min-height: 32px;
}

.select2-selection--single {
  height: 100% !important;
  min-height: 32px;
}
.select2-selection__rendered {
  word-wrap: break-word !important;
  text-overflow: inherit !important;
  white-space: normal !important;
}
.select2-container {
  min-width: 18em !important;
  max-width: 18em !important;
}
.select2-container--default {
  width: auto !important;
  min-width: 18em !important;
  max-width: 18em !important;
}

.select2-container--default .select2-results__option {
    word-wrap: break-word !important;
    text-overflow: inherit !important;
    white-space: normal !important;
}

.select2-container--default .select2-selection__choice {
    float: none !important;
}

#changelist select {
  min-width: 15em !important;
  max-width: 15em !important;
  height: 100% !important;
  min-height: 32px;
}

#changelist .select2-container {
  min-width: 15em !important;
  max-width: 15em !important;
}
#changelist .select2-container--default {
  width: auto !important;
  min-width: 15em !important;
  max-width: 15em !important;
}

.loader {
    z-index: 999;
    position: fixed;
    width: 105%;
    height: 105%;
    text-align: center;
    text-wrap: wrap;
    color: blue;
    background-color: #b3b3b359;
}

.loader img {
    z-index: 999;
    position: fixed;
    width: 100px;
    height: 100px;
    top: 42%;
    left: 50%;
    padding: 20px;
    transform: translate(-50%, 0);
}

.loader-text {
    z-index: 999;
    position: fixed;
    width: 40%;
    height: 105%;
    text-align: center;
    text-wrap: wrap;
    top: 50%;
    left: 50%;
    padding: 20px;
    transform: translate(-50%, 0);
    color: #66b5e7;
    font-size: 20px;
}