/* ============================================================
   APPLICATION SHELL
   Standard application-wide CSS for authenticated programs
   ============================================================ */

/* ============================================================
   Browser / Application Shell
   ============================================================ */

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

body {
    font-family:Arial, sans-serif;
}

.application-shell {
    width:100vw;
    height:100vh;
    overflow:auto;
    background-color:#e3f2fd;
}

.application-shell-content {
    min-width:1100px;
    min-height:100%;
    padding:16px;
    box-sizing:border-box;
}

/* ============================================================
   Standard Application Pane
   ============================================================ */

.application-pane {
    background-color:#e3f2fd;
    padding:16px;
    border-radius:10px;
    border:1px solid #ccc;
    margin:12px auto 0;
    min-height:90vh;
    box-sizing:border-box;
}

.application-pane h4,
.application-pane h5 {
    text-align:center;
    font-weight:600;
    color:#1976d2;
    margin-bottom:12px;
}

/* Temporary compatibility while existing programs are converted */

.property-pane,
.lease-pane {
    background-color:#e3f2fd;
    padding:16px;
    border-radius:10px;
    border:1px solid #ccc;
    margin:12px auto 0;
    min-height:90vh;
    display:none;
    box-sizing:border-box;
}

.property-pane {
    max-width:1100px;
}

.property-pane h5,
.lease-pane h4 {
    text-align:center;
    font-weight:600;
    color:#1976d2;
    margin-bottom:12px;
}

/* ============================================================
   Standard Application Toolbar
   ============================================================ */

.application-toolbar,
.prop-toolbar {
    width:100%;
    margin:8px 0 12px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.application-toolbar label,
.prop-toolbar label {
    margin:0;
}

.application-toolbar input[type="text"],
.prop-toolbar input[type="text"] {
    width:30ch;
    max-width:100%;
}

/* ============================================================
   Standard Tab Buttons
   ============================================================ */

.tab-btn {
    padding:6px 12px;
    margin-right:6px;
    border:none;
    background-color:#bbdefb;
    border-radius:8px;
    font-size:10pt;
    color:#000;
}

.tab-btn.active {
    background-color:#1976d2;
    color:white;
    font-weight:bold;
}

/* ============================================================
   Standard Grid
   ============================================================ */

.grid-table {
    width:100%;
    border-collapse:collapse;
    font-size:10pt;
    font-family:Arial, sans-serif;
}

.grid-table th,
.grid-table td {
    border:1px solid #ccc;
    padding:4px 6px;
    text-align:left;
}

.grid-table th {
    background-color:#e3f2fd;
    color:#000;
}

.grid-table tr:hover {
    background-color:#f1f1f1;
    cursor:pointer;
}

/* ============================================================
   Page Header
   Classes used by writePageHeader()
   ============================================================ */

.app-header {
    border:2px solid #2596be;
    background:#eaf6fb;
    padding:10px 12px;
    margin:20px auto;
    width:80%;
    border-radius:12px;
    box-sizing:border-box;
}

.app-header-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:nowrap;
    gap:14px;
}

.app-header-left {
    flex:0 0 320px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.app-header-brand {
    display:flex;
    align-items:center;
    gap:12px;
    background:#e3f2fd;
    border:1px solid #cfe7f3;
    border-radius:12px;
    padding:10px 14px;
}

.app-header-logo-box {
    flex:0 0 72px;
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.app-header-logo {
    width:105px;
    height:105px;
    max-width:none;
    max-height:none;
    object-fit:contain;
}

.app-header-product-name {
    flex:1 1 auto;
    font-size:20px;
    font-weight:600;
    color:#2596be;
    line-height:1.1;
    white-space:nowrap;
}

.app-header-center {
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:8px;
    min-width:0;
}

.app-header-actions {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:nowrap;
}

.app-header-home {
    display:inline-block;
    padding:4px 12px;
    background-color:#2596be;
    color:white;
    text-decoration:none;
    border-radius:6px;
    font-size:13px;
}

.app-header-home:hover {
    color:white;
}

.app-header-help {
    font-size:14px;
    color:#2596be;
    font-weight:bold;
    cursor:pointer;
}

.app-header-search {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
}

.app-header-search-input {
    max-width:520px;
    width:75%;
    padding:5px 10px;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:14px;
}

.app-header-search-icon {
    cursor:pointer;
    width:18px;
    height:18px;
    vertical-align:middle;
}

.app-header-right {
    flex:0 0 340px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
}

.app-header-info-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.app-header-info-label {
    color:#2596be;
    font-size:13px;
    font-weight:bold;
    white-space:nowrap;
}

.app-header-info-input {
    width:220px;
    padding:4px 8px;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:13px;
    background:#f7fbfe;
}

/* ============================================================
   Main Menu
   Classes used by ListMainMenu()
   ============================================================ */

.mainmenu-container {
    border:2px solid #2596be;
    background-color:white;
    padding:10px;
    margin-bottom:20px;
    width:fit-content;
    font-family:Arial, sans-serif;
    margin-left:auto;
    margin-right:auto;
}

.mainmenu-container nav ul {
    list-style-type:none;
    padding:0;
    margin:0;
}

.mainmenu-container nav > ul {
    display:flex;
    gap:20px;
}

.mainmenu-container nav ul li {
    position:relative;
}

.mainmenu-container nav ul li a {
    text-decoration:none;
    color:#2596be;
    font-weight:bold;
    padding:6px 12px;
    display:inline-block;
}

.mainmenu-container nav > ul > li:hover > a {
    background-color:#e3f2fd;
    border-radius:5px;
    box-shadow:0 2px 8px rgba(0,0,0,0.20);
}

.mainmenu-container ul.dropdown {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:auto;
    background-color:#e3f2fd;
    border:1px solid #ccc;
    z-index:1000;
    padding:5px 0;
    min-width:280px;
    white-space:nowrap;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

/* ADMIN ONLY - align the first dropdown from the right edge
   so the Admin dropdown extends to the left */
.mainmenu-container li.utilities-menu > ul.dropdown {
    left:auto;
    right:0;
}

.mainmenu-container li.submenu:hover > ul.dropdown {
    display:block;
}

.mainmenu-container ul.dropdown > li {
    width:auto;
    min-width:270px;
    padding:5px;
}

.mainmenu-container ul.dropdown > li.utility-group {
    position:relative;
    width:auto;
    min-width:270px;
    padding:0;
}

.mainmenu-container ul.dropdown > li.utility-group > a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-width:250px;
    padding:10px 12px;
    color:#2596be;
    background-color:#e3f2fd;
    border-radius:0;
    box-sizing:border-box;
}

.mainmenu-container ul.dropdown > li.utility-group:hover > a {
    background-color:#ffffff;
}

.mainmenu-container ul.dropdown > li.utility-group .utility-arrow {
    margin-left:16px;
    font-size:12px;
    transform:rotate(180deg);
}

/* ADMIN SUBMENUS - open to the LEFT */
.mainmenu-container ul.dropdown > li.utility-group > ul.utility-dropdown {
    display:none;
    position:absolute;
    top:0;
    right:100%;
    left:auto;
    margin:0;
    padding:5px 0;
    min-width:300px;
    list-style:none;
    background-color:#e3f2fd;
    border:1px solid #ccc;
    white-space:nowrap;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
    z-index:2000;
}

.mainmenu-container ul.dropdown > li.utility-group:hover > ul.utility-dropdown {
    display:block;
}

.mainmenu-container ul.dropdown > li.utility-group > ul.utility-dropdown > li {
    position:relative;
    display:block;
    width:auto;
    min-width:290px;
    padding:5px;
}

.mainmenu-button {
    background-color:#ffffff;
    border:1px solid #2596be;
    color:#2596be;
    padding:4px 8px;
    margin-right:8px;
    font-size:12px;
    border-radius:5px;
    cursor:pointer;
}

.mainmenu-button:hover {
    background-color:#e3f2fd;
}

.help-icon {
    width:16px;
    height:16px;
    vertical-align:middle;
    cursor:pointer;
}

/* ============================================================
   Screen Help Modal
   Classes used by writePageHeader()
   ============================================================ */

.help-modal {
    display:none;
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    background-color:rgba(0,0,0,0.4);
}

.help-modal-content {
    background-color:#fff;
    margin:10% auto;
    padding:20px;
    border:1px solid #888;
    width:50%;
    border-radius:10px;
    box-sizing:border-box;
}

.help-modal-close {
    color:#aaa;
    float:right;
    font-size:28px;
    font-weight:bold;
    cursor:pointer;
}

.help-modal-body {
    margin-top:10px;
}

.help-modal-loading {
    font-size:12px;
    color:#666;
}

.help-modal-section-title {
    margin:0 0 8px 0;
}

.help-modal-image {
    max-width:100%;
    height:auto;
    cursor:zoom-in;
}

/* ============================================================
   Tablet / Narrow Viewport Support
   Preserve desktop working width; scroll application shell when
   the device viewport is narrower than the application canvas.
   ============================================================ */

@media (max-width:1100px) {
    .application-shell-content {
        min-width:1100px;
    }
}

/* ============================================================
   Context-Aware Entity Toolbar
   Property / Lease / Work Order navigation
   ============================================================ */

.entity-toolbar-shell {
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    margin:8px 0 12px 0;
    padding:4px 0 8px 0;
    box-sizing:border-box;
    -webkit-overflow-scrolling:touch;
}

.entity-toolbar {
    display:inline-flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:6px;
    min-width:max-content;
}

.entity-toolbar-link {
    display:inline-block;
    flex:0 0 auto;
    padding:6px 12px;
    border:none;
    background-color:#bbdefb;
    border-radius:8px;
    font-size:10pt;
    color:#000;
    text-decoration:none;
    white-space:nowrap;
}

.entity-toolbar-link:hover {
    background-color:#90caf9;
    color:#000;
}

.entity-toolbar-link.active {
    background-color:#1976d2;
    color:#fff;
    font-weight:bold;
}