/* ============================================================
   Bioshi B2B — styles.css
   Główny stylesheet wspólny dla Strefy Dostawcy i Panelu Admin.
   Źródło prawdy: bioshi design file/01-design-system.md
   ============================================================ */

/* ================ FONTS ================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

/* ================ DESIGN TOKENS ================ */
:root {
  /* --- Oliwka (akcent brandu) --- */
  --olive-50:  #f4f5ec;
  --olive-100: #e8eada;
  --olive-200: #d2d6b5;
  --olive-300: #b9bf8c;
  --olive-400: #a3a96e;
  --olive-500: #8a9156;
  --olive-600: #6f7547;
  --olive-700: #585d3a;
  --olive-800: #424629;

  /* --- Glina (drugi kolor brandu) --- */
  --clay-50:  #faf6f3;
  --clay-100: #f1e9e3;
  --clay-200: #e4d4c9;
  --clay-300: #d3bcae;

  /* --- Neutrale --- */
  --cream:   #faf7f0;
  --paper:   #ffffff;
  --paper-2: #fbfaf5;
  --ink-900: #16170f;
  --ink-700: #2d2e22;
  --ink-500: #565849;
  --ink-400: #807f70;
  --ink-300: #a3a294;
  --line:    #ebe7da;
  --line-2:  #d9d4c3;

  /* --- Stany semantyczne --- */
  --good-500:   #4b7a3a;
  --good-50:    #ecf3e6;
  --warn-500:   #b7791f;
  --warn-50:    #fdf3e0;
  --danger-500: #b8442e;
  --danger-50:  #fbeae5;
  --info-500:   #3a6b8f;
  --info-50:    #e6eff5;

  /* --- Kolory kategorii (mapa) --- */
  --cat-grain:  #6f7547;
  --cat-legume: #8a9156;
  --cat-spice:  #b07c4e;
  --cat-super:  #3d5a3a;
  --cat-sweet:  #c89668;
  --cat-fruit:  #a8482e;
  --cat-nuts:   #5d3a26;

  /* --- Typografia --- */
  --font-display: 'Bricolage Grotesque', Georgia, serif;
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Promienie --- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* --- Cienie --- */
  --shadow-sm: 0 1px 0 rgba(22,23,15,0.04), 0 1px 2px rgba(22,23,15,0.04);
  --shadow-md: 0 2px 4px rgba(22,23,15,0.04), 0 8px 24px -8px rgba(22,23,15,0.08);
  --shadow-lg: 0 4px 12px rgba(22,23,15,0.06), 0 24px 48px -16px rgba(22,23,15,0.12);

  /* --- Transitions --- */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
}

/* ================ RESET ================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-900);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--olive-600); text-decoration: none; transition: color var(--t-base); }
a:hover { color: var(--olive-700); }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

/* ================ TYPOGRAPHY ================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink-900);
  margin: 0;
}
h1 { font-size: 40px; line-height: 1.1;  letter-spacing: -0.025em; }
h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: 18px; line-height: 1.2;  letter-spacing: -0.01em; }
h4 { font-size: 16px; line-height: 1.25; letter-spacing: -0.005em; }
h5 { font-size: 14px; line-height: 1.3; }
h6 { font-size: 12px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); }

p { margin: 0 0 12px; }
small, .tiny, .meta { font-size: 12px; line-height: 1.4; color: var(--ink-500); }

.numeric, .mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' on, 'lnum' on;
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.muted { color: var(--ink-500); }
.dim   { color: var(--ink-400); }

/* ================ LAYOUT ================ */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}

.container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.page {
  padding: 32px 0 64px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.page-head .sub {
  color: var(--ink-500);
  margin-top: 8px;
  max-width: 60ch;
}

/* Grid helpers */
.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: 20px;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split-7-5 {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
}

.flex   { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }

/* Spacing utilities */
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

.w-full { width: 100%; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* ================ BUTTONS ================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base), box-shadow var(--t-base), transform var(--t-fast);
  text-decoration: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(138, 145, 86, 0.35);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* sizes */
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-md { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 48px; padding: 0 20px; font-size: 15px; }

/* primary */
.btn-primary {
  background: var(--olive-600);
  color: #fff;
  border-color: var(--olive-600);
}
.btn-primary:hover  { background: var(--olive-700); border-color: var(--olive-700); color: #fff; }
.btn-primary:active { background: var(--olive-800); border-color: var(--olive-800); }

/* ghost */
.btn-ghost {
  background: var(--paper);
  color: var(--ink-900);
  border-color: var(--line-2);
}
.btn-ghost:hover  { background: var(--olive-50); border-color: var(--olive-300); color: var(--ink-900); }
.btn-ghost:active { background: var(--olive-100); }

/* quiet (text) */
.btn-quiet {
  background: transparent;
  color: var(--ink-700);
  border-color: transparent;
  padding-left: 8px;
  padding-right: 8px;
}
.btn-quiet:hover  { background: var(--olive-50); color: var(--ink-900); }
.btn-quiet:active { background: var(--olive-100); }

/* danger variant (rare) */
.btn-danger {
  background: var(--danger-500);
  color: #fff;
  border-color: var(--danger-500);
}
.btn-danger:hover { background: #983922; border-color: #983922; }

/* soft olive — pasuje do akcji wtórnych w sticky offer panel */
.btn-soft-olive {
  background: var(--olive-100);
  color: var(--olive-700);
  border-color: var(--olive-100);
}
.btn-soft-olive:hover { background: var(--olive-200); border-color: var(--olive-200); color: var(--olive-700); }

/* ================ OFFER ACTIONS (Twoja oferta - przyciski edytuj/wycofaj) ================ */
.offer-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.offer-action-btn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}
.offer-action-btn.is-active {
  background: var(--olive-200);
  border-color: var(--olive-200);
}
.offer-edit-form {
  display: none;
  margin-top: 12px;
  padding: 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.offer-edit-form.is-open { display: block; }

/* icon-only */
.btn-icon {
  width: 40px;
  padding: 0;
}
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-lg { width: 48px; }

/* ================ BADGES ================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  background: var(--olive-100);
  color: var(--olive-800);
  border-color: var(--olive-200);
}
.badge-olive  { background: var(--olive-100); color: var(--olive-800); border-color: var(--olive-200); }
.badge-gray   { background: var(--cream);     color: var(--ink-700);   border-color: var(--line); }
.badge-warn   { background: var(--warn-50);   color: var(--warn-500);  border-color: rgba(183,121,31,0.25); }
.badge-good   { background: var(--good-50);   color: var(--good-500);  border-color: rgba(75,122,58,0.25); }
.badge-info   { background: var(--info-50);   color: var(--info-500);  border-color: rgba(58,107,143,0.25); }
.badge-danger { background: var(--danger-50); color: var(--danger-500);border-color: rgba(184,68,46,0.25); }
.badge-clay   { background: var(--clay-100);  color: #6a4a37;          border-color: var(--clay-200); }

.badge-icon svg { width: 12px; height: 12px; }
.badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: bioshi-pulse 1.6s ease-in-out infinite;
}

@keyframes bioshi-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.6); }
}

/* ================ DEADLINE PILL ================ */
.deadline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.deadline svg { width: 12px; height: 12px; }
.deadline-good   { background: var(--good-50);   color: var(--good-500);   border-color: rgba(75,122,58,0.25); }
.deadline-warn   { background: var(--warn-50);   color: var(--warn-500);   border-color: rgba(183,121,31,0.25); }
.deadline-urgent { background: var(--danger-50); color: var(--danger-500); border-color: rgba(184,68,46,0.3); }

/* ================ STATUS PIP ================ */
.status-pip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
}
.status-pip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-300);
  flex: 0 0 8px;
}
.status-pending::before     { background: var(--warn-500); }
.status-shortlisted::before { background: var(--info-500); }
.status-won::before         { background: var(--good-500); }
.status-lost::before        { background: var(--danger-500); }

/* ================ CARD ================ */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-fast);
}
.card-pad     { padding: 16px; }
.card-pad-lg  { padding: 24px; }
.card.interactive { cursor: pointer; }
.card.interactive:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--olive-200);
  transform: translateY(-1px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.card-body { padding: 20px; }
.card-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ================ STAT CARD ================ */
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.stat .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  font-weight: 500;
}
.stat .value {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.05;
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.stat .value.numeric {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.stat .sub {
  font-size: 12px;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ================ TABS ================ */
.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-500);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), box-shadow var(--t-base);
}
.tab:hover { color: var(--ink-900); }
.tab.active {
  background: var(--paper);
  color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}
.tab .count {
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--olive-100);
  color: var(--olive-800);
  padding: 2px 6px;
  border-radius: 999px;
}
.tab.active .count { background: var(--olive-200); }

/* ================ FILTER BAR ================ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 24px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
/* Override globalnego .select width:100% — w filter-bar selecty mają być inline */
.filter-bar .select { width: auto; min-width: 160px; max-width: 200px; }
.filter-bar .input { width: auto; }
.search-wrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 180px;
}
.search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-400);
  pointer-events: none;
}
.search-wrap input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 14px;
  color: var(--ink-900);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.search-wrap input::placeholder { color: var(--ink-400); }
.search-wrap input:focus {
  outline: none;
  border-color: var(--olive-500);
  box-shadow: 0 0 0 3px rgba(138,145,86,0.18);
}

/* ================ FORM CONTROLS ================ */
.input, .textarea, .select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.input, .select { height: 40px; padding-top: 0; padding-bottom: 0; }
.textarea { min-height: 96px; resize: vertical; padding-top: 10px; padding-bottom: 10px; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--olive-500);
  box-shadow: 0 0 0 3px rgba(138,145,86,0.18);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--paper-2);
  color: var(--ink-400);
  cursor: not-allowed;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23807f70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
}
.field-hint {
  font-size: 12px;
  color: var(--ink-500);
}
.field-error {
  font-size: 12px;
  color: var(--danger-500);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* checkbox / radio */
.check, .radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-700);
  cursor: pointer;
}
.check input[type="checkbox"], .radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--olive-600);
}

/* ================ KV (definition list) ================ */
.kv {
  display: grid;
  grid-template-columns: minmax(120px, 35%) 1fr;
  gap: 8px 16px;
  font-size: 14px;
}
.kv dt {
  color: var(--ink-500);
  font-size: 13px;
  font-weight: 400;
}
.kv dd {
  margin: 0;
  color: var(--ink-900);
  font-weight: 500;
}
.kv dd.numeric { font-family: var(--font-mono); font-feature-settings: 'tnum' on; }

/* ================ ALERTS ================ */
.alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.45;
}
.alert .alert-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.alert-title { font-weight: 500; margin-bottom: 2px; }
.alert-good   { background: var(--good-50);   color: #2f5326; border-color: rgba(75,122,58,0.25);   }
.alert-warn   { background: var(--warn-50);   color: #7a5113; border-color: rgba(183,121,31,0.3);  }
.alert-danger { background: var(--danger-50); color: #7a2b1c; border-color: rgba(184,68,46,0.3);   }
.alert-info   { background: var(--info-50);   color: #234c6c; border-color: rgba(58,107,143,0.25); }
.alert-tip    { background: var(--olive-50);  color: var(--olive-800); border-color: var(--olive-200); }

/* ================ DIVIDER / BREADCRUMB ================ */
.divider { height: 1px; background: var(--line); margin: 24px 0; }

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: 16px;
}
.breadcrumb a { color: var(--ink-500); }
.breadcrumb a:hover { color: var(--olive-700); }
.breadcrumb .sep { color: var(--ink-300); }
.breadcrumb .current { color: var(--ink-900); }

/* ================ SUPPLIER PORTAL — TOP NAV ================ */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-900);
}
.brand-logo {
  height: 28px;
  width: auto;
  display: block;
}
.nav-logo .brand-logo { height: 26px; }
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--olive-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
}
.brand-word {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.brand-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  margin-left: 6px;
  border-left: 1px solid var(--line);
  padding-left: 8px;
}

.nav-tabs {
  display: inline-flex;
  gap: 4px;
  margin-left: 16px;
}
.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-500);
  transition: background var(--t-base), color var(--t-base);
  cursor: pointer;
}
.nav-tab:hover { background: var(--olive-50); color: var(--ink-900); }
.nav-tab.active { background: var(--olive-100); color: var(--olive-800); }

.topnav-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bell-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-700);
  transition: background var(--t-base);
}
.bell-btn:hover { background: var(--olive-50); }
.bell-btn .dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  background: var(--danger-500);
  border: 2px solid var(--paper);
  border-radius: 50%;
}

.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base);
}
.account-chip:hover { background: var(--olive-50); border-color: var(--olive-200); }
.account-chip .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--olive-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
}

/* ================ NOTIFICATIONS PANEL ================ */
.notif-panel {
  position: absolute;
  top: 56px;
  right: 24px;
  width: 360px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  overflow: hidden;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.notif-head h4 { font-size: 14px; }
.notif-list {
  max-height: 420px;
  overflow-y: auto;
}
.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t-base);
}
.notif-item:hover { background: var(--paper-2); }
.notif-item:last-child { border-bottom: 0; }
.notif-item.unread { background: var(--olive-50); }
.notif-item .ico {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--olive-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--olive-700);
}
.notif-item .title { font-size: 14px; font-weight: 500; color: var(--ink-900); }
.notif-item .meta  { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.notif-foot {
  padding: 10px 16px;
  text-align: center;
  font-size: 13px;
  background: var(--paper-2);
}

/* ================ REQUIREMENT CARDS ================ */
.req-card-compact, .req-card-full {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-fast);
}
.req-card-compact:hover, .req-card-full:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--olive-200);
  transform: translateY(-1px);
}

.req-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--olive-50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.req-card-img img { width: 100%; height: 100%; object-fit: cover; }
.req-card-img .badge-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
}
.req-card-img .deadline-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
}

.req-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.req-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  line-height: 1.25;
}
.req-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-500);
}
.req-card-meta .numeric { color: var(--ink-900); font-weight: 500; }

.req-card-myoffer {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--olive-50);
  border: 1px solid var(--olive-200);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-700);
}

/* compact variant — no hero image, denser */
.req-card-compact .req-card-img {
  aspect-ratio: 16 / 9;
}

/* ================ OFFER FORM (sticky, right column on detail) ================ */
.offer-form {
  position: sticky;
  top: 88px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 20px;
}
.offer-form h3 {
  margin-bottom: 4px;
}
.offer-form .form-sub {
  color: var(--ink-500);
  font-size: 13px;
  margin-bottom: 16px;
}
.offer-form-step-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-500);
  margin-bottom: 16px;
}
.offer-form-step-indicator .step {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
}
.offer-form-step-indicator .step.active {
  background: var(--olive-600);
  color: #fff;
  border-color: var(--olive-600);
}
.offer-form-step-indicator .step.done {
  background: var(--olive-100);
  color: var(--olive-700);
  border-color: var(--olive-200);
}

.offer-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.offer-form-actions .btn { flex: 1 1 auto; }

/* upload area */
.upload-area {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  background: var(--paper-2);
  color: var(--ink-500);
  font-size: 13px;
  transition: border-color var(--t-base), background var(--t-base);
  cursor: pointer;
}
.upload-area:hover {
  border-color: var(--olive-300);
  background: var(--olive-50);
  color: var(--ink-700);
}

/* existing offer panel */
.existing-offer-panel {
  position: sticky;
  top: 88px;
  background: var(--paper);
  border: 1px solid var(--olive-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.existing-offer-panel .badge { margin-bottom: 12px; }
.existing-offer-panel .big-price {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.existing-offer-panel .big-price .currency { font-size: 16px; color: var(--ink-500); margin-left: 4px; }

/* ================ PROFILE WIDGET ================ */
.profile-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
  min-width: 280px;
}
.profile-widget .progress-ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.profile-widget .progress-ring .pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--olive-700);
}
.profile-widget .pw-title { font-size: 13px; font-weight: 500; color: var(--ink-900); }
.profile-widget .pw-sub   { font-size: 12px; color: var(--ink-500); }
.profile-widget .pw-cta {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--olive-700);
  text-decoration: none;
}
.profile-widget .pw-cta:hover { color: var(--olive-800); text-decoration: underline; }

/* progress bar */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--olive-100);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar > span {
  display: block;
  height: 100%;
  background: var(--olive-500);
  border-radius: 999px;
  transition: width var(--t-base);
}

/* ================ TABLES (shared) ================ */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table th, .table td {
  text-align: left;
  padding: 12px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table th {
  background: var(--paper-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  font-weight: 500;
}
.table tbody tr {
  cursor: pointer;
  transition: background var(--t-base);
}
.table tbody tr:hover { background: var(--paper-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.numeric, .table th.numeric { font-family: var(--font-mono); font-feature-settings: 'tnum' on; text-align: right; }
.table .chevron { width: 16px; color: var(--ink-300); }

/* product cell with mini image */
.product-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.product-cell .thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--olive-50);
  overflow: hidden;
  flex: 0 0 36px;
}
.product-cell .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-cell .title { font-weight: 500; color: var(--ink-900); }
.product-cell .sub { font-size: 12px; color: var(--ink-500); font-family: var(--font-mono); }

/* ================ FOOTER ================ */
.footer {
  background: var(--clay-100);
  border-top: 1px solid var(--clay-200);
  margin-top: 64px;
  padding: 48px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6a4a37;
  font-family: var(--font-body);
  font-weight: 500;
  margin-bottom: 12px;
}
.footer p, .footer li, .footer a {
  font-size: 14px;
  color: #4a3326;
  line-height: 1.6;
}
.footer a { transition: color var(--t-base); }
.footer a:hover { color: var(--olive-700); }
.footer-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--clay-200);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6a4a37;
}

/* ================ EMPTY STATES ================ */
.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-500);
}
.empty h3 { color: var(--ink-700); margin-bottom: 8px; }
.empty .empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--ink-300);
}

/* ================ SCROLLBAR (subtle) ================ */
.scroll-soft::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-soft::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 999px;
}
.scroll-soft::-webkit-scrollbar-thumb:hover { background: var(--olive-300); }

/* ================ RESPONSIVE ================ */
@media (max-width: 1100px) {
  .split-7-5 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .container { padding: 0 16px; }
  h1 { font-size: 32px; }
  h2 { font-size: 22px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: 1fr; }
  .offer-form, .existing-offer-panel { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; }
}

@media (max-width: 600px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .topnav { padding: 0 12px; gap: 12px; }
  .nav-tabs { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .notif-panel { width: calc(100vw - 24px); right: 12px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .table th, .table td { padding: 10px 8px; font-size: 13px; }
}

/* ================ PRINT (basic reset) ================ */
@media print {
  .topnav, .footer, .offer-form, .bell-btn, .filter-bar { display: none; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* ================ NEW DESIGN — aliasy i brakujące klasy (nowy design/ docs) ================ */

/* Topnav (zalogowany): default .shell max-width 1280 centered, brand i tabsy razem. */

/* .nav = .topnav (alias) */
.nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.shell { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.nav-row { display: flex; align-items: center; gap: 24px; height: 64px; }

/* Brand z zieloną kropką (overrides starszych brand-mark stylów) */
.nav-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 0; border: 0; background: none; cursor: pointer; }
.nav-logo:hover { text-decoration: none; }
.nav-logo .dot,
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--olive-500); display: inline-block; flex-shrink: 0; }
.nav-logo .brand-word { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); }
.nav-logo .brand-tag { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-400); margin-left: 6px; }

/* Nav links — alias dla nav-tabs */
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius); color: var(--ink-700); text-decoration: none; font-size: 14px; font-weight: 500; transition: background 120ms ease, color 120ms ease; line-height: 1; }
.nav-tab:hover { background: var(--olive-50); color: var(--ink-900); text-decoration: none; }
.nav-tab.active { background: var(--olive-100); color: var(--olive-700); }

/* Spacer i prawa kolumna topnav */
.nav-spacer { flex: 1; }
.nav-right { display: flex; align-items: center; gap: 10px; }

/* Icon button (bell, logout) */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: var(--ink-500); cursor: pointer; position: relative; transition: background 120ms ease, color 120ms ease; text-decoration: none; }
.icon-btn:hover { background: var(--olive-50); color: var(--ink-900); text-decoration: none; }
.icon-btn .badge-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger-500); border: 2px solid var(--paper); }

/* Account chip (override poprzedniego) */
.account-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-700); font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color 120ms ease, background 120ms ease; }
/* Wariant "tylko avatar" — nazwa firmy tylko w tooltipie title */
.account-chip-icon { padding: 0; gap: 0; border: 0; background: transparent; }
.account-chip-icon:hover { background: var(--olive-50); }
.account-chip:hover { border-color: var(--line-2); background: var(--paper-2); text-decoration: none; }
.account-chip .avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--olive-200); color: var(--olive-800); font-size: 12px; font-weight: 600; }

/* Footer rozszerzenia */
.footer { background: var(--clay-100); padding: 36px 0 28px; margin-top: 64px; color: var(--ink-700); }
.footer .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; }
.footer-logo { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); }
.footer-sub { font-size: 14px; color: var(--ink-500); margin-top: 8px; line-height: 1.5; }
.footer-title { font-family: var(--font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); margin-bottom: 10px; }
.footer p { font-size: 14px; color: var(--ink-700); line-height: 1.6; margin: 0; }
.footer a { color: var(--ink-700); text-decoration: underline; text-decoration-color: var(--ink-300); }
.footer a:hover { color: var(--olive-600); text-decoration-color: var(--olive-400); }
.numeric { font-family: var(--font-mono); font-feature-settings: 'tnum' on; }

@media (max-width: 900px) {
  .footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-tab span { display: none; }
}
@media (max-width: 640px) {
  .footer .footer-grid { grid-template-columns: 1fr; }
  .nav-links { gap: 0; }
  .nav-tab { padding: 8px; }
  .account-chip span:last-child { display: none; }
}

/* ================ PAGE HEAD ================ */
.page-head { padding: 24px 0 16px; }
.page-head-row { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; }
.page-head .eyebrow,
.page-eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); margin-bottom: 12px; }
.page-head h1,
.page-h1 { font-family: var(--font-display); font-size: 40px; line-height: 1.1; font-weight: 500; letter-spacing: -0.025em; color: var(--ink-900); margin: 0 0 12px; }
.page-head .sub,
.page-sub { font-size: 15px; line-height: 1.5; color: var(--ink-500); max-width: 640px; margin: 0; }
.accent-em { font-style: normal; color: var(--olive-600); }

/* ================ PROFILE WIDGET ================ */
.profile-widget { display: block !important; width: 320px; background: var(--clay-50); border-color: var(--clay-200) !important; padding: 20px !important; }
.profile-widget-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.profile-widget-title { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.profile-widget-pct { font-size: 14px; color: var(--ink-500); }
.profile-widget-hint { font-size: 13px; color: var(--ink-500); margin: 10px 0; line-height: 1.4; }

/* ================ PROGRESS BAR ================ */
.bar { width: 100%; height: 6px; border-radius: 999px; background: var(--olive-200); overflow: hidden; }
.bar-fill { height: 100%; background: var(--olive-500); border-radius: 999px; transition: width 240ms ease; }

/* ================ STAT CARD (rozszerzony) ================ */
.stat .stat-label,
.stat-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); margin-bottom: 12px; }
.stat .stat-value,
.stat-value { font-family: var(--font-display); font-size: 36px; line-height: 1; font-weight: 500; letter-spacing: -0.025em; color: var(--ink-900); margin-bottom: 8px; }
.stat .stat-sub,
.stat-sub { font-size: 13px; color: var(--ink-500); }

/* ================ SECTION BLOCK (large gap pomiędzy sekcjami) ================ */
.section-block { margin-top: 40px; }
.section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 16px; gap: 24px; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-900); }
.section-sub { font-size: 14px; color: var(--ink-500); margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ================ GRID 12 / SPLIT 7+5 ================ */
.grid-12,
.split-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.split-12 .span-7 { grid-column: span 7; }
.split-12 .span-5 { grid-column: span 5; }
@media (max-width: 900px) {
  .grid-12,
  .split-12 { grid-template-columns: 1fr; }
  .split-12 .span-7,
  .split-12 .span-5 { grid-column: span 1; }
}

/* ================ CARD HEADER ROW ================ */
.card-header-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-header-row h3 { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-900); }
.card.span-7 > .table { margin: 0; }
.card.span-7 > .table th { padding: 12px 20px; border-bottom: 1px solid var(--line); }
.card.span-7 > .table td { padding: 14px 20px; }

/* ================ TABLE HOVER + ROW CLICKABLE ================ */
.table-hover tbody tr:hover,
.row-clickable:hover { background: var(--paper-2); }
.row-clickable { cursor: pointer; }
.row-title { font-weight: 500; font-size: 14px; color: var(--ink-900); }

/* ================ DEADLINE PILL ================ */
.deadline-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.deadline-pill .icon { width: 12px; height: 12px; }
.deadline-pill.deadline-good,
.deadline-good { background: var(--good-50); color: var(--good-500); }
.deadline-pill.deadline-warn,
.deadline-warn { background: var(--warn-50); color: var(--warn-500); }
.deadline-pill.deadline-urgent,
.deadline-urgent { background: var(--danger-50); color: var(--danger-500); }
.deadline-pill.deadline-gray,
.deadline-gray { background: var(--line); color: var(--ink-500); }

/* ================ REQ CARD (zapotrzebowanie card) ================ */
.req-card { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease; }
.req-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-2); text-decoration: none; transform: translateY(-1px); }
.req-thumb { position: relative; background: var(--olive-50); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; color: var(--olive-500); }
.req-thumb img { width: 100%; height: 100%; object-fit: cover; }
.req-thumb .food-glyph { width: 56px; height: 56px; opacity: 0.7; }
.pill-tr { position: absolute; top: 12px; right: 12px; }
.req-body { padding: 14px 16px 16px; }
.row-gap-8 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.req-title { font-size: 15px; font-weight: 500; color: var(--ink-900); line-height: 1.35; margin-bottom: 14px; min-height: 40px; }
.req-meta-row { display: flex; justify-content: space-between; align-items: end; padding-top: 12px; border-top: 1px dashed var(--line); }
.req-qty { font-family: var(--font-display); font-size: 22px; line-height: 1; font-weight: 500; color: var(--ink-900); }
.req-qty small { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--ink-500); margin-left: 4px; }

/* ================ OFFERS MINI LIST (prawa kolumna pulpitu) ================ */
.offers-mini-list { padding: 8px 20px 20px; }
.offers-mini-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; gap: 12px; }
.offers-mini-item:last-child { border-bottom: 0; }
.offers-mini-item:hover { text-decoration: none; }

/* ================ STATUS PIP (extended dla rozszerzonych stylów) ================ */
.status-pip { font-size: 13px; font-weight: 500; white-space: nowrap; }
.status-pip.status-pending { color: var(--warn-500); }
.status-pip.status-shortlisted { color: var(--info-500); }
.status-pip.status-won { color: var(--good-500); }
.status-pip.status-lost { color: var(--ink-500); }

/* ================ TEXT UTILITIES ================ */
.text-right { text-align: right; }
.text-center { text-align: center; }
.muted { color: var(--ink-500); }
.tiny { font-size: 12px; line-height: 1.4; color: var(--ink-500); }
.mt-24 { margin-top: 24px; }

/* ================ FIXES dla page-head responsive ================ */
@media (max-width: 900px) {
  .page-head-row { grid-template-columns: 1fr; }
  .profile-widget { width: 100%; }
  .page-head h1, .page-h1 { font-size: 30px; }
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* ================ LIST VIEW (Zapotrzebowania) ================ */

/* Pill top-left (na req-thumb dla badge'a "Nowe") */
.pill-tl { position: absolute; top: 12px; left: 12px; }

/* Animacja pulsującej kropki dla "Nowe" badge */
.dot-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--good-500); display: inline-block; margin-right: 4px; vertical-align: middle; animation: pulse 1.6s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

/* My offer inset (gdy user ma swoją ofertę na karcie req) */
.my-offer-inset { margin-top: 12px; padding: 8px 10px; background: var(--olive-50); border-radius: 8px; font-size: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.my-offer-inset .status-pip { font-size: 12px; }

/* Meta row right side (tydzień dostawy + wartość) */
.req-meta-right { text-align: right; }
.req-week { font-size: 13px; font-weight: 500; color: var(--ink-900); }

/* Row thumb (tabela widoku tabela) — 40x40 miniaturka obok nazwy produktu */
.row-thumb-cell { display: flex; align-items: center; gap: 12px; }
.row-thumb { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--olive-50); color: var(--olive-500); flex-shrink: 0; }
.row-thumb .food-glyph { width: 24px; height: 24px; opacity: 0.7; }

/* Empty state */
.empty-state h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-900); }
.empty-state p { margin: 0; }

/* View toggle (Karty/Tabela) ma jaśniejsze tło */
.view-toggle { background: var(--paper-2); }
.view-toggle .tab { font-size: 13px; }

/* Spacer */
.spacer { flex: 1; }

/* Pagination info */
.pagination-info { padding: 16px 0; }

@media (max-width: 1100px) {
  .filter-bar { flex-wrap: wrap; }
  .filter-bar .search-wrap { flex: 1 1 100%; }
}
@media (max-width: 720px) {
  .filter-bar .view-toggle { width: 100%; }
}

/* ================ DETAIL VIEW (Pokaz) ================ */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.detail-left { min-width: 0; }
.detail-right { position: sticky; top: 88px; }

/* Hero produktu w detalu zapotrzebowania — analogicznie do .product-hero w admin */
.req-hero { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; margin-bottom: 8px; }
.req-hero-thumb { width: 200px; height: 200px; border-radius: var(--radius-lg); background: var(--olive-50); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 14px; box-sizing: border-box; color: var(--olive-500); }
.req-hero-thumb.has-photo { background: var(--paper); border: 1px solid var(--line); padding: 12px; }
.req-hero-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.req-hero-thumb .food-glyph { width: 80px; height: 80px; opacity: 0.7; }
.req-hero-body { min-width: 0; }
.req-hero-title { font-size: 36px; line-height: 1.1; margin: 0; }
@media (max-width: 720px) {
	.req-hero { grid-template-columns: 1fr; }
	.req-hero-thumb { width: 100%; max-width: 360px; height: auto; aspect-ratio: 1/1; }
}

/* Stary detail-hero zostawiony jako fallback — używany jeszcze gdzieś */
.detail-hero { aspect-ratio: 1 / 1; width: 100%; max-width: 360px; background: var(--olive-50); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--olive-500); margin: 0 0 8px; overflow: hidden; padding: 16px; box-sizing: border-box; }
.detail-hero img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius); }
.detail-hero .food-glyph { width: 100px; height: 100px; opacity: 0.7; }

/* Tip card (Wskazówki do oferty - oliwkowe tło) */
.tip-card { margin-top: 32px; background: var(--olive-50) !important; border-color: var(--olive-100) !important; }
.tip-icon { color: var(--olive-600); flex-shrink: 0; }
.tip-title { font-size: 14px; font-weight: 600; color: var(--ink-900); margin-bottom: 8px; }
.tip-list { margin: 8px 0 0; padding: 0; list-style: none; color: var(--ink-700); font-size: 14px; line-height: 1.55; }
.tip-list li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.tip-list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 9px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--olive-500);
}
.tip-list li:last-child { margin-bottom: 0; }

/* Offer form (sticky w prawej kolumnie) */
.offer-form-head { display: flex; justify-content: space-between; align-items: center; }
.offer-form-meta { font-size: 12px; }

/* Detail responsive */
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-right { position: static; }
  .detail-hero { aspect-ratio: 1 / 1; padding: 16px; }
}

/* ================ REQ-THUMB / DETAIL-HERO — warianty ze zdjęciem ================ */

/* req-card thumb gdy ma zdjęcie produktu z arkusza */
.req-thumb.has-photo { background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px; }
.req-thumb.has-photo img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius); }

/* detail-hero gdy ma zdjęcie produktu */
.detail-hero.detail-hero-photo { background: var(--paper); border: 1px solid var(--line); padding: 16px; max-width: 440px; }
.detail-hero.detail-hero-photo img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius); }

/* row-thumb w tabelach — gdy używa zdjęcia (40px box z obrazkiem) */
.surowiec-thumb img { border-radius: 6px; }

/* ================ KONTO (account section) — compact 2-col layout ================ */
.konto-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	max-width: 1100px;
	margin: 0 auto;
}
.konto-side .konto-leftmenu { padding: 14px 14px; }
.konto-main .card-pad-lg { padding: 24px 28px; }

.konto-dl {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 12px 24px;
	margin: 0;
}
.konto-dl dt {
	color: var(--ink-500);
	font-weight: 400;
	text-align: left;
	font-size: 14px;
	align-self: center;
}
.konto-dl dd {
	margin: 0;
	color: var(--ink-900);
	font-size: 14px;
	align-self: center;
	word-break: break-word;
}

.konto-form-narrow { max-width: 100%; }

@media (max-width: 720px) {
	.konto-layout { grid-template-columns: 1fr; max-width: 100%; }
	.konto-dl { grid-template-columns: 1fr; gap: 4px 0; }
	.konto-dl dt { margin-top: 10px; }
}

/* ================ REQUIRED FIELDS — gwiazdka + czerwona obwódka ================ */
.field-label.required::after,
.field-label[data-required]::after {
	content: ' *';
	color: var(--danger-500);
	font-weight: 600;
}
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea,
.input.has-error,
.select.has-error,
.textarea.has-error {
	border-color: var(--danger-500) !important;
	box-shadow: 0 0 0 3px rgba(184, 68, 46, 0.12);
}
.field-error {
	color: var(--danger-500);
	font-size: 12px;
	margin-top: 4px;
	font-weight: 500;
}

/* ================ LANG SWITCHER ================ */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink-700);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	line-height: 1;
	transition: background .15s, border-color .15s;
}
.lang-switch:hover { background: var(--olive-50); border-color: var(--olive-300); color: var(--ink-900); }
.lang-switch .lang-flag { font-size: 14px; line-height: 1; }
.lang-switch .lang-code { letter-spacing: 0.04em; }

/* ================ PUBLIC LANDING (/dostawca/) ================ */
.public-landing-grid {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	max-width: 1100px;
	margin: 0 auto;
}
.public-landing-left { min-width: 0; position: sticky; top: 88px; }
.public-landing-right { min-width: 0; }

.landing-intro { margin-bottom: 28px; }
.landing-intro .eyebrow { margin-bottom: 8px; }
.landing-h1 { font-family: var(--font-display); font-size: 38px; line-height: 1.1; font-weight: 500; letter-spacing: -0.025em; color: var(--ink-900); margin: 0 0 14px; }
.landing-sub { font-size: 16px; line-height: 1.55; color: var(--ink-500); margin: 0; max-width: 56ch; }
.landing-h2 { font-size: 20px; font-weight: 500; margin: 0 0 14px; color: var(--ink-900); }

.public-landing .landing-stats .stat {
	padding: 16px 18px;
}
.public-landing .landing-stats .stat .stat-value,
.public-landing .landing-stats .stat-value {
	font-size: 28px;
	margin-bottom: 4px;
}

.landing-benefits { margin-top: 32px; }
.landing-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.landing-checklist li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-700);
}
.landing-checklist li .check {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--olive-100);
	color: var(--olive-700);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
}

.landing-login-card {
	border: 1px solid var(--line);
	box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,0.06));
}

@media (max-width: 900px) {
	.public-landing-grid { grid-template-columns: 1fr; gap: 32px; }
	.public-landing-left { position: static; max-width: 480px; margin: 0 auto; width: 100%; }
	.public-landing .landing-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
	.public-landing .landing-stats { grid-template-columns: 1fr; }
}