/* Gastrobrix panel — Cohesia design system
   Loaded AFTER self.css so it wins over kitchen-hearth* terracotta/dark shell.
   Public QR themes are not affected.
*/

:root {
  --gb-ink: #2C3E50;
  --gb-accent: #818C6C;
  --gb-accent-soft: rgba(129, 140, 108, 0.18);
  --gb-canvas: #F8F9FA;
  --gb-surface: #FFFFFF; /* pure white shell — sidebar/header/cards */
  --gb-muted: #7F8C8D;
  --gb-line: #ECF0F1;
  --gb-line-strong: #BDC3C7;
  --gb-success: #27AE60;
  --gb-success-soft: rgba(39, 174, 96, 0.14);
  --gb-warn: #F39C12;
  --gb-warn-soft: rgba(243, 156, 18, 0.16);
  --gb-radius: 12px;
  --gb-radius-sm: 8px;
  --gb-shadow: 0 1px 2px rgba(44, 62, 80, 0.04), 0 10px 28px rgba(44, 62, 80, 0.07);
  --gb-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
}

/* Remap kitchen theme tokens → Cohesia (any leftover var() usage) */
.app-theme-kitchen-hearth,
.app-theme-kitchen-hearth-mid,
.app-theme-kitchen-hearth-light,
.app-theme-kitchen-crimson,
.app-theme-kitchen-azure,
.app-container {
  --kh-sidebar: var(--gb-surface);
  --kh-header: var(--gb-surface);
  --kh-bg: var(--gb-canvas);
  --kh-card: var(--gb-surface);
  --kh-accent: var(--gb-ink);
  --kh-accent-hover: #243342;
  --khm-sidebar: var(--gb-surface);
  --khm-header: var(--gb-surface);
  --khm-bg: var(--gb-canvas);
  --khm-card: var(--gb-surface);
  --khm-accent: var(--gb-ink);
  --khm-accent-hover: #243342;
  --khl-sidebar: var(--gb-surface);
  --khl-header: var(--gb-surface);
  --khl-bg: var(--gb-canvas);
  --khl-card: var(--gb-surface);
  --khl-accent: var(--gb-ink);
  --khl-accent-hover: #243342;
}

html, body,
html body.app-container,
body .app-container,
.app-theme-kitchen-hearth.app-container,
.app-theme-kitchen-hearth-mid.app-container,
.app-theme-kitchen-hearth-light.app-container,
.app-theme-kitchen-crimson.app-container,
.app-theme-kitchen-azure.app-container {
  font-family: var(--gb-font) !important;
  background: var(--gb-canvas) !important;
  color: var(--gb-ink);
}

.app-main,
.app-main__outer,
.app-main__inner,
.app-theme-kitchen-hearth .app-main,
.app-theme-kitchen-hearth .app-main__outer,
.app-theme-kitchen-hearth .app-main__inner,
.app-theme-kitchen-hearth-mid .app-main,
.app-theme-kitchen-hearth-mid .app-main__outer,
.app-theme-kitchen-hearth-mid .app-main__inner,
.app-theme-kitchen-hearth-light .app-main,
.app-theme-kitchen-hearth-light .app-main__outer,
.app-theme-kitchen-hearth-light .app-main__inner {
  background: var(--gb-canvas) !important;
}

/* —— Light header —— */
.app-header,
.app-header.header-shadow,
.app-header.bg-kitchen-hearth,
.app-header.bg-kitchen-hearth-mid,
.app-header.bg-kitchen-hearth-light,
.app-header.bg-kitchen-crimson,
.app-header.bg-kitchen-azure {
  background: var(--gb-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--gb-line) !important;
  box-shadow: none !important;
  color: var(--gb-ink) !important;
}
.app-header .app-header__logo,
.app-header.header-text-light .app-header__logo,
.app-header.header-text-dark .app-header__logo {
  background: var(--gb-surface) !important;
  border-right: 1px solid var(--gb-line) !important;
}
.app-header .app-header-left,
.app-header .app-header-right,
.app-header .widget-heading,
.app-header .widget-subheading,
.app-header .header-user-info,
.app-header a,
.app-header .header-tenant-info,
.app-header .header-tenant-label,
.app-header .header-tenant-label strong,
.app-header.header-text-light .header-tenant-info,
.app-header.header-text-light .header-tenant-label,
.app-header.header-text-light .header-tenant-label strong,
.app-header.header-text-light .widget-heading,
.app-header.header-text-light .widget-subheading {
  color: var(--gb-ink) !important;
}

/* —— Light sidebar (board) —— */
.app-sidebar,
.app-sidebar.sidebar-shadow,
.app-sidebar.bg-kitchen-hearth,
.app-sidebar.bg-kitchen-hearth-mid,
.app-sidebar.bg-kitchen-hearth-light,
.app-sidebar.bg-kitchen-crimson,
.app-sidebar.bg-kitchen-azure,
.bg-kitchen-hearth,
.bg-kitchen-hearth-mid,
.bg-kitchen-hearth-light,
.bg-kitchen-crimson,
.bg-kitchen-azure {
  background: var(--gb-surface) !important;
  background-color: var(--gb-surface) !important;
  background-image: none !important;
  border-right: 1px solid var(--gb-line) !important;
  box-shadow: none !important;
}

.app-sidebar .app-sidebar__inner,
.app-sidebar .scrollbar-sidebar {
  background: var(--gb-surface) !important;
}

.app-sidebar .app-sidebar__heading,
.app-sidebar.sidebar-text-light .app-sidebar__heading,
.app-sidebar.sidebar-text-dark .app-sidebar__heading {
  color: var(--gb-muted) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.app-sidebar .app-sidebar__heading::before,
.app-sidebar.sidebar-text-light .app-sidebar__heading::before {
  background: var(--gb-line-strong) !important;
}

.app-sidebar .app-sidebar__heading {
  margin: 1rem 1rem 0.4rem !important;
  padding: 0 !important;
}

.app-sidebar .vertical-nav-menu li a,
.app-sidebar.sidebar-text-light .vertical-nav-menu li a,
.app-sidebar.sidebar-text-dark .vertical-nav-menu li a,
.app-sidebar.sidebar-text-light .vertical-nav-menu ul > li > a {
  color: var(--gb-ink) !important;
  border-radius: var(--gb-radius-sm) !important;
  margin: 2px 10px;
  font-weight: 550;
  border-left: 0 !important;
  /* main.css icons are absolute at left:5px — keep 45px text gutter */
  padding: 0 1.25rem 0 45px !important;
}
.app-sidebar .vertical-nav-menu li a .metismenu-icon,
.app-sidebar .vertical-nav-menu li a i.metismenu-icon,
.app-sidebar .vertical-nav-menu li a i.metismenu-state-icon,
.app-sidebar.sidebar-text-light .vertical-nav-menu li a i.metismenu-icon,
.app-sidebar.sidebar-text-light .vertical-nav-menu li a i.metismenu-state-icon {
  color: var(--gb-muted) !important;
  opacity: 1 !important;
  left: 10px !important;
}

.app-sidebar .vertical-nav-menu li a:hover,
.app-sidebar.sidebar-text-light .vertical-nav-menu li a:hover,
.app-sidebar.bg-kitchen-hearth-mid.sidebar-text-light .vertical-nav-menu li a:hover,
.app-sidebar.bg-kitchen-hearth.sidebar-text-light .vertical-nav-menu li a:hover {
  background: #F4F5F6 !important;
  color: var(--gb-ink) !important;
}

.app-sidebar .vertical-nav-menu li.mm-active > a,
.app-sidebar .vertical-nav-menu li a.mm-active,
.app-sidebar.sidebar-text-light .vertical-nav-menu li.mm-active > a,
.app-sidebar.sidebar-text-light .vertical-nav-menu ul > li.mm-active > a,
.app-sidebar.sidebar-text-light .vertical-nav-menu ul > li > a.mm-active,
.app-sidebar.bg-kitchen-hearth.sidebar-text-light .vertical-nav-menu li.mm-active > a,
.app-sidebar.bg-kitchen-hearth.sidebar-text-light .vertical-nav-menu ul > li.mm-active > a,
.app-sidebar.bg-kitchen-hearth.sidebar-text-light .vertical-nav-menu ul > li > a.mm-active,
.app-sidebar.bg-kitchen-hearth-mid.sidebar-text-light .vertical-nav-menu li.mm-active > a,
.app-sidebar.bg-kitchen-hearth-mid.sidebar-text-light .vertical-nav-menu ul > li.mm-active > a,
.app-sidebar.bg-kitchen-hearth-mid.sidebar-text-light .vertical-nav-menu ul > li > a.mm-active,
.app-sidebar.bg-kitchen-hearth-light.sidebar-text-light .vertical-nav-menu li.mm-active > a,
.app-sidebar.bg-kitchen-hearth-light.sidebar-text-light .vertical-nav-menu ul > li.mm-active > a,
.app-sidebar.bg-kitchen-hearth-light.sidebar-text-light .vertical-nav-menu ul > li > a.mm-active {
  background: var(--gb-accent-soft) !important;
  color: var(--gb-ink) !important;
  font-weight: 700 !important;
  border-left: 3px solid var(--gb-accent) !important;
  border-radius: 0 var(--gb-radius-sm) var(--gb-radius-sm) 0 !important;
  padding-left: 42px !important;
}
.app-sidebar .vertical-nav-menu li.mm-active > a .metismenu-icon,
.app-sidebar.sidebar-text-light .vertical-nav-menu li.mm-active > a i.metismenu-icon {
  color: var(--gb-accent) !important;
}

/* —— Page toolbar (replaces heavy app-page-title on migrated pages) —— */
.gb-page-toolbar,
.app-page-title,
.app-theme-kitchen-hearth .app-page-title,
.app-theme-kitchen-hearth-mid .app-page-title,
.app-theme-kitchen-hearth-light .app-page-title {
  margin: -15px -15px 1.25rem;
  padding: 0.85rem 1.25rem;
  background: var(--gb-surface) !important;
  border-bottom: 1px solid var(--gb-line);
}
.gb-page-toolbar .page-title-wrapper,
.app-page-title .page-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.gb-page-toolbar .page-title-heading,
.page-title-heading,
.page-title-heading > div {
  color: var(--gb-ink) !important;
}
.gb-page-toolbar .page-title-heading {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 1.15rem;
  font-weight: 750;
  margin: 0;
}
.gb-page-toolbar .page-title-subheading,
.page-title-subheading {
  color: var(--gb-muted) !important;
  font-size: 0.82rem;
  font-weight: 550;
}
.gb-page-toolbar .page-title-actions,
.gb-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: auto;
}
.gb-page-toolbar .page-title-actions .btn,
.gb-toolbar-actions .btn {
  margin: 0 !important;
}
/* Unify legacy app-page-title with toolbar look */
.gb-page-toolbar .page-title-icon,
.app-page-title .page-title-icon {
  display: none !important;
}
.app-page-title .page-title-heading {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 1.15rem;
  font-weight: 750;
  margin: 0;
}
.app-page-title .page-title-heading > div {
  display: contents;
}
.app-page-title .page-title-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: auto;
}
.app-page-title .page-title-actions .btn {
  margin: 0 !important;
}

/* Sidebar collapse hamburger — visible on light shell
   (main.css sidebar-text-light sets white bars → invisible on #fff) */
.app-header .header__pane .hamburger-inner,
.app-header .header__pane .hamburger-inner::before,
.app-header .header__pane .hamburger-inner::after,
.app-header .header__pane .hamburger.is-active .hamburger-inner,
.app-header .header__pane .hamburger.is-active .hamburger-inner::before,
.app-header .header__pane .hamburger.is-active .hamburger-inner::after,
.app-sidebar .app-header__logo .hamburger-inner,
.app-sidebar .app-header__logo .hamburger-inner::before,
.app-sidebar .app-header__logo .hamburger-inner::after,
.app-sidebar.sidebar-text-light .app-header__logo .hamburger-inner,
.app-sidebar.sidebar-text-light .app-header__logo .hamburger-inner::before,
.app-sidebar.sidebar-text-light .app-header__logo .hamburger-inner::after,
.app-sidebar.sidebar-text-dark .app-header__logo .hamburger-inner,
.app-sidebar.sidebar-text-dark .app-header__logo .hamburger-inner::before,
.app-sidebar.sidebar-text-dark .app-header__logo .hamburger-inner::after,
.app-header.header-text-light .header__pane .hamburger-inner,
.app-header.header-text-light .header__pane .hamburger-inner::before,
.app-header.header-text-light .header__pane .hamburger-inner::after,
.app-header__mobile-menu .hamburger-inner,
.app-header__mobile-menu .hamburger-inner::before,
.app-header__mobile-menu .hamburger-inner::after {
  background-color: var(--gb-ink) !important;
}
/* Hide sidebar collapse hamburger (desktop logo pane) */
.app-header .app-header__logo .header__pane,
.app-sidebar .app-header__logo .header__pane,
.app-header .header__pane .hamburger.close-sidebar-btn,
.app-sidebar .app-header__logo .hamburger.close-sidebar-btn {
  display: none !important;
}

/* Keep desktop sidebar + logo full size (collapse UI removed) */
@media (min-width: 1250px) {
  .app-container.closed-sidebar:not(.closed-sidebar-mobile) .app-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    flex: 0 0 280px !important;
  }
  .app-container.closed-sidebar.fixed-sidebar:not(.closed-sidebar-mobile) .app-main__outer {
    padding-left: 280px !important;
  }
  .app-container.closed-sidebar:not(.closed-sidebar-mobile) .app-header .app-header__logo {
    width: 280px !important;
    padding: 0 1.5rem !important;
  }
  .app-container.closed-sidebar:not(.closed-sidebar-mobile) .app-header .app-header__logo .logo-mark {
    display: block !important;
  }
  .app-container.closed-sidebar:not(.closed-sidebar-mobile) .app-header .app-header__logo .logo-src {
    display: block !important;
    width: 128px !important;
    height: 34px !important;
    background: url(/resources/images/gastrobrix_logo.png) center / contain no-repeat !important;
  }
  .app-container.closed-sidebar:not(.closed-sidebar-mobile) .app-sidebar .app-sidebar__inner .app-sidebar__heading {
    text-indent: initial !important;
  }
  .app-container.closed-sidebar:not(.closed-sidebar-mobile) .app-sidebar .app-sidebar__inner .app-sidebar__heading::before {
    display: none !important;
  }
  .app-container.closed-sidebar:not(.closed-sidebar-mobile) .app-sidebar .app-sidebar__inner ul li a {
    text-indent: initial !important;
    padding: 0 1.25rem 0 45px !important;
  }
  .app-container.closed-sidebar:not(.closed-sidebar-mobile) .app-sidebar .app-sidebar__inner .metismenu-icon {
    left: 10px !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
  }
  .app-container.closed-sidebar:not(.closed-sidebar-mobile) .app-sidebar .app-sidebar__inner .metismenu-state-icon {
    visibility: visible !important;
  }
  .app-container.closed-sidebar:not(.closed-sidebar-mobile) .app-sidebar .vertical-nav-menu li.mm-active > a {
    padding-left: 42px !important;
    border-left: 3px solid var(--gb-accent) !important;
  }
}

/* —— Buttons: navy primary, sage publish —— */
.btn {
  border-radius: var(--gb-radius-sm) !important;
  font-weight: 650;
}
.btn-shadow { box-shadow: none !important; }

.btn-primary,
.btn-focus,
.app-theme-kitchen-hearth .btn-primary,
.app-theme-kitchen-hearth .btn-focus,
.app-theme-kitchen-hearth-mid .btn-primary,
.app-theme-kitchen-hearth-mid .btn-focus,
.app-theme-kitchen-hearth-light .btn-primary,
.app-theme-kitchen-hearth-light .btn-focus,
.app-theme-kitchen-crimson .btn-primary,
.app-theme-kitchen-azure .btn-primary {
  background: var(--gb-ink) !important;
  border-color: var(--gb-ink) !important;
  color: #fff !important;
  background-image: none !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-focus:hover,
.btn-focus:focus,
.app-theme-kitchen-hearth-mid .btn-primary:hover,
.app-theme-kitchen-hearth-mid .btn-primary:focus,
.app-theme-kitchen-hearth .btn-primary:hover,
.app-theme-kitchen-hearth .btn-primary:focus {
  background: #243342 !important;
  border-color: #243342 !important;
  color: #fff !important;
}

.btn-success {
  background: var(--gb-accent) !important;
  border-color: var(--gb-accent) !important;
  color: #fff !important;
}
.btn-success:hover,
.btn-success:focus {
  background: #6f7a5c !important;
  border-color: #6f7a5c !important;
  color: #fff !important;
}

.btn-secondary,
.btn-outline-secondary {
  color: var(--gb-ink) !important;
  border-color: var(--gb-line-strong) !important;
  background: var(--gb-surface) !important;
}
.btn-outline-primary {
  color: var(--gb-ink) !important;
  border-color: var(--gb-ink) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--gb-ink) !important;
  color: #fff !important;
}

/* bootstrap-toggle (Aktif) */
.toggle.btn-primary,
.toggle-on.btn-primary,
.btn-primary.toggle-on {
  background: var(--gb-ink) !important;
  border-color: var(--gb-ink) !important;
}

/* —— Forms —— */
.form-control,
.form-control-md,
.custom-select,
.select2-container--bootstrap .select2-selection {
  border-radius: var(--gb-radius-sm) !important;
  border-color: var(--gb-line-strong) !important;
  color: var(--gb-ink);
  background: var(--gb-surface);
}
.form-control:focus,
.form-control-md:focus {
  border-color: var(--gb-accent) !important;
  box-shadow: 0 0 0 0.15rem var(--gb-accent-soft) !important;
}
/* Keep input + addon flush (panel radius !important otherwise breaks Bootstrap input-group) */
.input-group > .form-control:not(:last-child),
.input-group > .form-control-md:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-control-md:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .custom-select,
.input-group > .input-group-append > .form-control,
.input-group > .input-group-append > .form-control-md {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .custom-select,
.input-group > .input-group-prepend > .form-control,
.input-group > .input-group-prepend > .form-control-md {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.input-group > .input-group-append:last-child > .input-group-text:last-child,
.input-group > .input-group-append:last-child > .btn:last-child,
.input-group > .input-group-append:last-child > .custom-select:last-child {
  border-top-right-radius: var(--gb-radius-sm) !important;
  border-bottom-right-radius: var(--gb-radius-sm) !important;
}
.input-group > .input-group-prepend:first-child > .input-group-text:first-child,
.input-group > .input-group-prepend:first-child > .btn:first-child,
.input-group > .input-group-prepend:first-child > .custom-select:first-child {
  border-top-left-radius: var(--gb-radius-sm) !important;
  border-bottom-left-radius: var(--gb-radius-sm) !important;
}
.input-group-text {
  box-sizing: border-box;
  border-color: var(--gb-line-strong) !important;
  color: var(--gb-muted);
  background: var(--gb-canvas) !important;
  display: flex;
  align-items: center;
}
/* Default size: input + addon same height */
.input-group:not(.input-group-sm):not(.input-group-lg) > .form-control,
.input-group:not(.input-group-sm):not(.input-group-lg) > .form-control-md,
.input-group:not(.input-group-sm):not(.input-group-lg) > .custom-select,
.input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-append > .input-group-text,
.input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-prepend > .input-group-text,
.input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-append > .custom-select,
.input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-prepend > .custom-select {
  height: calc(2.25rem + 2px);
  font-size: 1rem;
  line-height: 1.5;
  padding: .375rem .75rem;
}
/* Small size (recipe / materials tables) */
.input-group-sm > .form-control,
.input-group-sm > .form-control-md,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .custom-select,
.input-group-sm > .input-group-prepend > .custom-select {
  height: calc(1.8125rem + 2px) !important;
  font-size: .875rem !important;
  line-height: 1.5 !important;
  padding: .25rem .5rem !important;
}
.input-group .form-control:focus,
.input-group .form-control-md:focus {
  z-index: 3;
}
.col-form-label {
  color: var(--gb-muted);
  font-weight: 600;
  font-size: 0.82rem;
}

/* —— Cards / dict-frame —— */
.main-card.card,
.app-theme-kitchen-hearth-mid .main-card.card,
.app-theme-kitchen-hearth .main-card.card {
  border: 1px solid var(--gb-line) !important;
  border-radius: var(--gb-radius) !important;
  box-shadow: var(--gb-shadow) !important;
  background: var(--gb-surface) !important;
}
.main-card .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--gb-line) !important;
  color: var(--gb-ink);
  font-weight: 700;
}
.dict-frame {
  background: var(--gb-surface) !important;
  border: 1px solid var(--gb-line) !important;
  border-radius: var(--gb-radius) !important;
  box-shadow: none;
  padding: 1.35rem 1.15rem 1.1rem !important;
  margin-top: 1.5rem !important;
}
.dict-frame-name,
.dict-frame-trans,
.dict-frame-icon,
.dict-frame-variant,
.dict-frame-allergen,
.dict-frame-certificate,
.dict-frame-ingredient,
.dict-frame-energy,
.dict-frame-desc,
.dict-frame-origin,
.dict-frame-badge,
.dict-frame-sku,
.dict-frame-recipe-summary,
.dict-frame-recipe,
.dict-frame-pr-meta,
.dict-frame-images {
  border-left: 3px solid var(--gb-accent) !important;
}
.dict-frame-title {
  background: var(--gb-surface) !important;
  color: var(--gb-ink) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.02em;
}

/* —— Badges —— */
.badge {
  border-radius: 999px !important;
  font-weight: 650;
  padding: 0.4em 0.75em;
  letter-spacing: 0.02em;
}
.badge-success {
  background: var(--gb-success-soft) !important;
  color: #1e8449 !important;
}
.badge-warning {
  background: var(--gb-warn-soft) !important;
  color: #9a7b0a !important;
}
.badge-secondary {
  background: var(--gb-line) !important;
  color: var(--gb-muted) !important;
}
.badge-primary {
  background: var(--gb-accent-soft) !important;
  color: var(--gb-ink) !important;
}

/* —— Tables —— */
table.dataTable thead th,
.table thead th {
  color: var(--gb-muted) !important;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gb-line) !important;
  background: transparent !important;
  font-weight: 700;
}
table.dataTable tbody td,
.table td {
  border-color: var(--gb-line) !important;
  color: var(--gb-ink);
  vertical-align: middle !important;
}
table.dataTable.table-hover tbody tr:hover,
.table-hover tbody tr:hover {
  background: rgba(129, 140, 108, 0.07) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(248, 249, 250, 0.85) !important;
}
#table_menus img,
#table_products img,
#table_categories img,
#table_stock_cards img,
#table_allergens img,
#table_badges img {
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--gb-line);
}
.btn_process {
  border-radius: 8px !important;
}

/* —— Tabs —— */
.nav-tabs {
  border-bottom: 1px solid var(--gb-line) !important;
}
.nav-tabs .nav-link {
  border: 0 !important;
  color: var(--gb-muted);
  font-weight: 650;
}
.nav-tabs .nav-link.active {
  color: var(--gb-ink) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--gb-accent);
}

/* —— Theme picker cards —— */
.menu-theme-card {
  border: 1px solid var(--gb-line) !important;
  border-radius: var(--gb-radius) !important;
  background: var(--gb-canvas);
}
.menu-theme-card.border-primary,
.menu-theme-card:has(.menu-theme-radio:checked) {
  border-color: var(--gb-accent) !important;
  box-shadow: 0 0 0 1px var(--gb-accent);
}

/* —— Menu edit layout —— */
.gb-menu-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}
.gb-menu-main {
  flex: 1 1 640px;
  min-width: 0;
}
.gb-menu-aside {
  flex: 0 1 320px;
  width: 100%;
  max-width: 360px;
  position: sticky;
  top: 78px;
}
.gb-publish-card {
  background: var(--gb-surface);
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius);
  box-shadow: var(--gb-shadow);
  padding: 1.25rem;
}
.gb-publish-card h3 {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
  color: var(--gb-ink);
}
.gb-publish-card #menu_qr_img {
  width: 148px;
  height: 148px;
  border-radius: var(--gb-radius-sm);
  border: 1px solid var(--gb-line) !important;
}
.gb-display-grid label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--gb-radius-sm);
  background: var(--gb-canvas);
  border: 1px solid var(--gb-line);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gb-ink);
  cursor: pointer;
  width: 100%;
}
.gb-display-grid label input { margin: 0; }

@media (max-width: 991px) {
  .gb-menu-aside {
    position: static;
    max-width: none;
  }
}

/* —— Product edit —— */
#formDict .tab-content {
  background: var(--gb-surface);
  border: 1px solid var(--gb-line);
  border-top: 0;
  border-radius: 0 0 var(--gb-radius) var(--gb-radius);
  padding: 1.1rem 1.15rem 1.25rem !important;
}
#formDict .nav-tabs {
  background: var(--gb-surface);
  padding: 0.35rem 0.5rem 0;
  border-radius: var(--gb-radius) var(--gb-radius) 0 0;
  border: 1px solid var(--gb-line);
  border-bottom: 0 !important;
}
#formDict .dict-frame:first-child {
  margin-top: 0.5rem !important;
}

/* —— Stock card edit UX —— */
.gb-stock-form .dict-frame-sc-meta,
.gb-stock-form .dict-frame-sc-nutrition-pick,
.gb-stock-form .dict-frame-sc-nutrition-macros,
.gb-stock-form .dict-frame-allergen,
.gb-stock-form .dict-frame-certificate {
  border-left: 3px solid var(--gb-accent) !important;
  background: var(--gb-surface) !important;
  border-color: var(--gb-line) !important;
}
.gb-stock-form .dict-frame-sc-meta .dict-frame-title,
.gb-stock-form .dict-frame-sc-nutrition-pick .dict-frame-title,
.gb-stock-form .dict-frame-sc-nutrition-macros .dict-frame-title,
.gb-stock-form .dict-frame-allergen .dict-frame-title,
.gb-stock-form .dict-frame-certificate .dict-frame-title {
  color: var(--gb-ink) !important;
  background: var(--gb-surface) !important;
}
.gb-nutr-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.gb-nutr-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--gb-accent-soft);
  border: 1px solid var(--gb-line);
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--gb-ink);
}
.gb-nutr-chip-label {
  color: var(--gb-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
}
.gb-nutr-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius-sm);
  background: var(--gb-canvas);
  color: var(--gb-ink);
  font-weight: 650;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.gb-nutr-accordion-toggle:hover {
  background: #F4F5F6;
}
.gb-nutr-accordion-toggle .fa {
  color: var(--gb-muted);
  transition: transform 0.15s ease;
}
.gb-nutr-accordion-toggle:not(.collapsed) .fa {
  transform: rotate(180deg);
}
.gb-rel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 0;
}
.gb-rel-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.3rem 0.35rem 0.3rem 0.55rem;
  border-radius: 999px;
  background: var(--gb-canvas);
  border: 1px solid var(--gb-line);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gb-ink);
}
.gb-rel-chip-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
}
.gb-rel-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.gb-rel-chip-del {
  border: 0;
  background: transparent;
  color: var(--gb-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.35rem;
  cursor: pointer;
}
.gb-rel-chip-del:hover {
  color: #c0392b;
}