/* ==========================================================================
   La Douceur — brand theme
   Tokens derived from ladouceur.nl (warm off-white ground, near-black
   headings, muted gray body text, black CTAs, Roboto, uppercase
   letter-spaced nav). Body/data text is darkened slightly versus the
   marketing site's literal gray for WCAG AA contrast on dense data screens.
   ========================================================================== */

:root {
  --ld-bg: #f0efea;
  --ld-surface: #ffffff;
  --ld-surface-alt: #f7f6f2;
  --ld-text: #2f2f2f;
  --ld-text-muted: #62615d;
  --ld-heading: #333333;
  --ld-accent: #000000;
  --ld-accent-hover: #2b2b2b;
  --ld-border: #dedad0;
  --ld-border-strong: #c6c1b6;
  --ld-focus: #1a5fd6;
  --ld-radius: 6px;
  --ld-radius-sm: 4px;

  --ld-success: #2f6b46;
  --ld-success-bg: #e5f0e8;
  --ld-warning: #8a5a12;
  --ld-warning-bg: #f7ecd9;
  --ld-danger: #a3352f;
  --ld-danger-bg: #f6e4e2;
  --ld-info: #2a5f8a;
  --ld-info-bg: #e4eef5;
  --ld-neutral: #55524b;
  --ld-neutral-bg: #eae8e1;

  --bs-body-font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  --bs-body-color: var(--ld-text);
  --bs-body-bg: var(--ld-bg);
  --bs-link-color: var(--ld-text);
  --bs-link-hover-color: var(--ld-accent);
  --bs-border-color: var(--ld-border);
  --bs-primary: #000000;
  --bs-primary-rgb: 0, 0, 0;
}

/* Explicit, not just via --bs-body-font-family: Bootstrap's compiled CSS hardcodes its own font
   stack on several components (buttons, form controls, dropdowns) rather than reading the custom
   property everywhere — same class of override-doesn't-cascade issue as the button-color fix
   above. Setting font-family directly and letting it inherit is more reliable than the variable. */
html {
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
}

body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.dropdown-item {
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
}

body {
  background-color: var(--ld-bg);
  color: var(--ld-text);
  font-weight: 400;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ld-heading);
  font-weight: 300;
  letter-spacing: 0.01em;
}

.page-title {
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--ld-heading);
  margin-bottom: 0.25rem;
}

.text-muted-ld {
  color: var(--ld-text-muted) !important;
}

a {
  color: var(--ld-text);
  text-decoration: none;
}
a:hover {
  color: var(--ld-accent);
}

/* Animated underline reveal on hover/active — matches ladouceur.nl's own link/nav treatment: a
   thin line grows in from the left (via scaleX) instead of a static text-decoration underline.
   Applied to plain links site-wide (nav links included, since they're plain <a> tags too) but not
   to filled/outline buttons, dropdown items, pagination links, the logo, or status badges — those
   have their own established hover treatments. */
a:not(.btn-primary):not(.btn-outline-primary):not(.dropdown-item):not(.page-link):not(.ld-brand-center):not(.status-badge):not(.kpi-card):not(.filter-chip) {
  position: relative;
  text-decoration: none;
}
a:not(.btn-primary):not(.btn-outline-primary):not(.dropdown-item):not(.page-link):not(.ld-brand-center):not(.status-badge):not(.kpi-card):not(.filter-chip)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  border-bottom: 1.5px solid currentColor;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.3s ease-out;
  pointer-events: none;
}
a:not(.btn-primary):not(.btn-outline-primary):not(.dropdown-item):not(.page-link):not(.ld-brand-center):not(.status-badge):not(.kpi-card):not(.filter-chip):hover::after,
a:not(.btn-primary):not(.btn-outline-primary):not(.dropdown-item):not(.page-link):not(.ld-brand-center):not(.status-badge):not(.kpi-card):not(.filter-chip).active::after {
  transform: scaleX(1);
}
/* Full-width stacked mobile menu rows use color/weight for active+hover state (matches the
   dividers between rows) rather than the underline, which would look out of place there. */
.ld-mobile-links .nav-link::after {
  display: none;
}

/* Focus visibility: brand black doesn't stand out as a ring, so keyboard
   focus uses a clearly visible blue outline regardless of element color. */
/*a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ld-focus);
  outline-offset: 2px;
}*/
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--ld-border-strong);
  box-shadow: 0 0 0 0.2rem rgba(26, 95, 214, 0.18);
}

/* ---- Brand top navigation — centered logo flanked by nav groups, matching ladouceur.nl ---- */
.ld-navbar {
  background-color: var(--ld-surface);
  border-bottom: 1px solid var(--ld-border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}
/* Compensates for the fixed nav so page content doesn't render underneath it — applied to the
   content wrapper only on pages where the nav is actually shown (see _Layout.cshtml). */
.ld-has-fixed-nav {
  padding-top: 35px;
}
/* Sticky-footer layout: the wrap fills the remaining body height (body is a flex column, see
   above) and main is allowed to grow, so the version footer always sits at the bottom of the
   viewport even when a page's content is too short to reach it — without the footer itself
   being position:fixed. */
.ld-page-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ld-page-wrap > main {
  flex: 1 0 auto;
}
.ld-navbar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  max-width: 1400px;
  margin: 0 auto;
}
.ld-nav-col-left {
  justify-self: start;
  display: flex;
  align-items: center;
}
.ld-nav-col-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.ld-brand-center {
  justify-self: center;
  display: block;
  line-height: 0;
}
.ld-brand-center img {
  height: 30px;
  width: auto;
  display: block;
}
.ld-nav-group {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}
.ld-nav-group .nav-link {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ld-text);
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
}
.ld-nav-group .nav-link.active,
.ld-nav-group .nav-link:hover {
  color: var(--ld-accent);
  font-weight: 500;
}
.ld-nav-group .nav-link::after {
  bottom: -2px;
}

/* Mobile hamburger (three plain bars, no Bootstrap navbar-toggler-icon SVG needed) */
.ld-nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  padding: 0;
}
.ld-nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ld-heading);
  border-radius: 1px;
}

.ld-mobile-panel {
  border-top: 1px solid var(--ld-border);
  padding: 1rem;
  background-color: var(--ld-surface);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.ld-mobile-links {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.ld-mobile-links li + li {
  border-top: 1px solid var(--ld-border);
}
.ld-mobile-links .nav-link {
  display: block;
  padding: 0.65rem 0.25rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ld-text);
}
.ld-mobile-links .nav-link.active {
  color: var(--ld-accent);
  font-weight: 500;
}
.ld-mobile-user {
  padding-top: 0.5rem;
}

/* ---- Environment label (DEV/TEST only, never shown on the real production domain — see
   _Layout.cshtml) — styled like a sewn-in garment care label: dashed "stitched" border, a
   slight tilt, hanging in a fixed corner over the content. Doesn't intercept clicks. */
.env-label {
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 2000;
  padding: 0.3rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  border: 1px dashed rgba(255, 255, 255, 0.75);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transform: rotate(-3deg);
  pointer-events: none;
}
.env-label-dev {
  background-color: #b3261e;
}
.env-label-test {
  background-color: #c96a17;
}

/* ---- User avatar + account dropdown ---- */
.ld-avatar-btn {
  border: none;
  background: transparent;
  padding: 0;
  line-height: 0;
}
.ld-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ld-heading);
  flex-shrink: 0;
}
.ld-avatar-lg {
  width: 56px;
  height: 56px;
}
.ld-avatar-lg .ld-avatar-initials {
  font-size: 1.1rem;
}
.ld-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld-avatar-initials {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.ld-user-menu {
  margin-right: 20px;
}
.ld-user-menu .dropdown-menu {
  min-width: 220px;
  font-size: 0.85rem;
  border-color: var(--ld-border);
}

/* ---- Version footer (normal document flow, not fixed) ---- */
.ld-version-footer {
  text-align: right;
  padding: 1rem 0.25rem 0.5rem;
  font-size: 0.72rem;
}
.ld-version-footer a {
  color: var(--ld-text-muted);
}
.ld-version-footer a:hover {
  color: var(--ld-accent);
}

/* ---- Buttons — matches ladouceur.nl's solid CTA (black fill, radius 4px, generous padding) ---- */
.btn {
  border-radius: var(--ld-radius-sm);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 0.6rem 1.1rem;
}
.btn-sm {
  padding: 0.35rem 0.75rem;
}
.btn-primary {
  background-color: var(--ld-accent);
  border-color: var(--ld-accent);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ld-accent-hover);
  border-color: var(--ld-accent-hover);
  color: #fff;
}
.btn-outline-primary {
  color: var(--ld-accent);
  border-color: var(--ld-accent);
}
.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary {
  background-color: var(--ld-accent) !important;
  border-color: var(--ld-accent) !important;
  color: #fff !important;
}
.btn-link {
  color: var(--ld-text);
}

/* Bootstrap's compiled CSS hardcodes its blue --bs-primary in several component
   states that a root-level custom property override doesn't reach — pin them to brand black. */
.form-check-input:checked {
  background-color: var(--ld-accent);
  border-color: var(--ld-accent);
}
.form-switch .form-check-input:checked {
  background-color: var(--ld-accent);
  border-color: var(--ld-accent);
}
.page-item.active .page-link {
  background-color: var(--ld-accent);
  border-color: var(--ld-accent);
  color: #fff;
}
.page-link {
  color: var(--ld-text);
}
.page-link:hover {
  color: var(--ld-accent);
}

/* ---- Cards / surfaces ---- */
.card {
  background-color: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius);
}
.card-header {
  background-color: var(--ld-surface);
  border-bottom: 1px solid var(--ld-border);
  font-weight: 500;
}

/* Bootstrap's row-cols-* utility only ships up to 6 columns; a 7th KPI card needs a custom rule
   to fit all of them on one row on screens wide enough (>=1200px). */
@media (min-width: 1200px) {
  .kpi-row {
    display: flex;
    flex-wrap: nowrap;
  }
  .kpi-row > .col {
    flex: 1 1 0;
    max-width: none;
  }
}

.kpi-card {
  display: block;
  background-color: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius);
  padding: 0.85rem 0.9rem;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover {
  border-color: var(--ld-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  color: inherit;
}
.kpi-card .kpi-value {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--ld-heading);
  line-height: 1.1;
  white-space: nowrap;
}
.kpi-card .kpi-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ld-text-muted);
}
.kpi-card.kpi-warning .kpi-value {
  color: var(--ld-warning);
}

/* ---- Tables ---- */
.table {
  --bs-table-bg: var(--ld-surface);
  --bs-table-border-color: var(--ld-border);
  --bs-table-striped-bg: var(--ld-surface-alt);
  vertical-align: middle;
}
.table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ld-text-muted);
  border-bottom-width: 1px;
  font-weight: 500;
  white-space: nowrap;
}
.table-responsive {
  border-radius: var(--ld-radius);
}
.table tbody tr:hover > * {
  background-color: var(--ld-surface-alt);
}
.table tbody tr[data-detail-url],
.table tbody tr[data-navigate-url] {
  cursor: pointer;
}
/* Marks the row whose details are currently showing in the offcanvas (see enableRowDetailOffcanvas
   in site.js) — an inset left bar rather than border-left, so it doesn't shift column widths. */
.table tbody tr.row-detail-active > * {
  background-color: var(--ld-surface-alt);
  box-shadow: inset 3px 0 0 var(--ld-accent);
}
.table thead th.sortable-col {
  cursor: pointer;
  user-select: none;
}
.table thead th.sortable-col:hover {
  color: var(--ld-accent);
}
.table thead th.sortable-col:focus-visible {
  outline: 2px solid var(--ld-accent);
  outline-offset: -2px;
}
.sort-indicator {
  display: inline-block;
}
@media print {
  .table tbody tr:hover > * {
    background-color: transparent;
  }
}

/* ---- Removable active-filter chips (Orders list) ---- */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  background-color: var(--ld-neutral-bg);
  color: var(--ld-text);
  border: 1px solid var(--ld-border);
  border-radius: 999px;
  text-decoration: none;
  line-height: 1.4;
}
.filter-chip span {
  font-weight: 700;
}
.filter-chip:hover {
  background-color: var(--ld-danger-bg);
  color: var(--ld-danger);
  border-color: var(--ld-danger);
}

/* ---- Status badges ---- */
.status-badge {
  display: inline-block;
  padding: 0.28em 0.65em;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  white-space: nowrap;
}
.status-1 { background: var(--ld-neutral-bg); color: var(--ld-neutral); }
.status-2 { background: var(--ld-warning-bg); color: var(--ld-warning); }
.status-3 { background: var(--ld-info-bg); color: var(--ld-info); }
.status-4 { background: var(--ld-info-bg); color: var(--ld-info); }
.status-5 { background: #ece3f5; color: #6a3fa0; }
.status-6 { background: #e3e8f7; color: #2f4c9e; }
.status-7 { background: var(--ld-success-bg); color: var(--ld-success); }
.status-8 { background: var(--ld-success-bg); color: var(--ld-success); }
.status-9 { background: var(--ld-danger-bg); color: var(--ld-danger); }
.status-10 { background: var(--ld-neutral-bg); color: var(--ld-neutral); }

/* ---- Low stock / warning callouts (visible, not alarming) ---- */
.low-stock-cell {
  background-color: var(--ld-danger-bg);
  color: var(--ld-danger);
  font-weight: 500;
  border-radius: var(--ld-radius-sm);
  padding: 0.15rem 0.5rem;
}
.warning-note {
  background-color: var(--ld-warning-bg);
  color: var(--ld-warning);
  border-radius: var(--ld-radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

/* ---- Order cards (mobile list layout) ---- */
.order-card-list { display: block; }
.order-table-wrap { display: none; }
@media (min-width: 992px) {
  .order-card-list { display: none; }
  .order-table-wrap { display: block; }
}
.order-card {
  background-color: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.65rem;
}
.order-card .order-card-title {
  font-weight: 500;
  color: var(--ld-heading);
}
.order-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6rem;
  row-gap: 0.15rem;
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}
.order-card dt { color: var(--ld-text-muted); font-weight: 400; }
.order-card dd { margin: 0; }

/* ---- Auth pages ---- */
.ld-auth-wrap {
  min-height: calc(100vh - 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ld-bg);
}
.ld-auth-card {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius);
  padding: 2.25rem 2rem;
  max-width: 380px;
  width: 100%;
}
.ld-auth-brand {
  text-align: center;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: var(--ld-heading);
}
.ld-auth-brand img {
  height: 28px;
  width: auto;
}

/* ---- Print (Supplier order form / Production assignment / Material requirements) ---- */
.d-print-table-row { display: none; }
@media print {
  .no-print { display: none !important; }
  .d-print-table-row { display: table-row !important; }
  body { background: #fff; }
  .card, .table { border-color: #999; }
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 2000;
  /* body is a flex container (see above, for the sticky footer) — without this, a flex
     container's default align-items:stretch also stretches an absolutely positioned child
     that only pins one side (left here, no right), widening it to fill the container instead
     of shrinking to fit its own text, which made this off-screen link's black background
     visible on-screen. */
  align-self: flex-start;
}
.skip-link:focus {
  left: 0;
}