/* ============================================================
   RESPONSIVE.CSS — Global responsive rules for BioVitalAge
   Breakpoints:
     1200px — large tablets / small desktops
      992px — tablets
      768px — small tablets
      576px — phones
   ============================================================ */

/* ── Viewport helpers ──────────────────────────────────────── */
.mobile-only  { display: none !important; }
.desktop-only { display: initial; }


/* ── Hamburger menu button (hidden by default, shown on mobile) ── */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 10;
}
.hamburger-btn span {
  display: block;
  width: 24px;
  height: 3px;
  background-color: var(--light1, #c3ccd4);
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.hamburger-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}
.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}


/* ── Hide hamburger when no nav links exist ────────────────── */
.nav-bar:not(:has(.nav-bar-linkage)) .hamburger-btn {
  display: none !important;
}


/* ==============================================================
   PATIENT TABLE — responsive (all breakpoints)
   ============================================================== */

/* Wrap table in scrollable area on small screens */
@media (max-width: 1100px) {
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-header,
  .table-content {
    min-width: 800px;
  }
  .table-header p,
  .riga-container p {
    min-width: 100px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .table-header,
  .table-content {
    min-width: 700px;
  }
  .table-header {
    height: auto !important;
    padding: 8px 0;
  }
  .table-header p {
    font-size: 11px;
    padding: 4px 2px;
  }
  .riga-container {
    height: auto !important;
    min-height: 3.5rem;
    padding: 4px 0;
  }
  .riga-container p {
    font-size: 12px;
    padding: 4px 2px;
    word-break: break-word;
  }

  /* Search bar area */
  .tabella-ricerca .barra-ricerca {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px !important;
  }
  .tabella-ricerca .barra-ricerca select {
    width: 100% !important;
  }
  .tabella-ricerca .barra-ricerca .input-group {
    width: 100%;
  }
  .tabella-ricerca .barra-ricerca .input-group input {
    width: 100% !important;
  }
  .tabella-ricerca .barra-ricerca .button {
    width: 100%;
    justify-content: center;
  }
}


/* ==============================================================
   ≤ 1200px  —  Large tablets / small desktops
   ============================================================== */
@media (max-width: 1200px) {

  /* Home: banner 2-col → 1-col */
  .banner {
    grid-template-columns: 1fr !important;
  }

  /* Home: report cards → wrap */
  .cards {
    flex-wrap: wrap;
  }

  /* Cartella paziente: 5-col grid → 3-col */
  .card-paziente .grid-container {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Score cards 4-col → 2-col */
  .container-second-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Clocks row: smaller */
  .container-clock {
    width: 24% !important;
  }
  .score-clock-graph {
    flex-wrap: wrap;
    height: auto !important;
  }

  /* Profile: 2-col form stays */
  .container-profile {
    grid-template-columns: 1fr 2fr !important;
  }

  /* Patient info 4-col → 3-col */
  .patient-info {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Modali fixed → max-width */
  .modale-indici {
    width: 90% !important;
    max-width: 850px;
  }
  .modal-content-appointments {
    width: 85% !important;
  }
  .modal-content-user {
    width: 70% !important;
  }
}


/* ==============================================================
   ≤ 992px  —  Tablets
   ============================================================== */
@media (max-width: 992px) {

  /* ── NAV BAR ─────────────────────────────────────── */
  .hamburger-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .nav-bar {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 4.5rem;
    padding: 0 10px;
  }

  .nav-bar-logo {
    flex: 1;
  }
  .nav-bar-logo img {
    width: 50% !important;
  }

  .nav-bar-linkage {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 10px 0;
    gap: 10px;
    order: 3;
  }
  .nav-bar-linkage.show {
    display: flex;
  }

  .nav-bar-user h3 {
    font-size: 16px !important;
  }

  /* ── MAIN LAYOUT ────────────────────────────────── */
  main {
    top: auto !important;
    position: relative !important;
  }

  .main-title-nav {
    flex-direction: column;
    height: auto !important;
    padding: 10px;
    gap: 8px;
    align-items: flex-start;
  }
  .main-menu-trace {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }

  /* ── HOME PAGE ──────────────────────────────────── */
  .banner-info {
    height: auto !important;
    min-height: 200px;
  }
  .container-card-actions {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .barra-ricerca {
    flex-wrap: wrap;
    gap: 10px;
  }
  .barra-ricerca input {
    width: 100% !important;
  }

  /* Home: cards → 2 col */
  .cards {
    flex-direction: column;
  }
  .report-card {
    height: auto !important;
    min-height: 120px;
  }

  /* ── CARTELLA PAZIENTE ──────────────────────────── */
  .card-paziente .grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .card-paziente-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .name-content h3 {
    font-size: 20px !important;
  }

  /* Side navbar → overlay full height */
  .side-navbar {
    width: 60% !important;
  }

  /* Score clocks */
  .container-clock {
    width: 48% !important;
    height: 220px !important;
  }

  /* Grid indici 2-col → 1-col */
  .grid-container-indici {
    grid-template-columns: 1fr !important;
  }

  /* ── TABLES ─────────────────────────────────────── */
  .table-container,
  .risultati-ricerca,
  .cardAppuntamenti,
  .Calendario-container,
  .recent-patients {
    overflow-x: auto;
  }
  table {
    min-width: 600px;
  }

  /* ── PROFILE ────────────────────────────────────── */
  .container-profile {
    grid-template-columns: 1fr !important;
    padding: 0 10px;
  }
  #menu-user-profile::after {
    display: none;
  }

  /* ── PATIENT FORM ───────────────────────────────── */
  .patient-info {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Flex container → column on tablet */
  .flex-container {
    flex-direction: column;
    align-items: stretch;
  }
  .container-celle-design {
    width: 100% !important;
  }

  /* ── APPOINTMENTS ───────────────────────────────── */
  #input-time {
    grid-template-columns: 1fr 1fr !important;
  }
  .input-typology {
    grid-template-columns: 1fr !important;
  }
  .Calendario-Header {
    flex-direction: column;
    height: auto !important;
    gap: 10px;
    padding: 10px;
  }
  .filtri-container {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Calendar: month grid 7-col → scroll */
  .container-content-table {
    grid-template-columns: repeat(7, minmax(80px, 1fr)) !important;
    overflow-x: auto;
  }

  /* ── SIDEBAR (homepage news) ────────────────────── */
  .sidebar {
    width: 80% !important;
  }

  /* ── APPOINTMENT CONTAINER ──────────────────────── */
  .appointment-container {
    width: 100% !important;
  }

  /* ── FOLLOW-UP FORM ─────────────────────────────── */
  .followup-form-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── MODALE INDICI → smaller ────────────────────── */
  .modale-indici {
    width: 95% !important;
    height: 80vh !important;
  }

  /* ── DISCLAIMER ─────────────────────────────────── */
  .disclaimer-container {
    width: 90% !important;
    max-width: none;
  }

  /* ── COOKIE DISCLAIMER ──────────────────────────── */
  .cookie-disclaimer {
    max-width: 90% !important;
  }
}


/* ==============================================================
   ≤ 768px  —  Small tablets / large phones
   ============================================================== */
@media (max-width: 768px) {

  .mobile-only  { display: initial !important; }
  .desktop-only { display: none !important; }

  /* Nav */
  .nav-bar-user h3 {
    font-size: 14px !important;
  }
  .img-container-user-nav-bar {
    padding-right: 5px !important;
  }
  .img-container-user-nav-bar img {
    width: 30px !important;
    height: 30px !important;
  }

  /* Notifications dropdown */
  #notificaDropdown {
    width: 280px !important;
    right: -40px !important;
  }

  /* Banner info */
  .banner-info h3 {
    font-size: 22px !important;
  }
  #nameUser {
    font-size: 26px !important;
  }
  .box-icons {
    flex-direction: column;
    gap: 10px;
  }

  /* Action cards 2 → full width on phone */
  .container-card-actions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Cartella paziente 2-col → 1-col */
  .card-paziente .grid-container {
    grid-template-columns: 1fr !important;
  }

  /* Score cards → 1 col */
  .container-second-row {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
  }
  .container-card-score {
    width: 100% !important;
  }

  /* Clocks → 1 col full width */
  .container-clock {
    width: 100% !important;
    height: 200px !important;
  }

  /* Patient info → 1 col */
  .patient-info {
    grid-template-columns: 1fr !important;
  }

  /* Profile form → 1 col */
  form {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar → full width */
  .side-navbar {
    width: 100% !important;
  }
  .sidebar {
    width: 100% !important;
  }

  /* Modal user → wider */
  .modal-content-user {
    width: 90% !important;
  }
  .modal-content-appointments {
    width: 95% !important;
    margin: 5% auto !important;
  }

  /* Appointments time grid */
  #input-time {
    grid-template-columns: 1fr !important;
  }
  #first-input-user,
  #second-input-user {
    grid-template-columns: 1fr !important;
  }

  /* Calendar month grid → smaller cells */
  .container-content-table {
    grid-template-columns: repeat(7, minmax(50px, 1fr)) !important;
  }
  .cella {
    padding: 10px !important;
    height: 100px !important;
    font-size: 12px;
  }

  /* Tools menu */
  .tools-menu {
    flex-wrap: wrap;
    height: auto !important;
    gap: 8px;
    padding: 8px 10px !important;
  }

  /* Tools paziente */
  .card-paziente-sezioni {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .card-paziente-controls {
    flex-wrap: wrap;
  }

  /* Search bar */
  .barra-ricerca {
    flex-direction: column;
    gap: 8px;
    padding: 10px !important;
  }

  /* Report card */
  .container-info-report {
    gap: 15px !important;
  }
  .container-info-report .img-container {
    width: 60px !important;
    height: 60px !important;
  }

  /* Appointment containers */
  .info {
    flex-direction: column;
    gap: 5px !important;
    align-items: flex-start;
  }
  .info h3 {
    width: 100% !important;
    font-size: 18px !important;
  }
  .info p {
    width: 100% !important;
  }

  /* Breadcrumb wrapping */
  .main-menu-trace {
    font-size: 13px;
  }
  .main-menu-trace img {
    width: 20px !important;
    height: 20px !important;
  }

  /* Week/Day layout: horizontal scroll */
  .week-layout-content,
  .day-layout-content {
    overflow-x: auto;
  }
  .row-week,
  .row-day {
    min-width: 700px;
  }

  /* Toolkit (fixed bottom buttons) */
  .toolkit {
    bottom: 0.5rem !important;
    right: 0.5rem !important;
  }

  /* Grid container (InserisciPaziente) */
  #grid-container {
    grid-template-columns: 1fr !important;
  }

  /* Cella content grid */
  .cella-content-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .cella-content-grid select {
    width: 100% !important;
  }
  #malattie-select {
    width: 100% !important;
  }

  /* Container celle design */
  .container-celle-design input {
    width: 100% !important;
  }

  /* Blog text in sidebar */
  .blog-text {
    width: 200px !important;
  }

  /* Disclaimer */
  .disclaimer-title {
    font-size: 22px !important;
  }

  /* Tools container (appointments) */
  .tools-container {
    flex-wrap: wrap;
    gap: 5px;
  }
}


/* ==============================================================
   ≤ 576px  —  Mobile phones
   ============================================================== */
@media (max-width: 576px) {

  /* Nav bar */
  .nav-bar {
    padding: 0 5px !important;
  }
  .nav-bar-logo a p {
    display: none;
  }
  .nav-bar-logo img {
    width: 40% !important;
  }
  .nav-bar-user h3 {
    font-size: 12px !important;
  }
  .nav-bar-right {
    gap: 8px !important;
    padding-right: 5px !important;
  }

  /* Main title */
  .main-welcome-title {
    font-size: 15px !important;
  }

  /* Banner */
  .banner-info {
    padding: 10px !important;
    padding-left: 15px !important;
  }
  .banner-info h3 {
    font-size: 18px !important;
  }
  #nameUser {
    font-size: 22px !important;
  }

  /* Action cards → 1 col */
  .container-card-actions {
    grid-template-columns: 1fr !important;
  }

  /* Buttons */
  .button {
    font-size: 13px !important;
    padding: 0.6rem 1rem !important;
  }
  .button-style {
    width: 8rem !important;
    font-size: 13px !important;
  }

  /* Card paziente: name */
  .name-content h3 {
    font-size: 16px !important;
  }
  .name-content {
    flex-wrap: wrap;
    gap: 5px !important;
  }
  .followup-badge {
    margin-left: 0 !important;
    margin-top: 4px;
  }

  /* Breadcrumb small */
  .main-menu-trace {
    font-size: 11px !important;
  }

  /* Tabelle header */
  .table-header p {
    font-size: 12px;
  }

  /* Calendar: very small cells */
  .container-content-table {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
  }
  .cella {
    padding: 5px !important;
    height: 70px !important;
    font-size: 10px !important;
    min-height: 60px !important;
  }
  .appointment-box {
    font-size: 0.6rem !important;
    padding: 0 3px !important;
  }

  /* Modal appointments */
  .modal-content-appointments {
    padding: 15px !important;
    margin: 10% auto !important;
  }

  /* Search modal */
  .search-modal {
    width: 95% !important;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Modale indici full screen */
  .modale-indici {
    width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }

  /* Blog container in sidebar */
  .blog-container {
    flex-direction: column;
    gap: 10px !important;
    padding: 10px !important;
  }
  .blog-text {
    width: 100% !important;
  }
  .container_img {
    width: 50px !important;
    height: 50px !important;
  }

  /* Notification dropdown */
  #notificaDropdown {
    width: 260px !important;
    right: -60px !important;
  }

  /* General sections padding */
  .section {
    padding: 15px !important;
  }

  /* Card actions */
  .card-actions {
    padding: 10px !important;
  }

  /* Container data */
  .container_data {
    padding: 20px !important;
  }
  .container_box {
    flex-direction: column;
    gap: 5px;
  }

  /* Tabella ricerca */
  .tabella-ricerca {
    width: 100% !important;
    border-radius: 0 !important;
  }

  /* Container indicatori */
  .score-clock-graph {
    padding: 0 5px;
  }

  /* Fixed width elements → fluid */
  .subtitle {
    width: 100% !important;
  }
  .content-container-modale-indici .subtitle {
    width: 100% !important;
  }

  /* Cookie disclaimer */
  .cookie-disclaimer {
    max-width: 95% !important;
    padding: 15px !important;
  }

  /* Disclaimer */
  .disclaimer-container {
    padding: 15px !important;
    width: 95% !important;
  }
  .disclaimer-title {
    font-size: 18px !important;
  }
  .disclaimer-text {
    font-size: 13px !important;
  }
}


/* ==============================================================
   PRESCRIZIONI / ESAMI MODALS — responsive
   ============================================================== */
@media (max-width: 1200px) {
  /* Prescrizioni & Esami: large modals */
  #ModaleInserimento,
  #ModalePacchettiEsami,
  #modalePrescrizioni {
    width: 95% !important;
  }

  /* Calcolatore modal */
  .modal-container {
    width: 90% !important;
    max-width: 800px;
  }

  /* Prescrizioni tables: horizontal scroll */
  .tabella-prescrizioni,
  .header-table,
  .table-content .rowModale,
  .Modale-Result-content .rowModale {
    overflow-x: auto;
  }

  /* Resilienza / Referto containers */
  .res-main,
  .aprb-pdf-row,
  .aprb-referto-section {
    max-width: 100% !important;
    width: 98% !important;
  }
}

@media (max-width: 992px) {
  /* Prescrizioni header tools */
  .header-tools {
    flex-wrap: wrap;
    height: auto !important;
    gap: 10px;
    padding: 10px !important;
  }
  .barra-ricerca {
    width: 100% !important;
  }
  .container-button-prescrizionie {
    width: 100%;
    justify-content: center;
  }

  /* Prescrizioni table columns: scroll instead of squeeze */
  .tabella-prescrizioni {
    height: auto !important;
    overflow-x: auto;
  }

  /* Modale header flex */
  .ModaleHeader {
    flex-wrap: wrap;
    height: auto !important;
    gap: 8px;
    padding: 10px;
  }
  .barra-ricercaModale {
    width: 100% !important;
  }
  .tendinaPrescrizioni {
    width: 100% !important;
  }

  /* Filtri button wrap */
  .filtri-button {
    flex-wrap: wrap;
    gap: 8px;
  }
  #filter {
    width: 100% !important;
  }

  /* Pagination */
  .pagination-download {
    flex-direction: column;
    gap: 10px;
    height: auto !important;
  }
  .pagination-controls {
    width: 100% !important;
    justify-content: center;
  }

  /* Resilienza banner */
  .res-banner {
    flex-direction: column;
    gap: 15px;
  }

  /* Referto APRB header */
  .aprb-referto-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Piano terapeutico contenitore header */
  .contenitore-header {
    flex-direction: column;
    gap: 10px;
  }
  .filtri-button {
    justify-content: flex-start;
  }

  /* Button container prescrizioni */
  .button-container-prescrizioni {
    width: 100% !important;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  /* Modals: near full-width */
  #ModaleInserimento,
  #ModalePacchettiEsami,
  #modalePrescrizioni,
  .modal-container {
    width: 98% !important;
    height: auto !important;
    max-height: 85vh !important;
  }

  /* Table row columns: allow wrapping */
  .colModale {
    padding: 5px 8px !important;
    font-size: 13px;
  }

  /* Prescrizioni download button */
  #downloadPrescrizioneVuota {
    width: 100% !important;
  }
}

@media (max-width: 576px) {
  /* Full-screen modals on phone */
  #ModaleInserimento,
  #ModalePacchettiEsami,
  #modalePrescrizioni,
  .modal-container {
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }

  /* Prescrizioni table: smaller text */
  .header-table p {
    font-size: 11px;
  }
  .colModale {
    font-size: 11px;
    padding: 3px 5px !important;
  }
}


/* ==============================================================
   LOGIN PAGE — responsive
   ============================================================== */
@media (max-width: 992px) {
  .login-container {
    width: 50% !important;
    padding: 30px !important;
  }
}

@media (max-width: 768px) {
  .login-container {
    width: 80% !important;
    max-width: 400px;
    padding: 25px !important;
  }
  .login-container h3 {
    font-size: 28px !important;
    transform: translate(0%, -50%) !important;
  }
}

@media (max-width: 576px) {
  .login-container {
    width: 92% !important;
    max-width: none;
    padding: 20px !important;
    margin: 15px !important;
  }
  .login-container h3 {
    font-size: 24px !important;
    transform: translate(0%, -40%) !important;
  }
  .login-container .img-container-logo img {
    width: 80% !important;
    margin: 0 auto;
    display: block;
  }
  .input-container input {
    font-size: 15px !important;
  }
  .button-login {
    height: 2.8rem;
    font-size: 14px;
  }
  .forgot-password {
    font-size: 13px;
  }
}


/* ==============================================================
   ERROR PAGES — responsive
   ============================================================== */
@media (max-width: 576px) {
  .card-errore {
    padding: 1rem !important;
    gap: 15px !important;
  }
  .card-errore img {
    width: 50px !important;
    height: 50px !important;
  }
  .card-errore p {
    width: 95% !important;
    font-size: 13px;
  }
}


/* ==============================================================
   ETA METABOLICA — responsive grids & messages
   ============================================================== */
@media (max-width: 992px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-container-special {
    grid-template-columns: 1fr !important;
  }
  .info_container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .container-button-header {
    flex-direction: column;
    height: auto !important;
    gap: 10px;
  }
  .container-button {
    width: 100% !important;
  }
  .infiammazione {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .grid-container {
    grid-template-columns: 1fr !important;
  }
  .info_container {
    grid-template-columns: 1fr !important;
  }
  .infiammazione {
    grid-template-columns: 1fr !important;
  }
  .toolkit {
    width: auto !important;
  }
  .toolkit:hover {
    width: 15rem !important;
  }
}


/* ==============================================================
   STORICO TERAPIE — responsive table & modal
   ============================================================== */
@media (max-width: 992px) {
  .tabella-prescrizioni {
    overflow-x: auto;
    height: auto !important;
  }
  .header-table-prescrizioni {
    min-width: 600px;
  }
  .table-content {
    min-width: 600px;
    height: auto !important;
    max-height: 400px;
    overflow: auto;
  }
}


/* ==============================================================
   Print-friendly: hide nav, sidebar, fixed elements
   ============================================================== */
@media print {
  .nav-bar,
  .hamburger-btn,
  .side-navbar,
  .sidebar,
  .bg-sidebar,
  .toolkit,
  #loading-wrapper {
    display: none !important;
  }
  main {
    position: static !important;
    top: 0 !important;
  }
}