/* =========================================================
   FRANCE PIO RESORT - GLOBAL BLUE UI THEME
   This file is loaded last so all pages share one blue theme.
   ========================================================= */
:root {
  --resort-navy: #082f49;
  --resort-blue-dark: #075985;
  --resort-blue: #0284c7;
  --resort-sky: #0ea5e9;
  --resort-sky-light: #38bdf8;
  --resort-blue-pale: #e0f2fe;
  --resort-page: #f0f9ff;
  --resort-white: #ffffff;
  --resort-text: #0f172a;
  --resort-muted: #64748b;
  --resort-border: #bae6fd;

  --bs-primary: #0284c7;
  --bs-primary-rgb: 2, 132, 199;
  --bs-link-color: #0369a1;
  --bs-link-hover-color: #075985;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--resort-text);
  background-color: var(--resort-page);
}

a {
  color: var(--resort-blue-dark);
}

a:hover {
  color: var(--resort-blue);
}

/* Main navigation and page headers */
.topnav,
.topbar,
.site-header,
.navbar.bg-dark,
.sidebar,
.header:not(.modal-header) {
  background: linear-gradient(135deg, var(--resort-navy) 0%, var(--resort-blue-dark) 58%, var(--resort-blue) 100%) !important;
  color: #fff !important;
}

.topnav,
.topbar,
.site-header,
.header:not(.modal-header) {
  box-shadow: 0 8px 28px rgba(8, 47, 73, 0.18) !important;
}

.navbar-brand img,
.sidebar-logo img,
.logo img {
  filter: drop-shadow(0 5px 12px rgba(8, 47, 73, 0.25));
}

.nav-link,
.topnav a,
.topbar a,
.site-header a {
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active,
.bottom-nav a.active,
.bottom-navigation a.active,
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--resort-blue), var(--resort-sky)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.sidebar .nav-link i,
.page-header i,
.section-title i,
.card-title i,
.stats-card i,
.stat-card i,
.feature-icon,
.amenity-icon {
  color: var(--resort-sky) !important;
}

/* Cards and content surfaces */
.card,
.stats-card,
.stat-card,
.section-card,
.profile-card,
.chart-card,
.table-container,
.filter-section,
.filters-section,
.booking-item,
.room-card,
.payment-card,
.login-card,
.signup-card,
.modal-content {
  border-color: var(--resort-border) !important;
  box-shadow: 0 10px 30px rgba(8, 47, 73, 0.10) !important;
}

.card:hover,
.stats-card:hover,
.stat-card:hover,
.room-card:hover,
.booking-item:hover {
  box-shadow: 0 16px 38px rgba(8, 47, 73, 0.16) !important;
}

.stats-icon,
.stat-icon,
.icon-circle,
.profile-pic-container .icon {
  background: linear-gradient(135deg, var(--resort-blue), var(--resort-sky-light)) !important;
  color: #fff !important;
}

.page-header h1,
.page-header h2,
.section-title,
.card-title,
.title,
h1, h2, h3, h4, h5, h6 {
  color: var(--resort-navy);
}

.topnav h1,
.topnav h2,
.topbar h1,
.topbar h2,
.site-header h1,
.site-header h2,
.header h1,
.header h2,
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar h5,
.sidebar h6,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5 {
  color: #fff !important;
}

/* Buttons */
.btn-primary,
.btn-admin,
.apply-btn,
.action-btn,
.book-btn,
.book-now-btn,
.cta-button,
.submit-btn,
.login-btn,
.signup-btn,
button[type="submit"]:not(.btn-danger):not(.btn-success):not(.btn-warning) {
  background: linear-gradient(135deg, var(--resort-blue-dark), var(--resort-sky)) !important;
  border-color: var(--resort-blue) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.22);
}

.btn-primary:hover,
.btn-admin:hover,
.apply-btn:hover,
.action-btn:hover,
.book-btn:hover,
.book-now-btn:hover,
.cta-button:hover,
.submit-btn:hover,
.login-btn:hover,
.signup-btn:hover,
button[type="submit"]:not(.btn-danger):not(.btn-success):not(.btn-warning):hover {
  background: linear-gradient(135deg, var(--resort-navy), var(--resort-blue)) !important;
  border-color: var(--resort-blue-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--resort-blue-dark) !important;
  border-color: var(--resort-blue) !important;
}

.btn-outline-primary:hover {
  color: #fff !important;
  background: var(--resort-blue) !important;
}

/* Forms */
.form-control,
.form-select,
input,
select,
textarea {
  border-color: #cbd5e1;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--resort-sky) !important;
  box-shadow: 0 0 0 .22rem rgba(14, 165, 233, .16) !important;
}

.input-group-text {
  color: var(--resort-blue-dark);
}

/* Tables */
thead,
.table thead,
.table-dark {
  background: linear-gradient(135deg, var(--resort-navy), var(--resort-blue-dark)) !important;
  color: #fff !important;
}

thead th,
.table thead th,
.table-dark th {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

tbody tr:hover,
.table-hover tbody tr:hover {
  background-color: #f0f9ff !important;
}

/* Modals, pagination, progress */
.modal-header {
  background: linear-gradient(135deg, var(--resort-navy), var(--resort-blue)) !important;
  color: #fff !important;
  border-bottom: 0 !important;
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.page-link {
  color: var(--resort-blue-dark);
}

.page-item.active .page-link,
.progress-bar {
  background-color: var(--resort-blue) !important;
  border-color: var(--resort-blue) !important;
}

/* Footer and bottom navigation */
footer,
.site-footer,
.bottom-nav,
.bottom-navigation {
  background: linear-gradient(135deg, var(--resort-navy), var(--resort-blue-dark)) !important;
  color: #e0f2fe !important;
}

footer a,
.site-footer a,
.bottom-nav a,
.bottom-navigation a {
  color: #e0f2fe;
}

/* Landing page accents */
.hero-section::before,
.hero::before {
  background: linear-gradient(135deg, rgba(8, 47, 73, .80), rgba(2, 132, 199, .46)) !important;
}

.section-badge,
.badge-primary,
.bg-primary {
  background-color: var(--resort-blue) !important;
}

.text-primary {
  color: var(--resort-blue-dark) !important;
}

.border-primary {
  border-color: var(--resort-blue) !important;
}

/* Keep the layout clean on smaller screens */
@media (max-width: 768px) {
  .main-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .card,
  .section-card,
  .profile-card,
  .table-container {
    border-radius: 14px !important;
  }
}