/* =====================================================================
   THREESIXOH! FEEDBACK #43
   Text & Badge Visibility on Dark Mode

   Scope:
   1. Top-bar notification count badge
   2. Sales Scheduling Assistant suggested time cards

   Dark mode only.
   ===================================================================== */


/* ---------------------------------------------------------------------
   NOTIFICATION COUNT BADGE
   Give unread count strong contrast against the dark top bar.
   --------------------------------------------------------------------- */

html[data-theme="dark"]
body.tso-shell-enabled
.tso-topbar-count {
    background: #991b1b !important;
    color: #ffffff !important;
    border: 1px solid #fca5a5 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    box-shadow:
        0 0 0 2px #102139,
        0 2px 5px rgba(0, 0, 0, 0.28) !important;
}


/* ---------------------------------------------------------------------
   SALES SCHEDULING ASSISTANT
   Improve separation and readability of suggested appointment times.
   --------------------------------------------------------------------- */

html[data-theme="dark"]
body.tso-shell-enabled
.smart-scheduling {
    background: #0d1b2e !important;
    border-color: #355473 !important;
}


/* Assistant heading */

html[data-theme="dark"]
body.tso-shell-enabled
.smart-scheduling-head strong {
    color: #f1f7ff !important;
}

html[data-theme="dark"]
body.tso-shell-enabled
.smart-scheduling-head small,
html[data-theme="dark"]
body.tso-shell-enabled
.smart-scheduling-status,
html[data-theme="dark"]
body.tso-shell-enabled
.smart-scheduling-disclaimer {
    color: #aebfd3 !important;
}


/* Individual suggestion cards */

html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-card {
    background: #14263d !important;
    border-color: #3c5b7a !important;
    color: #edf6ff !important;
    box-shadow: none;
}


/* Hover state */

html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-card:hover {
    background: #19314d !important;
    border-color: #6ea8e5 !important;
    color: #ffffff !important;
}


/* Recommended card keeps the blue indicator */

html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-card.recommended {
    box-shadow: inset 4px 0 0 #60a5fa !important;
}


/* Selected suggestion */

html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-card.selected {
    background: #12372e !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    box-shadow: inset 4px 0 0 #34d399 !important;
}


/* Day/date */

html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-datetime strong {
    color: #f8fbff !important;
    font-weight: 800 !important;
}


/* Suggested appointment time */

html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-datetime span {
    color: #bfdbfe !important;
    font-weight: 700 !important;
}


/* Ranking / fit badge */

html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-fit {
    background: #173b64 !important;
    color: #dbeafe !important;
    border: 1px solid #4777a7 !important;
}


/* Travel / geography / availability details */

html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-meta span {
    color: #b6c8dc !important;
}


/* Bottom explanatory text */

html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-foot {
    color: #9fc0df !important;
    border-top-color: #36516f !important;
}


/* Make sure selected-card child text is not overridden */

html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-card.selected
.smart-suggestion-datetime strong {
    color: #ffffff !important;
}

html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-card.selected
.smart-suggestion-datetime span {
    color: #bbf7d0 !important;
}

html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-card.selected
.smart-suggestion-meta span,
html[data-theme="dark"]
body.tso-shell-enabled
.smart-suggestion-card.selected
.smart-suggestion-foot {
    color: #c7ead9 !important;
}
/* THREESIXOH FEEDBACK43 ALIGNMENT V2 START */

/* =====================================================================
   OPPORTUNITY APPOINTMENT SCHEDULING ALIGNMENT
   ===================================================================== */


/* ---------------------------------------------------------------------
   DATE / TIME SLOT PICKER

   The original two-column picker has minimum widths that are too large
   for the Opportunity 360 appointment card.

   Within this screen, use a clean vertical layout:
       Appointment Date
       Time Slot
       Availability note
       Override controls
   --------------------------------------------------------------------- */

.o360-appointment-new-form .fixed-sales-slot-picker-v2,
.o360-result-slot-editor .fixed-sales-slot-picker-v2 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
}


/* Prevent children from forcing the picker wider than its container */

.o360-appointment-new-form .fixed-sales-slot-picker-v2 > *,
.o360-result-slot-editor .fixed-sales-slot-picker-v2 > * {
    min-width: 0 !important;
}


/* Date control gets the full row */

.o360-appointment-new-form .fixed-sales-date-section,
.o360-result-slot-editor .fixed-sales-date-section {
    grid-column: 1 !important;
    min-width: 0 !important;
}


/* Keep date input and Choose Date button aligned */

.o360-appointment-new-form .fixed-sales-date-control,
.o360-result-slot-editor .fixed-sales-date-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
}


.o360-appointment-new-form .fixed-sales-date-control input,
.o360-result-slot-editor .fixed-sales-date-control input {
    min-width: 0 !important;
    width: 100% !important;
}


.o360-appointment-new-form .fixed-sales-calendar-button,
.o360-result-slot-editor .fixed-sales-calendar-button {
    width: auto !important;
    min-width: max-content !important;
    margin: 0 !important;
}


/* Time selection gets its own full-width row */

.o360-appointment-new-form .fixed-sales-time-section,
.o360-result-slot-editor .fixed-sales-time-section {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
}


/* Five standard appointment times line up evenly */

.o360-appointment-new-form .fixed-sales-time-buttons,
.o360-result-slot-editor .fixed-sales-time-buttons {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
}


.o360-appointment-new-form .fixed-sales-time-button,
.o360-result-slot-editor .fixed-sales-time-button {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: center !important;
}


/* Error message remains directly underneath the time buttons */

.o360-appointment-new-form .fixed-sales-time-error,
.o360-result-slot-editor .fixed-sales-time-error {
    width: 100% !important;
    margin-top: 6px !important;
}


/* Availability note spans the complete picker */

.o360-appointment-new-form .fixed-sales-slot-note,
.o360-result-slot-editor .fixed-sales-slot-note {
    grid-column: 1 !important;
    width: 100% !important;
    margin: 0 !important;
}


/* Override row */

.o360-appointment-new-form .fixed-sales-slot-override,
.o360-result-slot-editor .fixed-sales-slot-override {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}


.o360-appointment-new-form .fixed-slot-override-reason,
.o360-result-slot-editor .fixed-slot-override-reason {
    min-width: 0 !important;
    width: 100% !important;
}


/* ---------------------------------------------------------------------
   SALES SCHEDULING ASSISTANT HEADER
   --------------------------------------------------------------------- */

.o360-smart-scheduling .smart-scheduling-head {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(135px, 165px)
        auto !important;
    align-items: end !important;
    gap: 10px !important;
    width: 100% !important;
}


.o360-smart-scheduling .smart-scheduling-head > div {
    min-width: 0 !important;
}


.o360-smart-scheduling .smart-scheduling-head label {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}


.o360-smart-scheduling .smart-scheduling-head select {
    width: 100% !important;
}


.o360-smart-scheduling .smart-scheduling-head .button {
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
}


/* ---------------------------------------------------------------------
   SUGGESTION CARD GRID
   --------------------------------------------------------------------- */

.o360-smart-scheduling .smart-scheduling-results {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
    gap: 9px !important;
}


.o360-smart-scheduling .smart-suggestion-card {
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}


/* Header inside each suggested time card */

.o360-smart-scheduling .smart-suggestion-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
    width: 100% !important;
}


.o360-smart-scheduling .smart-suggestion-datetime {
    min-width: 0 !important;
}


/* Keep route-fit badge in a predictable position */

.o360-smart-scheduling .smart-suggestion-fit {
    justify-self: end !important;
    align-self: start !important;
    max-width: 145px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.15 !important;
}


/* Push the route/travel footer to the bottom of each card */

.o360-smart-scheduling .smart-suggestion-foot {
    margin-top: auto !important;
    width: 100% !important;
}


/* ---------------------------------------------------------------------
   RESPONSIVE BEHAVIOR
   --------------------------------------------------------------------- */

@media (max-width: 700px) {

    .o360-smart-scheduling .smart-scheduling-head {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .o360-smart-scheduling .smart-scheduling-head .button {
        width: 100% !important;
    }

    .o360-smart-scheduling .smart-scheduling-results {
        grid-template-columns: 1fr !important;
    }

    .o360-appointment-new-form .fixed-sales-time-buttons,
    .o360-result-slot-editor .fixed-sales-time-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .o360-appointment-new-form .fixed-sales-slot-override,
    .o360-result-slot-editor .fixed-sales-slot-override {
        grid-template-columns: 1fr !important;
    }

    .o360-appointment-new-form .fixed-sales-slot-override button,
    .o360-result-slot-editor .fixed-sales-slot-override button {
        width: 100% !important;
    }
}

/* THREESIXOH FEEDBACK43 ALIGNMENT V2 END */