/* ============================================================
   Delphi Marketplace — Design Tokens
   Phase 23 — single source of truth for colors, spacing,
   typography, radii, shadows, transitions, breakpoints.
   Existing :root vars in marketplace-v2.css are preserved for
   backwards compat; new variables are introduced here under
   predictable names (--t-*).
   ============================================================ */

:root {
  /* ── Base palette (canonical — replicated from marketplace-v2.css for standalone pages) ── */
  --brand: #1a56db;
  --primary-hover: #1341b0;
  --brand-600: #1341b0;
  --brand-400: #3b82f6;
  --brand-200: #93c5fd;
  --brand-50: #e8f0fd;
  --accent: #0ea5e9;
  --success: #059669;
  --success-50: #ecfdf5;
  --success-200: #a7f3d0;
  --success-600: #059669;
  --success-700: #047857;
  --brand-soft: rgba(37, 99, 235, 0.1);
  --error: #dc2626;
  --warning: #d97706;
  --surface: #ffffff;
  --surface-0: #f8fafc;
  --surface-1: #ffffff;
  --surface-alt: #f8fafc;
  --page-bg: #f1f5f9;
  --line: #e2e8f0;
  --border-strong: #cbd5e1;
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-mute: #64748b;

  /* ── Urgency palette (phase 49f) ──
     Binary signal for supplier order pipeline: "ok" (in SLA) vs "stuck"
     (past SLA in business days). Done/cancelled are terminal states.
     A yellow intermediate (--urgency-warn) is deliberately omitted for v1 —
     two states read faster. Reserve the slot for v2 if we ever need it.
  */
  --urgency-ok:          #1a56db; /* albastru — activă, în termen */
  --urgency-ok-soft:     #e8f0fd;
  --urgency-ok-border:   #93c5fd;
  --urgency-stuck:       #dc2626; /* roșu — depășită SLA */
  --urgency-stuck-soft:  #fef2f2;
  --urgency-stuck-border:#fca5a5;
  --urgency-done:        #059669; /* verde — finalizată */
  --urgency-done-soft:   #ecfdf5;
  --urgency-done-border: #6ee7b7;
  --urgency-cancelled:       #64748b; /* gri — anulată */
  --urgency-cancelled-soft:  #f1f5f9;
  --urgency-cancelled-border:#cbd5e1;
  /* --urgency-warn:     #d97706;  RESERVED v2 — galben intermediar */

  /* Legacy aliases (old names → canonical) for backwards compat */
  --primary: var(--brand);
  --primary-dark: var(--brand-600);
  --primary-light: var(--brand-50);
  --surface-2: var(--surface-alt);
  --border: var(--line);
  --text-1: var(--ink);
  --text-2: var(--ink-soft);
  --text-3: var(--ink-mute);

  /* ── Breakpoints (for reference in @media; JS may consume via getPropertyValue) ── */
  --bp-mobile:  600px;
  --bp-tablet:  900px;
  --bp-desktop: 1200px;

  /* ── Spacing scale ── */
  --t-space-0:  0;
  --t-space-1:  2px;
  --t-space-2:  4px;
  --t-space-3:  8px;
  --t-space-4:  12px;
  --t-space-5:  16px;
  --t-space-6:  24px;
  --t-space-7:  32px;
  --t-space-8:  48px;
  --t-space-9:  64px;

  /* ── Radii ── */
  --t-radius-xs:   4px;
  --t-radius-sm:   6px;
  --t-radius-md:   8px;
  --t-radius-lg:   12px;
  --t-radius-xl:   16px;
  --t-radius-2xl:  24px;
  --t-radius-full: 9999px;

  /* ── Typography scale (12 base, ~1.2 ratio) ── */
  --t-font-xs:   11px;   /* meta, labels mici */
  --t-font-sm:   12px;   /* secondary text */
  --t-font-md:   13px;   /* body default */
  --t-font-lg:   15px;   /* emphasized body */
  --t-font-xl:   17px;   /* subheading */
  --t-font-2xl:  20px;   /* h3/title */
  --t-font-3xl:  24px;   /* h2 */
  --t-font-4xl:  30px;   /* h1 */

  --t-font-weight-regular: 400;
  --t-font-weight-medium:  500;
  --t-font-weight-semibold: 600;
  --t-font-weight-bold:    700;
  --t-font-weight-black:   800;

  --t-line-height-tight:    1.2;
  --t-line-height-normal:   1.5;
  --t-line-height-relaxed:  1.7;

  /* ── Shadows (elevation scale) ── */
  --t-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --t-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --t-shadow-md: 0 4px 10px rgba(15, 23, 42, .08);
  --t-shadow-lg: 0 10px 25px rgba(15, 23, 42, .12);
  --t-shadow-xl: 0 20px 40px rgba(15, 23, 42, .16);

  /* ── Transitions ── */
  --t-transition-fast:   .15s ease;
  --t-transition-normal: .2s  ease;
  --t-transition-slow:   .3s  ease;

  /* ── Z-index stack ──
     Phase 49e QA fix: confirm/prompt dialogs must always win over any content
     surface. Supplier propose-editor uses z:1200, bottom nav z:1300, admin
     sidebar z:1100. Raised overlay/modal tokens above all of them. Toast and
     tooltip stay on top of everything.
  */
  --t-z-dropdown:    10;
  --t-z-sticky:      30;
  --t-z-drawer:      50;
  --t-z-overlay:   1500;
  --t-z-modal:     1510;
  --t-z-toast:    10000;
  --t-z-tooltip:  10100;

  /* ── Focus ring (WCAG 2.4.7-compliant) ── */
  --t-focus-ring-color: var(--brand);
  --t-focus-ring-width: 2px;
  --t-focus-ring-offset: 2px;

  /* ── Touch targets (mobile) ── */
  --t-touch-target-min: 44px;

  /* ── Semantic colors (extend existing palette, all WCAG AA compliant) ── */
  --t-color-success:         #166534;
  --t-color-success-light:   #dcfce7;
  --t-color-success-border:  #bbf7d0;

  --t-color-warning:         #854d0e;
  --t-color-warning-light:   #fef9c3;
  --t-color-warning-border:  #fef08a;

  --t-color-error:           #b91c1c;
  --t-color-error-light:     #fef2f2;
  --t-color-error-border:    #fecaca;

  --t-color-info:            #075985;
  --t-color-info-light:      #e0f2fe;
  --t-color-info-border:     #bae6fd;

  /* UX-094 (phase 66): neutral semantic tokens consumed by checkout + others.
     `--t-color-on-primary` = text/icon color laid over `--primary`/`--success`
     button surfaces. `--t-color-overlay` = modal/toast scrim. `--t-color-primary-ring`
     = focus-ring halo around primary controls. `--t-shadow-totals` = the soft
     top shadow above the sticky totals bar (checkout summary). */
  --t-color-on-primary:      #fff;
  --t-color-overlay:         rgba(0, 0, 0, 0.45);
  --t-color-primary-ring:    rgba(26, 86, 219, 0.12);
  --t-shadow-totals:         0 -8px 12px -8px rgba(15, 23, 42, 0.08);

  /* Heatmap empty-cell tint (used by .heatmap-month-cell in design-tokens.css itself
     and by supplier-shell.css). Defined here so the consuming selectors never rely
     on a var() fallback. */
  --hm-empty:                #ebedf0;

  /* UX-094 (phase 66): legacy aliases previously only kept alive via var()
     fallbacks. Defining them explicitly lets the fallback-stripping sweep
     finish without breaking consuming selectors. */
  --border-light: #f1f5f9;         /* thin separator for nested rows */
  --lh-normal:    1.5;             /* default line-height */
  --bg-2:         #f1f5f9;         /* subdued surface (readonly inputs) */
  --warn-bg:      var(--t-color-warning-light);
  --danger:       var(--error);    /* semantic alias for error actions */
  --danger-text:  var(--error);
  --accent-soft:  var(--brand-50);

  --t-color-neutral:         #475569;
  --t-color-neutral-light:   #f1f5f9;
  --t-color-neutral-border:  #e2e8f0;
}

/* ============================================================
   Global a11y + interaction defaults
   ============================================================ */

/* Focus-visible: apare doar la keyboard nav, nu la click cu mouse.
   UX-089 (phase 66): !important este NECESAR aici pentru a bate regulile
   care elimină outline-ul pe selectoare specifice (ex. `.search-wrap input`,
   `.form-group input`, shell inputs) care au specificitate mai mare decât
   `:focus-visible`. Fără !important, keyboard users pierdeau indicatorul de
   focus pe toate form controls. WCAG 2.4.7. */
:focus-visible {
  outline: var(--t-focus-ring-width) solid var(--t-focus-ring-color) !important;
  outline-offset: var(--t-focus-ring-offset) !important;
  border-radius: var(--t-radius-xs);
}

/* Butoane, inputs, selects: remove default outline doar când NU e focus-visible */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link — vizibil la focus pentru keyboard nav */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--brand);
  color: #fff;
  padding: var(--t-space-3) var(--t-space-5);
  z-index: var(--t-z-toast);
  text-decoration: none;
  border-radius: 0 0 var(--t-radius-md) 0;
  font-weight: var(--t-font-weight-semibold);
}
.skip-link:focus-visible {
  top: 0;
  outline: var(--t-focus-ring-width) solid #fff;
  outline-offset: -4px;
}

/* Reduced motion: dezactivează tranziții/animații pentru users sensibili */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Shared component styles
   ============================================================ */

/* --- ConfirmDialog / PromptDialog shared modal --- */
.ui-dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: var(--t-z-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--t-space-5);
  animation: uiDialogFadeIn var(--t-transition-fast);
}
.ui-dialog-overlay.open { display: flex; }

.ui-dialog {
  background: #fff;
  border-radius: var(--t-radius-lg);
  box-shadow: var(--t-shadow-xl);
  max-width: 440px;
  width: 100%;
  padding: var(--t-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--t-space-4);
  max-height: 90vh;
  overflow-y: auto;
  animation: uiDialogSlideIn var(--t-transition-normal);
}
.ui-dialog-title {
  font-size: var(--t-font-xl);
  font-weight: var(--t-font-weight-bold);
  color: var(--ink);
  margin: 0;
}
.ui-dialog-message {
  font-size: var(--t-font-md);
  color: var(--ink-soft);
  line-height: var(--t-line-height-normal);
  margin: 0;
}
.ui-dialog-details {
  background: var(--page-bg);
  border-radius: var(--t-radius-md);
  padding: var(--t-space-4);
  font-size: var(--t-font-sm);
  color: var(--ink-soft);
  max-height: 200px;
  overflow-y: auto;
}
.ui-dialog-details ul { margin: 0; padding-left: 18px; }
.ui-dialog-input {
  padding: var(--t-space-3) var(--t-space-4);
  border: 1px solid var(--line);
  border-radius: var(--t-radius-md);
  font-size: var(--t-font-md);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.ui-dialog-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, .15);
  outline: none;
}
.ui-dialog-type-confirm {
  font-size: var(--t-font-sm);
  color: var(--t-color-error);
  margin-top: -4px;
}
.ui-dialog-footer {
  display: flex;
  gap: var(--t-space-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.ui-dialog-footer .btn-secondary,
.ui-dialog-footer .btn-primary,
.ui-dialog-footer .btn-danger {
  min-height: var(--t-touch-target-min);
  min-width: 100px;
}
.btn-danger {
  padding: 9px 18px;
  border-radius: var(--t-radius-md);
  background: var(--t-color-error);
  color: #fff;
  border: 1.5px solid var(--t-color-error);
  font-weight: var(--t-font-weight-semibold);
  font-size: var(--t-font-md);
  cursor: pointer;
  transition: background var(--t-transition-fast);
}
.btn-danger:hover:not(:disabled) { background: #991b1b; }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }

@keyframes uiDialogFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes uiDialogSlideIn {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Loading button state --- */
.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .75;
}
.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: uiSpinner .7s linear infinite;
}
.is-loading > * { visibility: hidden; }
@keyframes uiSpinner {
  to { transform: rotate(360deg); }
}

/* --- Inline form validation --- */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--t-space-4);
}
.field-label {
  font-size: var(--t-font-sm);
  font-weight: var(--t-font-weight-semibold);
  color: var(--ink-soft);
}
.field-label .field-required {
  color: var(--t-color-error);
  margin-left: 2px;
}
.field-input {
  padding: var(--t-space-3) var(--t-space-4);
  border: 1px solid var(--line);
  border-radius: var(--t-radius-md);
  font-size: var(--t-font-md);
  font-family: inherit;
  background: #fff;
  transition: border-color var(--t-transition-fast), box-shadow var(--t-transition-fast);
}
.field-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, .12);
  outline: none;
}
.field.has-error .field-input {
  border-color: var(--t-color-error);
  background: var(--t-color-error-light);
}
.field.has-error .field-input:focus {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, .12);
}
.field-error {
  display: none;
  font-size: var(--t-font-xs);
  color: var(--t-color-error);
  line-height: 1.4;
  margin-top: 2px;
}
.field.has-error .field-error { display: block; }
/* Sprint 3 — extend to any input flagged aria-invalid, not just .field children */
[aria-invalid="true"].field-input,
[aria-invalid="true"].form-input,
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea,
input.field-input--invalid,
select.field-input--invalid,
textarea.field-input--invalid {
  border-color: var(--t-color-error);
}
[aria-invalid="true"].field-input:focus,
[aria-invalid="true"].form-input:focus,
.form-group.has-error input:focus,
.form-group.has-error select:focus,
.form-group.has-error textarea:focus,
input.field-input--invalid:focus,
select.field-input--invalid:focus,
textarea.field-input--invalid:focus {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, .15);
}
.form-group .field-error,
.form-field .field-error {
  display: none;
  font-size: var(--t-font-xs);
  color: var(--t-color-error);
  line-height: 1.4;
  margin-top: 2px;
}
.form-group.has-error .field-error,
.form-field.has-error .field-error { display: block; }
.form-summary-errors {
  background: var(--t-color-error-light);
  color: var(--t-color-error);
  border: 1px solid var(--t-color-error-border);
  padding: var(--t-space-3) var(--t-space-4);
  border-radius: var(--t-radius-sm);
  font-size: var(--t-font-sm);
  font-weight: var(--t-font-weight-semibold);
  margin-bottom: var(--t-space-4);
}
.required-mark {
  color: var(--t-color-error);
  margin-left: 2px;
}
.field-help {
  font-size: var(--t-font-xs);
  color: var(--ink-mute);
  line-height: 1.4;
}

/* --- Empty state component --- */
.empty-state-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--t-space-8) var(--t-space-5);
  text-align: center;
  color: var(--ink-mute);
  min-height: 240px;
}
.empty-state-v2-icon {
  width: 56px; height: 56px;
  margin-bottom: var(--t-space-4);
  color: var(--ink-mute);
  opacity: .6;
}
.empty-state-v2-title {
  font-size: var(--t-font-lg);
  font-weight: var(--t-font-weight-semibold);
  color: var(--ink);
  margin: 0 0 6px;
}
.empty-state-v2-message {
  font-size: var(--t-font-md);
  color: var(--ink-mute);
  max-width: 420px;
  line-height: var(--t-line-height-normal);
  margin: 0 0 var(--t-space-4);
}
.empty-state-v2-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--t-radius-md);
  text-decoration: none;
  font-weight: var(--t-font-weight-semibold);
  font-size: var(--t-font-md);
  border: none;
  cursor: pointer;
  min-height: var(--t-touch-target-min);
  transition: background var(--t-transition-fast);
}
.empty-state-v2-cta:hover { background: var(--brand-600); }
.empty-state-v2-cta.secondary {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.empty-state-v2-cta.secondary:hover {
  background: var(--brand-50);
}

/* --- Cart badge contrast fix (WCAG AA) --- */
.cart-badge {
  background: #b91c1c !important;
  color: #fff !important;
  font-weight: var(--t-font-weight-bold) !important;
}

/* --- Status messages contrast fix --- */
.portal-status.portal-status-success,
.ui-status-success {
  background: var(--t-color-success-light);
  color: var(--t-color-success);
  border: 1px solid var(--t-color-success-border);
}
.portal-status.portal-status-error,
.ui-status-error {
  background: var(--t-color-error-light);
  color: var(--t-color-error);
  border: 1px solid var(--t-color-error-border);
}

/* --- Listing status badges (replaces inline colors in supplier.js) --- */
.listing-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--t-radius-full);
  font-size: var(--t-font-xs);
  font-weight: var(--t-font-weight-semibold);
  gap: 4px;
  border: 1px solid transparent;
}
.listing-badge-active   { background: var(--t-color-success-light); color: var(--t-color-success); border-color: var(--t-color-success-border); }
.listing-badge-paused   { background: var(--t-color-warning-light); color: var(--t-color-warning); border-color: var(--t-color-warning-border); }
.listing-badge-pending  { background: var(--t-color-info-light);    color: var(--t-color-info);    border-color: var(--t-color-info-border); }
.listing-badge-rejected { background: var(--t-color-error-light);   color: var(--t-color-error);   border-color: var(--t-color-error-border); }

/* --- Admin pending badge (replaces inline style on adminPendingBadge) --- */
.ad-pending-badge {
  display: none;
  background: var(--t-color-error);
  color: #fff;
  font-size: var(--t-font-xs);
  font-weight: var(--t-font-weight-bold);
  padding: 2px 8px;
  border-radius: var(--t-radius-full);
  margin-left: 6px;
  min-width: 16px;
  text-align: center;
}
.ad-pending-badge.is-visible { display: inline-block; }

/* --- Cat/subcat items: reset native button styles when converted --- */
button.cat-item,
button.subcat-item {
  appearance: none;
  background: transparent;
  border: none;
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  color: inherit;
}
button.cat-item:disabled,
button.subcat-item:disabled { cursor: not-allowed; opacity: .5; }

/* --- Commission model radio cards (Furnizori modal) --- */
.cm-model-radio-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--t-space-3);
  margin-bottom: var(--t-space-5);
}
@media (max-width: 720px) {
  .cm-model-radio-group { grid-template-columns: 1fr; }
}
.cm-model-radio { cursor: pointer; margin: 0; }
.cm-model-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cm-radio-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--t-space-4);
  border: 1.5px solid var(--line);
  border-radius: var(--t-radius-md);
  background: var(--surface-1);
  transition: border-color var(--t-transition-fast), background var(--t-transition-fast), box-shadow var(--t-transition-fast);
  position: relative;
}
.cm-model-radio:hover .cm-radio-card {
  border-color: var(--brand);
}
.cm-model-radio input[type="radio"]:checked + .cm-radio-card,
.cm-radio-card.is-active {
  border-color: var(--brand);
  background: var(--brand-50);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, .12);
}
.cm-model-radio input[type="radio"]:checked + .cm-radio-card::after,
.cm-radio-card.is-active::after {
  content: "ACTIV";
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  font-weight: var(--t-font-weight-bold);
  letter-spacing: .5px;
  color: var(--brand);
  background: #fff;
  padding: 2px 6px;
  border-radius: var(--t-radius-full);
  border: 1px solid var(--brand);
}
.cm-model-radio input[type="radio"]:focus-visible + .cm-radio-card {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.cm-radio-title {
  font-size: var(--t-font-md);
  font-weight: var(--t-font-weight-bold);
  color: var(--ink);
}
.cm-model-radio input[type="radio"]:checked + .cm-radio-card .cm-radio-title,
.cm-radio-card.is-active .cm-radio-title {
  color: var(--brand);
}
.cm-radio-desc {
  font-size: var(--t-font-xs);
  color: var(--ink-mute);
  line-height: var(--t-line-height-normal);
}

/* --- Heatmap calendar (month view, compact — phase 28b) --- */
.heatmap-container {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--t-radius-md);
  padding: var(--t-space-4);
  margin-bottom: 0;
  height: 100%;
  box-sizing: border-box;
}
.heatmap-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--t-space-3);
  flex-wrap: wrap;
  gap: var(--t-space-3);
}
.heatmap-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.heatmap-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.heatmap-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.heatmap-title {
  font-size: var(--t-font-lg);
  font-weight: var(--t-font-weight-bold);
  color: var(--ink);
  line-height: 1.2;
}
.heatmap-title strong { color: var(--brand); font-weight: var(--t-font-weight-bold); }
.heatmap-subtitle {
  font-size: var(--t-font-xs);
  color: var(--ink-mute);
}
.heatmap-subtitle strong { color: var(--ink); font-weight: var(--t-font-weight-semibold); }
.heatmap-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.heatmap-nav-btn {
  width: 24px; height: 24px;
  border: 1px solid var(--line);
  border-radius: var(--t-radius-xs);
  background: var(--surface-1);
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--t-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.heatmap-nav-btn:hover { border-color: var(--brand); color: var(--brand); }
.heatmap-nav-select {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: var(--t-radius-xs);
  background: var(--surface-1);
  color: var(--ink-soft);
  font-size: var(--t-font-xs);
  font-family: inherit;
  cursor: pointer;
  min-height: 24px;
}

/* Month grid — compact, fixed-size columns so days align with cells */
.heatmap-month-grid { min-height: 140px; }
.heatmap-month-wrap { display: inline-flex; flex-direction: column; gap: 0; }
/* Unified single grid: weekday labels + day cells together */
.heatmap-month-grid-unified {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 3px;
}
.heatmap-week-label {
  text-align: center;
  font-size: 9px;
  font-weight: var(--t-font-weight-semibold);
  color: var(--ink-mute);
  letter-spacing: .3px;
  text-transform: uppercase;
  padding-bottom: 4px;
}
.heatmap-month-cell {
  aspect-ratio: 1 / 1;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  background: var(--hm-empty);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: outline var(--t-transition-fast), transform var(--t-transition-fast);
  position: relative;
}
.heatmap-month-cell:hover:not(.is-empty) {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  z-index: 1;
}
.heatmap-month-cell.is-empty { background: transparent; cursor: default; pointer-events: none; }
.heatmap-month-cell.is-future { opacity: .4; cursor: default; }
.heatmap-month-cell.is-today { outline: 2px solid var(--brand); outline-offset: 1px; }
.heatmap-month-cell.is-level-0 { background: var(--hm-empty); }
.heatmap-month-cell.is-level-1 { background: #c6d8f8; }
.heatmap-month-cell.is-level-2 { background: #7ea7ed; }
.heatmap-month-cell.is-level-3 { background: #3b76e0; color: #fff; }
.heatmap-month-cell.is-level-4 { background: #1a56db; color: #fff; }
.heatmap-month-day {
  font-size: 10px;
  font-weight: var(--t-font-weight-medium);
  color: var(--ink-soft);
  line-height: 1;
}
.heatmap-month-cell.is-level-3 .heatmap-month-day,
.heatmap-month-cell.is-level-4 .heatmap-month-day { color: #fff; }
.heatmap-month-val { display: none; }  /* compact: doar tooltip pe hover */

.heatmap-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--t-space-3);
  gap: var(--t-space-3);
  flex-wrap: wrap;
}
.heatmap-legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-font-xs);
  color: var(--ink-mute);
}
.heatmap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.heatmap-legend-cell {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--hm-empty);
}
.heatmap-legend-cell.is-level-1 { background: #c6d8f8; }
.heatmap-legend-cell.is-level-2 { background: #7ea7ed; }
.heatmap-legend-cell.is-level-3 { background: #3b76e0; }
.heatmap-legend-cell.is-level-4 { background: #1a56db; }
.heatmap-see-all {
  font-size: var(--t-font-sm);
  color: var(--brand);
  text-decoration: none;
  font-weight: var(--t-font-weight-semibold);
  cursor: pointer;
}
.heatmap-see-all:hover { text-decoration: underline; }

.heatmap-tooltip {
  position: fixed;
  padding: 5px 9px;
  background: #0f172a;
  color: #fff;
  font-size: var(--t-font-xs);
  border-radius: var(--t-radius-sm);
  pointer-events: none;
  white-space: nowrap;
  z-index: var(--t-z-tooltip);
  box-shadow: var(--t-shadow-md);
}

@media (max-width: 600px) {
  .heatmap-month-grid-unified { grid-template-columns: repeat(7, 28px); }
  .heatmap-month-cell { width: 28px; height: 28px; }
  .heatmap-container { max-width: 100%; }
}

/* --- Advanced options disclosure (Furnizori modal) --- */
.ad-advanced-details {
  margin-top: var(--t-space-5);
  border: 1px solid var(--line);
  border-radius: var(--t-radius-md);
  background: var(--surface-alt);
  overflow: hidden;
}
.ad-advanced-details > summary {
  list-style: none;
  padding: 10px 14px;
  font-size: var(--t-font-sm);
  font-weight: var(--t-font-weight-semibold);
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: background var(--t-transition-fast);
}
.ad-advanced-details > summary::-webkit-details-marker { display: none; }
.ad-advanced-details > summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--ink-mute);
  transition: transform var(--t-transition-fast);
  flex-shrink: 0;
}
.ad-advanced-details[open] > summary::before { transform: rotate(90deg); }
.ad-advanced-details > summary:hover { background: var(--page-bg); }
.ad-advanced-details > .ad-link-section {
  padding: 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-1);
}

/* --- Pe categorie display row (immutable, cu Șterge) --- */
.cm-tier-display-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--t-radius-md);
  background: var(--surface-1);
  margin-bottom: 6px;
  transition: border-color var(--t-transition-fast);
}
.cm-tier-display-row:hover { border-color: var(--brand); }
.cm-tier-display-type {
  font-size: var(--t-font-xs);
  font-weight: var(--t-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--brand);
  background: var(--brand-50);
  padding: 3px 8px;
  border-radius: var(--t-radius-full);
}
.cm-tier-display-target {
  font-size: var(--t-font-md);
  color: var(--ink);
  font-weight: var(--t-font-weight-semibold);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-tier-display-rate {
  font-size: var(--t-font-md);
  font-weight: var(--t-font-weight-bold);
  color: var(--ink);
  padding: 4px 10px;
  background: var(--page-bg);
  border-radius: var(--t-radius-sm);
  min-width: 60px;
  text-align: right;
}
.cm-tier-display-row .cm-tier-remove {
  width: 28px;
  height: 28px;
  border-radius: var(--t-radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-transition-fast);
}
.cm-tier-display-row .cm-tier-remove:hover {
  border-color: var(--t-color-error);
  color: var(--t-color-error);
  background: var(--t-color-error-light);
}

/* --- Staging form pentru adăugarea unui rând nou --- */
.cm-tier-staging {
  padding: 14px;
  border: 1.5px dashed var(--brand);
  border-radius: var(--t-radius-md);
  background: var(--brand-50);
  margin-bottom: 10px;
  animation: uiDialogFadeIn var(--t-transition-fast);
}
.cm-tier-staging[hidden] { display: none; }
.cm-tier-staging-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.cm-tier-staging-row select,
.cm-tier-staging-row input[type="number"],
.cm-tier-staging-row input[type="text"] {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--t-radius-sm);
  font-size: var(--t-font-sm);
  font-family: inherit;
  background: #fff;
  min-height: 36px;
}
.cm-tier-staging-row select { min-width: 160px; }
.cm-tier-staging-row input[type="text"] { min-width: 200px; }
.cm-tier-staging-row button { min-height: 36px; padding: 0 16px; font-size: var(--t-font-sm); }

/* --- Pe categorie tier row --- */
.cm-tier-multi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cm-tier-type {
  font-size: var(--t-font-sm);
  font-weight: var(--t-font-weight-semibold);
}
.cm-tier-product-wrap {
  position: relative;
}
.cm-tier-product-search {
  width: 100%;
  font-size: var(--t-font-sm);
}
.cm-tier-product-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 4px;
}
.cm-tier-product-results:empty { display: none; }
.cm-tier-product-pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--t-radius-sm);
  background: var(--surface-1);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.cm-tier-product-pick:hover { background: var(--brand-50); border-color: var(--brand); }
.cm-tier-product-sku {
  font-size: var(--t-font-xs);
  font-weight: var(--t-font-weight-bold);
  color: var(--ink-mute);
  letter-spacing: .3px;
}
.cm-tier-product-name {
  font-size: var(--t-font-sm);
  font-weight: var(--t-font-weight-semibold);
  color: var(--ink);
}
.cm-tier-product-meta {
  font-size: var(--t-font-xs);
  color: var(--ink-mute);
}
.cm-tier-product-empty {
  padding: 8px 10px;
  font-size: var(--t-font-xs);
  color: var(--ink-mute);
  font-style: italic;
}

/* --- Commission scope banner + section helpers --- */
.comm-scope-banner {
  padding: var(--t-space-4) var(--t-space-5);
  border-radius: var(--t-radius-md);
  background: var(--t-color-info-light);
  border: 1px solid var(--t-color-info-border);
  color: var(--t-color-info);
  margin-top: var(--t-space-3);
}
.comm-scope-banner.is-scoped {
  background: var(--brand-50);
  border-color: rgba(26, 86, 219, .2);
  color: var(--brand);
}
.comm-scope-banner-title {
  font-size: var(--t-font-lg);
  font-weight: var(--t-font-weight-bold);
  margin-bottom: 2px;
}
.comm-scope-banner-hint {
  font-size: var(--t-font-sm);
  opacity: .85;
}
.comm-subsection-title {
  margin-top: var(--t-space-6) !important;
  font-size: var(--t-font-md) !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink-soft) !important;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.comm-readonly-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--t-radius-full);
  background: var(--t-color-warning-light);
  color: var(--t-color-warning);
  font-size: var(--t-font-xs);
  font-weight: var(--t-font-weight-semibold);
  margin-left: 8px;
}

/* --- Pagination mobile touch targets --- */
@media (max-width: 900px) {
  .pagination-btn {
    min-width: var(--t-touch-target-min) !important;
    height: var(--t-touch-target-min) !important;
    padding: 0 14px !important;
    font-size: var(--t-font-md) !important;
  }
}

/* --- Toast stacking + improvements --- */
#toast {
  /* Default toast styling already defined elsewhere; add stacking */
  z-index: var(--t-z-toast);
}
.toast-stack {
  position: fixed;
  bottom: var(--t-space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--t-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--t-space-3);
  max-width: calc(100vw - var(--t-space-7));
  pointer-events: none;
}
.toast-stack .toast-item {
  pointer-events: auto;
  background: #0f172a;
  color: #fff;
  padding: var(--t-space-4) var(--t-space-5);
  border-radius: var(--t-radius-md);
  box-shadow: var(--t-shadow-lg);
  font-size: var(--t-font-md);
  font-weight: var(--t-font-weight-medium);
  min-width: 240px;
  max-width: 420px;
  display: flex;
  align-items: flex-start;
  gap: var(--t-space-3);
  animation: toastSlideUp var(--t-transition-normal);
}
.toast-stack .toast-item.toast-error   { background: var(--t-color-error); }
.toast-stack .toast-item.toast-success { background: var(--t-color-success); }
.toast-stack .toast-item.toast-warning { background: var(--t-color-warning); }
.toast-stack .toast-item .toast-close {
  background: transparent;
  color: inherit;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  opacity: .7;
  margin-left: auto;
}
.toast-stack .toast-item .toast-close:hover { opacity: 1; }

@keyframes toastSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Phase 60b: ui-dialog-body — container pentru conținut arbitrar în ui-dialog (ex. test resolver widget) */
.ui-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--t-space-4);
}