:root{
  --deep:#0a0f1f; --panel:#121a30; --ink:#e5e7eb; --muted:#9ca3af;
  --blue:#3b82f6; --yellow:#facc15; --red:#ef4444; --mint:#10b981;
  --panel-border: rgba(255,255,255,.08);
}

html,body{
  height:100%;
  background: linear-gradient(180deg, #0b1020 0%, #0f1b37 40%, #0b1020 80%, #0b132a 100%);
  background-attachment: fixed;
}

body{
  margin:0; 
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, 'Noto Sans', sans-serif; 
  color:var(--ink);
}

*{box-sizing:border-box}
.wrap{max-width:980px; margin:0 auto; padding:16px}

/* Header */
.gymgg-dg-root .dg-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; 
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); 
  border:1px solid var(--panel-border); border-radius:14px; 
  box-shadow: 0 12px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.03);
}

.gymgg-dg-root .dg-title-wrap{display:flex; align-items:center; gap:10px}
.gymgg-dg-root .dg-title-wrap h2{margin:0; font-size:16px; letter-spacing:.3px}
.gymgg-dg-root .dg-badge{
  font-size:11px; padding:3px 8px; border-radius:999px; 
  border:1px solid rgba(147,197,253,.3); background: rgba(59,130,246,.12); color:#93c5fd;
}
.gymgg-dg-root .dg-actions{display:flex; gap:8px}

/* Buttons */
.gymgg-dg-root .dg-btn{
  appearance:none; border:none; cursor:pointer; padding:10px 12px; border-radius:10px; 
  font-weight:700; flex:0 0 auto; color:#0b1020; background:var(--yellow); 
  box-shadow:0 4px 12px rgba(250,204,21,.3);
}

.gymgg-dg-root .dg-btn.primary{background:var(--yellow); color:#0b1020}
.gymgg-dg-root .dg-btn.ghost{background:transparent; color:#cbd5e1; border:1px dashed rgba(255,255,255,.25)}
.gymgg-dg-root .dg-btn.danger{background:rgba(239,68,68,.2); color:#fecaca; border:1px dashed rgba(239,68,68,.5)}
.gymgg-dg-root .dg-btn.add{background:rgba(16,185,129,.18); color:#a7f3d0; border:1px solid rgba(16,185,129,.35)}
.gymgg-dg-root .dg-btn:disabled{opacity:.5; cursor:not-allowed}

/* Neutral button style for Print/PDF */
.gymgg-dg-root .dg-btn.neutral{
  background:rgba(255,255,255,.08); 
  color:#cbd5e1; 
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.gymgg-dg-root .dg-btn.neutral:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.25);
}

/* Rich Text Editor */
.rich-editor-container {
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 10px;
  background: #0e1730;
  overflow: hidden;
}

.rich-editor-toolbar {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(148,163,184,.2);
  flex-wrap: wrap;
}

.toolbar-btn {
  appearance: none;
  border: none;
  background: rgba(255,255,255,.1);
  color: var(--ink);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s ease;
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar-btn:hover {
  background: rgba(255,255,255,.2);
}

.toolbar-btn.active {
  background: var(--blue);
  color: white;
}

.color-picker {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
}

.rich-editor {
  min-height: 160px;
  padding: 12px;
  color: var(--ink);
  outline: none;
  line-height: 1.45;
  font-size: 14px;
}

.rich-editor.short {
  min-height: 120px;
}

.rich-editor[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
}

.rich-editor ul {
  margin: 8px 0;
  padding-left: 20px;
}

.rich-editor li {
  margin: 4px 0;
}

/* Audio controls */
.audio-controls{
  display:flex; gap:8px; align-items:center; margin-top:8px; padding:8px; 
  background:rgba(59,130,246,.05); border:1px solid rgba(59,130,246,.2); 
  border-radius:8px; flex-wrap:wrap;
}

.audio-btn{
  appearance:none; border:none; cursor:pointer; padding:6px 10px; border-radius:6px; 
  font-size:12px; font-weight:600; color:#cbd5e1; 
  background:rgba(255,255,255,.1); transition:all .2s ease;
}

.audio-btn:hover{background:rgba(255,255,255,.15)}
.audio-btn.recording{background:var(--red); color:white; animation:pulse 1s infinite}
.audio-btn.disabled{opacity:.5; cursor:not-allowed}

@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.7}}

.audio-player{
  display:flex; gap:8px; align-items:center; padding:6px; 
  background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); 
  border-radius:6px; margin-top:4px;
}

.audio-player audio{max-width:200px; height:30px}

.audio-download{
  background:transparent; border:none; cursor:pointer; color:var(--blue); 
  font-size:12px; padding:2px 4px; border-radius:4px;
  transition:all .2s ease;
}

.audio-download:hover{
  background:rgba(59,130,246,.1);
  color:var(--yellow);
}

.audio-remove{
  background:transparent; border:none; cursor:pointer; color:var(--red); 
  font-size:12px; padding:2px 4px;
}

.audio-upload{
  position:relative; overflow:hidden; display:inline-block;
}

.audio-upload input[type=file]{
  position:absolute; left:-9999px; opacity:0; pointer-events:none;
}

/* Video embed */
.video-embed{
  margin-top:10px; border-radius:12px; overflow:hidden; 
  background:#0e1730; border:1px solid rgba(148,163,184,.28);
}

.video-embed iframe{
  width:100%; height:300px; border:none; display:block;
}

.video-error{
  padding:20px; text-align:center; color:var(--muted); font-size:14px;
}

/* Filters */
.filter-controls {
  display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}

.filter-controls select, .filter-controls input {
  background: #0e1730; color: var(--ink); border: 1px solid rgba(148,163,184,.28);
  border-radius: 8px; padding: 8px 12px; font-size: 13px;
}

.filter-controls button {
  padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(148,163,184,.28);
  background: rgba(59,130,246,.12); color: #bfdbfe; cursor: pointer;
  font-size: 13px; font-weight: 600;
}

.filter-controls button:hover {
  background: rgba(59,130,246,.2);
}

/* Meta */
.gymgg-dg-root .dg-updated{margin:12px 0 0; color:#9fb0cc; font-size:12px}

/* Cards / panels */
.gymgg-dg-root .dg-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03)); 
  border:1px solid var(--panel-border); border-radius:14px; padding:14px; 
  box-shadow: 0 12px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.03); 
  margin-top:12px;
}

.gymgg-dg-root .dg-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.gymgg-dg-root .dg-card-head .tt{font-weight:800}
.gymgg-dg-root .dg-card-head .tag{
  font-size:11px; padding:3px 8px; border-radius:999px; 
  border:1px solid rgba(147,197,253,.3); background: rgba(59,130,246,.12); 
  color:#93c5fd; margin-left:8px;
}

.gymgg-dg-root .row-flex{display:flex; gap:12px; flex-wrap:wrap}
.gymgg-dg-root .row-flex .col{flex:1 1 300px}
.gymgg-dg-root .dg-field{flex:1 1 300px}
.gymgg-dg-root .dg-field label{display:block; font-size:12px; color:#a7b0c2; margin-bottom:6px}

.gymgg-dg-root input[type="text"], 
.gymgg-dg-root input[type="url"],
.gymgg-dg-root input[type="date"],
.gymgg-dg-root textarea{
  width:100%; background:#0e1730; color:var(--ink); 
  border:1px solid rgba(148,163,184,.28); border-radius:10px; 
  padding:12px 8px; outline:none; font-size:14px;
}

.gymgg-dg-root textarea{min-height:160px; line-height:1.45}
.gymgg-dg-root textarea.short{min-height:120px}

/* Date input styling improvements - fix calendar icon */
.gymgg-dg-root input[type="date"] {
  color-scheme: dark;
  background: #0e1730;
  position: relative;
}

.gymgg-dg-root input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23cbd5e1" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
  filter: brightness(1.2);
  cursor: pointer;
}

/* Date input styling for table cells */
.gymgg-dg-root .editable-date {
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 4px;
  font-size: 13px;
  width: 100%;
  min-width: 120px;
  color-scheme: dark;
}

.gymgg-dg-root .editable-date:focus {
  background: #0e1730;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 4px;
  outline: none;
}

.gymgg-dg-root .editable-date::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23cbd5e1" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
  filter: brightness(1.3) contrast(1.2);
  cursor: pointer;
  opacity: 0.8;
}

.gymgg-dg-root .editable-date::-webkit-calendar-picker-indicator:hover {
  filter: brightness(1.5) contrast(1.4);
  opacity: 1;
}

/* Dropdown styling for local field */
.gymgg-dg-root .editable-select {
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 4px;
  font-size: 13px;
  width: 100%;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.gymgg-dg-root .editable-select:focus {
  background: #0e1730;
  border: 1px solid rgba(148,163,184,.28);
}

.gymgg-dg-root .editable-select option {
  background: #0e1730;
  color: var(--ink);
  padding: 8px;
}

/* Details / summary sections */
.gymgg-dg-root details{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); 
  border-radius:12px; border:1px solid var(--panel-border); margin-top:12px;
}

.gymgg-dg-root summary.dg-summary{
  cursor:pointer; list-style:none; padding:14px; font-weight:700; color:#dbe6ff; 
  display:flex; align-items:center; gap:10px; justify-content:space-between;
}

.gymgg-dg-root details[open]{box-shadow: 0 8px 24px rgba(0,0,0,.25)}
.gymgg-dg-root .inside{padding: 0 12px 12px}
.gymgg-dg-root .sum-left{display:flex; align-items:center; gap:10px}
.gymgg-dg-root .sum-right{display:flex; align-items:center; gap:8px}
.gymgg-dg-root .mm-title{font-weight:800}
.gymgg-dg-root .sublabel{font-weight:400; color:#9fb0cc; font-size:12px;}

/* Matchup quick grid */
.gymgg-dg-root .matchup-grid{display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
.gymgg-dg-root .mcard{background:#0d1731; border:1px solid rgba(148,163,184,.22); border-radius:12px; padding:12px;}
.gymgg-dg-root .mcard input{
  width:100%; background:transparent; border:none; outline:none; 
  color:var(--ink); font-weight:700; font-size:14px;
}

.gymgg-dg-root .badges{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap}
.gymgg-dg-root .badge{
  font-size:11px; padding:6px 10px; border-radius:999px; 
  border:1px solid rgba(255,255,255,.2); cursor:pointer; user-select:none; 
  transition:all .15s ease;
}

.gymgg-dg-root .badge.good{background:rgba(16,185,129,.15); color:#a7f3d0; border-color:rgba(16,185,129,.35)}
.gymgg-dg-root .badge.even{background:rgba(59,130,246,.12); color:#bfdbfe; border-color:rgba(59,130,246,.35)}
.gymgg-dg-root .badge.bad{background:rgba(239,68,68,.12); color:#fecaca; border-color:rgba(239,68,68,.35)}
.gymgg-dg-root .badge[aria-pressed="true"]{
  transform:translateY(-1px); 
  box-shadow:0 4px 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.25);
}
.gymgg-dg-root .badge.hidden{display:none!important;}

/* Accordion blocks */
.gymgg-dg-root details.ac{
  border:1px solid rgba(255,255,255,.1); border-radius:14px; margin-top:12px; 
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

.gymgg-dg-root summary.su{
  cursor:pointer; list-style:none; padding:14px; font-weight:700; color:#dbe6ff; 
  display:flex; align-items:center; gap:10px; justify-content:space-between;
}

.gymgg-dg-root .icon-trash{
  background:rgba(239,68,68,.15); border:none; cursor:pointer; border-radius:8px; padding:6px;
  color:white; transition:all .2s ease;
}
.gymgg-dg-root .icon-trash:hover{background:rgba(239,68,68,.3); transform:scale(1.05)}
.gymgg-dg-root .emoji-inline{opacity:.9}

/* Table wrapper for horizontal scrolling */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Results table + stats - OTIMIZADO COM FIXED LAYOUT */
.gymgg-dg-root table.resultsTable{
  border-collapse:collapse; background:#0d1731; 
  border:1px solid rgba(148,163,184,.2); border-radius:12px; overflow:hidden;
  min-width: 700px; /* Increased minimum width */
  table-layout: fixed; /* Force fixed table layout for better control */
}

.gymgg-dg-root table.resultsTable th, 
.gymgg-dg-root table.resultsTable td{
  border-bottom:1px solid rgba(148,163,184,.15); padding:8px 10px; font-size:13px;
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Add ellipsis for long text */
}

.gymgg-dg-root table.resultsTable thead th{
  background:rgba(59,130,246,.08); color:#cbd5e1; text-align:left;
}

/* Sortable table headers */
.gymgg-dg-root table.resultsTable th.sortable {
  cursor: pointer;
  user-select: none;
  transition: all .2s ease;
  position: relative;
}

.gymgg-dg-root table.resultsTable th.sortable:hover {
  background: rgba(59,130,246,.15);
  color: #e2e8f0;
}

.gymgg-dg-root table.resultsTable th.sort-asc::after {
  content: " ↗";
  color: var(--yellow);
  font-weight: bold;
  margin-left: 4px;
}

.gymgg-dg-root table.resultsTable th.sort-desc::after {
  content: " ↙";
  color: var(--yellow);
  font-weight: bold;
  margin-left: 4px;
}

/* Specific cell styling for results table - LARGURAS CONTROLADAS */
.gymgg-dg-root .local-cell {
  width: 15%;
  min-width: 100px;
  max-width: 120px;
}

.gymgg-dg-root .notes-cell {
  width: 25%;
  min-width: 150px;
  max-width: 200px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
}

/* Better control for contenteditable cells */
.gymgg-dg-root table.resultsTable td[contenteditable="true"] {
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
  max-width: 0; /* Force respect of table layout */
}

.gymgg-dg-root table.resultsTable td[contenteditable="true"]:focus {
  background: rgba(59,130,246,.1);
  outline: 1px solid rgba(59,130,246,.3);
  outline-offset: -1px;
}

/* General Notes table specific styles - LARGURAS FIXAS E CONTROLADAS */
.gymgg-dg-root .subject-cell {
  width: 16%;
  min-width: 120px;
  max-width: 140px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.gymgg-dg-root .observation-cell {
  width: 28%;
  min-width: 160px;
  max-width: 250px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
}

.gymgg-dg-root .audio-cell {
  width: 36%;
  min-width: 260px;
  max-width: 320px;
  text-align: center;
}

.gymgg-dg-root .date-cell {
  width: 12%;
  min-width: 120px;
  max-width: 140px;
}

.gymgg-dg-root .actions-cell {
  width: 8%;
  min-width: 60px;
  max-width: 80px;
  text-align: center;
}

.gymgg-dg-root .note-audio-controls {
  margin: 0;
  padding: 6px;
  background: rgba(59,130,246,.03);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 6px;
  gap: 6px;
  flex-direction: column;
}

.gymgg-dg-root .audio-buttons-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.gymgg-dg-root .audio-buttons-row .audio-btn {
  flex: 1;
  min-width: 60px;
  padding: 4px 8px;
  font-size: 11px;
}

.gymgg-dg-root .audio-buttons-row .audio-upload {
  flex: 1;
}

.gymgg-dg-root .statsbar{
  margin-top:10px; padding:8px 12px; border:1px dashed rgba(255,255,255,.2); 
  border-radius:12px; background:rgba(255,255,255,.03);
}

.gymgg-dg-root .hscroll{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:4px;
  -webkit-overflow-scrolling: touch;
}

.gymgg-dg-root .hscroll::-webkit-scrollbar{height:8px}
.gymgg-dg-root .hscroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
  border-radius: 4px;
}
.gymgg-dg-root .hscroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.2);
  border-radius: 4px;
}

.gymgg-dg-root .tile{
  flex:0 0 auto; min-width:110px; padding:10px; border-radius:10px; 
  background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.25); text-align:center;
}

.gymgg-dg-root .tile h4{margin:0; font-size:12px; color:#cbd5e1; letter-spacing:.3px}
.gymgg-dg-root .tile p{margin:6px 0 0; font-size:18px; font-weight:800; color:#e5edff}

/* Tabs */
.dg-tabs{display:flex;gap:.75rem;flex-wrap:wrap;margin:12px 0 14px}
.dg-tabs .tab-btn{
  padding:10px 14px;border-radius:12px;border:2px solid rgba(88,130,255,.7);
  background:rgba(33,45,79,.35);color:#e9efff;font-weight:700;letter-spacing:.2px;
  box-shadow:0 0 0 2px rgba(22,31,56,.6), 0 0 16px rgba(88,130,255,.15) inset;
  cursor:pointer;transition:all .2s ease; appearance:none;
}
.dg-tabs .tab-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 2px rgba(22,31,56,.6), 0 0 26px rgba(88,130,255,.28) inset;
}
.dg-tabs .tab-btn.active{
  background:rgba(88,130,255,.22);border-color:rgba(115,150,255,.95);color:#ffffff;
}

/* Tooltips */
.dg-tip{display:inline-flex;align-items:center;gap:.25rem;position:relative}
.dg-i{
  display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;
  border-radius:50%;border:1px solid #7fa2ff;color:#bcd0ff;background:transparent;cursor:help;
  font-size:12px;line-height:1;padding:0;opacity:.9;transition:opacity .15s ease;
}
.dg-i:hover,.dg-i:focus{opacity:1;outline:none;box-shadow:0 0 0 2px rgba(127,162,255,.25)}
.dg-bubble{
  position:absolute;left:24px;top:0;transform:translateY(-25%);
  max-width:340px;background:#0e1528;color:#d7e3ff;border:1px solid #1e2948;border-radius:10px;
  padding:10px 12px;font-size:12px;line-height:1.35;box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:1000;
}
.dg-tip:hover .dg-bubble,.dg-i:focus + .dg-bubble{opacity:1;pointer-events:auto}

/* Footer / bottom actions */
.gymgg-dg-root .bottom-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:12px}
.gymgg-dg-root .dg-footer{margin-top:10px; color:#9fb0cc; font-size:12px; text-align:right}
.gymgg-dg-root .add-wrap{margin-top:12px;}

/* Additional styles */
.col-title {
  color: #dbe6ff;
  font-size: 14px;
  margin-bottom: 8px;
}

.legend {
  color: #9fb0cc;
  font-size: 14px;
  margin: 0;
}

.actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Confirmation Dialog */
.confirmation-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.confirmation-content {
  background: #0e1730;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 14px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  text-align: center;
}

.confirmation-content h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 18px;
}

.confirmation-content p {
  margin: 0 0 20px;
  color: #9fb0cc;
  line-height: 1.4;
}

.confirmation-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirmation-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all .2s ease;
}

.confirmation-buttons .confirm-btn {
  background: var(--red);
  color: white;
}

.confirmation-buttons .cancel-btn {
  background: rgba(255,255,255,.1);
  color: var(--ink);
}

.confirmation-buttons button:hover {
  transform: translateY(-1px);
}

/* Print styles */
@media print {
  .dg-btn,
  .dg-actions,
  .bottom-actions,
  .icon-trash,
  .audio-controls,
  .add-wrap,
  .toolbar-btn,
  .rich-editor-toolbar {
    display: none !important;
  }
  
  .gymgg-dg-root {
    box-shadow: none !important;
  }
}

/* Responsive */
@media (max-width:640px){
  .dg-bubble{left:0;top:22px;transform:none}
  .gymgg-dg-root .matchup-grid{grid-template-columns: 1fr;}
  
  /* Better spacing distribution on mobile */
  .gymgg-dg-root .row-flex{
    flex-direction:column;
    gap: 6px;
  }
  
  .gymgg-dg-root .dg-field{
    flex: 1 1 auto;
    margin-bottom: 6px;
  }
  
  /* Single input fields in row-flex are more compact */
  .gymgg-dg-root .row-flex .dg-field:only-child{
    margin-bottom: 4px;
  }
  
  /* Larger text fields on mobile for better usability */
  .gymgg-dg-root textarea{
    min-height: 180px;
  }
  
  .gymgg-dg-root textarea.short{
    min-height: 140px;
  }
  
  .rich-editor {
    min-height: 180px;
  }

  .rich-editor.short {
    min-height: 140px;
  }
  
  /* Responsive header */
  .gymgg-dg-root .dg-header{
    flex-direction:column; 
    align-items:stretch;
    gap: 8px;
  }
  
  .gymgg-dg-root .dg-actions{
    justify-content:center;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  /* Smaller buttons on mobile */
  .gymgg-dg-root .dg-btn{
    padding: 8px 12px;
    font-size: 13px;
    flex: 1 1 auto;
    min-width: 100px;
  }
  
  /* Smaller video embed */
  .video-embed iframe{height:200px;}
  
  /* Filters in column */
  .filter-controls{
    flex-direction:column;
    gap: 8px;
  }
  
  /* Responsive toolbar */
  .rich-editor-toolbar{
    gap:2px;
    padding: 6px;
  }
  
  .toolbar-btn{
    min-width:24px; 
    height:24px; 
    font-size:11px;
    padding: 4px 6px;
  }
  
  /* More compact cards on mobile */
  .gymgg-dg-root .dg-card{
    padding: 12px;
    margin-top: 8px;
  }
  
  /* Reduce margin between cards to save space */
  .gymgg-dg-root .dg-card + .dg-card{
    margin-top: 6px;
  }
  
  /* Table wrapper ensures horizontal scroll works on mobile */
  .table-wrapper {
    margin: 0 -12px; /* Extend to card edges */
    padding: 0 12px; /* Maintain internal padding */
  }
  
  /* Adjust table font size on mobile */
  .gymgg-dg-root table.resultsTable th,
  .gymgg-dg-root table.resultsTable td {
    font-size: 12px;
    padding: 6px 8px;
  }
  
  /* Stats in horizontal scroll with smoother behavior */
  .gymgg-dg-root .statsbar {
    margin: 10px -12px 0; /* Extend to card edges on mobile */
    padding: 8px 12px;
    border-radius: 0; /* Remove rounded corners when full width */
  }
  
  .gymgg-dg-root .tile{
    min-width: 90px;
    padding: 8px;
  }
  
  /* Responsive tabs */
  .dg-tabs{
    gap: 6px;
    margin: 8px 0 10px;
  }
  
  .dg-tabs .tab-btn{
    padding: 8px 12px;
    font-size: 13px;
    flex: 1 1 auto;
  }
  
  /* More compact audio controls */
  .audio-controls{
    gap: 6px;
    padding: 6px;
    flex-direction: column;
    align-items: stretch;
  }
  
  .audio-btn{
    padding: 8px 12px;
    width: 100%;
  }
  
  /* Responsive badges */
  .gymgg-dg-root .badges{
    gap: 6px;
    justify-content: center;
  }
  
  .gymgg-dg-root .badge{
    flex: 1 1 auto;
    text-align: center;
    padding: 8px 6px;
  }
  
  /* More compact spacing between form elements */
  .gymgg-dg-root input[type="text"], 
  .gymgg-dg-root input[type="url"],
  .gymgg-dg-root input[type="date"]{
    margin-bottom: 4px;
  }
  
  /* Labels with less space */
  .gymgg-dg-root .dg-field label{
    margin-bottom: 4px;
  }
  
  /* Better scrollbar visibility on mobile */
  .table-wrapper::-webkit-scrollbar,
  .gymgg-dg-root .hscroll::-webkit-scrollbar {
    height: 10px;
  }
  
  /* Visual indicator that table can be scrolled */
  .table-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1));
    pointer-events: none;
  }
}

/* Utility */
details[hidden]{display:none!important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}