/* Header Component Styles */
.header-app-bar {
  background-color: rgb(132, 189, 0) !important;
  height: 48px;
  min-height: 48px;
  z-index: 1000;
}

.header-toolbar {
  min-height: 48px !important;
  height: 48px;
  padding: 0 16px;
}

.header-content {
  width: 100%;
}

.header-main-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
  color: white;
}

/* Desktop navigation */
.desktop-nav {
  flex: 1;
  margin: 0 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

.nav-button {
  color: white !important;
  white-space: nowrap;
  border-radius: 0.3rem;
  transition: background-color 0.2s ease;
  font-size: 0.85rem;
  flex-shrink: 0;
  padding: 0.2rem 0.4rem;
  height: 32px;
  min-height: 32px;
  text-transform: none;
  font-weight: 400;
}

.nav-button.active {
  background-color: rgba(255, 255, 255, 0.2) !important;
  font-weight: 500;
}

.nav-button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Header buttons */
.header-buttons {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 1rem;
}

.header-icon-button {
  color: white !important;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0 !important;
}

/* Mobile navigation */
.mobile-nav {
  display: flex;
  flex-direction: column;
  background-color: rgb(132, 189, 0);
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-button {
  color: white !important;
  justify-content: flex-start;
  margin-bottom: 0.5rem;
  text-transform: none;
  font-weight: 400;
}

.mobile-nav-button.active {
  background-color: rgba(255, 255, 255, 0.2) !important;
  font-weight: 500;
}

.mobile-nav-button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}/* AZK Binding Page Styles */
.azk-binding-container {
  padding: 1rem;
  padding-bottom: 2rem;
  max-width: 100%;
  min-height: calc(100vh - 48px);
  background-color: #f5f5f5;
}

.azk-binding-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: calc(100vh - 48px);
  color: #666;
}

.azk-binding-loading-spinner {
  animation: spin 1s linear infinite;
  font-size: 2rem;
  color: rgb(132, 189, 0);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Main layout */
.azk-binding-main-layout {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  min-height: 60vh;
}

.azk-binding-station-table-container {
  flex: 1;
  min-width: 0;
}

.azk-binding-station-table-container.hidden {
  visibility: hidden;
}

.azk-binding-station-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.azk-binding-station-card-header {
  text-align: center;
  padding: 0.5rem 0 0 0;
}

.azk-binding-station-card-header .MuiCardHeader-title {
  font-size: 1.1rem;
  font-weight: 600;
}

.azk-binding-station-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Search */
.azk-binding-search-container {
  margin-bottom: 1rem;
}

.azk-binding-search-input .MuiOutlinedInput-root {
  height: 2rem;
  font-size: 0.875rem;
}

/* Filters */
.azk-binding-filters-container {
  margin-bottom: 1rem;
}

.azk-binding-filters-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.azk-binding-filter-control {
  flex: 1;
}

.azk-binding-filter-label {
  font-size: 0.875rem;
}

.azk-binding-filter-select {
  font-size: 0.875rem;
  height: 2rem;
}

/* Station tables */
.azk-binding-station-table {
  flex: 1;
  height: calc(60vh - 120px);
  max-height: calc(60vh - 120px);
  overflow: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.azk-binding-station-table table {
  table-layout: fixed;
  width: 100%;
}

.azk-binding-station-table.competitor-table {
  height: calc(60vh - 170px);
  max-height: calc(60vh - 170px);
}

.azk-binding-station-table-header {
  background-color: #e0e0e0;
}

.azk-binding-station-table-header-cell {
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
}

.azk-binding-station-table-row {
  cursor: pointer;
  font-size: 0.75rem;
  min-height: 2rem;
  transition: background-color 0.2s;
}

.azk-binding-station-table-row:hover {
  background-color: #f5f5f5;
}

.azk-binding-station-table-row.selected-okko {
  background-color: rgba(132, 189, 0, 0.3);
}

.azk-binding-station-table-row.selected-competitor {
  background-color: #fff3cd;
}

.azk-binding-station-table-cell {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  white-space: normal;
  word-wrap: break-word;
  max-width: 0;
  vertical-align: top;
}

/* Google Maps */
.azk-binding-map-container {
  flex: 1;
  min-width: 0;
}

.azk-binding-map-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.azk-binding-map-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.azk-binding-map-element {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: 4px;
}

/* Bindings section */
.bindings-container {
  width: 100%;
}

.bindings-card {
  /* Card styles handled by Material-UI */
}

.bindings-card-header {
  padding: 0.5rem 1rem 0 1rem;
}

.bindings-card-title .MuiCardHeader-title {
  font-size: 1.1rem;
  font-weight: 600;
}

.bindings-content {
  /* Content styles */
}

.no-bindings-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #666;
  text-align: center;
}

.no-bindings-icon {
  font-size: 3rem;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  color: #ccc;
}

/* Bindings table */
.bindings-table-container {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.delete-all-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
}

.delete-all-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  font-size: 22px;
  color: #f44336;
}

.bindings-table {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.bindings-table-header {
  display: flex;
  background-color: #e0e0e0;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}

.bindings-header-cell {
  padding: 0.5rem;
  border-right: 1px solid #ddd;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
}

.bindings-data-row {
  display: flex;
  min-height: 2rem;
  border-bottom: 1px solid #eee;
}

.bindings-data-row.okko-row {
  background-color: rgba(132, 189, 0, 0.3);
  color: #333;
  font-weight: 500;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.bindings-data-row.added {
  background-color: rgba(33, 150, 243, 0.2);
}

.bindings-data-row.edited {
  background-color: #ffecb3;
}

.bindings-data-row.deleted {
  background-color: #ffebee;
  opacity: 0.7;
}

.bindings-data-row:not(.okko-row):not(.added):not(.edited):not(.deleted) {
  background-color: #fff3cd;
}

.bindings-data-cell {
  padding: 0.5rem;
  border-right: 1px solid #ddd;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
}

.bindings-data-cell.actions-cell {
  justify-content: center;
}

.bindings-data-cell.actions-cell:first-child {
  background-color: #ffffff;
}

.brand-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
}

.brand-badge.okko {
  background-color: #4caf50;
}

.brand-badge.competitor {
  background-color: #ff9800;
}

/* Form elements in bindings */
.binding-select {
  font-size: 0.75rem;
  height: 1.5rem;
  width: 100%;
  max-width: 80px;
  background-color: white;
}

.binding-select .MuiSelect-select {
  padding-left: 0.25rem;
  font-size: 0.75rem;
}

.influence-select {
  max-width: 80px;
}

.placement-select {
  max-width: 120px;
}

.binding-select .MuiOutlinedInput-notchedOutline {
  border: 1px solid #ccc;
}

.binding-input {
  font-size: 0.75rem;
  height: 1.5rem;
  width: 100%;
  max-width: 80px;
  background-color: white;
}

.distance-input {
  max-width: 80px;
}

.binding-input .MuiInputBase-input {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background-color: white;
}

.binding-input .MuiOutlinedInput-root {
  background-color: white;
}

/* Delete binding button */
.delete-binding-button {
  width: 20px;
  height: 20px;
}

.delete-binding-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: #f44336;
}

/* Status icons */
.status-icons {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.status-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
}

.status-icon.added {
  color: #4caf50;
}

.status-icon.edited {
  color: #ff9800;
}

.status-icon.deleted {
  color: #f44336;
  font-weight: 900;
}

/* Action buttons */
.action-buttons-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1rem;
  padding: 0.5rem 0;
}

.add-competitor-button {
  background: none;
  border: none;
  color: #333;
  font-size: 0.875rem;
  gap: 0.5rem;
  padding: 0.5rem;
  min-height: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.add-competitor-button:hover:not(:disabled) {
  background-color: rgba(132, 189, 0, 0.05);
}

.add-competitor-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.add-icon {
  color: rgb(132, 189, 0);
  background-color: rgba(132, 189, 0, 0.1);
  border-radius: 50%;
  font-size: 24px;
  width: 24px;
  height: 24px;
}

/* Save actions */
.save-actions-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0;
}

.reset-button,
.cancel-button {
  color: #666;
  padding: 0.25rem 1rem;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  border-radius: 4px;
  min-height: 32px;
  cursor: pointer;
}

.reset-button:hover,
.cancel-button:hover {
  background-color: #e0e0e0;
  border-color: #999;
}

.reset-button:disabled,
.cancel-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.save-button {
  padding: 0.25rem 1rem;
  color: white;
  border: 1px solid rgb(132, 189, 0);
  border-radius: 4px;
  min-height: 32px;
  background-color: rgb(132, 189, 0);
  cursor: pointer;
}

.save-button:hover {
  background-color: rgb(120, 170, 0);
  border-color: rgb(120, 170, 0);
}

.save-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: rgba(132, 189, 0, 0.3);
  border-color: rgba(132, 189, 0, 0.3);
  color: rgba(255, 255, 255, 0.7);
}

/* Competitor binding tables */
.competitor-binding-table {
  margin-bottom: 2rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-height: 400px;
  overflow: auto;
}

.competitor-binding-header {
  display: flex;
  background-color: #e0e0e0;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}

.competitor-binding-header-cell {
  padding: 0.5rem;
  border-right: 1px solid #ddd;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.competitor-binding-row {
  display: flex;
  min-height: 2rem;
}

.competitor-binding-row.okko-row {
  background-color: rgba(132, 189, 0, 0.3);
  color: #333;
  font-weight: 500;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.competitor-binding-row.competitor-row {
  background-color: #fff3cd;
}

.competitor-binding-cell {
  padding: 0.5rem;
  border-right: 1px solid #ddd;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
}

/* Reset message */
.reset-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reset-spinner {
  animation: spin 1s linear infinite;
  font-size: 2rem;
  color: rgb(132, 189, 0);
  margin-right: 8px;
}

/* Column widths */
.azk-binding-col-5 { width: 5%; min-width: 40px; }
.azk-binding-col-8 { width: 8%; min-width: 50px; }
.azk-binding-col-10 { width: 12%; min-width: 100px; }
.azk-binding-col-12 { width: 14%; min-width: 100px; }
.azk-binding-col-15 { width: 15%; min-width: 65px; }
.azk-binding-col-17 { width: 24%; min-width: 100px; }
.azk-binding-col-18 { width: 20%; min-width: 100px; }
.azk-binding-col-20 { width: 20%; }
.azk-binding-col-22 { width: 22%; min-width: 120px; }
.azk-binding-col-23 { width: 23%; min-width: 95px; }
.azk-binding-col-35 { width: 35%; min-width: 120px; }
.azk-binding-col-40 { width: 40%; min-width: 150px; }
.azk-binding-col-45 { width: 45%; min-width: 180px; }

/* Sort icons */
.sort-icon {
  font-size: 1rem;
}

/* Sortable headers */
.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

.sortable:hover {
  background-color: #d0d0d0;
}

/* Snackbar styling */
.snackbar-alert {
  font-size: 0.875rem;
  font-weight: 500;
}.google-map-info-window {
  max-width: 250px;
}

.google-map-info-content {
  color: #666;
  font-size: 14px;
  margin-bottom: 4px;
}

.google-map-info-location {
  color: #999;
  font-size: 12px;
}/* Station Profile Dialog Styles */
.station-dialog-paper {
  width: 55vw;
  max-width: 900px;
  max-height: 95vh;
  border-radius: 1rem;
}

.dialog-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
}

.dialog-title {
  margin: 0;
  color: rgb(132, 189, 0);
  font-size: 1.25rem;
  font-weight: 600;
}

.close-button {
  position: absolute;
  right: 1rem;
}

.dialog-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #666;
}

.loading-spinner {
  animation: spin 1s linear infinite;
  font-size: 2rem;
  color: rgb(132, 189, 0);
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.tags-section {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0 0.5rem;
}

.info-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #e8e8e8;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.tag-label {
  font-weight: 700;
  color: #666;
  font-size: 0.9rem;
}

.tag-value {
  color: #333;
  font-size: 0.9rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0 1rem;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }
}

.form-column {
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2rem;
  position: relative;
  padding: 0.25rem;
  margin-left: 30px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.field-row.changed {
  background-color: rgba(132, 189, 0, 0.1);
}

.field-icon {
  position: absolute;
  left: -25px;
  font-size: 16px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid;
}

.field-icon.locked {
  color: #999;
  border-color: #999;
  background-color: rgba(153, 153, 153, 0.1);
}

.field-icon.editable {
  color: rgb(132, 189, 0);
  border-color: rgb(132, 189, 0);
  background-color: rgba(132, 189, 0, 0.1);
}

.field-label {
  font-weight: 700;
  color: #666;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.field-value {
  color: #333;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  padding: 3px 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: transparent;
  min-height: 28px;
  line-height: 1.2;
}

.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem;
  gap: 0.5rem;
}

.action-button {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}

.edit-button {
  background-color: rgb(132, 189, 0);
  border-color: rgb(132, 189, 0);
  color: white;
  border: 1px solid rgb(132, 189, 0);
}

.edit-button:hover {
  background-color: rgb(118, 170, 0);
  border-color: rgb(118, 170, 0);
}

.cancel-button {
  color: #333;
  background-color: #e0e0e0;
  border: 1px solid #ccc;
}

.cancel-button:hover {
  border-color: #999;
  background-color: #f0f0f0;
}

.delete-button {
  color: #333;
  background-color: #e0e0e0;
  border: 1px solid #ccc;
}

.delete-button:hover {
  border-color: #999;
  background-color: #f0f0f0;
}

.save-button {
  background-color: rgb(132, 189, 0);
  border-color: rgb(132, 189, 0);
  color: white;
  border: 1px solid rgb(132, 189, 0);
}

.save-button:hover {
  background-color: rgb(118, 170, 0);
  border-color: rgb(118, 170, 0);
}

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

.spacer {
  flex: 1;
}

/* Form controls */
.station-form-control {
  width: 100%;
}
.station-form-control .MuiOutlinedInput-root {
  height: 28px;
  background-color: #e0e0e0;
}
.station-form-control .MuiOutlinedInput-notchedOutline {
  border-color: #ccc;
}
.station-form-control .MuiSelect-select {
  padding: 3px 32px 3px 12px;
  font-size: 0.875rem;
}
.station-form-control .MuiOutlinedInput-input {
  padding: 3px 12px;
  font-size: 0.875rem;
}
.station-text-field {
  width: 100%;
}
.station-text-field .MuiOutlinedInput-root {
  background-color: #e0e0e0;
}
.station-text-field .MuiOutlinedInput-root.multiline {
  height: auto;
}
.station-text-field .MuiOutlinedInput-root:not(.multiline) {
  height: 28px;
}
.station-text-field .MuiOutlinedInput-notchedOutline {
  border-color: #ccc;
}
.station-text-field .MuiOutlinedInput-input {
  padding: 3px 12px;
  font-size: 0.875rem;
}
.station-date-picker {
  width: 100%;
}
.station-date-picker .MuiOutlinedInput-root {
  height: 28px;
  background-color: #e0e0e0;
}
.station-date-picker .MuiOutlinedInput-notchedOutline {
  border-color: #ccc;
}
.station-date-picker .MuiOutlinedInput-input {
  padding: 3px 12px;
  font-size: 0.875rem;
}/* AZK List Page Styles */
.azk-list-container {
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 2rem;
  min-height: calc(100vh - 48px);
}

/* Sticky Header */
.sticky-header {
  position: sticky;
  top: 48px;
  z-index: 100;
  background: white;
  border-bottom: 1px solid #e0e0e0;
  margin: 0 10rem;
  padding: 1.5rem 0 0 0;
  border-radius: 0;
  box-shadow: none;
}

/* Filters Section */
.azk-filters-section {
  padding: 1.5rem;
  margin: 0 1.5rem 1.5rem 1.5rem;
}

.filters-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.azk-list-filter-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 200px;
}

.azk-list-filter-label {
  color: #333;
  font-weight: 500;
  text-align: center;
  font-size: 0.875rem;
  width: 100%;
}

.azk-list-filter-select {
  outline: none;
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.azk-list-filter-select:focus {
  border-color: rgb(132, 189, 0);
  box-shadow: 0 0 0 2px rgba(132, 189, 0, 0.2);
}

.azk-list-filter-select:hover {
  border-color: #999;
}

/* Active Filters */
.azk-list-active-filters-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.azk-list-filter-chip.regional_office {
  background-color: #e3f2fd;
  color: #1976d2;
}

.azk-list-filter-chip.province {
  background-color: #ffebee;
  color: #d32f2f;
}

.azk-list-filter-chip.brand {
  background-color: #e8f5e8;
  color: #388e3c;
}

.azk-list-filter-chip.status {
  background-color: #fff3e0;
  color: #f57c00;
}

/* Search and Actions */
.azk-list-search-actions {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  margin: 0 1.5rem 1rem 1.5rem;
  position: relative;
}

.azk-list-search-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 600px;
  width: 600px;
}

.azk-list-search-actions-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  margin: 0 1.5rem 1rem 1.5rem;
  position: relative;
}

.azk-list-search-field-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 600px;
  width: 600px;
}

.azk-list-search-input {
  outline: none;
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.azk-list-search-input:focus {
  border-color: rgb(132, 189, 0);
  box-shadow: 0 0 0 2px rgba(132, 189, 0, 0.2);
}

.azk-list-search-input:hover {
  border-color: #999;
}

.azk-list-search-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.azk-list-export-button {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
  color: #333;
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  cursor: pointer;
  position: absolute;
  right: 0;
}

.azk-list-export-button:hover:not(.disabled) {
  border-color: #999;
  background-color: #f0f0f0;
}

.azk-list-export-button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Table Header */
.azk-list-table-header {
  background: #e0e0e0;
  border-top: 1px solid #ddd;
}

.azk-list-header-row {
  display: flex;
}

.azk-list-header-cell {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: #333;
  font-size: 0.75rem;
  position: relative;
  cursor: default;
  user-select: none;
  transition: background-color 0.2s;
  border-right: 1px solid #ddd;
}

.azk-list-header-cell:last-child {
  border-right: none;
}

.azk-list-header-cell.sortable {
  cursor: pointer;
}

.azk-list-header-cell.sortable:hover {
  background-color: #d0d0d0;
}

.azk-list-sort-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.azk-list-sort-icon svg {
  font-size: 1rem;
}

.azk-list-table-header-row {
  display: flex;
}

.azk-list-table-header-cell {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: #333;
  font-size: 0.75rem;
  position: relative;
  cursor: default;
  user-select: none;
  transition: background-color 0.2s;
}

.azk-list-table-header-cell.sortable {
  cursor: pointer;
}

.azk-list-table-header-cell.sortable:hover {
  background-color: #d0d0d0;
}

.azk-list-table-header-cell:not(:last-child) {
  border-right: 1px solid #ddd;
}

.azk-list-sort-icon-container {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Results Table */
.azk-list-results-container {
  margin: 0 10rem;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.azk-list-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #666;
}

.azk-list-loading-spinner {
  animation: spin 1s linear infinite;
  font-size: 2rem;
  color: rgb(132, 189, 0);
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.azk-list-table-wrapper {
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  border-top: none;
}

.azk-list-table {
  width: 100%;
  border-collapse: collapse;
}

.azk-list-table-container {
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  border-top: none;
}

.azk-list-results-table {
  width: 100%;
  border-collapse: collapse;
}

.azk-list-table-row {
  cursor: pointer;
  transition: background-color 0.2s;
  height: 2.8rem;
}

.azk-list-table-row:hover {
  background-color: #f9f9f9;
}

.azk-list-table-cell {
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  font-size: 0.875rem;
  height: 2.8rem;
}

.azk-list-brand-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
}

.azk-list-brand-badge.okko {
  background-color: #4caf50;
}

.azk-list-brand-badge.other {
  background-color: #ff9800;
}

.azk-list-brand-badge.competitor {
  background-color: #ff9800;
}

.azk-list-details-button {
  height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s;
  color: #333;
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  cursor: pointer;
}

.azk-list-details-button:hover {
  border-color: #999;
  background-color: #f0f0f0;
}

/* Empty State */
.azk-list-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #666;
}

.azk-list-empty-icon {
  font-size: 3rem !important;
  width: 3rem !important;
  height: 3rem !important;
  margin-bottom: 1rem;
  color: #ccc !important;
}

.azk-list-empty-subtitle {
  font-size: 0.875rem !important;
  margin-top: 0.5rem !important;
  color: #999 !important;
}

/* No Data */
.azk-list-no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #666;
}

.azk-list-no-data-icon {
  font-size: 3rem;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  color: #ccc;
}

.azk-list-no-data-subtitle {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  color: #999;
}

/* Column widths */
.col-unicode { width: 15%; }
.col-province { width: 20%; }
.col-brand { width: 15%; }
.col-address { width: 40%; }
.col-station-number { width: 10%; }

/* Header cell widths */
.azk-list-header-cell-unicode { width: 13%; }
.azk-list-header-cell-province { width: 18%; }
.azk-list-header-cell-brand { width: 13%; }
.azk-list-header-cell-address { width: 36%; }
.azk-list-header-cell-station_number { width: 10%; }
.azk-list-header-cell-actions { width: 10%; }

/* Table cell widths */
.azk-list-table-cell-unicode { width: 13%; }
.azk-list-table-cell-province { width: 18%; }
.azk-list-table-cell-brand { width: 13%; }
.azk-list-table-cell-address { width: 36%; }
.azk-list-table-cell-station-number { width: 10%; }
.azk-list-table-cell-actions { width: 10%; text-align: center; }/* Main container */
.brands-main-container {
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 2rem;
  min-height: calc(100vh - 48px);
}

/* Sticky header */
.brands-sticky-header {
  position: sticky;
  top: 48px;
  z-index: 100;
  background: white;
  border-bottom: 1px solid #e0e0e0;
  margin: 0 10rem;
  border-radius: 0;
  box-shadow: none;
}

/* Form section */
.brands-form-section {
  padding: 1.5rem;
  padding-bottom: 0.5rem;
}

.brands-form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60vw;
  max-width: 800px;
  min-width: 600px;
  margin: 0 auto;
  margin-bottom: 1rem;
  gap: 1rem;
}

.brands-form {
  width: 100%;
}

.brands-form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
}

.brands-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.brands-field-group.id-field {
  flex: 0 0 150px;
}

.brands-field-group.name-field {
  flex: 0 0 200px;
}

.brands-field-group.order-field {
  flex: 0 0 120px;
}

.brands-field-label {
  color: #333;
  font-weight: 500;
  font-size: 0.875rem;
  text-align: center;
  width: 100%;
}

.brands-form-input {
  outline: none;
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.brands-form-input.error {
  border-color: #d32f2f;
}

.brands-form-input:focus {
  border-color: rgb(132, 189, 0);
  box-shadow: 0 0 0 2px rgba(132, 189, 0, 0.2);
}

/* Remove number input arrows */
.brands-form-input[type="number"]::-webkit-outer-spin-button,
.brands-form-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.brands-form-input[type="number"] {
  -moz-appearance: textfield;
}

.brands-error-text {
  color: #d32f2f;
  font-size: 0.75rem;
}

.brands-submit-btn {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: all 0.2s;
  color: #333;
  background-color: #e0e0e0;
  border: none;
  cursor: pointer;
}

.brands-submit-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.brands-submit-btn:not(:disabled):hover {
  background-color: #f0f0f0;
}

/* Search section */
.brands-search-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 2rem;
}

.brands-search-input {
  outline: none;
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: border-color 0.2s;
  width: 100%;
}

.brands-search-input:focus {
  border-color: rgb(132, 189, 0);
  box-shadow: 0 0 0 2px rgba(132, 189, 0, 0.2);
}

/* Action controls */
.brands-action-controls {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.brands-save-btn {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.brands-save-btn:disabled {
  color: #999;
  background-color: #e0e0e0;
  cursor: not-allowed;
}

.brands-save-btn:not(:disabled) {
  color: white;
  background-color: rgb(132, 189, 0);
}

.brands-save-btn:not(:disabled):hover {
  background-color: rgb(118, 170, 0);
}

.brands-export-btn {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: all 0.2s;
  color: #333;
  background-color: #e0e0e0;
  border: none;
  cursor: pointer;
}

.brands-export-btn:hover {
  background-color: #f0f0f0;
}

/* Table header */
.brands-table-header {
  background: #e0e0e0;
  border-top: 1px solid #ddd;
}

.brands-header-row {
  display: flex;
}

.brands-header-cell {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: #333;
  font-size: 0.75rem;
  position: relative;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: background-color 0.2s;
}

.brands-header-cell:not(:last-child) {
  border-right: 1px solid #ddd;
}

.brands-header-cell:hover {
  background-color: #d0d0d0;
}

.brands-header-cell.id-col { width: 10%; }
.brands-header-cell.name-col { width: 30%; }
.brands-header-cell.order-col { width: 15%; }
.brands-header-cell.azk-count-col { width: 15%; }
.brands-header-cell.active-azk-col { width: 15%; }
.brands-header-cell.status-col { width: 15%; }

.brands-sort-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.brands-sort-icon svg {
  font-size: 1rem;
}

/* Results table */
.brands-results-container {
  margin: 0 10rem;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.brands-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #666;
}

.brands-loading-spinner {
  animation: spin 1s linear infinite;
  font-size: 2rem;
  color: rgb(132, 189, 0);
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.brands-table-container {
  overflow-x: auto;
  border: 1px solid #e0e0e0;
}

.brands-table {
  width: 100%;
  border-collapse: collapse;
}

.brands-table-row {
  cursor: pointer;
  transition: background-color 0.2s;
  height: 2.8rem;
}

.brands-table-row.changed {
  background-color: rgba(132, 189, 0, 0.15);
}

.brands-table-row:hover {
  background-color: #f9f9f9;
}

.brands-table-row.changed:hover {
  background-color: rgba(132, 189, 0, 0.25);
}

.brands-table-cell {
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  font-size: 0.875rem;
  height: 2.8rem;
}

.brands-table-cell.id-col { width: 10%; }
.brands-table-cell.name-col { width: 30%; }
.brands-table-cell.order-col { width: 15%; }
.brands-table-cell.azk-count-col { width: 15%; }
.brands-table-cell.active-azk-col { width: 15%; }
.brands-table-cell.status-col { width: 15%; }

.brands-brand-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
}

.brands-brand-badge.okko {
  background-color: #4caf50;
}

.brands-brand-badge.other {
  background-color: #ff9800;
}

.brands-status-select {
  width: 100%;
  min-width: 120px;
  height: 2rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  font-size: 0.75rem;
  outline: none;
  transition: border-color 0.2s;
  line-height: 1.3;
  cursor: pointer;
}

.brands-status-select:focus {
  border-color: rgb(132, 189, 0);
  box-shadow: 0 0 0 2px rgba(132, 189, 0, 0.2);
}

.brands-status-select:hover {
  border-color: #999;
}

.brands-table-row.changed .brands-status-select {
  background-color: rgba(132, 189, 0, 0.2) !important;
}

.brands-table-row.changed .brands-status-select:focus {
  background-color: rgba(132, 189, 0, 0.3) !important;
}

/* Snackbar */
.brands-snackbar-alert {
  min-width: 400px;
  max-width: 600px;
  width: auto;
  word-wrap: break-word;
  white-space: pre-line;
}/* Main container */
.orders-main-container {
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 2rem;
  min-height: 100vh;
}

.orders-container {
  padding: 1rem;
  max-width: 100%;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 3rem;
  gap: 1rem;
}

.loading-spinner {
  animation: spin 1s linear infinite;
  font-size: 2rem !important;
  color: rgb(132, 189, 0);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Filter Section */
.filter-section {
  margin-bottom: 2rem;
}

.filter-card {
  padding: 1.5rem;
  border: none;
  box-shadow: none;
  position: sticky;
  top: 48px;
  z-index: 100;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
}





.filter-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-row.buttons-right {
  justify-content: flex-end;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 260px;
  max-width: 325px;
}

.field-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #333;
  text-align: center;
  width: 100%;
}

.form-input {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
}

.form-input:focus {
  border-color: rgb(132, 189, 0);
  box-shadow: 0 0 0 2px rgba(132, 189, 0, 0.2);
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.action-btn {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  color: #333;
  cursor: pointer;
}

.action-btn.save-btn {
  background-color: rgb(132, 189, 0);
  color: white;
  border: 1px solid rgb(132, 189, 0);
}

.action-btn.save-btn:hover:not(:disabled) {
  background-color: rgb(118, 170, 0);
}

.action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Tabs Section */
.orders-tabs {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  margin: 0 1rem;
}

.orders-tabs .MuiTab-root {
  color: #666;
  font-size: 0.875rem;
}

.orders-tabs .MuiTab-root.Mui-selected {
  color: rgb(132, 189, 0);
}

.orders-tabs .MuiTabs-indicator {
  background-color: rgb(132, 189, 0);
}

.tab-content {
  padding: 1.5rem;
}

/* Orders Table */
.orders-table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

.orders-table-header {
  display: table-row;
  background-color: #e0e0e0;
  font-weight: 600;
}

.orders-table-row {
  display: table-row;
  transition: background-color 0.2s;
  height: 2.8rem;
}

.orders-table-row:hover {
  background-color: #f5f5f5;
}

.orders-header-cell, .orders-table-cell {
  display: table-cell;
  padding: 0.5rem;
  border: 1px solid #ddd;
  vertical-align: middle;
  text-align: center;
  font-size: 0.75rem;
  height: 2.8rem;
  box-sizing: border-box;
}

/* History Table */
.history-table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

.history-table-header {
  display: table-row;
  background-color: #e0e0e0;
  font-weight: 600;
}

.history-table-row {
  display: table-row;
  transition: background-color 0.2s;
  height: 2.8rem;
}

.history-table-row:hover {
  background-color: #f5f5f5;
}

.history-header-cell, .history-table-cell {
  display: table-cell;
  padding: 0.5rem;
  border: 1px solid #ddd;
  vertical-align: middle;
  text-align: center;
  font-size: 0.75rem;
  height: 2.8rem;
  box-sizing: border-box;
}

/* Orders Table Columns */
.orders-col-number {
  width: 12%;
}

.orders-col-name {
  width: 25%;
  text-align: left;
}

.orders-col-division {
  width: 18%;
}

.orders-col-entity {
  width: 18%;
}

.orders-col-date {
  width: 12%;
}

.orders-col-download {
  width: 10%;
}

/* History Table Columns */
.history-col-division {
  width: 18%;
}

.history-col-entity {
  width: 18%;
}

.history-col-prev-number {
  width: 12%;
}

.history-col-new-number {
  width: 12%;
}

.history-col-initiator {
  width: 20%;
}

.history-col-datetime {
  width: 20%;
}

/* Download Button */
.orders-download-btn {
  padding: 0.25rem;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  color: rgb(132, 189, 0);
}

.orders-download-btn:hover {
  background-color: #f0f0f0;
}

/* No Data */
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #666;
  text-align: center;
}

.no-data-hint {
  font-size: 0.75rem;
  color: #999;
}

.no-data-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #ccc;
}



/* Responsive Design */
@media (max-width: 768px) {
  .orders-container {
    padding: 0.5rem;
  }

  .form-inputs-container {
    min-width: auto;
    width: 100%;
  }

  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .orders-table, .history-table {
    font-size: 0.7rem;
  }

  .header-cell, .table-cell {
    padding: 0.25rem;
  }

  .name-col {
    min-width: 200px;
  }
}/* Price Comparison Page Styles */
.price-comparison-container {
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 2rem;
  min-height: calc(100vh - 48px);
}

/* Sticky Header */
.price-comparison-sticky-header {
  position: sticky;
  top: 48px;
  left: 0;
  right: 0;
  z-index: 100;
  background: white;
  width: 100%;
  padding: 1rem 0 0 0;
  margin: 0 !important;
  border-radius: 0;
  box-shadow: none;
}

.price-comparison-filter-section {
  margin: 0;
}

.price-comparison-filter-card {
  padding: 1.5rem;
  border: none;
  box-shadow: none;
  position: sticky;
  top: 48px;
  z-index: 100;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
}

.price-comparison-filter-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.price-comparison-form-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 260px;
  max-width: 325px;
}

.price-comparison-field-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #333;
  text-align: center;
  font-size: 0.875rem;
}

.price-comparison-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.price-processing-filter-chip {
  background-color: #e3f2fd !important;
  color: #1976d2 !important;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.action-btn {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-btn.save-btn {
  background-color: rgb(132, 189, 0);
  color: white;
  border: 1px solid rgb(132, 189, 0);
}

.action-btn.save-btn:hover:not(:disabled) {
  background-color: rgb(118, 170, 0);
}

.action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Summary Table */
.price-comparison-summary-container {
  margin: 0 1.5rem 1rem 1.5rem;
}

.price-comparison-summary-table-wrapper {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.price-comparison-table-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.price-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.price-comparison-table-header {
  background: #e0e0e0;
  border-top: 1px solid #ddd;
}

.price-comparison-header-row {
  display: flex;
}

.price-comparison-header-cell {
  padding: 0.5rem;
  text-align: center;
  font-weight: 600;
  border: 1px solid #ddd;
  vertical-align: middle;
  font-size: 0.75rem;
  height: 2.8rem;
  background-color: #e0e0e0;
}

/* Column widths for sticky header alignment - optimized for window width */
.price-comparison-col-unicode {
  width: 8%;
  min-width: 80px;
}

.price-comparison-col-division {
  width: 10%;
  min-width: 90px;
}

.price-comparison-col-region {
  width: 10%;
  min-width: 90px;
}

.price-comparison-col-province {
  width: 10%;
  min-width: 90px;
}

.price-comparison-col-brand {
  width: 10%;
  min-width: 90px;
}

.price-comparison-col-address {
  width: 22%;
  min-width: 200px;
}

.price-comparison-col-fuel {
  width: 10%;
  min-width: 90px;
}

.price-comparison-fuel-header {
  width: 10%;
  min-width: 90px;
}

.price-comparison-fuel-subheaders {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.25rem;
}

.price-comparison-subheader {
  flex: 1;
  padding: 0 0.25rem;
}

.price-comparison-table-row {
  transition: background-color 0.2s;
}

.price-comparison-table-row.okko-row {
  background-color: #d4edda;
  font-weight: 500;
}

.price-comparison-table-row:hover {
  background-color: #f5f5f5;
}

.price-comparison-table-row.okko-row:hover {
  background-color: #d4edda;
}

.price-comparison-table-row.okko-station {
  background-color: #d4edda;
  font-weight: 500;
}

.price-comparison-table-row.bound-competitor {
  background-color: white;
}

.price-comparison-table-row.unbound-competitor {
  background-color: #fff8e1;
}

.price-comparison-table-cell {
  padding: 0.5rem;
  text-align: center;
  border: 1px solid #ddd;
  vertical-align: middle;
  font-size: 0.75rem;
  height: 2.8rem;
}

.price-comparison-brand-cell {
  text-align: left;
  font-weight: 500;
  width: 120px;
}

.price-comparison-unicode-cell {
  font-weight: 500;
  color: #333;
}

.price-comparison-address-cell {
  text-align: left;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-comparison-table-cell.price-comparison-price-cell {
  position: relative;
  padding: 0 !important;
}

.price-comparison-price-container {
  width: 100%;
  height: 100%;
  background-color: inherit;
  cursor: pointer;
}

.price-comparison-price-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: inherit;
}

.price-comparison-price-value {
  font-weight: 500;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  flex: 1;
  color: #333;
  border-bottom: 1px solid #ddd;
}

.price-comparison-difference-value {
  font-weight: 600;
  color: #666;
  font-size: 0.7rem;
  background-color: white;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  flex: 1;
}

.price-comparison-price-single {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 500;
  font-size: 0.75rem;
  color: #333;
  padding: 0.25rem;
  cursor: pointer;
}

.price-comparison-difference-positive {
  color: #f44336;
}

.price-comparison-difference-negative {
  color: #2196f3;
}

/* Station Details Table Header */
.price-comparison-stations-header {
  margin: 0 1.5rem 0 1.5rem;
}

.price-comparison-stations-header .price-comparison-table-title {
  margin-bottom: 0.5rem;
}

/* Station Details Table */
.price-comparison-stations-container {
  margin: 0 1.5rem;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.price-comparison-stations-table-wrapper {
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  border-top: none;
}

/* Only stations table uses fixed layout for header alignment */
.price-comparison-stations-table-wrapper .price-comparison-table {
  table-layout: fixed;
  width: 100%;
}

/* Summary table keeps auto layout */
.price-comparison-summary-table-wrapper .price-comparison-table {
  table-layout: auto;
}

.price-comparison-station-row {
  border-bottom: 1px solid #eee;
}

.price-comparison-station-row.okko-station {
  background-color: #e8f5e8;
}

.price-comparison-station-row:hover {
  background-color: #f8f9fa;
}

.price-comparison-station-row.okko-station:hover {
  background-color: #d4edda;
}

.price-comparison-unicode-cell {
  font-family: monospace;
  font-weight: 500;
}

.price-comparison-address-cell {
  text-align: left;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



/* Responsive */
@media (max-width: 768px) {
  .price-comparison-filter-row {
    grid-template-columns: 1fr;
  }
  
  .price-comparison-table {
    font-size: 0.875rem;
  }
  
  .price-comparison-header-cell,
  .price-comparison-table-cell {
    padding: 0.5rem;
  }
}.price-processing-container {
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 2rem;
  min-height: calc(100vh - 48px);
}

/* Sticky Header */
.price-processing-sticky-header {
  position: sticky;
  top: 48px;
  left: 0;
  right: 0;
  z-index: 100;
  background: white;
  width: 100%;
  padding: 1rem 0 0 0;
  margin: 0 !important;
  border-radius: 0;
  box-shadow: none;
}

.price-processing-message {
  text-align: center;
  padding: 2rem;
  margin: 2rem;
  background-color: #f5f5f5;
  border-radius: 8px;
  color: #666;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
}

.loading-spinner {
  animation: spin 1s linear infinite;
  font-size: 2rem !important;
  color: rgb(132, 189, 0);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.price-processing-filter-section {
  margin: 0;
}

.price-processing-filter-card {
  padding: 1.5rem;
  border: none;
  box-shadow: none;
  position: sticky;
  top: 48px;
  z-index: 100;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
}

.price-processing-filter-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.price-processing-form-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 260px;
  max-width: 325px;
}

.price-processing-field-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #333;
  text-align: center;
  font-size: 0.875rem;
}

.price-processing-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.form-input {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
}

.form-input:focus {
  border-color: rgb(132, 189, 0);
  box-shadow: 0 0 0 2px rgba(132, 189, 0, 0.2);
}

.form-input:hover {
  border-color: #999;
}



.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.action-btn {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  color: #333;
  cursor: pointer;
}

.action-btn.primary {
  background-color: rgb(132, 189, 0);
  border-color: rgb(132, 189, 0);
  color: white;
}

.action-btn.success {
  background-color: #4caf50;
  border-color: #4caf50;
  color: white;
}

.action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Summary Table */
.price-processing-summary-container {
  margin: 0 1rem;
}

.price-processing-summary-table-wrapper {
  max-height: 320px;
  overflow-y: auto;
  border-radius: 8px;
}

/* Station Details Table */
.price-processing-stations-container {
  margin: 0;
}

.price-processing-table-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
  margin: 1rem 0;
}

.table-section {
  margin: 0 1rem;
  margin-bottom: 2rem;
}

.summary-table-section {
  margin: 0;
  margin-bottom: 1rem;
}

.summary-table-section .price-processing-table {
  max-height: 200px;
  overflow-y: auto;
  position: relative;
}

.summary-table-section .price-processing-table-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #e0e0e0;
}

.table-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
}

.region-table {
  margin-bottom: 2rem;
}

.region-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: rgb(132, 189, 0);
  color: white;
  border-radius: 4px 4px 0 0;
  margin-bottom: 0;
  min-height: 2.5rem;
}

.region-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

.province-table {
  margin-bottom: 2rem;
}

.province-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: #2196f3;
  color: white;
  border-radius: 4px 4px 0 0;
  margin-bottom: 0;
  min-height: 2.5rem;
}

.province-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

.region-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.region-action-btn {
  padding: 0.25rem 0.75rem;
  border: none;
  border-radius: 3px;
  font-size: 0.75rem;
  cursor: pointer;
  color: white;
  font-weight: 500;
}

.save-btn {
  background-color: rgba(255, 255, 255, 0.2);
}

.save-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.process-btn {
  background-color: #1976d2;
}

.process-btn:hover {
  background-color: #1565c0;
}

.save-btn:disabled,
.process-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.price-processing-table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

.price-processing-table-header {
  display: table-row;
  background-color: #e0e0e0;
  font-weight: 600;
}

.price-processing-table-row {
  display: table-row;
  transition: background-color 0.2s;
}

.price-processing-table-row:hover {
  background-color: #f5f5f5;
}

.price-processing-table-row.okko-row {
  background-color: #d4edda;
  font-weight: 500;
}

.price-processing-table-row.bound-competitor {
  background-color: white;
}

.price-processing-table-row.unbound-competitor {
  background-color: #fff8e1;
}

.price-processing-table-row.binded-competitor {
  background-color: #fff3cd;
}

.price-processing-header-cell, .price-processing-table-cell {
  display: table-cell;
  padding: 0.5rem;
  border: 1px solid #ddd;
  vertical-align: middle;
  text-align: center;
  font-size: 0.75rem;
  height: 2.8rem;
  box-sizing: border-box;
}

.price-processing-region-col {
  width: 85px;
}

.price-processing-province-col {
  width: 100px;
}

.price-processing-brand-col {
  width: 80px;
}

.price-processing-address-col {
  width: 255px !important;
  min-width: 255px !important;
  text-align: left;
}

.price-processing-date-col {
  width: 244px !important;
  min-width: 244px !important;
}

.price-processing-last-date-col {
  width: 100px !important;
  min-width: 100px !important;
}

.price-processing-fuel-col {
  width: 80px;
  min-width: 80px;
}

.price-input {
  width: 100%;
  padding: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  font-size: 0.75rem;
  outline: none;
}

.price-input:focus {
  border-color: rgb(132, 189, 0);
  box-shadow: 0 0 0 2px rgba(132, 189, 0, 0.2);
}

.price-input:invalid {
  border-color: #f44336;
  background-color: #ffebee;
}

.price-display {
  font-weight: 500;
}

/* Filter chips */
.filter-chip-regional {
  background-color: #e3f2fd;
  color: #1976d2;
}

.filter-chip-province {
  background-color: #ffebee;
  color: #d32f2f;
}

.filter-chip-brand {
  background-color: #e8f5e8;
  color: #388e3c;
}

.filter-chip-default {
  background-color: #f5f5f5;
  color: #666;
}

@media (max-width: 1200px) {
  .price-table {
    font-size: 0.75rem;
  }
  
  .price-processing-fuel-col {
    width: 70px;
    min-width: 70px;
  }
}

@media (max-width: 768px) {
  .price-processing-container {
    padding: 0.5rem;
  }
  
  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .price-table {
    font-size: 0.7rem;
  }
  
  .price-processing-header-cell, .price-processing-table-cell {
    padding: 0.25rem;
  }
  
  .price-processing-fuel-col {
    width: 60px;
    min-width: 60px;
  }
}

/* Dialog styling */
.price-processing-confirm-dialog .price-processing-dialog-title {
  padding: 1rem 1.5rem 0.5rem;
}

.price-processing-confirm-dialog .price-processing-dialog-content {
  padding: 1rem 1.5rem;
}

.price-processing-confirm-dialog .price-processing-dialog-actions {
  padding: 0.75rem 1.5rem 1.5rem;
}

.price-processing-success-dialog .price-processing-dialog-title {
  padding: 1rem 1.5rem 0.5rem;
  text-align: center;
}

.price-processing-success-dialog .price-processing-dialog-content {
  padding: 0.5rem 1.5rem;
  text-align: center;
}

.price-processing-success-dialog .price-processing-dialog-actions {
  padding: 0.75rem 1.5rem 1.5rem;
  justify-content: center;
}

/* Date input styling */
.date-input {
  width: 234px;
  padding: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.75rem;
  background-color: white;
}

.date-input:focus {
  outline: none;
  border-color: rgb(132, 189, 0);
  background-color: white;
}

/* Cell change highlighting */
.price-processing-table-cell.cell-changed {
  background-color: rgba(132, 189, 0, 0.2) !important;
}

/* Action buttons */
.action-btn.reset-btn {
  background-color: #e0e0e0;
  color: #333;
  border: 1px solid #ccc;
}

.action-btn.reset-btn:hover:not(:disabled) {
  background-color: #d0d0d0;
}

.action-btn.save-btn {
  background-color: rgb(132, 189, 0);
  color: white;
  border: 1px solid rgb(132, 189, 0);
}

.action-btn.save-btn:hover:not(:disabled) {
  background-color: rgb(118, 170, 0);
}

/* Dialog styles */
.price-processing-dialog-paper {
  width: 480px;
  max-width: 90vw;
}

.price-processing-dialog-paper-wide {
  width: 520px;
  max-width: 90vw;
}

.price-processing-dialog-paper-narrow {
  width: 400px;
  max-width: 90vw;
}

.price-processing-dialog-content {
  padding: 0 1.5rem;
}

.price-processing-dialog-content-wide {
  padding: 1rem 1.5rem;
}

.price-processing-dialog-actions {
  padding: 0.75rem 1.5rem 1.5rem;
}

.price-processing-dialog-actions-center {
  padding: 0.75rem 1.5rem 1.5rem;
  justify-content: center;
}

/* Form control labels */
.price-processing-form-label {
  font-weight: 500;
}

.price-processing-form-label-small {
  font-size: 0.875rem;
}

/* Notification sections */
.price-processing-notification-box {
  margin-bottom: 0.5rem;
}

.price-processing-notification-row {
  display: flex;
  gap: 2rem;
  margin-bottom: 0.5rem;
}

.price-processing-notification-column {
  display: flex;
  flex-direction: column;
}

.price-processing-time-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.price-processing-time-label {
  font-weight: 500;
  min-width: 140px;
  font-size: 15px;
  padding-left: 0;
}

.price-processing-time-inputs {
  display: flex;
  gap: 0.25rem;
}

/* TextField overrides */
.price-processing-time-field .MuiOutlinedInput-root {
  height: 1.75rem;
  font-size: 0.75rem;
}

.price-processing-time-field .MuiOutlinedInput-root:disabled {
  background-color: #f5f5f5;
  color: #999;
}

/* Filter chips */
.price-processing-filter-chip.regional_office {
  background-color: #e3f2fd;
  color: #1976d2;
}

.price-processing-filter-chip.province {
  background-color: #ffebee;
  color: #d32f2f;
}

.price-processing-filter-chip.brand {
  background-color: #e8f5e8;
  color: #388e3c;
}

.price-processing-chip-regional {
  background-color: #e3f2fd;
  color: #1976d2;
}

.price-processing-chip-province {
  background-color: #ffebee;
  color: #d32f2f;
}

.price-processing-chip-brand {
  background-color: #e8f5e8;
  color: #388e3c;
}

.price-processing-chip-default {
  background-color: #f5f5f5;
  color: #666;
}

/* Datetime section */
.datetime-section {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.datetime-inputs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.date-input, .time-input {
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
}

.date-input:focus, .time-input:focus {
  border-color: rgb(132, 189, 0);
  box-shadow: 0 0 0 2px rgba(132, 189, 0, 0.2);
}

.time-input {
  width: 120px;
}

/* Snackbar and Alert styling */
.MuiSnackbar-root {
  min-width: 400px;
  max-width: 600px;
}

.MuiAlert-root {
  min-width: 400px;
  max-width: 600px;
  width: auto;
  word-wrap: break-word;
  white-space: normal;
}

.MuiAlert-message {
  width: 100%;
  word-wrap: break-word;
  white-space: pre-line;
}/* ConfirmDialog Component Styles */
.confirm-dialog {
  /* Dialog styles handled by Material-UI */
}

.confirm-dialog-title {
  /* DialogTitle styles handled by Material-UI */
}

.confirm-dialog-content {
  /* DialogContent styles handled by Material-UI */
}

.confirm-dialog-actions {
  /* DialogActions styles handled by Material-UI */
}/* Pricing Regional Page Styles */
.pricing-container {
  padding: 1rem;
  max-width: 100%;
  overflow-x: auto;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
}

.loading-spinner {
  animation: spin 1s linear infinite;
  font-size: 2rem !important;
  color: rgb(132, 189, 0);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.summary-table-container {
  margin-bottom: 2rem;
}

.table-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
}

.table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.controls-left {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.export-btn {
  background-color: rgb(132, 189, 0) !important;
  color: white !important;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.export-btn:hover {
  background-color: rgb(118, 170, 0) !important;
}

.hide-discounts {
  color: #333;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

.header-row {
  background-color: #e0e0e0;
  font-weight: 600;
}

.data-row {
  transition: background-color 0.2s;
}

.data-row:hover {
  background-color: #f5f5f5;
}

.data-row.okko-row {
  background-color: #d4edda;
  font-weight: 500;
}

/* Force all OKKO cells and subcells to have the same color */
.data-row.okko-row .data-cell {
  background-color: #d4edda !important;
}

.data-row.okko-row .price-value {
  background-color: #d4edda !important;
}

.data-row.okko-row .fuel-realization-cell {
  background-color: #d4edda !important;
}

.data-row.okko-row .fuel-growth-cell {
  background-color: #d4edda !important;
}

.data-row.okko-row .price-container {
  background-color: #d4edda !important;
}

.data-row.okko-row .price-grid {
  background-color: #d4edda !important;
}

.data-row.okko-row .price-single {
  background-color: #d4edda !important;
}

.header-cell, .data-cell {
  display: table-cell;
  padding: 0.5rem;
  border: 1px solid #ddd;
  vertical-align: middle;
  text-align: center;
  font-size: 0.75rem;
  height: 2.8rem;
}

.header-cell.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
  position: relative;
}

.header-cell.sortable:hover {
  background-color: #d0d0d0;
}

.sort-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: #666;
  margin-left: 0.25rem;
  vertical-align: middle;
}

.brand-header, .brand-cell {
  width: 70px;
  text-align: left;
}

.sales-header, .sales-cell {
  width: 65px;
  text-align: center;
}

.sales-header {
  display: table-cell !important;
}

.fuel-header {
  width: 120px;
  min-width: 120px;
}

.fuel-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.fuel-subheaders {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #666;
}

.subheader {
  flex: 1;
  padding: 0 0.25rem;
}

.brand-name {
  font-weight: 500;
}

.station-count {
  display: block;
  font-size: 0.75rem;
  color: #333;
  margin-top: 0.25rem;
}

.active-count {
  font-weight: 600;
}

.count-increased {
  color: #007bff !important;
}

.count-decreased {
  color: #dc3545 !important;
}

.station-count.count-increased {
  color: #007bff !important;
}

.station-count.count-decreased {
  color: #dc3545 !important;
}

.sales-data {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sales-value {
  font-weight: 500;
}

.sales-change {
  font-size: 0.75rem;
}

.sales-label {
  font-size: 0.7rem;
  color: #666;
  font-weight: normal;
}

.price-cell {
  position: relative;
  padding: 0 !important;
}

.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  width: 100%;
  background-color: inherit;
}

.price-single {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  height: 2.8rem;
  background-color: inherit;
}

.price-value {
  font-weight: 500;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  min-height: 1.4rem;
  flex: 1;
  line-height: 1.1;
}

.price-grid .price-value:nth-child(1) {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.price-grid .price-value:nth-child(2) {
  border-bottom: 1px solid #ddd;
}

.price-single .price-value {
  border: none;
  flex: 1;
  width: 100%;
}

.mode-price {
  grid-column: 1;
  grid-row: 1;
}

.discount-price {
  grid-column: 2;
  grid-row: 1;
}

.difference-value {
  font-weight: 600;
  color: #666;
  font-size: 0.7rem;
  background-color: white;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  flex: 1;
}

.competitor-higher {
  background-color: #fff3cd;
}

.competitor-lower {
  background-color: #e8f5e8;
}

.price-grid .difference-value:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid #ddd;
}

.price-grid .difference-value:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}

.price-single .difference-value {
  border-top: 1px solid #ddd;
  grid-column: unset;
  grid-row: unset;
  flex: 1;
}

.fuel-realization-cell {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.7rem;
  color: #666;
  font-weight: 500;
  background-color: #d4edda;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-right: 1px solid #ddd;
  flex: 1;
}

.fuel-growth-cell {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.7rem;
  font-weight: 500;
  background-color: #d4edda;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  flex: 1;
}

.price-single .fuel-realization-cell {
  border: none;
  border-top: 1px solid #ddd;
  grid-column: unset;
  grid-row: unset;
  flex: 1;
  background-color: #d4edda;
}



.positive-change {
  color: #2196f3;
}

.positive-change::before {
  content: '↑ ';
}

.negative-change {
  color: #f44336;
}

.negative-change::before {
  content: '↓ ';
}

/* Price change styling */
.price-value {
  font-weight: 500;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  min-height: 1.4rem;
  flex: 1;
  line-height: 1.2;
}

/* Price values should always be black and normal weight - except for new/removed */
.price-value {
  color: #333 !important;
  font-weight: normal !important;
}

/* Override white text only for new/removed containers */
.price-container:not(.price-new):not(.price-removed) .price-value {
  color: #333 !important;
}

/* Growth sub-cells coloring */
.fuel-growth-cell.positive-change,
.positive-change {
  color: #2196f3 !important;
}

.fuel-growth-cell.negative-change,
.negative-change {
  color: #f44336 !important;
}

.count-increased {
  color: #2196f3 !important;
}

.count-decreased {
  color: #f44336 !important;
}

/* Price change colors only for price difference spans and arrows */
.price-diff-positive,
.price-arrow.up {
  color: #2196f3 !important;
}

.price-diff-negative,
.price-arrow.down {
  color: #f44336 !important;
}

/* Price change arrows */
.price-arrow {
  margin-left: 0.25rem;
  font-weight: bold;
}

.price-arrow.up {
  color: #2196f3;
}

.price-arrow.down {
  color: #f44336;
}



/* Sales data improvements */
.sales-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.75rem;
  gap: 0.125rem;
}

.sales-row-horizontal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

.sales-row-horizontal:last-child {
  margin-bottom: 0;
}

.sales-row .sales-value,
.sales-row-horizontal .sales-value {
  font-weight: 500;
}

.sales-row .sales-change,
.sales-row-horizontal .sales-change {
  font-size: 0.7rem;
  font-weight: 500;
}

/* Brand order button */
.brand-order-btn {
  color: rgb(132, 189, 0) !important;
  border-color: rgb(132, 189, 0) !important;
  font-size: 0.875rem !important;
}

.brand-order-btn:hover {
  background-color: rgba(132, 189, 0, 0.04) !important;
}



/* Price container for tooltips */
.price-container {
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: inherit;
}



.price-container.price-new {
  background-color: #4caf50 !important;
}

.price-container.price-new .price-value {
  background-color: #4caf50 !important;
}

.price-container.price-new .price-grid {
  background-color: #4caf50 !important;
}

.price-container.price-removed {
  background-color: #f44336 !important;
  min-height: 2.8rem !important;
}

.price-container.price-removed .price-value {
  min-height: 1.4rem !important;
  background-color: #f44336 !important;
}

.price-container.price-removed .price-grid {
  background-color: #f44336 !important;
}



.price-container.price-higher {
  background-color: #fff3cd !important;
}

.price-container.price-lower {
  background-color: #e8f5e8 !important;
}

.price-container.price-critical {
  background-color: #ffebee !important;
}

/* Difference color classes */
.difference-positive {
  color: #4caf50 !important;
  font-weight: 600;
}

.difference-negative {
  color: #f44336 !important;
  font-weight: 600;
}

.difference-neutral {
  color: #666 !important;
  font-weight: normal;
}

.regional-tables-container {
  margin-top: 3rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 2rem;
}

.regional-table-container {
  margin-bottom: 2rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.regional-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: rgb(132, 189, 0);
  color: white;
  transition: background-color 0.2s;
  min-height: 2.5rem;
}

.regional-header-left {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex: 1;
}

.regional-header-left:hover {
  opacity: 0.9;
}

.regional-header-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.export-regional-button {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 0.75rem !important;
  padding: 0.25rem 0.75rem !important;
}

.export-regional-button:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.view-details-button {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 0.75rem !important;
  padding: 0.25rem 0.75rem !important;
}

.view-details-button:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.regional-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.collapse-icon {
  transition: transform 0.3s;
}

.collapse-icon.collapsed {
  transform: rotate(-90deg);
}

.regional-table {
  border: none;
}

.regional-table .header-row {
  background-color: #f0f0f0;
}

.regional-table .price-cell {
  height: 2.8rem;
}

.regional-table .price-grid {
  height: 100%;
}

.regional-table .price-single {
}

/* Snackbar styling */
.MuiSnackbar-root {
  min-width: 400px;
  max-width: 600px;
}

.MuiAlert-root {
  min-width: 400px;
  max-width: 600px;
  width: auto;
  word-wrap: break-word;
  white-space: pre-line;
}

.MuiAlert-message {
  width: 100%;
  word-wrap: break-word;
  white-space: pre-line;
}

@media (max-width: 1200px) {
  .pricing-table {
    font-size: 0.75rem;
  }
  
  .fuel-header {
    width: 85px;
    min-width: 85px;
  }
}

@media (max-width: 768px) {
  .pricing-container {
    padding: 0.5rem;
  }
  
  .table-controls {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .pricing-table {
    font-size: 0.7rem;
  }
  
  .header-cell, .data-cell {
    padding: 0.25rem;
  }
  
  .fuel-header {
    width: 70px;
    min-width: 70px;
  }
  
  .price-grid {
    height: 2rem;
  }
  
  .price-single {
    height: 2rem;
  }
}/* Regional Stations Page Styles */
.regional-stations-container {
  padding: 1rem;
  max-width: 100%;
  overflow-x: auto;
}

.pricing-container {
  padding: 1rem;
  max-width: 100%;
  overflow-x: auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.table-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
}

.back-button {
  color: rgb(132, 189, 0) !important;
  border-color: rgb(132, 189, 0) !important;
}

.page-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #333;
  margin: 0 !important;
}

.export-button {
  background-color: rgb(132, 189, 0) !important;
  color: white !important;
}

.controls-section {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.sort-control, .brand-control {
  min-width: 200px;
  width: 200px;
}

.stations-table {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: white;
}

.table-header {
  display: grid;
  grid-template-columns: 300px 1fr 120px;
  background-color: #e0e0e0;
  font-weight: 600;
  border-bottom: 2px solid #ddd;
}

.station-info-header, .sales-header {
  padding: 1rem;
  border-right: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fuel-prices-header {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  border-right: 1px solid #ddd;
}

.fuel-header {
  padding: 0.6rem 0.4rem;
  border-right: 1px solid #ddd;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  width: 110px !important;
  max-width: 110px !important;
  min-width: 110px !important;
}

.fuel-header:last-child {
  border-right: none;
}

.station-group {
  border-bottom: 1px solid #eee;
}

.station-group:last-child {
  border-bottom: none;
}

.station-row {
  display: grid;
  grid-template-columns: 300px 1fr 120px;
  min-height: 80px;
  border-bottom: 1px solid #f0f0f0;
}

.station-row:last-child {
  border-bottom: none;
}

.okko-station {
  background-color: #e8f5e8;
  font-weight: 500;
}

.competitor-station {
  background-color: #fff8e1;
}

.station-info {
  padding: 1rem;
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.station-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.station-unicode {
  font-weight: 600;
  color: #333;
}

.station-brand {
  background-color: rgb(132, 189, 0);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.competitor-station .station-brand {
  background-color: #ff9800;
}

.photo-link {
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
  min-width: auto !important;
}

.station-address {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.4;
}

.additional-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #666;
}

.fuel-prices {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  border-right: 1px solid #ddd;
}

.fuel-cell {
  padding: 0;
  border-right: 1px solid #ddd;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  position: relative;
  width: 110px !important;
  max-width: 110px !important;
  min-width: 110px !important;
}

.fuel-cell:last-child {
  border-right: none;
}

.fuel-cell.price-new {
  background-color: #c8e6c9;
}

.fuel-cell.price-removed {
  background-color: #ffcdd2;
}

/* Competitor price coloring */
.competitor-station .fuel-cell {
  background-color: #fff3cd; /* Yellow for higher prices */
}

.competitor-station .fuel-cell.competitor-lower {
  background-color: #c8e6c9; /* Green for lower prices */
}

/* Unbound stations styling */
.unbound-row {
  background-color: #fff8e1 !important;
}

.unbound-row:hover {
  background-color: #fff3cd !important;
}

.price-arrow {
  margin-left: 0.25rem;
  font-weight: bold;
}

.price-arrow.up {
  color: #2196f3;
}

.price-arrow.down {
  color: #f44336;
}

.sales-info {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sales-value {
  text-align: center;
  font-weight: 500;
}

.sales-change {
  display: block;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.sales-change.positive {
  color: #2196f3;
}

.sales-change.negative {
  color: #f44336;
}

.positive-change {
  color: #2196f3 !important;
}

.negative-change {
  color: #f44336 !important;
}

.regional-price-value {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  font-weight: 500;
  font-size: 0.6rem;
  min-height: 35px;
}

.regional-sales-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.regional-sales-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
  min-height: 60px;
}

.regional-sales-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  background-color: rgba(132, 189, 0, 0.1);
  border-radius: 2px;
}

.regional-sales-growth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  font-size: 0.65rem;
  font-weight: 500;
  border-radius: 2px;
}

.regional-sales-growth.positive-change {
  color: #2196f3;
  background-color: rgba(33, 150, 243, 0.1);
}

.regional-sales-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 60px;
}

.regional-sales-current {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  font-size: 0.6rem;
  font-weight: 600;
  background-color: rgba(132, 189, 0, 0.2);
  border-bottom: 1px solid #ddd;
  height: 33.33%;
}

.regional-sales-bottom {
  display: flex;
  height: 66.67%;
}

.regional-sales-left,
.regional-sales-right {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.regional-sales-left {
  border-right: 1px solid #ddd;
}

.regional-sales-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  font-size: 0.6rem;
  font-weight: 500;
  background-color: rgba(132, 189, 0, 0.1);
  height: 50%;
  border-bottom: 1px solid #ddd;
}

.regional-sales-value:last-child {
  border-bottom: none;
}

.regional-sales-growth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  font-size: 0.6rem;
  font-weight: 500;
  height: 50%;
  border-bottom: 1px solid #ddd;
}

.regional-sales-growth:last-child {
  border-bottom: none;
}

.regional-sales-growth.positive-change {
  color: #2196f3;
  background-color: rgba(33, 150, 243, 0.1);
}

.regional-sales-growth.negative-change {
  color: #f44336;
  background-color: rgba(244, 67, 54, 0.1);
}

.regional-fuel-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.regional-fuel-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto auto;
  gap: 1px;
  width: 100%;
  height: 100%;
  min-height: 60px;
}

.regional-fuel-price {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: white;
}

.regional-fuel-realization {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: #666;
  background-color: rgba(132, 189, 0, 0.1);
  border-top: 1px solid #ddd;
}

.regional-fuel-growth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  font-size: 0.65rem;
  font-weight: 500;
  border-top: 1px solid #ddd;
}

.regional-fuel-growth.positive-change {
  color: #2196f3;
  background-color: rgba(33, 150, 243, 0.1);
}

.regional-fuel-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 60px;
}

.regional-fuel-price {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: white;
  border-bottom: 1px solid #ddd;
  height: 33.33%;
}

.regional-fuel-bottom {
  display: flex;
  height: 66.67%;
}

.regional-fuel-left,
.regional-fuel-right {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.regional-fuel-left {
  border-right: 1px solid #ddd;
}

.regional-fuel-realization {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: #666;
  background-color: rgba(132, 189, 0, 0.1);
  height: 50%;
  border-bottom: 1px solid #ddd;
}

.regional-fuel-realization:last-child {
  border-bottom: none;
}

.regional-fuel-growth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  font-size: 0.65rem;
  font-weight: 500;
  height: 50%;
  border-bottom: 1px solid #ddd;
}

.regional-fuel-growth:last-child {
  border-bottom: none;
}

.regional-fuel-growth.positive-change {
  color: #2196f3;
  background-color: rgba(33, 150, 243, 0.1);
}

.regional-fuel-growth.negative-change {
  color: #f44336;
  background-color: rgba(244, 67, 54, 0.1);
}

.regional-data-row.regional-okko-row {
  height: 90px;
}

.brand-cell {
  width: 60px;
  max-width: 60px;
  padding: 0.2rem;
  font-size: 0.65rem;
  text-align: center;
}

.unicode-cell {
  width: 80px;
  max-width: 80px;
  padding: 0.2rem;
  font-size: 0.65rem;
}

.regional-brand-cell {
  width: 80px;
  max-width: 80px;
  padding: 0.25rem;
}

.address-cell {
  width: 180px;
  max-width: 180px;
  font-size: 0.65rem;
  padding: 0.2rem;
}

.photo-cell {
  width: 40px;
  max-width: 40px;
  padding: 0.2rem;
  font-size: 0.65rem;
}

.regional-photo-cell {
  width: 60px;
  max-width: 60px;
  padding: 0.25rem;
}

.date-cell {
  width: 75px;
  max-width: 75px;
  padding: 0.2rem;
  font-size: 0.65rem;
}

.regional-date-cell {
  width: 80px;
  max-width: 80px;
  padding: 0.25rem;
}

.influence-cell {
  width: 45px;
  max-width: 45px;
  padding: 0.2rem;
  font-size: 0.65rem;
}

.regional-influence-cell {
  width: 60px;
  max-width: 60px;
  padding: 0.25rem;
}

.distance-cell {
  width: 65px;
  max-width: 65px;
  padding: 0.2rem;
  font-size: 0.65rem;
}

.regional-distance-cell {
  width: 60px;
  max-width: 60px;
  padding: 0.25rem;
}

.location-cell {
  width: 60px;
  max-width: 60px;
  padding: 0.2rem;
  font-size: 0.65rem;
}

.regional-location-cell {
  width: 80px;
  max-width: 80px;
  padding: 0.25rem;
}

.price-cell {
  width: 120px;
  max-width: 120px;
  padding: 0;
  font-size: 0.65rem;
}

.regional-price-cell {
  width: 75px;
  max-width: 75px;
  padding: 0;
}

.price-diff {
  font-weight: 600;
  margin-left: 0.25rem;
}

.price-diff-positive {
  color: #2196f3;
}

.price-diff-negative {
  color: #f44336;
}

.sales-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* Fuel layout for OKKO stations */
.price-single {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 60px;
  align-items: stretch;
  justify-content: stretch;
  background-color: white;
}

.price-single .price-value {
  flex: 1;
  height:100% !important;
  width: 100%;
  font-weight: 500;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  min-height: 1.4rem;
}

.fuel-realization-cell {
  font-size: 0.7rem;
  font-weight: 500;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(132, 189, 0, 0.1);
  flex: 1;
  padding: 0.25rem;
  border-top: 1px solid #ddd;
}

.fuel-growth-cell {
  font-size: 0.65rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.fuel-growth-cell.positive-change {
  color: #2196f3;
  background-color: rgba(33, 150, 243, 0.1);
}

.fuel-growth-cell.negative-change {
  color: #f44336;
  background-color: rgba(244, 67, 54, 0.1);
}

/* Competitor price coloring - only apply when there's actual difference */
.competitor-higher {
  background-color: #fff3cd;
}

.competitor-lower {
  background-color: #c8e6c9;
}

/* Price comparison colors matching main pages */
.price-lower {
  background-color: #d4edda !important; /* Light green: competitor price >= OKKO price (good for OKKO) */
}

.price-higher {
  background-color: #fff3cd !important; /* Yellow: competitor price < OKKO price (concerning for OKKO) */
}

.unlinked-section {
  margin-top: 2rem;
  border-top: 2px solid #ddd;
  padding-top: 1rem;
}

.section-title {
  padding: 1rem;
  background-color: #f8f9fa;
  margin: 0 0 1rem 0 !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #666;
}

@media (max-width: 1200px) {
  .table-header {
    grid-template-columns: 250px 1fr 100px;
  }
  
  .station-row {
    grid-template-columns: 250px 1fr 100px;
  }
  
  .fuel-header, .fuel-cell {
    font-size: 0.7rem;
    padding: 0.5rem 0.25rem;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .controls-section {
    flex-direction: column;
  }
  
  .sort-control, .brand-control {
    min-width: 150px;
    width: 150px;
  }
  
  .table-header {
    grid-template-columns: 200px 1fr 80px;
  }
  
  .station-row {
    grid-template-columns: 200px 1fr 80px;
    min-height: 60px;
  }
  
  .fuel-prices {
    grid-template-columns: repeat(11, minmax(50px, 1fr));
  }
  
  .fuel-cell {
    min-height: 60px;
    font-size: 0.65rem;
  }
  
  .station-info {
    padding: 0.5rem;
  }
  
  .additional-info {
    font-size: 0.7rem;
  }
}
/* Consistent OKKO row styling */
.data-row.okko-row {
  background-color: #d4edda;
  font-weight: 500;
}

/* Flat OKKO row coloring - override all sub-cell colors */
.data-row.okko-row .regional-fuel-container,
.data-row.okko-row .regional-fuel-layout,
.data-row.okko-row .regional-fuel-price,
.data-row.okko-row .regional-fuel-bottom,
.data-row.okko-row .regional-fuel-left,
.data-row.okko-row .regional-fuel-right,
.data-row.okko-row .regional-fuel-realization,
.data-row.okko-row .regional-fuel-growth,
.data-row.okko-row .regional-sales-container,
.data-row.okko-row .regional-sales-layout,
.data-row.okko-row .regional-sales-current,
.data-row.okko-row .regional-sales-bottom,
.data-row.okko-row .regional-sales-left,
.data-row.okko-row .regional-sales-right,
.data-row.okko-row .regional-sales-value,
.data-row.okko-row .regional-sales-growth {
  background-color: #d4edda !important;
}

/* Ensure competitor rows have white/light backgrounds by default */
.data-row.competitor-row .regional-fuel-container,
.data-row.competitor-row .regional-fuel-layout,
.data-row.competitor-row .regional-fuel-price {
  background-color: white;
}

/* Price comparison colors for competitor fuel cells */
.data-row.competitor-row .regional-fuel-container.price-lower,
.data-row.competitor-row .regional-price-value.price-lower {
  background-color: #e8f5e8 !important;
}

.data-row.competitor-row .regional-fuel-container.price-higher,
.data-row.competitor-row .regional-price-value.price-higher {
  background-color: #fff3cd !important;
}

/* Price values should always be black with normal font weight */
.regional-price-value,
.regional-sales-current,
.price-value {
  color: #333 !important;
  font-weight: normal !important;
}

/* Ensure all price text is black */
.regional-price-value span:first-child,
.regional-sales-current span:first-child {
  color: #333 !important;
  font-weight: normal !important;
}

/* Price change colors only for price difference spans and arrows */
.price-diff-positive,
.price-arrow.up {
  color: #2196f3 !important;
}

.price-diff-negative,
.price-arrow.down {
  color: #f44336 !important;
}

.data-row {
  transition: background-color 0.2s;
}
/* Make all price values non-bold */
.price-value {
  font-weight: normal !important;
}
/* Growth sub-cells coloring */
.fuel-growth-cell .positive-change,
.fuel-growth-cell .count-increased {
  color: #2196f3 !important;
}

.fuel-growth-cell .negative-change,
.fuel-growth-cell .count-decreased {
  color: #f44336 !important;
}

/* Price change colors for price difference spans and arrows */
.price-diff-positive,
.price-arrow.up {
  color: #2196f3 !important;
}

.price-diff-negative,
.price-arrow.down {
  color: #f44336 !important;
}

/* New and removed price cell backgrounds */
.price-container.price-new,
.regional-fuel-container.price-new {
  background-color: #4caf50 !important;
}

.price-container.price-removed,
.regional-fuel-container.price-removed {
  background-color: #f44336 !important;
  min-height: 2.8rem !important;
}

.price-container.price-removed .price-value,
.regional-fuel-container.price-removed .regional-price-value {
  min-height: 1.4rem !important;
  background-color: #f44336 !important;
}/* Regional Price Dynamics Page Styles - Cloned from Pricing Page */
.pricing-container {
  padding: 1rem;
  max-width: 100%;
  overflow-x: auto;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
}

.loading-spinner {
  animation: spin 1s linear infinite;
  font-size: 2rem !important;
  color: rgb(132, 189, 0);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.summary-table-container {
  margin-bottom: 2rem;
}

.table-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
}

.table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.controls-left {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.export-btn {
  background-color: rgb(132, 189, 0) !important;
  color: white !important;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.export-btn:hover {
  background-color: rgb(118, 170, 0) !important;
}

.hide-discounts {
  color: #333;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

.header-row {
  background-color: #e0e0e0;
  font-weight: 600;
}

.data-row {
  transition: background-color 0.2s;
}

.data-row:hover {
  background-color: #f5f5f5;
}

.data-row.okko-row {
  background-color: #d4edda;
  font-weight: 500;
}

/* Force all OKKO cells and subcells to have the same color */
.data-row.okko-row .data-cell {
  background-color: #d4edda !important;
}

.data-row.okko-row .price-value {
  background-color: #d4edda !important;
}

.data-row.okko-row .fuel-realization-cell {
  background-color: #d4edda !important;
}

.data-row.okko-row .fuel-growth-cell {
  background-color: #d4edda !important;
}

.data-row.okko-row .price-container {
  background-color: #d4edda !important;
}

.data-row.okko-row .price-grid {
  background-color: #d4edda !important;
}

.data-row.okko-row .price-single {
  background-color: #d4edda !important;
}

.header-cell, .data-cell {
  display: table-cell;
  padding: 0.5rem;
  border: 1px solid #ddd;
  vertical-align: middle;
  text-align: center;
  font-size: 0.75rem;
  height: 2.8rem;
}

.header-cell.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
  position: relative;
}

.header-cell.sortable:hover {
  background-color: #d0d0d0;
}

.sort-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: #666;
  margin-left: 0.25rem;
  vertical-align: middle;
}

.brand-header, .brand-cell {
  width: 70px;
  text-align: left;
}

.sales-header, .sales-cell {
  width: 65px;
  text-align: center;
}

.sales-header {
  display: table-cell !important;
}

.fuel-header {
  width: 120px;
  min-width: 120px;
}

.fuel-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.fuel-subheaders {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #666;
}

.subheader {
  flex: 1;
  padding: 0 0.25rem;
}

.brand-name {
  font-weight: 500;
}

.station-count {
  display: block;
  font-size: 0.75rem;
  color: #333;
  margin-top: 0.25rem;
}

.active-count {
  font-weight: 600;
}

.count-increased {
  color: #2196f3 !important;
}

.count-decreased {
  color: #f44336 !important;
}

.station-count.count-increased {
  color: #2196f3 !important;
}

.station-count.count-decreased {
  color: #f44336 !important;
}

.sales-data {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sales-value {
  font-weight: 500;
}

.sales-change {
  font-size: 0.75rem;
}

.sales-label {
  font-size: 0.7rem;
  color: #666;
  font-weight: normal;
}

.price-cell {
  position: relative;
  padding: 0 !important;
}

.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  width: 100%;
  background-color: inherit;
}

.price-single {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  height: 2.8rem;
  background-color: inherit;
}

.price-value {
  font-weight: 500;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  min-height: 1.4rem;
  flex: 1;
}

.price-grid .price-value:nth-child(1) {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.price-grid .price-value:nth-child(2) {
  border-bottom: 1px solid #ddd;
}

.price-single .price-value {
  border: none;
  flex: 1;
  width: 100%;
}

.mode-price {
  grid-column: 1;
  grid-row: 1;
}

.discount-price {
  grid-column: 2;
  grid-row: 1;
}

.difference-value {
  font-weight: 600;
  color: #666;
  font-size: 0.7rem;
  background-color: white;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  flex: 1;
}

.competitor-higher {
  background-color: #fff3cd;
}

.competitor-lower {
  background-color: #e8f5e8;
}

.price-grid .difference-value:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid #ddd;
}

.price-grid .difference-value:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}

.price-single .difference-value {
  border-top: 1px solid #ddd;
  grid-column: unset;
  grid-row: unset;
  flex: 1;
}

.fuel-realization-cell {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.7rem;
  color: #666;
  font-weight: 500;
  background-color: #d4edda;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-right: 1px solid #ddd;
  flex: 1;
}

.fuel-growth-cell {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.7rem;
  font-weight: 500;
  background-color: #d4edda;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  flex: 1;
}

.price-single .fuel-realization-cell {
  border: none;
  border-top: 1px solid #ddd;
  grid-column: unset;
  grid-row: unset;
  flex: 1;
  background-color: #d4edda;
}

.positive-change {
  color: #2196f3 !important;
}

.positive-change::before {
  content: '↑ ';
}

.negative-change {
  color: #f44336 !important;
}

.negative-change::before {
  content: '↓ ';
}

/* Price change styling */
.price-value {
  font-weight: 500;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  min-height: 1.4rem;
  flex: 1;
  line-height: 1.1;
}

/* Price change colors for individual price cells */
.price-up {
  color: #2196f3 !important;
  font-weight: 600;
}

.price-down {
  color: #f44336 !important;
  font-weight: 600;
}

.price-same {
  color: #333;
}

.price-new {
  color: #4caf50 !important;
  font-weight: 600;
}

.price-removed {
  color: #f44336 !important;
  font-style: italic;
}

/* Price change arrows */
.price-arrow {
  margin-left: 0.25rem;
  font-weight: bold;
}

.price-arrow.up {
  color: #2196f3;
}

.price-arrow.down {
  color: #f44336;
}

/* Sales data improvements */
.sales-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.75rem;
  gap: 0.125rem;
}

.sales-row-horizontal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

.sales-row-horizontal:last-child {
  margin-bottom: 0;
}

.sales-row .sales-value,
.sales-row-horizontal .sales-value {
  font-weight: 500;
}

.sales-row .sales-change,
.sales-row-horizontal .sales-change {
  font-size: 0.7rem;
  font-weight: 500;
}

/* Brand order button */
.brand-order-btn {
  color: rgb(132, 189, 0) !important;
  border-color: rgb(132, 189, 0) !important;
  font-size: 0.875rem !important;
}

.brand-order-btn:hover {
  background-color: rgba(132, 189, 0, 0.04) !important;
}

/* Price container for tooltips */
.price-container {
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: inherit;
}

.price-container.price-new {
  background-color: #4caf50 !important;
}

.price-container.price-new .price-value {
  background-color: #4caf50 !important;
}

.price-container.price-new .price-grid {
  background-color: #4caf50 !important;
}

.price-container.price-removed {
  background-color: #f44336 !important;
  min-height: 2.8rem !important;
}

.price-container.price-removed .price-value {
  min-height: 1.4rem !important;
  background-color: #f44336 !important;
}

.price-container.price-removed .price-grid {
  background-color: #f44336 !important;
}



.price-container.price-higher {
  background-color: #fff3cd !important;
}

.price-container.price-lower {
  background-color: #e8f5e8 !important;
}

.price-container.price-critical {
  background-color: #ffebee !important;
}

/* Difference color classes */
.difference-positive {
  color: #4caf50 !important;
  font-weight: 600;
}

.difference-negative {
  color: #f44336 !important;
  font-weight: 600;
}

.difference-neutral {
  color: #666 !important;
  font-weight: normal;
}

.regional-tables-container {
  margin-top: 3rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 2rem;
}

.regional-table-container {
  margin-bottom: 2rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.regional-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: rgb(132, 189, 0);
  color: white;
  transition: background-color 0.2s;
  min-height: 2.5rem;
}

.regional-header-left {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex: 1;
}

.regional-header-left:hover {
  opacity: 0.9;
}

.regional-header-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.export-regional-button {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 0.75rem !important;
  padding: 0.25rem 0.75rem !important;
}

.export-regional-button:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.view-details-button {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 0.75rem !important;
  padding: 0.25rem 0.75rem !important;
}

.view-details-button:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.regional-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.collapse-icon {
  transition: transform 0.3s;
}

.collapse-icon.collapsed {
  transform: rotate(-90deg);
}

.regional-table {
  border: none;
}

.regional-table .header-row {
  background-color: #f0f0f0;
}

.regional-table .price-cell {
  height: 2.8rem;
}

.regional-table .price-grid {
  height: 100%;
}

@media (max-width: 1200px) {
  .pricing-table {
    font-size: 0.75rem;
  }
  
  .fuel-header {
    width: 85px;
    min-width: 85px;
  }
}

@media (max-width: 768px) {
  .pricing-container {
    padding: 0.5rem;
  }
  
  .table-controls {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .pricing-table {
    font-size: 0.7rem;
  }
  
  .header-cell, .data-cell {
    padding: 0.25rem;
  }
  
  .fuel-header {
    width: 70px;
    min-width: 70px;
  }
  
  .price-grid {
    height: 2rem;
  }
  
  .price-single {
    height: 2rem;
  }
}
/* Price values should always be black */
.price-value {
  color: #333 !important;
}

/* Price change colors only for price difference spans and arrows */
.price-diff-positive,
.price-arrow.up {
  color: #2196f3 !important;
}

.price-diff-negative,
.price-arrow.down {
  color: #f44336 !important;
}
/* Make all price values non-bold and ensure proper color */
.price-value {
  font-weight: normal !important;
  color: #333 !important;
}

/* Override white text only for new/removed containers */
.price-container:not(.price-new):not(.price-removed) .price-value {
  color: #333 !important;
}
/* Growth sub-cells coloring */
.fuel-growth-cell .positive-change,
.fuel-growth-cell .count-increased {
  color: #2196f3 !important;
}

.fuel-growth-cell .negative-change,
.fuel-growth-cell .count-decreased {
  color: #f44336 !important;
}

/* Price change colors for price difference spans and arrows */
.price-diff-positive,
.price-arrow.up {
  color: #2196f3 !important;
}

.price-diff-negative,
.price-arrow.down {
  color: #f44336 !important;
}/* Province Stations Page Styles - Identical to Regional Stations */
.regional-stations-container {
  padding: 1rem;
  max-width: 100%;
  overflow-x: auto;
}

.pricing-container {
  padding: 1rem;
  max-width: 100%;
  overflow-x: auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.table-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
}

.back-button {
  color: rgb(132, 189, 0) !important;
  border-color: rgb(132, 189, 0) !important;
}

.page-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #333;
  margin: 0 !important;
}

.export-button {
  background-color: rgb(132, 189, 0) !important;
  color: white !important;
}

.controls-section {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.sort-control, .brand-control {
  min-width: 200px;
  width: 200px;
}

.stations-table {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: white;
}

.table-header {
  display: grid;
  grid-template-columns: 300px 1fr 120px;
  background-color: #e0e0e0;
  font-weight: 600;
  border-bottom: 2px solid #ddd;
}

.station-info-header, .sales-header {
  padding: 1rem;
  border-right: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fuel-prices-header {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  border-right: 1px solid #ddd;
}

.fuel-header {
  padding: 0.6rem 0.4rem;
  border-right: 1px solid #ddd;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  width: 110px !important;
  max-width: 110px !important;
  min-width: 110px !important;
}

.fuel-header:last-child {
  border-right: none;
}

.station-group {
  border-bottom: 1px solid #eee;
}

.station-group:last-child {
  border-bottom: none;
}

.station-row {
  display: grid;
  grid-template-columns: 300px 1fr 120px;
  min-height: 80px;
  border-bottom: 1px solid #f0f0f0;
}

.station-row:last-child {
  border-bottom: none;
}

.okko-station {
  background-color: #e8f5e8;
  font-weight: 500;
}

.competitor-station {
  background-color: #fff8e1;
}

.station-info {
  padding: 1rem;
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.station-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.station-unicode {
  font-weight: 600;
  color: #333;
}

.station-brand {
  background-color: rgb(132, 189, 0);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.competitor-station .station-brand {
  background-color: #ff9800;
}

.photo-link {
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
  min-width: auto !important;
}

.station-address {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.4;
}

.additional-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #666;
}

.fuel-prices {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  border-right: 1px solid #ddd;
}

.fuel-cell {
  padding: 0;
  border-right: 1px solid #ddd;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  position: relative;
  width: 110px !important;
  max-width: 110px !important;
  min-width: 110px !important;
}

.fuel-cell:last-child {
  border-right: none;
}

.fuel-cell.price-new {
  background-color: #c8e6c9;
}

.fuel-cell.price-removed {
  background-color: #ffcdd2;
}

/* Competitor price coloring */
.competitor-station .fuel-cell {
  background-color: #fff3cd; /* Yellow for higher prices */
}

.competitor-station .fuel-cell.competitor-lower {
  background-color: #c8e6c9; /* Green for lower prices */
}

/* Unbound stations styling */
.unbound-row {
  background-color: #fff8e1 !important;
}

.unbound-row:hover {
  background-color: #fff3cd !important;
}

.price-arrow {
  margin-left: 0.25rem;
  font-weight: bold;
}

.price-arrow.up {
  color: #2196f3;
}

.price-arrow.down {
  color: #f44336;
}

.sales-info {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sales-value {
  text-align: center;
  font-weight: 500;
}

.sales-change {
  display: block;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.sales-change.positive {
  color: #2196f3;
}

.sales-change.negative {
  color: #f44336;
}

.positive-change {
  color: #2196f3 !important;
}

.negative-change {
  color: #f44336 !important;
}

.regional-price-value {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  font-weight: 500;
  font-size: 0.6rem;
  min-height: 35px;
}

.regional-sales-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.regional-sales-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
  min-height: 60px;
}

.regional-sales-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  background-color: rgba(132, 189, 0, 0.1);
  border-radius: 2px;
}

.regional-sales-growth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  font-size: 0.65rem;
  font-weight: 500;
  border-radius: 2px;
}

.regional-sales-growth.positive-change {
  color: #2196f3;
  background-color: rgba(33, 150, 243, 0.1);
}

.regional-sales-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 60px;
}

.regional-sales-current {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  font-size: 0.6rem;
  font-weight: 600;
  background-color: rgba(132, 189, 0, 0.2);
  border-bottom: 1px solid #ddd;
  height: 33.33%;
}

.regional-sales-bottom {
  display: flex;
  height: 66.67%;
}

.regional-sales-left,
.regional-sales-right {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.regional-sales-left {
  border-right: 1px solid #ddd;
}

.regional-sales-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  font-size: 0.6rem;
  font-weight: 500;
  background-color: rgba(132, 189, 0, 0.1);
  height: 50%;
  border-bottom: 1px solid #ddd;
}

.regional-sales-value:last-child {
  border-bottom: none;
}

.regional-sales-growth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  font-size: 0.6rem;
  font-weight: 500;
  height: 50%;
  border-bottom: 1px solid #ddd;
}

.regional-sales-growth:last-child {
  border-bottom: none;
}

.regional-sales-growth.positive-change {
  color: #2196f3;
  background-color: rgba(33, 150, 243, 0.1);
}

.regional-sales-growth.negative-change {
  color: #f44336;
  background-color: rgba(244, 67, 54, 0.1);
}

.regional-fuel-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.regional-fuel-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto auto;
  gap: 1px;
  width: 100%;
  height: 100%;
  min-height: 60px;
}

.regional-fuel-price {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: white;
}

.regional-fuel-realization {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: #666;
  background-color: rgba(132, 189, 0, 0.1);
  border-top: 1px solid #ddd;
}

.regional-fuel-growth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  font-size: 0.65rem;
  font-weight: 500;
  border-top: 1px solid #ddd;
}

.regional-fuel-growth.positive-change {
  color: #2196f3;
  background-color: rgba(33, 150, 243, 0.1);
}

.regional-fuel-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 60px;
}

.regional-fuel-price {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: white;
  border-bottom: 1px solid #ddd;
  height: 33.33%;
}

.regional-fuel-bottom {
  display: flex;
  height: 66.67%;
}

.regional-fuel-left,
.regional-fuel-right {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.regional-fuel-left {
  border-right: 1px solid #ddd;
}

.regional-fuel-realization {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: #666;
  background-color: rgba(132, 189, 0, 0.1);
  height: 50%;
  border-bottom: 1px solid #ddd;
}

.regional-fuel-realization:last-child {
  border-bottom: none;
}

.regional-fuel-growth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  font-size: 0.65rem;
  font-weight: 500;
  height: 50%;
  border-bottom: 1px solid #ddd;
}

.regional-fuel-growth:last-child {
  border-bottom: none;
}

.regional-fuel-growth.positive-change {
  color: #2196f3;
  background-color: rgba(33, 150, 243, 0.1);
}

.regional-fuel-growth.negative-change {
  color: #f44336;
  background-color: rgba(244, 67, 54, 0.1);
}

.regional-data-row.regional-okko-row {
  height: 90px;
}

.brand-cell {
  width: 60px;
  max-width: 60px;
  padding: 0.2rem;
  font-size: 0.65rem;
  text-align: center;
}

.unicode-cell {
  width: 80px;
  max-width: 80px;
  padding: 0.2rem;
  font-size: 0.65rem;
}

.regional-brand-cell {
  width: 80px;
  max-width: 80px;
  padding: 0.25rem;
}

.address-cell {
  width: 180px;
  max-width: 180px;
  font-size: 0.65rem;
  padding: 0.2rem;
}

.photo-cell {
  width: 40px;
  max-width: 40px;
  padding: 0.2rem;
  font-size: 0.65rem;
}

.regional-photo-cell {
  width: 60px;
  max-width: 60px;
  padding: 0.25rem;
}

.date-cell {
  width: 75px;
  max-width: 75px;
  padding: 0.2rem;
  font-size: 0.65rem;
}

.regional-date-cell {
  width: 80px;
  max-width: 80px;
  padding: 0.25rem;
}

.influence-cell {
  width: 45px;
  max-width: 45px;
  padding: 0.2rem;
  font-size: 0.65rem;
}

.regional-influence-cell {
  width: 60px;
  max-width: 60px;
  padding: 0.25rem;
}

.distance-cell {
  width: 65px;
  max-width: 65px;
  padding: 0.2rem;
  font-size: 0.65rem;
}

.regional-distance-cell {
  width: 60px;
  max-width: 60px;
  padding: 0.25rem;
}

.location-cell {
  width: 60px;
  max-width: 60px;
  padding: 0.2rem;
  font-size: 0.65rem;
}

.regional-location-cell {
  width: 80px;
  max-width: 80px;
  padding: 0.25rem;
}

.price-cell {
  width: 120px;
  max-width: 120px;
  padding: 0;
  font-size: 0.65rem;
}

.regional-price-cell {
  width: 75px;
  max-width: 75px;
  padding: 0;
}

.price-diff {
  font-weight: 600;
  margin-left: 0.25rem;
}

.price-diff-positive {
  color: #2196f3;
}

.price-diff-negative {
  color: #f44336;
}

.sales-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* Fuel layout for OKKO stations */
.price-single {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 60px;
  align-items: stretch;
  justify-content: stretch;
  background-color: white;
}

.price-single .price-value {
  flex: 1;
  height:100% !important;
  width: 100%;
  font-weight: 500;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  min-height: 1.4rem;
}

.fuel-realization-cell {
  font-size: 0.7rem;
  font-weight: 500;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(132, 189, 0, 0.1);
  flex: 1;
  padding: 0.25rem;
  border-top: 1px solid #ddd;
}

.fuel-growth-cell {
  font-size: 0.65rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.fuel-growth-cell.positive-change {
  color: #2196f3;
  background-color: rgba(33, 150, 243, 0.1);
}

.fuel-growth-cell.negative-change {
  color: #f44336;
  background-color: rgba(244, 67, 54, 0.1);
}

/* Competitor price coloring - only apply when there's actual difference */
.competitor-higher {
  background-color: #fff3cd;
}

.competitor-lower {
  background-color: #c8e6c9;
}

/* Price comparison colors matching main pages */
.price-lower {
  background-color: #d4edda !important; /* Light green: competitor price >= OKKO price (good for OKKO) */
}

.price-higher {
  background-color: #fff3cd !important; /* Yellow: competitor price < OKKO price (concerning for OKKO) */
}

.unlinked-section {
  margin-top: 2rem;
  border-top: 2px solid #ddd;
  padding-top: 1rem;
}

.section-title {
  padding: 1rem;
  background-color: #f8f9fa;
  margin: 0 0 1rem 0 !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #666;
}

@media (max-width: 1200px) {
  .table-header {
    grid-template-columns: 250px 1fr 100px;
  }
  
  .station-row {
    grid-template-columns: 250px 1fr 100px;
  }
  
  .fuel-header, .fuel-cell {
    font-size: 0.7rem;
    padding: 0.5rem 0.25rem;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .controls-section {
    flex-direction: column;
  }
  
  .sort-control, .brand-control {
    min-width: 150px;
    width: 150px;
  }
  
  .table-header {
    grid-template-columns: 200px 1fr 80px;
  }
  
  .station-row {
    grid-template-columns: 200px 1fr 80px;
    min-height: 60px;
  }
  
  .fuel-prices {
    grid-template-columns: repeat(11, minmax(50px, 1fr));
  }
  
  .fuel-cell {
    min-height: 60px;
    font-size: 0.65rem;
  }
  
  .station-info {
    padding: 0.5rem;
  }
  
  .additional-info {
    font-size: 0.7rem;
  }
}
/* Consistent OKKO row styling */
.data-row.okko-row {
  background-color: #d4edda;
  font-weight: 500;
}

/* Flat OKKO row coloring - override all sub-cell colors */
.data-row.okko-row .regional-fuel-container,
.data-row.okko-row .regional-fuel-layout,
.data-row.okko-row .regional-fuel-price,
.data-row.okko-row .regional-fuel-bottom,
.data-row.okko-row .regional-fuel-left,
.data-row.okko-row .regional-fuel-right,
.data-row.okko-row .regional-fuel-realization,
.data-row.okko-row .regional-fuel-growth,
.data-row.okko-row .regional-sales-container,
.data-row.okko-row .regional-sales-layout,
.data-row.okko-row .regional-sales-current,
.data-row.okko-row .regional-sales-bottom,
.data-row.okko-row .regional-sales-left,
.data-row.okko-row .regional-sales-right,
.data-row.okko-row .regional-sales-value,
.data-row.okko-row .regional-sales-growth {
  background-color: #d4edda !important;
}

/* Ensure competitor rows have white/light backgrounds by default */
.data-row.competitor-row .regional-fuel-container,
.data-row.competitor-row .regional-fuel-layout,
.data-row.competitor-row .regional-fuel-price {
  background-color: white;
}

/* Price comparison colors for competitor fuel cells */
.data-row.competitor-row .regional-fuel-container.price-lower,
.data-row.competitor-row .regional-price-value.price-lower {
  background-color: #e8f5e8 !important;
}

.data-row.competitor-row .regional-fuel-container.price-higher,
.data-row.competitor-row .regional-price-value.price-higher {
  background-color: #fff3cd !important;
}

/* Price values should always be black with normal font weight */
.regional-price-value,
.regional-sales-current,
.price-value {
  color: #333 !important;
  font-weight: normal !important;
}

/* Ensure all price text is black */
.regional-price-value span:first-child,
.regional-sales-current span:first-child {
  color: #333 !important;
  font-weight: normal !important;
}

/* Price change colors only for price difference spans and arrows */
.price-diff-positive,
.price-arrow.up {
  color: #2196f3 !important;
}

.price-diff-negative,
.price-arrow.down {
  color: #f44336 !important;
}

.data-row {
  transition: background-color 0.2s;
}
/* Make all price values non-bold */
.price-value {
  font-weight: normal !important;
}
/* Growth sub-cells coloring */
.fuel-growth-cell .positive-change,
.fuel-growth-cell .count-increased {
  color: #2196f3 !important;
}

.fuel-growth-cell .negative-change,
.fuel-growth-cell .count-decreased {
  color: #f44336 !important;
}

/* Price change colors for price difference spans and arrows */
.price-diff-positive,
.price-arrow.up {
  color: #2196f3 !important;
}

.price-diff-negative,
.price-arrow.down {
  color: #f44336 !important;
}

/* New and removed price cell backgrounds */
.price-container.price-new,
.regional-fuel-container.price-new {
  background-color: #4caf50 !important;
}

.price-container.price-removed,
.regional-fuel-container.price-removed {
  background-color: #f44336 !important;
  min-height: 2.8rem !important;
}

.price-container.price-removed .price-value,
.regional-fuel-container.price-removed .regional-price-value {
  min-height: 1.4rem !important;
  background-color: #f44336 !important;
}/* Scheduler Page Styles */
.scheduler-container {
  width: 100%;
  min-height: calc(100vh - 48px);
  padding-bottom: 2rem;
  background-color: #ffffff;
}

/* Loading */
.scheduler-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 3rem;
  gap: 1rem;
}

.scheduler-loading-spinner {
  animation: spin 1s linear infinite;
  font-size: 2rem !important;
  color: rgb(132, 189, 0);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Sticky Header */
.scheduler-sticky-header {
  position: sticky;
  top: 48px;
  z-index: 100;
  background: white;
  border-bottom: 1px solid #e0e0e0;
  margin: 0 10rem;
  border-radius: 0;
  box-shadow: none;
}

/* Page Header */
.scheduler-page-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 1.5rem;
}

.scheduler-page-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scheduler-page-title {
  margin: 0;
  color: #333;
  font-size: 1.5rem;
  font-weight: 600;
}

/* Page Header */
.scheduler-page-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 1.5rem;
}

.scheduler-page-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scheduler-page-title {
  margin: 0;
  color: #333;
  font-size: 1.5rem;
  font-weight: 600;
}

/* Filters Section */
.scheduler-filters-section {
  padding: 0;
}

.scheduler-filters-container {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.scheduler-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  align-items: flex-end;
}

.scheduler-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.scheduler-field-label {
  color: #333;
  font-weight: 500;
  font-size: 0.875rem;
}

.scheduler-filter-input {
  outline: none;
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.scheduler-filter-input:focus {
  border-color: rgb(132, 189, 0);
}

.scheduler-filter-select {
  outline: none;
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: border-color 0.2s;
  background-color: white;
}

.scheduler-filter-select:focus {
  border-color: rgb(132, 189, 0);
}

/* Action Buttons */
.scheduler-actions-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.scheduler-trigger-button {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
  color: rgb(132, 189, 0);
  background-color: white;
  border: 1px solid rgb(132, 189, 0);
  cursor: pointer;
}

.scheduler-trigger-button:hover:not(.disabled) {
  background-color: rgb(132, 189, 0);
  color: white;
}

.scheduler-trigger-button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.scheduler-save-button {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
  color: white;
  background-color: rgb(132, 189, 0);
  border: 1px solid rgb(132, 189, 0);
  cursor: pointer;
}

.scheduler-save-button:hover:not(.disabled) {
  background-color: rgb(118, 170, 0);
  border-color: rgb(118, 170, 0);
}

.scheduler-save-button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Table Header */
.scheduler-table-header {
  background: #e0e0e0;
  border-top: 1px solid #ddd;
}

.scheduler-table-header-row {
  display: flex;
}

.scheduler-table-header-cell {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: #333;
  font-size: 0.75rem;
  position: relative;
  cursor: default;
  user-select: none;
  transition: background-color 0.2s;
}

.scheduler-table-header-cell:not(:last-child) {
  border-right: 1px solid #ddd;
}

/* Results Table */
.scheduler-results-container {
  margin: 0 10rem;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.scheduler-table-container {
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  border-top: none;
}

.scheduler-results-table {
  width: 100%;
  border-collapse: collapse;
}

.scheduler-table-row {
  transition: background-color 0.2s;
  height: 2.8rem;
}

.scheduler-table-row:hover {
  background-color: #f9f9f9;
}

.scheduler-table-cell {
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  font-size: 0.875rem;
  height: 2.8rem;
  vertical-align: middle;
}

.scheduler-substage-table {
  width: 100%;
  border-collapse: collapse;
}

.scheduler-substage-row {
  transition: background-color 0.2s;
  height: 2.5rem;
}

.scheduler-substage-row:hover {
  background-color: #f9f9f9;
}

.scheduler-substage-cell {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.8rem;
  height: 2.5rem;
  vertical-align: middle;
}

/* Status Colors */
.scheduler-row-processing {
  background-color: #fff;
}

.scheduler-row-completed {
  background-color: #e8f5e8;
}

.scheduler-row-cancelled {
  background-color: #f5f5f5;
}

/* Status Chips */
.scheduler-status-chip {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.scheduler-status-chip.processing {
  color: #ed6c02;
  background-color: #fff3e0;
}

.scheduler-status-chip.completed {
  color: rgb(132, 189, 0);
  background-color: #e8f5e8;
}

.scheduler-status-chip.cancelled {
  color: #757575;
  background-color: #f5f5f5;
}

/* Edit Controls */
.scheduler-edit-select {
  outline: none;
  height: 1.8rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.75rem;
  min-width: 120px;
  background-color: white;
}

.scheduler-edit-select:focus {
  border-color: rgb(132, 189, 0);
}

.scheduler-edit-select:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.scheduler-time-picker {
  width: 100px;
}

.scheduler-time-picker .MuiInputBase-root {
  height: 1.8rem !important;
  font-size: 0.75rem !important;
}

.scheduler-time-picker .MuiInputBase-input {
  padding: 0.25rem 0.5rem !important;
  height: 1.3rem !important;
  box-sizing: border-box !important;
}

.scheduler-time-picker .MuiOutlinedInput-notchedOutline {
  border: 1px solid #ccc !important;
}

.scheduler-time-picker .MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #ccc !important;
}

.scheduler-time-picker .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: rgb(132, 189, 0) !important;
  border-width: 1px !important;
}

/* Time Picker Dropdown */
.scheduler-time-picker .MuiPaper-root {
  width: 100px !important;
  max-width: 100px !important;
}

.scheduler-time-picker .MuiList-root {
  padding: 0.25rem 0 !important;
  max-height: 200px !important;
}

.scheduler-time-picker .MuiMenuItem-root {
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
  min-height: 1.5rem !important;
  line-height: 1.2 !important;
}

.scheduler-time-picker .MuiMenuItem-root:hover {
  background-color: #f5f5f5 !important;
}

/* Action Buttons */
.scheduler-action-buttons {
  display: flex;
  gap: 0.25rem;
}

.scheduler-action-button {
  padding: 0.25rem;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.scheduler-action-button:hover {
  background-color: #f0f0f0;
}

.scheduler-edit-button {
  color: inherit;
}

.scheduler-save-action-button {
  color: rgb(132, 189, 0);
}

.scheduler-save-action-button.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.scheduler-save-action-button.disabled:hover {
  background-color: transparent;
}

.scheduler-cancel-action-button {
  color: #d32f2f;
}

/* Edit Icon */
.scheduler-edit-icon {
  font-size: 16px;
  color: #666;
  margin-left: 0.5rem;
}

/* Expand/Collapse */
.scheduler-expand-button {
  padding: 0.25rem;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Column widths */
.scheduler-col-expand { width: 40px; }
.scheduler-col-stage { width: 25%; }
.scheduler-col-date { width: 12%; }
.scheduler-col-time { width: 10%; }
.scheduler-col-status { width: 15%; }
.scheduler-col-user { width: 15%; }
.scheduler-col-edit-date { width: 13%; }
.scheduler-col-actions { width: 100px; }

/* No Data */
.scheduler-no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #666;
}

.scheduler-no-data-icon {
  font-size: 3rem;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  color: #ccc;
}

/* Snackbar styling */
.MuiSnackbar-root {
  min-width: 400px;
  max-width: 600px;
}

.MuiAlert-root {
  min-width: 400px;
  max-width: 600px;
  width: auto;
  word-wrap: break-word;
  white-space: pre-line;
}

.MuiAlert-message {
  width: 100%;
  word-wrap: break-word;
  white-space: pre-line;
}/* Main container */
.upload-main-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  background-color: #ffffff;
  min-height: calc(100vh - 48px);
}

.upload-content-wrapper {
  width: 100%;
  max-width: 850px;
}

.upload-card {
  padding: 1.5rem;
  padding-top: 0.5rem;
  border: 2px solid rgb(132, 189, 0);
  border-radius: 8px;
  background-color: white;
}

/* Page header */
.upload-header {
  width: 100%;
  text-align: center;
  margin-bottom: 2rem;
}

.upload-title {
  color: #333;
  font-weight: 600;
  font-size: 1.5rem;
}

/* Radio buttons */
.upload-radio-container {
  display: flex;
  margin-bottom: 1rem;
  align-items: center;
  justify-content: left;
}

.upload-radio-group {
  display: flex !important;
  flex-direction: row !important;
  width: 100%;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.upload-radio-group .MuiFormGroup-root {
  flex-direction: row !important;
  gap: 1rem;
}

.upload-radio-group .MuiFormControlLabel-root {
  margin-right: 1rem;
  margin-bottom: 0 !important;
  white-space: nowrap;
}

/* File input */
.upload-file-container {
  display: flex;
  margin-bottom: 1rem;
  align-items: center;
  justify-content: left;
}

.upload-file-wrapper {
  gap: 0.5rem;
  width: 100%;
  display: flex;
  height: 2.5rem;
  border-radius: 8px;
  align-items: center;
  justify-content: left;
  border: 2px solid #666;
  transition: opacity 0.2s, border-color 0.2s;
  padding-left: 0.2rem;
}

.upload-file-wrapper.disabled {
  opacity: 0.5;
  border-color: #ccc;
  background-color: #f9f9f9;
}

.upload-file-input {
  display: none;
}

.upload-file-button {
  height: 2rem;
  margin: 0.25rem;
  margin-left: 0.1rem;
  border-radius: 8px;
  color: white !important;
  background-color: rgb(132, 189, 0) !important;
  border: 2px solid rgb(132, 189, 0) !important;
}

.upload-file-button:hover {
  border-color: rgb(118, 170, 0);
  background-color: rgb(118, 170, 0);
}

.upload-file-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc;
  border-color: #ccc;
  color: #666;
}

.upload-file-name {
  transition: color 0.2s;
}

.upload-file-name.selected {
  color: #000;
  font-style: normal;
  font-weight: bold;
}

.upload-file-name.placeholder {
  color: #666;
  font-style: italic;
  font-weight: bold;
}

/* Create order checkbox */
.upload-order-container {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-bottom: 0.5rem;
}

.upload-order-label {
  font-weight: 500;
}

/* Notification options */
.upload-notifications-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.upload-notifications-column {
  display: flex;
  flex-direction: column;
}

/* Time notification settings */
.upload-time-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.upload-time-label {
  padding-left: 0.7rem;
  font-size: 15px;
  font-weight: 500;
  min-width: 140px;
}

.upload-time-inputs {
  display: flex;
  gap: 0.5rem;
}

.upload-time-field .MuiOutlinedInput-root {
  height: 2rem;
  font-size: 0.875rem;
}

.upload-time-field .MuiOutlinedInput-root:focus {
  border-color: rgb(132, 189, 0);
  box-shadow: 0 0 0 2px rgba(132, 189, 0, 0.2);
}

.upload-time-field .MuiOutlinedInput-root:disabled {
  background-color: #f5f5f5;
  color: #999;
}

/* Upload button */
.upload-button-container {
  display: flex;
  margin-top: 2rem;
  align-items: center;
  justify-content: center;
}

.upload-button {
  width: 18rem;
  border-radius: 8px;
  color: white;
  background-color: rgb(132, 189, 0);
}

.upload-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc;
  color: #666;
}

.upload-loading-spinner {
  margin-right: 8px;
  color: white;
}

/* Snackbar */
.upload-snackbar-alert {
  width: 100%;
  white-space: pre-line;
}/* User Management Page Styles */
.user-management-container {
  width: 100%;
  min-height: calc(100vh - 48px);
  padding-bottom: 2rem;
  background-color: #ffffff;
}

/* Sticky Header */
.sticky-header {
  position: sticky;
  top: 48px;
  z-index: 100;
  background: white;
  border-bottom: 1px solid #e0e0e0;
  margin: 0 10rem;
  border-radius: 0;
  box-shadow: none;
}

/* Page Header */
.user-management-page-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 1.5rem;
}

.user-management-page-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-management-page-title {
  margin: 0;
  color: #333;
  font-size: 1.5rem;
  font-weight: 600;
}

.user-management-add-user-button {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
  color: white;
  background-color: rgb(132, 189, 0);
  border: 1px solid rgb(132, 189, 0);
  cursor: pointer;
}

.user-management-add-user-button:hover:not(.disabled) {
  background-color: rgb(118, 170, 0);
  border-color: rgb(118, 170, 0);
}

.user-management-add-user-button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Button placeholder to maintain consistent height */
.user-management-button-placeholder {
  height: 2rem;
  width: 1px; /* Minimal width, just to maintain height */
}

/* Form Section */
.user-management-form-section {
  padding: 0 1.5rem 1.5rem 1.5rem;
}

.user-management-user-form {
  margin-bottom: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 1.5rem;
}

.user-management-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.user-management-form-title {
  margin: 0;
  color: #333;
  font-size: 1.25rem;
  font-weight: 600;
}

.user-management-close-form-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-management-form-fields {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.user-management-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 0 0 200px;
}

.user-management-form-field.role-field {
  flex: 0 0 150px;
}

.user-management-form-field.toggle-field {
  flex: 0 0 100px;
}

.user-management-form-field.notification-field {
  flex: 0 0 120px;
}

.user-management-field-label {
  color: #333;
  font-weight: 500;
  font-size: 0.875rem;
}

.user-management-form-input {
  outline: none;
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.user-management-form-input.error {
  border-color: #d32f2f;
}

.user-management-form-input.disabled {
  background-color: #f5f5f5;
}

.user-management-form-select {
  outline: none;
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.user-management-toggle-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-management-toggle-button {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-management-toggle-button.active {
  background-color: rgb(132, 189, 0);
}

.user-management-toggle-button.inactive {
  background-color: #ccc;
}

.user-management-toggle-slider {
  position: absolute;
  top: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: left 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.user-management-toggle-slider.active {
  left: 22px;
}

.user-management-toggle-slider.inactive {
  left: 2px;
}

.user-management-toggle-label {
  font-size: 0.875rem;
}

.user-management-error-message {
  color: #d32f2f;
  font-size: 0.75rem;
}

.user-management-form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.user-management-cancel-button {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  background-color: #e0e0e0;
  color: #333;
  border: 1px solid #ccc;
  cursor: pointer;
}

.user-management-submit-button {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  background-color: rgb(132, 189, 0);
  color: white;
  border: 1px solid rgb(132, 189, 0);
  cursor: pointer;
}

.user-management-submit-button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Search Section */
.user-management-search-section {
  display: flex;
  justify-content: center;
}

.user-management-search-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 50%;
}

.user-management-search-input {
  outline: none;
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

/* Table Header */
.user-management-table-header {
  background: #e0e0e0;
  border-top: 1px solid #ddd;
}

.user-management-table-header-row {
  display: flex;
}

.user-management-table-header-cell {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: #333;
  font-size: 0.75rem;
  position: relative;
  cursor: default;
  user-select: none;
  transition: background-color 0.2s;
}

.user-management-table-header-cell.sortable {
  cursor: pointer;
}

.user-management-table-header-cell.sortable:hover {
  background-color: #d0d0d0;
}

.user-management-table-header-cell:not(:last-child) {
  border-right: 1px solid #ddd;
}

.user-management-sort-icon-container {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.user-management-sort-icon {
  font-size: 1rem;
}

/* Results Table */
.user-management-results-container {
  margin: 0 10rem;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.user-management-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #666;
}

.user-management-loading-spinner {
  animation: spin 1s linear infinite;
  font-size: 2rem;
  color: rgb(132, 189, 0);
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.user-management-table-container {
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  border-top: none;
}

.user-management-results-table {
  width: 100%;
  border-collapse: collapse;
}

.user-management-table-row {
  cursor: pointer;
  transition: background-color 0.2s;
  height: 2.8rem;
}

.user-management-table-row:hover {
  background-color: #f9f9f9;
}

.user-management-table-cell {
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  font-size: 0.875rem;
  height: 2.8rem;
}

.user-management-role-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #666;
  background-color: #f5f5f5;
}

.user-management-status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.user-management-status-badge.active {
  color: rgb(132, 189, 0);
  background-color: #e8f5e8;
}

.user-management-status-badge.inactive {
  color: #d32f2f;
  background-color: #ffebee;
}

.user-management-notification-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.user-management-notification-badge.enabled {
  color: #1976d2;
  background-color: #e3f2fd;
}

.user-management-notification-badge.disabled {
  color: #757575;
  background-color: #f5f5f5;
}

.user-management-action-buttons {
  display: flex;
  gap: 0.25rem;
}

.user-management-action-button {
  padding: 0.25rem;
}

.user-management-edit-button {
  color: inherit;
}

.user-management-delete-button {
  color: #d32f2f;
}

/* No Data */
.user-management-no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #666;
}

.user-management-no-data-icon {
  font-size: 3rem;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  color: #ccc;
}

/* Column widths */
.col-email { width: 19%; }
.col-name { width: 15%; }
.col-role { width: 9%; }
.col-phone { width: 15%; }
.col-status { width: 9%; }
.col-notifications { width: 10%; }
.col-created { width: 15%; }
.col-actions { width: 8%; }

/* Tabs */
.user-management-tabs {
  display: flex;
  border-top: 1px solid #e0e0e0;
  margin-top: 1rem;
}

.user-management-tab {
  padding: 0.75rem 1.5rem;
  background: #f5f5f5;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: #666;
  transition: all 0.2s;
}

.user-management-tab.active {
  background: white;
  color: rgb(132, 189, 0);
  border-bottom-color: rgb(132, 189, 0);
}

.user-management-tab:hover:not(.active) {
  background: #e0e0e0;
}

/* Marketers Actions */
.user-management-marketers-actions {
  display: flex;
  gap: 1rem;
}

.user-management-reset-button {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  background-color: #e0e0e0;
  color: #333;
  border: 1px solid #ccc;
  cursor: pointer;
}

.user-management-save-button {
  height: 2rem;
  padding: 0 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  background-color: rgb(132, 189, 0);
  color: white;
  border: 1px solid rgb(132, 189, 0);
  cursor: pointer;
}

/* Marketers Layout */
.user-management-marketers-container {
  padding: 1rem;
}

.user-management-expert-group {
  margin-bottom: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.user-management-expert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f9f9f9;
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-management-expert-header:hover {
  background: #f0f0f0;
}

.user-management-expert-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.user-management-expert-email {
  font-weight: 600;
  color: #333;
}

.user-management-expert-phone {
  font-size: 0.875rem;
  color: #666;
}

.user-management-stations-container {
  border-top: 1px solid #e0e0e0;
}

.user-management-stations-header {
  display: flex;
  background: #e0e0e0;
  font-weight: 600;
  font-size: 0.75rem;
  color: #333;
}

.user-management-stations-header > div {
  padding: 0.5rem 0.75rem;
  border-right: 1px solid #ddd;
}

.user-management-station-row {
  display: flex;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}

.user-management-station-row:hover {
  background: #f9f9f9;
}

.user-management-station-row > div {
  padding: 0.75rem;
  border-right: 1px solid #eee;
  font-size: 0.875rem;
}

/* Marketers Column Widths */
.user-management-stations-header .col-unicode,
.user-management-station-row .col-unicode { width: 10%; }
.user-management-stations-header .col-number,
.user-management-station-row .col-number { width: 8%; }
.user-management-stations-header .col-email,
.user-management-station-row .col-email { width: 18%; }
.user-management-stations-header .col-address,
.user-management-station-row .col-address { width: 25%; }
.user-management-stations-header .col-region,
.user-management-station-row .col-region { width: 12%; }
.user-management-stations-header .col-province,
.user-management-station-row .col-province { width: 12%; }
.user-management-stations-header .col-status,
.user-management-station-row .col-status { width: 10%; }
.user-management-stations-header .col-excluded,
.user-management-station-row .col-excluded { width: 10%; }

.user-management-exclusion-checkbox {
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
}

.user-management-field-hint {
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.25rem;
}

/* Marketers Header Columns */
.col-expert-email { width: 70%; }
.col-expert-phone { width: 30%; }

/* Expert Main Row */
.user-management-expert-main-row {
  background: #f9f9f9;
  cursor: pointer;
}

.user-management-expert-main-row:hover {
  background: #f0f0f0;
}

.user-management-expert-cell-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-management-expert-email {
  font-weight: 600;
}

/* Stations Subrow */
.user-management-stations-subrow {
  background: white;
}

.user-management-stations-cell {
  padding: 0 !important;
  border: none !important;
}