/* ktportalcss v1.5 — 2026-06-17 */

/* =============================================================
   KT DESIGN TOKENS
   Single source of truth for colours, typography, and spacing.
   Defined on :root so custom properties are inherited by all
   LWC components on both the Tutor and Client portals.

   To load these tokens into a portal, add to Experience Builder
   Theme → Edit CSS:
       @import url('/resource/ktportalcss');

   Usage in LWC CSS:  color: var(--kt-color-text-muted);
   ============================================================= */
:root {

    /* --- Brand colours --- */
    --kt-color-brand:           #07153c;  /* Primary navy  — buttons, borders, headings   */
    --kt-color-brand-mid:       #213d64;  /* Accent navy   — hover states, accent bar      */
    --kt-color-accent:          #d1bda9;  /* Warm sand     — accent bar, avatar background */

    /* --- Text --- */
    --kt-color-text:            #0c0d21;  /* Primary body text                            */
    --kt-color-text-strong:     #181818;  /* Strong emphasis                               */
    --kt-color-text-muted:      #706e6b;  /* Secondary / muted labels                     */
    --kt-color-text-subtle:     #514f4d;  /* Tertiary / supporting text                   */

    /* --- Borders & surfaces --- */
    --kt-color-border:          #e5e5e5;  /* Default border                               */
    --kt-color-bg-page:         #ffffff;  /* Page background                              */
    --kt-color-bg-warm:         #f8f7f4;  /* Off-white section background                 */
    --kt-color-bg-subtle:       #f3f3f3;  /* Table header / hover row                     */
    --kt-color-bg-muted:        #f8f8f8;  /* Slightly elevated surface (card sub-header)  */
    --kt-color-bg-stripe:       #fafafa;  /* Alternating table row                        */

    /* --- Semantic --- */
    --kt-color-danger:          #ba0517;  /* Error / destructive actions                  */

    /* --- DXP global theme tokens --- */
    /* Success / warning toasts stay light-background */
    --dxp-g-success:            #edf7f2;
    --dxp-g-success-contrast:   #2e844a;
    --dxp-g-warning:            #fef7e6;
    --dxp-g-warning-contrast:   #6b4200;
    /* Destructive: set to a strong red so required stars and error text are legible */
    --dxp-g-destructive:        #ba0517;
    --dxp-g-destructive-contrast: #ffffff;

    /* --- Badge palettes --- */
    --kt-badge-amber-bg:        #fef7e6;
    --kt-badge-amber-border:    #e8b84e;
    --kt-badge-amber-text:      #6b4200;

    --kt-badge-purple-bg:       #f4f0ff;
    --kt-badge-purple-border:   #c9b8f8;
    --kt-badge-purple-text:     #4a3771;

    --kt-badge-green-bg:        #edf7f2;
    --kt-badge-green-border:    #91d6a8;
    --kt-badge-green-text:      #2e844a;

    --kt-badge-blue-bg:         #e5f5f5;
    --kt-badge-blue-border:     #7ac9cb;
    --kt-badge-blue-text:       #007d84;

    --kt-badge-red-bg:          #fde8e8;
    --kt-badge-red-border:      #e06060;
    --kt-badge-red-text:        #8b0000;

    /* --- Typography --- */
    --kt-font-serif:            'Seasons Serif', serif;
    --kt-font-sans:             'Seasons Sans', sans-serif;

    /* --- Table typography (shared across all portal data tables) --- */
    --kt-table-th-font-size:    12px;
    --kt-table-th-font-weight:  600;
    --kt-table-td-font-size:    14px;

    /* --- DXP/LWC font overrides ---
       dxp-styling-hooks.min.css (loaded before this file) sets both tokens to
       the OS system-font stack.  Inter is loaded via Google Fonts in the page
       head, so overriding here makes DXP text blocks, lightning inputs, and
       flow screens all render with the same typeface.                         */
    --dxp-g-root-font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --dxp-g-heading-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lwc-fontFamily:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* --- Radii & shadows --- */
    --kt-radius:                4px;
    --kt-shadow-card:           0 2px 4px rgba(0, 0, 0, 0.1);

    /* --- Card backgrounds --- */
    --slds-c-card-color-background:          white;

    /* --- Modal backgrounds --- */
    --slds-c-modal-color-background:         white;
    --slds-c-modal-content-color-background: white;

    /* --- Form input backgrounds (overrides any cream from portal theme) --- */
    --slds-c-input-color-background:         white;
    --slds-c-textarea-color-background:      white;
    --slds-c-select-color-background:        white;
    --lwc-colorBackgroundInput:              white;
    --dxp-s-form-element-color-background:   white;
    --dxp-s-form-element-label-font-weight:  400;
    --slds-g-color-surface-2:                white;

    --dxp-g-root: #F8F7F4;

}

/* =============================================================
   GLOBAL PAGE-LEVEL OVERRIDES
   These apply outside LWC shadow roots (SLDS utilities, layout
   classes, portal builder elements). Do NOT put component-
   specific styles here — put those in the component's CSS file.
   ============================================================= */

/* The Experience Builder generated styles.css sets html { background: white }.
   Override it here (ktportalcss loads after that file) so the cream fills the
   full viewport height even on short pages. */
html {
    background: var(--kt-color-bg-warm, #f8f7f4);
    min-height: 100%;
}

/* Remove top border from screen flow / component footers inside custom modals.
   flowruntime-navigation-bar carries slds-card__footer which sets the border. */
.slds-modal__footer,
flowruntime-navigation-bar {
    border-top: none !important;
}

/* ── Error toast / alert backgrounds ────────────────────────────────────────
   --dxp-g-destructive is set to a strong red for required stars and inline
   error text. These selectors restore light backgrounds specifically for
   toast notifications and alert banners so they don't render solid red.
   ──────────────────────────────────────────────────────────────────────────── */
.slds-notify_toast.slds-theme_error,
.slds-notify--toast.slds-theme--error,
.slds-notify_alert.slds-theme_error,
.slds-notify--alert.slds-theme--error {
    background-color: #fde8e8 !important;
    color: #8b0000 !important;
}
.slds-notify_toast.slds-theme_error .slds-icon,
.slds-notify_toast.slds-theme_error .slds-icon-utility-error {
    fill: #8b0000 !important;
}

/* ── kt-theme_info ───────────────────────────────────────────────────────────
   Informational notification banner. Light-background blue tint, consistent
   with the soft-background approach used for warning (#fef7e6) and error
   (#fde8e8). Apply alongside slds-notify_toast in an HTML Editor component.

   Usage:
     <div class="slds-notify slds-notify_toast kt-theme_info slds-grid" role="status">
   ──────────────────────────────────────────────────────────────────────────── */
.slds-notify_toast.kt-theme_info,
.slds-notify--toast.kt-theme_info {
    background-color: #e8f4fd !important;
    color: #014486 !important;
}

/* ── kt-panel ────────────────────────────────────────────────────────────────
   Apply to a column component in Experience Builder to give it the same
   bordered-card treatment as the LWC data tables (thin grey border,
   matching border-radius, white background).

   Companion class: kt-table-head
   Apply kt-table-head to the first component inside the column (the header
   text block) to add the matching bottom-border separator between the header
   and the body content.

   Usage:
     Column component  → Custom CSS class: kt-panel
     Header text block → Custom CSS class: kt-table-head
   ──────────────────────────────────────────────────────────────────────────── */
.kt-panel {
    border: 1px solid var(--kt-color-border, #e5e5e5) !important;
    border-radius: var(--kt-radius, 4px) !important;
    overflow: hidden !important;
    background: var(--kt-color-bg-page, #ffffff);
}

/* Table header separator used in page-level tables */
.kt-table-head {
    border-bottom: 1px solid var(--kt-color-border, #e5e5e5) !important;
}

/* Experience Builder section grey border utility (section-level, legacy) */
.kt-grey-border .columns-content > community_layout-column {
    border-radius: var(--kt-radius, 4px) !important;
    border: 1px solid var(--kt-color-border, #e5e5e5) !important;
    overflow: hidden;
}

/* ── kt-empty-state ──────────────────────────────────────────────────────────
   Standard empty / no-results message. Matches the state-text style used
   inside all custom LWCs. Apply to an HTML Text component (or any block
   element) in Experience Builder wherever you need an empty state — e.g.
   inside a Grid component when there are no results.

   Usage:
     <p class="kt-empty-state">No sessions found.</p>
     <p class="kt-empty-state kt-empty-state--error">Something went wrong.</p>
   ──────────────────────────────────────────────────────────────────────────── */
.kt-empty-state {
    display: block;
    padding: 1rem 1.25rem;
    font-size: 14px;
    font-weight: 400;
    color: #706e6b;
    background: transparent;
}

.kt-empty-state--error {
    color: #ba0517;
}

/* Warm off-white section background utility */
.kt-grey-background {
    background-color: var(--kt-color-bg-warm, #f8f7f4);
}

/* ── Screen flow output text sizing ─────────────────────────────────────────
   Screen flow "Display Text" and "Display Image" output components render
   smaller text than the adjacent input fields. These rules match the
   slds-input sizing (0.875rem / 1.5rem line-height) so outputs feel
   visually consistent with inputs in the same flow screen.

   Both runtime-flow-screen-field (old runtime) and flowruntime-screen-field
   (current runtime) are targeted for forward compatibility.

   Scoped to flow screen fields — GoMeddo's standalone reservation form
   renders editable record values with .slds-form-element__static alongside
   inline edit-pencil icons; an unscoped display:block was pushing those icons
   onto a second line.
   ──────────────────────────────────────────────────────────────────────────── */
runtime-flow-screen-field .slds-form-element__static,
flowruntime-screen-field .slds-form-element__static,
runtime-flow-screen-field lightning-formatted-text,
flowruntime-screen-field lightning-formatted-text,
runtime-flow-screen-field lightning-formatted-rich-text p,
flowruntime-screen-field lightning-formatted-rich-text p {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.5rem 0rem;
    display: block;
}

/* Flow screen Display Text h5 section headings (e.g. "YOUR AVAILABILITY",
   "AVAILABILITY NOTES").  Style to match .field-label in custom LWC components:
   brand colour, small, all-caps, Seasons Sans / Inter.

   The rich-text editor in Flow bakes inline font-size/color onto the <strong>
   tag inside each h5.  The !important on the strong rule overrides that. */
runtime-flow-screen-field lightning-formatted-rich-text h5,
flowruntime-screen-field lightning-formatted-rich-text h5 {
    font-family: var(--kt-font-sans);
    font-size: 0.857rem;
    font-weight: 700;
    color: var(--kt-color-brand);
    letter-spacing: 0.7px;
    line-height: 1.75;
    margin: 0;
    padding: 0.5rem 0 0.125rem;
    text-transform: uppercase;
}

runtime-flow-screen-field lightning-formatted-rich-text h5 strong,
flowruntime-screen-field lightning-formatted-rich-text h5 strong {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* Flow screen input text colour (the value the user types) */
flowruntime-screen-field input,
runtime-flow-screen-field input,
flowruntime-screen-field textarea,
runtime-flow-screen-field textarea,
flowruntime-screen-field select,
runtime-flow-screen-field select {
    color: #706e6b;
}

/* Readonly flow inputs — dxp-slds-extensions sets .slds-input[readonly] via synthetic
   shadow; we beat its specificity (0,1,1) by adding the flow host element (0,1,2). */
flowruntime-screen-field .slds-input[readonly],
runtime-flow-screen-field .slds-input[readonly] {
    border: 1px solid rgb(17, 32, 51);
    background-color: white;
    padding-left: 0.75rem;
    font-size: 1rem;
    color: #706e6b;
}

/* Set text-colour token on the lightning-input host as well (cascades via var() chain). */
flowruntime-screen-field lightning-input[readonly],
runtime-flow-screen-field lightning-input[readonly] {
    --slds-c-input-text-color: var(--kt-color-text-muted, #706e6b);
    --sds-c-input-text-color:  var(--kt-color-text-muted, #706e6b);
}

/* Flow rich-text h4: SLDS sets 0.875rem; bump to 1rem to match body text. */
flowruntime-screen-field .slds-rich-text-editor__output h4,
runtime-flow-screen-field .slds-rich-text-editor__output h4 {
    font-size: 1rem;
}

/* Flow screen input / picklist labels: override SLDS default (12px) to 14px.
   rem values calculated against 14px root (desktop base font size):
   1rem = 14px. Mobile reduces the root, so rem naturally scales down. */
flowruntime-screen-field .flowruntime-input-label,
runtime-flow-screen-field .flowruntime-input-label {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.5;
    color: var(--dxp-g-root-contrast);
    margin-bottom: 0.25rem;
}

/* Tutor availability modal — output field values (e.g. Schedule, Availability).
   lightning-output-field renders inside c-tutor-availability-modal. LightningModal
   appends to the body inside lightning-modal, so both selectors are provided.
   The lightning-output-field rule covers cases where the component runs native
   shadow and the c-tutor-availability-modal descendant selector cannot pierce it. */
c-tutor-availability-modal .slds-form-element__static,
c-tutor-availability-modal lightning-formatted-text,
lightning-modal c-tutor-availability-modal .slds-form-element__static,
lightning-modal c-tutor-availability-modal lightning-formatted-text,
lightning-record-edit-form lightning-output-field .slds-form-element__static,
lightning-record-edit-form lightning-output-field lightning-formatted-text {
    font-size: 1rem !important;
    line-height: 1.5;
    display: block;
    padding: 0.25rem 0;
}

/* ── kt-btn-cols ─────────────────────────────────────────────────────────────
   Apply to a Columns layout component in Experience Builder whose child columns
   each contain a single button. The columns shrink to their button's natural
   width and the group aligns to the right edge of the container.

   Usage in Experience Builder:
     Select the Columns layout (the direct wrapper of the button columns)
     → Advanced → CSS Classes → kt-btn-cols

   Why the selectors work: Experience Cloud uses synthetic shadow, so global CSS
   can traverse into component shadow roots via descendant selectors. The
   dxp_layout-column flex-grow is set as an inline style, hence !important.
   ──────────────────────────────────────────────────────────────────────────── */
.kt-btn-cols .columns {
    justify-content: flex-end;
}
.kt-btn-cols dxp_layout-column {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* ── kt-fill-col ─────────────────────────────────────────────────────────────
   Companion to kt-btn-cols. Apply to the column that should expand to fill
   the space left by shrunk button columns. Overrides the flex: 0 0 auto
   set by kt-btn-cols on all sibling columns.

   Usage in Experience Builder:
     Within a kt-btn-cols Columns layout, select the non-button column
     → Advanced → CSS Classes → kt-fill-col
   ──────────────────────────────────────────────────────────────────────────── */
.kt-btn-cols dxp_layout-column.kt-fill-col {
    flex: 1 1 auto !important;
    min-width: 0;
}

/* ── kt-btn-cols outer column (automatic via :has) ───────────────────────────
   Any community_layout-column that wraps a kt-btn-cols layout automatically
   shrinks to its button content width. No extra class or Builder selection
   needed — kt-btn-cols on the inner dxp_layout-columns is sufficient.
   The platform already sets flex: 1 1 auto inline on sibling content columns,
   so they expand to fill the freed space automatically.
   ──────────────────────────────────────────────────────────────────────────── */
community_layout-column:has(.kt-btn-cols) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* ── Screen flow SectionWithHeader spacing ──────────────────────────────────
   flowruntime-section-with-header renders via lightning-accordion, so spacing
   classes are slds-accordion__content / slds-accordion__summary (not slds-section*).
   ──────────────────────────────────────────────────────────────────────────── */
flowruntime-section-with-header .slds-accordion__content {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* ── Screen flow toggle message text ────────────────────────────────────────
   "Available — ..." / "Unavailable — ..." renders in .slds-checkbox_off/on
   inside lightning-primitive-input-toggle. Salesforce synthetic shadow lets
   global CSS descend through component boundaries, so these selectors reach in.
   ──────────────────────────────────────────────────────────────────────────── */
flowruntime-toggle .slds-checkbox_off,
flowruntime-toggle .slds-checkbox_on {
    font-size: 0.875rem;
}

/* Bubble widget z-index override */
bubble_default_main {
    z-index: 9001;
}
lwc-6o6likdls9f {
    z-index: 9001;
}

/* GoMeddo standalone reservation form — recurring-session dialog not opening.
   b25-standalone-reservation-form's own internal SLDS modal (used for the
   recurring-session dialog) is hosted inside our custom session modals
   (c-add-session-button, c-job-scheduled-sessions), which already use
   z-index 9000 for their own backdrop. Per GoMeddo support
   (ref:!00DD00q9Ly.!500QB0xWJFK), lowering the reservation form's internal
   modal/backdrop z-index resolves the stacking conflict. Both host-component
   and bare-tag selectors are provided in case the component runs native
   shadow and the descendant selector cannot pierce it. */
c-add-session-button .slds-modal,
c-job-scheduled-sessions .slds-modal,
b25-standalone-reservation-form .slds-modal {
    z-index: 8999;
}

c-add-session-button .slds-backdrop,
c-job-scheduled-sessions .slds-backdrop,
b25-standalone-reservation-form .slds-backdrop {
    z-index: 8998;
}