/* ==========================================================================
   App Monitor — dark-teal product theme for the Django admin.
   Loaded globally via templates/admin/base_site.html (extrastyle block).

   One deliberate dark theme (the toggle is hidden, bottom of file). We override
   Django's own CSS custom properties so most chrome recolors for free, then add
   targeted rules to turn the stock admin into a modern product surface:
   a product topbar, a nav rail with pill-selected items, rounded card modules,
   airy changelist tables, teal pill buttons, and framed forms/filters.

   Palette is dark-teal, inspired by the IPRoyal data console. Chart series
   colors (--series-*) are the CVD-validated teal/amber/violet trio from the
   dataviz skill; the brighter --accent teal is UI chrome only, never a series.
   ========================================================================== */

:root,
html[data-theme="light"],
html[data-theme="dark"] {
  /* ---- brand + accent ---- */
  --accent: #16b4a6;
  --accent-bright: #24d3c0;
  --accent-hover: #12a094;
  --accent-weak: rgba(22, 180, 166, 0.14);
  --accent-weak-2: rgba(22, 180, 166, 0.22);

  --primary: var(--accent);
  --secondary: #101820;
  --primary-fg: #04110f;

  /* ---- surfaces ---- */
  --canvas: #0a0d10;
  --surface-raised: #0e1319;
  --surface-card: #131a20;
  --surface-hover: #182129;

  /* ---- ink ---- */
  --body-fg: #c4ced4;
  --body-bg: var(--canvas);
  --body-quiet-color: #79868f;
  --body-medium-color: #aab6bd;
  --body-loud-color: #f2f6f7;

  --header-color: #f2f6f7;
  --header-branding-color: #f2f6f7;
  --header-bg: var(--surface-raised);
  --header-link-color: #f2f6f7;

  --breadcrumbs-fg: #79868f;
  --breadcrumbs-link-fg: #aab6bd;
  --breadcrumbs-bg: var(--canvas);

  --link-fg: var(--accent-bright);
  --link-hover-color: #6ff0e1;
  --link-selected-fg: var(--accent-bright);

  --hairline-color: #1e262d;
  --border-color: #29343c;

  --error-fg: #f87171;

  --message-success-bg: #0c2c26;
  --message-warning-bg: #33270a;
  --message-error-bg: #351214;

  --darkened-bg: #0f151b;
  --selected-bg: #12181f;
  --selected-row: rgba(22, 180, 166, 0.08);

  --button-fg: #04110f;
  --button-bg: var(--accent);
  --button-hover-bg: var(--accent-hover);
  --default-button-bg: var(--accent);
  --default-button-hover-bg: var(--accent-hover);
  --close-button-bg: #232e36;
  --close-button-hover-bg: #2e3a43;
  --delete-button-bg: #e5484d;
  --delete-button-hover-bg: #cc3a40;

  --object-tools-fg: #d7f7f2;
  --object-tools-bg: #182129;
  --object-tools-hover-bg: var(--accent);

  /* ---- chart series (CVD-validated on the dark card surface) ---- */
  --series-1: #0d9488;
  --series-2: #d97706;
  --series-3: #9085e9;

  --font-family-primary:
    "Inter", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --radius: 12px;
  --radius-sm: 8px;

  color-scheme: dark;
}

/* One deliberate theme — the toggle has nothing meaningful left to switch. */
.theme-toggle {
  display: none;
}

/* ---- base ------------------------------------------------------------- */

html,
body {
  background: var(--canvas);
}

body {
  color: var(--body-fg);
  letter-spacing: 0.005em;
  font-feature-settings: "cv05" 1;
}

#container {
  background: var(--canvas);
}

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

/* ---- topbar ----------------------------------------------------------- */

#header {
  align-items: center;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--hairline-color);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  gap: 1.5rem;
  padding: 0.9rem 1.75rem;
}

#branding h1,
#site-name a {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
}

#branding h1 a::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.55rem;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(22, 180, 166, 0.6);
  vertical-align: baseline;
}

#user-tools {
  color: var(--body-quiet-color);
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0.02em;
}

#user-tools a {
  border-bottom: none;
  color: var(--body-medium-color);
}
#user-tools a:hover {
  color: var(--accent-bright);
}

/* ---- breadcrumbs ------------------------------------------------------ */

div.breadcrumbs {
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline-color);
  color: var(--breadcrumbs-fg);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.7rem 1.75rem;
  text-transform: uppercase;
}
div.breadcrumbs a {
  color: var(--breadcrumbs-link-fg);
}
div.breadcrumbs a:hover {
  color: var(--accent-bright);
}

/* ---- nav sidebar (app/model rail) ------------------------------------- */

#nav-sidebar {
  background: var(--surface-raised);
  border-right: 1px solid var(--hairline-color);
  padding-top: 0.5rem;
}

#nav-sidebar .module {
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0.35rem;
}

#nav-sidebar caption,
#nav-sidebar .module h2 {
  background: transparent;
  color: var(--body-quiet-color);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1rem 1.1rem 0.4rem;
  text-transform: uppercase;
}

#nav-sidebar .module th,
#nav-sidebar .module td {
  border: none;
}

#nav-sidebar table a {
  border-radius: var(--radius-sm);
  color: var(--body-medium-color);
  font-size: 0.83rem;
  font-weight: 500;
  margin: 0.05rem 0.6rem;
  padding: 0.5rem 0.85rem;
  transition: background 0.12s ease, color 0.12s ease;
}

#nav-sidebar table a:hover,
#nav-sidebar table a:focus {
  background: var(--surface-hover);
  color: var(--body-loud-color);
}

#nav-sidebar table tr.current a,
#nav-sidebar table a.selected {
  background: var(--accent-weak);
  box-shadow: inset 3px 0 0 var(--accent);
  color: #7ff0e2;
  font-weight: 600;
}

.toggle-nav-sidebar {
  background: var(--surface-raised);
  border-right: 1px solid var(--hairline-color);
  color: var(--body-quiet-color);
}
.toggle-nav-sidebar:hover {
  background: var(--surface-hover);
}

/* ---- content shell ---------------------------------------------------- */

#content {
  padding: 1.75rem 1.75rem 3rem;
}

#content > h1,
.dashboard #content-main > h1 {
  color: var(--body-loud-color);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

/* ---- modules / cards -------------------------------------------------- */

.module {
  background: var(--surface-card);
  border: 1px solid var(--hairline-color);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.module h2,
.module caption,
.inline-group h2 {
  background: transparent;
  border-bottom: 1px solid var(--hairline-color);
  color: var(--body-loud-color);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.85rem 1.1rem;
  text-transform: uppercase;
}

#content-main .module {
  margin-bottom: 1.25rem;
}

.dashboard .module table td a {
  padding: 0.6rem 1.1rem;
}

/* dashboard index app-list rows */
.dashboard .module table td a:hover {
  background: var(--surface-hover);
}

/* ---- tables ----------------------------------------------------------- */

#changelist,
#changelist .results {
  background: transparent;
}

#changelist-form .results {
  border: 1px solid var(--hairline-color);
  border-radius: var(--radius);
  /* Scroll a too-wide table sideways instead of clipping columns; the radius
     still clips the corners. -y hidden keeps the rounded top/bottom clean. */
  overflow-x: auto;
  overflow-y: hidden;
}

#changelist table,
.module table {
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  width: 100%;
}

thead th {
  background: var(--darkened-bg);
  border-bottom: 1px solid var(--border-color);
  color: var(--body-quiet-color);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 0.7rem 0.9rem;
  text-transform: uppercase;
}
thead th a:link,
thead th a:visited {
  color: var(--body-quiet-color);
}

#result_list tbody tr,
.module table tbody tr {
  background: transparent;
  transition: background 0.1s ease;
}

#result_list tbody tr:hover,
.module table tbody tr:hover {
  background: var(--surface-hover);
}

#result_list tbody td,
#result_list tbody th,
.module table tbody td {
  border-bottom: 1px solid var(--hairline-color);
  padding: 0.7rem 0.9rem;
  vertical-align: middle;
}

#result_list tbody tr:last-child td,
#result_list tbody tr:last-child th {
  border-bottom: none;
}

#result_list tbody th a {
  font-weight: 600;
}

/* row-select + action bar */
#changelist .actions {
  background: var(--surface-card);
  border: 1px solid var(--hairline-color);
  border-radius: var(--radius-sm);
  color: var(--body-medium-color);
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.9rem;
}
#changelist .actions select {
  margin-right: 0.4rem;
}

.paginator {
  border-top: 1px solid var(--hairline-color);
  color: var(--body-quiet-color);
  padding-top: 0.9rem;
}
.paginator a:link,
.paginator a:visited {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--body-medium-color);
  padding: 0.25rem 0.6rem;
}
.paginator a:hover,
.paginator .this-page {
  background: var(--accent-weak);
  border-radius: 6px;
  color: var(--accent-bright);
  padding: 0.25rem 0.6rem;
}

/* ---- buttons ---------------------------------------------------------- */

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--button-fg);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.5rem 1.05rem;
  transition: background-color 0.12s ease, transform 0.05s ease, box-shadow 0.12s ease;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover {
  box-shadow: 0 3px 14px rgba(22, 180, 166, 0.28);
}

.button:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: translateY(1px);
}

/* secondary / ghost buttons */
.button.default,
input[type="submit"].default,
.submit-row input.default {
  background: var(--accent);
}

.object-tools a.button,
.object-tools a {
  background: var(--object-tools-bg);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--object-tools-fg);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.95rem;
  text-transform: uppercase;
}
.object-tools a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--button-fg);
}

.button[disabled],
input[type="submit"][disabled],
button[disabled] {
  background: #1c2530;
  border-color: var(--hairline-color);
  box-shadow: none;
  color: #5a666e;
  cursor: not-allowed;
  opacity: 1;
}

.deletelink,
a.deletelink {
  background: transparent;
  border: 1px solid var(--delete-button-bg);
  border-radius: var(--radius-sm);
  color: #ff8a8d;
}
.deletelink:hover {
  background: var(--delete-button-bg);
  color: #fff;
}

/* Our "Sync now" / "Fetch apps" <li>s carry a form + optional status text
   alongside the button — the stock 1rem-tall floated <li> only grows past
   that on phones (responsive.css, <=767px), so it clips/overlaps on tablet
   widths. Give it its own flex layout at every breakpoint instead. */
.object-tools li.object-tools-extra {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  height: auto;
}
.object-tools-extra form {
  display: inline-flex;
}
.object-tools-extra .help {
  color: var(--body-quiet-color);
  font-size: 0.72rem;
}

/* ---- forms ------------------------------------------------------------ */

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

fieldset.module {
  border-radius: var(--radius);
}

label {
  color: var(--body-medium-color);
  font-weight: 600;
}

input,
textarea,
select,
.vTextField {
  background: var(--darkened-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--body-loud-color);
  padding: 0.5rem 0.65rem;
}

input::placeholder,
textarea::placeholder {
  color: #5c6870;
}

input:focus,
textarea:focus,
select:focus,
.vTextField:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak-2);
  outline: none;
}

.help,
.helptext,
p.help {
  color: var(--body-quiet-color);
  font-size: 0.78rem;
  line-height: 1.5;
}

.submit-row {
  background: var(--surface-card);
  border: 1px solid var(--hairline-color);
  border-radius: var(--radius);
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
}

/* selected-item / m2m selector */
.selector .selector-available,
.selector .selector-chosen {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.selector-available h2,
.selector-chosen h2 {
  background: var(--darkened-bg);
}
.selector-chosen h2 {
  background: var(--accent-weak);
  color: var(--accent-bright);
}

/* date/time shortcuts, calendar */
.datetimeshortcuts a {
  color: var(--accent-bright);
}

/* ---- changelist filter panel ------------------------------------------ */

#changelist-filter {
  background: var(--surface-raised);
  border: 1px solid var(--hairline-color);
  border-radius: var(--radius);
  overflow: hidden;
}
#changelist-filter h2 {
  background: var(--darkened-bg);
  border-bottom: 1px solid var(--hairline-color);
  border-radius: 0;
  color: var(--body-loud-color);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
#changelist-filter h3 {
  color: var(--body-quiet-color);
  font-size: 0.72rem;
  text-transform: uppercase;
}
#changelist-filter li.selected a {
  color: var(--accent-bright);
  font-weight: 600;
}
#changelist-filter a:hover {
  color: var(--accent-bright);
}

/* search box */
#changelist-search input[type="text"] {
  min-width: 16rem;
}
#toolbar {
  background: transparent;
  border: none;
  padding: 0 0 0.75rem;
}

/* date hierarchy */
.xfull ul.toplinks li a,
#changelist .xfull a {
  color: var(--accent-bright);
}

/* ---- messages / errors ------------------------------------------------ */

ul.messagelist li {
  border: 1px solid var(--hairline-color);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  color: var(--body-medium-color);
  font-size: 0.85rem;
  padding: 0.7rem 0.95rem 0.7rem 2.3rem;
}
ul.messagelist li.success {
  border-left-color: var(--accent);
}
ul.messagelist li.warning {
  border-left-color: #eab308;
}
ul.messagelist li.error {
  border-left-color: var(--error-fg);
}

.errornote {
  background: var(--message-error-bg);
  border: 1px solid var(--error-fg);
  border-radius: var(--radius-sm);
  color: #ffb4b4;
}
.errorlist {
  color: var(--error-fg);
}

/* ---- login / signup card ---------------------------------------------- */

body.login,
body.signup-page {
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(22, 180, 166, 0.10), transparent 60%),
    var(--canvas);
}

.login #container {
  width: min(28rem, calc(100vw - 2rem));
}

.login #header,
.signup-page #header {
  background: transparent;
  border: none;
  box-shadow: none;
  justify-content: center;
}

.login #content,
.signup-page #content {
  background: var(--surface-card);
  border: 1px solid var(--hairline-color);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  padding: 2rem;
}

@media (max-width: 480px) {
  .login #content,
  .signup-page #content {
    border-radius: 12px;
    padding: 1.25rem;
  }
}

.login .form-row,
.signup-page .form-row {
  border: none;
}

.login .submit-row,
.signup-page .submit-row {
  background: transparent;
  border: none;
  margin-top: 0.5rem;
  padding: 0;
}
.login .submit-row input,
.signup-page .submit-row input {
  width: 100%;
}

.signup-page #content-main {
  width: 100%;
}
.signup-page .form-row input {
  box-sizing: border-box;
  width: 100%;
}
.signup-page .help {
  color: var(--body-quiet-color);
  font-size: 0.75rem;
  line-height: 1.4;
  margin-top: 0.4rem;
}
.signup-page .help ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}
.signup-page .errorlist {
  color: var(--error-fg);
  margin: 0 0 0.5rem;
  padding-left: 1.2rem;
}

.signup-link {
  align-items: center;
  border-top: 1px solid var(--hairline-color);
  color: var(--body-quiet-color);
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 1rem;
  padding-top: 1rem;
}

/* ---- misc ------------------------------------------------------------- */

hr {
  border: none;
  border-top: 1px solid var(--hairline-color);
}

.align-right,
td.field-dashboard_link {
  text-align: right;
}

/* keep the inline dashboard button in the app list compact */
td.field-dashboard_link a.button {
  font-size: 0.7rem;
  padding: 0.3rem 0.75rem;
}

::selection {
  background: var(--accent-weak-2);
}

/* ==========================================================================
   Responsive — Django's own responsive.css handles the base structure
   (collapsing the nav rail, stacking form rows) at <=1024/<=767px; these
   rules keep our custom chrome — topbar, cards, tables, object tools,
   dashboard — legible and non-overflowing down to small phones. The page
   body must never scroll sideways; wide content scrolls inside its own box.
   ========================================================================== */

/* never let the whole page scroll horizontally */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* wide content (tables, code, the m2m selector) scrolls in its own container */
.change-form .form-row,
.module {
  max-width: 100%;
}
#result_list {
  min-width: max-content;
}

/* tablet and below */
@media (max-width: 1024px) {
  #header {
    gap: 1rem;
    padding: 0.8rem 1.1rem;
  }
  div.breadcrumbs {
    padding: 0.65rem 1.1rem;
  }
  #content {
    padding: 1.25rem 1.1rem 2.5rem;
  }
}

/* phones */
@media (max-width: 767px) {
  #header {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }
  #branding h1,
  #site-name a {
    font-size: 1.05rem;
  }
  #user-tools {
    width: 100%;
    line-height: 1.6;
  }

  #content {
    padding: 1rem 0.85rem 2.5rem;
  }
  #content > h1 {
    font-size: 1.2rem;
  }

  .module h2,
  .module caption,
  .inline-group h2 {
    padding: 0.75rem 0.9rem;
  }

  /* object tools (Dashboard / Sync now / Fetch apps) stack full-width so
     the button + status text never overlap on a narrow header */
  .object-tools {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    float: none;
    margin: 0 0 1rem;
  }
  .object-tools li {
    float: none;
    margin: 0;
    width: 100%;
  }
  .object-tools li.object-tools-extra {
    justify-content: space-between;
  }
  .object-tools a.button,
  .object-tools a {
    display: block;
    text-align: center;
  }
  .object-tools-extra form,
  .object-tools-extra button {
    flex: 1;
  }

  /* submit row: full-width stacked actions */
  .submit-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem;
  }
  .submit-row input,
  .submit-row a,
  .submit-row .deletelink-box {
    margin: 0;
    text-align: center;
    width: 100%;
  }

  /* search box spans the row */
  #changelist-search input[type="text"] {
    min-width: 0;
    width: 100%;
  }
  #toolbar form#changelist-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  /* filter panel sits above results (Django already un-floats it); frame it */
  #changelist-filter {
    margin-bottom: 1rem;
    width: 100%;
  }

  .paginator {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
  }
}

/* very small phones */
@media (max-width: 480px) {
  #header {
    padding: 0.75rem 0.85rem;
  }
  div.breadcrumbs {
    font-size: 0.68rem;
    padding: 0.6rem 0.85rem;
  }
}