/* Tourcube Guide Portal - Custom Styles */

/* ============================================
   Fix Gap Above Header
   ============================================
   NOTE: Historically this block forced `padding: 0 !important` on
   `.nk-body`, `.nk-app-root`, and `.nk-wrap` to remove stray whitespace
   above the header. Those resets were dormant (custom.css was never
   loaded by base.html) until backlog #102 wired custom.css in.
   With the fixed header active, `body.paddingTop` is set via JS by
   `partials/default_header.html` so content clears the fixed header —
   our `!important` reset was overriding that inline style and clipping
   the top of the first content element (e.g. the trip title on the
   booking-detail page). Drop the `!important` on `.nk-body padding` so
   the JS-set inline padding wins. Keep the margin reset since the JS
   does not touch margin. */
.nk-body {
    margin: 0 !important;
}

.nk-app-root {
    margin: 0 !important;
    padding: 0 !important;
}

.nk-wrap {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure header starts at the very top with no gap */
.nk-header:first-child {
    margin-top: 0 !important;
}

/* Authentication Pages - Logo Size and Centering */
.nk-wrap-nosidebar .nk-auth-body .brand-logo {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.nk-wrap-nosidebar .nk-auth-body .brand-logo .logo-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.nk-wrap-nosidebar .nk-auth-body .brand-logo .logo-link .logo-img.logo-light,
.nk-wrap-nosidebar .nk-auth-body .brand-logo .logo-link .logo-img.logo-dark {
    max-width: 70% !important;
    width: 70% !important;
    height: auto !important;
}

/* Guide Homepage Specific Styles */
.trip-table-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.trip-table-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Form Button States */
.btn-form-complete {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
}

.btn-form-pending {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
}

.btn-form-expired {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

.btn-form-disabled {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
    cursor: not-allowed !important;
}

/* Forms Due Section */
.forms-due-item {
    border-left: 4px solid #007bff;
    padding-left: 1rem;
    margin-bottom: 1rem;
}

.forms-due-item.overdue {
    border-left-color: #dc3545;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .nk-tb-col {
        padding: 0.5rem;
    }

    .forms-due-item {
        padding: 0.75rem;
    }

    /* Responsive Tables - Better horizontal scrolling */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        border-radius: 0.375rem;
    }

    /* Smaller padding on mobile tables */
    .table-responsive table td,
    .table-responsive table th {
        padding: 0.5rem;
        font-size: 0.875rem;
    }

    /* Ensure table links are tappable on mobile */
    .table-responsive table a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Tab Navigation Enhancement */
.nav-tabs .nav-link.active {
    font-weight: 600;
}

/* Avatar Enhancement */
.user-avatar-header {
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Sidebar Logo Styling */
.nk-sidebar .nk-sidebar-brand .logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}

.nk-sidebar .nk-sidebar-brand .logo-img {
    max-width: 180px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Hide Guide Portal text in sidebar */
.nk-sidebar .nk-sidebar-brand .nio-version {
    display: none !important;
}

/* ============================================
   V6 Layout Specific Styles (Horizontal Header)
   ============================================ */

/* Header Logo Styling */
.nk-header .nk-header-brand .logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.nk-header .nk-header-brand .logo-img {
    max-width: 180px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Header Menu Active State */
.nk-header-menu .nk-menu .nk-menu-item.active .nk-menu-link,
.nk-header-menu .nk-menu .nk-menu-item.current-page .nk-menu-link {
    color: #6576ff !important;
    font-weight: 600 !important;
}

/* Badge in Header Menu */
.nk-header-menu .nk-menu .nk-menu-link .badge {
    display: inline-block;
    vertical-align: middle;
}

/* User Avatar in Header */
.nk-header .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Mobile Menu Improvements */
@media (max-width: 991px) {
    .nk-header-menu .nk-menu {
        padding: 1rem 0;
    }

    .nk-header-menu .nk-menu .nk-menu-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .nk-header-menu .nk-menu .nk-menu-link {
        padding: 0.75rem 1.5rem;
    }
}

/* Fix for logo in mobile header */
.nk-header-mobile .nk-header-brand .logo-img {
    max-width: 140px !important;
    max-height: 40px !important;
}

/* Ensure trip table rows are still hoverable */
.trip-table-row {
    cursor: pointer !important;
    transition: background-color 0.2s ease;
}

.trip-table-row:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Fix Guide Profile Avatar to be perfectly round */
.user-card-s2 .user-avatar {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.user-card-s2 .user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.user-card-s2 .user-avatar span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 3rem !important;
}

/* ============================================
   Fix Dashlite .gap-N Collision with Bootstrap 5 .gap Utility
   ============================================
   Dashlite ships two `.gap-N` rule sets:
     1. Bootstrap utility: `gap: 0.75rem !important;`  (flex/grid gap)
     2. Legacy spacer:     `height: 0.75rem;`          (empty divider blocks)
   The spacer is declared AFTER the utility, so any `.d-flex.gap-N` collapses
   the flex container to 12px and its children overflow into the next sibling.
   On the MT Sobek booking-detail page this caused the "Adventure Coordinator"
   info row to visually sit on top of the Financial Card below (backlog #102).
   Neutralize the spacer height when `.gap-N` is combined with a flex/grid
   container; keep the gap utility semantics intact. */
.d-flex.gap-0, .d-flex.gap-1, .d-flex.gap-2, .d-flex.gap-3, .d-flex.gap-4, .d-flex.gap-5,
.d-inline-flex.gap-0, .d-inline-flex.gap-1, .d-inline-flex.gap-2, .d-inline-flex.gap-3, .d-inline-flex.gap-4, .d-inline-flex.gap-5,
.d-grid.gap-0, .d-grid.gap-1, .d-grid.gap-2, .d-grid.gap-3, .d-grid.gap-4, .d-grid.gap-5,
.d-inline-grid.gap-0, .d-inline-grid.gap-1, .d-inline-grid.gap-2, .d-inline-grid.gap-3, .d-inline-grid.gap-4, .d-inline-grid.gap-5 {
    height: auto;
}

/* Booking Engine — trip thumbnail next to trip name in step header card.
   Backlog #111 — keeps a fixed square so the heading does not shift across
   trips with vs without thumbnail. `rounded` Bootstrap utility uses the
   skin-neutral --bs-border-radius token (4px). */
.trip-header-thumbnail {
    width: 240px;
    height: 160px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ==========================================================================
   #124 — Off-white page background (global default for all tenants)
   --------------------------------------------------------------------------
   Steve flagged the WT trips overview page as "too much white". Guide portal
   uses an off-white page background that makes trip cards stand out. Apply
   the same default across every tenant skin: page background #F7F7F7, cards
   remain white. Originally landed only on theme-wt-blue (#122); promoted
   here so all skins benefit.
   ========================================================================== */
body.nk-body,
.nk-content,
.nk-wrap {
  background-color: #F7F7F7 !important;
}

/* ==========================================================================
   #126 — Past Due label weight (global)
   --------------------------------------------------------------------------
   Form due-date status reads "Past Due" when overdue. Steve asked for it to
   be visually loud (red + bold). Color comes from each skin's
   `--form-icon-overdue` token; weight is forced to bold here so it
   overrides default `fw-medium` regardless of which skin is active.
   ========================================================================== */
.form-overdue-text {
  font-weight: 700;
}

.portal-form-tile-link {
  display: block;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.portal-form-tile-link:hover {
  color: inherit;
  text-decoration: none;
}

.portal-form-tile-link:focus-visible {
  outline: 3px solid rgba(9, 113, 191, 0.35);
  outline-offset: 2px;
}

.portal-form-tile-action {
  white-space: nowrap;
}

/* DEVCUR-1709 — Whole document tile is clickable.
   The View button carries `.stretched-link`, expanding its hit area over the
   `.list-group-item` (already `position: relative`). These rules just signal
   the affordance: pointer cursor + subtle hover wash across the row. The View
   button keeps its own styling and stays the visible action. */
.doc-tile-clickable {
  cursor: pointer;
}

.doc-tile-clickable:hover {
  background-color: rgba(9, 113, 191, 0.06);
}

/* `.btn` is `position: relative`, which would trap the stretched-link's
   `::after` inside the button. Reset it to `static` so the overlay escapes to
   the `.list-group-item` and covers the entire row. */
.doc-tile-clickable .stretched-link {
  position: static;
}

/* ==========================================================================
   #127 — Insurance radio tiles: drop the `lg` size variant
   --------------------------------------------------------------------------
   The default `custom-control-lg + custom-control-pro` combo renders the
   Travel Insurance opt-in tiles too large relative to the surrounding
   form. The template still ships both classes for parity with other
   Dashlite Pro radios; here we cancel the `lg` size only inside the
   insurance section so the tile shrinks uniformly (frame + circle +
   text), without forcing line breaks.
   ========================================================================== */
/* Dashlite Pro renders the visible tile frame on `.custom-control-label`
   (display: inline-flex, auto-sizing to content), so the frame width must
   be set on the label itself — not on the outer wrapper. Both Accept and
   Decline labels share the same fixed width here so the two tiles always
   align regardless of label content (e.g. the Accept badge price). */
.insurance-radio-group .custom-control.custom-control-lg.custom-control-pro .custom-control-label {
  width: 14rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem 0.5rem 2.25rem;
  font-size: 0.875rem;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
}
.insurance-radio-group .custom-control.custom-control-lg.custom-control-pro .custom-control-label::before,
.insurance-radio-group .custom-control.custom-control-lg.custom-control-pro .custom-control-label::after {
  width: 1.125rem;
  height: 1.125rem;
  top: 50%;
  transform: translateY(-50%);
  left: 0.6rem;
}

@keyframes save-offline-spin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   Booking-level Save Offline button (#163).
   Mirrors the .save-offline-btn state machine but lives once per page at
   the top of the documents section.
   ------------------------------------------------------------------------- */
.booking-save-offline-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: background-color 0.2s, color 0.2s;
}

.booking-save-offline-btn.is-saved {
  background-color: #1ee0ac;
  border-color: #1ee0ac;
  color: #fff;
}

.booking-save-offline-btn.is-saved:hover {
  background-color: #1ac795;
  border-color: #1ac795;
}

.booking-save-offline-btn.is-error {
  background-color: #e85347;
  border-color: #e85347;
  color: #fff;
}

.booking-save-offline-btn.is-error:hover {
  background-color: #d63b30;
  border-color: #d63b30;
}

.booking-save-offline-btn.is-loading .icon {
  animation: save-offline-spin 0.8s linear infinite;
}

/* Defense layer 3: hide the button on desktop viewports even if the server
   somehow emitted it (e.g. tablet UA but desktop-sized window). */
@media (min-width: 1367px) {
  .booking-save-offline-btn {
    display: none !important;
  }
}

/* Per-doc View button — narrow screens collapse to icon-only so the doc
   title stays readable. */
@media (max-width: 575.98px) {
  .view-doc-btn__label {
    display: none;
  }
}

/* DEVCUR-1710 — Center the label in Booking Engine departure CTAs.
   Dashlite renders `.btn` as `display: inline-flex; align-items: center`
   but leaves `justify-content` at its initial `normal` (flex-start). When a
   departure button is wider than its label (e.g. the "Book" button), the
   text hugs the left edge instead of centering. Scoped to
   `.btn-departure-select` (Book + Join Waitlist) so other CTAs such as the
   icon-led "Contact Us" button keep their existing alignment. */
.btn-departure-select {
  justify-content: center;
}