/* ============================================================
   BLACK EAGLE THEME — Layer responsive
   Caricato DOPO style.css, quindi puo' sovrascriverlo.
   Breakpoint:  <= 1200px tablet orizzontale
                <= 992px  tablet
                <= 768px  cellulare
                <= 420px  cellulare stretto
   Nota: style.css usa molti !important, quindi qui serve
   altrettanto per vincere la specificita'.
   ============================================================ */

/* ── Contenitori piu' larghi anche su desktop ───────────────── */
.content-wrapper .content { padding: 15px 20px; }

/* Le colonne "vuote" usate come margine (col-sm-1 / col-sm-2)
   sprecano larghezza: sotto i 1200px le annullo e lascio che
   il contenuto occupi tutta la riga. */
@media (max-width: 1200px) {
  .content-wrapper .content { padding: 12px 14px; }
  .row > .col-sm-1:empty,
  .row > .col-sm-2:empty { display: none !important; }
  .row > .col-sm-1:empty + .col-sm-10,
  .row > .col-sm-2:empty + .col-sm-8 { width: 100% !important; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  MODALI — piu' larghe ovunque, a tutto schermo su mobile ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (min-width: 993px) {
  .modal-dialog     { width: 720px !important; }
  .modal-lg         { width: 1000px !important; max-width: 94vw !important; }
  .modal-sm         { width: 480px !important; }

  /* Schede atleta: servono 3 colonne di informazioni affiancate, quindi
     vanno piu' larghe delle modali normali. La classe la mette lo JS in
     ui.R quando il contenuto include un div .tkd-wide-modal. */
  .modal-dialog.modal-wide {
    width: 1480px !important;
    max-width: 96vw !important;
  }

  /* Stessa larghezza senza aspettare lo JS, sui browser con :has().
     REGOLA SEPARATA di proposito: un selettore non riconosciuto invalida
     tutta la lista di selettori, quindi accorpandola a quella sopra i
     browser senza :has() perderebbero anche .modal-wide. */
  .modal-dialog:has(.tkd-wide-modal) {
    width: 1480px !important;
    max-width: 96vw !important;
  }
}

/* Sotto i 992px le modali sono gia' a tutta larghezza (regola qui sotto):
   la scheda a 3 colonne si impila da sola grazie alle classi col-md-*. */
@media (max-width: 992px) {
  .tkd-doc-frame { height: 380px !important; }
}

@media (max-width: 992px) {
  .modal-dialog,
  .modal-lg,
  .modal-sm {
    width: auto !important;
    max-width: none !important;
    margin: 10px !important;
  }
  .modal-content { border-radius: 10px !important; }
  .modal-body {
    padding: 14px !important;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* footer appiccicato in basso: i tasti restano raggiungibili */
  .modal-footer {
    position: sticky; bottom: 0;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    padding: 10px 14px !important;
    z-index: 2;
  }
  .modal-footer .btn { margin: 4px 0 0 0 !important; }
}

@media (max-width: 768px) {
  .modal-dialog { margin: 6px !important; }
  .modal-title  { font-size: 1.15rem !important; }
  /* i tasti del footer diventano a tutta larghezza, uno sopra l'altro */
  .modal-footer .btn {
    display: block; width: 100%;
    min-height: 46px; font-size: 16px !important;
  }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  TABLET  (<= 992px)                                      ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (max-width: 992px) {
  html, body { font-size: 15px; }

  /* Nessun override sul margine di .content-wrapper: la gestione della
     sidebar (aperta / collassata / a scomparsa) e' gia' corretta fra
     AdminLTE e style.css, sovrascriverla farebbe finire il contenuto
     sotto la sidebar. */
  .box { margin-bottom: 14px; }
  .box-body { padding: 12px !important; }

  h1 { font-size: 1.7rem !important; }
  h2 { font-size: 1.45rem !important; }
  h3 { font-size: 1.25rem !important; }
  h4 { font-size: 1.10rem !important; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  CELLULARE  (<= 768px)                                   ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (max-width: 768px) {

  /* ── Tipografia: base 16px, niente testi sotto i 13px ───── */
  html, body { font-size: 16px !important; }

  body, p, li, td, th, label,
  .box-body, .form-group, .help-block, .small-box, .info-box {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.2rem  !important; }
  h4 { font-size: 1.05rem !important; }
  h5, h6 { font-size: 1rem !important; }

  /* Rialza tutti i micro-testi che style.css fissa a 9-12px */
  .box-title, .nav-tabs > li > a, .badge-ok, .badge-warn,
  .badge-alt, .badge-cancel, .btn, .dropdown-menu > li > a {
    font-size: 14px !important;
  }
  small, .small, .help-block { font-size: 13px !important; }

  /* ── Campi: MAI sotto i 16px, altrimenti iOS zooma la pagina
        appena si tocca un input ──────────────────────────── */
  input, select, textarea,
  .form-control,
  .selectize-input, .selectize-input input, .selectize-dropdown,
  .shiny-input-container input[type="text"],
  .shiny-date-input input {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea.form-control { min-height: 90px; }

  .form-control, .selectize-input {
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }
  .control-label, .shiny-input-container > label {
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }
  .form-group { margin-bottom: 14px !important; }

  /* Larghezze fisse dichiarate lato R: annullate */
  .shiny-input-container,
  .shiny-input-container:not(.shiny-input-container-inline) {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Tasti: area di tocco >= 44px (linee guida Apple) ───── */
  .btn {
    min-height: 44px;
    padding: 10px 16px !important;
    border-radius: 8px !important;
  }
  .btn-xs {
    min-height: 36px;
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  /* i tasti principali a tutta larghezza */
  .box-body > .btn,
  .btn.gold, #login, #register {
    display: block; width: 100% !important; margin-bottom: 8px;
  }
  /* gruppi di tasti nelle celle: vanno a capo invece di sfondare */
  td .btn, td .btn-xs { margin: 2px 2px 2px 0 !important; }

  /* ── Radio e checkbox: piu' spaziati, piu' toccabili ────── */
  .radio, .checkbox { margin: 10px 0 !important; }
  .radio label, .checkbox label {
    font-size: 15px !important;
    padding-left: 26px !important;
    line-height: 1.45 !important;
  }
  input[type="radio"], input[type="checkbox"] {
    width: 20px !important; height: 20px !important;
    min-height: 20px !important;
    margin-top: 1px !important;
  }

  /* ── Colonne: tutto in verticale, niente margini sprecati ─ */
  .content-wrapper .content { padding: 10px 8px !important; }
  .row { margin-left: -6px !important; margin-right: -6px !important; }
  .row > [class*="col-"] {
    padding-left: 6px !important; padding-right: 6px !important;
  }
  .col-sm-1:empty, .col-sm-2:empty, .col-sm-3:empty { display: none !important; }

  .box {
    margin-bottom: 12px !important;
    border-radius: 10px !important;
  }
  .box-header { padding: 10px 12px !important; }
  .box-body   { padding: 10px !important; }

  /* ── Header ──────────────────────────────────────────────── */
  .main-header .logo {
    width: 100% !important;
    font-size: 17px !important;
    padding: 0 10px !important;
  }
  .main-header .navbar { margin-left: 0 !important; }
  /* i link del menu vanno a capo invece di uscire dallo schermo */
  .navbar-custom-menu, .navbar-custom-menu > .navbar-nav {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .navbar-custom-menu > .navbar-nav > li { float: none !important; }
  .navbar-custom-menu > .navbar-nav > li > a {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* ── TABELLE ─────────────────────────────────────────────── */
  /* Rete di sicurezza: qualunque tabella scorre in orizzontale
     con inerzia, anche se scrollX non fosse attivo lato R. */
  .dataTables_wrapper,
  .dataTables_scrollBody,
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* NIENTE width:100% forzato: con scrollX attivo DT calcola una larghezza
     inline maggiore del contenitore, ed e' proprio quella che permette lo
     scorrimento. Forzarla al 100% schiaccerebbe le colonne. */
  table.dataTable { min-width: 100%; }
  table.dataTable th, table.dataTable td {
    padding: 6px 8px !important;
    font-size: 14px !important;
    white-space: nowrap;          /* meglio scorrere che spezzare */
  }
  /* la prima colonna resta leggibile e puo' andare a capo */
  table.dataTable td:first-child { white-space: normal; min-width: 90px; }

  /* Controlli DT: impilati e leggibili */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    width: 100% !important;
    margin: 6px 0 !important;
    font-size: 14px !important;
  }
  .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin: 6px 0 0 0 !important; }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 8px 12px !important; font-size: 14px !important;
  }
  /* suggerimento di scorrimento sopra le tabelle larghe */
  .dataTables_scrollHead + .dataTables_scrollBody::-webkit-scrollbar { height: 6px; }

  /* ── Blocchi flex costruiti a mano (riepiloghi, KPI) ─────── */
  /* vanno a capo invece di comprimersi */
  .box-body div[style*="display:flex"],
  .box-body div[style*="display: flex"] { flex-wrap: wrap !important; gap: 2px 10px; }

  /* ── Login ───────────────────────────────────────────────── */
  #login, #register { width: 100% !important; max-width: 340px; margin: 6px auto !important; }
  #login-panel, .login-box { width: 100% !important; padding: 0 10px !important; }

  /* ── Shop: 2 articoli per riga, immagine grande ──────────── */
  .shop-card {
    width: 50% !important;
    float: left !important;
    padding-left: 5px !important; padding-right: 5px !important;
  }
  /* L'immagine si prende la larghezza della card. Prima era bloccata a 74px
     di altezza e sul telefono l'articolo non si riconosceva. */
  .shop-card .shop-thumb { height: 128px !important; }
  .shop-card .form-group { margin-bottom: 8px !important; }
  .shop-card .control-label { font-size: 13px !important; margin-bottom: 3px !important; }
  .shop-card .form-control, .shop-card .selectize-input {
    padding: 7px 9px !important; min-height: 40px;
  }

  /* Nessun elemento deve poter sfondare la finestra */
  img, table, pre, .box, .modal-content { max-width: 100% !important; }
  body { overflow-x: hidden; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  CELLULARE STRETTO  (<= 420px)                           ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (max-width: 480px) {
  /* Un articolo per riga: l'immagine puo' essere davvero grande */
  .shop-card { width: 100% !important; float: none !important; }
  .shop-card .shop-thumb { height: 190px !important; }
}

@media (max-width: 420px) {
  .content-wrapper .content { padding: 8px 6px !important; }
  .box-header .box-title { font-size: 15px !important; }
  table.dataTable th, table.dataTable td {
    padding: 7px 6px !important; font-size: 13.5px !important;
  }
  .btn-xs { font-size: 12.5px !important; padding: 5px 8px !important; }
  .main-header .logo { font-size: 15px !important; }
}

/* ── Schermi tattili: niente effetti hover appiccicati ─────── */
@media (hover: none) {
  .box:hover { box-shadow: var(--shadow) !important; transform: none !important; }
  .btn:hover { transform: none !important; }
}