/* Jouba admin theme — Zain font + app palette (primary green / warm surface).
   Loaded after Django's admin CSS via admin/base_site.html extrahead. */

/* ── Jouba fonts ── */
@font-face {
  font-family: 'Zain';
  src: url('/static/fonts/Zain-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Zain';
  src: url('/static/fonts/Zain-Bold.ttf') format('truetype');
  font-weight: 700 900;
  font-display: swap;
}

:root {
  /* Jouba Visual Identity palette */
  --jouba-primary: #0F4C3A;
  --jouba-primary-dark: #0A3328;
  --jouba-accent: #D4A72C;
  --jouba-surface: #F6F1E4;
  --jouba-card: #FFFFFF;
  --jouba-border: #E9DCC0;
  --jouba-text: #14231C;
  --jouba-muted: #5C7365;
  --jouba-danger: #B91C1C;
  --jouba-success-bg: #E7F1EB;
  --jouba-warn-bg: #FEF3D8;
  --jouba-sand: #E9DCC0;
  --jouba-brick: #8C4A2F;

  /* Django admin variables (Django 5.x) */
  --primary: var(--jouba-primary);
  --secondary: var(--jouba-primary-dark);
  --accent: var(--jouba-accent);
  --primary-fg: #fff;

  --body-fg: var(--jouba-text);
  --body-bg: var(--jouba-surface);
  --body-quiet-color: var(--jouba-muted);
  --body-loud-color: var(--jouba-text);

  --header-color: #fff;
  --header-branding-color: #fff;
  --header-bg: var(--jouba-primary);
  --header-link-color: rgba(255, 255, 255, .85);

  --breadcrumbs-fg: var(--jouba-muted);
  --breadcrumbs-link-fg: var(--jouba-primary);
  --breadcrumbs-bg: var(--jouba-card);

  --link-fg: var(--jouba-primary);
  --link-hover-color: var(--jouba-primary-dark);
  --link-selected-fg: var(--jouba-primary-dark);

  --hairline-color: var(--jouba-border);
  --border-color: var(--jouba-border);

  --error-fg: var(--jouba-danger);
  --message-success-bg: var(--jouba-success-bg);
  --message-warning-bg: var(--jouba-warn-bg);
  --message-error-bg: #FDECEC;

  --darkened-bg: #F0F0EB;
  --selected-bg: var(--jouba-success-bg);
  --selected-row: #EFF7F2;

  --button-fg: #fff;
  --button-bg: var(--jouba-primary);
  --button-hover-bg: var(--jouba-primary-dark);
  --default-button-bg: var(--jouba-primary);
  --default-button-hover-bg: var(--jouba-primary-dark);
  --close-button-bg: #888;
  --close-button-hover-bg: #666;
  --delete-button-bg: var(--jouba-danger);
  --delete-button-hover-bg: #991818;

  --object-tools-fg: #fff;
  --object-tools-bg: var(--jouba-primary);
  --object-tools-hover-bg: var(--jouba-primary-dark);

  --font-family-primary: 'Zain', 'Segoe UI', system-ui, sans-serif;
  --font-family-latin: 'Zain', system-ui, sans-serif;
  --font-family-monospace: 'IBM Plex Mono', Menlo, monospace;
}

/* ---------- global ---------- */
body {
  font-family: var(--font-family-primary);
  font-size: 15px;
  background: var(--jouba-surface);
}
h1, h2, h3, h4, #branding h1 {
  font-family: var(--font-family-primary);
  font-weight: 700;
}

/* ---------- header ---------- */
#header {
  background: var(--jouba-primary);
  color: #fff;
  padding: 10px 24px;
}
#branding h1 {
  font-size: 1.5rem;
  font-weight: 900;
}
#branding h1 a, #branding h1 a:link, #branding h1 a:visited {
  color: #fff;
}
#user-tools {
  font-size: .95rem;
}
#user-tools a {
  border-bottom: none;
  opacity: .9;
}
#user-tools a:hover { opacity: 1; }

/* ---------- breadcrumbs ---------- */
.breadcrumbs {
  background: var(--jouba-card);
  border-bottom: 1px solid var(--jouba-border);
  padding: 10px 24px;
  font-size: .95rem;
}

/* ---------- dashboard (index) ---------- */
.dashboard .module {
  border: 1px solid var(--jouba-border);
  border-radius: 14px;
  background: var(--jouba-card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.dashboard .module caption,
.dashboard .module h2 {
  background: var(--jouba-card);
  color: var(--jouba-text);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 1px solid var(--jouba-border);
}
.dashboard .module caption a.section:link,
.dashboard .module caption a.section:visited,
.module caption a.section:link,
.module caption a.section:visited {
  color: var(--jouba-text);
}
.dashboard .module table th,
.dashboard .module table td {
  padding: 10px 16px;
  border-bottom: 1px solid #F1F2F0;
}
.dashboard .module table tr:last-child th,
.dashboard .module table tr:last-child td {
  border-bottom: none;
}
.dashboard .module a {
  font-size: .98rem;
}
.module .addlink, .module .changelink, .module .viewlink {
  font-size: .82rem;
}
.addlink, .changelink, .viewsitelink, .viewlink {
  padding-inline-start: 18px;
}
.inline-group h2, .submit-row {
  background: var(--jouba-card);
}

/* ---------- change list ---------- */
#changelist {
  border-radius: 14px;
}
#changelist .module,
#changelist-filter {
  border: 1px solid var(--jouba-border);
  border-radius: 14px;
  background: var(--jouba-card);
  overflow: hidden;
}
#changelist-filter h2 {
  background: var(--jouba-primary);
  color: #fff;
  font-size: .95rem;
  padding: 10px 14px;
}
#changelist-filter h3 {
  font-size: .9rem;
  color: var(--jouba-muted);
}
#changelist-filter li.selected a {
  color: var(--jouba-primary);
  font-weight: 700;
}
#result_list {
  border-radius: 0;
}
#result_list thead th {
  background: #F6F7F4;
  font-size: .85rem;
  color: var(--jouba-muted);
  text-transform: none;
  border-bottom: 1px solid var(--jouba-border);
}
#result_list tbody td, #result_list tbody th {
  border-bottom: 1px solid #F1F2F0;
  padding: 9px 10px;
}
#result_list tbody tr:hover {
  background: var(--jouba-success-bg);
}
.action-counter {
  color: var(--jouba-muted);
}

/* ---------- forms ---------- */
.form-row, .aligned .form-row {
  border-bottom: 1px solid #F1F2F0;
  padding: 12px 0;
}
fieldset.module {
  border: 1px solid var(--jouba-border);
  border-radius: 14px;
  background: var(--jouba-card);
  margin-bottom: 16px;
}
fieldset.module h2 {
  background: transparent;
  color: var(--jouba-text);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 14px 16px 4px;
}
label, .required {
  font-size: .92rem;
  font-weight: 400;
  color: var(--jouba-text);
}
.help, p.help, form .help {
  color: var(--jouba-muted);
  font-size: .82rem;
}
input[type=text], input[type=password], input[type=email],
input[type=number], input[type=url], input[type=tel],
input[type=date], input[type=time], input[type=datetime-local],
select, textarea, .vTextField {
  font-family: var(--font-family-primary);
  border: 1px solid #D1D5DB;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: .95rem;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--jouba-primary);
  box-shadow: 0 0 0 3px rgba(15, 76, 58, .15);
  outline: none;
}
.errornote, ul.errorlist li {
  border-radius: 9px;
}

/* ---------- buttons ---------- */
.button, input[type=submit], input[type=button],
.submit-row input, a.button {
  border-radius: 10px;
  padding: 9px 18px;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: .95rem;
  border: none;
}
.button.default, input[type=submit].default, .submit-row input.default {
  background: var(--jouba-primary);
}
.button.default:hover, input[type=submit].default:hover {
  background: var(--jouba-primary-dark);
}
.object-tools a:link, .object-tools a:visited {
  border-radius: 10px;
  font-weight: 700;
}
.deletelink, a.deletelink {
  color: var(--jouba-danger);
}
.submit-row {
  border: 1px solid var(--jouba-border);
  border-radius: 14px;
  padding: 12px 16px;
}

/* ---------- messages ---------- */
ul.messagelist li {
  border-radius: 10px;
  font-weight: 700;
  padding: 12px 16px 12px 40px;
}

/* ---------- pagination / toolbar ---------- */
.paginator {
  border-top: 1px solid var(--jouba-border);
  padding: 10px 0;
}
.paginator a:link, .paginator a:visited {
  border-radius: 8px;
}
#toolbar {
  border: 1px solid var(--jouba-border);
  border-radius: 12px;
  background: var(--jouba-card);
  padding: 10px;
}
#toolbar input[type=text] {
  border-radius: 9px;
}

/* ---------- login ---------- */
body.login {
  background: var(--jouba-surface);
}
body.login #container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
body.login #header {
  position: absolute;
  top: 0; left: 0; right: 0;
}
body.login #content {
  padding: 0;
  margin-top: 60px;
}
body.login #content-main {
  width: 100%;
  max-width: 380px;
}
.login .form-row {
  border: none;
  padding: 6px 0;
}
.login .form-row label {
  font-size: .9rem;
  color: var(--jouba-muted);
}
.login .form-row input {
  width: 100%;
}
.login .submit-row {
  border: none;
  padding: 16px 0 0;
}
.login .submit-row input {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
}

/* ---------- nav sidebar ---------- */
#nav-sidebar {
  background: var(--jouba-card);
  border-inline-end: 1px solid var(--jouba-border);
}
#nav-sidebar .module {
  border: none;
}
#nav-sidebar th a, #nav-sidebar td a {
  border-radius: 8px;
}
#nav-sidebar .current-app .section {
  background: var(--jouba-success-bg);
}

/* ---------- dashboard stat cards ---------- */
.jouba-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.jouba-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--jouba-card);
  border: 1px solid var(--jouba-border);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--jouba-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.jouba-stat:hover {
  border-color: var(--jouba-primary);
  box-shadow: 0 4px 14px rgba(15, 76, 58, .12);
  transform: translateY(-1px);
}
.jouba-stat__value {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--jouba-primary);
}
.jouba-stat__label {
  font-size: .95rem;
  font-weight: 700;
}
.jouba-stat__hint {
  font-size: .8rem;
  color: var(--jouba-muted);
}
.jouba-stat--warn .jouba-stat__value { color: var(--jouba-brick); }
.jouba-stat--warn { border-inline-start: 4px solid var(--jouba-accent); }
.jouba-stat--danger .jouba-stat__value { color: var(--jouba-danger); }
.jouba-stat--danger { border-inline-start: 4px solid var(--jouba-danger); }
.jouba-stat--primary { border-inline-start: 4px solid var(--jouba-primary); }

/* ---------- changelist polish ---------- */
#changelist-form .results {
  overflow-x: auto;
}
#result_list thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
#result_list .field-status,
#result_list td[class*="status"] {
  white-space: nowrap;
}
.actions select {
  border-radius: 8px;
}
.object-tools {
  margin-top: 0;
}
.object-tools a:link, .object-tools a:visited {
  border-radius: 10px;
  padding: 8px 16px;
}

/* ---------- autocomplete / related widgets ---------- */
.select2-container--admin-autocomplete .select2-selection--single,
.select2-container--admin-autocomplete .select2-selection--multiple {
  border: 1px solid #D1D5DB;
  border-radius: 9px;
  min-height: 38px;
}
.select2-dropdown {
  border-radius: 9px;
  font-family: var(--font-family-primary);
}

/* ---------- misc ---------- */
.selector select {
  border-radius: 9px;
}
.calendar caption, .calendarbox h2 {
  background: var(--jouba-primary);
}
.timelist a {
  border-radius: 8px;
}
.calendar td.selected a {
  background: var(--jouba-primary);
}
.quiet, a.quiet:link, a.quiet:visited {
  color: var(--jouba-muted);
}
.row1 { background: var(--jouba-card); }
.row2 { background: #F8F8F4; }
footer { border-top: 1px solid var(--jouba-border); }

@media (max-width: 767px) {
  #header { padding: 10px 14px; }
  .breadcrumbs { padding: 8px 14px; }
}