/* Page-level polish for Jango Exchange BackOffice */

/* Dashboard */
.dashboard-section-title {
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-actions .btn {
  margin: 0 !important;
}

.dashboard-metric-card,
.dashboard-open-shift-card {
  border: 1px solid var(--jango-border) !important;
  border-radius: var(--jango-radius) !important;
  background:
    linear-gradient(180deg, rgba(30, 50, 44, 0.94), rgba(13, 26, 22, 0.98)) !important;
  box-shadow: var(--jango-shadow) !important;
}

.dashboard-metric-card .card-header,
.dashboard-open-shift-card .card-header {
  color: #dfffb0 !important;
  border-bottom: 1px solid var(--jango-border) !important;
  background: rgba(183, 255, 60, 0.055) !important;
}

.dashboard-metric-card h3,
.dashboard-open-shift-card h3 {
  color: var(--jango-text) !important;
}

.dashboard-compact-table {
  font-variant-numeric: tabular-nums;
}

/* Override legacy inline dashboard styles */
#dashboard-ui-style + * {
  color: inherit;
}

/* Order list summary area */
.row.border-bottom > [class*="col-"] {
  min-width: 190px;
  padding-block: 10px;
}

.row.border-bottom .h4 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  color: var(--jango-muted);
}

.row.border-bottom .h4 + .h4 {
  color: var(--jango-text);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

/* Better tables for operational screens */
.table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--jango-radius);
}

.table tbody tr {
  transition: background-color 150ms ease;
}

.table tbody tr:hover {
  background: rgba(183, 255, 60, 0.045);
}

.table td,
.table th {
  font-variant-numeric: tabular-nums;
}

.table td a {
  font-weight: 700;
}

.table td .btn,
.table th .btn {
  white-space: nowrap;
}

/* Keep table headers in normal document flow.
   Sticky headers caused the first data row to render underneath the heading
   on every operational table. */
.table thead,
.table thead tr,
.table thead th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

.table thead th {
  height: auto;
  min-height: 44px;
  padding-top: 0.9rem !important;
  padding-bottom: 0.9rem !important;
  line-height: 1.25;
  vertical-align: middle !important;
  white-space: nowrap;
}

.table tbody td {
  position: static;
  line-height: 1.35;
  vertical-align: middle !important;
}

.table-responsive {
  overflow-x: auto;
  overflow-y: visible;
}

/* Inline order forms */
form .row {
  row-gap: 10px;
}

form .btn + .btn {
  margin-left: 6px;
}

fieldset {
  padding: 18px;
  border: 1px solid var(--jango-border);
  border-radius: var(--jango-radius-sm);
  background: rgba(255, 255, 255, 0.018);
}

legend {
  float: none;
  width: auto;
  padding: 0 8px;
  color: var(--jango-text);
  font-size: 1rem;
  font-weight: 800;
}

/* Operational status colors */
.bg-success,
.badge.bg-success {
  color: #07100c !important;
  background: var(--jango-accent) !important;
}

.bg-warning,
.badge.bg-warning {
  color: #231800 !important;
  background: var(--jango-warning) !important;
}

.bg-danger,
.badge.bg-danger {
  background: var(--jango-danger) !important;
}

.bg-secondary,
.badge.bg-secondary {
  color: #dce8e3 !important;
  background: #3a4b45 !important;
}

.btn-warning {
  color: #211600;
  border-color: #ffd77c;
  background: linear-gradient(135deg, #ffe39b, var(--jango-warning));
}

.btn-secondary,
.btn-dark,
.btn-outline-dark {
  color: var(--jango-text);
  border-color: var(--jango-border-strong);
  background: rgba(255, 255, 255, 0.055);
}

.btn-secondary:hover,
.btn-dark:hover,
.btn-outline-dark:hover {
  color: #07100c;
  border-color: var(--jango-accent);
  background: var(--jango-accent);
}

/* Dropdowns and select menus */
.dropdown-item {
  color: var(--jango-text);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  color: #07100c;
  background: var(--jango-accent);
}

/* Error pages */
.jango-error-panel {
  max-width: 720px;
  margin: 8vh auto;
  padding: 34px;
  border: 1px solid var(--jango-border);
  border-radius: var(--jango-radius);
  background: linear-gradient(180deg, rgba(24, 42, 37, 0.96), rgba(13, 26, 22, 0.98));
  box-shadow: var(--jango-shadow);
}

/* Improve chart and canvas containers */
canvas,
.chart-container {
  border-radius: var(--jango-radius-sm);
}

/* Small screens */
@media (max-width: 900px) {
  .row.border-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .row.border-bottom > [class*="col-"] {
    width: auto;
    min-width: 0;
    border: 1px solid var(--jango-border) !important;
    border-radius: var(--jango-radius-sm);
    background: rgba(255, 255, 255, 0.02);
  }
}

@media (max-width: 560px) {
  .row.border-bottom {
    grid-template-columns: 1fr;
  }

  .dashboard-actions .btn {
    width: 100%;
  }
}