html, body {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Sidebar Navigation - MAMIX Theme Style */
.sidebar-item {
    position: relative;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    color: #5a6a85;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border-radius: 7px;
    margin: 3px 15px;
    font-size: 15px;
    font-weight: 400;
    position: relative;
    border-left: 3px solid transparent; /* Reserve space for border */
}

.sidebar-link:hover {
    color: #5d87ff;
    background-color: rgba(93, 135, 255, 0.05);
}

/* Active state - with flush left border */
.sidebar-link.active,
#sidebarnav .sidebar-link.active,
.sidebar-nav .sidebar-link.active {
    color: #5d87ff !important;
    background-color: rgba(93, 135, 255, 0.1) !important;
    font-weight: 500 !important;
    border-left: 3px solid #5d87ff !important;
    border-left-color: #5d87ff !important;
    margin-left: 0 !important;
    margin-right: 15px !important;
    padding-left: 15px !important;
    border-radius: 0 7px 7px 0 !important;
}

.sidebar-item.selected > .sidebar-link,
#sidebarnav .sidebar-item.selected > .sidebar-link {
    color: #5d87ff !important;
    background-color: rgba(93, 135, 255, 0.1) !important;
    font-weight: 500 !important;
    border-left: 3px solid #5d87ff !important;
    border-left-color: #5d87ff !important;
    margin-left: 0 !important;
    margin-right: 15px !important;
    padding-left: 15px !important;
    border-radius: 0 7px 7px 0 !important;
}

.sidebar-link > span {
    display: flex;
    align-items: center;
    width: 100%;
}

.sidebar-link i {
    font-size: 20px;
    line-height: 1;
}

/* Collapsible Arrow Icon - Using Bootstrap Icons */
.sidebar-link.has-arrow::after {
    content: '\f285'; /* bi-chevron-down - correct Unicode */
    font-family: 'bootstrap-icons' !important;
    margin-left: auto;
    font-size: 14px;
    font-weight: 900;
    transition: transform 0.2s ease-in-out;
    color: #5a6a85;
    display: inline-block;
    speak: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sidebar-link.has-arrow[aria-expanded="true"]::after {
    transform: rotate(-180deg);
}

.sidebar-link.has-arrow:hover::after {
    color: #5d87ff;
}

/* Submenu Styles - MAMIX Pattern */
.collapse.first-level {
    background-color: transparent;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    margin-left: 33px;
    padding-left: 0;
}

.collapse.first-level .sidebar-item {
    margin: 0;
}

.collapse.first-level .sidebar-link {
    padding: 8px 18px;
    font-size: 14px;
    margin: 2px 0 2px 15px;
    color: #5a6a85;
    font-weight: 400;
    border-left: 3px solid transparent;
}

.collapse.first-level .sidebar-link .round-16 {
    width: 8px;
    height: 8px;
    min-width: 8px;
}

.collapse.first-level .sidebar-link .round-16 i {
    font-size: 8px;
    color: #5a6a85;
}

.collapse.first-level .sidebar-link:hover {
    color: #5d87ff;
    background-color: rgba(93, 135, 255, 0.05);
}

.collapse.first-level .sidebar-link:hover .round-16 i {
    color: #5d87ff;
}

.collapse.first-level .sidebar-link.active,
#sidebarnav .collapse.first-level .sidebar-link.active {
    color: #5d87ff !important;
    background-color: rgba(93, 135, 255, 0.1) !important;
    border-left: 3px solid #5d87ff !important;
    border-left-color: #5d87ff !important;
    margin-left: 0 !important;
    margin-right: 15px !important;
    padding-left: 15px !important;
    border-radius: 0 7px 7px 0 !important;
}

.collapse.first-level .sidebar-link.active .round-16 i {
    color: #5d87ff !important;
}

/* Section Headers - MAMIX Style */
.nav-small-cap {
    display: flex;
    align-items: center;
    padding: 25px 20px 10px;
    color: #2a3547;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.7;
}

.nav-small-cap-icon {
    margin-right: 8px;
    font-size: 4px !important;
}

/* Smooth Collapse Animation */
.collapse {
    overflow: hidden;
    transition: height 0.3s ease;
}

.collapse:not(.show) {
    display: none;
}

.collapse.show {
    display: block;
}

/* Brand Logo Styling */
.brand-logo {
    padding: 20px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.brand-logo .logo-img {
    color: #2a3547;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.brand-logo .logo-img:hover {
    color: #5d87ff;
}

.brand-logo .ti-tent {
    color: #13deb9;
    font-size: 1.4rem;
}

/* Sidebar Scrollbar Styling */
.sidebar-nav {
    padding: 10px 0;
}

/* Mobile Sidebar Toggle */
.sidebartoggler {
    color: #5a6a85;
    transition: color 0.2s ease;
}

.sidebartoggler:hover {
    color: #5d87ff;
}

/* Setup Layout Styles - used for login and setup pages */
.setup-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.setup-header {
    padding: 1.5rem 2rem;
}

.setup-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
}

.setup-main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.setup-content {
    width: 100%;
    max-width: 600px;
}

.setup-footer {
    padding: 1rem 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

/* Login container styles */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

/* Dashboard Layout */
.page-wrapper {
    display: flex;
    min-height: 100vh;
}

.left-sidebar {
    width: 270px;
    background: #1a1a2e;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.brand-logo {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-logo a {
    color: white;
    text-decoration: none;
    font-size: 1.25rem;
}

.sidebar-nav {
    padding: 1rem 0;
}

#sidebarnav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-item {
    margin-bottom: 0.25rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-link span:first-child {
    font-size: 1.25rem;
    margin-right: 0.75rem;
}

.nav-small-cap {
    padding: 1rem 1.5rem 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
}

.body-wrapper {
    margin-left: 270px;
    width: calc(100% - 270px);
    min-height: 100vh;
    background: #f5f7fa;
}

.topbar {
    background: white;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e9edf5;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-overlay {
    display: none;
}

.campground-switcher-name {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.topbar .sidebartoggler {
    color: #1f2a3d;
    line-height: 1;
    min-width: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    padding: 0;
}

.topbar .sidebartoggler .hamburger-icon {
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 700;
}

.topbar .sidebartoggler:hover,
.topbar .sidebartoggler:focus {
    color: #5d87ff;
}

.navbar-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.topbar .navbar-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
}

.topbar .navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    color: #22324a;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.topbar .navbar-nav .nav-link:hover,
.topbar .navbar-nav .nav-link:focus {
    background: rgba(93, 135, 255, 0.08);
    color: #2f5fd0;
}

.topbar .navbar-nav .dropdown-toggle::after {
    margin-left: 0.35rem;
}

.topbar-actions {
    min-width: 0;
}

.topbar-user-name {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.container-fluid {
    padding: 1.5rem;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .left-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
    }

    .left-sidebar.show {
        transform: translateX(0);
    }

    .body-wrapper {
        margin-left: 0;
        width: 100%;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 999;
    }

    .sidebar-overlay.show {
        display: block;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .campground-switcher-name {
        max-width: 140px;
    }

    .topbar {
        padding: 0.75rem 1rem;
    }

    .topbar .navbar-nav .nav-link {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    .topbar-user-name {
        max-width: 150px;
    }
}

@media (max-width: 575.98px) {
    .campground-switcher-name {
        max-width: 92px;
    }

    .topbar-user-name {
        max-width: 110px;
    }
}

/* ==========================================================================
   THEME CONVENTIONS — added during design/theme review (Phase 0).
   These extend theme.css with the soft-tinted action button variants used
   by the THEME ecommerce_admin_* reference pages.
   ========================================================================== */

/* Soft-tinted button variants (paired with btn-icon for action columns). */
.btn-primary-light {
    background: rgba(93, 135, 255, 0.12);
    color: #5d87ff;
    border: none;
}

.btn-primary-light:hover,
.btn-primary-light:focus {
    background: rgba(93, 135, 255, 0.22);
    color: #2f5fd0;
}

.btn-info-light {
    background: rgba(73, 190, 255, 0.12);
    color: #49beff;
    border: none;
}

.btn-info-light:hover,
.btn-info-light:focus {
    background: rgba(73, 190, 255, 0.22);
    color: #1f8fd1;
}

.btn-warning-light {
    background: rgba(255, 174, 31, 0.14);
    color: #c97a00;
    border: none;
}

.btn-warning-light:hover,
.btn-warning-light:focus {
    background: rgba(255, 174, 31, 0.24);
    color: #8d5500;
}

.btn-danger-light {
    background: rgba(250, 137, 107, 0.14);
    color: #d85a3a;
    border: none;
}

.btn-danger-light:hover,
.btn-danger-light:focus {
    background: rgba(250, 137, 107, 0.24);
    color: #a33d22;
}

.btn-success-light:hover,
.btn-success-light:focus {
    background: rgba(19, 222, 185, 0.22);
    color: #0aa07f;
}

.btn-secondary-light:hover,
.btn-secondary-light:focus {
    background: rgba(108, 117, 125, 0.22);
    color: #495057;
}

/* Square icon button — used as `btn btn-icon btn-sm btn-{color}-light`. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 2rem;
    height: 2rem;
    line-height: 1;
}

.btn-icon.btn-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.95rem;
}

.btn-icon.btn-lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
}

.btn-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Page header: standardize title + breadcrumb block (THEME pattern). */
.page-header-breadcrumb .page-title {
    font-weight: 600;
    color: #2a3547;
    font-size: 1.125rem;
    margin: 0 0 0.25rem 0;
}

.page-header-breadcrumb .breadcrumb {
    font-size: 0.8125rem;
    margin: 0;
}

.page-header-breadcrumb .breadcrumb-item a {
    color: #5a6a85;
    text-decoration: none;
}

.page-header-breadcrumb .breadcrumb-item a:hover {
    color: #5d87ff;
}

.page-header-breadcrumb .breadcrumb-item.active {
    color: #2a3547;
    font-weight: 500;
}

/* Empty-state card content (icon + message + optional CTA). */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state .empty-state-icon {
    font-size: 3rem;
    color: #adb5bd;
    margin-bottom: 0.75rem;
    display: inline-flex;
}

.empty-state .empty-state-title {
    font-weight: 600;
    color: #2a3547;
    margin-bottom: 0.5rem;
}

.empty-state .empty-state-message {
    color: #6c757d;
    margin-bottom: 1.25rem;
}

/* List card header: title left, controls right, wraps gracefully. */
.list-card-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.list-card-header .list-card-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.list-card-header .list-card-search {
    width: auto;
    min-width: 16rem;
    flex: 0 1 22rem;
}

.list-card-header .list-card-search .input-group-text {
    background-color: var(--bs-body-bg, #fff);
    border-right: 0;
    color: var(--primary-color, #6c757d);
    padding-right: 0.4rem;
}

.list-card-header .list-card-search .form-control {
    border-left: 0;
    padding-left: 0.25rem;
    box-shadow: none;
}

.list-card-header .list-card-search:focus-within .input-group-text,
.list-card-header .list-card-search:focus-within .form-control {
    border-color: var(--primary-color, #845adf);
    box-shadow: 0 0 0 0.15rem rgba(132, 90, 223, 0.15);
}

/* ---------------------------------------------------------------------------
   Setup stepper — display-only, multi-page server-rendered flow indicator.
   Used by Setup/* and post-login Stripe/Campground views via
   _SetupStepper.cshtml.
   ------------------------------------------------------------------------ */
.setup-stepper {
    border-bottom: 0;
    gap: 0.25rem;
}

.setup-stepper .nav-item {
    flex: 1 1 0;
}

.setup-stepper .setup-step {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.65rem 0.75rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    cursor: default;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setup-stepper .setup-step.active {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    font-weight: 600;
}

.setup-stepper .setup-step.completed {
    border-color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), 0.08);
    color: var(--bs-success);
}

.setup-stepper .setup-step.upcoming {
    color: var(--bs-secondary-color);
}

.setup-stepper .setup-step-badge {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.setup-stepper .setup-step.upcoming .setup-step-badge {
    color: var(--bs-secondary-color);
}

.setup-stepper .setup-step-label {
    font-size: 0.95rem;
}

@media (max-width: 767.98px) {
    .setup-stepper {
        gap: 0.5rem;
    }

    .setup-stepper .setup-step {
        justify-content: flex-start !important;
    }

    .setup-stepper .setup-step-label {
        font-size: 0.9rem;
    }
}

/* Organization step card — widen for desktop legibility (current 600px feels
   cramped against the address sub-card). Mobile drops to fluid width. */
.setup-organization-card {
    width: 100%;
    max-width: 600px;
}

@media (min-width: 992px) {
    .setup-organization-card {
        max-width: 760px;
    }
}

@media (min-width: 1200px) {
    .setup-organization-card {
        max-width: 880px;
    }
}

/* ==========================================================================
   MOBILE CARD LIST — swipe-to-reveal action panel
   Used on list pages (Sites, etc.) to replace DataTables rows on phones.
   All structural classes live here so any list page can adopt the pattern
   without additional CSS.
   ========================================================================== */

/* Container: hidden by default; shown only at <768 px */
.mobile-card-list {
    display: none;
}

@media (max-width: 767.98px) {
    .mobile-card-list {
        display: block;
    }
}

/* Individual card item — clipping parent for the swipe reveal */
.mc-item {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg, #fff);
}

.mc-item:nth-child(even) {
    background: var(--bs-tertiary-bg, #f8f9fb);
}

/* Swipeable card body */
.mc-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    transition: transform 0.2s ease;
    will-change: transform;
}

/* Suppress transition while the finger is actively dragging */
.mc-item.dragging .mc-body {
    transition: none;
}

/* Headline row: name + swipe hint */
.mc-headline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mc-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bs-emphasis-color, #2a3547);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chevron hint visible until user has swiped once */
.mc-swipe-hint {
    color: #adb5bd;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

body.swipe-used .mc-swipe-hint {
    opacity: 0;
    pointer-events: none;
}

/* Metadata strip: badges + plain pills */
.mc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

/* Optional description row — word-wraps, server-side truncated */
.mc-desc {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.4;
    padding: 0.125rem 0;
    word-break: break-word;
}

/* Plain text pill for values like length */
.mc-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.55em;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--bs-secondary-bg, #f0f4ff);
    color: var(--bs-body-color, #2a3547);
    white-space: nowrap;
}

/* Swipe-reveal action panel — starts off-screen to the right */
.mc-actions {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.2s ease;
}

/* Suppress transition while actively dragging */
.mc-item.dragging .mc-actions {
    transition: none;
}

/* Swiped state: body slides left, actions slide in */
.mc-item.swiped .mc-actions {
    transform: translateX(0);
}

/* Tap-to-activate affordance: the card body is the primary tap target on mobile.
   Hover only fires on desktop pointer devices, but on Safari/iOS this is harmless. */
.mc-item .mc-body {
    cursor: pointer;
}
.mc-item:not(.swiped):not(.dragging) .mc-body:hover {
    background: var(--bs-tertiary-bg, #f8f9fb);
}
.mc-item:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}