/* Portugal/Algarve Theme */
:root {
    --primary-ocean: #0077b6;
    --primary-deep: #023e8a;
    --secondary-sun: #f4a261;
    --secondary-warm: #e76f51;
    --accent-green: #2a9d8f;
    --bg-cream: #f8f9fa;
    --bg-light: #ffffff;
    --text-dark: #2d3436;
    --text-muted: #636e72;
    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
}

body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-cream);
    color: var(--text-dark);
}

/* Bootstrap's .container caps out well short of a typical desktop/laptop
   window (960/1140/1320px), leaving big unused side margins while the
   navbar's nav items + search box + user menu are still squeezed into
   that capped width -- widen the steps so there's real room to breathe. */
@media (min-width: 992px) {
    .container { max-width: 1100px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1320px; }
}
@media (min-width: 1400px) {
    .container { max-width: 1500px; }
}

/* Navigation */
.navbar {
    background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-ocean) 100%);
    box-shadow: var(--shadow-soft);
    padding: 1rem 0;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.5px;
    color: white !important;
}

.navbar .nav-link {
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 0.5rem 1rem !important;
    color: white !important;
    white-space: nowrap;
}

.navbar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* In-page tabs (e.g. Transactions / Tax) -- distinct from the navbar's
   white-on-transparent links above, which don't apply here. */
.nav-tabs {
    border-bottom-color: #dee2e6;
}

.nav-tabs .nav-link {
    font-weight: 500;
    color: var(--text-muted);
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 0.6rem 1.1rem;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-ocean);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--primary-ocean);
    background-color: transparent;
    border-color: transparent transparent var(--primary-ocean);
}

/* Illustrated icons from templates/partials/icon_sprite.html */
.app-icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.28em;
    flex-shrink: 0;
}

.navbar-toggler-icon {
    filter: invert(1);
}

.dropdown-menu {
    border: none;
    border-radius: 10px;
    box-shadow: var(--shadow-hover);
    padding: 0.5rem;
    background-color: white !important;
}

.dropdown-item {
    border-radius: 5px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    color: var(--text-dark) !important;
}

.dropdown-item:hover {
    background-color: var(--primary-ocean) !important;
    color: white !important;
}

/* White chip behind the icon so blue artwork stays visible on the blue
   hover/active background. A ring rather than padding: no layout shift. */
.dropdown-item:hover .app-icon,
.dropdown-item.active .app-icon {
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 0 0 3px white;
}

/* Hero / Jumbotron */
.jumbotron {
    background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-ocean) 50%, var(--accent-green) 100%);
    color: white;
    border-radius: 15px;
    padding: 3rem 2rem;
    box-shadow: var(--shadow-soft);
    margin-bottom: 2rem;
}

.jumbotron h1 {
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.jumbotron .lead {
    font-weight: 400;
    opacity: 0.95;
}

/* Buttons */
.btn {
    border-radius: 8px;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-ocean) 0%, var(--primary-deep) 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-ocean) 100%);
    color: white;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary-sun) 0%, var(--secondary-warm) 100%);
    color: white;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    background: linear-gradient(135deg, var(--secondary-warm) 0%, var(--secondary-sun) 100%);
    color: white;
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    color: white;
}

.btn-success {
    background: linear-gradient(135deg, var(--accent-green), #1e7e75);
    color: white;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    color: white;
}

.btn-outline-light {
    border: 2px solid rgba(255,255,255,0.7);
    color: white;
}

.btn-outline-light:hover {
    background-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

/* Tables */
.table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin-bottom: 2rem;
}

.table thead {
    background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-ocean) 100%);
    color: white;
}

.table thead th {
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    padding: 1rem;
}

.table tbody tr {
    transition: all 0.3s ease;
    cursor: pointer;
}

.table tbody tr:hover {
    background-color: rgba(0, 119, 182, 0.06);
}

.table tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-color: #f0f0f0;
}

.table-active {
    background-color: rgba(42, 157, 143, 0.12) !important;
    border-left: 4px solid var(--accent-green);
}

/* Form Controls */
.form-control, .form-select {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    padding: 0.75rem 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Room on the right for the dropdown arrow, so a long option doesn't run under it. */
.form-select {
    padding-right: 2.5rem;
}

.form-select-sm {
    padding: 0.45rem 2.25rem 0.45rem 0.75rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-ocean);
    box-shadow: 0 0 0 0.2rem rgba(0, 119, 182, 0.15);
    outline: none;
}

label {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
}

/* Search bar in nav */
.navbar .form-control {
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 8px;
}

.navbar .form-control:focus {
    background-color: white;
    box-shadow: none;
}

/* The search form is a flex sibling of the nav links and user menu with no
   width of its own, so under space pressure (more nav items than there
   used to be) it was the one that got crushed down to almost nothing
   instead of the row wrapping. Give it a floor so that never happens above
   the breakpoint where the navbar collapses into the hamburger menu. */
@media (min-width: 992px) {
    .navbar-search-form {
        flex-shrink: 0;
    }
    .navbar-search-input {
        min-width: 220px;
    }
}

/* Cards */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.card-header {
    background: linear-gradient(135deg, var(--primary-ocean) 0%, var(--primary-deep) 100%);
    color: white;
    font-weight: 600;
    border: none;
    padding: 1rem 1.25rem;
}

.card-body {
    padding: 1.5rem;
}

/* Dashboard stays card: current stay | next arrival */
.stay-panel {
    transition: background-color 0.2s ease;
}

.stay-panel:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.stay-col {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
    .stay-col {
        border-bottom: none;
        border-right: 1px solid rgba(0, 0, 0, 0.08);
    }
}

/* Actions checklist status (templates/bookings/actions_icon.html) */
.actions-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    flex-shrink: 0;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.actions-icon svg {
    width: 1.45rem;
    height: 1.45rem;
}

.actions-icon-done {
    background-color: #e1f5ee;
    box-shadow: inset 0 0 0 1px #9fe1cb;
}

.actions-icon-todo {
    background-color: #fff3d6;
    box-shadow: inset 0 0 0 1px #f7d079;
}

/* Neutral tile for icons that aren't a status (e.g. "has notes") */
.actions-icon-info {
    background-color: #eaf3fc;
    box-shadow: inset 0 0 0 1px #b9d6f2;
}

/* The tap-to-copy SEF link tile is a <button>; strip the button chrome */
button.sef-link-copy {
    padding: 0;
    border: 0;
    background: none;
    vertical-align: middle;
}

/* A button sitting beside the status icon, sized to match it */
.btn.btn-actions-size {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    line-height: 2.1rem;
    margin-left: 0.25rem;
    border-radius: 10px;
    vertical-align: middle;
}

.actions-link:hover .actions-icon {
    transform: translateY(-1px);
}

/* Badges */
.badge {
    padding: 0.45rem 0.85rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.78rem;
}

/* Source badges (booking/transaction source, e.g. "Airbnb", "TripAdvisor",
   "Booking Income") sit in table columns where rows are compared at a
   glance -- a fixed width keeps every pill in a column the same size
   instead of ballooning with the longest label, truncating the rare long
   one instead. */
.badge-source {
    display: inline-block;
    width: 6.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    vertical-align: middle;
}

/* A <button> wearing .badge (e.g. the Actions checklist's clickable status
   pills) needs the native button chrome stripped so it matches a read-only
   <span class="badge"> exactly -- same shape, size and color either way. */
button.badge {
    border: none;
    cursor: pointer;
}

/* Alerts / Messages */
.alert {
    border: none;
    border-radius: 10px;
    font-weight: 500;
}

/* Utility */
.stricker {
    text-decoration: line-through;
    color: var(--text-muted);
}

.text-income {
    color: var(--accent-green);
    font-weight: 600;
}

.text-expense {
    color: var(--secondary-warm);
    font-weight: 600;
}

a {
    color: var(--primary-ocean);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-deep);
}

.page-wrapper {
    padding: 2rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .jumbotron { padding: 2rem 1rem; }
    .jumbotron h1 { font-size: 1.75rem; }
    .navbar-brand { font-size: 1.1rem; }
    .table { font-size: 0.85rem; }
    .table thead th, .table tbody td { padding: 0.6rem 0.4rem; }
    .btn { padding: 0.5rem 1rem; font-size: 0.9rem; }
}

@media (max-width: 576px) {
    .jumbotron h1 { font-size: 1.4rem; }
    .table { font-size: 0.75rem; }
    .btn { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
}

/* Booking detail Actions card: one tile per checklist item, with a status
   disc that fills green once the item is done. */
.actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.actions-row {
    gap: 0.85rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    background-color: #fafbfc;
    box-shadow: inset 0 0 0 1px #e9edf2;
    font-weight: 500;
}

.actions-row-done {
    background-color: #f3fbf7;
    box-shadow: inset 0 0 0 1px #cfeee0;
}

.actions-row-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid #f2b93a;
    background-color: #ffffff;
    color: transparent;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.actions-row-done .actions-row-status {
    border-color: #1d9e75;
    background-color: #1d9e75;
    color: #ffffff;
}

.actions-row-controls { justify-content: flex-end; }

.actions-row .badge.bg-success {
    background-color: #d9f2e6 !important;
    color: #0f6e56;
}

.actions-row button.badge {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.actions-row button.badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.actions-hint {
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px dashed #d5dbe3;
}

@media (max-width: 768px) {
    /* Each Actions row's label and its status were squeezed onto one line,
       wrapping the label into a narrow leftover strip. Wrap instead: disc
       and label on the first line, controls below, lined up with the label. */
    .actions-row { flex-wrap: wrap; row-gap: 0.5rem; }
    .actions-row > .flex-grow-1 { flex-basis: 0; min-width: 0; }
    .actions-row-controls {
        width: 100%;
        padding-left: 2.6rem;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* Bookings list, mobile only */
@media (max-width: 768px) {
    /* Guest name/email column was taking up too much of a narrow screen --
       cap it and truncate with an ellipsis instead of squeezing every other
       column. */
    .booking-table .col-guest { max-width: 110px; }
    .booking-table td.col-guest strong,
    .booking-table td.col-guest small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* The Notes and SEF-link icon buttons are the main things a host taps
       on this page -- give them a real touch target instead of shrinking
       with everything else. */
    .booking-table td .btn-sm {
        min-width: 38px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.4rem;
        font-size: 1rem;
    }
}

/* Bookings list, mobile cards -- replaces the table entirely below the md
   breakpoint (see .d-md-none / .d-none.d-md-block in the template) so a
   booking never needs horizontal scrolling to read. */
.booking-card-mobile {
    background: var(--bg-light);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
}

.booking-card-mobile.booking-card-active {
    border-left: 4px solid var(--primary-ocean);
}

.booking-card-guest strong {
    font-size: 1.05rem;
}

.booking-card-dates {
    font-size: 0.85rem;
    color: var(--text-dark);
}

.booking-card-mobile .btn-sm {
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* Transactions list, mobile table -- a real <table> (date/name/in/out only;
   source, paid and actions are a tap away), fixed column widths + name
   truncation so it never needs horizontal scrolling, alternating row
   shading instead of the desktop table's plain white rows. */
.transaction-table-mobile {
    table-layout: fixed;
    font-size: 0.85rem;
}

.transaction-table-mobile th, .transaction-table-mobile td {
    padding: 0.65rem 0.5rem;
    vertical-align: middle;
}

.transaction-table-mobile tbody tr:nth-child(even) {
    background-color: var(--bg-cream);
}

.transaction-table-mobile td, .transaction-table-mobile tfoot td {
    font-variant-numeric: tabular-nums;
}

.transaction-table-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-table-mobile tfoot td {
    font-weight: 700;
    border-top: 1px solid #dee2e6;
}

/* The classic accounting double-rule above the grand total. */
.transaction-table-mobile tfoot tr.transaction-table-net-row td {
    border-top: 3px double var(--text-dark);
}

/* Booking Calendar -- continuous scroll: one <section class="calendar-month">
   per month, stacked and lazy-loaded as the visitor nears the top/bottom
   (see booking_calendar.html's extra_js block). */
/* The calendar is its own scroll pane, so its scrollbar moves the months
   without moving the page. overflow-anchor is off because loadPrev()
   restores the scroll position itself when it prepends a month. */
#calendar-scroll-root {
    height: 75vh;
    min-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
}

.calendar-month-heading {
    margin: 1rem 0 0.25rem;
    padding: 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.calendar-month:first-child .calendar-month-heading {
    margin-top: 0.5rem;
}

.calendar-sentinel {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.calendar-loading-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid #eee;
    border-top-color: var(--primary-ocean);
    border-radius: 50%;
    animation: calendar-spin 0.8s linear infinite;
}

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

.calendar-weekday-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid #eee;
    /* Sticks to the top of the calendar pane as its month scrolls past, then
       hands off to the next month's own header -- same effect as a grouped
       list's section headers, with no extra JS needed. */
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bg-light);
}

.calendar-weekday {
    padding: 0.6rem 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: center;
}

.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: min-content;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-bottom: 0.5rem;
}

.calendar-day {
    grid-row: 1;
    min-height: 70px;
    padding: 0.4rem 0.5rem;
    border-right: 1px solid #eee;
}

.calendar-day:last-child {
    border-right: none;
}

.calendar-day.other-month {
    background-color: var(--bg-cream);
    opacity: 0.5;
}

.calendar-day.today .calendar-day-number {
    background-color: var(--primary-ocean);
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
}

.calendar-day-number {
    font-size: 0.85rem;
    color: var(--text-dark);
}

.calendar-bar {
    grid-row: 2;
    display: block;
    margin: 0 2px 3px;
    padding: 0.3rem 0.5rem;
    background-color: var(--primary-ocean);
    color: white !important;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.calendar-bar:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.calendar-bar-past {
    background-color: var(--text-muted);
}

@media (max-width: 768px) {
    .calendar-weekday {
        font-size: 0.65rem;
        padding: 0.4rem 0.2rem;
    }
    .calendar-day {
        min-height: 50px;
        padding: 0.25rem;
    }
    .calendar-bar {
        font-size: 0.65rem;
        padding: 0.2rem 0.3rem;
    }
}

/* Documents list: action button labels only show in the stacked mobile view */
.file-table .file-action-text { display: none; }

@media (max-width: 768px) {
    /* The six-column documents table forced a horizontal scrollbar on
       phones. Stack each row into its own card instead: name on top,
       details as label/value lines, action buttons full-width underneath. */
    .file-table thead { display: none; }
    .file-table, .file-table tbody, .file-table tr, .file-table td { display: block; }
    .file-table { width: 100%; }
    .file-table tbody tr {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0.75rem 0.5rem;
    }
    .file-table tbody tr:last-child { border-bottom: none; }
    .file-table tbody td {
        border: none;
        padding: 0.15rem 0;
        font-size: 0.9rem;
        overflow-wrap: anywhere;
    }
    .file-table td.file-name { font-weight: 600; padding-bottom: 0.4rem; }
    .file-table td[data-label] { display: flex; justify-content: space-between; gap: 1rem; }
    .file-table td[data-label]::before {
        content: attr(data-label);
        color: #6c757d;
        flex-shrink: 0;
    }
    .file-table td.file-actions { display: flex; gap: 0.5rem; padding-top: 0.6rem; }
    .file-table td.file-actions .btn { flex: 1; }
    .file-table .file-action-text { display: inline; }
    .table-responsive:has(> .file-table) { overflow-x: visible; }
}