/* ==================================================
   Grid.js Dark Theme - Sestimi UI System v2.0
   ================================================== */

/* Container */
.gridjs-container {
  color: var(--text-primary, #e7e9ea);
  display: block;
  width: 100%;
  padding: 0;
  overflow: visible;
}

/* Wrapper */
.gridjs-wrapper {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--bg-secondary, #1a1f26);
  overflow: hidden;
}

/* Table */
table.gridjs-table {
  border-collapse: collapse;
  width: 100%;
}

/* Header */
th.gridjs-th {
  background-color: var(--bg-tertiary, #242a33);
  border: none;
  border-bottom: 1px solid var(--border-color, #2f3336);
  color: var(--text-secondary, #71767b);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  white-space: nowrap;
}

th.gridjs-th:first-child {
  padding-left: 16px;
}

th.gridjs-th .gridjs-th-content {
  overflow: hidden;
  text-overflow: ellipsis;
}

th.gridjs-th-sort:hover,
th.gridjs-th-sort:focus {
  background-color: var(--bg-hover, #2c3640);
}

/* Body */
.gridjs-tbody {
  background-color: transparent;
}

td.gridjs-td {
  background-color: var(--bg-secondary, #1a1f26);
  border: none;
  border-bottom: 1px solid var(--border-color, #2f3336);
  color: var(--text-primary, #e7e9ea);
  font-size: 13px;
  padding: 6px 10px;
}

td.gridjs-td:first-child {
  padding-left: 16px;
}

/* Row Hover */
.gridjs-tr:hover td {
  background-color: var(--bg-tertiary, #242a33);
}

/* Row Selected */
.gridjs-tr-selected td {
  background-color: rgba(29, 155, 240, 0.1) !important;
}

/* Last row no border */
.gridjs-tr:last-child td {
  border-bottom: none;
}

/* Footer / Pagination */
.gridjs-footer {
  background-color: var(--bg-tertiary, #242a33);
  border: none;
  border-top: 1px solid var(--border-color, #2f3336);
  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
  padding: 8px 10px;
  box-shadow: none;
}

.gridjs-pagination {
  color: var(--text-secondary, #71767b);
  font-size: 13px;
}

.gridjs-pagination .gridjs-summary {
  color: var(--text-secondary, #71767b);
}

.gridjs-pagination .gridjs-pages button {
  background-color: var(--bg-secondary, #1a1f26);
  border: 1px solid var(--border-color, #2f3336);
  color: var(--text-primary, #e7e9ea);
  font-size: 13px;
  padding: 6px 12px;
  transition: all 0.15s ease;
}

.gridjs-pagination .gridjs-pages button:hover:not(:disabled) {
  background-color: var(--bg-hover, #2c3640);
  border-color: var(--border-color, #2f3336);
  color: var(--text-primary, #e7e9ea);
}

.gridjs-pagination .gridjs-pages button:focus {
  box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.3);
  border-color: var(--accent-primary, #1d9bf0);
}

.gridjs-pagination .gridjs-pages button:disabled {
  background-color: var(--bg-tertiary, #242a33);
  color: var(--text-muted, #536471);
  cursor: not-allowed;
  opacity: 0.6;
}

.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
  background-color: var(--accent-primary, #1d9bf0);
  border-color: var(--accent-primary, #1d9bf0);
  color: #fff;
  font-weight: 600;
}

.gridjs-pagination .gridjs-pages button.gridjs-spread {
  background-color: transparent;
  border-color: transparent;
  cursor: default;
}

/* Search */
.gridjs-head {
  padding: 0 0 16px 0;
  margin: 0;
}

.gridjs-search {
  float: none;
  width: 100%;
  max-width: 300px;
}

input.gridjs-input {
  background-color: var(--bg-secondary, #1a1f26);
  border: 1px solid var(--border-color, #2f3336);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-primary, #e7e9ea);
  font-size: 14px;
  padding: 10px 14px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input.gridjs-input::placeholder {
  color: var(--text-muted, #536471);
}

input.gridjs-input:focus {
  border-color: var(--accent-primary, #1d9bf0);
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.2);
  outline: none;
}

/* Sort Buttons */
button.gridjs-sort {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

button.gridjs-sort:hover {
  opacity: 1;
}

button.gridjs-sort-neutral {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371767b' stroke-width='2'%3E%3Cpath d='M7 15l5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E");
}

button.gridjs-sort-asc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d9bf0' stroke-width='2'%3E%3Cpath d='M7 14l5-5 5 5'/%3E%3C/svg%3E");
  opacity: 1;
}

button.gridjs-sort-desc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d9bf0' stroke-width='2'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  opacity: 1;
}

/* Checkbox (Multiselect) */
.gridjs-td .gridjs-checkbox,
.gridjs-th .gridjs-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent-primary, #1d9bf0);
}

/* Custom checkbox styling */
.gridjs-checkbox-cell {
  width: 40px !important;
  text-align: center !important;
  padding: 12px 8px !important;
}

/* Loading */
.gridjs-loading-bar {
  background-color: var(--bg-secondary, #1a1f26);
  opacity: 0.8;
}

.gridjs-loading-bar:after {
  background-image: linear-gradient(
    90deg,
    transparent,
    rgba(29, 155, 240, 0.1) 20%,
    rgba(29, 155, 240, 0.2) 60%,
    transparent
  );
}

/* Message (no results) */
td.gridjs-message {
  color: var(--text-secondary, #71767b);
  font-size: 14px;
  padding: 24px 16px;
  text-align: center;
}

/* Custom Status Badges (for Grid.js cells) */
.gridjs-td .badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  text-transform: capitalize;
}

.badge.bg-primary-subtle { background-color: rgba(29, 155, 240, 0.15); color: var(--accent-primary, #1d9bf0); }
.badge.bg-success-subtle { background-color: rgba(0, 186, 124, 0.15); color: var(--accent-success, #00ba7c); }
.badge.bg-warning-subtle { background-color: rgba(255, 173, 31, 0.15); color: var(--accent-warning, #ffad1f); }
.badge.bg-danger-subtle { background-color: rgba(244, 33, 46, 0.15); color: var(--accent-danger, #f4212e); }
.badge.bg-info-subtle { background-color: rgba(29, 155, 240, 0.15); color: #8ecdf8; }
.badge.bg-purple-subtle { background-color: rgba(168, 85, 247, 0.15); color: #c084fc; }
.badge.bg-secondary-subtle { background-color: rgba(113, 118, 123, 0.15); color: var(--text-secondary, #71767b); }

/* Selection toolbar (for batch actions) */
.gridjs-selection-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background-color: var(--bg-tertiary, #242a33);
  border-bottom: 1px solid var(--border-color, #2f3336);
  font-size: 14px;
  color: var(--text-primary, #e7e9ea);
}

.gridjs-selection-count {
  color: var(--accent-primary, #1d9bf0);
  font-weight: 600;
}

/* ==================================================
   Filters
   ================================================== */
.gridjs-filters {
  margin-bottom: 16px;
}

.gridjs-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.gridjs-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.gridjs-filter-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #71767b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gridjs-filter-group .form-input,
.gridjs-filter-group .form-select {
  height: 38px;
  font-size: 14px;
}

.gridjs-filter-actions {
  min-width: auto;
  justify-content: flex-end;
}

.gridjs-filter-actions .btn {
  height: 38px;
}

/* ==================================================
   Mobile Responsive - Horizontal Scroll
   ================================================== */
@media (max-width: 768px) {
  .gridjs-filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .gridjs-filter-group {
    min-width: 100%;
  }

  .gridjs-filter-actions {
    flex-direction: row;
    justify-content: stretch;
  }

  .gridjs-filter-actions .btn {
    flex: 1;
  }

  /* Horizontal scroll for table */
  .gridjs-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.gridjs-table {
    min-width: 700px;
  }

  /* Smaller padding on mobile */
  th.gridjs-th,
  td.gridjs-td {
    padding: 10px 12px;
    font-size: 13px;
  }

  .gridjs-footer {
    padding: 10px 12px;
  }

  .gridjs-pagination .gridjs-pages button {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Selection toolbar stacks */
  .gridjs-selection-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  table.gridjs-table {
    min-width: 600px;
  }

  th.gridjs-th,
  td.gridjs-td {
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* ==================================================
   Cell with main + sub text (like old system)
   ================================================== */
.gridjs-cell-main {
  font-size: 14px;
  color: var(--text-primary, #e7e9ea);
  display: flex;
  align-items: center;
}

.gridjs-cell-sub {
  font-size: 12px;
  color: var(--text-secondary, #71767b);
  margin-top: 2px;
}

.gridjs-value {
  font-weight: 600;
  color: var(--text-primary, #e7e9ea);
}

/* Cyan badge for Wstrzymane */
.badge.bg-cyan-subtle { 
  background-color: rgba(0, 188, 212, 0.15); 
  color: #00bcd4; 
}

/* Table column sizing fixes */
th.gridjs-th,
td.gridjs-td {
  vertical-align: middle;
}

/* Status Dots */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}

.status-dot.success {
  background-color: var(--accent-success, #00ba7c);
  box-shadow: 0 0 6px rgba(0, 186, 124, 0.5);
}

.status-dot.warning {
  background-color: var(--accent-warning, #ffad1f);
  box-shadow: 0 0 6px rgba(255, 173, 31, 0.5);
}

.status-dot.danger {
  background-color: var(--accent-danger, #f4212e);
  box-shadow: 0 0 6px rgba(244, 33, 46, 0.5);
}

.status-dot.secondary {
  background-color: var(--text-muted, #536471);
}

/* Smaller checkboxes */
.gridjs-checkbox {
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}


/* Header top corners rounded */
.gridjs-thead tr:first-child th:first-child {
  border-radius: var(--radius-lg, 12px) 0 0 0;
}

.gridjs-thead tr:first-child th:last-child {
  border-radius: 0 var(--radius-lg, 12px) 0 0;
}

/* Feedback log buyer column fix */
.gridjs-td .buyer-name {
  color: #e7e9ea !important;
  font-weight: 500;
}
.gridjs-td .text-muted.small {
  color: #71767b !important;
  font-size: 12px;
}