/* Shared application UI. Tenant website.css is loaded after this file so
   operators can continue to customize their reservation site's branding. */
.lwo-app {
    --app-ink: #192e46;
    --app-muted: #5d6e82;
    --app-line: #dce5ee;
    --app-accent: #087f8c;
    --bs-primary: #087f8c;
    --bs-primary-rgb: 8, 127, 140;
    --bs-body-font-family: "Segoe UI", Arial, sans-serif;
    --bs-body-color: #192e46;
    --bs-border-color: #dce5ee;
    margin: 0 !important;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--app-ink);
}
.lwo-app .app-shell { margin: 24px auto; padding: 0; background: #fff; border: 1px solid var(--app-line); border-radius: 16px; box-shadow: 0 12px 40px #142b4514; }
.lwo-app .app-header { border-radius: 16px 16px 0 0; }
.lwo-app .app-header > div[id$="HeaderDiv"] { padding: 22px 24px; }
.lwo-app .app-header .navbar { padding: 10px 18px; }
.lwo-app .app-nav-caption { font-size: 14px; font-weight: 700; margin-right: 24px; }
.lwo-app .app-header .nav-link { border-radius: 6px; padding: 9px 13px; font-weight: 600; }
.lwo-app .app-header .nav-link:hover, .lwo-app .app-header .nav-link:focus-visible { background: #ffffff26; }
.lwo-app .app-content { padding: 30px; min-height: 55vh; }
.lwo-app .app-page-title { font-size: 28px; line-height: 1.25; letter-spacing: -.6px; font-weight: 650; margin: 0 0 10px; }
.lwo-app .app-description { color: var(--app-muted); margin-bottom: 26px; max-width: 640px; }
.lwo-app .app-eyebrow { display: block; color: var(--app-accent); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 10px; }
.lwo-app .card { background: #fff !important; border: 1px solid var(--app-line); border-radius: 10px; box-shadow: 0 3px 12px #142b4505; }
.lwo-app .card-header { background: #edf4f7 !important; color: var(--app-ink); border-bottom: 1px solid var(--app-line); padding: 15px 20px; font-weight: 600; border-radius: 9px 9px 0 0; }
.lwo-app .card-body { padding: 22px; }
.lwo-app .login-title { font-size: 23px; font-weight: 650; margin: 0 0 6px; letter-spacing: -.4px; }
.lwo-app .booking-actions .card-body > div[style] { color: var(--app-muted); margin-top: 14px; line-height: 1.6; }
.lwo-app .booking-actions .card-body > .btn { width: 100%; }
.lwo-app .booking-introduction { padding-top: 8px; }
.lwo-app .btn { border-radius: 6px; font-weight: 600; padding: 8px 16px; transition: background-color .15s, border-color .15s; }
.lwo-app .btn-primary { --bs-btn-bg: #087f8c; --bs-btn-border-color: #087f8c; --bs-btn-hover-bg: #066773; --bs-btn-hover-border-color: #066773; --bs-btn-active-bg: #055764; --bs-btn-active-border-color: #055764; --bs-btn-disabled-bg: #087f8c; --bs-btn-disabled-border-color: #087f8c; }
.lwo-app .form-control, .lwo-app .form-select { font-size: 14px; border-color: #b9c8d7; border-radius: 5px; padding: 8px 10px; }
.lwo-app .form-control:focus, .lwo-app .form-select:focus { border-color: #398e9e; box-shadow: 0 0 0 3px #087f8c26; }
.lwo-app .form-check-input { accent-color: var(--app-accent); }
.lwo-app .form-label, .lwo-app .col-form-label { font-weight: 600; }
.lwo-app .dxbs-fl .dxbs-fl-gd { margin-bottom: 12px !important; }
.lwo-app .modal-content { background: #fff; border-color: var(--app-line); border-radius: 12px; box-shadow: 0 16px 60px #142b4533; }
.lwo-app .modal-header, .lwo-app .modal-footer { padding: 18px 24px; border-color: var(--app-line); }
.lwo-app .modal-body { padding: 24px; }
.lwo-app .alert { border-radius: 8px; padding: 14px 18px; }
.lwo-app .groupHeaderCss { background: #dcefee !important; color: #165b59; }
.lwo-app .parenttGroupHeaderCss { background: #e4edf7; color: #294c70; }
.lwo-app .studentGroupHeaderCss { background: #fff4d9; color: #725819; }
.lwo-app .termsGroupHeaderCss { background: #e9f1e4; color: #3d5e2b; }
.lwo-app .EditFormHeader { background: #edf4f7; color: var(--app-ink); padding: 12px; }
.lwo-app .app-footer-links { margin: 0; border-top: 1px solid var(--app-line); padding: 18px 0 !important; gap: 12px; }
.lwo-app .app-footer-links a { color: #425d77; text-underline-offset: 3px; }
.lwo-app .app-footer { font-size: 12px; color: var(--app-muted); padding: 18px 20px; }
.lwo-app .app-footer p { margin: 0; }
.lwo-app .app-skip-link { position: absolute; top: -100px; left: 16px; z-index: 10000; background: white; color: #192e46; padding: 12px; border-radius: 6px; }
.lwo-app .app-skip-link:focus { top: 12px; }
.lwo-app a:focus-visible, .lwo-app button:focus-visible, .lwo-app input[type="submit"]:focus-visible { outline: 3px solid #3d9eaa; outline-offset: 3px; }
/* Classic DevExpress grid surfaces; keep status colors and popup sizing intact. */
.lwo-app table[class*="dxgvControl"] { border-color: var(--app-line); font-family: "Segoe UI", Arial, sans-serif; }
.lwo-app td[class*="dxgvHeader"] { background: #edf2f7; background-image: none; color: #334b65; font-weight: 600; padding: 10px; border-color: var(--app-line); }
.lwo-app tr[class*="dxgvDataRow"] > td { padding: 9px; border-bottom-color: #e8edf3; }
.lwo-app td[class*="dxgvGroupPanel"], .lwo-app td[class*="dxgvPagerBottomPanel"] { background: #f7f9fc; color: var(--app-muted); padding: 12px; }
.lwo-app .table > thead { background: #edf2f7; }
.lwo-app .table > :not(caption) > * > * { padding: 10px; }
.client-app { background: #f2f5f9; }
.client-app > form { min-height: 100vh; }
.client-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px max(24px, calc((100vw - 1360px) / 2)); background: #142b45; color: white; }
.client-brand { display: flex; align-items: center; gap: 14px; }
.client-brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #49a9b2; border-radius: 12px; background: #087f8c; font-weight: 700; font-size: 17px; }
.client-brand-name { display: block; font-size: 22px; font-weight: 650; letter-spacing: -.5px; }
.client-brand-caption { display: block; color: #bdcddd; font-size: 12px; }
.client-home-link { color: white; border: 1px solid #61758a; border-radius: 6px; padding: 7px 14px; text-decoration: none; }
.client-home-link:hover { color: white; background: #ffffff14; }
.lwo-app .client-shell { max-width: 1360px; padding: 0 24px; }
.client-navigation { padding: 18px 0; }
.client-navigation .client-menu { background: white; border: 1px solid var(--app-line); border-radius: 8px; padding: 8px; }
.client-menu .dxm-main { background: white; border: 0; font: 600 14px "Segoe UI", Arial, sans-serif; }
.client-menu .dxm-main .dxm-item { background: white; color: #334b65; }
.client-menu .dxm-main .dxm-hovered, .client-menu .dxm-main .dxm-selected { background: #e9f5f5; color: #066b76; }
.client-account-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--app-muted); padding: 0 2px 18px; font-size: 12px; }
.client-account-bar > span { color: var(--app-ink); font-size: 14px; }
.client-content { background: white; border: 1px solid var(--app-line); border-radius: 12px; padding: 28px; min-height: 55vh; overflow-x: auto; }
.workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.workspace-card { padding: 26px; border: 1px solid var(--app-line); border-radius: 10px; text-decoration: none; color: var(--app-ink); }
.workspace-card:hover { background: #f4fafb; border-color: #81b7bf; }
.workspace-card > i { display: inline-block; color: var(--app-accent); background: #e9f5f5; padding: 8px 12px; border-radius: 8px; font-size: 22px; margin-bottom: 16px; }
.workspace-card h2 { font-size: 19px; font-weight: 650; }
.workspace-card p { color: var(--app-muted); }
.workspace-card > span { color: #087583; font-weight: 600; }
@media (max-width: 767px) {
    .lwo-app .app-shell { margin: 0 auto; border-radius: 0; border: 0; }
    .lwo-app .app-header > div[id$="HeaderDiv"] { padding: 16px; }
    .lwo-app .app-content { padding: 20px 14px; }
    .lwo-app .card-body { padding: 16px; }
    .lwo-app .app-footer-links { flex-direction: column; }
    .lwo-app .app-footer-links .col { text-align: center !important; }
    .client-header { padding: 20px 16px; }
    .client-brand-name { font-size: 19px; }
    .lwo-app .client-shell { padding: 0 12px; }
    .client-content { padding: 18px; }
    .workspace-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .lwo-app .btn { transition: none; } }
@media print {
    .lwo-app .app-header, .client-header, .client-navigation, .app-skip-link, .client-account-bar, .lwo-app .app-footer-links { display: none; }
    .lwo-app .app-shell, .client-content { margin: 0; border: 0; box-shadow: none; padding: 0; overflow: visible; }
    .lwo-app .app-content { padding: 0; }
}
.lwo-app .account-navigation { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px; margin-bottom: 22px; background: #f2f6fa; border: 1px solid var(--app-line); border-radius: 8px; }
.lwo-app .account-navigation .divmenu { padding: 0; }
.lwo-app .account-navigation a { display: inline-block; padding: 8px 14px; color: #28516b; text-decoration: none; border-radius: 5px; font-weight: 600; }
.lwo-app .account-navigation a:hover { color: #066b76; background: #dfedef; }
.lwo-app .account-menu-state { display: none; }
.lwo-app .reservation-history-table { overflow-x: auto; padding-bottom: 8px; }
/* Website template editor */
.lwo-app .template-editor { max-width: 1160px; margin: 0 auto; }
.lwo-app .template-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lwo-app .template-section { padding: 28px; min-width: 0; text-align: left; }
.lwo-app .template-columns .template-section + .template-section { border-left: 1px solid var(--app-line); }
.lwo-app .template-section h2 { margin: 0 0 8px; font-size: 19px; font-weight: 650; color: var(--app-ink); }
.lwo-app .template-section h3 { font-size: 15px; font-weight: 650; margin: 0 0 6px; }
.lwo-app .template-help { color: var(--app-muted); font-size: 13px; line-height: 1.55; margin: 8px 0 18px; }
.lwo-app .template-field { margin-top: 22px; }
.lwo-app .template-field > label, .lwo-app .template-upload > label { display: block; font-weight: 600; color: var(--app-ink); margin-bottom: 8px; }
.lwo-app .template-field textarea { resize: vertical; min-height: 106px; }
.lwo-app .template-field .form-control, .lwo-app .template-field .form-select { width: 100%; max-width: 640px; }
.lwo-app .template-upload { margin-top: 22px; padding: 18px; border: 1px solid var(--app-line); border-radius: 8px; background: #f7f9fc; }
.lwo-app .template-upload .btn { margin-top: 14px; white-space: normal; }
.lwo-app .template-upload input[type="file"] { width: 100%; font-size: 13px; }
.lwo-app .template-upload-status:not(:empty) { display: block; margin-top: 16px; color: #246542; font-size: 13px; }
.lwo-app .template-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.lwo-app .template-option { padding: 18px; background: #f8fafc; border: 1px solid var(--app-line); border-radius: 8px; }
.lwo-app .template-option label { font-weight: 600; color: var(--app-ink); cursor: pointer; }
.lwo-app .template-option input[type="checkbox"] { margin-right: 9px; width: 16px; height: 16px; vertical-align: middle; accent-color: var(--app-accent); }
.lwo-app .template-option .template-help { margin: 7px 0 0 25px; }
.lwo-app .template-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 18px 22px; background: #f2f6fa; border: 1px solid var(--app-line); border-radius: 8px; }
.lwo-app .template-save-bar .btn { flex-shrink: 0; min-width: 150px; }
.lwo-app .template-feedback span:not(:empty) { display: block; padding: 4px 0; font-weight: 600; }
.lwo-app .template-error { color: #a52b36; }
.lwo-app .template-success { color: #246542; }
.lwo-app .template-tabs > tbody > tr > td { border-color: var(--app-line); }
.lwo-app .template-tabs [class*="dxtc-content"] { background: white; border-color: var(--app-line); }
.lwo-app .template-tabs [class*="dxtc-tab"] { font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; }
.lwo-app .template-tabs [class*="dxtc-activeTab"] { background: #e9f5f5; color: #066b76; font-weight: 600; }
@media (max-width: 900px) {
    .lwo-app .template-columns, .lwo-app .template-options { grid-template-columns: 1fr; }
    .lwo-app .template-columns .template-section + .template-section { border-left: 0; border-top: 1px solid var(--app-line); }
    .lwo-app .template-section { padding: 20px; }
    .lwo-app .template-save-bar { flex-wrap: wrap; }
}
/* Default navigation color when a tenant has no custom stylesheet. */
.navCustomColor { background-color: dodgerblue; }
.lwo-app .template-css-editor { margin-top: 22px; }
.lwo-app .template-css-editor > label { display: block; margin-bottom: 8px; font-weight: 600; }
.lwo-app .template-css-editor > .template-help { display: block; }
.lwo-app .template-css-editor .css-source { font: 13px/1.6 Consolas, "Courier New", monospace; white-space: pre; overflow: auto; min-height: 340px; resize: vertical; tab-size: 4; }
.lwo-app .template-css-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }