/* Lifecycle admin - full design match with main site */

/* === Variables (override Django admin) === */
:root,
html,
html[data-theme="light"],
html[data-theme="dark"] {
    --primary: #1a2332;
    --primary-fg: #e6edf3;
    --secondary: #2d3a4d;
    --accent: #58a6ff;

    --body-fg: #e6edf3;
    --body-bg: #0f1419;
    --body-quiet-color: #8b949e;
    --body-medium-color: #c9d1d9;
    --body-loud-color: #ffffff;

    --header-color: #e6edf3;
    --header-branding-color: #58a6ff;
    --header-bg: #1a2332;
    --header-link-color: #58a6ff;

    --breadcrumbs-fg: #8b949e;
    --breadcrumbs-link-fg: #58a6ff;
    --breadcrumbs-bg: #1a2332;

    --link-fg: #58a6ff;
    --link-hover-color: #79b8ff;
    --link-selected-fg: #79b8ff;

    --hairline-color: #2d3a4d;
    --border-color: #2d3a4d;

    --error-fg: #f85149;

    --message-success-bg: rgba(63, 185, 80, 0.2);
    --message-warning-bg: rgba(210, 170, 50, 0.2);
    --message-error-bg: rgba(248, 81, 73, 0.2);

    --darkened-bg: #1a2332;
    --selected-bg: #2d3a4d;
    --selected-row: #2d3a4d;

    --button-fg: #0f1419;
    --button-bg: #58a6ff;
    --button-hover-bg: #79b8ff;
    --default-button-bg: #58a6ff;
    --default-button-hover-bg: #79b8ff;
    --close-button-bg: #2d3a4d;
    --close-button-hover-bg: #3d4a5d;
    --delete-button-bg: #f85149;
    --delete-button-hover-bg: #ff6b63;

    --object-tools-fg: #e6edf3;
    --object-tools-bg: #2d3a4d;
    --object-tools-hover-bg: #3d4a5d;

    --font-family-primary: 'Segoe UI', system-ui, sans-serif;
    --surface: #1a2332;
    --text-muted: #8b949e;
    color-scheme: dark;
}

/* === Base === */
body {
    font-family: var(--font-family-primary) !important;
    background: var(--body-bg) !important;
    color: var(--body-fg) !important;
    line-height: 1.5 !important;
}

a:link, a:visited { color: var(--link-fg) !important; }
a:hover, a:focus { color: var(--link-hover-color) !important; }

/* === Header - exact match with main site nav === */
#header,
nav#header {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.75rem 1.5rem !important;
}

#header .nav-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#header a {
    color: var(--accent) !important;
    text-decoration: none !important;
}

#header a:hover {
    color: #79b8ff !important;
}

#header .nav-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}

#header .nav-user {
    color: var(--body-quiet-color);
    font-size: 0.9rem;
}

#header .nav-link-btn {
    background: none;
    color: var(--accent);
    padding: 0;
    border: none;
    font-size: inherit;
    cursor: pointer;
}

#header .nav-link-btn:hover {
    color: #79b8ff;
}

/* === Breadcrumbs === */
.breadcrumbs {
    background: var(--breadcrumbs-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.75rem 1.5rem !important;
}

.breadcrumbs a {
    color: var(--breadcrumbs-link-fg) !important;
}

/* === Content - container like main site === */
main.content {
    max-width: 960px;
    margin: 0 auto;
}

#content {
    background: var(--body-bg) !important;
    padding: 1.5rem !important;
}

#content h1 {
    font-size: 1.5rem !important;
    margin: 0 0 1rem !important;
    color: var(--body-fg) !important;
}

#content h2 {
    font-size: 1.25rem !important;
    margin: 0 0 0.75rem !important;
}

/* === Modules as cards === */
.module {
    background: var(--darkened-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    margin-bottom: 1rem !important;
    overflow: hidden;
}

.module h2,
.module caption,
.inline-group h2 {
    background: var(--darkened-bg) !important;
    color: var(--body-fg) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
}

/* === Forms === */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input:not([type]),
textarea,
select,
.vTextField {
    background: var(--darkened-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--body-fg) !important;
    border-radius: 6px !important;
    padding: 0.5rem 0.75rem !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent) !important;
    outline: none !important;
}

.form-row label {
    color: var(--body-quiet-color) !important;
}

/* === Buttons === */
.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
    background: var(--button-bg) !important;
    color: var(--button-fg) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.5rem 1rem !important;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: var(--button-hover-bg) !important;
}

.delete-confirmation form input[type="submit"],
.deletelink {
    background: var(--delete-button-bg) !important;
}

.delete-confirmation form input[type="submit"]:hover {
    background: var(--delete-button-hover-bg) !important;
}

/* === Tables === */
#changelist table thead th {
    background: var(--darkened-bg) !important;
    color: var(--body-quiet-color) !important;
    border: 1px solid var(--border-color) !important;
    padding: 0.5rem 0.75rem !important;
}

#changelist table tbody td,
#changelist table tbody th {
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.5rem 0.75rem !important;
}

#changelist table tbody tr:hover td {
    background: var(--selected-bg) !important;
}

/* === Filter sidebar === */
#changelist-filter {
    background: var(--darkened-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
}

#changelist-filter h2 {
    background: var(--darkened-bg) !important;
    color: var(--body-fg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#changelist-filter li.selected a {
    color: var(--link-fg) !important;
}

/* === Messages === */
.messagelist li {
    padding: 0.75rem 1rem !important;
    border-radius: 6px !important;
    margin-bottom: 0.5rem !important;
}

.messagelist .success {
    background: var(--message-success-bg) !important;
    border: 1px solid #3fb950 !important;
}

.messagelist .warning {
    background: var(--message-warning-bg) !important;
}

.messagelist .error {
    background: var(--message-error-bg) !important;
    border: 1px solid var(--error-fg) !important;
}

.errornote {
    background: var(--message-error-bg) !important;
    border: 1px solid var(--error-fg) !important;
    color: var(--error-fg) !important;
    padding: 0.75rem !important;
    border-radius: 6px !important;
}

/* === Nav sidebar === */
#nav-sidebar {
    background: var(--darkened-bg) !important;
    border-right: 1px solid var(--border-color) !important;
}

#nav-sidebar .module {
    background: transparent !important;
    border: none !important;
}

#nav-sidebar a {
    color: var(--link-fg) !important;
}

#nav-sidebar .current-app .section,
#nav-sidebar .current-model {
    background: var(--selected-bg) !important;
}

.toggle-nav-sidebar {
    background: var(--darkened-bg) !important;
    color: var(--link-fg) !important;
    border-color: var(--border-color) !important;
}

/* === Right sidebar (content-related) === */
#content-related {
    background: var(--darkened-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
}

#content-related .module h2 {
    border-bottom: 1px solid var(--border-color) !important;
}

/* === Object tools === */
.object-tools {
    margin-bottom: 1rem !important;
}

.object-tools a,
.object-tools li {
    background: var(--object-tools-bg) !important;
    color: var(--object-tools-fg) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
}

.object-tools a:hover {
    background: var(--object-tools-hover-bg) !important;
}

/* === Login page === */
.login #header {
    background: var(--header-bg) !important;
}

.login #content {
    background: transparent !important;
}

.login form input[type="text"],
.login form input[type="password"] {
    background: var(--darkened-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--body-fg) !important;
}

.login .submit-row input {
    background: var(--button-bg) !important;
    color: var(--button-fg) !important;
}

/* === Footer === */
#footer {
    background: var(--header-bg) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--body-quiet-color) !important;
    padding: 0.75rem 1.5rem !important;
}

/* === Search form === */
#changelist-search input {
    background: var(--darkened-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--body-fg) !important;
}

/* === Actions === */
.actions select {
    background: var(--darkened-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--body-fg) !important;
}

/* === Dashboard / app list === */
#content-main .module {
    margin-bottom: 1rem !important;
}

#content-main .module h2 a {
    color: var(--link-fg) !important;
}

#content-main .module table a {
    color: var(--link-fg) !important;
}