/* ==========================================================================
   TRADE LEDGER — supplier & admin portals (Tabler re-skin)
   Same tokens as the storefront (assets/front_end/css/theme.css): kraft-cream paper,
   ink text, market-green accent with a citrus-lime highlight, hairline structure. Loaded after cosmo-portal.css.
   Declared on [data-bs-theme] descendants too, because Tabler re-declares its
   variables on every [data-bs-theme=light] element (e.g. the sidebar).
   ========================================================================== */
body.portal-v2,
body.portal-v2 [data-bs-theme] {
  --tl-paper: #FFFFFF;
  --tl-panel: #FFFFFF;
  --tl-panel-2: #FFFFFF;
  --tl-line: #DDD5C3;
  --tl-line-2: #E9E3D5;
  --tl-ink: #1A211C;
  --tl-muted: #57605A;
  --tl-muted-2: #848A82;
  --tl-brand: #177245;
  --tl-brand-press: #115A36;
  --tl-brand-soft: #DFF0E4;
  --tl-brand-fill: #177245;
  --tl-danger: #C2382C;
  --tl-danger-soft: #F8E1DC;
  --tl-olive: #5E6B10;
  --tl-olive-soft: #EEF2D3;
  --tl-green: #237A3B;
  --tl-accent: #B9D84A;
  --tl-accent-ink: #1F3300;
  --tl-serif: "Source Serif 4", "IBM Plex Sans Arabic", Georgia, serif;
  --tl-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --tl-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", Tahoma, sans-serif;
  --tl-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tl-ring: 0 0 0 3px rgba(23,114,69, .18);

  --cosmo-portal-accent: #177245;
  --cosmo-portal-accent-dark: #115A36;
  --tblr-primary: #177245;
  --tblr-primary-rgb: 23, 114, 69;
  --tblr-primary-fg: #fff;
  --tblr-primary-text-emphasis: #115A36;
  --tblr-primary-bg-subtle: #DFF0E4;
  --tblr-primary-border-subtle: #BFDCC9;
  --tblr-primary-lt: #DFF0E4;
  --tblr-link-color: #177245;
  --tblr-link-color-rgb: 23, 114, 69;
  --tblr-link-hover-color: #115A36;
  --tblr-link-hover-color-rgb: 17, 90, 54;
  --tblr-body-bg: #FFFFFF;
  --tblr-body-color: #1A211C;
  --tblr-body-color-rgb: 26, 33, 28;
  --tblr-bg-surface: #FFFFFF;
  --tblr-bg-surface-secondary: #FFFFFF;
  --tblr-bg-surface-tertiary: #FFFFFF;
  --tblr-bg-forms: #FFFFFF;
  --tblr-border-color: #DDD5C3;
  --tblr-border-color-translucent: rgba(26,33,28, .1);
  --tblr-secondary: #57605A;
  --tblr-secondary-color: #57605A;
  --tblr-muted: #57605A;
  --tblr-font-sans-serif: "IBM Plex Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  --tblr-border-radius: 6px;
  --tblr-border-radius-sm: 4px;
  --tblr-border-radius-lg: 8px;
  --tblr-border-radius-xl: 10px;
  --tblr-shadow-card: none;
  --tblr-shadow-input: none;
  --tblr-box-shadow: 0 2px 6px rgba(26,33,28, .06), 0 22px 44px -22px rgba(26,33,28, .32);
  --tblr-success: #237A3B;
  --tblr-success-rgb: 35, 122, 59;
  --tblr-danger: #C2382C;
  --tblr-danger-rgb: 194, 56, 44;
  --tblr-warning: #5E6B10;
  --tblr-warning-rgb: 94, 107, 16;
}

body.portal-v2 { background: var(--tl-paper); color: var(--tl-ink); font-family: var(--tl-sans); -webkit-font-smoothing: antialiased; }
html[dir="rtl"] body.portal-v2, html[lang="ar"] body.portal-v2 { font-family: var(--tl-arabic); }
.portal-v2 :focus-visible { outline: 2px solid var(--tl-brand); outline-offset: 2px; }
.portal-v2 ::selection { background: var(--tl-brand); color: #fff; }

/* ---------- wordmark ---------- */
.portal-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--tl-ink, #1A211C); line-height: 1; text-decoration: none; white-space: nowrap; }
.portal-brand__mono { width: 34px; height: 34px; border-radius: 5px; background: #177245; color: #FFFFFF; display: grid; place-items: center; font-family: var(--tl-serif, Georgia, serif); font-weight: 600; font-size: 15px; flex-shrink: 0; }
.portal-brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.portal-brand__name { font-family: var(--tl-serif, Georgia, serif); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--tl-ink, #1A211C); overflow: hidden; text-overflow: ellipsis; }
.portal-brand__area { font-family: var(--tl-mono, monospace); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--tl-muted, #57605A); }
html[dir="rtl"] .portal-brand__area { font-family: var(--tl-arabic); letter-spacing: 0; font-size: 11.5px; }
.login-logo .portal-brand__mono { width: 44px; height: 44px; font-size: 19px; }
.login-logo .portal-brand__name { font-size: 24px; }

/* ---------- sidebar (light ledger) ---------- */
.portal-v2 .navbar-vertical {
  background: var(--tl-panel) !important;
  border-inline-end: 1px solid var(--tl-line);
  box-shadow: none;
}
.portal-v2 .navbar-vertical .navbar-brand { padding-block: 1.1rem .6rem; }
.portal-v2 .navbar-vertical .navbar-brand a { text-decoration: none; }
.portal-v2 .navbar-vertical .sidebar-search .form-control { background: var(--tl-paper); border-color: var(--tl-line); height: 38px; font-size: 13.5px; }
.portal-v2 .navbar-vertical .nav-section {
  list-style: none;
  margin: 1.1rem .75rem .35rem;
  padding-top: .9rem;
  border-top: 1px solid var(--tl-line-2);
  font-family: var(--tl-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tl-muted-2);
}
html[dir="rtl"] .portal-v2 .navbar-vertical .nav-section { font-family: var(--tl-arabic); letter-spacing: 0; font-size: 12px; }
.portal-v2 .sidebar-search:has(input:not(:placeholder-shown)) ~ #sidebar-menu .nav-section { display: none; }
.portal-v2 .navbar-vertical .navbar-nav { padding-inline: .5rem; }
.portal-v2 .navbar-vertical .nav-link,
.portal-v2 .navbar-vertical .dropdown-item {
  color: var(--tl-ink) !important;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  min-height: 38px;
  padding-inline: .75rem !important;
  border-left: 0 !important;
  margin-block: 1px;
  transition: background .15s, color .15s;
}
.portal-v2 .navbar-vertical .nav-link .nav-link-icon { color: var(--tl-muted); opacity: 1; }
.portal-v2 .navbar-vertical .nav-link .nav-link-icon .ti { font-size: 19px; }
.portal-v2 .navbar-vertical .nav-link:hover,
.portal-v2 .navbar-vertical .dropdown-item:hover { background: var(--tl-paper) !important; color: var(--tl-brand) !important; }
.portal-v2 .navbar-vertical .nav-link:hover .nav-link-icon { color: var(--tl-brand); }
/* active states (the sidebar JS writes inline colours; these win with !important) */
.portal-v2 .navbar-vertical .nav-link.active,
.portal-v2 .navbar-vertical .dropdown-item.active-submenu {
  background: var(--tl-brand-soft) !important;
  color: var(--tl-brand) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--tl-brand);
}
html[dir="rtl"] .portal-v2 .navbar-vertical .nav-link.active,
html[dir="rtl"] .portal-v2 .navbar-vertical .dropdown-item.active-submenu { box-shadow: inset -3px 0 0 var(--tl-brand); }
.portal-v2 .navbar-vertical .nav-link.active .nav-link-icon { color: var(--tl-brand); }
.portal-v2 .navbar-vertical .dropdown-toggle[aria-expanded="true"] { background: transparent !important; }
.portal-v2 .navbar-vertical .dropdown-menu { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 .25rem; margin: 0; }
.portal-v2 .navbar-vertical .dropdown-menu .dropdown-item { padding-inline-start: 2.6rem !important; font-size: 13.5px; color: var(--tl-muted) !important; min-height: 34px; }
.portal-v2 .navbar-vertical .dropdown-menu .dropdown-item.active-submenu { color: var(--tl-brand) !important; }
.portal-v2 .navbar-vertical .navbar-toggler { border-color: var(--tl-line); }
/* Long labels ("Grocery Businesses / Customers", Arabic group names) wrap inside the sidebar instead of being cut off
   or pushing the dropdown chevron over the text; the sidebar never scrolls sideways. */
.portal-v2 .navbar-vertical { overflow-x: hidden !important; }
.portal-v2 .navbar-vertical .navbar-nav,
.portal-v2 .navbar-vertical .nav-item { min-width: 0; max-width: 100%; }
.portal-v2 .navbar-vertical .nav-link { display: flex; align-items: center; white-space: normal !important; line-height: 1.3; padding-block: .45rem; }
.portal-v2 .navbar-vertical .nav-link .nav-link-icon { flex: 0 0 auto; }
.portal-v2 .navbar-vertical .nav-link .nav-link-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.portal-v2 .navbar-vertical .nav-link.dropdown-toggle::after { flex: 0 0 auto; position: static !important; margin-inline-start: .5rem; }
.portal-v2 .navbar-vertical .nav-link .badge { flex: 0 0 auto; }
.portal-v2 .navbar-vertical .dropdown-menu .dropdown-item { white-space: normal; line-height: 1.3; padding-block: .45rem; }

/* ---------- top bar ---------- */
.portal-v2 header.navbar:not(.navbar-vertical) {
  background: color-mix(in srgb, var(--tl-paper) 92%, transparent) !important;
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--tl-line);
  box-shadow: none;
  min-height: 3.75rem;
}
.portal-v2 header.navbar .nav-link { color: var(--tl-ink); border-radius: 6px; }
.portal-v2 header.navbar .nav-link:hover { background: var(--tl-panel-2); }
.portal-v2 .avatar { background-color: var(--tl-panel-2); color: var(--tl-brand); border-radius: 5px; }
.portal-v2 .portal-user-name { font-weight: 600; color: var(--tl-ink); }
.portal-v2 .portal-user-role { font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tl-muted) !important; }

/* ---------- page header ---------- */
.portal-v2 .page-header { padding-block: 1.6rem 1.2rem; margin-bottom: .5rem; }
.portal-v2 .page-header > .container-fluid,
.portal-v2 .page-header > .container-xl { border-bottom: 1px solid var(--tl-ink); padding-bottom: 1rem; }
.portal-v2 .page-pretitle { font-family: var(--tl-mono); font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--tl-muted); }
html[dir="rtl"] .portal-v2 .page-pretitle { font-family: var(--tl-arabic); letter-spacing: 0; font-size: 12px; }
.portal-v2 .page-title { font-family: var(--tl-serif); font-weight: 600; font-size: clamp(1.6rem, 2.2vw, 2.1rem); letter-spacing: -.012em; color: var(--tl-ink); }
html[dir="rtl"] .portal-v2 .page-title { font-family: var(--tl-arabic); letter-spacing: 0; }

/* ---------- cards ---------- */
.portal-v2 .card { background: var(--tl-panel); border: 1px solid var(--tl-line); border-radius: 8px; box-shadow: none; }
.portal-v2 .card-header { background: transparent; border-bottom: 1px solid var(--tl-line-2); min-height: 3.25rem; }
.portal-v2 .card-title { font-weight: 600; font-size: 15px; color: var(--tl-ink); }
.portal-v2 .card-title > .ti { color: var(--tl-muted); }
.portal-v2 .card-footer { background: transparent; border-top-color: var(--tl-line-2); }
.portal-v2 a.card:hover { border-color: color-mix(in srgb, var(--tl-brand) 45%, var(--tl-line)); }

/* ---------- buttons ---------- */
.portal-v2 .btn { border-radius: 6px; font-weight: 600; box-shadow: none; }
.portal-v2 .btn-primary {
  --tblr-btn-bg: var(--tl-brand); --tblr-btn-border-color: var(--tl-brand); --tblr-btn-color: #fff;
  --tblr-btn-hover-bg: var(--tl-brand-press); --tblr-btn-hover-border-color: var(--tl-brand-press); --tblr-btn-hover-color: #fff;
  --tblr-btn-active-bg: var(--tl-brand-press); --tblr-btn-active-border-color: var(--tl-brand-press);
  --tblr-btn-disabled-bg: var(--tl-brand); --tblr-btn-disabled-border-color: var(--tl-brand);
}
.portal-v2 .btn-outline-primary {
  --tblr-btn-color: var(--tl-brand); --tblr-btn-border-color: var(--tl-brand);
  --tblr-btn-hover-bg: var(--tl-brand); --tblr-btn-hover-border-color: var(--tl-brand); --tblr-btn-hover-color: #fff;
  --tblr-btn-active-bg: var(--tl-brand-press); --tblr-btn-active-border-color: var(--tl-brand-press);
}
.portal-v2 .btn-white, .portal-v2 .btn-outline-secondary, .portal-v2 .btn-default {
  --tblr-btn-bg: var(--tl-panel); --tblr-btn-color: var(--tl-ink); --tblr-btn-border-color: var(--tl-line);
  --tblr-btn-hover-bg: var(--tl-panel); --tblr-btn-hover-color: var(--tl-ink); --tblr-btn-hover-border-color: var(--tl-ink);
}
.portal-v2 .btn-danger { --tblr-btn-bg: var(--tl-danger); --tblr-btn-border-color: var(--tl-danger); --tblr-btn-hover-bg: #9E2C22; --tblr-btn-hover-border-color: #9E2C22; }
.portal-v2 .btn-success { --tblr-btn-bg: var(--tl-green); --tblr-btn-border-color: var(--tl-green); --tblr-btn-hover-bg: #1B5F2D; --tblr-btn-hover-border-color: #1B5F2D; }

/* ---------- forms ---------- */
.portal-v2 .form-control, .portal-v2 .form-select, .portal-v2 .ts-control {
  background-color: var(--tl-panel); border-color: var(--tl-line); border-radius: 6px; color: var(--tl-ink); box-shadow: none;
}
.portal-v2 .form-control:focus, .portal-v2 .form-select:focus, .portal-v2 .ts-wrapper.focus .ts-control {
  border-color: var(--tl-brand); box-shadow: var(--tl-ring);
}
.portal-v2 .form-control::placeholder { color: var(--tl-muted-2); }
.portal-v2 .form-label { font-weight: 600; font-size: 13.5px; color: var(--tl-ink); }
.portal-v2 .form-hint, .portal-v2 .text-secondary, .portal-v2 .text-muted { color: var(--tl-muted) !important; }
.portal-v2 .form-check-input:checked { background-color: var(--tl-brand); border-color: var(--tl-brand); }
.portal-v2 .form-switch .form-check-input:checked { background-color: var(--tl-brand); }
.portal-v2 .is-invalid, .portal-v2 .form-control.is-invalid { border-color: var(--tl-danger) !important; }
.portal-v2 .invalid-feedback, .portal-v2 .text-danger { color: var(--tl-danger) !important; }
.portal-v2 .input-group-text { background: var(--tl-panel-2); border-color: var(--tl-line); color: var(--tl-muted); }

/* ---------- tables ---------- */
.portal-v2 .table { --tblr-table-bg: transparent; --tblr-table-striped-bg: rgba(243,244,246,.6); --tblr-table-hover-bg: rgba(223,240,228, .55); color: var(--tl-ink); border-color: var(--tl-line-2); }
.portal-v2 .table thead th, .portal-v2 .bootstrap-table .fixed-table-container thead th {
  background: var(--tl-panel) !important;
  font-family: var(--tl-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tl-muted) !important; border-bottom: 1px solid var(--tl-ink) !important;
}
html[dir="rtl"] .portal-v2 .table thead th { font-family: var(--tl-arabic); letter-spacing: 0; font-size: 12px; }
.portal-v2 .table td { border-color: var(--tl-line-2); vertical-align: middle; }
.portal-v2 .bootstrap-table .fixed-table-container { border-color: var(--tl-line) !important; border-radius: 6px; }
.portal-v2 .bootstrap-table .fixed-table-toolbar .btn { --tblr-btn-bg: var(--tl-panel); --tblr-btn-border-color: var(--tl-line); color: var(--tl-ink); }
/* Pagination: one compact treatment (brand-green current page) shared by bootstrap-table and server-side pagers. */
.portal-v2 .pagination { gap: 4px; margin: 0; flex-wrap: wrap; }
.portal-v2 .fixed-table-pagination .page-link, .portal-v2 .pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 .55rem; border-radius: 6px; border: 1px solid var(--tl-line); background: var(--tl-panel); color: var(--tl-ink); font-family: var(--tl-mono); font-size: 12.5px; line-height: 1; box-shadow: none; }
.portal-v2 .pagination .page-item { margin: 0; }
.portal-v2 .pagination .page-link:hover { background: var(--tl-brand-soft); border-color: var(--tl-brand); color: var(--tl-brand-press); }
.portal-v2 .pagination .page-link:focus-visible { outline: 2px solid var(--tl-brand); outline-offset: 2px; box-shadow: none; z-index: 3; }
.portal-v2 .page-item.active .page-link, .portal-v2 .page-item.active .page-link:hover { background: var(--tl-brand-fill); border-color: var(--tl-brand-fill); color: #fff; font-weight: 650; }
.portal-v2 .page-item.disabled .page-link { background: var(--tl-panel); border-color: var(--tl-line-2); color: var(--tl-muted-2); opacity: .6; pointer-events: none; }
html[dir="rtl"] .portal-v2 .pagination .page-link :is(.fa-arrow-left, .fa-arrow-right, .uil-arrow-left, .uil-arrow-right, .ti-chevron-left, .ti-chevron-right) { transform: scaleX(-1); }

/* ---------- badges, alerts, nav pills ---------- */
.portal-v2 .badge { border-radius: 3px; font-weight: 500; letter-spacing: .01em; }
.portal-v2 .alert { border-radius: 8px; border: 1px solid var(--tl-line); background: var(--tl-panel); box-shadow: none; }
.portal-v2 .nav-pills .nav-link { border-radius: 5px; color: var(--tl-muted); font-weight: 500; }
.portal-v2 .nav-pills .nav-link.active { background: var(--tl-ink); color: var(--tl-paper); }
.portal-v2 .nav-tabs .nav-link.active { border-bottom-color: var(--tl-brand); color: var(--tl-ink); }
.portal-v2 .dropdown-menu { border-color: var(--tl-line); border-radius: 8px; box-shadow: var(--tblr-box-shadow); background: var(--tl-panel); }
.portal-v2 .dropdown-item.active, .portal-v2 .dropdown-item:active { background: var(--tl-brand-soft); color: var(--tl-brand); }
.portal-v2 .modal-content { border: 1px solid var(--tl-line); border-radius: 10px; }
.portal-v2 .modal-header { border-bottom-color: var(--tl-line-2); }
.portal-v2 .modal-title { font-family: var(--tl-serif); font-weight: 600; font-size: 1.2rem; }
html[dir="rtl"] .portal-v2 .modal-title { font-family: var(--tl-arabic); }

/* ---------- footer ---------- */
.portal-v2 .portal-footer { border-top: 1px solid var(--tl-line); background: transparent; color: var(--tl-muted); font-size: 12.5px; }

/* ---------- loading overlay ---------- */
.portal-v2 #loading { background: rgba(255,255,255,.75); }
.portal-v2 .spinner-border.text-primary { color: var(--tl-brand) !important; }

/* ---------- supplier dashboard ("trade desk") ---------- */
.trade-desk .desk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.trade-desk .desk-title { font-size: 15px; font-weight: 600; margin: 0; }
.trade-desk .desk-link { font-size: 13px; font-weight: 600; color: var(--tl-brand); text-decoration: none; display: inline-flex; align-items: center; }
html[dir="rtl"] .trade-desk .desk-link .ti, html[dir="rtl"] .trade-desk .alert a .ti { transform: scaleX(-1); }
.trade-desk .desk-pipeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; background: var(--tl-panel); border: 1px solid var(--tl-line); border-radius: 8px; overflow: hidden; }
.trade-desk .desk-pipeline li { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon count" "label label"; align-items: center; column-gap: .6rem; row-gap: .35rem; padding: 1rem 1.1rem; border-inline-start: 1px solid var(--tl-line-2); }
.trade-desk .desk-pipeline li:first-child { border-inline-start: 0; }
.trade-desk .desk-pipeline li.is-open:not(:nth-child(3))::after { content: ""; position: absolute; top: 50%; inset-inline-end: -6px; width: 11px; height: 11px; background: var(--tl-panel); border-top: 1px solid var(--tl-line); border-right: 1px solid var(--tl-line); transform: translateY(-50%) rotate(45deg); z-index: 1; }
html[dir="rtl"] .trade-desk .desk-pipeline li.is-open:not(:nth-child(3))::after { transform: translateY(-50%) rotate(-135deg); }
.trade-desk .desk-pipeline li.is-closed { background: var(--tl-paper); }
.trade-desk .desk-pipeline__icon { grid-area: icon; width: 32px; height: 32px; border-radius: 5px; display: grid; place-items: center; background: var(--tl-brand-soft); color: var(--tl-brand); font-size: 17px; }
.trade-desk .is-done .desk-pipeline__icon { background: var(--tl-accent); color: var(--tl-accent-ink); }
.trade-desk .is-closed .desk-pipeline__icon { background: var(--tl-panel-2); color: var(--tl-muted); }
.trade-desk .desk-pipeline__count { grid-area: count; font-family: var(--tl-serif); font-weight: 600; font-size: 1.75rem; line-height: 1; text-align: end; font-variant-numeric: tabular-nums; }
.trade-desk .desk-pipeline__label { grid-area: label; font-size: 12.5px; color: var(--tl-muted); font-weight: 500; }
.trade-desk .desk-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--tl-line); border-radius: 8px; background: var(--tl-panel); overflow: hidden; }
.trade-desk .desk-figure { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.25rem; color: var(--tl-ink); text-decoration: none; border-inline-start: 1px solid var(--tl-line-2); transition: background .15s; }
.trade-desk .desk-figure:first-child { border-inline-start: 0; }
.trade-desk a.desk-figure:hover { background: var(--tl-paper); color: var(--tl-ink); }
.trade-desk .desk-figure__label { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-muted); }
html[dir="rtl"] .trade-desk .desk-figure__label { font-family: var(--tl-arabic); letter-spacing: 0; font-size: 12px; }
.trade-desk .desk-figure__label .ti { font-size: 15px; }
.trade-desk .desk-figure__value { font-family: var(--tl-serif); font-weight: 600; font-size: 2.25rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.trade-desk .desk-figure__value small { font-size: 1rem; color: var(--tl-muted); font-family: var(--tl-sans); margin-inline-start: 2px; }
.trade-desk .desk-figure__note { font-size: 12.5px; color: var(--tl-muted); }
.trade-desk .desk-alert { display: block; border-inline-start-width: 3px; }
.trade-desk .desk-alert .alert-title { font-size: 15px; font-weight: 600; margin-bottom: .2rem; color: var(--tl-ink); }
.trade-desk .desk-alert--danger { border-inline-start-color: var(--tl-danger); }
.trade-desk .desk-alert--danger > .d-flex > .ti, .trade-desk .desk-alert--danger a { color: var(--tl-danger); }
.trade-desk .desk-alert--warning { border-inline-start-color: var(--tl-olive); }
.trade-desk .desk-alert--warning > .d-flex > .ti, .trade-desk .desk-alert--warning a { color: var(--tl-olive); }
.trade-desk .desk-list { list-style: none; margin: 0; padding: 0; }
.trade-desk .desk-list li { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.25rem; border-top: 1px solid var(--tl-line-2); }
.trade-desk .desk-list li:first-child { border-top: 0; }
.trade-desk .desk-list__icon { width: 30px; height: 30px; border-radius: 5px; background: var(--tl-panel-2); color: var(--tl-muted); display: grid; place-items: center; }
.trade-desk .desk-list__label { flex: 1; font-size: 13.5px; }
.trade-desk .desk-list__value { font-family: var(--tl-mono); font-weight: 500; font-size: 14px; }
.portal-v2 .seller-quick-actions .btn { height: 44px; }
@media (max-width: 1199.98px) {
  .trade-desk .desk-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trade-desk .desk-pipeline li:nth-child(4) { border-inline-start: 0; }
  .trade-desk .desk-pipeline li:nth-child(n+4) { border-top: 1px solid var(--tl-line-2); }
  .trade-desk .desk-pipeline li.is-open::after { display: none; }
}
@media (max-width: 767.98px) {
  .trade-desk .desk-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade-desk .desk-pipeline li { border-inline-start: 0; border-top: 1px solid var(--tl-line-2); }
  .trade-desk .desk-pipeline li:nth-child(even) { border-inline-start: 1px solid var(--tl-line-2); }
  .trade-desk .desk-pipeline li:nth-child(-n+2) { border-top: 0; }
  .trade-desk .desk-figures { grid-template-columns: 1fr; }
  .trade-desk .desk-figure { border-inline-start: 0; border-top: 1px solid var(--tl-line-2); }
  .trade-desk .desk-figure:first-child { border-top: 0; }
}

/* ---------- sign-in / registration pages ---------- */
.portal-v2 .page-center {
  background-color: var(--tl-paper);
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(26,33,28, .025) 31px 32px);
}
.portal-v2 .page-center .card-md { border-top: 3px solid var(--tl-brand); }
.portal-v2 .page-center .card-md h1.h2 { font-family: var(--tl-serif); font-weight: 600; font-size: 1.6rem; }
html[dir="rtl"] .portal-v2 .page-center .card-md h1.h2 { font-family: var(--tl-arabic); }
.portal-v2 .portal-login-intro { color: var(--tl-muted); font-size: 14px; text-align: center; margin: -0.75rem 0 1.5rem; }

/* secondary / table-toolbar buttons: neutral paper buttons instead of slate */
.portal-v2 .btn-secondary {
  --tblr-btn-bg: var(--tl-panel); --tblr-btn-color: var(--tl-ink); --tblr-btn-border-color: var(--tl-line);
  --tblr-btn-hover-bg: var(--tl-panel-2); --tblr-btn-hover-color: var(--tl-ink); --tblr-btn-hover-border-color: var(--tl-ink);
  --tblr-btn-active-bg: var(--tl-panel-2); --tblr-btn-active-color: var(--tl-ink); --tblr-btn-active-border-color: var(--tl-ink);
}
.portal-v2 .bootstrap-table .fixed-table-toolbar .btn-group > .btn,
.portal-v2 .bootstrap-table .fixed-table-toolbar .keep-open > .btn,
.portal-v2 .bootstrap-table .fixed-table-toolbar .export > .btn { background: var(--tl-panel) !important; border-color: var(--tl-line) !important; color: var(--tl-ink) !important; }
.portal-v2 .bootstrap-table .fixed-table-toolbar .btn:hover { border-color: var(--tl-ink) !important; }

/* page header actions drop under the title on narrow screens */
@media (max-width: 575.98px) {
  .portal-v2 .page-header .row > .col-auto { flex: 1 1 100%; margin-inline-start: 0 !important; }
  .portal-v2 .page-header .btn-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .portal-v2 .page-header .btn-list .btn { width: 100%; }
}

/* Arabic: email/tel/url inputs are forced LTR by Bootstrap, which pushes the placeholder hint to the wrong side. Empty = RTL hint; typed values stay LTR. */
html[dir="rtl"] .portal-v2 input:is([type="email"], [type="tel"], [type="url"]) { text-align: right; }
html[dir="rtl"] .portal-v2 input:is([type="email"], [type="tel"], [type="url"]):placeholder-shown { direction: rtl; }

/* ---------- portal sign-in: full-page screen (matches the storefront sign-in), no boxed card ---------- */
.portal-v2 .page-center{background:#FFFFFF!important;background-image:none!important;min-height:100vh}
.portal-v2 .page-center .container{max-width:480px}
.portal-v2 .page-center .login-logo,.portal-v2 .page-center .text-center.mb-4{text-align:start!important;margin-bottom:34px!important}
.portal-v2 .page-center .login-logo .portal-brand__mono{width:40px;height:40px}
.portal-v2 .page-center .card-md{border:0!important;border-top:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important}
.portal-v2 .page-center .card-md .card-body{padding:0!important}
.portal-v2 .page-center .card-md h1.h2,.portal-v2 .page-center .card-md .h2{text-align:start!important;font-size:clamp(28px,4vw,38px)!important;font-weight:700;margin-bottom:8px!important}
.portal-v2 .page-center .portal-login-intro{text-align:start;margin:0 0 28px}
.portal-v2 .page-center .form-control{height:54px;border-radius:12px}
.portal-v2 .page-center .btn-primary{height:54px;border-radius:12px;font-size:15px}
.portal-v2 .page-center .card-md~.text-center{text-align:start!important}
.portal-v2 .portal-home-link{position:fixed;top:14px;inset-inline-start:14px;z-index:5}
.portal-v2 .page-center .card-md h1.h2{margin-bottom:12px!important}
.portal-v2 .page-center .portal-login-intro{margin:0 0 30px!important}
.portal-v2 .page-center .card-md .text-center,.portal-v2 .page-center .text-secondary.mt-3{text-align:start!important}

/* sign-in: identical composition to the storefront screen — centred column, same sizes, corner button */
.portal-v2 .page.page-center{display:flex!important;align-items:center;justify-content:center;min-height:100vh;padding:48px 0}
.portal-v2 .page-center .container{width:min(460px,92vw);max-width:460px;padding:0}
.portal-v2 .page-center .form-control,.portal-v2 .page-center .btn-primary{height:56px}
.portal-v2 .page-center .btn-primary{height:54px}
.portal-v2 .page-center .card-md h1.h2{font-size:clamp(28px,4vw,38px)!important;margin-bottom:8px!important}
.portal-v2 .portal-home-link{top:22px;inset-inline-start:auto;inset-inline-end:26px;width:auto;height:44px;border-radius:999px;border:1px solid #B8BEC9;background:#fff;color:#0B1220;display:inline-flex;align-items:center;margin:0!important}
.portal-v2 .portal-home-link:hover{background:#f3f4f6}

/* supplier registration: same screen language as sign-in, with a wider column for its multi-step form */
.portal-v2 .seller-registration-auth{align-items:flex-start!important}
.portal-v2 .seller-registration-auth .seller-registration-container{width:min(760px,94vw);max-width:760px}
.portal-v2 .seller-registration-auth .card-md{border:0!important;box-shadow:none!important;background:transparent!important}
.portal-v2 .seller-registration-auth .card-body{padding:0!important}
.portal-v2 .seller-registration-auth .form-control,.portal-v2 .seller-registration-auth .form-select{height:54px;border-radius:12px}
.portal-v2 .seller-registration-auth textarea.form-control{height:auto}
.portal-v2 .seller-registration-auth .card-body .text-center{text-align:start!important}
.portal-v2 .seller-registration-auth .btn-primary{height:54px;border-radius:12px}
.portal-v2 .seller-registration-auth .btn:not(.btn-primary):not(.btn-ghost-secondary){border-radius:12px;height:54px}

/* sign-in corner controls: Back on the start side, Language on the end side (they were overlapping) */
.portal-v2 .portal-home-link{inset-inline-start:26px!important;inset-inline-end:auto!important;top:22px!important;height:44px}
.portal-v2 .page-center .language-menu{top:12px!important;inset-inline-end:14px!important;z-index:6}
.portal-v2 .page-center .card-md h1.h2{margin-bottom:14px!important;line-height:1.15}
.portal-v2 .page-center .portal-login-intro{margin:0 0 32px!important;line-height:1.5}
.portal-v2 .page.page-center{padding:96px 0 48px}

/* ---------- checkbox rows: box sits right next to its label (fixes the huge gap in RTL), day toggles, tidy coverage list ---------- */
.portal-v2 label.form-check{display:flex;align-items:center;gap:10px;padding:0;margin-bottom:4px;min-height:0;cursor:pointer}
.portal-v2 label.form-check .form-check-input{float:none;margin:0;flex-shrink:0;width:1.15rem;height:1.15rem}
.portal-v2 label.form-check .form-check-label{margin:0;line-height:1.4}
.portal-v2 .d-flex.flex-wrap.gap-3>label.form-check{border:1px solid var(--tl-line);border-radius:999px;padding:8px 16px;margin:0;transition:border-color .15s,box-shadow .15s}
.portal-v2 .d-flex.flex-wrap.gap-3>label.form-check:hover{border-color:var(--tl-ink)}
.portal-v2 .d-flex.flex-wrap.gap-3>label.form-check:has(:checked){border-color:var(--tl-brand);box-shadow:inset 0 0 0 1px var(--tl-brand);font-weight:600}
.portal-v2 .mb-2>label.form-check.mb-1{padding:8px 0;border-bottom:1px solid var(--tl-line-2);margin-bottom:6px!important}
.portal-v2 .mb-2>label.form-check.ms-4{padding:5px 0;margin-inline-start:1.75rem!important}
.portal-v2 .mb-2>label.form-check.ms-4:hover .form-check-label{color:var(--tl-brand)}
.portal-v2 .row.g-3{align-items:flex-end}
.portal-v2 .row.g-3>[class*="col-"]>.form-label{display:block;min-height:2.7em}

/* ---------- Notiflix confirm dialogs: brand-green confirm, quiet outlined cancel (overrides per-call inline colours) ---------- */
[id^="NotiflixConfirmWrap"] .notiflix-confirm-buttons{display:flex;gap:10px}
[id^="NotiflixConfirmWrap"] .notiflix-confirm-buttons>a{flex:1;width:auto!important;margin:0!important;border-radius:var(--tblr-border-radius,6px)!important;font-weight:600;transition:background-color .15s,border-color .15s}
[id^="NotiflixConfirmWrap"] .notiflix-confirm-buttons>a.nx-confirm-button-ok{background:var(--tl-brand)!important;color:#fff!important;border:1px solid var(--tl-brand)}
[id^="NotiflixConfirmWrap"] .notiflix-confirm-buttons>a.nx-confirm-button-ok:hover{background:var(--tl-brand-press)!important;border-color:var(--tl-brand-press)}
[id^="NotiflixConfirmWrap"] .notiflix-confirm-buttons>a.nx-confirm-button-cancel{background:transparent!important;color:var(--tl-ink)!important;border:1px solid var(--tl-line)}
[id^="NotiflixConfirmWrap"] .notiflix-confirm-buttons>a.nx-confirm-button-cancel:hover{background:var(--tl-line-2)!important;border-color:var(--tl-muted-2)}
[id^="NotiflixConfirmWrap"] .notiflix-confirm-head h5{color:var(--tl-ink)!important}

/* Supplier registration: inline errors (text + "!" icon below the field) replace the field's built-in red X,
   which collided with the phone flag selector and the placeholder in RTL. */
.portal-v2 .seller-registration-auth .form-control.is-invalid{background-image:none;padding-inline-end:.75rem}
/* Phones: the corner controls (Back, theme, language) scroll away with the page instead of floating over the form */
@media (max-width:760px){
  .portal-v2 .portal-home-link,.portal-v2 .theme-toggle--floating,.portal-v2 .page-center .language-menu{position:absolute!important}
  .portal-v2 .portal-home-link{top:14px!important;inset-inline-start:14px!important;height:40px!important;font-size:13px;padding:0 14px}
  .portal-v2 .theme-toggle--floating{top:14px!important;bottom:auto!important;inset-inline-end:14px!important;inset-inline-start:auto!important}
  .portal-v2 .page-center .language-menu{top:62px!important;inset-inline-end:14px!important}
  .portal-v2 .page.page-center{padding-top:112px!important;min-height:100vh}
  .portal-v2 .seller-registration-auth{padding-top:112px!important}
}