/*
  GMM Expediting UI redesign layer - staging/demo only.
  Scope: visual polish over the existing PHP app without changing workflows.
*/

:root {
  --gmm-bg: #f6f4f1;
  --gmm-bg-2: #eceff2;
  --gmm-surface: #ffffff;
  --gmm-surface-2: #f8fafc;
  --gmm-text: #151820;
  --gmm-muted: #5f6878;
  --gmm-border: rgba(27, 31, 42, 0.13);
  --gmm-border-strong: rgba(27, 31, 42, 0.24);
  --gmm-burgundy: #7f1425;
  --gmm-burgundy-2: #a41931;
  --gmm-blue: #1f5f8b;
  --gmm-green: #1d7a57;
  --gmm-amber: #b76a15;
  --gmm-red: #b3263b;
  --gmm-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  --gmm-shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.055);
  --gmm-focus: 0 0 0 3px rgba(31, 95, 139, 0.22);
  --bg: var(--gmm-bg) !important;
  --card: var(--gmm-surface) !important;
  --soft: var(--gmm-surface-2) !important;
  --text: var(--gmm-text) !important;
  --muted: var(--gmm-muted) !important;
  --line: var(--gmm-border) !important;
  --navy: var(--gmm-burgundy) !important;
  --navy-2: var(--gmm-burgundy-2) !important;
  --brand: var(--gmm-burgundy) !important;
  --brand-2: var(--gmm-burgundy-2) !important;
  --red-dark: var(--gmm-burgundy) !important;
  --red: var(--gmm-burgundy-2) !important;
  --purple: var(--gmm-blue) !important;
  --radius: 0px !important;
  --polish-radius: 0px !important;
  --shadow: var(--gmm-shadow) !important;
}

*,
*::before,
*::after {
  border-radius: 0 !important;
}

html {
  background: var(--gmm-bg);
  color-scheme: light;
}

body {
  color: var(--gmm-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(236, 239, 242, 0.88) 100%),
    var(--gmm-bg) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

a,
button,
input,
select,
textarea {
  letter-spacing: 0 !important;
}

button,
.btn,
.primary-btn,
.secondary-btn,
.logout-btn,
.header-btn,
.action-btn,
.linked-order-btn,
.quick-filter-btn,
.month-tab,
input,
select,
textarea {
  min-height: 40px !important;
}

button,
.btn,
.primary-btn,
.secondary-btn,
.logout-btn,
.header-btn,
.action-btn,
.linked-order-btn,
.quick-filter-btn,
.month-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid var(--gmm-border-strong) !important;
  box-shadow: none !important;
  font-weight: 760 !important;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

button:hover,
.btn:hover,
.primary-btn:hover,
.secondary-btn:hover,
.logout-btn:hover,
.header-btn:hover,
.action-btn:hover,
.linked-order-btn:hover,
.quick-filter-btn:hover,
.month-tab:hover {
  transform: translateY(-1px);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0 !important;
  box-shadow: var(--gmm-focus) !important;
}

input,
select,
textarea {
  background: #fff !important;
  border: 1px solid var(--gmm-border-strong) !important;
  color: var(--gmm-text) !important;
  font-size: 0.9rem !important;
}

input::placeholder,
textarea::placeholder {
  color: #7b8494 !important;
}

.topbar {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--gmm-text) !important;
  border-bottom: 1px solid var(--gmm-border) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: blur(14px);
}

.topbar-flex,
.topbar-inner,
.toprow {
  min-height: 68px !important;
}

.brand-wrap,
.brand,
.toprow > div:first-child {
  color: var(--gmm-text) !important;
}

.brand-logo-text,
.brand-mark {
  background: var(--gmm-burgundy) !important;
  color: #fff !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(127, 20, 37, 0.18) !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}

.brand-copy h1,
.brand-title,
.topbar h1,
.topbar h2,
.topbar h3,
.toprow h1 {
  color: var(--gmm-text) !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

.brand-copy .header-subtitle,
.brand-subtitle,
.topbar .subtitle,
.toprow p,
.muted,
.hint {
  color: var(--gmm-muted) !important;
}

.header-actions,
.top-actions,
.actions,
.dept-actions,
.notes-actions,
.mail-actions,
.order-actions-compact,
.linked-compact-actions {
  gap: 8px !important;
}

.header-actions .logout-btn,
.header-actions .header-btn,
.topbar .btn,
.topbar a.btn,
.top-actions .logout-btn,
.logout-btn,
.header-btn {
  background: #fff !important;
  color: var(--gmm-text) !important;
  border-color: var(--gmm-border-strong) !important;
}

.header-actions .logout-btn:hover,
.header-actions .header-btn:hover,
.topbar .btn:hover,
.topbar a.btn:hover,
.top-actions .logout-btn:hover {
  background: var(--gmm-surface-2) !important;
  color: var(--gmm-burgundy) !important;
}

.container,
.wrap {
  width: min(100% - 24px, 1760px) !important;
}

main.container,
main.wrap,
.container:not(.topbar-flex),
.wrap:not(.topbar-inner):not(.toprow) {
  margin-top: 18px !important;
}

.panel,
.card,
.stats-bar,
.toolbar,
.month-strip,
.date-card,
.stat-card,
.department-card,
.modal-sheet,
.notes-popup,
.archive-clean-card,
.status-panel,
.notes-box,
.mail-box,
.detail-header-card,
.detail-table,
.detail-row,
.maplijst-card,
.table-wrap,
.suggestions,
.page-head {
  background: var(--gmm-surface) !important;
  border: 1px solid var(--gmm-border) !important;
  box-shadow: var(--gmm-shadow-soft) !important;
}

.panel,
.card,
.maplijst-card {
  padding: 16px !important;
}

.stats-bar,
.toolbar,
.month-strip {
  padding: 12px !important;
  margin-top: 12px !important;
}

.panel h1,
.panel h2,
.panel h3,
.card h1,
.card h2,
.card h3,
.page-title h1,
.section-title h2,
.detail-title h2,
.detail-section-title,
.notes-popup-head h3,
.modal-head h3 {
  color: var(--gmm-text) !important;
  letter-spacing: 0 !important;
}

.page-title h1 {
  font-size: clamp(1.75rem, 3vw, 2.45rem) !important;
}

.stat-pill,
.stat-card,
.department-card,
.date-card {
  background: #fff !important;
  border-color: var(--gmm-border) !important;
}

.stat-pill {
  padding: 12px !important;
}

.stat-pill strong,
.stat-value strong,
.dept-metric strong,
.day-number,
.suggestion-item strong {
  color: var(--gmm-text) !important;
}

.stat-pill span,
.stat-label,
.stat-value span,
.dept-metric span,
.date-card small,
.calendar-head div,
.detail-subtitle {
  color: var(--gmm-muted) !important;
}

.icon-box,
.date-icon,
.dept-icon,
.title-icon,
.article-icon,
.input-icon > span,
.textarea-icon > span,
.detail-section-icon,
.detail-title-icon {
  background: var(--gmm-surface-2) !important;
  color: var(--gmm-burgundy) !important;
  border: 1px solid var(--gmm-border) !important;
}

.primary-btn,
button.primary-btn,
.btn:not(.secondary):not(.green):not(.orange),
.action-btn.primary,
button[type="submit"],
.month-tab.active,
.quick-filter-btn.active {
  background: var(--gmm-burgundy) !important;
  color: #fff !important;
  border-color: var(--gmm-burgundy) !important;
}

.primary-btn:hover,
button.primary-btn:hover,
.btn:not(.secondary):not(.green):not(.orange):hover,
.action-btn.primary:hover,
button[type="submit"]:hover,
.month-tab.active:hover,
.quick-filter-btn.active:hover {
  background: #65101d !important;
  border-color: #65101d !important;
  color: #fff !important;
}

.secondary-btn,
.btn.secondary,
.quick-filter-btn,
.month-tab,
.calendar-nav-btn {
  background: #fff !important;
  color: var(--gmm-text) !important;
  border-color: var(--gmm-border-strong) !important;
}

.filter-chip,
.badge,
.unit-chip,
.line-badge,
.qty-pill,
.detail-id-chip,
.live-pill {
  background: var(--gmm-surface-2) !important;
  color: var(--gmm-text) !important;
  border: 1px solid var(--gmm-border) !important;
  box-shadow: none !important;
}

.badge.status-rood,
.status-rood,
.strip-rood {
  --status-color: var(--gmm-red);
}

.badge.status-oranje,
.status-oranje,
.strip-oranje {
  --status-color: var(--gmm-amber);
}

.badge.status-groen,
.status-groen,
.strip-groen {
  --status-color: var(--gmm-green);
}

.badge.status-grijs,
.status-grijs,
.strip-grijs {
  --status-color: #6b7280;
}

.badge[class*="status-"] {
  color: var(--status-color, var(--gmm-text)) !important;
  background: color-mix(in srgb, var(--status-color, #6b7280) 10%, #fff) !important;
  border-color: color-mix(in srgb, var(--status-color, #6b7280) 24%, #fff) !important;
}

.layout {
  gap: 14px !important;
}

.calendar-grid {
  gap: 8px !important;
}

.calendar-head {
  color: var(--gmm-muted) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
}

.day-card {
  background: #fff !important;
  border: 1px solid var(--gmm-border) !important;
  box-shadow: none !important;
  min-height: 128px !important;
  padding: 8px !important;
}

.day-card.today {
  border-color: rgba(31, 95, 139, 0.44) !important;
  box-shadow: inset 0 0 0 1px rgba(31, 95, 139, 0.18) !important;
}

.day-card.selected-day {
  border-color: var(--gmm-burgundy) !important;
  box-shadow: inset 0 0 0 1px rgba(127, 20, 37, 0.18) !important;
}

.mini-order {
  background: #fff !important;
  border: 1px solid var(--gmm-border) !important;
  border-left: 4px solid var(--status-color, #6b7280) !important;
  color: var(--gmm-text) !important;
  box-shadow: none !important;
  padding: 7px 8px !important;
}

.mini-order.active,
.mini-order:hover {
  border-color: var(--gmm-burgundy) !important;
  border-left-color: var(--gmm-burgundy) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

.mini-order strong,
.type-verkoop-number,
.type-inkoop-number {
  color: var(--gmm-text) !important;
  font-variant-numeric: tabular-nums;
}

.order-icons,
.order-icon-mini {
  color: var(--gmm-muted) !important;
}

#side-panel,
.detail-side,
.archive-side-stack {
  gap: 10px !important;
}

.detail-header-card {
  border-left: 4px solid var(--gmm-burgundy) !important;
}

.detail-row {
  min-height: 38px !important;
  padding: 7px 9px !important;
  border-color: rgba(27, 31, 42, 0.10) !important;
}

.detail-label {
  color: var(--gmm-muted) !important;
  font-size: 0.72rem !important;
}

.detail-view,
.detail-item strong,
.archive-info-list strong,
.meta strong {
  color: var(--gmm-text) !important;
}

.detail-pencil,
.close-btn {
  background: #fff !important;
  color: var(--gmm-burgundy) !important;
  border: 1px solid var(--gmm-border) !important;
}

.linked-order-btn,
.supplier-order {
  background: #fff !important;
  color: var(--gmm-burgundy) !important;
  border-color: rgba(127, 20, 37, 0.30) !important;
}

.linked-order-btn:hover,
.supplier-order:hover {
  background: rgba(127, 20, 37, 0.06) !important;
}

.notes-read-content,
.meta,
th {
  background: var(--gmm-surface-2) !important;
  color: var(--gmm-text) !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

th {
  border-bottom: 1px solid var(--gmm-border) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
}

td {
  border-bottom-color: rgba(27, 31, 42, 0.08) !important;
}

.maplijst-card {
  width: 100% !important;
  max-width: none !important;
}

body:has(.maplijst-card) .wrap,
body:has(.maplijst-card) .container {
  width: calc(100vw - 18px) !important;
  max-width: none !important;
}

.maplijst-card .table-wrap {
  overflow-x: auto !important;
}

.modal-backdrop,
.notes-popup-backdrop {
  background: rgba(15, 23, 42, 0.46) !important;
  backdrop-filter: blur(4px);
}

.modal-sheet,
.notes-popup {
  max-height: calc(100dvh - 28px) !important;
  overflow: auto !important;
}

.modal-head,
.notes-popup-head {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid var(--gmm-border) !important;
}

.login-card {
  width: min(100%, 440px) !important;
  background: #fff !important;
  border: 1px solid var(--gmm-border) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12) !important;
}

.login-head {
  background: #fff !important;
  color: var(--gmm-text) !important;
  border-bottom: 1px solid var(--gmm-border) !important;
  box-shadow: none !important;
  padding: 24px 24px 18px !important;
}

.login-kicker {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  margin-bottom: 14px !important;
  background: rgba(127, 20, 37, 0.08) !important;
  color: var(--gmm-burgundy) !important;
  border: 1px solid rgba(127, 20, 37, 0.18) !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
  text-transform: uppercase;
}

.login-head h1 {
  color: var(--gmm-text) !important;
  font-size: 1.45rem !important;
  font-weight: 820 !important;
}

.login-body {
  padding: 24px !important;
}

.login-body p {
  color: var(--gmm-muted) !important;
  font-size: 0.92rem !important;
}

.error {
  background: #fff5f6 !important;
  color: #991b1b !important;
  border-color: rgba(179, 38, 59, 0.24) !important;
}

.refresh-notice {
  border: 1px solid var(--gmm-border) !important;
  box-shadow: var(--gmm-shadow) !important;
}

@media (max-width: 980px) {
  .toolbar {
    grid-template-columns: 1fr 1fr !important;
  }

  .stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .month-strip {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .container,
  .wrap {
    width: calc(100vw - 16px) !important;
  }

  .topbar-flex,
  .topbar-inner,
  .toprow {
    align-items: stretch !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }

  .brand-wrap,
  .brand {
    width: 100% !important;
  }

  .header-actions,
  .top-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .header-actions > *,
  .top-actions > * {
    width: 100% !important;
  }

  .toolbar,
  .stats-bar {
    grid-template-columns: 1fr !important;
  }

  .day-card {
    min-height: 104px !important;
  }

  .modal-backdrop,
  .notes-popup-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal-sheet,
  .notes-popup {
    width: 100vw !important;
    max-height: 92dvh !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Final square-corner override for older inline rules with higher specificity. */
.login-card,
.login-head,
.login-body,
.login-kicker,
.topbar,
.topbar *,
.container,
.wrap,
.panel,
.card,
.stats-bar,
.toolbar,
.month-strip,
.date-card,
.stat-card,
.department-card,
.page-head,
.modal-backdrop,
.modal-sheet,
.modal-head,
.notes-popup,
.notes-popup-head,
.archive-clean-card,
.status-panel,
.notes-box,
.mail-box,
.detail-header-card,
.detail-id-chip,
.detail-table,
.detail-row,
.detail-pencil,
.day-card,
.mini-order,
.badge,
.filter-chip,
.quick-filter-btn,
.month-tab,
.calendar-nav-btn,
.primary-btn,
.secondary-btn,
.linked-order-btn,
.logout-btn,
.header-btn,
.btn,
.action-btn,
.icon-box,
.date-icon,
.dept-icon,
.title-icon,
.article-icon,
.input-icon > span,
.textarea-icon > span,
.detail-section-icon,
.detail-title-icon,
.maplijst-card,
.table-wrap,
.supplier-card,
.supplier-order,
.line-badge,
.qty-pill,
.unit-chip,
.check-visual,
.check-icon,
input,
select,
textarea,
button {
  border-radius: 0 !important;
}

button[type="submit"],
.login-body button,
form button {
  border-radius: 0 !important;
}

.topbar .header-search input#zoek,
.header-search input#zoek,
.topbar .header-search .suggestions,
.header-search .suggestions {
  border-radius: 0 !important;
}

#calendar-panel .day-order-column,
.layout.full-calendar #calendar-panel .day-order-column {
  min-width: 0 !important;
}

#calendar-panel .mini-order,
.layout.full-calendar #calendar-panel .mini-order {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 4px 4px !important;
}

#calendar-panel .mini-order .order-topline,
.layout.full-calendar #calendar-panel .mini-order .order-topline {
  min-width: 0 !important;
  gap: 4px !important;
}

#calendar-panel .mini-order strong,
#calendar-panel .mini-order strong.type-inkoop-number,
#calendar-panel .mini-order strong.type-verkoop-number,
.layout.full-calendar #calendar-panel .mini-order strong {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 0.56rem !important;
  letter-spacing: 0 !important;
}