/*
    Phoenix application styling
*/


body {

    margin:0;

    background:#f6f8fc;

    font-family:
        Inter,
        Arial,
        sans-serif;

    color:#17233d;

}







/*
    Header
*/


.phoenix-header {

    background:white;

    border-radius:18px;

    padding:14px 20px;

    display:flex !important;

    flex-direction:row !important;

    justify-content:space-between;

    align-items:center;

    box-shadow:
        0 4px 18px rgba(0,0,0,.08);

}






.header-context-group {

    display:flex !important;

    flex-direction:row !important;

    align-items:center;

    gap:14px;

}






.header-pill {


    background:#f8fafc;


    border:1px solid #dce5f2;


    border-radius:14px;


    padding:10px 16px;


    min-width:170px;


}






.header-label {


    font-size:12px;


    color:#64748b;


    display:block;


}






.header-value {


    font-size:18px;


    font-weight:700;


    color:#17233d;


}






.phoenix-logo {


    font-size:34px;


    font-weight:800;


    letter-spacing:-1px;


    color:#17233d;


    padding:8px 18px;


    border-radius:18px;


    background:white;


    border:1px solid #dce5f2;


    box-shadow:

        0 4px 18px rgba(0,0,0,.08);


}



.phoenix-logo span {

    color:#2563eb;

}









/*
    Toolbar
*/


.phoenix-toolbar {


    margin-top:12px;


    background:white;


    border-radius:18px;


    padding:18px;


    box-shadow:

        0 4px 18px rgba(0,0,0,.08);


    display:flex;


    flex-direction:column;


    gap:18px;


}






.phoenix-toolbar-top,
.phoenix-toolbar-bottom {


    display:flex;


    align-items:center;


    gap:14px;


    flex-wrap:wrap;


}






.toolbar-group {


    display:flex;


    align-items:center;


    gap:8px;


}






.toolbar-label {


    font-size:13px;


    font-weight:700;


    color:#24324a;


}






.toolbar-group select {


    height:38px;


    min-width:120px;


    padding:0 12px;


    border-radius:10px;


    border:1px solid #b8d8c8;


    background:white;


    font-weight:600;


    color:#17233d;


}






.toolbar-green {


    background:#129447;


    padding:6px 10px;


    border-radius:14px;


}





.toolbar-green .toolbar-label {

    color:white;

}






.toolbar-button {


    height:42px;


    padding:0 18px;


    border-radius:12px;


    border:none;


    font-weight:700;


    cursor:pointer;


    display:flex;


    align-items:center;


    gap:8px;


    white-space:nowrap;


}






.toolbar-button.orange {


    background:#ff6b00;


    color:white;


}






.toolbar-button.blue {


    background:#2563eb;


    color:white;


}






.toolbar-button.green {


    background:#129447;


    color:white;


}






.toolbar-button.tools {


    background:white;


    color:#2563eb;


    border:2px solid #2563eb;


}






.tools-wrapper {


    position:relative;


}






.tools-menu {


    position:absolute;


    top:48px;


    right:0;


    width:230px;


    background:white;


    border-radius:14px;


    padding:12px;


    box-shadow:

        0 10px 30px rgba(0,0,0,.15);


    z-index:1000;


}






.tools-menu div {


    padding:10px;


    border-radius:8px;


    cursor:pointer;


    font-weight:600;


}






.tools-menu div:hover {


    background:#eef5ff;


}









/*
    Grid
*/


.phoenix-grid {


    background:white;


    border-radius:18px;


    box-shadow:

        0 5px 20px rgba(0,0,0,.06);


    overflow:hidden;


}






.phoenix-grid-header {


    background:#eef5ff;


    height:46px;


    display:flex;


    align-items:center;


    font-weight:700;


    color:#23395d;


}






.phoenix-grid-header div {


    padding:0 18px;


}









/*
    Empty state
*/


.phoenix-empty {


    min-height:420px;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    color:#64748b;


}






.phoenix-empty h2 {


    color:#17233d;


    font-size:22px;


}






.phoenix-empty p {


    font-size:15px;


}









/*
    Status
*/


.phoenix-status-pill {


    display:inline-flex;


    align-items:center;


    gap:8px;


    padding:8px 14px;


    border-radius:999px;


    background:white;


    box-shadow:

        0 3px 12px rgba(0,0,0,.08);


    font-weight:700;


}






.status-dot {


    width:9px;


    height:9px;


    border-radius:50%;


    background:#16a34a;


}
/*
    Match Process / Opportunities / Current View / Load Rows controls
*/


.toolbar-group {

    background:white;

    border:1px solid #b8d8c8;

    border-radius:14px;

    padding:6px 10px;

    height:56px;

    box-sizing:border-box;

}





.toolbar-group .toolbar-label {

    margin-left:4px;

}





.toolbar-group select {


    border:none !important;

    outline:none;

    background:white;


    height:42px;

    min-width:160px;


    font-size:18px;

    font-weight:700;


}





.toolbar-green {


    background:#129447;

    border:none;

}





.toolbar-green select {


    background:white;

}
/*
    PHOENIX STANDARD PILL SYSTEM - COMPACT
*/


.toolbar-group {

    height:46px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:5px 10px;

    border-radius:12px;

    border:1px solid #b8d8c8;

    background:white;

    box-sizing:border-box;

}



.toolbar-group .toolbar-label {


    font-size:15px;

    font-weight:700;

    color:#17233d;

    white-space:nowrap;


}





.toolbar-group select {


    height:34px;

    min-width:150px;

    border-radius:8px;

    border:1px solid #b8d8c8;

    padding:0 10px;

    background:white;

    font-size:15px;

    font-weight:700;

    color:#17233d;


}






.toolbar-group.toolbar-green {


    background:#129447;

    border-color:#129447;

}



.toolbar-group.toolbar-green .toolbar-label {


    color:white;


}






.toolbar-button {


    height:46px;

    border-radius:12px;

    font-size:15px;

    font-weight:700;

    padding:0 18px;

}
/* =========================================
   FINAL TOOLBAR PILL OVERRIDE
========================================= */


.toolbar-pill {

    height:56px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:6px 12px;

    border-radius:16px;

    background:#129447;

    color:white;

    box-sizing:border-box;

}





.toolbar-pill-label {

    color:white;

    font-size:18px;

    font-weight:700;

    white-space:nowrap;

}





.toolbar-pill select {

    height:42px !important;

    min-width:180px;

    border-radius:12px !important;

    border:none !important;

    background:white !important;

    color:#17233d !important;

    padding:0 14px;

    font-size:18px;

    font-weight:700;

}






/* remove old toolbar select styling */


.phoenix-toolbar select {

    appearance:auto;

}






/* button sizing */


.toolbar-button {

    height:56px;

    border-radius:16px;

    font-size:18px;

    font-weight:700;

}
/* =====================================
   COMPACT PHOENIX TOOLBAR PILLS
===================================== */


.toolbar-pill {

    height:44px;

    padding:5px 10px;

    border-radius:12px;

    gap:10px;

}





.toolbar-pill-label {

    font-size:15px;

}





.toolbar-pill select {

    height:32px !important;

    min-width:140px;

    border-radius:8px !important;

    padding:0 10px;

    font-size:15px;

}





.toolbar-button {

    height:44px;

    border-radius:12px;

    padding:0 18px;

    font-size:15px;

}
/* =====================================
   HEADER LOGO + VIEW PILL ALIGNMENT
===================================== */


.phoenix-header-left {

    display:flex;

    align-items:center;

    gap:12px;

}



.phoenix-logo {

    font-size:20px;

    font-weight:800;

    color:#2563eb;

}





.header-pill select {


    height:32px;

    border-radius:8px;

    border:1px solid #dce5f2;

    padding:0 10px;

    font-weight:700;

    color:#17233d;

    background:white;


}
/* =========================================
   PHOENIX GRID FLEX RENDERER
========================================= */


.phoenix-grid {

    width:100%;

    background:white;

    border-radius:18px;

    overflow:auto;

}



.phoenix-grid-row {

    display:flex;

    flex-direction:row;

    width:max-content;

    min-width:100%;

    border-bottom:1px solid #e5e7eb;

}



.phoenix-grid-head {

    background:#eef5ff;

    font-weight:700;

    color:#23395d;

}



.phoenix-grid-cell {

    display:flex;

    align-items:center;

    justify-content:center;
text-align:center;

    padding:10px 14px;

    box-sizing:border-box;

    border-right:1px solid #edf0f5;

    min-height:42px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
      
    flex-shrink:0;

}



.phoenix-grid-empty {

    padding:40px;

    text-align:center;

    color:#64748b;

}
.phoenix-grid-input {

    width:100%;

    border:1px solid #dce5f2;

    border-radius:6px;

    padding:4px 8px;

    text-align:center;

}
/*
    Phoenix Row Selection
*/


.phoenix-row-selector,
.phoenix-select-all {

    width:18px;

    height:18px;

    cursor:pointer;

}
/* =========================================
   ATTRIBUTE MULTI-SELECT WINDOW
========================================= */


/*
    Modal panel
*/

#phoenix-attribute-picker-panel {

    width:min(840px, 94vw) !important;

    height:min(820px, 86vh);

    max-height:86vh !important;

    padding:0 !important;

    overflow:hidden !important;

    background:#ffffff;

    border:2px solid #d4dfed;

    border-radius:28px !important;

    box-shadow:
        0 28px 80px rgba(15, 23, 42, 0.28) !important;

    box-sizing:border-box;

}





/*
    Main multi-select layout
*/

.phoenix-multi-select {

    width:100%;

    height:100%;

    min-height:560px;

    display:flex;

    flex-direction:column;

    background:#ffffff;

    border-radius:26px;

    overflow:hidden;

    box-sizing:border-box;

}





/*
    The screenshot does not display a separate title header.
*/

.phoenix-multi-select-header {

    display:none;

}





/*
    Search section
*/

.phoenix-multi-select-search {

    flex:0 0 auto;

    padding:20px 20px 14px;

    background:#ffffff;

    border-bottom:1px solid #e7edf5;

}





.phoenix-multi-select-search input {

    width:100%;

    height:64px;

    padding:0 24px;

    border:2px solid #cfdbea;

    border-radius:32px;

    outline:none;

    background:#ffffff;

    color:#17233d;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size:24px;

    font-weight:700;

    box-sizing:border-box;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;

}





.phoenix-multi-select-search input::placeholder {

    color:#737373;

    opacity:1;

}





.phoenix-multi-select-search input:focus {

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.12);

}





/*
    Scrollable values area
*/

.phoenix-multi-select-list {

    flex:1 1 auto;

    min-height:0;

    overflow-y:auto;

    overflow-x:hidden;

    padding:4px 20px 0;

    background:#ffffff;

    overscroll-behavior:contain;

    scrollbar-gutter:stable;

}





.phoenix-multi-select-list::-webkit-scrollbar {

    width:12px;

}





.phoenix-multi-select-list::-webkit-scrollbar-track {

    background:#f1f5f9;

    border-radius:999px;

}





.phoenix-multi-select-list::-webkit-scrollbar-thumb {

    background:#b9c6d7;

    border:3px solid #f1f5f9;

    border-radius:999px;

}





.phoenix-multi-select-list::-webkit-scrollbar-thumb:hover {

    background:#94a3b8;

}





/*
    Individual checkbox rows
*/

.phoenix-multi-select-option {

    min-height:70px;

    display:flex;

    align-items:center;

    gap:22px;

    padding:10px 18px;

    border-bottom:1px solid #dfe7f1;

    background:#ffffff;

    cursor:pointer;

    box-sizing:border-box;

    transition:background 0.12s ease;

}





.phoenix-multi-select-option:hover {

    background:#f7faff;

}





.phoenix-multi-select-option:last-child {

    border-bottom:none;

}





.phoenix-multi-select-checkbox {

    width:34px;

    height:34px;

    min-width:34px;

    margin:0;

    cursor:pointer;

    accent-color:#2563eb;

}





.phoenix-multi-select-option-text {

    min-width:0;

    color:#111c34;

    font-size:25px;

    font-weight:800;

    line-height:1.25;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}





/*
    No-result message
*/

.phoenix-multi-select-empty {

    min-height:180px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    color:#64748b;

    font-size:20px;

    font-weight:700;

    text-align:center;

}





/*
    Fixed footer
*/

.phoenix-multi-select-footer {

    flex:0 0 auto;

    min-height:92px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    padding:14px 20px;

    background:#f8fafc;

    border-top:2px solid #dce5f2;

    box-sizing:border-box;

}





.phoenix-multi-select-footer-left,
.phoenix-multi-select-footer-right {

    display:flex;

    align-items:center;

    gap:12px;

}





/*
    Hide Cancel to match the required window.
*/

#phoenix-multi-select-cancel {

    display:none;

}





/*
    Footer buttons
*/

.phoenix-multi-select-footer .toolbar-button {

    height:54px;

    padding:0 22px;

    border:2px solid #ccd9e8;

    border-radius:27px;

    background:#ffffff;

    color:#050b18;

    font-size:23px;

    font-weight:800;

    line-height:1;

    box-shadow:none;

}





.phoenix-multi-select-footer .toolbar-button:hover {

    background:#eef5ff;

    border-color:#aebed2;

}





.phoenix-multi-select-footer .toolbar-button:active {

    transform:translateY(1px);

}





#phoenix-multi-select-done {

    min-width:110px;

    background:#ffffff !important;

    color:#050b18 !important;

    border:2px solid #ccd9e8 !important;

}





/*
    Keep toolbar selectors on one line where space permits.
*/

.phoenix-inline-filter-host {

    display:contents;

}





.phoenix-filter-row {

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:nowrap;

}





/*
    Responsive adjustments
*/

@media (max-width:900px) {

    #phoenix-attribute-picker-panel {

        width:96vw !important;

        height:88vh;

    }



    .phoenix-multi-select-search input {

        height:56px;

        font-size:20px;

    }



    .phoenix-multi-select-option {

        min-height:62px;

        gap:16px;

        padding-left:12px;

        padding-right:12px;

    }



    .phoenix-multi-select-checkbox {

        width:29px;

        height:29px;

        min-width:29px;

    }



    .phoenix-multi-select-option-text {

        font-size:20px;

    }



    .phoenix-multi-select-footer {

        min-height:82px;

        padding:12px 14px;

    }



    .phoenix-multi-select-footer .toolbar-button {

        height:48px;

        padding:0 17px;

        font-size:19px;

    }

}
/* =========================================
   TRACKER GRID DROPDOWNS
========================================= */


.phoenix-grid-select {

    width:100%;

    min-width:0;

    height:34px;

    padding:0 30px 0 10px;

    border:1px solid #cbd5e1;

    border-radius:8px;

    background:#f1f5f9;

    color:#475569;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size:13px;

    font-weight:700;

    outline:none;

    cursor:pointer;

    box-sizing:border-box;

}



.phoenix-grid-select.has-value {

    border-color:#86c5a3;

    background:#e9f8ef;

    color:#16713b;

}



.phoenix-grid-select.is-blank {

    background:#f1f5f9;

    color:#64748b;

}



.phoenix-grid-select:focus {

    border-color:#2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);

}



.phoenix-grid-select.is-saving {

    opacity:0.65;

    cursor:wait;

}



.phoenix-grid-select.is-saved {

    border-color:#16a34a;

    box-shadow:
        0 0 0 3px rgba(22, 163, 74, 0.12);

}



.phoenix-grid-select.is-error {

    border-color:#dc2626;

    background:#fff1f2;

    color:#b91c1c;

}
/* =========================================
   TRACKER INPUTS
========================================= */


.phoenix-tracker-input {

    min-width:0;

    height:34px;

    font-weight:700;

}



.phoenix-tracker-input.is-saving {

    opacity:.65;

    cursor:wait;

}



.phoenix-tracker-input.is-saved {

    border-color:#16a34a;

    box-shadow:
        0 0 0 3px rgba(22,163,74,.12);

}



.phoenix-tracker-input.is-error {

    border-color:#dc2626;

    background:#fff1f2;

    color:#b91c1c;

}





/* =========================================
   COMMENT CELL
========================================= */


.phoenix-comment-cell {

    width:100%;

    min-width:0;

    height:34px;

    padding:0 10px;

    border:1px solid #cbd5e1;

    border-radius:8px;

    background:#f8fafc;

    color:#334155;

    font-family:inherit;

    font-size:13px;

    font-weight:600;

    text-align:left;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    cursor:pointer;

}



.phoenix-comment-cell:hover {

    border-color:#2563eb;

    background:#eff6ff;

}



.phoenix-comment-cell.is-empty {

    color:#64748b;

    font-style:italic;

}



.phoenix-comment-cell.has-comment {

    border-color:#86c5a3;

    background:#e9f8ef;

    color:#16713b;

}
/* =========================================
   COMMENT WINDOW
========================================= */


.phoenix-comment-backdrop {

    position:fixed;

    inset:0;

    z-index:20000;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(15,23,42,.34);

}



.phoenix-comment-backdrop.open {

    display:flex;

}



.phoenix-comment-modal {

    width:min(520px, 92vw);

    background:#f8fafc;

    border:1px solid #cbd5e1;

    border-radius:16px;

    box-shadow:
        0 18px 45px rgba(15,23,42,.28);

    overflow:hidden;

}



.phoenix-comment-modal-header {

    padding:14px 16px;

    border-bottom:1px solid #dbe3ec;

    background:#f8fafc;

    color:#17233d;

    font-size:15px;

    font-weight:800;

}



.phoenix-comment-modal-body {

    padding:14px;

    background:white;

}



.phoenix-comment-modal-body textarea {

    width:100%;

    min-height:150px;

    resize:vertical;

    padding:10px 12px;

    border:1px solid #2563eb;

    border-radius:12px;

    background:white;

    font-family:inherit;

    font-size:14px;

    line-height:1.4;

    color:#17233d;

    outline:none;

    box-sizing:border-box;

}



.phoenix-comment-modal-body textarea:focus {

    border-color:#2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.14);

}



.phoenix-comment-modal-body textarea[aria-invalid="true"] {

    border-color:#dc2626;

    background:#fff1f2;

}



.phoenix-comment-modal-actions {

    display:flex;

    justify-content:flex-end;

    gap:10px;

    padding:12px 14px;

    border-top:1px solid #dbe3ec;

    background:#f8fafc;

}



.phoenix-comment-modal-actions .toolbar-button {

    height:30px;

    min-width:68px;

    padding:0 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:800;

}



.phoenix-comment-modal-actions .toolbar-button.tools {

    background:white;

    border:1px solid #cbd5e1;

    color:#17233d;

}



.phoenix-comment-modal-actions .toolbar-button.blue {

    background:#2563eb;

    border:1px solid #2563eb;

    color:white;

}