/* ==========================================================
   GS-WMS DJANGO ADMIN THEME
   Skydash-inspired | Light + Dark (Token-based)
   ========================================================== */

/* ==========================================================
   LIGHT MODE
   ========================================================== */

html[data-theme="light"],
:root {

  /* BRAND */
  --primary: #4B49AC;
  --secondary: #3F3D96;
  --accent: #98BDFF;
  --primary-fg: #ffffff;

  /* BODY */
  --body-bg: #F5F7FB;
  --body-fg: #2B2F33;
  --body-quiet-color: #6B7280;
  --body-loud-color: #000000;

  /* HEADER */
  --header-bg: var(--primary);
  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-link-color: #E9ECFF;

  /* BREADCRUMBS */
  --breadcrumbs-bg: var(--primary);
  --breadcrumbs-fg: #E9ECFF;
  --breadcrumbs-link-fg: #ffffff;

  /* LINKS */
  --link-fg: #4B49AC;
  --link-hover-color: #7978E9;
  --link-selected-fg: #3F3D96;

  /* UI */
  --hairline-color: #E3E6F0;
  --border-color: #D1D5DB;
  --darkened-bg: #EEF1FA;
  --selected-bg: #E6E8FF;
  --selected-row: #DDE2FF;

  /* BUTTONS */
  --button-fg: #ffffff;
  --button-bg: #4B49AC;
  --button-hover-bg: #3F3D96;
  --default-button-bg: #7978E9;
  --default-button-hover-bg: #5F5ED6;
  --delete-button-bg: #F3797E;
  --delete-button-hover-bg: #E45D63;

  /* OBJECT TOOLS */
  --object-tools-fg: #ffffff;
  --object-tools-bg: #4B49AC;
  --object-tools-hover-bg: #3F3D96;

  /* MESSAGES */
  --message-success-bg: #E6F4EA;
  --message-warning-bg: #FFF4CC;
  --message-error-bg: #FEE2E2;
}

/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"] {

  --primary: #7DA0FA;
  --secondary: #5F5ED6;
  --accent: #98BDFF;
  --primary-fg: #0F172A;

  --body-bg: #0F172A;
  --body-fg: #E5E7EB;
  --body-quiet-color: #9CA3AF;
  --body-loud-color: #FFFFFF;

  --header-bg: #020617;
  --header-color: #E5E7EB;
  --header-branding-color: #98BDFF;
  --header-link-color: #CBD5E1;

  --breadcrumbs-bg: #020617;
  --breadcrumbs-fg: #CBD5E1;
  --breadcrumbs-link-fg: #E5E7EB;

  --link-fg: #7DA0FA;
  --link-hover-color: #98BDFF;
  --link-selected-fg: #A5B4FC;

  --hairline-color: #1F2937;
  --border-color: #374151;
  --darkened-bg: #020617;
  --selected-bg: #1E293B;
  --selected-row: #1E40AF;

  --button-fg: #020617;
  --button-bg: #7DA0FA;
  --button-hover-bg: #98BDFF;
  --default-button-bg: #5F5ED6;
  --default-button-hover-bg: #7978E9;
  --delete-button-bg: #F3797E;
  --delete-button-hover-bg: #FB7185;

  --object-tools-fg: #020617;
  --object-tools-bg: #7DA0FA;
  --object-tools-hover-bg: #98BDFF;

  --message-success-bg: #064E3B;
  --message-warning-bg: #78350F;
  --message-error-bg: #7F1D1D;
}

/* ==========================================================
   OPTIONAL POLISH (SAFE OVERRIDES)
   ========================================================== */

/* Tables */
tr:hover {
  background-color: var(--selected-bg);
}

/* Sidebar active row */
#nav-sidebar .current-model,
#nav-sidebar .current-app {
  background: var(--selected-row);
  border-left: 4px solid var(--primary);
}

/* Cards */
.module,
.dashboard-module {
  border-radius: 8px;
}

/* Inputs */
input,
select,
textarea {
  border-radius: 4px;
}

/* Buttons inside table cells */
td .button {
  padding: 4px 10px;
  font-size: 0.75rem;
}

/* ==========================================================
   DASHBOARD — KPI STAT CARDS
   ========================================================== */

.gswms-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

.gswms-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--hairline-color);
  background: var(--darkened-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow .15s;
}

.gswms-kpi-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.gswms-kpi-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gswms-kpi-icon svg {
  width: 20px;
  height: 20px;
}

.gswms-kpi-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gswms-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--body-loud-color);
  letter-spacing: -.02em;
}

.gswms-kpi-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--body-quiet-color);
  margin-top: 3px;
  white-space: normal;   /* allow wrap so labels don't truncate */
  line-height: 1.3;
}

/* Colour variants */
.gswms-kpi-purple .gswms-kpi-icon { background: #EDE9FE; color: #6D28D9; }
.gswms-kpi-blue   .gswms-kpi-icon { background: #DBEAFE; color: #1D4ED8; }
.gswms-kpi-teal   .gswms-kpi-icon { background: #CCFBF1; color: #0F766E; }
.gswms-kpi-green  .gswms-kpi-icon { background: #DCFCE7; color: #15803D; }
.gswms-kpi-orange .gswms-kpi-icon { background: #FFEDD5; color: #C2410C; }
.gswms-kpi-indigo .gswms-kpi-icon { background: #E0E7FF; color: #4338CA; }

html[data-theme="dark"] .gswms-kpi-purple .gswms-kpi-icon { background: #3B1F6B; color: #C4B5FD; }
html[data-theme="dark"] .gswms-kpi-blue   .gswms-kpi-icon { background: #1E3A5F; color: #93C5FD; }
html[data-theme="dark"] .gswms-kpi-teal   .gswms-kpi-icon { background: #134E4A; color: #5EEAD4; }
html[data-theme="dark"] .gswms-kpi-green  .gswms-kpi-icon { background: #14532D; color: #86EFAC; }
html[data-theme="dark"] .gswms-kpi-orange .gswms-kpi-icon { background: #431407; color: #FDBA74; }
html[data-theme="dark"] .gswms-kpi-indigo .gswms-kpi-icon { background: #1E1B4B; color: #A5B4FC; }

/* ==========================================================
   DASHBOARD — CHART CARDS
   ========================================================== */

.gswms-charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
  /* prevent grid children from blowing out the container */
  min-width: 0;
}

@media (max-width: 1100px) {
  .gswms-charts-row { grid-template-columns: 1fr; }
}

.gswms-chart-card {
  background: var(--darkened-bg);
  border: 1px solid var(--hairline-color);
  border-radius: 10px;
  padding: 18px 20px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  /* stop individual cards from overflowing the grid track */
  min-width: 0;
  overflow: hidden;
}

.gswms-chart-title {
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--body-quiet-color);
}

/* Ensure Chart.js canvases never blow out their container */
.gswms-chart-card canvas {
  max-width: 100%;
  height: auto !important;
}

/* ==========================================================
   DASHBOARD — SECTION HEADING & LABELS
   ========================================================== */

.gswms-section-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--body-quiet-color);
  margin: 8px 0 10px;
  padding-left: 2px;
}

.gswms-section-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 8px 12px;
  background: var(--selected-bg);
  border-radius: 6px 6px 0 0;
}

/* ==========================================================
   SIDEBAR — QUICK ACTIONS
   ========================================================== */

.gswms-nav-quick-actions table caption {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  /* White text on purple background — matches Warehouse Setup etc. */
  color: var(--primary-fg);
  padding: 6px 10px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gswms-nav-qa-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--link-fg);
  border-radius: 5px;
  text-decoration: none;
  transition: background .12s;
}

.gswms-nav-qa-link:hover {
  background: var(--selected-bg);
  color: var(--link-hover-color);
}

.gswms-nav-qa-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* ==========================================================
   SIDEBAR — SECTION ICONS
   ========================================================== */

#nav-sidebar .module table caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* ==========================================================
   SIDEBAR — COLLAPSIBLE SECTIONS
   ========================================================== */

/* The whole caption is the toggle handle. */
#nav-sidebar .module > table > caption {
  cursor: pointer;
  user-select: none;
}

.gswms-nav-caption-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gswms-nav-chevron {
  display: inline-flex;
  align-items: center;
  transition: transform .15s ease;
}

.gswms-nav-chevron svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
}

/* Collapsed: chevron points right and the model rows are hidden. */
.module.collapsed .gswms-nav-chevron {
  transform: rotate(-90deg);
}

.module.collapsed > table > tbody > tr,
.module.collapsed > table > tr {
  display: none;
}

/* When the quick-filter is active, a collapsed section still shows its matching
   rows: Django sets a match's inline display to '' and a non-match's to 'none',
   so reverting here lets those per-row inline values take effect. */
#nav-sidebar.filtering .module.collapsed > table > tbody > tr,
#nav-sidebar.filtering .module.collapsed > table > tr {
  display: revert;
}

/* ==========================================================
   SIDEBAR — NESTED SUBGROUP ("mega menu", e.g. Locations)
   ========================================================== */

.gswms-nav-subgroup-header > th {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-weight: 600;
}

.gswms-nav-subgroup-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gswms-nav-subgroup-header .gswms-nav-chevron {
  transition: transform .15s ease;
}

.gswms-nav-subgroup-header.collapsed .gswms-nav-chevron {
  transform: rotate(-90deg);
}

/* Indent the nested items so the hierarchy reads clearly. */
.gswms-nav-subitem > th {
  padding-left: 28px;
}

/* Collapsed subgroup hides its children. */
.gswms-nav-subitem.is-collapsed {
  display: none;
}

/* Let the quick-filter reveal matching children even when the group is closed. */
#nav-sidebar.filtering .gswms-nav-subitem.is-collapsed {
  display: revert;
}

/* ==========================================================
   CHANGELIST — HORIZONTAL FILTER BAR
   filter_bar.js relocates #changelist-filter under the search box; these rules
   render it as a horizontal chip bar instead of the default right-hand column.
   ========================================================== */

/* With the filter moved inside, the form container spans the full width. */
#changelist.gswms-has-filter-bar .changelist-form-container {
  width: 100%;
  max-width: 100%;
}

#changelist-filter.gswms-filter-bar {
  position: static;
  width: auto;
  max-height: none;
  overflow: visible;
  margin: 0 0 14px;
  padding: 9px 14px;
  background: var(--darkened-bg);
  border: 1px solid var(--hairline-color);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 26px;
}

/* "FILTER" heading + "Clear all filters" become small inline labels. */
#changelist-filter.gswms-filter-bar > h2,
#changelist-filter.gswms-filter-bar > h3 {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--body-quiet-color);
  align-self: center;
}

#changelist-filter.gswms-filter-bar > h3 a {
  color: var(--link-fg);
  text-decoration: none;
}

/* Each filter group sits inline: label followed by its option chips. */
#changelist-filter.gswms-filter-bar details {
  margin: 0;
  border: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#changelist-filter.gswms-filter-bar summary {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--body-quiet-color);
  cursor: default;
  list-style: none;
  white-space: nowrap;
}

/* No disclosure triangle — groups stay open inside the bar. Django draws the
   arrow with a summary::before "↓"; blank it out along with the native marker. */
#changelist-filter.gswms-filter-bar summary::-webkit-details-marker {
  display: none;
}

#changelist-filter.gswms-filter-bar summary::marker {
  content: "";
}

#changelist-filter.gswms-filter-bar summary::before {
  content: "";
  display: none;
}

/* Options become a wrapped row of chips. */
#changelist-filter.gswms-filter-bar details ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#changelist-filter.gswms-filter-bar details li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#changelist-filter.gswms-filter-bar details li a {
  display: inline-block;
  padding: 2px 11px;
  border-radius: 999px;
  border: 1px solid var(--hairline-color);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--link-fg);
  text-decoration: none;
  white-space: nowrap;
}

#changelist-filter.gswms-filter-bar details li a:hover {
  background: var(--selected-bg);
}

#changelist-filter.gswms-filter-bar details li.selected a {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
  font-weight: 600;
}

.gswms-nav-section-icon {
  display: inline-flex;
  align-items: center;
  opacity: 1;
}

.gswms-nav-section-icon svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
}

/* ==========================================================
   DASHBOARD RIGHT SIDEBAR (#content-related)
   ========================================================== */

/* Stick the sidebar to the top on tall viewports */
#content-related {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ==========================================================
   DASHBOARD — SIDEBAR QUICK ACTIONS (index page)
   ========================================================== */

.gswms-quick-actions {
  margin-bottom: 12px;
}

/* Remove ALL default bullet markers Django admin might inject */
.gswms-qa-list,
.gswms-qa-list li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.gswms-qa-list li::before,
.gswms-qa-list li::after {
  display: none !important;
  content: none !important;
}

.gswms-qa-list {
  padding: 6px 10px 10px;
}

.gswms-qa-list li {
  margin-bottom: 2px;
}

.gswms-qa-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--link-fg);
  border-radius: 6px;
  text-decoration: none;
  transition: background .12s;
}

.gswms-qa-link:hover {
  background: var(--selected-bg);
  color: var(--link-hover-color);
}

.gswms-qa-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* ==========================================================
   RESPONSIVE OVERRIDES
   ========================================================== */

/* Medium screens: KPI grid goes to 3 columns, charts stack */
@media (max-width: 1200px) {
  .gswms-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Small screens: sidebar drops below content, full-width layout */
@media (max-width: 767px) {
  .gswms-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #content-related {
    position: static;
    max-height: none;
    float: none;
    width: 100%;
    margin-top: 16px;
  }
}

/* Extra small: single column KPI cards */
@media (max-width: 480px) {
  .gswms-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================
   USER ADMIN — MENU PERMISSION GRID
   ========================================================== */

.gswms-perm-matrix {
  max-width: 720px;
  border: 1px solid var(--hairline-color);
  border-radius: 8px;
  overflow: hidden;
}

.gswms-perm-matrix table {
  width: 100%;
  border-collapse: collapse;
}

.gswms-perm-matrix th,
.gswms-perm-matrix td {
  padding: 6px 12px;
  font-size: 0.82rem;
}

.gswms-perm-matrix thead th {
  background: var(--primary);
  color: var(--primary-fg);
  text-align: center;
  font-weight: 600;
}

.gswms-perm-matrix thead th.gswms-perm-item {
  text-align: left;
}

.gswms-perm-matrix .gswms-perm-action {
  text-align: center;
  width: 64px;
}

.gswms-perm-matrix tbody th.gswms-perm-item {
  text-align: left;
  font-weight: 500;
  padding-left: 24px;
}

.gswms-perm-matrix tr.gswms-perm-section th {
  background: var(--darkened-bg);
  text-align: left;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--body-quiet-color);
  padding-left: 12px;
}

.gswms-perm-matrix tbody tr:not(.gswms-perm-section):hover {
  background: var(--selected-bg);
}

.gswms-perm-matrix input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
}

.gswms-perm-matrix .gswms-perm-na {
  color: var(--border-color);
}

/* Help Center article body (helpcenter app, GitHub issue #22). Reuses the same
   admin CSS variables as the rest of this theme, so it reads correctly in
   light and dark mode without a separate stylesheet. */
.help-article {
  max-width: 860px;
}

.help-article table {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
}

.help-article table th,
.help-article table td {
  border: 1px solid var(--border-color);
  padding: 6px 10px;
}

.help-article table th {
  background: var(--darkened-bg);
}

.help-article code {
  font-family: monospace;
  background: var(--darkened-bg);
  padding: 0 3px;
  border-radius: 3px;
}

.help-article pre code {
  display: block;
  padding: 10px;
  overflow-x: auto;
}

.help-article blockquote {
  border-left: 3px solid var(--primary);
  margin-left: 0;
  padding-left: 12px;
  color: var(--body-quiet-color);
}

/* ==========================================================
   LINKS STYLED AS BUTTONS (#46)
   Admin's `a:link, a:visited` (specificity 0,1,1) outranks a page's
   `.btn-primary` (0,1,0), so a link with a button class took the link
   colour. On the upload pages that is the button's own background: a
   solid block with no visible label. These selectors (0,2,1) win back.
   ========================================================== */

a.btn-primary:link,
a.btn-primary:visited {
  color: var(--button-fg, #ffffff);
}

a.btn-success:link,
a.btn-success:visited {
  color: #ffffff;
}

/* ==========================================================
   PAGE HELP BUTTON (#65)
   Right end of the breadcrumb bar on every admin page
   ========================================================== */

.gswms-breadcrumbs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--breadcrumbs-bg);
}

.gswms-breadcrumbs-bar > nav {
  flex: 1 1 auto;
  min-width: 0;
}

.gswms-page-help,
.gswms-page-help:link,
.gswms-page-help:visited {
  margin: 6px 40px 6px auto;
  padding: 4px 12px;
  border: 1px solid var(--breadcrumbs-link-fg);
  border-radius: 999px;
  color: var(--breadcrumbs-link-fg);
  font-size: 0.8125rem;
  white-space: nowrap;
  text-decoration: none;
}

.gswms-page-help:hover,
.gswms-page-help:focus {
  background: var(--breadcrumbs-link-fg);
  color: var(--breadcrumbs-bg);
  text-decoration: none;
}

@media (max-width: 767px) {
  .gswms-page-help { margin-right: 15px; }
}

@media print {
  .gswms-page-help { display: none; }
}