/*
 * ENTEGRA shared application shell.
 * =================================
 *
 * SINGLE OWNER of the header / subheader / launcher / shortcut chrome for BOTH
 * runtimes. Loaded LAST in both:
 *
 *   Dashboard  layouts/entegra/app.blade.php   after tabler.min.css + entegra-tabler.css
 *   Legacy     layouts/partials/css.blade.php  after css/app.css + entegra-tabler-theme.css
 *
 * Both bodies carry `.entegra-shell`, so every rule here is scoped to it and
 * nothing else needs runtime-specific selectors. The legacy runtime is
 * Bootstrap 3 / AdminLTE and therefore has NO Bootstrap 5 utility classes
 * (d-*, me-*, ps-*, flex-fill, avatar, dropdown-item, ...); the "utility
 * fallbacks" section below supplies exactly the ones the shell markup uses,
 * scoped to shell containers only, so the same DOM renders identically in both.
 *
 * LAYER MODEL - read before adding any z-index
 * --------------------------------------------
 * `.entegra-header` and `.entegra-subheader` deliberately have NO z-index.
 * Giving them one creates a stacking context that traps their own dropdowns
 * below the sibling row (that was the "dropdown stays under the header" bug).
 * With no z-index they stay in the ROOT stacking context, so the popovers below
 * compose by plain painting order and always land where they should.
 *
 * The same reason is why `.entegra-page-wrapper` / `#scrollable-container` are
 * forced back to `z-index: auto`: a stacking context there caps every modal,
 * DataTables overlay and select2 dropdown inside page content.
 *
 * Only free-floating overlays carry a z-index, and they all live in the root
 * context, so this single scale is authoritative:
 */
:root {
  /* Shell geometry */
  /* Colours mirror the shipped Tabler build; type sits on Tabler's single
     0.875rem chrome size so the header reads as one scale. */
  --entegra-shell-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --entegra-shell-max-width: 1440px;
  --entegra-shell-gutter: 1.25rem;
  --entegra-shell-header-height: 3.75rem;
  --entegra-shell-subheader-height: 3.5rem;
  --entegra-shell-control-height: 2.5rem;

  /* Shell palette (mirrors Tabler defaults so both runtimes match) */
  --entegra-shell-surface: #ffffff;
  --entegra-shell-border: #e5e7eb;
  --entegra-shell-text: #1f2937;
  --entegra-shell-muted: #6b7280;
  --entegra-shell-accent: #066fd1;
  --entegra-shell-accent-dark: #0564bc;
  --entegra-shell-accent-soft: rgba(6, 111, 209, 0.08);
  --entegra-shell-radius: 0.5rem;
  --entegra-shell-shadow: 0 0.75rem 2rem rgba(24, 36, 51, 0.14);
  --entegra-shell-dropdown-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.07), 0 6px 30px 5px rgba(0, 0, 0, 0.06), 0 8px 10px -5px rgba(0, 0, 0, 0.1);

  /* Layer scale - the ONLY place shell z-index values are defined. */
  --entegra-z-nav-popover: 1090;   /* header + shortcut dropdowns, search results */
  --entegra-z-launcher: 1200;      /* full menu slide-over */
  --entegra-z-modal-backdrop: 1240;
  --entegra-z-modal: 1250;
  --entegra-z-field-overlay: 1260; /* select2 / datepicker / popover - must beat modals */
}

@media (min-width: 1600px) {
  :root {
    --entegra-shell-max-width: 1500px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --entegra-shell-gutter: 0.85rem;
  }
}

/* ============================================================
   1. Shell flow
   Dashboard is the canonical flow: header, subheader and content
   are normal-flow blocks on the body scroller. The legacy layout
   is normalized onto the same flow here.
   ============================================================ */
/* Reserve the scrollbar gutter so the shell containers measure the same width
   whether or not the page is tall enough to scroll. Without this, a short
   legacy page and a tall Dashboard page render the same container 15px apart. */
html:has(> body.entegra-shell) {
  scrollbar-gutter: stable;
}

/* Phones use overlay scrollbars; reserving a gutter there only insets the
   fullscreen launcher from the right edge. */
@media (max-width: 767.98px) {
  html:has(> body.entegra-shell) {
    scrollbar-gutter: auto;
  }
}

body.entegra-shell {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* One scroll owner. The legacy stylesheets put `overflow-y: auto` on <body>,
   making the BODY the scroller, while the Dashboard lets <html> scroll. That is
   two different scroll architectures behind one shell - it shifts the container
   width and changes how sticky/fixed children behave. Scoped with :has() so POS
   and customer-display, which do not render the shared shell, keep their own.

   This MUST be the `overflow` shorthand: vendor.css sets `overflow: auto` on
   <body>, and CSS computes `overflow-y: visible` back to `auto` whenever the
   other axis is not visible - so setting the single longhand does nothing. */
body.entegra-shell:has(.entegra-app-header) {
  overflow: visible;
}

.entegra-shell .entegra-page-wrapper,
.entegra-shell #scrollable-container {
  /* No stacking context: page overlays must be free to rise above the shell. */
  z-index: auto !important;
}

.entegra-shell .entegra-page-wrapper {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  /* `clip` is the ONLY value that constrains the horizontal axis without
     forcing overflow-y to `auto` - `hidden`/`auto`/`scroll` here would
     recreate the nested vertical scroller this shell just removed.
     Wide DataTables keep their own .dataTables_scrollBody scroller, and
     position:fixed overlays (modals, shortcut menus) are not clipped by it. */
  overflow-x: clip;
}

/* Legacy wraps content in a nested 100vh scroller; the shell flattens it so
   both runtimes scroll on the body exactly like the Dashboard. */
.entegra-shell #scrollable-container {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.entegra-shell .container-xl {
  width: 100%;
  max-width: var(--entegra-shell-max-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--entegra-shell-gutter);
  padding-left: var(--entegra-shell-gutter);
}

/* ============================================================
   2. Utility fallbacks
   Bootstrap 3 / AdminLTE has none of these. Scoped to shell
   containers so page content keeps its own runtime's utilities.
   ============================================================ */
.entegra-shell .entegra-header,
.entegra-shell .entegra-subheader,
.entegra-shell .entegra-launcher {
  --entegra-scope: shell;
}

.entegra-header .d-none,
.entegra-launcher .d-none {
  display: none;
}

@media (min-width: 576px) {
  .entegra-header .d-sm-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .entegra-header .d-md-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .entegra-header .d-lg-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .entegra-header .d-xl-inline {
    display: inline !important;
  }

  .entegra-header .d-xl-block {
    display: block !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }
}

.entegra-header .navbar-nav,
.entegra-header .flex-row {
  display: flex;
  flex-direction: row;
}

.entegra-header .flex-fill {
  flex: 1 1 auto;
}

.entegra-header .w-100 {
  width: 100%;
}

.entegra-header .lh-1 {
  line-height: 1;
}

.entegra-header .text-reset {
  color: inherit;
}

.entegra-header .p-0 {
  padding: 0;
}

.entegra-header .px-2 {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.entegra-header .mx-3 {
  margin-right: 1rem;
  margin-left: 1rem;
}

.entegra-header .me-1 {
  margin-right: 0.25rem;
}

.entegra-header .me-2,
.entegra-header .dropdown-item .ti {
  margin-right: 0.5rem;
}

.entegra-header .ps-2 {
  padding-left: 0.5rem;
}

.entegra-header .text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entegra-header .fw-medium {
  font-weight: 600;
}

.entegra-header .text-secondary {
  color: var(--entegra-shell-muted);
}

.entegra-header .small {
  font-size: 0.8125rem;
}

/* Tabler's avatar is not available in the legacy runtime. */
.entegra-header .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background-color: #dfe3ea;
  background-size: cover;
  background-position: center;
  color: var(--entegra-shell-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.entegra-header .entegra-avatar-initials {
  background-color: var(--entegra-shell-accent);
  color: #ffffff;
}

/* Screen-reader-only helper used by the canonical notifications partial. */
.entegra-header .tw-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   3. Header row 1 - brand / search / actions
   ============================================================ */
.entegra-shell .entegra-header {
  position: relative; /* containing block only */
  /* MUST stay `auto`. The legacy stylesheets set z-index:1030 on .navbar, which
     turns this row into a stacking context and traps its own dropdowns below
     the subheader. Asserting `auto` here is what keeps the layer model honest. */
  z-index: auto !important;
  display: block;
  min-height: var(--entegra-shell-header-height);
  margin: 0;
  padding: 0;
  border: 0;
  /* No divider between row 1 and row 2: the two rows must read as ONE header
     block, not as two stacked bars. Only .entegra-subheader closes it off. */
  border-radius: 0;
  background: var(--entegra-shell-surface);
  box-shadow: none;
}

.entegra-shell .entegra-header > .container-xl {
  display: flex;
  align-items: center;
  /* Tabler's .navbar-expand-xl lets the container wrap below the xl breakpoint,
     which made the Dashboard header 103px tall on a phone while the legacy
     header stayed 61px. One row at every width, in both runtimes. */
  flex-wrap: nowrap;
  gap: 1rem;
  min-width: 0;
  min-height: var(--entegra-shell-header-height);
  overflow: visible;
}

.entegra-shell .entegra-brand-group {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  min-width: 0;
}

.entegra-shell .entegra-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  color: var(--entegra-shell-text);
  text-decoration: none;
}

.entegra-shell .entegra-brand:hover,
.entegra-shell .entegra-brand:focus {
  color: var(--entegra-shell-text);
  text-decoration: none;
}

.entegra-shell .entegra-brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--entegra-shell-accent);
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

/* Session-active indicator, as in the previous shell: a green dot on the mark.
   Purely decorative - the page only renders for an authenticated session, so
   its presence IS the "active" signal. */
.entegra-shell .entegra-brand-mark::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--entegra-shell-surface);
  border-radius: 999px;
  background: #2fb344;
  box-shadow: 0 0 0 1px rgba(47, 179, 68, 0.25);
}

.entegra-shell .entegra-brand-name-link {
  display: inline-flex;
  align-items: center;
  color: var(--entegra-shell-text);
  text-decoration: none;
  min-width: 0;
}

.entegra-shell .entegra-brand-name-link:hover,
.entegra-shell .entegra-brand-name-link:focus {
  color: var(--entegra-shell-text);
  text-decoration: none;
}

.entegra-shell .entegra-menu-btn.entegra-menu-btn--brand {
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border-radius: 999px;
  border-color: transparent;
  background: var(--entegra-shell-accent);
  color: #ffffff;
}

.entegra-shell .entegra-brand-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

body.entegra-tabler .entegra-header,
body.entegra-tabler .entegra-subheader {
  background: var(--entegra-dashboard-band, #0040C1);
  color: #ffffff;
}

body.entegra-tabler .entegra-subheader {
  border-top-color: rgba(255, 255, 255, 0.16);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

body.entegra-tabler .entegra-brand-name-link,
body.entegra-tabler-skin .entegra-brand-name-link,
body.entegra-tabler .entegra-brand-name-link:hover,
body.entegra-tabler-skin .entegra-brand-name-link:hover,
body.entegra-tabler .entegra-brand-name-link:focus,
body.entegra-tabler-skin .entegra-brand-name-link:focus,
body.entegra-tabler .entegra-brand-name {
  color: #ffffff;
}

body.entegra-tabler .entegra-brand-mark::after {
  border-color: var(--entegra-dashboard-band, #0040C1);
}

body.entegra-tabler .entegra-menu-btn.entegra-menu-btn--brand {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

body.entegra-tabler .entegra-menu-btn.entegra-menu-btn--brand:hover,
body.entegra-tabler .entegra-menu-btn.entegra-menu-btn--brand:focus {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

body.entegra-tabler .entegra-header-actions .nav-link,
body.entegra-tabler-skin .entegra-header-actions .nav-link,
body.entegra-tabler .entegra-header .notifications-menu .dropdown-toggle {
  color: rgba(255, 255, 255, 0.82);
}

body.entegra-tabler .entegra-header-actions .nav-link:hover,
body.entegra-tabler-skin .entegra-header-actions .nav-link:hover,
body.entegra-tabler .entegra-header-actions .nav-link:focus,
body.entegra-tabler-skin .entegra-header-actions .nav-link:focus,
body.entegra-tabler .entegra-header .notifications-menu .dropdown-toggle:hover,
body.entegra-tabler-skin .entegra-header .notifications-menu .dropdown-toggle:hover,
body.entegra-tabler .entegra-header .notifications-menu .dropdown-toggle:focus,
body.entegra-tabler-skin .entegra-header .notifications-menu .dropdown-toggle:focus {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

body.entegra-tabler .entegra-shortcut {
  color: rgba(255, 255, 255, 0.76);
}

body.entegra-tabler .entegra-shortcut:hover,
body.entegra-tabler .entegra-shortcut:focus,
body.entegra-tabler .entegra-shortcut:active,
body.entegra-tabler .entegra-shortcut.is-active {
  color: #ffffff;
}

body.entegra-tabler .entegra-shortcut:hover::after,
body.entegra-tabler .entegra-shortcut:focus::after,
body.entegra-tabler .entegra-shortcut.is-active::after {
  border-bottom-color: #ffffff;
}

/* --- header actions --- */
.entegra-shell .entegra-header-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: nowrap;
  margin-left: auto;
  padding: 0;
  list-style: none;
}

.entegra-shell .entegra-header-actions > .nav-item,
.entegra-shell .entegra-header .notifications-menu {
  position: relative; /* containing block only */
  display: inline-flex;
  align-items: center;
  list-style: none;
}

.entegra-shell .entegra-header-actions .nav-link,
.entegra-shell .entegra-header .notifications-menu .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--entegra-shell-control-height);
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--entegra-shell-muted);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
}

.entegra-shell .entegra-header-actions .nav-link:hover,
.entegra-shell .entegra-header-actions .nav-link:focus,
.entegra-shell .entegra-header .notifications-menu .dropdown-toggle:hover,
.entegra-shell .entegra-header .notifications-menu .dropdown-toggle:focus {
  background: var(--entegra-shell-accent-soft);
  color: var(--entegra-shell-accent);
  text-decoration: none;
}

.entegra-shell .entegra-header-actions .entegra-action-icon {
  font-size: 1.25rem;
  color: inherit;
  line-height: 1;
}

.entegra-shell .entegra-header-actions .nav-link .ti,
.entegra-shell .entegra-header .notifications-menu .dropdown-toggle .ti {
  font-size: 1.25rem;
  color: inherit;
  line-height: 1;
}

/* The canonical notifications partial sizes its inline SVG with Tailwind's
   `tw-size-5`, and Tailwind is only loaded by the LEGACY layout. On the
   Dashboard that class does not exist, so the bell collapsed to nothing - the
   single most visible "these are two different headers" symptom. Size every
   header-action icon from the shell instead, so neither runtime depends on
   Tailwind being present. */
.entegra-shell .entegra-header-actions svg,
.entegra-shell .entegra-header .notifications-menu svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

/* Same story for the layout utilities the partial uses on its toggle. */
.entegra-shell .entegra-header .notifications-menu .dropdown-toggle {
  gap: 0.15rem;
}

/* Bootstrap 5 draws a caret via .dropdown-toggle::after; Bootstrap 3 does not.
   That lone `v` next to the Dashboard bell was the last visible difference
   between the two headers. Bootstrap 3's <b class="caret"> is hidden too. */
.entegra-shell .entegra-header .dropdown-toggle::after,
.entegra-shell .entegra-header .dropdown-toggle .caret {
  display: none;
}

.entegra-shell .entegra-header-actions .entegra-quick-sale {
  display: none;
  align-items: center;
  height: var(--entegra-shell-control-height);
  padding: 0 0.9rem;
  margin-right: 0.35rem;
  border: 1px solid var(--entegra-shell-accent);
  border-radius: 0.375rem;
  background: var(--entegra-shell-accent);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

@media (min-width: 576px) {
  .entegra-shell .entegra-header-actions .entegra-quick-sale {
    display: inline-flex;
  }
}

.entegra-shell .entegra-header-actions .entegra-quick-sale:hover,
.entegra-shell .entegra-header-actions .entegra-quick-sale:focus {
  background: var(--entegra-shell-accent-dark);
  border-color: var(--entegra-shell-accent-dark);
  color: #ffffff;
  text-decoration: none;
}

/* Superadmin package badge (superadmin::layouts.partials.active_subscription).
   That partial hard-codes `style="color:white"` for the old dark header, so it
   was invisible on the white shell, and it uses a Font Awesome glyph which the
   Dashboard never loads. Render it as a self-contained dot instead: no icon
   font, no inherited colour, works in both runtimes. The inline colour is
   overridden with !important because it sits on the element itself. */
.entegra-shell .entegra-header-actions .fa-info-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  align-self: center;
  margin-right: 0.35rem;
  float: none !important;
  border-radius: 999px;
  background: var(--entegra-shell-accent-soft);
  color: var(--entegra-shell-accent) !important;
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.entegra-shell .entegra-header-actions .fa-info-circle::before {
  content: "i";
}

.entegra-shell .entegra-header-actions .fa-info-circle:hover {
  background: var(--entegra-shell-accent);
  color: #ffffff !important;
}

.entegra-shell .entegra-date-badge {
  font-size: 0.85rem;
  font-weight: 500;
}

.entegra-shell .entegra-user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--entegra-shell-text);
}

/* --- header dropdown menus (profile / quick actions) --- */
.entegra-shell .entegra-header-actions .dropdown-menu {
  display: none;
  position: absolute;
  z-index: var(--entegra-z-nav-popover);
  top: 100%;
  right: 0;
  left: auto;
  min-width: 14rem;
  margin-top: 0.4rem;
  padding: 0.35rem;
  border: 1px solid var(--entegra-shell-border);
  border-radius: var(--entegra-shell-radius);
  background: var(--entegra-shell-surface);
  box-shadow: var(--entegra-shell-shadow);
  list-style: none;
}

/* Shell-owned open state (both runtimes) + Bootstrap 3's own `.open`. */
.entegra-shell .entegra-action-dropdown.is-open > .dropdown-menu,
.entegra-shell .entegra-action-dropdown.open > .dropdown-menu {
  display: block;
}

.entegra-shell .entegra-header .dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 0.375rem;
  color: var(--entegra-shell-text);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.entegra-shell .entegra-header .dropdown-item:hover,
.entegra-shell .entegra-header .dropdown-item:focus {
  background: var(--entegra-shell-accent-soft);
  color: var(--entegra-shell-accent);
  text-decoration: none;
}

.entegra-shell .entegra-header .dropdown-item-text {
  padding: 0.4rem 0.6rem;
}

.entegra-shell .entegra-header .dropdown-divider {
  height: 0;
  margin: 0.35rem 0;
  overflow: hidden;
}

/* MultiCurrency header widget: one visual contract for both runtimes.
   /home uses body.entegra-tabler, legacy pages use body.entegra-tabler-skin;
   keep this in the shared shell layer so the same header partial cannot drift. */
.entegra-shell .entegra-fx-widget-toggle {
  gap: 0.5rem !important;
  min-height: var(--entegra-shell-control-height) !important;
  padding: 0.375rem 0.625rem !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 0.375rem !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.entegra-shell .entegra-fx-widget-toggle:hover,
.entegra-shell .entegra-fx-widget-toggle:focus,
.entegra-shell .entegra-fx-widget.open > .entegra-fx-widget-toggle,
.entegra-shell .entegra-fx-widget.is-open > .entegra-fx-widget-toggle {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.entegra-shell .entegra-fx-widget-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.entegra-shell .entegra-fx-widget-icon .ti {
  font-size: 1.05rem !important;
}

.entegra-shell .entegra-fx-widget-label {
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entegra-shell .entegra-fx-widget-alert {
  color: #fde68a !important;
}

.entegra-shell .entegra-fx-widget-menu {
  min-width: 22rem !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--entegra-shell-border) !important;
  border-radius: var(--entegra-shell-radius) !important;
  background: var(--entegra-shell-surface) !important;
  box-shadow: var(--entegra-shell-shadow) !important;
}

.entegra-shell .entegra-fx-widget-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--entegra-shell-border);
}

.entegra-shell .entegra-fx-widget-menu-head > i {
  color: var(--entegra-shell-accent);
  font-size: 1.25rem;
}

.entegra-shell .entegra-fx-widget-menu-title {
  color: var(--entegra-shell-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.entegra-shell .entegra-fx-widget-menu-subtitle {
  margin-top: 0.125rem;
  color: var(--entegra-shell-muted);
  font-size: 0.75rem;
}

.entegra-shell .entegra-fx-widget-row {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--entegra-shell-border);
}

.entegra-shell .entegra-fx-widget-row-top,
.entegra-shell .entegra-fx-widget-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.entegra-shell .entegra-fx-widget-code {
  color: var(--entegra-shell-text);
  font-weight: 700;
}

.entegra-shell .entegra-fx-widget-rate {
  margin-top: 0.375rem;
  color: var(--entegra-shell-text);
  font-size: 1rem;
  font-weight: 800;
}

.entegra-shell .entegra-fx-widget-meta {
  margin-top: 0.25rem;
  color: var(--entegra-shell-muted);
  font-size: 0.75rem;
}

.entegra-shell .entegra-fx-widget-row .btn {
  margin-top: 0.625rem;
}

.entegra-shell .entegra-fx-widget-empty {
  padding: 1rem;
  color: var(--entegra-shell-muted);
  font-size: 0.875rem;
}

.entegra-shell .entegra-fx-widget-settings {
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0 !important;
}

.entegra-shell .entegra-fx-widget {
  margin-right: 0.35rem;
}

.entegra-shell .entegra-package-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
}

.entegra-shell .entegra-corefatura-widget-toggle {
  gap: 0.45rem !important;
  min-height: var(--entegra-shell-control-height) !important;
  padding: 0.375rem 0.625rem !important;
  border: 1px solid rgba(253, 186, 116, 0.34) !important;
  border-radius: 0.375rem !important;
  background: rgba(249, 115, 22, 0.18) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.entegra-shell .entegra-corefatura-widget-toggle:hover,
.entegra-shell .entegra-corefatura-widget-toggle:focus,
.entegra-shell .entegra-corefatura-widget.open > .entegra-corefatura-widget-toggle,
.entegra-shell .entegra-corefatura-widget.is-open > .entegra-corefatura-widget-toggle {
  background: rgba(249, 115, 22, 0.28) !important;
  color: #ffffff !important;
}

.entegra-shell .entegra-corefatura-widget-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.entegra-shell .entegra-corefatura-widget-menu {
  min-width: 19rem !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--entegra-shell-border) !important;
  border-radius: var(--entegra-shell-radius) !important;
  background: var(--entegra-shell-surface) !important;
  box-shadow: var(--entegra-shell-shadow) !important;
}

.entegra-shell .entegra-corefatura-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-bottom: 1px solid #fed7aa;
}

.entegra-shell .entegra-corefatura-widget-head > i {
  color: #ea580c;
  font-size: 1.35rem;
}

.entegra-shell .entegra-corefatura-widget-title {
  color: var(--entegra-shell-text);
  font-size: 0.875rem;
  font-weight: 800;
}

.entegra-shell .entegra-corefatura-widget-subtitle {
  margin-top: 0.125rem;
  color: var(--entegra-shell-muted);
  font-size: 0.75rem;
}

.entegra-shell .entegra-corefatura-widget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.75rem;
}

.entegra-shell .entegra-corefatura-widget-stat {
  display: block;
  padding: 0.65rem 0.5rem;
  border: 1px solid var(--entegra-shell-border);
  border-radius: 0.5rem;
  color: var(--entegra-shell-text);
  text-align: center;
  text-decoration: none;
}

.entegra-shell .entegra-corefatura-widget-stat:hover {
  border-color: #fdba74;
  background: #fff7ed;
}

.entegra-shell .entegra-corefatura-widget-stat span {
  display: block;
  font-family: var(--tblr-font-monospace, monospace);
  font-size: 1.15rem;
  font-weight: 800;
}

.entegra-shell .entegra-corefatura-widget-stat small {
  color: var(--entegra-shell-muted);
  font-size: 0.72rem;
}

.entegra-shell .entegra-corefatura-widget-settings {
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0 !important;
}

.entegra-shell .entegra-package-info .fa-info-circle {
  margin-right: 0;
}

/* --- notifications (canonical UltimatePOS partial) --- */
.entegra-shell .entegra-header .notifications_count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  margin-left: 0.2rem;
  border-radius: 999px;
  background: #d63939;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.entegra-shell .entegra-header .notifications_count:empty {
  display: none;
}

/* The partial carries an inline `height:90vh; overflow-y:scroll` and Tailwind
   `!tw-z-10`; these !important rules are what make the panel behave. */
.entegra-shell .entegra-header .notifications-menu > .dropdown-menu {
  display: none;
  position: absolute !important;
  z-index: var(--entegra-z-nav-popover) !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  width: 22rem !important;
  max-width: calc(100vw - 2rem) !important;
  height: auto !important;
  max-height: min(70vh, 30rem) !important;
  margin-top: 0.4rem !important;
  padding: 0.5rem !important;
  overflow: hidden !important;
  border: 1px solid var(--entegra-shell-border) !important;
  border-radius: var(--entegra-shell-radius) !important;
  background: var(--entegra-shell-surface) !important;
  box-shadow: 0 1rem 2.5rem rgba(24, 36, 51, 0.18) !important;
  list-style: none;
}

.entegra-shell .entegra-header .notifications-menu.is-open > .dropdown-menu,
.entegra-shell .entegra-header .notifications-menu.open > .dropdown-menu {
  display: block;
}

/* While app.js loads the list it drops a Font Awesome spinner into the badge;
   the Dashboard has no Font Awesome, so that showed as an empty red pill. */
.entegra-shell .entegra-header .notifications_count:has(i),
.entegra-shell .entegra-header .notifications_count:has(svg) {
  display: none;
}

/* --- notification panel: head / scrollable body / footer --- */
.entegra-shell .entegra-header .notifications-menu .entegra-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.15rem 0.5rem 0.55rem;
  border-bottom: 1px solid var(--entegra-shell-border);
}

.entegra-shell .entegra-header .notifications-menu .entegra-notif-title {
  color: var(--entegra-shell-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.entegra-shell .entegra-header .notifications-menu .entegra-notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--entegra-shell-accent-soft);
  color: var(--entegra-shell-accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.entegra-shell .entegra-header .notifications-menu .entegra-notif-body {
  padding-top: 0.35rem;
}

.entegra-shell .entegra-header .notifications-menu #notifications_list {
  max-height: calc(min(70vh, 30rem) - 6rem) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* The AJAX rows (layouts/partials/notification_list.blade.php) are also styled
   with Tailwind utilities that the Dashboard does not load - own them here. */
.entegra-shell .entegra-header .notifications-menu .notification-li > a {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.5rem;
  border-radius: 0.375rem;
  color: var(--entegra-shell-text);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: none;
}

.entegra-shell .entegra-header .notifications-menu .notification-li > a:hover {
  background: var(--entegra-shell-accent-soft);
  color: var(--entegra-shell-accent);
  text-decoration: none;
}

.entegra-shell .entegra-header .notifications-menu .notification-li.unread > a {
  font-weight: 600;
}

/* Unread marker: a dot in the left gutter instead of a missing icon font. */
.entegra-shell .entegra-header .notifications-menu .notification-li > a::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.4rem;
  border-radius: 999px;
  background: transparent;
}

.entegra-shell .entegra-header .notifications-menu .notification-li.unread > a::before {
  background: var(--entegra-shell-accent);
}

.entegra-shell .entegra-header .notifications-menu .notif-icon {
  display: none;
}

.entegra-shell .entegra-header .notifications-menu .notif-info {
  flex: 1 1 auto;
  min-width: 0;
}

.entegra-shell .entegra-header .notifications-menu .time {
  display: block;
  margin-top: 0.15rem;
  color: var(--entegra-shell-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.entegra-shell .entegra-header .notifications-menu .no-notification {
  padding: 1.75rem 0.5rem;
  color: var(--entegra-shell-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.entegra-shell .entegra-header .notifications-menu #notifications_list::-webkit-scrollbar {
  width: 0.45rem;
}

.entegra-shell .entegra-header .notifications-menu #notifications_list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cbd5e1;
}

.entegra-shell .entegra-header .notifications-menu .menu,
.entegra-shell .entegra-header .notifications-menu li {
  list-style: none;
}

.entegra-shell .entegra-header .notifications-menu .load_more_li {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--entegra-shell-border);
  text-align: center;
}

.entegra-shell .entegra-header .notifications-menu .load_more_notifications {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2rem;
  border-radius: 0.375rem;
  color: var(--entegra-shell-accent);
  text-decoration: none;
}

.entegra-shell .entegra-header .notifications-menu .load_more_notifications:hover {
  background: var(--entegra-shell-accent-soft);
}

/* ============================================================
   4. Header row 2 - pinned shortcut bar
   Present at EVERY breakpoint (mobile shows it as the second row),
   so there is one navigation architecture, not two.
   ============================================================ */
.entegra-shell .entegra-subheader {
  position: relative; /* containing block only */
  z-index: auto !important; /* see .entegra-header above */
  display: block;
  min-height: var(--entegra-shell-subheader-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--entegra-shell-border);
  border-bottom: 1px solid var(--entegra-shell-border);
  border-radius: 0;
  background: var(--entegra-shell-surface);
  box-shadow: none;
}

.entegra-shell .entegra-subheader > .container-xl {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  min-height: var(--entegra-shell-subheader-height);
  overflow: visible;
}

.entegra-shell .entegra-subnav {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.entegra-shell .entegra-menu-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  align-self: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--entegra-shell-border);
  border-radius: var(--entegra-shell-radius-sm, 6px);
  background: var(--entegra-shell-surface);
  color: var(--entegra-shell-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4285714286;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}

.entegra-shell .entegra-menu-btn:hover,
.entegra-shell .entegra-menu-btn:focus,
.entegra-shell .entegra-menu-btn:active {
  background: var(--entegra-shell-surface);
  border-color: var(--entegra-shell-border);
  color: var(--entegra-shell-text);
  text-decoration: none;
  box-shadow: none;
}

.entegra-shell .entegra-menu-btn .ti {
  font-size: 1.25rem;
  color: inherit;
}

/* Single-row, horizontally scrollable, scrollbar hidden. Branch menus escape
   this clipping via position:fixed (see 5). */
.entegra-shell .entegra-shortcut-bar {
  display: flex;
  align-items: stretch;
  gap: 0.125rem;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  padding: 0;
  /* overflow-x KASTEN YOK. CSS Overflow spec'e gore overflow-x'i visible
     disinda bir degere set etmek overflow-y'nin used value'sunu da 'auto'
     yapar; bu da satirin ALTINA sarkan dal acilir menulerini kirpiyordu
     (dosyada daha once bu denenip geri alinmis). Tasma artik gizli bir
     kaydirma seridiyle degil, asagidaki :nth-child kurallariyla ve
     .entegra-shortcut-more cikisiyla cozuluyor. */
  overflow: visible;
}

.entegra-shell .entegra-shortcut-bar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.entegra-shell .entegra-shortcut {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  align-self: stretch;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--entegra-shell-muted);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4285714286;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.entegra-shell .entegra-shortcut:hover,
.entegra-shell .entegra-shortcut:focus {
  background: transparent;
  color: var(--entegra-shell-text);
  text-decoration: none;
}

.entegra-shell .entegra-shortcut:active {
  color: var(--entegra-shell-text);
}

.entegra-shell .entegra-shortcut.is-active {
  background: transparent;
  color: var(--entegra-shell-text);
}

.entegra-shell .entegra-shortcut:hover::after,
.entegra-shell .entegra-shortcut:focus::after,
.entegra-shell .entegra-shortcut.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 2px solid var(--entegra-shell-accent);
}

.entegra-shell .entegra-shortcut-title {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entegra-shell .entegra-shortcut > .ti,
.entegra-shell .entegra-shortcut > [class^="ti-"],
.entegra-shell .entegra-shortcut > [class*=" ti-"] {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
}

.entegra-shell .entegra-shortcut-caret {
  display: inline-flex;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
}

.entegra-shell .entegra-shortcut-dropdown {
  position: relative; /* containing block only */
  flex: 0 0 auto;
}

.entegra-shell .entegra-node-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.entegra-shell .entegra-node-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  color: inherit;
}

@media (max-width: 575.98px) {
  .entegra-shell .entegra-shortcut.is-active {
    border-left: 3px solid var(--entegra-shell-accent);
    padding-left: calc(0.75rem - 3px);
  }

  .entegra-shell .entegra-shortcut.is-active::after {
    border-bottom: none;
  }
}

@media (max-width: 575.98px) {
  /* The enlarged desktop logo does not fit next to the action icons on a
     phone - it pushed the header 43px past the viewport. Keep the mark as the
     logo and drop the wordmark, which is the usual small-screen treatment. */
  .entegra-shell .entegra-brand-name {
    display: none;
  }

  .entegra-shell .entegra-brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }

  .entegra-shell .entegra-brand-mark::after {
    width: 0.65rem;
    height: 0.65rem;
  }

  .entegra-shell .entegra-menu-btn-label {
    display: none;
  }

  .entegra-shell .entegra-menu-btn {
    padding: 0.5rem 0.7rem;
  }

  .entegra-shell .entegra-shortcut-title {
    max-width: 6.5rem;
  }
}

/* ============================================================
   5. Shortcut branch menu
   position:fixed so it escapes the shortcut bar's overflow clip
   AND every ancestor stacking context. JS sets top/left.
   ============================================================ */
.entegra-shell .entegra-shortcut-menu {
  display: none;
  position: fixed;
  z-index: var(--entegra-z-nav-popover);
  top: 0;
  left: 0;
  min-width: 14rem;
  max-width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 32rem);
  padding: 0.25rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--entegra-shell-border);
  border-radius: var(--entegra-shell-radius-sm, 6px);
  background: var(--entegra-shell-surface);
  box-shadow: var(--entegra-shell-dropdown-shadow);
  scrollbar-width: thin;
}

.entegra-shell .entegra-shortcut-dropdown.is-open > .entegra-shortcut-menu {
  display: block;
}

/* ============================================================
   6. Menu tree (shared by the launcher and shortcut branch menus)
   ============================================================ */
.entegra-shell .entegra-menu-tree {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entegra-shell .entegra-tree-node {
  list-style: none;
}

.entegra-shell .entegra-tree-row {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  border-radius: var(--entegra-shell-radius-sm, 6px);
}

.entegra-shell .entegra-tree-row:hover {
  background: transparent;
}

.entegra-shell .entegra-tree-link,
.entegra-shell .entegra-tree-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--entegra-shell-radius-sm, 6px);
  background: transparent;
  color: var(--entegra-shell-text);
  font-size: 0.875rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.entegra-shell .entegra-tree-link:hover,
.entegra-shell .entegra-tree-link:focus,
.entegra-shell .entegra-tree-toggle:hover,
.entegra-shell .entegra-tree-toggle:focus {
  background: var(--entegra-shell-accent-soft);
  color: var(--entegra-shell-accent);
  text-decoration: none;
}

.entegra-shell .entegra-tree-toggle {
  flex: 0 0 auto;
}

.entegra-shell .entegra-tree-toggle-title {
  flex: 1 1 auto;
}

.entegra-shell .entegra-tree-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entegra-shell .entegra-tree-caret {
  display: inline-flex;
  color: var(--entegra-shell-muted);
  font-size: 0.85rem;
  transition: transform 0.15s ease;
}

.entegra-shell .entegra-tree-node.is-expanded > .entegra-tree-row .entegra-tree-caret {
  transform: rotate(90deg);
}

.entegra-shell .entegra-tree-node.is-active > .entegra-tree-row > .entegra-tree-link,
.entegra-shell .entegra-tree-node.is-active > .entegra-tree-row > .entegra-tree-toggle {
  background: var(--entegra-shell-accent-soft);
  color: var(--entegra-shell-accent);
  font-weight: 500;
}

.entegra-shell .entegra-tree-children {
  padding-left: 0.85rem;
  border-left: 1px solid var(--entegra-shell-border);
  margin-left: 0.85rem;
}

.entegra-shell .entegra-tree-children[hidden] {
  display: none;
}

/* --- pin / star --- */
.entegra-shell .entegra-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #b6bdc9;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.entegra-shell .entegra-pin:hover,
.entegra-shell .entegra-pin:focus {
  background: rgba(247, 181, 0, 0.12);
  color: #f7b500;
  outline: none;
}

.entegra-shell .entegra-pin.is-pinned {
  color: #f7b500;
}

.entegra-shell .entegra-pin.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

/* ============================================================
   7. App launcher (full menu)
   Owned entirely here - previously duplicated in entegra-tabler.css
   and entegra-tabler-theme.css with different geometry per runtime.
   Mobile: fullscreen. >=768px: right-hand slide-over.
   ============================================================ */
.entegra-shell .entegra-launcher {
  position: fixed;
  z-index: var(--entegra-z-launcher);
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.entegra-shell .entegra-launcher.is-open {
  visibility: visible;
  pointer-events: auto;
}

.entegra-shell .entegra-launcher-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.55);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.entegra-shell .entegra-launcher.is-open .entegra-launcher-backdrop {
  opacity: 1;
}

.entegra-shell .entegra-launcher-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--entegra-shell-surface);
  box-shadow: 0 0 3rem rgba(16, 24, 40, 0.28);
  opacity: 0;
  transform: translateY(-0.75rem);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.entegra-shell .entegra-launcher.is-open .entegra-launcher-panel {
  opacity: 1;
  transform: translateY(0);
}

/* From 768px up the panel slides in from the LEFT - the same side as the Menu
   button that opens it, and the side UltimatePOS has always put its menu on.
   Opening on the opposite side of the trigger read as disconnected. */
@media (min-width: 768px) {
  .entegra-shell .entegra-launcher-panel {
    right: auto;
    width: 26rem;
    max-width: 92vw;
    transform: translateX(-1rem);
  }

  .entegra-shell .entegra-launcher.is-open .entegra-launcher-panel {
    transform: translateX(0);
  }
}

.entegra-shell .entegra-launcher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 0.9rem 1rem 0.65rem;
  border-bottom: 1px solid var(--entegra-shell-border);
}

.entegra-shell .entegra-launcher-title {
  color: var(--entegra-shell-text);
  font-size: 1rem;
  font-weight: 700;
}

.entegra-shell .entegra-launcher-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--entegra-shell-muted);
  font-size: 1.15rem;
  cursor: pointer;
}

.entegra-shell .entegra-launcher-close:hover,
.entegra-shell .entegra-launcher-close:focus {
  background: var(--entegra-shell-accent-soft);
  color: var(--entegra-shell-text);
  outline: none;
}

.entegra-shell .entegra-launcher-search {
  position: relative;
  flex: 0 0 auto;
  padding: 0.75rem 1rem 0.5rem;
}

.entegra-shell .entegra-launcher-search-icon {
  position: absolute;
  top: calc(50% + 0.125rem);
  left: 1.6rem;
  display: inline-flex;
  transform: translateY(-50%);
  color: var(--entegra-shell-muted);
  pointer-events: none;
}

.entegra-shell .entegra-launcher-search input {
  width: 100%;
  height: var(--entegra-shell-control-height);
  padding: 0.375rem 0.75rem 0.375rem 2.35rem;
  border: 1px solid #d0d4dd;
  border-radius: 0.375rem;
  background: #f6f8fb;
  color: var(--entegra-shell-text);
  font-size: 0.95rem;
}

.entegra-shell .entegra-launcher-search input:focus {
  border-color: var(--entegra-shell-accent);
  background: var(--entegra-shell-surface);
  outline: none;
  box-shadow: 0 0 0 3px var(--entegra-shell-accent-soft);
}

/* The one scroll region inside the panel. */
.entegra-shell .entegra-launcher-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.35rem 0.75rem 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.entegra-shell .entegra-launcher-body::-webkit-scrollbar {
  width: 0.45rem;
}

.entegra-shell .entegra-launcher-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cbd5e1;
}

.entegra-shell .entegra-launcher-empty {
  padding: 1.5rem 0.5rem;
  color: var(--entegra-shell-muted);
  font-size: 0.875rem;
  text-align: center;
}

.entegra-shell .entegra-launcher-empty.d-none {
  display: none;
}

.entegra-shell .entegra-tree-node[hidden] {
  display: none;
}

/* Scroll lock while the launcher owns the screen. */
body.entegra-shell.entegra-launcher-open {
  overflow: hidden;
}

/* ============================================================
   7b. Bootstrap 3 popovers / tooltips inside the shell
   The calculator (#btnCalculator) and the Superadmin package
   badge are driven by the legacy jQuery popover plugin, which
   emits Bootstrap 3 markup (.popover-title / .popover-content /
   .arrow). The Dashboard loads Tabler's Bootstrap 5 CSS, which
   only styles .popover-header / .popover-body / .popover-arrow -
   so the calculator opened as an invisible empty box there.
   Styling the BS3 markup here makes it render in BOTH runtimes.
   ============================================================ */
.entegra-shell .popover {
  position: absolute;
  z-index: var(--entegra-z-field-overlay);
  display: block;
  max-width: 22rem;
  padding: 0;
  border: 1px solid var(--entegra-shell-border);
  border-radius: var(--entegra-shell-radius);
  background: var(--entegra-shell-surface);
  box-shadow: var(--entegra-shell-shadow);
  color: var(--entegra-shell-text);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}

.entegra-shell .popover.fade:not(.in):not(.show) {
  opacity: 0;
}

.entegra-shell .popover.in,
.entegra-shell .popover.show {
  opacity: 1;
}

.entegra-shell .popover > .popover-title,
.entegra-shell .popover > .popover-header {
  padding: 0.6rem 0.85rem;
  margin: 0;
  border-bottom: 1px solid var(--entegra-shell-border);
  border-radius: calc(var(--entegra-shell-radius) - 1px) calc(var(--entegra-shell-radius) - 1px) 0 0;
  background: #f6f8fb;
  font-size: 0.875rem;
  font-weight: 600;
}

.entegra-shell .popover > .popover-content,
.entegra-shell .popover > .popover-body {
  padding: 0.75rem 0.85rem;
}

/* BS3 draws its caret with .arrow; Tabler styles .popover-arrow. Hide both -
   the shadow already separates the panel from the page. */
.entegra-shell .popover > .arrow,
.entegra-shell .popover > .popover-arrow {
  display: none;
}

/* --- calculator ---
   layouts/partials/calculator.blade.php builds its layout out of Tailwind
   utilities and takes its button colours from css/vendor.css. The Dashboard
   loads NEITHER, so the calculator collapsed to a 29x26 box there while it
   worked on legacy pages. The shell owns the layout and mirrors vendor.css's
   palette, so it renders the same in both runtimes. vendor.css keeps winning
   on legacy pages (its rules are !important) - these values match it. */
.entegra-shell .popover #calculator {
  box-sizing: border-box;
  width: 17rem;
  max-width: 100%;
  padding: 0.5rem;
  background: #f8fafc;
}

.entegra-shell .popover #calculator:focus {
  outline: none;
}

.entegra-shell .popover #calculator > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.6rem;
  margin: -0.5rem -0.5rem 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.entegra-shell .popover #calculator > div:first-child span {
  color: #64748b;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.entegra-shell .popover #calc-hist-btn {
  padding: 0.1rem 0.35rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

.entegra-shell .popover #calc-hist-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.entegra-shell .popover form[name='calc'] {
  margin: 0 0 0.375rem;
}

.entegra-shell .popover #calc-display {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 0.625rem 0.75rem;
  margin: 0 0 0.375rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: right;
}

.entegra-shell .popover #calc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
}

.entegra-shell .popover .calc-btn {
  width: 100%;
  height: auto;
  padding: 0.55rem 0.25rem;
  margin: 0;
  border: 0;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.entegra-shell .popover .calc-btn:active {
  transform: translateY(1px);
}

.entegra-shell .popover .calc-btn-num {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 2px 0 #bfdbfe;
}

.entegra-shell .popover .calc-btn-num:hover {
  background: #dbeafe;
}

.entegra-shell .popover .calc-btn-op {
  background: #e2e8f0;
  color: #475569;
  font-size: 0.9375rem;
  box-shadow: 0 2px 0 #cbd5e1;
}

.entegra-shell .popover .calc-btn-op:hover {
  background: #cbd5e1;
}

.entegra-shell .popover .calc-btn-ac {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 2px 0 #b91c1c;
}

.entegra-shell .popover .calc-btn-ac:hover {
  background: #dc2626;
}

.entegra-shell .popover .calc-btn-ce {
  background: #f59e0b;
  color: #ffffff;
  box-shadow: 0 2px 0 #b45309;
}

.entegra-shell .popover .calc-btn-ce:hover {
  background: #d97706;
}

.entegra-shell .popover .calc-btn-eq {
  background: #16a34a;
  color: #ffffff;
  font-size: 1.125rem;
  box-shadow: 0 2px 0 #15803d;
}

.entegra-shell .popover .calc-btn-eq:hover {
  background: #15803d;
}

/* The popover wrapper must not add padding around the calculator's own chrome. */
.entegra-shell .popover:has(#calculator) > .popover-content,
.entegra-shell .popover:has(#calculator) > .popover-body {
  padding: 0;
  background: #f8fafc;
  border-radius: var(--entegra-shell-radius);
  overflow: hidden;
}

/* Bootstrap 5 renders the trigger's title as a popover header; the calculator
   already draws its own title bar, so on the Dashboard the name appeared twice.
   Bootstrap 3 never rendered a header here, so hiding it also aligns the two. */
.entegra-shell .popover:has(#calculator) > .popover-header,
.entegra-shell .popover:has(#calculator) > .popover-title {
  display: none;
}

/* A hover tooltip on the same button would otherwise sit on top of the open
   popover (the legacy bundle shows both). */
.entegra-shell .popover.show ~ .tooltip,
.entegra-shell .popover.in ~ .tooltip {
  display: none;
}

/* Legacy tooltips: Bootstrap 3 markup (.tooltip-inner / .tooltip-arrow). */
.entegra-shell .tooltip {
  position: absolute;
  z-index: var(--entegra-z-field-overlay);
  display: block;
  font-family: inherit;
  font-size: 0.8125rem;
}

.entegra-shell .tooltip.in {
  opacity: 0.95;
}

.entegra-shell .tooltip .tooltip-inner {
  max-width: 16rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.375rem;
  background: #1a2234;
  color: #ffffff;
  text-align: center;
}

.entegra-shell .tooltip .tooltip-arrow {
  display: none;
}

/* ============================================================
   8. Page-content overlay normalization
   These live in the ROOT stacking context (section 1 removed the
   traps), so a single explicit scale keeps them above the shell.
   ============================================================ */
.entegra-shell .modal-backdrop {
  z-index: var(--entegra-z-modal-backdrop);
}

.entegra-shell .modal {
  z-index: var(--entegra-z-modal);
}

/* Every modal in this application ships Bootstrap 3 markup, but the Dashboard
   styles it with Bootstrap 5. Two consequences the shell has to settle:

   1. Dialog width. BS3: 600 / 300 / 900px; BS5: 500 / 300 / 800px. Today's
      profit is a .modal-lg two-column table - at BS5's narrower width the
      columns collapsed into one very tall column on the Dashboard while legacy
      pages showed them side by side. These values match BS3, so legacy pages
      are unchanged and the Dashboard lines up with them.
   2. Header order. BS3 markup puts the close button BEFORE the title and floats
      it right; BS5 makes .modal-header a flexbox, so the close button appeared
      on the LEFT of the Dashboard modal. */
.entegra-shell .modal-dialog {
  width: auto;
  max-width: 600px;
  margin: 1.875rem auto;
}

.entegra-shell .modal-dialog.modal-sm {
  max-width: 300px;
}

.entegra-shell .modal-dialog.modal-lg {
  max-width: 900px;
}

.entegra-shell .modal-dialog.modal-xl {
  max-width: 1140px;
}

@media (max-width: 991.98px) {
  .entegra-shell .modal-dialog,
  .entegra-shell .modal-dialog.modal-lg,
  .entegra-shell .modal-dialog.modal-xl {
    max-width: calc(100vw - 1.5rem);
  }
}

.entegra-shell .modal-header {
  display: block;
  position: relative;
}

.entegra-shell .modal-header .close {
  float: right;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--entegra-shell-muted);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
}

.entegra-shell .modal-header .close:hover {
  opacity: 1;
}

.entegra-shell .modal-header .btn-close {
  float: right;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  opacity: 0.55;
  cursor: pointer;
}

.entegra-shell .modal-header .btn-close:hover {
  opacity: 1;
}

.entegra-shell .modal-backdrop.show,
.entegra-shell .modal-backdrop.in {
  opacity: 0.24;
}

/* Bootstrap 3 columns float, so they tile inside ANY block parent. Bootstrap 5
   columns are flex items and need a flex parent. app.js injects the
   /reports/profit-loss fragment - whose two halves are .col-md-6 - straight
   into this plain <div>, not into a .row, so on the Dashboard the two columns
   stacked into one 1657px-tall strip while legacy pages showed them side by
   side. Making the injection target a flex row satisfies both grids. */
.entegra-shell #todays_profit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
}

.entegra-shell .entegra-todays-profit-modal .modal-content {
  border: 0;
  border-radius: var(--entegra-shell-radius);
  box-shadow: var(--entegra-shell-shadow-lg);
}

.entegra-shell .entegra-todays-profit-modal .modal-header {
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--entegra-shell-border);
  background: #f8fafc;
}

.entegra-shell .entegra-todays-profit-modal .modal-title {
  color: var(--entegra-shell-text);
  font-size: 1rem;
  font-weight: 800;
}

.entegra-shell .entegra-todays-profit-modal .modal-body {
  padding: 1.25rem;
}

.entegra-shell .entegra-todays-profit-modal .modal-footer {
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--entegra-shell-border);
  background: #ffffff;
}

.entegra-shell .entegra-todays-profit-modal #todays_profit .box,
.entegra-shell .entegra-todays-profit-modal #todays_profit .card {
  width: 100%;
  border: 1px solid var(--entegra-shell-border);
  border-radius: 0.75rem;
  box-shadow: none;
}

.entegra-shell .entegra-todays-profit-modal #todays_profit .box-header {
  border-bottom: 1px solid var(--entegra-shell-border);
  background: #f8fafc;
}

.entegra-shell .select2-container--open,
.entegra-shell .select2-container .select2-dropdown,
.entegra-shell .daterangepicker,
.entegra-shell .datepicker,
.entegra-shell .bootstrap-datetimepicker-widget,
.entegra-shell .ui-datepicker,
.entegra-shell .popover,
.entegra-shell .tooltip,
.entegra-shell .ui-autocomplete {
  z-index: var(--entegra-z-field-overlay);
}

/* select2 / datepicker are appended to <body>, i.e. outside .entegra-shell. */
body.entegra-shell > .select2-container,
body.entegra-shell > .daterangepicker,
body.entegra-shell > .bootstrap-datetimepicker-widget,
body.entegra-shell > .ui-datepicker,
body.entegra-shell > .ui-autocomplete,
body.entegra-shell > .popover,
body.entegra-shell > .tooltip {
  z-index: var(--entegra-z-field-overlay);
}

/* ============================================================
   9. Print
   ============================================================ */
@media print {
  .entegra-shell .entegra-header,
  .entegra-shell .entegra-subheader,
  .entegra-shell .entegra-launcher {
    display: none !important;
  }
}


/* ==========================================================================
   Tabler header typography

   The shell renders in both runtimes, and only one of them (the Dashboard)
   loads real Tabler. Naming the family here rather than relying on inheritance
   means the header reads identically on a legacy page, where the surrounding
   stylesheets are AdminLTE's, and on the Dashboard.

   Sizes are Tabler's: 0.875rem for chrome, 1.25rem for the brand mark. The
   brand wordmark stays larger than Tabler's 1.25rem by request.
   ========================================================================== */

.entegra-shell .entegra-header,
.entegra-shell .entegra-app-header,
.entegra-shell .entegra-navigation,
.entegra-shell .entegra-menu-tree,
.entegra-shell .entegra-launcher {
  font-family: var(--entegra-shell-font);
  font-size: 0.875rem;
  line-height: 1.4285714286;
}

/* Tabler keeps navigation muted until it is hovered or current. */
.entegra-shell .entegra-navigation .entegra-nav-link,
.entegra-shell .entegra-navigation a.nav-link,
.entegra-shell .entegra-navigation > ul > li > a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--entegra-shell-muted);
}
.entegra-shell .entegra-navigation .entegra-nav-link:hover,
.entegra-shell .entegra-navigation a.nav-link:hover,
.entegra-shell .entegra-navigation > ul > li > a:hover,
.entegra-shell .entegra-navigation .entegra-nav-link.active,
.entegra-shell .entegra-navigation a.nav-link.active,
.entegra-shell .entegra-navigation > ul > li.active > a {
  color: var(--entegra-shell-text);
}

/* Header rules: Tabler separates rows with one hairline, no shadow. */
.entegra-shell .entegra-header,
.entegra-shell .entegra-app-header {
  border-bottom: 1px solid var(--entegra-shell-border);
  box-shadow: none;
}
.entegra-shell .entegra-navigation {
  border-bottom: 1px solid var(--entegra-shell-border);
  box-shadow: none;
}

/* Brand: the mark keeps the size asked for earlier; only the type is
   normalised onto Tabler's face and tracking. */
.entegra-shell .entegra-brand-name {
  font-family: var(--entegra-shell-font);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5rem;
}
.entegra-shell .entegra-brand-mark {
  font-family: var(--entegra-shell-font);
  font-weight: 600;
}

/* Store / user name in the header right-hand cluster. */
.entegra-shell .entegra-user-name {
  font-family: var(--entegra-shell-font);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--entegra-shell-text);
}


/* ==========================================================================
   Footer

   Tabler's footer is a quiet, centred hairline strip - it closes the page
   rather than competing with it. Rendered by layouts/partials/footer.blade.php
   in both runtimes, so both pages end the same way.
   ========================================================================== */

.entegra-shell .entegra-footer {
  margin-top: auto;
  padding: 1.25rem var(--entegra-shell-gutter);
  border-top: 1px solid var(--entegra-shell-border);
  background: transparent;
  font-family: var(--entegra-shell-font);
}

.entegra-shell .entegra-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: var(--entegra-shell-max-width);
  margin: 0 auto;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--entegra-shell-muted);
  text-align: center;
}

.entegra-shell .entegra-footer-brand {
  font-weight: 600;
  color: var(--entegra-shell-text);
}

.entegra-shell .entegra-footer-version {
  font-variant-numeric: tabular-nums;
}

.entegra-shell .entegra-footer-sep {
  color: var(--entegra-shell-border);
}

@media print {
  .entegra-shell .entegra-footer { display: none; }
}

/* Blue shell header. Dashboard keeps the shortcut row; legacy pages keep only
   the top header so non-home content starts cleaner. Keep this last so shared
   header normalization below older dirty blocks cannot pull dark text back in. */
body.entegra-tabler-skin .entegra-subheader {
  display: none !important;
}

body.entegra-tabler .entegra-header,
body.entegra-tabler .entegra-app-header,
body.entegra-tabler .entegra-subheader,
body.entegra-tabler-skin .entegra-header,
body.entegra-tabler-skin .entegra-app-header {
  background-color: var(--entegra-header-bg, #0040C1) !important;
  color: #ffffff;
}

body.entegra-tabler .entegra-header,
body.entegra-tabler .entegra-app-header,
body.entegra-tabler .entegra-subheader,
body.entegra-tabler .entegra-navigation,
body.entegra-tabler-skin .entegra-header,
body.entegra-tabler-skin .entegra-app-header {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

body.entegra-tabler .entegra-brand-name,
body.entegra-tabler-skin .entegra-brand-name,
body.entegra-tabler .entegra-brand-name-link,
body.entegra-tabler-skin .entegra-brand-name-link,
body.entegra-tabler .entegra-brand-name-link:hover,
body.entegra-tabler-skin .entegra-brand-name-link:hover,
body.entegra-tabler .entegra-brand-name-link:focus,
body.entegra-tabler-skin .entegra-brand-name-link:focus,
body.entegra-tabler .entegra-user-name,
body.entegra-tabler-skin .entegra-user-name,
body.entegra-tabler .entegra-date-badge,
body.entegra-tabler-skin .entegra-date-badge,
body.entegra-tabler .entegra-header-actions .nav-link,
body.entegra-tabler-skin .entegra-header-actions .nav-link,
body.entegra-tabler .entegra-header .notifications-menu .dropdown-toggle,
body.entegra-tabler-skin .entegra-header .notifications-menu .dropdown-toggle,
body.entegra-tabler .entegra-header-actions .nav-link .ti,
body.entegra-tabler-skin .entegra-header-actions .nav-link .ti,
body.entegra-tabler .entegra-header .notifications-menu .dropdown-toggle .ti,
body.entegra-tabler-skin .entegra-header .notifications-menu .dropdown-toggle .ti {
  color: rgba(255, 255, 255, 0.88) !important;
}

body.entegra-tabler .entegra-brand-name,
body.entegra-tabler-skin .entegra-brand-name,
body.entegra-tabler .entegra-user-name,
body.entegra-tabler-skin .entegra-user-name,
body.entegra-tabler .entegra-shortcut:hover,
body.entegra-tabler .entegra-shortcut:focus,
body.entegra-tabler .entegra-shortcut:active,
body.entegra-tabler .entegra-shortcut.is-active {
  color: #ffffff !important;
}

body.entegra-tabler .entegra-shortcut {
  color: rgba(255, 255, 255, 0.78) !important;
}

body.entegra-tabler .entegra-shortcut:hover::after,
body.entegra-tabler .entegra-shortcut:focus::after,
body.entegra-tabler .entegra-shortcut.is-active::after {
  border-bottom-color: #ffffff !important;
}

body.entegra-tabler .entegra-header-actions .nav-link:hover,
body.entegra-tabler-skin .entegra-header-actions .nav-link:hover,
body.entegra-tabler .entegra-header-actions .nav-link:focus,
body.entegra-tabler-skin .entegra-header-actions .nav-link:focus,
body.entegra-tabler .entegra-header .notifications-menu .dropdown-toggle:hover,
body.entegra-tabler-skin .entegra-header .notifications-menu .dropdown-toggle:hover,
body.entegra-tabler .entegra-header .notifications-menu .dropdown-toggle:focus,
body.entegra-tabler-skin .entegra-header .notifications-menu .dropdown-toggle:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

body.entegra-tabler .entegra-header-actions .entegra-quick-sale,
body.entegra-tabler-skin .entegra-header-actions .entegra-quick-sale {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.13) !important;
  color: #ffffff !important;
}

body.entegra-tabler .entegra-header-actions .fa-info-circle,
body.entegra-tabler-skin .entegra-header-actions .fa-info-circle {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.entegra-shell .entegra-subheader {
  border-top: 0 !important;
}

body.entegra-tabler .entegra-shortcut-bar {
  gap: 0;
}

body.entegra-tabler .entegra-shortcut,
body.entegra-tabler .entegra-shortcut.is-active {
  color: #ffffff !important;
}

body.entegra-tabler .entegra-shortcut.is-active::after {
  border-bottom-color: transparent !important;
}

body.entegra-tabler .entegra-shortcut:hover::after,
body.entegra-tabler .entegra-shortcut:focus::after {
  border-bottom-color: #ffffff !important;
}

body.entegra-tabler .entegra-subheader {
  min-height: 2.75rem;
}

body.entegra-tabler .entegra-subheader > .container-xl {
  min-height: 2.75rem;
}

body.entegra-tabler .entegra-shortcut {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

body.entegra-tabler-skin .entegra-subheader {
  display: block !important;
  background-color: var(--entegra-header-bg, #0040C1) !important;
  color: #ffffff;
}

body.entegra-tabler-skin .entegra-subheader {
  border-top: 0 !important;
  border-bottom-color: rgba(255, 255, 255, 0.22) !important;
}

body.entegra-tabler-skin .entegra-shortcut-bar {
  gap: 0;
}

body.entegra-tabler-skin .entegra-shortcut,
body.entegra-tabler-skin .entegra-shortcut.is-active {
  color: #ffffff !important;
}

body.entegra-tabler-skin .entegra-shortcut.is-active::after {
  border-bottom-color: transparent !important;
}

body.entegra-tabler-skin .entegra-shortcut:hover::after,
body.entegra-tabler-skin .entegra-shortcut:focus::after {
  border-bottom-color: #ffffff !important;
}

body.entegra-tabler .entegra-menu-btn.entegra-menu-btn--brand,
body.entegra-tabler-skin .entegra-menu-btn.entegra-menu-btn--brand {
  border-color: rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.entegra-tabler .entegra-menu-btn.entegra-menu-btn--brand:hover,
body.entegra-tabler .entegra-menu-btn.entegra-menu-btn--brand:focus,
body.entegra-tabler-skin .entegra-menu-btn.entegra-menu-btn--brand:hover,
body.entegra-tabler-skin .entegra-menu-btn.entegra-menu-btn--brand:focus {
  border-color: rgba(255, 255, 255, 0.32) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

body.entegra-tabler-skin .entegra-subheader {
  min-height: 2.75rem;
}

body.entegra-tabler-skin .entegra-subheader > .container-xl {
  min-height: 2.75rem;
}

body.entegra-tabler-skin .entegra-shortcut {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

/* Final shared header contract.
   This is intentionally last: /home (real Tabler) and every legacy page must
   paint the SAME shell header/subheader and the same compact user-selected
   shortcut row. */
body.entegra-shell .entegra-header,
body.entegra-shell .entegra-app-header,
body.entegra-shell .entegra-subheader {
  background: var(--entegra-header-bg, #0040C1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

body.entegra-shell .entegra-subheader {
  display: block !important;
  min-height: 2.75rem !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
}

body.entegra-shell .entegra-subheader > .container-xl {
  min-height: 2.75rem !important;
}

body.entegra-shell .entegra-shortcut-bar {
  gap: 0 !important;
  align-items: stretch !important;
  padding: 0 !important;
}

body.entegra-shell .entegra-shortcut {
  height: auto !important;
  min-height: 2.75rem !important;
  padding: 0.375rem 0.75rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

body.entegra-shell .entegra-shortcut:hover,
body.entegra-shell .entegra-shortcut:focus,
body.entegra-shell .entegra-shortcut.is-active {
  background: transparent !important;
  color: #ffffff !important;
}

body.entegra-shell .entegra-shortcut::after {
  content: "" !important;
  position: absolute !important;
  left: 0.75rem !important;
  right: 0.75rem !important;
  bottom: 0 !important;
  border-bottom: 2px solid transparent !important;
  pointer-events: none !important;
}

body.entegra-shell .entegra-shortcut:hover::after,
body.entegra-shell .entegra-shortcut:focus::after,
body.entegra-shell .entegra-shortcut.is-active::after {
  border-bottom-color: #ffffff !important;
}

body.entegra-shell .entegra-shortcut .entegra-node-icon {
  width: 1.2rem !important;
  height: 1.2rem !important;
}

body.entegra-shell .entegra-shortcut .entegra-node-icon svg,
body.entegra-shell .entegra-shortcut .entegra-node-icon i {
  width: 1.2rem !important;
  height: 1.2rem !important;
  font-size: 1.15rem !important;
  color: currentColor !important;
}

body.entegra-shell .entegra-shortcut-title {
  max-width: 11rem !important;
}

body.entegra-shell .entegra-shortcut-menu {
  color: var(--entegra-shell-text) !important;
}

body.entegra-shell .entegra-tree-link,
body.entegra-shell .entegra-tree-toggle,
body.entegra-shell .entegra-tree-title {
  color: var(--entegra-shell-text);
}

body.entegra-shell .entegra-tree-link:hover,
body.entegra-shell .entegra-tree-link:focus,
body.entegra-shell .entegra-tree-node.is-active > .entegra-tree-row .entegra-tree-link,
body.entegra-shell .entegra-tree-node.is-active > .entegra-tree-row .entegra-tree-toggle {
  color: var(--entegra-shell-accent);
}

body.entegra-shell .entegra-node-icon i[class*="fa-"],
body.entegra-shell .entegra-node-icon i.fa,
body.entegra-shell .entegra-node-icon i.fas,
body.entegra-shell .entegra-node-icon i.far,
body.entegra-shell .entegra-node-icon i.fab {
  font-family: "tabler-icons" !important;
}

/* Final top-action icon contract.
   Every icon in the top header must use the same box, glyph size and hover
   surface, regardless of whether it comes from core, notifications, Superadmin
   or a module header hook. */
body.entegra-shell .entegra-header-actions {
  gap: 0.35rem !important;
}

body.entegra-shell .entegra-header-actions > button,
body.entegra-shell .entegra-header-actions > a,
body.entegra-shell .entegra-header-actions > .nav-item,
body.entegra-shell .entegra-header-actions > .entegra-package-info,
body.entegra-shell .entegra-header .notifications-menu {
  flex: 0 0 auto !important;
}

body.entegra-shell .entegra-header-actions .nav-link,
body.entegra-shell .entegra-header .notifications-menu .dropdown-toggle,
body.entegra-shell .entegra-header-actions .clock_in_btn,
body.entegra-shell .entegra-header-actions .clock_out_btn,
body.entegra-shell .entegra-header-actions a[href*="sub_type=repair"],
body.entegra-shell .entegra-package-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  min-width: 2.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body.entegra-shell .entegra-header-actions .nav-link:hover,
body.entegra-shell .entegra-header-actions .nav-link:focus,
body.entegra-shell .entegra-header .notifications-menu .dropdown-toggle:hover,
body.entegra-shell .entegra-header .notifications-menu .dropdown-toggle:focus,
body.entegra-shell .entegra-header-actions .clock_in_btn:hover,
body.entegra-shell .entegra-header-actions .clock_in_btn:focus,
body.entegra-shell .entegra-header-actions .clock_out_btn:hover,
body.entegra-shell .entegra-header-actions .clock_out_btn:focus,
body.entegra-shell .entegra-header-actions a[href*="sub_type=repair"]:hover,
body.entegra-shell .entegra-header-actions a[href*="sub_type=repair"]:focus,
body.entegra-shell .entegra-package-trigger:hover,
body.entegra-shell .entegra-package-trigger:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

body.entegra-shell .entegra-header-actions .nav-link > .ti,
body.entegra-shell .entegra-header-actions .nav-link > i,
body.entegra-shell .entegra-header .notifications-menu .dropdown-toggle > .ti,
body.entegra-shell .entegra-header-actions .clock_in_btn svg,
body.entegra-shell .entegra-header-actions .clock_out_btn svg,
body.entegra-shell .entegra-header-actions a[href*="sub_type=repair"] svg,
body.entegra-shell .entegra-package-trigger > .ti {
  width: 1.25rem !important;
  height: 1.25rem !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  color: currentColor !important;
}

body.entegra-shell .entegra-header-actions a[href*="sub_type=repair"] {
  gap: 0 !important;
  font-size: 0 !important;
}

body.entegra-shell .entegra-header-actions .entegra-date-link {
  width: auto !important;
  min-width: 2.5rem !important;
  padding: 0 0.65rem !important;
  gap: 0.4rem !important;
}

body.entegra-shell .entegra-header-actions .entegra-date-link > .ti {
  margin: 0 !important;
}

body.entegra-shell .entegra-header-actions .entegra-quick-sale,
body.entegra-shell .entegra-header-actions .entegra-fx-widget-toggle {
  width: auto !important;
  min-width: 2.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  border-radius: 0.5rem !important;
}

body.entegra-shell .entegra-header-actions .entegra-fx-widget-toggle {
  justify-content: flex-start !important;
  min-width: 8.75rem !important;
  max-width: 16rem !important;
  padding: 0 0.75rem !important;
  gap: 0.45rem !important;
}

body.entegra-shell .entegra-header-actions .entegra-fx-widget-label {
  display: inline-block !important;
  min-width: 0 !important;
  max-width: 11.5rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.entegra-shell .entegra-header-actions .entegra-quick-sale {
  padding: 0 0.85rem !important;
  margin-left: 0.15rem !important;
  margin-right: 0.35rem !important;
}

body.entegra-shell .entegra-fx-widget {
  margin-right: 0.35rem !important;
}

body.entegra-shell .entegra-header-actions .avatar {
  width: 2rem !important;
  height: 2rem !important;
}

body.entegra-shell .entegra-header-actions .hide,
body.entegra-shell .entegra-header-actions .clock_in_btn.hide,
body.entegra-shell .entegra-header-actions .clock_out_btn.hide {
  display: none !important;
}

body.entegra-shell .entegra-header-actions .entegra-corefatura-widget-toggle {
  position: relative !important;
  width: auto !important;
  min-width: 5.75rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  padding: 0 0.7rem !important;
  gap: 0.4rem !important;
  border-radius: 0.5rem !important;
}

body.entegra-shell .entegra-header-actions .entegra-corefatura-widget-toggle .entegra-corefatura-widget-icon {
  width: 1.5rem !important;
  height: 1.5rem !important;
  flex-basis: 1.5rem !important;
}

body.entegra-shell .entegra-header-actions .entegra-corefatura-widget-toggle .badge {
  position: absolute !important;
  top: -0.25rem !important;
  right: -0.15rem !important;
  min-width: 1rem !important;
  height: 1rem !important;
  padding: 0 0.25rem !important;
  border-radius: 999px !important;
  font-size: 0.65rem !important;
  line-height: 1rem !important;
}

body.entegra-shell .entegra-header-actions .entegra-corefatura-widget-label {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.entegra-shell .entegra-commerce-card {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 0.85rem 1.8rem rgba(15, 23, 42, 0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.entegra-shell .entegra-commerce-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.18);
}

.entegra-shell .entegra-commerce-card::after {
  position: absolute;
  inset: auto -2.25rem -2.75rem auto;
  width: 8rem;
  height: 8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  content: "";
}

.entegra-shell .entegra-commerce-card--marketplace {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.entegra-shell .entegra-commerce-card--storefront {
  background: linear-gradient(135deg, #10b981, #16a34a);
}

.entegra-shell .entegra-commerce-card--social {
  background: linear-gradient(135deg, #ec4899, #7c3aed);
}

.entegra-shell .entegra-commerce-card--corefatura {
  background: linear-gradient(135deg, #f97316, #dc2626);
}

.entegra-shell .entegra-commerce-card--default {
  background: linear-gradient(135deg, #475569, #0f172a);
}

.entegra-shell .entegra-commerce-card .card-body {
  position: relative;
  z-index: 1;
}

.entegra-shell .entegra-commerce-card-icon {
  width: 3rem;
  height: 3rem;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.entegra-shell .entegra-commerce-card-icon .ti {
  font-size: 1.6rem;
}

.entegra-shell .entegra-commerce-card-title {
  color: #ffffff;
  font-size: 0.98rem;
}

.entegra-shell .entegra-commerce-card-subtitle,
.entegra-shell .entegra-commerce-card-counter .small,
.entegra-shell .entegra-commerce-card-total {
  color: rgba(255, 255, 255, 0.82);
}

.entegra-shell .entegra-commerce-card-counter .h2 {
  color: #ffffff;
}

.entegra-shell .entegra-commerce-card-badge {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.entegra-shell .entegra-commerce-card-badge.is-warning {
  background: rgba(254, 240, 138, 0.24);
  color: #fff7ed;
}

/* ================================================================
   HEADER RENGİ -> Ayarlar > İşletme Ayarları > Tema Rengi

   Header zemini eskiden #0040C1 olarak sabit kodluydu ve !important
   ile kilitliydi; Tema Rengi ayarı hiçbir zaman header'a ulaşmıyordu.
   Artık var(--entegra-header-bg) okunuyor ve değişken, layout'un
   body'ye bastığı skin-* sınıfından geliyor:

       <body class="... skin-{{ session('business.theme_color') }} ...">

   Seçenekler app/Http/Controllers/BusinessController.php içindeki
   $theme_colors dizisinden gelir (14 renk).

   VARSAYILAN MAVİ: ayar boşsa layout 'blue-light' basar; 'primary'
   de Ayarlar'daki "Blue" seçeneğidir. Her ikisi de mevcut #0040C1'i
   korur, böylece hiçbir işletme için görünüm kendiliğinden değişmez.
   ================================================================ */

body.skin-blue-light,
body.skin-primary        { --entegra-header-bg: #0040C1; }

body.skin-indigo         { --entegra-header-bg: #3730a3; }
body.skin-violet         { --entegra-header-bg: #5b21b6; }
body.skin-purple         { --entegra-header-bg: #6b21a8; }
body.skin-teal           { --entegra-header-bg: #0f766e; }
body.skin-emerald        { --entegra-header-bg: #047857; }
body.skin-green          { --entegra-header-bg: #15803d; }
body.skin-sky            { --entegra-header-bg: #0369a1; }
body.skin-pink           { --entegra-header-bg: #9d174d; }
body.skin-rose           { --entegra-header-bg: #9f1239; }
body.skin-red            { --entegra-header-bg: #b91c1c; }
body.skin-orange         { --entegra-header-bg: #c2410c; }
body.skin-yellow         { --entegra-header-bg: #a16207; }
body.skin-slate          { --entegra-header-bg: #334155; }

/* Eski AdminLTE skinleri de ayarda kayıtlı olabilir (skin-black,
   skin-black-light). Koyu bir header bekliyorlar. */
body.skin-black,
body.skin-black-light    { --entegra-header-bg: #1f2937; }

/* ================================================================
   e-Fatura uyarı rozeti

   Markup `badge bg-red-lt text-red` (Tabler sınıfları) kullanıyor ama
   .bg-red-lt bu yığında HİÇ tanımlı değil - rozet zeminsiz kalıyor ve
   .badge'in Bootstrap 3 varsayılanına düşüyordu. Header'daki
   .notifications_count rozetiyle aynı dile getirildi ve butonun sağ üst
   köşesine balon olarak oturtuldu.
   ================================================================ */

.entegra-shell .entegra-corefatura-widget-toggle {
  position: relative;
}

.entegra-shell .entegra-corefatura-widget-toggle > .badge {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #d63939 !important;
  color: #ffffff !important;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  /* header zemininde yüzüyormuş gibi dursun */
  box-shadow: 0 0 0 2px var(--entegra-header-bg, #0040C1);
}

/* Rozet varken butonun kendisi de dikkat çeksin (mevcut .has-alerts
   sınıfı zaten markup'ta basılıyor). */
.entegra-shell .entegra-corefatura-widget-toggle.has-alerts {
  border-color: rgba(253, 186, 116, 0.55) !important;
}

/* ================================================================
   UYGULAMA BAŞLATICI - SEKMELER + KART GRID

   Ağaç korunuyor (arama tam derinlikte çalışmalı); grid onun ÖNÜNE
   bir giriş katmanı olarak ekleniyor.

   Renk tonu modülün menü hiyerarşisindeki üst dalından türetiliyor -
   elle bakımı gereken bir kategori tablosu yok, yeni modül geldiğinde
   kendiliğinden doğru tonu alır.
   ================================================================ */

/* --- sekme şeridi --- */
.entegra-shell .entegra-launcher-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0 1rem 0.75rem;
  border-radius: 0.6rem;
  background: rgba(15, 23, 42, 0.05);
}
.entegra-shell .entegra-launcher-tab {
  flex: 1 1 0;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: #475569;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.entegra-shell .entegra-launcher-tab:hover {
  color: #0f172a;
}
.entegra-shell .entegra-launcher-tab.is-active {
  background: #ffffff;
  color: var(--entegra-header-bg, #0040C1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.entegra-shell .entegra-launcher-tab:focus-visible {
  outline: 2px solid var(--entegra-header-bg, #0040C1);
  outline-offset: 1px;
}

/* --- kart grid --- */
.entegra-shell .entegra-app-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0 1rem 1rem;
}
.entegra-shell .entegra-app-cell {
  position: relative;
}
.entegra-shell .entegra-app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 6.25rem;
  padding: 0.85rem 0.5rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.75rem;
  background: #ffffff;
  color: #0f172a;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.entegra-shell .entegra-app-card:hover,
.entegra-shell .entegra-app-card:focus-visible {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06),
              0 10px 20px rgba(15, 23, 42, 0.10);
  text-decoration: none;
  color: #0f172a;
}
.entegra-shell .entegra-app-card.is-active {
  border-color: var(--entegra-app-tone, #0040C1);
}

/* ikon kutusu - tonun yumuşak zemini, tonun dolu glifi */
.entegra-shell .entegra-app-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--entegra-app-tone, #0040C1) 12%, #ffffff);
  color: var(--entegra-app-tone, #0040C1);
  transition: background 0.15s ease, color 0.15s ease;
}
.entegra-shell .entegra-app-card-icon .entegra-node-icon,
.entegra-shell .entegra-app-card-icon i {
  font-size: 1.5rem;
  line-height: 1;
  color: inherit;
}
/* hover'da ikon doluya döner - "premium" his buradan geliyor */
.entegra-shell .entegra-app-card:hover .entegra-app-card-icon,
.entegra-shell .entegra-app-card:focus-visible .entegra-app-card-icon {
  background: var(--entegra-app-tone, #0040C1);
  color: #ffffff;
}

.entegra-shell .entegra-app-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}

/* --- yıldız (favori) --- */
.entegra-shell .entegra-app-pin {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #cbd5e1;
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
/* dokunmatikte hover yok: yıldız her zaman görünür kalmalı */
.entegra-shell .entegra-app-cell:hover .entegra-app-pin,
.entegra-shell .entegra-app-pin:focus-visible,
.entegra-shell .entegra-app-pin.is-pinned {
  opacity: 1;
}
@media (hover: none) {
  .entegra-shell .entegra-app-pin { opacity: 1; }
}
.entegra-shell .entegra-app-pin:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #64748b;
}
.entegra-shell .entegra-app-pin.is-pinned {
  color: #f59f00;
}
.entegra-shell .entegra-app-pin.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

.entegra-shell .entegra-app-grid-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.5rem 0.5rem;
  color: #64748b;
  font-size: 0.8125rem;
  text-align: center;
}

/* --- ton paleti (üst seviye dalın sırasından) --- */
.entegra-shell [data-tone="0"] { --entegra-app-tone: #206bc4; }
.entegra-shell [data-tone="1"] { --entegra-app-tone: #2fb344; }
.entegra-shell [data-tone="2"] { --entegra-app-tone: #f76707; }
.entegra-shell [data-tone="3"] { --entegra-app-tone: #7c3aed; }
.entegra-shell [data-tone="4"] { --entegra-app-tone: #0ca678; }
.entegra-shell [data-tone="5"] { --entegra-app-tone: #d6336c; }
.entegra-shell [data-tone="6"] { --entegra-app-tone: #4263eb; }
.entegra-shell [data-tone="7"] { --entegra-app-tone: #ae3ec9; }
.entegra-shell [data-tone="8"] { --entegra-app-tone: #f59f00; }
.entegra-shell [data-tone="9"] { --entegra-app-tone: #0c8599; }

/* color-mix desteklemeyen tarayıcıda ikon kutusu düz açık gri kalır */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .entegra-shell .entegra-app-card-icon { background: #f1f5f9; }
}

/* --- dar ekran: 2 sütun --- */
@media (max-width: 400px) {
  .entegra-shell .entegra-app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* [hidden] KORUMASI

   JS bu üç yüzeyi `hidden` özniteliğiyle açıp kapatıyor. `hidden` yalnızca
   `display: none` VARSAYILANIDIR; herhangi bir kural display basarsa ezilir -
   yukarıdaki .entegra-launcher-tabs{display:flex} tam olarak bunu yapıyordu ve
   arama sırasında sekmeler gizlenmiyordu. Açıkça bastırıyoruz. */
.entegra-shell .entegra-launcher-tabs[hidden],
.entegra-shell .entegra-launcher-panels[hidden],
.entegra-shell .entegra-launcher-tabpanel[hidden],
.entegra-shell .entegra-launcher-tree[hidden] {
  display: none !important;
}

/* ================================================================
   KISAYOL BARI - TAŞMA SINIRI

   Bar tek satır ve sarmıyor. Çok favorisi olan kullanıcıda listenin
   kuyruğu ekran dışında kalıyordu: öğeler render ediliyor ve teknik
   olarak kaydırılabilir oluyordu, ama kaydırma çubuğu bilerek gizli
   olduğu için erişilemiyordu.

   Kaç öğenin sığdığı bir viewport genişliği sorusudur, o yüzden cevabı
   CSS veriyor. Sınırı aşanlar gizleniyor; hepsi launcher'da duruyor ve
   bar'ın sonundaki "Tüm Modüller" çıkışı her genişlikte görünür kalıyor.

   .entegra-shortcut-more bu sayımın DIŞINDA (.entegra-shortcut-bar'ın
   kardeşi), yoksa kendisi de gizlenebilirdi.
   ================================================================ */

/* 1) TAŞMA GARANTİSİ: öğeler sıkışabilsin.
      .entegra-shortcut-dropdown'da flex:0 0 auto vardı ve hiçbirinde
      min-width:0 yoktu - flex öğesi varsayılan olarak içeriğinin altına
      inemez, bu yüzden sıkışmak yerine kabın DIŞINA taşıp yanındaki
      "Tüm Modüller" çipinin üstüne biniyorlardı. Aşağıdaki sayım kuralı
      yanlış tahmin etse bile bu kural üst üste binmeyi imkânsız kılar. */
.entegra-shell .entegra-shortcut-bar > * {
  flex: 0 1 auto;
  min-width: 0;
}
.entegra-shell .entegra-shortcut-bar .entegra-shortcut-title {
  min-width: 0;
  flex: 0 1 auto;
}

/* 2) OKUNABİLİRLİK: sıkışma son çare olsun, normalde sayı sınırlansın.
      Ölçüler ~1650px'de 11 öğenin taştığı gözleminden geriye hesaplandı. */
.entegra-shell .entegra-shortcut-bar > *:nth-child(n + 4) { display: none; }

@media (min-width: 992px) {
  .entegra-shell .entegra-shortcut-bar > *:nth-child(n + 4) { display: flex; }
  .entegra-shell .entegra-shortcut-bar > *:nth-child(n + 6) { display: none; }
}
@media (min-width: 1200px) {
  .entegra-shell .entegra-shortcut-bar > *:nth-child(n + 6) { display: flex; }
  .entegra-shell .entegra-shortcut-bar > *:nth-child(n + 8) { display: none; }
}
@media (min-width: 1500px) {
  .entegra-shell .entegra-shortcut-bar > *:nth-child(n + 8) { display: flex; }
  .entegra-shell .entegra-shortcut-bar > *:nth-child(n + 10) { display: none; }
}

/* Uzun modül adları bar'ı tek başına yiyordu; tam ad title="" ile
   erişilebilir kalıyor. */
.entegra-shell .entegra-shortcut-title {
  max-width: 7.5rem;
}

/* --- "Tüm Modüller" çıkışı --- */
.entegra-shell .entegra-shortcut-more {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.9;
}
.entegra-shell .entegra-shortcut-more:hover,
.entegra-shell .entegra-shortcut-more:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}
/* Dar ekranda yalnızca ikon kalsın - metin yeri boşa harcamasın. */
@media (max-width: 991.98px) {
  .entegra-shell .entegra-shortcut-more .entegra-shortcut-title { display: none; }
}