/* SZNotes admin theme — aligned with frontend styles.css */

html[data-theme="light"],
:root {
  --primary: #0066cc;
  --secondary: #0066cc;
  --accent: #e6f0ff;
  --accent-fg: #0066cc;
  --primary-fg: #ffffff;

  --body-fg: #1a1a1a;
  --body-bg: #ffffff;
  --body-quiet-color: #666666;
  --body-medium-color: #444444;
  --body-loud-color: #1a1a1a;

  --header-branding-color: #ffffff;
  --header-bg: #1a1a1a;
  --header-color: #ffffff;
  --header-link-color: #ffffff;

  --breadcrumbs-fg: #666666;
  --breadcrumbs-link-fg: #0066cc;
  --breadcrumbs-bg: #f7f7f8;

  --link-fg: #0066cc;
  --link-hover-color: #004c99;
  --link-selected-fg: #0066cc;

  --hairline-color: #dddddd;
  --border-color: #cccccc;

  --error-fg: #b00020;

  --message-success-bg: #e8f7ef;
  --message-warning-bg: #fff8e6;
  --message-error-bg: #fde8ec;

  --darkened-bg: #f7f7f8;
  --selected-bg: #e6f0ff;
  --selected-row: #e6f0ff;

  --button-fg: #ffffff;
  --button-bg: #0066cc;
  --button-hover-bg: #004c99;
  --default-button-bg: #0066cc;
  --default-button-hover-bg: #004c99;
  --close-button-bg: #666666;
  --close-button-hover-bg: #444444;
  --delete-button-bg: #b00020;
  --delete-button-hover-bg: #8f001a;

  --object-tools-fg: #ffffff;
  --object-tools-bg: #0066cc;
  --object-tools-hover-bg: #004c99;

  --font-family-primary: Arial, sans-serif;
}

html[data-theme="dark"] {
  --primary: #4a9eff;
  --secondary: #4a9eff;
  --accent: #24374d;
  --accent-fg: #4a9eff;
  --primary-fg: #0b1015;

  --body-fg: #e6e6e6;
  --body-bg: #16181d;
  --body-quiet-color: #9aa0a6;
  --body-medium-color: #c7c7c7;
  --body-loud-color: #e6e6e6;

  --header-branding-color: #e6e6e6;
  --header-bg: #1e2127;
  --header-color: #e6e6e6;
  --header-link-color: #e6e6e6;

  --breadcrumbs-fg: #9aa0a6;
  --breadcrumbs-link-fg: #4a9eff;
  --breadcrumbs-bg: #1a1d23;

  --link-fg: #4a9eff;
  --link-hover-color: #7ab8ff;
  --link-selected-fg: #4a9eff;

  --hairline-color: #333842;
  --border-color: #454b56;

  --error-fg: #ff6b6b;

  --message-success-bg: #1a2e24;
  --message-warning-bg: #3a2b14;
  --message-error-bg: #3a1a1f;

  --darkened-bg: #1a1d23;
  --selected-bg: #24374d;
  --selected-row: #24374d;

  --button-fg: #0b1015;
  --button-bg: #4a9eff;
  --button-hover-bg: #7ab8ff;
  --default-button-bg: #4a9eff;
  --default-button-hover-bg: #7ab8ff;
  --close-button-bg: #454b56;
  --close-button-hover-bg: #666666;
  --delete-button-bg: #ff6b6b;
  --delete-button-hover-bg: #ff8f8f;

  --object-tools-fg: #0b1015;
  --object-tools-bg: #4a9eff;
  --object-tools-hover-bg: #7ab8ff;
}

.sznotes-banner-stack {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
}

.sznotes-role-banner {
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-sizing: border-box;
  background: #047857;
  color: #ecfdf5;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  border-bottom: 1px solid #065f46;
}

.sznotes-dev-banner {
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-sizing: border-box;
  background: #b45309;
  color: #fffbeb;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  border-bottom: 1px solid #92400e;
}

.sznotes-admin #header {
  margin-top: 2.5rem;
}

.sznotes-admin--dev #header {
  margin-top: 5rem;
}

.sznotes-admin.login #header {
  margin-top: 2.5rem;
}

.sznotes-admin--dev.login #header {
  margin-top: 5rem;
}

#site-name a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.sznotes-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sznotes-brand-name {
  font-size: 1.125rem;
  font-weight: 700;
}

.sznotes-brand-admin {
  font-size: 0.875rem;
  font-weight: 400;
  opacity: 0.82;
}

#header {
  border-bottom: 1px solid var(--hairline-color);
}

div.breadcrumbs {
  border-bottom: 1px solid var(--hairline-color);
}

.module h2,
.module caption,
.inline-group h2 {
  background: var(--darkened-bg);
  color: var(--body-fg);
  border-bottom: 1px solid var(--hairline-color);
}

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
  border-radius: 6px;
}

input,
select,
textarea {
  border-radius: 6px;
  border-color: var(--border-color);
}

#changelist-filter h2 {
  background: var(--darkened-bg);
  color: var(--body-fg);
}

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

.login {
  background: var(--darkened-bg);
}

body.login.sznotes-admin #content-main::before {
  content: "Sign in to the admin panel";
  display: block;
  margin: 0 0 12px;
  color: var(--body-quiet-color);
}

.login #container {
  border-radius: 10px;
  border-color: var(--hairline-color);
  box-shadow: none;
}

.login #header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--hairline-color);
}

.login #header h1 a {
  color: var(--header-link-color);
}

.login .form-row #id_username,
.login .form-row #id_password {
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--body-bg);
  color: var(--body-fg);
}

.login .submit-row input[type="submit"] {
  width: 100%;
  padding: 10px;
  font-size: 0.875rem;
}

#user-tools a {
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

#user-tools a:focus,
#user-tools a:hover {
  border-bottom-color: currentColor;
}

@media (max-width: 767px) {
  .sznotes-dev-banner {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }
}