/* =========================================================================
   oops-design-system.css — overlay stylesheet
   Drop this AFTER vuexy/css/rtl/core.css and the skin CSS in _Layout.cshtml.
   It does not replace Vuexy; it overlays tokenised values so future
   mockups (and these Razor views) stay in sync with the design system.

   Destination in the repo:
     OperationsSystem.Web/wwwroot/css/oops-design-system.css

   Include in Views/Shared/_Layout.cshtml AFTER the existing theme CSS:
     <link rel="stylesheet" href="~/css/oops-design-system.css" />

   SPECIFICITY NOTE — every visible-property rule is prefixed with
   `[data-skin]` so it matches any skin (default / coreui / military) at
   specificity (0,2,0). This ties the overlay with theme-coreui's scoped
   rules, and since the overlay loads later, it wins.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root,
[data-skin] {
  /* Core palette — these mirror colors_and_type.css in the design system */
  --ods-primary:        #7367F0;
  --ods-primary-hover:  #685dd8;
  --ods-primary-subtle: #efeafc;
  --ods-success: #28C76F;
  --ods-info:    #00BAD1;
  --ods-warning: #FF9F43;
  --ods-danger:  #FF4C51;

  --ods-fg-1: #5d596c;
  --ods-fg-2: #6f6b7d;
  --ods-fg-muted: #a5a3ae;
  --ods-border: #dbdade;
  --ods-surface-1: #f8f7fa;
  --ods-surface-2: #f5f5f9;

  --ods-font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ods-font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ods-radius: 6px;
  --ods-radius-xl: 12px;
  --ods-shadow-sm: 0 1px 3px 0 rgba(37,43,54,.07);
  --ods-shadow:    0 2px 8px 0 rgba(37,43,54,.1);
  --ods-shadow-lg: 0 4px 16px 0 rgba(37,43,54,.12);
}

/* Default skin binds Bootstrap vars to the ODS palette.
   Coreui + military skins keep their own --bs-primary etc. */
[data-skin="default"] {
  --bs-primary: var(--ods-primary);
  --bs-primary-rgb: 115, 103, 240;
  --bs-success: var(--ods-success);
  --bs-info:    var(--ods-info);
  --bs-warning: var(--ods-warning);
  --bs-danger:  var(--ods-danger);
  --bs-body-font-family: var(--ods-font-sans);
  --bs-body-color: var(--ods-fg-1);
  --bs-body-bg: var(--ods-surface-1);
  --bs-border-color: var(--ods-border);
  --bs-border-radius: var(--ods-radius);
}

/* Fonts: ensure the design-system stack wins over Vuexy's default.
   Military skin uses JetBrains Mono as its sans — don't override there. */
[data-skin="default"] html,
[data-skin="default"] body,
[data-skin="default"] .layout-wrapper,
[data-skin="default"] .menu,
[data-skin="default"] .navbar,
[data-skin="coreui"] body,
[data-skin="coreui"] .layout-wrapper,
[data-skin="coreui"] .menu,
[data-skin="coreui"] .navbar {
  font-family: var(--ods-font-sans) !important;
}

/* Monospace surfaces — AWB, HAWB, refs, KPI numbers */
[data-skin] .mono,
[data-skin] .font-monospace,
[data-skin] code,
[data-skin] kbd,
[data-skin] samp,
[data-skin] td.awb,
[data-skin] .text-awb,
[data-skin] .reference-code {
  font-family: var(--ods-font-mono) !important;
  letter-spacing: 0.02em;
}

/* --- Buttons -------------------------------------------------------- */
[data-skin] .btn { border-radius: var(--ods-radius); font-weight: 600; letter-spacing: 0; }

[data-skin="default"] .btn-primary {
  background: var(--ods-primary);
  border-color: var(--ods-primary);
  box-shadow: 0 2px 4px rgba(115,103,240,.4);
}
[data-skin="default"] .btn-primary:hover,
[data-skin="default"] .btn-primary:focus {
  background: var(--ods-primary-hover);
  border-color: var(--ods-primary-hover);
}
[data-skin="default"] .btn-outline-primary {
  color: var(--ods-primary);
  border-color: var(--ods-primary);
}
[data-skin="default"] .btn-outline-primary:hover {
  background: var(--ods-primary);
  color: #fff;
}
[data-skin="default"] .btn-label-primary {
  background: var(--ods-primary-subtle);
  color: var(--ods-primary);
  border-color: transparent;
}

/* --- Cards ---------------------------------------------------------- */
[data-skin="default"] .card {
  border: 1px solid var(--ods-border);
  border-radius: var(--ods-radius);
  box-shadow: var(--ods-shadow);
}
[data-skin="default"] .card-header {
  border-bottom: 1px solid var(--ods-border);
  font-weight: 600;
}
[data-skin="coreui"] .card { box-shadow: none; }
[data-skin="military"] .card {
  background: #111;
  border-color: #1e1e1e;
  color: #d4d4d8;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* --- Form controls -------------------------------------------------- */
[data-skin="default"] .form-control,
[data-skin="default"] .form-select {
  border-radius: var(--ods-radius);
  border-color: var(--ods-border);
  color: var(--ods-fg-1);
}
[data-skin="default"] .form-control:focus,
[data-skin="default"] .form-select:focus {
  border-color: var(--ods-primary);
  box-shadow: 0 0 0 .15rem rgba(115,103,240,.25);
}

/* --- Tables --------------------------------------------------------- */
[data-skin="default"] .table thead th,
[data-skin="coreui"] .table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ods-fg-2);
  background: var(--ods-surface-2);
  border-bottom: 1px solid var(--ods-border);
}
/* Paint the hover on the cells (matches Bootstrap default), not on the
   row — putting it on the row caused the highlight to bleed past the
   table's right edge in nested layouts (accordion in card-body in card). */
[data-skin="default"] .table-hover tbody tr:hover,
[data-skin="coreui"] .table-hover tbody tr:hover { cursor: pointer; }
[data-skin="default"] .table-hover tbody tr:hover > *,
[data-skin="coreui"] .table-hover tbody tr:hover > * { background-color: #f3f4f7; }

/* --- Badges --------------------------------------------------------- */
[data-skin="default"] .badge,
[data-skin="coreui"] .badge { border-radius: var(--ods-radius-sm, 4px); font-weight: 600; letter-spacing: 0; }
[data-skin="default"] .bg-label-primary { background: var(--ods-primary-subtle) !important; color: var(--ods-primary) !important; }
[data-skin="default"] .bg-label-success,
[data-skin="coreui"] .bg-label-success { background: #dcf7e6 !important; color: #1f9d58 !important; }
[data-skin="default"] .bg-label-info,
[data-skin="coreui"] .bg-label-info    { background: #d4f4f8 !important; color: #0092a3 !important; }
[data-skin="default"] .bg-label-warning,
[data-skin="coreui"] .bg-label-warning { background: #ffe9d3 !important; color: #cc7a1f !important; }
[data-skin="default"] .bg-label-danger,
[data-skin="coreui"] .bg-label-danger  { background: #ffdbdc !important; color: #d63a3e !important; }

/* --- Sidebar menu (default skin only — each skin styles its own menu) */
[data-skin="default"] .menu-vertical .menu-item.active > .menu-link {
  background: linear-gradient(72.47deg, var(--ods-primary) 0%, rgba(115,103,240,.7) 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(115,103,240,.3);
}

/* --- KPI "icon tile" (Vuexy avatar pattern) ------------------------- */
[data-skin] .avatar-initial.bg-label-primary,
[data-skin] .avatar-initial.bg-label-success,
[data-skin] .avatar-initial.bg-label-info,
[data-skin] .avatar-initial.bg-label-warning,
[data-skin] .avatar-initial.bg-label-danger {
  border-radius: var(--ods-radius);
  font-weight: 600;
}

/* --- Mobile (scan-header on warehouse PWA) -------------------------- */
[data-skin] .scan-header {
  background: var(--ods-primary);
  color: #fff;
  padding: 16px 18px 18px;
  border-radius: 0 0 15px 15px;
}
[data-skin] .scan-header .title { font-weight: 700; letter-spacing: 0; }

/* --- Partials (Views/Shared/_Partials) -----------------------------
   These classes are introduced by the design-system itself; no theme
   overrides them, so a single [data-skin] prefix is enough. */
[data-skin] .ods-page-header { padding-bottom: .75rem; border-bottom: 1px solid var(--ods-border); }
[data-skin] .ods-page-header h4 { font-size: 1.375rem; }
[data-skin] .ods-page-header .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--ods-fg-muted); }

[data-skin] .ods-kpi-card { border: 1px solid var(--ods-border); box-shadow: var(--ods-shadow-sm); transition: box-shadow .15s ease; }
[data-skin] .ods-kpi-card:hover { box-shadow: var(--ods-shadow); }
[data-skin] .ods-kpi-card h3 { font-size: 1.625rem; letter-spacing: -.01em; }

[data-skin] .ods-filter-bar { border: 1px solid var(--ods-border); }
[data-skin] .ods-filter-bar .form-label { font-size: .8125rem; font-weight: 500; color: var(--ods-fg-2); margin-bottom: .25rem; }

[data-skin] .ods-status-badge { padding: .3em .55em; border-radius: var(--ods-radius); }

[data-skin] .ods-empty-state .avatar-xl { width: 64px; height: 64px; }
[data-skin] .ods-empty-state .avatar-xl .avatar-initial { font-size: 1.75rem; }

/* --- Truck availability dot (Collection Planning Tracking/Index/Calendar) --- */
@keyframes truck-available-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}
.truck-available-dot {
  animation: truck-available-pulse 1.2s ease-in-out infinite;
}

/* --- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}