@media (orientation: portrait) {
html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Main flex container - stack vertically */
body > div {
    height: 100vh;
    margin: 0;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    overflow: hidden;
}

/* Bible Reader Section - Top 50% */
#bible-reader {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
}

#bible-reader .form-group {
    flex-shrink: 0;
    background-color: #7A96A8;
    padding: 10px;
    color: #000;
}

#results {
    flex: 1;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Bible Reader tabs styling to match guides header */
#bible-reader .ui-tabs-nav {
    flex-shrink: 0;
    background-color: #7A96A8;
    margin: 0;
    padding: 5px;
    border: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

#bible-reader .ui-tabs-nav li {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    float: none;
    list-style: none;
}

#bible-reader .ui-tabs-nav li a {
    padding: 6px 12px;
    font-size: 12px;
    display: block;
}

/* Guides Section - Bottom 50% */
body > div > div:nth-child(2) {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: 0 !important;
    overflow: hidden;
}

body > div > div:nth-child(2) .form-group {
    flex-shrink: 0;
    background-color: #7A96A8;
    padding: 10px;
    color: #000;
    margin: 0;
    margin-bottom: 0 !important;
}

/* Search & Tabs Toolbar */
.search-bible-container {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}

.search-bible-container input {
    flex: 1;
    min-width: 200px;
}

.search-bible-container button {
    flex: 0 1 auto;
}

/* jQuery UI Tabs in Portrait Mode */
#guides {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: none;
    padding: 0;
    background-color: #fff;
}

#guides.ui-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid #ccc;
    border-top: none;
}

#guides > .ui-tabs-nav,
#guides > ul {
    flex-shrink: 0;
    background-color: #7A96A8;
    margin: 0;
    padding: 5px;
    border: none;
    border-top: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
}

#guides > .ui-tabs-nav li,
#guides > ul li {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    float: none;
    list-style: none;
}

#guides > .ui-tabs-nav li a,
#guides > ul li a {
    padding: 6px 12px;
    font-size: 12px;
    display: block;
    text-decoration: none;
}

#guides > .ui-tabs-panel,
#guides > div {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 0px;
    background-color: #fff;
    margin: 0;
    display: none;
    border-top: 1px solid #ccc;
}

#guides > .ui-tabs-panel.ui-tabs-active,
#guides > div {
    display: block;
}

/* Ensure dialog is hidden */
#dialog-overlay,
#dialog {
    display: none;
}
}