/*
 * SecAtScale admin theme — brand-token overlay for Django's admin.
 *
 * Loaded after admin/css/base.css and admin/css/dark_mode.css (via the
 * extrastyle block in admin/base_site.html), so these rules win on the cascade.
 * Re-themes the admin to the brand design language (warm/editorial, orange
 * accents, Host Grotesk + Public Sans) by overriding the admin's CSS custom
 * properties plus a few component rules the variables can't express.
 *
 * Brand tokens: orange→red #fc9704 → #fb6a00 → #fb3300, link #e25a00,
 * burnt #ae3901, ink #17120c, warm body #faf7f3, card #fff, border #e7ddd1.
 */

/* ---- Self-hosted brand fonts ------------------------------------------- */
@font-face {
  font-family: "Public Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PublicSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Public Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PublicSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Public Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PublicSans-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Host Grotesk";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/HostGrotesk-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Host Grotesk";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/HostGrotesk-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Host Grotesk";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/HostGrotesk-ExtraBold.ttf") format("truetype");
}

/* ---- Brand palette --------------------------------------------------------
 * Listed for light, default (:root) and dark selectors so the warm brand
 * theme renders regardless of the OS prefers-color-scheme (the admin's
 * user-facing theme toggle is removed in base_site.html).
 */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --primary: #e25a00;
  --secondary: #17120c;
  --accent: #fb6a00;
  --primary-fg: #ffffff;

  --body-fg: #2a2018;
  --body-bg: #ffffff;
  --body-quiet-color: #8a7f74;
  --body-medium-color: #5f574e;
  --body-loud-color: #17120c;

  --header-color: #17120c;
  --header-branding-color: #17120c;
  --header-bg: #ffffff;
  --header-link-color: #17120c;

  --breadcrumbs-fg: #8a7f74;
  --breadcrumbs-link-fg: #e25a00;
  --breadcrumbs-bg: #f3ece4;

  --link-fg: #e25a00;
  --link-hover-color: #ae3901;
  --link-selected-fg: #ae3901;

  --hairline-color: #f0e9e0;
  --border-color: #e7ddd1;

  --error-fg: #d23b1e;
  --message-success-bg: #eaf7ee;
  --message-warning-bg: #fff6e6;
  --message-error-bg: #fdece7;

  --darkened-bg: #faf6f1;
  --selected-bg: #f3ece4;
  --selected-row: #fff3e9;

  --button-fg: #ffffff;
  --button-bg: #f15a00;
  --button-hover-bg: #d24e00;
  --default-button-bg: #f15a00;
  --default-button-hover-bg: #d24e00;
  --close-button-bg: #8a7f74;
  --close-button-hover-bg: #6f665d;
  --delete-button-bg: #d23b1e;
  --delete-button-hover-bg: #b22f15;

  --object-tools-fg: #ffffff;
  --object-tools-bg: #17120c;
  --object-tools-hover-bg: #2a2018;

  --font-family-primary:
    "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

/* Native form controls / scrollbars follow the light brand. */
html {
  color-scheme: light;
}

/* ---- Page vs. cards (warm body, white module cards) -------------------- */
body,
#main {
  background: #faf7f3;
}

.module,
.dashboard .module,
fieldset.module {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 16, 9, 0.04);
  overflow: hidden;
}

/* Editorial module headers — override the admin's solid primary caption. */
.module h2,
.module caption,
.inline-group h2,
fieldset h2 {
  background: #ffffff;
  color: #17120c;
  border-bottom: 1px solid var(--hairline-color);
  font-family: "Host Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* ---- Header (light, full-color logo, hairline rule) -------------------- */
#header {
  background: #ffffff;
  color: #17120c;
  border-bottom: 1px solid var(--border-color);
  box-shadow: none;
}
#branding #site-name {
  margin: 0;
}
#branding #site-name img {
  display: block;
  height: 30px;
  width: auto;
}
#header #user-tools {
  color: var(--body-medium-color);
}
#header a:link,
#header a:visited {
  color: #17120c;
}
#header a:hover {
  color: #e25a00;
}
/* The brand theme is forced (warm/light), so the OS/manual theme toggle is a
 * no-op — hide it rather than leave a stray control in the header. */
.theme-toggle {
  display: none !important;
}

/* ---- Headings → Host Grotesk ------------------------------------------- */
#content h1,
#content h2,
h1,
h2,
h3,
.dashboard h2,
.login #header h1,
.errornote {
  font-family: "Host Grotesk", sans-serif;
}
#content h1,
.dashboard h2 {
  color: #17120c;
  letter-spacing: -0.01em;
}

/* ---- Buttons: primary actions get the orange gradient ------------------ */
input[type="submit"].default,
.button.default,
.login .submit-row input[type="submit"] {
  background-image: linear-gradient(135deg, #fc9704 0%, #fb6a00 45%, #fb3300 100%);
  background-color: #f15a00; /* fallback */
  border: 0;
  border-radius: 9px;
  box-shadow: 0 6px 16px rgba(251, 68, 0, 0.22);
  font-weight: 600;
}
input[type="submit"].default:hover,
.button.default:hover,
.login .submit-row input[type="submit"]:hover {
  background-image: linear-gradient(135deg, #fb6a00 0%, #fb3300 100%);
}
/* The object-tools (Add / Sync) pills use the ink --object-tools-bg (dark),
 * giving a clear hierarchy against the orange gradient Save buttons. */
/* Secondary buttons / inputs: tidy rounded corners, neutral. */
.button,
input[type="submit"],
input[type="button"],
.submit-row a.button,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
select {
  border-radius: 9px;
}

/* ---- Breadcrumbs, links ------------------------------------------------ */
div.breadcrumbs {
  background: var(--breadcrumbs-bg);
  color: var(--breadcrumbs-fg);
  border-bottom: 1px solid var(--border-color);
}

/* ---- Login (boxed L7 look) --------------------------------------------- */
body.login {
  background: #faf7f3;
}
.login #container {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(20, 16, 9, 0.07);
  overflow: hidden;
}
.login #header {
  justify-content: center;
  padding: 22px 16px;
}
.login #header img {
  height: 30px;
  width: auto;
}

/* ---- Admin login: "Sign in with Slack" option -------------------------- */
/* The admin login form keeps username/password; this is the alternative
 * Slack sign-in below it (Members use the separate /accounts/login/).
 * Selectors beat Django's generic `a:not(...)` underline rule (1,1,1). */
.slack-admin-login {
  margin-top: 18px;
  text-align: center;
}
.slack-admin-or {
  display: block;
  font-size: 12px;
  color: var(--body-quiet-color);
  margin-bottom: 10px;
}
.login #content-main a.slack-admin-btn,
.login #content-main a.slack-admin-btn:link,
.login #content-main a.slack-admin-btn:visited,
.login #content-main a.slack-admin-btn:hover,
.login #content-main a.slack-admin-btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: #ffffff;
  color: #17120c;
  font-family: "Public Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}
.login #content-main a.slack-admin-btn:hover {
  border-color: #fb6a00;
  color: #e25a00;
  box-shadow: 0 4px 12px rgba(251, 68, 0, 0.16);
}
.login #content-main a.slack-admin-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
}
.login #content-main a.slack-admin-btn span {
  text-decoration: none;
}