:root {
  --jm-radius: 1.1rem;
  --jm-shadow: 0 14px 45px rgba(15, 23, 42, .10);
  --jm-border: rgba(148, 163, 184, .28);
}
html, body { min-height: 100%; }
body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at top left, rgba(13,110,253,.12), transparent 34rem),
    linear-gradient(180deg, rgba(248,250,252,1), rgba(241,245,249,1));
}
html[data-bs-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.20), transparent 34rem),
    linear-gradient(180deg, #0b1220, #111827);
}
.app-navbar {
  backdrop-filter: blur(18px);
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid var(--jm-border);
  box-shadow: 0 8px 30px rgba(15,23,42,.06);
}
html[data-bs-theme="dark"] .app-navbar { background: rgba(15,23,42,.82); }
.app-logo { object-fit: contain; border-radius: .7rem; }
.logo-dark { display: none; }
html[data-bs-theme="dark"] .logo-light { display: none; }
html[data-bs-theme="dark"] .logo-dark { display: inline-block; }
.app-shell { max-width: 1680px; min-height: calc(100vh - 126px); }
.app-footer { color: var(--bs-secondary-color); border-top: 1px solid var(--jm-border); }
.card, .modal-content, .list-group-item {
  border-color: var(--jm-border);
  border-radius: var(--jm-radius);
}
.card { box-shadow: var(--jm-shadow); overflow: hidden; }
.btn { border-radius: .85rem; font-weight: 650; }
.form-control, .form-select { border-radius: .85rem; }
.table { --bs-table-bg: transparent; }
.table-responsive { border-radius: var(--jm-radius); }
.page-hero {
  border: 1px solid var(--jm-border);
  border-radius: 1.5rem;
  padding: clamp(1.5rem, 3vw, 3rem);
  background: linear-gradient(135deg, rgba(13,110,253,.14), rgba(32,201,151,.12));
  box-shadow: var(--jm-shadow);
}
.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.action-tile {
  display: flex; align-items: center; gap: .85rem; min-height: 86px;
  padding: 1rem; border: 1px solid var(--jm-border); border-radius: 1rem;
  background: rgba(255,255,255,.68); text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
html[data-bs-theme="dark"] .action-tile { background: rgba(15,23,42,.62); }
.action-tile:hover { transform: translateY(-2px); box-shadow: var(--jm-shadow); border-color: rgba(13,110,253,.55); }
.action-tile i { font-size: 1.55rem; }
.jm-toolbar {
  position: sticky; top: 74px; z-index: 20; backdrop-filter: blur(16px);
  border: 1px solid var(--jm-border); border-radius: 1.25rem; padding: .85rem;
  background: rgba(255,255,255,.78); box-shadow: 0 10px 32px rgba(15,23,42,.08);
}
html[data-bs-theme="dark"] .jm-toolbar { background: rgba(15,23,42,.78); }
.jingle-grid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)) !important; gap: 14px !important; }
.jingle-card {
  min-height: 98px; display: flex; align-items: center; justify-content: center;
  border: 0 !important; border-radius: 1.1rem !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.13);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease !important;
  user-select: none;
}
.jingle-card:hover { transform: translateY(-2px) scale(1.01) !important; filter: saturate(1.12) brightness(1.05) !important; }
.jingle-card.playing { outline: 4px solid rgba(25,135,84,.4); }
#dbMeterPanel {
  backdrop-filter: blur(16px); background: rgba(15,23,42,.78) !important;
  border: 1px solid rgba(255,255,255,.16) !important; color: white;
}
#preascoltoBox { border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); }
@media (max-width: 767.98px) {
  .app-shell { padding-top: 1rem !important; }
  .jm-toolbar { position: static; }
  .jingle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1rem; }
}


/* Fix Jingle Machine 2026b: layout anti-sovrapposizione */
.app-navbar { z-index: 1030; }
.app-shell { padding-top: 1.25rem !important; }
.jm-toolbar { top: 82px; z-index: 30; }
.jm-toolbar > div:last-child { min-width: min(100%, 360px); }
.jm-toolbar .form-select { width: 100% !important; max-width: 360px; }
#radioNowCard .card-body { gap: 1rem; flex-wrap: wrap; }
#playerControls { position: sticky; top: 178px; z-index: 19; background: var(--bs-body-bg); border: 1px solid var(--jm-border); border-radius: 1rem; padding: .75rem; box-shadow: 0 8px 26px rgba(15,23,42,.08); }
#dbMeterPanel { position: fixed !important; top: auto !important; bottom: 18px !important; left: 18px !important; width: 112px !important; height: 320px !important; padding: .75rem !important; z-index: 25 !important; opacity: .92; }
#preascoltoBox { z-index: 1040 !important; max-width: calc(100vw - 24px); }
.context-menu { position: fixed !important; z-index: 1050 !important; }
.jingle-grid { align-items: stretch; padding-bottom: 1rem; }
.jingle-card { overflow: hidden; word-break: break-word; hyphens: auto; padding: .85rem !important; }
.jingle-name { line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.app-login-logo { object-fit: contain; max-width: 96px; filter: drop-shadow(0 8px 18px rgba(15,23,42,.18)); }
@media (min-width: 1201px) { body:has(#dbMeterPanel) .app-shell { padding-left: 150px !important; } }
@media (max-width: 991.98px) {
  .jm-toolbar { position: static; }
  #playerControls { position: static; }
  #dbMeterPanel { display:none !important; }
  .btn.mb-3 { margin-bottom: .55rem !important; }
}
@media (max-width: 575.98px) {
  .jingle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .jingle-card { min-height: 82px; font-size: .88rem; }
  #radioNowCard .card-body { align-items: flex-start !important; }
}