/* Django admin in Taysir's design: the site's purple, gold accent, Tajawal, soft cards. */

:root,
html[data-theme="light"] {
    --tt-ink: #2c0245;
    --tt-ink-2: #4a1570;
    --tt-gold: #f5a623;
    --tt-surface: #f6f7fb;
    --tt-line: rgba(44, 2, 69, 0.10);

    --primary: #2c0245;
    --secondary: #4a1570;
    --accent: #f5a623;
    --primary-fg: #ffffff;
    --body-fg: #1d1230;
    --body-bg: #f6f7fb;
    --body-quiet-color: #5c5668;
    --body-medium-color: #3d3550;
    --body-loud-color: #1d1230;
    --header-color: #f3e9ff;
    --header-branding-color: #ffffff;
    --header-bg: linear-gradient(135deg, #2c0245 0%, #4a1570 100%);
    --header-link-color: #ffffff;
    --breadcrumbs-fg: #e9dcf7;
    --breadcrumbs-link-fg: #ffffff;
    --breadcrumbs-bg: #4a1570;
    --link-fg: #4a1570;
    --link-hover-color: #2c0245;
    --link-selected-fg: #2c0245;
    --hairline-color: rgba(44, 2, 69, 0.10);
    --border-color: rgba(44, 2, 69, 0.14);
    --darkened-bg: #f1edf7;
    --selected-bg: #efe4fb;
    --selected-row: #fdf3e1;
    --button-fg: #ffffff;
    --button-bg: #2c0245;
    --button-hover-bg: #4a1570;
    --default-button-bg: #4a1570;
    --default-button-hover-bg: #2c0245;
    --close-button-bg: #8a8496;
    --close-button-hover-bg: #5c5668;
    --delete-button-bg: #c62828;
    --delete-button-hover-bg: #9e1f1f;
    --object-tools-fg: #ffffff;
    --object-tools-bg: #4a1570;
    --object-tools-hover-bg: #2c0245;
    --message-success-bg: #e8f7ef;
    --font-family-primary: "Tajawal", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #b58cf0;
        --secondary: #4a1570;
        --primary-fg: #ffffff;
        --body-fg: #f1ecf8;
        --body-bg: #120a1d;
        --body-quiet-color: #b9adc9;
        --body-loud-color: #ffffff;
        --breadcrumbs-bg: #241735;
        --link-fg: #cfb0ff;
        --link-hover-color: #ffffff;
        --hairline-color: #33244a;
        --border-color: #3d2c57;
        --darkened-bg: #1b1129;
        --selected-bg: #2e1d45;
        --selected-row: #3a2a12;
        --button-bg: #6b2fa3;
        --button-hover-bg: #7d3fb8;
        --default-button-bg: #f5a623;
        --default-button-hover-bg: #ffb847;
        --object-tools-bg: #33244a;
    }
}
html[data-theme="dark"] {
    --primary: #b58cf0;
    --secondary: #4a1570;
    --primary-fg: #ffffff;
    --body-fg: #f1ecf8;
    --body-bg: #120a1d;
    --body-quiet-color: #b9adc9;
    --body-loud-color: #ffffff;
    --breadcrumbs-bg: #241735;
    --link-fg: #cfb0ff;
    --link-hover-color: #ffffff;
    --hairline-color: #33244a;
    --border-color: #3d2c57;
    --darkened-bg: #1b1129;
    --selected-bg: #2e1d45;
    --selected-row: #3a2a12;
    --button-bg: #6b2fa3;
    --button-hover-bg: #7d3fb8;
    --default-button-bg: #f5a623;
    --default-button-hover-bg: #ffb847;
    --object-tools-bg: #33244a;
}

body { font-family: var(--font-family-primary); font-size: 15px; }

/* Header */
#header {
    background: var(--header-bg);
    padding: 12px 28px;
    box-shadow: 0 8px 24px rgba(44, 2, 69, 0.18);
    border-bottom: 3px solid var(--tt-gold);
}
#branding #site-name { margin: 0; }
.tt-admin-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; font-weight: 800; font-size: 1.15rem; }
.tt-admin-logo { height: 34px; width: auto; filter: brightness(0) invert(1); }
#user-tools { font-size: 13px; }
#user-tools a { border-bottom: 0; }
#user-tools a:hover { color: var(--tt-gold); }

div.breadcrumbs { padding: 10px 28px; font-size: 13px; }

/* Content */
#content { padding: 24px 28px; }
#content h1 { font-weight: 800; color: var(--body-loud-color); }

.module,
#content-related .module,
.dashboard .module {
    background: var(--body-bg);
    border: 1px solid var(--hairline-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(44, 2, 69, 0.04), 0 12px 32px rgba(44, 2, 69, 0.06);
}
.module h2,
.module caption,
.inline-group h2 {
    background: var(--tt-ink);
    background: linear-gradient(135deg, #2c0245, #4a1570);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: 12px 16px;
    letter-spacing: 0;
    text-transform: none;
}
.module caption a, .module h2 a { color: #fff; }
.dashboard .module table th { font-weight: 700; }

#changelist .actions,
#changelist-filter,
#toolbar { border-radius: 12px; }
#changelist-filter h2 { border-radius: 12px 12px 0 0; }
#changelist-filter li.selected a { color: var(--tt-ink-2); font-weight: 800; }

/* Buttons */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
    border-radius: 10px;
    font-weight: 700;
    padding: 10px 18px;
}
.submit-row { border-radius: 14px; border: 1px solid var(--hairline-color); }
.object-tools a { border-radius: 999px; font-weight: 700; }
.object-tools a.addlink { background-color: var(--tt-gold); color: #2c0245; }
.object-tools a.addlink:hover { background-color: #ffb847; }

/* Fields */
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number],
input[type=tel], textarea, select, .vTextField {
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 8px 10px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(245, 166, 35, 0.45); border-color: var(--tt-gold); }
fieldset .description, .help, p.help, div.help { color: var(--body-quiet-color); }

/* Thumbnails in lists */
.tt-thumb { object-fit: cover; border: 2px solid rgba(245, 166, 35, 0.6); background: #0f071b; vertical-align: middle; }
#result_list td { vertical-align: middle; }

/* Login */
body.login { background: linear-gradient(160deg, #2c0245 0%, #4a1570 60%, #1d0130 100%); min-height: 100vh; }
body.login #container {
    border-radius: 20px;
    overflow: hidden;
    border: 0;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    margin-top: 10vh;
}
body.login #header { justify-content: center; }
body.login #content { padding: 24px; }
body.login .submit-row { border: 0; padding: 0; margin-top: 16px; background: none; }
body.login .submit-row input { width: 100%; background: var(--tt-gold); color: #2c0245; }
/* The theme follows the device; the toggle's icon does not survive the purple header. */
.theme-toggle { display: none !important; }

@media (max-width: 767px) {
    #header { padding: 10px 16px; }
    #content { padding: 16px; }
    div.breadcrumbs { padding: 10px 16px; }
    .tt-admin-logo { height: 26px; }
}