/**
 * Just2Pay POS — global theme layer (DesignKit Option B + Champagne)
 * Loaded after vendor + app.css. Tokens align with j2p-ecr/DesignKit.html
 * Table / mobile: scroll containers + touch; page-level layouts come later.
 */

/* -------------------------------------------------------------------------
   Design tokens (light)
   ------------------------------------------------------------------------- */
:root {
  --j2p-primary: #0b1f4d;
  --j2p-secondary: #1d4ed8;
  --j2p-accent: #e7cfa3;
  --j2p-accent-hover: #d9be8a;
  --j2p-accent-pressed: #c7aa73;
  --j2p-accent-tint: #fbf3e3;

  --ink: #0f172a;
  --slate: #475569;
  --muted: #94a3b8;
  --border: #cbd5e1;
  --surface: #f8fafc;
  --white: #ffffff;

  --success: #16a34a;
  --warning: #f59e0b;
  --error: #dc2626;
  --info: #1d4ed8;

  --r-control: 12px;
  --r-card: 16px;
  --r-panel: 24px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --text-strong: var(--j2p-primary);
  --accent-text: #7a4e12;
  --accent-tint-bg: var(--j2p-accent-tint);

  --shadow-card: 0 6px 20px rgba(2, 6, 23, 0.08);
  --shadow-float: 0 12px 40px rgba(2, 6, 23, 0.14);

  --max: 1180px;

  --j2p-header-bg: rgba(11, 31, 77, 0.92);
  --j2p-sidebar-dark: #071537;
  --j2p-sidebar-dark-elevated: #0b1f4d;
  --j2p-sidebar-muted: #b6c2d6;
}

/* Dark theme: set on <html data-theme="dark"> when you wire a toggle */
:root[data-theme='dark'] {
  --j2p-secondary: #3b82f6;
  --surface: #0b1220;
  --white: #0f172a;
  --ink: #eaf0ff;
  --slate: #b6c2d6;
  --muted: #7d8aa3;
  --border: rgba(148, 163, 184, 0.22);
  --success: #22c55e;
  --warning: #fbbf24;
  --error: #ef4444;
  --info: #60a5fa;

  --text-strong: var(--ink);
  --accent-text: #e7cfa3;
  --accent-tint-bg: rgba(231, 207, 163, 0.08);

  --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.25);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.4);

  --j2p-header-bg: rgba(7, 21, 55, 0.96);
  --j2p-sidebar-dark: #050a14;
  --j2p-sidebar-dark-elevated: #0b1220;
  --j2p-sidebar-muted: #94a3b8;
}

/* -------------------------------------------------------------------------
   App shell (replaces gray-100 / gray-900 utilities on body + main)
   ------------------------------------------------------------------------- */
/* Document canvas — overrides Tailwind/Daisy neutral wash so shell matches DesignKit */
html.j2p-root {
  scroll-behavior: smooth;
  background: var(--surface) !important;
  color: var(--ink);
}

body.j2p-app-body {
  background: var(--surface) !important;
  color: var(--ink);
}

main.j2p-app-main {
  background: var(--surface);
}

/* Vendor default body font; Tailwind pages still use .tw-font-sans on body */
body.j2p-app-body {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    'Apple Color Emoji',
    'Segoe UI Emoji';
}

/* -------------------------------------------------------------------------
   Links + Bootstrap / AdminLTE text helpers
   ------------------------------------------------------------------------- */
a {
  color: var(--j2p-secondary);
}

a:hover,
a:focus {
  color: #1e40af;
}

:root[data-theme='dark'] a:hover,
:root[data-theme='dark'] a:focus {
  color: #93c5fd;
}

.text-primary {
  color: var(--j2p-secondary) !important;
}

.text-muted {
  color: var(--muted) !important;
}

/* -------------------------------------------------------------------------
   Buttons (DesignKit: primary CTA = champagne, secondary = blue)
   ------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--j2p-accent);
  border-color: var(--j2p-accent-hover);
  color: var(--j2p-primary);
  font-weight: 700;
  border-radius: var(--r-control);
  box-shadow: 0 14px 30px rgba(231, 207, 163, 0.18);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--j2p-accent-hover);
  border-color: var(--j2p-accent-pressed);
  color: var(--j2p-primary);
}

.btn-success {
  background-color: var(--success);
  border-color: var(--success);
  border-radius: var(--r-control);
}

.btn-success:hover,
.btn-success:focus {
  background-color: #15803d;
  border-color: #15803d;
}

.btn-info {
  background-color: var(--j2p-secondary);
  border-color: var(--j2p-secondary);
  border-radius: var(--r-control);
}

.btn-info:hover,
.btn-info:focus {
  background-color: #1e40af;
  border-color: #1e40af;
}

.btn-warning {
  border-radius: var(--r-control);
}

.btn-danger {
  border-radius: var(--r-control);
}

.btn-default,
.btn-secondary {
  background: var(--white);
  color: var(--text-strong);
  border-color: rgba(203, 213, 225, 0.95);
  border-radius: var(--r-control);
}

.btn-default:hover,
.btn-secondary:hover {
  background: #f1f5f9;
  color: var(--text-strong);
}

:root[data-theme='dark'] .btn-default,
:root[data-theme='dark'] .btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border-color: var(--border);
}

/* -------------------------------------------------------------------------
   Boxes, panels, callouts
   ------------------------------------------------------------------------- */
.box,
.panel,
.card {
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  border-color: rgba(226, 232, 240, 0.95);
}

:root[data-theme='dark'] .box,
:root[data-theme='dark'] .panel,
:root[data-theme='dark'] .card {
  background: var(--white);
  border-color: var(--border);
  color: var(--ink);
}

.box-header.with-border,
.panel-heading {
  border-top-left-radius: var(--r-card);
  border-top-right-radius: var(--r-card);
  border-bottom-color: rgba(203, 213, 225, 0.85);
}

/* -------------------------------------------------------------------------
   Tables — data-dense, mobile-first horizontal scroll
   ------------------------------------------------------------------------- */
.table-responsive,
.dataTables_wrapper {
  -webkit-overflow-scrolling: touch;
}

.table-responsive {
  border-radius: var(--r-card);
}

.table > thead > tr > th {
  background-color: #f1f5f9;
  color: var(--slate);
  font-weight: 700;
  border-bottom: 1px solid rgba(203, 213, 225, 0.8);
  font-size: 13px;
}

.table > tbody > tr > td {
  font-size: 13px;
  border-top-color: rgba(226, 232, 240, 0.75);
}

.table-bordered {
  border-color: rgba(226, 232, 240, 0.95);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(248, 250, 252, 0.85);
}

:root[data-theme='dark'] .table > thead > tr > th {
  background: rgba(255, 255, 255, 0.06);
  color: var(--slate);
  border-bottom-color: rgba(148, 163, 184, 0.22);
}

:root[data-theme='dark'] .table > tbody > tr > td {
  color: var(--ink);
  border-top-color: rgba(148, 163, 184, 0.16);
}

@media (max-width: 767px) {
  .table-responsive .table > thead > tr > th,
  .table-responsive .table > tbody > tr > td {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.form-control {
  border-radius: var(--r-control);
  border: 1px solid rgba(203, 213, 225, 0.95);
  min-height: 40px;
}

.form-control:focus {
  border-color: rgba(29, 78, 216, 0.9);
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.18);
}

.input-group-addon,
.input-group-text {
  border-radius: var(--r-control);
}

:root[data-theme='dark'] .form-control {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border-color: rgba(148, 163, 184, 0.22);
}

/* -------------------------------------------------------------------------
   AdminLTE — unify header chrome (all skins + missing vendor skins)
   ------------------------------------------------------------------------- */
body[class*='skin-'] .main-header .navbar,
body[class*='skin-'] .main-header .logo {
  background-color: var(--j2p-header-bg) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

body[class*='skin-'] .main-header .navbar .nav > li > a,
body[class*='skin-'] .main-header .logo {
  color: rgba(255, 255, 255, 0.9) !important;
}

body[class*='skin-'] .main-header .navbar .nav > li > a:hover,
body[class*='skin-'] .main-header .navbar .nav > li > a:active,
body[class*='skin-'] .main-header .navbar .nav > li > a:focus,
body[class*='skin-'] .main-header .navbar .nav .open > a,
body[class*='skin-'] .main-header .navbar .nav > .active > a {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

body[class*='skin-'] .main-header .navbar .sidebar-toggle {
  color: #fff !important;
}

body[class*='skin-'] .main-header .navbar .sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

body[class*='skin-'] .main-header li.user-header {
  background: linear-gradient(135deg, var(--j2p-primary), var(--j2p-secondary)) !important;
}

@media (max-width: 767px) {
  body[class*='skin-'] .main-header .navbar .dropdown-menu li a {
    color: var(--ink) !important;
  }

  body[class*='skin-'] .main-header .navbar .dropdown-menu li a:hover {
    background: var(--j2p-accent-tint) !important;
  }
}

/* Light sidebars: surface + ink */
body[class*='skin-'][class*='-light'] .left-side,
body[class*='skin-'][class*='-light'] .main-sidebar,
body[class*='skin-'][class*='-light'] .wrapper {
  background-color: var(--surface) !important;
}

body[class*='skin-'][class*='-light'] .main-sidebar {
  border-right: 1px solid rgba(203, 213, 225, 0.75);
}

body[class*='skin-'][class*='-light'] .sidebar-menu > li.header {
  color: var(--slate);
  background: transparent !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body[class*='skin-'][class*='-light'] .sidebar-menu > li > a {
  color: var(--ink);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  font-weight: 600;
}

body[class*='skin-'][class*='-light'] .sidebar-menu > li:hover > a,
body[class*='skin-'][class*='-light'] .sidebar-menu > li.active > a {
  background: var(--j2p-accent-tint) !important;
  color: var(--j2p-primary) !important;
}

body[class*='skin-'][class*='-light'] .sidebar-menu > li.active {
  border-left-color: var(--j2p-secondary) !important;
}

body[class*='skin-'][class*='-light'] .sidebar-menu > li > .treeview-menu {
  background: rgba(241, 245, 249, 0.95) !important;
}

body[class*='skin-'][class*='-light'] .sidebar-menu .treeview-menu > li > a {
  color: var(--slate);
}

body[class*='skin-'][class*='-light'] .sidebar-menu .treeview-menu > li.active > a,
body[class*='skin-'][class*='-light'] .sidebar-menu .treeview-menu > li > a:hover {
  color: var(--j2p-primary) !important;
}

body[class*='skin-'][class*='-light'] .user-panel > .info,
body[class*='skin-'][class*='-light'] .user-panel > .info > a {
  color: var(--ink) !important;
}

/* Dark sidebars (non -light skins): navy stack */
body[class*='skin-']:not([class*='-light']) .left-side,
body[class*='skin-']:not([class*='-light']) .main-sidebar,
body[class*='skin-']:not([class*='-light']) .wrapper {
  background-color: var(--j2p-sidebar-dark) !important;
}

body[class*='skin-']:not([class*='-light']) .sidebar-menu > li.header {
  color: var(--j2p-sidebar-muted);
  background: rgba(0, 0, 0, 0.15) !important;
}

body[class*='skin-']:not([class*='-light']) .sidebar-menu > li > a {
  color: rgba(255, 255, 255, 0.88);
}

body[class*='skin-']:not([class*='-light']) .sidebar-menu > li.active > a,
body[class*='skin-']:not([class*='-light']) .sidebar-menu > li:hover > a {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

body[class*='skin-']:not([class*='-light']) .sidebar-menu > li.active > a {
  border-left-color: var(--j2p-accent) !important;
}

body[class*='skin-']:not([class*='-light']) .sidebar-menu > li > .treeview-menu {
  background: var(--j2p-sidebar-dark-elevated) !important;
}

body[class*='skin-']:not([class*='-light']) .sidebar a,
body[class*='skin-']:not([class*='-light']) .sidebar-menu .treeview-menu > li > a {
  color: var(--j2p-sidebar-muted);
}

body[class*='skin-']:not([class*='-light']) .user-panel > .info,
body[class*='skin-']:not([class*='-light']) .user-panel > .info > a {
  color: #fff !important;
}

/* Content + footer area */
body[class*='skin-'] .content-wrapper,
body[class*='skin-'] .layout-boxed {
  background-color: var(--surface) !important;
}

body[class*='skin-'] .main-footer {
  background: var(--surface);
  border-top: 1px solid rgba(203, 213, 225, 0.75);
  color: var(--slate);
}

:root[data-theme='dark'] body[class*='skin-'] .main-footer {
  border-top-color: var(--border);
}

/* -------------------------------------------------------------------------
   Missing AdminLTE skins in vendor (primary / orange / sky) — mirror blue
   ------------------------------------------------------------------------- */
body.skin-primary .main-header .navbar,
body.skin-orange .main-header .navbar,
body.skin-sky .main-header .navbar,
body.skin-primary .main-header .logo,
body.skin-orange .main-header .logo,
body.skin-sky .main-header .logo {
  background-color: var(--j2p-header-bg) !important;
}

body.skin-primary .left-side,
body.skin-primary .main-sidebar,
body.skin-orange .left-side,
body.skin-orange .main-sidebar,
body.skin-sky .left-side,
body.skin-sky .main-sidebar {
  background-color: var(--surface) !important;
}

body.skin-primary .sidebar-menu > li.active,
body.skin-orange .sidebar-menu > li.active,
body.skin-sky .sidebar-menu > li.active {
  border-left-color: var(--j2p-secondary) !important;
}

/* -------------------------------------------------------------------------
   Optional utility: horizontal scroll for wide tables (use on wrappers)
   ------------------------------------------------------------------------- */
.j2p-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Content header titles */
.content-header > h1,
.content-header h1 {
  color: var(--text-strong);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.content-header > .breadcrumb a {
  color: var(--j2p-secondary);
}

/* PDF / legacy report headers (was #357ca5 in app.css) */
.table-pdf thead tr,
.blue-heading {
  background-color: var(--j2p-primary) !important;
  color: #fff !important;
}

.table-pdf thead tr th {
  color: #fff !important;
}

/* =========================================================================
   App shell — j2p-ecr/DesignKit.html
   Standalone CSS (does NOT depend on Tailwind arbitrary-value classes that
   may not have been generated into /css/tailwind/app.css).
   ========================================================================= */

/* ----- Sidebar geometry (CSS variables for easy theming) ---------------- */
:root {
  --j2p-sidebar-w: 17rem; /* 272px */
  --j2p-sidebar-w-collapsed: 4.5rem; /* 72px icon rail */
  --j2p-topbar-h: 60px;
  /* Top bar and sidebar brand row share the same navy chrome; menu body is light. */
  --j2p-chrome-bg: #0b1f4d;

  --j2p-sidebar-bg: #ffffff;
  --j2p-sidebar-border: rgba(15, 23, 42, 0.08);
  --j2p-sidebar-text: #475569;
  --j2p-sidebar-text-strong: var(--j2p-primary);
  --j2p-sidebar-section: #94a3b8;
  --j2p-sidebar-hover-bg: rgba(15, 23, 42, 0.04);
  --j2p-sidebar-active-bg: rgba(231, 207, 163, 0.18);
  --j2p-sidebar-rail: rgba(15, 23, 42, 0.08);
  /* Brand row shares the top bar chrome so the two read as one horizontal band */
  --j2p-sidebar-brand-bg: var(--j2p-chrome-bg);
}

:root[data-theme='dark'] {
  --j2p-chrome-bg: #050a14;

  --j2p-sidebar-bg: #0f172a;
  --j2p-sidebar-border: rgba(148, 163, 184, 0.16);
  --j2p-sidebar-text: #b6c2d6;
  --j2p-sidebar-text-strong: #ffffff;
  --j2p-sidebar-section: rgba(148, 163, 184, 0.6);
  --j2p-sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --j2p-sidebar-active-bg: rgba(231, 207, 163, 0.14);
  --j2p-sidebar-rail: rgba(255, 255, 255, 0.08);
  --j2p-sidebar-brand-bg: var(--j2p-chrome-bg);
}

@media (max-width: 1279px) {
  :root {
    --j2p-sidebar-w: 16rem;
  }
}

/* ----- Top bar ---------------------------------------------------------- */
.j2p-chrome-header.j2p-dk-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  height: var(--j2p-topbar-h);
  background: var(--j2p-chrome-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
}

.j2p-dk-topbar-inner {
  margin: 0 auto;
  padding: 0 1rem;
  height: var(--j2p-topbar-h);
  display: flex;
  align-items: center;
}

.j2p-dk-topbar-row {
  width: 100%;
  min-height: 2.5rem;
}

.j2p-dk-topbar-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem 0.75rem;
  align-items: center;
  width: 100%;
}

.j2p-dk-topbar-start,
.j2p-dk-topbar-center,
.j2p-dk-topbar-end {
  display: flex;
  align-items: center;
  min-width: 0;
}

.j2p-dk-topbar-center {
  justify-content: center;
}

.j2p-dk-topbar-end {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.j2p-dk-topbar-navbtns {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Glass icon buttons in the top bar — uniform 40×40, rounded, subtle ring.
   We DO NOT set `display` here so Tailwind's responsive `lg:tw-hidden` etc.
   keep working. Visibility is up to the markup. */
.j2p-dk-topbar .j2p-dk-iconbtn,
.j2p-dk-topbar a.j2p-dk-iconbtn,
.j2p-dk-topbar button.j2p-dk-iconbtn {
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.05s ease;
}

.j2p-dk-topbar .j2p-dk-iconbtn:hover,
.j2p-dk-topbar a.j2p-dk-iconbtn:hover,
.j2p-dk-topbar button.j2p-dk-iconbtn:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  text-decoration: none;
}

.j2p-dk-topbar .j2p-dk-iconbtn:active {
  transform: translateY(1px);
}

/* Top bar: any element using the legacy *-800 / hover:*-700 pattern picks
   up the same glass treatment so we don't have to touch every subtemplate. */
.j2p-dk-topbar [class*='tw-bg-'][class*='800'],
.j2p-dk-topbar a[class*='tw-bg-'][class*='800'],
.j2p-dk-topbar button[class*='tw-bg-'][class*='800'],
.j2p-dk-topbar summary[class*='tw-bg-'][class*='800'] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-radius: 10px;
}

.j2p-dk-topbar [class*='tw-bg-'][class*='800']:hover,
.j2p-dk-topbar a[class*='tw-bg-'][class*='800']:hover,
.j2p-dk-topbar button[class*='tw-bg-'][class*='800']:hover,
.j2p-dk-topbar summary[class*='tw-bg-'][class*='800']:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

/* Wider buttons that contain text (POS, date, profile) — auto width */
.j2p-dk-topbar a.j2p-dk-iconbtn[href*='pos'],
.j2p-dk-topbar a[class*='tw-bg-'][class*='800'],
.j2p-dk-topbar button[class*='tw-bg-'][class*='800'],
.j2p-dk-topbar summary[class*='tw-bg-'][class*='800'] {
  width: auto;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  white-space: nowrap;
}

/* Package badge in the center: champagne accent treatment */
.j2p-dk-topbar-pkg {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.j2p-dk-topbar .j2p-dk-topbar-pkg-btn {
  width: auto !important;
  height: 2.25rem !important;
  min-height: 2.25rem;
  padding: 0 0.875rem !important;
  background: linear-gradient(135deg, rgba(231, 207, 163, 0.22), rgba(231, 207, 163, 0.08)) !important;
  border: 1px solid rgba(231, 207, 163, 0.32) !important;
  color: #f6e4c3 !important;
  border-radius: 999px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.j2p-dk-topbar .j2p-dk-topbar-pkg-btn:hover {
  background: linear-gradient(135deg, rgba(231, 207, 163, 0.32), rgba(231, 207, 163, 0.14)) !important;
  border-color: rgba(231, 207, 163, 0.48) !important;
  color: #fff !important;
}

.j2p-dk-topbar-pkg-label {
  display: none;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .j2p-dk-topbar-pkg-label {
    display: inline-block !important;
  }
}

@media (max-width: 639px) {
  .j2p-dk-topbar-inner {
    padding-inline: 0.625rem;
  }
  .j2p-dk-topbar-grid {
    gap: 0.375rem 0.5rem;
  }
  .j2p-dk-topbar-end {
    gap: 0.375rem;
  }
  .j2p-dk-topbar .j2p-dk-iconbtn {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* Active package dropdown (Superadmin — center top bar) */
.j2p-subscription-dd {
  max-width: 100%;
}

.j2p-subscription-dd__summary {
  cursor: pointer;
  list-style: none;
  border-radius: 999px !important;
}

.j2p-subscription-dd__summary::-webkit-details-marker {
  display: none;
}

.j2p-subscription-dd__summary::marker {
  content: '';
}

.j2p-subscription-dd__summary-icon {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.95;
}

.j2p-subscription-dd__name {
  min-width: 0;
}

.j2p-subscription-dd__urgency {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.j2p-subscription-dd__urgency--ok {
  background: #4ade80;
}

.j2p-subscription-dd__urgency--warning {
  background: #fbbf24;
}

.j2p-subscription-dd__urgency--critical {
  background: #fb7185;
}

.j2p-subscription-dd__chev {
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.15s ease;
}

.j2p-subscription-dd[open] .j2p-subscription-dd__chev {
  transform: rotate(180deg);
}

.j2p-dk-topbar .j2p-subscription-dd__sheet.j2p-dk-topbar-menu {
  position: absolute;
  z-index: 120 !important;
  top: calc(100% + 6px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(22rem, calc(100vw - 1.25rem));
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 12px 12px 10px !important;
}

.j2p-subscription-dd__hero {
  margin: -4px -4px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.1), rgba(99, 102, 241, 0.06));
  border: 1px solid rgba(29, 78, 216, 0.12);
}

.j2p-subscription-dd__kicker {
  margin: 0 0 2px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.j2p-subscription-dd__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}

.j2p-subscription-dd__dates {
  margin: 6px 0 0;
}

.j2p-subscription-dd__date-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.j2p-subscription-dd__meter {
  margin-bottom: 10px;
}

.j2p-subscription-dd__meter-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

.j2p-subscription-dd__meter-count {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.j2p-subscription-dd__meter-count--ok {
  color: #15803d;
}

.j2p-subscription-dd__meter-count--warning {
  color: #b45309;
}

.j2p-subscription-dd__meter-count--critical {
  color: #b91c1c;
}

.j2p-subscription-dd__meter-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.28);
  overflow: hidden;
}

.j2p-subscription-dd__meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.2s ease;
}

.j2p-subscription-dd__meter-fill--ok {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.j2p-subscription-dd__meter-fill--warning {
  background: linear-gradient(90deg, #ea580c, #fbbf24);
}

.j2p-subscription-dd__meter-fill--critical {
  background: linear-gradient(90deg, #dc2626, #fb7185);
}

.j2p-subscription-dd__limits {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 380px) {
  .j2p-subscription-dd__limits {
    grid-template-columns: 1fr;
  }
}

.j2p-subscription-dd__limit {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(241, 245, 249, 0.55);
  align-items: center;
}

.j2p-subscription-dd__limit-icon {
  grid-row: 1 / span 2;
  color: var(--j2p-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.j2p-subscription-dd__limit-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
}

.j2p-subscription-dd__limit-value {
  font-size: 0.9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.j2p-subscription-dd__cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--j2p-primary), #6366f1) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  transition:
    filter 0.12s ease,
    transform 0.06s ease;
}

.j2p-subscription-dd__cta:hover,
.j2p-subscription-dd__cta:focus-visible {
  filter: brightness(1.06);
  color: #ffffff !important;
}

.j2p-subscription-dd__cta:active {
  transform: translateY(1px);
}

:root[data-theme='dark'] .j2p-subscription-dd__hero {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(15, 23, 42, 0.5));
  border-color: rgba(148, 163, 184, 0.2);
}

:root[data-theme='dark'] .j2p-subscription-dd__date-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(148, 163, 184, 0.2);
}

:root[data-theme='dark'] .j2p-subscription-dd__limit {
  background: rgba(255, 255, 255, 0.04);
}

/* ----- Top bar — dropdown panels + calculator popover ------------------- */

.j2p-dk-topbar details.tw-dw-dropdown > summary {
  list-style: none;
}

.j2p-dk-topbar details.tw-dw-dropdown > summary::-webkit-details-marker {
  display: none;
}

.j2p-dk-topbar details.tw-dw-dropdown > summary::marker {
  content: '';
}

/* Shared panel chrome: details menus + Bootstrap notification dropdown */
.j2p-dk-topbar .j2p-dk-topbar-menu,
.j2p-dk-topbar .notifications-menu > .dropdown-menu {
  list-style: none !important;
  margin: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-float) !important;
  background: var(--white) !important;
  padding: 8px !important;
  z-index: 110 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

.j2p-dk-topbar .j2p-dk-topbar-menu a[role='menuitem'],
.j2p-dk-topbar .j2p-dk-topbar-menu .btn-modal {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  margin: 2px 0 !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

.j2p-dk-topbar .j2p-dk-topbar-menu a[role='menuitem']:hover,
.j2p-dk-topbar .j2p-dk-topbar-menu a[role='menuitem']:focus-visible,
.j2p-dk-topbar .j2p-dk-topbar-menu .btn-modal:hover,
.j2p-dk-topbar .j2p-dk-topbar-menu .btn-modal:focus-visible {
  background-color: rgba(29, 78, 216, 0.08) !important;
  color: var(--j2p-primary) !important;
}

/* Subscription panel CTA — beats generic menuitem ink/primary hover (must stay white on gradient). */
.j2p-dk-topbar .j2p-dk-topbar-menu a.j2p-subscription-dd__cta[role='menuitem'] {
  color: #ffffff !important;
}

.j2p-dk-topbar .j2p-dk-topbar-menu a.j2p-subscription-dd__cta[role='menuitem']:hover,
.j2p-dk-topbar .j2p-dk-topbar-menu a.j2p-subscription-dd__cta[role='menuitem']:focus-visible {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--j2p-primary), #6366f1) !important;
  background-color: transparent !important;
  filter: brightness(1.06);
}

.j2p-dk-topbar .j2p-dk-topbar-menu--user > .tw-px-4 {
  padding: 10px 12px 8px !important;
  margin: 0 0 6px 0 !important;
  border-bottom: 1px solid var(--border);
  border-radius: 8px;
}

.j2p-dk-topbar .j2p-dk-topbar-menu--user > .tw-px-4 p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.j2p-dk-topbar .j2p-dk-topbar-menu--user > .tw-px-4 .tw-font-medium {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

.j2p-dk-topbar .j2p-dk-topbar-menu--user > li {
  list-style: none;
}

.j2p-dk-topbar .j2p-dk-topbar-menu--notifications .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(360px, 70vh);
  overflow-y: auto;
}

.j2p-dk-topbar .j2p-dk-topbar-menu--notifications .menu > li > a {
  display: block;
  padding: 8px 10px;
  margin: 2px 0;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

.j2p-dk-topbar .j2p-dk-topbar-menu--notifications .menu > li > a:hover,
.j2p-dk-topbar .j2p-dk-topbar-menu--notifications .menu > li > a:focus-visible {
  background: rgba(29, 78, 216, 0.08);
  color: var(--j2p-primary);
  outline: none;
}

.j2p-dk-topbar .j2p-dk-topbar-menu--notifications .load_more_li {
  list-style: none;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.j2p-dk-topbar .j2p-dk-topbar-menu--notifications .load_more_notifications {
  display: block;
  text-align: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--j2p-secondary);
  text-decoration: none;
}

.j2p-dk-topbar .j2p-dk-topbar-menu--notifications .load_more_notifications:hover {
  background: rgba(29, 78, 216, 0.06);
}

.j2p-dk-topbar .notifications-menu .label.notifications_count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.125rem;
  border-radius: 999px;
  background: var(--j2p-accent) !important;
  color: var(--j2p-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.j2p-dk-topbar .notifications-menu > a.dropdown-toggle {
  position: relative;
}

/* Bootstrap popover — header calculator (clip + max width for small viewports) */
.popover:has(.j2p-topbar-calculator) {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-float);
  background: var(--white);
  padding: 0;
  max-width: min(232px, calc(100vw - 20px));
  width: min(232px, calc(100vw - 20px));
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 1060;
}

.popover:has(.j2p-topbar-calculator) .popover-title {
  display: none;
}

.popover:has(.j2p-topbar-calculator) .popover-content {
  padding: 10px 10px 12px !important;
  margin: 0 !important;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 14px;
  background: transparent;
}

.popover:has(.j2p-topbar-calculator) > .arrow,
.popover:has(.j2p-topbar-calculator) > .arrow::after {
  display: none !important;
}

/* Calculator — flat markup (no Bootstrap .row negative margins) */
.j2p-topbar-calculator {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.j2p-topbar-calculator *,
.j2p-topbar-calculator *::before,
.j2p-topbar-calculator *::after {
  box-sizing: border-box;
}

.j2p-topbar-calculator__form {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Bezel lives on the wrapper so it matches button border-box geometry (native inputs can draw “inset” borders). */
.j2p-topbar-calculator__screen-wrap {
  grid-column: 1 / -1;
  display: flex;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f1f5f9;
  overflow: hidden;
}

.j2p-topbar-calculator__screen,
.j2p-topbar-calculator .screen {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 4px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 40px;
  color: var(--ink);
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.j2p-topbar-calculator__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.j2p-topbar-calculator__key,
.j2p-topbar-calculator__grid .btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink);
  box-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.j2p-topbar-calculator__key:hover,
.j2p-topbar-calculator__grid .btn:hover {
  background: rgba(29, 78, 216, 0.08);
  border-color: rgba(29, 78, 216, 0.25);
  color: var(--j2p-primary);
}

.j2p-topbar-calculator #allClear {
  background: var(--error);
  border-color: rgba(0, 0, 0, 0.12);
  color: #ffffff !important;
}

.j2p-topbar-calculator #allClear:hover {
  background: #b91c1c;
  border-color: rgba(0, 0, 0, 0.15);
  color: #ffffff !important;
}

.j2p-topbar-calculator #clear {
  background: var(--warning);
  border-color: rgba(0, 0, 0, 0.1);
  color: #ffffff !important;
}

.j2p-topbar-calculator #clear:hover {
  background: #b45309;
  color: #ffffff !important;
}

.j2p-topbar-calculator #equals {
  background: var(--success);
  border-color: rgba(0, 0, 0, 0.1);
  color: #ffffff !important;
}

.j2p-topbar-calculator #equals:hover {
  background: #15803d;
  color: #ffffff !important;
}

.j2p-topbar-calculator__key--back {
  font-size: 15px;
}

:root[data-theme='dark'] .popover:has(.j2p-topbar-calculator) {
  background: var(--white);
}

:root[data-theme='dark'] .j2p-topbar-calculator__screen-wrap {
  background: rgba(255, 255, 255, 0.06);
}

:root[data-theme='dark'] .j2p-topbar-calculator__screen,
:root[data-theme='dark'] .j2p-topbar-calculator .screen {
  color: var(--ink);
}

:root[data-theme='dark'] .j2p-topbar-calculator__key,
:root[data-theme='dark'] .j2p-topbar-calculator__grid .btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

:root[data-theme='dark'] .j2p-topbar-calculator__key:hover,
:root[data-theme='dark'] .j2p-topbar-calculator__grid .btn:hover {
  background: rgba(59, 130, 246, 0.15);
}

:root[data-theme='dark'] .j2p-topbar-calculator #allClear,
:root[data-theme='dark'] .j2p-topbar-calculator #allClear:hover {
  background: var(--error);
  color: #ffffff !important;
}

:root[data-theme='dark'] .j2p-topbar-calculator #clear,
:root[data-theme='dark'] .j2p-topbar-calculator #clear:hover {
  background: var(--warning);
  color: #ffffff !important;
}

:root[data-theme='dark'] .j2p-topbar-calculator #equals,
:root[data-theme='dark'] .j2p-topbar-calculator #equals:hover {
  background: var(--success);
  color: #ffffff !important;
}

/* ----- Today’s profit modal + P&L summary (ajax #pl_data_div / #todays_profit) -- */
.j2p-today-profit-modal__dialog {
  width: min(960px, calc(100vw - 24px));
  margin: 12px auto;
}

.j2p-today-profit-modal__content {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-float);
  background: var(--white);
}

.j2p-today-profit-modal__header {
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.08) 0%, rgba(29, 78, 216, 0.02) 100%);
}

.j2p-today-profit-modal__close {
  opacity: 0.65;
  margin-top: 2px;
}

.j2p-today-profit-modal__headline {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-inline-end: 2rem;
}

.j2p-today-profit-modal__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(29, 78, 216, 0.12);
  color: var(--j2p-primary);
}

.j2p-today-profit-modal__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.j2p-today-profit-modal__meta {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.j2p-today-profit-modal__body {
  max-height: min(72vh, 640px);
  overflow: auto;
  padding: 0.75rem 1rem 1rem;
  -webkit-overflow-scrolling: touch;
}

.j2p-today-profit-modal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 1rem;
  border-top: 1px solid var(--border);
  padding: 0.75rem 1rem;
  background: rgba(241, 245, 249, 0.55);
}

.j2p-today-profit-modal__link {
  margin-inline-end: auto;
  font-weight: 600;
  padding: 0.35rem 0;
}

.j2p-pl-summary {
  color: var(--ink);
}

.j2p-pl-summary__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 900px) {
  .j2p-pl-summary__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.j2p-pl-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
}

.j2p-pl-panel--highlight {
  margin-top: 1rem;
  border-color: rgba(29, 78, 216, 0.2);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.j2p-pl-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(241, 245, 249, 0.45);
}

.j2p-pl-panel__head--inline {
  align-items: center;
}

.j2p-pl-panel__glyph {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--j2p-primary);
  background: rgba(29, 78, 216, 0.1);
}

.j2p-pl-panel__glyph--outflow {
  color: #b45309;
  background: rgba(245, 158, 11, 0.15);
}

.j2p-pl-panel__glyph--pulse {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}

.j2p-pl-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.j2p-pl-panel__body {
  padding: 0.25rem 0.75rem 0.75rem;
}

.j2p-pl-panel__body--flush {
  padding: 0.75rem 0.75rem 1rem;
}

.j2p-pl-kv-list .j2p-pl-kv:last-child {
  border-bottom: none;
}

.j2p-pl-kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

@media (max-width: 420px) {
  .j2p-pl-kv {
    grid-template-columns: 1fr;
  }

  .j2p-pl-kv__value {
    text-align: start;
    white-space: normal;
  }
}

.j2p-pl-kv__label {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink);
}

.j2p-pl-kv__title {
  font-weight: 600;
}

.j2p-pl-kv__muted {
  color: var(--muted);
  font-weight: 500;
}

.j2p-pl-kv__value {
  text-align: end;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

.j2p-pl-kv__list {
  margin: 0.35rem 0 0.25rem;
  padding-inline-start: 1.1rem;
  list-style: disc;
  color: var(--muted);
  font-size: 0.8125rem;
}

.j2p-pl-kv__pending {
  color: var(--muted);
}

.j2p-pl-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .j2p-pl-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

.j2p-pl-metric {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(241, 245, 249, 0.55);
}

.j2p-pl-metric--gross {
  border-color: rgba(29, 78, 216, 0.22);
}

.j2p-pl-metric--net {
  border-color: rgba(21, 128, 61, 0.25);
}

.j2p-pl-metric--net.j2p-pl-metric--negative {
  border-color: rgba(185, 28, 28, 0.28);
  background: rgba(254, 226, 226, 0.35);
}

.j2p-pl-metric__icon {
  flex-shrink: 0;
  color: var(--j2p-primary);
}

.j2p-pl-metric--net .j2p-pl-metric__icon {
  color: var(--success);
}

.j2p-pl-metric--net.j2p-pl-metric--negative .j2p-pl-metric__icon {
  color: var(--error);
}

.j2p-pl-metric__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.j2p-pl-metric__value {
  margin-top: 0.15rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.j2p-pl-metric__hint {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--muted);
}

.j2p-pl-formula {
  margin-top: 0.75rem;
  border-radius: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.65);
  padding: 0.35rem 0.65rem;
  background: rgba(255, 255, 255, 0.5);
}

.j2p-pl-formula__summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--j2p-primary);
  list-style: none;
}

.j2p-pl-formula__summary::-webkit-details-marker {
  display: none;
}

.j2p-pl-formula__body {
  margin-top: 0.5rem;
}

.j2p-pl-formula__p {
  margin: 0;
}

:root[data-theme='dark'] .j2p-today-profit-modal__content {
  background: var(--white);
}

:root[data-theme='dark'] .j2p-today-profit-modal__header {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(15, 23, 42, 0.4) 100%);
}

:root[data-theme='dark'] .j2p-today-profit-modal__footer {
  background: rgba(15, 23, 42, 0.35);
}

:root[data-theme='dark'] .j2p-pl-panel,
:root[data-theme='dark'] .j2p-pl-metric {
  background: rgba(255, 255, 255, 0.04);
}

:root[data-theme='dark'] .j2p-pl-metric--net.j2p-pl-metric--negative {
  background: rgba(185, 28, 28, 0.12);
}

:root[data-theme='dark'] .j2p-pl-kv {
  border-bottom-color: rgba(148, 163, 184, 0.2);
}

/* ----- Sidebar shell ---------------------------------------------------- */
aside.j2p-chrome-sidebar.j2p-dk-sidebar {
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  width: var(--j2p-sidebar-w);
  height: 100%;
  background-color: var(--j2p-sidebar-bg) !important;
  background-image: none;
  /* No border on the shell: a full-height inline-end rule showed as a line
     between the chrome brand strip and the top bar. The divider lives on
     #side-bar only (below the brand). */
  border-inline-end: none;
  color: var(--j2p-sidebar-text);
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition:
    width 0.22s ease,
    transform 0.22s ease;
}

@media (min-width: 1024px) {
  aside.j2p-chrome-sidebar.j2p-dk-sidebar {
    display: flex;
  }
}

/* ----- Brand row (same chrome as top bar; same height) ------------------ */
a.j2p-chrome-sidebar-brand.j2p-dk-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  flex-shrink: 0;
  padding: 0 1rem;
  height: var(--j2p-topbar-h);
  background: var(--j2p-sidebar-brand-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  text-decoration: none !important;
  color: #fff;
  transition:
    background-color 0.15s ease,
    background-image 0.15s ease;
}

a.j2p-chrome-sidebar-brand.j2p-dk-sidebar-brand:hover {
  background:
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)),
    var(--j2p-chrome-bg) !important;
  text-decoration: none !important;
}

a.j2p-chrome-sidebar-brand.j2p-dk-sidebar-brand .j2p-dk-sidebar-brand-name {
  color: #fff;
}

a.j2p-chrome-sidebar-brand.j2p-dk-sidebar-brand .j2p-dk-sidebar-brand-meta {
  color: rgba(255, 255, 255, 0.62);
}

.j2p-dk-sidebar-brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 8px;
  color: var(--j2p-primary);
  background: linear-gradient(135deg, rgba(231, 207, 163, 0.32), rgba(231, 207, 163, 0.12));
  border: 1px solid rgba(231, 207, 163, 0.48);
}

a.j2p-chrome-sidebar-brand.j2p-dk-sidebar-brand .j2p-dk-sidebar-brand-mark {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.j2p-dk-sidebar-brand-mark > svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.j2p-dk-sidebar-brand-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.15;
}

.j2p-dk-sidebar-brand-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--j2p-sidebar-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.j2p-dk-sidebar-brand-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--j2p-sidebar-section);
}

.j2p-dk-sidebar-brand-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}

/* ----- Scroll area + sections ------------------------------------------ */
.j2p-dk-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
  padding: 0.625rem 0.625rem max(1rem, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.j2p-dk-sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.j2p-dk-sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 6px;
}

:root[data-theme='dark'] .j2p-dk-sidebar-scroll {
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

:root[data-theme='dark'] .j2p-dk-sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

.j2p-dk-sidebar-section-title {
  margin: 0.875rem 0 0.25rem;
  padding: 0 0.75rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--j2p-sidebar-section);
}

.j2p-dk-sidebar-section-title:first-child {
  margin-top: 0.25rem;
}

/* ----- Top-level link items -------------------------------------------- */
.j2p-chrome-sidebar #side-bar {
  border-block: none !important;
  border-inline-start: none !important;
  border-inline-end: 1px solid var(--j2p-sidebar-border) !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  min-height: 2.5rem;
  border-radius: 10px;
  color: var(--j2p-sidebar-text);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none !important;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
  position: relative;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-link > span:not(.j2p-dk-sidebar-icon):not(.j2p-dk-sidebar-chevron) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-link:hover,
.j2p-chrome-sidebar .j2p-dk-sidebar-link:focus-visible {
  color: var(--j2p-sidebar-text-strong) !important;
  background-color: var(--j2p-sidebar-hover-bg) !important;
  outline: none;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-link--active {
  color: var(--j2p-sidebar-text-strong) !important;
  background-color: var(--j2p-sidebar-active-bg) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--j2p-accent);
}

.j2p-chrome-sidebar .j2p-dk-sidebar-link--parent-open {
  color: var(--j2p-sidebar-text-strong) !important;
  background-color: var(--j2p-sidebar-hover-bg) !important;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-chevron {
  margin-inline-start: auto;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--j2p-sidebar-section);
  transition:
    color 0.15s ease,
    transform 0.2s ease;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-link:hover .j2p-dk-sidebar-chevron,
.j2p-chrome-sidebar .j2p-dk-sidebar-link--parent-open .j2p-dk-sidebar-chevron {
  color: var(--j2p-sidebar-text-strong);
}

.j2p-chrome-sidebar .j2p-dk-sidebar-link--parent-open .j2p-dk-sidebar-chevron {
  transform: rotate(0deg);
}

/* ----- Icons ----------------------------------------------------------- */
.j2p-chrome-sidebar .j2p-dk-sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.92;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-icon i {
  font-size: 0.9375rem;
  line-height: 1;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-link--active .j2p-dk-sidebar-icon {
  color: var(--j2p-primary);
  opacity: 1;
}

:root[data-theme='dark'] .j2p-chrome-sidebar .j2p-dk-sidebar-link--active .j2p-dk-sidebar-icon {
  color: var(--j2p-accent);
}

.j2p-chrome-sidebar .j2p-dk-sidebar-icon--child {
  width: 1.125rem;
  height: 1.125rem;
  opacity: 0.85;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-icon--child i {
  font-size: 0.8125rem;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-icon--child svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

/* ----- Submenu --------------------------------------------------------- */
.j2p-chrome-sidebar .j2p-dk-sidebar-children {
  position: relative;
  margin: 2px 0 4px;
  padding-inline-start: 0.625rem;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-children-rail {
  position: absolute;
  inset-block: 0.25rem;
  inset-inline-start: 0.95rem;
  width: 1px;
  background: var(--j2p-sidebar-rail);
}

.j2p-chrome-sidebar .j2p-dk-sidebar-children-inner {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-inline-start: 0.625rem;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-child-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  min-height: 2rem;
  border-radius: 8px;
  color: var(--j2p-sidebar-text);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-child-link > span:not(.j2p-dk-sidebar-icon) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-child-link:hover,
.j2p-chrome-sidebar .j2p-dk-sidebar-child-link:focus-visible {
  color: var(--j2p-sidebar-text-strong) !important;
  background-color: var(--j2p-sidebar-hover-bg) !important;
  outline: none;
}

.j2p-chrome-sidebar .j2p-dk-sidebar-child-link--active {
  color: var(--j2p-primary) !important;
  font-weight: 600;
  background-color: var(--j2p-sidebar-active-bg) !important;
  box-shadow: inset 2px 0 0 var(--j2p-accent);
}

:root[data-theme='dark'] .j2p-chrome-sidebar .j2p-dk-sidebar-child-link--active {
  color: var(--j2p-accent) !important;
}

/* ----- Mobile drawer + overlay ---------------------------------------- */
body.j2p-app-body .overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: none;
  z-index: 1040;
  cursor: pointer;
}

@media (max-width: 1023px) {
  body.j2p-app-body
    .j2p-app-shell
    > aside.side-bar.j2p-chrome-sidebar.small-view-side-active {
    display: flex !important;
    position: fixed !important;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 100vh;
    height: 100dvh;
    width: min(17rem, 88vw);
    z-index: 1050;
    box-shadow: var(--shadow-float);
    border-start-end-radius: var(--r-card);
    border-end-end-radius: var(--r-card);
  }
}

/* ----- Desktop collapse: icon-only rail with hover-to-expand --------- */
@media (min-width: 1024px) {
  body.j2p-app-body.sidebar-collapse
    .j2p-app-shell
    > aside.side-bar.j2p-chrome-sidebar {
    width: var(--j2p-sidebar-w-collapsed);
  }

  body.j2p-app-body.sidebar-collapse .j2p-dk-sidebar-brand {
    padding-inline: 0.5rem;
    justify-content: center;
  }

  body.j2p-app-body.sidebar-collapse .j2p-dk-sidebar-brand-body {
    display: none;
  }

  body.j2p-app-body.sidebar-collapse .j2p-dk-sidebar-link,
  body.j2p-app-body.sidebar-collapse .j2p-dk-sidebar-link--parent {
    justify-content: center;
    padding-inline: 0.5rem;
  }

  body.j2p-app-body.sidebar-collapse .j2p-dk-sidebar-link > span:not(.j2p-dk-sidebar-icon),
  body.j2p-app-body.sidebar-collapse .j2p-dk-sidebar-chevron {
    display: none;
  }

  body.j2p-app-body.sidebar-collapse .j2p-dk-sidebar-children,
  body.j2p-app-body.sidebar-collapse .j2p-dk-sidebar-section-title {
    display: none !important;
  }

  /* Hover-expand the rail back to full width without touching state */
  body.j2p-app-body.sidebar-collapse
    .j2p-app-shell
    > aside.side-bar.j2p-chrome-sidebar:hover {
    width: var(--j2p-sidebar-w);
    box-shadow: var(--shadow-float);
  }

  body.j2p-app-body.sidebar-collapse
    .j2p-app-shell
    > aside.side-bar.j2p-chrome-sidebar:hover
    .j2p-dk-sidebar-brand {
    padding-inline: 1rem;
    justify-content: flex-start;
  }

  body.j2p-app-body.sidebar-collapse
    .j2p-app-shell
    > aside.side-bar.j2p-chrome-sidebar:hover
    .j2p-dk-sidebar-brand-body,
  body.j2p-app-body.sidebar-collapse
    .j2p-app-shell
    > aside.side-bar.j2p-chrome-sidebar:hover
    .j2p-dk-sidebar-link
    > span,
  body.j2p-app-body.sidebar-collapse
    .j2p-app-shell
    > aside.side-bar.j2p-chrome-sidebar:hover
    .j2p-dk-sidebar-chevron,
  body.j2p-app-body.sidebar-collapse
    .j2p-app-shell
    > aside.side-bar.j2p-chrome-sidebar:hover
    .j2p-dk-sidebar-section-title {
    display: revert !important;
  }

  body.j2p-app-body.sidebar-collapse
    .j2p-app-shell
    > aside.side-bar.j2p-chrome-sidebar:hover
    .j2p-dk-sidebar-link {
    justify-content: flex-start;
    padding-inline: 0.75rem;
  }
}

/* RTL chevron */
[dir='rtl'] .j2p-chrome-sidebar .j2p-dk-sidebar-chevron {
  transform: scaleX(-1);
}

/* Dark mode picks up its sidebar tokens from :root[data-theme='dark']. */

/* -------------------------------------------------------------------------
   Auth2 full-page shell (login, register, welcome, …)
   ------------------------------------------------------------------------- */
html.j2p-root,
body.j2p-auth-shell {
  min-height: 100%;
}

body.j2p-auth-shell {
  background: var(--surface) !important;
  color: var(--ink);
}

body.j2p-auth-shell .right-col {
  background: transparent !important;
}

/* Square light plate so dark favicon reads on auth surface / hero */
.j2p-auth-shell-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-inline: auto;
  margin-bottom: var(--s-4);
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--shadow-card);
}

.j2p-auth-shell-brand-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

body.j2p-auth-shell .right-col:has(.j2p-login-page) .j2p-auth-shell-brand {
  display: none;
}

/* DesignKit header — sticky rail bar (auth / guest layouts) */
.j2p-auth-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--j2p-header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.j2p-auth-header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.j2p-auth-header-start,
.j2p-auth-header-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.j2p-auth-header-end {
  justify-content: flex-end;
}

.j2p-auth-lang-dropdown {
  margin: 0;
}

.j2p-auth-lang-summary {
  list-style: none;
}

.j2p-auth-lang-summary::-webkit-details-marker {
  display: none;
}

.j2p-auth-lang-menu {
  position: absolute;
  z-index: 220;
  top: 100%;
  inset-inline-start: 0;
  margin-block-start: 6px;
}

.j2p-auth-lang-dropdown[open] {
  z-index: 230;
}

body.j2p-auth-shell .j2p-auth-header .j2p-auth-lang-summary {
  color: rgba(255, 255, 255, 0.92);
}

body.j2p-auth-shell .j2p-auth-header .j2p-auth-lang-summary:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

body.j2p-auth-shell .j2p-auth-header-link {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

body.j2p-auth-shell .j2p-auth-header-link:hover,
body.j2p-auth-shell .j2p-auth-header-link:focus {
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
}

body.j2p-auth-shell .j2p-auth-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: var(--r-control);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform 0.08s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
  white-space: nowrap;
}

body.j2p-auth-shell .j2p-auth-header-btn:active {
  transform: translateY(1px);
}

body.j2p-auth-shell .j2p-auth-header-btn--accent {
  background: var(--j2p-accent);
  color: var(--j2p-primary);
  box-shadow: 0 10px 26px rgba(231, 207, 163, 0.2);
}

body.j2p-auth-shell .j2p-auth-header-btn--accent:hover,
body.j2p-auth-shell .j2p-auth-header-btn--accent:focus {
  background: var(--j2p-accent-hover);
  color: var(--j2p-primary);
  text-decoration: none;
}

/* Language menu floats above header chrome (no Daisy absolute on <ul> in build) */
.j2p-auth-header .j2p-auth-lang-menu {
  box-shadow: var(--shadow-float);
}

@media (max-width: 480px) {
  .j2p-auth-header-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .j2p-auth-header-end {
    justify-content: center;
  }

  .j2p-auth-header-start {
    justify-content: center;
  }
}

:root[data-theme='dark'] body.j2p-auth-shell {
  background: var(--surface) !important;
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   Login — surface layout + DesignKit .card / .card.featured (form panel only)
   ------------------------------------------------------------------------- */
.j2p-login-page {
  width: 100%;
  max-width: min(100%, var(--max));
  margin: 0 auto;
}

.j2p-login-layout {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

@media (min-width: 992px) {
  .j2p-login-layout--demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--s-6);
    align-items: start;
  }
}

.j2p-login-demo-inner {
  max-height: min(72vh, 620px);
  overflow-y: auto;
  padding-inline-end: 2px;
  -webkit-overflow-scrolling: touch;
}

.j2p-login-demo-title {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
}

.j2p-login-demo .j2p-login-demo-widget {
  margin-bottom: 0 !important;
}

.j2p-login-surface {
  padding: clamp(var(--s-4), 4vw, var(--s-7)) var(--s-4) clamp(var(--s-6), 6vw, var(--s-8));
}

/* Single centered column — intro + card read as one unit (no wide empty gutter) */
.j2p-login-cluster {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-5);
}

.j2p-login-intro {
  text-align: center;
}

.j2p-login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--s-4);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}

.j2p-login-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--shadow-card);
}

.j2p-login-brand-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  border-radius: 0;
}

.j2p-login-brand-name {
  font-size: 1.0625rem;
  color: var(--ink);
}

.j2p-login-intro h1 {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-strong);
}

.j2p-login-intro-lead {
  margin: var(--s-3) auto 0;
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--slate);
}

/* DesignKit .card + .card.featured (top rail) */
.j2p-login-panel {
  background: var(--white);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s-5);
  border-top: 3px solid var(--j2p-secondary);
  padding-top: calc(var(--s-5) - 3px);
}

.j2p-login-panel-title {
  margin: 0 0 var(--s-4);
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  text-align: center;
}

:root[data-theme='dark'] .j2p-login-panel {
  border-color: var(--border);
  border-top-color: var(--j2p-secondary);
}

/* DesignKit inputs */
.j2p-login-form .j2p-login-field {
  margin-bottom: var(--s-4);
}

.j2p-login-form .j2p-login-field:last-of-type {
  margin-bottom: var(--s-3);
}

.j2p-login-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 6px;
}

.j2p-login-label-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
  margin: 0;
}

.j2p-login-input {
  display: block;
  width: 100%;
  padding: 12px 12px;
  min-height: 44px;
  border-radius: var(--r-control);
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.j2p-login-input::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.j2p-login-input:focus {
  border-color: rgba(29, 78, 216, 0.9);
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.18);
}

:root[data-theme='dark'] .j2p-login-input:focus {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.22);
}

.j2p-login-input--password {
  padding-inline-end: 2.75rem;
}

.j2p-login-password-wrap {
  position: relative;
}

.j2p-login-password-toggle {
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.j2p-login-password-toggle:hover {
  background: var(--j2p-accent-tint);
  color: var(--j2p-primary);
}

.j2p-login-password-icon {
  width: 22px;
  height: 22px;
}

.j2p-login-field .help-block {
  display: block;
  margin-top: 6px;
  color: var(--error);
  font-size: 12px;
}

.j2p-login-field.has-error .j2p-login-input {
  border-color: rgba(220, 38, 38, 0.9);
}

.j2p-login-remember {
  margin-bottom: var(--s-4);
}

.j2p-login-remember-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}

.j2p-login-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--j2p-secondary);
  cursor: pointer;
}

.j2p-login-recaptcha {
  margin-bottom: var(--s-4);
}

/* DesignKit .btn-primary — Bronze / Champagne CTA */
.j2p-login-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--s-2);
  padding: 12px 16px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  color: #0b1f4d;
  background: var(--j2p-accent);
  box-shadow: 0 14px 30px rgba(231, 207, 163, 0.18);
  transition:
    transform 0.08s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}

.j2p-login-submit:hover {
  background: var(--j2p-accent-hover);
  box-shadow: 0 16px 34px rgba(231, 207, 163, 0.24);
}

.j2p-login-submit:active {
  transform: translateY(1px);
  background: var(--j2p-accent-pressed);
}

.j2p-login-text-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--j2p-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.j2p-login-text-link:hover,
.j2p-login-text-link:focus {
  color: var(--j2p-primary);
  text-decoration: underline;
}

.j2p-login-footer {
  margin: var(--s-5) 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--slate);
}

.j2p-login-footer--muted {
  margin-top: var(--s-3);
}

.j2p-login-footer-link {
  color: var(--slate);
  text-decoration: none;
  font-weight: 500;
}

.j2p-login-footer-link:hover {
  color: var(--ink);
}

.j2p-login-footer-accent {
  font-weight: 700;
  color: var(--j2p-secondary);
  margin-inline-start: 0.15em;
}

.j2p-login-footer-link:hover .j2p-login-footer-accent {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Public landing (welcome.blade.php) — mirrors j2p-ecr/DesignKit.html
   .hero gradient + .chip + .btn-* + .card / .section
   ------------------------------------------------------------------------- */
.j2p-landing {
  width: 100%;
  max-width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(0.75rem, 2.5vw, 1.25rem) clamp(0.5rem, 2vw, 1rem) clamp(2rem, 5vw, 3rem);
}

/* DesignKit .hero — contained rounded band */
.j2p-landing-hero-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  background:
    radial-gradient(
      circle at 70% 28%,
      rgba(231, 207, 163, 0.34) 0%,
      rgba(231, 207, 163, 0) 55%
    ),
    linear-gradient(90deg, var(--j2p-primary) 0%, var(--j2p-secondary) 100%);
  box-shadow: var(--shadow-float);
  padding: clamp(var(--s-6), 8vw, var(--s-9)) clamp(var(--s-4), 4vw, var(--s-6))
    clamp(var(--s-5), 6vw, var(--s-8));
}

.j2p-landing-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 0 auto;
}

/* DesignKit .chip (on hero / dark) */
.j2p-landing-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.j2p-landing-hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--j2p-accent);
  box-shadow: 0 0 0 4px rgba(231, 207, 163, 0.18);
  flex-shrink: 0;
}

.j2p-landing-hero-band h1 {
  margin: 0;
  font-size: clamp(1.75rem, 5.5vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #fff;
}

.j2p-landing-hero-lead {
  margin: var(--s-4) auto 0;
  max-width: 38rem;
  font-size: clamp(0.95rem, 2.4vw, 1.0625rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
}

.j2p-landing-hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.j2p-landing-hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

/* DesignKit .hero-actions + .btn-primary / .btn-secondary */
.j2p-landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.j2p-btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.08s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
  user-select: none;
}

.j2p-btn-hero:active {
  transform: translateY(1px);
}

.j2p-btn-hero--accent {
  background: var(--j2p-accent);
  color: var(--j2p-primary);
  box-shadow: 0 14px 30px rgba(231, 207, 163, 0.22);
}

.j2p-btn-hero--accent:hover,
.j2p-btn-hero--accent:focus {
  background: var(--j2p-accent-hover);
  color: var(--j2p-primary);
  text-decoration: none;
}

.j2p-btn-hero--blue {
  background: var(--j2p-secondary);
  color: #fff;
  box-shadow: 0 14px 30px rgba(29, 78, 216, 0.2);
}

.j2p-btn-hero--blue:hover,
.j2p-btn-hero--blue:focus {
  background: #1e40af;
  color: #fff;
  text-decoration: none;
}

.j2p-landing-hero-footnote {
  margin-top: var(--s-5);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.j2p-landing-hero-footnote a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

.j2p-landing-hero-footnote a:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

/* DesignKit section + .card grid */
.j2p-landing-section {
  margin-top: clamp(var(--s-6), 5vw, var(--s-8));
}

.j2p-landing-section-title {
  margin: 0 0 var(--s-5);
  font-size: clamp(1.125rem, 2.5vw, 1.35rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text-strong);
  text-align: center;
}

.j2p-landing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 640px) {
  .j2p-landing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .j2p-landing-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
  }
}

.j2p-landing-tile {
  background: var(--white);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--r-card);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--j2p-secondary);
  padding-top: calc(var(--s-5) - 3px);
  text-align: left;
}

.j2p-landing-tile-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: var(--s-3);
  background: rgba(29, 78, 216, 0.1);
  border: 1px solid rgba(29, 78, 216, 0.18);
  color: var(--j2p-secondary);
  font-size: 1.1rem;
}

.j2p-landing-tile-icon--bronze {
  background: rgba(231, 207, 163, 0.14);
  border-color: rgba(231, 207, 163, 0.25);
  color: var(--accent-text);
}

.j2p-landing-tile h3 {
  margin: 0 0 var(--s-2);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-strong);
}

.j2p-landing-tile p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--slate);
}

/* Dark: hero stays branded; tiles use token surfaces */
:root[data-theme='dark'] .j2p-landing-tile {
  background: var(--white);
  border-color: var(--border);
  color: var(--ink);
}

:root[data-theme='dark'] .j2p-landing-tile p {
  color: var(--slate);
}

:root[data-theme='dark'] .j2p-landing-section-title {
  color: var(--text-strong);
}

@media (max-width: 480px) {
  .j2p-landing-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .j2p-landing-hero-actions .j2p-btn-hero {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
   Self-service register (business/register.blade.php + jQuery Steps)
   DesignKit card + step rail + form controls (scoped to .j2p-register-form)
   ------------------------------------------------------------------------- */
.j2p-register-page {
  width: 100%;
  max-width: min(100%, 920px);
  margin: 0 auto;
  padding: 0 clamp(0.5rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 992px) {
  .j2p-register-page {
    max-width: min(100%, 1080px);
  }
}

@media (min-width: 1280px) {
  .j2p-register-page {
    max-width: min(100%, var(--max));
  }
}

.j2p-register-intro {
  text-align: center;
  margin-bottom: clamp(var(--s-5), 4vw, var(--s-6));
}

.j2p-register-intro-title {
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-strong);
}

.j2p-register-intro-lead {
  margin: var(--s-3) auto 0;
  max-width: 36rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--slate);
}

.j2p-register-intro-sep {
  margin: 0 0.35em;
  color: var(--muted);
}

.j2p-register-card {
  background: var(--white);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--j2p-secondary);
  padding: clamp(var(--s-4), 3vw, var(--s-6));
  padding-top: calc(clamp(var(--s-4), 3vw, var(--s-6)) - 3px);
}

form.j2p-register-form.wizard {
  width: 100%;
  margin: 0;
}

/* Step tabs — replaces flat 33% wizard li from app.css */
form.j2p-register-form.wizard > .steps {
  margin-bottom: var(--s-5);
}

form.j2p-register-form.wizard > .steps > ul {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  gap: var(--s-2);
}

form.j2p-register-form.wizard > .steps > ul > li {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}

form.j2p-register-form.wizard > .steps > ul > li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 4.5rem;
  padding: var(--s-2) var(--s-2);
  border-radius: var(--r-card);
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(248, 250, 252, 0.95);
  color: var(--slate);
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease;
}

form.j2p-register-form.wizard > .steps > ul > li.current > a,
form.j2p-register-form.wizard > .steps > ul > li.done > a {
  border-color: rgba(29, 78, 216, 0.45);
  background: rgba(29, 78, 216, 0.07);
  color: var(--j2p-secondary);
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.1);
}

form.j2p-register-form.wizard > .steps .number {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

form.j2p-register-form.wizard > .steps .title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}

@media (min-width: 640px) {
  form.j2p-register-form.wizard > .steps .title {
    font-size: 13px;
  }
}

form.j2p-register-form.wizard > .content {
  margin: 0;
  border-radius: var(--r-card);
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: var(--white) !important;
  overflow: hidden;
}

form.j2p-register-form.wizard > .content > .body {
  padding: clamp(var(--s-4), 3vw, var(--s-6));
}

/* Override global app.css legend { color: #fff } inside register wizard */
form.j2p-register-form legend.j2p-register-fieldset-legend,
form.j2p-register-form .content legend.j2p-register-fieldset-legend {
  float: none;
  width: 100%;
  margin: 0 0 var(--s-4);
  padding: 0 0 var(--s-2);
  border: none;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-strong) !important;
}

form.j2p-register-form .form-group {
  margin-bottom: var(--s-4);
}

form.j2p-register-form .form-group label:not(.error) {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 6px;
}

form.j2p-register-form .form-control {
  border-radius: var(--r-control);
  border: 1px solid rgba(203, 213, 225, 0.95);
  min-height: 44px;
  box-shadow: none;
  color: var(--ink);
}

form.j2p-register-form .form-control:focus {
  border-color: rgba(29, 78, 216, 0.85);
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.14);
}

form.j2p-register-form .input-group .form-control:last-child,
form.j2p-register-form .input-group .form-control:only-child {
  border-radius: 0 var(--r-control) var(--r-control) 0;
}

form.j2p-register-form .input-group-addon {
  background: rgba(29, 78, 216, 0.07);
  border-color: rgba(203, 213, 225, 0.95);
  color: var(--j2p-secondary);
  border-radius: var(--r-control) 0 0 var(--r-control);
}

form.j2p-register-form .input-group-addon .fa,
form.j2p-register-form .input-group-addon .fas {
  min-width: 1em;
  text-align: center;
}

form.j2p-register-form label.error {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--error) !important;
}

form.j2p-register-form .terms_condition {
  color: var(--j2p-secondary);
  text-underline-offset: 2px;
}

form.j2p-register-form .terms_condition:hover {
  color: #1e40af;
}

/* Select2 inside input groups */
form.j2p-register-form .input-group .select2-container {
  flex: 1 1 auto;
  min-width: 0;
}

form.j2p-register-form .input-group .select2-container .select2-selection--single {
  min-height: 42px;
  border-radius: 0 var(--r-control) var(--r-control) 0;
  border-color: rgba(203, 213, 225, 0.95);
}

form.j2p-register-form .input-group .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px;
  padding-left: 12px;
  color: var(--ink);
}

/* Wizard nav buttons (classes added in public/js/login.js) */
form.j2p-register-form.wizard > .actions {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(226, 232, 240, 0.95);
}

form.j2p-register-form.wizard > .actions > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

form.j2p-register-form.wizard > .actions li {
  margin: 0;
}

form.j2p-register-form.wizard > .actions a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px !important;
  border-radius: var(--r-control) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition:
    transform 0.08s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}

form.j2p-register-form.wizard > .actions a:active {
  transform: translateY(1px);
}

form.j2p-register-form.wizard > .actions a[href='#previous'] {
  background: transparent !important;
  color: var(--slate) !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
}

form.j2p-register-form.wizard > .actions a[href='#previous']:hover {
  background: rgba(248, 250, 252, 0.95) !important;
  color: var(--j2p-secondary) !important;
}

form.j2p-register-form.wizard > .actions a[href='#next'],
form.j2p-register-form.wizard > .actions a[href='#finish'] {
  background: var(--j2p-accent) !important;
  color: var(--j2p-primary) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 26px rgba(231, 207, 163, 0.2);
}

form.j2p-register-form.wizard > .actions a[href='#next']:hover,
form.j2p-register-form.wizard > .actions a[href='#finish']:hover {
  background: var(--j2p-accent-hover) !important;
  color: var(--j2p-primary) !important;
}

@media (max-width: 480px) {
  form.j2p-register-form.wizard > .actions > ul {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  form.j2p-register-form.wizard > .actions a {
    width: 100%;
  }
}

:root[data-theme='dark'] .j2p-register-intro-title {
  color: var(--text-strong);
}

:root[data-theme='dark'] .j2p-register-intro-lead {
  color: var(--slate);
}

:root[data-theme='dark'] .j2p-register-card {
  background: var(--white);
  border-color: var(--border);
}

:root[data-theme='dark'] form.j2p-register-form.wizard > .content {
  background: var(--white) !important;
  border-color: var(--border);
}

:root[data-theme='dark'] form.j2p-register-form.wizard > .steps > ul > li > a {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--slate);
}

/* -------------------------------------------------------------------------
   Public pricing (Superadmin pricing/index + package_card)
   Reuses landing hero band; package grid + DesignKit CTAs
   ------------------------------------------------------------------------- */
.j2p-pricing-page {
  width: 100%;
  max-width: min(100%, var(--max));
  margin: 0 auto;
  padding: 0 clamp(0.5rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2.5rem);
}

/* Pricing: square hero band, edge-aligned with page gutters (no rounded “floating” panel) */
.j2p-pricing-page .j2p-landing-hero-band.j2p-pricing-hero-band {
  border-radius: 0;
  margin-left: calc(-1 * clamp(0.5rem, 2vw, 1rem));
  margin-right: calc(-1 * clamp(0.5rem, 2vw, 1rem));
  width: calc(100% + 2 * clamp(0.5rem, 2vw, 1rem));
  max-width: none;
}

.j2p-pricing-hero-band {
  margin-bottom: clamp(var(--s-6), 5vw, var(--s-8));
}

.j2p-pricing-billing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.j2p-pricing-billing-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  user-select: none;
}

.j2p-pricing-billing-toggle {
  margin: 0 !important;
}

.j2p-pricing-packages-wrap {
  margin-top: var(--s-2);
}

/* Equal-height cards: flex row (overrides Bootstrap float for this row) */
.j2p-pricing-packages.row {
  display: flex;
  flex-wrap: wrap;
}

/* Flex stretch lives on inner wrapper so .months / .years columns can use display:none from jQuery */
.j2p-pricing-packages.row > [class*='col-'] > .j2p-pricing-card-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.j2p-pricing-packages.row > [class*='col-'] {
  float: none;
}

/* Per-column plan accent (pricing grid): rail blue / bronze / success by column index */
.j2p-pricing-packages.row > .col-md-4 {
  --j2p-plan-accent: var(--j2p-secondary);
}

.j2p-pricing-packages.row > .col-md-4:nth-child(3n + 2) {
  --j2p-plan-accent: #b45309;
}

.j2p-pricing-packages.row > .col-md-4:nth-child(3n + 3) {
  --j2p-plan-accent: var(--success);
}

:root[data-theme='dark'] .j2p-pricing-packages.row > .col-md-4:nth-child(3n + 2) {
  --j2p-plan-accent: #ea580c;
}

:root[data-theme='dark'] .j2p-pricing-packages.row > .col-md-4:nth-child(3n + 3) {
  --j2p-plan-accent: var(--success);
}

.j2p-pricing-card {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 0;
  overflow: hidden;
  transition:
    box-shadow 0.2s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
}

.j2p-pricing-card:hover {
  box-shadow: var(--shadow-float);
  transform: translateY(-2px);
  border-color: rgba(203, 213, 225, 0.95);
}

@supports (color: color-mix(in srgb, white, black)) {
  .j2p-pricing-card:hover {
    border-color: color-mix(in srgb, var(--j2p-plan-accent) 38%, var(--border));
  }
}

/* Plan name + price (distinct header band) */
.j2p-pricing-card-header {
  text-align: center;
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-top: 3px solid var(--j2p-plan-accent);
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(248, 250, 252, 0.65);
}

@supports (color: color-mix(in srgb, white, black)) {
  .j2p-pricing-card-header {
    background: color-mix(in srgb, var(--j2p-plan-accent) 10%, var(--white));
  }
}

.j2p-pricing-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--s-5);
  gap: var(--s-4);
}

.j2p-pricing-card-footer {
  padding: var(--s-2) var(--s-5) var(--s-5);
}

.j2p-pricing-card-name {
  margin: 0 0 var(--s-3);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-strong);
}

.j2p-pricing-card-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.j2p-pricing-card-price {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--j2p-plan-accent);
}

.j2p-pricing-card-price--free {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
  color: var(--j2p-plan-accent);
}

.j2p-pricing-card-interval {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}

.j2p-pricing-card-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--slate);
}

.j2p-pricing-card-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink);
  text-align: left;
}

.j2p-pricing-card-feature .fa-check {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--j2p-plan-accent);
}

.j2p-pricing-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
  transition:
    transform 0.08s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}

.j2p-pricing-card-cta:hover,
.j2p-pricing-card-cta:focus {
  text-decoration: none;
}

.j2p-pricing-card-cta:active {
  transform: translateY(1px);
}

.j2p-pricing-card-cta--accent {
  background: var(--j2p-accent);
  color: var(--j2p-primary);
  box-shadow: 0 10px 26px rgba(231, 207, 163, 0.2);
}

.j2p-pricing-card-cta--accent:hover,
.j2p-pricing-card-cta--accent:focus {
  background: var(--j2p-accent-hover);
  color: var(--j2p-primary);
}

.j2p-pricing-card-cta--blue {
  background: var(--j2p-secondary);
  color: #fff;
  box-shadow: 0 10px 26px rgba(29, 78, 216, 0.18);
}

.j2p-pricing-card-cta--blue:hover,
.j2p-pricing-card-cta--blue:focus {
  background: #1e40af;
  color: #fff;
}

:root[data-theme='dark'] .j2p-pricing-card {
  background: var(--white);
  border-color: var(--border);
}

:root[data-theme='dark'] .j2p-pricing-card-header {
  border-bottom-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
}

@supports (color: color-mix(in srgb, white, black)) {
  :root[data-theme='dark'] .j2p-pricing-card-header {
    background: color-mix(in srgb, var(--j2p-plan-accent) 14%, var(--white));
  }
}

:root[data-theme='dark'] .j2p-pricing-card-name {
  color: var(--text-strong);
}

:root[data-theme='dark'] .j2p-pricing-card-desc,
:root[data-theme='dark'] .j2p-pricing-card-feature {
  color: var(--ink);
}

:root[data-theme='dark'] .j2p-pricing-card-interval {
  color: var(--muted);
}

/* =========================================================
   Home dashboard
   Wraps `resources/views/home/index.blade.php` content.
   Hero band + stat tiles + report cards (charts and tables).
   Built on the same DesignKit tokens as the sidebar/topbar so
   the whole shell reads as one product.
   ========================================================= */

.j2p-home {
  --j2p-home-stat-accent: var(--j2p-secondary);
  padding: 20px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (max-width: 640px) {
  .j2p-home {
    padding: 16px 14px 24px;
    gap: 18px;
  }
}

/* ---------- Hero band ---------- */

.j2p-home-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  padding: 22px 26px;
  color: rgba(255, 255, 255, 0.9);
  background:
    radial-gradient(circle at 82% 18%, rgba(231, 207, 163, 0.34) 0%, rgba(231, 207, 163, 0) 58%),
    linear-gradient(90deg, var(--j2p-primary) 0%, var(--j2p-secondary) 100%);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* A faint diagonal grid behind the gradient gives the band a subtle premium
   texture without competing with the bronze glow. */
.j2p-home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 16px);
  background-size: 16px 16px;
  mix-blend-mode: overlay;
}

.j2p-home-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.j2p-home-hero-text {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.j2p-home-hero-eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.j2p-home-hero-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--j2p-accent);
  box-shadow: 0 0 0 3px rgba(231, 207, 163, 0.22);
  flex: 0 0 auto;
}

.j2p-home-hero-title {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.j2p-home-hero-sub {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.01em;
}

.j2p-home-hero-sep {
  display: inline-block;
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.5);
}

.j2p-home-hero-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
}

.j2p-home-hero-control {
  min-width: 220px;
}

/* The select2 widget renders as a sibling of the original <select>; brighten
   its rendered "rendered" pill so it reads on the dark hero. */
.j2p-home-hero-control .select2-container--default .select2-selection--single,
.j2p-home-hero-control .select2-selection--single {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
  height: 40px !important;
  color: #ffffff !important;
}

.j2p-home-hero-control .select2-selection__rendered,
.j2p-home-hero-control .select2-selection__placeholder {
  color: #ffffff !important;
  line-height: 38px !important;
  padding-left: 12px !important;
}

.j2p-home-hero-control .select2-selection__arrow {
  height: 38px !important;
}

.j2p-home-hero-datebtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--j2p-primary);
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(2, 6, 23, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
}

.j2p-home-hero-datebtn:hover {
  background: var(--j2p-accent-tint);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.25);
}

.j2p-home-hero-datebtn svg {
  width: 18px;
  height: 18px;
}

.j2p-home-hero-datebtn-chev {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.7;
}

/* ---------- Stat tiles ---------- */

.j2p-home-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1200px) {
  .j2p-home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .j2p-home-stats {
    grid-template-columns: 1fr;
  }
}

.j2p-home-stat {
  --tile-accent: var(--j2p-secondary);
  --tile-tint: rgba(29, 78, 216, 0.1);
  --tile-tint-strong: rgba(29, 78, 216, 0.18);
  position: relative;
  background: var(--white);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--r-card);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}

.j2p-home-stat::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tile-accent);
  opacity: 0.85;
}

.j2p-home-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-float);
}

.j2p-home-stat--info {
  --tile-accent: #0ea5e9;
  --tile-tint: rgba(14, 165, 233, 0.12);
  --tile-tint-strong: rgba(14, 165, 233, 0.2);
}

.j2p-home-stat--success {
  --tile-accent: #16a34a;
  --tile-tint: rgba(22, 163, 74, 0.12);
  --tile-tint-strong: rgba(22, 163, 74, 0.2);
}

.j2p-home-stat--warning {
  --tile-accent: #d97706;
  --tile-tint: rgba(217, 119, 6, 0.14);
  --tile-tint-strong: rgba(217, 119, 6, 0.22);
}

.j2p-home-stat--danger {
  --tile-accent: #dc2626;
  --tile-tint: rgba(220, 38, 38, 0.12);
  --tile-tint-strong: rgba(220, 38, 38, 0.2);
}

.j2p-home-stat--accent {
  --tile-accent: var(--j2p-accent);
  --tile-tint: rgba(231, 207, 163, 0.22);
  --tile-tint-strong: rgba(231, 207, 163, 0.36);
}

.j2p-home-stat-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.j2p-home-stat-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tile-tint);
  border: 1px solid var(--tile-tint-strong);
  color: var(--tile-accent);
}

.j2p-home-stat-icon svg {
  width: 22px;
  height: 22px;
}

.j2p-home-stat-body {
  flex: 1 1 auto;
  min-width: 0;
}

.j2p-home-stat-label {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.j2p-home-stat-value {
  margin: 0;
  font-family: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, Menlo, monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Report grid (charts + tables) ---------- */

.j2p-home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 980px) {
  .j2p-home-grid {
    grid-template-columns: 1fr;
  }
}

.j2p-home-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-top: 3px solid var(--j2p-secondary);
  border-radius: var(--r-card);
  padding: 18px 20px 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.j2p-home-card--full {
  grid-column: 1 / -1;
}

.j2p-home-card--half {
  grid-column: span 1;
}

@media (max-width: 980px) {
  .j2p-home-card--half {
    grid-column: 1 / -1;
  }
}

/* Card header: icon + title + optional location filter */
.j2p-home-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.j2p-home-card-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(29, 78, 216, 0.1);
  border: 1px solid rgba(29, 78, 216, 0.18);
  color: var(--j2p-secondary);
}

.j2p-home-card-icon svg {
  width: 20px;
  height: 20px;
}

.j2p-home-card-icon--info {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.22);
  color: #0ea5e9;
}

.j2p-home-card-icon--success {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.22);
  color: #16a34a;
}

.j2p-home-card-icon--warning {
  background: rgba(217, 119, 6, 0.14);
  border-color: rgba(217, 119, 6, 0.22);
  color: #d97706;
}

.j2p-home-card-title {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

@media (min-width: 1024px) {
  .j2p-home-card-title {
    font-size: 18px;
  }
}

.j2p-home-card-filter {
  flex: 0 1 220px;
  min-width: 160px;
  max-width: 280px;
  margin-left: auto;
}

.j2p-home-card-filter .select2-container {
  width: 100% !important;
}

.j2p-home-card-filter .select2-container--default .select2-selection--single {
  height: 36px !important;
  border-radius: 8px !important;
  border-color: var(--border) !important;
}

.j2p-home-card-filter .select2-selection__rendered {
  line-height: 34px !important;
}

.j2p-home-card-filter .select2-selection__arrow {
  height: 34px !important;
}

/* Chart body: let the chart container fill width without the dashed
   "placeholder" wrapper that was previously in the markup. */
.j2p-home-card-chart {
  width: 100%;
  min-height: 320px;
}

.j2p-home-card-chart > div,
.j2p-home-card-chart > p {
  width: 100% !important;
  margin: 0 !important;
}

/* Table body: tidy spacing around DataTables; keep the existing
   `.table` class styles intact, just hand them a calmer container. */
.j2p-home-card-table {
  margin: 0 -4px;
  overflow-x: auto;
}

.j2p-home-card-table > table {
  margin-bottom: 0 !important;
}

.j2p-home-card-table .dataTables_wrapper {
  padding: 0;
}

.j2p-home-card-table .dataTables_wrapper .dataTables_filter,
.j2p-home-card-table .dataTables_wrapper .dataTables_length {
  margin-bottom: 10px;
}

.j2p-home-card-table table.table {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.j2p-home-card-table table.table > thead > tr > th {
  background: rgba(15, 23, 42, 0.03);
  color: var(--text-strong);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.j2p-home-card-table table.table > tbody > tr > td {
  vertical-align: middle;
  font-size: 13px;
}

/* ---------- Dark mode tweaks ---------- */

:root[data-theme='dark'] .j2p-home-stat,
:root[data-theme='dark'] .j2p-home-card {
  border-color: var(--border);
}

:root[data-theme='dark'] .j2p-home-card-table table.table > thead > tr > th {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: var(--border);
}

:root[data-theme='dark'] .j2p-home-card-icon {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

/* =========================================================
   Form widgets — Select2 + daterangepicker
   These widgets render their popups as direct children of <body>,
   so the styles below MUST be global (not scoped under .j2p-home).
   The result is a consistent DesignKit look for every select2 and
   date-range trigger across the whole app.
   ========================================================= */

/* ---------- Hero state-tweaks for the open trigger ---------- */

/* The hero band has a dark navy gradient, so the CLOSED select2 pill
   sitting on it must keep light/white text. These hero-scoped rules win
   over the generic dark-text defaults defined further below. */
.j2p-home-hero-control .select2-container--default .select2-selection--single {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.j2p-home-hero-control
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #ffffff !important;
}

.j2p-home-hero-control
  .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: rgba(255, 255, 255, 0.85) !important;
}

.j2p-home-hero-control .select2-container--open .select2-selection--single,
.j2p-home-hero-control .select2-container--focus .select2-selection--single {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(231, 207, 163, 0.25) !important;
}

.j2p-home-hero-control .select2-selection__arrow b {
  border-top-color: #ffffff !important;
}

/* ---------- Select2 dropdown panel ---------- */

.select2-container--default .select2-dropdown,
.select2-dropdown {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-float) !important;
  background: var(--white) !important;
  overflow: hidden;
  padding: 6px !important;
  margin-top: 4px;
}

/* Search box inside the dropdown */
.select2-container--default .select2-search--dropdown {
  padding: 4px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--j2p-secondary) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15) !important;
}

/* Option list */
.select2-container--default .select2-results__options {
  padding: 2px !important;
  max-height: 280px !important;
}

.select2-container--default .select2-results__option {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  margin: 1px 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background-color: rgba(29, 78, 216, 0.08) !important;
  color: var(--j2p-primary) !important;
}

.select2-container--default .select2-results__option[aria-selected='true'] {
  background-color: rgba(231, 207, 163, 0.22) !important;
  color: var(--j2p-primary) !important;
  font-weight: 600;
}

.select2-container--default
  .select2-results__option[aria-selected='true'].select2-results__option--highlighted {
  background-color: rgba(231, 207, 163, 0.35) !important;
}

.select2-container--default .select2-results__option[aria-disabled='true'] {
  color: var(--muted) !important;
  background: transparent !important;
}

/* "No results" / loading state */
.select2-container--default .select2-results__option--load-more,
.select2-container--default .select2-results__message {
  color: var(--muted) !important;
  font-style: italic;
  padding: 10px !important;
}

/* Default closed pill (used outside the hero) */
.select2-container--default .select2-selection--single {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  height: 38px !important;
  background: var(--white) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--j2p-secondary) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  padding-left: 12px !important;
  color: var(--ink) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--muted) !important;
}

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

/* Multi-select pill chips */
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  padding: 3px 6px !important;
  background: var(--white) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(29, 78, 216, 0.08) !important;
  border: 1px solid rgba(29, 78, 216, 0.18) !important;
  border-radius: 6px !important;
  color: var(--j2p-primary) !important;
  padding: 2px 8px !important;
  margin-top: 4px !important;
  font-size: 12px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--j2p-primary) !important;
  margin-right: 4px !important;
}

/* ---------- daterangepicker ---------- */

.daterangepicker {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-float) !important;
  padding: 6px !important;
  background: var(--white) !important;
  font-family: inherit;
  margin-top: 6px;
}

/* Hide the pointing caret arrows — cleaner without them. */
.daterangepicker:before,
.daterangepicker:after {
  display: none !important;
}

/* Preset ranges list */
.daterangepicker .ranges {
  padding: 6px !important;
  border-right: 1px solid var(--border);
}

.daterangepicker .ranges ul {
  width: 168px !important;
}

.daterangepicker .ranges li {
  padding: 8px 12px !important;
  margin: 2px 0;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--ink) !important;
  transition: background 0.12s ease, color 0.12s ease;
}

.daterangepicker .ranges li:hover {
  background: rgba(29, 78, 216, 0.08) !important;
  color: var(--j2p-primary) !important;
}

.daterangepicker .ranges li.active {
  background: var(--j2p-primary) !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* Calendar panes */
.daterangepicker .drp-calendar {
  padding: 8px 10px !important;
  max-width: 280px;
}

.daterangepicker .drp-calendar.left {
  border-right: 1px solid var(--border);
}

.daterangepicker .calendar-table {
  border: none !important;
  background: transparent !important;
  padding: 4px !important;
}

.daterangepicker .calendar-table table {
  border-collapse: separate;
  border-spacing: 2px;
}

.daterangepicker .calendar-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted) !important;
  padding: 6px 0;
}

.daterangepicker .calendar-table td {
  border-radius: 8px !important;
  font-size: 13px;
  font-weight: 500;
  height: 30px;
  width: 30px;
  min-width: 30px;
  color: var(--ink);
  border: 1px solid transparent !important;
  transition: background 0.12s ease, color 0.12s ease;
}

.daterangepicker .calendar-table td.available:hover {
  background: rgba(29, 78, 216, 0.08) !important;
  color: var(--j2p-primary) !important;
}

.daterangepicker .calendar-table td.off,
.daterangepicker .calendar-table td.off.in-range,
.daterangepicker .calendar-table td.off.start-date,
.daterangepicker .calendar-table td.off.end-date {
  color: var(--muted) !important;
  background: transparent !important;
}

.daterangepicker .calendar-table td.disabled {
  color: var(--muted) !important;
  text-decoration: line-through;
  opacity: 0.55;
}

.daterangepicker .calendar-table td.in-range {
  background: rgba(29, 78, 216, 0.1) !important;
  color: var(--j2p-primary) !important;
  border-radius: 0 !important;
}

.daterangepicker .calendar-table td.active,
.daterangepicker .calendar-table td.active:hover,
.daterangepicker .calendar-table td.start-date,
.daterangepicker .calendar-table td.end-date {
  background: var(--j2p-secondary) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700;
}

.daterangepicker .calendar-table td.start-date {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.daterangepicker .calendar-table td.end-date {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.daterangepicker .calendar-table td.start-date.end-date {
  border-radius: 8px !important;
}

.daterangepicker .calendar-table td.today,
.daterangepicker .calendar-table td.today.available {
  border: 1px solid var(--j2p-accent) !important;
  font-weight: 700;
}

/* Month/year nav arrows */
.daterangepicker .calendar-table .prev,
.daterangepicker .calendar-table .next {
  background: rgba(15, 23, 42, 0.04) !important;
  color: var(--j2p-primary) !important;
}

.daterangepicker .calendar-table .prev:hover,
.daterangepicker .calendar-table .next:hover {
  background: rgba(29, 78, 216, 0.12) !important;
}

.daterangepicker .month {
  font-weight: 700;
  color: var(--text-strong);
  font-size: 13px;
}

/* Month/year selects in the calendar header */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 4px 6px !important;
  font-size: 12px;
  background: var(--white) !important;
  color: var(--ink) !important;
}

/* Footer (custom range): inputs + Apply / Cancel buttons */
.daterangepicker .drp-buttons {
  border-top: 1px solid var(--border) !important;
  padding: 10px !important;
}

.daterangepicker .drp-selected {
  font-size: 12px;
  color: var(--muted);
}

.daterangepicker .btn {
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.daterangepicker .applyBtn,
.daterangepicker .btn-primary {
  background: var(--j2p-primary) !important;
  border-color: var(--j2p-primary) !important;
  color: #ffffff !important;
}

.daterangepicker .applyBtn:hover,
.daterangepicker .btn-primary:hover {
  background: var(--j2p-secondary) !important;
  border-color: var(--j2p-secondary) !important;
}

.daterangepicker .cancelBtn,
.daterangepicker .btn-default {
  background: var(--white) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

.daterangepicker .cancelBtn:hover,
.daterangepicker .btn-default:hover {
  background: rgba(15, 23, 42, 0.04) !important;
}

/* Custom-range manual inputs */
.daterangepicker .input-mini {
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  color: var(--ink) !important;
}

.daterangepicker .input-mini.active {
  border-color: var(--j2p-secondary) !important;
}

/* Stack ranges above calendars on narrow viewports (mobile) */
@media (max-width: 640px) {
  .daterangepicker.show-ranges .ranges {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  .daterangepicker .ranges ul {
    width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .daterangepicker .ranges li {
    flex: 1 1 calc(50% - 4px);
    text-align: center;
  }
}

/* ---------- Dark mode ---------- */

:root[data-theme='dark'] .select2-container--default .select2-dropdown,
:root[data-theme='dark'] .daterangepicker {
  background: var(--white) !important;
  border-color: var(--border) !important;
}

:root[data-theme='dark']
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field,
:root[data-theme='dark'] .select2-container--default .select2-selection--single,
:root[data-theme='dark'] .select2-container--default .select2-selection--multiple,
:root[data-theme='dark'] .daterangepicker select,
:root[data-theme='dark'] .daterangepicker .input-mini {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

:root[data-theme='dark'] .select2-container--default .select2-results__option {
  color: var(--ink) !important;
}

:root[data-theme='dark']
  .select2-container--default
  .select2-results__option--highlighted {
  background-color: rgba(59, 130, 246, 0.18) !important;
  color: var(--ink) !important;
}

:root[data-theme='dark'] .daterangepicker .ranges li {
  color: var(--ink) !important;
}

:root[data-theme='dark'] .daterangepicker .ranges li:hover {
  background: rgba(59, 130, 246, 0.18) !important;
  color: var(--ink) !important;
}

:root[data-theme='dark'] .daterangepicker .ranges li.active {
  background: var(--j2p-secondary) !important;
  color: #ffffff !important;
}

:root[data-theme='dark'] .daterangepicker .calendar-table td {
  color: var(--ink);
}

:root[data-theme='dark'] .daterangepicker .calendar-table td.in-range {
  background: rgba(59, 130, 246, 0.18) !important;
  color: var(--ink) !important;
}

:root[data-theme='dark'] .daterangepicker .drp-buttons,
:root[data-theme='dark'] .daterangepicker .ranges,
:root[data-theme='dark'] .daterangepicker .drp-calendar.left {
  border-color: var(--border) !important;
}

/* -------------------------------------------------------------------------
   POS screen (/pos/create, /pos/.../edit) — DesignKit: navy chrome + cards
   ------------------------------------------------------------------------- */

.j2p-pos-page {
  padding: 0.75rem 0.75rem 5rem;
}

@media (min-width: 768px) {
  .j2p-pos-page {
    padding: 0.75rem 1rem 5.5rem;
  }
}

.j2p-pos-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.j2p-pos-actions {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: 0 -4px 24px rgba(2, 6, 23, 0.06);
}

/* POS header: same chrome band as main app topbar, variable height (keep sticky from chrome topbar) */
.j2p-pos-chrome-header.j2p-chrome-header.j2p-dk-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: auto;
  min-height: var(--j2p-topbar-h);
}

.j2p-pos-chrome-inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.5rem 0.75rem 0.65rem;
}

@media (min-width: 768px) {
  .j2p-pos-chrome-inner {
    padding: 0.5rem 1rem 0.65rem;
  }
}

.j2p-pos-chrome-header .j2p-pos-chrome-start {
  color: rgba(255, 255, 255, 0.92);
}

.j2p-pos-chrome-header .j2p-pos-location-select {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
}

.j2p-pos-chrome-header .j2p-pos-location-name {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.j2p-pos-chrome-header .j2p-pos-location-select select.j2p-pos-location-control,
.j2p-pos-chrome-header .j2p-pos-location-select select.form-control.input-sm {
  width: 100%;
  max-width: 100%;
  min-height: 2.5rem;
  box-sizing: border-box;
  padding: 0.35rem 2rem 0.35rem 0.75rem;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  background-color: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.75rem;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.j2p-pos-chrome-header .j2p-pos-location-select select.j2p-pos-location-control:hover,
.j2p-pos-chrome-header .j2p-pos-location-select select.form-control.input-sm:hover {
  background-color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.j2p-pos-chrome-header .j2p-pos-location-select select.j2p-pos-location-control:focus,
.j2p-pos-chrome-header .j2p-pos-location-select select.form-control.input-sm:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

[dir='rtl'] .j2p-pos-chrome-header .j2p-pos-location-select select.j2p-pos-location-control,
[dir='rtl'] .j2p-pos-chrome-header .j2p-pos-location-select select.form-control.input-sm {
  padding: 0.35rem 0.75rem 0.35rem 2rem;
  background-position: left 0.6rem center;
}

.j2p-pos-time-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0 0.65rem;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.j2p-pos-time-chip:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.j2p-pos-time-chip .j2p-pos-time-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}

.j2p-pos-time-chip .fa-keyboard,
.j2p-pos-time-chip .hover-q {
  color: rgba(255, 255, 255, 0.92);
}

.j2p-pos-time-chip .j2p-pos-keyboard-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  margin-inline-start: -0.1rem;
  padding: 0.25rem 0.35rem;
  min-width: 2rem;
  min-height: 2rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}

.j2p-pos-time-chip .j2p-pos-keyboard-help i {
  font-size: 0.875rem;
}

.j2p-pos-time-chip .j2p-pos-keyboard-help:hover,
.j2p-pos-time-chip .j2p-pos-keyboard-help:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.j2p-pos-time-chip .j2p-pos-keyboard-help:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* POS chrome row: <lg = 2-row grid (location + triggers | full-width toolbar); lg+ = flex row */
.j2p-pos-chrome-header .j2p-pos-chrome-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0.5rem 0.75rem;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.j2p-pos-chrome-header .j2p-pos-chrome-start {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.j2p-pos-chrome-header .j2p-pos-chrome-triggers {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.j2p-pos-chrome-header .j2p-pos-toolbar-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: none;
  min-width: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: none;
}

.j2p-pos-chrome-header .j2p-pos-toolbar-nav.j2p-pos-toolbar-nav--open {
  display: flex;
  padding: 0.5rem 0.35rem 0.65rem;
  max-height: min(55vh, 22rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.j2p-pos-chrome-header .j2p-pos-toolbar-nav.j2p-pos-toolbar-nav--open > .j2p-pos-tool,
.j2p-pos-chrome-header .j2p-pos-toolbar-nav.j2p-pos-toolbar-nav--open > .j2p-pos-tool--wide,
.j2p-pos-chrome-header .j2p-pos-toolbar-nav.j2p-pos-toolbar-nav--open > a.j2p-pos-tool {
  width: 100%;
  justify-content: flex-start;
  min-height: 2.75rem;
}

.j2p-pos-chrome-header .j2p-pos-toolbar-nav > * {
  float: none !important;
}

.j2p-pos-mob-menu-toggle--active {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

@media (min-width: 1024px) {
  .j2p-pos-chrome-header .j2p-pos-chrome-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .j2p-pos-chrome-header .j2p-pos-chrome-start {
    flex: 0 1 auto;
    max-width: min(38rem, 100%);
    min-width: 0;
  }

  .j2p-pos-chrome-header .j2p-pos-chrome-triggers {
    display: none !important;
  }

  .j2p-pos-chrome-header .j2p-pos-toolbar-nav {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
  }

  .j2p-pos-chrome-header .j2p-pos-toolbar-nav > .j2p-pos-tool,
  .j2p-pos-chrome-header .j2p-pos-toolbar-nav > .j2p-pos-tool--wide,
  .j2p-pos-chrome-header .j2p-pos-toolbar-nav > a.j2p-pos-tool {
    width: auto;
    min-height: unset;
    justify-content: center;
  }
}

@media (max-width: 1023px) {
  body:has(.j2p-pos-page) > .popover {
    max-width: min(calc(100vw - 1rem), 22rem);
  }
}

/* Toolbar controls (glass, matches main topbar icon treatment) */
.j2p-pos-chrome-header .j2p-pos-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0 0.65rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.05s ease;
}

.j2p-pos-chrome-header .j2p-pos-tool:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

.j2p-pos-chrome-header .j2p-pos-tool:active {
  transform: translateY(1px);
}

.j2p-pos-chrome-header .j2p-pos-tool i,
.j2p-pos-chrome-header .j2p-pos-tool .fa,
.j2p-pos-chrome-header .j2p-pos-tool .fas {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
}

.j2p-pos-chrome-header .j2p-pos-tool--wide {
  min-width: auto;
  padding-inline: 0.85rem;
}

.j2p-pos-chrome-header .j2p-pos-tool strong {
  color: inherit;
  font-weight: 600;
}

/* Totals strip under cart */
.j2p-pos-page .pos_form_totals .pos-totals-table {
  background: rgba(248, 250, 252, 0.85);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  margin-bottom: 0;
}

.j2p-pos-page .pos_form_totals .pos-totals-table > tbody > tr > td {
  border: none;
  vertical-align: middle;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
}

.j2p-pos-page .pos-totals__lbl {
  color: var(--muted);
  font-weight: 600;
  margin-right: 0.25rem;
}

.j2p-pos-page .pos-totals__val {
  color: var(--ink);
  font-weight: 700;
}

.j2p-pos-page .pos-totals__edit {
  margin-inline-start: 0.25rem;
  padding: 0.15rem 0.35rem;
  border: none;
  background: transparent;
  color: var(--j2p-secondary);
  border-radius: 6px;
}

.j2p-pos-page .pos-totals__edit:hover {
  background: var(--j2p-accent-tint);
  color: var(--j2p-primary);
}

/* Sticky actions — semantic CTAs (classes on buttons in pos_form_actions) */
.j2p-pos-cta-primary {
  background-color: var(--j2p-primary) !important;
  color: #fff !important;
}

.j2p-pos-cta-primary:hover {
  filter: brightness(1.08);
}

.j2p-pos-cta-success {
  background-color: var(--success) !important;
  color: #fff !important;
}

.j2p-pos-cta-success:hover {
  filter: brightness(1.06);
}

.j2p-pos-cta-secondary {
  background-color: var(--j2p-secondary) !important;
  color: #fff !important;
}

.j2p-pos-cta-secondary:hover {
  filter: brightness(1.08);
}

.j2p-pos-page .pos-payable-total__label,
.j2p-pos-page .pos-payable-total__amount {
  color: var(--ink);
}

.j2p-pos-footer {
  padding: 0.35rem 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  border-top: 1px solid var(--border);
  background: rgba(248, 250, 252, 0.6);
}

.j2p-pos-footer b {
  color: var(--slate);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   POS responsive (phone + tablet): layout, sticky bar, totals, chrome
   ------------------------------------------------------------------------- */

.j2p-pos-location-select .form-control {
  width: 100%;
  max-width: 100%;
}

/* Bottom action bar: stay fixed, full width, iOS safe area (overrides app.css absolute<600px) */
body.j2p-app-body .pos-form-actions {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw;
  box-sizing: border-box;
  padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px)) !important;
  position: fixed !important;
  bottom: 0 !important;
}

.j2p-pos-actions-inner {
  max-width: 100%;
}

.j2p-pos-actions-primary-row,
.j2p-pos-actions-secondary-row {
  min-width: 0;
}

/* Room for fixed bar + home indicator */
.j2p-pos-page {
  padding-bottom: max(6.5rem, calc(6rem + env(safe-area-inset-bottom, 0px))) !important;
}

@media (min-width: 640px) and (max-width: 1279px) {
  .j2p-pos-page {
    padding-bottom: max(7rem, calc(6.5rem + env(safe-area-inset-bottom, 0px))) !important;
  }
}

/* Totals: readable on narrow screens */
@media (max-width: 639px) {
  .j2p-pos-page .pos_form_totals .pos-totals-table > tbody > tr {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .j2p-pos-page .pos_form_totals .pos-totals-table > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 0.45rem 0.5rem !important;
    border: none !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .j2p-pos-page .pos_form_totals .pos-totals-table > tbody > tr > td {
    font-size: 0.78rem;
    padding: 0.4rem 0.45rem !important;
  }
}

/* Secondary row: icon actions wrap with touch-friendly tap targets */
.j2p-pos-page .j2p-pos-actions-secondary-row button {
  min-height: 44px;
  min-width: 44px;
  padding: 0.35rem 0.5rem;
}

/* Product rail: scroll inside column on lg+ without blowing layout (aligns with POS two-column lg breakpoint).
   Visibility: do not use `lg:tw-block` / `xl:tw-block` on the rail wrapper — the committed prebuild
   `public/css/tailwind/app.css` omits those utilities, so `tw-hidden` would never be overridden; blades use `lg:tw-flex lg:tw-flex-col`. */
.j2p-pos-page .j2p-pos-sidebar-rail {
  max-height: min(70vh, 36rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) {
  .j2p-pos-page .j2p-pos-sidebar-rail {
    max-height: calc(100vh - 8rem);
  }
}