/* SAAS LAYOUT OVERRIDES */
html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden !important;
    height: 100vh;
    width: 100%;
    background: var(--bg-body);
}

/* APP SHELL */
#app-shell,
#vp-app-shell {
    display: none;
    /* Default Hidden to prevent flicker */
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: #f1f5f9;
    font-family: 'Inter', sans-serif;
}

/* DEFAULT STATE - PREVENT FLICKER */
#login-screen {
    display: none;
    /* Hide until we know no user */
}

#loader-overlay {
    display: flex;
    /* Show by default */
}

/* SIDEBAR NAV */
#main-nav,
#vp-main-nav {
    width: 260px;
    background: #1a1a1a;
    color: #ecf0f1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #333;
    flex-shrink: 0;
    z-index: 1000;
    transition: transform 0.3s ease;
}

/* MOBILE RESPONSIVE SIDEBAR */
#mobile-menu-btn,
#vp-mobile-menu-btn {
    display: none;
}

#mobile-overlay,
#vp-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    backdrop-filter: blur(2px);
}

@media (max-width: 1024px) {

    #main-nav,
    #vp-main-nav {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        bottom: 0;
        height: auto !important;
        /* Allow top/bottom anchors to define height */
        transform: translateX(-100%);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
        width: 80%;
        max-width: 300px;
        z-index: 2000 !important;
    }

    #main-nav.mobile-active,
    #vp-main-nav.mobile-active,
    #main-nav.open {
        transform: translateX(0);
    }

    #mobile-overlay.active,
    #vp-mobile-overlay.active,
    #sidebar-overlay.open {
        display: block;
    }

    #mobile-menu-btn,
    #vp-mobile-menu-btn {
        display: none !important;
        /* Default HIDDEN */
        align-items: center;
        justify-content: center;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 8px;
        cursor: pointer;
        color: #1e293b;
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        left: auto !important;
        z-index: 99999 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Show Admin Button */
    body.role-admin #mobile-menu-btn {
        display: flex !important;
    }

    /* Show Visitor Button */
    body.role-visitor #vp-mobile-menu-btn {
        display: flex !important;
    }
}

.nav-brand {
    padding: 20px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-menu {
    flex: 1;
    padding: 20px 10px;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 5px;
    border-radius: 8px;
    cursor: pointer;
    color: #94a3b8;
    transition: all 0.2s;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
}

.nav-item:hover {
    background: #2d2d2d;
    color: white;
}

.nav-item.active {
    background: #333333;
    color: white;
}

.nav-item svg {
    margin-right: 12px;
    width: 20px;
    height: 20px;
}

.nav-footer {
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid #333;
    flex-shrink: 0;
    /* Never squash footer */
}

@media (max-width: 1024px) {
    .nav-footer {
        padding-bottom: calc(40px + env(safe-area-inset-bottom));
        /* Lift higher on mobile */
    }
}

/* MAIN CONTENT AREA */
#main-area,
#vp-main-area {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #f1f5f9;
}

/* VIEWS */
.app-view {
    display: none;
    height: 100%;
    overflow-y: auto;
    animation: fadein 0.3s;
}

.app-view.active {
    display: block;
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* VIEW: POINTS (POINT MANAGER) */
/* Reusing Old Layout Logic but nested */
#view-kiosks {
    display: none;
    height: 100%;
}

#view-kiosks.active {
    display: flex;
}

/* VIEW: VISITORS (Sticky Layout) */
#view-visitors {
    display: none;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
}

#view-visitors.active {
    display: flex;
}

/* VIEW: CONFIGURATION */
#view-configuration {
    display: none;
    height: 100%;
}

#view-configuration.active {
    display: flex;
}

/* Config Sidebar Items */
.config-nav-item {
    padding: 12px 20px;
    cursor: pointer;
    font-weight: 500;
    color: #64748b;
    /* Default Text */
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    margin-bottom: 2px;
}

.config-nav-item:hover {
    color: #1e293b;
    background: #f1f5f9;
}

.config-nav-item.active {
    background: #e2e8f0;
    /* Light Grey Active */
    color: #1a1a1a;
    /* Dark Text */
    font-weight: 600;
}

/* This view is a flex container itself */

.kiosk-sidebar {
    width: 320px;
    background: white;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
}

.kiosk-main {
    flex: 1;
    /* overflow-y: auto; REMOVING this from parent to let children handle it if needed */
    background: #f8fafc;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Prevent spillover */
}

/* OLD STYLES RE-MAP */
.list-search-box {
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.list-items {
    flex: 1;
    overflow-y: auto;
}

/* UTILS */
.page-header {
    padding: 30px 40px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title {
    font-size: 1.8rem;
    font-family: 'Playfair Display', serif;
    margin: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

th {
    text-align: left;
    padding: 15px;
    background: #f8fafc;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

/* MOBILE UI */
/* Top App Bar */
#mobile-app-bar {
    display: none;
    /* Hidden on Desktop */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    z-index: 1000;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
}

#mobile-menu-btn {
    background: transparent;
    border: none;
    color: #1e293b;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
}

/* Mobile Modal Handling */
@media (max-width: 768px) {
    #mobile-app-bar {
        display: flex;
        /* Show on Mobile */
    }

    /* Push content down so it's not hidden behind header */
    #main-area {
        padding-top: 60px !important;
    }

    #modal-magic-manager,

    /* Force modals to start lower so they don't cover top buttons */
    #modal-magic-manager,
    #modal-share,
    #modal-overlay {
        padding-top: calc(80px + env(safe-area-inset-top)) !important;
        align-items: flex-start !important;
        /* Align to top (plus padding) instead of center */
    }
}

#sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    backdrop-filter: blur(2px);
}

/* BADGES */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-invest {
    background: #dcfce7;
    color: #166534;
}

/* Green */
.badge-buy {
    background: #dbeafe;
    color: #1e40af;
}

/* Blue */
.badge-partner {
    background: #fef9c3;
    color: #854d0e;
}

/* Yellow */
.badge-other {
    background: #f1f5f9;
    color: #475569;
}

/* Gray */

/* CUSTOM ALERT / CONFIRM MODAL */
#app-dialog-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

#app-dialog-box {
    background: white;
    width: 90%;
    max-width: 400px;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    animation: popIn 0.2s ease-out;
    text-align: center;
}

@keyframes popIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.dialog-btn {
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    margin: 0 5px;
}

.btn-confirm {
    background: #1a1a1a;
    color: white;
}

.btn-cancel {
    background: #e2e8f0;
    color: #475569;
}

@media (max-width: 768px) {


    #main-nav {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
        width: 260px;
        position: fixed;
        /* FIX: Take out of flow */
        height: 100vh;
        /* Full height */
        top: 0;
        left: 0;
    }

    #main-nav.open {
        transform: translateX(0);
    }

    #sidebar-overlay.open {
        display: block;
    }

    #main-area {
        margin-left: 0 !important;
        /* Force reset */
        width: 100%;
        padding: 0;
        padding-top: 0;
    }


    /* MASTER-DETAIL LOGIC (Mobile Only) */
    /* Default: Show Sidebar (List), Hide Main (Editor) */
    /* Default: Show Sidebar (List), Hide Main (Editor) */
    .kiosk-sidebar {
        width: 100% !important;
        display: flex !important;
        flex-direction: column;
        height: 100% !important;
        background: white;
        /* Ensure background matches */
    }

    .kiosk-main {
        display: none;
        /* Mobile default hidden */
        width: 100% !important;
        height: auto;
    }

    /* When Detail Active: Hide Sidebar, Show Main */
    #view-kiosks.mobile-detail-active .kiosk-sidebar {
        display: none !important;
    }

    #view-kiosks.mobile-detail-active .kiosk-main {
        display: block !important;
    }

    #view-kiosks.mobile-detail-active .kiosk-main #editor {
        display: flex !important;
    }

    /* CONFIGURATION VIEW MOBILE LOGIC */
    .config-main {
        display: none;
        width: 100% !important;
    }

    #view-configuration.mobile-detail-active .kiosk-sidebar {
        display: none !important;
    }

    #view-configuration.mobile-detail-active .config-main {
        display: block !important;
    }

    /* ZONES VIEW STACKING */
    /* ZONES VIEW STACKING */
    #view-zones>div {
        grid-template-columns: 1fr !important;
    }

    /* Fix Scrolling Cut-off */
    .list-items {
        padding-bottom: 120px !important;
    }
}

/* Mobile Back Button */
#mobile-back-btn,
#config-back-btn {
    display: none;
}

@media (max-width: 768px) {

    #mobile-back-btn,
    #config-back-btn {
        display: flex;
        margin-bottom: 15px;
        padding: 8px 12px;
        background: #e2e8f0;
        border-radius: 6px;
        border: none;
        font-weight: 600;
        color: #475569;
    }

    .editor-container {
        padding: 15px !important;
    }

    /* Fix Editor Header Alignment on Mobile */
    .editor-header {
        padding: 20px 0 0 0 !important;
    }

    .editor-scroll-area {
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .kiosk-list {
        padding-bottom: 120px !important;
    }

    /* Reposition Zoom Controls on Mobile */
    .zoom-controls {
        top: auto !important;
        bottom: 100px !important;
        right: 20px !important;
    }
}

/* Default Desktop Zoom Position */
.zoom-controls {
    top: 20px;
    right: 20px;
}


td {
    padding: 15px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

tr:last-child td {
    border-bottom: none;
}

/* CONFIGURATION GRID RESPONSIVE */
.config-grid-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.config-grid-layout.equal-cols {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) {

    .config-grid-layout,
    .config-grid-layout.equal-cols {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Optional: Make the form come first on mobile? 
               Usage: <div class="config-grid-layout" style="direction: rtl;"> to swap visual order if needed, 
               but default stacking (List top, Form bottom) is standard. */
}

/* EDITOR FORM GRID */
#standard-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

#standard-fields .full-width {
    grid-column: span 2;
    width: 100%;
}

/* Mobile responsive: stack on small screens */
@media (max-width: 600px) {
    #standard-fields {
        grid-template-columns: 1fr;
    }

    #standard-fields .full-width {
        grid-column: span 1;
    }
}

/* STYLE TOOLBAR */
.style-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    /* Fix for mobile */
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    padding: 8px 12px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#field-title-container input,
#standard-fields textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.style-font {
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.9rem;
}

.style-size {
    width: 50px;
    padding: 4px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.9rem;
}

.style-color {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.align-group {
    display: flex;
    gap: 2px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    overflow: hidden;
}

.btn-align {
    background: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 1rem;
    color: #64748b;
}

.btn-align:hover {
    background: #f1f5f9;
}

.btn-align.active {
    background: #1e293b;
    color: white;
}

.editor-divider {
    grid-column: span 2;
    width: 100%;
    border: 0;
    border-top: 1px solid #000000;
    margin: 10px 0;
    /* Reduced margin from 20px */
}

@media (max-width: 600px) {
    .editor-divider {
        grid-column: span 1;
    }
}

/* MAP PIN STYLES */
.map-pin {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #ef4444;
    border: 3px solid white;
    border-radius: 50% 50% 0 50%;
    transform: translate(-50%, -100%) rotate(45deg);
    /* Point tip to bottom center -> rotated 90deg CW */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    pointer-events: auto !important;
    z-index: 10;
}

.map-pin:hover {
    transform: translate(-50%, -100%) rotate(-45deg) scale(1.1);
    z-index: 11;
}

.map-pin.active {
    background: #1e293b;
    z-index: 12;
}

.pin-popover {
    position: absolute;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 220px;
    z-index: 20;
    pointer-events: auto !important;
    transform: translate(-50%, 10px);
    /* Center below pin */
}

.pin-popover::before {
    /* Triangle Arrow */
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent white transparent;
}

/* PIN EDITOR */
.pin-editor {
    position: absolute;
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    width: 260px;
    z-index: 100;
    display: none;
    /* Toggled via JS */
    flex-direction: column;
    gap: 12px;
    border: 1px solid #e2e8f0;
}

.pin-editor h4 {
    margin: 0 0 5px;
    font-size: 0.9rem;
    color: #1e293b;
}

.pin-editor textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    font-size: 0.9rem;
}

.color-group {
    display: flex;
    gap: 8px;
}

.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 0 1px #cbd5e1;
    transition: 0.2s;
}

.color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch.active {
    box-shadow: 0 0 0 2px #1e293b;
    transform: scale(1.1);
}

.icon-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.icon-btn {
    background: #f1f5f9;
    border: 1px solid transparent;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    font-size: 1.1rem;
}

.icon-btn:hover {
    background: #e2e8f0;
}

.icon-btn.active {
    background: #cbd5e1;
    border-color: #94a3b8;
}

/* VISITOR PORTAL MOBILE FIXES */
@media (max-width: 768px) {

    /* Force Root Container Constraints */
    #visitor-portal-root,
    #vp-app-shell,
    #vp-main-area {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-right: 0 !important;
    }

    /* Fix Table Overflow - This is the Critical Fix */
    #vp-log-table {
        min-width: 800px !important;
        width: 100% !important;
        /* Revert display:block to ensure proper table semantics and sticky header */
        display: table;
    }

    /* Mobile: Page-Level Scroll Strategy (No nested scroll) */
    .table-scroll-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        /* Keep horizontal scroll for columns */
        display: block !important;

        /* Remove fixed height constraints on mobile - let it grow */
        max-height: none !important;
        overflow-y: visible !important;

        /* Minimal padding since we drive the scroll via the page */
        padding-bottom: 0 !important;
    }

    /* Add massive page buffer to ensure ANY view can be scrolled up */
    .portal-wrapper,
    #vp-view-profile,
    #vp-view-dashboard,
    #vp-main-area>div {
        padding-bottom: 150px !important;
        box-sizing: border-box !important;
    }


    /* Wrap table logic helper */
    /* Note: Since we can't easily add a wrapper div via CSS only, 
       we ensure the EXISTING parent div is scrollable. 
       In visitor-portal.html, the table is inside <div style="max-height:500px; overflow-y:auto; overflow-x:auto;">
       We reinforce that style here. 
    */


    /* Target the parent of the table indirectly if possible, or assume inline style holds. 
       But let's be safe and target the likely structure if we can identify it. 
       The inline style in HTML should handle it: overflow-x:auto. 
       But we add a general rule for scrollable areas. */


    /* Ensure Grid doesn't bleed */
    .visitor-stats-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-right: 0 !important;
        gap: 16px !important;
    }

    .visitor-stats-grid .stat-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fix Badges sticking out */
    .badge {
        white-space: normal !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fix Filter Inputs Overflow */
    .log-filter-input,
    #vp-filter-interest {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Stack Profile Inputs on Mobile */
    .profile-details-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Desktop Defaults (Outside Media Query) */
.profile-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 24px;
}

/* Fix Input Box Model to prevent grid overflow/overlap */
.profile-details-grid input {
    box-sizing: border-box !important;
    width: 100% !important;
}