@import "colors-kmuhelper.css";

/* Colors
- https://docs.djangoproject.com/en/dev/ref/contrib/admin/#admin-theming
- https://github.com/django/django/blob/main/django/contrib/admin/static/admin/css/base.css
*/

html[data-theme="light"], html[data-theme="dark"], :root {
    --primary: var(--kmuhelper-default);
    --primary-fg: #f7f7f7;
    --secondary: var(--kmuhelper-darkest);
    --accent: var(--kmuhelper-lightest);

    --header-color: #ffc;
    --header-branding-color: var(--kmuhelper-lightest);
    --header-bg: var(--kmuhelper-darkest);
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #c4dce8;
    --breadcrumbs-link-fg: #f7f7f7;
    --breadcrumbs-bg: var(--kmuhelper-default);

    --link-fg: var(--kmuhelper-dark);
    --link-hover-color: var(--kmuhelper-darkest);
    --link-selected-fg: var(--kmuhelper-darkest);

    --button-fg: #fff;
    --button-bg: var(--kmuhelper-default);
    --button-hover-bg: var(--kmuhelper-dark);
    --default-button-bg: var(--kmuhelper-darkest);
    --default-button-hover-bg: var(--kmuhelper-dark);
}

/* Django 5.0 Color "fixes" */

#result_list tbody a,
fieldset.module .form-row a,
fieldset.module table a,
a.link {
    color: var(--link-fg);

    &:hover, &:focus {
        color: var(--link-hover-color);
    }
}

/* Prevent the theme color to show behind the background color */

body {
    min-height: 100vh;
}

/* Help text preserve lines */

form div.help {
    white-space: pre-line;
}

/* Margin fix for textarea */

form .wide textarea + p.help,
form .wide textarea + div.help {
    margin-left: 200px;
}

/* More styling */

.field-display_customer {
    white-space: nowrap;
}

/* ID styling */

.field-pkfill {
    font-family: "Courier New", monospace;
    text-align: right;
}

/* Icon columns width fix for boolean columns */

.column-pkfill,
.column-display_woocommerce_state,
.column-display_is_paid,
.column-display_is_shipped {
    width: 1px;
}

/* Price styling */

.text-align-right,
.field-display_current_price,
.column-display_current_price,
.field-display_cached_sum,
.column-display_cached_sum,
.field-display_subtotal,
.column-display_subtotal {
    text-align: end;
}

/* Optimize for more messages */

ul.messagelist li:not(:last-child) {
    margin-bottom: 2px;
}

/* Additional app index style */

#pageinfo {
    padding-bottom: 10px;
    line-height: 1.75;
}

#pageinfo a {
    border-radius: 5px;
    color: white !important;
    background-color: var(--kmuhelper-dark);
    transition-duration: 0.5s;
    text-decoration: none !important;
    padding: 0 0.3em;
    margin: 0.1em 0.2em;
    white-space: nowrap;
    display: inline-block;
}

#pageinfo a:hover {
    background-color: var(--kmuhelper-darkest);
}

#pageinfo a i {
    margin-right: 0.2em;
}

/* Fix overlapping object-tools buttons */

@media (min-width: 768px) {
    .change-form #content-main {
        margin-top: 50px;
    }

    .change-form .object-tools li {
        margin-bottom: 10px;
    }
}

.change-form .object-tools li {
    margin-left: 5px;
}

/* Dropdowns in object tools */

.object-tools {
    overflow-inline: visible !important;
    display: inline-block;

    /* Object tools overflow */
    overflow-y: visible !important;
}

.object-tools .dropdown {
    position: relative;
    display: inline-block;
}

.object-tools .dropdown div {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    z-index: 1;
}

.object-tools .dropdown:hover div,
.object-tools .dropdown:active div {
    display: block;
}

.object-tools .dropdown div a,
.object-tools .dropdown div b,
.object-tools .dropdown div i {
    width: calc(100% - 24px);
    display: block;
    padding: 6px 12px;
    background: none;
    border-radius: 0;
    color: black;
    text-transform: none;
}

.object-tools .dropdown div a:not(.disabled):hover {
    background-color: #d3d3d3;
}

.object-tools .dropdown div > a:first-child,
.object-tools .dropdown div > abbr:first-child {
    border-radius: 10px 10px 0 0;
}

.object-tools .dropdown div > a:last-child,
.object-tools .dropdown div > abbr:last-child {
    border-radius: 0 0 10px 10px;
}

.object-tools .dropdown div a.disabled {
    color: grey;
}

.object-tools .dropdown div hr {
    color: lightgray;
    background-color: lightgray;
}

.dropdown > a::after, .dropdown > div > b:first-child::after {
    content: "▼";
    padding-left: 0.5em;
}

/* Additional buttons in submit row */

.submit-row a.button {
    text-decoration: none;
    padding: 10px 15px;
    width: auto;
    box-sizing: border-box;
    line-height: 15px;

    -webkit-appearance: none;
    appearance: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

