/* ============================================================
   Itemizer Design System — Custom Overrides
   ============================================================ */

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  --iz-sidebar:       #1A1A2E;
  --iz-accent:        #6EE7C7;
  --iz-content-bg:    #F8F7F4;
  --iz-nav-text:      rgba(255, 255, 255, 0.65);
  --iz-nav-muted:     rgba(255, 255, 255, 0.30);
  --iz-accent-bg:     rgba(110, 231, 199, 0.08);
  --iz-accent-border: rgba(110, 231, 199, 0.15);
}

.iz-mobile-perform-count {
    display: none !important;
}

/* ── Hide original topbar ─────────────────────────────────── */
.navbar-custom {
  display: none !important;
}

/* ── Sidebar: full height from top ───────────────────────── */
.left-side-menu {
  background: var(--iz-sidebar) !important;
  border-right: 1px solid var(--iz-accent-border) !important;
  top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.content-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.logo-box {
  display: none !important;
}

/* ── Sidebar header (logo) ────────────────────────────────── */
.iz-sidebar-header {
  display: block !important;
  background: var(--iz-sidebar);
  border-bottom: 1px solid var(--iz-accent-border);
}

.iz-sidebar-header a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 16px 18px;
}

/* ── Sidebar Nav Items ────────────────────────────────────── */
#sidebar-menu > ul > li > a,
#side-menu > li > a {
  color: var(--iz-nav-text) !important;
}

#sidebar-menu > ul > li > a:hover,
#side-menu > li > a:hover {
  color: #ffffff !important;
  background: var(--iz-accent-bg) !important;
}

#sidebar-menu > ul > li.mm-active > a,
#side-menu > li.mm-active > a {
  color: var(--iz-accent) !important;
  background: var(--iz-accent-bg) !important;
  border-left: 2px solid var(--iz-accent) !important;
}

/* ── Sidebar Section Labels ───────────────────────────────── */
.menu-title {
  color: var(--iz-nav-muted) !important;
  letter-spacing: 0.08em;
  font-size: 11px;
  text-transform: uppercase;
}

/* ── Sidebar Submenu ──────────────────────────────────────── */
.nav-second-level li a {
  color: var(--iz-nav-text) !important;
}

.nav-second-level li a:hover {
  color: var(--iz-accent) !important;
}

/* ── Sidebar Icons ────────────────────────────────────────── */
#side-menu .mdi {
  color: var(--iz-nav-text);
}

#side-menu li.mm-active > a .mdi,
#side-menu li > a:hover .mdi {
  color: var(--iz-accent);
}

/* ── Content area ─────────────────────────────────────────── */
.content-page {
  background: var(--iz-content-bg) !important;
  margin-top: 0 !important;
}

.content {
  background: var(--iz-content-bg) !important;
  padding: 0 !important;
  padding-top: 0 !important;
}

/* ── Title bar ────────────────────────────────────────────── */
.iz-title-bar {
  background: #ffffff;
  border-bottom: 0.5px solid #E5E3DC;
  padding: 0 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  width: 100%;
  gap: 16px;
  margin-bottom: 0;
}

/* ── Content wrapper padding ──────────────────────────────── */
#wrapper .content-page .content {
  padding: 0 !important;
}

/* ── First element in content area ───────────────────────── */
#wrapper .content-page .content > .container-fluid:first-child,
#wrapper .content-page .content > .row:first-child,
#wrapper .content-page .content > .card-box:first-child {
  margin-top: 20px !important;
}

.content-page > .iz-title-bar {
  width: 100% !important;
  margin-left: 0 !important;
}

.iz-title-bar-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.iz-title-bar-left .page-title,
.iz-title-bar-left h3.page-title,
.iz-title-bar-left h4.page-title {
  font-size: 16px;
  font-weight: 500;
  color: #1A1A2E;
  margin: 0;
  line-height: 1.4;
}

.iz-title-bar-left .page-title-box {
  display: contents;
}

.iz-title-bar-left .float-left,
.iz-title-bar-left .float-right {
  float: none !important;
  margin: 0 !important;
}

.iz-title-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ── Location pill ────────────────────────────────────────── */
.iz-location-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F1EFE8;
  border: 0.5px solid #D3D1C7;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 13px;
  color: #5F5E5A;
  text-decoration: none;
  white-space: nowrap;
}

.iz-location-btn:hover {
  color: #1A1A2E;
  text-decoration: none;
}

.iz-location-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6EE7C7;
  flex-shrink: 0;
  display: inline-block;
}

/* ── User dropdown ────────────────────────────────────────── */
.iz-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #5F5E5A;
  font-size: 13px;
}

.iz-user-btn:hover {
  color: #1A1A2E;
  text-decoration: none;
}

.iz-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1A1A2E;
  color: #6EE7C7;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.iz-user-name {
  font-weight: 500;
  color: #1A1A2E;
}

.iz-user-dropdown .dropdown-menu {
    top: 56px !important;
    position: fixed !important;
    box-shadow: none !important;
    border-top: none !important;
}

/* ── Action buttons in title bar (New Item etc.) ──────────── */
.iz-title-bar-left .btn {
  margin-left: auto;
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--iz-content-bg) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ── Sidebar width ────────────────────────────────────────── */
.left-side-menu {
  width: 220px !important;
}

.content-page {
  margin-left: 220px !important;
}

/* ── Nav item sizing and spacing ──────────────────────────── */
#side-menu > li > a {
  padding: 9px 20px !important;
  font-size: 13.5px !important;
  font-family: system-ui, sans-serif !important;
  line-height: 1.4 !important;
}

#side-menu > li .menu-title,
.menu-title {
  padding: 10px 20px 4px !important;
  font-size: 10px !important;
  font-family: system-ui, sans-serif !important;
}

/* ── Sidebar nav top padding ──────────────────────────────── */
#sidebar-menu,
#side-menu {
  padding-top: 8px !important;
}

/* ── Content area horizontal padding ─────────────────────── */
.content > .container-fluid {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ── Card styles: no shadow, rounded corners ──────────────── */
.card {
  box-shadow: none !important;
  border: 0.5px solid #E5E3DC !important;
  border-radius: 10px !important;
}

/* ── Activity table: no row borders ──────────────────────── */
#activity-table td,
#activity-table th {
  border: none !important;
}

#activity-table {
  border: none !important;
}

/* ── Activity table header border ────────────────────────── */
#activity-table thead tr {
  border: none !important;
}

#activity-table thead th {
  border: none !important;
}

/* ── Count status pills ───────────────────────────────────── */
.iz-count-pill {
  display: inline-block;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 500;
  min-width: 48px;
  text-align: center;
}

.iz-count-red {
  background: #FCEBEB;
  color: #A32D2D;
}

.iz-count-amber {
  background: #FAEEDA;
  color: #854F0B;
}

.iz-count-green {
  background: #E1F5EE;
  color: #0F6E56;
}

/* ── DataTables ───────────────────────────────────────────── */

table.dataTable thead th {
  background: #F1EFE8 !important;
  color: #5F5E5A !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 0.5px solid #E5E3DC !important;
  border-top: none !important;
  padding: 10px 12px !important;
}

table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting_desc:after {
  opacity: 0.4 !important;
}

table.dataTable tbody td {
  border-top: 0.5px solid #E5E3DC !important;
  font-size: 13.5px !important;
  color: #2C2C2A !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

table.dataTable tbody tr {
  background: #ffffff !important;
}

table.dataTable tbody tr:hover td {
  background: rgba(110, 231, 199, 0.06) !important;
}

table.dataTable {
  border: none !important;
}

/* ── DataTables controls ─────────────────────────────────── */

.dataTables_filter input {
  background: #ffffff !important;
  border: 0.5px solid #D3D1C7 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  color: #1A1A2E !important;
  box-shadow: none !important;
  outline: none !important;
}

.dataTables_filter input:focus {
  border-color: #6EE7C7 !important;
}

.dataTables_length select {
  background: #ffffff !important;
  border: 0.5px solid #D3D1C7 !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
  color: #1A1A2E !important;
  box-shadow: none !important;
}

.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
  font-size: 12px !important;
  color: #888780 !important;
}

/* ── DataTables pagination ───────────────────────────────── */

.dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  font-size: 12px !important;
  color: #5F5E5A !important;
  border: none !important;
  background: transparent !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: #1A1A2E !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
}

.dataTables_paginate .paginate_button:hover {
  background: #F1EFE8 !important;
  color: #1A1A2E !important;
  border: none !important;
}

/* ── Action buttons in datatables ────────────────────────── */

table.dataTable .btn-xs {
  background: transparent !important;
  border: 0.5px solid #D3D1C7 !important;
  border-radius: 6px !important;
  color: #5F5E5A !important;
  padding: 4px 7px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

table.dataTable .btn-xs:hover {
  background: #F1EFE8 !important;
  border-color: #B4B2A9 !important;
  color: #1A1A2E !important;
}

table.dataTable .btn-soft-danger {
  background: transparent !important;
  border: 0.5px solid #D3D1C7 !important;
  color: #E24B4A !important;
}

table.dataTable .btn-soft-danger:hover {
  background: #FCEBEB !important;
  border-color: #E24B4A !important;
  color: #A32D2D !important;
}

table.dataTable .btn-soft-warning {
  background: transparent !important;
  border: 0.5px solid #D3D1C7 !important;
  color: #5F5E5A !important;
}

table.dataTable .btn-soft-warning:hover {
  background: #F1EFE8 !important;
  border-color: #B4B2A9 !important;
  color: #1A1A2E !important;
}

table.dataTable .btn-soft-secondary {
  background: transparent !important;
  border: 0.5px solid #D3D1C7 !important;
  color: #5F5E5A !important;
}

table.dataTable .btn-soft-secondary:hover {
  background: #F1EFE8 !important;
  border-color: #B4B2A9 !important;
  color: #1A1A2E !important;
}

/* ── Item name links in datatable ────────────────────────── */
table.dataTable tbody td a.text-info {
  font-weight: 500 !important;
  font-size: 14.5px !important;
}

/* ── Fix delete button in datatable ──────────────────────── */
table.dataTable .btn-soft-danger,
table.dataTable .btn-soft-danger:focus {
  background: transparent !important;
  border: 0.5px solid #D3D1C7 !important;
  color: #E24B4A !important;
  box-shadow: none !important;
}

table.dataTable .btn-soft-danger:hover {
  background: #FCEBEB !important;
  border-color: #E24B4A !important;
  color: #A32D2D !important;
}

/* ── Soften the location heading ─────────────────────────── */
.card-box h4 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #5F5E5A !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Location banner ──────────────────────────────────────── */
.iz-location-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 0.5px solid #E5E3DC;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 16px;
  gap: 16px;
}

.iz-location-banner-archived {
  border-color: #F0999B;
  background: #FFFAFA;
}

.iz-location-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.iz-location-banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6EE7C7;
  flex-shrink: 0;
}

.iz-location-banner-dot-archived {
  background: #E24B4A;
}

.iz-location-banner-label {
  font-size: 11px;
  font-weight: 500;
  color: #888780;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.iz-location-banner-name {
  font-size: 16px;
  font-weight: 500;
  color: #1A1A2E;
}

.iz-location-banner-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.iz-location-banner-hint {
  font-size: 12px;
  color: #888780;
  max-width: 300px;
  line-height: 1.5;
  text-align: right;
}

.iz-location-banner-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F1EFE8;
  border: 0.5px solid #D3D1C7;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #1A1A2E;
  text-decoration: none;
  white-space: nowrap;
}

.iz-location-banner-btn:hover {
  background: #E8E6DE;
  color: #1A1A2E;
  text-decoration: none;
}

/* ── Items toolbar ────────────────────────────────────────── */
.iz-items-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.iz-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.iz-select {
  background: #ffffff !important;
  border: 0.5px solid #D3D1C7 !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  color: #1A1A2E !important;
  box-shadow: none !important;
  height: auto !important;
  min-width: 180px;
}

.iz-select:focus {
  border-color: #6EE7C7 !important;
  outline: none !important;
}

/* ── Item name links ──────────────────────────────────────── */
table.dataTable tbody td a.text-info {
  color: #1D9E75 !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  text-decoration: none !important;
}

table.dataTable tbody td a.text-info:hover {
  color: #0F6E56 !important;
  text-decoration: underline !important;
}

/* ── Force delete button style ────────────────────────────── */
table.dataTable td .btn-soft-danger,
table.dataTable td .btn-soft-danger:focus,
table.dataTable td a.btn-soft-danger,
table.dataTable td a.btn-soft-danger:focus {
  background-color: transparent !important;
  background: transparent !important;
  border: 0.5px solid #D3D1C7 !important;
  color: #E24B4A !important;
  box-shadow: none !important;
}

table.dataTable td .btn-soft-danger:hover,
table.dataTable td a.btn-soft-danger:hover {
  background-color: #FCEBEB !important;
  background: #FCEBEB !important;
  border-color: #E24B4A !important;
  color: #A32D2D !important;
}

/* ── Nuclear override for all datatable action buttons ───── */
#items-datatable td a.btn,
#items-datatable td a.btn:focus,
#items-datatable td a.btn:not(:hover) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#items-datatable td a.btn-soft-danger,
#items-datatable td a.btn-soft-danger:focus {
  border: 0.5px solid #D3D1C7 !important;
  color: #E24B4A !important;
  background-color: transparent !important;
  background-image: none !important;
}

#items-datatable td a.btn-soft-danger:hover {
  background-color: #FCEBEB !important;
  border-color: #E24B4A !important;
  color: #A32D2D !important;
}

#items-datatable td a.btn-soft-warning,
#items-datatable td a.btn-soft-warning:focus,
#items-datatable td a.btn-soft-secondary,
#items-datatable td a.btn-soft-secondary:focus {
  border: 0.5px solid #D3D1C7 !important;
  color: #5F5E5A !important;
  background-color: transparent !important;
  background-image: none !important;
}

#items-datatable td a.btn-soft-warning:hover,
#items-datatable td a.btn-soft-secondary:hover {
  background-color: #F1EFE8 !important;
  border-color: #B4B2A9 !important;
  color: #1A1A2E !important;
}

/* ── btn-soft-danger hard reset (beats bootstrap-material.min.css) ── */
body #items-datatable td a.btn-soft-danger {
  color: #E24B4A !important;
  background-color: transparent !important;
  background: transparent !important;
  border-color: #D3D1C7 !important;
  box-shadow: none !important;
}

body #items-datatable td a.btn-soft-danger:hover {
  color: #A32D2D !important;
  background-color: #FCEBEB !important;
  background: #FCEBEB !important;
  border-color: #E24B4A !important;
  box-shadow: none !important;
}

body #items-datatable td a.btn-soft-danger:focus,
body #items-datatable td a.btn-soft-danger.focus {
  color: #E24B4A !important;
  background-color: transparent !important;
  background: transparent !important;
  border-color: #D3D1C7 !important;
  box-shadow: none !important;
}

/* ── iz-btn-delete — theme-independent delete button ─────── */
a.iz-btn-delete,
a.iz-btn-delete:visited {
  display: inline-block;
  background: transparent !important;
  background-color: transparent !important;
  border: 0.5px solid #D3D1C7 !important;
  border-radius: 6px !important;
  color: #E24B4A !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
}

a.iz-btn-delete:hover {
  background: #FCEBEB !important;
  background-color: #FCEBEB !important;
  border-color: #E24B4A !important;
  color: #A32D2D !important;
  text-decoration: none !important;
}

/* ── Need-by date filter ──────────────────────────────────── */
.iz-needby-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.iz-needby-row label {
  font-size: 13px;
  color: #5F5E5A;
  white-space: nowrap;
  margin: 0;
}

.iz-needby-row input[type="date"] {
  background: #ffffff !important;
  border: 0.5px solid #D3D1C7 !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  color: #1A1A2E !important;
  box-shadow: none !important;
  height: auto !important;
  width: auto !important;
  min-width: 160px;
}

.iz-needby-row input[type="date"]:focus {
  border-color: #6EE7C7 !important;
  outline: none !important;
}

/* ── Pagination — override purple ────────────────────────── */
.paginate_button.current,
.paginate_button.current:hover,
a.paginate_button.current,
a.paginate_button.current:hover,
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: #1A1A2E !important;
  background-color: #1A1A2E !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.paginate_button:not(.current):hover,
.dataTables_paginate .paginate_button:not(.current):hover {
  background: #F1EFE8 !important;
  background-color: #F1EFE8 !important;
  background-image: none !important;
  color: #1A1A2E !important;
  border: none !important;
}

/* ── Needby label inline ──────────────────────────────────── */
.iz-needby-label {
  font-size: 13px;
  color: #5F5E5A;
  white-space: nowrap;
  margin: 0;
  font-weight: 400;
}

/* ── Pagination — Bootstrap page-item active (correct selector) ── */
.pagination .page-item.active .page-link,
.dataTables_paginate .pagination .page-item.active .page-link {
  background-color: #1A1A2E !important;
  background-image: none !important;
  border-color: #1A1A2E !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.pagination .page-item .page-link:hover,
.dataTables_paginate .pagination .page-item .page-link:hover {
  background-color: #F1EFE8 !important;
  background-image: none !important;
  border-color: #D3D1C7 !important;
  color: #1A1A2E !important;
  box-shadow: none !important;
}

.pagination .page-item .page-link,
.dataTables_paginate .pagination .page-item .page-link {
  color: #5F5E5A !important;
  border-color: #E5E3DC !important;
  box-shadow: none !important;
}

/* ── Neutralize pagination-rounded class ─────────────────── */
.pagination-rounded .page-item.active .page-link {
  background-color: #1A1A2E !important;
  background-image: none !important;
  border-color: #1A1A2E !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.pagination-rounded .page-item .page-link {
  color: #5F5E5A !important;
  border-color: #E5E3DC !important;
  box-shadow: none !important;
}

.pagination-rounded .page-item .page-link:hover {
  background-color: #F1EFE8 !important;
  background-image: none !important;
  border-color: #D3D1C7 !important;
  color: #1A1A2E !important;
}

/* ── Status badges ────────────────────────────────────────── */
.iz-badge {
  display: inline-block;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.iz-badge-gray {
  background: #F1EFE8;
  color: #5F5E5A;
}

.iz-badge-amber {
  background: #FAEEDA;
  color: #854F0B;
}

.iz-badge-green {
  background: #E1F5EE;
  color: #0F6E56;
}

.iz-badge-blue {
  background: #E6F1FB;
  color: #185FA5;
}

.iz-badge-red {
  background: #FCEBEB;
  color: #A32D2D;
}

.iz-badge-navy {
  background: #1A1A2E;
  color: #6EE7C7;
}

/* ── Location banner info chip (non-interactive) ─────────── */
.iz-location-banner-info {
  cursor: default !important;
  pointer-events: none !important;
  color: #5F5E5A !important;
}

.iz-location-banner-info:hover {
  background: #F1EFE8 !important;
  color: #5F5E5A !important;
  text-decoration: none !important;
}

/* ── Select2 overrides ────────────────────────────────────── */
.select2-container--default .select2-selection--multiple {
  background-color: #ffffff !important;
  border: 0.5px solid #D3D1C7 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  padding: 2px 6px !important;
}

.select2-container--default .select2-selection--single {
  background-color: #ffffff !important;
  border: 0.5px solid #D3D1C7 !important;
  border-radius: 8px !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1A1A2E !important;
  line-height: 38px !important;
  padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #1A1A2E !important;
  border: none !important;
  border-radius: 6px !important;
  color: #6EE7C7 !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
  margin: 2px 4px 2px 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #6EE7C7 !important;
  margin-right: 4px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #ffffff !important;
  background: transparent !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #1A1A2E !important;
  color: #6EE7C7 !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #F1EFE8 !important;
  color: #1A1A2E !important;
}

.select2-dropdown {
  border: 0.5px solid #D3D1C7 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(26,26,46,0.08) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 0.5px solid #D3D1C7 !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

/* ── Bootstrap Touchspin overrides ────────────────────────── */
.bootstrap-touchspin .input-group-btn .btn,
.input-group-btn .btn-default {
  background-color: #1A1A2E !important;
  background-image: none !important;
  border-color: #1A1A2E !important;
  color: #6EE7C7 !important;
  box-shadow: none !important;
}

.bootstrap-touchspin .input-group-btn .btn:hover {
  background-color: #0f0f1a !important;
  border-color: #0f0f1a !important;
}

/* ── Form card section headers ────────────────────────────── */
.card .header-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1A1A2E !important;
  text-transform: none !important;
}

/* ── Collapsible section toggle ───────────────────────────── */
.iz-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding: 10px 14px;
  border-radius: 8px;
  background: #F8F7F4;
  border: 0.5px solid #E5E3DC;
  margin-bottom: 4px;
}

.iz-section-toggle:hover {
  background: #F1EFE8;
}

.iz-section-toggle .iz-toggle-icon {
  font-size: 20px;
  color: #5F5E5A;
  transition: transform 0.2s ease;
  line-height: 1;
  display: flex;
  align-items: center;
}

.iz-section-toggle.collapsed .iz-toggle-icon {
  transform: rotate(-90deg);
}

.iz-section-body {
  overflow: hidden;
  transition: none;
}

/* ── Collapsible section cards — tighter spacing ─────────── */
.card:has(.iz-section-toggle) .card-body {
  padding: 12px 20px !important;
}

.card:has(.iz-section-toggle) .card-body .iz-section-body {
  padding-top: 16px;
}

/* ── Settings table action buttons ───────────────────────── */
.card-box .btn-warning,
.card-box .btn-danger,
.card-box .btn-warning.waves-effect,
.card-box .btn-danger.waves-effect {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
}

.card-box .btn-warning,
.card-box .btn-warning.waves-effect {
  border: 0.5px solid #D3D1C7 !important;
  color: #5F5E5A !important;
}

.card-box .btn-warning:hover {
  background-color: #F1EFE8 !important;
  border-color: #B4B2A9 !important;
  color: #1A1A2E !important;
}

.card-box .btn-danger,
.card-box .btn-danger.waves-effect {
  border: 0.5px solid #D3D1C7 !important;
  color: #E24B4A !important;
}

.card-box .btn-danger:hover {
  background-color: #FCEBEB !important;
  border-color: #E24B4A !important;
  color: #A32D2D !important;
}

/* ── Modal buttons ────────────────────────────────────────── */
.modal-footer .btn-primary,
.modal-footer .btn-primary.waves-effect {
  background-color: #6EE7C7 !important;
  background-image: none !important;
  border-color: #6EE7C7 !important;
  color: #1A1A2E !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

.modal-footer .btn-primary:hover {
  background-color: #5ad4b5 !important;
  border-color: #5ad4b5 !important;
}

.modal-footer .btn-secondary,
.modal-footer .btn-secondary.waves-effect,
.modal-footer [data-dismiss="modal"] {
  background-color: transparent !important;
  background-image: none !important;
  border: 0.5px solid #D3D1C7 !important;
  color: #5F5E5A !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

.modal-footer .btn-secondary:hover,
.modal-footer [data-dismiss="modal"]:hover {
  background-color: #F1EFE8 !important;
  border-color: #B4B2A9 !important;
  color: #1A1A2E !important;
}

/* ── Modal header and general styling ─────────────────────── */
.modal-content {
  border-radius: 12px !important;
  border: 0.5px solid #D3D1C7 !important;
  box-shadow: 0 4px 32px rgba(26,26,46,0.12) !important;
}

.modal-header {
  border-bottom: 0.5px solid #E5E3DC !important;
  padding: 16px 20px !important;
}

.modal-header .modal-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #1A1A2E !important;
}

.modal-footer {
  border-top: 0.5px solid #E5E3DC !important;
  padding: 12px 20px !important;
}

/* ── Recipe ingredients table delete button ───────────────── */
#items-datatable .btn-primary.waves-effect,
#items-datatable td .btn-primary,
#items-datatable td a.btn-primary {
  background-color: transparent !important;
  background-image: none !important;
  border: 0.5px solid #D3D1C7 !important;
  color: #E24B4A !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
}

#items-datatable .btn-primary.waves-effect:hover,
#items-datatable td .btn-primary:hover,
#items-datatable td a.btn-primary:hover {
  background-color: #FCEBEB !important;
  border-color: #E24B4A !important;
  color: #A32D2D !important;
}

/* ── Recipe ingredients delete link ───────────────────────── */
#items-datatable tbody td a:has(.mdi-trash-can),
#items-datatable tbody td a .mdi-trash-can {
  color: #E24B4A !important;
}

#items-datatable tbody td a:has(.mdi-trash-can):hover,
#items-datatable tbody td a:hover .mdi-trash-can {
  color: #A32D2D !important;
}

/* ── General mdi-trash-can in datatable cells ─────────────── */
table.dataTable tbody td a .mdi-trash-can,
table.dataTable tbody td a:has(.mdi-trash-can) {
  color: #E24B4A !important;
  font-size: 16px;
}

/* ── Touchspin buttons — global hard override ─────────────── */
.bootstrap-touchspin .input-group-btn-vertical .btn,
.bootstrap-touchspin .input-group-btn .btn,
.input-group-btn .btn-primary.bootstrap-touchspin-up,
.input-group-btn .btn-primary.bootstrap-touchspin-down,
.bootstrap-touchspin-up,
.bootstrap-touchspin-down {
  background-color: #1A1A2E !important;
  background-image: none !important;
  border-color: #1A1A2E !important;
  color: #6EE7C7 !important;
  box-shadow: none !important;
}

.bootstrap-touchspin-up:hover,
.bootstrap-touchspin-down:hover {
  background-color: #0f0f1a !important;
  border-color: #0f0f1a !important;
  color: #6EE7C7 !important;
}

/* ── iz-spin-btn — touchspin buttons in datatables ───────── */
.btn.iz-spin-btn {
  background-color: #1A1A2E !important;
  background-image: none !important;
  border-color: #1A1A2E !important;
  color: #6EE7C7 !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
}

.btn.iz-spin-btn:hover {
  background-color: #0f0f1a !important;
  border-color: #0f0f1a !important;
  color: #6EE7C7 !important;
}

/* ── Touchspin — universal override (all pages) ───────────── */
.bootstrap-touchspin .input-group-btn:first-child .btn,
.bootstrap-touchspin .input-group-btn:last-child .btn,
.bootstrap-touchspin .input-group-btn .btn,
.bootstrap-touchspin a.btn,
.bootstrap-touchspin button.btn,
a.bootstrap-touchspin-up,
a.bootstrap-touchspin-down,
button.bootstrap-touchspin-up,
button.bootstrap-touchspin-down {
  background-color: #1A1A2E !important;
  background-image: none !important;
  border-color: #1A1A2E !important;
  color: #6EE7C7 !important;
  box-shadow: none !important;
}

.bootstrap-touchspin .input-group-btn:first-child .btn:hover,
.bootstrap-touchspin .input-group-btn:last-child .btn:hover,
.bootstrap-touchspin .input-group-btn .btn:hover,
a.bootstrap-touchspin-up:hover,
a.bootstrap-touchspin-down:hover,
button.bootstrap-touchspin-up:hover,
button.bootstrap-touchspin-down:hover {
  background-color: #0f0f1a !important;
  border-color: #0f0f1a !important;
  color: #6EE7C7 !important;
}

/* ── Touchspin button width consistency ───────────────────── */
.btn.iz-spin-btn {
  min-width: 32px !important;
  width: 32px !important;
  padding: 4px 0 !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* =====================
   Settings Tabs
   ===================== */
.iz-settings-tabs .nav-tabs {
    border-bottom: 1px solid #d0cdc4;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 3px;
    padding: 0;
    align-items: flex-end;
    margin-bottom: 0;
}
.iz-settings-tabs .nav-tabs .nav-item {
    margin-bottom: 0;
}
.iz-settings-tabs .nav-tabs .nav-link {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 400;
    color: #5a5a5a;
    background: #F1EFE8;
    border: 1px solid #d0cdc4 !important;
    border-radius: 5px 5px 0 0;
    position: relative;
    bottom: -2px;
    white-space: nowrap;
    transition: none;
    margin-bottom: 0;
}
.iz-settings-tabs .nav-tabs .nav-link:hover {
    color: #1A1A2E;
    background: #e8e5dc;
    text-decoration: none;
}
.iz-settings-tabs .nav-tabs .nav-link.active {
    background: #1A1A2E !important;
    color: #6EE7C7 !important;
    font-weight: 500;
    border-color: #1A1A2E !important;
    bottom: 0;
}
.iz-settings-tabs + .card-box {
    box-shadow: none !important;
}

/* =====================
   Settings Icon (topbar)
   ===================== */
.iz-settings-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #6c757d;
    text-decoration: none;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
    margin-right: 4px;
}
.iz-settings-icon:hover {
    color: var(--iz-sidebar);
    background: rgba(26, 26, 46, 0.06);
    text-decoration: none;
}
.iz-settings-icon .fe-settings {
    font-size: 18px;
}

/* Upgrade CTA buttons — consistent sizing across all pages */
a.btn.btn-warning,
a.btn.btn-warning:hover,
a.btn.btn-warning:focus,
a.btn.btn-warning:active,
a.btn.btn-warning.waves-effect {
    background-color: #EF9F27 !important;
    background: #EF9F27 !important;
    border-color: #EF9F27 !important;
    color: #1A1A2E !important;
    padding: 0.45rem 0.9rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    border-radius: 0.15rem !important;
    box-shadow: 0 2px 2px 0 rgba(239,159,39,.14), 0 3px 1px -2px rgba(239,159,39,.2), 0 1px 5px 0 rgba(239,159,39,.12) !important;
}

/* Sidebar upgrade teaser */
.iz-upgrade-teaser {
    margin: 12px 12px 16px;
    border-top: 1px solid rgba(110,231,199,0.15);
    padding-top: 14px;
}
.iz-upgrade-teaser-card {
    background: rgba(239,159,39,0.1);
    border: 1px solid rgba(239,159,39,0.35);
    border-radius: 8px;
    padding: 12px 14px;
}
.iz-upgrade-teaser-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #EF9F27;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 500;
    margin-bottom: 10px;
}
.iz-upgrade-teaser-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #EF9F27;
    flex-shrink: 0;
    display: inline-block;
}
.iz-upgrade-meter {
    margin-bottom: 9px;
}
.iz-upgrade-meter-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3px;
}
.iz-upgrade-meter-name {
    font-size: 11.5px;
    color: rgba(255,255,255,0.75);
}
.iz-upgrade-meter-count {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
}
.iz-upgrade-meter-track {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    height: 4px;
}
.iz-upgrade-meter-fill {
    background: #EF9F27;
    height: 4px;
    border-radius: 3px;
}
.iz-upgrade-meter-reset {
    font-size: 10.5px;
    color: rgba(255,255,255,0.3);
    margin-top: 3px;
}
.iz-upgrade-teaser-btn {
    display: block;
    text-align: center;
    background: #EF9F27;
    color: #1A1A2E !important;
    font-size: 12.5px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none !important;
    margin-top: 12px;
}
.iz-upgrade-teaser-btn:hover {
    background: #d4890f;
    color: #1A1A2E !important;
    text-decoration: none !important;
}

/* ─── Mobile drawer ─────────────────────────────────── */
#iz-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

#iz-drawer-overlay.iz-drawer-overlay-visible {
    display: block;
}

.iz-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.iz-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #1A1A2E;
    border-radius: 2px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .iz-hamburger {
        display: flex;
    }

    .left-side-menu {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transform: translateX(-240px) !important;
        transition: transform 0.22s ease !important;
    }

    .left-side-menu.iz-drawer-open {
        transform: translateX(0) !important;
    }

    .content-page {
        margin-left: 0 !important;
    }

    body.iz-drawer-active {
        overflow: hidden;
    }

    .iz-title-bar {
        padding: 0 12px;
        gap: 8px;
    }

    .iz-title-bar-left {
        min-width: 0;
        flex-shrink: 1;
    }

    .iz-title-bar-left .page-title,
    .iz-title-bar-left h3.page-title,
    .iz-title-bar-left h4.page-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .iz-title-bar-right {
        gap: 6px;
        flex-shrink: 0;
    }

    .iz-location-btn .iz-location-name {
        display: none;
    }

    #activity-filter {
        display: none !important;
    }

    .iz-location-dropdown .dropdown-menu {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
    }

    .iz-user-name {
        display: none !important;
    }

    .iz-user-btn .mdi-chevron-down {
        display: none !important;
    }

    /* Location banner — hide right side hint on mobile */
    .iz-location-banner-right {
        display: none !important;
    }

    /* Items toolbar — stack filters full width */
    .iz-items-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .iz-toolbar-group {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .iz-toolbar-group .iz-select {
        width: 100% !important;
        min-width: unset !important;
    }

    .iz-toolbar-group input[type="date"].iz-select {
        min-width: unset !important;
        width: 100% !important;
    }

    .iz-needby-label {
        display: block !important;
        margin-bottom: 4px !important;
    }

    /* Items DataTable — hide low-value columns on mobile (items list page only) */
    /* Hide: checkbox(1), SKU(3), unit type(4), category(5), needed(7), ordered(8) */
    #items-list-table #items-datatable thead th:nth-child(1),
    #items-list-table #items-datatable tbody td:nth-child(1),
    #items-list-table #items-datatable thead th:nth-child(3),
    #items-list-table #items-datatable tbody td:nth-child(3),
    #items-list-table #items-datatable thead th:nth-child(4),
    #items-list-table #items-datatable tbody td:nth-child(4),
    #items-list-table #items-datatable thead th:nth-child(5),
    #items-list-table #items-datatable tbody td:nth-child(5),
    #items-list-table #items-datatable thead th:nth-child(7),
    #items-list-table #items-datatable tbody td:nth-child(7),
    #items-list-table #items-datatable thead th:nth-child(8),
    #items-list-table #items-datatable tbody td:nth-child(8) {
        display: none !important;
    }

    /* Action buttons — keep horizontal, don't stack */
    #items-list-table #items-datatable .nowrap {
        white-space: nowrap !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        justify-content: center !important;
    }

    /* DataTables search and length full width */
    .dataTables_filter {
        text-align: left !important;
        width: 100% !important;
    }

    .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        display: block !important;
        margin-top: 4px !important;
    }

    .dataTables_length {
        width: 100% !important;
    }

    /* Items toolbar action buttons — full width stacked */
    .iz-toolbar-group:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .iz-toolbar-group:last-child .btn {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* DataTables search input full width */
    .dataTables_filter label {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Vendor SKU + vendor search field — full width (edit item page, #section-vendor) */
    #section-vendor #vendor_sku,
    #section-vendor #autocomplete-vendors {
        width: 100% !important;
        display: block !important;
        margin-bottom: 6px !important;
    }

    #section-vendor .form-group.row.col-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Child items table — hide Parent Item column (4th col; last col is actions) */
    #child-items-datatable thead th:nth-child(4),
    #child-items-datatable tbody td:nth-child(4) {
        display: none !important;
    }

    /* Child items table — keep Touchspin controls inline */
    #child-items-datatable .bootstrap-touchspin {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    #child-items-datatable .bootstrap-touchspin .input-group-btn {
        width: auto !important;
    }

    #child-items-datatable .bootstrap-touchspin input {
        width: 48px !important;
        min-width: unset !important;
        text-align: center !important;
    }

    /* Purchase order form — stack action buttons full width (#save-buttons in editpurchaseorder) */
    #save-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    #save-buttons .btn {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Count sheets toolbar — stack button below description */
    .iz-cs-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .iz-cs-toolbar .btn {
        width: 100% !important;
        margin-left: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Count sheets — New Count Sheet button full width on mobile */
    a[href="/countsheets/editcountsheet/0"] {
        white-space: nowrap !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 8px !important;
    }

    #countsheets-list-table #items-datatable.dt-responsive.nowrap {
        width: 100% !important;
    }

    /* Count sheets table — show only Name (2) on mobile; scoped to countsheets list wrapper */
    #countsheets-list-table #items-datatable.dt-responsive.nowrap thead th:nth-child(1),
    #countsheets-list-table #items-datatable.dt-responsive.nowrap tbody td:nth-child(1),
    #countsheets-list-table #items-datatable.dt-responsive.nowrap thead th:nth-child(3),
    #countsheets-list-table #items-datatable.dt-responsive.nowrap tbody td:nth-child(3),
    #countsheets-list-table #items-datatable.dt-responsive.nowrap thead th:nth-child(4),
    #countsheets-list-table #items-datatable.dt-responsive.nowrap tbody td:nth-child(4),
    #countsheets-list-table #items-datatable.dt-responsive.nowrap thead th:nth-child(5),
    #countsheets-list-table #items-datatable.dt-responsive.nowrap tbody td:nth-child(5),
    #countsheets-list-table #items-datatable.dt-responsive.nowrap thead th:nth-child(6),
    #countsheets-list-table #items-datatable.dt-responsive.nowrap tbody td:nth-child(6) {
        display: none !important;
    }

    /* Count sheets — hide actions column on mobile */
    #countsheets-list-table #items-datatable.dt-responsive.nowrap thead th:nth-child(7),
    #countsheets-list-table #items-datatable.dt-responsive.nowrap tbody td:nth-child(7) {
        display: none !important;
    }

    /* Adjust quantities — stack buttons full width */
    .iz-adjust-qty-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .iz-adjust-qty-actions .btn,
    .iz-adjust-qty-actions button {
        width: 100% !important;
    }

    /* Adjust quantities — hide low-value columns, keep name and new quantity */
    #adjust-qty-table #items-datatable thead th:nth-child(2),
    #adjust-qty-table #items-datatable tbody td:nth-child(2),
    #adjust-qty-table #items-datatable thead th:nth-child(3),
    #adjust-qty-table #items-datatable tbody td:nth-child(3),
    #adjust-qty-table #items-datatable thead th:nth-child(4),
    #adjust-qty-table #items-datatable tbody td:nth-child(4),
    #adjust-qty-table #items-datatable thead th:nth-child(5),
    #adjust-qty-table #items-datatable tbody td:nth-child(5) {
        display: none !important;
    }

    /* Orders list — stack status filter and new order button full width */
    .iz-orders-toolbar {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .iz-orders-toolbar .btn,
    .iz-orders-toolbar select {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Orders list — full width search */
    #orders-datatable_filter label,
    #orders-datatable_filter input {
        width: 100% !important;
        display: block !important;
        margin-left: 0 !important;
    }

    /* Orders list — action buttons horizontal */
    #orders-datatable .nowrap,
    #orders-datatable td:last-child {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Orders list — hide PO number line in ID/Name cell (name stays in <b>; [#…] is plain text after <br>) */
    #orders-datatable tbody td:first-child a.text-body {
        font-size: 0 !important;
    }
    #orders-datatable tbody td:first-child a.text-body b {
        font-size: 1rem !important;
    }
    #orders-datatable tbody td:first-child a.text-body br {
        display: none !important;
    }

    /* PO view — stack header and back button full width */
    .iz-po-view-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .iz-po-view-header .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* PO view — keep items table readable, ensure Received column visible */
    .table-centered.table-bordered td,
    .table-centered.table-bordered th {
        padding: 6px 4px !important;
        font-size: 12px !important;
    }

    /* PO view — keep Touchspin inline in Received column */
    .table-centered .bootstrap-touchspin {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .table-centered .bootstrap-touchspin .input-group-btn {
        width: auto !important;
    }

    .table-centered .bootstrap-touchspin input {
        width: 44px !important;
        min-width: unset !important;
        text-align: center !important;
    }

    /* PO view — hide Unit Cost column on mobile */
    .table-centered.table-bordered thead th:nth-child(7),
    .table-centered.table-bordered tbody td:nth-child(7) {
        display: none !important;
    }

    /* Production run — stack title and buttons full width */
    .iz-production-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .iz-production-header .btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        text-align: center !important;
    }

    /* Inner button row — stack Save / Cancel / View Recipe (inline flex on div) */
    .iz-production-header > div {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .iz-production-header h4,
    .iz-production-header .page-title {
        margin-bottom: 8px !important;
    }

    /* Production runs list — stack toolbar full width */
    .iz-production-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .iz-production-toolbar .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Production runs — full width search */
    #pr-datatable_filter label,
    #pr-datatable_filter input {
        width: 100% !important;
        display: block !important;
        margin-left: 0 !important;
    }

    /* Production runs — horizontal action buttons */
    #pr-datatable td:last-child {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Recipes list — stack toolbar full width */
    .iz-recipes-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .iz-recipes-toolbar .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Recipes list — horizontal action buttons (scoped: table id is items-datatable) */
    #recipes-list-table #items-datatable td:last-child {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Recipes list — show only Recipe Name and Actions on mobile */
    #recipes-list-table #items-datatable thead th:nth-child(1),
    #recipes-list-table #items-datatable tbody td:nth-child(1),
    #recipes-list-table #items-datatable thead th:nth-child(3),
    #recipes-list-table #items-datatable tbody td:nth-child(3),
    #recipes-list-table #items-datatable thead th:nth-child(4),
    #recipes-list-table #items-datatable tbody td:nth-child(4) {
        display: none !important;
    }

    /* Settings — hide tabs, show dropdown on mobile */
    .iz-settings-tabs .nav-tabs {
        display: none !important;
    }

    .iz-settings-mobile-select {
        display: block !important;
        width: 100% !important;
        margin-bottom: 16px !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
        border: 1.5px solid #e5e3de !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: #1A1A2E !important;
        appearance: auto !important;
    }

    /* Settings tables — fix Responsive 2.2.3 inline toggle overlap */
    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child,
    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child {
        padding-left: 40px !important;
    }

    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before,
    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child::before {
        left: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Settings pages — stack description and action button full width */
    .iz-settings-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .iz-settings-toolbar .btn {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Auth pages — hide brand panel, show form full width (.iz-login-* used on login, register, forgot password, etc.) */
    .iz-login-brand {
        display: none !important;
    }

    .iz-login-form-panel {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .iz-login-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Plan selection — stack plan options vertically on mobile (.iz-plans-grid / .iz-plan-option in plan-selection.blade.php) */
    .iz-plan-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .iz-plans-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .iz-plan-option {
        width: 100% !important;
        max-width: 100% !important;
    }

    a.btn.iz-mobile-perform-count {
        display: inline-block !important;
    }
}
/* ─── End mobile drawer ──────────────────────────────── */