/* DIM section (dim.html). The settings cards were moved from the main app's Settings page, so the few
   classes they use from styles.css are restated here for the split-admin layout. */

.dim-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 150px);
  min-height: 560px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
}

.dim-settings .content-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  max-width: 100%;
}

.dim-settings .card-header { padding: 18px 20px; border-bottom: 1px solid #e2e8f0; }
.dim-settings .card-title { margin: 0; font-size: 17px; font-weight: 800; color: #1a202c; }
.dim-settings .card-body { padding: 18px 20px; }

.dim-settings .btn-header {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}

.dim-settings .btn-primary-header { background: #244b70; border-color: #244b70; color: #fff; }
.dim-settings .btn-primary-header:hover { background: #1c3b58; }
.dim-settings .btn-secondary-header { background: #fff; border-color: #cbd5e1; color: #244b70; }
.dim-settings .btn-secondary-header:hover { background: #f1f5f9; }
.dim-settings .btn-header:disabled { opacity: 0.45; cursor: not-allowed; }

.dim-settings .data-table { border-collapse: collapse; }
.dim-settings .data-table th,
.dim-settings .data-table td { padding: 8px 10px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.dim-settings .data-table th { color: #64748b; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }

/* Stock mascots tab */
.sm-intro { display: grid; grid-template-columns: 1fr minmax(260px, 360px); gap: 18px; padding: 14px 16px; }
.sm-intro h3 { margin: 0 0 4px; font-size: 14px; color: #1e293b; }
.sm-intro p { margin: 0; }
.sm-fallback { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid #dbe4f0; border-radius: 10px; background: #f8fafc; cursor: pointer; }
.sm-fallback[hidden] { display: none; }
.sm-fallback span { display: grid; gap: 3px; }
.sm-fallback strong { font-size: 12px; color: #334155; }
.sm-fallback small { font-size: 12px; color: #64748b; }
.sm-tester { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sm-tester .split-input { min-width: 220px; }
.sm-thumb { width: 48px; height: 48px; object-fit: contain; border: 1px solid #dbe4f0; border-radius: 8px; background: #fff; flex: 0 0 48px; }
.sm-thumb.empty { display: grid; place-items: center; color: #94a3b8; }
.sm-label { font-size: 12px; font-weight: 800; color: #334155; }
.sm-sport-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; max-height: 190px; overflow: auto; padding: 8px; border: 1px solid #dbe4f0; border-radius: 10px; }
.sm-sport-list label { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #334155; }
@media (max-width: 900px) { .sm-intro { grid-template-columns: 1fr; } }