/*
 * lakeview.css
 * Lakeview-specific overrides on top of the Monster Admin Bootstrap 4 theme.
 * Business colors are injected as CSS custom properties from the Blade head partial.
 */

.gap-1 {
    gap: .25rem;
}
.gap-2 {
    gap: .5rem;
}
.gap-3 {
    gap: .75rem;
}

.form-label {
    margin-bottom: .25rem !important;
}

.profile-avatar {
    object-fit: cover;
    height: 40px;
    width: 40px;
}

/* ── Status badges ── */
.badge-subscribed {
    background-color: #39da8a;
    color: #fff;
}
.badge-unsubscribed {
    background-color: #ff5b5c;
    color: #fff;
}

/* ── Form validation highlight ── */
input.err,
select.err,
textarea.err {
    border-color: #ff5b5c !important;
}

/* ── Membership card preview ── */
.membership-card-preview {
    border-radius: 12px;
    padding: 1.5rem;
    color: #fff;
    min-height: 180px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--lk-primary, #5f76e8), #699af9);
}

/* ── QR code container ── */
.qr-container {
    background: #fff;
    padding: 8px;
    display: inline-block;
    border-radius: 4px;
}

/* ── Card depth & lift ── */
.card {
    box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 0 1px rgba(0,0,0,.04);
    transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-1px); }
.card:has(.form-control):hover, .card:has(table):hover { transform: none; }

/* ── Tables ── */
.table > thead > tr > th {
    background: rgba(0,0,0,.025);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    border-bottom: 2px solid rgba(0,0,0,.07);
    padding: .85rem 1rem;
}
.table > tbody > tr > td { padding: .85rem 1rem; vertical-align: middle; border-color: rgba(0,0,0,.04); }
.table-hover > tbody > tr:hover > td { background: rgba(var(--lk-primary-rgb, 95,118,232),.04); }
.card > .table-responsive > .table > thead > tr:first-child > th { border-top: none; }

/* ── Buttons ── */
.btn { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease, filter .15s ease; }
.btn:active { transform: scale(.97); }

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--lk-primary) !important;
    border-color:     var(--lk-primary) !important;
    color:            var(--lk-primary-text, #fff) !important;
    box-shadow: 0 3px 8px rgba(var(--lk-primary-rgb, 95,118,232),.30);
}
.btn-primary:hover {
    background-color: var(--lk-primary) !important;
    border-color:     var(--lk-primary) !important;
    color:            var(--lk-primary-text, #fff) !important;
    box-shadow: 0 5px 14px rgba(var(--lk-primary-rgb, 95,118,232),.40);
    filter: brightness(0.9);
}

.btn-outline-primary {
    color:            var(--lk-primary) !important;
    border-color:     var(--lk-primary) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--lk-primary) !important;
    border-color:     var(--lk-primary) !important;
    color:            var(--lk-primary-text, #fff) !important;
    filter: none;
}

/* ── Primary utility overrides ── */
.bg-primary    { background-color: var(--lk-primary) !important; }
.text-primary  { color: var(--lk-primary) !important; }

/* ── Topbar text & alignment ── */
.topbar,
.topbar .nav-link,
.topbar .navbar-brand,
.topbar .text-dark {
    color: var(--lk-navbar-text, #56616b) !important;
}
.topbar .navbar-nav {
    align-items: center;
}

/* ── Page background ── */
body,
.page-wrapper {
    background-color: var(--lk-page-bg, #f5f6fa) !important;
}

/* ── Sidebar text ── */
.left-sidebar .sidebar-link,
.left-sidebar .nav-small-cap,
.left-sidebar .sidebar-link i {
    color: var(--lk-sidebar-text, #56616b) !important;
}

/* ── Sidebar active item ── */
.sidebar-nav #sidebarnav .sidebar-item.selected > .sidebar-link {
    background: var(--lk-primary) !important;
    box-shadow: 0 7px 12px 0 rgba(var(--lk-primary-rgb, 95,118,232), 0.21) !important;
}
.sidebar-nav #sidebarnav .sidebar-item.selected > .sidebar-link i {
    color: #fff !important;
}
.sidebar-item > .sidebar-link:hover:not(.selected) {
    background: rgba(0,0,0,.04);
    transition: background .15s ease;
}

/* ── Form inputs ── */
.form-control:focus,
.form-select:focus {
    border-color: var(--lk-primary, #5f76e8);
    box-shadow: 0 0 0 3px rgba(var(--lk-primary-rgb, 95,118,232),.15);
}

/* ── Sidebar group dividers ── */
.list-divider {
    border-top: 1px solid rgba(0,0,0,.07);
    margin: 6px 0;
    padding: 0;
}

/* ── Nav small cap (group labels) ── */
.nav-small-cap {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #99abb4;
    padding: .75rem 1.25rem .25rem;
    pointer-events: none;
}

/* ── Three-dot action dropdown ── */
.more-btn {
    background: none;
    border: 1px solid transparent;
    padding: 3px 7px;
    cursor: pointer;
    border-radius: 4px;
    color: #6c757d;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.more-btn:hover { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.1); color: #343a40; }
.more-btn svg { width: 16px; height: 16px; display: block; }

/* Allow an open dropdown to escape the overflow container, without breaking horizontal scroll */
.card .table-responsive:has(.dropdown-menu.show) { overflow: visible; }

/* Mini-sidebar: hide section labels when collapsed (list-divider already provides the separator) */
#main-wrapper.mini-sidebar .left-sidebar:not(:hover) .nav-small-cap { display: none !important; }

/* Member product cards — 20rem default, 18rem on tablet */
.lk-product-card { width: 20rem; max-width: 100%; }
@media (max-width: 1169px) and (min-width: 576px) {
    .lk-product-card { width: 18rem; }
    .card .table-responsive:has(.dropdown-menu.show) { overflow: unset; }
}

/* DataTables wrapper padding */
.dataTables_wrapper { padding: 1rem !important; }

/* Hide PWA install card in collapsed mini-sidebar (still visible when hovered) */
#main-wrapper.mini-sidebar .left-sidebar:not(:hover) #pwaInstallSidebarItem,
#main-wrapper.mini-sidebar .left-sidebar:not(:hover) #pwaInstallDivider { display: none !important; }