/* Layout shell to mimic independent scrolling of sidebar and main area */
html, body { height: 100%; }
body.layout-wrapper {
    display: flex;
    flex-direction: column;
}
.content-wrapper {
    flex: 1 1 auto;
    display: flex;
    min-height: 0; /* allow children to size/scroll */
    overflow: hidden; /* confine scrollbars to children */
}

dd {
    text-align: left;
    align-self: start
}

dt {
    align-self: start;
}

/* Main content pane */
.main-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}
/* Footer inside main scroll pane */
.main-footer {
    margin-top: auto;
}

.k-spacer {
    display: none !important;
}
.hidden {
    display: none !important;
}
.k-toolbar-item:has(.k-searchbox) {
    flex-grow: 1;
    max-width: 100%;
}

    .k-toolbar-item:has(.k-searchbox) .k-searchbox {
        width: 100%;
        max-width: 100%;
    }

        .k-toolbar-item:has(.k-searchbox) .k-searchbox input {
            width: 100%;
            max-width: 100%;
        }


/* Make TabStrip header refresh look like an inline icon/link, not a button */
.k-tabstrip .k-item .k-link .k-link-text > button.k-button {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-left: .5rem;
    min-width: 0;
    height: auto;
    line-height: 1;
    border-radius: 0;
    box-shadow: none !important;
    color: inherit;
    vertical-align: middle;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

    .k-tabstrip .k-item .k-link .k-link-text > button.k-button:hover,
    .k-tabstrip .k-item .k-link .k-link-text > button.k-button:focus,
    .k-tabstrip .k-item .k-link .k-link-text > button.k-button:active {
        background: transparent !important;
        box-shadow: none !important;
        outline: none;
        color: inherit;
    }

    .k-tabstrip .k-item .k-link .k-link-text > button.k-button i {
        font-size: .9em;
    }

/* Keep the app header above page content */
.app-header {
    z-index: 1040; /* higher than sticky-top default (1020) */
}

/* Keep navbar from growing in height */
.app-header .navbar-brand,
.app-header .nav-link,
.app-header .navbar-toggler {
    line-height: 1.25;
}
.app-header .nav-link { padding-top: .5rem; padding-bottom: .5rem; }
.app-header .navbar-brand { padding-top: .5rem; padding-bottom: .5rem; }
.app-header .navbar { min-height: 3rem; }

.field-label {
    font-weight: 600;
    white-space: nowrap;
}

.field-label::after {
    margin-left: .25rem;
}

.required-indicator {
    font-size: .825rem;
    font-weight: 600;
    color: var(--bs-warning);
    margin-left: .25rem;
}

/* Make Kendo checkbox label text bold */
.k-checkbox-label,
.k-checkbox + label,
label.k-checkbox-label {
    font-weight: 700 !important;
}

/* highlight style for matched search text in grids */
.grid-highlight {
    background-color: #ffec99; /* soft yellow */
    padding: 0 .1em;
    border-radius: 2px;
}

.navbar .dropdown-menu {
    border-radius: 0 !important;
    background-color: #fff !important;
}

.navbar {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    min-height: 42px !important;
    max-height: 42px !important;
}

.indent-menu {
    padding-left: 10px !important;
}

    .indent-menu a {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

.dragon-image {
    height: 100px;
    color: white;
    border-bottom: 1px solid var(--app-theme-smooth-on-yellow);
    background-image: url(/images/red_dragon_bw_sm.jpg);
    background-size: 225px;
    background-repeat: no-repeat;
    opacity: .6;
}

:root {
    --bridge-box-border-color: #C2C2C2;
}


/* TODO: roll this in to the soar-style.scss */
.soar-button-primary {
    flex: 0 0 auto !important;
    align-self: center !important;
}

.bridge-container {
    padding: 16px;
    overflow: auto;
}

.bridge-card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    border-radius: 0;
    border: 1px solid #cccccc;
    font-size: inherit !important;
    margin: 0px 10px 10px 10px;
    flex-grow: 1;
}

.bridge-card-body {
    display: flex;
    flex: 1;
    align-items: center;
    overflow-x:auto;
}

.bridge-box-body {
    padding:15px;
    align-items: start;
    text-align: start;
}

.bridge-box {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto; /* equal width columns */
    align-self: stretch;
    min-width: 0; /* prevents overflow */
    min-height: 0; /* critical */
    text-align: center;
    border: 1px solid var(--bridge-box-border-color);
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.bridge-box-gray {
    background-color: #f2f2f2;
}

.bridge-box-title {
    background-color: #f2f2f2;
    color: black;
    padding: 5px;
    border-bottom: 1px solid var(--bridge-box-border-color);
    font-weight: bold;
    text-align: left;
}

.bridge-box-title-special {
    background-color: var(--app-sidebar-bg);
    color: var(--app-theme-smooth-on-yellow);
    text-align: center;
    border: 0px;
}

.bridge-box-fill {
    flex: 1 1 auto;
    min-width: 0;
}

.bridge-box-fit-to-contents {
    flex: 0 0 auto;
    min-width: 50%;
}

.bridge-image-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

    .bridge-image-box > div:nth-child(2) {
        flex: 1;
        min-height: 0;
        overflow: auto; /* optional */
    }

.bridge-container-row {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    gap: 15px;
}

.bridge-container-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bridge-image-background {
    /* object will require another class to specify the background-image */
    flex: 1;
    background-size: auto 100%; /* scale image to cover entire div */
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.bridge-box-content-special {
    margin-top: 5px;
}

.bridge-box-content-special-grow {
    flex: 1;
}

.bridge-box-content-special-shrink {
    flex: 0;
}

/* work centers */
 
.black-widow {
    background-image: url(/images/workcenters/blackwidow.jpg);
}

.crush {
    background-image: url(/images/workcenters/crush.jpg);
}

.darth-vader {
    background-image: url(/images/workcenters/darthvader.jpg);
}

.drogon {
    background-image: url(/images/workcenters/drogon.jpg);
}

.fish-tank {
    background-image: url(/images/workcenters/fishtank.jpg);
}

.hulk {
    background-image: url(/images/workcenters/hulk.jpg);
}

.kung-fu-panda {
    background-image: url(/images/workcenters/kungfupanda.jpg);
}

.optimus-prime {
    background-image: url(/images/workcenters/optimusprime.jpg);
}

.oscar {
    background-image: url(/images/workcenters/oscar.jpg);
}

.papa-smurf {
    background-image: url(/images/workcenters/papasmurf.jpg);
}

.robocop {
    background-image: url(/images/workcenters/robocop.jpg);
}

.sandman {
    background-image: url(/images/workcenters/sandman.jpg);
}

.shrek {
    background-image: url(/images/workcenters/shrek.jpg);
}

.silver-bullet {
    background-image: url(/images/workcenters/silverbullet.jpg);
    background-position: right !important;
}

.snoopy {
    background-image: url(/images/workcenters/snoopy.jpg);
}

.snow-white {
    background-image: url(/images/workcenters/snowwhite.jpg);
}

.thanos {
    background-image: url(/images/workcenters/thanos.jpg);
}

.the-beast {
    background-image: url(/images/workcenters/thebeast.jpg);
}

.tigger {
    background-image: url(/images/workcenters/tigger.jpg);
}

.viserion {
    background-image: url(/images/workcenters/viserion.jpg);
}

.wonder-woman {
    background-image: url(/images/workcenters/wonderwoman.jpg);
}

.missing {
    background-image: url(/images/missing.png);
}

/* end work centers*/

.k-toolbar-item:first-child:has(.grid-filter-searchbox) {
    flex: 1 0 auto; /* if the first child in the toolbar is our searchbox, then flex to make it span the width*/
}

.grid-filter-searchbox {
    flex: 1 0 auto; /* need to set the flex here too so that all elements will stretch*/
    text-transform: uppercase;
}

    .grid-filter-searchbox .k-input-separator {
        display:none;
    }

/* used to align grid number columns to the right*/
.k-grid-header .k-header.text-right .k-link {
    justify-content: flex-end;
}

/* used to align grid number columns to the right*/
.k-grid-header .k-header.text-center .k-link {
    justify-content: center;
}


/* make sure the footer's text aligns to top */
.k-grid tfoot td,
.k-grid tfoot th {
    vertical-align: top !important;
}


/* Textbox / MaskedTextBox / NumericTextBox readonly inputs */
.k-readonly-field input:read-only,
.k-readonly-field input[readonly],
.k-textbox input:read-only,
.k-textbox input[read-only]:focus {
    background-color: #f5f5f5 !important;
    color: #777777;
    border-radius: 0 !important;
}

/* Disabled DropDownList marked as readonly – match the textbox grey */
.k-readonly-field.k-disabled,
.k-readonly-field .k-disabled,
.k-disabled.k-readonly-field {
    opacity: 1 !important;
    filter: none !important;
    background-color: #f5f5f5 !important;
    color: #777777 !important;
}

.k-readonly-field.k-disabled .k-input-inner,
.k-readonly-field .k-disabled .k-input-inner {
    color: #777777 !important;
}

.grid-edit-button {
    color: var(--app-theme-smooth-on-blue);
}

.grid-delete-button {
    color: #5e5e5e;
}

.grid-email-button {
    color: var(--app-theme-smooth-on-blue);
}

.k-treelist .k-treelist-toggle .k-svg-icon {
    color: var(--kendo-component-text, inherit) !important;
    fill: currentColor !important;
}

/* 2. Match the Size (Kendo Grids typically use 16px icons with a 24px-32px clickable hit box) */
.k-treelist .k-treelist-toggle {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    /* Target the underlying SVG element specifically */
    .k-treelist .k-treelist-toggle .k-svg-icon,
    .k-treelist .k-treelist-toggle .k-svg-icon svg {
        width: 16px !important; /* standard kendo grid icon size */
        height: 16px !important; /* standard kendo grid icon size */
        font-size: 16px !important;
    }

    /* 3. Optional: Hover State Matching */
    .k-treelist .k-treelist-toggle:hover {
        background-color: var(--kendo-component-hover-bg, rgba(0,0,0,0.04)) !important;
        border-radius: 4px;
    }