/*
   Isolated styles for the clean TV navigation path. These rules are intentionally
   namespaced so the current stable pages keep their existing visual behavior.
*/

.mltv-v2-focusable {
    outline: none;
}

.mltv-v2-focused {
    transform: scale(1.025);
    transition: transform 120ms ease-out;
}

.mltv-v2-context-root {
    position: relative;
}

.mltv-v2-hidden {
    display: none !important;
}

/* Highlights Home controls that are currently owned by the clean navigation manager. */
.mltv-v2-home-active [data-tv-focusable="home"].mltv-v2-focused {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95), 0 0 18px rgba(255, 255, 255, 0.45);
    transform: scale(1.025);
}

/* Keeps the Home focus transition simple and layout-stable while moving between cards. */
[data-tv-focusable="home"] {
    outline: none;
    transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

/* Home dashboard information cards use one reusable icon/title/value layout.
   The inline SVG icon aligns with the combined label and value text block. */
.mltv-v2-context-root .home-detail-card.patient-info-card {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding: 20px 22px !important;
}

/* Removes the old circular placeholder treatment from Home detail cards only. */
.mltv-v2-context-root .home-detail-card__icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    color: #6ea6ff !important;
}

/* Keeps the title and value as immediate lines beside the icon. */
.mltv-v2-context-root .home-detail-card__body {
    min-width: 0 !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.mltv-v2-context-root .home-detail-card__title {
    margin-bottom: 6px !important;
}

.mltv-v2-context-root .home-detail-card__subtitle {
    margin-top: -2px !important;
    margin-bottom: 8px !important;
}

.mltv-v2-context-root .home-detail-card__value {
    margin: 0 !important;
}

/* SVG symbols are rendered with strokes so they remain sharp on the TV browser. */
.mltv-v2-context-root .home-card-svg {
    width: 52px !important;
    height: 52px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/*
   Home right-to-left layout refinements keep the V2 dashboard spacing stable when
   translated labels are wider than the English labels. The rules stay scoped to
   the V2 Home root so the frozen reference pages keep their existing behavior.
*/
html[dir="rtl"] #mltv-home-v2-root .home-panel-right-column,
body.rtl-active #mltv-home-v2-root .home-panel-right-column {
    direction: rtl !important;
}

/* Day buttons keep enough inner spacing for the focus halo without touching each other. */
html[dir="rtl"] #mltv-home-v2-root [data-nav-scope="home-days"],
body.rtl-active #mltv-home-v2-root [data-nav-scope="home-days"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[dir="rtl"] #mltv-home-v2-root [data-nav-scope="home-days"] > .col-sm-6,
body.rtl-active #mltv-home-v2-root [data-nav-scope="home-days"] > .col-sm-6 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

html[dir="rtl"] #mltv-home-v2-root [data-nav-scope="home-days"] .btn,
body.rtl-active #mltv-home-v2-root [data-nav-scope="home-days"] .btn {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Meal cards keep a safe two-column gutter and avoid overlap from wider Arabic labels. */
html[dir="rtl"] #mltv-home-v2-root [data-nav-scope="home-meals"],
body.rtl-active #mltv-home-v2-root [data-nav-scope="home-meals"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[dir="rtl"] #mltv-home-v2-root [data-nav-scope="home-meals"] > .col-sm-6,
body.rtl-active #mltv-home-v2-root [data-nav-scope="home-meals"] > .col-sm-6 {
    padding-left: 9px !important;
    padding-right: 9px !important;
    min-width: 0 !important;
}

html[dir="rtl"] #mltv-home-v2-root .meal-period-nav-button,
body.rtl-active #mltv-home-v2-root .meal-period-nav-button {
    min-width: 0 !important;
    overflow: visible !important;
}

html[dir="rtl"] #mltv-home-v2-root .meal-period-visible-card,
body.rtl-active #mltv-home-v2-root .meal-period-visible-card {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html[dir="rtl"] #mltv-home-v2-root .meal-period-visible-card .card-body,
body.rtl-active #mltv-home-v2-root .meal-period-visible-card .card-body {
    padding-left: 26px !important;
    padding-right: 26px !important;
    text-align: right !important;
}

html[dir="rtl"] #mltv-home-v2-root .meal-period-visible-card h3,
html[dir="rtl"] #mltv-home-v2-root .meal-period-visible-card h4,
body.rtl-active #mltv-home-v2-root .meal-period-visible-card h3,
body.rtl-active #mltv-home-v2-root .meal-period-visible-card h4 {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[dir="rtl"] #mltv-home-v2-root .meal-period-selected-indicator,
body.rtl-active #mltv-home-v2-root .meal-period-selected-indicator {
    left: 18px !important;
    right: 18px !important;
    text-align: right !important;
}

html[dir="rtl"] #mltv-home-v2-root .meal-period-selected-indicator__dot,
body.rtl-active #mltv-home-v2-root .meal-period-selected-indicator__dot {
    margin-left: 7px !important;
    margin-right: 0 !important;
}

/* The action row keeps the translated Back and Guest labels balanced. */
html[dir="rtl"] #mltv-home-v2-root .right-column-actions,
body.rtl-active #mltv-home-v2-root .right-column-actions {
    direction: rtl !important;
    gap: 18px !important;
}

/*
Purpose:
Defines passive Orders V2 styling hooks used while the Orders page is being
migrated to the shared navigation framework. These selectors are intentionally
inactive unless the Orders context is explicitly activated.
*/
.mltv-v2-orders-active [data-tv-focusable="orders"].mltv-v2-focused {
    outline: 4px solid #6ff1ff;
    box-shadow: 0 0 18px rgba(111, 241, 255, 0.9);
}