/**
 * MyFloatPlans – Application Styles
 * =================================
 * Complements Bootstrap 5.3 dark-mode. Designed for a
 * clean, professional boating / safety aesthetic.
 */

/* ── General ────────────────────────────────────────────── */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}

/* ── Float Plan Cards (USCG style) ──────────────────────── */
.float-plan-print .card {
  break-inside: avoid;
}
.float-plan-print .card-header {
  font-size: .95rem;
}

/* ── Print Styles ───────────────────────────────────────── */
@media print {
  /* Hide nav, buttons, and non-printable elements */
  .navbar, .no-print, .no-print * {
    display: none !important;
  }
  /* Remove shadows and round corners for cleaner print */
  .card {
    border: 1px solid #333 !important;
    box-shadow: none !important;
  }
  .card-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color: #fff !important;
  }
  body {
    font-size: 11pt;
  }
  .float-plan-print {
    max-width: 100%;
    margin: 0;
  }
  .alert.no-print-hide {
    display: block !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .container-fluid {
    max-width: 100%;
    padding: 0 10px;
  }
}

/* ── DataTables dark-mode harmony ───────────────────────── */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #dee2e6 !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}
[data-bs-theme="dark"] table.dataTable tbody tr {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] table.dataTable tbody tr:hover {
  background-color: rgba(255,255,255,.05);
}

/* ── Emergency alert strip (always visible, even in print) ── */
.alert.no-print-hide {
  font-size: .9rem;
}

/* ── Modal tweaks ───────────────────────────────────────── */
.modal-xl {
  max-width: 960px;
}
#vesselPhotoModal .modal-content {
  background: transparent !important;
}

/* ── Mobile-friendly layout ─────────────────────────────── */
@media (max-width: 767.98px) {
  .float-plan-print .card-body {
    padding: .75rem;
  }
  .float-plan-print .card-body strong {
    display: block;
    font-size: .8rem;
    color: var(--bs-secondary-color);
  }
  .float-plan-print h3 {
    font-size: 1.25rem;
  }
  .vessel-thumb {
    max-width: 100% !important;
    max-height: 200px !important;
  }
  .person-row .col-md-4,
  .person-row .col-md-2,
  .person-row .col-md-1 {
    margin-bottom: .25rem;
  }
}

/* ── Person row remove button ────────────────────────────── */
.person-row .remove-person {
  visibility: hidden;
}
.person-row:hover .remove-person {
  visibility: visible;
}
/* ── Photo Drop Zone ───────────────────────────────── */
#photoDropZone {
  transition: border-color .2s, background-color .2s;
}
#photoDropZone.drag-over {
  border-color: #0d6efd !important;
  background-color: rgba(13, 110, 253, .08);
}
#photoDropZone:hover {
  border-color: #0d6efd !important;
}

/* spinner for upload indicator */
@keyframes upload-spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: upload-spin .8s linear infinite; }

/* ── Route Map ──────────────────────────────────────── */
#routeMap, #viewRouteMap {
  border: 1px solid var(--bs-border-color);
}
@media print {
  #viewRouteMap { display: none !important; }
}