/* angelnet look for the Django admin. Loaded after Django's own styles. */

@font-face {
  font-family: "Galmuri11";
  src: url("../fonts/Galmuri11.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Galmuri11";
  src: url("../fonts/Galmuri11-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Django recolours itself through these variables. The look is light-only, so
   this also overrides Django's dark mode and the theme button is hidden below. */
:root,
html[data-theme] {
  --ang-frame: #d9a3d6;
  --ang-pink-line: #f2a7c8;
  --ang-pink-deep: #b52a6e;
  --ang-pink-dark: #8f1f58;
  --ang-check: rgba(255, 140, 185, .32);

  --primary: #ffc4dc;
  --secondary: #c93a7c;
  --accent: #ffe680;
  --primary-fg: #8f1f58;

  --body-fg: #4b3f72;
  --body-bg: #fffdfe;
  --body-quiet-color: #75689e;
  --body-medium-color: #5a4d82;
  --body-loud-color: #8f1f58;

  --header-color: #4b3f72;
  --header-branding-color: #b52a6e;
  --header-bg: #fff;
  --header-link-color: #8f1f58;

  --breadcrumbs-fg: #4b3f72;
  --breadcrumbs-link-fg: #1d27b8;
  --breadcrumbs-bg: #d9ecff;

  --link-fg: #1d27b8;
  --link-hover-color: #c93a7c;
  --link-selected-fg: #b52a6e;

  --hairline-color: #fbdcea;
  --border-color: #f2a7c8;

  --error-fg: #c0183f;

  --message-debug-bg: #f3effa;
  --message-debug-icon: url("../admin/img/icon-debug.svg");
  --message-info-bg: #d9ecff;
  --message-info-icon: url("../admin/img/icon-info.svg");
  --message-success-bg: #d3f3d9;
  --message-success-icon: url("../admin/img/icon-yes.svg");
  --message-warning-bg: #fff4bf;
  --message-warning-icon: url("../admin/img/icon-alert.svg");
  --message-error-bg: #ffdbe6;
  --message-error-icon: url("../admin/img/icon-no.svg");

  --darkened-bg: #fff2f8;
  --selected-bg: #ffe3ef;
  --selected-row: #ffe3ef;

  --button-fg: #fff;
  --button-bg: #c93a7c;
  --button-hover-bg: #a82a65;
  --default-button-bg: #b52a6e;
  --default-button-hover-bg: #8f1f58;
  --close-button-bg: #8d7fb0;
  --close-button-hover-bg: #6c5e91;
  --delete-button-bg: #c0183f;
  --delete-button-hover-bg: #980f30;

  --object-tools-fg: #fff;
  --object-tools-bg: #c93a7c;
  --object-tools-hover-bg: #a82a65;

  --font-family-primary: "Galmuri11", "Malgun Gothic", sans-serif;
  --font-family-monospace: "Galmuri11", "Malgun Gothic", monospace;

  color-scheme: light;
}

.theme-toggle { display: none; }

/* ---------- pixel font size ----------
   Galmuri is drawn on a 12px grid and blurs at sizes in between. */
#container *,
.calendarbox *,
.clockbox * { font-size: 12px; }

#container #content h1 { font-size: 24px; line-height: 1.4; color: var(--ang-pink-deep); }
#container #site-name,
#container #site-name a { font-size: 16px; font-weight: 700; }

body {
  background: #d9ecff url("../img/clouds.svg") repeat;
  color: var(--body-fg);
}

/* ---------- page frame ---------- */
#container {
  width: auto;
  min-height: calc(100vh - 24px);
  margin: 12px;
  background: var(--body-bg);
  border: 4px solid var(--ang-frame);
  border-radius: 10px;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--ang-frame);
}

#header {
  border-bottom: 1px solid var(--ang-frame);
  border-radius: 6px 6px 0 0;
  background-color: #fff;
  background-image:
    linear-gradient(90deg, var(--ang-check) 50%, transparent 50%),
    linear-gradient(var(--ang-check) 50%, transparent 50%);
  background-size: 12px 12px;
}
#site-name { display: flex; align-items: center; gap: 8px; margin: 0; }
#site-name a:link,
#site-name a:visited {
  color: var(--ang-pink-deep);
  text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff;
}
.brand-heart { image-rendering: pixelated; }
#user-tools {
  padding: 2px 10px;
  border: 1px solid var(--ang-pink-line);
  border-radius: 999px;
  background: #fff;
}
#user-tools a:link,
#user-tools a:visited,
#user-tools button,
#logout-form button {
  border-bottom: 0;
  color: var(--link-fg);
  text-decoration: underline;
}
#user-tools a:hover,
#logout-form button:hover { color: var(--link-hover-color); }

div.breadcrumbs { border-bottom: 1px solid #bcd9f5; }

/* ---------- panels and tables ---------- */
.module h2,
.module caption,
.inline-group h2 {
  background-color: #fff;
  background-image:
    linear-gradient(90deg, var(--ang-check) 50%, transparent 50%),
    linear-gradient(var(--ang-check) 50%, transparent 50%);
  background-size: 8px 8px;
  border: 1px solid var(--ang-pink-line);
  border-radius: 999px;
  color: var(--ang-pink-dark);
  font-weight: 700;
  text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff;
}
.module caption a,
.module h2 a { color: var(--ang-pink-dark); }
.module { background: transparent; }
#container #content-related .module h2 {
  padding: 8px 16px;
  color: var(--ang-pink-dark);
  font-size: 12px;
  font-weight: 700;
}

#changelist-filter h2,
#changelist-filter summary { color: var(--ang-pink-deep); }
thead th, tfoot td { background: #ffe3ef; color: var(--ang-pink-dark); }
#changelist table thead th { background: #ffe3ef; }

/* ---------- forms ---------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select,
.vTextField {
  border: 1px solid var(--ang-pink-line);
  border-radius: 6px;
  background: #fff;
  color: var(--body-fg);
}
input:focus,
textarea:focus,
select:focus {
  border-color: #c93a7c;
  outline: 2px solid #ffc4dc;
  outline-offset: 0;
}
textarea { line-height: 1.7; max-width: 100%; box-sizing: border-box; }
input[type="file"]::file-selector-button {
  padding: 3px 10px;
  border: 2px outset #ff9cc5;
  border-radius: 999px;
  background: #ffe3ef;
  color: var(--ang-pink-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.help, p.help, form .aligned p.help, form .aligned div.help { color: var(--body-quiet-color); }

/* ---------- buttons ---------- */
.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
  border: 2px outset #ff9cc5;
  border-radius: 999px;
  font-weight: 700;
}
.button.default,
input[type="submit"].default,
.submit-row input.default { font-weight: 700; }
.button:active,
input[type="submit"]:active { border-style: inset; }
.submit-row { border: 1px dashed var(--ang-pink-line); border-radius: 10px; background: #fff7fb; }
.submit-row a.deletelink {
  height: auto;
  padding: 10px 15px;
  border-radius: 999px;
}
.object-tools a { border: 2px outset #ff9cc5; border-radius: 999px; font-weight: 700; }

/* ---------- side menu ---------- */
#nav-sidebar { background: #fff; border-right: 1px solid var(--ang-frame); }
.toggle-nav-sidebar { background: #fff2f8; border-right: 1px solid var(--ang-frame); color: var(--ang-pink-deep); }

/* ---------- phone width ----------
   Django fixes big text boxes at 610px, wider than a phone screen. */
@media (max-width: 767px) {
  #container { margin: 6px; min-height: calc(100vh - 12px); }
  #container .aligned .form-row textarea {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-height: 240px;
    max-height: none;
  }
  #container .aligned .form-row > div,
  #container .aligned .form-row .flex-container { width: 100%; min-width: 0; }
}

/* ---------- login page ---------- */
body.login { background: #d9ecff url("../img/clouds.svg") repeat; }
.login #container {
  width: 30em;
  max-width: calc(100% - 24px);
  min-height: 0;
  margin: 60px auto 12px;
  border-radius: 12px;
}
.login #header { flex-direction: column; padding: 16px; text-align: center; }
.login #branding { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.login #site-name { justify-content: center; }
.login-angel { image-rendering: pixelated; }
.login .submit-row { border: 0; background: none; }
.login .submit-row input { width: 100%; }