/* ═══════════════════════════════════════════════════════════════
   LOGIACTION THEME
   All CSS custom properties for every app live here.

   Structure
   ─────────
   :root              — vars shared by backend AND frontend
   .la-app--backend   — vars used only by the backend (desktop admin)
   .la-app--frontend  — vars used only by the frontend (mobile / scanner)

   The corresponding body class is set in each app's main layout.
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   COMMON
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ─── Brand palette ─────────────────────────────────────────── */
  --la-primary: #000055; /* LogiAction navy — the brand colour */
  --la-accent-teal: #2ea0c8; /* bright teal, used for UI accents   */
  --la-accent-steel: #4b7e9a; /* muted steel-blue                   */
  --la-success: #5cb85c;

  /* ─── Surfaces ──────────────────────────────────────────────── */
  --la-bg-surface: #ffffff;

  /* ─── Interactions ──────────────────────────────────────────── */
  --la-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --la-btn-shadow: rgba(0, 0, 60, 0.28);

  /* ─── Bootstrap 5.3 shared overrides ───────────────────────── */
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 10px;
  --bs-link-decoration: none;

  /* ─── Navbar ────────────────────────────────────────────────── */
  --la-nav-from: #1b3a4e;
  --la-nav-mid: #26587a;
  --la-nav-to: #1d6b60;
  --la-nav-icon: #7dd4f0;
  --la-nav-icon-hover: #b9eaff;

  --bs-card-bg: white;

  /* ─── Location badges (shared) ─────────────────────────────── */
  --la-location-bg: yellow;
  --la-location-color: black;
  --la-location-border: gray;
  --la-location-occupied-bg: darkorange;
  --la-location-occupied-color: white;
  --la-location-picked-bg: green;
  --la-location-picked-color: white;
  --la-location-bulk-bg: yellowgreen;

  /* ─── Color-location variants (shared) ─────────────────────── */
  --la-cloc-orange-bg: orange;
  --la-cloc-red-bg: red;
  --la-cloc-red-color: white;
  --la-cloc-white-bg: white;
  --la-cloc-blue-bg: blue;
  --la-cloc-blue-color: white;
  --la-cloc-yellow-bg: yellow;
  --la-cloc-gold-bg: gold;
  --la-cloc-green-bg: lightgreen;
  --la-cloc-gray-bg: #aaa;

  /* ─── Pick-crate colors (shared) ───────────────────────────── */
  --la-crate-r-bg: red;
  --la-crate-b-bg: blue;
  --la-crate-g-bg: green;
  --la-crate-y-bg: yellow;
  --la-crate-y-color: #000;

  /* ─── Lot / stock info (shared) ────────────────────────────── */
  --la-lot-color: darkmagenta;
  --la-lot-bg: lightgoldenrodyellow;
  --la-lot-border: gray;
  --la-stock-bg: darkmagenta;
  --la-stock-color: white;

  /* ─── WD section (shared) ──────────────────────────────────── */
  --la-wd-section-bg: #0098d1;
  --la-wd-section-color: white;

  /* ─── Error / warning states (shared) ──────────────────────── */
  --la-error-bg: red;
  --la-error-dark: darkred;
  --la-error-muted: #a94442;

  /* ─── Article info colour (shared) ─────────────────────────── */
  --la-article-info-color: blue;
}


/* ───────────────────────────────────────────────────────────────
   BACKEND  (body.la-app--backend)
   ─────────────────────────────────────────────────────────────── */

.la-app--backend {
  /* ─── Brand palette extensions ──────────────────────────────── */
  --la-primary-dark: #26587a;
  --la-primary-darker: #1c3a4e;
  --la-primary-navy: #2a5f7e;

  /* ─── Surfaces & backgrounds ────────────────────────────────── */
  --la-bg-page: white;
  --la-bg-hover: #e4f1fb;
  --la-bg-subtle: #eef7fb;

  /* ─── Borders ───────────────────────────────────────────────── */
  --la-border: #dde6ef;
  --la-border-table: #e4ecf2;
  --la-border-footer: #d8e4ec;
  --la-border-muted: #b0c8d8;

  /* ─── Typography ────────────────────────────────────────────── */
  --la-text-link: #575757;
  --la-text-muted: #999;
  --la-text-heading: #1c3a4e;
  --la-text-sub: #6b8fa8;
  --la-body-content-color: #333;
  --la-intro-color: #4a6678;

  /* ─── Table header ──────────────────────────────────────────── */
  --la-thead-from: #2a5f7e;
  --la-thead-to: #1f4e6a;
  --la-thead-color: #d8eef8;

  /* ─── Scrollbar ─────────────────────────────────────────────── */
  --la-scrollbar-track: #f0f4f7;

  /* ─── Bootstrap 5.3 overrides ───────────────────────────────── */
  --bs-body-bg: var(--la-bg-page);
  --bs-body-font-size: 14px;
  --bs-border-color: var(--la-border);
  --bs-border-radius: 8px;

  /* ─── Button colours ────────────────────────────────────────── */
  --la-btn-primary-from: #27ae60;
  --la-btn-primary-to: #2ecc71;
  --la-btn-primary-mid: #219a52;
  --la-btn-primary-border: #27ae60;
  --la-btn-primary-border-hover: #1e8a4a;
  --la-btn-primary-shadow: rgba(39, 174, 96, 0.25);
  --la-btn-primary-shadow-hover: rgba(39, 174, 96, 0.40);
  --la-btn-primary-shadow-active: rgba(39, 174, 96, 0.30);

  --la-btn-secondary-from: #f8f9fa;
  --la-btn-secondary-to: #e9ecef;
  --la-btn-secondary-border: #ced4da;
  --la-btn-secondary-color: #3d4d5c;
  --la-btn-secondary-hover-from: #e9ecef;
  --la-btn-secondary-hover-to: #dee2e6;
  --la-btn-secondary-hover-border: #adb5bd;

  --la-btn-danger-from: #c0392b;
  --la-btn-danger-to: #e74c3c;
  --la-btn-danger-mid: #a93226;
  --la-btn-danger-border: #c0392b;
  --la-btn-danger-shadow: rgba(192, 57, 43, 0.25);
  --la-btn-danger-shadow-hover: rgba(192, 57, 43, 0.40);

  --la-btn-warning-from: #d68910;
  --la-btn-warning-to: #f39c12;
  --la-btn-warning-mid: #b7770d;
  --la-btn-warning-border: #d68910;
  --la-btn-warning-shadow: rgba(214, 137, 16, 0.25);
  --la-btn-warning-shadow-hover: rgba(214, 137, 16, 0.40);

  /* ─── Navbar ────────────────────────────────────────────────── */
  --la-nav-underline: rgba(125, 212, 240, 0.70);
  --la-dropdown-icon: #4fa8cc;
  --la-dropdown-icon-hover: #1d7a6a;

  /* ─── Jumbotron ─────────────────────────────────────────────── */
  --la-jumbotron-from: #eaf4fa;
  --la-jumbotron-to: #f6fafd;
  --la-jumbotron-icon-sub: #6db8d8;

  /* ─── Footer ────────────────────────────────────────────────── */
  --la-footer-bg: #f5f5f5;

  /* ─── Scan UI ───────────────────────────────────────────────── */
  --la-sticky-scan-bg: rgba(230, 230, 230, 1);
  --la-sticky-scan-border: rgba(200, 200, 200, 0.9);
  --la-grid-selected-bg: rgba(255, 0, 0, 0.2);

  /* ─── Order-line status ─────────────────────────────────────── */
  --la-order-completed-bg: rgba(200, 255, 200, 0.25);
  --la-order-warn-bg: rgba(255, 200, 130, 0.25);
  --la-order-hold-bg: rgba(255, 240, 0, 0.25);
  --la-order-in-progress-bg: rgba(255, 255, 200, 1);
  --la-order-joker-bg: rgba(255, 200, 200, 0.85);

  /* ─── BOM ───────────────────────────────────────────────────── */
  --la-bom-row-border: #ddd;
  --la-bom-border: #eee;
  --la-bom-border-top: #e0e0e0;

  /* ─── Section badge ─────────────────────────────────────────── */
  --la-section-bg: gray;
  --la-section-color: white;
}

body.la-app--backend {
  background-color: #eef2f6;
}


/* ───────────────────────────────────────────────────────────────
   FRONTEND  (body.la-app--frontend)
   ─────────────────────────────────────────────────────────────── */

.la-app--frontend {
  /* ─── Surfaces & backgrounds ────────────────────────────────── */
  --la-bg-light: #f5f5f5;
  --la-border-light: #e5e5e5;

  /* ─── Navbar ────────────────────────────────────────────────── */
  --la-icon-accent: #f5c842;
  --la-icon-nav-subtle: rgba(255, 255, 255, 0.50);

  /* ─── Bootstrap 5.3 overrides ───────────────────────────────── */
  --bs-body-bg: var(--la-bg-surface);
  --bs-border-radius: 6px;

  /* ─── Button colours ────────────────────────────────────────── */
  --la-btn-primary-from: #0a3040;
  --la-btn-primary-to: #0d5e7c;
  --la-btn-primary-hover-from: #0e3c50;
  --la-btn-primary-hover-to: #127090;

  --la-btn-success-from: #1e6b1e;
  --la-btn-success-to: #4cae4c;
  --la-btn-success-shadow: rgba(30, 107, 30, 0.30);
  --la-btn-success-hover-from: #297829;
  --la-btn-success-hover-to: #5ec85e;
  --la-btn-success-shadow-hover: rgba(30, 107, 30, 0.38);

  --la-btn-danger-from: #8b1515;
  --la-btn-danger-to: #cc3a36;
  --la-btn-danger-shadow: rgba(139, 21, 21, 0.30);
  --la-btn-danger-hover-from: #a81a1a;
  --la-btn-danger-hover-to: #e04540;
  --la-btn-danger-shadow-hover: rgba(139, 21, 21, 0.38);

  --la-btn-warning-from: #a86800;
  --la-btn-warning-to: #e8a020;
  --la-btn-warning-shadow: rgba(168, 104, 0, 0.28);
  --la-btn-warning-hover-from: #c07800;
  --la-btn-warning-hover-to: #f0b830;
  --la-btn-warning-shadow-hover: rgba(168, 104, 0, 0.36);

  /* ─── Transaction ───────────────────────────────────────────── */
  --la-transaction-bg-from: #163a6e;
  --la-transaction-bg-to: #245fa0;
  --la-transaction-shadow: rgba(22, 58, 110, 0.42);
  --la-transaction-base-bg: #236aa7;
  --la-transaction-base-border: #2e6da4;
  --la-transaction-base-shadow: #2a6aa1;
  --la-transaction-btn-from: #020230;
  --la-transaction-btn-to: #0b1b80;
  --la-transaction-btn-shadow: rgba(0, 0, 85, 0.38);
  --la-transaction-btn-hover-from: #0a0a60;
  --la-transaction-btn-hover-to: #1530b0;
  --la-transaction-btn-shadow-hover: rgba(0, 0, 85, 0.50);

  /* ─── Menu ──────────────────────────────────────────────────── */
  --la-menu-icon-color: #60d020;
  --la-menu-icon-shadow: rgba(91, 172, 38, 0.6);
  --la-menu-btn-icon-color: #5bac26;

  /* ─── Plate badges ──────────────────────────────────────────── */
  --la-plate-zone-bg: mediumpurple;
  --la-plate-zone-border: rebeccapurple;
  --la-plate-lpn-bg: orange;
  --la-plate-lpn-border: #875b2e;
  --la-plate-ean-bg: #fff8df;
  --la-plate-item-bg: dodgerblue;
  --la-plate-item-border: #3c719d;
  --la-plate-cart-bg: #ececec;
  --la-plate-cart-border: #606060;
  --la-plate-quantity-bg: #b1e6ff;
  --la-plate-quantity-border: #5d5d5d;

  /* ─── Article card ──────────────────────────────────────────── */
  --la-article-card-bg: #fafafa;
  --la-article-card-picture-color: #111;

  /* ─── Misc UI ───────────────────────────────────────────────── */
  --la-replenish-stock-bg: #0188ff;
  --la-bg-grey-bg: #f3f3f3;
  --la-bg-grey-border: #c6c6c6;
  --la-grey-btn-bg: #e8e8e8;
  --la-item-info-bg: #efefef;
  --la-data-row-even-bg: #f1f1f1;
  --la-progress-color: #555555;
  --la-wd-quantity-bg: rgba(200, 200, 255, 0.7);
  --la-card-links-border: #3c4044;
  --la-card-link-hover: #c6002a;
  --la-touch-info: green;
  --la-touch-disabled: #ff0030;
  --la-lp-info-bg: yellow;
  --la-wd-container-a-bg: lightgray;
  --la-wd-container-b-bg: yellow;
  --la-wd-container-d-bg: darkblue;
  --la-btn-item-bg: blue;
  --la-btn-lot-bg: darkmagenta;
  --la-form-control-disabled-bg: #e9ecef;
  --la-navbar-copyright: rgba(255, 255, 255, 0.65);
  --la-warning-bg: #d9534f;
}