@import url("../style.css");

:root{
  --brand:#0a1a7a;
  --brand-2:#0a2ea6;
  --text:#0b1140;
  --muted:#6b7280;
  --bg:#f6f8fb;
  --card:#ffffff;
  --danger:#cc3535;
  --ring:0 0 0 3px rgba(10,46,166,.2);
  --radius:14px;
  --shadow:0 10px 30px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, 'Noto Sans', sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.main{flex:1; width:100%; max-width:1200px; margin:0 auto; padding:24px;}
.main--center{display:grid; place-items:center;}

/* Components */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  border:1px solid rgba(10,26,122,.08);
}

.field{
  display:flex; align-items:center; gap:10px;
  border:1.2px solid #e5e7eb;
  padding:12px 14px;
  border-radius:12px;
  transition:.2s border-color,.2s box-shadow,.2s background;
  background:var(--card);
  margin-bottom:14px;
}
.field:focus-within{border-color:var(--brand-2); box-shadow:var(--ring);}
.field input{flex:1; font-size:16px; border:0; outline:none; background:transparent; color:inherit;}
.field input::placeholder{color:#9aa3b2;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px;
  border-radius:12px;
  font-weight:600; font-size:16px; line-height:1.2;
  border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:.15s background,.15s border-color,.15s color;
}
.btn:focus-visible{outline:none; box-shadow:var(--ring);}
.btn--primary{background:var(--brand); color:#fff;}
.btn--primary:hover{background:var(--brand-2);}
.btn--ghost{background:transparent; border-color:var(--brand); color:var(--brand);}
.btn--ghost:hover{background:rgba(10,46,166,.06);}
.btn--danger{background:var(--danger); color:#fff;}
.btn--danger:hover{filter:brightness(.9);}

.table{width:100%; border-collapse:collapse; font-size:14px;}
.table th, .table td{padding:12px 8px; text-align:left; border-bottom:1px solid rgba(0,0,0,.05);}
.table th{background:rgba(10,26,122,.05); position:sticky; top:0; z-index:1;}
.table-responsive{overflow-x:auto;}

.badge,.chip{display:inline-block; padding:2px 8px; border-radius:9999px; font-size:12px; font-weight:600;}
.badge{background:var(--brand); color:#fff;}
.chip{background:rgba(10,26,122,.1); color:var(--brand);}

.alert{padding:12px 16px; border-radius:12px; margin-bottom:16px;}
.alert--success{background:#d1fae5; color:#065f46;}
.alert--warn{background:#fef3c7; color:#92400e;}
.alert--error{background:#fee2e2; color:#991b1b;}

.toolbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px;}
.pagination{display:flex; gap:4px; list-style:none; padding:0;}
.pagination a{padding:8px 12px; border-radius:8px; text-decoration:none; color:var(--brand);}
.pagination a:focus-visible{outline:none; box-shadow:var(--ring);}
.pagination .active a{background:var(--brand); color:#fff;}

.navbar{background:var(--brand); color:#fff; padding:14px 20px;}
.navbar .brand{font-weight:700; display:flex; align-items:center; gap:10px;}
.navbar a{color:inherit; text-decoration:none;}
.navbar-menu{display:flex; gap:16px; margin-left:auto;}

.footer{padding:24px 10px; text-align:center; font-size:13px; color:var(--muted);}

.error{display:none; margin:4px 2px 10px; color:#fff; background:var(--danger); padding:10px 12px; border-radius:10px; font-size:14px;}

.link{color:var(--brand-2); text-decoration:none;}
.link:focus-visible{outline:none; box-shadow:var(--ring);}

/* FitRow Lesson Cards - Layout Orizzontale */
.lesson-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--card);
    border: 1px solid rgba(10, 26, 122, 0.15) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
}

.lesson-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(16, 24, 40, 0.12);
}

/* Container orizzontale per le schede */
.tab-pane .d-flex,
.accordion-body .d-flex {
    padding: 1rem 0;
}

/* Scrollbar personalizzata per il container orizzontale */
.tab-pane .d-flex::-webkit-scrollbar,
.accordion-body .d-flex::-webkit-scrollbar {
    height: 8px;
}

.tab-pane .d-flex::-webkit-scrollbar-track,
.accordion-body .d-flex::-webkit-scrollbar-track {
    background: rgba(10, 26, 122, 0.05);
    border-radius: 4px;
}

.tab-pane .d-flex::-webkit-scrollbar-thumb,
.accordion-body .d-flex::-webkit-scrollbar-thumb {
    background: var(--brand);
    border-radius: 4px;
}

.tab-pane .d-flex::-webkit-scrollbar-thumb:hover,
.accordion-body .d-flex::-webkit-scrollbar-thumb:hover {
    background: var(--brand-2);
}

/* FitRow Mobile Styles */
@media (max-width: 767.98px) {
    .week-navigation {
        position: sticky;
        top: 0;
        z-index: 1020;
        background: var(--bs-body-bg);
        padding: 1rem 0;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--bs-border-color);
    }
    
    .accordion-button {
        font-weight: 500;
    }
    
    .accordion-button:not(.collapsed) {
        background-color: var(--bs-primary);
        color: white;
    }
    
    .lesson-card {
        min-width: 280px !important;
    }
    
    .lesson-card .card-body {
        padding: 1rem;
    }
    
    .btn-group-vertical .btn {
        margin-bottom: 0.25rem;
    }
    
    /* Scroll orizzontale più fluido su mobile */
    .tab-pane .d-flex,
    .accordion-body .d-flex {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    
    .lesson-card {
        scroll-snap-align: start;
    }
}

/* Center FitRow lesson cards on desktop */
@media (min-width: 768px) {
  /* Center the unified desktop container and per-day card rows */
  #dayTabsContent > .d-flex,
  .tab-pane > .d-flex,
  #dayTabsContent .d-flex {
    justify-content: center;
  }
}

/* Media queries per accessibilità */
@media (prefers-reduced-motion: reduce){
  *{animation:none; transition:none}
}

/* Logo app - keep only final version */
.app-logo{
  height:88px;
  width:auto;
  opacity:.95;
}

/* Brand mark - consolidated from duplicates */
.brand-mark,
.navbar .brand-mark{
  width:28px;
  height:28px;
  object-fit: contain;
  background: transparent !important;
  display: inline-block;
  vertical-align:middle;
}

.navbar-dark .navbar-brand img.brand-mark{
  filter: none !important;
}

/* Mobile responsive - consolidated */
@media (max-width: 575.98px) {
  .navbar-brand { font-size: 1rem; }
  .btn, .btn-sm { padding-top: .5rem; padding-bottom: .5rem; }
  .table td, .table th { white-space: nowrap; }
}

/* Tablet breakpoint */
@media (min-width: 768px) and (max-width: 1024px) {
  .main { padding: 16px; }
  .card { padding: 16px; }
  .btn { padding: 8px 14px; font-size: 15px; }
}

/* FullCalendar Styles - consolidated */
.fc .fc-toolbar-title{
  font-size: clamp(14px, 4.5vw, 22px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px){
  .fc .fc-toolbar-chunk{ gap:.25rem; }
  .fc .fc-button{ padding:.3rem .5rem; font-size:.9rem; }
  .fc-theme-standard .fc-list{ font-size:.95rem; }
}

/* FullCalendar Styles */
.fc .fc-toolbar-title{
  font-size: clamp(14px, 4.5vw, 22px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px){
  .fc .fc-toolbar-chunk{ gap:.25rem; }
  .fc .fc-button{ padding:.3rem .5rem; font-size:.9rem; }
  .fc-theme-standard .fc-list{ font-size:.95rem; }
}

/* ensure event text is visible */
.fc-event-title,
.fc-event-time{ display:inline; }
.fc-event-main-frame{ display:flex; }
.custom-event-dot{ display:none; }

/* improve event readability */
.fc .fc-timegrid-event{ border-radius:6px; }
.fc .fc-timegrid-event .fc-event-main{ padding:2px 4px; font-weight:600; }

/* Event colors and text visibility */
.fc .fc-event{ 
  color: #333 !important; 
  background-color: #e3f2fd !important;
  border: 1px solid #2196f3 !important;
}

.fc .fc-event-title{ 
  color: #333 !important; 
  font-weight: 600;
}

.fc .fc-event-time{ 
  color: #666 !important; 
  font-weight: 500;
}

/* Event duration display */
.fc .fc-event-main-frame{ 
  display: flex; 
  flex-direction: column;
  align-items: flex-start;
}

.fc .fc-event-main{ 
  width: 100%;
  padding: 4px 8px;
}

/* Badge stati attività */
.state-badge.state-bozza { background-color: #6c757d !important; color: white !important; }
.state-badge.state-confermato { background-color: #198754 !important; color: white !important; }
.state-badge.state-in_corso { background-color: #ffc107 !important; color: black !important; }
.state-badge.state-completato { background-color: #0d6efd !important; color: white !important; }
.state-badge.state-annullato { background-color: #dc3545 !important; color: white !important; }

/* Badge pagamento */
.payment-badge.payment-da_effettuare { background-color: #ffc107 !important; color: #212529 !important; }
.payment-badge.payment-da_verificare { background-color: #fd7e14 !important; color: white !important; }
.payment-badge.payment-confermato { background-color: #28a745 !important; color: white !important; }
.payment-badge.payment-rifiutato { background-color: #dc3545 !important; color: white !important; }

/* Progress bar copertura */
.coverage-progress { height: 20px; }
.coverage-100 { background-color: #28a745 !important; }
.coverage-partial { background-color: #ffc107 !important; }
.coverage-low { background-color: #dc3545 !important; }

/* Card statistiche compatte */
.compact-stat-card {
    border: 1px solid #dee2e6 !important;
    border-radius: 8px;
    padding: 12px !important;
    margin-bottom: 10px;
    background: transparent !important;
    transition: border-color 0.2s ease;
}

.compact-stat-card:hover {
    border-color: var(--brand-2);
}

.compact-stat-card .card-body {
    padding: 0 !important;
}

.compact-stat-card h5 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 4px;
    color: var(--brand);
}

.compact-stat-card .text-muted {
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* Training cards with hover effect */
.train-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.train-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10, 26, 122, 0.15);
}

/* Prenotazione Barche */
.booking-shell .panel{
  background: var(--card);
  border-radius: 14px;
  border: 1px solid rgba(10,26,122,.08);
  padding: 16px 18px;
  box-shadow: 0 10px 26px rgba(16,24,40,.08);
}
.booking-weekbar{
  background: linear-gradient(135deg, rgba(10,26,122,.08), rgba(10,46,166,.12));
  padding: 10px 14px;
  border-radius: 12px;
}
.week-link{
  color: inherit;
}
.week-link:hover{
  color: #fff;
  text-decoration: none;
}
.day-selector{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.day-chip{
  padding: 6px 10px;
  font-size: 0.85rem;
  border-radius: 12px;
  background: #fff;
  border:1px solid rgba(10,26,122,.12);
  text-decoration:none;
  color: inherit;
  font-weight: 600;
  transition: .15s all;
}
.day-chip.active{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.day-chip.past{
  background:#f4f6fa;
  color:#6f6f7b;
  border-color:rgba(10,26,122,.08);
  cursor:not-allowed;
  pointer-events:none;
}
.day-chip.past:hover{
  background:#f4f6fa;
}
.booking-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.booking-row:last-child{
  border-bottom:0;
}
.boat-list, .booking-row, .boat-row{
  border-radius: 12px;
}
.boat-row{
  border-bottom:1px solid rgba(0,0,0,.07);
  padding:10px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.booking-row .btn{
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
}
.boat-row:last-child{
  border-bottom:0;
}
.boat-row .btn{
  border-radius:10px;
  padding:.35rem .9rem;
}
.booking-meta{
  gap:8px;
}
.booking-meta-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.booking-meta-row .badge{
  font-weight:600;
  font-size:.85rem;
}
.booking-meta-row form{
  margin:0;
}
.booking-meta-row .btn{
  padding:.25rem .5rem;
  font-size:.78rem;
}
.booking-modal .modal-content{
  border-radius:18px;
}
.booking-modal .modal-body{
  padding:1.2rem 1.4rem 1rem;
}
.booking-modal .form-label{
  font-weight:600;
}
.booking-modal .modal-footer{
  padding:.75rem 1.4rem;
}
.booking-modal .modal-title{
  font-size:1.05rem;
}
.filters-bar{
  display:inline-flex;
  background:#fff;
  border-radius:50rem;
  padding:6px 14px;
  box-shadow:0 4px 15px rgba(10,26,122,.1);
  border:1px solid rgba(10,26,122,.1);
  width: 100%;
  max-width: 420px;
  justify-content: center;
}
.pesi-filters-wrapper{
  width:100%;
  padding:0 0.5rem;
}
.pesi-filters-wrapper .filters-bar{
  width:auto;
  max-width:360px;
  gap:.5rem;
  justify-content:space-between;
  padding:4px 10px;
  flex-wrap:nowrap;
  background: transparent;
  border: none;
  box-shadow: none;
  align-items:center;
}
.pesi-filters-wrapper .filters-bar .form-select{
  min-width:120px;
}
.pesi-filters-wrapper .filters-bar .btn{
  padding:.35rem .85rem;
}
@media (max-width: 768px){
  .pesi-filters-wrapper .filters-bar{
    max-width:100%;
    flex-wrap:wrap;
    gap:.75rem;
    justify-content:center;
  }
  .pesi-filters-wrapper .filters-bar .form-select{
    min-width:160px;
    width:100%;
  }
}
.scheda-pill-section{
  text-align:center;
}
.scheda-pillbar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
}
.scheda-pill{
  border:1px solid rgba(10,26,122,.18);
  border-radius:50rem;
  padding:.35rem 1.1rem;
  font-weight:600;
  font-size:.9rem;
  background:#fff;
  color:var(--text);
  cursor:pointer;
  transition:.15s background,.15s border-color;
}
.scheda-pill:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}
.scheda-pill.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  box-shadow:var(--ring);
}
.scheda-pill:not(.active):hover{
  background:#f4f6fa;
}
 .filters-bar.filters-panel{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:0.75rem;
    background:#fff;
    border-radius:1rem;
    border:1px solid rgba(15,23,42,.1);
    box-shadow:0 10px 30px rgba(15,23,42,.08);
    padding:0.65rem 1rem;
    width:100%;
    max-width:none;
 }
 .filters-bar.filters-panel .dropdown .btn,
 .filters-bar.filters-panel .btn{
    border-radius:0.75rem;
    padding:0.35rem 0.85rem;
    background:#f8f9fa;
    border:1px solid rgba(15,23,42,.08);
 }
 .filters-bar.filters-panel .dropdown-menu{
    min-width:220px;
    max-height:240px;
    overflow:auto;
 }
 @media (max-width:767.98px){
    .filters-bar.filters-panel{gap:0.5rem; padding:0.5rem 0.75rem;}
 }
.manage-list{
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.manage-item .btn{
  min-width: 32px;
  height: 32px;
}
.filters-bar .form-select{
  min-width:200px;
  border-radius:10rem;
  border:1px solid rgba(10,26,122,.2);
  padding:0.3rem 0.8rem;
}
.filters-bar .btn{
  min-width:90px;
}
.boat-row .row-actions{
  margin-left:auto;
  flex-shrink:0;
  align-self:flex-end;
}
.section-gap{
  margin-top:2.5rem;
}
.panel.h-100{
  min-height:100%;
}

@media (max-width: 767.98px){
  .booking-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .boat-row{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
    padding:8px 0;
  }
  /* Keep the main row content in two columns: name (1fr) and actions (auto)
     so the action button stays pinned to the right even if the name wraps. */
  .boat-row > .d-flex {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.5rem;
    align-items: center;
    width: 100%;
  }
  .boat-row .flex-grow-1{ min-width: 0; }
  /* Allow the boat name to wrap up to two lines on small screens */
  .boat-row .flex-grow-1 .fw-semibold{
    white-space: normal;
    display: block;
    line-height: 1.15em;
    max-height: calc(1.15em * 2);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .boat-row .row-actions{
    margin-left:auto;
    width:auto;
    align-self:auto;
  }
  .boat-row .row-actions .btn{
    white-space:nowrap;
  }
  .boat-row .booking-meta{
    width:100%;
    margin-top:0.35rem;
    gap:4px;
  }
}