/*
 * BTC Manifest Desk — spokojny, grafitowy interfejs operacyjny.
 * Miękkie powierzchnie i umiarkowana głębia bez efektu szklanego dashboardu.
 */

:root {
  color-scheme: light;
  --bg: #cdd2d3;
  --panel: #d9dddc;
  --panel-2: #eceeec;
  --surface: #f4f4f1;
  --surface-muted: #e3e6e4;
  --line: #aeb5b6;
  --line-strong: #899398;
  --text: #252b2e;
  --muted: #636d71;
  --blue: #315f75;
  --blue-soft: #d7e2e6;
  --green: #477459;
  --amber: #946a32;
  --red: #9b514c;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
}

.topbar {
  height: 66px;
  padding: 0 18px;
  border-bottom: 1px solid #11181c;
  background: #252d31;
  background-image: none;
  box-shadow: 0 2px 8px rgba(16, 21, 24, .2);
}

.topbar h1 {
  color: #f5f6f4;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: .1px;
}

.topbar h1 span { color: #a8cadc; }
.top-actions { gap: 6px; }

.button,
select,
input {
  border-color: var(--line-strong);
  border-radius: 5px;
  background: #f7f8f6;
  color: var(--text);
  box-shadow: none;
}

.button {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(20, 27, 30, .08);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.button:hover {
  border-color: #5e6971;
  background: #fff;
  box-shadow: 0 2px 5px rgba(20, 27, 30, .1);
}

.button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.button-primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.button-primary:hover { border-color: #123d59; background: #123d59; }
.button-success { border-color: var(--green); background: var(--green); color: #fff; }
.button-success:hover { border-color: #1e4d30; background: #1e4d30; }
.button-reserved { border-color: #a36b19; background: #f4ead8; color: #70470e; }
.button-reserved:hover { border-color: #70470e; background: #ead9bb; }
.button-danger { border-color: #a8544d; background: #fff; color: #87352f; }
.button-danger:hover { border-color: #87352f; background: #f4e5e3; }

.topbar .button {
  border-color: #566168;
  background: #30393e;
  color: #edf0f1;
}

.topbar .button:hover { border-color: #89949a; background: #3a454b; }
.topbar .button-primary { border-color: #cad9df; background: #dfe8eb; color: #18384c; }
.topbar .button-primary:hover { background: #fff; }

select,
input { height: 34px; padding: 0 9px; }

select:focus,
input:focus,
.button:focus-visible,
.file-open:focus-visible,
.file-menu:focus-visible,
.file-group-head:focus-visible {
  outline: 2px solid #2e6f98;
  outline-offset: 1px;
  border-color: #2e6f98;
  box-shadow: none;
}

.layout { grid-template-columns: 310px minmax(0, 1fr); }

.sidebar {
  padding: 14px 10px;
  border-right-color: #a8b0b2;
  background: #d6dad9;
  box-shadow: inset -1px 0 rgba(255, 255, 255, .42);
}

.sidebar-heading {
  padding: 2px 7px 9px;
  border-bottom: 1px solid #adb5b7;
  color: #525b61;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
}

.sidebar-heading strong,
.file-group-count {
  min-width: auto;
  padding: 2px 6px;
  border: 1px solid #aeb6b8;
  border-radius: 4px;
  background: #c8cece;
  color: #424b51;
}

.sidebar-search { margin: 10px 0 7px; }
.sidebar-search-icon { left: 9px; color: #6e777d; font-size: 14px; }
.sidebar-search input {
  height: 34px;
  padding-left: 30px;
  border-color: #a5afb2;
  border-radius: 6px;
  background: #eef0ef;
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(26, 32, 35, .05);
}
.sidebar-search input:focus { border-color: var(--blue); background: #fff; }

.file-sort-control {
  grid-template-columns: 70px minmax(0, 1fr);
  margin: 0 0 10px;
  padding: 7px;
  border: 1px solid #b8bfc0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .25);
}
.file-sort-control span { color: #596269; letter-spacing: .35px; }
.file-sort-control select { height: 30px; font-size: 11px; }

.bulk-actions {
  gap: 6px;
  margin: 0 0 10px;
  padding: 9px;
  border: 1px solid #b4bcbd;
  border-radius: 7px;
  background: rgba(255, 255, 255, .24);
}
.bulk-select { color: #424a50; }
.bulk-actions .button { min-height: 30px; padding: 5px 7px; }
.bulk-delete { margin-top: 0; border-style: solid; }
#bulkMarkup { border-color: #58798e; background: #fff; color: #244f69; }
#bulkMarkup:hover { border-color: #244f69; background: #e7eef2; }
.bulk-actions:not(.has-selection) .bulk-status-actions,
.bulk-actions:not(.has-selection) #bulkMarkup,
.bulk-actions:not(.has-selection) #deleteSelected { display: none; }

.file-list { gap: 12px; }
.file-variant-group {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid #b7c0c1;
  border-radius: 7px;
  background: rgba(255, 255, 255, .2);
}
.file-variant-group + .file-variant-group { margin-top: 2px; }
.file-variant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 5px 7px;
  border-radius: 5px;
  color: #465157;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .65px;
  text-transform: uppercase;
}
.file-variant-head span:last-child {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .58);
  text-align: center;
}
.file-variant-body { display: grid; gap: 8px; }
.file-variant-new { border-color: #76a4aa; background: rgba(226, 241, 243, .72); }
.file-variant-new > .file-variant-head { background: #d5e9ec; color: #175965; }
.file-variant-old { border-color: #b8bdbe; background: rgba(235, 237, 235, .7); }
.file-variant-old > .file-variant-head { background: #e0e3e1; color: #4d575c; }
.file-group { gap: 2px; }
.file-group-head {
  padding: 6px 5px;
  border-radius: 5px;
  color: #4c555b;
  letter-spacing: .55px;
  transition: none;
}
.file-group-head:hover { background: rgba(255, 255, 255, .32); color: #22272b; }
.file-group-body { gap: 0; }

.file-date-group {
  gap: 0;
  padding-left: 0;
  border-left: 0;
}
.file-date-head {
  margin-top: 4px;
  padding: 5px 5px 3px;
  border-top: 1px solid #c7cacb;
  color: #727a80;
  letter-spacing: .35px;
}
.file-date-head span:last-child {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.file-date-body { gap: 4px; }

.file-item {
  grid-template-columns: 27px minmax(0, 1fr) 29px;
  gap: 1px;
  padding: 0;
  border: 1px solid #bbc2c3;
  border-left: 3px solid transparent;
  border-radius: 6px;
  background: #e5e8e6;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(20, 27, 30, .06);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.file-item:hover { border-color: #a7b0b2; background: #eceeec; box-shadow: 0 2px 5px rgba(20, 27, 30, .08); }
.file-item.active {
  border-color: #8ba2ad;
  border-left-color: var(--blue);
  background: #f4f5f3;
  box-shadow: 0 2px 8px rgba(20, 27, 30, .1);
}
.file-item.status-reserved { border-left-color: #b47820; }
.file-item.status-sold { border-color: #c2736c; border-left-color: #a13f37; background: #f3dfdc; }
.file-item.status-sold.active { border-color: #a95048; border-left-color: #7f2821; background: #f8e9e7; box-shadow: 0 2px 8px rgba(127, 40, 33, .16); }
.file-item.status-sold .file-open { opacity: 1; filter: none; }
.file-item.status-sold .file-icon { border-color: #a95048; background: #a13f37; color: #fff; }
.file-item.status-sold .file-name { color: #6f2822; font-weight: 700; text-decoration: none; }

.file-open {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
  padding: 7px 4px;
  border-radius: 5px;
}
.file-open:hover,
.file-menu:hover { background: #dde1e2; }

.file-icon {
  width: 30px;
  height: 22px;
  border: 1px solid #4e765d;
  border-radius: 4px;
  background: #edf2ed;
  color: #315d40;
  font-size: 10px;
  font-weight: 700;
}
.file-menu { width: 28px; border-radius: 4px; color: #596269; }
.file-name { color: #22272b; font-size: 12px; font-weight: 600; }
.file-size { color: #697278; font-size: 10px; }
.file-upload-audit { color: #737b80; font-size: 9px; }

.badge,
.file-markup-badge {
  border-radius: 4px;
  box-shadow: none;
}
.badge { padding: 2px 4px; font-size: 8px; }
.badge-sold { border: 1px solid #91372f; background: #a13f37; color: #fff; }
.badge-reserved { background: #f1dfc1; color: #70470e; }
.badge-new-restocker {
  border: 1px solid #397580;
  background: #e3f1f3;
  color: #175965;
  white-space: nowrap;
}
.badge-old-restocker {
  border: 1px solid #8a9297;
  background: #e8eae9;
  color: #4d575c;
  white-space: nowrap;
}
.file-markup-badge {
  gap: 3px;
  padding: 2px 4px;
  border-color: #aeb5b9;
  background: #eef0ed;
  color: #3f484e;
}
.file-markup-badge span { color: #747c81; }
.file-markup-badge.positive { border-color: #7b9b85; background: #edf3ee; color: #245b38; }
.file-markup-badge.negative { border-color: #b6945f; background: #f5efe4; color: #70470e; }

.user-chip {
  padding: 7px 10px;
  border-color: #58636b;
  border-radius: 5px;
  background: #1d2428;
  color: #e7eaeb;
}

.controls {
  gap: 10px;
  padding: 12px;
  border-bottom-color: #aeb6b8;
  background: #dfe3e3;
  box-shadow: 0 1px 3px rgba(20, 27, 30, .08);
}
.controls label { color: #596269; font-size: 10px; font-weight: 600; }
.search { min-width: 210px; }

.markup-control {
  gap: 10px;
  padding: 10px;
  border: 1px solid #b3bbbd;
  border-radius: 8px;
  background: #e9ecea;
  background-image: none;
  box-shadow: 0 1px 3px rgba(20, 27, 30, .08);
}

.current-markup-card {
  width: 182px;
  min-width: 182px;
  gap: 3px 8px;
  padding: 9px 10px;
  border: 1px solid #adb5b7;
  border-left: 3px solid #657179;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(20, 27, 30, .07);
}
.current-markup-card.is-positive { border-color: #8fa398; border-left-color: var(--green); }
.current-markup-card.is-negative { border-color: #b9a077; border-left-color: var(--amber); }
.current-markup-card.is-empty { opacity: .68; }
.current-markup-label { color: #626b71; letter-spacing: .5px; }
.current-markup-percent { color: #1f282d; font-size: 24px; letter-spacing: -.3px; }
.current-markup-card.is-positive .current-markup-percent { color: var(--green); }
.current-markup-card.is-negative .current-markup-percent { color: var(--amber); }
.current-markup-breakdown { color: #424b50; }
.current-markup-audit { color: #747d82; }

.markup-editor { grid-template-columns: 112px 112px minmax(250px, 1fr); }
.markup-field-label {
  color: #4f585e !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.markup-input,
.markup-field-up .markup-input,
.markup-field-down .markup-input {
  height: 36px;
  border: 1px solid #92999e;
  border-radius: 6px;
  background: #f8f9f7;
}
.markup-field-up .markup-input:focus-within,
.markup-field-down .markup-input:focus-within,
.markup-input:focus-within {
  border-color: var(--blue);
  box-shadow: none;
  outline: 2px solid #bdd3df;
  outline-offset: 0;
}
.markup-input input { width: 76px; color: #1f2529; font-size: 15px; font-weight: 650; }
.markup-input span { color: #626b70; font-size: 13px; }
.markup-input input:focus,
.lot-price-input input:focus,
.lot-price-input select:focus { outline: 0; border: 0; box-shadow: none; }
.markup-actions { gap: 5px; }
#offerGenerate,
#lotPriceOffer {
  border-color: #668397;
  background: #fff;
  color: #244f69;
}
#offerGenerate:hover,
#lotPriceOffer:hover { border-color: #244f69; background: #e7eef2; }
.markup-editor .markup-targets { color: #315e79; }
.markup-draft-hint { color: #6a7479; }
.markup-control.has-draft .markup-draft-hint { color: #775013; }

.market-control,
.lot-price-control {
  gap: 8px;
  padding: 10px;
  border: 1px solid #b3bbbd;
  border-radius: 8px;
  background: #e9ecea;
  box-shadow: 0 1px 3px rgba(20, 27, 30, .07);
}
.market-control-label,
.lot-price-title,
.lot-price-field-label {
  color: #515a60;
  font-size: 10px;
  letter-spacing: .4px;
}
.market-toggle {
  height: 36px;
  padding: 0 9px;
  border: 1px solid #75927e;
  border-radius: 6px;
  background: #eef3ef;
  color: #263029;
  font-size: 12px;
}
.market-toggle:hover { border-color: #3d684b; }
.market-toggle.off { border-color: #aeb4b8; background: #fff; color: #687178; }
.lot-price-input {
  height: 36px;
  border: 1px solid #75927e;
  border-radius: 6px;
  background: #f8f9f7;
}
.lot-price-input:focus-within { border-color: var(--green); box-shadow: none; outline: 2px solid #c8d8cc; }
.lot-price-input input { color: #20272b; font-size: 15px; }
.lot-price-input select { color: #20272b; border-left-color: #b6bdb8; }

.lot-price-banner {
  padding: 9px 14px;
  border-bottom-color: #8fa398;
  background: #dfe9e2;
}
.lot-price-banner-label { color: #3b6749; font-size: 10px; }
.lot-price-banner strong { color: #243029; font-size: 17px; }

.manifest-status-banner { padding: 9px 14px; }
.manifest-status-icon { width: 22px; height: 22px; border-radius: 5px; font-size: 13px; }
.manifest-status-sold { border-color: #ad625c; background: #eee0de; color: #692d28; }
.manifest-status-reserved { border-color: #bb8b43; background: #f1e8d8; color: #67440f; }
.manifest-sold-stamp,
.manifest-reserved-stamp { display: none !important; }

.empty-state { color: #737c81; }
.empty-icon { display: none; }
.empty-state h2 { color: #3d454a; font-size: 16px; font-weight: 600; }
.empty-state p { font-size: 12px; }

.table-panel { background: #f5f6f4; color: #1e2529; box-shadow: inset 0 1px 3px rgba(20, 27, 30, .07); }
table { font-family: "Segoe UI", Arial, sans-serif; font-size: 11px; }
th, td { height: 28px; border-color: #d5d8d8; }
th { background: #d9dddc; color: #30383d; font-weight: 650; }
th:first-child { background: #cfd4d4; }
tbody tr:nth-child(even) td:not(:first-child) { background: #eceeec; }
tbody tr:hover td { background: #dbe6e9 !important; }
.type-badge {
  display: none;
}
th.type-number .type-badge,
th.type-currency .type-badge,
th.type-percentage .type-badge,
th.type-date .type-badge,
th.type-boolean .type-badge {
  background: #d4d7d7;
  color: #4f585d;
}
.row-sold td { background: #f4deda !important; color: #5f211c; }
.row-reserved td { background: #f6f1e7 !important; color: #403b31; }
.row-sold td:first-child { box-shadow: inset 5px 0 0 #a13f37; }
.row-reserved td:first-child { box-shadow: inset 3px 0 0 #a97931; }
.row-sold:hover td { background: #ebcbc6 !important; }
.row-reserved:hover td { background: #eee5d5 !important; }

.table-render-notice {
  border-bottom-color: #9fb7c5;
  background: #e9f0f3;
  color: #294d62;
}

footer {
  height: 30px;
  padding: 7px 12px;
  border-top-color: #11181c;
  background: #252d31;
  color: #d6dcdf;
  font-size: 11px;
}

/* Logowanie jak ekran aplikacji firmowej, nie landing page. */
.login-screen {
  place-items: stretch start;
  padding: 0;
  background: #2b3337;
  background-image: none;
}
.login-card {
  width: min(100%, 420px);
  height: 100%;
  align-content: center;
  gap: 14px;
  padding: 48px;
  border: 0;
  border-right: 1px solid #151b1e;
  border-radius: 0;
  background: #eef0ed;
  box-shadow: 10px 0 28px rgba(12, 17, 20, .22);
}
.login-card h1 { color: #20272b; font-size: 24px; font-weight: 650; }
.login-card h1 span { color: var(--blue); }
.login-sub { color: #687178; }
.login-card label { color: #4e575c; }
.login-error { color: #8f332d; }

/* Menu i dialogi wzorowane na klasycznych narzędziach desktopowych. */
.mark-menu {
  gap: 0;
  padding: 5px;
  border-color: #8f979c;
  border-radius: 7px;
  background: #f4f5f3;
  box-shadow: 0 10px 28px rgba(12, 17, 20, .22);
}
.menu-item { border-radius: 4px; color: #252c30; }
.menu-item:hover { background: #e8edf0; }
.menu-item.active { background: #dce8ee; color: #183f58; }
.menu-item.danger { color: #8d352f; }

.modal {
  place-items: stretch end;
  padding: 0;
  background: rgba(20, 25, 28, .46);
  backdrop-filter: none;
}
.modal-card {
  width: min(620px, calc(100vw - 48px));
  height: 100dvh;
  max-height: none;
  border: 0;
  border-left: 1px solid #69757b;
  border-radius: 0;
  background: #ecefed;
  color: var(--text);
  box-shadow: -10px 0 30px rgba(12, 17, 20, .25);
}
.modal-card-wide,
#bulkMarkupModal .modal-card { width: min(940px, calc(100vw - 48px)); }
#columnsModal .modal-card { width: min(560px, calc(100vw - 48px)); }
#historyModal .modal-card { width: min(840px, calc(100vw - 48px)); }
.modal-head {
  gap: 12px;
  min-height: 58px;
  padding: 12px 18px;
  border-top: 0;
  border-bottom: 1px solid #b1b9bb;
  background: #d8dcdb;
  background-image: none;
}
.modal-head h2 {
  min-width: 0;
  overflow: hidden;
  color: #293135;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-close {
  width: 31px;
  min-width: 31px;
  min-height: 28px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: #505a5f;
  box-shadow: none;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
.modal-close:hover { border-color: transparent; background: #c7cece; color: #20282c; box-shadow: none; }
.modal-card:focus { outline: 0; }
.modal-body { padding: 18px 20px 22px; background: #ecefed; color: #252c30; }
.modal-body h3 {
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #bfc4c6;
  color: #394248;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .55px;
  text-transform: uppercase;
}
.muted { color: #687178; }

.columns-select-all { color: #394247; }
.columns-list { gap: 4px 10px; }
.columns-item {
  min-height: 36px;
  padding: 6px 8px;
  border-color: #bac1c2;
  border-radius: 3px;
  background: #f5f6f3;
  color: #293034;
}
.columns-item:hover { border-color: #73838d; background: #edf1f2; }
.columns-item input,
.columns-select-all input {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
}
.columns-item:focus-within,
.market-toggle:focus-visible,
.menu-item:focus-visible { outline: 2px solid #2e6f98; outline-offset: 1px; }
.columns-item-required { border-color: #8aa7b4; background: #eef3f5; }
.columns-required {
  border-color: #9db6c1;
  background: var(--blue-soft);
  color: #2c576c;
}
.modal-error { color: #8f332d; }
.columns-actions {
  position: sticky;
  bottom: -22px;
  margin: 20px -20px -22px;
  padding: 12px 20px;
  border-top: 1px solid #b6bdbf;
  background: #dde1df;
  box-shadow: 0 -4px 10px rgba(20, 27, 30, .06);
}
.columns-actions .button-success {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.columns-actions .button-success:hover { border-color: #123d59; background: #123d59; }

.bulk-markup-fields {
  gap: 10px;
  margin: 12px 0 16px;
  padding: 11px;
  border: 1px solid #b8c0c1;
  border-radius: 3px;
  background: #e2e6e4;
}
.bulk-markup-grid { gap: 18px; }
.bulk-markup-grid > div { min-width: 0; }
.bulk-markup-columns .columns-list { border: 1px solid #c1c7c8; border-radius: 3px; background: #f0f2ef; }

.hist-scroll { border-color: #b8c0c1; border-radius: 3px; }
.hist-table,
.bulk-summary-table { color: #252c30; }
.hist-table th,
.bulk-summary-table th {
  background: #d7dcda;
  color: #465057;
  font-size: 9px;
  letter-spacing: .35px;
}
.hist-table td,
.bulk-summary-table td { border-color: #cbd0d0; background: #f5f6f3; color: #252c30; }
.bulk-summary-table th:first-child { background: #d7dcda; color: #465057; }
.bulk-summary-table td:first-child { background: #f5f6f3; color: #252c30; }
.hist-table tbody tr:nth-child(even) td,
.bulk-summary-table tbody tr:nth-child(even) td:not(:first-child) { background: #f6f6f4; }
.hist-table tbody tr:hover td,
.bulk-summary-table tbody tr:hover td { background: #e7eef1 !important; }
.bulk-summary-table .after,
.history-effective { color: #285f3b !important; }
.bulk-summary-skip td { color: #747d82; }

.history-upload-card {
  grid-template-columns: 130px 1fr auto;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid #b5bdbe;
  border-radius: 3px;
  background: #e1e6e5;
  box-shadow: none;
}
.history-upload-card > * { min-width: 0; }
.history-upload-card span { color: #3f5968; }
.history-upload-card time { color: #5f686e; }
.history-action { border-radius: 4px; }
.history-action.set { background: #dfe9e2; color: #28583a; }
.history-action.reset { background: #e4e5e3; color: #555e63; }

.columns-tooltip {
  border-color: #777f84;
  border-radius: 7px;
  background: #f5f6f3;
  color: #252c30;
  box-shadow: 0 10px 28px rgba(12, 17, 20, .22);
}
.columns-tooltip strong { color: #244f69; }
.columns-tip-values { color: #252c30; }
.columns-tip-empty { color: #70797e; }

body.presentation .markup-control { background: #e9ecea; }

@media (max-width: 980px) {
  .markup-control { flex-direction: column; }
  .current-markup-card { width: 100%; min-width: 0; }
  .markup-editor { width: 100%; }
}

@media (max-width: 1180px) {
  .layout { grid-template-columns: 275px minmax(0, 1fr); }
  .markup-control { width: 100%; }
}

@media (max-width: 760px) {
  .topbar { padding: 12px; }
  .topbar h1 { font-size: 18px; }
  .sidebar { border-right: 0; border-bottom: 1px solid #a8b0b2; background: #d6dad9; box-shadow: none; }
  .controls { padding: 10px; }
  .markup-control { flex-direction: column; }
  .current-markup-card { width: 100%; min-width: 0; }
  .markup-editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .modal { padding: 0; }
  .modal-card,
  .modal-card-wide,
  #columnsModal .modal-card,
  #bulkMarkupModal .modal-card,
  #historyModal .modal-card {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .modal-head { padding: 10px 12px; }
  .modal-body { padding: 12px; }
  .columns-actions { bottom: -12px; margin: 16px -12px -12px; padding: 10px 12px; }
}

@media (max-width: 520px) {
  .file-sort-control { grid-template-columns: 64px minmax(0, 1fr); }
  .markup-editor { grid-template-columns: minmax(0, 1fr); }
  .history-upload-card { grid-template-columns: 1fr; }
  .modal-head h2 { font-size: 14px; }
  .login-card { width: 100%; padding: 32px 24px; border-right: 0; box-shadow: none; }
}

/* Źródła katalogów: BTC i odseparowany Joybuy. */
.catalog-source-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 3px 7px;
  padding: 3px;
  border: 1px solid #6f7b80;
  border-radius: 6px;
  background: #aeb6b7;
}
.catalog-source-tab {
  min-height: 37px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #364247;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.catalog-source-tab.active {
  background: #293b44;
  color: #fff;
  box-shadow: 0 2px 5px rgba(20, 27, 30, .25);
}
.catalog-source-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.button-client-access {
  border-color: #6c9a7c;
  background: #e2efe6;
  color: #28583a;
}
.button-client-access:hover { border-color: #477459; background: #edf7f0; }

.import-source-field { display: grid; gap: 6px; margin-top: 15px; color: #3d484d; font-weight: 700; }
.import-source-field select { width: 100%; min-height: 40px; padding: 0 10px; }
.import-source-field small { color: #657177; font-weight: 400; line-height: 1.4; }

/* Zarządzanie linkami tylko-do-odczytu. */
.client-access-card { width: min(760px, calc(100vw - 48px)); }
.client-access-card .modal-head > div { display: grid; gap: 3px; }
.client-access-card .modal-head p { margin: 0; color: #68757a; font-size: 11px; }
.client-access-body { display: grid; gap: 16px; }
.client-access-security {
  padding: 12px 14px;
  border-left: 4px solid #477459;
  background: #e6efe8;
  color: #304a38;
  line-height: 1.5;
}
.client-access-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.client-scope-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid #9aa7aa;
  border-radius: 6px;
  background: #f7f8f6;
  cursor: pointer;
}
.client-scope-option.is-required { border-color: #789787; background: #edf4ef; cursor: default; }
.client-scope-option input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: #477459; }
.client-scope-option span { display: grid; gap: 4px; }
.client-scope-option small { color: #667277; line-height: 1.35; }
.client-access-fields { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; }
.client-access-fields label, .client-link-result > label { color: #566269; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.client-access-fields input, .client-access-fields select, .client-link-result input {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  padding: 0 10px;
  border: 1px solid #aeb7b9;
  background: #fff;
  font: inherit;
}
.client-access-live-note { margin: -4px 0 0; line-height: 1.45; }
.client-access-generate-row { display: flex; justify-content: flex-end; }
.client-link-result { padding: 14px; border: 1px solid #78a189; border-radius: 6px; background: #edf5ef; }
.client-link-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.client-link-result small { display: block; margin-top: 8px; color: #596760; }
.client-links-section { padding-top: 5px; border-top: 1px solid #c5cbca; }
.client-links-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.client-links-heading h3 { margin: 0; font-size: 13px; }
.client-links-heading .text-button { border: 0; background: transparent; color: #315f75; cursor: pointer; font-weight: 700; }
.client-links-list { display: grid; gap: 7px; margin-top: 10px; }
.client-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid #b9c0c0;
  border-radius: 5px;
  background: #f7f8f6;
}
.client-link-item > div:first-child { display: grid; gap: 3px; min-width: 0; }
.client-link-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-link-item span { color: #697378; font-size: 11px; }
.client-link-item.is-inactive { opacity: .65; }
.client-link-status-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.client-link-status { font-weight: 700; }
.client-link-status-actions .button { min-height: 29px; padding: 5px 8px; font-size: 10px; }

@media (max-width: 620px) {
  .client-access-options, .client-access-fields { grid-template-columns: minmax(0, 1fr); }
  .client-link-copy-row { grid-template-columns: minmax(0, 1fr); }
  .client-link-item { align-items: flex-start; flex-direction: column; }
  .client-link-status-actions { width: 100%; justify-content: space-between; }
}

/* Grade i osobny katalog ofert dostępnych u hurtownika. */
.manifest-view-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 3px 10px;
  padding: 3px;
  border: 1px solid #aeb7b9;
  border-radius: 6px;
  background: #d7dcda;
}
.manifest-view-tab {
  min-height: 34px;
  padding: 5px 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #4b555a;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.manifest-view-tab.active { background: #fff; color: #174d6b; box-shadow: 0 1px 4px rgba(20, 27, 30, .16); }
.manifest-view-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.grade-badges { display: inline-flex; flex: 0 0 auto; gap: 2px; }
.grade-filter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 0 3px 12px;
  padding: 7px 8px 8px;
  border: 1px solid #aeb7b9;
  border-radius: 6px;
  background: #dde1df;
}
.grade-filter legend { padding: 0 5px; color: #59646a; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.grade-filter label { cursor: pointer; }
.grade-filter input { position: absolute; opacity: 0; pointer-events: none; }
.grade-filter span {
  display: grid;
  min-height: 29px;
  place-items: center;
  border: 1px solid #9fa9ac;
  border-radius: 4px;
  background: #f4f5f3;
  color: #39444a;
  font-size: 11px;
  font-weight: 800;
}
.grade-filter input:checked + span { border-color: #245d7b; background: #286b8e; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.grade-filter input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.grade-badge {
  display: inline-grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid #657279;
  border-radius: 4px;
  background: #fff;
  color: #283238;
  font-size: 9px;
  font-weight: 800;
}
.grade-a { border-color: #39734c; background: #dcecdf; color: #245a35; }
.grade-b { border-color: #52758a; background: #dce8ee; color: #315d75; }
.grade-c { border-color: #a37835; background: #f2e6cf; color: #704c16; }
.grade-d { border-color: #9b4b44; background: #eedbd8; color: #702e28; }

.import-meta-card { width: min(560px, calc(100vw - 48px)); }
.grade-picker { margin: 18px 0; padding: 12px; border: 1px solid #b8c0c1; }
.grade-picker legend { padding: 0 6px; color: #3d484d; font-weight: 700; }
.grade-picker label { display: inline-flex; align-items: center; gap: 7px; margin: 5px 14px 5px 0; cursor: pointer; }
.grade-picker input { width: 18px; height: 18px; accent-color: var(--blue); }
.grade-picker strong { font-size: 16px; }
.purchase-opportunity-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid #7e9dad;
  border-radius: 5px;
  background: #e2edf1;
  cursor: pointer;
}
.purchase-opportunity-option input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--blue); }
.purchase-opportunity-option span { display: grid; gap: 4px; }
.purchase-opportunity-option small { color: #58666d; line-height: 1.35; }

.commission-summary { padding: 7px 10px; border: 1px solid #6e8d77; border-radius: 4px; background: #e0ece3; color: #285637; font-size: 11px; font-weight: 800; white-space: nowrap; }
.commission-summary.has-missing { border-color: #b47820; background: #f5ead8; color: #70470e; }
.commission-card { width: min(520px, calc(100vw - 48px)); }
.commission-target { margin: 0 0 8px; color: #263238; font-weight: 750; overflow-wrap: anywhere; }
.commission-message { margin: 0 0 20px; padding: 12px; border-left: 4px solid #b47820; background: #f5ead8; color: #59421f; line-height: 1.45; }
.commission-fields { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; }
.commission-fields label { color: #566269; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.commission-fields input, .commission-fields select { display: block; width: 100%; height: 42px; margin-top: 6px; padding: 0 10px; border: 1px solid #aeb7b9; background: #fff; font: inherit; }

@media (max-width: 520px) {
  .commission-summary { max-width: 100%; white-space: normal; }
  .commission-fields { grid-template-columns: minmax(0, 1fr); }
  .commission-card .columns-actions { grid-template-columns: minmax(0, 1fr); }
  .commission-card .columns-actions .button { width: 100%; }
}