/**
 * Material UI DataGrid Styles
 * Ręczne style dla @mui/x-data-grid - naprawia problem z importem CSS z node_modules w Next.js 16
 */

.MuiDataGrid-root {
  border: 1px solid rgba(224, 224, 224, 1);
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.43;
  display: flex;
  flex-direction: column;
  position: relative;
}

.MuiDataGrid-main {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.MuiDataGrid-columnHeaders {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  background-color: #fafafa;
  border-bottom: 1px solid rgba(224, 224, 224, 1);
}

.MuiDataGrid-columnHeader {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 56px;
  outline: none;
  font-weight: 500;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.87);
  user-select: none;
}

.MuiDataGrid-columnHeaderTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.MuiDataGrid-virtualScroller {
  overflow: auto;
  position: relative;
  flex: 1 1 auto;
}

.MuiDataGrid-virtualScrollerContent {
  position: relative;
}

.MuiDataGrid-virtualScrollerRenderZone {
  position: absolute;
  top: 0;
  left: 0;
}

.MuiDataGrid-row {
  display: flex;
  width: fit-content;
  border-bottom: 1px solid rgba(224, 224, 224, 1);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.MuiDataGrid-row:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.MuiDataGrid-row.Mui-selected {
  background-color: rgba(25, 118, 210, 0.08);
}

.MuiDataGrid-row.Mui-selected:hover {
  background-color: rgba(25, 118, 210, 0.12);
}

.MuiDataGrid-cell {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-right: 1px solid transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
  min-height: 52px;
}

.MuiDataGrid-cell:focus,
.MuiDataGrid-cell:focus-within {
  outline: solid rgba(25, 118, 210, 0.5) 1px;
  outline-offset: -1px;
}

.MuiDataGrid-footerContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  border-top: 1px solid rgba(224, 224, 224, 1);
}

.MuiDataGrid-selectedRowCount {
  padding: 0 16px;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
}

.MuiDataGrid-overlay {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 4;
}

.MuiDataGrid-overlayWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.MuiDataGrid-loadingOverlay {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
}

.MuiDataGrid-noRowsOverlay {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
}

/* Toolbar */
.MuiDataGrid-toolbarContainer {
  display: flex;
  align-items: center;
  padding: 8px;
  gap: 8px;
  border-bottom: 1px solid rgba(224, 224, 224, 1);
}

/* Menu */
.MuiDataGrid-menu {
  position: absolute;
  z-index: 1300;
}

.MuiDataGrid-menuList {
  outline: 0;
}

/* Pagination */
.MuiTablePagination-root {
  overflow: hidden;
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.875rem;
}

.MuiTablePagination-toolbar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-height: 52px;
}

.MuiTablePagination-spacer {
  flex: 1 1 100%;
}

.MuiTablePagination-selectLabel,
.MuiTablePagination-displayedRows {
  margin: 0;
  font-size: 0.875rem;
}

.MuiTablePagination-select {
  padding-left: 8px;
  padding-right: 24px;
  text-align: right;
  text-align-last: right;
}

.MuiTablePagination-actions {
  display: flex;
  margin-left: 20px;
}

/* Checkbox */
.MuiDataGrid-checkboxInput {
  padding: 0;
}

/* Sort Icon */
.MuiDataGrid-sortIcon {
  font-size: 1.2rem;
  opacity: 0.5;
  margin-left: 4px;
}

.MuiDataGrid-columnHeader--sorted .MuiDataGrid-sortIcon {
  opacity: 1;
}

/* Column separator */
.MuiDataGrid-columnSeparator {
  position: absolute;
  right: -12px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: rgba(224, 224, 224, 1);
}

.MuiDataGrid-columnSeparator--resizable {
  cursor: col-resize;
  touch-action: none;
}

.MuiDataGrid-columnSeparator--resizing {
  color: rgba(25, 118, 210, 1);
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  .MuiDataGrid-root {
    border-color: rgba(81, 81, 81, 1);
    color: rgba(255, 255, 255, 0.87);
  }

  .MuiDataGrid-columnHeaders {
    background-color: rgba(30, 30, 30, 1);
    border-bottom-color: rgba(81, 81, 81, 1);
  }

  .MuiDataGrid-columnHeader {
    color: rgba(255, 255, 255, 0.87);
  }

  .MuiDataGrid-row {
    border-bottom-color: rgba(81, 81, 81, 1);
  }

  .MuiDataGrid-row:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .MuiDataGrid-row.Mui-selected {
    background-color: rgba(144, 202, 249, 0.16);
  }

  .MuiDataGrid-row.Mui-selected:hover {
    background-color: rgba(144, 202, 249, 0.24);
  }

  .MuiDataGrid-footerContainer {
    border-top-color: rgba(81, 81, 81, 1);
  }

  .MuiDataGrid-toolbarContainer {
    border-bottom-color: rgba(81, 81, 81, 1);
  }

  .MuiDataGrid-columnSeparator {
    color: rgba(81, 81, 81, 1);
  }
}

/* Scrollbar styling */
.MuiDataGrid-virtualScroller::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.MuiDataGrid-virtualScroller::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Column menu */
.MuiDataGrid-columnHeaderTitleContainer {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}

.MuiDataGrid-iconButtonContainer {
  display: flex;
  visibility: hidden;
  width: 0;
  transition: width 0.2s;
}

.MuiDataGrid-columnHeader:hover .MuiDataGrid-iconButtonContainer {
  visibility: visible;
  width: auto;
}

/* Panel */
.MuiDataGrid-panel {
  display: flex;
  flex-direction: column;
  max-height: 450px;
}

.MuiDataGrid-panelHeader {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(224, 224, 224, 1);
}

.MuiDataGrid-panelContent {
  display: flex;
  flex-direction: column;
  overflow: auto;
  flex: 1 1 auto;
}

.MuiDataGrid-panelFooter {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid rgba(224, 224, 224, 1);
}

/* Filter panel */
.MuiDataGrid-filterForm {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
}

.MuiDataGrid-filterFormDeleteIcon {
  justify-content: flex-end;
}

.MuiDataGrid-filterFormLinkOperatorInput,
.MuiDataGrid-filterFormColumnInput,
.MuiDataGrid-filterFormOperatorInput,
.MuiDataGrid-filterFormValueInput {
  width: 100%;
}

/* Density */
.MuiDataGrid-root.MuiDataGrid--densityCompact .MuiDataGrid-cell {
  min-height: 38px;
}

.MuiDataGrid-root.MuiDataGrid--densityCompact .MuiDataGrid-columnHeader {
  height: 38px;
}

.MuiDataGrid-root.MuiDataGrid--densityStandard .MuiDataGrid-cell {
  min-height: 52px;
}

.MuiDataGrid-root.MuiDataGrid--densityStandard .MuiDataGrid-columnHeader {
  height: 56px;
}

.MuiDataGrid-root.MuiDataGrid--densityComfortable .MuiDataGrid-cell {
  min-height: 64px;
}

.MuiDataGrid-root.MuiDataGrid--densityComfortable .MuiDataGrid-columnHeader {
  height: 72px;
}