/* HotelPreflight PMS Modern UI — 2026-10-30 Presentation-only layer. Existing IDs, forms and JS behavior stay unchanged. */ #appShell.pms-mode{ --hp-navy:#0b2b5a; --hp-navy-2:#103b78; --hp-blue:#246bfd; --hp-blue-2:#0f56dc; --hp-ink:#10254a; --hp-muted:#667995; --hp-line:#dfe7f2; --hp-soft:#f5f8fd; --hp-panel:#ffffff; --hp-green:#20a35a; --hp-orange:#e58a1f; --hp-purple:#7c4dff; --hp-red:#e04646; --hp-shadow:0 16px 40px rgba(16,37,74,.08); --hp-shadow-soft:0 8px 24px rgba(16,37,74,.06); background: radial-gradient(circle at 88% 4%,rgba(55,126,255,.10),transparent 24%), linear-gradient(180deg,#f8fbff 0%,#f2f6fb 100%); } /* ---------- shell / navigation ---------- */ #appShell.pms-mode .rea-sidebar{ background: radial-gradient(circle at 10% 8%,rgba(49,112,255,.16),transparent 24%), linear-gradient(180deg,#082751 0%,#0a315f 58%,#0a2a53 100%); border-right:1px solid rgba(255,255,255,.06); box-shadow:18px 0 44px rgba(8,39,81,.10); } #appShell.pms-mode .rea-sidebar-brand{padding:22px 18px 20px;border-bottom:1px solid rgba(255,255,255,.09)} #appShell.pms-mode .rea-sidebar-logo{width:62px;height:62px;border-radius:15px;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.18)} #appShell.pms-mode .rea-sidebar-brand-copy strong{font-size:18px;letter-spacing:-.02em;color:#fff} #appShell.pms-mode .rea-sidebar-brand-copy small{color:#b7c9e4;line-height:1.35} #appShell.pms-mode .rea-sidebar-nav{padding:16px 12px} #appShell.pms-mode .workspace-tab{ position:relative;min-height:48px;border-radius:13px;padding:0 14px 0 46px;color:#f2f6ff; font-size:15px;font-weight:800;letter-spacing:.01em;border:1px solid transparent;background:transparent; } #appShell.pms-mode .workspace-tab::before{ position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:18px;color:#c8daf6; } #appShell.pms-mode #pmsTab::before{content:"▦"} #appShell.pms-mode #preflightTab::before{content:"✓"} #appShell.pms-mode .workspace-tab.active, #appShell.pms-mode .workspace-tab[aria-expanded="true"]{ background:linear-gradient(135deg,rgba(36,107,253,.46),rgba(26,89,204,.24)); border-color:rgba(121,170,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 10px 24px rgba(0,0,0,.10); } #appShell.pms-mode .rea-sidebar-subnav{margin:4px 0 10px;padding-left:10px;border-left:1px solid rgba(173,200,240,.15)} #appShell.pms-mode .rea-sidebar-subnav button{ position:relative;min-height:44px;margin:2px 0;border-radius:11px;padding:0 12px 0 44px;color:#b9cbe6; font-size:13px;font-weight:750;text-align:left;transition:.16s ease; } #appShell.pms-mode .rea-sidebar-subnav button::before{ position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;text-align:center; color:#9fc0ec;font-size:15px;font-weight:900; } #appShell.pms-mode .rea-sidebar-subnav button[data-pms-view="overview"]::before{content:"⌂"} #appShell.pms-mode .rea-sidebar-subnav button[data-pms-view="calendar"]::before{content:"▣"} #appShell.pms-mode .rea-sidebar-subnav button[data-pms-view="reservations"]::before{content:"≡"} #appShell.pms-mode .rea-sidebar-subnav button[data-pms-view="guests"]::before{content:"●"} #appShell.pms-mode .rea-sidebar-subnav button[data-pms-view="rooms"]::before{content:"▰"} #appShell.pms-mode .rea-sidebar-subnav button[data-pms-view="inventory"]::before{content:"◆"} #appShell.pms-mode .rea-sidebar-subnav button[data-pms-view="reports"]::before{content:"▥"} #appShell.pms-mode .rea-sidebar-subnav button[data-pms-view="users"]::before{content:"♟"} #appShell.pms-mode .rea-sidebar-subnav button[data-pms-view="channel"]::before{content:"⌁"} #appShell.pms-mode .rea-sidebar-subnav button:hover{color:#fff;background:rgba(255,255,255,.06)} #appShell.pms-mode .rea-sidebar-subnav button.active{ color:#0d4dac;background:linear-gradient(180deg,#fff,#f4f8ff); box-shadow:0 9px 20px rgba(2,18,45,.22);font-weight:900; } #appShell.pms-mode .rea-sidebar-subnav button.active::before{color:#246bfd} #appShell.pms-mode .rea-sidebar-footer{color:#91acd1;border-top-color:rgba(255,255,255,.08)} /* ---------- topbar ---------- */ #appShell.pms-mode .app-topbar{ min-height:78px;padding:11px 26px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px); border-bottom:1px solid rgba(216,226,240,.85);box-shadow:0 4px 20px rgba(20,52,93,.04); } #appShell.pms-mode .workspace-context{gap:2px} #appShell.pms-mode .workspace-hotel{font-size:11px;letter-spacing:.095em;text-transform:uppercase;color:#6e819c;font-weight:900} #appShell.pms-mode #workspaceModuleTitle{font-size:20px;color:#102f62;letter-spacing:-.02em} #appShell.pms-mode .header-language, #appShell.pms-mode .billing-status-chip, #appShell.pms-mode .account-menu-button{ border:1px solid #d8e3f1;background:#fff;box-shadow:0 6px 16px rgba(16,37,74,.04); } #appShell.pms-mode .header-language{min-height:44px;border-radius:12px;font-weight:800;color:#18365e} #appShell.pms-mode .billing-status-chip{min-height:44px;border-radius:12px} #appShell.pms-mode .account-menu-button{border-radius:14px;padding:6px 10px} #appShell.pms-mode .account-avatar{background:linear-gradient(135deg,#1556b9,#2473ff);box-shadow:0 7px 18px rgba(36,107,253,.24)} #appShell.pms-mode .account-summary strong{color:#12315c} #appShell.pms-mode .account-summary small{color:#72829a} #appShell.pms-mode .slogan-ticker{display:none} /* ---------- main canvas / hero ---------- */ #appShell.pms-mode .page{padding:26px 28px 34px;max-width:none;background:transparent} #appShell.pms-mode #pmsWorkspace{display:block} #appShell.pms-mode #pmsWorkspace.hidden{display:none} #appShell.pms-mode .pms-page-heading{ position:relative;overflow:hidden;min-height:150px;margin:0 0 18px;padding:28px 30px; display:flex;align-items:center;border-radius:22px;border:1px solid rgba(210,224,242,.92); background: radial-gradient(circle at 83% 28%,rgba(55,126,255,.16),transparent 18%), radial-gradient(circle at 94% 74%,rgba(68,192,162,.10),transparent 20%), linear-gradient(135deg,#ffffff 0%,#f8fbff 55%,#edf5ff 100%); box-shadow:var(--hp-shadow-soft); } #appShell.pms-mode .pms-page-heading::before{ content:"";position:absolute;right:35px;top:50%;transform:translateY(-50%);width:168px;height:104px; border-radius:22px;border:2px solid rgba(36,107,253,.12);box-shadow:0 0 0 18px rgba(36,107,253,.035),0 0 0 36px rgba(36,107,253,.018); } #appShell.pms-mode .pms-page-heading::after{ content:"↻";position:absolute;right:91px;top:50%;transform:translateY(-50%);font-size:48px;font-weight:300;color:rgba(36,107,253,.52); } #appShell.pms-mode[data-pms-view="calendar"] .pms-page-heading::after{content:"▣"} #appShell.pms-mode[data-pms-view="reservations"] .pms-page-heading::after{content:"≡"} #appShell.pms-mode[data-pms-view="guests"] .pms-page-heading::after{content:"●"} #appShell.pms-mode[data-pms-view="rooms"] .pms-page-heading::after{content:"▰"} #appShell.pms-mode[data-pms-view="inventory"] .pms-page-heading::after{content:"◆"} #appShell.pms-mode[data-pms-view="reports"] .pms-page-heading::after{content:"▥"} #appShell.pms-mode[data-pms-view="users"] .pms-page-heading::after{content:"♟"} #appShell.pms-mode[data-pms-view="channel"] .pms-page-heading::after{content:"⌁"} #appShell.pms-mode .pms-page-heading>div{position:relative;z-index:2;max-width:760px} #appShell.pms-mode .pms-page-heading .eyebrow{margin-bottom:7px;color:#5d75a0;font-size:11px;font-weight:950;letter-spacing:.09em} #appShell.pms-mode .pms-page-heading h2{margin:0 0 8px;color:#09285a;font-size:34px;line-height:1.08;letter-spacing:-.035em} #appShell.pms-mode .pms-page-heading .muted{max-width:720px;color:#607592;font-size:15px;line-height:1.5} /* ---------- common surfaces ---------- */ #appShell.pms-mode .pms-view{animation:hpFadeIn .18s ease} @keyframes hpFadeIn{from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:none}} #appShell.pms-mode .pms-view>.panel, #appShell.pms-mode .pms-view .panel{ border:1px solid var(--hp-line);border-radius:18px;background:rgba(255,255,255,.97);box-shadow:var(--hp-shadow-soft); } #appShell.pms-mode .pms-card-head{padding:18px 20px;border-bottom:1px solid #e9eef5} #appShell.pms-mode .pms-card-head h3, #appShell.pms-mode .pms-toolbar h3{color:#102b57;letter-spacing:-.015em} #appShell.pms-mode .muted{color:#6c7d95} #appShell.pms-mode .primary{ border:0;border-radius:11px;background:linear-gradient(135deg,#2473ff,#0d5de5);box-shadow:0 9px 20px rgba(36,107,253,.24); transition:transform .14s ease,box-shadow .14s ease,filter .14s ease; } #appShell.pms-mode .primary:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(36,107,253,.28);filter:saturate(1.05)} #appShell.pms-mode .pms-outline-btn, #appShell.pms-mode .pms-action-btn, #appShell.pms-mode .calendar-btn{ border:1px solid #d7e2f0;background:#fff;color:#235088;border-radius:10px;font-weight:800;box-shadow:0 4px 10px rgba(16,37,74,.03) } #appShell.pms-mode .pms-outline-btn:hover, #appShell.pms-mode .pms-action-btn:hover, #appShell.pms-mode .calendar-btn:hover{border-color:#a9c6ef;background:#f5f9ff;color:#0f58d0} #appShell.pms-mode input, #appShell.pms-mode select, #appShell.pms-mode textarea{border-color:#d8e3f0;border-radius:10px} #appShell.pms-mode input:focus, #appShell.pms-mode select:focus, #appShell.pms-mode textarea:focus{border-color:#7aa9ff;box-shadow:0 0 0 3px rgba(36,107,253,.10);outline:none} /* ---------- toolbars ---------- */ #appShell.pms-mode .pms-toolbar, #appShell.pms-mode .pms-rate-settings, #appShell.pms-mode .calendar-toolbar{ padding:18px 20px;margin-bottom:14px;background:linear-gradient(180deg,#fff,#fbfdff); } #appShell.pms-mode .pms-toolbar-actions{gap:9px} #appShell.pms-mode .pms-search{min-width:280px;min-height:42px;padding:10px 13px;background:#f8fbff} #appShell.pms-mode .pms-report-filters select{min-height:42px;background:#f8fbff} /* ---------- overview ---------- */ #appShell.pms-mode .pms-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:14px} #appShell.pms-mode .pms-kpi{ position:relative;overflow:hidden;min-height:118px;padding:20px 20px 18px 76px;border:1px solid var(--hp-line);border-radius:18px; background:linear-gradient(145deg,#fff,#f8fbff);box-shadow:var(--hp-shadow-soft) } #appShell.pms-mode .pms-kpi::before{ position:absolute;left:19px;top:21px;display:grid;place-items:center;width:42px;height:42px;border-radius:13px; background:#eaf3ff;color:#1666de;font-size:19px;font-weight:900 } #appShell.pms-mode .pms-kpi:nth-child(1)::before{content:"↘"} #appShell.pms-mode .pms-kpi:nth-child(2)::before{content:"●";background:#e8f8ef;color:#168b4d} #appShell.pms-mode .pms-kpi:nth-child(3)::before{content:"↗";background:#fff1e4;color:#d96c13} #appShell.pms-mode .pms-kpi:nth-child(4)::before{content:"▰";background:#f1eaff;color:#7047dd} #appShell.pms-mode .pms-kpi small{color:#667d9d;font-size:11px;font-weight:900;letter-spacing:.02em;text-transform:none} #appShell.pms-mode .pms-kpi strong{margin-top:8px;color:#0c2b5a;font-size:30px;letter-spacing:-.04em} #appShell.pms-mode .pms-mini-report-panel{margin-bottom:14px} #appShell.pms-mode .pms-mini-report{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 18px 18px} #appShell.pms-mode .pms-report-metric{ min-height:96px;padding:16px 17px;border-radius:15px;border:1px solid #e5ebf4;background:#fbfdff;box-shadow:none } #appShell.pms-mode .pms-report-metric.revenue{background:linear-gradient(145deg,#f2f8ff,#fff);border-inline-start:0} #appShell.pms-mode .pms-report-metric.payments{background:linear-gradient(145deg,#effaf4,#fff);border-inline-start:0} #appShell.pms-mode .pms-report-metric.outstanding{background:linear-gradient(145deg,#fff8ed,#fff);border-inline-start:0} #appShell.pms-mode .pms-report-metric strong{font-size:25px} #appShell.pms-mode .pms-overview-grid{gap:14px} #appShell.pms-mode .pms-list-card{overflow:hidden} #appShell.pms-mode .pms-mini-row{padding:13px 18px;border-bottom:1px solid #edf1f6;transition:.14s ease} #appShell.pms-mode .pms-mini-row:hover{background:#f8fbff} #appShell.pms-mode .pms-room-badge{background:#e9f2ff;color:#145ac0;border-radius:10px;min-width:48px;text-align:center} /* ---------- data tables ---------- */ #appShell.pms-mode .table-wrap{border-radius:18px;overflow:auto} #appShell.pms-mode .pms-table{font-size:13px} #appShell.pms-mode .pms-table thead th{ position:sticky;top:0;z-index:1;padding:12px 15px;background:#f5f8fc;color:#5e7290;border-bottom:1px solid #e0e8f3; font-size:10px;font-weight:950;letter-spacing:.055em } #appShell.pms-mode .pms-table tbody td{padding:13px 15px;border-bottom:1px solid #edf1f6;color:#344d6e} #appShell.pms-mode .pms-table tbody tr{transition:.12s ease} #appShell.pms-mode .pms-table tbody tr:hover{background:#f8fbff} #appShell.pms-mode .pms-table strong{color:#102c58} #appShell.pms-mode .pms-detail-line{margin-top:3px;color:#8190a5} #appShell.pms-mode .pms-status, #appShell.pms-mode .pms-room-status, #appShell.pms-mode .inventory-low-badge, #appShell.pms-mode .inventory-minibar-badge{border-radius:999px;padding:6px 10px;font-weight:900;box-shadow:inset 0 0 0 1px rgba(16,37,74,.035)} /* ---------- calendar ---------- */ #appShell.pms-mode #calendarWorkspace .calendar-toolbar{align-items:center} #appShell.pms-mode .calendar-title-block h2{font-size:22px;color:#102b57;letter-spacing:-.02em} #appShell.pms-mode .calendar-actions{gap:10px} #appShell.pms-mode .calendar-nav-group{padding:3px;border:1px solid #dbe5f1;border-radius:12px;background:#f8fbff} #appShell.pms-mode .calendar-nav-group .calendar-btn{border:0;box-shadow:none;background:transparent} #appShell.pms-mode .calendar-days{min-height:42px;background:#fff} #appShell.pms-mode .calendar-legend{margin:0 0 12px;padding:8px 12px;border:1px solid #e1e8f1;border-radius:12px;background:rgba(255,255,255,.78)} #appShell.pms-mode .calendar-panel{overflow:hidden} #appShell.pms-mode .reservation-calendar-wrap{background:#fff} #appShell.pms-mode .reservation-calendar{--calendar-line:#e5ebf3} #appShell.pms-mode .calendar-room-cell{background:#fbfdff} #appShell.pms-mode .calendar-reservation{border-radius:10px;box-shadow:0 5px 12px rgba(16,37,74,.10)} /* ---------- rooms ---------- */ #appShell.pms-mode .pms-rate-settings{border-left:4px solid #246bfd} #appShell.pms-mode .pms-room-grid{grid-template-columns:minmax(260px,.72fr) minmax(0,2fr);gap:14px} #appShell.pms-mode .pms-category-panel{overflow:hidden} #appShell.pms-mode .category-list{padding:10px} #appShell.pms-mode .category-item{ margin:7px 0;padding:13px 13px;border:1px solid #e5ecf5;border-radius:12px;background:#fbfdff;transition:.14s ease } #appShell.pms-mode .category-item:hover{border-color:#bdd3f1;background:#f5f9ff;transform:translateX(1px)} #appShell.pms-mode .category-item button{border:1px solid #d6e2f0;border-radius:9px;background:#fff;color:#24538c;font-weight:800} /* ---------- inventory ---------- */ #appShell.pms-mode .pms-inventory-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:14px} #appShell.pms-mode .pms-inventory-stat{ position:relative;min-height:105px;padding:20px 20px 18px 70px;border-radius:18px;background:linear-gradient(145deg,#fff,#f7fbff);box-shadow:var(--hp-shadow-soft) } #appShell.pms-mode .pms-inventory-stat::before{ content:"◆";position:absolute;left:18px;top:20px;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#eaf3ff;color:#1766da } #appShell.pms-mode .pms-inventory-stat.warning::before{content:"!";background:#fff0dc;color:#d97218} #appShell.pms-mode .pms-inventory-stat strong{font-size:29px} #appShell.pms-mode .inventory-row-actions{gap:5px} /* ---------- reports ---------- */ #appShell.pms-mode .pms-report-summary{grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;margin-bottom:14px} #appShell.pms-mode .pms-report-stat{ position:relative;overflow:hidden;min-height:100px;padding:16px 15px;border-radius:16px;background:linear-gradient(145deg,#fff,#f8fbff);box-shadow:var(--hp-shadow-soft) } #appShell.pms-mode .pms-report-stat::after{content:"";position:absolute;right:-18px;bottom:-22px;width:70px;height:70px;border-radius:50%;background:rgba(36,107,253,.055)} #appShell.pms-mode .pms-report-stat:nth-child(2)::after{background:rgba(32,163,90,.06)} #appShell.pms-mode .pms-report-stat:nth-child(4)::after{background:rgba(124,77,255,.06)} #appShell.pms-mode .pms-report-stat strong{font-size:22px;letter-spacing:-.025em} #appShell.pms-mode .pms-report-table{margin-bottom:14px} /* ---------- users ---------- */ #appShell.pms-mode #pmsViewUsers .pms-table tbody td:first-child strong::before{ content:"";display:inline-block;width:28px;height:28px;margin-right:9px;vertical-align:middle;border-radius:50%; background:linear-gradient(135deg,#e8f1ff,#d8e8ff);box-shadow:inset 0 0 0 1px #d2e1f5 } /* ---------- Channel Manager ---------- */ #appShell.pms-mode[data-pms-view="channel"] .pms-page-heading{margin-bottom:14px} #appShell.pms-mode .pms-channel-hero{ position:relative;min-height:108px;padding:20px 22px;margin-bottom:14px;border-radius:18px; background: radial-gradient(circle at 14% 50%,rgba(36,107,253,.12),transparent 20%), linear-gradient(120deg,#fff 0%,#f7fbff 65%,#edf5ff 100%); } #appShell.pms-mode .pms-channel-title{min-width:180px;min-height:54px} #appShell.pms-mode .pms-channel-title>div{display:none} #appShell.pms-mode .pms-channel-title::before{ content:"⌁";display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#e9f3ff,#f7fbff); color:#1c67d9;font-size:28px;box-shadow:inset 0 0 0 1px #d4e5fb } #appShell.pms-mode .pms-channel-brand{ margin-left:auto;border-radius:15px;padding:10px 14px;background:linear-gradient(135deg,#082f6c,#0b438e);box-shadow:0 10px 24px rgba(9,48,105,.18) } #appShell.pms-mode .pms-channel-brand img{width:70px;height:42px} #appShell.pms-mode .pms-channel-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px} #appShell.pms-mode .pms-channel-stat{ position:relative;min-height:106px;padding:18px 18px 16px 18px;border-radius:17px;background:linear-gradient(145deg,#fff,#f8fbff);box-shadow:var(--hp-shadow-soft) } #appShell.pms-mode .pms-channel-stat strong{font-size:20px;line-height:1.28} #appShell.pms-mode .pms-channel-inactive{ padding:34px 24px;border-style:dashed;background:linear-gradient(145deg,#fff,#f8fbff);text-align:center } #appShell.pms-mode .pms-channel-inactive::before{ content:"⌁";display:grid;place-items:center;width:54px;height:54px;margin:0 auto 12px;border-radius:17px;background:#eef5ff;color:#2b6dd8;font-size:26px } #appShell.pms-mode .pms-channel-grid{grid-template-columns:minmax(0,1.65fr) minmax(300px,.8fr);gap:14px} #appShell.pms-mode .pms-channel-list{display:grid;grid-template-columns:1fr;gap:9px;padding:14px} #appShell.pms-mode .pms-channel-chip{ position:relative;display:flex;align-items:center;min-height:50px;padding:10px 13px 10px 44px;border:1px solid #e1e9f3;border-radius:12px;background:#fbfdff;color:#214b80;font-size:13px } #appShell.pms-mode .pms-channel-chip::before{ content:"✓";position:absolute;left:13px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e6f8ed;color:#168b4d;font-size:12px } #appShell.pms-mode .pms-channel-chip:hover{border-color:#b9d1ef;background:#f5f9ff} #appShell.pms-mode .pms-channel-map-select{min-height:39px;background:#fff} /* ---------- dialogs retain compact behavior ---------- */ #appShell.pms-mode dialog .panel{box-shadow:none} /* ---------- responsive ---------- */ @media(max-width:1180px){ #appShell.pms-mode .pms-report-summary{grid-template-columns:repeat(3,minmax(0,1fr))} #appShell.pms-mode .pms-channel-summary{grid-template-columns:repeat(2,minmax(0,1fr))} #appShell.pms-mode .pms-room-grid,#appShell.pms-mode .pms-channel-grid{grid-template-columns:1fr} } @media(max-width:900px){ #appShell.pms-mode .page{padding:18px 16px 28px} #appShell.pms-mode .pms-page-heading{min-height:128px;padding:22px 20px} #appShell.pms-mode .pms-page-heading::before,#appShell.pms-mode .pms-page-heading::after{opacity:.55} #appShell.pms-mode .pms-page-heading h2{font-size:28px} #appShell.pms-mode .pms-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} #appShell.pms-mode .pms-report-summary{grid-template-columns:repeat(2,minmax(0,1fr))} #appShell.pms-mode .pms-mini-report{grid-template-columns:1fr} #appShell.pms-mode .pms-toolbar{align-items:stretch} #appShell.pms-mode .pms-toolbar-actions{width:100%} #appShell.pms-mode .pms-search{min-width:0;width:100%} } @media(max-width:620px){ #appShell.pms-mode .app-topbar{padding:9px 12px} #appShell.pms-mode .workspace-context{display:none} #appShell.pms-mode .pms-page-heading{min-height:112px;padding:19px 16px} #appShell.pms-mode .pms-page-heading::before,#appShell.pms-mode .pms-page-heading::after{display:none} #appShell.pms-mode .pms-page-heading h2{font-size:25px} #appShell.pms-mode .pms-kpis,#appShell.pms-mode .pms-channel-summary,#appShell.pms-mode .pms-inventory-summary,#appShell.pms-mode .pms-report-summary{grid-template-columns:1fr} #appShell.pms-mode .pms-kpi{min-height:98px} #appShell.pms-mode .pms-overview-grid{grid-template-columns:1fr} #appShell.pms-mode .pms-channel-brand span{display:none} } /* ========================================================== HotelPreflight PMS modern UI v0.27.1 Header cover + duplicate-heading cleanup + global REA footer Presentation-only: no PMS/API/business logic changes. ========================================================== */ /* Shared photographic PMS cover. A strong light gradient keeps headings readable in every supported language while the photo remains visible on the right side. */ #appShell.pms-mode .pms-page-heading{ min-height:160px; padding:30px 32px; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 34%, rgba(255,255,255,.82) 53%, rgba(255,255,255,.34) 72%, rgba(255,255,255,.08) 100%), url('hotelpreflight-pms-cover.webp') center right / cover no-repeat; border-color:rgba(202,219,240,.96); box-shadow:0 13px 34px rgba(18,54,101,.09); } #appShell.pms-mode .pms-page-heading::before, #appShell.pms-mode .pms-page-heading::after{ display:none !important; content:none !important; } #appShell.pms-mode .pms-page-heading>div{ max-width:min(720px,62%); text-shadow:0 1px 0 rgba(255,255,255,.35); } #appShell.pms-mode .pms-page-heading .eyebrow{color:#58719a} #appShell.pms-mode .pms-page-heading h2{color:#08285b} #appShell.pms-mode .pms-page-heading .muted{color:#506c91} /* Remove only duplicated heading copy from each module toolbar. Search, filters, date navigation and create buttons remain intact. */ #appShell.pms-mode #calendarWorkspace > .calendar-toolbar .calendar-title-block, #appShell.pms-mode #pmsViewReservations > .pms-toolbar > div:first-child, #appShell.pms-mode #pmsViewGuests > .pms-toolbar > div:first-child, #appShell.pms-mode #pmsViewInventory > .pms-toolbar > div:first-child, #appShell.pms-mode #pmsViewReports > .pms-toolbar > div:first-child, #appShell.pms-mode #pmsViewUsers > .pms-toolbar > div:first-child{ display:none !important; } #appShell.pms-mode #calendarWorkspace > .calendar-toolbar, #appShell.pms-mode #pmsViewReservations > .pms-toolbar, #appShell.pms-mode #pmsViewGuests > .pms-toolbar, #appShell.pms-mode #pmsViewInventory > .pms-toolbar, #appShell.pms-mode #pmsViewReports > .pms-toolbar, #appShell.pms-mode #pmsViewUsers > .pms-toolbar{ min-height:66px; padding:12px 16px; justify-content:flex-end; align-items:center; } #appShell.pms-mode #calendarWorkspace > .calendar-toolbar .calendar-actions, #appShell.pms-mode #pmsViewReservations > .pms-toolbar .pms-toolbar-actions, #appShell.pms-mode #pmsViewGuests > .pms-toolbar .pms-toolbar-actions, #appShell.pms-mode #pmsViewInventory > .pms-toolbar .pms-toolbar-actions, #appShell.pms-mode #pmsViewReports > .pms-toolbar .pms-toolbar-actions, #appShell.pms-mode #pmsViewUsers > .pms-toolbar .pms-toolbar-actions{ margin-left:auto; } /* The old Channel Manager brand panel duplicated the page title. REA attribution now lives in the global footer instead. */ #appShell.pms-mode .pms-channel-hero{display:none !important} #appShell.pms-mode[data-pms-view="channel"] .pms-page-heading{margin-bottom:14px} /* Compact, global REA attribution for the authenticated application. */ #appShell .app-footer-brand{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; } #appShell .app-footer-rea{ display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:3px 8px 3px 5px; border:1px solid rgba(154,177,207,.32); border-radius:9px; background:rgba(255,255,255,.72); color:#35557d; font-size:12px; font-weight:800; } #appShell .app-footer-rea img{ width:34px; height:22px; object-fit:contain; border-radius:5px; } @media (max-width:900px){ #appShell.pms-mode .pms-page-heading{ min-height:142px; padding:24px 22px; background: linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.94) 58%,rgba(255,255,255,.55) 100%), url('hotelpreflight-pms-cover.webp') 70% center / cover no-repeat; } #appShell.pms-mode .pms-page-heading>div{max-width:78%} } @media (max-width:640px){ #appShell.pms-mode .pms-page-heading{ min-height:126px; padding:20px 17px; background: linear-gradient(90deg,rgba(255,255,255,.99),rgba(255,255,255,.90)), url('hotelpreflight-pms-cover.webp') center / cover no-repeat; } #appShell.pms-mode .pms-page-heading>div{max-width:100%} #appShell.pms-mode #calendarWorkspace > .calendar-toolbar, #appShell.pms-mode #pmsViewReservations > .pms-toolbar, #appShell.pms-mode #pmsViewGuests > .pms-toolbar, #appShell.pms-mode #pmsViewInventory > .pms-toolbar, #appShell.pms-mode #pmsViewReports > .pms-toolbar, #appShell.pms-mode #pmsViewUsers > .pms-toolbar{ align-items:stretch; } #appShell.pms-mode #calendarWorkspace > .calendar-toolbar .calendar-actions, #appShell.pms-mode #pmsViewReservations > .pms-toolbar .pms-toolbar-actions, #appShell.pms-mode #pmsViewGuests > .pms-toolbar .pms-toolbar-actions, #appShell.pms-mode #pmsViewInventory > .pms-toolbar .pms-toolbar-actions, #appShell.pms-mode #pmsViewReports > .pms-toolbar .pms-toolbar-actions, #appShell.pms-mode #pmsViewUsers > .pms-toolbar .pms-toolbar-actions{ width:100%; margin-left:0; } }