:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --line: #d9e1ec;
  --line-strong: #c4cfdd;
  --text: #111827;
  --muted: #64748b;
  --blue: #2f6fe4;
  --blue-dark: #2458bb;
  --green: #168656;
  --red: #c23b35;
  --amber: #a86505;
  --shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.appShell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: #0f172a;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.brandIcon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #1e3a8a;
}

.brand h1 {
  font-size: 21px;
  margin: 0;
}

.brand span,
.sidebarFooter,
.eyebrow {
  color: var(--muted);
  font-size: 13px;
}

.navList {
  display: grid;
  gap: 8px;
}

.navButton {
  width: 100%;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  text-align: left;
}

.navButton.active {
  background: #1d4ed8;
  color: white;
}

.sidebarSheets {
  border-top: 1px solid rgba(203, 213, 225, 0.16);
  margin-top: 18px;
  padding-top: 14px;
  min-height: 0;
  position: relative;
}

.sidebarSheets::before,
.sidebarSheets::after {
  content: "";
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 6px;
  transition: opacity 0.16s ease;
  z-index: 2;
}

.sidebarSheets::before {
  background: linear-gradient(180deg, #0f172a 0%, rgba(15, 23, 42, 0) 100%);
  height: 16px;
  top: 40px;
}

.sidebarSheets::after {
  background: linear-gradient(0deg, #0f172a 0%, rgba(15, 23, 42, 0) 100%);
  bottom: 0;
  height: 22px;
}

.sidebarSheets:hover::before,
.sidebarSheets:hover::after {
  opacity: 1;
}

.sidebarSectionTitle {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 9px;
  text-transform: uppercase;
}

.sidebarSheetList {
  display: grid;
  gap: 6px;
  max-height: calc(100vh - 360px);
  overflow: hidden auto;
  padding-right: 5px;
  scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
  scrollbar-width: thin;
}

.sidebarSheetList::-webkit-scrollbar {
  width: 6px;
}

.sidebarSheetList::-webkit-scrollbar-track {
  background: transparent;
}

.sidebarSheetList::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
}

.sidebarSheetList:hover::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.42);
}

.sidebarSheetButton {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(203, 213, 225, 0.14);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.2);
  color: #cbd5e1;
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  text-align: left;
}

.sidebarSheetButton span {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebarSheetButton small {
  color: #94a3b8;
  font-size: 11px;
}

.sidebarSheetButton.active {
  background: #1d4ed8;
  border-color: #93c5fd;
  color: white;
}

.sidebarSheetButton.active small {
  color: #dbeafe;
}

.sidebarFooter {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
}

.content {
  min-width: 0;
  padding: 22px;
}

.devBanner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 15px;
  color: #78350f;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #f59e0b;
  border-left: 5px solid #d97706;
  border-radius: 9px;
  box-shadow: 0 5px 16px rgba(217, 119, 6, 0.14);
}

.devBannerIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  color: #fff;
  background: #d97706;
  border-radius: 8px;
}

.devBannerCopy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.devBannerCopy strong {
  font-size: 14px;
  letter-spacing: 0.06em;
}

.devBannerCopy span {
  color: #92400e;
  font-size: 13px;
  font-weight: 600;
}

.previewFocus {
  min-height: calc(100vh - 44px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.topbar h2,
.panel h3 {
  margin: 0;
}

.topbar h2 {
  font-size: 25px;
}

.eyebrow {
  margin: 0 0 4px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0;
}

.topActions,
.smallActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.primary,
.secondary,
.iconAction,
.tableLink {
  border-radius: 7px;
  min-height: 38px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  text-decoration: none;
}

.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}

.primary:hover {
  background: var(--blue-dark);
}

.secondary,
.iconAction {
  background: white;
  color: var(--text);
}

.iconAction {
  width: 38px;
  padding: 0;
}

.danger {
  color: var(--red);
}

button:disabled,
a.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.notice {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  margin-bottom: 14px;
  animation: noticeIn 0.18s ease;
}

.notice.ok {
  background: #eefaf3;
  border-color: #b8e0c8;
  color: var(--green);
}

.notice.error {
  background: #fff1ef;
  border-color: #f1b9b5;
  color: var(--red);
}

@keyframes noticeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loadingPanel,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.loadingPanel {
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel {
  padding: 16px;
}

.wbcShiftPlanBox {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  padding: 12px;
}

.myjniaSettingsBox {
  background: #eefaf6;
  border: 1px solid #a7dcc5;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
}

.myjniaSettingsBox:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(22, 134, 86, 0.15);
  outline: none;
}

.myjniaSettingsTitle {
  display: grid;
  gap: 2px;
}

.myjniaSettingsTitle strong {
  color: var(--green);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.myjniaSettingsTitle span,
.myjniaGoalInput > span {
  color: var(--muted);
  font-size: 12px;
}

.myjniaGoalInput {
  display: grid;
  gap: 5px;
}

.myjniaGoalInput > div {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr) 22px;
}

.myjniaGoalInput input {
  border: 1px solid var(--line);
  border-radius: 7px;
  min-width: 0;
  padding: 7px 8px;
  width: 100%;
}

.wbcShiftPlanTitle,
.wbcShiftPlanHeader,
.wbcShiftPlanRow {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(145px, 1fr) 92px 76px;
}

.wbcShiftPlanTitle {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}

.wbcShiftPlanTitle b {
  color: var(--blue-dark);
}

.wbcShiftPlanHeader {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.wbcShiftPlanRow input {
  min-width: 0;
  padding: 7px 8px;
}

.wbcShiftPlanLabel {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.wbcShiftPlanLabel small {
  color: var(--muted);
  font-size: 10px;
}

.panelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.reportGrid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(420px, 1.25fr);
  gap: 14px;
}

.widePanel {
  grid-column: 1 / -1;
}

.reportForm {
  display: grid;
  gap: 14px;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
}

.segmented button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.segmented button.selected {
  background: white;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.14);
  font-weight: 700;
}

.dropzone {
  min-height: 186px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--panel-soft);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.dropzone:hover,
.dropzone:focus-within {
  background: #eef4ff;
  border-color: var(--blue);
  box-shadow: 0 8px 22px rgba(47, 111, 228, 0.14);
  transform: translateY(-1px);
}

.dropzone:hover strong,
.dropzone:focus-within strong {
  color: var(--blue-dark);
}

.dropzone strong {
  color: var(--text);
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.dropzone input {
  display: none;
}

.wide {
  width: 100%;
}

.kpiGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.kpiCard {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 8px;
  padding: 12px;
}

.kpiCard span,
.detailsGrid dt,
.field span,
.testHint {
  color: var(--muted);
  font-size: 12px;
}

.kpiCard strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
}

.detailsGrid {
  margin: 0;
  display: grid;
  gap: 10px;
}

.detailsGrid div {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.detailsGrid dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.emptyState {
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.categoriesLayout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 14px;
}

.categoryListPanel,
.editorPanel {
  min-height: calc(100vh - 130px);
}

.categoryList {
  display: grid;
  gap: 6px;
  max-height: calc(100vh - 430px);
  overflow: auto;
  padding-right: 4px;
}

.categoryRow {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 7px;
  padding: 0 10px;
  text-align: left;
}

.categoryRow.active {
  border-color: var(--blue);
  background: #eff5ff;
}

.categoryRow.muted {
  opacity: 0.55;
}

.categoryEmoji {
  font-size: 18px;
  text-align: center;
}

.categoryName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.categoryGoal {
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.editorGrid,
.rulesGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
}

.rulesGrid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  margin-top: 14px;
}

.categorySwitches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.categorySwitches .switchLine {
  align-self: stretch;
}

.myjniaSaleTypeField {
  align-items: center;
  background: #f5fbf8;
  border: 1px solid #cbe8da;
  border-radius: 7px;
  display: grid;
  gap: 7px;
  grid-column: span 2;
  grid-template-columns: minmax(130px, 1fr) minmax(140px, 1fr);
  padding: 8px 10px;
}

.myjniaSaleTypeField span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.myjniaSaleTypeField select {
  background: white;
  border: 1px solid var(--line);
  border-radius: 7px;
  min-height: 34px;
  min-width: 0;
  padding: 6px 8px;
}

.field {
  display: grid;
  gap: 6px;
}

.fieldLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.labelHelp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  cursor: help;
}

.labelHelp:hover,
.labelHelp:focus {
  color: var(--blue);
  outline: none;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.field input:disabled {
  background: #f1f5f9;
  color: var(--muted);
}

.emojiInput {
  max-width: 86px;
  font-size: 20px;
  text-align: center;
}

.switchLine {
  min-height: 38px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  line-height: 1.2;
  align-self: end;
}

.testArea {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.matchBox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #b8e0c8;
  background: #eefaf3;
  color: var(--green);
  border-radius: 8px;
  padding: 12px;
}

.matchBox span {
  display: block;
  color: #276749;
  margin-top: 4px;
}

.dataTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.dataTable th,
.dataTable td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

.dataTable th {
  background: var(--panel-soft);
  color: #334155;
}

.historyTableWrap {
  overflow: auto;
}

.historyActions {
  display: flex;
  gap: 6px;
}

.previewLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 520px;
}

.sheetPane {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.previewActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sheetMeta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sheetMeta span {
  color: var(--muted);
  font-size: 13px;
}

.truncateNote {
  color: var(--amber) !important;
}

.sheetTableWrap {
  max-height: 640px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.receiptPreviewGrid {
  display: grid;
  gap: 16px;
}

.receiptPreviewBlock {
  display: grid;
  gap: 8px;
}

.previewFocus .sheetTableWrap {
  max-height: calc(100vh - 168px);
}

.receiptPdfFrame {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 820px;
  width: 100%;
}

.previewFocus .receiptPdfFrame {
  min-height: calc(100vh - 160px);
}

.chartPreview {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 14px;
  overflow: auto;
}

.chartHeader {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.chartHeader span,
.chartLegend {
  color: var(--muted);
  font-size: 12px;
}

.chartLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 14px;
}

.chartLegend span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.chartLegend i {
  border-radius: 3px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.goalChart {
  display: grid;
  gap: 8px;
  min-width: 760px;
}

.goalRow {
  display: grid;
  grid-template-columns: 260px minmax(280px, 1fr);
  gap: 12px;
  align-items: center;
  border-radius: 8px;
  padding: 4px 8px;
}

.goalRow-done {
  background: #eaf8ef;
  border: 1px solid #b8e0c8;
}

.goalRow-done .goalTrack {
  background: #d7f0df;
}

.goalRow-done .goalLabel strong,
.goalRow-done .goalLabel em {
  color: var(--green);
}

.goalRow-zero {
  background: #fff0f0;
  border: 1px solid #f1b8b5;
}

.goalRow-zero .goalTrack {
  background: #f8dada;
}

.goalRow-zero .goalLabel strong,
.goalRow-zero .goalLabel em {
  color: var(--red);
}

.goalLabel {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.goalLabel strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goalLabel span {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.goalLabel em {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.goalTrack {
  background: #edf2f7;
  border-radius: 6px;
  height: 22px;
  overflow: hidden;
  position: relative;
}

.goalSegments {
  display: flex;
  height: 100%;
  min-width: 2px;
}

.goalSegments span {
  display: block;
  height: 100%;
}

.appView,
.conversionGrid,
.hourlyView,
.topProductList,
.commentCard,
.productGrid,
.virtualGrid,
.employeeGrid,
.dashboardApp,
.dashboardActivityGrid,
.technicalGrid,
.topSellerBoard {
  margin-bottom: 12px;
}

.appView,
.dashboardApp {
  display: grid;
  gap: 12px;
}

.dashboardSection {
  display: grid;
  gap: 10px;
}

.dashboardSectionHeader {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 2px 1px;
}

.dashboardSectionHeader strong {
  font-size: 17px;
}

.dashboardSectionHeader span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.dashboardEstimateNote {
  background: #fff8e1;
  border: 1px solid #fde68a;
  border-radius: 7px;
  color: #7c5b08;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px;
  padding: 9px 10px;
}

.shiftBonusDashboard {
  gap: 16px;
}

.dashboardDataWarning,
.dashboardProgressNotice,
.dashboardSectionWarning {
  align-items: flex-start;
  background: #fff8e1;
  border: 1px solid #f2c96d;
  border-radius: 8px;
  color: #7c5b08;
  display: flex;
  gap: 9px;
  padding: 11px 13px;
}

.dashboardProgressNotice {
  align-items: flex-start;
  background: #fffbea;
  border: 1px solid #e8c455;
  border-radius: 8px;
  color: #715200;
  display: flex;
  gap: 9px;
  padding: 11px 13px;
}

.dashboardProgressNotice div {
  display: grid;
  gap: 3px;
}

.dashboardProgressNotice span {
  font-size: 13px;
  line-height: 1.4;
}

.dashboardDataWarning div {
  display: grid;
  gap: 3px;
}

.dashboardDataWarning span,
.dashboardSectionWarning {
  font-size: 13px;
  line-height: 1.4;
}

.dashboardBonusTiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.dashboardBonusTile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(16, 42, 67, 0.06);
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 15px;
}

.dashboardBonusTile > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.dashboardBonusTile > strong {
  color: #102a43;
  font-size: 25px;
  line-height: 1.1;
}

.dashboardBonusTile > small {
  color: var(--muted);
  font-size: 12px;
}

.dashboardBonusTile-total {
  background: #eef4ff;
  border-color: #9fbdf2;
}

.dashboardBonusTile-product {
  border-top: 4px solid #2f6fed;
}

.dashboardBonusTile-wbc {
  border-top: 4px solid #7c3aed;
}

.dashboardBonusTile-myjnia {
  border-top: 4px solid #0891b2;
}

.dashboardBestTile {
  background: #f0f9f4;
  border-color: #9dd3b0;
  grid-column: 1 / -1;
  grid-template-columns: minmax(150px, 0.45fr) repeat(auto-fit, minmax(260px, 1fr));
  min-height: auto;
}

.dashboardBestShift {
  border-left: 1px solid #b8dcc5;
  display: grid;
  gap: 3px;
  padding-left: 14px;
}

.dashboardBestShift small,
.dashboardBestShift em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.dashboardBestShift b {
  color: #13733b;
}

.dashboardBestTile > i {
  color: #13733b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.dashboardBestEmpty {
  font-size: 17px !important;
}

.dashboardShiftDays {
  display: grid;
  gap: 13px;
}

.dashboardShiftCard {
  background: #fff;
  border: 1px solid #ccd6e0;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(16, 42, 67, 0.06);
  overflow: hidden;
}

.dashboardShiftCard.incomplete {
  border-color: #e6ba54;
}

.dashboardShiftToggle {
  align-items: center;
  background: #f8fafc;
  border: 0;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 1fr) minmax(500px, 1.65fr) 24px;
  padding: 14px 16px;
  text-align: left;
  width: 100%;
}

.dashboardShiftToggle:hover {
  background: #f1f5f9;
}

.dashboardShiftIdentity {
  display: grid;
  gap: 4px;
}

.dashboardShiftIdentity b {
  font-size: 16px;
}

.dashboardShiftIdentity small {
  color: var(--muted);
  font-weight: 700;
}

.dashboardInProgressBadge {
  background: #fff2b8;
  border: 1px solid #e5bd35;
  border-radius: 999px;
  color: #765800;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  justify-self: start;
  margin-top: 3px;
  padding: 4px 8px;
}

.dashboardShiftAmounts {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
}

.dashboardShiftAmounts small {
  color: var(--muted);
  display: grid;
  font-size: 11px;
  gap: 2px;
}

.dashboardShiftAmounts b {
  color: #102a43;
  font-size: 14px;
}

.dashboardShiftProgressMetric span,
.dashboardShiftProgressMetric em {
  color: #6f5a16;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
}

.dashboardShiftPay {
  border-left: 1px solid var(--line);
  padding-left: 10px;
}

.dashboardShiftPay b {
  color: #13733b;
}

.dashboardShiftWarning {
  background: #fff8e1;
  border-top: 1px solid #f2c96d;
  color: #7c5b08;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
}

.dashboardShiftProgress {
  background: #fffbea;
  border-top: 1px solid #e8c455;
  color: #715200;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 14px;
}

.dashboardShiftCard.inProgress {
  border-color: #ddb530;
  box-shadow: 0 0 0 1px rgba(221, 181, 48, 0.12);
}

.dashboardShiftBody {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  padding: 16px;
}

.dashboardSettlementSection {
  display: grid;
  gap: 8px;
}

.dashboardSettlementSection h3 {
  background: #dce6f1;
  border-left: 4px solid #1f4e78;
  color: #173f5f;
  font-size: 14px;
  margin: 0;
  padding: 9px 11px;
}

.dashboardTableScroll {
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow-x: auto;
}

.dashboardSettlementTable {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 1120px;
  width: 100%;
}

.dashboardEmployeeSettlement .dashboardSettlementTable {
  min-width: 760px;
}

.dashboardSettlementTable th,
.dashboardSettlementTable td {
  border-bottom: 1px solid #dde5ed;
  padding: 9px 10px;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

.dashboardSettlementTable th:first-child,
.dashboardSettlementTable td:first-child,
.dashboardSettlementTable th:nth-child(2),
.dashboardSettlementTable td:nth-child(2) {
  text-align: left;
}

.dashboardSettlementTable thead th {
  background: #d9ead3;
  color: #173f35;
  font-size: 11px;
  line-height: 1.25;
  white-space: normal;
}

.dashboardSettlementTable tbody tr:hover:not(.dashboardSumRow) {
  background: #f8fafc;
}

.dashboardAwardCell {
  color: #13733b;
  font-weight: 900;
}

.dashboardSumRow th,
.dashboardSumRow td {
  background: #e8edf2;
  font-weight: 900;
}

.dashboardSumRow.reached th,
.dashboardSumRow.reached td {
  background: #e6f4ea;
}

.dashboardSumRow.failed th,
.dashboardSumRow.failed td,
.dashboardSumRow.missing th,
.dashboardSumRow.missing td {
  background: #fce8e6;
}

.dashboardSumRow.inProgress th,
.dashboardSumRow.inProgress td {
  background: #fff2cc;
}

.dashboardStatusBadge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
}

.dashboardStatusBadge.reached {
  background: #ccebd7;
  color: #126733;
}

.dashboardStatusBadge.failed {
  background: #f7cbc7;
  color: #a21b15;
}

.dashboardStatusBadge.missing {
  background: #e5e7eb;
  color: #4b5563;
}

.dashboardStatusBadge.inProgress {
  background: #fff2b8;
  color: #765800;
}

.dashboardShareStatus {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.dashboardShiftGrandTotal {
  align-items: center;
  background: #102a43;
  border-radius: 7px;
  color: #fff;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding: 14px 18px;
}

.dashboardShiftGrandTotal span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.dashboardShiftGrandTotal strong {
  font-size: 22px;
}

.dashboardEmployeeSettlement {
  margin-top: 2px;
}

.myjniaBonusHelp {
  background: #eef7ff;
  border: 1px solid #c8ddf2;
  border-radius: 7px;
  color: #36546f;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  padding: 10px;
}

.metricCards {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.metricCard {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-height: 86px;
  padding: 13px;
}

.metricCard span,
.compactRow span,
.conversionRow span,
.hourlyRow small,
.topProductRow span,
.topProductRow small,
.productTotals,
.sellerMiniRow span,
.goalLine span,
.leaderRow span,
.shiftRow span,
.technicalRow span,
.sellerCard span {
  color: var(--muted);
}

.metricCard strong {
  font-size: 24px;
  line-height: 1.1;
}

.metricCard small {
  color: var(--muted);
  line-height: 1.35;
}

.metricCard.warningCard {
  background: #fff8e8;
  border-color: #f2c96d;
}

.myjniaGoalCard {
  align-content: start;
}

.textAction {
  background: transparent;
  border: 0;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 800;
  justify-self: start;
  padding: 0;
}

.textAction:hover,
.textAction:focus-visible {
  text-decoration: underline;
}

.drsTableBlock {
  padding: 0;
}

.drsTableBlock .appBlockHeader {
  padding: 13px;
}

.drsTable {
  overflow-x: auto;
}

.drsRow {
  align-items: center;
  border-top: 1px solid #edf2f7;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 1fr) 120px 150px;
  min-width: 560px;
  padding: 10px 13px;
}

.drsRow > :not(:first-child) {
  text-align: right;
}

.drsRow span {
  color: var(--muted);
}

.drsDayRow {
  grid-template-columns: minmax(220px, 1fr) 180px;
  min-width: 430px;
}

.drsHeader {
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.drsTotal {
  background: #eef4ff;
  color: var(--blue-dark);
}

.highlightMetric {
  background: #eef8f2;
  border-color: #b8e0c8;
}

.highlightMetric strong {
  color: var(--green);
  font-size: 21px;
}

.appBlock,
.commentCard,
.conversionCard {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
}

.appBlockHeader {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.appBlockHeader span {
  color: var(--blue-dark);
  font-weight: 800;
  white-space: nowrap;
}

.compactList {
  display: grid;
  gap: 7px;
}

.compactRow {
  align-items: center;
  border-top: 1px solid #edf2f7;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(90px, auto));
  padding-top: 7px;
}

.excelToggle {
  display: flex;
  justify-content: flex-end;
  margin: 2px 0 10px;
}

.splitAppGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
}

.productGrid,
.virtualGrid,
.employeeGrid,
.technicalGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

.technicalGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboardActivityGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.dashboardWashBlock {
  grid-column: 1 / -1;
}

.dashboardWashTable {
  overflow-x: auto;
}

.dashboardWashRow {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(170px, 1.4fr) repeat(3, minmax(150px, 1fr));
  min-width: 700px;
  padding: 9px 12px;
}

.dashboardWashRow > :not(:first-child) {
  text-align: right;
}

.dashboardWashHeader {
  background: #f7f9fc;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.productGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.virtualGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employeeGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.productCard {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 13px;
}

.productCard-done {
  background: #eef8f2;
  border-color: #b8e0c8;
}

.productCard-done .miniBar {
  background: #d7f0df;
}

.productCard-done .miniBar i {
  background: #16a34a;
}

.productCard-done .productCardHeader span {
  color: var(--green);
}

.productCard-zero {
  background: #fff1f2;
  border-color: #fecdd3;
}

.productCard-zero .miniBar {
  background: #f7dadd;
}

.productCard-zero .miniBar i {
  background: #ef4444;
}

.productCard-zero .productCardHeader strong,
.productCard-zero .productCardHeader span {
  color: var(--red);
}

.productCardHeader {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.productCardHeader strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.productCardHeader span {
  color: var(--blue-dark);
  font-weight: 700;
  white-space: nowrap;
}

.alertPanel-danger {
  background: #fff1f2;
  border-color: #fecdd3;
}

.alertPanel-success {
  background: #eef8f2;
  border-color: #b8e0c8;
}

.alertPanel-warning {
  background: #fff8e1;
  border-color: #fde68a;
}

.alertRow {
  align-items: center;
  border-top: 1px solid rgba(148, 163, 184, 0.24);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1fr) minmax(170px, 0.9fr) 68px;
  padding-top: 8px;
}

.alertRow span {
  color: var(--muted);
}

.alertRow b {
  color: var(--blue-dark);
  text-align: right;
}

.smallEmpty {
  min-height: 64px;
  padding: 14px;
}

.employeeCard {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 13px;
}

.employeeHeader {
  align-items: center;
  display: flex;
  gap: 10px;
}

.employeeHeader b {
  align-items: center;
  background: #eef4ff;
  border-radius: 6px;
  color: var(--blue-dark);
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.employeeHeader strong {
  font-size: 18px;
}

.employeeStats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employeeStats span,
.employeeBest span,
.employeeBest small {
  color: var(--muted);
}

.employeeStats span {
  background: var(--panel-soft);
  border: 1px solid #edf2f7;
  border-radius: 7px;
  display: grid;
  gap: 2px;
  padding: 8px;
}

.employeeStats strong {
  color: var(--text);
}

.employeeBest {
  background: #f8fbff;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  display: grid;
  gap: 3px;
  padding: 9px;
}

.pairRow {
  align-items: center;
  border-top: 1px solid #edf2f7;
  display: grid;
  gap: 10px;
  grid-template-columns: 32px minmax(140px, 1fr) 74px minmax(120px, 0.8fr) 95px;
  padding-top: 8px;
}

.pairRow b {
  align-items: center;
  background: #eef4ff;
  border-radius: 6px;
  color: var(--blue-dark);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.pairRow span {
  color: var(--muted);
}

.tempoLayout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(420px, 1.25fr) minmax(320px, 0.75fr);
}

.tempoMap {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.tempoTile {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 10px;
}

.tempoTile strong {
  font-size: 18px;
}

.tempoTile span {
  color: var(--text);
  font-weight: 800;
}

.tempoTile small,
.tempoTile em,
.dayPartRow span,
.tempoInsightRow span {
  color: var(--muted);
}

.tempoTile em {
  font-size: 12px;
  font-style: normal;
  line-height: 1.25;
}

.tempoTile-high {
  background: #eaf8ef;
  border-color: #b8e0c8;
}

.tempoTile-high strong,
.tempoTile-high span {
  color: var(--green);
}

.tempoTile-mid {
  background: #eef4ff;
  border-color: #c7d8f7;
}

.tempoTile-low {
  background: #fff8e1;
  border-color: #fde68a;
}

.tempoTile-zero {
  background: #fff1f2;
  border-color: #fecdd3;
}

.tempoTile-zero strong,
.tempoTile-zero span {
  color: var(--red);
}

.dayPartList {
  display: grid;
  gap: 10px;
}

.dayPartRow,
.tempoInsightRow {
  align-items: center;
  border-top: 1px solid #edf2f7;
  display: grid;
  gap: 10px;
  padding-top: 9px;
}

.dayPartRow {
  grid-template-columns: 124px minmax(120px, 1fr) 72px 110px;
}

.dayPartLabel {
  display: grid;
  gap: 2px;
}

.dayPartLabel small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.tempoInsightRow {
  grid-template-columns: 68px minmax(180px, 1fr) 110px;
}

.tempoInsightRow b {
  text-align: right;
}

.productTotals {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 7px 12px;
}

.sellerMiniRow,
.leaderRow,
.shiftRow,
.technicalRow,
.goalLine,
.sellerCard {
  align-items: center;
  display: grid;
  gap: 10px;
}

.sellerMiniRow {
  grid-template-columns: minmax(120px, 1fr) 68px 90px;
}

.goalList {
  display: grid;
  gap: 8px;
}

.goalLine {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 1.2fr) 62px;
}

.goalLine > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.goalLine strong,
.sellerCard strong,
.productCardHeader strong {
  overflow-wrap: anywhere;
}

.positiveText {
  color: var(--green);
}

.negativeText {
  color: var(--red);
}

.leaderList {
  display: grid;
  gap: 7px;
}

.leaderRow {
  border-bottom: 1px solid #edf2f7;
  grid-template-columns: 32px minmax(120px, 1fr) 100px;
  padding: 7px 0;
}

.leaderRow:last-child {
  border-bottom: 0;
}

.leaderRow b,
.sellerCard b {
  align-items: center;
  background: #eef4ff;
  border-radius: 6px;
  color: var(--blue-dark);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.shiftRow {
  border-top: 1px solid #edf2f7;
  grid-template-columns: 105px minmax(160px, 1fr) 100px 100px;
  padding-top: 7px;
}

.shiftHeaderRow {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 10px;
  grid-template-columns: 105px minmax(160px, 1fr) 100px 100px;
  margin-bottom: 8px;
  padding: 8px 10px;
  text-transform: uppercase;
}

.wbcDays {
  display: grid;
  gap: 12px;
}

.wbcDayBlock {
  display: grid;
  gap: 8px;
}

.wbcDayHeader {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.wbcDayHeader span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.wbcDayStats {
  align-items: flex-end;
  display: grid;
  gap: 3px;
  justify-items: end;
  text-align: right;
}

.wbcDayStats b {
  font-size: 15px;
  font-weight: 900;
}

.wbcDayBlock .shiftHeaderRow,
.wbcDayBlock .shiftRow {
  grid-template-columns: minmax(120px, 1fr) 105px 90px 110px 150px 130px 80px;
}

.wbcDayBlock .totalRow {
  background: var(--panel-soft);
  border-radius: 7px;
  font-weight: 800;
  padding: 8px 10px;
}

.myjniaSummary {
  gap: 14px;
}

.myjniaKpiGrid {
  gap: 12px;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
}

.myjniaKpiGrid .metricCard {
  align-content: start;
  height: 100%;
  min-height: 150px;
  min-width: 0;
  padding: 16px;
}

.myjniaKpiGrid .metricCard > span {
  font-size: 12px;
  font-weight: 850;
  hyphens: none;
  letter-spacing: 0.025em;
  line-height: 1.25;
  min-height: 2.5em;
  overflow-wrap: normal;
  text-transform: uppercase;
  word-break: normal;
}

.myjniaKpiGrid .metricCard > strong {
  font-size: clamp(21px, 1.55vw, 26px);
}

.myjniaKpiGrid .metricCard > small {
  font-size: 12px;
}

.myjniaDayBlock,
.myjniaPeriodBlock {
  overflow-x: auto;
}

.wbcDayBlock .myjniaEmployeeGrid {
  grid-template-columns: minmax(150px, 1.25fr) 125px repeat(2, 96px) repeat(3, 118px) 105px 90px;
  min-width: 1080px;
}

.myjniaPeriodGrid {
  grid-template-columns: minmax(160px, 1.25fr) repeat(2, 105px) repeat(3, 125px) 110px;
  min-width: 900px;
}

.myjniaPeriodBlock .shiftRow:last-child {
  padding-bottom: 7px;
}

.premiumDayList {
  display: grid;
  gap: 12px;
}

.premiumDay {
  display: grid;
  gap: 6px;
}

.premiumDayHeader {
  background: #eef4ff;
  border: 1px solid #d7e3fb;
  border-radius: 7px;
  color: var(--blue-dark);
  font-weight: 800;
  padding: 8px 10px;
}

.wbcBonusDays,
.wbcBonusShiftList,
.wbcBonusPeople {
  display: grid;
  gap: 10px;
}

.wbcBonusDay {
  border-top: 2px solid var(--line);
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.wbcBonusDayHeader,
.wbcBonusShiftHeader {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.wbcBonusDayHeader > strong {
  font-size: 18px;
}

.wbcBonusDayHeader > span {
  color: var(--muted);
  font-weight: 700;
}

.wbcBonusShift {
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.wbcBonusShift-reached {
  border-left-color: var(--green);
}

.wbcBonusShift-failed {
  border-left-color: var(--red);
}

.wbcBonusShift-pending {
  border-left-color: #d69e00;
}

.wbcBonusShiftHeader > div {
  display: grid;
  gap: 2px;
}

.wbcBonusShiftHeader small,
.wbcBonusStats span,
.wbcBonusPerson span {
  color: var(--muted);
}

.wbcBonusShiftHeader > b {
  background: var(--panel-soft);
  border-radius: 6px;
  padding: 6px 8px;
}

.wbcBonusStats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
}

.wbcBonusStats > div {
  border-left: 1px solid var(--line);
  display: grid;
  gap: 3px;
  padding-left: 9px;
}

.wbcBonusStats > div:first-child {
  border-left: 0;
  padding-left: 0;
}

.wbcBonusPeopleHeader,
.wbcBonusPerson {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(130px, 1.2fr) minmax(130px, 1fr) 100px 72px 105px 105px;
}

.wbcBonusPeopleHeader {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  padding: 8px 10px;
  text-transform: uppercase;
}

.wbcBonusPerson {
  border-top: 1px solid #edf2f7;
  padding: 7px 10px 0;
}

.wbcBonusPerson b {
  text-align: right;
}

.myjniaBonusReportView,
.myjniaBonusDays,
.myjniaBonusShiftList {
  display: grid;
  gap: 14px;
}

.myjniaBonusMetricCards .metricCard:first-child {
  background: #f2fbf6;
  border-color: #87c9a4;
}

.myjniaBonusDay {
  display: grid;
  gap: 10px;
}

.myjniaBonusDayHeader {
  align-items: center;
  background: #eaf6ef;
  border: 1px solid #b9dfc8;
  border-radius: 8px;
  color: #24563b;
  display: flex;
  gap: 9px;
  padding: 9px 12px;
}

.myjniaBonusDayHeader span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.myjniaBonusDayHeader strong {
  font-size: 17px;
}

.myjniaBonusShiftCard {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid #94a3b8;
  border-radius: 9px;
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 13px;
}

.myjniaBonusShiftCard.reached {
  border-left-color: var(--green);
}

.myjniaBonusShiftCard.failed,
.myjniaBonusShiftCard.missing {
  border-left-color: var(--red);
}

.myjniaBonusShiftCard.inProgress {
  background: #fffef8;
  border-left-color: #d6a800;
}

.myjniaBonusShiftHeader {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.myjniaBonusShiftHeader > div {
  display: grid;
  gap: 3px;
}

.myjniaBonusShiftHeader > div > strong {
  font-size: 17px;
}

.myjniaBonusShiftHeader > div > span {
  font-weight: 750;
}

.myjniaBonusShiftHeader small,
.myjniaBonusShiftStats span {
  color: var(--muted);
}

.myjniaBonusShiftStats {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  overflow: hidden;
}

.myjniaBonusShiftStats > div {
  border-left: 1px solid var(--line);
  display: grid;
  gap: 4px;
  padding: 10px;
}

.myjniaBonusShiftStats > div:first-child {
  border-left: 0;
}

.myjniaBonusGap {
  background: #fff6d8;
  border: 1px solid #ead17a;
  border-radius: 7px;
  color: #715200;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 10px;
}

.myjniaBonusTable .dashboardStatusBadge {
  margin-left: 7px;
}

.myjniaBonusEmployeeSummary {
  margin-top: 2px;
}

.bonusPayoutSummaryView {
  display: grid;
  gap: 14px;
}

.bonusGrossNotice,
.bonusSummaryWarning {
  align-items: center;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}

.bonusGrossNotice {
  background: #fff8df;
  border: 1px solid #ead17a;
  color: #624a00;
  justify-content: space-between;
}

.bonusGrossNotice strong {
  font-size: 12px;
  letter-spacing: 0.035em;
}

.bonusGrossNotice span {
  font-size: 13px;
}

.bonusSummaryWarning {
  background: #fce8e6;
  border: 1px solid #e6a6a1;
  color: #8f1d16;
}

.bonusSummaryWarning > div {
  display: grid;
  gap: 2px;
}

.bonusSummaryWarning span {
  font-size: 13px;
}

.bonusSummaryMetricCards .metricCard {
  border-top: 3px solid #94a3b8;
}

.bonusSummaryMetricCards .bonusTotalMetric {
  background: #edf7ed;
  border-color: #70ad7b;
}

.bonusSummaryMetricCards .bonusProductMetric {
  background: #f3f8fd;
  border-color: #7faed6;
}

.bonusSummaryMetricCards .bonusWbcMetric {
  background: #f7f3fb;
  border-color: #a98ac2;
}

.bonusSummaryMetricCards .bonusMyjniaMetric {
  background: #effaf7;
  border-color: #6bb9a5;
}

.bonusSummaryBlock {
  overflow: hidden;
}

.bonusSummaryTable {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  min-width: 920px;
  width: 100%;
}

.bonusSummaryTable th,
.bonusSummaryTable td {
  border-bottom: 1px solid var(--line);
  padding: 10px 11px;
  text-align: right;
  vertical-align: middle;
}

.bonusSummaryTable thead th {
  background: #2f5f8f;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  white-space: normal;
}

.bonusSummaryTable th:first-child,
.bonusSummaryTable td:first-child {
  text-align: left;
}

.bonusSummaryTable tbody th {
  display: grid;
  gap: 5px;
  min-width: 230px;
}

.bonusSummaryRow.leader > th,
.bonusSummaryRow.leader > td {
  background: #edf7ed;
}

.bonusSummaryRow.incomplete > th:first-child {
  background: #fce8e6;
  color: #8f1d16;
}

.bonusAmountCell.top.product {
  background: #ddebf7;
  color: #1f4e78;
  font-weight: 850;
}

.bonusAmountCell.top.wbc {
  background: #e4dfec;
  color: #5b2c6f;
  font-weight: 850;
}

.bonusAmountCell.top.myjnia {
  background: #d9ead3;
  color: #0f6b5d;
  font-weight: 850;
}

.bonusAmountCell.total {
  font-weight: 850;
}

.bonusAmountCell.top.total {
  background: #c6e0b4;
  color: #1b5e20;
}

.bonusBadgeList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bonusBadge {
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  width: fit-content;
}

.bonusBadge.product {
  color: #1f4e78;
}

.bonusBadge.wbc {
  color: #6a3d7c;
}

.bonusBadge.myjnia {
  color: #0f6b5d;
}

.bonusBadge.total {
  color: #1b5e20;
}

.bonusIncompleteSources {
  font-weight: 650;
}

.bonusSummaryTotalRow th,
.bonusSummaryTotalRow td {
  background: #d9e2f3;
  border-bottom: 0;
  font-weight: 900;
}

.technicalRow {
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) 60px;
}

.topSellerBoard {
  display: grid;
  gap: 9px;
}

.sellerCard {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  grid-template-columns: 38px minmax(240px, 1fr) minmax(160px, 0.7fr) 90px;
  padding: 12px;
}

.sellerCard > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.commentCard {
  display: grid;
  gap: 8px;
}

.commentHeader {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.commentHeader > div:first-child {
  display: grid;
  gap: 3px;
}

.commentHeader > div:first-child span {
  color: var(--muted);
  font-size: 12px;
}

.commentActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.commentEditor {
  background: #fbfdff;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--text);
  line-height: 1.55;
  min-height: 430px;
  padding: 14px;
  resize: vertical;
  width: 100%;
  white-space: pre-wrap;
}

.commentEditor:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 111, 228, 0.12);
  outline: none;
}

@media (max-width: 760px) {
  .commentHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .commentActions {
    justify-content: flex-start;
  }
}

.conversionGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.conversionCard {
  display: grid;
  gap: 9px;
}

.conversionRow,
.topProductRow {
  align-items: center;
  display: grid;
  gap: 10px;
}

.conversionRow {
  grid-template-columns: minmax(110px, 1fr) minmax(90px, 1.2fr) 58px;
}

.miniBar,
.hourTrack {
  background: #edf2f7;
  border-radius: 5px;
  height: 10px;
  overflow: hidden;
}

.miniBar i,
.hourTrack i {
  background: var(--blue);
  display: block;
  height: 100%;
}

.hourlyView {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 12px;
}

.hourlyRow {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 46px minmax(130px, 1fr) 70px minmax(220px, 1.5fr);
  min-height: 30px;
}

.topProductList {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 9px;
}

.topProductRow {
  border-bottom: 1px solid #edf2f7;
  grid-template-columns: 34px minmax(220px, 1fr) minmax(140px, 0.8fr) 58px;
  padding: 8px 4px;
}

.topProductRow:last-child {
  border-bottom: 0;
}

.topProductRow b {
  align-items: center;
  background: #eef4ff;
  border-radius: 6px;
  color: var(--blue-dark);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.sheetTable {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 12px;
}

.sheetTable th,
.sheetTable td {
  border: 1px solid #e2e8f0;
  min-width: 72px;
  max-width: 280px;
  height: 28px;
  padding: 5px 7px;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sheetTable td {
  overflow: visible;
  text-overflow: clip;
}

.sheetTable thead th,
.rowHead {
  position: sticky;
  background: #edf2f7;
  color: #475569;
  font-weight: 700;
  text-align: center;
  z-index: 2;
}

.sheetTable thead th {
  top: 0;
}

.rowHead {
  left: 0;
  min-width: 46px !important;
  width: 46px;
}

.corner {
  z-index: 3;
}

.blankCell {
  color: transparent;
}

.tableLink {
  min-height: 30px;
  background: white;
  color: var(--blue);
  cursor: pointer;
  font: inherit;
  padding: 0 9px;
}

.linkButton {
  min-height: 34px;
}

.spin {
  animation: spin 0.9s linear infinite;
}

.coachingView {
  color: var(--text);
  min-width: 0;
}

.coachingScreenAnalysis,
.coachingSection,
.coachingSubgrid > *,
.coachingFindingList {
  min-width: 0;
}

.coachingHeader {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.coachingHeader h2,
.coachingHeader p {
  margin: 0;
}

.coachingHeader h2 {
  font-size: 24px;
  margin: 3px 0 4px;
}

.coachingPeriod {
  color: var(--muted);
  font-weight: 600;
}

.coachingEmployeeSelect {
  display: grid;
  flex: 0 1 360px;
  gap: 6px;
  min-width: 270px;
}

.coachingEmployeeSelect span,
.coachingTableActions label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.coachingEmployeeSelect select,
.coachingTableActions select {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--text);
  min-height: 40px;
  padding: 7px 10px;
}

.coachingShiftCount {
  align-items: center;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.coachingShiftCount span {
  color: var(--muted);
}

.coachingWarnings {
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-left: 5px solid #ea580c;
  border-radius: 8px;
  margin-bottom: 14px;
  padding: 9px 12px;
}

.coachingWarnings p {
  align-items: center;
  display: flex;
  gap: 8px;
  margin: 3px 0;
}

.coachingKpiGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  margin-bottom: 16px;
}

.coachingKpi {
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 144px;
  padding: 15px;
  position: relative;
  text-align: left;
}

button.coachingKpi:hover,
button.coachingKpi:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 7px 20px rgba(47, 111, 228, 0.14);
  outline: 3px solid rgba(47, 111, 228, 0.16);
}

.coachingKpi > span {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.25;
  min-height: 30px;
}

.coachingKpi > strong {
  color: #0f172a;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1;
  margin: 8px 0;
}

.coachingKpi > small {
  color: var(--muted);
  line-height: 1.35;
  padding-right: 20px;
}

.coachingKpi > svg {
  bottom: 12px;
  color: var(--blue);
  position: absolute;
  right: 12px;
}

.coachingFindingsGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.coachingFindingList {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 15px;
}

.coachingFindingList.strength {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.coachingFindingList.improve {
  background: #fff7ed;
  border-color: #fed7aa;
}

.coachingFindingList.topic {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.coachingFindingList h3 {
  font-size: 15px;
  margin: 0 0 10px;
}

.coachingFindingList ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

.coachingFindingList li::marker {
  font-weight: 800;
}

.coachingFindingList p {
  color: #475569;
  line-height: 1.4;
  margin: 3px 0 0;
}

.coachingSection {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  margin: 0 0 16px;
  padding: 16px;
  scroll-margin-top: 18px;
}

.coachingSection > h3 {
  font-size: 17px;
  margin: 0 0 14px;
  outline: none;
}

.coachingSection > h3:focus-visible {
  border-radius: 5px;
  box-shadow: 0 0 0 3px rgba(47, 111, 228, 0.2);
}

.coachingMetricStrip {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  margin-bottom: 14px;
}

.coachingMetricStrip > div {
  background: var(--panel-soft);
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 10px;
}

.coachingMetricStrip span {
  color: var(--muted);
  font-size: 12px;
}

.coachingMetricStrip strong {
  font-size: 16px;
}

.coachingContextNote {
  color: var(--muted);
  font-size: 13px;
  margin: -3px 0 14px;
}

.coachingSubgrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coachingTableBlock {
  min-width: 0;
}

.coachingTableBlock h4 {
  font-size: 14px;
  margin: 3px 0 9px;
}

.coachingTableWrap {
  border: 1px solid var(--line);
  border-radius: 7px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  width: 100%;
}

.coachingTable {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
  width: max-content;
}

.coachingTable th,
.coachingTable td {
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 9px;
  text-align: left;
  vertical-align: top;
}

.coachingTable th {
  background: #f1f5f9;
  color: #475569;
  font-weight: 800;
  white-space: nowrap;
}

.coachingTable tr:last-child td {
  border-bottom: 0;
}

.coachingInProgressRow td {
  background: #fff7ed;
  color: #7c2d12;
}

.coachingCategoryRow.strength td:last-child {
  background: #dcfce7;
  color: #166534;
}

.coachingCategoryRow.near td:last-child {
  background: #fef3c7;
  color: #92400e;
}

.coachingCategoryRow.improve td:last-child {
  background: #fee2e2;
  color: #991b1b;
}

.coachingCategoryRow.zero td:last-child {
  background: #fecaca;
  color: #7f1d1d;
}

.coachingStatus {
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.coachingEmpty {
  color: var(--muted);
  margin: 0;
  padding: 12px 0;
}

.coachingTableActions {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.coachingTableActions label {
  align-items: center;
  display: flex;
  gap: 8px;
}

.coachingTableActions select {
  min-height: 34px;
}

.coachingShowAll {
  margin-top: 10px;
}

.coachingPrintAction {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.coachingPrintOnly {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1200px) {
  .myjniaKpiGrid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }

  .coachingKpiGrid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 1100px) {
  .appShell,
  .reportGrid,
  .categoriesLayout,
  .tempoLayout,
  .previewLayout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
  }

  .sidebarSheetList {
    max-height: 260px;
  }

  .productGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .virtualGrid,
  .employeeGrid {
    grid-template-columns: 1fr;
  }

  .technicalGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .categoryListPanel,
  .editorPanel {
    min-height: auto;
  }

  .dashboardBonusTiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboardShiftToggle {
    grid-template-columns: 1fr 24px;
  }

  .dashboardShiftAmounts {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .myjniaBonusShiftStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .myjniaBonusShiftStats > div:nth-child(odd) {
    border-left: 0;
  }

  .coachingSubgrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .content {
    padding: 14px;
  }

  .topbar,
  .topActions {
    align-items: stretch;
    flex-direction: column;
  }

  .kpiGrid,
  .editorGrid,
  .categorySwitches,
  .rulesGrid,
  .productGrid,
  .technicalGrid,
  .virtualGrid,
  .employeeGrid,
  .tempoLayout,
  .splitAppGrid,
  .compactRow,
  .conversionRow,
  .hourlyRow,
  .topProductRow,
  .goalLine,
  .sellerMiniRow,
  .leaderRow,
  .alertRow,
  .pairRow,
  .employeeStats,
  .dayPartRow,
  .tempoInsightRow,
  .shiftRow,
  .shiftHeaderRow,
  .technicalRow,
  .sellerCard {
    grid-template-columns: 1fr;
  }

  .wbcDayHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .wbcShiftPlanHeader,
  .wbcShiftPlanRow,
  .myjniaSaleTypeField,
  .wbcBonusStats,
  .wbcBonusPeopleHeader,
  .wbcBonusPerson {
    grid-template-columns: 1fr;
  }

  .wbcBonusDayHeader,
  .wbcBonusShiftHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .wbcDayBlock .shiftRow,
  .wbcDayBlock .shiftHeaderRow {
    grid-template-columns: 1fr;
  }

  .wbcDayBlock .myjniaEmployeeGrid,
  .myjniaPeriodGrid {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .dashboardBonusTiles,
  .dashboardBestTile,
  .dashboardShiftToggle,
  .dashboardShiftAmounts {
    grid-template-columns: 1fr;
  }

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

  .myjniaKpiGrid .metricCard {
    min-height: 132px;
  }

  .myjniaKpiGrid .metricCard > span {
    min-height: auto;
  }

  .dashboardBestShift,
  .dashboardShiftPay {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 8px;
  }

  .dashboardShiftAmounts {
    grid-column: auto;
    grid-row: auto;
  }

  .dashboardShiftToggle > svg {
    position: absolute;
    right: 16px;
    top: 16px;
  }

  .dashboardShiftToggle {
    position: relative;
  }

  .dashboardShiftGrandTotal {
    align-items: flex-end;
    flex-direction: column;
    gap: 5px;
  }

  .coachingHeader,
  .coachingTableActions {
    align-items: stretch;
    flex-direction: column;
  }

  .coachingEmployeeSelect {
    min-width: 0;
  }

  .coachingKpiGrid,
  .coachingFindingsGrid {
    grid-template-columns: 1fr;
  }
}

@media print {
  @page {
    margin: 7mm;
    size: A4 landscape;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-family: Arial, sans-serif;
  }

  body * {
    visibility: hidden !important;
  }

  .coachingPrintCard,
  .coachingPrintCard * {
    visibility: visible !important;
  }

  .sidebar,
  .devBanner,
  .panelHeader,
  .sheetMeta,
  .excelToggle,
  .coachingScreenOnly {
    display: none !important;
  }

  .appShell,
  .content,
  .previewFocus,
  .previewLayout,
  .sheetPane,
  .coachingView {
    display: block !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .coachingPrintCard {
    display: block !important;
    font-size: 8pt;
    position: static;
    width: 100%;
  }

  .coachingPrintPage {
    break-inside: auto;
    min-height: 183mm;
  }

  .coachingPrintPage1 {
    break-after: page;
  }

  .coachingPrintHeader {
    border-bottom: 2px solid #111;
    margin-bottom: 3mm;
    padding-bottom: 2mm;
  }

  .coachingPrintHeader h1 {
    font-size: 16pt;
    margin: 0 0 1.5mm;
  }

  .coachingPrintHeader div,
  .coachingPrintPageHeader {
    display: flex;
    gap: 8mm;
  }

  .coachingPrintWarning {
    border: 1px solid #444;
    margin-bottom: 2mm;
    padding: 1.5mm;
  }

  .coachingKpiGrid.printable {
    gap: 2mm;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 3mm;
  }

  .coachingKpiGrid.printable .coachingKpi {
    border: 1px solid #555;
    border-radius: 0;
    min-height: 23mm;
    padding: 2mm;
  }

  .coachingKpiGrid.printable .coachingKpi > span {
    color: #000;
    font-size: 7pt;
    min-height: auto;
  }

  .coachingKpiGrid.printable .coachingKpi > strong {
    color: #000;
    font-size: 13pt;
    margin: 1mm 0;
  }

  .coachingKpiGrid.printable .coachingKpi > small {
    color: #222;
    font-size: 6.8pt;
    line-height: 1.2;
    padding: 0;
  }

  .coachingPrintDetailGrid {
    display: grid;
    gap: 3mm;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coachingPrintDetailGrid > section,
  .coachingPrintSummary,
  .coachingFindingList,
  .coachingNotesField {
    break-inside: avoid;
  }

  .coachingPrintDetailGrid h2,
  .coachingPrintPage2 > h2,
  .coachingPrintSummary h2 {
    border-bottom: 1px solid #555;
    font-size: 10pt;
    margin: 1.5mm 0 1mm;
  }

  .coachingPrintDetailGrid h3 {
    font-size: 8pt;
    margin: 1.2mm 0 0.8mm;
  }

  .coachingPrintDetailGrid p,
  .coachingPrintSummary p {
    line-height: 1.25;
    margin: 0 0 1mm;
  }

  .coachingPrintCard .coachingTableWrap {
    border: 1px solid #777;
    overflow: visible;
  }

  .coachingPrintCard .coachingTable {
    font-size: 6.5pt;
    table-layout: auto;
    width: 100%;
  }

  .coachingPrintCard .coachingTable thead {
    display: table-header-group;
  }

  .coachingPrintCard .coachingTable tr {
    break-inside: avoid;
  }

  .coachingPrintCard .coachingTable th,
  .coachingPrintCard .coachingTable td {
    background: #fff !important;
    border: 1px solid #999;
    color: #000 !important;
    padding: 1mm;
  }

  .coachingPrintSummary {
    border: 1px solid #555;
    margin-top: 2mm;
    padding: 1.5mm;
  }

  .coachingPrintPageHeader {
    border-bottom: 1px solid #333;
    justify-content: space-between;
    margin-bottom: 2mm;
    padding-bottom: 1mm;
  }

  .coachingPrintFindings {
    display: grid;
    gap: 2mm;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 2mm;
  }

  .coachingPrintFindings .coachingFindingList {
    background: #fff !important;
    border: 1px solid #555;
    border-radius: 0;
    padding: 2mm;
  }

  .coachingPrintFindings .coachingFindingList h3 {
    font-size: 8pt;
    margin-bottom: 1mm;
  }

  .coachingPrintFindings .coachingFindingList ol {
    gap: 1mm;
    padding-left: 4mm;
  }

  .coachingPrintFindings .coachingFindingList p {
    color: #000;
    font-size: 6.7pt;
    line-height: 1.2;
  }

  .coachingManualFields {
    display: grid;
    gap: 2mm;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2mm;
  }

  .coachingNotesField {
    border: 1px solid #555;
    height: 22mm;
    padding: 1.5mm;
  }

  .coachingDates {
    display: grid;
    gap: 3mm 8mm;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1mm;
  }
}

/* ==========================================================================
   KASPER SYSTEM THEME & MODULAR DASHBOARD
   ========================================================================== */

/* ==========================================================================
   KASPER SYSTEM THEME & MODULAR DASHBOARD
   ========================================================================== */

:root {
  --kasper-green: #276738;
  --kasper-green-dark: #1b542c;
  --kasper-green-light: #edf7ee;
  --kasper-green-soft: #f4faf4;
  --kasper-yellow: #f59e0b;
  --kasper-border: #e2e8f0;
  --kasper-text-dark: #111827;
  --kasper-text-muted: #4b5563;
}

/* KASPER Login Screen */
.kasperLoginWrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f9f8;
  padding: 40px 24px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.kasperBgDecor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.kasperLoginCard {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(226, 232, 240, 0.85);
  width: 100%;
  max-width: 1100px;
  min-height: 520px;
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1.2fr 390px;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .kasperLoginCard {
    grid-template-columns: 1fr;
    max-width: 520px;
    padding: 40px 32px;
    gap: 36px;
  }
}

.kasperLoginLeft {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.kasperGhostBrand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
}

.kasperGhostBrand h1 {
  font-size: 36px;
  font-weight: 900;
  color: #111827;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.5px;
}

.kasperGhostBrand span {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
}

.kasperLoginLeft h2 {
  font-size: 36px;
  font-weight: 800;
  color: #144222;
  margin: 0;
  line-height: 1.25;
  white-space: pre-line;
}

.kasperLoginLeft p {
  color: #4b5563;
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  max-width: 460px;
}

.kasperAccentLine {
  width: 72px;
  height: 4.5px;
  background: var(--kasper-yellow);
  border-radius: 3px;
  margin-top: 18px;
}

.kasperLoginRight {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 42px 36px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.04);
}

.kasperLoginBoxHeader {
  margin-bottom: 26px;
}

.kasperEyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 6px;
}

.kasperLoginBoxHeader h3 {
  font-size: 23px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

/* Global Form Elements */
.formGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.formGroup label {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
}

.formInput {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 16px;
  color: #111827;
  background: #ffffff;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.formInput:focus {
  border-color: #276738;
  box-shadow: 0 0 0 3px rgba(39, 103, 56, 0.12);
}

.formInput::placeholder {
  color: #9ca3af;
}

.kasperBtnPrimary {
  width: 100%;
  padding: 14px 22px;
  background: #276738;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s;
  margin-top: 8px;
}

.kasperBtnPrimary:hover:not(:disabled) {
  background: #1e532c;
}

.kasperBtnPrimary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.statusDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-block;
  opacity: 0.9;
}

.loginErrorBanner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* KASPER Hub Dashboard */
.kasperHubShell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
  background: #f8fafc;
}

@media (max-width: 900px) {
  .kasperHubShell {
    grid-template-columns: 1fr;
  }
  .kasperSidebar {
    display: none;
  }
}

.kasperSidebar {
  background: #ffffff;
  border-right: 1px solid var(--kasper-border);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kasperSidebarTop {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.kasperSidebarBrand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kasperSidebarBrandTitle {
  font-size: 16px;
  font-weight: 800;
  color: var(--kasper-text-dark);
  margin: 0;
  line-height: 1.2;
}

.kasperSidebarBrandSubtitle {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.kasperNavList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kasperNavButton {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}

.kasperNavButton:hover {
  background: #f1f5f9;
  color: var(--kasper-text-dark);
}

.kasperNavButton.active {
  background: var(--kasper-green-light);
  color: var(--kasper-green-dark);
  font-weight: 700;
}

.kasperLogoutBtn {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--kasper-border);
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.kasperLogoutBtn:hover {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.kasperMainArea {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.kasperTopbar {
  background: #ffffff;
  border-bottom: 1px solid var(--kasper-border);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kasperTopbarLeft {
  display: flex;
  flex-direction: column;
}

.kasperLoggedLabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #64748b;
}

.kasperLoggedUser {
  font-size: 17px;
  font-weight: 800;
  color: var(--kasper-text-dark);
}

.kasperTenantBadge {
  background: #ffffff;
  border: 1px solid var(--kasper-border);
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--kasper-text-dark);
}

.kasperContent {
  padding: 24px 32px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.kasperDashboardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
}

.kasperGreeting {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kasperGreeting h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--kasper-text-dark);
  margin: 0;
}

.kasperGreeting p {
  color: #475569;
  font-size: 14px;
  margin: 0;
}

.kasperTenantCard {
  background: #ffffff;
  border: 1px solid var(--kasper-border);
  border-radius: 12px;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.kasperTenantCard span {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.kasperTenantCard strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--kasper-green);
}

.kasperModuleGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.kasperModuleCard {
  background: #ffffff;
  border: 1px solid var(--kasper-border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: transform 0.15s, box-shadow 0.15s;
}

.kasperModuleCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.kasperModuleCardTop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kasperModuleIconBox {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--kasper-green-light);
  color: var(--kasper-green);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}

.kasperModuleCard h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--kasper-text-dark);
  margin: 0;
}

.kasperModuleCard p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

.kasperOpenModuleBtn {
  width: 100%;
  padding: 10px 16px;
  background: #2f6f3e;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.kasperOpenModuleBtn:hover {
  background: #255831;
}

/* Return to Hub Button inside Module View */
.kasperReturnBar {
  background: #ffffff;
  border-bottom: 1px solid var(--kasper-border);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kasperReturnBtn {
  background: var(--kasper-green-light);
  color: var(--kasper-green-dark);
  border: 1px solid rgba(39, 103, 56, 0.2);
  border-radius: 8px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.kasperReturnBtn:hover {
  background: var(--kasper-green);
  color: #ffffff;
}

/* Modal styles */
.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.modalBox {
  background: #ffffff;
  border-radius: 14px;
  width: 100%;
  max-width: 650px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}

.modalHeader h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.modalCloseBtn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: grid;
  place-items: center;
}

.modalCloseBtn:hover {
  background: var(--panel-soft);
  color: var(--text);
}

.modalBody {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.modalFooter {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.usersTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.usersTable th,
.usersTable td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.usersTable th {
  background: var(--panel-soft);
  font-weight: 600;
  color: var(--muted);
}

.userStatusActive {
  color: var(--green);
  font-weight: 600;
}

.userStatusInactive {
  color: var(--red);
  font-weight: 600;
}

.roleBadgeAdmin {
  background: #dbeafe;
  color: #1e40af;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.roleBadgePartner {
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid #bbf7d0;
}

.roleBadgeLeader {
  background: #fef3c7;
  color: #b45309;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid #fde68a;
}

.roleBadgeUser {
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}

.moduleTag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  white-space: nowrap;
}

.moduleTag.analyzer {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.moduleTag.analyzer_dev {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.moduleTag.invoices {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.moduleTag.hr {
  background: #faf5ff;
  border-color: #e9d5ff;
  color: #7e22ce;
}

.leaderLimitBadge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.leaderLimitBadge.ok {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.leaderLimitBadge.full {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Station Card Grouping (Variant A: Partner + Leaders) */
.stationCard {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
  margin-bottom: 20px;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.stationCard:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.stationCardPartnerHeader {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: #ffffff;
}

.stationCardPartnerInfo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}

.stationCardPartnerMeta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.stationCardActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.stationCardLeadersBox {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stationCardLeadersHeader {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stationLeaderRow {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  transition: border-color 0.15s;
}

.stationLeaderRow:hover {
  border-color: #cbd5e1;
}

.stationLeaderInfo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
}

.stationLeaderBranch {
  color: #94a3b8;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.stationLeaderMeta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.stationNoLeadersNotice {
  padding: 10px 14px;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbarUserSection {
  display: flex;
  align-items: center;
  gap: 12px;
}

.userBadgePill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

/* ==========================================================================
   HR / TERMINY MODULE STYLES (8 KPI CARDS + DATA TABLE + MODALS)
   ========================================================================== */

.hrShell {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 32px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

.hrHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 18px 24px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.hrHeaderLeft {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hrBackBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hrBackBtn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.hrTitleGroup h2 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hrTitleGroup p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

.hrActionGroup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hrBtnPrimary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #1e3a2b;
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.hrBtnPrimary:hover {
  background: #2d5a3f;
  transform: translateY(-1px);
}

.hrBtnSecondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  color: #1e3a2b;
  border: 1.5px solid #1e3a2b;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hrBtnSecondary:hover {
  background: #f0fdf4;
}

.hrBtnGhost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hrBtnGhost:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* 8 KPI Cards Grid */
.hrKpiGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.hrKpiCard {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  user-select: none;
}

.hrKpiCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

.hrKpiCard.active {
  border-color: #1e3a2b;
  box-shadow: 0 0 0 2px rgba(30, 58, 43, 0.2);
  background: #fbfdfb;
}

.hrKpiHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hrKpiValue {
  font-size: 26px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
  margin: 4px 0 2px 0;
}

.hrKpiSub {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

/* Card variants */
.hrCardExpired { border-color: #fca5a5; background: #fffbfb; }
.hrCardExpired .hrKpiValue { color: #dc2626; }
.hrCardExpired.active { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25); }

.hrCard14 { border-color: #fdba74; background: #fffcf8; }
.hrCard14 .hrKpiValue { color: #ea580c; }
.hrCard14.active { border-color: #ea580c; box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.25); }

.hrCard30 { border-color: #fde047; background: #fffef8; }
.hrCard30 .hrKpiValue { color: #ca8a04; }
.hrCard30.active { border-color: #ca8a04; box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.25); }

.hrCard45 { border-color: #7dd3fc; background: #fbfdff; }
.hrCard45 .hrKpiValue { color: #0284c7; }
.hrCard45.active { border-color: #0284c7; box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25); }

.hrCard60 { border-color: #86efac; background: #fbfefb; }
.hrCard60 .hrKpiValue { color: #16a34a; }
.hrCard60.active { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25); }

.hrCardBday { border-color: #f472b6; background: #fffbfe; }
.hrCardBday .hrKpiValue { color: #db2777; }
.hrCardBday.active { border-color: #db2777; box-shadow: 0 0 0 2px rgba(219, 39, 119, 0.25); }

.hrCardAnniv { border-color: #a5b4fc; background: #fbfbfe; }
.hrCardAnniv .hrKpiValue { color: #4f46e5; }
.hrCardAnniv.active { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25); }

/* Search and filter bar */
.hrFilterBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.hrSearchBox {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 8px 14px;
  border-radius: 8px;
  flex: 1;
  max-width: 400px;
}

.hrSearchBox input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 13px;
  color: #0f172a;
}

.hrActiveFilterTag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.hrResetFilterBtn {
  background: #e2e8f0;
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 11px;
}

/* Data Table */
.hrTableContainer {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.hrTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hrTable th {
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  white-space: nowrap;
}

.hrTable td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
}

.hrTable tr:hover td {
  background: #f8fafc;
}

.hrEmpName {
  font-weight: 700;
  color: #0f172a;
  display: block;
}

.hrEmpLse {
  display: inline-block;
  background: #f1f5f9;
  color: #475569;
  font-family: monospace;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* Status Badges */
.badge-danger {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
}

.badge-critical {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
}

.badge-warning {
  background: #fefce8;
  color: #854d0e;
  border: 1px solid #fef08a;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
}

.badge-info {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
}

.badge-notice {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
}

.badge-success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
}

.badge-gray {
  background: #f8fafc;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
}

.hrTableActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hrActionIconBtn {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.hrActionIconBtn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.hrActionIconBtn.deleteBtn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* ==========================================================================
   FAKTURY / KSEF MODULE STYLES (SEGREGATOR FAKTUR)
   ========================================================================== */

.invShell {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 32px;
  max-width: 1650px;
  margin: 0 auto;
  width: 100%;
}

.invHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 18px 24px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  flex-wrap: wrap;
  gap: 16px;
}

.invHeaderLeft {
  display: flex;
  align-items: center;
  gap: 16px;
}

.invTitleGroup h2 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 3px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.invTitleGroup p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.invStationBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.invActionGroup {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 8 KPI Cards Grid */
.invKpiGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1280px) {
  .invKpiGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .invKpiGrid {
    grid-template-columns: 1fr;
  }
}

.invKpiCard {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  user-select: none;
  position: relative;
  overflow: hidden;
}

.invKpiCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.invKpiCard.active {
  box-shadow: 0 0 0 2.5px var(--kpi-border, #1e3a2b);
  background: #fbfdfb;
}

.invKpiCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--kpi-accent, #94a3b8);
}

.invKpiHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.invKpiIconBadge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.invKpiValue {
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
  margin: 4px 0 2px 0;
}

.invKpiSub {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

/* Specific KPI variants */
.invCardAll { --kpi-accent: #64748b; --kpi-border: #64748b; }
.invCardDue { --kpi-accent: #2563eb; --kpi-border: #2563eb; background: #fafbff; }
.invCardDue .invKpiValue { color: #1d4ed8; }
.invCardOverdue { --kpi-accent: #dc2626; --kpi-border: #dc2626; background: #fffbfb; }
.invCardOverdue .invKpiValue { color: #dc2626; }
.invCardToday { --kpi-accent: #ea580c; --kpi-border: #ea580c; background: #fffcf8; }
.invCardToday .invKpiValue { color: #ea580c; }
.invCardCost { --kpi-accent: #059669; --kpi-border: #059669; background: #f9fdfa; }
.invCardCost .invKpiValue { color: #047857; }
.invCardPaid { --kpi-accent: #16a34a; --kpi-border: #16a34a; background: #fbfefb; }
.invCardPaid .invKpiValue { color: #15803d; }
.invCardWithheld { --kpi-accent: #6b7280; --kpi-border: #6b7280; }
.invCardCorrection { --kpi-accent: #9333ea; --kpi-border: #9333ea; background: #fdfaff; }
.invCardCorrection .invKpiValue { color: #7e22ce; }
.invCardWeek { --kpi-accent: #eab308; --kpi-border: #eab308; background: #fffef2; }
.invCardWeek .invKpiValue { color: #a16207; }
.invCardClarification { --kpi-accent: #d97706; --kpi-border: #d97706; background: #fffdf5; }
.invCardClarification .invKpiValue { color: #b45309; }
.invCardKolporterBalance { --kpi-accent: #0284c7; --kpi-border: #0284c7; background: #f0f9ff; }
.invCardKolporterBalance .invKpiValue { color: #0369a1; }
.invCardPaidAuto { --kpi-accent: #0d9488; --kpi-border: #0d9488; background: #f0fdfa; }
.invCardPaidAuto .invKpiValue { color: #0f766e; }
.invCardCompensation { --kpi-accent: #65a30d; --kpi-border: #65a30d; background: #f7fee7; }
.invCardCompensation .invKpiValue { color: #4d7c0f; }

/* Filter & Search Bar */
.invFilterBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  flex-wrap: wrap;
}

.invSearchBox {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 8px 14px;
  border-radius: 8px;
  flex: 1;
  max-width: 420px;
  min-width: 280px;
}

.invSearchBox input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 13px;
  color: #0f172a;
}

.invSearchClearBtn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.invSearchClearBtn:hover {
  color: #475569;
}

.invPillsGroup {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.invPillBtn {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.invPillBtn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
}

.invPillBtn.active {
  background: #1e3a2b;
  border-color: #1e3a2b;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(30, 58, 43, 0.25);
}

.invPillBadge {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
}

.invPillBtn.active .invPillBadge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.invPillBtn.pillKolporter {
  border-color: #bae6fd;
  color: #0369a1;
  background: #f0f9ff;
}

.invPillBtn.pillKolporter:hover {
  border-color: #7dd3fc;
  background: #e0f2fe;
}

.invPillBtn.pillKolporter.active {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}

.invPillBtn.pillKolporter .invPillBadge {
  background: #e0f2fe;
  color: #0369a1;
}

.invPillBtn.pillKolporter.active .invPillBadge {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

/* Data Table */
.invTableContainer {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.invTableHeaderBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.invTableHeaderBar h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.invTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.invTable th {
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.invTable td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
}

.invTable tr:hover td {
  background: #fbfdfb;
}

.invStatusBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.invStatusDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.invFileBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
}

.invFilePdf {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.invFilePdf:hover {
  background: #fecaca;
  color: #b91c1c;
}

.invFileXml {
  background: #dbeafe;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.invFileXml:hover {
  background: #bfdbfe;
  color: #1d4ed8;
}

.invSelectStatus {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  max-width: 180px;
}

.invSelectStatus:hover {
  border-color: #94a3b8;
}

.invSelectStatus:focus {
  border-color: #1e3a2b;
  box-shadow: 0 0 0 2px rgba(30, 58, 43, 0.15);
}

/* Checkbox and Bulk Actions */
.invCheckbox {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  accent-color: var(--kasper-green-dark, #1e3a2b);
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.1s ease;
}

.invCheckbox:hover {
  transform: scale(1.08);
}

.invTable tr.invRowSelected td {
  background: #f0fdf4 !important;
}

.invBulkBar {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #ffffff;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  border-bottom: 2px solid #334155;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.invBulkBarLeft {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.invBulkBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #22c55e;
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
}

.invBulkSum {
  font-size: 13px;
  color: #cbd5e1;
}

.invBulkSum strong {
  font-size: 15px;
  color: #ffffff;
  font-weight: 800;
  margin-left: 4px;
}

.invBulkBarActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.invBulkBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.invBulkBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.invBulkBtn:active {
  transform: translateY(0);
}

.invBulkBtnExcel {
  background: #107c41;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(16, 124, 65, 0.3);
}

.invBulkBtnZip {
  background: #6366f1;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

.invBulkBtnBank {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.invBulkBtnElixir {
  background: #0f766e;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.3);
}

.invBulkBtnXml {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.invBulkBtnPaid {
  background: #15803d;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.3);
}

.invBulkBtnArchive {
  background: #d97706;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
}

.invBulkBtnClear {
  background: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.invBulkBtnClear:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}

/* --- Zakładki podrzędne (SubTabs) i Moduł Archiwum --- */
.invSubTabsBar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 12px;
}

.invSubTabBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.invSubTabBtn:hover {
  color: #1e293b;
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.invSubTabBtn.active {
  color: #ffffff;
  background: var(--kasper-green-dark, #1e3a2b);
  border-color: var(--kasper-green-dark, #1e3a2b);
  box-shadow: 0 3px 10px rgba(30, 58, 43, 0.25);
}

.invSubTabBtn.active.invSubTabArchive {
  background: #334155;
  border-color: #334155;
  box-shadow: 0 3px 10px rgba(51, 65, 85, 0.25);
}

.invSubTabBadge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}

.invSubTabBtn.active .invSubTabBadge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.invSubTabBadgeArchive {
  background: #e2e8f0;
  color: #475569;
}

.invBulkBtnRestore {
  background: #16a34a;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}

.invRestoreBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.invRestoreBtn:hover {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}

.invCardArchAll {
  border-left: 4px solid #475569;
}

.invCardArchPaid {
  border-left: 4px solid #16a34a;
}

.invCardArchCost {
  border-left: 4px solid #0d9488;
}

.invCardArchKolp {
  border-left: 4px solid #0284c7;
}

/* --- Zakładka Duplikaty --- */
.invSubTabBtn.active.invSubTabDup {
  background: #b45309;
  border-color: #b45309;
  box-shadow: 0 3px 10px rgba(180, 83, 9, 0.25);
}

.invSubTabBadgeDup {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.invSubTabBadgeDupActive {
  background: #f59e0b;
  color: #ffffff;
}

.invDupBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 20px;
}

.invDupBannerText {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.4;
}

.invDupBannerActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.invDupDeleteBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.invDupDeleteBtn:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

.invDupPreviewBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #0369a1;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.invDupPreviewBtn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.invOriginalBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.invOriginalBadge.paid {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.invOriginalBadge.archived {
  background: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}

.invBulkBtnClearAll {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

/* --- Podzakładka Do wyjaśnienia --- */
.invSubTabBtn.active.invSubTabClarification {
  background: #d97706;
  border-color: #d97706;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.25);
}

.invSubTabBadgeClarification {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.invSubTabBadgeClarificationActive {
  background: #d97706;
  color: #ffffff;
}

/* --- Edycja terminu płatności --- */
.invEditDateBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 3px;
}

.invEditDateBtn:hover {
  background: #d97706;
  color: #ffffff;
  border-color: #d97706;
  box-shadow: 0 2px 5px rgba(217, 119, 6, 0.25);
}

.invDateModalRow {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}