/* App frame and safe areas. */

/* Use iOS env() values or Capacitor Android SystemBars values without adding them together.
   Requires viewport-fit=cover and the native settings checked in styleBoundary.spec.mjs. */
:root {
    --inset-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
    --inset-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
    --inset-left: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px));
    --inset-right: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px));

    /* Ionic 1.3.3 bar heights before safe-area insets. */
    --bar-height: 44px;
    --tab-bar-height: 49px;
}

html,
body {
    background-color: #000;
}

/* Body borders reserve side insets once for nested, absolutely positioned views.
   Padding would leave their containing edges unchanged. */
body {
    position: relative;
    border-left: var(--inset-left) solid #000;
    border-right: var(--inset-right) solid #000;
}

/* Fixed backdrops need their own side insets; width: auto lets both edges take effect. */
.modal-backdrop,
.action-sheet-backdrop {
    left: var(--inset-left);
    right: var(--inset-right);
    width: auto;
}

/* Keep modals full screen on short viewports, including phones in landscape. */
@media (min-width: 680px) and (max-height: 600px) {
    .modal {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
    }
}

/* Inset tablet modals already clear the system bars. The wrapper excludes the
   full-screen autocomplete picker. Ionic's modal transform keeps fixed controls inside. */
@media (min-width: 680px) and (min-height: 601px) {
    .modal-wrapper .modal {
        --inset-top: 0px;
        --inset-bottom: 0px;
    }
}

/* iOS workaround: prevent a blank screen after a popup select picker closes. */
.modal-backdrop-bg { display: none; }

/* Extend main headers behind the status bar; keep their contents below it.
   Subheaders need no inset. Match Ionic's iOS specificity and load this stylesheet after Ionic. */
.bar-header:not(.bar-subheader),
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader),
.platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) {
    height: calc(var(--bar-height) + var(--inset-top));
}

/* Margins move both the title and buttons; padding cannot move the absolutely positioned title.
   .bar.bar-header also overrides Ionic's title margin reset. */
.bar.bar-header:not(.bar-subheader) > *,
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > *,
.platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) > * {
    margin-top: var(--inset-top);
}

ion-header-bar h1.title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.has-header, .bar-subheader,
.platform-ios.platform-cordova:not(.fullscreen) .has-header,
.platform-ios.platform-cordova:not(.fullscreen) .bar-subheader,
.platform-ios.platform-cordova .modal-wrapper .modal .has-header,
.platform-ios.platform-cordova .modal-wrapper .modal .bar-subheader {
    top: calc(var(--bar-height) + var(--inset-top));
}

/* Ionic does not mark tab views with has-subheader for the shared sign-in notice.
   has-sign-in-notice moves their content below it. */
.has-subheader,
.platform-ios.platform-cordova:not(.fullscreen) .has-subheader,
.platform-ios.platform-cordova .modal-wrapper .modal .has-subheader,
.has-sign-in-notice .has-header,
.platform-ios.platform-cordova:not(.fullscreen) .has-sign-in-notice .has-header {
    top: calc(var(--bar-height) * 2 + var(--inset-top));
}

/* Position top tabs below the header. Ionic uses both selector forms inside modals. */
.tabs-top > .tabs,
.platform-ios.platform-cordova .modal-wrapper .modal .tabs-top > .tabs,
.platform-ios.platform-cordova .modal-wrapper .modal .tabs.tabs-top {
    top: calc(var(--bar-height) + var(--inset-top));
}

/* Place content and the sign-in notice below top tabs.
   Target scroll-content because Ionic also adds has-tabs-top to the header. */
.scroll-content.has-tabs-top,
.platform-ios.platform-cordova .modal-wrapper .modal .has-header.has-tabs-top,
.tabs-top ~ .bar-subheader {
    top: calc(var(--bar-height) + var(--tab-bar-height) + var(--inset-top));
}

/* Move content below the header, subheader, and top tabs in modals and tab views. */
.platform-ios.platform-cordova .modal-wrapper .modal .has-header.has-subheader.has-tabs-top,
.has-sign-in-notice .scroll-content.has-tabs-top {
    top: calc(var(--bar-height) * 2 + var(--tab-bar-height) + var(--inset-top));
}

/* Extend bottom tabs and footers behind system controls, keeping their contents above them. */
ion-tabs:not(.tabs-top) > .tabs {
    height: calc(var(--tab-bar-height) + var(--inset-bottom));
    padding-bottom: var(--inset-bottom);
}

.bar-footer {
    height: calc(var(--bar-height) + var(--inset-bottom));
    padding-bottom: var(--inset-bottom);
}

/* Keep this base inset before the equally specific tab and footer offsets. */
.scroll-content { bottom: var(--inset-bottom); }

/* Ionic applies has-tabs only to content above bottom tabs. */
.has-tabs { bottom: calc(var(--tab-bar-height) + var(--inset-bottom)); }

.has-footer { bottom: calc(var(--bar-height) + var(--inset-bottom)); }

/* Nested scroll containers already sit inside the outer container's safe area. */
.scroll-content .scroll-content { bottom: 0; }

/* Shared layouts and utilities. */

/* Banners keep their natural height; the scrolling pane fills the rest. */
.view-stack {
    display: flex;
    flex-direction: column;
}

.view-stack > * { flex: 0 0 auto; }

/* Anchor banner controls, including Team's filter button, to the banner. */
.view-stack-banner {
    box-shadow: 0 3px 3px rgba(0, 0, 0, .15);
    position: relative;
}

/* Allow the pane to shrink and contain its absolutely positioned scroll content. */
.view-stack-pane {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

/* Flex rows can keep their height, fill spare space or shrink to fit. */
.flex-rows-container {
    display: flex;
    flex-flow: column;
    align-items: stretch;
    height: 100%;
}

.flex-row {
    flex-grow: 0;
    flex-shrink: 0;
}

.flex-row-fill {
    flex-grow: 1;
    flex-shrink: 0;
}

.flex-row-shrink {
    flex-grow: 0;
    flex-shrink: 1;
}

.MagrinTop15px { margin-top: 15px; }

.truncate-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }

/* Forms and editing. */

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    font-size: 1em;
    font-weight: 600;
}

/* Hide browser spinner buttons on number inputs. */
input[type='number'] { -moz-appearance: textfield; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Stack form labels above their inputs. */
.stacked-label.item-input {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    align-items: start;
}

.stacked-label .input-label {
    font-size: 1em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stacked-label .email-phone {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.25em;
    font-weight: 500;
    padding: 0.5em 16px 0.5em 0;
    flex: 34px;
}

/* Highlight unsaved edits and reveal their action buttons. */
.modifiable { transition: background-color .3s; }

.hasModifications { background-color: rgba(255, 80, 80, .3); }

.hiddenButtonWrapper {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .3s;
}

.hiddenButtonWrapper.visible { max-height: 60px; }

/* Availability states. */

.state-on-color { color: #090; }

.state-unavailable-color { color: #a00; }

.state-out-color { color: #aaa; }

.state-on, .state-on .bar, .state-on .tabs {
    background-color: #090 !important;
    background-image: none !important;
    border-color: #090 !important;
}

.state-off, .state-off .bar, .state-off .tabs {
    background-color: #aaa !important;
    background-image: none !important;
    border-color: #aaa !important;
}

.state-unavailable, .state-unavailable .bar, .state-unavailable .tabs {
    background-color: #a00 !important;
    background-image: none !important;
    border-color: #a00 !important;
}

.state-on-radiobutton.isSelected .item-content { box-shadow: inset 0 0 5px #090; }

.state-off-radiobutton.isSelected .item-content { box-shadow: inset 0 0 5px #aaa; }

.state-unavailable-radiobutton.isSelected .item-content { box-shadow: inset 0 0 5px #a00; }

/* Shared components. */

.tab-item { opacity: .5; }

/* Keep tab badges fully opaque. */
.tabs-striped.tabs-positive .tab-item .badge { opacity: 1 !important; }

.popover {
    background-color: rgba(255, 255, 255, .9) !important;
    opacity: 1 !important;
}

/* Keep dialogs above modals. */
.popup-container { z-index: 10000; }

.popup-container .popup { background-color: white; }

/* Preserve line breaks in dialog messages. */
.dialog-message {
    white-space: pre-wrap;
}

/* Keep dialog inputs at least 16px to prevent iOS zoom on focus. */
.dialog-input {
    width: 100%;
    min-height: 44px;
    font-size: 18px;
    margin-top: 10px;
}

/* Support-code and icon opacity combine; keep the copy icon readable. */
.popup-support-code {
    margin-top: 8px;
    font-size: 0.8em;
    opacity: 0.75;
}

/* Monospace makes versions and support codes easier to read aloud. */
.diagnostics-line {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;
    font-size: 0.85em;
}

/* Enlarge the tap target with padding; popup scrolling can clip overflow. */
.support-code {
    padding: 8px 0;
    cursor: pointer;
}

.support-code .ion-ios-copy-outline {
    margin-left: 4px;
    font-size: 1.15em;
    vertical-align: -1px;
    opacity: 0.55;
}

/* Floating action buttons for Secure Messages and Recent Calls.
   Each view controls its icon size and stacking. */
.fab-button-custom {
    background-color: cornflowerblue;
    border-radius: 30px 30px;
    bottom: calc(60px + var(--inset-bottom));
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
    color: white;
    cursor: pointer;
    height: 60px;
    position: fixed;
    right: calc(10px + var(--inset-right));
    text-align: center;
    width: 60px;
}

/* Android tabs sit at the top, so the button only needs to clear the bottom safe area. */
.platform-android .fab-button-custom {
    bottom: calc(10px + var(--inset-bottom));
}

/* View status: loading, empty and failed content. See directives/viewStatus.js. */
view-status {
    color: #777;
    display: block;
}

/* Expand and collapse animations. */

.animateExpandManual {
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
    max-height: 0px;
    opacity: 0;
    overflow: hidden;
    transition: all .5s;
}

.animateExpandManual.expanded {
    max-height: 250px;
    opacity: 1;
}

/* Animate ng-switch panels as they expand and collapse. */
.switch-container {
    overflow: hidden;
    position: relative;
}

.switch-container > div {
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    overflow: hidden;
}

.switch-container > div.ng-enter {
    max-height: 0;
    opacity: 0;
}

.switch-container > div.ng-enter.ng-enter-active {
    max-height: 500px;
    opacity: 1;
}

.switch-container > div.ng-leave {
    max-height: 500px;
    opacity: 1;
}

.switch-container > div.ng-leave.ng-leave-active {
    max-height: 0;
    opacity: 0;
}

/* Team list and icons. */

i.large.ion-ios-people {
    color: blue;
    font-size: 30px;
}

/* Keep the hidden Team list measurable by collection-repeat while the map is shown. */
.nurses-hidden { visibility: hidden; }

.nurses-collection-item {
    height: 98px;
}

.nurses-collection-arrow {
    display: inline-block;
    float: right;
    font-size: 2em;
    margin-top: 15px;
}

.nurses-collection-name {
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nurses-collection-state {
    border-radius: 4px;
    color: white;
    display: inline-block;
    max-width: calc(100% - 36px);
    overflow: hidden;
    padding: 3px 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nurses-collection-distance {
    margin-bottom: 0;
    margin-top: 8px;
    min-height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Call feedback. */

.rating-icons {
    display: flex;
    font-size: 400%;
    justify-content: space-evenly;
    margin: 5vh 2.5vw;
}

.ion-happy { color: #139913; }

.ion-sad { color: #A12810; }

.disabled-icon { color: #999; }

.rating-feedback { margin: 5vh 2.5vw; }

.rating-feedback-group { margin: 2vh 0; }

.rating-feedback textarea { width: 100%; }

.rating-feedback textarea {
    height: auto;
    margin: 2vh 0;
    width: 100%;
}

.rating-feedback .button {
    padding: 0;
    white-space: nowrap;
    width: 100%;
}

.rating-feedback .row { padding: 0; }

.rating-feedback .col { margin: 0; }

.callFeedbackSubmitGroup { width: 100%; }

.callFeedbackSubmitGroup .button { width: 100%; }
.ion-autocomplete-container {
    position: fixed;
    /* Full-viewport, and the insets are left to the two children that already know about them:
       the .bar-header grows into the status bar and the ion-content stops above the home
       indicator, both from the safe-area block in app.css. Insetting this box as well applied
       the inset twice -- and because Ionic's .modal also sets height: 100%, the box came out
       96px taller than the space between the insets, so margin: auto split the overflow and
       pushed it 48px up: it started at 14px instead of 62px, showing a strip of the view
       behind it above the status bar. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: none;
    margin: auto;
}

/* Apple asks for 44pt and Material for 48dp; the bar leaves 44 below the inset, so take it.
   Ionic's bar buttons are 32 high by default, which is under both. */
.ion-autocomplete-back {
    min-height: 44px;
    min-width: 44px;
}

input.ion-autocomplete[readonly] {
    background-color: transparent;
    cursor: text;
}

.ion-autocomplete-loading-icon {
    padding-left: 10px;
}

.ion-autocomplete-open {
    display: inline-block;
    position: absolute !important;
}

.ion-autocomplete-close {
    display: none;
}