/*
=======================================================================
THREESIXOH! SALES PIPELINE LAYOUT v3
=======================================================================

This file deliberately loads LAST.

Objectives:
- busy stages do not make /sales thousands of pixels tall
- each lane scrolls independently
- board remains five useful sales stages on desktop
- upcoming appointments wrap
- cards are easier to read
- no raw-lead behavior changes
=======================================================================
*/


/* ================================================================
   BOARD CONTAINER
   ================================================================ */

html body.tso-shell-enabled.module-sales .tso-sales-board-wrap {
    width:100% !important;
    max-width:100% !important;

    margin-top:18px !important;

    overflow:visible !important;
}


html body.tso-shell-enabled.module-sales .tso-sales-board {
    display:grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    grid-auto-flow:row !important;
    grid-auto-columns:unset !important;

    gap:12px !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    align-items:start !important;
    align-content:start !important;

    overflow:visible !important;
}


/* ================================================================
   INDIVIDUAL SALES LANES
   ================================================================ */

html body.tso-shell-enabled.module-sales .tso-sales-column {
    display:flex !important;
    flex-direction:column !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    align-self:start !important;

    overflow:hidden !important;

    border-radius:12px !important;
}


/* The lane header stays visible while its cards scroll. */

html body.tso-shell-enabled.module-sales .tso-sales-column-head {
    flex:0 0 auto !important;

    min-height:48px !important;

    padding:10px 11px !important;

    position:relative !important;
    z-index:2 !important;
}


html body.tso-shell-enabled.module-sales .tso-sales-column-head h2 {
    margin:0 !important;

    font-size:12px !important;
    line-height:1.25 !important;
}


/*
-----------------------------------------------------------------------
CRITICAL FIX

The previous layout allowed the busiest lane to set the height of
the entire Sales Pipeline.

Every lane body is now capped to a reasonable workspace height and
scrolls independently.
-----------------------------------------------------------------------
*/

html body.tso-shell-enabled.module-sales .tso-sales-column-body {
    display:flex !important;
    flex-direction:column !important;

    flex:0 1 auto !important;

    width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;
    max-height:560px !important;

    gap:10px !important;
    padding:10px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    overscroll-behavior:contain !important;
    scrollbar-gutter:stable !important;

    box-sizing:border-box !important;
}


/* Empty lanes should stay compact. */

html body.tso-shell-enabled.module-sales
.tso-sales-column-body:has(.tso-sales-empty:only-child) {
    min-height:115px !important;
    max-height:115px !important;
}


/* ================================================================
   OPPORTUNITY CARDS
   ================================================================ */

html body.tso-shell-enabled.module-sales .tso-opportunity-card {
    display:block !important;

    flex:0 0 auto !important;

    width:100% !important;
    min-width:0 !important;

    padding:12px !important;

    box-sizing:border-box !important;

    border-radius:10px !important;
}


html body.tso-shell-enabled.module-sales
.tso-opportunity-card-head strong {
    display:block !important;

    font-size:13px !important;
    line-height:1.3 !important;

    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
}


html body.tso-shell-enabled.module-sales
.tso-opportunity-customer {
    display:block !important;

    margin-top:6px !important;

    font-size:12px !important;
    line-height:1.3 !important;
}


html body.tso-shell-enabled.module-sales
.tso-opportunity-scope {
    margin-top:7px !important;
}


html body.tso-shell-enabled.module-sales
.tso-opportunity-scope span {
    font-size:11px !important;
    line-height:1.3 !important;
}


html body.tso-shell-enabled.module-sales
.tso-opportunity-scope small {
    display:block !important;

    margin-top:3px !important;

    font-size:10px !important;
    line-height:1.35 !important;

    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
}


html body.tso-shell-enabled.module-sales
.tso-opportunity-value {
    margin-top:9px !important;
    padding-top:8px !important;
}


html body.tso-shell-enabled.module-sales
.tso-opportunity-value strong {
    font-size:17px !important;
    line-height:1.1 !important;
}


html body.tso-shell-enabled.module-sales
.tso-opportunity-value span {
    font-size:10px !important;
}


html body.tso-shell-enabled.module-sales
.tso-next-action-card {
    margin-top:9px !important;
    padding:8px 9px !important;
}


html body.tso-shell-enabled.module-sales
.tso-next-action-card > span {
    font-size:9px !important;
}


html body.tso-shell-enabled.module-sales
.tso-next-action-card > strong {
    margin-top:3px !important;

    font-size:11px !important;
    line-height:1.35 !important;
}


html body.tso-shell-enabled.module-sales
.tso-opportunity-card-footer {
    margin-top:8px !important;
    padding-top:7px !important;

    font-size:9px !important;
}


/* ================================================================
   UPCOMING APPOINTMENTS
   ================================================================ */

html body.tso-shell-enabled.module-sales
.tso-sales-appointment-strip {
    display:grid !important;

    grid-template-columns:
        repeat(auto-fit, minmax(150px, 1fr)) !important;

    grid-auto-flow:row !important;
    grid-auto-columns:unset !important;

    gap:8px !important;

    overflow:visible !important;

    padding-bottom:0 !important;
}


html body.tso-shell-enabled.module-sales
.tso-sales-appointment-chip {
    width:auto !important;
    min-width:0 !important;

    padding:9px 10px !important;
}


html body.tso-shell-enabled.module-sales
.tso-sales-appointment-chip time {
    font-size:10px !important;
}


html body.tso-shell-enabled.module-sales
.tso-sales-appointment-chip strong {
    margin-top:3px !important;

    font-size:11px !important;

    white-space:normal !important;
}


html body.tso-shell-enabled.module-sales
.tso-sales-appointment-chip small {
    margin-top:3px !important;

    font-size:9.5px !important;
}


/* ================================================================
   SCORECARD READABILITY
   ================================================================ */

html body.tso-shell-enabled.module-sales
.tso-scorecard-table-wrap {
    overflow-x:auto !important;
    overflow-y:hidden !important;
}


html body.tso-shell-enabled.module-sales
.tso-scorecard-table th {
    font-size:10px !important;
    line-height:1.25 !important;
}


html body.tso-shell-enabled.module-sales
.tso-scorecard-table td {
    font-size:11px !important;
}


html body.tso-shell-enabled.module-sales
.tso-scorecard-person strong {
    font-size:12px !important;
}


html body.tso-shell-enabled.module-sales
.tso-scorecard-person small {
    font-size:9.5px !important;
}


html body.tso-shell-enabled.module-sales
.tso-scorecard-cell strong {
    font-size:13px !important;
}


html body.tso-shell-enabled.module-sales
.tso-scorecard-cell small {
    font-size:9px !important;
}


/* ================================================================
   DARK MODE
   ================================================================ */

html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-sales-column {
    background:#102036 !important;
    border-color:#3b526b !important;
}


html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-sales-column-head {
    background:#162a43 !important;
    border-color:#3b526b !important;
}


html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-sales-column-head h2 {
    color:#f8fafc !important;
}


html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-opportunity-card {
    background:#1d314b !important;
    border-color:#48617d !important;
}


html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-opportunity-card-head strong {
    color:#f8fafc !important;
}


html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-opportunity-customer {
    color:#67e8f9 !important;
}


html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-opportunity-scope span {
    color:#d9e4ef !important;
}


html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-opportunity-scope small {
    color:#afbed0 !important;
}


html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-opportunity-value strong {
    color:#f8fafc !important;
}


html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-opportunity-value span,
html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-opportunity-card-footer {
    color:#b8c5d6 !important;
}


html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-next-action-card {
    background:#142840 !important;
    border-color:#415b78 !important;
}


html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-next-action-card > span {
    color:#aebed0 !important;
}


html[data-theme="dark"]
body.tso-shell-enabled.module-sales
.tso-next-action-card > strong {
    color:#f8fafc !important;
}


/* ================================================================
   SCROLLBAR
   ================================================================ */

html body.tso-shell-enabled.module-sales
.tso-sales-column-body {
    scrollbar-width:thin !important;
    scrollbar-color:#5d7897 transparent !important;
}


html body.tso-shell-enabled.module-sales
.tso-sales-column-body::-webkit-scrollbar {
    width:8px;
}


html body.tso-shell-enabled.module-sales
.tso-sales-column-body::-webkit-scrollbar-track {
    background:transparent;
}


html body.tso-shell-enabled.module-sales
.tso-sales-column-body::-webkit-scrollbar-thumb {
    background:#5d7897;
    border-radius:999px;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width:1100px) {

    html body.tso-shell-enabled.module-sales
    .tso-sales-board {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


@media (max-width:700px) {

    html body.tso-shell-enabled.module-sales
    .tso-sales-board {
        grid-template-columns:
            1fr !important;
    }

    html body.tso-shell-enabled.module-sales
    .tso-sales-column-body {
        max-height:480px !important;
    }

    html body.tso-shell-enabled.module-sales
    .tso-sales-appointment-strip {
        grid-template-columns:
            1fr !important;
    }

}