/* === Box background & outline override === */
.box, [class*="box"], .card, [class*="Card"], .panel, [class*="panel"], .widget, [class*="widget"], .tile, [class*="tile"], .module, [class*="module"], .container-box, [class*="Container"], .convert-box, [class*="convert"] {
  background-color: #1f2937 !important; /* dark grey */
  outline: 2px solid #ffffff !important; /* white outline */
  border-color: #ffffff !important;
}

/* Preserve rounded corners if present */
.box, [class*="box"], .card, [class*="Card"], .panel, [class*="panel"], .widget, [class*="widget"], .tile, [class*="tile"], .module, [class*="module"], .container-box, [class*="Container"], .convert-box, [class*="convert"] {
  border-radius: inherit;
}

/* Avoid outline cutting off shadows */
.box, [class*="box"], .card, [class*="Card"], .panel, [class*="panel"], .widget, [class*="widget"], .tile, [class*="tile"], .module, [class*="module"], .container-box, [class*="Container"], .convert-box, [class*="convert"] {
  box-sizing: border-box;
}

/* === Mobile optimization === */
@media (max-width: 640px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  body {
    margin: 0;
    padding: 8px;
  }
  /* Stack columns */
  .row, .rows, .columns, .cols, .grid, [class*="grid"], [class*="row"], [class*="columns"] {
    display: block !important;
  }
  .grid, [class*="grid"] {
    grid-template-columns: 1fr !important;
  }
  /* Flexible boxes */
  .box, [class*="box"], .card, [class*="Card"], .panel, [class*="panel"], .widget, [class*="widget"], .tile, [class*="tile"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Images and charts scale */
  img, canvas, svg, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Prevent dropdown text clipping and zoom triggers */
  select, input, button {
    font-size: 16px;
  }
  /* Tables scroll horizontally if needed */
  table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Avoid overflow from code or long strings */
  pre, code {
    white-space: pre-wrap;
    word-break: break-word;
  }
  /* Charts / containers */
  .chart, .chart-container, [class*="chart"] {
    min-width: 0 !important;
  }
}