/* ==========================================================================
   COFFEINE STANDARD THEME — the single source of truth for every app.
   WMS is the reference look. Change a value here and every app follows:
   each app maps its own variable names onto these --cf-* tokens (see
   <app>/platform.css, or ams.css for AMS).

   Shell classes (pl-*) are added by js/shell.js from app.json "shell", so the
   header, brand and sidebar look the same in every app.
   ========================================================================== */

:root,
body {
  /* Typography */
  --cf-font: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cf-fs-2xs: 10px;
  --cf-fs-xs: 11px;
  --cf-fs-sm: 12px;
  --cf-fs-md: 13px;
  --cf-fs-base: 14px;
  --cf-fs-lg: 16px;
  --cf-fs-xl: 20px;
  --cf-fs-2xl: 24px;

  /* Brand */
  --cf-primary: #0a444a;
  --cf-primary-light: #0d5c64;
  --cf-primary-strong: #062f34;
  --cf-primary-soft: #eff6f6;
  --cf-primary-soft-border: #d9ebec;
  --cf-on-primary: #ffffff;
  --cf-accent: #24757d;

  /* Surfaces */
  --cf-bg: #eef3f4;
  --cf-surface: #ffffff;
  --cf-surface-2: #f6f9f9;
  --cf-surface-3: #e6edee;
  --cf-header-bg: #ffffff;

  /* Text */
  --cf-text: #16272c;
  --cf-text-muted: #63787e;
  --cf-text-subtle: #90a3a8;

  /* Lines */
  --cf-border: #dde5e7;
  --cf-border-strong: #c3cfd2;
  --cf-border-subtle: #eaf0f1;

  /* Status */
  --cf-success: #0f9f77;
  --cf-success-soft: #e6f7f1;
  --cf-success-strong: #0b7a5b;
  --cf-danger: #e04747;
  --cf-danger-soft: #fdeded;
  --cf-danger-strong: #b91c1c;
  --cf-warning: #e08c11;
  --cf-warning-soft: #fdf3e3;
  --cf-warning-strong: #b45309;
  --cf-info: #2b7fb8;
  --cf-info-soft: #e8f3fa;
  --cf-info-strong: #1d5f8c;

  /* Shape */
  --cf-radius-xs: 6px;
  --cf-radius-sm: 10px;
  --cf-radius-md: 14px;
  --cf-radius-lg: 18px;
  --cf-radius-xl: 24px;
  --cf-radius-pill: 999px;

  /* Elevation */
  --cf-shadow-xs: 0 1px 2px rgba(6, 47, 52, 0.06);
  --cf-shadow-sm: 0 1px 3px rgba(6, 47, 52, 0.07), 0 1px 2px rgba(6, 47, 52, 0.04);
  --cf-shadow-md: 0 6px 16px -4px rgba(6, 47, 52, 0.10), 0 2px 6px -2px rgba(6, 47, 52, 0.06);
  --cf-shadow-lg: 0 16px 40px -12px rgba(6, 47, 52, 0.18), 0 4px 12px -4px rgba(6, 47, 52, 0.08);

  /* Layout */
  --cf-header-h: 56px;
  --cf-header-px: 16px;
  --cf-subheader-h: 32px;
  --cf-sidebar-w: 260px;
}

@media (min-width: 1024px) {
  :root,
  body {
    --cf-header-h: 64px;
    --cf-header-px: 24px;
  }
}

body.dark {
  color-scheme: dark;
  --cf-primary: #a8b4b5;
  --cf-primary-light: #c2cbcc;
  --cf-primary-strong: #8e9c9d;
  --cf-primary-soft: rgba(168, 180, 181, 0.12);
  --cf-primary-soft-border: rgba(168, 180, 181, 0.24);
  --cf-on-primary: #111111;
  --cf-accent: #8e9c9d;

  --cf-bg: #111111;
  --cf-surface: #1a1a1a;
  --cf-surface-2: #242424;
  --cf-surface-3: #0a0a0a;
  --cf-header-bg: rgba(17, 17, 17, 0.92);

  --cf-text: #ececec;
  --cf-text-muted: #9c9c9c;
  --cf-text-subtle: #6e6e6e;

  --cf-border: #2e2e2e;
  --cf-border-strong: #404040;
  --cf-border-subtle: #222222;

  --cf-success: #6bbf9a;
  --cf-success-soft: rgba(107, 191, 154, 0.14);
  --cf-success-strong: #8fd4b4;
  --cf-danger: #e07a7a;
  --cf-danger-soft: rgba(224, 122, 122, 0.14);
  --cf-danger-strong: #f0a0a0;
  --cf-warning: #d4a84b;
  --cf-warning-soft: rgba(212, 168, 75, 0.14);
  --cf-warning-strong: #e6c06a;
  --cf-info: #7a9bb8;
  --cf-info-soft: rgba(122, 155, 184, 0.14);
  --cf-info-strong: #9db6cc;

  --cf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --cf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
  --cf-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  --cf-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.65), 0 4px 12px -4px rgba(0, 0, 0, 0.45);
}

/* --- Base ---------------------------------------------------------------- */
body {
  font-family: var(--cf-font);
  background-color: var(--cf-bg);
}

/* Scrollbars are hidden everywhere; scrolling still works (wheel, touch, keys). */
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

/* No all-caps text anywhere (owner rule); js/text-case.js fixes caps written in the HTML/JS itself. */
*,
*::before,
*::after,
::placeholder {
  text-transform: none !important;
}

/* Phones: no double-tap zoom, and fields at 16px so iOS does not zoom in on focus (js/mobile.js stops pinch).
   The smallest type steps go up one step, and js/mobile.js marks any text under 12px with .pl-min-font. */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (max-width: 1023.98px) {
  :root,
  body {
    --cf-fs-2xs: 11px;
    --cf-fs-xs: 12px;
    --cf-fs-sm: 13px;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }
  .pl-min-font:not(#pl-none):not(#pl-none2):not(#pl-none3) {
    font-size: 12px !important;
  }
}

/* --- Header -------------------------------------------------------------- */
.pl-header {
  height: var(--cf-header-h) !important;
  min-height: var(--cf-header-h) !important;
  background: var(--cf-header-bg) !important;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--cf-border-subtle) !important;
  box-shadow: none !important;
  color: var(--cf-text);
}
body.dark .pl-header { border-bottom-color: var(--cf-border) !important; }

.pl-header .pl-drawer-btn {
  width: 36px !important;
  height: 36px !important;
  margin: 0 16px 0 0 !important;
}
.pl-title-group {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.pl-page-title {
  margin: 0;
  font: 700 17px/1.2 var(--cf-font);
  letter-spacing: -0.015em;
  color: var(--cf-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-page-date {
  display: none;
  align-items: center;
  gap: 6px;
  font: 600 var(--cf-fs-xs) var(--cf-font);
  color: var(--cf-text-subtle);
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .pl-page-date { display: inline-flex; }
}

/* Phone sub-header: a thin bar under the header with the date and extra info (order code, ...),
   so the header itself only holds menu button, title and profile. */
.pl-subheader { display: none; }
@media (max-width: 1023.98px) {
  .pl-header.pl-has-sub {
    overflow: visible !important;
    margin-bottom: calc(var(--cf-subheader-h) + 1px) !important;
  }
  .pl-subheader {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    height: var(--cf-subheader-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0 var(--cf-header-px);
    background: var(--cf-primary);
    border-bottom: 1px solid var(--cf-primary);
    font: 600 var(--cf-fs-xs) var(--cf-font);
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
  }
  .pl-subheader .pl-chip { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; }
  body.dark .pl-subheader {
    background: color-mix(in srgb, var(--cf-primary) 24%, var(--cf-surface));
    border-bottom-color: var(--cf-border);
    color: var(--cf-text);
  }
  body.dark .pl-subheader .pl-chip { background: rgba(255, 255, 255, 0.1) !important; color: var(--cf-text) !important; }
  .pl-subheader .pl-page-date { display: inline-flex; color: inherit; }
  .pl-subheader__extra { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .pl-header .pl-moved { display: none !important; }
}

/* Small info chip in the header / sub-header (order code, ...) */
.pl-chip {
  align-items: center;
  gap: 6px;
  padding: 3px 10px !important;
  border-radius: var(--cf-radius-pill) !important;
  background: var(--cf-primary-soft) !important;
  color: var(--cf-primary) !important;
  font: 700 var(--cf-fs-xs) var(--cf-font) !important;
  letter-spacing: 0 !important;
}

.pl-shell-hide { display: none !important; }

/* Bottom action bar (js/action-bar.js; AMS writes the markup itself), WMS look: Back + page actions fixed under
   the content. Phones: full width, equal buttons. Desktop: next to the sidebar, 190px buttons on the right.
   :not(#pl-none) outranks the apps' own bar rules. */
.pl-actionbar:not(.pl-ab-on) { display: none !important; }
.pl-actionbar.pl-ab-on:not(#pl-none) {
  position: fixed !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-top: 1px solid var(--cf-border) !important;
  border-radius: 0 !important;
  background: var(--cf-surface) !important;
  box-shadow: 0 -6px 20px -12px rgba(6, 47, 52, 0.28) !important;
  transform: none !important;
}
@media (min-width: 901px) {
  body:not(.pl-drawer-mode) .pl-actionbar.pl-ab-on:not(#pl-none) { left: var(--cf-sidebar-w) !important; }
}
.pl-actionbar .pl-actionbar__inner:not(#pl-none) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 var(--cf-header-px) !important;
  box-sizing: border-box !important;
  border: 0 !important;
  background: none !important;
}
.pl-actionbar .pl-ab-btn:not(#pl-none) {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--cf-primary) !important;
  border-radius: 10px !important;
  background: var(--cf-primary) !important;
  color: var(--cf-on-primary) !important;
  font: 700 12px/1.15 var(--cf-font) !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1;
  cursor: pointer;
}
.pl-actionbar .pl-ab-btn:not(#pl-none) i {
  margin: 0 !important;
  width: auto !important;
  font-size: 12px !important;
  color: inherit !important;
}
.pl-actionbar .pl-ab-btn:not(#pl-none) span {
  display: inline !important;
  margin: 0 !important;
  font: inherit !important;
  color: inherit !important;
}
.pl-actionbar .pl-ab-icons .pl-ab-btn:not(#pl-none):has(> i) > span { display: none !important; }
.pl-actionbar .pl-ab-icons .pl-ab-btn:not(#pl-none) > i { font-size: 20px !important; }
.pl-actionbar .pl-ab-btn.pl-ab-outline:not(#pl-none) {
  border-color: var(--cf-border) !important;
  background: var(--cf-surface) !important;
  color: var(--cf-text-muted) !important;
}
.pl-actionbar .pl-ab-btn.pl-ab-danger:not(#pl-none) {
  border-color: var(--cf-danger) !important;
  background: var(--cf-danger) !important;
  color: #fff !important;
}
.pl-actionbar .pl-ab-btn:not(#pl-none):hover:not(:disabled) { filter: brightness(1.05); }
.pl-actionbar .pl-ab-btn.pl-ab-outline:not(#pl-none):hover:not(:disabled) {
  filter: none;
  border-color: var(--cf-border-strong) !important;
  color: var(--cf-text) !important;
}
.pl-actionbar .pl-ab-btn:not(#pl-none):is(:disabled, [disabled], .disabled, .btn-disabled) {
  opacity: 0.5 !important;
  cursor: not-allowed;
}
.pl-actionbar .pl-ab-btn.pl-ab-off:not(#pl-none),
.pl-actionbar .pl-ab-btn.hidden:not(#pl-none) { display: none !important; }
.pl-ab-home:not(:has(*)) { display: none !important; }
body.pl-has-actionbar .pl-ab-pad:not(#pl-none),
body.pl-has-actionbar.pl-ab-pad:not(#pl-none) {
  padding-bottom: var(--pl-ab-h, calc(84px + env(safe-area-inset-bottom, 0px))) !important;
}
@media (min-width: 1024px) {
  .pl-actionbar .pl-actionbar__inner:not(#pl-none) { justify-content: flex-end !important; gap: 10px !important; }
  .pl-actionbar .pl-ab-btn:not(#pl-none) { flex: 0 1 190px !important; }
}
@media print {
  .pl-actionbar { display: none !important; }
}

/* --- Sidebar ------------------------------------------------------------- */
/* All sidebar spacing is set here, so every app's menu sits at the same place:
   sidebar padding, brand block, 2px between items, section labels. */
.pl-sidebar {
  box-sizing: border-box;
  padding: 16px 12px !important;
  gap: 0 !important;
  background: var(--cf-surface) !important;
  border-right: 1px solid var(--cf-border) !important;
  color: var(--cf-text) !important;
}
@media (min-width: 901px) {
  body:not(.pl-drawer-mode) .pl-sidebar {
    width: var(--cf-sidebar-w) !important;
    min-width: var(--cf-sidebar-w) !important;
    max-width: var(--cf-sidebar-w) !important;
  }
}
.pl-sidebar :has(.pl-nav-item) {
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

.pl-brand {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  box-sizing: border-box;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 8px 20px !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
}
.pl-brand__mark {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--cf-on-primary);
  background: var(--cf-primary);
}
.pl-brand__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pl-brand__text b {
  font: 700 18px/1 var(--cf-font);
  letter-spacing: -0.02em;
  color: var(--cf-text);
}
.pl-brand__text span {
  font: 500 var(--cf-fs-2xs)/1 var(--cf-font);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--cf-text-muted);
}

.pl-nav-section {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  box-sizing: border-box;
  width: 100%;
  min-height: 0 !important;
  margin: 8px 0 0 !important;
  padding: 10px 12px 6px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  font: 600 var(--cf-fs-xs)/1.2 var(--cf-font) !important;
  letter-spacing: 0.02em !important;
  color: var(--cf-text-subtle) !important;
  text-align: left;
  box-shadow: none !important;
}

/* The first menu entry always starts right under the brand, like WMS ("Main" style labels are dropped). */
.pl-brand + .pl-nav-section,
.pl-brand + * > .pl-nav-section:first-child {
  display: none !important;
}

.pl-nav-item {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 40px !important;
  margin: 2px 0 0 !important;
  padding: 8px 12px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--cf-text-muted) !important;
  font: 500 14px var(--cf-font) !important;
  text-align: left;
  box-shadow: none !important;
  transition: background 0.15s, color 0.15s;
}
.pl-nav-item > i {
  width: 22px;
  flex: none;
  font-size: 18px !important;
  text-align: center;
  opacity: 1 !important;
  color: inherit !important;
}
.pl-nav-item:hover {
  background: var(--cf-surface-2) !important;
  color: var(--cf-text) !important;
}
.pl-nav-item:is(.active, .is-active, [aria-current="page"], [aria-current="true"]) {
  background: var(--cf-surface-2) !important;
  color: var(--cf-primary) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--cf-primary) !important;
}