:root {
  --sd-navy: #131c33;
  --sd-navy-light: #1d2a4a;
  --sd-blue: #3b5bfd;
  --sd-blue-dark: #2a44d6;
  --sd-bg: #f3f5fa;
  --sd-surface: #ffffff;
  --sd-border: #e4e8f2;
  --sd-text: #1b2333;
  --sd-muted: #6b7590;

  --sd-open-bg: #e7edff; --sd-open-fg: #2a49d6; --sd-open-border: #b9c8ff;
  --sd-progress-bg: #f2e9ff; --sd-progress-fg: #6a35c9; --sd-progress-border: #d9c4fb;
  --sd-resolved-bg: #e2f7ec; --sd-resolved-fg: #148452; --sd-resolved-border: #b6ecd0;

  /* Re-theme Django's own admin variables so every default element (links,
     buttons, breadcrumbs, selected rows) follows this palette instead of
     the stock teal/yellow — the yellow "selected row" default is unreadable
     on a white sidebar, which is what made the nav look broken. */
  --primary: var(--sd-blue);
  --secondary: var(--sd-navy);
  --accent: var(--sd-blue);
  --link-fg: var(--sd-blue);
  --link-hover-color: var(--sd-blue-dark);
  --link-selected-fg: var(--sd-blue-dark);
  --selected-bg: var(--sd-open-bg);
  --selected-row: var(--sd-open-bg);
  --breadcrumbs-bg: #eaf0fb;
  --breadcrumbs-fg: #4d6082;
  --breadcrumbs-link-fg: var(--sd-blue);
  --button-bg: var(--sd-blue);
  --button-hover-bg: var(--sd-blue-dark);
  --default-button-bg: var(--sd-blue);
  --default-button-hover-bg: var(--sd-blue-dark);
}

body, #container {
  background: var(--sd-bg);
  color: var(--sd-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#header {
  background: linear-gradient(135deg, var(--sd-navy) 0%, var(--sd-navy-light) 100%);
  min-height: 74px;
  padding: 0 32px;
  display: flex;
  align-items: center;
}
#header a:link, #header a:visited { color: #fff; }
.service-desk-brand a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--sd-blue); font-size: 13px; font-weight: 800; letter-spacing: .06em;
  box-shadow: 0 4px 14px rgba(59, 91, 253, .45);
}
.service-desk-brand strong, .service-desk-brand small { display: block; }
.service-desk-brand strong { font-size: 18px; letter-spacing: -.02em; }
.service-desk-brand small { margin-top: 1px; color: #aebcd6; font-size: 12px; }
#user-tools { margin-left: auto; font-size: 13px; }
#user-tools a { border-bottom: 1px solid transparent; }
#user-tools a:hover { border-bottom-color: currentColor; }

/* The sidebar "Start typing to filter…" quick-filter isn't needed with
   only two models in the nav — hide it (kept in the DOM so nav_sidebar.js
   still finds its element and doesn't error). */
#nav-filter { display: none; }

#content { max-width: 1440px; margin: 0 auto; padding: 32px; }

.module, .inline-group, .submit-row {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(19, 28, 51, .05);
  overflow: hidden;
}
.module h2, .module caption, .inline-group h2 {
  background: #fff; color: var(--sd-navy); font-size: 14px; font-weight: 750; padding: 18px 20px;
  border-bottom: 1px solid var(--sd-border);
}

div.breadcrumbs { background: #eaf0fb; color: #4d6082; padding: 12px 32px; }
div.breadcrumbs a { color: var(--sd-blue); }

/* Date hierarchy (year/month/day drill-down) — always list every day of the
   month (see _date_hierarchy_all_days in admin.py) instead of collapsing to
   the single selected day, and let the row wrap/scroll so a busy month with
   many days doesn't overflow the page. */
.toplinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.toplinks a {
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  color: var(--sd-muted);
  white-space: nowrap;
}
.toplinks a:hover { background: var(--sd-open-bg); color: var(--sd-blue-dark); }
.toplinks a.date-back { background: transparent; border-color: transparent; font-weight: 700; color: var(--sd-blue); }
.toplinks a.date-hierarchy-selected {
  background: var(--sd-blue);
  border-color: var(--sd-blue);
  color: #fff;
  font-weight: 750;
}
.toplinks a.date-hierarchy-selected:hover { background: var(--sd-blue-dark); color: #fff; }

table thead th { background: #f8faff; border-bottom: 1px solid var(--sd-border); color: var(--sd-navy); }
table tbody tr:hover { background: #f5f8ff; }

/* Priority / status badges (read-only, list view) */
.ticket-badge {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px;
  font-size: 11px; font-weight: 750; line-height: 1; white-space: nowrap; border: 1px solid transparent;
}
.priority-low { background: #e7f6ee; color: #167a43; border-color: #bfe9d2; }
.priority-medium { background: #fff3d8; color: #9a5b00; border-color: #f7dd9e; }
.priority-high { background: #ffeaeb; color: #ba2638; border-color: #f9c2c6; }

.status-open { background: var(--sd-open-bg); color: var(--sd-open-fg); border-color: var(--sd-open-border); }
.status-in_progress { background: var(--sd-progress-bg); color: var(--sd-progress-fg); border-color: var(--sd-progress-border); }
.status-resolved { background: var(--sd-resolved-bg); color: var(--sd-resolved-fg); border-color: var(--sd-resolved-border); }

/* Editable status <select>, colorized live by admin.js to match the badge palette */
select.status-select {
  appearance: auto;
  font-weight: 750;
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--sd-border);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
select.status-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(59, 91, 253, .18); }
select.status-select-open { background: var(--sd-open-bg); color: var(--sd-open-fg); border-color: var(--sd-open-border); }
select.status-select-in_progress { background: var(--sd-progress-bg); color: var(--sd-progress-fg); border-color: var(--sd-progress-border); }
select.status-select-resolved { background: var(--sd-resolved-bg); color: var(--sd-resolved-fg); border-color: var(--sd-resolved-border); }

/* Highlighted "Sprendimo eiga" panel on the change form */
fieldset.module.status-panel {
  background: linear-gradient(180deg, #f8f9ff 0%, #ffffff 55%);
  border: 1.5px solid #dbe2fb;
}
fieldset.module.status-panel > h2 {
  background: transparent;
  color: var(--sd-navy);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid #e3e8fb;
}
fieldset.module.status-panel .form-row { padding: 16px 20px; }
fieldset.module.status-panel select.status-select { min-width: 220px; }

/* Resolution ("Sprendimas") field — make it unmistakable */
.field-resolution { position: relative; padding-left: 22px !important; border-left: 4px solid var(--sd-blue); background: #f7f9ff; }
.field-resolution > label { font-size: 13px; font-weight: 750; color: var(--sd-navy); }
.field-resolution textarea {
  width: 100%;
  min-height: 150px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 10px;
  border: 1.5px solid #c9d4fb;
  padding: 12px;
  background: #fff;
}
.field-resolution textarea:focus { outline: none; border-color: var(--sd-blue); box-shadow: 0 0 0 3px rgba(59, 91, 253, .15); }

.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 8px; background: var(--sd-blue); border: none; padding: 10px 16px; font-weight: 700;
  transition: background-color .15s ease;
}
.button:hover, input[type=submit]:hover, .submit-row input:hover { background: var(--sd-blue-dark); }
.submit-row { background: #fff; padding: 16px; }
.submit-row input.default { background: var(--sd-blue); }

/* Filter sidebar — default Django styling barely stands out from the page
   background and non-selected options render as plain gray text with no
   visual affordance, which reads as "not clickable". Give it a real card
   surface and a clear hover/selected state. */
#changelist-filter {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(19, 28, 51, .05);
  overflow: hidden;
}
#changelist-filter h2 { background: #fff; color: var(--sd-navy); }
#changelist-filter details summary { color: var(--sd-navy); font-weight: 700; cursor: pointer; }
#changelist-filter a {
  padding: 5px 10px;
  border-radius: 7px;
  color: var(--sd-muted);
  cursor: pointer;
}
#changelist-filter a:hover,
#changelist-filter a:focus {
  background: var(--sd-open-bg);
  color: var(--sd-blue-dark) !important;
}
#changelist-filter li.selected { border-left-color: var(--sd-blue); }
#changelist-filter li.selected a { color: var(--sd-blue-dark); font-weight: 750; }

/* Sidebar: the default theme colors the "current" app label and highlighted
   model row pale yellow (#ffc), which is unreadable against the white
   sidebar — force our own readable colors here. */
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: var(--sd-blue-dark);
  font-weight: 750;
}
#nav-sidebar .current-model {
  background: var(--sd-open-bg);
  border-radius: 8px;
}
#nav-sidebar .current-model a:link,
#nav-sidebar .current-model a:visited {
  color: var(--sd-navy);
  font-weight: 700;
}
#nav-sidebar .module caption { color: var(--sd-muted); font-weight: 700; letter-spacing: .03em; }

/* Ticket image preview (replaces the unreadable raw base64 text field) */
.field-image_preview .readonly { line-height: 0; }
.ticket-image-preview {
  display: block;
  max-width: 320px;
  max-height: 320px;
  border-radius: 10px;
  border: 1px solid var(--sd-border);
  box-shadow: 0 3px 10px rgba(19, 28, 51, .08);
}

/* De-emphasize the raw UUID — useful for support reference, not the focus */
.field-id .readonly { font-family: var(--font-family-monospace, monospace); font-size: 12px; color: var(--sd-muted); }

@media (max-width: 767px) {
  #header { padding: 0 16px; }
  #content { padding: 20px 16px; }
}