/* ============================================================
   Box-E Theme — design tokens + global re-skin
   ------------------------------------------------------------
   To rebrand for a new client, override the brand block in :root.
   Neutrals and structure stay consistent across themes.
   ============================================================ */

:root {
  /* Brand — override per client */
  --boxe-primary:        #007bff;
  --boxe-primary-hover:  #0069d9;
  --boxe-primary-active: #0062cc;
  --boxe-on-primary:     #ffffff;
  --boxe-primary-tint:   rgba(0, 123, 255, 0.08);

  /* Box-E logo red — brand accent for animated buttons (sampled from Box-E_Logo_R.png) */
  --boxe-logo-red:       #e30613;
  --boxe-logo-red-deep:  #b30410;
  --boxe-logo-red-tint:  rgba(227, 6, 19, 0.10);
  --boxe-logo-red-glow:  rgba(227, 6, 19, 0.28);

  /* Neutrals — shared across themes */
  --boxe-bg:            #ffffff;
  --boxe-surface:       #ffffff;
  --boxe-surface-alt:   #f5f5f5;
  --boxe-surface-sunken:#fafafa;
  --boxe-text:          #1a1a1a;
  --boxe-text-muted:    #6a6a6a;
  --boxe-text-subtle:   #9a9a9a;
  --boxe-border:        #e2e2e2;
  --boxe-border-strong: #c4c4c4;

  /* Semantic state colors — not themed per client */
  --boxe-danger:  #c8102e;
  --boxe-warning: #d97706;
  --boxe-success: #16803c;
  --boxe-info:    #1e6fb8;

  /* Structure — house style, not themed per client */
  --boxe-radius:       2px;
  --boxe-radius-pill:  999px;
  --boxe-border-w:     1px;

  /* Mono stack for codes/IDs/numbers */
  --boxe-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================================================
   Navbar base (#WebPageMainNavbar)
   ============================================================ */

nav#WebPageMainNavbar {
  background: var(--boxe-surface) !important;
  border-bottom: var(--boxe-border-w) solid var(--boxe-border) !important;
  min-height: 52px;
  padding: 0 12px;
}

nav#WebPageMainNavbar .trucker-navbar-button {
  border-radius: var(--boxe-radius);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ============================================================
   Compact avatar-style user dropdown trigger
   The full email is moved into the dropdown as a header by JS in
   CommonNavBar.php; the trigger only shows an initial + chevron.
   ============================================================ */

nav#WebPageMainNavbar #navbarDropdownMenuLink {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  margin: 0 4px;
  border: var(--boxe-border-w) solid transparent;
  border-radius: var(--boxe-radius);
  font-size: 0;
  line-height: 1;
  color: var(--boxe-text);
  background: transparent;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

nav#WebPageMainNavbar #navbarDropdownMenuLink::after {
  display: none;
}

nav#WebPageMainNavbar #navbarDropdownMenuLink .BoxeUserAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--boxe-primary-tint);
  color: var(--boxe-primary);
  border-radius: var(--boxe-radius);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}

nav#WebPageMainNavbar #navbarDropdownMenuLink .BoxeUserChevron {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  color: var(--boxe-text-muted);
  margin-right: 2px;
  transition: transform 0.18s ease, color 0.12s ease;
}

nav#WebPageMainNavbar #navbarDropdownMenuLink:hover,
nav#WebPageMainNavbar #navbarDropdownMenuLink:focus {
  background: var(--boxe-surface-alt);
  color: var(--boxe-text);
  text-decoration: none;
  outline: none;
}

nav#WebPageMainNavbar #navbarDropdownMenuLink:hover .BoxeUserChevron,
nav#WebPageMainNavbar #navbarDropdownMenuLink[aria-expanded="true"] .BoxeUserChevron {
  color: var(--boxe-text);
}

nav#WebPageMainNavbar #navbarDropdownMenuLink[aria-expanded="true"] {
  background: var(--boxe-surface-alt);
}

nav#WebPageMainNavbar #navbarDropdownMenuLink[aria-expanded="true"] .BoxeUserChevron {
  transform: rotate(180deg);
}

nav#WebPageMainNavbar #navbarDropdownMenuLink[aria-expanded="true"] .BoxeUserAvatar {
  background: var(--boxe-primary);
  color: var(--boxe-on-primary);
}

nav#WebPageMainNavbar #navbarDropdownMenuLink:focus-visible {
  outline: 2px solid var(--boxe-primary);
  outline-offset: 2px;
}

/* ============================================================
   Dropdown menu (#PersonalMenuDropOptions)
   ============================================================ */

nav#WebPageMainNavbar #PersonalMenuDropOptions {
  border-radius: var(--boxe-radius);
  border: var(--boxe-border-w) solid var(--boxe-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  min-width: 240px;
  padding: 4px 0;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .BoxeUserMenuHeader {
  padding: 10px 16px 8px;
  border-bottom: var(--boxe-border-w) solid var(--boxe-border);
  margin-bottom: 4px;
  cursor: default;
  pointer-events: none;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .BoxeUserMenuHeader .BoxeUserMenuHeaderLabel {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--boxe-text-muted);
  margin-bottom: 2px;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .BoxeUserMenuHeader .BoxeUserMenuHeaderName {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--boxe-text);
  word-break: break-all;
  line-height: 1.3;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--boxe-text);
  text-align: left;
  transition: background-color 0.12s ease, color 0.12s ease;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item > i {
  margin-left: 8px;
  width: 16px;
  font-size: 13px;
  text-align: center;
  color: var(--boxe-text-muted);
  transition: color 0.12s ease;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item > i.float-right {
  margin-top: 2px;
  margin-right: 4px;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item > i.NewNotificationCount,
nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item > i.NewMessages {
  width: auto;
  min-width: 18px;
  padding: 0 6px;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  color: var(--boxe-on-primary);
  background: var(--boxe-primary);
  border-radius: var(--boxe-radius);
  line-height: 1.5;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item > i .f06rem {
  display: none;
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item:hover,
nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item:focus {
  background: var(--boxe-surface-alt);
  color: var(--boxe-primary);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item:hover > i:not(.NewNotificationCount):not(.NewMessages),
nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item:focus > i:not(.NewNotificationCount):not(.NewMessages) {
  color: var(--boxe-primary);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item[onclick*="logout"] {
  color: var(--boxe-danger);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item[onclick*="logout"] > i {
  color: var(--boxe-danger);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item[onclick*="logout"]:not(:first-child) {
  margin-top: 4px;
  padding-top: 12px;
  border-top: var(--boxe-border-w) solid var(--boxe-border);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item[onclick*="logout"]:first-child {
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: var(--boxe-border-w) solid var(--boxe-border);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item[onclick*="logout"]:hover {
  background: var(--boxe-primary-tint);
  color: var(--boxe-danger);
}

nav#WebPageMainNavbar #PersonalMenuDropOptions .dropdown-item[onclick*="logout"]:hover > i {
  color: var(--boxe-danger);
}

/* ============================================================
   Navbar responsive: intermediate widths
   - Hide labels (icons only) so buttons fit
   ============================================================ */

@media (max-width: 1399px) {
  nav#WebPageMainNavbar .nav-button-btn .navbar-icon-explanation {
    display: none;
  }
}

/* ============================================================
   Navbar responsive: mobile (< 768px)
   - Compact hamburger
   - Compact user dropdown trigger (no top margin, no li padding)
   - Hide optional power-user buttons entirely
   ============================================================ */

@media (max-width: 767px) {
  /* Hamburger */
  nav#WebPageMainNavbar #nav-icon1 {
    width: 24px;
    height: 20px;
    max-height: 20px;
    margin-right: 8px;
    padding: 0;
  }
  nav#WebPageMainNavbar #nav-icon1 span {
    height: 3px;
    max-height: 3px;
    border-radius: 2px;
  }
  nav#WebPageMainNavbar #nav-icon1 span:nth-child(1) { top: 0; }
  nav#WebPageMainNavbar #nav-icon1 span:nth-child(2) { top: 8px; }
  nav#WebPageMainNavbar #nav-icon1 span:nth-child(3) { top: 16px; }

  /* User dropdown trigger */
  nav#WebPageMainNavbar .navbar-nav.ml-auto {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    align-self: center;
  }
  nav#WebPageMainNavbar .navbar-nav.ml-auto .nav-item.dropdown {
    padding: 0;
    line-height: 1;
  }
  nav#WebPageMainNavbar #navbarDropdownMenuLink {
    padding: 2px 6px 2px 2px;
    margin: 0 2px;
  }
  nav#WebPageMainNavbar #navbarDropdownMenuLink .BoxeUserAvatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  /* Hide optional power-user buttons */
  nav#WebPageMainNavbar .nav-button:has(#LocketsBtn),
  nav#WebPageMainNavbar .nav-button:has(#InitClipboardReaderBtn),
  nav#WebPageMainNavbar .nav-button:has(#ColorCodesBtn),
  nav#WebPageMainNavbar .nav-button:has(#OCR_MODEL_BTN),
  nav#WebPageMainNavbar .nav-button:has(#DRIVER_SNAPSHOT_BTN),
  nav#WebPageMainNavbar .nav-button.nav-colorcodes,
  nav#WebPageMainNavbar #LocketsBtn,
  nav#WebPageMainNavbar #InitClipboardReaderBtn,
  nav#WebPageMainNavbar #ColorCodesBtn,
  nav#WebPageMainNavbar #OCR_MODEL_BTN,
  nav#WebPageMainNavbar #DRIVER_SNAPSHOT_BTN {
    display: none !important;
  }
}

/* ============================================================
   Bootstrap button re-skin (only via the theme tokens; never hex)
   ============================================================ */

.btn {
  border-radius: var(--boxe-radius);
  font-weight: 500;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-primary {
  background-color: var(--boxe-primary);
  border-color: var(--boxe-primary);
  color: var(--boxe-on-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--boxe-primary-hover);
  border-color: var(--boxe-primary-hover);
  color: var(--boxe-on-primary);
  box-shadow: none;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--boxe-primary-active);
  border-color: var(--boxe-primary-active);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--boxe-primary);
  outline-offset: 2px;
  box-shadow: none;
}

/* ============================================================
   Form input focus — replace Bootstrap's blue with the theme primary
   ============================================================ */

.form-control:focus {
  border-color: var(--boxe-primary);
  box-shadow: 0 0 0 2px var(--boxe-primary-tint);
}

/* ============================================================
   SweetAlert2 close button — always neutral grey
   regardless of icon (success/error/warning/info)
   ============================================================ */

.swal2-container .swal2-styled {
  padding: 8px 22px !important;
  font-size: 14px !important;
  border-radius: var(--boxe-radius) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  line-height: 1.5 !important;
  border: var(--boxe-border-w) solid transparent !important;
}

.swal2-container .swal2-confirm:not(.SND),
.swal2-container button.swal2-confirm:not(.SND),
.swal2-container .swal2-confirm:not(.SND):not(:disabled):not(.disabled):active,
.swal2-container .swal2-confirm:not(.SND):not(:disabled):not(.disabled).active {
  background-color: var(--boxe-surface-alt) !important;
  background-image: none !important;
  border: var(--boxe-border-w) solid var(--boxe-border-strong) !important;
  color: var(--boxe-text) !important;
  font-weight: 500 !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.swal2-container .swal2-confirm:not(.SND):hover,
.swal2-container button.swal2-confirm:not(.SND):hover,
.swal2-container .swal2-confirm:not(.SND):focus,
.swal2-container button.swal2-confirm:not(.SND):focus {
  background-color: var(--boxe-border) !important;
  border-color: var(--boxe-text-muted) !important;
  color: var(--boxe-text) !important;
}

.swal2-container .swal2-confirm.SND {
  background-color: #adff2f !important;
  background-image: none !important;
  border: var(--boxe-border-w) solid #228b22 !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.swal2-container .swal2-confirm.SND:hover,
.swal2-container .swal2-confirm.SND:focus {
  background-color: #95e028 !important;
  border-color: #1a6b1a !important;
  color: #1a1a1a !important;
}

/* ============================================================
   Reusable animated button (.BoxeBtn)
   Add to any button / .btn / .BoxeActionTile.
   Rest:  tactile keycap with a neutral base edge.
   Hover: grows slightly with a Box-E-red glow ring.
   Click: squishes down.
   Colour/border come from the host element; this adds shadow + motion.
   ============================================================ */

.BoxeBtn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
  will-change: transform, box-shadow;
  box-shadow: 0 3px 0 var(--boxe-border-strong), 0 4px 6px rgba(0, 0, 0, 0.10);
}
.BoxeBtn:hover,
.BoxeBtn:focus-visible {
  transform: scale(1.02);
  box-shadow: 0 4px 12px var(--boxe-logo-red-glow), 0 0 0 3px var(--boxe-logo-red-tint);
}
.BoxeBtn:active {
  transform: scale(0.97);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 2px var(--boxe-logo-red-tint);
  transition-duration: 0.06s;
}