/* ---------------------------------------------------------------------
   Order Management System — shared design tokens + component styles.
   Loaded once via admin/base_site.html, so it covers every staff portal
   (they all extend that file) plus the raw Django /admin/ and the login
   screen. Dark mode rides on Django's own toggle: the same [data-theme]
   attribute / prefers-color-scheme convention admin/js/theme.js already
   sets, so one button flips both Django's vars and these.
--------------------------------------------------------------------- */

:root {
  /* Brand — blue, matching the color already used throughout the app
     (snk-hamburger, dashboards, customer portal) and close to Django
     admin's own default --secondary. */
  --oms-brand: #2a6f9e;
  --oms-brand-dark: #1a3a6e;
  --oms-brand-tint: #eaf2ff;

  /* Fixed accent — same value in both themes. For solid buttons/badges/
     header bars that pair a colored fill with white text: unlike
     --oms-brand (which deliberately lightens in dark mode so blue text
     stays legible sitting directly on a dark page), a filled button
     carries its own background regardless of theme, so it must NOT
     lighten — a light fill would leave white text with poor contrast. */
  --oms-accent: #2a6f9e;
  --oms-accent-dark: #1a3a6e;

  /* Surfaces / text / borders */
  --oms-bg: #f4f6f8;
  --oms-surface: #ffffff;
  --oms-border: #dde4f0;
  --oms-border-soft: #e8ecf5;
  --oms-text: #1c2833;
  --oms-text-muted: #5d6d7e;
  --oms-text-faint: #8a96a3;

  /* Status */
  --oms-success: #1e8449;
  --oms-success-tint: #d5f5e3;
  --oms-warning: #9a6c0a;
  --oms-warning-tint: #fef3e2;
  --oms-danger: #c0392b;
  --oms-danger-tint: #fadbd8;
  --oms-info: #2471a3;
  --oms-info-tint: #d6eaf8;

  --oms-radius-sm: 6px;
  --oms-radius: 10px;
  --oms-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --oms-brand: #6fb0e0;
    --oms-brand-dark: #9cc9ec;
    --oms-brand-tint: rgba(111, 176, 224, 0.14);

    --oms-bg: #121212;
    --oms-surface: #1b1f27;
    --oms-border: #2f3742;
    --oms-border-soft: #262d38;
    --oms-text: #eeeeee;
    --oms-text-muted: #b7c0cc;
    --oms-text-faint: #8a96a3;

    --oms-success: #4caf7d;
    --oms-success-tint: rgba(76, 175, 125, 0.16);
    --oms-warning: #d9a441;
    --oms-warning-tint: rgba(217, 164, 65, 0.16);
    --oms-danger: #e07a6c;
    --oms-danger-tint: rgba(224, 122, 108, 0.16);
    --oms-info: #6fb0e0;
    --oms-info-tint: rgba(111, 176, 224, 0.16);

    --oms-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
}
html[data-theme="dark"] {
  --oms-brand: #6fb0e0;
  --oms-brand-dark: #9cc9ec;
  --oms-brand-tint: rgba(111, 176, 224, 0.14);

  --oms-bg: #121212;
  --oms-surface: #1b1f27;
  --oms-border: #2f3742;
  --oms-border-soft: #262d38;
  --oms-text: #eeeeee;
  --oms-text-muted: #b7c0cc;
  --oms-text-faint: #8a96a3;

  --oms-success: #4caf7d;
  --oms-success-tint: rgba(76, 175, 125, 0.16);
  --oms-warning: #d9a441;
  --oms-warning-tint: rgba(217, 164, 65, 0.16);
  --oms-danger: #e07a6c;
  --oms-danger-tint: rgba(224, 122, 108, 0.16);
  --oms-info: #6fb0e0;
  --oms-info-tint: rgba(111, 176, 224, 0.16);

  --oms-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------------
   Light polish on Django admin's own chrome — kept subtle so the form/
   changelist machinery it powers (fieldset.module.aligned, .results,
   .button, .messagelist, …) keeps working exactly as before, just with
   softer corners/shadows and full dark-mode participation.
--------------------------------------------------------------------- */

body { background: var(--oms-bg); }

/* Django's own admin CSS fixes <select> at a constant height (1.875rem)
   regardless of font-size. That's fine at its own default 0.8125rem, but
   this project's mobile styles bump select font-size to 16px (to stop iOS
   Safari auto-zooming on focus) without the box growing to match — so the
   option text overflows its own row and the bottom half gets clipped.
   Letting height grow with content fixes it at every screen size. */
select {
  height: auto;
  min-height: 1.875rem;
  line-height: 1.4;
}

.module, .card {
  border-radius: var(--oms-radius);
  box-shadow: var(--oms-shadow);
}

.button, input[type="submit"], input[type="button"], .submit-row input, a.button {
  border-radius: var(--oms-radius-sm) !important;
}

.messagelist li {
  border-radius: var(--oms-radius-sm);
}

/* ---------------------------------------------------------------------
   Reusable components — cards, badges, buttons — for custom portal
   pages (dashboards, list/detail views) that don't ride on Django's
   .module chrome.
--------------------------------------------------------------------- */

.card {
  background: var(--oms-surface);
  border: 1px solid var(--oms-border);
  padding: 20px 22px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--oms-border-soft);
  color: var(--oms-text-muted);
}
.badge-success { background: var(--oms-success-tint); color: var(--oms-success); }
.badge-warning { background: var(--oms-warning-tint); color: var(--oms-warning); }
.badge-danger  { background: var(--oms-danger-tint);  color: var(--oms-danger); }
.badge-info    { background: var(--oms-info-tint);    color: var(--oms-info); }

.btn, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--oms-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.87rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.btn { background: var(--oms-accent); color: #fff; }
.btn:hover { background: var(--oms-accent-dark); color: #fff; text-decoration: none; }
.btn-secondary { background: var(--oms-surface); color: var(--oms-text); border-color: var(--oms-border); }
.btn-secondary:hover { background: var(--oms-bg); text-decoration: none; }

/* ---------------------------------------------------------------------
   Hamburger nav drawer — shared by admin_portal, assistant_portal,
   technician_portal and super_admin_portal (each includes the markup
   in its own base.html usertools block; this is the single CSS source
   so it doesn't have to be duplicated four times, and now follows the
   theme instead of being hardcoded light-only).
--------------------------------------------------------------------- */

.snk-nav-wrap { display: flex; align-items: center; gap: 10px; }
.snk-username { font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.snk-hamburger {
  position: relative;
  background: var(--oms-accent);
  color: #fff;
  border: none;
  border-radius: var(--oms-radius-sm);
  padding: 7px 13px;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.snk-hamburger:hover { background: var(--oms-accent-dark); }
.snk-badge-dot {
  position: absolute; top: 5px; right: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--oms-danger);
  border: 1.5px solid var(--oms-accent);
}
.snk-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 9000; }
.snk-backdrop.open { display: block; }
.snk-drawer {
  position: fixed; top: 0; right: -300px; width: 260px; height: 100vh;
  background: var(--oms-surface);
  z-index: 9001;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
  transition: right 0.22s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
.snk-drawer.open { right: 0; }
.snk-drawer-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  background: var(--oms-accent);
  color: #fff;
  flex-shrink: 0;
}
.snk-drawer-hdr span { font-weight: 700; font-size: 0.95rem; }
.snk-close { background: transparent; border: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.snk-close:hover { opacity: 0.75; }
.snk-links { flex: 1; overflow-y: auto; padding: 4px 0; }
#snk-drawer .snk-links a:link, #snk-drawer .snk-links a:visited {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  color: var(--oms-text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 1px solid var(--oms-border-soft);
}
#snk-drawer .snk-links a:hover { background: var(--oms-brand-tint); color: var(--oms-text); }
#snk-drawer .snk-links a.snk-logout:link, #snk-drawer .snk-links a.snk-logout:visited { color: var(--oms-danger); font-weight: 600; }
#snk-drawer .snk-links a.snk-logout:hover { background: var(--oms-danger-tint); }
.snk-count {
  background: var(--oms-danger);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
#snk-drawer .snk-group { border-bottom: 1px solid var(--oms-border-soft); }
#snk-drawer .snk-group summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  color: var(--oms-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
#snk-drawer .snk-group summary::-webkit-details-marker { display: none; }
#snk-drawer .snk-group summary:hover { background: var(--oms-brand-tint); }
#snk-drawer .snk-group summary::after {
  content: '\25BE';
  font-size: 0.75rem;
  color: var(--oms-text-faint);
  transition: transform 0.15s ease;
}
#snk-drawer .snk-group[open] summary::after { transform: rotate(180deg); }
#snk-drawer .snk-group .snk-links a { padding-left: 30px; font-weight: 400; font-size: 0.87rem; background: var(--oms-bg); }

@media (max-width: 500px) {
  .snk-username { display: none; }
}