/* ============================================================
   WiM Booking Theme - aligned to wim.uniteinteractive.com
   Mounted to: /var/www/html/Web/css/wim-custom.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');

/* ── Global resets ── */
body, html {
  font-family: 'Inter', Arial, Verdana, sans-serif !important;
  font-size: 16px !important;
  color: #666666 !important;
  background-color: #eef3f7 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important;
  color: #003e44 !important;
}

a { color: #25736d !important; text-decoration: none; }
a:hover { color: #003e44 !important; text-decoration: underline; }

/* ── Top navigation / header ── */
#header,
.navbar,
.navbar-default,
nav[role="navigation"],
#menu,
.topnav {
  background-color: #003e44 !important;
  border-bottom: 3px solid #0d0b0f !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
}

#header a,
.navbar a,
.navbar-default .navbar-nav > li > a,
#menu a,
.topnav a {
  color: #ffffff !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
}

#header a:hover,
.navbar-default .navbar-nav > li > a:hover,
#menu a:hover,
.topnav a:hover {
  color: #ec992f !important;
  background-color: transparent !important;
}

.navbar-brand,
.navbar-header .navbar-brand {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

/* ── Main content area ── */
#content,
.content,
#page-content,
main {
  background-color: #ffffff !important;
}

/* ── Buttons ── */
.btn,
input[type="submit"],
input[type="button"],
button[type="submit"] {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
}

.btn-primary,
input[type="submit"].btn,
.btn-success {
  background-color: #25736d !important;
  border-color: #25736d !important;
  color: #ffffff !important;
}

.btn-primary:hover,
input[type="submit"].btn:hover,
.btn-success:hover {
  background-color: #003e44 !important;
  border-color: #003e44 !important;
  color: #ffffff !important;
}

.btn-default,
.btn-secondary {
  background-color: transparent !important;
  border: 2px solid #25736d !important;
  color: #25736d !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background-color: #25736d !important;
  color: #ffffff !important;
}

.btn-danger {
  background-color: #cc3333 !important;
  border-color: #cc3333 !important;
}

/* ── Form inputs ── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea,
.form-control {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 15px !important;
  color: #666666 !important;
  background-color: #ffffff !important;
  border: 1px solid #cccccc !important;
  border-radius: 0 !important;
  padding: 8px 10px !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: #25736d !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(37,115,109,0.2) !important;
}

/* ── Tables ── */
table.table,
.table {
  border-color: #cccccc !important;
}

.table thead th,
table thead th {
  background-color: #003e44 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important;
  border-color: #003e44 !important;
}

.table-striped > tbody > tr:nth-of-type(odd),
table.table-striped tbody tr:nth-child(odd) {
  background-color: #f5f8fa !important;
}

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

/* ── Calendar / Schedule ── */
.fc-header-toolbar,
.fc-toolbar {
  background-color: #003e44 !important;
  padding: 10px !important;
  color: #ffffff !important;
}

.fc-toolbar h2,
.fc-toolbar .fc-toolbar-title {
  color: #ffffff !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
}

.fc-button,
.fc-button-primary {
  background-color: #25736d !important;
  border-color: #25736d !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
}

.fc-button:hover,
.fc-button-primary:hover {
  background-color: #003e44 !important;
  border-color: #003e44 !important;
}

.fc-button-active,
.fc-button-primary:not(:disabled).fc-button-active {
  background-color: #003e44 !important;
  border-color: #003e44 !important;
}

.fc-event,
.fc-event-main {
  background-color: #25736d !important;
  border-color: #25736d !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}

.fc-event:hover {
  background-color: #003e44 !important;
  border-color: #003e44 !important;
}

/* ── Panels / cards ── */
.panel,
.card {
  border-radius: 0 !important;
  border-color: #cccccc !important;
}

.panel-heading,
.panel-primary > .panel-heading,
.card-header {
  background-color: #003e44 !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
}

.panel-heading h3,
.panel-heading h4,
.card-header h3,
.card-header h4 {
  color: #ffffff !important;
}

/* ── Sidebar / subnav ── */
.sidebar,
#sidebar,
.nav-pills,
.subnav {
  background-color: #ffffff !important;
}

.nav-pills > li > a {
  color: #25736d !important;
  border-radius: 0 !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700;
}

.nav-pills > li.active > a,
.nav-pills > li > a:hover {
  background-color: #003e44 !important;
  color: #ffffff !important;
}

/* ── Alerts ── */
.alert-success { background-color: #edf8f5 !important; border-color: #25736d !important; color: #003e44 !important; border-radius: 0 !important; }
.alert-danger,
.alert-error { background-color: #fff0f0 !important; border-color: #cc3333 !important; color: #cc3333 !important; border-radius: 0 !important; }
.alert-warning { background-color: #fff8e6 !important; border-color: #ec992f !important; color: #8a5a00 !important; border-radius: 0 !important; }
.alert-info { background-color: #edf3f8 !important; border-color: #003e44 !important; color: #003e44 !important; border-radius: 0 !important; }

/* ── Pagination ── */
.pagination > li > a,
.pagination > li > span {
  color: #25736d !important;
  border-radius: 0 !important;
  border-color: #cccccc !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: #25736d !important;
  border-color: #25736d !important;
  color: #ffffff !important;
}

.pagination > li > a:hover {
  background-color: #003e44 !important;
  border-color: #003e44 !important;
  color: #ffffff !important;
}

/* ── Footer ── */
#footer,
footer {
  background-color: #003e44 !important;
  color: rgba(255,255,255,0.7) !important;
  border-top: none !important;
}

#footer a,
footer a {
  color: rgba(255,255,255,0.7) !important;
}

#footer a:hover,
footer a:hover {
  color: #ec992f !important;
}

/* Hide attribution line (belt-and-suspenders after Dockerfile sed patch) */
#footer div,
footer div,
#footer p,
footer p {
  display: none !important;
}

/* ── Breadcrumbs ── */
.breadcrumb {
  background-color: #eef3f7 !important;
  border-radius: 0 !important;
  border: none !important;
}

.breadcrumb > li + li::before {
  color: #999999 !important;
}

.breadcrumb > .active {
  color: #003e44 !important;
  font-weight: 700;
}

/* ── Login page ── */
.login-form,
#login-form,
.well {
  border-radius: 0 !important;
  border-color: #cccccc !important;
}

/* SSO-first: elevate the WiM Account (OAuth2) button as the primary login action.
   The local username/password form is subordinated as a staff/admin fallback. */

/* OAuth2 / WiM Account button: full-width primary CTA */
#page-login a.btn[href*="oauth2"],
#page-login .btn-oauth2,
.wim-oauth-btn {
  display: block !important;
  width: 100% !important;
  padding: 16px 24px !important;
  background-color: #25736d !important;
  border: 2px solid #25736d !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-align: center !important;
  text-decoration: none !important;
  margin-bottom: 24px !important;
  cursor: pointer !important;
  transition: background-color 200ms, border-color 200ms !important;
  box-sizing: border-box !important;
}

#page-login a.btn[href*="oauth2"]:hover,
#page-login .btn-oauth2:hover,
.wim-oauth-btn:hover {
  background-color: #003e44 !important;
  border-color: #003e44 !important;
}

/* Local login form: visually de-emphasised under a divider */
#page-login .login-credentials-section,
#page-login #login-credentials {
  border-top: 1px solid #d0d0d0 !important;
  padding-top: 20px !important;
  margin-top: 8px !important;
}

/* "Staff / admin sign-in" label above local form */
#page-login .login-credentials-section::before,
#page-login #login-credentials::before {
  content: 'Staff and admin sign-in';
  display: block;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #888888;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Local submit button: outlined/secondary style */
#page-login .login-credentials-section .btn-primary,
#page-login #login-credentials .btn-primary {
  background-color: transparent !important;
  border: 2px solid #25736d !important;
  color: #25736d !important;
}

#page-login .login-credentials-section .btn-primary:hover,
#page-login #login-credentials .btn-primary:hover {
  background-color: #25736d !important;
  color: #ffffff !important;
}

/* Two-button login layout: Sign-in (primary) + Register (secondary) */
.wim-register-btn {
  margin-top: 10px !important;
  background-color: transparent !important;
  border: 2px solid #25736d !important;
  color: #25736d !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important;
  text-align: center !important;
  display: block !important;
}

.wim-register-btn:hover {
  background-color: #25736d !important;
  border-color: #25736d !important;
  color: #ffffff !important;
}

/* ── WiM logo sizing (custom-logo.png auto-detected by Page.php) ── */
img.logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 8px;
}

/* ── Status badges (pending / confirmed / deleted) ── */
.label-warning,
.badge-warning,
[class*="pending"] .status-label,
.reservation-pending {
  background-color: #ec992f !important;
  color: #ffffff !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.label-success,
.badge-success,
[class*="confirmed"] .status-label,
.reservation-confirmed {
  background-color: #25736d !important;
  color: #ffffff !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.label-danger,
.badge-danger,
.label-default,
.badge-default {
  border-radius: 3px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* ── Reservation form — tighter layout, better CTA ── */
#reservationForm .form-group,
.reservation-form .form-group,
#create-reservation .form-group {
  margin-bottom: 20px !important;
}

#reservationForm label,
.reservation-form label,
#create-reservation label {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #003e44 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Full-width primary submit button */
#reservationForm input[type="submit"],
#reservationForm button[type="submit"],
.reservation-form input[type="submit"],
.reservation-form button[type="submit"] {
  width: 100% !important;
  padding: 14px !important;
  font-size: 16px !important;
  margin-top: 8px !important;
}

/* Group resource/date/time row visually */
#formResourceDiv,
.resource-section,
#dateTimes,
.date-time-section {
  background: #f8fbfc !important;
  border: 1px solid #e0eceb !important;
  border-radius: 0 !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}

/* ── Schedule page — now-line and event legibility ── */
.fc-now-indicator-line {
  border-color: #ec992f !important;
  border-width: 2px !important;
}

.fc-now-indicator-arrow {
  border-top-color: #ec992f !important;
}

.fc-event-title,
.fc-event-time {
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: normal !important;
  overflow: hidden !important;
}

/* ── My Reservations dashboard — card-style rows ── */
#reservations-list .reservation-row,
.my-reservations tr,
#myReservationsList tr {
  transition: background-color 0.15s ease !important;
}

#reservations-list .reservation-row:hover,
.my-reservations tr:hover,
#myReservationsList tr:hover {
  background-color: #edf8f5 !important;
  cursor: pointer;
}

/* Emphasis for pending-approval rows */
tr.pending-approval td:first-child,
.reservation-row.pending-approval td:first-child {
  border-left: 3px solid #ec992f !important;
  padding-left: 9px !important;
}

/* ── Declutter admin chrome for non-admin views ── */
/* Hide "Manage" nav items from users without admin role - rendered server-side for admins
   only, but belt-and-suspenders via CSS avoids edge cases. */
.navbar-admin-only { display: none !important; }

/* ── Mobile responsive breakpoints ── */

/* Tablet (≤768px) */
@media (max-width: 768px) {
  .navbar-header { width: 100% !important; }

  .navbar-collapse {
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    background-color: #003e44 !important;
  }

  .navbar-collapse .navbar-nav {
    margin: 0 !important;
    width: 100% !important;
  }

  .navbar-collapse .navbar-nav > li > a {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  .navbar-toggle {
    border-color: rgba(255,255,255,0.4) !important;
    margin-right: 0 !important;
  }

  .navbar-toggle .icon-bar { background-color: #ffffff !important; }

  /* Make data tables horizontally scrollable instead of overflowing */
  .table-responsive-auto {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.table {
    font-size: 13px !important;
    min-width: 480px !important;
  }

  /* Wrap table in scroll container on small viewports */
  #content .table,
  main .table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  .fc-toolbar h2,
  .fc-toolbar .fc-toolbar-title {
    font-size: 16px !important;
  }

  .fc-button,
  .fc-button-primary {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* Stack form columns */
  .col-sm-6, .col-md-6, .col-sm-4, .col-md-4 {
    width: 100% !important;
    float: none !important;
  }

  /* Full-width modals */
  .modal-dialog { margin: 8px !important; }
  .modal-content { border-radius: 0 !important; }
}

/* Phone (≤480px) */
@media (max-width: 480px) {
  body, html { font-size: 15px !important; }

  #header,
  .navbar { padding: 0 8px !important; }

  #content,
  .content,
  main { padding: 12px !important; }

  .breadcrumb { display: none !important; }

  /* Hide secondary table columns — show only Name + Date + Status */
  table.table th:nth-child(n+4),
  table.table td:nth-child(n+4) {
    display: none !important;
  }

  /* Calendar: force day-view on phones, hide week/month buttons */
  .fc-timeGridWeek-button,
  .fc-dayGridMonth-button { display: none !important; }

  .fc-event-title { font-size: 11px !important; }

  /* Larger touch targets for all inputs */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="date"],
  input[type="time"],
  select,
  textarea,
  .form-control {
    font-size: 16px !important; /* prevents iOS zoom-on-focus */
    min-height: 44px !important;
    padding: 10px 12px !important;
  }

  .btn,
  input[type="submit"],
  button[type="submit"] {
    min-height: 44px !important;
    font-size: 15px !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 8px !important;
  }

  /* Stack panel/card header + body vertically */
  .panel { margin-bottom: 16px !important; }

  /* Pagination: hide page numbers, show only prev/next */
  .pagination li:not(:first-child):not(:last-child) { display: none !important; }
}