/* ===== Page title row & icon (Uploads home) ===== */



    .page-title h1 {
        font-size: 1.5rem;
    }
.page-title--two {
    display: flex;
    align-items: flex-start;
    background: #fff;
    background: rgba(6, 182, 212, 0.12);
    background-image: url("/images/svg/ix-header-security-grid.svg") !important;
    background-repeat: repeat !important;
    gap: 1.25rem;
    width: 100%;
}

/* Container to keep icon + title aligned */
.title-with-icon {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.title-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    opacity: 0.95;
}

/* Right cluster: working folder + Submit */
.page-title-right {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}




/* ===== Upload grid & cards ===== */
.upload-grid {
    position: relative;
    margin-top:10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 0.4rem;
}

.upload-card {
    background: #fff;
    border: 1px solid #D0DAE2;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    transition: box-shadow .2s ease, transform .08s ease;
    position: relative;
    z-index: 1;
}

    .upload-card.dropdown-active {
        z-index: 200;
    }

    .upload-card:focus-within {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
    }

    .upload-card:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        transform: translateY(-1px);
    }

/* Card header */
.card-head {
    padding: 12px 14px 8px 14px;
    border-bottom: 1px solid #E6EBEF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

    .card-head h2 {
        font-size: 1.05rem;
        margin-top: 8px;
        color: var(--ink);
        font-weight: 700;
    }

/* ===== Custom file dropdown in each card ===== */
.file-dropdown {
    position: relative;
    z-index: 50;
    margin-top: 8px;
}

.file-toggle {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: .35rem .7rem;
    color: var(--teal);
    display: flex;
    align-items: center;
    gap: .35rem;
    user-select: none;
    position: relative;
    padding-right: 1.4rem;
    background: rgba(6, 182, 212, 0.12);
    background-image: url("/images/svg/ix-header-security-grid.svg") !important;
    background-repeat: repeat !important;
}

.file-dropdown.open .file-toggle {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px var(--ring);
}

.file-toggle:focus,
.file-toggle:active {
    outline: none !important;
    box-shadow: none !important;
}

.file-toggle::after {
    content: "▾";
    position: absolute;
    right: .35rem;
    top: 47%;
    transform: translateY(-50%);
    font-size: 1.4em;
    opacity: .9;
    transition: transform .18s ease, opacity .18s ease;
}

.file-dropdown.open .file-toggle::after {
    content: "▴";
}

/* Badge with file count */
.count-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* width: 2px;
    height: 2px;
    min-width: 4px;
    */ padding: 0 5px 0 0px !important;
    border-radius: 4px !important;

    color: #028C9E !important;
    font-weight: 700;
    font-size: .82rem !important;
}

/* Dropdown popup */
.file-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    width: 320px;
    z-index: 9999 !important;
    overflow: visible;
    padding: 0;
    display: none;
}

.file-dropdown.open .file-pop {
    display: block;
}

/* Scrollable body */
.file-pop-body {
    max-height: 260px;
    overflow: auto;
    padding: .35rem;
}

/* Rows inside file popup */
.file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .4rem;
    white-space: nowrap;
    background: var(--row-bg);
    border-radius: 8px;
    margin: .2rem 0;
}

    .file-row .name {
        display: inline-block;
        max-width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
        cursor: default;
        user-select: text;
        color: inherit;
        text-decoration: none;
        font-size: .84rem;
    }




.delete-all-btn:hover {
    filter: brightness(0.95);
}

/* Remove button inside each row */
.file-row .remove {
    width: 18px; /* ideal size for a 32px circle */
    height: 18px;
}
.file-row .ix-modal-close-icon {
    width: 12px; /* ideal size for a 32px circle */
    height: 12px;
}

/* ===== Card body & drop area ===== */
.card-body {
    padding: 12px 14px;
    flex: 1 1 auto;
}

.drop-area {
    border: 2px dashed rgba(2,140,158,.80);
    border-radius: 12px;
    padding: 22px 12px;
    text-align: center;
    color: #007E8E;
    font-weight: 600;
    background: linear-gradient(180deg,#F1FAFB 0%,#FFFFFF 100%);
    user-select: none;
    cursor: pointer;
}

.dnd-zone.drag-over .drop-area {
    border-color: var(--orange);
    color: var(--orange);
    background: linear-gradient(180deg, rgba(247,150,70,0.06), transparent);
}

/* ===== Card footer + error state ===== */
.card-foot {
    padding: 8px 14px 12px 14px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: center;
    color: var(--muted);
    font-size: .9rem;
    min-height: 52px;
}

    .card-foot .policy {
        flex: 1 1 auto;
    }

    /* Error message content */
    .card-foot .err-msg {
        margin-left: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        width: 100%;
        text-align: center;
        color: var(--err-text);
    }

    .card-foot .err-label {
        font-weight: 700;
    }

    .card-foot .err-detail {
        font-weight: 400;
    }

    /* Error state styling */
    .card-foot.foot-error {
        background: var(--err-bg);
        border-top-color: rgba(158,28,28,0.25);
        color: var(--err-text);
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

        .card-foot.foot-error::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 4px;
            background: var(--err-text);
            opacity: 0.9;
        }

        .card-foot.foot-error .policy {
            display: none;
        }

@keyframes footFlash {
    0%,100% {
        opacity: 1;
    }

    25%,75% {
        opacity: .6;
    }

    50% {
        opacity: 1;
    }
}

.card-foot.flash3 {
    animation: footFlash .45s ease-in-out 3;
}

/* ===== Buttons used on Uploads page ===== */
.btn-teal {
    border: 1px solid #028C9E;
    color: #fff;
    background: #028C9E;
    border-radius: 999px;
    padding: .40rem 1rem;
    transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}

    .btn-teal:hover:not(:disabled) {
        background: #007E8E !important;
        border-color: #007E8E !important;
    }

    .btn-teal:disabled,
    button.btn-teal:disabled,
    .btn.btn-teal:disabled {
        background: #ECEFF1 !important;
        border-color: #CFD8DC !important;
        color: #7a838b !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
    }

        .btn-teal:hover:disabled,
        .btn-teal:disabled:hover {
            background: #ECEFF1 !important;
            border-color: #CFD8DC !important;
            color: #7a838b !important;
        }

/* Finish button (Submit) */
.finish-fab {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    height: auto !important;
    width: auto !important;
    letter-spacing: .2px;
    border: 1px solid transparent;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
    font-family: 'Cascadia Mono', monospace;
    text-decoration: none !important;
    color: #fff !important;
    margin-top: 1.25rem;
}

.finish-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.85rem; /* ↓ reduces height */
    line-height: 1; /* prevents text from inflating height */
    min-height: 34px; /* optional: consistent height */
    border-radius: 10px;
    font-size: .95rem;
    background: #ECEFF1;
    color: var(--ink);
    border-color: #CFD8DC;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    margin-top:30px;
}

    .finish-inline .finish-icon {
        width: 20px;
        height: 20px;
        margin-right: 0.45rem;
        display: inline-block;
        filter: brightness(1) saturate(1);
    }

.finish-inactive .finish-icon {
    filter: none;
}

.finish-active .finish-icon {
    filter: invert(1) brightness(200%);
}

/* Inactive state */
.finish-inactive {
    opacity: .85;
    cursor: not-allowed;
    pointer-events: none;
}

/* Active state */
.finish-active {
    background: #F79646;
    color: #ffffff;
    border: 1px solid #F79646;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(247, 150, 70, 0.35);
}

    .finish-active:hover {
        filter: brightness(0.96);
    }

    .finish-active:focus {
        outline: 2px solid rgba(247, 150, 70, 0.45);
        outline-offset: 2px;
    }

/* Hidden state */
.finish-hidden {
    display: none !important;
}

/* Bottom docking position for Submit when scrolling */
.finish-bottom-slot {
    margin-top: -10px;
    display: flex;
    justify-content: flex-end;
}

/* ===== Classic (fallback) input helpers ===== */
.classic-quiet {
    font-size: 0;
}

    .classic-quiet::file-selector-button {
        font-size: 1rem;
    }

.classic-filewrap {
    position: relative;
}

.classic-filename {
    position: absolute;
    top: 50%;
    left: 132px;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .95rem;
    color: #5b6b73 !important;
}



/* Centered client pill in navbar */
.navbar-client-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}

.client-account {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(55, 71, 79, 0.16);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    font-size: 0.9rem;
    color: var(--ink);
    white-space: nowrap;
}

.client-account-logo {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}

.client-account-name {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.client-account-link {
    margin-left: 0.25rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(2,140,158,0.45);
    background: rgba(2,140,158,0.06);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .client-account-link:hover {
        background: rgba(2,140,158,0.12);
        color: var(--teal);
        border-color: #028C9E;
        text-decoration: none;
    }

/* ===== Upload header controls: force 3 selectors side-by-side ===== */

/*.ix-upload-header-controls {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    margin-right: auto;*/ /* ← THIS is the key */
/*}*/

    /* keep each selector from shrinking into nonsense */
    /*.ix-upload-header-controls .working-folder-shell {
        flex: 0 0 auto;
        min-width: 170px;*/ /* adjust if you want wider */
        /*align-items: flex-start;
    }*/

/* =========================================
   Upload header controls — keep horizontal,
   shrink first, stack only when needed
   ========================================= */


/* =========================================================
   Upload header: custom dropdown menus (rows, not "chips")
   Scope: only the 3 header selectors that use data-header-select
   ========================================================= */

.working-folder-shell[data-header-select] {
    position: relative;
}

    /* The popover container */
    .working-folder-shell[data-header-select] .working-folder-pop {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0; /* same width as the toggle */
        min-width: 220px;
        background: #fff;
        border: 1px solid rgba(55, 71, 79, 0.22);
        border-radius: 10px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
        padding: 6px;
        z-index: 99999;
        /* clean dropdown list behavior */
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-height: 260px;
        overflow: auto;
    }

        /* Option rows */
        .working-folder-shell[data-header-select] .working-folder-pop .working-folder-pop-row {
            /* CRITICAL: make each option a full-width row */
            display: flex !important;
            width: 100% !important;
            flex: 0 0 auto !important;
            align-items: center;
            justify-content: space-between;
            text-align: left;
            white-space: nowrap;
            padding: 9px 10px;
            border: 1px solid transparent;
            border-radius: 8px;
            background: #ffffff;
            color: var(--ink, #37474F);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            user-select: none;
            /* remove any “button default” styling */
            appearance: none;
            -webkit-appearance: none;
            outline: none;
        }

            /* Hover / focus */
            .working-folder-shell[data-header-select] .working-folder-pop .working-folder-pop-row:hover {
                background: rgba(2, 140, 158, 0.08);
                border-color: rgba(2, 140, 158, 0.28);
            }

            .working-folder-shell[data-header-select] .working-folder-pop .working-folder-pop-row:focus-visible {
                box-shadow: 0 0 0 2px rgba(2, 140, 158, 0.25);
            }

            /* Optional: show a checkmark on the selected value (JS will add .is-selected) */
            .working-folder-shell[data-header-select] .working-folder-pop .working-folder-pop-row.is-selected {
                background: rgba(2, 140, 158, 0.12);
                border-color: rgba(2, 140, 158, 0.35);
            }

                .working-folder-shell[data-header-select] .working-folder-pop .working-folder-pop-row.is-selected::after {
                    content: "✓";
                    font-weight: 800;
                    color: var(--teal, #028C9E);
                    margin-left: 10px;
                }

        /* Optional: nicer scrollbars (Chrome/Edge/Safari) */
        .working-folder-shell[data-header-select] .working-folder-pop::-webkit-scrollbar {
            width: 8px;
        }

        .working-folder-shell[data-header-select] .working-folder-pop::-webkit-scrollbar-thumb {
            background: rgba(55, 71, 79, 0.25);
            border-radius: 10px;
        }
/* Default: never show popovers until JS opens */
.working-folder-pop,
.ix-meta-select-pop {
    display: none;
}

/* When open: show */
.working-folder-control.is-open .working-folder-pop,
.ix-meta-select.is-open .ix-meta-select-pop {
    display: block;
}



/* Track is contextual, not a folder */
.ws-modal-track {
    font-style: italic;
    opacity: 0.85;
}

.ix-upload-guidance {
    margin: 0.25rem 0 1.2rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #4b5f68;
    max-width: 820px;
}

/* ================================
   Uploads header: guidance + controls
   Make it: guidance (full width) then controls row
   ================================ */

.page-title.page-title--two {
    flex-direction: column; /* <-- key */
    align-items: stretch; /* <-- key */
    justify-content: flex-start; /* override base .page-title */
    gap: 0.85rem;
}

    /* Guidance should span the whole white container */
    .page-title.page-title--two .ix-upload-guidance {
        width: 100%;
        max-width: none; /* remove the 820px cap */
        margin: 0;
    }

    /* Controls row spans full width */
    .page-title.page-title--two .page-title-right {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between; /* controls left, submit right */
        gap: 1rem;
        margin-left: 0; /* <-- kill the auto-push */
    }

    /* Ensure the 3 dropdowns hug the LEFT */
    .page-title.page-title--two .ix-upload-header-controls {
        margin-right: 0; /* no need for auto here */
        justify-content: flex-start;
    }

    /* Keep Submit on the far right */
    .page-title.page-title--two #finish-btn {
        margin-left: auto;
    }



/* Disabled = visible but inert */
.finish-inactive {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    background: #ECEFF1;
    color: #7a838b !important;
    border-color: #CFD8DC;
}

    .finish-inactive .finish-icon {
        filter: grayscale(1) opacity(0.65);
    }

/* Enabled */
.finish-active {
    pointer-events: auto;
}


/* Footer note separator inside confirm modal */
.ws-modal-footer-note {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12); /* subtle divider */

    font-size: 0.85rem;
    line-height: 1.5;
    opacity: 0.85;
}


/* Card file dropdown popup – elevated */
.file-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 12px;
    /* STRONGER, layered shadow */
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.12);
    width: 320px;
    z-index: 9999 !important;
    padding: 0;
    display: none;
    /* subtle pop */
    transform: translateY(-2px);
}


/* =========================================================
   Dropdown header row (inside .file-pop)
   - Hidden unless JS adds: .file-pop-head.has-actions
   - Clear-all button is static (no floating)
   ========================================================= */

.file-pop-head {
    display: none; /* default hidden */
    padding: 0;
    border-bottom: none;
}

    .file-pop-head.has-actions {
        display: flex; /* visible only when needed */
        justify-content: flex-end;
        align-items: center;
        padding: 8px 10px 6px;
        border-bottom: 1px solid rgba(148,163,184,0.35);
        background: rgba(255,255,255,0.96);
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    /* =========================================================
   Clear all button (inside header)
   ========================================================= */

    .file-pop-head .delete-all-btn {
        /* ensure it NEVER floats */
        position: static !important;
        inset: auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
        /* hidden until JS adds .show */
        display: none;
        align-items: center;
        gap: 0.35rem;
        padding: 0.28rem 0.65rem;
        border-radius: 999px;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.2px;
        cursor: pointer;
        color: #9b1c1c;
        background: rgba(185, 28, 28, 0.08);
        border: 1px solid rgba(185, 28, 28, 0.28);
        box-shadow: 0 1px 2px rgba(16,24,40,.06);
    }

        .file-pop-head .delete-all-btn.show {
            display: inline-flex;
        }

        .file-pop-head .delete-all-btn:hover,
        .file-pop-head .delete-all-btn:focus-visible {
            background: rgba(185, 28, 28, 0.12);
            border-color: rgba(185, 28, 28, 0.40);
            outline: none;
        }






/* optional: on smaller screens, allow stacking */
@media (max-width: 900px) {
    .ix-upload-header-controls {
        flex-wrap: wrap;
    }
}


/* ===== Responsive for Uploads grid ===== */
@media (max-width: 780px) {
    .upload-grid {
        grid-template-columns: 1fr;
    }

    .page-title {
        gap: .6rem .6rem;
    }
}



/* =========================================
   FINAL FIX — Upload header selectors
   ========================================= */

/* Parent: selectors row + submit below */
.page-title.page-title--two .page-title-right {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.9rem;
    justify-items: start;
    margin-left: 0;
}

/* 3 selectors row */
.ix-upload-header-controls {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
    justify-content: stretch;
}

    /* CRITICAL: kill old width/flex rules on each selector block */
    .ix-upload-header-controls .working-folder-shell {
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        flex: none !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* CRITICAL: inner wrapper must not keep its own rigid width */
    .ix-upload-header-controls .working-folder-control {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Actual dropdown button */
    .ix-upload-header-controls .working-folder-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

/* Submit button below, left aligned */
.page-title.page-title--two #finish-btn {
    margin-left: 0 !important;
    margin-top: 0;
    min-width: 120px;
    min-height: 26px;
    padding: 0.3rem 1.4rem;
    justify-content: center;
    font-size: 1rem;
}

/* 2 columns when tighter */
@media (max-width: 900px) {
    .ix-upload-header-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 1 column on small screens */
@media (max-width: 640px) {
    .ix-upload-header-controls {
        grid-template-columns: 1fr;
    }
}





.ix-upload-submit-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 64px;
}

.ix-upload-submit-loader[hidden] {
    display: none !important;
}



.ix-upload-loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .ix-upload-loading-dots span {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #44c7d9;
        display: inline-block;
        animation: ix-upload-dot-bounce 1.1s infinite ease-in-out;
    }

        .ix-upload-loading-dots span:nth-child(2) {
            animation-delay: 0.15s;
        }

        .ix-upload-loading-dots span:nth-child(3) {
            animation-delay: 0.3s;
        }

.ix-upload-loading-text {
    font-size: 15px;
    color: #5f7487;
    margin-top: 0;
}

.ix-upload-submit-loader {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 🔴 This is the important part */
.ix-upload-loading-box {
    background: #ffffff;
    place-items: center;
    border: 1px solid #E3EDF2;
    border-radius: 14px;
    padding: 16px 22px;
    display: grid;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* subtle elevation */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

@keyframes ix-upload-dot-bounce {
    0%, 80%, 100% {
        transform: scale(0.72);
        opacity: 0.45;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}