/* =====================================================================
   THREESIXOH! SALES CALENDAR WEEK VIEW VISUAL FIX v1
   2026-08-27

   Scope:
   - Sales Calendar week view only
   - Prevent weekday/date header collisions
   - Correct dark-mode week-column selector mismatch
   ===================================================================== */


/* ---------------------------------------------------------------------
   WEEK HEADER LAYOUT

   The current ThreeSixOh! rule places the weekday and date beside each
   other with justify-content:space-between. The readability stylesheet
   later increases both font sizes, which can cause them to collide.

   Stack the two values instead. This also gives all seven columns a
   predictable header layout regardless of viewport width.
   --------------------------------------------------------------------- */

body.tso-shell-enabled .tso-week-calendar {
    grid-template-columns:repeat(7,minmax(145px,1fr)) !important;
    min-width:1015px;
}

body.tso-shell-enabled .tso-week-day-column {
    min-width:0;
}

body.tso-shell-enabled .tso-week-day-column > header {
    box-sizing:border-box;
    min-height:58px;
    padding:10px 11px !important;
}

body.tso-shell-enabled .tso-week-day-column > header a {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:2px;
    width:100%;
    min-width:0;
    line-height:1.2;
    text-decoration:none;
}

body.tso-shell-enabled .tso-week-day-column > header a > span,
body.tso-shell-enabled .tso-week-day-column > header a > strong {
    display:block;
    max-width:100%;
    margin:0 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

body.tso-shell-enabled .tso-week-day-column > header a > span {
    line-height:1.25;
}

body.tso-shell-enabled .tso-week-day-column > header a > strong {
    line-height:1.3;
}


/* ---------------------------------------------------------------------
   DARK MODE

   appointments.html uses:
       .tso-week-day-column

   The previous dark-calendar patch incorrectly targeted:
       .tso-week-day

   These selectors intentionally use the actual template class.
   --------------------------------------------------------------------- */

html[data-theme="dark"]
body.tso-shell-enabled .tso-week-calendar {
    background:#182235 !important;
    border-color:#334155 !important;
}

html[data-theme="dark"]
body.tso-shell-enabled .tso-week-day-column {
    background:#182235 !important;
    color:#f1f5f9 !important;
    border-color:#475569 !important;
}

html[data-theme="dark"]
body.tso-shell-enabled .tso-week-day-column > header {
    background:#142f46 !important;
    color:#f1f5f9 !important;
    border-color:#475569 !important;
}

html[data-theme="dark"]
body.tso-shell-enabled .tso-week-day-column > header a,
html[data-theme="dark"]
body.tso-shell-enabled .tso-week-day-column > header strong {
    color:#f1f5f9 !important;
}

html[data-theme="dark"]
body.tso-shell-enabled .tso-week-day-column > header span,
html[data-theme="dark"]
body.tso-shell-enabled .tso-week-day-column > header small {
    color:#94a3b8 !important;
}

html[data-theme="dark"]
body.tso-shell-enabled .tso-week-day-column.today {
    background:#1b2b3e !important;
    box-shadow:inset 0 0 0 2px #2dd4bf !important;
}

html[data-theme="dark"]
body.tso-shell-enabled .tso-week-day-column.today > header {
    background:#17354e !important;
    border-color:#2dd4bf !important;
}


/* Keep empty-state text readable against the corrected week surface. */
html[data-theme="dark"]
body.tso-shell-enabled .tso-week-day-column .tso-calendar-empty {
    color:#94a3b8 !important;
}


/* End THREESIXOH! SALES CALENDAR WEEK VIEW VISUAL FIX v1 */


/* =====================================================================
   THREESIXOH! SALES CALENDAR WEEK HEADER CLEANUP v1.1

   Neutralizes unrelated department/link decoration that can bleed into
   the clickable weekday/date headers.
   ===================================================================== */

body.tso-shell-enabled .tso-week-day-column > header,
body.tso-shell-enabled .tso-week-day-column > header:hover {
    background:#f8fafc !important;
}

body.tso-shell-enabled .tso-week-day-column > header > a,
body.tso-shell-enabled .tso-week-day-column > header > a:link,
body.tso-shell-enabled .tso-week-day-column > header > a:visited,
body.tso-shell-enabled .tso-week-day-column > header > a:hover,
body.tso-shell-enabled .tso-week-day-column > header > a:active,
body.tso-shell-enabled .tso-week-day-column > header > a:focus {
    position:static !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;

    width:100% !important;
    min-height:38px !important;

    padding:0 !important;
    margin:0 !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    border-bottom:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;
    outline-offset:2px;

    color:var(--tso-text) !important;
    text-decoration:none !important;
}


/* Eliminate decorative accent bars/pseudo-elements from generic links. */
body.tso-shell-enabled .tso-week-day-column > header > a::before,
body.tso-shell-enabled .tso-week-day-column > header > a::after {
    content:none !important;
    display:none !important;

    width:0 !important;
    height:0 !important;

    background:none !important;
    border:0 !important;
    box-shadow:none !important;
}


/* Weekday */
body.tso-shell-enabled
.tso-week-day-column > header > a > span {
    display:block !important;

    width:auto !important;
    max-width:100% !important;

    padding:0 !important;
    margin:0 0 2px 0 !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    border-bottom:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    color:var(--tso-muted) !important;
    font-weight:500 !important;
    line-height:1.2 !important;

    text-decoration:none !important;
}


/* Date */
body.tso-shell-enabled
.tso-week-day-column > header > a > strong {
    display:block !important;

    width:auto !important;
    max-width:100% !important;

    padding:0 !important;
    margin:0 !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    border-bottom:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    color:var(--tso-text) !important;
    font-weight:800 !important;
    line-height:1.25 !important;

    text-decoration:none !important;
}


/* Don't allow child pseudo-elements to recreate the purple accent bar. */
body.tso-shell-enabled
.tso-week-day-column > header > a > span::before,
body.tso-shell-enabled
.tso-week-day-column > header > a > span::after,
body.tso-shell-enabled
.tso-week-day-column > header > a > strong::before,
body.tso-shell-enabled
.tso-week-day-column > header > a > strong::after {
    content:none !important;
    display:none !important;
}


/* Today gets a deliberate calendar-specific treatment. */
body.tso-shell-enabled
.tso-week-day-column.today > header {
    background:#eef8f8 !important;
    box-shadow:inset 0 3px 0 var(--tso-teal) !important;
}

body.tso-shell-enabled
.tso-week-day-column.today > header > a > strong {
    color:var(--tso-teal-dark) !important;
}


/* Dark mode */
html[data-theme="dark"]
body.tso-shell-enabled
.tso-week-day-column > header,
html[data-theme="dark"]
body.tso-shell-enabled
.tso-week-day-column > header:hover {
    background:#142f46 !important;
    border-color:#475569 !important;
}

html[data-theme="dark"]
body.tso-shell-enabled
.tso-week-day-column > header > a,
html[data-theme="dark"]
body.tso-shell-enabled
.tso-week-day-column > header > a:link,
html[data-theme="dark"]
body.tso-shell-enabled
.tso-week-day-column > header > a:visited,
html[data-theme="dark"]
body.tso-shell-enabled
.tso-week-day-column > header > a:hover,
html[data-theme="dark"]
body.tso-shell-enabled
.tso-week-day-column > header > a:active {
    background:transparent !important;
    color:#f1f5f9 !important;
    text-decoration:none !important;
}

html[data-theme="dark"]
body.tso-shell-enabled
.tso-week-day-column > header > a > span {
    background:transparent !important;
    color:#94a3b8 !important;
}

html[data-theme="dark"]
body.tso-shell-enabled
.tso-week-day-column > header > a > strong {
    background:transparent !important;
    color:#f1f5f9 !important;
}

html[data-theme="dark"]
body.tso-shell-enabled
.tso-week-day-column.today > header {
    background:#17354e !important;
    box-shadow:inset 0 3px 0 #2dd4bf !important;
}

html[data-theme="dark"]
body.tso-shell-enabled
.tso-week-day-column.today > header > a > strong {
    color:#5eead4 !important;
}


/* End THREESIXOH! SALES CALENDAR WEEK HEADER CLEANUP v1.1 */