/* Layout scaffolding */
.dashboard {
    display: flex;
    min-height: 100vh;
    background: #fff;
}

/* Main area sits to the right of the sidebar */
.dashboard-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* Content wrapper can stay as you had it */
.dashboard-content {
    display: flex;
    gap: 20px;
}

/* Mobile top bar (hidden on desktop) */
.mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #623cea;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.08); */
    display: none;
    align-items: center;
    padding: 0 12px;
    z-index: 1000;
}

    .mobile-topbar .brand {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        font-size: 16px;
        color: #fff;
    }

        .mobile-topbar .brand img {
            border: 2px solid #fff;
            height: 40px;
            width: 40px;
            border-radius: 50px;
        }
        .topbar-spacer {
            flex: 1 1 auto;
        }




.mobile-nav-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #c2b6ff;
    background: #fff;
    border-radius: 8px;
    padding: 8px 36px 8px 12px;
    font-size: 14px;
    line-height: 1.2;
}

.m-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-top: 4px;
    border-radius: 999px;
    background: #fff;
    color: #1e3766;
    font-weight: 700;
    text-decoration: none;
    margin-right: 8px;
}

    .m-cta:hover {
        filter: brightness(0.98);
    }

.menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.btn-width-full {
    width: 100% !important;
    display: flex;
    align-items: center;
}

/* ------ Overlay menu ------ */
    .mobile-menu {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.50); /* darker, crisper */
    backdrop-filter: blur(10px);
}

    .mobile-menu.open {
        display: block;
    }

/* ---- Sheet panel ---- */
.mobile-menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
/*    background: rgba(255,255,255,0.98);*/
    overflow-y: auto;
}

/* Header row inside sheet */
.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    height: 56px;
}

.menu-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
    color: #623cea;
}

    .menu-brand img {
        border: 2px solid #fff;
        height: 40px;
        width: 40px;
        border-radius: 50px;
    }

.menu-close {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 6px;
}

/* ---- Links list ---- */
.menu-links {
    margin-top: 30px;
    padding: 12px 40px 28px 0px;
    display: grid;
    gap: 10px;
}

/* menu item “pill” */
.menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 14px;
    text-decoration: none;
    color: #111827;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    transition: transform .08s ease, background .15s ease, border-color .15s ease;
}

    .menu-item:hover {
        background: #F1ECFF;
    }

    .menu-item:active {
        transform: translateY(1px);
    }

    /* skinny divider inside item label (optional) */
    .menu-item .subtle-divider {
        height: 1px;
        width: 36px;
        background: rgba(0,0,0,0.08);
        margin: 8px 0;
    }

    .menu-item.active {
        position: relative;
        font-weight: 600; 
        color: #623cea; 
        font-size: 35px;
    }
        .menu-item.active::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 8px; /* adjust for spacing under text */
            width: 100%;
            height: 3px; /* thickness of underline */
            background: #623cea; /* purple underline */
            border-radius: 0;
        }

    /* icon size normalization (if you add svgs later) */
    .menu-item svg {
        width: 18px;
        height: 18px;
        color: #4B5563;
    }

    /* Logout styled quieter */
    .menu-item.logout {
        background: #a085ff;
        color: #ffffff;
        border-radius: 8px;
        margin: 70px 0px 0px 40px;
        justify-content: center;
        padding: 18px;
        font-size: 15px;
    }

.mobile-action-top {
    padding-top: 6px;
    padding-bottom: 8px;
    display: none;
    justify-content: space-between;
    align-items: center;
}
    .mobile-action-top .btn-secondary {
        padding: 3px 8px 3px 5px;
        font-size: 10px;
        height: unset !important;
        border-radius: 4px;
        background-color: #e5dfff;
/*        border: 1px solid #b5a1ff;*/
        color: #623CEA;
        border-width: 0;
    }

.go-back-button-container {
    border-radius: 6px;
    border: 1px solid #d7cdff;
    padding: 3px 12px 3px 5px;
    width: fit-content;
    display: flex;
    align-items: center;
}

.go-back-button {
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.go-back-button-text {
    font-size: 10px;
    color: #d7cdff;
    margin-left: 5px;
    font-weight: 400;
}
.go-back-button svg {
    margin-top: 2px;
    color: #b5a1ff;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Breakpoint: Mobile */
@media (max-width: 768px) {
    .hide-item-mobile {
        display: none !important;
    }
    .sidebar {
        display: none;
    }
    .breadcrumb {
        font-size: 10px !important;
    }
        .breadcrumb ol {
            line-height: 10px !important;
        }
    .mobile-topbar {
        display: flex;
    }
    /* Make space for fixed mobile topbar so content isn’t hidden behind it */
    .dashboard {
        padding-top: 56px;
    }

    /* If your desktop layout expected a left margin, remove it on mobile */
    .dashboard-main {
        margin-left: 0;
    }

    .sidebar {
        display: none !important;
    }

    .quick-nav-view {
        display: none !important;
    }

    .dashboard .dashboard-main {
        margin-left: 0;
        padding-top: 5px;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 15px;
        min-height: 0 !important;
    }

    .mobile-menu .menu-links {
        display: grid !important;
    }
    .mobile-action-top {
        display: flex;
    }
    .qrcode-container{
        width:80% !important;
    }
        .qrcode-container img {
            max-width: 100% !important;
        }
    .btn-width-full {
        padding: 5px 2px 5px 15px !important;
        font-size: 12px !important;
        gap: 15px !important;
    }
}

    /* LOGIN SECTION-----------------------------------------------*/
.login-container .login-content {
    padding-inline: 0;
    height: 95vh;
}
.login-container .form-container {
    padding-inline: 15px;
}
.login-container .form-content {
    padding-inline: 0;
}

/*  Login Mobile */
@media (max-width: 768px) {
    .login-container .login-content {
        padding-inline: 0;
        height: 95vh;
    }

    .login-container .form-container {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .login-container .main-content {
        justify-content: center;
    }
    .login-container .form-footer {
        margin-top: 10px;
    }
    .login-container .form-group label {
        margin-bottom: 0;
    }
    .login-container .illustration-container {
        display: none;
    }
}

/* WORKSPACE SECTION ---------------------------------------------- */

.workspace-section {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
}
.workspace-grid {
    position: absolute;
    overflow: auto;
    width: 100%;
    height: 100%;
    padding: 20px;
}
.workspace-header {
    margin-bottom: var(--space-2);
    padding-bottom: 0; 
    padding-top: 0; 
}
.content-header {
    margin-bottom: 1rem;
}
.workspace-actions {
    border-color: #ffffff; /*Hide second border until other button is added to group*/
}
.dropdown-menu {
    right: calc(20% + .75rem);
    left: unset !important;
}

/*  Workspace Mobile */
@media (max-width: 768px) {
    .dashboard-header {
        display: none;
    }
    .dashboard-content {
        padding: 0 10px 0 10px;
    }
        .dashboard-content .content-header {
            margin-top: 5px;
            margin-bottom: 5px !important;
        }    
    .workspace-grid {
        grid-template-columns: repeat(auto-fill, 45%);
        justify-content: center;
        padding: 0;
    }
    .workspace-card {
         width: 100% !important; 
    }
    .workspace-section {
        --tw-border-opacity: 0;
    }
    .workspace-title {
        font-size: 25px;
        font-weight: 700;
        line-height: 1.25rem;
        color: #262e3d;
    }
    .workspace-header .btn-secondary span {
        white-space: nowrap;
        font-size: 11px;
    
    }
    .workspace-header {
/*        padding-bottom: 5px;*/
        padding-top: 5px;
/*        margin-left: 15px;*/
    }
        .workspace-header .workspace-header-content {
/*            margin-top: 10px;
            margin-bottom: 5px;*/
        }
    .content-header {
/*        margin-bottom: 1rem !important;*/
        margin-right: 10px;
        margin-left: 15px;
    }
    .workspace-actions .btn-secondary span {
        white-space: nowrap;
        font-size: 11px;
    }
    .workspace-actions .btn-secondary {
        height: unset !important;
        padding: 5px !important;
    }
    .workspace-header-content .workspace-actions .btn-secondary span {
        display: none;
    }
}


/* TEAM SECTION ---------------------------------------------- */
.team-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 0;
    flex-wrap: wrap;
}
.team-search-box {
    display: flex;
    border: 1px solid #d7cdff;
    align-items: center;
    background-color: #ffffff;
    padding-top: 5px;
    padding-bottom: 5px;
}

.team-filter-container {
    display: flex;
    flex-direction: column;
    margin-left: 30px;
}
.team-filter-label{
    font-size: 10px;
}
/*  Team Mobile */
@media (max-width: 768px) {
    .team-sort{
        display: none;
    }
    .team-header{
        display:none;
    }
    .team-filter-container{
        margin-left: 0 !important;
        width: 100%;
    }
    .team-filter-buttons {
        justify-content: space-between;
    }
    .team-filter-label {
        font-size: 10px;
    }
    .team-search-box {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }
    .team-toolbar {
        gap: 0.5rem;
    }
}

/* SETTING SECTION ---------------------------------------------- */
.no-border {
    --tw-border-opacity: 0 !important;
}
.setting-user-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 6%;
}
.setting-user-container {
    width:100%;
    height: 100%;
    padding-left: 16px;
    padding-right: 16px;

}
.setting-account-detail {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.account-detail-label {
    display: block;
    font-size: 12px;
    color: #374151;
    font-weight: 500;
}
.account-detail-input {
    padding: 1rem;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235);
    border-width: 1px;
    border-radius: 7px;
}

.subscription-plan-container {
    display: flex; 
    gap: 1rem;
}

.manage-billing-button {
    width: 32%;
}
/*  Setting Mobile */
@media (max-width: 768px) {
    .setting-account-tab {
        overflow: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .setting-user-tab {
        overflow: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: 0;
    }
    .setting-account-detail {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    .setting-user-container {
        padding-left: 0;
        padding-right: 0;
    }
    .account-detail-label {
        font-size: 10px;
        margin-bottom: 1px;
    }
    .account-detail-input {
        padding: 5px;
        width: 100% !important;
    }
    .subscription-plan-container {
        flex-direction: column;
        gap: 0.5rem;
    }
    .plan-item {
        width: 100% !important;
    }
    .manage-billing-button{
        width: 100% !important;
    }
    .left-padding {
        padding-left: 0px !important;
        gap: 10px !important;
    }
    .change-pwd-container {
        padding-left: 0 !important;
        padding-right:0 !important;
    }
    .submit-pwd-button {
        width: 100% !important;                                                                                                                                                 
    }

/*    .setting-user-initial {
        height: 5rem !important;
        width: 5rem !important;
        font-size: 2rem !important;
    }*/
    .setting-user-container-left {
        display: none !important;   
    }
}



/* TRANSFORMATION SECTION ---------------------------------------------- */
.transformation-page {
    container-type: inline-size;
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
}
.transformation-header-content {
    justify-content: space-between;
    align-items: center;
    display: flex;
}
.transformation-page .form-tabs {
    margin-bottom: 4px;
    margin-top: 5px;
}
.transformation-page .form-content {
    padding: 15px;
}
.workspace-header-left {
    flex-direction: row !important;
}
 .back-button {
    display: none;
    background: none;
    border: 1px solid #ebebeb;
    cursor: pointer;
    border-radius: 4px;
    padding-top: 2px;
}
 .back-button svg {
    color: #623CEA;
    transition: transform 0.2s ease, color 0.2s ease;
}
 .back-button:hover svg {
    transform: translateX(-3px);
    color: #4b2fc6;
}
.transformation-page .status-pill-container {
    display: flex;
}
.transformation-page-container {
    position: absolute;
    overflow: auto;
    width: 100%;
    height: 100%;
    /*    padding: 20px;*/
    border-width: 0 !important;
}
.transformation-page .workspace-section {
    border-width: 0 !important;
}
/*  Transformation Mobile */
@media (max-width: 768px) {
    .transformation-page .brandkit-visibility {
        display: none;
    }

    .breadcrumb {
        display: none;
    }

    .transformation-page .workspace-header {
        margin-left: 0;
        padding-bottom: 8px;
    }

    .transformation-page .form-tabs {
        margin-bottom: 1px;
        margin-top: 2px;
    }

    .transformation-page .tab-btn {
        font-size: 10px;
        font-weight: 500;
        line-height: 1.5px;
        padding: 12px 10px;
    }

    .back-button {
        display: inline;
    }   

    .workspace-title {
        align-items: flex-end !important;
        font-size: 15px !important;
    }

    .transformation-page .workspace-header-content {
        margin-top: 0 !important;
    }

    .transformation-hide-brandkit {
        display: none !important;
    }

    .transformation-hide-selection {
        display: none !important;
    }

    .transformation-page .content-summary-card {
        padding: 4px !important;
    }

    .transformation-assets-displaying .form-content {
        overflow: scroll !important;
        padding: 0 !important;
    }

    .transformation-assets-displaying .transformation-form {
        margin-top: 0 !important;
    }

    .transformation-assets-displaying .content-summary-panel {
        margin-top: 0px !important;
    }

    .transformation-assets-displaying .transformation-page-container {
        padding: 0px !important;
    }
}




/* EMBED MODAL SECTION ---------------------------------------------- */

.copy-embed-container {
    background-color: #fff;
    border-radius: 8px;
    max-width: 68rem;
    position: relative;
    padding: 24px;
    width: 95%;
}

/*  Embed Mobile */
@media (max-width: 768px) {
    .copy-embed-container {
        max-width: 68rem;
        height: 80%;
        overflow: hidden;
    }
    .copy-embed-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
        padding-bottom: 10px;
        
    }
    .copy-embed-header {
        position: fixed;
        padding-top: 10px;
        padding-bottom: 4px;
        z-index: 500;
        background-color: #fff;
        width: 94%;
        border-radius: 8px 8px 0 0;
        border-bottom: 1px solid #e5e7eb;
    }
    .embed-margin-top {
        margin-top: 130px !important;
    }
    .hide-qr-border {
        border: none !important;
    }
    .embed-right-padding {
        padding-right: 15px !important;
    }
}

/* MEDIABAR MODAL SECTION ---------------------------------------------- */
.mediabar-view-container {
    min-height: 100vh;
}
.mediabar-top-wrapper{
    margin-bottom: 24px;
}
.mediabar-bottom-wrapper {
    margin-bottom: 24px;
}
/*  Embed Mobile */
@media (max-width: 768px) {
    .mediabar-view-container .login-container {
        padding: 6px !important;
    }
    .mediabar-view-container .login-content {
       height: 98vh !important;
    }
    .mediabar-view-container .logo-container {
        margin-bottom: 10px;
        margin-top: 10px;
        margin-left: 10px;
    }
    .mediabar-view-container .main-content {
        height: 93% !important;
    }
    .mediabar-view-container .mediabar-preview-left-side {
        padding: 5px;
    }
    .mediabar-top-wrapper {
        margin-bottom: 0 !important;
    }
    .mediabar-bottom-wrapper {
        padding-top: 10px;
        padding-inline: 2px;
        margin-bottom: 5px !important;
    }
}


/* TRANSFORMATION SOURCE SECTION ---------------------------------------------- */
.source-upload-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-evenly;
}
.source-ocr-container {
    width: 30%;
/*    margin: 0px 40px;*/
}
.source-content-container {
    width: 50%;
}
.source-upload-image-container {
    border: 1px dashed #d7cdff;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px 0px 30px 0px;
}
.source-upload-image-url{
    width:100%;
}
    .source-upload-image-url .source-label {
        color: #989898;
        font-size: 12px;
        text-align: center;
    }
.source-upload-image-upload {
    margin-bottom: 40px;
}
    .source-upload-image-upload .source-text {
        color: #989898;
        font-size: 12px;
    }
.source-upload-image-input {
    border-radius: 8px;
    border-color: #e9eaed;
    font-size: 12px;
}
.source-upload-image-action {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.source-upload-image-result {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.btn-outline-secondary {
    border-radius: 8px;
    border: 1px solid #989898;
    padding: 8px 16px;
    color: #989898;
}
/*  source Mobile */
@media (max-width: 768px) {
    .source-upload-container {
        flex-direction: column-reverse !important;
        gap: 20px;
        justify-content: space-evenly;
    }
    .source-ocr-container {
        width: 100% !important;
    }
    .source-content-container {
        width: 100% !important;
    }
}