/* =========================================================================
   Remibee — vendor dashboard.

   Dokan ships a blue-accented Bootstrap-3-era interface that shares nothing
   with the marketplace a seller just came from. This restyles every dashboard
   surface onto Remibee's tokens (warm charcoal + honey amber, Poppins, pill
   buttons) so the vendor area reads as one product with the storefront.

   Loaded only on Dokan pages — see remibee_enqueue_dashboard_styles().

   Principles applied throughout:
   - One 8px spacing scale. Every gap/padding is a multiple, so blocks line up
     across panels that Dokan authored independently.
   - One radius scale (10px controls / 14px cards) and one border colour.
   - Symmetry: paired columns share a width and a top edge; card grids stretch
     to equal height rather than staggering with content length.
   - Colour carries meaning, not decoration: amber = the primary action or the
     current location, and nothing else competes with it.
   ========================================================================= */

/* Dokan exposes these two as custom properties; setting them retints any Dokan
   component we don't style by hand. */
:root {
  --dokan-sidebar-background-color: var(--paper);
  --dokan-button-background-color: var(--amber);
}

.dokan-dashboard {
  --dash-gap: 24px;
  --dash-pad: 24px;
  --dash-radius: 14px;
  --dash-radius-sm: 10px;
  --dash-shadow: 0 1px 2px rgba(36, 33, 29, .04), 0 8px 24px rgba(36, 33, 29, .05);
}

.dokan-dashboard,
.dokan-dashboard input,
.dokan-dashboard select,
.dokan-dashboard textarea,
.dokan-dashboard button {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* The dashboard sits on the warm page tint so white cards read as raised. */
.dokan-dashboard .site-content,
body.dokan-dashboard { background: var(--warm); }

/* Storefront prints the page title above the dashboard; the sidebar already
   says where you are, so the duplicate heading is noise. */
.dokan-dashboard .entry-header .entry-title,
.dokan-dashboard .edit-link { display: none; }

/* Content pages are capped to a 68ch reading measure, which is right for prose
   and wrong for an application UI — it was squeezing the whole dashboard into
   683px of a 1064px column. The rule it overrides is
   `.page:not(.woocommerce-page) .entry-content` (three classes), so this needs
   to match that weight; it wins on order, being loaded after remibee.css. */
.page.dokan-dashboard .entry-content,
.dokan-dashboard .site-main .entry-content { max-width: none; width: 100%; }

/* -------------------------------------------------------------------------
   LAYOUT — a real two-column shell instead of floated .dokan-w* columns
   ------------------------------------------------------------------------- */
.dokan-dashboard .dokan-dashboard-wrap {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto 64px;
  padding: 8px 0 0;
  float: none;
  width: auto;
}

/* Dokan floats these; the grid owns placement now. */
.dokan-dashboard .dokan-dash-sidebar,
.dokan-dashboard .dokan-dashboard-content {
  float: none;
  width: auto;
  margin: 0;
}

/* -------------------------------------------------------------------------
   SIDEBAR — quiet card, amber marks only the current page
   ------------------------------------------------------------------------- */
.dokan-dashboard .dokan-dash-sidebar {
  position: sticky;
  top: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--dash-radius);
  box-shadow: var(--dash-shadow);
  overflow: hidden;
}

.dokan-dashboard .dokan-dashboard-menu {
  margin: 0;
  padding: 8px;
  list-style: none;
  background: transparent;
  border: none;
}

.dokan-dashboard .dokan-dashboard-menu li {
  margin: 0 0 2px;
  border: none;
  background: none;
  list-style: none;
}

.dokan-dashboard .dokan-dashboard-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--dash-radius-sm);
  color: var(--slate);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  border: none;
  background: none;
  transition: background-color .16s ease, color .16s ease;
}

/* Dokan hardcodes white sidebar text through a selector chain more specific than
   a plain override, so these colour declarations must carry !important or the
   nav renders white-on-white. (Carried over from the previous skin, where this
   was established the hard way.) */
.dokan-dashboard .dokan-dash-sidebar,
.dokan-dashboard .dokan-dash-sidebar a { color: var(--slate) !important; }
.dokan-dashboard .dokan-dash-sidebar a i { color: var(--mute) !important; }

.dokan-dashboard .dokan-dashboard-menu li a:hover {
  background: var(--warm);
  color: var(--ink) !important;
}

/* Current page: amber-soft pill + deep-amber type. The left rule gives the
   eye a single vertical anchor down the whole menu. */
.dokan-dashboard .dokan-dashboard-menu li.active > a,
.dokan-dashboard .dokan-dash-sidebar li.active > a {
  background: var(--amber-soft) !important;
  color: var(--amber-deep) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--amber-deep);
}
.dokan-dashboard .dokan-dash-sidebar li.active > a i,
.dokan-dashboard .dokan-dash-sidebar a:hover i { color: var(--amber-deep) !important; }

/* Dokan also paints the <li> itself (separate from the <a>) on hover/active, and
   draws a connector triangle via ::after — retint both so nothing of Dokan's own
   accent flashes through around the amber highlight. */
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover,
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active {
  background: transparent !important;
}
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active:after { display: none !important; }

.dokan-dashboard .dokan-dashboard-menu li a i,
.dokan-dashboard .dokan-dashboard-menu li a .dashicons {
  width: 18px;
  font-size: 15px;
  text-align: center;
  opacity: .75;
  flex: none;
}
.dokan-dashboard .dokan-dashboard-menu li.active > a i { opacity: 1; }

/* Sub-menus (Settings → Store / Payment) indent under their parent. */
.dokan-dashboard .dokan-dashboard-menu ul {
  margin: 2px 0 6px;
  padding: 0 0 0 12px;
  list-style: none;
  border-left: 1px solid var(--line);
  margin-left: 18px;
}
.dokan-dashboard .dokan-dashboard-menu ul li a { font-size: 13.5px; padding: 8px 12px; }

/* The icon row at the sidebar foot (visit store / profile / logout). */
.dokan-dashboard .dokan-common-links {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 4px 8px 8px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--line);
  background: none;
}
.dokan-dashboard .dokan-common-links li { margin: 0; }
.dokan-dashboard .dokan-common-links a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--dash-radius-sm);
  color: var(--mute);
  transition: background-color .16s ease, color .16s ease;
}
.dokan-dashboard .dokan-common-links a:hover { background: var(--warm); color: var(--ink); }

/* -------------------------------------------------------------------------
   CONTENT SHELL
   ------------------------------------------------------------------------- */
.dokan-dashboard .dokan-dashboard-content {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--dash-radius);
  box-shadow: var(--dash-shadow);
  padding: var(--dash-pad) 28px 28px;
  min-height: 480px;
}

.dokan-dashboard .dokan-dashboard-content > .dokan-dashboard-header,
.dokan-dashboard .dokan-dashboard-content > article > .dokan-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 var(--dash-gap);
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}

.dokan-dashboard .dokan-dashboard-content h1,
.dokan-dashboard .dokan-dashboard-content h2,
.dokan-dashboard .dokan-dashboard-header h1,
.dokan-dashboard .dokan-dashboard-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-wrap: balance;
}
.dokan-dashboard .dokan-dashboard-content h3 { font-size: 16px; font-weight: 600; color: var(--ink); }

.dokan-dashboard .dokan-dashboard-content p { color: var(--slate); line-height: 1.65; }

/* -------------------------------------------------------------------------
   PANELS / CARDS — equal height so a row never staggers
   ------------------------------------------------------------------------- */
.dokan-dashboard .dokan-panel,
.dokan-dashboard .dokan-panel-default {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--dash-radius);
  box-shadow: none;
  margin-bottom: var(--dash-gap);
  overflow: hidden;
}

.dokan-dashboard .dokan-panel-heading {
  padding: 14px 18px;
  background: var(--warm);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dokan-dashboard .dokan-panel-heading a { color: var(--amber-deep); text-decoration: none; }
.dokan-dashboard .dokan-panel-body { padding: 18px; color: var(--slate); }

/* Dokan's float grid, rebuilt as flex so paired panels share a top edge and
   stretch to the tallest — the single biggest source of visual raggedness. */
.dokan-dashboard .dokan-panel-inner-container,
.dokan-dashboard .dokan-dash-left,
.dokan-dashboard .dokan-dash-right { float: none; width: auto; }

.dokan-dashboard .dokan-dashboard-content .dokan-clearfix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dash-gap);
  align-items: stretch;
}
.dokan-dashboard .dokan-dashboard-content .dokan-clearfix::before,
.dokan-dashboard .dokan-dashboard-content .dokan-clearfix::after { display: none; }

.dokan-dashboard .dokan-dashboard-content .dokan-clearfix > [class*='dokan-w'] {
  float: none;
  margin: 0;
  padding: 0;
  flex: 1 1 320px;
  min-width: 0;
}
.dokan-dashboard .dokan-dashboard-content .dokan-clearfix > [class*='dokan-w'] > .dokan-panel { height: 100%; }

/* -------------------------------------------------------------------------
   BUTTONS — one pill system; amber is the primary and nothing else
   ------------------------------------------------------------------------- */
.dokan-dashboard .dokan-btn,
.dokan-dashboard button.dokan-btn,
.dokan-dashboard a.dokan-btn,
.dokan-dashboard input[type='submit'],
.dokan-dashboard .dokan-update-setting-top-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.dokan-dashboard .dokan-btn:hover,
.dokan-dashboard input[type='submit']:hover {
  background: var(--warm);
  border-color: var(--mute);
  transform: translateY(-1px);
}

/* Primary — Dokan's own accent becomes Remibee amber. Dokan hardcodes its colour
   as a literal (not via the custom property above) with high specificity, so the
   primary button needs !important to land. */
.dokan-dashboard .dokan-btn-theme,
.dokan-dashboard a.dokan-btn-theme,
.dokan-dashboard button.dokan-btn-theme,
.dokan-dashboard input[type='submit'].dokan-btn-theme,
.dokan-dashboard .dokan-update-setting-top-button {
  background-color: var(--amber) !important;
  border-color: var(--amber) !important;
  color: var(--ink) !important;
  font-weight: 600;
  text-shadow: none;
}
.dokan-dashboard .dokan-btn-theme:hover,
.dokan-dashboard .dokan-btn-theme:focus,
.dokan-dashboard .dokan-btn-theme:active,
.dokan-dashboard a.dokan-btn-theme:hover,
.dokan-dashboard input[type='submit'].dokan-btn-theme:hover,
.dokan-dashboard .dokan-update-setting-top-button:hover {
  background-color: var(--amber-deep) !important;
  border-color: var(--amber-deep) !important;
  color: #fff !important;
}

.dokan-dashboard .dokan-btn-danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.dokan-dashboard .dokan-btn-danger:hover { background: #8c1d17; border-color: #8c1d17; }
.dokan-dashboard .dokan-btn-sm { min-height: 34px; padding: 7px 15px; font-size: 13px; }

/* -------------------------------------------------------------------------
   FORMS — one field style everywhere, amber focus (never the browser blue)
   ------------------------------------------------------------------------- */
.dokan-dashboard .dokan-form-group { margin-bottom: 18px; }

.dokan-dashboard .dokan-form-group label,
.dokan-dashboard .dokan-control-label {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
}

.dokan-dashboard .dokan-form-control,
.dokan-dashboard input[type='text'],
.dokan-dashboard input[type='email'],
.dokan-dashboard input[type='url'],
.dokan-dashboard input[type='tel'],
.dokan-dashboard input[type='number'],
.dokan-dashboard input[type='password'],
.dokan-dashboard input[type='search'],
.dokan-dashboard input[type='date'],
.dokan-dashboard select,
.dokan-dashboard textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--dash-radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.dokan-dashboard textarea { min-height: 110px; padding: 12px 13px; resize: vertical; }

.dokan-dashboard .dokan-form-control:focus,
.dokan-dashboard input:focus,
.dokan-dashboard select:focus,
.dokan-dashboard textarea:focus {
  outline: none;
  border-color: var(--amber-deep);
  box-shadow: 0 0 0 3px var(--amber-soft);
}

.dokan-dashboard .help-block,
.dokan-dashboard .description { color: var(--mute); font-size: 12.5px; line-height: 1.5; margin-top: 5px; }

/* Horizontal settings form: label column and field column share one grid, so
   every row's field starts at the same x — Dokan's floats let them drift. */
@media (min-width: 992px) {
  /* DIRECT children only: Dokan nests .dokan-form-group inside .dokan-form-group
     (the Address row wraps Street/Street 2/City/ZIP sub-groups). Applying the
     label|field grid to those nested groups squeezed their labels into slivers
     that rendered one letter per line. */
  /* Something upstream centres the whole settings form; a form is left-read. */
  .dokan-dashboard .dokan-form-horizontal { text-align: left; }

  /* The KYB card is excluded — it keeps its own two-column field layout below,
     rather than being forced into the single label|field track. */
  .dokan-dashboard .dokan-form-horizontal > .dokan-form-group:not(.remibee-kyb-section) {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 8px 20px;
    align-items: start;
  }
  /* Dokan's groups don't share a child order (the avatar precedes its label), so
     grid auto-placement scattered items across columns. Pin placement instead of
     trusting DOM order: the label always occupies column 1 row 1; every other
     child stacks in column 2. */
  /* These placement rules exclude the KYB card (via :not) — it runs its own 2-column
     grid below, and a leaked `grid-column: 2` here previously pinned all its fields
     into a single column. */
  .dokan-dashboard .dokan-form-horizontal > .dokan-form-group:not(.remibee-kyb-section) > * { grid-column: 2; }
  .dokan-dashboard .dokan-form-horizontal > .dokan-form-group:not(.remibee-kyb-section) > label,
  .dokan-dashboard .dokan-form-horizontal > .dokan-form-group:not(.remibee-kyb-section) > .dokan-control-label {
    grid-column: 1;
    grid-row: 1;
    float: none;
    width: auto;
    padding-top: 11px;
    margin: 0;
    text-align: left;
  }
  .dokan-dashboard .dokan-form-horizontal > .dokan-form-group:not(.remibee-kyb-section) > [class*='dokan-w'] {
    float: none;
    width: auto;
    padding: 0;
    margin: 0;
  }
  /* Nested sub-groups stack label-over-field, and their labels size naturally. */
  .dokan-dashboard .dokan-form-horizontal .dokan-form-group .dokan-form-group {
    display: block;
    margin-bottom: 14px;
  }
  .dokan-dashboard .dokan-form-horizontal .dokan-form-group .dokan-form-group > label {
    display: inline-block;
    width: auto;
    padding: 0 0 6px;
    white-space: nowrap;
  }
  /* Dokan floats the City/ZIP pair inside the address block; contain the floats. */
  .dokan-dashboard .dokan-address-fields { display: flow-root; }
  .dokan-dashboard .dokan-address-fields .dokan-form-group.dokan-left {
    float: left;
    width: 48%;
  }
  .dokan-dashboard .dokan-address-fields .dokan-form-group.dokan-right-margin-30 { margin-right: 4%; }
}

/* -------------------------------------------------------------------------
   TABLES / LISTINGS
   ------------------------------------------------------------------------- */
.dokan-dashboard .dokan-dashboard-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--dash-radius);
  overflow: hidden;
  font-size: 14px;
}
.dokan-dashboard .dokan-dashboard-content thead th {
  padding: 12px 14px;
  background: var(--warm);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.dokan-dashboard .dokan-dashboard-content tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--slate);
  vertical-align: middle;
}
.dokan-dashboard .dokan-dashboard-content tbody tr:last-child td { border-bottom: none; }
.dokan-dashboard .dokan-dashboard-content tbody tr:hover td { background: var(--warm); }

/* Any table wider than its column scrolls in its own box, never the page. */
.dokan-dashboard .dokan-product-listing { overflow-x: auto; }

/* Dokan lays its toolbars out with floated .dokan-left / .dokan-right children and
   relies on clearing that doesn't survive a restyle: the orders filter row had
   collapsed to 20px while its floated contents ran 100px tall, so the results block
   rendered straight through it. `flow-root` establishes a block formatting context,
   which contains the floats with no effect on the children themselves. */
.dokan-dashboard .dokan-orders-area,
.dokan-dashboard .dokan-withdraw-area,
.dokan-dashboard .dokan-settings-area,
.dokan-dashboard .dokan-product-listing-area,
.dokan-dashboard .dokan-dashboard-content > article { display: flow-root; }

/* The filter toolbar itself reads better as a flex row: controls share a baseline
   and the action sits at the far end, instead of drifting on floats. */
.dokan-dashboard .dokan-order-filter-serach {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: var(--dash-gap);
}
.dokan-dashboard .dokan-order-filter-serach .dokan-left,
.dokan-dashboard .dokan-order-filter-serach .dokan-right {
  float: none;
  width: auto;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.dokan-dashboard .dokan-order-filter-serach .dokan-form-group { margin: 0; }

/* The filter inputs collapsed to ~104px on floats — give the text/date fields a
   usable min so the placeholder isn't clipped, while still wrapping on narrow. */
.dokan-dashboard .dokan-order-filter-serach input[type='text'],
.dokan-dashboard .dokan-order-filter-serach input[type='search'],
.dokan-dashboard .dokan-order-filter-serach .dokan-daterangepicker,
.dokan-dashboard .dokan-order-filter-serach .select2-container { min-width: 190px; }

/* Export is a utility, not the page's primary action — two amber buttons would
   dilute the "amber = the one primary action" rule. Render them as secondary. */
.dokan-dashboard .dokan-order-filter-serach input[name='dokan_order_export_all'].dokan-btn-theme,
.dokan-dashboard .dokan-order-filter-serach input[name='dokan_order_export_filtered'].dokan-btn-theme {
  background-color: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  font-weight: 500;
}
.dokan-dashboard .dokan-order-filter-serach input[name='dokan_order_export_all'].dokan-btn-theme:hover,
.dokan-dashboard .dokan-order-filter-serach input[name='dokan_order_export_filtered'].dokan-btn-theme:hover {
  background-color: var(--warm) !important;
  border-color: var(--mute) !important;
  color: var(--ink) !important;
}

/* Order-status tabs across the top (ul.order-statuses-filter.subsubsub): pill
   filters instead of Dokan's underlined links, active status carried in amber
   like the rest of the system. The active state lives on the <li>. */
.dokan-dashboard .dokan-orders-area ul.order-statuses-filter,
.dokan-dashboard .dokan-orders-area ul.subsubsub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.dokan-dashboard .dokan-orders-area ul.order-statuses-filter li { margin: 0; padding: 0; }
.dokan-dashboard .dokan-orders-area ul.order-statuses-filter li::after { content: none; }
.dokan-dashboard .dokan-orders-area ul.order-statuses-filter li a {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  color: var(--slate);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.dokan-dashboard .dokan-orders-area ul.order-statuses-filter li a:hover { background: var(--warm); color: var(--ink); }
.dokan-dashboard .dokan-orders-area ul.order-statuses-filter li.active a {
  background: var(--amber-soft);
  color: var(--amber-deep);
}
.dokan-dashboard .dokan-orders-area ul.order-statuses-filter li a .count { opacity: .7; }

/* Order status tabs across the top. */
.dokan-dashboard .dokan-orders-area ul.dokan-listing-filter-range,
.dokan-dashboard .dokan-orders-area .dokan-listing-filter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

/* -------------------------------------------------------------------------
   EMPTY STATES — centred, generous, and never a dead end
   ------------------------------------------------------------------------- */
/* Only the outer container is a card. `.dokan-blank-product-message` is on the
   heading elements *inside* it, so giving them the card treatment too produced a
   box nested in a box. */
.dokan-dashboard .dokan-dashboard-not-product-found,
.dokan-dashboard .remibee-inbox-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 56px 28px;
  background: var(--warm);
  border: 1px solid var(--line);
  border-radius: var(--dash-radius);
  text-align: center;
  color: var(--slate);
  font-size: 14.5px;
}

.dokan-dashboard .dokan-blank-product-message {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--ink);
  text-align: center;
}
.dokan-dashboard h4.dokan-blank-product-message { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.dokan-dashboard h2.dokan-blank-product-message { font-size: 14.5px; font-weight: 400; color: var(--slate); max-width: 46ch; line-height: 1.6; }

.dokan-dashboard .remibee-inbox-empty strong {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
}

/* Dokan's empty-state artwork is a mint-green SVG on a remote file we can't edit.
   A warm filter pulls it into the amber family so it stops fighting the palette. */
.dokan-dashboard .no-product-found-icon {
  width: 104px;
  height: auto;
  margin-bottom: 6px;
  filter: grayscale(1) sepia(1) saturate(1.8) hue-rotate(-6deg) opacity(.9);
}

.dokan-dashboard .dokan-add-product-link { margin-top: 10px; }

/* -------------------------------------------------------------------------
   NOTICES — match the storefront's warm accent bars
   ------------------------------------------------------------------------- */
.dokan-dashboard .dokan-alert,
.dokan-dashboard .dokan-error,
.dokan-dashboard .dokan-message,
.dokan-dashboard .dokan-info,
.dokan-dashboard .dokan-ajax-response .dokan-alert {
  margin: 0 0 var(--dash-gap);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--mute);
  border-radius: var(--dash-radius-sm);
  background: var(--warm);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  text-shadow: none;
  box-shadow: none;
}
/* Note: Dokan reuses `.dokan-error` for benign empty results ("No orders found"),
   not just failures — rendering those in alarm-red made a normal empty table look
   like something had gone wrong. Neutral by default; genuine failures still read
   as red through the danger/woocommerce-error classes below. */
.dokan-dashboard .dokan-error {
  border-left-color: var(--mute);
  text-align: center;
  color: var(--slate);
  padding: 32px 16px;
}
/* Dokan injects a red "×" marker via ::before on every .dokan-error, including the
   benign "No orders found" empty state — suppress it so an empty table doesn't look
   like a failure. Genuine errors below carry their own colour. */
.dokan-dashboard .dokan-error::before { display: none; content: none; }
.dokan-dashboard .dokan-error .dokan-close,
.dokan-dashboard .dokan-error .close { display: none; }

.dokan-dashboard .dokan-alert-danger,
.dokan-dashboard .woocommerce-error { border-left-color: #b3261e; }
.dokan-dashboard .dokan-message,
.dokan-dashboard .dokan-alert-success { border-left-color: #2f7a4d; }
.dokan-dashboard .dokan-info,
.dokan-dashboard .dokan-alert-info { border-left-color: var(--amber-deep); }

/* -------------------------------------------------------------------------
   STORE SETTINGS — banner / profile media
   ------------------------------------------------------------------------- */
.dokan-dashboard .dokan-banner,
.dokan-dashboard .dokan-banner-img {
  border-radius: var(--dash-radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.dokan-dashboard .dokan-store-settign-header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}
/* The "Update Settings" action sits in a floated <span.dokan-update-setting-top>
   inside the flex header. A float becomes a zero-basis flex item, shrinking the
   span to its content and clipping the button label. Neutralise the float and let
   it size to its button. */
.dokan-dashboard .dokan-dashboard-header .dokan-update-setting-top,
.dokan-dashboard .dokan-store-settign-header-wrap .dokan-right {
  float: none;
  width: auto;
  flex: none;
}

/* -------------------------------------------------------------------------
   QUOTE REQUESTS — Remibee's own endpoint, matched to the same system
   ------------------------------------------------------------------------- */
.dokan-dashboard .remibee-dokan-inbox .remibee-rfq-card,
.dokan-dashboard .remibee-dokan-inbox details {
  border: 1px solid var(--line);
  border-radius: var(--dash-radius);
  background: var(--paper);
  margin-bottom: 14px;
  overflow: hidden;
}
.dokan-dashboard .remibee-dokan-inbox summary {
  padding: 16px 18px;
  background: var(--warm);
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  list-style: none;
}
.dokan-dashboard .remibee-dokan-inbox summary::-webkit-details-marker { display: none; }
.dokan-dashboard .remibee-dokan-inbox details[open] summary { border-bottom: 1px solid var(--line); }
.dokan-dashboard .remibee-dokan-inbox form { padding: 18px; }

/* -------------------------------------------------------------------------
   RESPONSIVE — sidebar becomes a scrollable rail above the content
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .dokan-dashboard .dokan-dashboard-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-inline: 0;
  }
  /* Mobile menu: a clean full-width vertical list inside the sidebar card.
     Dokan's mobile CSS wraps the menu in a toggle container, forces the items to
     blocks, and clamps the sidebar height — which clipped an earlier horizontal
     rail to a thin sliver. Rather than fight that wrapper, embrace a stacked
     list (standard on a phone). !important is needed to beat Dokan's mobile
     height/overflow clamp; our selectors are equally or more specific so they win. */
  .dokan-dashboard .dokan-dash-sidebar {
    position: static;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  .dokan-dashboard .dokan-dash-sidebar .dokan-dashboard-menu {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* Dokan reserves 48px of top padding for its ☰ toggle via
     `.dokan-dashboard .dokan-dash-sidebar #dokan-navigation ul.dokan-dashboard-menu`
     (an ID selector, inside @media max-width:450px). We match that exact
     specificity so our !important wins and the gap is reclaimed. */
  .dokan-dashboard .dokan-dash-sidebar #dokan-navigation ul.dokan-dashboard-menu { padding: 8px !important; }
  /* Dokan's mobile menu is a checkbox+label (☰, id="mobile-menu-icon") toggle.
     We force the list open above, so the toggle is redundant. Dokan shows it via
     `#dokan-navigation #mobile-menu-icon` (two IDs) — match that to win. */
  .dokan-dashboard .dokan-dash-sidebar #dokan-navigation #mobile-menu-icon,
  .dokan-dashboard .dokan-dash-sidebar #dokan-navigation input[type='checkbox'] { display: none !important; }
  .dokan-dashboard .dokan-dashboard-menu::before,
  .dokan-dashboard .dokan-dashboard-menu::after { content: none !important; display: none !important; }
  .dokan-dashboard .dokan-dashboard-menu > li {
    display: block !important;
    width: auto !important;
    margin: 0 0 2px !important;
    float: none !important;
  }
  .dokan-dashboard .dokan-dashboard-menu > li > a { display: flex !important; width: auto !important; }
  /* Kill Dokan's mobile toggle bar / empty wrapper that pushed the list down. */
  .dokan-dashboard .dokan-dash-sidebar .dokan-dashboard-menu-btn,
  .dokan-dashboard .dokan-dash-sidebar .menu-toggler,
  .dokan-dashboard .dokan-dash-sidebar .dokan-menu-toggle { display: none !important; }
  .dokan-dashboard .dokan-common-links { display: flex; }
  .dokan-dashboard .dokan-dashboard-content { padding: 20px 18px 24px; }
}

@media (max-width: 575px) {
  .dokan-dashboard .dokan-dashboard-content { padding: 18px 14px 20px; border-radius: var(--dash-radius-sm); }
  .dokan-dashboard .dokan-dashboard-content .dokan-clearfix > [class*='dokan-w'] { flex-basis: 100%; }
  .dokan-dashboard .dokan-btn,
  .dokan-dashboard input[type='submit'] { width: 100%; }
  .dokan-dashboard .dokan-dashboard-content > .dokan-dashboard-header { align-items: flex-start; flex-direction: column; }

  /* Settings header stacks: title over a full-width action, so the "Update
     Settings" label can't be clipped by a shrunk floated button. */
  .dokan-dashboard .dokan-dashboard-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .dokan-dashboard .dokan-dashboard-header .dokan-update-setting-top { width: 100%; }
  .dokan-dashboard .dokan-update-setting-top-button { width: 100%; }
}

/* =========================================================================
   DOKAN BUG WORKAROUNDS — carried over from the previous skin. These fix
   defects in Dokan's own CSS, not styling preferences, so they stay even if
   the visual design above is reworked.
   ========================================================================= */

/* Dokan's hover-triggered submenu flyout (Settings → Store/Payment) is absolutely
   positioned and lands disconnected from the sidebar, overlapping the content to
   its right — it reads as a glitch. Clicking "Settings" still reveals the real
   Store/Payment links inline (a separate, non-absolute code path), so the flyout
   is disabled rather than chasing a fragile third-party positioning bug. */
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover:not(.active) ul.navigation-submenu { display: none !important; }
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover:not(.active).has-submenu:after { display: none !important; }
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover a i.menu-dropdown { display: inline-block !important; }

/* Dokan nests a second div also carrying .featured-image inside the outer
   .content-half-part.featured-image column. Its own `.featured-image { width:25% }`
   is a descendant selector, so it matches both and compounds to 25% of 25%
   (~6% of the form) — an internal Dokan bug. Cancel the compounding. */
.content-half-part.featured-image .featured-image { width: 100% !important; }

/* The "Add New Product" upload dropzone is a fixed 200x200 box in a column that is
   25% of the form width, so below ~800px it overflows sideways into the details
   column. Make it responsive, staying square. */
.product-edit-container .dokan-feat-image-upload {
  width: 100% !important;
  max-width: 200px;
  height: auto !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}

/* =========================================================================
   ANALYTICS OVERVIEW (Dokan's WooCommerce-style reports widget on /dashboard/)
   — retint Dokan's purple (#7047EB) that leaks onto the summary tiles and
   report links, and give the KPI tiles the same card language as the rest.
   ========================================================================= */
.dokan-dashboard .woocommerce-summary {
  border: 1px solid var(--line);
  border-radius: var(--dash-radius);
  overflow: hidden;
  background: var(--paper);
}
.dokan-dashboard .woocommerce-summary__item {
  color: var(--slate) !important;
  transition: background-color .16s ease;
}
.dokan-dashboard .woocommerce-summary__item:hover { background: var(--warm); }
.dokan-dashboard .woocommerce-summary__item.is-selected,
.dokan-dashboard .woocommerce-summary__item[aria-current='page'] {
  box-shadow: inset 0 -3px 0 var(--amber-deep);
}
.dokan-dashboard .woocommerce-summary__item-value,
.dokan-dashboard .woocommerce-summary__item-data { color: var(--ink) !important; }
.dokan-dashboard .woocommerce-summary__item-label { color: var(--slate) !important; }

/* Any remaining Dokan-purple link or delta in the analytics area → deep amber. */
.dokan-dashboard .dashboard-content-area a,
.dokan-dashboard .dashboard-content-area .woocommerce-summary__item-delta { color: var(--amber-deep); }
.dokan-dashboard .dashboard-content-area a:hover { color: var(--ink); }

/* The delta "pill" badges (0%) — neutral chip rather than coloured. */
.dokan-dashboard .woocommerce-summary__item-delta {
  background: var(--warm);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
}

/* Report action buttons (Dokan/WooCommerce admin primary) → amber. */
.dokan-dashboard .dashboard-content-area .components-button.is-primary {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: var(--ink) !important;
  box-shadow: none;
}
.dokan-dashboard .dashboard-content-area .components-button.is-primary:hover {
  background: var(--amber-deep) !important;
  border-color: var(--amber-deep) !important;
  color: #fff !important;
}

/* =========================================================================
   RETAIL CRUFT REMOVED FROM STORE SETTINGS
   Several Dokan store-settings fields are meaningless — or actively harmful —
   on an anonymous B2B marketplace, so they are hidden from the vendor form:

   - Store BANNER and PROFILE PICTURE: a seller could upload a branded logo,
     which would defeat the anonymity model. They serve no purpose either way,
     since anonymity.php redirects the public store page to the shop, so buyers
     never see a store banner/avatar at all.
   - "Show email address in store": contradicts the anonymity rule outright.
     anonymity.php already forces show_email off at the data source, so the
     checkbox was a silent no-op — a control that does nothing erodes trust.
   - "Store Schedule" (open/close hours): retail-shopfront furniture; Remibee
     buyers never visit a storefront with opening hours.

   NOTE: the legal business name the operator verifies against the VAT number is
   NOT this "Store Name" (which is pseudonymised for buyers). It is the
   "Registered legal entity name" in the Business verification section
   (verified-business.php), private to the operator.
   ========================================================================= */
.dokan-dashboard #dokan-banner-wrapper,
.dokan-dashboard .dokan-form-group:has(#dokan-profile-picture-wrapper),
.dokan-dashboard .dokan-form-group:has(input[name='setting_show_email']),
.dokan-dashboard .dokan-form-group.store-open-close-time,
.dokan-dashboard .dokan-form-group.store-open-close { display: none !important; }

/* =========================================================================
   BUSINESS VERIFICATION (KYB) — operator-only trust panel in store settings.
   Presented as its own card so it reads as separate from the public store
   fields. The legal entity name + VAT here are what the operator checks; they
   are required and never shown to buyers.
   ========================================================================= */
/* A 2-column grid rather than floats: floats mis-stacked the third field (Country)
   against the taller of the first two. Grid auto-placement drops it cleanly into the
   next row, bottom-left, regardless of how tall the entity field's note makes it. */
.dokan-dashboard .remibee-kyb-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  align-items: start;
  margin: 12px 0 24px;
  padding: 20px 22px;
  background: var(--warm);
  border: 1px solid var(--line);
  border-radius: var(--dash-radius);
}
.dokan-dashboard .remibee-kyb-section .dokan-w12 { grid-column: 1 / -1; width: auto; float: none; }
.dokan-dashboard .remibee-kyb-section .dokan-w6 { grid-column: auto; width: auto; float: none; margin: 0 0 16px; min-width: 0; }
.dokan-dashboard .remibee-kyb-heading { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--ink); }
.dokan-dashboard .remibee-kyb-help { margin: 0 0 16px; color: var(--slate); font-size: 13px; line-height: 1.55; }
.dokan-dashboard .remibee-kyb-approved { color: #2f7d4f; }
.dokan-dashboard .remibee-req { color: #b3261e; font-weight: 700; }
.dokan-dashboard .remibee-kyb-fieldnote { display: block; margin-top: 5px; color: var(--mute); font-size: 12px; line-height: 1.5; }

@media (max-width: 575px) {
  .dokan-dashboard .remibee-kyb-section { grid-template-columns: minmax(0, 1fr); }
}