\/* Ensure the private areas show up */
#privateSecondaryNav:not(.d-none), 
#privateColumns:not(.d-none) {
    display: block !important;
}

/* Fix the layout of the 9 assistant buttons test */
.assistant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.brand-text {
    color: #b08a48 !important; /* Gold */
    font-weight: bold;
}

/* ==========================================================================
   NUCLEAR MOBILE HEADER FIX (The "Block Hammer" Method)
   Destroys Flexbox layout on mobile to force a hard vertical stack.
   ========================================================================== */

@media (max-width: 991px) {

    /* 1. THE PARENT CONTAINER: Stop Flexing, Start Stacking */
    /* display: block forces elements to act like paragraphs (one after another) */
    html body header nav.navbar .container {
        display: block !important;
        text-align: center !important;
        height: auto !important;
        padding-bottom: 10px !important;
    }

    /* 2. THE BRAND (Logo + Text): Force Full Width Block */
    html body header nav.navbar .navbar-brand {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 5px !important; /* Push buttons down */
        text-align: center !important;
    }

    /* Make sure the logo image and text sit nicely inside the block */
    html body header nav.navbar .navbar-brand > * {
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* 3. THE TEXT: Stack properly */
    html body header nav.navbar .brand-text {
        font-size: 1.1rem !important;
        white-space: normal !important;
    }

    /* 4. THE BUTTONS WRAPPER: Force Full Width Block below */
    html body header nav.navbar #mainNav,
    html body header nav.navbar #mainNav.navbar-collapse {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }

    /* 5. THE BUTTONS THEMSELVES: Center them */
    html body header nav.navbar #mainNav .navbar-nav {
        display: inline-flex !important; /* Keep buttons side-by-side inside the block */
        flex-direction: row !important;
        justify-content: center !important;
        width: auto !important;
        gap: 8px !important;
    }

    /* 6. SPACE SAVER: Hide text labels on very small screens */
    @media (max-width: 480px) {
        html body header nav.navbar .btn span:not(#credit-balance):not(.badge) {
            display: none !important;
        }
        html body header nav.navbar .btn {
            padding: 6px 12px !important;
        }
        html body header nav.navbar .btn i {
            margin: 0 !important;
            font-size: 1.2rem !important;
        }
    }
}
/* FORCE HIDE DISABLED TOOLS */
.user-disabled-tool {
    display: none !important;
}

/* ... (The code I gave you previously) ... */

.modal-xl-custom {
    height: 85vh;
    border-radius: 12px;
    overflow: hidden;
}

.iframe-full {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* =========================================
   GALLERY VIEW STYLES (REQUIRED FOR DISPLAY)
   ========================================= */
.gallery-view-container {
    height: 85vh;
    min-height: 800px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff; /* Ensure background is white */
}

.gallery-card-img {
    height: 250px; 
    object-fit: cover;
    width: 100%;
}

.dashed-border {
    border: 2px dashed #dee2e6;
}

/* === NEW: FIX GOOGLE SHEET ON MOBILE === */
@media (max-width: 768px) {
    /* Target the ratio box inside the Artist Sheet View.
       We override the 16x9 ratio to make it tall (125%) on phones.
    */
    #artistSheetView .ratio {
        --bs-aspect-ratio: 125%; /* Taller vertical rectangle */
    }
    
    /* Ensure the modal doesn't get cut off on very small screens */
    .modal-xl-custom {
        height: 90vh; /* slightly taller on mobile */
    }
}

/* =========================================
   GALLERY VIEW STYLES (CSP SAFE)
   ========================================= */
.gallery-view-container {
    height: 85vh;
    min-height: 800px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.gallery-card-img {
    height: 250px; 
    object-fit: cover;
}

/* =========================================
   INVENTORY MODAL & UPLOAD STYLES (BRAND GOLD)
   ========================================= */

/* 1. Force the Trigger Button to Brand Gold (overriding btn-success) */
#btnInventoryTrigger {
    background-color: #b08a48 !important;
    border-color: #b08a48 !important;
    color: #fff !important;
    border-radius: 12px !important;
}
#btnInventoryTrigger:hover {
    background-color: #9a773f !important;
    border-color: #9a773f !important;
    box-shadow: 0 4px 15px rgba(176, 138, 72, 0.25) !important;
}

/* 2. Modal Container - Brand Radius & Border */
#inventoryModal .modal-content {
    border: 1px solid #b08a48 !important;
    border-radius: 12px !important;
    overflow: hidden; /* Keeps the header inside the radius */
}

/* 3. Modal Header - Force Gold (overriding bg-dark) */
#inventoryModal .modal-header {
    background-color: #b08a48 !important; /* Brand Gold */
    color: #fff !important;
    border-bottom: 1px solid #9a773f !important;
}
#inventoryModal .btn-close-white {
    filter: brightness(0) invert(1); /* Ensures X is white */
    opacity: 0.8;
}

/* 4. The Upload Zone (Dashed Gold) */
.inventory-upload-zone {
    border: 2px dashed #b08a48 !important; /* Gold Dashed */
    border-radius: 12px !important;
    background-color: #fffdf8 !important; /* Slight off-white/warm tint */
    transition: all 0.2s ease;
    color: #b08a48 !important;
    min-height: 200px; /* Moved from inline style */
    cursor: pointer;   /* Moved from inline style */
}
.inventory-upload-zone:hover {
    background-color: rgba(176, 138, 72, 0.08) !important;
    border-color: #9a773f !important;
    cursor: pointer;
}
.inventory-upload-zone i {
    color: #b08a48 !important;
}

/* 5. Preview Image */
.inventory-preview-img {
    max-height: 250px;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #b08a48;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 6. Form Inputs & Labels inside the Modal */
#inventoryForm .form-control,
#inventoryForm .form-select {
    border: 1px solid #b08a48 !important;
    border-radius: 12px !important;
    padding: 0.6rem 0.75rem;
}
#inventoryForm .form-control:focus,
#inventoryForm .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(176, 138, 72, 0.25) !important;
}
#inventoryForm label {
    color: #000;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* 7. Footer Buttons */
#inventoryModal .modal-footer {
    border-top: 1px solid rgba(176, 138, 72, 0.2);
    background-color: #fffdf8;
}
#btnSaveInventory {
    background-color: #b08a48 !important;
    border-color: #b08a48 !important;
    border-radius: 12px !important;
    font-weight: 500;
    color: #fff !important;
}

/* =========================================
   PROMPT CAPTURE STYLES (CSP SAFE)
   ========================================= */
.pc-btn-gold {
    background: linear-gradient(45deg, #b08a48, #6d5221) !important;
    border: none !important;
    color: #fff !important;
}
.pc-btn-gold:hover {
    background: linear-gradient(45deg, #9a773f, #5a4218) !important;
}
.pc-gallery-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}
.pc-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e9ecef !important;
}
.pc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(176,138,72,.15) !important;
    border-color: #b08a48 !important;
}
.pc-tag {
    font-size: 0.65rem;
    background-color: #fffdf8;
    color: #b08a48;
    border: 1px solid rgba(176,138,72,0.3);
    padding: 2px 8px;
    border-radius: 12px;
    margin-right: 4px;
    margin-top: 4px;
    display: inline-block;
}
.pc-dashed-border {
    border: 2px dashed #dee2e6;
}
.pc-modal-border {
    border: 1px solid #b08a48 !important;
    border-radius: 12px !important;
}
.pc-upload-zone {
    border: 2px dashed #b08a48 !important;
    border-radius: 12px !important;
    background-color: #fffdf8 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pc-upload-zone:hover {
    background-color: rgba(176, 138, 72, 0.08) !important;
}
.pc-preview-img {
    max-height: 250px;
    border-radius: 8px;
    border: 1px solid #b08a48;
}
.pc-view-modal {
    height: 85vh;
    border-radius: 12px;
}
.pc-view-img-container {
    min-height: 300px;
}
.pc-view-img {
    max-height: 600px;
    width: 100%;
}
.pc-prompt-box {
    white-space: pre-wrap; 
    font-size: 0.9rem; 
    max-height: 300px; 
    overflow-y: auto;
}

/* =========================================
   GALLERY VIEW STYLES (NO INLINE JS)
   ========================================= */
.pc-btn-gold {
    background: linear-gradient(45deg, #b08a48, #6d5221) !important;
    border: none !important;
}
.pc-btn-gold:hover {
    background: linear-gradient(45deg, #9a773f, #5a4218) !important;
    color: #fff !important;
}
.pc-gallery-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}
.pc-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e9ecef !important;
}
.pc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(176,138,72,.15) !important;
    border-color: #b08a48 !important;
}
.pc-tag {
    font-size: 0.65rem;
    background-color: #fffdf8;
    color: #b08a48;
    border: 1px solid rgba(176,138,72,0.3);
    padding: 2px 8px;
    border-radius: 12px;
    margin-right: 4px;
    margin-top: 4px;
    display: inline-block;
}
.pc-dashed-border {
    border: 2px dashed #dee2e6;
}
.pc-modal-border {
    border: 1px solid #b08a48 !important;
    border-radius: 12px !important;
}
.pc-upload-zone {
    border: 2px dashed #b08a48 !important;
    border-radius: 12px !important;
    background-color: #fffdf8 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pc-upload-zone:hover {
    background-color: rgba(176, 138, 72, 0.08) !important;
}
.pc-preview-img {
    max-height: 250px;
    border-radius: 8px;
    border: 1px solid #b08a48;
}
.pc-view-modal {
    height: 85vh;
    border-radius: 12px;
}
.pc-view-img-container {
    min-height: 300px;
}
.pc-view-img {
    max-height: 600px;
    width: 100%;
}
.pc-prompt-box {
    white-space: pre-wrap; 
    font-size: 0.9rem; 
    max-height: 300px; 
    overflow-y: auto;
}

/* =========================================
   GALLERY VIEW STYLES (NO INLINE JS)
   ========================================= */
.gallery-view-container {
    height: 85vh;
    min-height: 800px;
    position: relative;
}

.gallery-card-img {
    height: 250px; 
    object-fit: cover;
}

.gallery-grid-wrapper {
    flex: 1 1 auto;
}

/* =========================================
   PERSONA STUDIO STYLES (CSP SAFE)
   ========================================= */
.ps-text-gold {
    color: #b08a48 !important;
}
.ps-border-gold {
    border: 2px solid #b08a48 !important;
}
.ps-btn-outline-gold {
    border-color: #b08a48 !important;
    color: #b08a48 !important;
}
.ps-btn-outline-gold:hover {
    background-color: #b08a48 !important;
    color: #fff !important;
}
.ps-cursor-pointer {
    cursor: pointer !important;
}
.ps-btn-gold-gradient {
    background: linear-gradient(45deg, #b08a48, #6d5221) !important;
    color: #fff !important;
    border: none !important;
}
.ps-btn-gold-gradient:hover:not(:disabled) {
    background: linear-gradient(45deg, #9a773f, #5a4218) !important;
}
.ps-thumb-img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    border-color: #b08a48 !important;
}

/* =========================================
   NO-CLICK AUTHORITY STYLES (CSP SAFE)
   ========================================= */
.nc-proof-thumb-wrapper {
    width: 60px;
    height: 60px;
}
.nc-proof-thumb-img {
    object-fit: cover;
}
.nc-proof-thumb-icon {
    bottom: -5px;
    right: -5px;
    background: white;
    border-radius: 50%;
}