/* =========================================================================
   BreakPos UI — a design layer over AdminLTE 2.3.8 / Bootstrap 3.3.7
   =========================================================================

   Loaded LAST, after every vendor stylesheet, so it restyles the existing
   AdminLTE markup through the cascade. Nothing in app/Views is rewritten:
   121 views share these class names, so they all restyle at once, and the
   whole layer can be removed by deleting one <link>.

   Why a cascade layer instead of upgrading to Bootstrap 5:
   every view is a standalone HTML document with no layout inheritance, and
   the DataTables / select2 / iCheck / AdminLTE JS all target BS3 markup.
   Replacing the markup would mean touching 121 files and re-wiring every
   plugin, for the same visual result.

   Contents
     1. Tokens (light + dark)
     2. Base & typography
     3. App shell — sidebar, navbar, page header
     4. Surfaces — boxes, dashboard tiles
     5. Data — tables, DataTables, pagination, badges
     6. Input — forms, buttons, select2, focus
     7. Overlays — modals, toastr, tooltips
     8. Utilities & motion
   ========================================================================= */

/* ============================== 1. TOKENS ============================== */

:root {
  /* Brand.
     Defaults to the skin-blue ramp, which is the shipped default skin; the
     SKINS section at the bottom re-defines these per skin class on <body>.
     Step 500 is AdminLTE's signature hue for the skin, 600 is the filled
     step chosen so white text clears AA. */
  --wp-brand-50: #e6f1f7;
  --wp-brand-100: #cbe2ef;
  --wp-brand-200: #acd0e5;
  --wp-brand-300: #86bad8;
  --wp-brand-400: #5fa4cc;
  --wp-brand-500: #3c8dbc;
  --wp-brand-600: #357ca5;
  --wp-brand-700: #2b6486;
  --wp-brand-800: #22506b;
  --wp-brand-900: #1b3f54;
  --wp-on-brand: #ffffff;

  /* Neutrals: surfaces, borders, text. */
  --wp-n-0:   #ffffff;
  --wp-n-25:  #fcfcfd;
  --wp-n-50:  #f8fafc;
  --wp-n-100: #f1f5f9;
  --wp-n-200: #e2e8f0;
  --wp-n-300: #cbd5e1;
  --wp-n-400: #94a3b8;
  --wp-n-500: #64748b;
  --wp-n-600: #475569;
  --wp-n-700: #334155;
  --wp-n-800: #1e293b;
  --wp-n-900: #0f172a;
  --wp-n-950: #080f1d;

  /* Semantic. Desaturated against the originals so that colour again means
     something (money in/out, stock state) instead of decorating every tile. */
  --wp-success:     #059669;
  --wp-success-bg:  #ecfdf5;
  --wp-success-fg:  #047857;
  --wp-warning:     #d97706;
  --wp-warning-bg:  #fffbeb;
  --wp-warning-fg:  #b45309;
  --wp-danger:      #dc2626;
  --wp-danger-bg:   #fef2f2;
  --wp-danger-fg:   #b91c1c;
  --wp-info:        #0284c7;
  --wp-info-bg:     #f0f9ff;
  --wp-info-fg:     #0369a1;

  /* Roles — everything below references these, so dark mode only reassigns
     this block rather than restating component rules. */
  --wp-bg:          var(--wp-n-100);
  --wp-surface:     var(--wp-n-0);
  --wp-surface-2:   var(--wp-n-50);
  --wp-surface-3:   var(--wp-n-100);
  --wp-border:      var(--wp-n-200);
  --wp-border-str:  var(--wp-n-300);
  --wp-text:        var(--wp-n-800);
  --wp-text-muted:  var(--wp-n-500);
  --wp-text-faint:  var(--wp-n-400);
  --wp-text-invert: var(--wp-n-0);

  --wp-sidebar-bg:      var(--wp-n-900);
  --wp-sidebar-fg:      var(--wp-n-300);
  --wp-sidebar-fg-str:  var(--wp-n-0);
  --wp-sidebar-active:  var(--wp-brand-600);
  --wp-sidebar-hover:   rgba(255,255,255,.06);
  --wp-sidebar-border:  rgba(255,255,255,.07);

  /* Type: system stack — no webfont request, so no render-blocking download
     and nothing to 404 if the CDN is unreachable. */
  --wp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Bengali", sans-serif;
  --wp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wp-fs-xs:  11.5px;
  --wp-fs-sm:  12.5px;
  --wp-fs-md:  13.5px;
  --wp-fs-lg:  15px;
  --wp-fs-xl:  18px;
  --wp-fs-2xl: 22px;
  --wp-fs-3xl: 28px;

  /* Spacing — 4px base. */
  --wp-s1: 4px;  --wp-s2: 8px;  --wp-s3: 12px; --wp-s4: 16px;
  --wp-s5: 20px; --wp-s6: 24px; --wp-s8: 32px; --wp-s10: 40px;

  --wp-r-sm: 6px;
  --wp-r-md: 8px;
  --wp-r-lg: 12px;
  --wp-r-xl: 16px;
  --wp-r-pill: 999px;

  /* Elevation replaces AdminLTE's hard 1px borders everywhere. */
  --wp-sh-xs: 0 1px 2px rgba(15,23,42,.05);
  --wp-sh-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --wp-sh-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --wp-sh-lg: 0 12px 28px rgba(15,23,42,.12), 0 4px 10px rgba(15,23,42,.05);

  --wp-ring: 0 0 0 3px #3c8dbc47;
  --wp-dur: 140ms;
  --wp-ease: cubic-bezier(.4,0,.2,1);
}

/* Theme mode.
   This app already ships its own theming (the AdminLTE skin picker), so the
   OS setting must NOT silently repaint the content area - that would fight the
   skin the user chose. Dark is opt-in:

     data-wp-theme="light"   (default) - project theme, light content
     data-wp-theme="dark"              - project theme, dark content
     data-wp-theme="system"            - follow the OS, and only then

   The attribute is written to <html> before first paint by the inline snippet
   in the head partials, so there is no flash of the wrong theme. */
@media (prefers-color-scheme: dark) {
  :root[data-wp-theme="system"] {
    --wp-bg:         var(--wp-n-950);
    --wp-surface:    #121a2a;
    --wp-surface-2:  #16203200;
    --wp-surface-2:  #162032;
    --wp-surface-3:  #1b2639;
    --wp-border:     #243049;
    --wp-border-str: #32405e;
    --wp-text:       var(--wp-n-100);
    --wp-text-muted: var(--wp-n-400);
    --wp-text-faint: var(--wp-n-500);
    --wp-sidebar-bg: #0b1220;
    --wp-sidebar-border: rgba(255,255,255,.05);
    --wp-success-bg: rgba(5,150,105,.14);
    --wp-warning-bg: rgba(217,119,6,.14);
    --wp-danger-bg:  rgba(220,38,38,.14);
    --wp-info-bg:    rgba(2,132,199,.14);
    --wp-success-fg: #34d399;
    --wp-warning-fg: #fbbf24;
    --wp-danger-fg:  #f87171;
    --wp-info-fg:    #38bdf8;
    --wp-sh-xs: 0 1px 2px rgba(0,0,0,.4);
    --wp-sh-sm: 0 1px 3px rgba(0,0,0,.5);
    --wp-sh-md: 0 4px 12px rgba(0,0,0,.45);
    --wp-sh-lg: 0 12px 28px rgba(0,0,0,.55);
  }
}

:root[data-wp-theme="dark"] {
  --wp-bg:         var(--wp-n-950);
  --wp-surface:    #121a2a;
  --wp-surface-2:  #162032;
  --wp-surface-3:  #1b2639;
  --wp-border:     #243049;
  --wp-border-str: #32405e;
  --wp-text:       var(--wp-n-100);
  --wp-text-muted: var(--wp-n-400);
  --wp-text-faint: var(--wp-n-500);
  --wp-sidebar-bg: #0b1220;
  --wp-sidebar-border: rgba(255,255,255,.05);
  --wp-success-bg: rgba(5,150,105,.14);
  --wp-warning-bg: rgba(217,119,6,.14);
  --wp-danger-bg:  rgba(220,38,38,.14);
  --wp-info-bg:    rgba(2,132,199,.14);
  --wp-success-fg: #34d399;
  --wp-warning-fg: #fbbf24;
  --wp-danger-fg:  #f87171;
  --wp-info-fg:    #38bdf8;
  --wp-sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --wp-sh-sm: 0 1px 3px rgba(0,0,0,.5);
  --wp-sh-md: 0 4px 12px rgba(0,0,0,.45);
  --wp-sh-lg: 0 12px 28px rgba(0,0,0,.55);
}

/* =========================== 2. BASE & TYPE =========================== */

body,
body.hold-transition,
.wrapper {
  font-family: var(--wp-font);
  font-size: var(--wp-fs-md);
  line-height: 1.55;
  color: var(--wp-text);
  background: var(--wp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

.content-wrapper,
.right-side { background: var(--wp-bg); }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--wp-font);
  color: var(--wp-text);
  font-weight: 650;
  letter-spacing: -.011em;
}

a { color: var(--wp-brand-600); transition: color var(--wp-dur) var(--wp-ease); }
a:hover, a:focus { color: var(--wp-brand-700); text-decoration: none; }

/* Money and quantities line up column-to-column. */
.wp-num, td .label, .info-box-number, .small-box h3 { font-variant-numeric: tabular-nums; }

hr { border-color: var(--wp-border); }
code, kbd, pre { font-family: var(--wp-font-mono); font-size: var(--wp-fs-sm); }

::selection { background: var(--wp-brand-200); color: var(--wp-n-900); }

/* Scrollbars that match the surface instead of the OS default. */
* { scrollbar-width: thin; scrollbar-color: var(--wp-n-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--wp-n-300); border-radius: var(--wp-r-pill);
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--wp-n-400); background-clip: content-box; }

/* ============================ 3. APP SHELL ============================ */

/* --- Sidebar --- */
.main-sidebar,
.left-side,
.skin-blue .main-sidebar,
.skin-blue .wrapper { background: var(--wp-sidebar-bg); }

.main-sidebar { box-shadow: var(--wp-sh-sm); }

.skin-blue .main-header .logo,
.main-header .logo {
  background: var(--wp-sidebar-bg);
  color: var(--wp-sidebar-fg-str);
  font-weight: 700;
  font-size: var(--wp-fs-lg);
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--wp-sidebar-border);
  transition: background var(--wp-dur) var(--wp-ease);
}
.skin-blue .main-header .logo:hover,
.main-header .logo:hover { background: var(--wp-sidebar-bg); filter: brightness(1.15); }

/* User panel */
.user-panel { padding: var(--wp-s4) var(--wp-s4); border-bottom: 1px solid var(--wp-sidebar-border); }
.user-panel > .info,
.user-panel > .info > p { color: var(--wp-sidebar-fg-str); font-weight: 600; font-size: var(--wp-fs-md); }
.user-panel > .info > a { color: var(--wp-n-400) !important; font-size: var(--wp-fs-xs); font-weight: 500; }
.user-panel > .image > img { border-radius: var(--wp-r-md); border: 1px solid var(--wp-sidebar-border); }

/* Menu */
.sidebar-menu > li > a {
  color: var(--wp-sidebar-fg);
  font-size: var(--wp-fs-md);
  font-weight: 500;
  padding: 11px var(--wp-s4);
  border-left: 3px solid transparent;
  border-radius: 0;
  transition: background var(--wp-dur) var(--wp-ease), color var(--wp-dur) var(--wp-ease);
}
.skin-blue .sidebar-menu > li > a { color: var(--wp-sidebar-fg); border-left-color: transparent; }

.skin-blue .sidebar-menu > li:hover > a,
.sidebar-menu > li:hover > a {
  background: var(--wp-sidebar-hover);
  color: var(--wp-sidebar-fg-str);
  border-left-color: var(--wp-brand-400);
}
.skin-blue .sidebar-menu > li.active > a,
.sidebar-menu > li.active > a {
  background: var(--wp-sidebar-active);
  color: #fff;
  border-left-color: var(--wp-brand-300);
  font-weight: 600;
}
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion { width: 20px; font-size: 14px; opacity: .9; }

/* Submenus read as a grouped list, not a second nav. */
.skin-blue .sidebar-menu > li > .treeview-menu,
.sidebar-menu > li > .treeview-menu { background: rgba(0,0,0,.22); padding: var(--wp-s1) 0; }
.treeview-menu > li > a {
  color: var(--wp-n-400);
  font-size: var(--wp-fs-sm);
  padding: 8px 5px 8px 42px;
  border-radius: 0;
  transition: color var(--wp-dur) var(--wp-ease), background var(--wp-dur) var(--wp-ease);
}
.skin-blue .treeview-menu > li > a { color: var(--wp-n-400); }
.skin-blue .treeview-menu > li > a:hover,
.treeview-menu > li > a:hover { color: #fff; background: var(--wp-sidebar-hover); }
.skin-blue .treeview-menu > li.active > a,
.treeview-menu > li.active > a { color: #fff; font-weight: 600; }
.treeview-menu > li > a > .fa { font-size: 11px; opacity: .7; }

.sidebar-menu li > a > .pull-right-container > .fa-angle-left { transition: transform var(--wp-dur) var(--wp-ease); }
.sidebar-menu li.active > a > .pull-right-container > .fa-angle-left { transform: rotate(-90deg); }

/* --- Top bar --- */
.main-header .navbar,
.skin-blue .main-header .navbar {
  background: var(--wp-surface);
  border-bottom: 1px solid var(--wp-border);
  box-shadow: var(--wp-sh-xs);
  min-height: 56px;
}
.main-header .navbar .nav > li > a,
.skin-blue .main-header .navbar .nav > li > a {
  color: var(--wp-text-muted);
  font-size: var(--wp-fs-md);
  font-weight: 550;
  padding: 17px var(--wp-s4);
  transition: color var(--wp-dur) var(--wp-ease), background var(--wp-dur) var(--wp-ease);
}
.main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:focus {
  color: var(--wp-brand-600);
  background: var(--wp-brand-50);
}
.skin-blue .main-header .navbar .sidebar-toggle { color: var(--wp-text-muted); }
.skin-blue .main-header .navbar .sidebar-toggle:hover { background: var(--wp-brand-50); color: var(--wp-brand-600); }
.navbar-nav > .user-menu > .dropdown-toggle > .user-image { border-radius: var(--wp-r-pill); }

/* --- Page header --- */
.content-header { padding: var(--wp-s6) var(--wp-s5) var(--wp-s2); background: transparent; }
.content-header > h1 {
  font-size: var(--wp-fs-2xl);
  font-weight: 680;
  letter-spacing: -.02em;
  margin: 0 0 var(--wp-s1);
  color: var(--wp-text);
}
.content-header > h1 > small {
  font-size: var(--wp-fs-md);
  color: var(--wp-text-muted);
  font-weight: 450;
  margin-left: var(--wp-s2);
}
.content-header > .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  top: auto;
  right: var(--wp-s5);
  font-size: var(--wp-fs-sm);
  color: var(--wp-text-faint);
}
.content-header > .breadcrumb > li > a { color: var(--wp-text-muted); }
.content-header > .breadcrumb > li > a:hover { color: var(--wp-brand-600); }
.content-header > .breadcrumb > .active { color: var(--wp-text-faint); }
.content-header > .breadcrumb > li + li:before { color: var(--wp-n-300); }

.content { padding: var(--wp-s2) var(--wp-s5) var(--wp-s8); }

/* --- Footer --- */
.main-footer {
  background: var(--wp-surface);
  border-top: 1px solid var(--wp-border);
  color: var(--wp-text-faint);
  font-size: var(--wp-fs-sm);
  padding: var(--wp-s4) var(--wp-s5);
}

/* ============================= 4. SURFACES ============================= */

/* Boxes become elevated cards; AdminLTE's coloured 3px top border is dropped
   in favour of a single accent reserved for genuinely primary panels. */
.box {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-top: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  box-shadow: var(--wp-sh-sm);
  margin-bottom: var(--wp-s5);
  transition: box-shadow var(--wp-dur) var(--wp-ease);
}
.box.box-primary, .box.box-info, .box.box-success,
.box.box-warning, .box.box-danger, .box.box-default { border-top-color: var(--wp-border); }

/* Kept as a block (AdminLTE's own layout) rather than flex: several headers
   contain inline icons and buttons that a flex container shrank, wrapping
   "Sales Invoice" onto three lines on the POS screen. box-tools stays
   absolutely positioned, which is how AdminLTE already aligns it right. */
.box-header {
  padding: var(--wp-s4) var(--wp-s5);
  border-bottom: 1px solid var(--wp-border);
  position: relative;
}
.box-header:after { content: ""; display: table; clear: both; }
.box-header.with-border { border-bottom: 1px solid var(--wp-border); }
.box-header > .box-title {
  display: inline-block;
  max-width: 100%;
  font-size: var(--wp-fs-lg);
  font-weight: 640;
  letter-spacing: -.01em;
  color: var(--wp-text);
  margin: 0;
  line-height: 1.3;
}
.box-header > .box-tools { position: absolute; right: var(--wp-s4); top: 50%; transform: translateY(-50%); }
.box-body { padding: var(--wp-s5); }
.box-footer {
  background: var(--wp-surface-2);
  border-top: 1px solid var(--wp-border);
  padding: var(--wp-s4) var(--wp-s5);
  border-radius: 0 0 var(--wp-r-lg) var(--wp-r-lg);
}

/* The collapse/remove chrome on every box was visual noise; keep it reachable
   but quiet until hovered. */
.box-tools .btn-box-tool { color: var(--wp-text-faint); opacity: .55; transition: opacity var(--wp-dur) var(--wp-ease); }
.box:hover .btn-box-tool { opacity: 1; }
.btn-box-tool:hover { color: var(--wp-text); }

/* --- Dashboard tiles ---------------------------------------------------
   Previously eight fully saturated backgrounds competing for attention. Now
   a neutral card with one accent-tinted icon: the NUMBER is the loudest
   element, and hue is free to carry meaning again. */
.info-box {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  box-shadow: var(--wp-sh-sm);
  min-height: 92px;
  padding: 0;
  margin-bottom: var(--wp-s4);
  transition: box-shadow var(--wp-dur) var(--wp-ease), transform var(--wp-dur) var(--wp-ease);
}
.info-box:hover { box-shadow: var(--wp-sh-md); transform: translateY(-1px); }

.info-box-icon {
  width: 72px; height: 90px; line-height: 90px;
  border-radius: var(--wp-r-lg) 0 0 var(--wp-r-lg);
  font-size: 26px;
  background: var(--wp-surface-3) !important;
  color: var(--wp-text-muted) !important;
}
.info-box-icon.bg-aqua, .info-box-icon.bg-blue, .info-box-icon.bg-light-blue
  { background: var(--wp-info-bg) !important;    color: var(--wp-info-fg) !important; }
.info-box-icon.bg-green, .info-box-icon.bg-olive
  { background: var(--wp-success-bg) !important; color: var(--wp-success-fg) !important; }
.info-box-icon.bg-yellow, .info-box-icon.bg-orange
  { background: var(--wp-warning-bg) !important; color: var(--wp-warning-fg) !important; }
.info-box-icon.bg-red, .info-box-icon.bg-maroon
  { background: var(--wp-danger-bg) !important;  color: var(--wp-danger-fg) !important; }
.info-box-icon.bg-purple, .info-box-icon.bg-navy, .info-box-icon.bg-teal
  { background: var(--wp-brand-50) !important;   color: var(--wp-brand-600) !important; }

.info-box-content { padding: var(--wp-s4) var(--wp-s4) var(--wp-s4) var(--wp-s4); margin-left: 72px; }
.info-box-text {
  font-size: var(--wp-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp-text-muted);
}
.info-box-number {
  /* Totals can run to "৳ 104,509,812.35". At a fixed 22px that wrapped
     between the currency symbol and the digits on narrower screens, so the
     size flexes with the viewport and the value is kept on one line. */
  font-size: clamp(15px, 1.45vw, 22px);
  font-weight: 680;
  letter-spacing: -.02em;
  color: var(--wp-text);
  margin-top: 2px;
  display: block;
  white-space: nowrap;
}
.info-box-text { white-space: normal; }

/* small-box: the four "click to view" counters. */
.small-box {
  border-radius: var(--wp-r-lg);
  box-shadow: var(--wp-sh-sm);
  border: 1px solid var(--wp-border);
  background: var(--wp-surface) !important;
  color: var(--wp-text) !important;
  margin-bottom: var(--wp-s4);
  overflow: hidden;
  transition: box-shadow var(--wp-dur) var(--wp-ease), transform var(--wp-dur) var(--wp-ease);
}
.small-box:hover { box-shadow: var(--wp-sh-md); transform: translateY(-1px); }
.small-box > .inner { padding: var(--wp-s5); }
.small-box h3 {
  font-size: var(--wp-fs-3xl); font-weight: 700; letter-spacing: -.03em;
  color: var(--wp-text) !important; margin: 0 0 2px;
}
.small-box p {
  font-size: var(--wp-fs-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wp-text-muted) !important; margin: 0;
}
.small-box > .icon { color: var(--wp-n-200) !important; font-size: 68px; top: 8px; right: 12px; transition: color var(--wp-dur) var(--wp-ease); }
.small-box:hover > .icon { color: var(--wp-n-300) !important; }
.small-box > .small-box-footer {
  background: var(--wp-surface-2) !important;
  color: var(--wp-brand-600) !important;
  border-top: 1px solid var(--wp-border);
  font-size: var(--wp-fs-sm); font-weight: 600;
  padding: 10px; opacity: 1;
}
.small-box > .small-box-footer:hover { background: var(--wp-brand-50) !important; color: var(--wp-brand-700) !important; }

/* =============================== 5. DATA =============================== */

.table { color: var(--wp-text); font-size: var(--wp-fs-md); margin-bottom: 0; }

/* The solid blue header bar is replaced by a quiet tinted strip: column
   labels should not out-shout the data underneath them. */
.table > thead > tr > th,
.table thead.bg-primary > tr > th,
table.dataTable thead > tr > th {
  background: var(--wp-surface-2) !important;
  color: var(--wp-text-muted) !important;
  font-size: var(--wp-fs-xs);
  font-weight: 650;
  letter-spacing: .045em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--wp-border) !important;
  border-top: 0 !important;
  padding: 11px var(--wp-s3);
  vertical-align: middle;
  white-space: nowrap;
}
.table > tbody > tr > td {
  padding: 11px var(--wp-s3);
  border-top: 1px solid var(--wp-border);
  vertical-align: middle;
}
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
  border-color: var(--wp-border);
}
.table-bordered { border-radius: var(--wp-r-md); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.table-hover > tbody > tr:hover,
.table-striped > tbody > tr:nth-of-type(odd):hover { background: var(--wp-surface-2); }
table.dataTable tbody tr { background: transparent; }

/* --- DataTables controls --- */
.dataTables_wrapper { padding: 0; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: var(--wp-fs-sm); color: var(--wp-text-muted);
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--wp-border-str);
  border-radius: var(--wp-r-sm);
  background: var(--wp-surface);
  color: var(--wp-text);
  padding: 5px 10px; height: 32px;
  transition: border-color var(--wp-dur) var(--wp-ease), box-shadow var(--wp-dur) var(--wp-ease);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: 0; border-color: var(--wp-brand-500); box-shadow: var(--wp-ring);
}
.dataTables_wrapper .dataTables_filter input { min-width: 220px; }

/* Export buttons: one quiet group, not six coloured pills. */
.dt-buttons .btn,
.dt-buttons .btn.bg-teal,
.dt-buttons .btn.color-palette {
  background: var(--wp-surface) !important;
  color: var(--wp-text-muted) !important;
  border: 1px solid var(--wp-border-str) !important;
  border-radius: 0;
  font-size: var(--wp-fs-sm); font-weight: 600;
  padding: 6px 13px;
  box-shadow: none;
  transition: background var(--wp-dur) var(--wp-ease), color var(--wp-dur) var(--wp-ease);
}
.dt-buttons .btn:first-child { border-radius: var(--wp-r-sm) 0 0 var(--wp-r-sm); }
.dt-buttons .btn:last-child  { border-radius: 0 var(--wp-r-sm) var(--wp-r-sm) 0; }
.dt-buttons .btn + .btn { border-left: 0 !important; }
.dt-buttons .btn:hover {
  background: var(--wp-brand-50) !important;
  color: var(--wp-brand-700) !important;
  border-color: var(--wp-brand-200) !important;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate li.paginate_button {
  background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button > a,
.dataTables_wrapper .dataTables_paginate a.paginate_button,
.pagination > li > a, .pagination > li > span {
  border-radius: var(--wp-r-sm) !important;
  border: 1px solid var(--wp-border) !important;
  background: var(--wp-surface) !important;
  color: var(--wp-text-muted) !important;
  margin: 0 2px; padding: 5px 11px !important;
  font-size: var(--wp-fs-sm); font-weight: 550;
  transition: all var(--wp-dur) var(--wp-ease);
}
.dataTables_wrapper .dataTables_paginate .paginate_button > a:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
.pagination > li > a:hover {
  background: var(--wp-brand-50) !important;
  color: var(--wp-brand-700) !important;
  border-color: var(--wp-brand-200) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.active > a,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.pagination > .active > a, .pagination > .active > span {
  background: var(--wp-brand-600) !important;
  border-color: var(--wp-brand-600) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; }

/* Sort affordances */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { cursor: pointer; }

/* --- Badges / labels --- */
.label {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--wp-r-pill);
  font-size: var(--wp-fs-xs);
  font-weight: 650;
  letter-spacing: .02em;
  line-height: 1.5;
}
.label-success, .label.bg-green  { background: var(--wp-success-bg) !important; color: var(--wp-success-fg) !important; }
.label-danger,  .label.bg-red    { background: var(--wp-danger-bg)  !important; color: var(--wp-danger-fg)  !important; }
.label-warning, .label.bg-yellow { background: var(--wp-warning-bg) !important; color: var(--wp-warning-fg) !important; }
.label-info,    .label.bg-aqua   { background: var(--wp-info-bg)    !important; color: var(--wp-info-fg)    !important; }
.label-primary                   { background: var(--wp-brand-50)   !important; color: var(--wp-brand-700)  !important; }
.label-default                   { background: var(--wp-surface-3)  !important; color: var(--wp-text-muted) !important; }

/* =============================== 6. INPUT =============================== */

/* --- Forms --- */
.form-control, .form-control:not(select) {
  height: 38px;
  padding: 7px 12px;
  font-size: var(--wp-fs-md);
  color: var(--wp-text);
  background: var(--wp-surface);
  border: 1px solid var(--wp-border-str);
  border-radius: var(--wp-r-sm);
  box-shadow: none;
  transition: border-color var(--wp-dur) var(--wp-ease), box-shadow var(--wp-dur) var(--wp-ease);
}
textarea.form-control { height: auto; min-height: 80px; }
.form-control:focus {
  border-color: var(--wp-brand-500);
  box-shadow: var(--wp-ring);
  outline: 0;
}
.form-control::placeholder { color: var(--wp-text-faint); }
.form-control[readonly], .form-control[disabled], fieldset[disabled] .form-control {
  background: var(--wp-surface-3); color: var(--wp-text-muted); cursor: not-allowed;
}
.input-sm { height: 32px; padding: 4px 10px; font-size: var(--wp-fs-sm); border-radius: var(--wp-r-sm); }

label, .control-label {
  font-size: var(--wp-fs-sm);
  font-weight: 600;
  color: var(--wp-text-muted);
  margin-bottom: 6px;
}
.form-group { margin-bottom: var(--wp-s4); }
.help-block { font-size: var(--wp-fs-sm); color: var(--wp-text-faint); }

.input-group-addon {
  background: var(--wp-surface-2);
  border: 1px solid var(--wp-border-str);
  color: var(--wp-text-muted);
  border-radius: var(--wp-r-sm);
  font-size: var(--wp-fs-sm);
}
.input-group .form-control:first-child,
.input-group-addon:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .form-control:last-child,
.input-group-addon:last-child  { border-top-left-radius: 0;  border-bottom-left-radius: 0; }

.has-error .form-control { border-color: var(--wp-danger); }
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.22); }
.has-error .control-label, .text-danger { color: var(--wp-danger-fg); }

/* --- Buttons ---------------------------------------------------------
   The old UI gave Hold / Multiple / Cash / Pay All four different saturated
   colours, so none of them read as the primary action. One filled brand
   button per view; everything else is a quiet outline. */
.btn {
  font-size: var(--wp-fs-md);
  font-weight: 600;
  border-radius: var(--wp-r-sm);
  padding: 8px 16px;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background var(--wp-dur) var(--wp-ease), border-color var(--wp-dur) var(--wp-ease),
              color var(--wp-dur) var(--wp-ease), box-shadow var(--wp-dur) var(--wp-ease),
              transform var(--wp-dur) var(--wp-ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible { outline: 0; box-shadow: var(--wp-ring); }
.btn-sm { padding: 5px 12px; font-size: var(--wp-fs-sm); }
.btn-lg { padding: 11px 22px; font-size: var(--wp-fs-lg); }
.btn-flat { border-radius: var(--wp-r-sm); }

.btn-primary, .btn.bg-blue, .btn.bg-light-blue {
  background: var(--wp-brand-600); border-color: var(--wp-brand-600); color: var(--wp-on-brand);
}
.btn-primary:hover, .btn-primary:focus, .btn.bg-blue:hover {
  background: var(--wp-brand-700); border-color: var(--wp-brand-700); color: #fff;
}
.btn-success, .btn.bg-green { background: var(--wp-success); border-color: var(--wp-success); color: #fff; }
.btn-success:hover, .btn.bg-green:hover { background: var(--wp-success-fg); border-color: var(--wp-success-fg); color: #fff; }
.btn-danger,  .btn.bg-red   { background: var(--wp-danger);  border-color: var(--wp-danger);  color: #fff; }
.btn-danger:hover { background: var(--wp-danger-fg); border-color: var(--wp-danger-fg); color: #fff; }
.btn-warning, .btn.bg-yellow, .btn.bg-orange { background: var(--wp-warning); border-color: var(--wp-warning); color: #fff; }
.btn-warning:hover { background: var(--wp-warning-fg); border-color: var(--wp-warning-fg); color: #fff; }
.btn-info, .btn.bg-aqua { background: var(--wp-info); border-color: var(--wp-info); color: #fff; }
.btn-info:hover { background: var(--wp-info-fg); border-color: var(--wp-info-fg); color: #fff; }

.btn-default {
  background: var(--wp-surface);
  border-color: var(--wp-border-str);
  color: var(--wp-text);
}
.btn-default:hover, .btn-default:focus {
  background: var(--wp-surface-2); border-color: var(--wp-n-400); color: var(--wp-text);
}

/* The dropdown "Action" control on every list row. */
.btn-group .btn.dropdown-toggle {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border-str);
  color: var(--wp-text-muted);
  font-weight: 600;
}
.btn-group .btn.dropdown-toggle:hover {
  background: var(--wp-brand-50); color: var(--wp-brand-700); border-color: var(--wp-brand-200);
}
.btn-primary.btn-o, .btn.btn-o {
  background: var(--wp-surface); color: var(--wp-text-muted); border: 1px solid var(--wp-border-str);
}

.dropdown-menu {
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-md);
  box-shadow: var(--wp-sh-lg);
  background: var(--wp-surface);
  padding: var(--wp-s1);
  font-size: var(--wp-fs-md);
}
.dropdown-menu > li > a {
  color: var(--wp-text); padding: 8px 12px; border-radius: var(--wp-r-sm); font-weight: 500;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background: var(--wp-brand-50); color: var(--wp-brand-700);
}
.dropdown-menu .divider { background: var(--wp-border); }

/* --- select2 --- */
.select2-container--default .select2-selection--single {
  height: 38px;
  border: 1px solid var(--wp-border-str);
  border-radius: var(--wp-r-sm);
  background: var(--wp-surface);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px; color: var(--wp-text); font-size: var(--wp-fs-md); padding-left: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--wp-brand-500); box-shadow: var(--wp-ring);
}
.select2-dropdown {
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-md);
  box-shadow: var(--wp-sh-lg);
  background: var(--wp-surface);
}
.select2-container--default .select2-results__option { font-size: var(--wp-fs-md); color: var(--wp-text); padding: 8px 12px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--wp-brand-600); color: #fff;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--wp-border-str); border-radius: var(--wp-r-sm); padding: 6px 10px;
}

/* --- Focus visibility (a11y) ---
   Bootstrap 3 removed outlines without replacing them; restore a visible
   ring for keyboard users without showing it on mouse clicks. */
:focus-visible { outline: 2px solid var(--wp-brand-500); outline-offset: 2px; }
a:focus-visible, .btn:focus-visible, .form-control:focus-visible { outline: none; box-shadow: var(--wp-ring); }

/* ============================= 7. OVERLAYS ============================= */

.modal-content {
  border: 0;
  border-radius: var(--wp-r-xl);
  box-shadow: var(--wp-sh-lg);
  background: var(--wp-surface);
}
.modal-header {
  border-bottom: 1px solid var(--wp-border);
  padding: var(--wp-s5) var(--wp-s6);
  border-radius: var(--wp-r-xl) var(--wp-r-xl) 0 0;
}
.modal-header .modal-title { font-size: var(--wp-fs-xl); font-weight: 650; letter-spacing: -.015em; color: var(--wp-text); }
.modal-body { padding: var(--wp-s6); }
.modal-footer { border-top: 1px solid var(--wp-border); padding: var(--wp-s4) var(--wp-s6); background: var(--wp-surface-2); border-radius: 0 0 var(--wp-r-xl) var(--wp-r-xl); }
.modal-backdrop.in { opacity: .45; background: var(--wp-n-900); }
.close { color: var(--wp-text-faint); opacity: .8; text-shadow: none; font-size: 22px; }
.close:hover { color: var(--wp-text); opacity: 1; }

/* Alerts / flash messages */
.alert {
  border: 1px solid transparent;
  border-radius: var(--wp-r-md);
  padding: var(--wp-s3) var(--wp-s4);
  font-size: var(--wp-fs-md);
  box-shadow: var(--wp-sh-xs);
}
.alert-success { background: var(--wp-success-bg); border-color: var(--wp-success); color: var(--wp-success-fg); }
.alert-danger  { background: var(--wp-danger-bg);  border-color: var(--wp-danger);  color: var(--wp-danger-fg); }
.alert-warning { background: var(--wp-warning-bg); border-color: var(--wp-warning); color: var(--wp-warning-fg); }
.alert-info    { background: var(--wp-info-bg);    border-color: var(--wp-info);    color: var(--wp-info-fg); }

/* Toastr */
#toast-container > div {
  border-radius: var(--wp-r-md);
  box-shadow: var(--wp-sh-lg) !important;
  opacity: 1;
  font-size: var(--wp-fs-md);
  padding: 14px 16px 14px 48px;
}
#toast-container > .toast-success { background-color: var(--wp-success); }
#toast-container > .toast-error   { background-color: var(--wp-danger); }
#toast-container > .toast-warning { background-color: var(--wp-warning); }
#toast-container > .toast-info    { background-color: var(--wp-info); }

.tooltip-inner {
  background: var(--wp-n-900); color: #fff;
  border-radius: var(--wp-r-sm); font-size: var(--wp-fs-sm);
  padding: 6px 10px; box-shadow: var(--wp-sh-md);
}
.tooltip.top .tooltip-arrow { border-top-color: var(--wp-n-900); }

/* Pace loader uses the brand colour instead of AdminLTE's blue. */
.pace .pace-progress { background: var(--wp-brand-500); height: 3px; }
.pace .pace-progress-inner { box-shadow: 0 0 10px var(--wp-brand-500), 0 0 5px var(--wp-brand-500); }


/* Several views colour the header ROW (<tr class="bg-blue">) rather than the
   cells, and AdminLTE sets those with !important, so the row background won a
   cell-level override. Neutralise the row and let the cell rule apply. */
.table > thead > tr.bg-blue,
.table > thead > tr.bg-primary,
.table > thead > tr.bg-aqua,
.table > thead > tr.bg-light-blue,
.table > thead > tr.bg-green,
.table > thead > tr.bg-red,
.table > thead > tr.bg-yellow,
.table > thead > tr.bg-purple,
.table > thead > tr.bg-navy,
.table > thead > tr.bg-teal,
table.dataTable > thead > tr.bg-blue {
  background: transparent !important;
  color: inherit !important;
}
.table > thead > tr.bg-blue > th,
.table > thead > tr.bg-primary > th,
.table > thead > tr.bg-aqua > th,
.table > thead > tr.bg-light-blue > th,
.table > thead > tr.bg-green > th,
.table > thead > tr.bg-red > th,
.table > thead > tr.bg-yellow > th,
.table > thead > tr.bg-purple > th,
.table > thead > tr.bg-navy > th,
.table > thead > tr.bg-teal > th {
  background: var(--wp-surface-2) !important;
  color: var(--wp-text-muted) !important;
}

/* Some tables have no <thead> at all: the header is a plain
   <tr class="bg-blue"> of <td> cells (dashboard "Recently Added Items").
   Those need the same treatment, matched on the row wherever it sits. */
.table > tbody > tr.bg-blue,
.table > tbody > tr.bg-primary,
.table > tbody > tr.bg-aqua,
.table > tbody > tr.bg-light-blue,
.table > tr.bg-blue,
.table > tr.bg-primary {
  background: transparent !important;
  color: inherit !important;
}
.table > tbody > tr.bg-blue > td,
.table > tbody > tr.bg-blue > th,
.table > tbody > tr.bg-primary > td,
.table > tbody > tr.bg-aqua > td,
.table > tbody > tr.bg-light-blue > td,
.table > tr.bg-blue > td,
.table > tr.bg-primary > td {
  background: var(--wp-surface-2) !important;
  color: var(--wp-text-muted) !important;
  font-size: var(--wp-fs-xs);
  font-weight: 650;
  letter-spacing: .045em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--wp-border) !important;
}

/* A few views hard-code inline background colours on buttons; inline styles
   outrank any stylesheet, so those are fixed in the markup instead. This
   covers the class-based variants that remain. */
.btn.bg-purple, .btn.bg-maroon, .btn.bg-navy, .btn.bg-olive, .btn.bg-teal {
  background: var(--wp-brand-600); border-color: var(--wp-brand-600); color: #fff;
}
.btn.bg-purple:hover, .btn.bg-maroon:hover, .btn.bg-navy:hover,
.btn.bg-olive:hover, .btn.bg-teal:hover { background: var(--wp-brand-700); border-color: var(--wp-brand-700); }

/* Quick-links row on the dashboard. */
.wp-quicklinks { display: flex; flex-wrap: wrap; gap: var(--wp-s2); margin: 0 0 var(--wp-s5); }
.wp-quicklinks .wp-ql {
  display: inline-flex; align-items: center; gap: var(--wp-s2);
  padding: 9px 14px;
  background: var(--wp-surface);
  border: 1px solid var(--wp-border-str);
  border-radius: var(--wp-r-sm);
  color: var(--wp-text); font-size: var(--wp-fs-md); font-weight: 600;
  text-decoration: none;
  transition: all var(--wp-dur) var(--wp-ease);
}
.wp-quicklinks .wp-ql:hover {
  background: var(--wp-brand-50); border-color: var(--wp-brand-300);
  color: var(--wp-brand-700); transform: translateY(-1px); box-shadow: var(--wp-sh-sm);
}
.wp-quicklinks .wp-ql > .fa { color: var(--wp-text-faint); transition: color var(--wp-dur) var(--wp-ease); }
.wp-quicklinks .wp-ql:hover > .fa { color: var(--wp-brand-600); }

/* Section heading used above grouped content. */
.wp-section-title {
  font-size: var(--wp-fs-lg); font-weight: 650; letter-spacing: -.01em;
  color: var(--wp-text); margin: var(--wp-s6) 0 var(--wp-s3); text-align: left;
}

/* =========================== 8. UTIL & MOTION =========================== */

.nav-tabs { border-bottom: 1px solid var(--wp-border); }
.nav-tabs > li > a {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--wp-text-muted); font-weight: 600; font-size: var(--wp-fs-md); padding: 10px 16px;
  transition: color var(--wp-dur) var(--wp-ease), border-color var(--wp-dur) var(--wp-ease);
}
.nav-tabs > li > a:hover { background: transparent; color: var(--wp-text); border-bottom-color: var(--wp-border-str); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: 0; border-bottom: 2px solid var(--wp-brand-600);
  color: var(--wp-brand-700); background: transparent;
}
.nav-tabs-custom { box-shadow: var(--wp-sh-sm); border-radius: var(--wp-r-lg); background: var(--wp-surface); }
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--wp-brand-600); }

.progress { background: var(--wp-surface-3); border-radius: var(--wp-r-pill); box-shadow: none; height: 8px; }
.progress-bar { background: var(--wp-brand-600); box-shadow: none; }

.well { background: var(--wp-surface-2); border: 1px solid var(--wp-border); border-radius: var(--wp-r-lg); box-shadow: none; }
.panel { border-radius: var(--wp-r-lg); border-color: var(--wp-border); box-shadow: var(--wp-sh-sm); }

.text-muted { color: var(--wp-text-muted) !important; }
.bg-gray { background: var(--wp-surface-3) !important; color: var(--wp-text) !important; }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print: drop the chrome, keep the document. */
@media print {
  .main-sidebar, .main-header, .main-footer, .content-header > .breadcrumb,
  .dt-buttons, .dataTables_filter, .dataTables_length, .dataTables_paginate, .box-tools { display: none !important; }
  .content-wrapper { margin-left: 0 !important; background: #fff !important; }
  .box { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ============================ 9. POS SCREEN ============================
   The till is the screen staff live in, so it gets rules of its own.
   ====================================================================== */

/* --- Action hierarchy ---------------------------------------------------
   The four actions shipped as four saturated colours — crimson Hold, blue
   Multiple, green Cash, purple Pay All — so nothing read as the primary
   action and the destructive-looking one (Hold) was the most eye-catching.
   One filled button for the common completion (Cash); the other completions
   are outlined in the same hue, so they group; Hold is quiet because it is
   the rare, reversible one. */
#show_cash_modal,
button[id^="show_cash_modal"] {
  background: var(--wp-success) !important;
  border-color: var(--wp-success) !important;
  color: #fff !important;
  font-weight: 650;
  box-shadow: var(--wp-sh-sm);
}
#show_cash_modal:hover { background: var(--wp-success-fg) !important; border-color: var(--wp-success-fg) !important; }

#pay_all, .show_payments_modal {
  background: var(--wp-surface) !important;
  border: 1px solid var(--wp-brand-300) !important;
  color: var(--wp-brand-700) !important;
  font-weight: 620;
  box-shadow: none;
}
#pay_all:hover, .show_payments_modal:hover {
  background: var(--wp-brand-50) !important;
  border-color: var(--wp-brand-500) !important;
  color: var(--wp-brand-800) !important;
}

#hold_invoice {
  background: var(--wp-surface) !important;
  border: 1px solid var(--wp-border-str) !important;
  color: var(--wp-text-muted) !important;
  font-weight: 600;
  box-shadow: none;
}
#hold_invoice:hover {
  background: var(--wp-warning-bg) !important;
  border-color: var(--wp-warning) !important;
  color: var(--wp-warning-fg) !important;
}

/* --- Totals bar --- */
.box-footer.bg-gray {
  background: var(--wp-surface-2) !important;
  border-top: 1px solid var(--wp-border);
}
.box-footer.bg-gray label {
  font-size: var(--wp-fs-xs); text-transform: uppercase;
  letter-spacing: .05em; color: var(--wp-text-muted); font-weight: 650;
}
.box-footer .tot_grand { color: var(--wp-text); font-weight: 700; }

/* --- Cart ---
   The cart table is the focus of the screen; give it room and a readable
   empty state instead of a blank rectangle. */
#pos-form-tbody { font-size: var(--wp-fs-md) !important; font-weight: 500 !important; }
#pos-form-tbody > tr > td { padding: 10px var(--wp-s3); vertical-align: middle; }
/* Empty cart.
   A real element rather than a pseudo-element: ::after on a <table> box is not
   reliably painted, and on the <tbody> it is laid out as an anonymous cell
   (confined to column one, and it inflated the table height). The element is
   hidden as soon as the cart has a row, via :has() on the wrapper - no JS. */
.wp-cart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--wp-s3);
  padding: 56px var(--wp-s5);
  text-align: center;
  color: var(--wp-text-faint);
}
.wp-cart-empty .fa { font-size: 30px; opacity: .45; }
.wp-cart-empty p { margin: 0; font-size: var(--wp-fs-md); font-weight: 500; max-width: 32ch; }
/* Any row in the cart hides it. */
:has(#pos-form-tbody tr) > .wp-cart-empty,
:has(#pos-form-tbody tr) .wp-cart-empty { display: none; }

.items_table > thead > tr > th {
  position: sticky; top: 0; z-index: 2;
  background: var(--wp-surface-2) !important;
}

/* --- Product tiles ------------------------------------------------------
   The template used to pin every tile to max-height:150px while its content
   needed ~164px, so long names pushed the price out of the visible box
   ("BEEF BONELESS MEAT…" clipped ৳550.00). Tiles now size to a fixed grid
   row with the name clamped and the price pinned to the bottom, so prices
   line up across the grid and nothing is cut off.

   Stock state comes from data-stock-state on the tile (set once in
   PosModel), so the tint, the border and the badge all agree. */
.item_box {
  display: flex;
  flex-direction: column;
  min-height: 196px;
  padding: var(--wp-s2) var(--wp-s2) var(--wp-s3);
  border-radius: var(--wp-r-md) !important;
  border: 1px solid var(--wp-border) !important;
  background: var(--wp-surface) !important;
  box-shadow: var(--wp-sh-xs);
  position: relative;
  transition: box-shadow var(--wp-dur) var(--wp-ease), transform var(--wp-dur) var(--wp-ease),
              border-color var(--wp-dur) var(--wp-ease);
}
.item_box:hover { box-shadow: var(--wp-sh-md); transform: translateY(-2px); border-color: var(--wp-brand-400) !important; }
.item_box:active { transform: translateY(0); }

.item_box > .box-body.box-profile {
  padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
.item_box .item_image {
  height: 76px; width: auto; max-width: 100%; object-fit: contain;
  margin: var(--wp-s2) auto var(--wp-s2);
  border: 0 !important; border-radius: var(--wp-r-sm); background: transparent;
}
.item_box .item-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--wp-fs-sm); font-weight: 600; line-height: 1.3;
  color: var(--wp-text); text-align: center; min-height: 2.6em;
}
.item_box .item-price {
  display: block; margin-top: auto; padding-top: var(--wp-s1);
  text-align: center; font-size: var(--wp-fs-lg); font-weight: 700;
  color: var(--wp-text); font-variant-numeric: tabular-nums;
}

/* Stock badge: a number in a pill, with the state in its colour and in the
   tooltip, so it never depends on colour alone. */
.item_box .item-stock-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--wp-fs-xs);
  padding: 2px 8px;
}

/* In stock: quiet. The common case should not shout. */
.item_box[data-stock-state="in"]  { border-color: var(--wp-border) !important; }
/* Low: amber edge draws the eye without blocking the sale. */
.item_box[data-stock-state="low"] { border-color: var(--wp-warning) !important; }
/* The ribbon is absolutely positioned, so tiles that show one reserve space
   for it; without this it printed on top of the price. */
.item_box[data-stock-state="low"],
.item_box[data-stock-state="out"] { padding-bottom: 22px; }
.item_box[data-stock-state="low"]::after {
  content: "Low stock"; position: absolute; bottom: 0; left: 0; right: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wp-warning-fg); background: var(--wp-warning-bg); padding: 2px 0; text-align: center;
  border-radius: 0 0 var(--wp-r-md) var(--wp-r-md);
}
/* Out: dimmed and visibly not-clickable, since the click is a no-op. */
.item_box[data-stock-state="out"] {
  opacity: .62; cursor: not-allowed !important; background: var(--wp-surface-2) !important;
}
.item_box[data-stock-state="out"]:hover { transform: none; box-shadow: var(--wp-sh-xs); border-color: var(--wp-border) !important; }
.item_box[data-stock-state="out"] .item_image { filter: grayscale(1); }
.item_box[data-stock-state="out"]::after {
  content: "Out of stock"; position: absolute; bottom: 0; left: 0; right: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wp-danger-fg); background: var(--wp-danger-bg); padding: 2px 0; text-align: center;
  border-radius: 0 0 var(--wp-r-md) var(--wp-r-md);
}

.search_div { margin-top: var(--wp-s2); }

/* --- POS top bar --- */
.pos-header, .navbar.pos-navbar {
  background: var(--wp-surface);
  border-bottom: 1px solid var(--wp-border);
  box-shadow: var(--wp-sh-xs);
}

/* --- Category / brand filter row --- */
#category_id + .select2-container,
#brand_id + .select2-container { min-width: 180px; }


/* =============================== 10. SKINS =============================== */

/* ------------------------------------------------------------------
   SKINS

   The app ships an AdminLTE skin picker (6 hues x dark/light sidebar) and
   stores the choice in localStorage; sidebar.php adds the class to <body>.
   The accent therefore cannot be a constant - every brand token below is
   redefined per skin so the whole design layer (buttons, links, active nav,
   focus rings, pagination, tabs, charts) re-tints when the skin changes.

   Step 500 of each ramp is the skin's signature AdminLTE hue, so the project
   keeps its identity. Step 600 is the filled-surface step, darkened where
   necessary so white button text clears WCAG AA 4.5:1 - measured, not
   guessed. Yellow keeps its signature hue and flips to dark text instead
   (6.69:1), because darkening it enough for white text turns it brown.
   ------------------------------------------------------------------ */

body.skin-blue, body.skin-blue-light {
  --wp-brand-50: #e6f1f7;
  --wp-brand-100: #cbe2ef;
  --wp-brand-200: #acd0e5;
  --wp-brand-300: #86bad8;
  --wp-brand-400: #5fa4cc;
  --wp-brand-500: #3c8dbc;
  --wp-brand-600: #357ca5;
  --wp-brand-700: #2b6486;
  --wp-brand-800: #22506b;
  --wp-brand-900: #1b3f54;
  --wp-on-brand: #ffffff;
  --wp-ring: 0 0 0 3px #3c8dbc47;
}

body.skin-black, body.skin-black-light {
  --wp-brand-50: #9da8b7;
  --wp-brand-100: #8996a8;
  --wp-brand-200: #718197;
  --wp-brand-300: #5a687b;
  --wp-brand-400: #454f5d;
  --wp-brand-500: #2f3640;
  --wp-brand-600: #2f3640;
  --wp-brand-700: #1e2228;
  --wp-brand-800: #0f1114;
  --wp-brand-900: #090a0c;
  --wp-on-brand: #ffffff;
  --wp-ring: 0 0 0 3px #2f364047;
}

body.skin-purple, body.skin-purple-light {
  --wp-brand-50: #f2f2f8;
  --wp-brand-100: #dbdaeb;
  --wp-brand-200: #c1c0dd;
  --wp-brand-300: #a19fcb;
  --wp-brand-400: #807dba;
  --wp-brand-500: #605ca8;
  --wp-brand-600: #605ca8;
  --wp-brand-700: #504c8f;
  --wp-brand-800: #434078;
  --wp-brand-900: #383564;
  --wp-on-brand: #ffffff;
  --wp-ring: 0 0 0 3px #605ca847;
}

body.skin-green, body.skin-green-light {
  --wp-brand-50: #8dffcb;
  --wp-brand-100: #69ffba;
  --wp-brand-200: #40ffa8;
  --wp-brand-300: #0dff90;
  --wp-brand-400: #00d976;
  --wp-brand-500: #00a65a;
  --wp-brand-600: #008749;
  --wp-brand-700: #005f33;
  --wp-brand-800: #003b20;
  --wp-brand-900: #001c0f;
  --wp-on-brand: #ffffff;
  --wp-ring: 0 0 0 3px #00a65a47;
}

body.skin-red, body.skin-red-light {
  --wp-brand-50: #fdf3f2;
  --wp-brand-100: #f9e1de;
  --wp-brand-200: #f3c2bc;
  --wp-brand-300: #ec9a90;
  --wp-brand-400: #e47365;
  --wp-brand-500: #dd4b39;
  --wp-brand-600: #da3b28;
  --wp-brand-700: #b93120;
  --wp-brand-800: #9b291b;
  --wp-brand-900: #802216;
  --wp-on-brand: #ffffff;
  --wp-ring: 0 0 0 3px #dd4b3947;
}

body.skin-yellow, body.skin-yellow-light {
  --wp-brand-50: #fef7ec;
  --wp-brand-100: #fce9ca;
  --wp-brand-200: #fad9a4;
  --wp-brand-300: #f8c573;
  --wp-brand-400: #f5b043;
  --wp-brand-500: #f39c12;
  --wp-brand-600: #f39c12;
  --wp-brand-700: #7f5006;
  --wp-brand-800: #5d3b05;
  --wp-brand-900: #402803;
  --wp-on-brand: #1f2937;
  --wp-ring: 0 0 0 3px #f39c1247;
}

/* Light-sidebar variants: AdminLTE's *-light skins put a pale sidebar
   against dark text. Only the sidebar role tokens change. */
body[class*="skin-"][class*="-light"] {
  --wp-sidebar-bg:     var(--wp-n-0);
  --wp-sidebar-fg:     var(--wp-n-600);
  --wp-sidebar-fg-str: var(--wp-n-900);
  --wp-sidebar-hover:  var(--wp-n-100);
  --wp-sidebar-border: var(--wp-n-200);
}
@media (prefers-color-scheme: dark) {
  :root[data-wp-theme="system"] body[class*="skin-"][class*="-light"] {
    --wp-sidebar-bg:     #162032;
    --wp-sidebar-fg:     var(--wp-n-400);
    --wp-sidebar-fg-str: var(--wp-n-0);
    --wp-sidebar-hover:  rgba(255,255,255,.06);
    --wp-sidebar-border: rgba(255,255,255,.07);
  }
}

/* The active sidebar item and the logo carry the skin colour. */
.skin-blue .sidebar-menu > li.active > a,
.sidebar-menu > li.active > a { background: var(--wp-brand-600); color: var(--wp-on-brand); }
.skin-blue .sidebar-menu > li:hover > a,
.sidebar-menu > li:hover > a { border-left-color: var(--wp-brand-500); }

/* Top bar follows the skin, which is what the picker is for.
   Scoped as body[class*="skin-"] so it outranks AdminLTE's own per-skin rules
   (.skin-green .main-header .navbar and friends), which otherwise kept their
   2016 hues on every skin except blue. */
body[class*="skin-"] .main-header .navbar {
  background: var(--wp-brand-600);
  border-bottom-color: var(--wp-brand-700);
}
body[class*="skin-"] .main-header .navbar .nav > li > a,
body[class*="skin-"] .main-header .navbar .sidebar-toggle {
  color: var(--wp-on-brand); opacity: .92;
}
body[class*="skin-"] .main-header .navbar .nav > li > a:hover,
body[class*="skin-"] .main-header .navbar .nav > li > a:focus,
body[class*="skin-"] .main-header .navbar .sidebar-toggle:hover {
  background: rgba(0,0,0,.14); color: var(--wp-on-brand); opacity: 1;
}
body[class*="skin-"] .main-header .logo {
  background: var(--wp-brand-700);
  color: var(--wp-on-brand);
  border-bottom-color: var(--wp-brand-800);
}
body[class*="skin-"] .main-header .logo:hover { background: var(--wp-brand-800); filter: none; }

/* Same reason: AdminLTE sets the active sidebar item per skin. */
body[class*="skin-"] .sidebar-menu > li.active > a {
  background: var(--wp-brand-600); color: var(--wp-on-brand);
}
body[class*="skin-"] .sidebar-menu > li:hover > a { border-left-color: var(--wp-brand-500); }

/* Filled controls use the per-skin text colour so yellow stays readable. */
.btn-primary, .btn.bg-blue, .btn.bg-light-blue,
.btn.bg-purple, .btn.bg-maroon, .btn.bg-navy, .btn.bg-olive, .btn.bg-teal {
  background: var(--wp-brand-600); border-color: var(--wp-brand-600); color: var(--wp-on-brand);
}
.btn-primary:hover, .btn-primary:focus,
.btn.bg-blue:hover, .btn.bg-purple:hover, .btn.bg-maroon:hover,
.btn.bg-navy:hover, .btn.bg-olive:hover, .btn.bg-teal:hover {
  background: var(--wp-brand-700); border-color: var(--wp-brand-700); color: var(--wp-on-brand);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.active > a,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.pagination > .active > a, .pagination > .active > span {
  background: var(--wp-brand-600) !important; border-color: var(--wp-brand-600) !important;
  color: var(--wp-on-brand) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--wp-brand-600); color: var(--wp-on-brand);
}
.pace .pace-progress { background: var(--wp-brand-500); }
.progress-bar { background: var(--wp-brand-600); }

/* ============================ 11. LOGIN PAGE ============================
   The login view is a standalone HTML document - it does not include the
   shared head partial - so it previously missed this whole design layer and
   still rendered as stock AdminLTE. It now links the layer and uses the card
   below. Field names, the form action and the CSRF hidden input are
   unchanged; only the presentation differs.
   ====================================================================== */

body.wp-login {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--wp-s6) var(--wp-s4);
  background: var(--wp-bg);
  /* Two very soft brand washes so the page is not a flat slab. Pure CSS,
     no image request, and it costs nothing on a slow till. */
  background-image:
    radial-gradient(60rem 30rem at 12% -10%, color-mix(in srgb, var(--wp-brand-500) 14%, transparent), transparent 70%),
    radial-gradient(48rem 28rem at 108% 110%, color-mix(in srgb, var(--wp-brand-500) 11%, transparent), transparent 70%);
  background-repeat: no-repeat;
}

.wp-login-wrap { width: 100%; max-width: 408px; }

/* --- brand --- */
.wp-login-brand {
  display: flex; flex-direction: column; align-items: center; gap: var(--wp-s3);
  margin-bottom: var(--wp-s5);
}
.wp-login-brand .wp-mark { width: 54px; height: 54px; color: var(--wp-brand-600); filter: drop-shadow(0 6px 14px rgba(15,23,42,.18)); }
.wp-login-brand .wp-wordmark {
  font-size: var(--wp-fs-2xl); font-weight: 700; letter-spacing: -.025em; color: var(--wp-text); line-height: 1;
}
.wp-login-brand .wp-wordmark span { font-weight: 400; color: var(--wp-text-muted); }
.wp-login-brand .wp-tagline { font-size: var(--wp-fs-sm); color: var(--wp-text-muted); }

/* --- card --- */
.wp-login-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-xl);
  box-shadow: var(--wp-sh-lg);
  padding: var(--wp-s6);
}
.wp-login-card h1 {
  font-size: var(--wp-fs-xl); font-weight: 650; letter-spacing: -.015em;
  margin: 0 0 var(--wp-s1); color: var(--wp-text);
}
.wp-login-card .wp-sub { font-size: var(--wp-fs-md); color: var(--wp-text-muted); margin: 0 0 var(--wp-s5); }

/* --- fields: icon sits inside the control, label above --- */
.wp-field { margin-bottom: var(--wp-s4); }
.wp-field > label {
  display: block; font-size: var(--wp-fs-sm); font-weight: 600;
  color: var(--wp-text-muted); margin-bottom: 6px;
}
.wp-input-wrap { position: relative; display: block; }
.wp-input-wrap > .fa {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--wp-text-faint); font-size: 14px; pointer-events: none;
  transition: color var(--wp-dur) var(--wp-ease);
}
.wp-input-wrap > .form-control { height: 44px; padding-left: 38px; font-size: var(--wp-fs-lg); }
.wp-input-wrap > .form-control:focus ~ .fa,
.wp-input-wrap:focus-within > .fa { color: var(--wp-brand-600); }

/* Reveal toggle: a password you cannot check is a common cause of a failed
   login on a touch keyboard. */
.wp-reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 7px 9px; border-radius: var(--wp-r-sm);
  color: var(--wp-text-faint); cursor: pointer; line-height: 1;
  transition: color var(--wp-dur) var(--wp-ease), background var(--wp-dur) var(--wp-ease);
}
.wp-reveal:hover { color: var(--wp-text); background: var(--wp-surface-3); }
.wp-reveal:focus-visible { outline: none; box-shadow: var(--wp-ring); color: var(--wp-brand-600); }

.wp-login-submit {
  width: 100%; height: 44px; font-size: var(--wp-fs-lg); font-weight: 650;
  background: var(--wp-brand-600); border-color: var(--wp-brand-600); color: var(--wp-on-brand);
  border-radius: var(--wp-r-sm); box-shadow: var(--wp-sh-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wp-s2);
}
.wp-login-submit:hover, .wp-login-submit:focus {
  background: var(--wp-brand-700); border-color: var(--wp-brand-700); color: var(--wp-on-brand);
}

.wp-login-meta {
  display: flex; align-items: center; justify-content: flex-end;
  margin: calc(var(--wp-s4) * -1 + 4px) 0 var(--wp-s4);
}
.wp-login-meta a { font-size: var(--wp-fs-sm); font-weight: 600; color: var(--wp-brand-600); }
.wp-login-meta a:hover { color: var(--wp-brand-700); text-decoration: underline; }

/* --- messages --- */
.wp-login-alert {
  display: flex; align-items: flex-start; gap: var(--wp-s2);
  border-radius: var(--wp-r-md); padding: 10px var(--wp-s3);
  font-size: var(--wp-fs-md); margin-bottom: var(--wp-s4); border: 1px solid transparent;
}
.wp-login-alert.is-error { background: var(--wp-danger-bg); border-color: var(--wp-danger); color: var(--wp-danger-fg); }
.wp-login-alert.is-ok    { background: var(--wp-success-bg); border-color: var(--wp-success); color: var(--wp-success-fg); }

/* --- footer --- */
.wp-login-foot {
  margin-top: var(--wp-s5); text-align: center;
  font-size: var(--wp-fs-sm); color: var(--wp-text-faint);
}
.wp-login-foot a { color: var(--wp-text-muted); font-weight: 600; }
.wp-login-foot a:hover { color: var(--wp-brand-600); }

@media (max-width: 480px) {
  .wp-login-card { padding: var(--wp-s5) var(--wp-s4); }
  .wp-login-brand .wp-mark { width: 46px; height: 46px; }
}

/* ========================= 12. THEME PICKER ==========================
   Sits in the control sidebar above the skin swatches, so the two theming
   controls read as one group. The right sidebar is always dark in AdminLTE,
   so these are styled against a dark surface rather than the page tokens.
   ==================================================================== */

.wp-theme-picker { padding: 0 0 var(--wp-s4); margin-bottom: var(--wp-s4); border-bottom: 1px solid rgba(255,255,255,.08); }
.wp-theme-picker .control-sidebar-heading { margin-top: 0; }
.wp-theme-opts { display: flex; gap: 6px; }
.wp-theme-opt {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--wp-r-md);
  color: rgba(255,255,255,.72);
  font-size: var(--wp-fs-xs); font-weight: 600;
  cursor: pointer;
  transition: background var(--wp-dur) var(--wp-ease), border-color var(--wp-dur) var(--wp-ease),
              color var(--wp-dur) var(--wp-ease);
}
.wp-theme-opt .fa { font-size: 15px; }
.wp-theme-opt:hover { background: rgba(255,255,255,.1); color: #fff; }
.wp-theme-opt:focus-visible { outline: none; box-shadow: var(--wp-ring); }
.wp-theme-opt.is-active {
  background: var(--wp-brand-600);
  border-color: var(--wp-brand-500);
  color: var(--wp-on-brand);
}
.wp-theme-hint {
  margin: var(--wp-s2) 0 0; font-size: var(--wp-fs-xs);
  line-height: 1.5; color: rgba(255,255,255,.45);
}
.wp-theme-hint b { color: rgba(255,255,255,.72); font-weight: 650; }

/* ========================= 13. STICKY SHELL ==========================
   AdminLTE's default layout scrolls the header and sidebar away with the
   page; on long lists and reports that means scrolling back to the top to
   reach the nav. Both are pinned here.

   Done in CSS rather than by adding AdminLTE's `fixed` body class, because
   that class would have to be added to every view (each one is a standalone
   document) and it hard-codes a 50px header - this header is 56px.
   ==================================================================== */

:root { --wp-header-h: 56px; }

.main-header {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 1030;
}

/* The page body starts below the pinned header. */
.content-wrapper,
.right-side {
  padding-top: var(--wp-header-h);
}

/* Sidebar runs full height under the header and scrolls on its own, so a long
   menu stays reachable without moving the page. */
.main-sidebar,
.left-side {
  position: fixed;
  top: 0;
  bottom: 0;
  /* AdminLTE pads by 50px to clear its own header. This header is 56px, so
     the first menu item used to sit 6px under it. */
  padding-top: var(--wp-header-h);
  /* Frame only - it must NOT scroll. AdminLTE already gives the inner
     <section class="sidebar"> overflow-y:auto, so making this scroll as well
     produced two scrollbars side by side. */
  overflow: hidden;
}

/* The inner section is the single scroll container. */
.main-sidebar > .sidebar,
.left-side > .sidebar {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Scrollbar on the dark sidebar, so it is visible but not loud. */
.main-sidebar > .sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.main-sidebar > .sidebar::-webkit-scrollbar { width: 8px; }
.main-sidebar > .sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18); border-radius: var(--wp-r-pill);
  border: 2px solid transparent; background-clip: content-box;
}
.main-sidebar > .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); background-clip: content-box; }

/* The footer belongs to the scrolling page, not the fixed shell. */
.main-footer { margin-left: 230px; }
.sidebar-collapse .main-footer { margin-left: 50px; }
.layout-top-nav .main-footer { margin-left: 0; }

/* POS and other top-nav pages have no sidebar. */
.layout-top-nav .content-wrapper { margin-left: 0; }

/* Off-canvas on small screens: AdminLTE slides the sidebar with a transform,
   which still works when fixed; the content must not keep a gap for it. */
@media (max-width: 767px) {
  .main-sidebar, .left-side { padding-top: var(--wp-header-h); }
  .content-wrapper, .right-side, .main-footer { margin-left: 0; }
}

/* A sticky table header inside a scrolling page needs to clear the app header
   rather than slide under it. */
.items_table > thead > tr > th { top: 0; }

/* =============================== 14. RTL ===============================
   Arabic and Urdu load bootstrap.rtl + AdminLTE.rtl, which are unscoped full
   overrides. This layer loads after them, so every directional rule above
   (margins, borders, absolute offsets) has to be mirrored here or it silently
   re-imposes the LTR layout - which is what broke the sidebar.

   Scoped on [dir="rtl"], set on <html> by the head partials.
   ====================================================================== */

[dir="rtl"] .main-sidebar,
[dir="rtl"] .left-side { left: auto; right: 0; }

[dir="rtl"] .content-wrapper,
[dir="rtl"] .right-side,
[dir="rtl"] .main-footer { margin-left: 0; margin-right: 230px; }
[dir="rtl"].sidebar-collapse .content-wrapper,
[dir="rtl"] .sidebar-collapse .content-wrapper,
[dir="rtl"] .sidebar-collapse .main-footer { margin-left: 0; margin-right: 50px; }
[dir="rtl"] .layout-top-nav .content-wrapper,
[dir="rtl"] .layout-top-nav .main-footer { margin-right: 0; }

/* Active/hover indicator flips to the inner edge. */
[dir="rtl"] .sidebar-menu > li > a { border-left: 0; border-right: 3px solid transparent; }
[dir="rtl"] .skin-blue .sidebar-menu > li:hover > a,
[dir="rtl"] .sidebar-menu > li:hover > a,
[dir="rtl"] body[class*="skin-"] .sidebar-menu > li:hover > a { border-right-color: var(--wp-brand-500); }
[dir="rtl"] .skin-blue .sidebar-menu > li.active > a,
[dir="rtl"] .sidebar-menu > li.active > a { border-right-color: var(--wp-brand-300); }
[dir="rtl"] .treeview-menu > li > a { padding: 8px 42px 8px 5px; }

/* User panel.
   .info is position:absolute, and AdminLTE's LTR `left: 55px` is never reset
   for RTL - so the box kept starting 55px from the LEFT edge and ran underneath
   the right-floated avatar, clipping the name. (float has no effect on an
   absolutely positioned box, so it has to be fixed with the offsets.) Bound it
   on both sides: clear of the avatar on the right, padded on the left. */
[dir="rtl"] .user-panel > .image { float: right; }
[dir="rtl"] .user-panel > .info {
  /* The avatar takes 61px off the right edge (16px panel padding + a 45px
     image), so 55px still ran under it; 69px leaves an 8px gap. */
  left: 10px;
  right: 69px;
  text-align: right;
  padding-left: 0;
  padding-right: 10px;
}

/* Header and page furniture. */
[dir="rtl"] .content-header > .breadcrumb { right: auto; left: var(--wp-s5); }
[dir="rtl"] .box-header > .box-tools { right: auto; left: var(--wp-s4); }
[dir="rtl"] .main-header .logo { float: right; }
[dir="rtl"] .main-header .navbar { margin-left: 0; margin-right: 230px; }
[dir="rtl"] .sidebar-collapse .main-header .navbar { margin-right: 50px; }
[dir="rtl"] .layout-top-nav .main-header .navbar { margin-right: 0; }

/* Dashboard tiles. */
[dir="rtl"] .info-box-icon { border-radius: 0 var(--wp-r-lg) var(--wp-r-lg) 0; }
[dir="rtl"] .info-box-content { margin-left: 0; margin-right: 72px; }
[dir="rtl"] .small-box > .icon { right: auto; left: 12px; }

/* Forms: the inset icon and the reveal button swap ends. */
[dir="rtl"] .wp-input-wrap > .fa { left: auto; right: 13px; }
[dir="rtl"] .wp-input-wrap > .form-control { padding-left: 12px; padding-right: 38px; }
[dir="rtl"] .wp-reveal { right: auto; left: 6px; }
[dir="rtl"] .wp-login-meta { justify-content: flex-start; }

/* POS tiles. */
[dir="rtl"] .item_box .item-stock-badge { left: auto; right: 6px; }

/* Grouped export buttons mirror their end caps. */
[dir="rtl"] .dt-buttons .btn:first-child { border-radius: 0 var(--wp-r-sm) var(--wp-r-sm) 0; }
[dir="rtl"] .dt-buttons .btn:last-child  { border-radius: var(--wp-r-sm) 0 0 var(--wp-r-sm); }
[dir="rtl"] .dt-buttons .btn + .btn { border-left: 1px solid var(--wp-border-str) !important; border-right: 0 !important; }

/* Numbers stay left-to-right even inside RTL text. */
[dir="rtl"] .info-box-number,
[dir="rtl"] .small-box h3,
[dir="rtl"] .item_box .item-price { direction: ltr; unicode-bidi: embed; }

@media (max-width: 767px) {
  [dir="rtl"] .content-wrapper,
  [dir="rtl"] .right-side,
  [dir="rtl"] .main-footer { margin-right: 0; }
  [dir="rtl"] .main-header .navbar { margin-right: 0; }
}